{"$schema":"https://ui.logic2b.com/schema/registry-item.json","name":"native-select","type":"registry:ui","description":"A styled wrapper around the native <select> element: platform-native option list and keyboard/touch behavior, with a token-matched border, focus ring and chevron. Use when you want OS-native select UX (mobile pickers, screen reader familiarity) instead of Select's custom listbox.","dependencies":["lucide-react","class-variance-authority"],"registryDependencies":["utils"],"files":[{"path":"ui/native-select.tsx","type":"registry:ui","content":"import * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst nativeSelectVariants = cva(\n  \"border-input dark:bg-input/30 dark:hover:bg-input/50 has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-50 relative flex w-fit items-center rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8\",\n        default: \"h-9\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\nfunction NativeSelect({\n  className,\n  size,\n  disabled,\n  \"aria-invalid\": ariaInvalid,\n  ...props\n}: React.ComponentProps<\"select\"> & VariantProps<typeof nativeSelectVariants>) {\n  return (\n    <div\n      data-slot=\"native-select\"\n      data-disabled={disabled ? \"\" : undefined}\n      className={cn(\n        nativeSelectVariants({ size }),\n        \"has-[select:focus-visible]:border-ring has-[select:focus-visible]:ring-ring/50 has-[select:focus-visible]:ring-[3px]\",\n        ariaInvalid &&\n          \"border-destructive ring-destructive/20 dark:ring-destructive/40\",\n        className\n      )}\n    >\n      <select\n        data-slot=\"native-select-control\"\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        className=\"text-foreground w-full appearance-none bg-transparent py-1 pr-8 pl-3 text-sm outline-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <ChevronDownIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 opacity-50\" />\n    </div>\n  )\n}\n\nexport { NativeSelect }\n"}],"categories":["form"],"accessibility":{"support":"native","pattern":"select","primitive":"HTMLSelectElement","keyboard":[{"keys":["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],"action":"Move within the composite control."},{"keys":["Alt+ArrowDown"],"action":"Open the platform option picker where supported."}],"aria":["Uses native select/listbox semantics and forwards invalid/disabled state."],"consumer":["Associate it with a label; do not rely on placeholder-like first options as the name."]},"api":{"source":"src/ui/native-select.tsx","exports":[{"name":"NativeSelect","kind":"component","propsType":"React.ComponentProps<\"select\"> & VariantProps<typeof nativeSelectVariants>","props":[{"name":"size","type":"undefined","required":false}]}]}}