feat(v4): new implementation for the InputOTP component

apps/v4/components/demo/InputOTPControlledDemo.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/registry/new-york-v4/ui/input-otp'
+
+const value = ref('')
+</script>
+
+<template>
+  <div class="space-y-2">
+    <InputOTP
+      v-model="value"
+      :maxlength="6"
+    >
+      <InputOTPGroup>
+        <InputOTPSlot :index="0" />
+        <InputOTPSlot :index="1" />
+        <InputOTPSlot :index="2" />
+        <InputOTPSlot :index="3" />
+        <InputOTPSlot :index="4" />
+        <InputOTPSlot :index="5" />
+      </InputOTPGroup>
+    </InputOTP>
+    <div class="text-center text-sm">
+      <template v-if="value === ''">
+        Enter your one-time password.
+      </template>
+      <template v-else>
+        You entered: {{ value }}
+      </template>
+    </div>
+  </div>
+</template>

apps/v4/components/demo/InputOTPDemo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@/registry/new-york-v4/ui/input-otp'
+</script>
+
+<template>
+  <InputOTP :maxlength="6">
+    <InputOTPGroup>
+      <InputOTPSlot :index="0" />
+      <InputOTPSlot :index="1" />
+      <InputOTPSlot :index="2" />
+    </InputOTPGroup>
+    <InputOTPSeparator />
+    <InputOTPGroup>
+      <InputOTPSlot :index="3" />
+      <InputOTPSlot :index="4" />
+      <InputOTPSlot :index="5" />
+    </InputOTPGroup>
+  </InputOTP>
+</template>

