{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "field",
	"title": "Field",
	"type": "registry:ui",
	"description": "Kura Field component source.",
	"devDependencies": [
		"tailwind-variants@^3.2.2"
	],
	"registryDependencies": [
		"label",
		"separator",
		"utils"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"field-content\"\n  class={cn('gap-1 text-zinc-300 group/field-content flex flex-1 flex-col leading-snug', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "field/field-content.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();\n</script>\n\n<p\n  bind:this={ref}\n  data-slot=\"field-description\"\n  class={cn(\n    'text-zinc-500 text-left text-sm tracking-normal normal-case [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n    'last:mt-0 nth-last-2:-mt-1',\n    '[&>a]:text-[#d0e891] [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-zinc-50',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</p>\n",
			"type": "registry:file",
			"target": "field/field-description.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import type { Snippet } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    errors,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    children?: Snippet;\n    errors?: { message?: string }[];\n  } = $props();\n\n  const hasContent = $derived.by(() => {\n    // has slotted error\n    if (children) return true;\n\n    // no errors\n    if (!errors || errors.length === 0) return false;\n\n    // has an error but no message\n    if (errors.length === 1 && !errors[0]?.message) {\n      return false;\n    }\n\n    return true;\n  });\n\n  const isMultipleErrors = $derived(errors && errors.length > 1);\n  const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);\n</script>\n\n{#if hasContent}\n  <div\n    bind:this={ref}\n    role=\"alert\"\n    data-slot=\"field-error\"\n    class={cn(\n      'font-mono text-xs font-semibold tracking-wide text-destructive uppercase',\n      className\n    )}\n    {...restProps}\n  >\n    {#if children}\n      {@render children()}\n    {:else if singleErrorMessage}\n      {singleErrorMessage}\n    {:else if isMultipleErrors}\n      <ul class=\"ml-4 flex list-disc flex-col gap-1\">\n        {#each errors ?? [] as error, index (index)}\n          {#if error?.message}\n            <li>{error.message}</li>\n          {/if}\n        {/each}\n      </ul>\n    {/if}\n  </div>\n{/if}\n",
			"type": "registry:file",
			"target": "field/field-error.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"field-group\"\n  class={cn(\n    'gap-8 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "field/field-group.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Label } from '$UI$/label/index.js';\n  import { cn } from '$UTILS$.js';\n  import type { ComponentProps } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: ComponentProps<typeof Label> = $props();\n</script>\n\n<Label\n  bind:ref\n  data-slot=\"field-label\"\n  class={cn(\n    'has-data-checked:border-[#b9d765]/40 has-data-checked:bg-[#b9d765]/10 gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-zinc-800 *:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug',\n    'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</Label>\n",
			"type": "registry:file",
			"target": "field/field-label.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    variant = 'legend',\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {\n    variant?: 'legend' | 'label';\n  } = $props();\n</script>\n\n<legend\n  bind:this={ref}\n  data-slot=\"field-legend\"\n  data-variant={variant}\n  class={cn(\n    'mb-3 font-mono font-semibold tracking-widest text-zinc-100 uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</legend>\n",
			"type": "registry:file",
			"target": "field/field-legend.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { Separator } from '$UI$/separator/index.js';\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import type { Snippet } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    children?: Snippet;\n  } = $props();\n\n  const hasContent = $derived(!!children);\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"field-separator\"\n  data-content={hasContent}\n  class={cn('-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative', className)}\n  {...restProps}\n>\n  <Separator class=\"absolute inset-0 top-1/2\" />\n  {#if children}\n    <span\n      class=\"bg-background px-2 font-mono text-[0.625rem] font-semibold tracking-widest text-zinc-500 uppercase relative mx-auto block w-fit\"\n      data-slot=\"field-separator-content\"\n    >\n      {@render children()}\n    </span>\n  {/if}\n</div>\n",
			"type": "registry:file",
			"target": "field/field-separator.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLFieldsetAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLFieldsetAttributes> = $props();\n</script>\n\n<fieldset\n  bind:this={ref}\n  data-slot=\"field-set\"\n  class={cn(\n    'gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col border-zinc-900',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</fieldset>\n",
			"type": "registry:file",
			"target": "field/field-set.svelte"
		},
		{
			"content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"field-label\"\n  class={cn(\n    'gap-2 font-mono text-xs leading-normal font-semibold tracking-widest text-zinc-100 uppercase group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-semibold flex w-fit items-center leading-snug',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "field/field-title.svelte"
		},
		{
			"content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n\n  export const fieldVariants = tv({\n    base: 'data-[invalid=true]:text-destructive gap-3 text-zinc-200 group/field flex w-full',\n    variants: {\n      orientation: {\n        vertical: 'cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n        horizontal:\n          'cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        responsive:\n          'cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'\n      }\n    },\n    defaultVariants: {\n      orientation: 'vertical'\n    }\n  });\n\n  export type FieldOrientation = VariantProps<typeof fieldVariants>['orientation'];\n</script>\n\n<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$UTILS$.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    orientation = 'vertical',\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    orientation?: FieldOrientation;\n  } = $props();\n</script>\n\n<div\n  bind:this={ref}\n  role=\"group\"\n  data-slot=\"field\"\n  data-orientation={orientation}\n  class={cn(fieldVariants({ orientation }), className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
			"type": "registry:file",
			"target": "field/field.svelte"
		},
		{
			"content": "import Field from './field.svelte';\nimport Set from './field-set.svelte';\nimport Legend from './field-legend.svelte';\nimport Group from './field-group.svelte';\nimport Content from './field-content.svelte';\nimport Label from './field-label.svelte';\nimport Title from './field-title.svelte';\nimport Description from './field-description.svelte';\nimport Separator from './field-separator.svelte';\nimport Error from './field-error.svelte';\n\nexport {\n  Field,\n  Set,\n  Legend,\n  Group,\n  Content,\n  Label,\n  Title,\n  Description,\n  Separator,\n  Error,\n  //\n  Set as FieldSet,\n  Legend as FieldLegend,\n  Group as FieldGroup,\n  Content as FieldContent,\n  Label as FieldLabel,\n  Title as FieldTitle,\n  Description as FieldDescription,\n  Separator as FieldSeparator,\n  Error as FieldError\n};\n",
			"type": "registry:file",
			"target": "field/index.ts"
		}
	]
}