{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "snapp-combobox",
"title": "Snapp Combobox",
"description": "The standard searchable Snapp option picker for single-select and autocomplete controls.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"@snapp/snapp-button",
"@snapp/snapp-input-group",
"@snapp/snapp-portal-container",
"@snapp/snapp-utils"
],
"files": [
{
"path": "registry/radix-nova/ui/combobox.tsx",
"content": "import * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { ChevronDownIcon, XIcon, CheckIcon } from \"lucide-react\"\nimport { usePortalContainer } from \"@/runtime/PortalContainer\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children ?? (\n \n )}\n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n trailingIcon,\n triggerClassName,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean\n showClear?: boolean\n trailingIcon?: React.ReactNode\n triggerClassName?: string\n}) {\n return (\n \n }\n {...props}\n />\n \n {showTrigger ? (\n \n \n {trailingIcon ? (\n \n {trailingIcon}\n \n ) : null}\n \n \n ) : trailingIcon ? (\n \n {trailingIcon}\n \n ) : null}\n {showClear && }\n \n {children}\n \n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 4,\n align = \"start\",\n alignOffset = 0,\n anchor,\n collisionAvoidance,\n collisionBoundary,\n collisionPadding,\n positionMethod,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n | \"side\"\n | \"align\"\n | \"sideOffset\"\n | \"alignOffset\"\n | \"anchor\"\n | \"collisionAvoidance\"\n | \"collisionBoundary\"\n | \"collisionPadding\"\n | \"positionMethod\"\n >) {\n const portalContainer = usePortalContainer()\n const viewportBoundary = portalContainer?.ownerDocument.documentElement\n\n return (\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n \n }\n >\n \n \n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\n/**\n * Renders the Combobox's internally filtered items. Use this component, or a\n * render-function child of ComboboxList, instead of mapping the root items\n * array directly.\n */\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n )\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n )\n}\n\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef &\n ComboboxPrimitive.Chips.Props) {\n return (\n \n )\n}\n\nfunction ComboboxChip({\n className,\n children,\n showRemove = true,\n ...props\n}: ComboboxPrimitive.Chip.Props & {\n showRemove?: boolean\n}) {\n return (\n \n {children}\n {showRemove && (\n }\n className=\"-ml-1 opacity-50 hover:opacity-100\"\n data-slot=\"combobox-chip-remove\"\n >\n \n \n )}\n \n )\n}\n\nfunction ComboboxChipsInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\nfunction useComboboxAnchor() {\n return React.useRef(null)\n}\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxGroup,\n ComboboxLabel,\n ComboboxCollection,\n ComboboxEmpty,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipsInput,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n}\n",
"type": "registry:ui",
"target": "@ui/combobox.tsx"
}
],
"type": "registry:ui"
}