{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "choicebox",
	"title": "Choicebox",
	"type": "registry:ui",
	"description": "A visual radio group for selecting complex options.",
	"registryDependencies": [
		"label"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport { setChoiceboxContext } from './ctx';\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tvalue = $bindable(),\n\t\tclass: className,\n\t\tchildren,\n\t\tname,\n\t\tonValueChange\n\t}: {\n\t\tvalue?: string;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t\tname?: string;\n\t\tonValueChange?: (value: string) => void;\n\t} = $props();\n\n\tsetChoiceboxContext({\n\t\tactiveValue: () => value,\n\t\tsetActive: (v) => {\n\t\t\tvalue = v;\n\t\t\tif (onValueChange) {\n\t\t\t\tonValueChange(v);\n\t\t\t}\n\t\t}\n\t});\n</script>\n\n<div class={cn('flex flex-col gap-3', className)} role=\"radiogroup\" aria-label={name}>\n\t{@render children()}\n\t{#if name}\n\t\t<input type=\"hidden\" {name} {value} />\n\t{/if}\n</div>\n",
			"type": "registry:ui",
			"target": "choicebox/choicebox.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\timport { getChoiceboxContext } from './ctx';\n\timport type { Snippet } from 'svelte';\n\n\tlet {\n\t\tvalue,\n\t\tclass: className,\n\t\tchildren,\n\t\tdisabled = false\n\t}: {\n\t\tvalue: string;\n\t\tclass?: string;\n\t\tchildren: Snippet;\n\t\tdisabled?: boolean;\n\t} = $props();\n\n\tconst ctx = getChoiceboxContext();\n\tlet isSelected = $derived(ctx.activeValue() === value);\n\n\tfunction handleClick() {\n\t\tif (!disabled) {\n\t\t\tctx.setActive(value);\n\t\t}\n\t}\n\n\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault();\n\t\t\thandleClick();\n\t\t}\n\t}\n</script>\n\n<div\n\trole=\"radio\"\n\taria-checked={isSelected}\n\ttabindex={disabled ? -1 : 0}\n\tonclick={handleClick}\n\tonkeydown={handleKeyDown}\n\tdata-state={isSelected ? 'checked' : 'unchecked'}\n\tclass={cn(\n\t\t'relative flex cursor-pointer items-start gap-4 rounded-lg border p-4 shadow-sm outline-none transition-all',\n\t\t'border-input bg-card hover:bg-accent/50 hover:text-accent-foreground',\n\t\t'data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-primary',\n\t\tdisabled && 'cursor-not-allowed opacity-50',\n\t\tclassName\n\t)}\n>\n\t{@render children()}\n</div>\n",
			"type": "registry:ui",
			"target": "choicebox/choicebox-item.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n\timport { cn } from '$UTILS$';\n\n\tlet { class: className }: { class?: string } = $props();\n</script>\n\n<div class={cn('flex shrink-0 items-center justify-center', className)}>\n\t<div\n\t\tclass=\"h-4 w-4 rounded-full border border-primary text-primary shadow-sm flex items-center justify-center ring-offset-background\"\n\t>\n\t\t<div\n\t\t\tclass=\"h-2 w-2 rounded-full bg-primary opacity-0 scale-0 transition-all duration-200 group-data-[state=checked]:opacity-100 group-data-[state=checked]:scale-100\"\n\t\t/>\n\t</div>\n</div>\n",
			"type": "registry:ui",
			"target": "choicebox/choicebox-indicator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import type { Snippet } from \"svelte\";\r\n    let { class: className, children }: { class?: string, children: Snippet } = $props();\r\n</script>\r\n<h3 class={cn(\"font-semibold leading-none tracking-tight\", className)}>\r\n    {@render children()}\r\n</h3>",
			"type": "registry:ui",
			"target": "choicebox/choicebox-title.svelte"
		},
		{
			"content": "<script lang=\"ts\">\r\n    import { cn } from \"$UTILS$\";\r\n    import type { Snippet } from \"svelte\";\r\n    let { class: className, children }: { class?: string, children: Snippet } = $props();\r\n</script>\r\n<p class={cn(\"text-sm text-muted-foreground leading-normal\", className)}>\r\n    {@render children()}\r\n</p>",
			"type": "registry:ui",
			"target": "choicebox/choicebox-description.svelte"
		},
		{
			"content": "import { getContext, setContext } from 'svelte';\n\nconst CHOICEBOX_KEY = Symbol('choicebox');\n\ntype ChoiceboxContext = {\n\tactiveValue: () => string | undefined;\n\tsetActive: (v: string) => void;\n};\n\nexport function setChoiceboxContext(props: ChoiceboxContext) {\n\tsetContext(CHOICEBOX_KEY, props);\n}\n\nexport function getChoiceboxContext() {\n\treturn getContext<ChoiceboxContext>(CHOICEBOX_KEY);\n}\n",
			"type": "registry:ui",
			"target": "choicebox/ctx.ts"
		},
		{
			"content": "import Root from './choicebox.svelte';\r\nimport Item from './choicebox-item.svelte';\r\nimport Indicator from './choicebox-indicator.svelte';\r\nimport Title from './choicebox-title.svelte';\r\nimport Description from './choicebox-description.svelte';\r\n\r\nexport {\r\n    Root,\r\n    Item,\r\n    Indicator,\r\n    Title,\r\n    Description\r\n};",
			"type": "registry:ui",
			"target": "choicebox/index.ts"
		}
	]
}