{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-field",
  "type": "registry:ui",
  "title": "OTP Field",
  "description": "An OTP field component",
  "dependencies": [
    "solid-js",
    "@corvu/otp-field"
  ],
  "files": [
    {
      "path": "src/registry/ui/otp-field.tsx",
      "content": "import type { Component, ComponentProps, ValidComponent } from \"solid-js\"\nimport { Show, splitProps } from \"solid-js\"\n\nimport type { DynamicProps, RootProps } from \"@corvu/otp-field\"\nimport OtpField from \"@corvu/otp-field\"\n\nimport { cn } from \"~/lib/utils\"\n\nexport const REGEXP_ONLY_DIGITS = \"^\\\\d*$\"\nexport const REGEXP_ONLY_CHARS = \"^[a-zA-Z]*$\"\nexport const REGEXP_ONLY_DIGITS_AND_CHARS = \"^[a-zA-Z0-9]*$\"\n\ntype OTPFieldProps<T extends ValidComponent = \"div\"> = RootProps<T> & { class?: string }\n\nconst OTPField = <T extends ValidComponent = \"div\">(props: DynamicProps<T, OTPFieldProps<T>>) => {\n  const [local, others] = splitProps(props as OTPFieldProps, [\"class\"])\n  return (\n    <OtpField\n      class={cn(\n        \"flex items-center gap-2 disabled:cursor-not-allowed has-[:disabled]:opacity-50\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\nconst OTPFieldInput = OtpField.Input\n\nconst OTPFieldGroup: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <div class={cn(\"flex items-center\", local.class)} {...others} />\n}\n\nconst OTPFieldSlot: Component<ComponentProps<\"div\"> & { index: number }> = (props) => {\n  const [local, others] = splitProps(props, [\"class\", \"index\"])\n  const context = OtpField.useContext()\n  const char = () => context.value()[local.index]\n  const showFakeCaret = () => context.value().length === local.index && context.isInserting()\n\n  return (\n    <div\n      class={cn(\n        \"group relative flex size-10 items-center justify-center border-y border-r border-input text-sm first:rounded-l-md first:border-l last:rounded-r-md\",\n        local.class\n      )}\n      {...others}\n    >\n      <div\n        class={cn(\n          \"absolute inset-0 z-10 transition-all group-first:rounded-l-md group-last:rounded-r-md\",\n          context.activeSlots().includes(local.index) && \"ring-2 ring-ring ring-offset-background\"\n        )}\n      />\n      {char()}\n      <Show when={showFakeCaret()}>\n        <div class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div class=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      </Show>\n    </div>\n  )\n}\n\nconst OTPFieldSeparator: Component<ComponentProps<\"div\">> = (props) => {\n  return (\n    <div {...props}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-6\"\n      >\n        <circle cx=\"12.1\" cy=\"12.1\" r=\"1\" />\n      </svg>\n    </div>\n  )\n}\n\nexport { OTPField, OTPFieldInput, OTPFieldGroup, OTPFieldSlot, OTPFieldSeparator }\n",
      "type": "registry:ui"
    }
  ]
}