{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-field",
  "type": "registry:block",
  "title": "Form Field",
  "description": "A clean field wrapper for labels, help text, and validation.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/form-field.tsx",
      "type": "registry:component",
      "target": "@components/wensity/form-field.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { cn } from \"@/lib/utils\";\n\nconst elevatedSurfaceClass = cn(\n  \"relative isolate overflow-hidden rounded-[var(--primitive-radius-surface)]\",\n  \"border border-[var(--border)] bg-[var(--primitive-surface-elevated)]\",\n  \"[box-shadow:var(--primitive-shadow-raised)]\",\n);\n\nexport type FormFieldLayout = \"stack\" | \"inline\" | \"split\" | \"card\";\nexport type FormFieldDensity = \"sm\" | \"md\" | \"lg\";\n\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  id?: string;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n  required?: boolean;\n  optional?: boolean;\n  layout?: FormFieldLayout;\n  density?: FormFieldDensity;\n  children: React.ReactNode;\n  labelClassName?: string;\n  descriptionClassName?: string;\n  errorClassName?: string;\n}\n\nexport interface FormFieldContextValue {\n  controlId: string;\n  descriptionId?: string;\n  errorId?: string;\n  describedBy?: string;\n  invalid: boolean;\n  required?: boolean;\n}\n\nexport interface FormFieldControlProps\n  extends React.HTMLAttributes<HTMLElement> {\n  asChild?: boolean;\n}\n\nexport interface FormFieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean;\n  optional?: boolean;\n}\n\nexport interface FormFieldDescriptionProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface FormFieldErrorProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport interface FormSectionProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  divided?: boolean;\n}\n\nexport interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  align?: \"left\" | \"right\" | \"between\";\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(\n  null,\n);\n\nconst layoutClasses: Record<FormFieldLayout, string> = {\n  stack: \"flex flex-col\",\n  inline:\n    \"grid items-start gap-x-5 sm:grid-cols-[minmax(8rem,0.42fr)_minmax(0,1fr)]\",\n  split:\n    \"grid items-start gap-x-6 sm:grid-cols-[minmax(10rem,0.5fr)_minmax(0,1fr)]\",\n  card: elevatedSurfaceClass,\n};\n\nconst densityGap: Record<FormFieldDensity, string> = {\n  sm: \"gap-1.5\",\n  md: \"gap-1.5\",\n  lg: \"gap-2.5\",\n};\n\nconst cardPadding: Record<FormFieldDensity, string> = {\n  sm: \"p-3.5\",\n  md: \"p-4\",\n  lg: \"p-5\",\n};\n\nconst labelTextClass =\n  \"block text-[13px] font-medium leading-none tracking-[-0.01em] text-[var(--foreground)]\";\n\nconst helperTextClass =\n  \"text-[12px] leading-[1.45] text-[var(--primitive-text-secondary)]\";\n\nconst errorTextClass =\n  \"text-[12px] leading-[1.45] font-medium text-[var(--primitive-destructive)] motion-safe:transition-[opacity,transform] motion-safe:duration-150 motion-safe:ease-[var(--primitive-ease)] motion-reduce:transition-none\";\n\nfunction useFormFieldContext(component: string) {\n  const context = React.useContext(FormFieldContext);\n  if (!context) {\n    throw new Error(`${component} must be used inside FormField.`);\n  }\n  return context;\n}\n\nfunction FieldLabelMarker({\n  required,\n  optional,\n}: {\n  required?: boolean;\n  optional?: boolean;\n}) {\n  if (required) {\n    return (\n      <span\n        aria-hidden=\"true\"\n        className=\"ml-1 font-medium text-[var(--primitive-destructive)]\"\n      >\n        *\n      </span>\n    );\n  }\n\n  if (optional) {\n    return (\n      <span\n        role=\"note\"\n        className=\"ml-2 text-[length:var(--primitive-text-hint)] font-medium text-[var(--primitive-text-secondary)]\"\n      >\n        Optional\n      </span>\n    );\n  }\n\n  return null;\n}\n\nexport function FormField({\n  id,\n  label,\n  description,\n  error,\n  required,\n  optional,\n  layout = \"stack\",\n  density = \"md\",\n  children,\n  className,\n  labelClassName,\n  descriptionClassName,\n  errorClassName,\n  ...props\n}: FormFieldProps) {\n  const reactId = React.useId();\n  const controlId = id ?? `wensity-field-${reactId}`;\n  const descriptionId = description ? `${controlId}-description` : undefined;\n  const errorId = error ? `${controlId}-error` : undefined;\n  const describedBy =\n    [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n  const context = React.useMemo<FormFieldContextValue>(\n    () => ({\n      controlId,\n      descriptionId,\n      errorId,\n      describedBy,\n      invalid: Boolean(error),\n      required,\n    }),\n    [controlId, describedBy, descriptionId, errorId, error, required],\n  );\n\n  const meta =\n    label || description ? (\n      <div className={cn(\"min-w-0\", layout !== \"stack\" && \"pt-1\")}>\n        {label ? (\n          <FormFieldLabel\n            required={required}\n            optional={optional}\n            className={labelClassName}\n          >\n            {label}\n          </FormFieldLabel>\n        ) : null}\n        {description ? (\n          <FormFieldDescription className={cn(\"mt-1\", descriptionClassName)}>\n            {description}\n          </FormFieldDescription>\n        ) : null}\n      </div>\n    ) : null;\n\n  const control = (\n    <div className=\"min-w-0\">\n      {children}\n      {error ? (\n        <FormFieldError className={cn(\"mt-1\", errorClassName)}>\n          {error}\n        </FormFieldError>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <FormFieldContext.Provider value={context}>\n      <BaseField.Root data-wensity-primitive=\"\"\n        invalid={Boolean(error)}\n        data-slot=\"form-field\"\n        data-layout={layout}\n        data-invalid={error ? \"\" : undefined}\n        className={cn(\n          layoutClasses[layout],\n          densityGap[density],\n          layout === \"card\" && cardPadding[density],\n          className,\n        )}\n        {...props}\n      >\n        {meta}\n        {control}\n      </BaseField.Root>\n    </FormFieldContext.Provider>\n  );\n}\n\nexport function FormFieldControl({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: FormFieldControlProps) {\n  const context = useFormFieldContext(\"FormFieldControl\");\n\n  if (asChild && React.isValidElement(children)) {\n    // Pass the child element as `render` so Base UI runs mergeProps(controlProps, child.props):\n    // child props win and event handlers compose (Radix Slot semantics).\n    return (\n      <BaseField.Control\n        id={context.controlId}\n        className={className}\n        aria-describedby={context.describedBy}\n        aria-invalid={context.invalid || undefined}\n        aria-required={context.required || undefined}\n        render={children}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <BaseField.Control\n      id={context.controlId}\n      render={(controlProps) => (\n        <div\n          {...controlProps}\n          aria-describedby={\n            (controlProps[\"aria-describedby\"] as string | undefined) ??\n            context.describedBy\n          }\n          aria-invalid={context.invalid || undefined}\n          aria-required={context.required || undefined}\n          className={cn(controlProps.className as string | undefined, className)}\n          {...props}\n        >\n          {children}\n        </div>\n      )}\n    />\n  );\n}\n\nexport function FormFieldLabel({\n  required,\n  optional,\n  className,\n  children,\n  ...props\n}: FormFieldLabelProps) {\n  const context = useFormFieldContext(\"FormFieldLabel\");\n\n  return (\n    <BaseField.Label className={cn(labelTextClass, className)} {...props}>\n      {children}\n      <FieldLabelMarker\n        required={required ?? context.required}\n        optional={optional}\n      />\n    </BaseField.Label>\n  );\n}\n\nexport function FormFieldDescription({\n  className,\n  ...props\n}: FormFieldDescriptionProps) {\n  const context = useFormFieldContext(\"FormFieldDescription\");\n\n  return (\n    <BaseField.Description\n      id={context.descriptionId}\n      className={cn(helperTextClass, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FormFieldError({ className, ...props }: FormFieldErrorProps) {\n  const context = useFormFieldContext(\"FormFieldError\");\n\n  return (\n    <BaseField.Error\n      id={context.errorId}\n      match\n      role=\"alert\"\n      className={cn(errorTextClass, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FormSection({\n  title,\n  description,\n  actions,\n  divided = false,\n  children,\n  className,\n  ...props\n}: FormSectionProps) {\n  return (\n    <section className={cn(elevatedSurfaceClass, className)} {...props}>\n      {title || description || actions ? (\n        <header className=\"flex items-start justify-between gap-4 border-b border-[var(--border)] px-5 py-4\">\n          <div className=\"min-w-0\">\n            {title ? (\n              <h3 className=\"font-[family-name:var(--primitive-font-display)] text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]\">\n                {title}\n              </h3>\n            ) : null}\n            {description ? (\n              <p className={cn(\"mt-1\", helperTextClass)}>{description}</p>\n            ) : null}\n          </div>\n          {actions ? <div className=\"shrink-0\">{actions}</div> : null}\n        </header>\n      ) : null}\n      <div\n        className={cn(\n          \"p-5\",\n          divided &&\n            \"[&>[data-slot=form-field]]:border-b [&>[data-slot=form-field]]:border-[var(--border)] [&>[data-slot=form-field]]:py-4 [&>[data-slot=form-field]:first-child]:pt-0 [&>[data-slot=form-field]:last-child]:border-b-0 [&>[data-slot=form-field]:last-child]:pb-0\",\n          !divided && \"space-y-4\",\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n\nexport function FormActions({\n  align = \"right\",\n  className,\n  ...props\n}: FormActionsProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center gap-2\",\n        align === \"left\" && \"justify-start\",\n        align === \"right\" && \"justify-end\",\n        align === \"between\" && \"justify-between\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/form-field.tsx. For Pro components and updates, use pnpm dlx wensity@latest add form-field.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "form-field",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/form-field",
      "shadcnUrl": "https://ui.wensity.com/r/form-field",
      "cliInstall": "pnpm dlx wensity@latest add form-field"
    }
  }
}