{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/field.tsx",
      "content": "\"use client\"\r\n\r\nimport { useMemo } from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\r\n  return (\r\n    <fieldset\r\n      data-slot=\"field-set\"\r\n      className={cn(\r\n        \"flex flex-col gap-6\",\r\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldLegend({\r\n  className,\r\n  variant = \"legend\",\r\n  ...props\r\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\r\n  return (\r\n    <legend\r\n      data-slot=\"field-legend\"\r\n      data-variant={variant}\r\n      className={cn(\r\n        \"mb-3 font-medium\",\r\n        \"data-[variant=legend]:text-base\",\r\n        \"data-[variant=label]:text-sm\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"field-group\"\r\n      className={cn(\r\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nconst fieldVariants = cva(\r\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\r\n  {\r\n    variants: {\r\n      orientation: {\r\n        vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\r\n        horizontal: [\r\n          \"flex-row items-center\",\r\n          \"[&>[data-slot=field-label]]:flex-auto\",\r\n          \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\r\n        ],\r\n        responsive: [\r\n          \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\r\n          \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\r\n          \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\r\n        ],\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      orientation: \"vertical\",\r\n    },\r\n  }\r\n)\r\n\r\nfunction Field({\r\n  className,\r\n  orientation = \"vertical\",\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\r\n  return (\r\n    <div\r\n      role=\"group\"\r\n      data-slot=\"field\"\r\n      data-orientation={orientation}\r\n      className={cn(fieldVariants({ orientation }), className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"field-content\"\r\n      className={cn(\r\n        \"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldLabel({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof Label>) {\r\n  return (\r\n    <Label\r\n      data-slot=\"field-label\"\r\n      className={cn(\r\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\r\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\r\n        \"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"field-label\"\r\n      className={cn(\r\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  return (\r\n    <p\r\n      data-slot=\"field-description\"\r\n      className={cn(\r\n        \"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\r\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\r\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FieldSeparator({\r\n  children,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  children?: React.ReactNode\r\n}) {\r\n  return (\r\n    <div\r\n      data-slot=\"field-separator\"\r\n      data-content={!!children}\r\n      className={cn(\r\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <Separator className=\"absolute inset-0 top-1/2\" />\r\n      {children && (\r\n        <span\r\n          className=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\r\n          data-slot=\"field-separator-content\"\r\n        >\r\n          {children}\r\n        </span>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nfunction FieldError({\r\n  className,\r\n  children,\r\n  errors,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  errors?: Array<{ message?: string } | undefined>\r\n}) {\r\n  const content = useMemo(() => {\r\n    if (children) {\r\n      return children\r\n    }\r\n\r\n    if (!errors?.length) {\r\n      return null\r\n    }\r\n\r\n    const uniqueErrors = [\r\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\r\n    ]\r\n\r\n    if (uniqueErrors?.length == 1) {\r\n      return uniqueErrors[0]?.message\r\n    }\r\n\r\n    return (\r\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\r\n        {uniqueErrors.map(\r\n          (error, index) =>\r\n            error?.message && <li key={index}>{error.message}</li>\r\n        )}\r\n      </ul>\r\n    )\r\n  }, [children, errors])\r\n\r\n  if (!content) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <div\r\n      role=\"alert\"\r\n      data-slot=\"field-error\"\r\n      className={cn(\"text-destructive text-sm font-normal\", className)}\r\n      {...props}\r\n    >\r\n      {content}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport {\r\n  Field,\r\n  FieldLabel,\r\n  FieldDescription,\r\n  FieldError,\r\n  FieldGroup,\r\n  FieldLegend,\r\n  FieldSeparator,\r\n  FieldSet,\r\n  FieldContent,\r\n  FieldTitle,\r\n}\r\n",
      "type": "registry:ui",
      "target": "components/ui/field.tsx"
    }
  ]
}