{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-field",
  "title": "OTP Field",
  "description": "A one-time code input in slots of glass.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json"
  ],
  "files": [
    {
      "path": "src/otp-field.tsx",
      "content": "\"use client\";\n\nimport { OTPField as BaseOTPField } from \"@base-ui/react/otp-field\";\nimport { Fragment } from \"react\";\nimport { GlassPane, type GlassRefraction } from \"./glass\";\nimport { cx, type GlassOptions } from \"./types\";\nimport \"./liquikit.css\";\n\nexport type OtpFieldProps = Omit<\n\tBaseOTPField.Root.Props,\n\t\"className\" | \"render\" | \"children\" | \"length\"\n> &\n\tGlassOptions & {\n\t\tlength?: number;\n\t\tgroupSize?: number;\n\t\trefraction?: GlassRefraction;\n\t\tclassName?: string;\n\t};\n\nexport function OtpField({\n\tlength = 6,\n\tgroupSize,\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tclassName,\n\t...rootProps\n}: OtpFieldProps) {\n\t// Base UI drops an aria-label from the first slot, which leaves it unnamed\n\t// when the field has no <label>, so the first slot takes the field's own.\n\tconst firstLabel = rootProps[\"aria-label\"];\n\n\treturn (\n\t\t<BaseOTPField.Root\n\t\t\t{...rootProps}\n\t\t\tlength={length}\n\t\t\tclassName={cx(\"glass-ui-otp\", className)}\n\t\t>\n\t\t\t{Array.from({ length }, (_, index) => (\n\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: a slot is its position\n\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t{groupSize && index > 0 && index % groupSize === 0 ? (\n\t\t\t\t\t\t<BaseOTPField.Separator className=\"glass-ui-otp__separator\" />\n\t\t\t\t\t) : null}\n\t\t\t\t\t<BaseOTPField.Input\n\t\t\t\t\t\taria-label={\n\t\t\t\t\t\t\tindex === 0 ? undefined : `Character ${index + 1} of ${length}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\trender={(props) => (\n\t\t\t\t\t\t\t<span className=\"glass-ui-otp__slot\">\n\t\t\t\t\t\t\t\t<GlassPane\n\t\t\t\t\t\t\t\t\tradius={12}\n\t\t\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\t\t\tlens={lens}\n\t\t\t\t\t\t\t\t\tliquid={liquid}\n\t\t\t\t\t\t\t\t\trefraction={refraction}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\t\taria-label={props[\"aria-label\"] ?? firstLabel}\n\t\t\t\t\t\t\t\t\t\tclassName=\"glass-ui-otp__input\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</GlassPane>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</BaseOTPField.Root>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/otp-field.tsx"
    }
  ],
  "type": "registry:ui"
}