{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "faq89", "title": "Filterable Glossary", "description": "A jargon glossary whose letter filter is derived from the terms themselves, narrowing a two-column hairline definition list with an empty state and a suggest-a-term action.", "dependencies": [ "clsx", "tailwind-merge", "lucide-react" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/faq89/faq89.tsx", "content": "\"use client\";\n\nimport { Badge23 } from \"@/components/beste/component/badge23\";\nimport { Button21 } from \"@/components/beste/component/button21\";\nimport { cn } from \"@/lib/utils\";\nimport Link from \"next/link\";\nimport { useState } from \"react\";\n\ninterface Badge {\n label: string;\n}\n\ninterface ActionLink {\n label: string;\n href: string;\n}\n\ninterface Term {\n term: string;\n definition: string;\n}\n\ninterface Faq89Props {\n badge?: Badge;\n heading?: string;\n description?: string;\n allLabel?: string;\n terms?: Term[];\n emptyLabel?: string;\n closing?: string;\n button?: ActionLink;\n className?: string;\n}\n\nexport const faq89Demo: Faq89Props = {\n badge: { label: \"Plain English\" },\n heading: \"The words we use, and what we actually mean by them\",\n description:\n \"Clinical software collects vocabulary. Here is ours, defined by someone who has to explain it on calls.\",\n allLabel: \"All\",\n terms: [\n {\n term: \"Backfill\",\n definition:\n \"When a cancelled slot is offered to the waiting list automatically and taken by whoever confirms first. Nobody rings round.\",\n },\n {\n term: \"Capacity\",\n definition:\n \"Rooms multiplied by opening hours, minus what is already booked. It is measured against rooms rather than clinicians, because rooms are the thing you cannot add on a Tuesday.\",\n },\n {\n term: \"Care plan\",\n definition:\n \"A repeating series of appointments attached to one member, billed as a block rather than one visit at a time.\",\n },\n {\n term: \"Dry run\",\n definition:\n \"Your real data loaded into a private workspace nobody outside your practice can reach, so your team can break it without consequence.\",\n },\n {\n term: \"Field mapping\",\n definition:\n \"Agreeing what each column in your old export becomes in the new record. One hour, once, with your practice lead.\",\n },\n {\n term: \"Member\",\n definition:\n \"The person receiving care. We avoid 'patient' because half the practices on the platform do not use it.\",\n },\n {\n term: \"Role\",\n definition:\n \"A named job with an access level attached, like Reception or Locum. There are six and none of them are a checkbox grid.\",\n },\n {\n term: \"Seat\",\n definition:\n \"One person with a login. Seats move up and down mid-month and we prorate both directions.\",\n },\n {\n term: \"Site\",\n definition:\n \"One physical clinic. Sites share a waiting list and capacity but keep their own rooms, hours, and rules.\",\n },\n {\n term: \"Utilisation\",\n definition:\n \"The share of available room hours that were actually booked. The number most practices are trying to move.\",\n },\n ],\n emptyLabel: \"Nothing filed under that letter.\",\n closing: \"Missing a word you keep having to explain to us? Tell us and it goes on the list.\",\n button: { label: \"Suggest a term\", href: \"https://beste.co\" },\n};\n\nexport function Faq89({\n badge,\n heading,\n description,\n allLabel = \"All\",\n terms = [],\n emptyLabel,\n closing,\n button,\n className,\n}: Faq89Props) {\n const [letter, setLetter] = useState(null);\n\n const letters = Array.from(new Set(terms.map((term) => term.term.charAt(0).toUpperCase()))).sort();\n const visible = letter\n ? terms.filter((term) => term.term.charAt(0).toUpperCase() === letter)\n : terms;\n\n return (\n
\n
\n {badge && }\n\n
\n
\n {heading && (\n

\n {heading}\n

\n )}\n {description && (\n
\n

\n {description}\n

\n
\n )}\n
\n
\n\n
\n setLetter(null)}\n aria-pressed={letter === null}\n className={cn(\n \"cursor-pointer rounded-md border px-3 py-1.5 text-sm transition-colors\",\n letter === null\n ? \"border-foreground bg-foreground text-background\"\n : \"border-border bg-transparent text-muted-foreground hover:text-foreground\"\n )}\n >\n {allLabel}\n \n {letters.map((entry, index) => {\n const isActive = letter === entry;\n return (\n setLetter(entry)}\n aria-pressed={isActive}\n className={cn(\n \"size-9 cursor-pointer rounded-md border text-sm transition-colors\",\n isActive\n ? \"border-foreground bg-foreground text-background\"\n : \"border-border bg-transparent text-muted-foreground hover:text-foreground\"\n )}\n >\n {entry}\n \n );\n })}\n
\n\n
\n {visible.map((term, index) => (\n \n
{term.term}
\n
\n {term.definition}\n
\n
\n ))}\n \n\n {visible.length === 0 && emptyLabel && (\n

\n {emptyLabel}\n

\n )}\n\n
\n {closing &&

{closing}

}\n {button && (\n \n \n \n )}\n
\n \n
\n );\n}\n", "type": "registry:component", "target": "components/beste/block/faq89.tsx" }, { "path": "registry-components/badge23/badge23.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"muted\" | \"foreground\" | \"primary\";\n\ninterface Badge23Props {\n /** Eyebrow label (rendered uppercase) */\n label: string;\n /** Text/border tone */\n tone?: Tone;\n /** Additional classes merged onto the root */\n className?: string;\n}\n\nconst toneStyles: Record = {\n muted: \"border-border text-muted-foreground\",\n foreground: \"border-foreground/30 text-foreground\",\n primary: \"border-primary/40 text-primary\",\n};\n\nexport const badge23Demo: Badge23Props = {\n label: \"Product\",\n};\n\nexport function Badge23({ label, tone = \"muted\", className }: Badge23Props) {\n return (\n \n {label}\n \n );\n}\n", "type": "registry:component", "target": "components/beste/component/badge23.tsx" }, { "path": "registry-components/button21/button21.tsx", "content": "\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"primary\" | \"neutral\" | \"outline\";\n\ninterface Button21Props {\n /** Button label */\n label: string;\n /**\n * Compose the rendered element shadcn-style (radix asChild): your element\n * (e.g. a router Link) becomes the root and the button content is injected\n * as its children. Pass the element without children of its own.\n */\n asChild?: boolean;\n /** The element to render when `asChild` is set (e.g. your framework's Link) */\n children?: React.ReactElement;\n /**\n * Fallback link: renders a plain ``. Prefer `asChild` with your\n * framework's Link component for client-side navigation.\n */\n href?: string;\n /** Optional trailing icon */\n icon?: LucideIcon;\n /** Surface tone: solid accent (default), soft neutral pill, or hairline outline */\n tone?: Tone;\n /** Click handler (used when there is no href and no asChild) */\n onClick?: React.MouseEventHandler;\n /** Additional classes merged onto the button */\n className?: string;\n}\n\nconst toneStyles: Record = {\n primary: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n neutral: \"bg-muted text-foreground hover:bg-muted/70\",\n outline: \"border border-border bg-transparent text-foreground hover:bg-muted\",\n};\n\nexport const button21Demo: Button21Props = {\n label: \"Book a demo\",\n};\n\nexport function Button21({\n label,\n asChild = false,\n children,\n href,\n icon: Icon,\n tone = \"primary\",\n onClick,\n className,\n}: Button21Props) {\n const classes = cn(\n \"group/button21 h-auto w-fit gap-2 rounded-md px-5 py-2.5 text-sm font-medium tracking-tight transition-colors\",\n toneStyles[tone],\n className\n );\n\n const inner = (\n <>\n {label}\n {Icon && (\n \n )}\n \n );\n\n if (asChild && React.isValidElement(children)) {\n return (\n \n );\n }\n\n if (href) {\n return (\n \n );\n }\n\n return (\n \n );\n}\n", "type": "registry:component", "target": "components/beste/component/button21.tsx" } ], "type": "registry:block" }