mirror of
https://github.com/huntabyte/shadcn-svelte.git
synced 2026-09-14 19:33:46 +08:00
Aidan Bleser
30 lines
3.2 KiB
JSON
30 lines
3.2 KiB
JSON
{
|
|
"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
|
|
"name": "native-select",
|
|
"type": "registry:ui",
|
|
"devDependencies": [
|
|
"@lucide/svelte@^0.561.0"
|
|
],
|
|
"files": [
|
|
{
|
|
"content": "import Root from \"./native-select.svelte\";\nimport Option from \"./native-select-option.svelte\";\nimport OptGroup from \"./native-select-opt-group.svelte\";\n\nexport {\n\tRoot,\n\tOption,\n\tOptGroup,\n\tRoot as NativeSelect,\n\tOption as NativeSelectOption,\n\tOptGroup as NativeSelectOptGroup,\n};\n",
|
|
"type": "registry:file",
|
|
"target": "native-select/index.ts"
|
|
},
|
|
{
|
|
"content": "<script lang=\"ts\">\n\timport type { HTMLOptgroupAttributes } from \"svelte/elements\";\n\timport type { WithElementRef } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLOptgroupAttributes> = $props();\n</script>\n\n<optgroup bind:this={ref} data-slot=\"native-select-opt-group\" {...restProps}>\n\t{@render children?.()}\n</optgroup>\n",
|
|
"type": "registry:file",
|
|
"target": "native-select/native-select-opt-group.svelte"
|
|
},
|
|
{
|
|
"content": "<script lang=\"ts\">\n\timport type { HTMLOptionAttributes } from \"svelte/elements\";\n\timport type { WithElementRef } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLOptionAttributes> = $props();\n</script>\n\n<option bind:this={ref} data-slot=\"native-select-option\" {...restProps}>\n\t{@render children?.()}\n</option>\n",
|
|
"type": "registry:file",
|
|
"target": "native-select/native-select-option.svelte"
|
|
},
|
|
{
|
|
"content": "<script lang=\"ts\">\n\timport { cn, type WithElementRef } from \"$UTILS$.js\";\n\timport type { HTMLSelectAttributes } from \"svelte/elements\";\n\timport ChevronDownIcon from \"@lucide/svelte/icons/chevron-down\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tvalue = $bindable(),\n\t\tclass: className,\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLSelectAttributes> = $props();\n</script>\n\n<div\n\tclass=\"group/native-select relative w-fit has-[select:disabled]:opacity-50\"\n\tdata-slot=\"native-select-wrapper\"\n>\n\t<select\n\t\tbind:value\n\t\tbind:this={ref}\n\t\tdata-slot=\"native-select\"\n\t\tclass={cn(\n\t\t\t\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pe-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\",\n\t\t\t\"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n\t\t\t\"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n\t\t\tclassName\n\t\t)}\n\t\t{...restProps}\n\t>\n\t\t{@render children?.()}\n\t</select>\n\t<ChevronDownIcon\n\t\tclass=\"text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 size-4 -translate-y-1/2 opacity-50 select-none\"\n\t\taria-hidden=\"true\"\n\t\tdata-slot=\"native-select-icon\"\n\t/>\n</div>\n",
|
|
"type": "registry:file",
|
|
"target": "native-select/native-select.svelte"
|
|
}
|
|
]
|
|
} |