{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/field/field.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./field.css\"\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface FieldContextValue {\n  id: string\n  error: boolean\n  disabled: boolean\n  required: boolean\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  const context = React.useContext(FieldContext)\n  if (context === null && process.env.NODE_ENV !== \"production\") {\n    console.warn(\n      \"Field compound components (FieldLabel, FieldControl, FieldDescription, FieldError) must be rendered inside a <Field>. Falling back to safe defaults.\"\n    )\n  }\n  return (\n    context ?? { id: \"\", error: false, disabled: false, required: false }\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  Field                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction Field({\n  className,\n  id: idProp,\n  error = false,\n  disabled = false,\n  required = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  error?: boolean\n  disabled?: boolean\n  required?: boolean\n}) {\n  const generatedId = React.useId()\n  const id = idProp ?? generatedId\n\n  const contextValue = React.useMemo(\n    () => ({ id, error, disabled, required }),\n    [id, error, disabled, required]\n  )\n\n  return (\n    <FieldContext value={contextValue}>\n      <div\n        data-slot=\"field\"\n        className={cn(\n          \"flex flex-col gap-[var(--layout-gap-md)] w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </FieldContext>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  FieldLabel                                                         */\n/* ------------------------------------------------------------------ */\n\nfunction FieldLabel({\n  className,\n  htmlFor: htmlForProp,\n  children,\n  ...props\n}: React.ComponentProps<\"label\">) {\n  const { id, required, disabled } = useFieldContext()\n\n  return (\n    <label\n      data-slot=\"field-label\"\n      htmlFor={htmlForProp ?? (id || undefined)}\n      data-disabled={disabled || undefined}\n      className={cn(\n        \"field-label inline-flex items-center gap-[var(--layout-gap-xs)] text-content-note font-accent\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {required && (\n        <span aria-hidden=\"true\" className=\"field-label-asterisk\">\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  FieldControl                                                       */\n/* ------------------------------------------------------------------ */\n\nfunction FieldControl({ children }: { children: React.ReactElement }) {\n  const { id, error, disabled, required } = useFieldContext()\n\n  const slotProps: Record<string, unknown> = {\n    id: id || undefined,\n    \"aria-invalid\": error || undefined,\n    \"data-field-error\": error || undefined,\n    \"aria-describedby\": error\n      ? id\n        ? `${id}-error`\n        : undefined\n      : id\n        ? `${id}-description`\n        : undefined,\n  }\n\n  if (disabled) slotProps.disabled = true\n  if (required) slotProps.required = true\n\n  return <Slot {...slotProps}>{children}</Slot>\n}\n\n/* ------------------------------------------------------------------ */\n/*  FieldDescription                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction FieldDescription({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  const { id, error } = useFieldContext()\n\n  return (\n    <p\n      data-slot=\"field-description\"\n      id={id ? `${id}-description` : undefined}\n      className={cn(\n        \"field-description text-content-note\",\n        error && \"sr-only\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  FieldError                                                         */\n/* ------------------------------------------------------------------ */\n\nfunction FieldError({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  const { id, error } = useFieldContext()\n\n  if (!error) return null\n\n  return (\n    <p\n      data-slot=\"field-error\"\n      id={id ? `${id}-error` : undefined}\n      role=\"alert\"\n      className={cn(\"field-error text-content-note\", className)}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport { Field, FieldLabel, FieldControl, FieldDescription, FieldError, useFieldContext }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/field/field.css",
      "content": "/* ================================================================\n * FIELD — Styles\n * Structure (flex, gap) lives in field.tsx.\n * Theming (colors) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * FieldLabel\n * -------------------------------- */\n.field-label {\n  color: var(--text-base-strong);\n}\n\n.field-label[data-disabled] {\n  color: var(--text-disabled);\n}\n\n.field-label-asterisk {\n  color: var(--text-danger-moderate);\n}\n\n/* --------------------------------\n * FieldDescription\n * -------------------------------- */\n.field-description {\n  color: var(--text-base-moderate);\n}\n\n/* --------------------------------\n * FieldError\n * -------------------------------- */\n.field-error {\n  color: var(--text-danger-moderate);\n}\n",
      "type": "registry:ui"
    }
  ]
}