{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "TIS Field",
  "author": "TIS Experience Engineering",
  "description": "Composição acessível de label, controle, helper, contador e erro usando o Form Field CSS-only do DS TIS.",
  "dependencies": [
    "clsx@2.1.1",
    "tailwind-merge@3.6.0",
    "ds-tis@github:tis-experience/ds-tis#dd4c906943847cb7664a72a0c7637a378b39adcc"
  ],
  "files": [
    {
      "path": "registry/tis/field.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"./tis-utils\"\n\ntype FieldOrientation = \"vertical\" | \"horizontal\"\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  invalid = false,\n  disabled = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  orientation?: FieldOrientation\n  invalid?: boolean\n  disabled?: boolean\n}) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      data-invalid={invalid || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(\n        \"ds-field\",\n        invalid && \"ds-field--error\",\n        disabled && \"ds-tis-field--disabled\",\n        orientation === \"horizontal\" && \"ds-tis-field--horizontal\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\"ds-tis-field-group\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\"ds-tis-field-set\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({ className, ...props }: React.ComponentProps<\"legend\">) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      className={cn(\"ds-field__label ds-tis-field-legend\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabelRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label-row\"\n      className={cn(\"ds-field__label-row\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"field-label\"\n      className={cn(\"ds-field__label\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldRequired({\n  className,\n  children = \"*\",\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"field-required\"\n      className={cn(\"ds-field__required\", className)}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"ds-tis-field-content\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"field-title\"\n      className={cn(\"ds-field__label\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"field-description\"\n      className={cn(\"ds-field__helper\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = React.useMemo(() => {\n    if (children) return children\n    const messages = Array.from(\n      new Set(errors?.map((error) => error?.message).filter(Boolean)),\n    )\n    if (messages.length === 0) return null\n    if (messages.length === 1) return messages[0]\n    return (\n      <ul>\n        {messages.map((message) => (\n          <li key={message}>{message}</li>\n        ))}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) return null\n\n  return (\n    <span\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"ds-field__error\", className)}\n      {...props}\n    >\n      {content}\n    </span>\n  )\n}\n\nfunction FieldCounter({\n  className,\n  over = false,\n  ...props\n}: React.ComponentProps<\"span\"> & { over?: boolean }) {\n  return (\n    <span\n      data-slot=\"field-counter\"\n      className={cn(\n        \"ds-field__counter\",\n        over && \"ds-field__counter--over\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Field,\n  FieldContent,\n  FieldCounter,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLabelRow,\n  FieldLegend,\n  FieldRequired,\n  FieldSet,\n  FieldTitle,\n}\n",
      "type": "registry:ui",
      "target": "@ui/field.tsx"
    },
    {
      "path": "registry/tis/tis-utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "@ui/tis-utils.ts"
    }
  ],
  "css": {
    "@import \"ds-tis/css\"": {},
    "@layer components": {
      ".ds-tis-field-group": {
        "display": "flex",
        "flex-direction": "column",
        "gap": "var(--ds-space-lg)",
        "width": "100%"
      },
      ".ds-tis-field--horizontal": {
        "flex-direction": "row",
        "align-items": "flex-start",
        "gap": "var(--ds-space-sm)"
      },
      ".ds-tis-field-content": {
        "display": "flex",
        "flex": "1",
        "flex-direction": "column",
        "gap": "var(--ds-space-2xs)",
        "min-width": "0"
      },
      ".ds-tis-field-set": {
        "display": "flex",
        "flex-direction": "column",
        "gap": "var(--ds-space-md)",
        "border": "0",
        "margin": "0",
        "padding": "0"
      },
      ".ds-tis-field-legend": {
        "margin-bottom": "var(--ds-space-xs)"
      }
    }
  },
  "meta": {
    "provider": "React composition",
    "status": "beta",
    "wave": "forms"
  },
  "docs": "Use data-invalid no Field e aria-invalid no controle. Mantenha @import \"ds-tis/css\" como o primeiro import do CSS global.",
  "type": "registry:ui"
}