huntabyte__shadcn-svelte/docs/static/registry/select.json

{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "select",
	"type": "registry:ui",
	"devDependencies": [
		"bits-ui@^2.14.4",
		"@internationalized/date@^3.10.0",
		"@lucide/svelte@^0.561.0"
	],
	"registryDependencies": [
		"separator"
	],
	"files": [
		{
			"content": "import Root from \"./select.svelte\";\nimport Group from \"./select-group.svelte\";\nimport Label from \"./select-label.svelte\";\nimport Item from \"./select-item.svelte\";\nimport Content from \"./select-content.svelte\";\nimport Trigger from \"./select-trigger.svelte\";\nimport Separator from \"./select-separator.svelte\";\nimport ScrollDownButton from \"./select-scroll-down-button.svelte\";\nimport ScrollUpButton from \"./select-scroll-up-button.svelte\";\nimport GroupHeading from \"./select-group-heading.svelte\";\nimport Portal from \"./select-portal.svelte\";\n\nexport {\n\tRoot,\n\tGroup,\n\tLabel,\n\tItem,\n\tContent,\n\tTrigger,\n\tSeparator,\n\tScrollDownButton,\n\tScrollUpButton,\n\tGroupHeading,\n\tPortal,\n\t//\n\tRoot as Select,\n\tGroup as SelectGroup,\n\tLabel as SelectLabel,\n\tItem as SelectItem,\n\tContent as SelectContent,\n\tTrigger as SelectTrigger,\n\tSeparator as SelectSeparator,\n\tScrollDownButton as SelectScrollDownButton,\n\tScrollUpButton as SelectScrollUpButton,\n\tGroupHeading as SelectGroupHeading,\n\tPortal as SelectPortal,\n};\n",
			"type": "registry:file",
			"target": "select/index.ts"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\timport SelectPortal from \"./select-portal.svelte\";\n\timport SelectScrollUpButton from \"./select-scroll-up-button.svelte\";\n\timport SelectScrollDownButton from \"./select-scroll-down-button.svelte\";\n\timport { cn, type WithoutChild } from \"$UTILS$.js\";\n\timport type { ComponentProps } from \"svelte\";\n\timport type { WithoutChildrenOrChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tsideOffset = 4,\n\t\tportalProps,\n\t\tchildren,\n\t\tpreventScroll = true,\n\t\t...restProps\n\t}: WithoutChild<SelectPrimitive.ContentProps> & {\n\t\tportalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;\n\t} = $props();\n</script>\n\n<SelectPortal {...portalProps}>\n\t<SelectPrimitive.Content\n\t\tbind:ref\n\t\t{sideOffset}\n\t\t{preventScroll}\n\t\tdata-slot=\"select-content\"\n\t\tclass={cn(\n\t\t\t\"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n\t\t\tclassName\n\t\t)}\n\t\t{...restProps}\n\t>\n\t\t<SelectScrollUpButton />\n\t\t<SelectPrimitive.Viewport\n\t\t\tclass={cn(\n\t\t\t\t\"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1\"\n\t\t\t)}\n\t\t>\n\t\t\t{@render children?.()}\n\t\t</SelectPrimitive.Viewport>\n\t\t<SelectScrollDownButton />\n\t</SelectPrimitive.Content>\n</SelectPortal>\n",
			"type": "registry:file",
			"target": "select/select-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\timport { cn } from \"$UTILS$.js\";\n\timport type { ComponentProps } from \"svelte\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tchildren,\n\t\t...restProps\n\t}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();\n</script>\n\n<SelectPrimitive.GroupHeading\n\tbind:ref\n\tdata-slot=\"select-group-heading\"\n\tclass={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</SelectPrimitive.GroupHeading>\n",
			"type": "registry:file",
			"target": "select/select-group-heading.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\n\tlet { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();\n</script>\n\n<SelectPrimitive.Group bind:ref data-slot=\"select-group\" {...restProps} />\n",
			"type": "registry:file",
			"target": "select/select-group.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport CheckIcon from \"@lucide/svelte/icons/check\";\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\timport { cn, type WithoutChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tvalue,\n\t\tlabel,\n\t\tchildren: childrenProp,\n\t\t...restProps\n\t}: WithoutChild<SelectPrimitive.ItemProps> = $props();\n</script>\n\n<SelectPrimitive.Item\n\tbind:ref\n\t{value}\n\tdata-slot=\"select-item\"\n\tclass={cn(\n\t\t\"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n\t\tclassName\n\t)}\n\t{...restProps}\n>\n\t{#snippet children({ selected, highlighted })}\n\t\t<span class=\"absolute end-2 flex size-3.5 items-center justify-center\">\n\t\t\t{#if selected}\n\t\t\t\t<CheckIcon class=\"size-4\" />\n\t\t\t{/if}\n\t\t</span>\n\t\t{#if childrenProp}\n\t\t\t{@render childrenProp({ selected, highlighted })}\n\t\t{:else}\n\t\t\t{label || value}\n\t\t{/if}\n\t{/snippet}\n</SelectPrimitive.Item>\n",
			"type": "registry:file",
			"target": "select/select-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn, type WithElementRef } from \"$UTILS$.js\";\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tchildren,\n\t\t...restProps\n\t}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();\n</script>\n\n<div\n\tbind:this={ref}\n\tdata-slot=\"select-label\"\n\tclass={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n\t{...restProps}\n>\n\t{@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "select/select-label.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\n\tlet { ...restProps }: SelectPrimitive.PortalProps = $props();\n</script>\n\n<SelectPrimitive.Portal {...restProps} />\n",
			"type": "registry:file",
			"target": "select/select-portal.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport ChevronDownIcon from \"@lucide/svelte/icons/chevron-down\";\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\timport { cn, type WithoutChildrenOrChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\t...restProps\n\t}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();\n</script>\n\n<SelectPrimitive.ScrollDownButton\n\tbind:ref\n\tdata-slot=\"select-scroll-down-button\"\n\tclass={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n\t{...restProps}\n>\n\t<ChevronDownIcon class=\"size-4\" />\n</SelectPrimitive.ScrollDownButton>\n",
			"type": "registry:file",
			"target": "select/select-scroll-down-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport ChevronUpIcon from \"@lucide/svelte/icons/chevron-up\";\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\timport { cn, type WithoutChildrenOrChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\t...restProps\n\t}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();\n</script>\n\n<SelectPrimitive.ScrollUpButton\n\tbind:ref\n\tdata-slot=\"select-scroll-up-button\"\n\tclass={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n\t{...restProps}\n>\n\t<ChevronUpIcon class=\"size-4\" />\n</SelectPrimitive.ScrollUpButton>\n",
			"type": "registry:file",
			"target": "select/select-scroll-up-button.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport type { Separator as SeparatorPrimitive } from \"bits-ui\";\n\timport { Separator } from \"$UI$/separator/index.js\";\n\timport { cn } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\t...restProps\n\t}: SeparatorPrimitive.RootProps = $props();\n</script>\n\n<Separator\n\tbind:ref\n\tdata-slot=\"select-separator\"\n\tclass={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n\t{...restProps}\n/>\n",
			"type": "registry:file",
			"target": "select/select-separator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\timport ChevronDownIcon from \"@lucide/svelte/icons/chevron-down\";\n\timport { cn, type WithoutChild } from \"$UTILS$.js\";\n\n\tlet {\n\t\tref = $bindable(null),\n\t\tclass: className,\n\t\tchildren,\n\t\tsize = \"default\",\n\t\t...restProps\n\t}: WithoutChild<SelectPrimitive.TriggerProps> & {\n\t\tsize?: \"sm\" | \"default\";\n\t} = $props();\n</script>\n\n<SelectPrimitive.Trigger\n\tbind:ref\n\tdata-slot=\"select-trigger\"\n\tdata-size={size}\n\tclass={cn(\n\t\t\"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\tclassName\n\t)}\n\t{...restProps}\n>\n\t{@render children?.()}\n\t<ChevronDownIcon class=\"size-4 opacity-50\" />\n</SelectPrimitive.Trigger>\n",
			"type": "registry:file",
			"target": "select/select-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { Select as SelectPrimitive } from \"bits-ui\";\n\n\tlet {\n\t\topen = $bindable(false),\n\t\tvalue = $bindable(),\n\t\t...restProps\n\t}: SelectPrimitive.RootProps = $props();\n</script>\n\n<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />\n",
			"type": "registry:file",
			"target": "select/select.svelte"
		}
	]
}