{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-field",
  "title": "Text Field",
  "description": "Labelled text input bundling description and error message.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/text-field/text-field.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Input } from \"@vllnt/ui\";\nimport { Label } from \"@vllnt/ui\";\n\n/** Labelled text input bundling description and error message together. */\nexport type TextFieldProps = React.ComponentPropsWithoutRef<\"input\"> & {\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n  label?: React.ReactNode;\n  labelClassName?: string;\n  rootClassName?: string;\n};\n\nconst TextField = ({\n  className,\n  description,\n  error,\n  id,\n  label,\n  labelClassName,\n  ref,\n  rootClassName,\n  ...props\n}: TextFieldProps & { ref?: React.Ref<HTMLInputElement> }) => {\n  const generatedId = React.useId();\n  const inputId = id ?? generatedId;\n  const descriptionId = `${inputId}-description`;\n  const errorId = `${inputId}-error`;\n  const invalid = Boolean(error);\n  const describedBy =\n    [description ? descriptionId : null, error ? errorId : null]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", rootClassName)}>\n      {label ? (\n        <Label\n          className={cn(invalid && \"text-destructive\", labelClassName)}\n          htmlFor={inputId}\n        >\n          {label}\n        </Label>\n      ) : null}\n      <Input\n        {...props}\n        aria-describedby={describedBy}\n        aria-invalid={invalid || undefined}\n        className={className}\n        id={inputId}\n        ref={ref}\n      />\n      {description ? (\n        <p className=\"text-sm text-muted-foreground\" id={descriptionId}>\n          {description}\n        </p>\n      ) : null}\n      {error ? (\n        <p\n          className=\"text-sm font-medium text-destructive\"\n          id={errorId}\n          role=\"alert\"\n        >\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n};\nTextField.displayName = \"TextField\";\n\nexport { TextField };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}