{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "filter-bar", "type": "registry:component", "title": "FilterBar", "description": "Build editable field, operator, and value filters with a button or inline search.", "dependencies": [ "@base-ui/react@^1.8.0", "lucide-react@^1.47.0" ], "registryDependencies": [ "https://control-ui.dev/r/button.json", "https://control-ui.dev/r/combobox.json", "https://control-ui.dev/r/core.json" ], "files": [ { "path": "src/registry/knob-contracts/filter-bar-knobs.ts", "target": "@components/control-ui/knob-contracts/filter-bar-knobs.ts", "type": "registry:component", "content": "// Generated from src/registry/sources/control-ui/recipes/filter-bar.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const filterBarKnobs = [\n \"--cui-filter-bar-background\",\n \"--cui-filter-bar-foreground\",\n \"--cui-filter-bar-border-color\",\n \"--cui-filter-bar-border-width\",\n \"--cui-filter-bar-radius\",\n \"--cui-filter-bar-height\",\n \"--cui-filter-bar-gap\",\n \"--cui-filter-bar-padding-inline\",\n \"--cui-filter-bar-font-size\",\n \"--cui-filter-bar-hover-background\",\n \"--cui-filter-bar-focus-ring-color\",\n] as const;\nexport type FilterBarKnobStyle = Partial>;\n" }, { "path": "src/registry/sources/control-ui/filter-bar.tsx", "target": "@components/control-ui/filter-bar.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { ComponentProps, CSSProperties, KeyboardEvent } from \"react\";\nimport { useState } from \"react\";\nimport type { FilterBarKnobStyle } from \"@/components/control-ui/knob-contracts/filter-bar-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { FilterBarContext, type FilterBarContextValue, type FilterBarExit } from \"./filter-bar/context\";\nimport { fieldOperators, filterNavigationKeys } from \"./filter-bar/model\";\nimport { filterMotionEnabled, useFilterBarMotion } from \"./filter-bar/motion\";\nimport { FilterBarAddButton, FilterBarChip, FilterBarChips, FilterBarClear, FilterBarInput } from \"./filter-bar/parts\";\nimport type { FilterBarDraft, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarStage, FilterBarValue } from \"./filter-bar/types\";\n\nexport type { FilterBarChipProps } from \"./filter-bar/parts\";\nexport type {\n FilterBarField,\n FilterBarItem,\n FilterBarOperator,\n FilterBarOption,\n FilterBarQuery,\n FilterBarScalar,\n FilterBarValue,\n} from \"./filter-bar/types\";\n\nexport type FilterBarRootProps = Omit, \"onChange\" | \"style\"> & {\n fields: readonly FilterBarField[];\n operators: readonly FilterBarOperator[];\n value: readonly FilterBarItem[];\n onValueChange: (value: FilterBarItem[]) => void;\n createItemId?: () => string;\n disabled?: boolean;\n readOnly?: boolean;\n style?: CSSProperties & FilterBarKnobStyle;\n};\n\nfunction FilterBarRoot({\n fields,\n operators,\n value,\n onValueChange,\n createItemId = () => crypto.randomUUID(),\n disabled = false,\n readOnly = false,\n className,\n children,\n ref,\n \"aria-label\": ariaLabel = \"Filters\",\n ...props\n}: FilterBarRootProps) {\n const [draft, setDraft] = useState(null);\n const [exits, setExits] = useState([]);\n const [announcement, setAnnouncement] = useState(\"\");\n const [focusNodes] = useState(() => new Map());\n const { rootRef, ...motion } = useFilterBarMotion();\n\n function register(key: string, element: HTMLElement | null) {\n if (key.startsWith(\"chip:\") || key.startsWith(\"entry:\")) motion.register(key, element);\n if (element) focusNodes.set(key, element);\n else focusNodes.delete(key);\n }\n\n function transition(next: FilterBarDraft) {\n motion.capture();\n setDraft(next);\n if (next.stage === \"value\" && next.fieldId && next.operatorId) {\n fields\n .find((field) => field.id === next.fieldId)\n ?.onQueryChange?.({ fieldId: next.fieldId, operatorId: next.operatorId, query: next.query });\n }\n }\n\n function start(owner: string, anchor: HTMLElement, stage: FilterBarStage = \"field\", item?: FilterBarItem, initialQuery?: string) {\n if (disabled || readOnly) return;\n if (draft?.owner === owner && draft.stage === stage) return;\n const values = item?.value === null || item?.value === undefined ? [] : [item.value].flat();\n const query = initialQuery ?? \"\";\n transition({\n id: item?.id ?? createItemId(),\n owner,\n anchor,\n stage,\n fieldId: item?.fieldId,\n operatorId: item?.operatorId,\n values,\n query,\n editing: Boolean(item),\n });\n }\n\n function close(restoreFocus = true) {\n motion.capture();\n if (restoreFocus && draft?.anchor.isConnected) draft.anchor.focus();\n setDraft(null);\n }\n\n function back() {\n if (!draft) return;\n if (draft.stage === \"field\") return close();\n if (draft.stage === \"operator\") return transition({ ...draft, stage: \"field\", operatorId: undefined, values: [], query: \"\" });\n const field = fields.find((candidate) => candidate.id === draft.fieldId);\n const stage = field && fieldOperators(field, operators).length === 1 ? \"field\" : \"operator\";\n transition({ ...draft, stage, values: [], query: \"\" });\n }\n\n function setQuery(query: string) {\n if (!draft) return;\n setDraft({ ...draft, query });\n if (draft.stage === \"value\" && draft.fieldId && draft.operatorId) {\n fields.find((field) => field.id === draft.fieldId)?.onQueryChange?.({ fieldId: draft.fieldId, operatorId: draft.operatorId, query });\n }\n }\n\n function commitDraft(next: FilterBarDraft, nextValue: FilterBarValue) {\n if (disabled || readOnly) return;\n if (!next.fieldId || !next.operatorId) return;\n const item: FilterBarItem = { id: next.id, fieldId: next.fieldId, operatorId: next.operatorId, value: nextValue };\n motion.capture();\n onValueChange(next.editing ? value.map((current) => (current.id === item.id ? item : current)) : [...value, item]);\n setAnnouncement(next.editing ? \"Filter updated.\" : \"Filter added.\");\n if (next.anchor.isConnected) next.anchor.focus();\n setDraft(null);\n }\n\n function selectOperator(operatorId: string, next = draft) {\n if (!next) return;\n const operator = operators.find((candidate) => candidate.id === operatorId);\n if (!operator) return;\n const nextDraft: FilterBarDraft = { ...next, operatorId, stage: \"value\", values: [], query: \"\" };\n if (operator.arity === \"none\") commitDraft(nextDraft, null);\n else transition(nextDraft);\n }\n\n function selectField(fieldId: string) {\n if (!draft) return;\n const field = fields.find((candidate) => candidate.id === fieldId);\n if (!field) return;\n const available = fieldOperators(field, operators);\n const next: FilterBarDraft = { ...draft, fieldId, operatorId: undefined, stage: \"operator\", values: [], query: \"\" };\n if (available.length === 1 && available[0]) selectOperator(available[0].id, next);\n else transition(next);\n }\n\n function addExits(items: readonly FilterBarItem[]) {\n const root = rootRef.current;\n if (!root || !filterMotionEnabled(root)) return;\n const rootBounds = root.getBoundingClientRect();\n const leaving = items.flatMap((item) => {\n const node = focusNodes.get(`chip:${item.id}`);\n if (!node) return [];\n const bounds = node.getBoundingClientRect();\n return [\n {\n item,\n style: {\n position: \"absolute\",\n left: bounds.left - rootBounds.left,\n top: bounds.top - rootBounds.top,\n width: bounds.width,\n height: bounds.height,\n },\n } satisfies FilterBarExit,\n ];\n });\n setExits((current) => [...current, ...leaving]);\n }\n\n function focusEntry() {\n const entry = [...focusNodes].find(([key]) => key.startsWith(\"entry:\"));\n entry?.[1].focus();\n }\n\n function remove(item: FilterBarItem) {\n if (disabled || readOnly) return;\n motion.capture();\n addExits([item]);\n const index = value.findIndex((candidate) => candidate.id === item.id);\n const neighbour = value[index + 1] ?? value[index - 1];\n if (neighbour) focusNodes.get(`${neighbour.id}:field`)?.focus();\n else focusEntry();\n if (draft?.id === item.id) setDraft(null);\n onValueChange(value.filter((candidate) => candidate.id !== item.id));\n setAnnouncement(\"Filter removed.\");\n }\n\n function clear() {\n if (disabled || readOnly) return;\n motion.capture();\n addExits(value);\n setDraft(null);\n onValueChange([]);\n focusEntry();\n setAnnouncement(\"Filters cleared.\");\n }\n\n function deleteFocusedFilter(event: KeyboardEvent, itemId: string) {\n const item = value.find((candidate) => candidate.id === itemId);\n if (!item) return;\n event.preventDefault();\n remove(item);\n }\n\n function focusAdjacentFilter(event: KeyboardEvent, itemId?: string, part?: string) {\n const keys = filterNavigationKeys(value);\n const index = itemId ? keys.indexOf(`${itemId}:${part}`) : keys.length;\n const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n const target = keys[index + direction];\n event.preventDefault();\n if (target) focusNodes.get(target)?.focus();\n else if (itemId) focusEntry();\n }\n\n function navigate(event: KeyboardEvent, itemId?: string, part?: string) {\n if (event.defaultPrevented) return;\n const removing = event.key === \"Delete\" || event.key === \"Backspace\";\n if (itemId && removing) return deleteFocusedFilter(event, itemId);\n if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") focusAdjacentFilter(event, itemId, part);\n }\n\n const context: FilterBarContextValue = {\n fields,\n operators,\n items: value,\n draft,\n exits,\n disabled,\n readOnly,\n register,\n start,\n close,\n back,\n setQuery,\n selectField,\n selectOperator,\n selectValues: (values) => {\n if (draft) transition({ ...draft, values, query: \"\" });\n },\n commit: (nextValue) => {\n if (draft) commitDraft(draft, nextValue);\n },\n remove,\n clear,\n releaseExit: (id) => setExits((current) => current.filter((exit) => exit.item.id !== id)),\n navigate,\n };\n\n const rootElement = useRender({\n ref: [rootRef, ref ?? null],\n render: (\n \n {children}\n \n {announcement}\n \n \n ),\n });\n return {rootElement};\n}\n\nexport const FilterBar = {\n Root: FilterBarRoot,\n Chips: FilterBarChips,\n Chip: FilterBarChip,\n AddButton: FilterBarAddButton,\n Input: FilterBarInput,\n Clear: FilterBarClear,\n};\n\nexport const DEFAULT_FILTER_OPERATORS: readonly FilterBarOperator[] = [\n { id: \"is\", label: \"is\" },\n { id: \"is-not\", label: \"is not\" },\n { id: \"contains\", label: \"contains\" },\n { id: \"starts-with\", label: \"starts with\" },\n { id: \"gt\", label: \">\" },\n { id: \"gte\", label: \"≥\" },\n { id: \"lt\", label: \"<\" },\n { id: \"lte\", label: \"≤\" },\n { id: \"in\", label: \"is any of\", arity: \"many\" },\n { id: \"is-empty\", label: \"is empty\", arity: \"none\" },\n { id: \"is-not-empty\", label: \"is not empty\", arity: \"none\" },\n];\n" }, { "path": "src/registry/sources/control-ui/filter-bar/context.tsx", "target": "@components/control-ui/filter-bar/context.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport type { CSSProperties, KeyboardEvent } from \"react\";\nimport { createContext, use } from \"react\";\nimport type {\n FilterBarDraft,\n FilterBarField,\n FilterBarItem,\n FilterBarOperator,\n FilterBarScalar,\n FilterBarStage,\n FilterBarValue,\n} from \"./types\";\n\nexport type FilterBarExit = { item: FilterBarItem; style: CSSProperties };\n\nexport type FilterBarContextValue = {\n fields: readonly FilterBarField[];\n operators: readonly FilterBarOperator[];\n items: readonly FilterBarItem[];\n draft: FilterBarDraft | null;\n exits: FilterBarExit[];\n disabled: boolean;\n readOnly: boolean;\n register: (key: string, element: HTMLElement | null) => void;\n start: (owner: string, anchor: HTMLElement, stage?: FilterBarStage, item?: FilterBarItem, query?: string) => void;\n close: (restoreFocus?: boolean) => void;\n back: () => void;\n setQuery: (query: string) => void;\n selectField: (fieldId: string) => void;\n selectOperator: (operatorId: string) => void;\n selectValues: (values: FilterBarScalar[]) => void;\n commit: (value: FilterBarValue) => void;\n remove: (item: FilterBarItem) => void;\n clear: () => void;\n releaseExit: (id: string) => void;\n navigate: (event: KeyboardEvent, itemId?: string, part?: string) => void;\n};\n\nexport const FilterBarContext = createContext(null);\n\nexport function useFilterBarContext() {\n const context = use(FilterBarContext);\n if (!context) throw new Error(\"FilterBar parts must be used inside FilterBar.Root.\");\n return context;\n}\n" }, { "path": "src/registry/sources/control-ui/filter-bar/editor.tsx", "target": "@components/control-ui/filter-bar/editor.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport type { KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { useRef } from \"react\";\nimport type { OpenChangeEventDetails } from \"@/components/control-ui/control-props\";\nimport { Button } from \"@/components/control-ui/ui/button\";\nimport {\n Combobox,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxInput,\n type ComboboxInputProps,\n ComboboxItem,\n ComboboxList,\n} from \"@/components/control-ui/ui/combobox\";\nimport { type FilterBarContextValue, useFilterBarContext } from \"./context\";\nimport { allowsCustomValue, fieldOperators, fieldOptions, parseCustomValue } from \"./model\";\nimport type { FilterBarDraft, FilterBarField, FilterBarScalar, FilterBarStage } from \"./types\";\n\ntype FilterChoice = { id: string; label: string; icon?: ReactNode; value?: FilterBarScalar; disabled?: boolean };\n\nfunction valueChoice(value: FilterBarScalar, label: string): FilterChoice {\n return { id: `${typeof value}:${value}`, value, label };\n}\n\nfunction sameChoice(first: FilterChoice, second: FilterChoice) {\n return first.id === second.id;\n}\n\nfunction valueChoices(field: FilterBarField, query: string) {\n const choices: FilterChoice[] = fieldOptions(field).map((option) => ({\n ...valueChoice(option.value, option.label),\n icon: option.icon,\n disabled: option.disabled,\n }));\n const customValue = allowsCustomValue(field) ? parseCustomValue(field, query) : undefined;\n if (customValue !== undefined && !choices.some((choice) => choice.value === customValue))\n choices.push(valueChoice(customValue, `Use “${customValue}”`));\n return choices;\n}\n\nfunction editorChoices(context: FilterBarContextValue, draft: FilterBarDraft | null): FilterChoice[] {\n if (!draft || draft.stage === \"field\")\n return context.fields\n .filter((candidate) => fieldOperators(candidate, context.operators).length > 0)\n .map((candidate) => ({ id: candidate.id, label: candidate.label, icon: candidate.icon }));\n const field = context.fields.find((candidate) => candidate.id === draft.fieldId);\n if (!field) return [];\n if (draft.stage === \"operator\")\n return fieldOperators(field, context.operators).map((operator) => ({ id: operator.id, label: operator.label }));\n return valueChoices(field, draft.query);\n}\n\nfunction searchLabel(stage: FilterBarStage, field: FilterBarField | undefined) {\n if (stage === \"field\") return \"Filter field\";\n if (stage === \"operator\") return \"Filter operator\";\n return `${field?.label ?? \"Filter\"} value`;\n}\n\nfunction handleSelection(context: FilterBarContextValue, draft: FilterBarDraft | null, choice: FilterChoice | FilterChoice[] | null) {\n if (!choice || !draft) return;\n const field = context.fields.find((candidate) => candidate.id === draft.fieldId);\n if (draft.stage === \"value\" && (field?.loading || field?.error)) return;\n if (Array.isArray(choice)) context.selectValues(choice.flatMap((selected) => (selected.value === undefined ? [] : [selected.value])));\n else if (draft.stage === \"field\") context.selectField(choice.id);\n else if (draft.stage === \"operator\") context.selectOperator(choice.id);\n else if (choice.value !== undefined) context.commit(choice.value);\n}\n\nfunction handleEditorKeyDown(context: FilterBarContextValue, draft: FilterBarDraft | null, event: KeyboardEvent) {\n if (event.nativeEvent.isComposing) return false;\n const backwards = event.key === \"Escape\" || (event.key === \"Backspace\" && draft?.query === \"\");\n if (draft && backwards) {\n event.preventDefault();\n event.stopPropagation();\n context.back();\n return true;\n }\n const operator = context.operators.find((candidate) => candidate.id === draft?.operatorId);\n const field = context.fields.find((candidate) => candidate.id === draft?.fieldId);\n const committing = draft?.stage === \"value\" && operator?.arity === \"many\" && event.key === \"Enter\" && (event.metaKey || event.ctrlKey);\n if (!committing || !draft || draft.values.length === 0 || field?.loading || field?.error) return false;\n event.preventDefault();\n context.commit(draft.values);\n return true;\n}\n\nfunction EditorOptions({ field, invalidNumber }: { field?: FilterBarField; invalidNumber: boolean }) {\n if (field?.loading || field?.error)\n return (\n
\n {field.error ?? \"Loading values…\"}\n
\n );\n return (\n <>\n {invalidNumber ? \"Enter a finite number.\" : \"No matching options.\"}\n >\n {(choice) => (\n \n \n {choice.icon}\n {choice.label}\n \n \n )}\n \n \n );\n}\n\nfunction handleOpenChange(\n context: FilterBarContextValue,\n draft: FilterBarDraft | null,\n anchorRef: RefObject | undefined,\n owner: string,\n open: boolean,\n eventDetails: OpenChangeEventDetails,\n) {\n if (open && !draft && anchorRef?.current && eventDetails.reason !== \"input-change\") context.start(owner, anchorRef.current);\n if (open || !draft) return;\n if (eventDetails.reason === \"item-press\" || eventDetails.reason === \"escape-key\") eventDetails.cancel();\n else context.close(false);\n}\n\nfunction editorView(context: FilterBarContextValue, draft: FilterBarDraft | null) {\n const field = context.fields.find((candidate) => candidate.id === draft?.fieldId);\n const operator = context.operators.find((candidate) => candidate.id === draft?.operatorId);\n const stage = draft?.stage ?? \"field\";\n const many = stage === \"value\" && operator?.arity === \"many\";\n const query = draft?.query ?? \"\";\n const choices = editorChoices(context, draft);\n const selected = (draft?.values ?? []).map(\n (value) => choices.find((choice) => choice.value === value) ?? valueChoice(value, field?.formatValue?.(value) ?? String(value)),\n );\n const customNumber = field?.type === \"number\" && allowsCustomValue(field);\n const invalidNumber =\n stage === \"value\" &&\n Boolean(customNumber) &&\n query.trim() !== \"\" &&\n field !== undefined &&\n parseCustomValue(field, query) === undefined;\n const remote = stage === \"value\" && field?.optionsMode === \"remote\";\n const unavailable = stage === \"value\" && Boolean(field?.loading || field?.error);\n const label = searchLabel(stage, field);\n return { field, stage, many, query, choices, selected, invalidNumber, remote, unavailable, label };\n}\n\nexport function FilterBarEditor({\n owner,\n mode,\n anchorRef,\n children,\n}: {\n owner: string;\n mode: \"input\" | \"button\";\n anchorRef?: RefObject;\n children: ReactNode;\n}) {\n const context = useFilterBarContext();\n const searchRef = useRef(null);\n const draft = context.draft?.owner === owner ? context.draft : null;\n const { field, stage, many, query, choices, selected, invalidNumber, remote, unavailable, label } = editorView(context, draft);\n\n const canCommitMany = selected.length > 0 && !unavailable && !context.disabled && !context.readOnly;\n\n return (\n \n items={choices}\n multiple={many}\n value={many ? selected : null}\n inputValue={query}\n open={draft !== null}\n disabled={context.disabled}\n readOnly={context.readOnly}\n modal={false}\n isItemEqualToValue={sameChoice}\n filter={remote ? null : undefined}\n onValueChange={(choice) => handleSelection(context, draft, choice)}\n onInputValueChange={(nextQuery, eventDetails) => {\n if (eventDetails.reason !== \"input-change\" && eventDetails.reason !== \"input-clear\") return;\n if (draft) context.setQuery(nextQuery);\n else if (anchorRef?.current) context.start(owner, anchorRef.current, \"field\", undefined, nextQuery);\n }}\n onOpenChange={(open, eventDetails) => handleOpenChange(context, draft, anchorRef, owner, open, eventDetails)}\n >\n {children}\n {\n if (event.key === \"Escape\" && !event.defaultPrevented) {\n event.preventDefault();\n context.back();\n }\n }}\n >\n {mode === \"button\" && (\n
\n handleEditorKeyDown(context, draft, event)}\n />\n
\n )}\n \n {many && (\n
\n \n
\n )}\n \n \n );\n}\n\nexport function FilterBarInlineInput({\n owner,\n inputRef,\n className,\n ...props\n}: Omit & { owner: string; inputRef: RefObject }) {\n const context = useFilterBarContext();\n const draft = context.draft?.owner === owner ? context.draft : null;\n function handleKeyDown(event: KeyboardEvent) {\n props.onKeyDown?.(event);\n if (event.defaultPrevented || event.nativeEvent.isComposing) return;\n if (handleEditorKeyDown(context, draft, event) || event.currentTarget.value !== \"\") return;\n const last = context.items.at(-1);\n if (event.key === \"Backspace\" && !draft && last) {\n event.preventDefault();\n context.remove(last);\n } else context.navigate(event);\n }\n return ;\n}\n" }, { "path": "src/registry/sources/control-ui/filter-bar/model.ts", "target": "@components/control-ui/filter-bar/model.ts", "type": "registry:component", "content": "import type { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar } from \"./types\";\n\nconst booleanOptions = [\n { value: true, label: \"True\" },\n { value: false, label: \"False\" },\n];\n\nexport function fieldOperators(field: FilterBarField, operators: readonly FilterBarOperator[]) {\n return operators.filter((operator) => !field.operators || field.operators.includes(operator.id));\n}\n\nexport function fieldOptions(field: FilterBarField): readonly FilterBarOption[] {\n return field.options ?? (field.type === \"boolean\" ? booleanOptions : []);\n}\n\nexport function parseCustomValue(field: FilterBarField, query: string): FilterBarScalar | undefined {\n if (!query.trim()) return undefined;\n if (field.type === \"number\") {\n if (!/^[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(query.trim())) return undefined;\n const number = Number(query);\n return Number.isFinite(number) ? number : undefined;\n }\n if (field.type === \"boolean\") {\n if (query.toLowerCase() === \"true\") return true;\n if (query.toLowerCase() === \"false\") return false;\n return undefined;\n }\n return query.trim();\n}\n\nexport function allowsCustomValue(field: FilterBarField) {\n return field.allowCustomValue ?? (field.options === undefined && field.type !== \"boolean\" && field.optionsMode !== \"remote\");\n}\n\nexport function formatFilterValue(item: FilterBarItem, field: FilterBarField | undefined) {\n if (item.value === null) return \"\";\n const values = Array.isArray(item.value) ? item.value : [item.value];\n return values.map((value) => field?.formatValue?.(value) ?? fieldOptionsForLabel(field, value)).join(\", \");\n}\n\nfunction fieldOptionsForLabel(field: FilterBarField | undefined, value: FilterBarScalar) {\n return (field ? fieldOptions(field).find((option) => option.value === value)?.label : undefined) ?? String(value);\n}\n\nexport function filterNavigationKeys(items: readonly FilterBarItem[]) {\n return items.flatMap((item) =>\n [\"field\", \"operator\", ...(item.value === null ? [] : [\"value\"]), \"remove\"].map((segment) => `${item.id}:${segment}`),\n );\n}\n" }, { "path": "src/registry/sources/control-ui/filter-bar/motion.ts", "target": "@components/control-ui/filter-bar/motion.ts", "type": "registry:component", "content": "\"use client\";\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\nexport function filterMotionEnabled(element: HTMLElement) {\n return (\n !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches &&\n Number.parseFloat(getComputedStyle(element).getPropertyValue(\"--duration-fast\")) > 0\n );\n}\n\nfunction animateMovement(element: HTMLElement, before: DOMRect, after: DOMRect, duration: number, easing: string) {\n const x = before.left - after.left;\n const y = before.top - after.top;\n if (Math.abs(x) < 1 && Math.abs(y) < 1) return null;\n return element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: \"translate(0, 0)\" }], { duration, easing });\n}\n\nfunction animateLayout(\n elements: Map,\n before: Map,\n after: Map,\n animations: Map,\n duration: number,\n easing: string,\n) {\n for (const [key, bounds] of after) {\n const origin = before.get(key);\n const element = elements.get(key);\n if (!origin || !element) continue;\n const animation = animateMovement(element, origin, bounds, duration, easing);\n if (animation) animations.set(key, animation);\n }\n}\n\nexport function useFilterBarMotion() {\n const rootRef = useRef(null);\n const [motion] = useState(() => {\n const elements = new Map();\n const animations = new Map();\n let captured: Map | null = null;\n\n function measure() {\n return new Map([...elements].map(([key, element]) => [key, element.getBoundingClientRect()]));\n }\n\n function cancel() {\n for (const animation of animations.values()) animation.cancel();\n animations.clear();\n }\n\n return {\n register(key: string, element: HTMLElement | null) {\n if (element) elements.set(key, element);\n else elements.delete(key);\n },\n capture() {\n captured = measure();\n },\n cancel,\n play() {\n const root = rootRef.current;\n if (!root || !filterMotionEnabled(root)) {\n cancel();\n captured = null;\n return;\n }\n if (!captured) return;\n const origin = captured;\n captured = null;\n cancel();\n const next = measure();\n const computed = getComputedStyle(root);\n const duration = Number.parseFloat(computed.getPropertyValue(\"--duration-fast\"));\n const easing = computed.getPropertyValue(\"--ease-standard\").trim();\n animateLayout(elements, origin, next, animations, duration, easing);\n },\n };\n });\n\n useLayoutEffect(() => motion.play());\n useLayoutEffect(() => {\n const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n function cancelReducedMotion() {\n if (media.matches) motion.cancel();\n }\n media.addEventListener(\"change\", cancelReducedMotion);\n return () => {\n media.removeEventListener(\"change\", cancelReducedMotion);\n motion.cancel();\n };\n }, [motion]);\n return { rootRef, ...motion };\n}\n" }, { "path": "src/registry/sources/control-ui/filter-bar/parts.tsx", "target": "@components/control-ui/filter-bar/parts.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { PlusIcon, XIcon } from \"lucide-react\";\nimport type { ComponentProps, CSSProperties, ReactNode } from \"react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport type { FilterBarKnobStyle } from \"@/components/control-ui/knob-contracts/filter-bar-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { Button, type ButtonProps } from \"@/components/control-ui/ui/button\";\nimport { useFilterBarContext } from \"./context\";\nimport { FilterBarEditor, FilterBarInlineInput } from \"./editor\";\nimport { formatFilterValue } from \"./model\";\nimport type { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarStage } from \"./types\";\n\nexport type FilterBarChipProps = ComponentProps<\"div\"> & {\n item: FilterBarItem;\n readOnly?: boolean;\n style?: CSSProperties & FilterBarKnobStyle;\n};\n\ntype FilterBarSegmentData = { stage: FilterBarStage; label: string; icon?: ReactNode };\n\nfunction chipSegments(item: FilterBarItem, field: FilterBarField | undefined, operator: FilterBarOperator | undefined, draft: boolean) {\n const segments: FilterBarSegmentData[] = [{ stage: \"field\", label: field?.label ?? item.fieldId, icon: field?.icon }];\n if (operator || draft) segments.push({ stage: \"operator\", label: operator?.label ?? \"Operator…\" });\n if (item.value !== null || (draft && operator))\n segments.push({ stage: \"value\", label: item.value === null ? \"Value…\" : formatFilterValue(item, field) });\n return segments;\n}\n\nfunction FilterBarChipContent({ item, readOnly = false, className, ref, ...props }: FilterBarChipProps) {\n const context = useFilterBarContext();\n const field = context.fields.find((candidate) => candidate.id === item.fieldId);\n const operator = context.operators.find((candidate) => candidate.id === item.operatorId);\n const draft = Boolean(context.draft?.id === item.id && !context.draft.editing);\n const locked = readOnly || context.readOnly;\n const segments = chipSegments(item, field, operator, draft);\n\n return useRender({\n ref: [ref ?? null, locked ? null : (element: HTMLDivElement | null) => context.register(`chip:${item.id}`, element)],\n render: (\n \n {segments.map((segment) => (\n \n ))}\n {!locked && !draft && (\n context.register(`${item.id}:remove`, element)}\n variant=\"ghost\"\n size=\"sm\"\n iconOnly\n data-control-ui=\"filter-bar\"\n data-control-family=\"filter-bar\"\n data-slot=\"remove\"\n aria-label={`Remove ${field?.label ?? item.fieldId} filter`}\n disabled={context.disabled}\n onClick={() => context.remove(item)}\n onKeyDown={(event) => context.navigate(event, item.id, \"remove\")}\n >\n \n \n )}\n \n ),\n });\n}\n\nfunction FilterBarSegment({\n item,\n segment,\n locked,\n draft,\n}: {\n item: FilterBarItem;\n segment: FilterBarSegmentData;\n locked: boolean;\n draft: boolean;\n}) {\n const context = useFilterBarContext();\n if (locked)\n return (\n \n \n {segment.icon}\n {segment.label}\n \n \n );\n return (\n context.register(`${item.id}:${segment.stage}`, element)}\n variant=\"ghost\"\n size=\"sm\"\n data-control-ui=\"filter-bar\"\n data-control-family=\"filter-bar\"\n data-slot=\"segment\"\n className=\"shrink\"\n aria-label={`Edit ${segment.stage}: ${segment.label}`}\n aria-haspopup=\"listbox\"\n aria-expanded={context.draft?.owner === item.id && context.draft.stage === segment.stage}\n disabled={context.disabled || draft}\n onClick={(event) => context.start(item.id, event.currentTarget, segment.stage, item)}\n onKeyDown={(event) => context.navigate(event, item.id, segment.stage)}\n >\n {segment.icon}\n {segment.label}\n \n );\n}\n\nexport function FilterBarChip(props: FilterBarChipProps) {\n return (\n \n \n \n );\n}\n\nfunction ExitingChip({ item, style }: { item: FilterBarItem; style: CSSProperties }) {\n const context = useFilterBarContext();\n const ref = useRef(null);\n const releaseExit = context.releaseExit;\n useEffect(() => {\n const animations = ref.current?.getAnimations({ subtree: true }) ?? [];\n let mounted = true;\n const release = () => {\n if (mounted) releaseExit(item.id);\n };\n if (animations.length === 0) release();\n else Promise.all(animations.map((animation) => animation.finished)).then(release, release);\n return () => {\n mounted = false;\n };\n }, [item.id, releaseExit]);\n return (\n
\n \n
\n );\n}\n\nexport function FilterBarChips({ renderChip }: { renderChip?: (item: FilterBarItem) => ReactNode }) {\n const context = useFilterBarContext();\n const items = [...context.items];\n const draft = context.draft;\n if (draft?.fieldId && !draft.editing)\n items.push({\n id: draft.id,\n fieldId: draft.fieldId,\n operatorId: draft.operatorId ?? \"\",\n value: draft.values.length > 0 ? draft.values : null,\n });\n return (\n <>\n {items.map((item) => (\n \n ))}\n {context.exits.map((exit) => (\n \n ))}\n \n );\n}\n\nfunction FilterBarChipContentWithEditor({ item, renderChip }: { item: FilterBarItem; renderChip?: (item: FilterBarItem) => ReactNode }) {\n const context = useFilterBarContext();\n return renderChip && item.id !== context.draft?.id ? renderChip(item) : ;\n}\n\nexport function FilterBarAddButton({ className, children = \"Add filter\", onClick, onKeyDown, ref, ...props }: ButtonProps) {\n const context = useFilterBarContext();\n const owner = useId();\n const button = useRender({\n ref: [ref ?? null, (element: HTMLButtonElement | null) => context.register(`entry:${owner}`, element)],\n render: (\n {\n onClick?.(event);\n if (!event.defaultPrevented) context.start(owner, event.currentTarget);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n context.navigate(event);\n }}\n >\n \n {children}\n \n ),\n });\n return (\n \n {button}\n \n );\n}\n\nexport function FilterBarInput({ className, ...props }: Omit[0], \"owner\" | \"inputRef\">) {\n const context = useFilterBarContext();\n const owner = useId();\n const inputRef = useRef(null);\n return (\n \n context.register(`entry:${owner}`, element ? inputRef.current : null)}\n className={cn(\"min-w-0 max-w-full flex-[1_1_10rem]\", className)}\n >\n \n \n \n );\n}\n\nexport function FilterBarClear({ children = \"Clear\", onClick, ...props }: ButtonProps) {\n const context = useFilterBarContext();\n if (context.items.length === 0 && !context.draft) return null;\n return (\n {\n onClick?.(event);\n if (!event.defaultPrevented) context.clear();\n }}\n >\n {children}\n \n );\n}\n" }, { "path": "src/registry/sources/control-ui/filter-bar/types.ts", "target": "@components/control-ui/filter-bar/types.ts", "type": "registry:component", "content": "import type { ReactNode } from \"react\";\n\nexport type FilterBarScalar = string | number | boolean;\nexport type FilterBarValue = FilterBarScalar | FilterBarScalar[] | null;\nexport type FilterBarOperator = { id: string; label: string; arity?: \"none\" | \"one\" | \"many\" };\nexport type FilterBarOption = { value: FilterBarScalar; label: string; icon?: ReactNode; disabled?: boolean };\nexport type FilterBarQuery = { fieldId: string; operatorId: string; query: string };\nexport type FilterBarField = {\n id: string;\n label: string;\n icon?: ReactNode;\n type?: \"text\" | \"number\" | \"boolean\";\n operators?: readonly string[];\n options?: readonly FilterBarOption[];\n allowCustomValue?: boolean;\n optionsMode?: \"local\" | \"remote\";\n loading?: boolean;\n error?: ReactNode;\n onQueryChange?: (query: FilterBarQuery) => void;\n formatValue?: (value: FilterBarScalar) => string;\n};\nexport type FilterBarItem = { id: string; fieldId: string; operatorId: string; value: FilterBarValue };\nexport type FilterBarStage = \"field\" | \"operator\" | \"value\";\nexport type FilterBarDraft = {\n id: string;\n owner: string;\n anchor: HTMLElement;\n stage: FilterBarStage;\n fieldId?: string;\n operatorId?: string;\n values: FilterBarScalar[];\n query: string;\n editing: boolean;\n};\n" }, { "path": "src/registry/sources/control-ui/recipes/filter-bar.css", "target": "@components/control-ui/styles/recipes/filter-bar.css", "type": "registry:file", "content": "@layer components {\n :where([data-control-family=\"filter-bar\"][data-slot=\"root\"]) {\n --cui-filter-bar-background: var(--control-fill);\n --cui-filter-bar-foreground: var(--foreground);\n --cui-filter-bar-border-color: var(--control-rim);\n --cui-filter-bar-border-width: var(--control-rim-width);\n --cui-filter-bar-radius: var(--radius-control);\n --cui-filter-bar-height: var(--control-h-sm);\n --cui-filter-bar-gap: calc(var(--spacing) * 1.5);\n --cui-filter-bar-padding-inline: calc(var(--spacing) * 2);\n --cui-filter-bar-font-size: var(--text-label);\n --cui-filter-bar-hover-background: var(--hover-fill);\n --cui-filter-bar-focus-ring-color: var(--ring);\n gap: var(--cui-filter-bar-gap);\n border: 0;\n padding: 0;\n margin: 0;\n }\n\n :where([data-control-family=\"filter-bar\"][data-slot=\"chip\"]) {\n border: var(--cui-filter-bar-border-width) solid var(--cui-filter-bar-border-color);\n border-radius: var(--cui-filter-bar-radius);\n background: var(--cui-filter-bar-background);\n color: var(--cui-filter-bar-foreground);\n block-size: var(--cui-filter-bar-height);\n font-size: var(--cui-filter-bar-font-size);\n }\n\n :where([data-control-family=\"filter-bar\"]:is([data-slot=\"segment\"], [data-slot=\"remove\"])) {\n display: inline-flex;\n align-items: center;\n min-inline-size: 0;\n max-inline-size: 16rem;\n padding-inline: var(--cui-filter-bar-padding-inline);\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font-size: inherit;\n gap: calc(var(--spacing) * 1.5);\n }\n\n :where([data-control-family=\"filter-bar\"][data-slot=\"chip\"] > :not(:first-child)) {\n border-inline-start: var(--cui-filter-bar-border-width) solid var(--cui-filter-bar-border-color);\n }\n\n :where([data-control-family=\"filter-bar\"]:is([data-slot=\"segment\"], [data-slot=\"remove\"]):focus-visible) {\n outline: 2px solid var(--cui-filter-bar-focus-ring-color);\n outline-offset: -2px;\n }\n\n @media (hover: hover) {\n :where([data-control-family=\"filter-bar\"]:is([data-slot=\"segment\"], [data-slot=\"remove\"]):enabled:hover) {\n background: var(--cui-filter-bar-hover-background);\n }\n }\n\n :where([data-control-family=\"filter-bar\"][data-draft] [data-slot=\"segment\"]) {\n opacity: 1;\n animation: cui-filter-segment-enter var(--duration-fast) var(--ease-emphasized);\n }\n\n :where([data-control-family=\"filter-bar\"][data-slot=\"exit\"]) {\n pointer-events: none;\n transform-origin: left center;\n animation: cui-filter-chip-exit var(--duration-fast) var(--ease-standard) forwards;\n }\n\n :where([data-control-family=\"filter-bar\"][data-slot=\"exit\"] [data-slot=\"chip\"]) {\n block-size: 100%;\n }\n\n :where([data-control-family=\"filter-bar\"][data-disabled]) {\n opacity: 0.5;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where([data-control-family=\"filter-bar\"]),\n :where([data-control-family=\"filter-bar\"] *) {\n animation: none;\n transition: none;\n }\n }\n\n :where([data-motion=\"reduced\"] [data-control-family=\"filter-bar\"]),\n :where([data-motion=\"reduced\"] [data-control-family=\"filter-bar\"] *) {\n animation: none;\n transition: none;\n }\n}\n\n@keyframes cui-filter-segment-enter {\n from {\n opacity: 0;\n translate: -4px 0;\n }\n to {\n opacity: 1;\n translate: 0 0;\n }\n}\n\n@keyframes cui-filter-chip-exit {\n to {\n opacity: 0;\n transform: translateX(-4px) scale(0.97);\n }\n}\n\n@property --cui-filter-bar-background {\n syntax: \"\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --cui-filter-bar-foreground {\n syntax: \"\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --cui-filter-bar-border-color {\n syntax: \"\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --cui-filter-bar-border-width {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-filter-bar-radius {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-filter-bar-height {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-filter-bar-gap {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-filter-bar-padding-inline {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-filter-bar-font-size {\n syntax: \"\";\n inherits: true;\n initial-value: 0px;\n}\n\n@property --cui-filter-bar-hover-background {\n syntax: \"\";\n inherits: true;\n initial-value: transparent;\n}\n\n@property --cui-filter-bar-focus-ring-color {\n syntax: \"\";\n inherits: true;\n initial-value: transparent;\n}\n" } ], "css": { "@import \"../components/control-ui/styles/recipes/filter-bar.css\"": {} } }