{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-input-18",
  "description": "Input with characters remaining counter",
  "registryDependencies": [
    "@coss/field",
    "@coss/input"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-input-18.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Field, FieldDescription } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  const maxLength = 14;\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Field>\n      <Input\n        aria-label=\"Code\"\n        maxLength={maxLength}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter code\"\n        type=\"text\"\n        value={value}\n      />\n      <FieldDescription>\n        <span className=\"tabular-nums\">{maxLength - value.length}</span>{\" \"}\n        characters left\n      </FieldDescription>\n    </Field>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "field",
    "input"
  ],
  "type": "registry:block"
}