{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Labels, hints and errors move together: an error slides in under the field and the ring turns red.",
  "dependencies": [
    "@ui-sdk/core@0.1.0-beta.2",
    "@ui-sdk/react@0.1.0-beta.2"
  ],
  "registryDependencies": [
    "@keyframery/motion"
  ],
  "files": [
    {
      "path": "registry/components/keyframery/primitives/field.tsx",
      "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/field`: same parts, same props. Swap the import and keep your code.\n   This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport {\n  FieldControl as FieldControlPart,\n  FieldError as FieldErrorPart,\n} from \"@ui-sdk/react/field\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/field\"\n\n/* The focus ring is the outline. It starts 10px out and 0px wide and closes in onto the\n   control on a spring, easing from its resting colour to its focus colour as it lands, while the\n   hairline (a box-shadow) changes colour on a short clock of its own. On blur it lets go fast.\n   Give the outline a strong colour at rest and a soft one on focus, for example\n   `outline-ring focus-visible:outline-[3px] focus-visible:outline-ring/30`. */\nfunction FieldControl({ className, ...props }: React.ComponentProps<typeof FieldControlPart>) {\n  return (\n    <FieldControlPart\n      className={cn(\n        \"outline-offset-[10px] focus-visible:outline-offset-0\",\n        \"[transition:outline-offset_calc(160ms*var(--kf-speed,1))_var(--ease-house),outline-width_calc(160ms*var(--kf-speed,1))_var(--ease-house),outline-color_0s_linear_calc(160ms*var(--kf-speed,1)),box-shadow_calc(150ms*var(--kf-speed,1))_var(--ease-house),background-color_calc(150ms*var(--kf-speed,1))_var(--ease-house)] focus-visible:[transition:outline-offset_calc(900ms*var(--kf-speed,1))_var(--ease-spring),outline-width_calc(900ms*var(--kf-speed,1))_var(--ease-spring),outline-color_calc(700ms*var(--kf-speed,1))_var(--ease-house),box-shadow_calc(150ms*var(--kf-speed,1))_var(--ease-house),background-color_calc(150ms*var(--kf-speed,1))_var(--ease-house)]\",\n        \"motion-reduce:[transition:none]!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The error is only in the page while it shows. It opens its own height (so the fields\n   below slide down instead of jumping) and rises 16px into place out of a blur. */\nfunction FieldError({ className, ...props }: React.ComponentProps<typeof FieldErrorPart>) {\n  return (\n    <FieldErrorPart\n      className={cn(\n        \"overflow-hidden [interpolate-size:allow-keywords]\",\n        \"[transition:height_calc(520ms*var(--kf-speed,1))_var(--ease-house),margin_calc(520ms*var(--kf-speed,1))_var(--ease-house),opacity_calc(420ms*var(--kf-speed,1))_var(--ease-house),translate_calc(760ms*var(--kf-speed,1))_var(--ease-spring),filter_calc(520ms*var(--kf-speed,1))_var(--ease-house)]\",\n        \"starting:h-0 starting:translate-y-4 starting:opacity-0 starting:blur-[4px]\",\n        \"motion-reduce:[transition:none]!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { FieldControl, FieldError }\n",
      "type": "registry:component",
      "target": "components/keyframery/primitives/field.tsx"
    },
    {
      "path": "registry/components/keyframery/field.tsx",
      "content": "\"use client\"\n\n/* Styled field: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n  Field as FieldRoot,\n  FieldControl as FieldControlPrimitive,\n  FieldDescription as FieldDescriptionPart,\n  FieldError as FieldErrorPrimitive,\n  FieldGroup as FieldGroupPart,\n  FieldLabel as FieldLabelPart,\n  FieldLegend as FieldLegendPart,\n  FieldSet as FieldSetPart,\n  useFieldControl,\n} from \"@/components/keyframery/primitives/field\"\nimport { cn } from \"@/lib/utils\"\n\n/* The field look, for a native control rendered through FieldControl. The hairline's\n   colour is one variable, so hover, focus and invalid each change a single value. The ring\n   is the outline; the primitive makes it close in on a spring. */\nconst fieldBox =\n  \"h-9 w-full min-w-0 rounded-[10px] bg-background px-3 text-[13px] text-foreground placeholder:text-muted-foreground/70 \" +\n  \"outline-0 outline-ring aria-invalid:outline-destructive focus-visible:outline-[3px] focus-visible:outline-ring/30 aria-invalid:focus-visible:outline-destructive/30 \" +\n  \"[--field-line:rgb(0_0_0/0.09)] dark:[--field-line:rgb(255_255_255/0.1)] \" +\n  \"shadow-[0_0_0_1px_var(--field-line),0_1px_2px_rgb(0_0_0/0.05)] dark:shadow-[0_0_0_1px_var(--field-line)] \" +\n  \"hover:[--field-line:rgb(0_0_0/0.16)] dark:hover:[--field-line:rgb(255_255_255/0.18)] \" +\n  \"focus-visible:[--field-line:var(--ring)] dark:focus-visible:[--field-line:var(--ring)] \" +\n  \"aria-invalid:[--field-line:var(--destructive)] dark:aria-invalid:[--field-line:var(--destructive)] \" +\n  \"disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:[--field-line:rgb(0_0_0/0.06)] dark:disabled:[--field-line:rgb(255_255_255/0.06)]\"\n\nfunction Field({ className, ...props }: React.ComponentProps<typeof FieldRoot>) {\n  return <FieldRoot className={cn(\"flex min-w-0 flex-col gap-1.5\", className)} {...props} />\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof FieldLabelPart>) {\n  return (\n    <FieldLabelPart\n      className={cn(\n        \"w-fit text-[13px] leading-4 font-medium text-foreground\",\n        \"transition-opacity duration-[calc(150ms*var(--kf-speed,1))] data-disabled:opacity-50 motion-reduce:transition-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldControl({ className, ...props }: React.ComponentProps<typeof FieldControlPrimitive>) {\n  return <FieldControlPrimitive className={cn(fieldBox, className)} {...props} />\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof FieldDescriptionPart>) {\n  return (\n    <FieldDescriptionPart\n      className={cn(\n        \"text-[12px] leading-4 text-muted-foreground\",\n        \"transition-opacity duration-[calc(150ms*var(--kf-speed,1))] data-disabled:opacity-50 motion-reduce:transition-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/* The primitive opens its height and lifts it in; it also starts with the field's gap taken\n   back, so nothing below jumps. */\nfunction FieldError({ className, ...props }: React.ComponentProps<typeof FieldErrorPrimitive>) {\n  return (\n    <FieldErrorPrimitive\n      className={cn(\"text-[12px] leading-4 font-medium text-destructive starting:-mt-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<typeof FieldSetPart>) {\n  return (\n    <FieldSetPart\n      className={cn(\n        \"m-0 flex min-w-0 flex-col gap-4 border-0 p-0\",\n        /* A description right under the legend sits close to it. */\n        \"*:data-[slot=field-description]:-mt-2.5 *:data-[slot=field-description]:text-[13px] *:data-[slot=field-description]:leading-5\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({ className, ...props }: React.ComponentProps<typeof FieldLegendPart>) {\n  return (\n    <FieldLegendPart\n      className={cn(\n        /* Floated, a legend lays out like any other child, so the set's gap applies to it. */\n        \"float-left w-full p-0 text-[15px] leading-5 font-semibold tracking-tight text-foreground\",\n        \"transition-opacity duration-[calc(150ms*var(--kf-speed,1))] data-disabled:opacity-50 motion-reduce:transition-none!\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<typeof FieldGroupPart>) {\n  return <FieldGroupPart className={cn(\"flex min-w-0 flex-col gap-4\", className)} {...props} />\n}\n\nexport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  useFieldControl,\n}\n",
      "type": "registry:component",
      "target": "components/keyframery/field.tsx"
    }
  ],
  "type": "registry:component"
}