apps/v4/components/demo/InputOTPFormDemo.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm, Field as VeeField } from 'vee-validate'
+import { toast } from 'vue-sonner'
+import { z } from 'zod'
+
+import { Button } from '@/registry/new-york-v4/ui/button'
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from '@/registry/new-york-v4/ui/field'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/registry/new-york-v4/ui/input-otp'
+
+const formSchema = toTypedSchema(
+  z.object({
+    pin: z.string().min(6, {
+      message: 'Your one-time password must be 6 characters.',
+    }),
+  }),
+)
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    pin: '',
+  },
+})
+
+const onSubmit = handleSubmit((data) => {
+  toast('You submitted the following values:', {
+    description: h('pre', { class: 'mt-2 w-[320px] rounded-md bg-neutral-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(data, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form id="form-otp-demo" class="space-y-6 w-sm" @submit="onSubmit">
+    <FieldGroup>
+      <VeeField v-slot="{ componentField, errors }" name="pin">
+        <Field :data-invalid="!!errors.length">
+          <FieldLabel for="form-otp-demo-pin">
+            One-Time Password
+          </FieldLabel>
+          <InputOTP
+            id="form-otp-demo-pin"
+            v-bind="componentField"
+            :maxlength="6"
+            :aria-invalid="!!errors.length"
+          >
+            <InputOTPGroup>
+              <InputOTPSlot :index="0" />
+              <InputOTPSlot :index="1" />
+              <InputOTPSlot :index="2" />
+              <InputOTPSlot :index="3" />
+              <InputOTPSlot :index="4" />
+              <InputOTPSlot :index="5" />
+            </InputOTPGroup>
+          </InputOTP>
+          <FieldDescription>
+            Please enter the one-time password sent to your phone.
+          </FieldDescription>
+          <FieldError v-if="errors.length" :errors="errors" />
+        </Field>
+      </VeeField>
+    </FieldGroup>
+    <Button type="submit" form="form-otp-demo">
+      Submit
+    </Button>
+  </form>
+</template>

apps/v4/components/demo/InputOTPPatternDemo.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/registry/new-york-v4/ui/input-otp'
+</script>
+
+<template>
+  <InputOTP :maxlength="6" :pattern="REGEXP_ONLY_DIGITS_AND_CHARS">
+    <InputOTPGroup>
+      <InputOTPSlot :index="0" />
+      <InputOTPSlot :index="1" />
+      <InputOTPSlot :index="2" />
+      <InputOTPSlot :index="3" />
+      <InputOTPSlot :index="4" />
+      <InputOTPSlot :index="5" />
+    </InputOTPGroup>
+  </InputOTP>
+</template>

apps/v4/components/demo/InputOTPSeparatorDemo.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@/registry/new-york-v4/ui/input-otp'
+</script>
+
+<template>
+  <InputOTP :maxlength="6">
+    <InputOTPGroup>
+      <InputOTPSlot :index="0" />
+      <InputOTPSlot :index="1" />
+    </InputOTPGroup>
+    <InputOTPSeparator />
+    <InputOTPGroup>
+      <InputOTPSlot :index="2" />
+      <InputOTPSlot :index="3" />
+    </InputOTPGroup>
+    <InputOTPSeparator />
+    <InputOTPGroup>
+      <InputOTPSlot :index="4" />
+      <InputOTPSlot :index="5" />
+    </InputOTPGroup>
+  </InputOTP>
+</template>

apps/v4/content/docs/components/input-otp.md

@@ -0,0 +1,178 @@
+---
+title: Input OTP
+description: Accessible one-time password component with copy paste functionality.
+component: true
+links:
+  doc: https://vue-input-otp.vercel.app/
+---
+
+::component-preview
+---
+name: InputOTPDemo
+description: An input OTP component.
+---
+::
+
+## Installation
+
+::code-tabs
+
+::tabs-list
+
+  ::tabs-trigger{value="cli"}
+  CLI
+  ::
+
+  ::tabs-trigger{value="manual"}
+  Manual
+  ::
+
+::
+
+::tabs-content{value="cli"}
+
+```bash
+npx shadcn-vue@latest add input-otp
+```
+
+::
+
+::tabs-content{value="manual"}
+  ::steps
+    ::step
+    Install the following dependencies:
+    ::
+
+    ```bash
+    npm install vue-input-otp
+    ```
+
+    ::step
+    Copy and paste the GitHub source code into your project.
+    ::
+
+    ::step
+    Update the import paths to match your project setup.
+    ::
+  ::
+::
+
+::
+
+## Usage
+
+```vue showLineNumbers
+<script setup lang="ts">
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp"
+</script>
+
+<template>
+  <InputOTP v-model="value" :maxlength="6">
+    <InputOTPGroup>
+      <InputOTPSlot :index="0" />
+      <InputOTPSlot :index="1" />
+      <InputOTPSlot :index="2" />
+    </InputOTPGroup>
+    <InputOTPSeparator />
+    <InputOTPGroup>
+      <InputOTPSlot :index="3" />
+      <InputOTPSlot :index="4" />
+      <InputOTPSlot :index="5" />
+    </InputOTPGroup>
+  </InputOTP>
+</template>
+```
+
+## Examples
+
+### Pattern
+
+Use the `pattern` prop to define a custom pattern for the OTP input.
+
+::component-preview
+---
+name: InputOTPPatternDemo
+description: An input OTP component with a custom pattern.
+---
+::
+
+```vue showLineNumbers {2,9}
+<script setup lang="ts">
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "vue-input-otp"
+// ...
+</script>
+
+<template>
+  <InputOTP
+    maxlength="6"
+    :pattern="REGEXP_ONLY_DIGITS_AND_CHARS"
+  >
+    <InputOTPGroup>
+      <InputOTPSlot :index="0" />
+      <!-- ... -->
+    </InputOTPGroup>
+  </InputOTP>
+</template>
+```
+
+### Separator
+You can use the `<InputOTPSeparator />` component to add a separator between the input groups.
+
+::component-preview
+---
+name: InputOTPSeparatorDemo
+description: An input OTP component with a separator.
+---
+::
+
+```vue showLineNumbers {5,17}
+<script setup lang="ts">
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp"
+// ...
+</script>
+
+<template>
+  <InputOTP maxlength="4">
+    <InputOTPGroup>
+      <InputOTPSlot :index="0" />
+      <InputOTPSlot :index="1" />
+    </InputOTPGroup>
+    <InputOTPSeparator />
+    <InputOTPGroup>
+      <InputOTPSlot :index="2" />
+      <InputOTPSlot :index="3" />
+    </InputOTPGroup>
+  </InputOTP>
+</template>
+```
+
+### Controlled
+You can use the `v-model` directive to control the input value.
+
+::component-preview
+---
+name: InputOTPControlledDemo
+description: A controlled input OTP component.
+---
+::
+
+### Form
+
+You can use the InputOTP component within a form, for example with VeeValidate.
+
+::component-preview
+---
+name: InputOTPFormDemo
+description: An input OTP component used within a form.
+---
+::

apps/v4/package.json

@@ -41,6 +41,7 @@
     "vaul-vue": "catalog:",
     "vee-validate": "catalog:",
     "vue": "catalog:",
+    "vue-input-otp": "^0.2.2",
     "vue-sonner": "catalog:",
     "zod": "catalog:"
   },