mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
18 lines
5.0 KiB
JSON
18 lines
5.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "native-select-example",
|
|
"title": "Native Select",
|
|
"registryDependencies": [
|
|
"field",
|
|
"native-select",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/native-select-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n Field,\n FieldDescription,\n FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n NativeSelect,\n NativeSelectOptGroup,\n NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\n\nexport default function NativeSelectExample() {\n return (\n <ExampleWrapper>\n <NativeSelectBasic />\n <NativeSelectWithGroups />\n <NativeSelectSizes />\n <NativeSelectWithField />\n <NativeSelectDisabled />\n <NativeSelectInvalid />\n </ExampleWrapper>\n )\n}\n\nfunction NativeSelectBasic() {\n return (\n <Example title=\"Basic\">\n <NativeSelect>\n <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n <NativeSelectOption value=\"grapes\" disabled>\n Grapes\n </NativeSelectOption>\n <NativeSelectOption value=\"pineapple\">Pineapple</NativeSelectOption>\n </NativeSelect>\n </Example>\n )\n}\n\nfunction NativeSelectWithGroups() {\n return (\n <Example title=\"With Groups\">\n <NativeSelect>\n <NativeSelectOption value=\"\">Select a food</NativeSelectOption>\n <NativeSelectOptGroup label=\"Fruits\">\n <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n </NativeSelectOptGroup>\n <NativeSelectOptGroup label=\"Vegetables\">\n <NativeSelectOption value=\"carrot\">Carrot</NativeSelectOption>\n <NativeSelectOption value=\"broccoli\">Broccoli</NativeSelectOption>\n <NativeSelectOption value=\"spinach\">Spinach</NativeSelectOption>\n </NativeSelectOptGroup>\n </NativeSelect>\n </Example>\n )\n}\n\nfunction NativeSelectSizes() {\n return (\n <Example title=\"Sizes\">\n <div className=\"flex flex-col gap-4\">\n <NativeSelect size=\"sm\">\n <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n </NativeSelect>\n <NativeSelect size=\"default\">\n <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n </NativeSelect>\n </div>\n </Example>\n )\n}\n\nfunction NativeSelectWithField() {\n return (\n <Example title=\"With Field\">\n <Field>\n <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n <NativeSelect id=\"native-select-country\">\n <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n <NativeSelectOption value=\"au\">Australia</NativeSelectOption>\n </NativeSelect>\n <FieldDescription>Select your country of residence.</FieldDescription>\n </Field>\n </Example>\n )\n}\n\nfunction NativeSelectDisabled() {\n return (\n <Example title=\"Disabled\">\n <NativeSelect disabled>\n <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\n <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n </NativeSelect>\n </Example>\n )\n}\n\nfunction NativeSelectInvalid() {\n return (\n <Example title=\"Invalid\">\n <NativeSelect aria-invalid=\"true\">\n <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n </NativeSelect>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |