{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "search-results-page", "title": "Search Results Page", "type": "registry:page", "description": "Full search results page: large pre-filled search input with result count, removable filter chips with clear-all, a left facet sidebar with Type and Team checkbox groups (hidden below lg), six result rows with icon tiles, titles, paths, snippets, and type/updated meta, plus a Previous/Next pagination footer. Chips and facets are interactive; swap the stub rows for your search source.", "categories": [ "layout", "app" ], "files": [ { "path": "packages/elements-lit/src/blocks/search-results-page/search-results-page.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { BookOpen, FileText, GitBranch, MessageSquare, Search, Users, Video, type IconNode } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/checkbox/checkbox'\nimport '../../components/chip/chip'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\n\ninterface SearchResult {\n id: string\n icon: IconNode\n iconName: string\n heading: string\n path: string\n snippet: string\n type: string\n updated: string\n}\n\ninterface FacetOption {\n id: string\n label: string\n count: number\n}\n\ninterface FacetGroup {\n id: string\n label: string\n options: FacetOption[]\n}\n\ninterface Chip {\n id: string\n label: string\n}\n\nconst RESULTS: SearchResult[] = [\n {\n id: 'r1',\n icon: BookOpen,\n iconName: 'book-open',\n heading: 'Onboarding flows: design your first-run experience',\n path: 'docs.acme.dev / guides / onboarding-flows',\n snippet:\n 'Learn how to compose onboarding flows from checklists, tours, and progressive disclosure so new users reach their first aha moment faster.',\n type: 'Docs',\n updated: '2 days ago',\n },\n {\n id: 'r2',\n icon: FileText,\n iconName: 'file-text',\n heading: 'Checklist API reference for onboarding flows',\n path: 'docs.acme.dev / api / checklist',\n snippet:\n 'Full reference for the Checklist primitive used to drive onboarding flows, including step completion events, persistence, and theming.',\n type: 'Reference',\n updated: '5 hours ago',\n },\n {\n id: 'r3',\n icon: Video,\n iconName: 'video',\n heading: 'Video walkthrough: building onboarding flows in 20 minutes',\n path: 'learn.acme.dev / videos / onboarding-flows-walkthrough',\n snippet:\n 'A hands-on screencast that builds a complete onboarding flow with branching steps, skippable tours, and analytics instrumentation.',\n type: 'Video',\n updated: '1 week ago',\n },\n {\n id: 'r4',\n icon: MessageSquare,\n iconName: 'message-square',\n heading: 'How do you measure completion of onboarding flows?',\n path: 'community.acme.dev / discussions / 4821',\n snippet:\n 'Community thread comparing activation-rate funnels, step-drop-off charts, and qualitative surveys for measuring onboarding flow success.',\n type: 'Discussion',\n updated: '3 days ago',\n },\n {\n id: 'r5',\n icon: GitBranch,\n iconName: 'git-branch',\n heading: 'Example repo: onboarding flows with A/B-tested variants',\n path: 'github.com / acme / examples / onboarding-ab-test',\n snippet:\n 'Runnable example that splits new signups into two onboarding flow variants and reports which one converts better to first project creation.',\n type: 'Example',\n updated: '2 weeks ago',\n },\n {\n id: 'r6',\n icon: Users,\n iconName: 'users',\n heading: 'Playbook: personalizing onboarding flows by team role',\n path: 'docs.acme.dev / playbooks / role-based-onboarding',\n snippet:\n 'Patterns for tailoring onboarding flows to admins, editors, and viewers, with sample copy, suggested defaults, and rollout checklists.',\n type: 'Guide',\n updated: '4 days ago',\n },\n]\n\nconst FACET_GROUPS: FacetGroup[] = [\n {\n id: 'type',\n label: 'Type',\n options: [\n { id: 'type-docs', label: 'Docs', count: 18 },\n { id: 'type-guides', label: 'Guides', count: 11 },\n { id: 'type-video', label: 'Video', count: 7 },\n { id: 'type-discussion', label: 'Discussion', count: 6 },\n ],\n },\n {\n id: 'team',\n label: 'Team',\n options: [\n { id: 'team-product', label: 'Product', count: 14 },\n { id: 'team-engineering', label: 'Engineering', count: 16 },\n { id: 'team-design', label: 'Design', count: 8 },\n { id: 'team-support', label: 'Support', count: 4 },\n ],\n },\n]\n\nconst TOTAL_PAGES = 3\n\n/**\n * — the registry SearchResultsPage block as a web\n * component.\n *\n * Class strings are React's SearchResultsPage verbatim. React state (query,\n * chips, facets, page) becomes @state fields. No props, no events: swap the\n * stub rows for your search source.\n *\n * Deviations: result `title` is `heading` in the internal row type only (no\n * public prop, no rename needed). The search field icon moves from React's\n * absolute overlay into 's prefix slot (same visual result; the\n * input's `pl-9` is dropped since the slot provides the gutter).\n */\nexport class UipSearchResultsPage extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n query: { state: true },\n chips: { state: true },\n activeFacets: { state: true },\n page: { state: true },\n }\n\n private query = 'onboarding flows'\n private chips: Chip[] = [\n { id: 'type-docs', label: 'Type: Docs' },\n { id: 'team-product', label: 'Team: Product' },\n ]\n private activeFacets: Set = new Set(['type-docs', 'team-product'])\n private page = 1\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'search-results-page')\n }\n\n private removeChip(id: string) {\n this.chips = this.chips.filter((chip) => chip.id !== id)\n }\n\n private toggleFacet(id: string, checked: boolean) {\n const next = new Set(this.activeFacets)\n if (checked) next.add(id)\n else next.delete(id)\n this.activeFacets = next\n }\n\n render() {\n const start = (this.page - 1) * RESULTS.length + 1\n const resultRange = `${start}-${start + RESULTS.length - 1}`\n return html`\n
\n
\n
\n {\n this.query = (e.target as UipInput).value\n }}\n >\n ${icon(Search, 'search', 'size-4')}\n \n
\n

${resultRange} of 42 results for “${this.query}”

\n
\n\n ${this.chips.length > 0\n ? html`
\n ${this.chips.map(\n (chip) => html`\n this.removeChip(chip.id)}>\n ${chip.label}\n \n `,\n )}\n (this.chips = [])}\n >\n Clear all\n \n
`\n : nothing}\n\n
\n \n\n
\n
    \n ${RESULTS.map(\n (result) => html`\n
  1. \n \n
    \n \n ${icon(result.icon, result.iconName, 'size-5')}\n
    \n
    \n

    ${result.heading}

    \n

    ${result.path}

    \n

    ${result.snippet}

    \n
    \n ${result.type}\n Updated ${result.updated}\n
    \n
    \n
\n \n \n `,\n )}\n \n\n \n
\n
\n \n `\n }\n}\n\ncustomElements.get('uip-search-results-page') || customElements.define('uip-search-results-page', UipSearchResultsPage)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-search-results-page': UipSearchResultsPage\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/search-results-page/search-results-page.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/checkbox.json", "https://uipkge.dev/r/lit/chip.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json" ] }