{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "dynamic-select",
	"title": "Dynamic Select",
	"type": "registry:ui",
	"description": "A combobox-style select that allows users to pick from predefined options or enter a custom value.",
	"dependencies": [
		"@lucide/svelte@^0.554.0"
	],
	"devDependencies": [
		"@lucide/svelte@^0.544.0"
	],
	"registryDependencies": [
		"button",
		"command",
		"popover"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\r\n\timport * as Popover from '$lib/components/ui/popover';\r\n\timport { setDynamicSelectContext } from './ctx';\r\n\timport type { Snippet } from 'svelte';\r\n\r\n\tlet {\r\n\t\tvalue = $bindable(''),\r\n\t\topen = $bindable(false),\r\n\t\tchildren\r\n\t}: {\r\n\t\tvalue?: string;\r\n\t\topen?: boolean;\r\n\t\tchildren: Snippet;\r\n\t} = $props();\r\n\r\n\tlet inputValue = $state('');\r\n\r\n\tsetDynamicSelectContext({\r\n\t\tget value() {\r\n\t\t\treturn { value };\r\n\t\t},\r\n\t\tget open() {\r\n\t\t\treturn { value: open };\r\n\t\t},\r\n\t\tget inputValue() {\r\n\t\t\treturn { value: inputValue };\r\n\t\t},\r\n\t\tsetValue: (v: string) => {\r\n\t\t\tvalue = v;\r\n\t\t\topen = false;\r\n\t\t}\r\n\t});\r\n</script>\r\n\r\n<Popover.Root bind:open>\r\n\t{@render children()}\r\n</Popover.Root>\r\n",
			"type": "registry:ui",
			"target": "dynamic-select/dynamic-select.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n\timport { cn } from '$UTILS$';\r\n\timport * as Popover from '$lib/components/ui/popover';\r\n\timport { buttonVariants } from '$lib/components/ui/button';\r\n\timport { ChevronDown } from '@lucide/svelte';\r\n\timport { getDynamicSelectContext } from './ctx';\r\n\timport type { Snippet } from 'svelte';\r\n\r\n\tlet { class: className, children }: { class?: string; children: Snippet } = $props();\r\n\tconst ctx = getDynamicSelectContext();\r\n</script>\r\n\r\n<Popover.Trigger\r\n\tclass={cn(\r\n\t\tbuttonVariants({ variant: 'outline' }),\r\n\t\t'w-full justify-between font-normal',\r\n\t\tclassName\r\n\t)}\r\n>\r\n\t{#if ctx.value.value}\r\n\t\t{ctx.value.value}\r\n\t{:else}\r\n\t\t{@render children()}\r\n\t{/if}\r\n\t<ChevronDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\r\n</Popover.Trigger>\r\n",
			"type": "registry:ui",
			"target": "dynamic-select/dynamic-select-trigger.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport * as Popover from '$lib/components/ui/popover';\n\timport * as Command from '$lib/components/ui/command';\n\timport { getDynamicSelectContext } from './ctx';\n\timport type { Snippet } from 'svelte';\n\n\tlet { children }: { children: Snippet } = $props();\n\tconst ctx = getDynamicSelectContext();\n\n\tlet internalInput = $state('');\n\n\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\tif (e.key === 'Enter' && internalInput.trim() !== '') {\n\t\t\tctx.setValue(internalInput);\n\t\t\tinternalInput = '';\n\t\t}\n\t}\n</script>\n\n<Popover.Content\n\tclass=\"w-[var(--bits-popover-anchor-width)] min-w-[var(--bits-popover-anchor-width)] p-0\"\n\talign=\"start\"\n>\n\t<Command.Root>\n\t\t<Command.Input\n\t\t\tplaceholder=\"Search or type custom...\"\n\t\t\tbind:value={internalInput}\n\t\t\tonkeydown={handleKeyDown}\n\t\t/>\n\t\t<Command.List>\n\t\t\t<Command.Empty>\n\t\t\t\t{#if internalInput.trim() !== ''}\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"flex w-full cursor-pointer items-center px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground\"\n\t\t\t\t\t\tonclick={() => ctx.setValue(internalInput)}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd \"{internalInput}\"\n\t\t\t\t\t</button>\n\t\t\t\t{:else}\n\t\t\t\t\tNo results found.\n\t\t\t\t{/if}\n\t\t\t</Command.Empty>\n\t\t\t{@render children()}\n\t\t</Command.List>\n\t</Command.Root>\n</Popover.Content>\n",
			"type": "registry:ui",
			"target": "dynamic-select/dynamic-select-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n\timport { cn } from '$UTILS$';\r\n\timport * as Command from '$lib/components/ui/command';\r\n\timport { Check } from '@lucide/svelte';\r\n\timport { getDynamicSelectContext } from './ctx';\r\n\timport type { Snippet } from 'svelte';\r\n\r\n\tlet { value, children }: { value: string; children: Snippet } = $props();\r\n\tconst ctx = getDynamicSelectContext();\r\n\tconst isSelected = $derived(ctx.value.value === value);\r\n</script>\r\n\r\n<Command.Item\r\n\t{value}\r\n\tonSelect={() => ctx.setValue(value)}\r\n\tclass=\"flex cursor-pointer items-center justify-between\"\r\n>\r\n\t{@render children()}\r\n\t<Check class={cn('h-4 w-4', isSelected ? 'opacity-100' : 'opacity-0')} />\r\n</Command.Item>\r\n",
			"type": "registry:ui",
			"target": "dynamic-select/dynamic-select-item.svelte"
		},
		{
			"content": "import { getContext, setContext } from 'svelte';\r\n\r\nconst DYNAMIC_SELECT_KEY = Symbol('dynamic-select');\r\n\r\ntype DynamicSelectContext = {\r\n\tvalue: { value: string };\r\n\topen: { value: boolean };\r\n\tinputValue: { value: string };\r\n\tsetValue: (v: string) => void;\r\n};\r\n\r\nexport function setDynamicSelectContext(props: DynamicSelectContext) {\r\n\tsetContext(DYNAMIC_SELECT_KEY, props);\r\n}\r\n\r\nexport function getDynamicSelectContext() {\r\n\treturn getContext<DynamicSelectContext>(DYNAMIC_SELECT_KEY);\r\n}\r\n",
			"type": "registry:ui",
			"target": "dynamic-select/ctx.ts"
		},
		{
			"content": "import Root from './dynamic-select.svelte';\r\nimport Trigger from './dynamic-select-trigger.svelte';\r\nimport Content from './dynamic-select-content.svelte';\r\nimport Item from './dynamic-select-item.svelte';\r\nimport { CommandGroup } from '$lib/components/ui/command';\r\n\r\nconst Group = CommandGroup;\r\n\r\nexport { Root, Trigger, Content, Item, Group };\r\n",
			"type": "registry:ui",
			"target": "dynamic-select/index.ts"
		}
	]
}