{
  "name": "field",
  "title": "Field",
  "description": "Kura Field component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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(\n    'gap-1 text-muted-foreground group/field-content flex flex-1 flex-col leading-snug',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "field/field-content.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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-muted-foreground/50 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-link [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</p>\n",
      "path": "field/field-description.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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(' text-xs font-medium  text-destructive ', className)}\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",
      "path": "field/field-error.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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",
      "path": "field/field-group.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Label } from '$lib/components/ui/label/index.js';\n  import { cn } from '$lib/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-primary/40 has-data-checked:bg-primary/10 gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-control has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-border *: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",
      "path": "field/field-label.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/label/index.js",
          "item": "label",
          "file": {
            "type": "ui",
            "path": "label/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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-medium  text-foreground  data-[variant=label]:text-xs data-[variant=legend]:text-xs',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</legend>\n",
      "path": "field/field-legend.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Separator } from '$lib/components/ui/separator/index.js';\n  import { cn, type WithElementRef } from '$lib/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 text-xs font-medium text-muted-foreground/50 relative mx-auto block w-fit\"\n      data-slot=\"field-separator-content\"\n    >\n      {@render children()}\n    </span>\n  {/if}\n</div>\n",
      "path": "field/field-separator.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/separator/index.js",
          "item": "separator",
          "file": {
            "type": "ui",
            "path": "separator/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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-border',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</fieldset>\n",
      "path": "field/field-set.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/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  text-xs leading-normal font-medium  text-foreground  group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-medium flex w-fit items-center leading-snug',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "field/field-title.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "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-foreground 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 '$lib/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",
      "path": "field/field.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "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",
      "path": "field/index.ts",
      "_imports_": [
        {
          "import": "./field.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-set.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-set.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-legend.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-legend.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-group.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-content.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-content.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-label.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-label.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-title.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-title.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-description.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-description.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-separator.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-separator.svelte"
          },
          "meta": {}
        },
        {
          "import": "./field-error.svelte",
          "item": "field",
          "file": {
            "type": "ui",
            "path": "field/field-error.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils",
    "label",
    "separator"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "tailwind-variants",
      "version": "^3.2.2"
    }
  ],
  "devDependencies": []
}