{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "native-select",
  "title": "native-select",
  "description": "native-select",
  "dependencies": [
    "@heroicons/react",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/field"
  ],
  "files": [
    {
      "path": "src/components/ui/native-select.tsx",
      "content": "\"use client\"\n\nimport { ChevronUpDownIcon } from \"@heroicons/react/20/solid\"\nimport { cn } from \"cn\"\nimport { fieldStyles } from \"@/components/ui/field\"\n\nexport function NativeSelect({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"control\"\n      className={fieldStyles({\n        className: cn(\"relative w-full has-[select:disabled]:opacity-50\", className),\n      })}\n      {...props}\n    />\n  )\n}\n\nexport interface NativeSelectContentProps extends React.ComponentProps<\"select\"> {\n  isInvalid?: boolean\n}\nexport function NativeSelectContent({ className, isInvalid, ...props }: NativeSelectContentProps) {\n  return (\n    <div data-slot=\"control\" className=\"relative flex items-center justify-between\">\n      <select\n        data-slot=\"select\"\n        aria-invalid={isInvalid ? \"true\" : undefined}\n        className={cn(\n          \"relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:pr-8 sm:pl-[calc(--spacing(3)-1px)]\",\n          \"text-base/6 text-foreground placeholder:text-muted-foreground sm:text-sm/6\",\n          \"bg-(--control-bg,transparent)\",\n          \"border border-input enabled:hover:border-muted-foreground/30\",\n          \"outline-hidden focus:border-ring/70 focus:ring-3 focus:ring-ring/20 focus:enabled:hover:border-ring/80\",\n          \"aria-invalid:border-danger-subtle-foreground/70 focus:aria-invalid:border-danger-subtle-foreground/70 focus:aria-invalid:ring-danger-subtle-foreground/20 aria-invalid:enabled:hover:border-danger-subtle-foreground/80 focus:aria-invalid:enabled:hover:border-danger-subtle-foreground/80\",\n          \"disabled:bg-muted forced-colors:in-disabled:text-[GrayText]\",\n          \"in-disabled:bg-muted forced-colors:in-disabled:text-[GrayText]\",\n          \"dark:scheme-dark\",\n          className\n        )}\n        {...props}\n      />\n      <ChevronUpDownIcon className=\"pointer-events-none absolute top-1/2 right-3 size-5 -translate-y-1/2 text-muted-foreground sm:right-2.5 sm:size-4\" />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-danger-subtle-foreground": "var(--danger-subtle-foreground)"
    },
    "light": {
      "danger-subtle-foreground": "oklch(0.505 0.213 27.518)"
    },
    "dark": {
      "danger-subtle-foreground": "oklch(0.704 0.191 22.216)"
    }
  },
  "type": "registry:ui"
}