{
  "name": "field",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "label",
    "separator"
  ],
  "files": [
    {
      "path": "ui/field/Field.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { FieldVariants } from \".\"\nimport { cn } from \"@/lib/utils\"\nimport { fieldVariants } from \".\"\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  orientation?: FieldVariants[\"orientation\"]\n}>(), {\n  orientation: \"vertical\",\n})\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    data-slot=\"field\"\n    :data-orientation=\"orientation\"\n    :class=\"cn(\n      fieldVariants({ orientation }),\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/field/FieldContent.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"field-content\"\n    :class=\"cn(\n      'cn-field-content group/field-content flex flex-1 flex-col leading-snug',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/field/FieldDescription.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <p\n    data-slot=\"field-description\"\n    :class=\"cn(\n      'cn-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance',\n      'last:mt-0 nth-last-2:-mt-1',\n      '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n      props.class,\n    )\"\n  >\n    <slot />\n  </p>\n</template>\n"
    },
    {
      "path": "ui/field/FieldError.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { computed } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  errors?: Array<string | { message: string | undefined } | undefined>\n}>()\n\nconst content = computed(() => {\n  if (!props.errors || props.errors.length === 0)\n    return null\n\n  const uniqueErrors = [\n    ...new Map(\n      props.errors\n        .filter(Boolean)\n        .map((error) => {\n          const message = typeof error === \"string\" ? error : error?.message\n          return [message, error]\n        }),\n    ).values(),\n  ]\n\n  if (uniqueErrors.length === 1 && uniqueErrors[0]) {\n    return typeof uniqueErrors[0] === \"string\" ? uniqueErrors[0] : uniqueErrors[0].message\n  }\n\n  return uniqueErrors.map(error => typeof error === \"string\" ? error : error?.message)\n})\n</script>\n\n<template>\n  <div\n    v-if=\"$slots.default || content\"\n    role=\"alert\"\n    data-slot=\"field-error\"\n    :class=\"cn('cn-field-error font-normal', props.class)\"\n  >\n    <slot v-if=\"$slots.default\" />\n\n    <template v-else-if=\"typeof content === 'string'\">\n      {{ content }}\n    </template>\n\n    <ul v-else-if=\"Array.isArray(content)\" class=\"ml-4 flex list-disc flex-col gap-1\">\n      <li v-for=\"(error, index) in content\" :key=\"index\">\n        {{ error }}\n      </li>\n    </ul>\n  </div>\n</template>\n"
    },
    {
      "path": "ui/field/FieldGroup.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"field-group\"\n    :class=\"cn(\n      'cn-field-group group/field-group @container/field-group flex w-full flex-col',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/field/FieldLabel.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/components/ui/label\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Label\n    data-slot=\"field-label\"\n    :class=\"cn(\n      'cn-field-label 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      props.class,\n    )\"\n  >\n    <slot />\n  </Label>\n</template>\n"
    },
    {
      "path": "ui/field/FieldLegend.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  variant?: \"legend\" | \"label\"\n}>(), {\n  variant: \"legend\",\n})\n</script>\n\n<template>\n  <legend\n    data-slot=\"field-legend\"\n    :data-variant=\"variant\"\n    :class=\"cn('cn-field-legend', props.class)\"\n  >\n    <slot />\n  </legend>\n</template>\n"
    },
    {
      "path": "ui/field/FieldSeparator.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"field-separator\"\n    :data-content=\"!!$slots.default\"\n    :class=\"cn(\n      'cn-field-separator relative',\n      props.class,\n    )\"\n  >\n    <Separator class=\"absolute inset-0 top-1/2\" />\n    <span\n      v-if=\"$slots.default\"\n      class=\"cn-field-separator-content relative mx-auto block w-fit bg-background\"\n      data-slot=\"field-separator-content\"\n    >\n      <slot />\n    </span>\n  </div>\n</template>\n"
    },
    {
      "path": "ui/field/FieldSet.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <fieldset\n    data-slot=\"field-set\"\n    :class=\"cn('cn-field-set flex flex-col', props.class)\"\n  >\n    <slot />\n  </fieldset>\n</template>\n"
    },
    {
      "path": "ui/field/FieldTitle.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"field-label\"\n    :class=\"cn(\n      'cn-field-title flex w-fit items-center leading-snug',\n      props.class,\n    )\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/field/index.ts",
      "type": "registry:ui",
      "content": "import type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nexport const fieldVariants = cva(\"cn-field group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"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 *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-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\nexport type FieldVariants = VariantProps<typeof fieldVariants>\n\nexport { default as Field } from \"./Field.vue\"\nexport { default as FieldContent } from \"./FieldContent.vue\"\nexport { default as FieldDescription } from \"./FieldDescription.vue\"\nexport { default as FieldError } from \"./FieldError.vue\"\nexport { default as FieldGroup } from \"./FieldGroup.vue\"\nexport { default as FieldLabel } from \"./FieldLabel.vue\"\nexport { default as FieldLegend } from \"./FieldLegend.vue\"\nexport { default as FieldSeparator } from \"./FieldSeparator.vue\"\nexport { default as FieldSet } from \"./FieldSet.vue\"\nexport { default as FieldTitle } from \"./FieldTitle.vue\"\n"
    }
  ]
}