{title}

52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3532,'use client'; import { ChevronDown, Minus, Plus } from 'lucide-react'; import { Children, createContext, forwardRef, useContext, useId, useState, type HTMLAttributes, type ReactNode, type Ref } from 'react'; import { focusRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import type { HeadingTag } from '@/components/ui/heading-tag'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; import { useLabels, usePreset } from '@/components/ui/labels-context'; // `checkbox` (default) renders checkbox rows. `toggle-links` renders link style add/remove rows (toggle buttons with aria-pressed). export type FacetSelectionMode = 'checkbox' | 'toggle-links'; // Leading colour dot of a group heading or an option. `bg-*` token classes are applied as classes, anything else (e.g. a project colour from data) as a background colour. const FacetDot = ({ color }: { color: string }) => ( ); const FacetSelectionModeContext = createContext('checkbox'); export interface FacetOperator { value: string; label: string; } export interface FacetFilterProps extends Omit, 'title'> { title?: ReactNode; // Heading element of the title, so the filter fits the document outline. Default h2. titleAs?: HeadingTag; description?: ReactNode; // Match operator switch, e.g. Partial and Exact. Omit for no switch. operators?: FacetOperator[]; operator?: string; defaultOperator?: string; onOperatorChange?: (value: string) => void; operatorLabel?: string; // Slot below the switch, e.g. a saved filter select. saved?: ReactNode; // Shows a Reset link at the right of the header and calls this when pressed. onReset?: () => void; resetLabel?: string; // Default row style of all groups. A group can override it. selectionMode?: FacetSelectionMode; // FacetGroup elements. children?: ReactNode; } // Filter column with a header, match operator and facet groups. No overlay chrome: it sits in a split view. const FacetFilter = forwardRef( ( { className, title: titleProp, titleAs: Title = 'h2', description, operators, operator, defaultOperator, onOperatorChange, operatorLabel: operatorLabelProp, saved, onReset, resetLabel: resetLabelProp, selectionMode = 'checkbox', children, ...props }, ref, ) => { const l = useLabels(); const title = titleProp ?? l.filters; const operatorLabel = operatorLabelProp ?? l.matchMode; const resetLabel = resetLabelProp ?? l.reset; const zero = usePreset() === 'zero'; const [inner, setInner] = useState(defaultOperator ?? operators?.[0]?.value ?? ''); const current = operator ?? inner; return ( ); }, ); FacetFilter.displayName = 'FacetFilter'; export interface FacetGroupProps extends Omit, 'title'> { label: string; // Heading element of the group label, so the filter fits the document outline. Default h3. titleAs?: HeadingTag; // Leading colour dot before the group label, e.g. a project colour. A `bg-*` token class or a CSS colour. dotColor?: string; // Result count after the group label. A number, or text such as "99+". count?: number | string; // Adds a search field that filters the options client side via onQueryChange (controlled). searchable?: boolean; query?: string; onQueryChange?: (query: string) => void; searchPlaceholder?: string; // Options shown before "Show n more". Omit to show all. limit?: number; moreLabel?: (hidden: number) => string; lessLabel?: string; // Makes the heading a button that collapses and expands the group. collapsible?: boolean; // Initial state when uncontrolled. defaultCollapsed?: boolean; // Controlled collapsed state. Pair with `onCollapsedChange`. collapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void; // Row style of this group, overriding the filter default. `toggle-links` renders add/remove link rows instead of checkboxes. selectionMode?: FacetSelectionMode; // FacetOption elements. children?: ReactNode; } const FacetGroup = forwardRef( ( { className, label, titleAs: Title = 'h3', dotColor, count, searchable = false, query, onQueryChange, searchPlaceholder: searchPlaceholderProp, limit, moreLabel: moreLabelProp, lessLabel: lessLabelProp, collapsible = false, defaultCollapsed = false, collapsed: collapsedProp, onCollapsedChange, selectionMode: selectionModeProp, children, ...props }, ref, ) => { const l = useLabels(); const inheritedMode = useContext(FacetSelectionModeContext); const selectionMode = selectionModeProp ?? inheritedMode; const zero = usePreset() === 'zero'; const searchPlaceholder = searchPlaceholderProp ?? l.search; const moreLabel = moreLabelProp ?? l.showMore; const lessLabel = lessLabelProp ?? l.showLess; const [expanded, setExpanded] = useState(false); const listId = useId(); const bodyId = useId(); const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed); const collapsed = collapsible && (collapsedProp ?? innerCollapsed); const toggleCollapsed = () => { if (collapsedProp === undefined) setInnerCollapsed(!collapsed); onCollapsedChange?.(!collapsed); }; const options = Children.toArray(children); const hidden = limit != null && !expanded ? Math.max(0, options.length - limit) : 0; const visible = limit != null && !expanded ? options.slice(0, limit) : options; // Without dot and count the heading stays a plain text node. const headingContent = dotColor || count != null ? ( {dotColor ? : null} {label} {count != null ? {count} : null} ) : ( label ); return (

{collapsible ? ( <button type="button" aria-expanded={!collapsed} aria-controls={bodyId} onClick={toggleCollapsed} className={cn('typography-ui-medium flex w-full items-center justify-between gap-2 rounded-item text-left', focusRing)} > {headingContent} <ChevronDown aria-hidden="true" className={cn('h-icon-xs w-icon-xs shrink-0 transition-transform motion-reduce:transition-none', collapsed && '-rotate-90')} /> </button> ) : ( headingContent )}

{searchable ? ( onQueryChange?.(e.target.value)} /> ) : null}

{option}

{limit != null && options.length > limit ? ( ) : null}

); }, ); FacetGroup.displayName = 'FacetGroup'; export interface FacetOptionProps extends Omit, 'onChange'> { label: ReactNode; checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; disabled?: boolean; // Leading colour dot before the label (after the checkbox or add/remove icon), e.g. a project colour. A `bg-*` token class or a CSS colour. dotColor?: string; // Result count next to the label. A number, or text such as "99+" or "n/a". count?: number | string; } const FacetOption = forwardRef( ({ className, label, checked, defaultChecked, onCheckedChange, disabled, dotColor, count, ...props }, ref) => { const id = useId(); const labelId = useId(); const mode = useContext(FacetSelectionModeContext); // Zero: 28px rows with the 16px checkbox. const zero = usePreset() === 'zero'; const [inner, setInner] = useState(defaultChecked ?? false); const selected = checked ?? inner; if (mode === 'toggle-links') { const { onClick, ...rest } = props as HTMLAttributes; return ( ); } return ( onCheckedChange?.(value === true)} /> {dotColor ? : null} {label} {count != null ? {count} : null} ); }, ); FacetOption.displayName = 'FacetOption'; export { FacetFilter, FacetGroup, FacetOption }; 51:["$","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@^0.379.0",{"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@^0.379.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/checkbox.json","https://zero-design.itdone.de/r/heading-tag.json","https://zero-design.itdone.de/r/input.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/toggle-group.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/facet-filter.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]