{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "choice-chips", "type": "registry:ui", "title": "Choice Chips", "description": "Filter chips whose check grows the chip open, with rolling counts and clear.", "categories": [ "selection" ], "dependencies": [ "@base-ui/react", "@number-flow/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/choice-chips.tsx", "content": "\"use client\";\nimport { Toggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup } from \"@base-ui/react/toggle-group\";\nimport NumberFlow from \"@number-flow/react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { createContext, use, useCallback, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { X } from \"@/lib/icons\";\nimport { ease, spring } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\ntype Size = \"sm\" | \"md\";\nconst SizeContext = createContext(\"md\");\n\nexport type ChoiceChipsProps = Omit, \"defaultValue\" | \"onChange\"> & {\n /** Selected chip values. In single mode it holds zero or one value. */\n value?: string[];\n defaultValue?: string[];\n onValueChange?: (value: string[]) => void;\n /** Several chips at once (filters), or at most one (a single choice that can be undone). */\n multiple?: boolean;\n /** Show a clear chip at the end of the row whenever anything is selected. */\n clearable?: boolean;\n clearLabel?: string;\n /** Read out after the clear chip empties the selection. */\n clearedAnnouncement?: string;\n size?: Size;\n disabled?: boolean;\n};\n\nexport function ChoiceChips({\n value: valueProp,\n defaultValue = [],\n onValueChange,\n multiple = true,\n clearable = true,\n clearLabel = \"Clear\",\n clearedAnnouncement = \"Selection cleared\",\n size = \"md\",\n disabled = false,\n className,\n children,\n ref,\n ...rest\n}: ChoiceChipsProps) {\n const [value, setValue] = useControllableState({ value: valueProp, defaultValue, onChange: onValueChange });\n const [announcement, setAnnouncement] = useState(\"\");\n const groupRef = useRef(null);\n // Keep our handle on the group (for focus after Clear) while still forwarding the caller's ref.\n const setGroupRef = useCallback(\n (node: HTMLDivElement | null) => {\n groupRef.current = node;\n if (typeof ref === \"function\") return ref(node);\n if (ref) ref.current = node;\n },\n [ref],\n );\n const reduce = useReducedMotion();\n const showClear = clearable && value.length > 0 && !disabled;\n\n const clear = useCallback(() => {\n setValue([]);\n setAnnouncement(clearedAnnouncement);\n // The clear chip is about to unmount under the focus; hand focus to the first chip\n // so the keyboard user stays inside the group instead of falling back to .\n groupRef.current?.querySelector(\"[data-chip]:not([data-disabled])\")?.focus();\n }, [setValue, clearedAnnouncement]);\n\n return (\n \n {\n setValue(next);\n setAnnouncement(\"\");\n }}\n disabled={disabled}\n data-size={size}\n className={cn(\"flex min-w-0 flex-wrap items-center\", size === \"sm\" ? \"gap-1.5\" : \"gap-2\", className)}\n {...rest}\n >\n {children}\n \n {showClear && (\n \n \n {clearLabel}\n \n )}\n \n \n \n {announcement}\n \n \n );\n}\n\nexport type ChoiceChipProps = Omit, \"value\" | \"type\"> & {\n value: string;\n /** A leading icon. It moves right when the check grows in. */\n icon?: React.ReactNode;\n /** A count shown after the label. Changes roll digit by digit. */\n count?: number;\n disabled?: boolean;\n};\n\nexport function ChoiceChip({ value, icon, count, disabled, className, children, ...rest }: ChoiceChipProps) {\n const size = use(SizeContext);\n const sm = size === \"sm\";\n return (\n \n {/* The check lives in a grid track that goes from 0fr to 1fr, so the chip's\n width grows to fit it on a transition that reverses mid-way if pressed again. */}\n \n \n \n \n \n \n \n {icon && (\n svg]:size-[14px]\", sm ? \"mr-1 [&>svg]:size-3\" : \"mr-1.5\")}>\n {icon}\n \n )}\n {children}\n {count !== undefined && (\n \n \n \n )}\n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/choice-chips" }