4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1908,'use client'; import * as React from 'react'; import { Check } from 'lucide-react'; import { cn } from '@/lib/utils'; /** Props for {@link CategoryFacetList}. */ export interface CategoryFacetListProps { /** The category values to render, in display order. */ categories: string[]; /** * Per-category item counts, keyed by category. Missing keys render `0`. Pass * `false` to hide count badges entirely. */ counts?: Record | false; /** * The currently selected category, or `null` when none is selected ("All"). * Single-select: re-selecting the active category deselects it. */ selected: string | null; /** * Called with the next selection: the clicked category, or `null` when the * active category is re-clicked or "All" is activated. */ onSelect: (category: string | null) => void; /** * Layout: a vertical list (default) or a wrapping row of pills. * @default "list" */ variant?: 'list' | 'pills'; /** * Label for the clear-selection affordance. * @default "All" */ allLabel?: string; /** * Show the "All"/clear affordance. * @default true */ showAll?: boolean; /** Additional class names merged onto the root element. */ className?: string; } /** * A domain-decoupled, filterable category facet. Renders a single-select list * or pill row with per-category count badges, an active highlight, and an * "All"/clear affordance. Re-clicking the active category deselects it. * * It takes `categories` + `counts` + `selected` + `onSelect`, so it serves any * facet source: `useSemanticSearch` result metadata, zero-shot classification * labels, NER entity types, or document categories alike. * * Styled with shadcn/ui CSS variables so it inherits the consumer's theme. * * @example * ```tsx * const counts = results.reduce>((acc, r) => { * const c = String(r.metadata.category ?? 'uncategorized'); * acc[c] = (acc[c] ?? 0) + 1; * return acc; * }, {}); * * * ``` */ export function CategoryFacetList({ categories, counts, selected, onSelect, variant = 'list', allLabel = 'All', showAll = true, className, }: CategoryFacetListProps) { const countMap = counts === false ? undefined : counts; const showCounts = counts !== false; const countFor = (c: string) => countMap?.[c] ?? 0; const total = showCounts ? categories.reduce((sum, c) => sum + countFor(c), 0) : undefined; /** Toggle behaviour: re-clicking the active item clears the selection. */ const handleClick = (category: string) => { onSelect(selected === category ? null : category); }; if (variant === 'pills') { return (

{showAll && ( onSelect(null)} /> )} {categories.map((category) => ( handleClick(category)} /> ))}

); } return (

{showAll && ( onSelect(null)} /> )} {categories.map((category) => ( handleClick(category)} /> ))}

); } /** A single vertical-list facet row. */ function Row({ label, count, active, onClick, }: { label: string; count?: number; active: boolean; onClick: () => void; }) { return ( ); } /** A single horizontal-pill facet. */ function Pill({ label, count, active, onClick, }: { label: string; count?: number; active: boolean; onClick: () => void; }) { return ( ); } export default CategoryFacetList; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/localmode/data-documents/category-facet-list/category-facet-list.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]