{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-select",
  "files": [
    {
      "path": "ui/native-select/NativeSelect.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/native-select/NativeSelect.astro directly.\n/**\n * @component NativeSelect\n * @title Native Select\n * @description A styled native HTML select element with consistent design system integration.\n *\n * @preview\n * <NativeSelect class=\"w-[200px]\">\n *   <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n *   <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *   <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n *   <NativeSelectOption value=\"cherry\">Cherry</NativeSelectOption>\n * </NativeSelect>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   NativeSelect,\n *   NativeSelectOption,\n *   NativeSelectOptGroup,\n * } from '@bejamas/ui/components/native-select';\n * ---\n *\n * <NativeSelect>\n *   <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n *   <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *   <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n * </NativeSelect>\n * ```\n *\n * ### Native Select vs Select\n *\n * Use **NativeSelect** when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use **Select** when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.\n *\n * @examples\n *\n * ### With Groups\n *\n * <NativeSelect class=\"w-[200px]\">\n *   <NativeSelectOptGroup label=\"Fruits\">\n *     <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *     <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n *   </NativeSelectOptGroup>\n *   <NativeSelectOptGroup label=\"Vegetables\">\n *     <NativeSelectOption value=\"carrot\">Carrot</NativeSelectOption>\n *     <NativeSelectOption value=\"broccoli\">Broccoli</NativeSelectOption>\n *   </NativeSelectOptGroup>\n * </NativeSelect>\n *\n * ### Sizes\n *\n * <div class=\"flex flex-col items-start gap-4 sm:flex-row\">\n *   <NativeSelect class=\"w-[180px]\" size=\"sm\">\n *     <NativeSelectOption value=\"\">Small (h-8)</NativeSelectOption>\n *     <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *     <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n *   </NativeSelect>\n *   <NativeSelect class=\"w-[180px]\" size=\"default\">\n *     <NativeSelectOption value=\"\">Default (h-9)</NativeSelectOption>\n *     <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *     <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n *   </NativeSelect>\n *   <NativeSelect class=\"w-[180px]\" size=\"lg\">\n *     <NativeSelectOption value=\"\">Large (h-10)</NativeSelectOption>\n *     <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *     <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n *   </NativeSelect>\n * </div>\n *\n * ### Disabled\n *\n * <NativeSelect disabled class=\"w-[200px]\">\n *   <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *   <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n * </NativeSelect>\n *\n * ### Invalid\n *\n * <NativeSelect aria-invalid=\"true\" class=\"w-[200px]\">\n *   <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n *   <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n *   <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n * </NativeSelect>\n *\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\ninterface Props extends HTMLAttributes<\"select\"> {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n}\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  data-slot=\"native-select-wrapper\"\n  data-size={size}\n  class={cn(\"\",\n    \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n    className,\n  )}\n>\n  <select\n    data-slot=\"native-select\"\n    data-size={size}\n    class={cn(\n      \"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 rounded-lg outline-none disabled:pointer-events-none disabled:cursor-not-allowed\",\n    )}\n    {...rest}\n  >\n    <slot />\n  </select>\n  <SemanticIcon\n    name=\"chevron-down\"\n    class=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n    aria-hidden=\"true\"\n    data-slot=\"native-select-icon\"\n  />\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/native-select/NativeSelectOption.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/native-select/NativeSelectOption.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\n\ninterface Props extends HTMLAttributes<\"option\"> {}\n\nconst { ...rest } = Astro.props as Props;\n---\n\n<option data-slot=\"native-select-option\" {...rest} class=\"\"><slot /></option>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/native-select/NativeSelectOptGroup.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/native-select/NativeSelectOptGroup.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"optgroup\"> {\n  class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<optgroup data-slot=\"native-select-optgroup\" class={cn(\"\", className)} {...rest}>\n  <slot />\n</optgroup>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/native-select/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/native-select/index.ts directly.\nexport { default as NativeSelect } from \"./NativeSelect.astro\";\nexport { default as NativeSelectOption } from \"./NativeSelectOption.astro\";\nexport { default as NativeSelectOptGroup } from \"./NativeSelectOptGroup.astro\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}