{
  "schemaVersion": 1,
  "name": "native-select",
  "useFor": "Use where the platform picker serves better than a custom list: long lists on phones, forms that must work without script. Pair it with a Field or Label and give it a name. Use Select for a styled list.",
  "constraints": [
    "A custom arrow on top of the browser's own",
    "Empty-string values for real options",
    "A pill-shaped field"
  ],
  "documentation": "",
  "source": "Extrapolated from opencommerce (the input and select field)",
  "exports": [
    "NativeSelect",
    "NativeSelectOptGroup",
    "NativeSelectOption"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/native-select",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/native-select.md",
  "examples": [
    {
      "path": "examples/native-select.tsx",
      "content": "import { Field } from \"@/components/ui/field\";\nimport { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport function Site() {\n  return (\n    <Field label=\"Default store\" htmlFor=\"native-store\" className=\"max-w-80\">\n      <NativeSelect id=\"native-store\" name=\"store\" defaultValue=\"wayfair\" className=\"w-full\">\n        <NativeSelectOptGroup label=\"Home\">\n          <NativeSelectOption value=\"wayfair\">Wayfair</NativeSelectOption>\n          <NativeSelectOption value=\"lowes\">Lowe's</NativeSelectOption>\n        </NativeSelectOptGroup>\n        <NativeSelectOptGroup label=\"Office\">\n          <NativeSelectOption value=\"staples\">Staples</NativeSelectOption>\n          <NativeSelectOption value=\"bestbuy\">Best Buy</NativeSelectOption>\n        </NativeSelectOptGroup>\n      </NativeSelect>\n    </Field>\n  );\n}\n\nexport function States() {\n  return (\n    <div className=\"flex flex-wrap items-start gap-3\">\n      <NativeSelect size=\"sm\" aria-label=\"Region\" defaultValue=\"us\">\n        <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n        <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n      </NativeSelect>\n      <NativeSelect aria-label=\"Carrier\" aria-invalid defaultValue=\"\">\n        <NativeSelectOption value=\"\" disabled>\n          Choose a carrier\n        </NativeSelectOption>\n        <NativeSelectOption value=\"ups\">UPS</NativeSelectOption>\n      </NativeSelect>\n      <NativeSelect aria-label=\"Locked\" disabled defaultValue=\"usd\">\n        <NativeSelectOption value=\"usd\">USD</NativeSelectOption>\n      </NativeSelect>\n    </div>\n  );\n}\n",
      "exports": [
        "Site",
        "States"
      ],
      "requires": [
        "native-select",
        "field"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/native-select/Site"
        },
        {
          "name": "States",
          "url": "https://opencommerce-ds.vercel.app/preview/native-select/States"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Native Select",
  "description": "The browser's own select in the brand's field: 36px, 8px corners, the hairline and the drawn chevron.",
  "surface": "site",
  "kinds": [
    "input"
  ],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [],
  "files": [
    {
      "path": "components/ui/native-select.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n// The browser's own select dressed as the brand's field and select: 36px, 8px corners, white on the 16 percent ink edge,\n// 14px Inter 12px in and the select's drawn chevron 12px from the right; focus turns the edge blue, with no glow.\n// `size=\"sm\"` is the 32px compact field. Use it where the platform picker is better (phones, long lists, forms without\n// script).\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & { size?: \"sm\" | \"default\" };\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n  return (\n    <div data-slot=\"native-select-wrapper\" data-size={size} className={cn(\"group/native-select relative w-fit has-[select:disabled]:opacity-50\", className)}>\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-9 w-full min-w-0 cursor-pointer appearance-none rounded-control border border-hairline bg-surface py-0 pr-9 pl-3 font-sans text-body-sm leading-body text-fg outline-none transition-[border-color] duration-160 ease-out hover:border-line-field-hover focus-visible:border-line-brand disabled:cursor-not-allowed aria-invalid:border-danger data-[size=sm]:h-8 data-[size=sm]:pl-2.5 motion-reduce:transition-none\"\n        {...props}\n      />\n      <svg aria-hidden data-slot=\"native-select-icon\" viewBox=\"0 0 10 6\" className=\"pointer-events-none absolute top-1/2 right-3 h-1.5 w-2.5 -translate-y-1/2 fill-none stroke-current text-fg-muted [stroke-linecap:round] [stroke-linejoin:round] [stroke-width:1.5]\">\n        <path d=\"M1 1l4 4 4-4\" />\n      </svg>\n    </div>\n  );\n}\n\nfunction NativeSelectOption({ className, ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" className={cn(\"bg-surface text-fg\", className)} {...props} />;\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n  return <optgroup data-slot=\"native-select-optgroup\" className={cn(\"bg-surface text-fg\", className)} {...props} />;\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n"
    }
  ]
}