{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react@1.8.0"
  ],
  "description": "A single-line text input with label, hint and invalid state.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { Field } from '@base-ui/react/field'\nimport { forwardRef, type ChangeEvent, type InputHTMLAttributes, type ReactNode } from 'react'\nimport { useLiquefyConfig } from '@/lib/provider'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\nimport { useLiquidGlass } from '@/hooks/use-liquid-glass'\n\n// The label, the control and the hint used to be wired together by hand with a\n// generated id threaded through `htmlFor` and `aria-describedby`. Field owns\n// that wiring now, which also means a control put in a form reports its\n// validity through the same parts rather than needing a second set of props.\n\nexport type LiquidTextFieldProps = InputHTMLAttributes<HTMLInputElement> & LiquidStyleProps & {\n  endAdornment?: ReactNode\n  hint?: string\n  label?: string\n  startAdornment?: ReactNode\n}\n\nexport const LiquidTextField = forwardRef<HTMLInputElement, LiquidTextFieldProps>(({\n  className,\n  endAdornment,\n  hint,\n  label,\n  onChange,\n  startAdornment,\n  style,\n  styles,\n  ...props\n}, ref) => {\n  const config = useLiquefyConfig()\n  const [controlRef, canvasRef, pulse] = useLiquidGlass<HTMLSpanElement>(undefined, {\n    bounce: 0.02,\n    glow: config.glow,\n    intensity: config.intensity,\n    lens: config.lens && config.transparency,\n    lensStrength: config.refraction,\n    motion: config.motion,\n    ripple: config.ripple,\n    shimmer: config.shimmer,\n    sparkle: config.sparkle,\n    tilt: 0,\n    tint: config.tint,\n    webgl: config.webgl,\n    wobbliness: config.wobbliness * 0.6,\n  })\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    // Tiny purun on every keystroke so the control feels alive as you type.\n    pulse(0.4)\n    onChange?.(event)\n  }\n  // The field is the layout box, so it owns className, style and styles alike.\n  const root = useLiquidStyles('lq-text-field', { className, style, styles })\n\n  return (\n    <Field.Root className={root.className} style={root.style}>\n      {label && <Field.Label className=\"lq-control-label\">{label}</Field.Label>}\n      <span className=\"lq-text-field__control\" ref={controlRef}>\n        {config.webgl && <canvas aria-hidden=\"true\" className=\"lq-surface__shader\" ref={canvasRef} />}\n        {startAdornment && <span className=\"lq-text-field__adornment\">{startAdornment}</span>}\n        <Field.Control onChange={handleChange} ref={ref} {...props} />\n        {endAdornment && <span className=\"lq-text-field__adornment\">{endAdornment}</span>}\n      </span>\n      {hint && <Field.Description className=\"lq-control-hint\">{hint}</Field.Description>}\n    </Field.Root>\n  )\n})\n\nLiquidTextField.displayName = 'LiquidTextField'\n",
      "path": "registry/liquid-text-field.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-text-field",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/provider.json",
    "https://liquefy-ui.com/r/styles-prop.json",
    "https://liquefy-ui.com/r/use-liquid-glass.json"
  ],
  "title": "LiquidTextField",
  "type": "registry:ui"
}