chore: update vue-input-otp

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "typescript.tsdk": "./node_modules/typescript/lib",
   "eslint.experimental.useFlatConfig": true,
   "prettier.enable": false,
   "editor.formatOnSave": false,

apps/www/.vitepress/theme/config/docs.ts

@@ -245,6 +245,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/input',
           items: [],
         },
+        {
+          title: 'Input OTP',
+          href: '/docs/components/input-otp',
+          items: [],
+          label: 'New',
+        },
         {
           title: 'Label',
           href: '/docs/components/label',

apps/www/__registry__/index.ts

@@ -486,6 +486,48 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/InputFormAutoAnimate.vue"],
     },
+    "InputOtpControlled": {
+      name: "InputOtpControlled",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/default/example/InputOtpControlled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/InputOtpControlled.vue"],
+    },
+    "InputOtpDemo": {
+      name: "InputOtpDemo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/default/example/InputOtpDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/InputOtpDemo.vue"],
+    },
+    "InputOtpDisabled": {
+      name: "InputOtpDisabled",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/default/example/InputOtpDisabled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/InputOtpDisabled.vue"],
+    },
+    "InputOtpForm": {
+      name: "InputOtpForm",
+      type: "components:example",
+      registryDependencies: ["button","form","toast","input-otp"],
+      component: () => import("../src/lib/registry/default/example/InputOtpForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/InputOtpForm.vue"],
+    },
+    "InputOtpPattern": {
+      name: "InputOtpPattern",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/default/example/InputOtpPattern.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/InputOtpPattern.vue"],
+    },
+    "InputOtpSeparatorDemo": {
+      name: "InputOtpSeparatorDemo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/default/example/InputOtpSeparatorDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/InputOtpSeparatorDemo.vue"],
+    },
     "InputWithButton": {
       name: "InputWithButton",
       type: "components:example",
@@ -1516,6 +1558,48 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/InputFormAutoAnimate.vue"],
     },
+    "InputOtpControlled": {
+      name: "InputOtpControlled",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/new-york/example/InputOtpControlled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/InputOtpControlled.vue"],
+    },
+    "InputOtpDemo": {
+      name: "InputOtpDemo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/new-york/example/InputOtpDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/InputOtpDemo.vue"],
+    },
+    "InputOtpDisabled": {
+      name: "InputOtpDisabled",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/new-york/example/InputOtpDisabled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/InputOtpDisabled.vue"],
+    },
+    "InputOtpForm": {
+      name: "InputOtpForm",
+      type: "components:example",
+      registryDependencies: ["button","form","toast","input-otp"],
+      component: () => import("../src/lib/registry/new-york/example/InputOtpForm.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/InputOtpForm.vue"],
+    },
+    "InputOtpPattern": {
+      name: "InputOtpPattern",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/new-york/example/InputOtpPattern.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/InputOtpPattern.vue"],
+    },
+    "InputOtpSeparatorDemo": {
+      name: "InputOtpSeparatorDemo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: () => import("../src/lib/registry/new-york/example/InputOtpSeparatorDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/InputOtpSeparatorDemo.vue"],
+    },
     "InputWithButton": {
       name: "InputWithButton",
       type: "components:example",

apps/www/package.json

@@ -37,6 +37,7 @@
     "vaul-vue": "^0.1.0",
     "vee-validate": "4.12.5",
     "vue": "^3.4.21",
+    "vue-input-otp": "^0.1.0",
     "vue-sonner": "^1.1.2",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"

apps/www/src/content/docs/components/input-otp.md

@@ -0,0 +1,167 @@
+---
+title: Input OTP
+description: Accessible one-time password component with copy paste functionality.
+source: apps/www/src/lib/registry/default/ui/input-otp
+primitive: https://vue-input-otp.vercel.app/
+---
+
+<ComponentPreview name="InputOtpDemo" />
+
+## About
+
+Input OTP is built on top of [vue-input-otp](https://github.com/wobsoriano/vue-input-otp) by [@wobsoriano](https://github.com/wobsoriano).
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add input-otp
+```
+
+#### Update `tailwind.config`
+
+```js:line-numbers {6-9,12}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
+        },
+      },
+      animation: {
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
+      },
+    },
+  },
+}
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSeparator,
+  InputOtpSlot
+} from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, idx) in slots.slice(0, 3)" v-bind="slot" :key="idx" />
+    </InputOtpGroup>
+    <InputOtpSeparator />
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, idx) in slots.slice(3)" v-bind="slot" :key="idx" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>
+```
+
+## Examples
+
+### Pattern
+
+Use the `pattern` prop to define a custom pattern for the OTP input.
+
+<ComponentPreview name="InputOtpPattern" />
+
+```vue:line-numbers
+<script setup lang="ts">
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot
+} from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+    :pattern="REGEXP_ONLY_DIGITS_AND_CHARS"
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, idx) in slots" v-bind="slot" :key="idx" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>
+```
+
+### Disabled
+
+<ComponentPreview name="InputOtpDisabled" />
+
+```vue:line-numbers
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/default/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+    disabled
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>
+```
+
+### Separator
+
+You can use the `<InputOtpSeparator />` component to add a separator between the input groups.
+
+<ComponentPreview name="InputOtpSeparatorDemo" />
+
+```vue:line-numbers {5,19}
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSeparator,
+  InputOtpSlot,
+} from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+  >
+    <InputOtpGroup class="gap-2">
+      <template v-for="(slot, index) in slots" :key="index">
+        <InputOtpSlot class="rounded-md border" v-bind="slot" />
+        <template v-if="index !== slots.length - 1">
+          <InputOtpSeparator />
+        </template>
+      </template>
+    </InputOtpGroup>
+  </InputOtp>
+</template>
+```
+
+### Controlled
+
+You can use the `v-model` prop to control the input value.
+
+<ComponentPreview name="InputOtpControlled" />
+
+### Form
+
+<ComponentPreview name="InputOtpForm" />

apps/www/src/lib/registry/default/example/InputOtpControlled.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/default/ui/input-otp'
+
+const input = ref('')
+</script>
+
+<template>
+  <div class="space-y-2">
+    <InputOtp
+      v-slot="{ slots }"
+      v-model="input"
+      :maxlength="6"
+    >
+      <InputOtpGroup>
+        <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+      </InputOtpGroup>
+    </InputOtp>
+    <div class="text-center text-sm">
+      {{ input === ''
+        ? 'Enter your one-time password.'
+        : `You entered: ${input}`
+      }}
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/default/example/InputOtpDemo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { InputOtp, InputOtpGroup, InputOtpSeparator, InputOtpSlot } from '@/lib/registry/default/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots.slice(0, 3)" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+    <InputOtpSeparator />
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots.slice(3)" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/default/example/InputOtpDisabled.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/default/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+    disabled
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/default/example/InputOtpForm.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { toast } from '@/lib/registry/default/ui/toast'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/default/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,
+})
+
+const onSubmit = handleSubmit(({ pin }) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="pin">
+      <FormItem>
+        <FormLabel>OTP</FormLabel>
+        <FormControl>
+          <InputOtp
+            v-slot="{ slots }"
+            :maxlength="6"
+            v-bind="componentField"
+          >
+            <InputOtpGroup>
+              <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+            </InputOtpGroup>
+          </InputOtp>
+        </FormControl>
+        <FormDescription>
+          Please enter the one-time password sent to your phone.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button>Submit</Button>
+  </form>
+</template>

apps/www/src/lib/registry/default/example/InputOtpPattern.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/default/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+    :pattern="REGEXP_ONLY_DIGITS_AND_CHARS"
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/default/example/InputOtpSeparatorDemo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSeparator,
+  InputOtpSlot,
+} from '@/lib/registry/default/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+  >
+    <InputOtpGroup class="gap-2">
+      <template v-for="(slot, index) in slots" :key="index">
+        <InputOtpSlot class="rounded-md border" v-bind="slot" />
+        <template v-if="index !== slots.length - 1">
+          <InputOtpSeparator />
+        </template>
+      </template>
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/default/example/PinInputFormDemo.vue

@@ -6,7 +6,7 @@ import * as z from 'zod'
 import {
   PinInput,
   PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
+} from '@/lib/registry/default/ui/pin-input'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,

apps/www/src/lib/registry/default/ui/input-otp/InputOtp.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp'
+import { OTPInput } from 'vue-input-otp'
+import { useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="{ isFocused, isHovering, slots }"
+    v-bind="forwardedProps"
+    :container-class="cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.class)"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot :is-focused :is-hovering :slots />
+  </OTPInput>
+</template>

apps/www/src/lib/registry/default/ui/input-otp/InputOtpGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
+    <slot />
+  </primitive>
+</template>

apps/www/src/lib/registry/default/ui/input-otp/InputOtpSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { Dot } from 'lucide-vue-next'
+
+const props = defineProps<PrimitiveProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <Dot />
+    </slot>
+  </primitive>
+</template>

apps/www/src/lib/registry/default/ui/input-otp/InputOtpSlot.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { useForwardProps } from 'radix-vue'
+import type { SlotProps } from 'vue-input-otp'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SlotProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+      isActive && 'z-10 ring-2 ring-offset-background ring-ring',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <template v-if="char !== null">
+      {{ char }}
+    </template>
+
+    <div v-if="hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/default/ui/input-otp/index.ts

@@ -0,0 +1,4 @@
+export { default as InputOtp } from './InputOtp.vue'
+export { default as InputOtpGroup } from './InputOtpGroup.vue'
+export { default as InputOtpSeparator } from './InputOtpSeparator.vue'
+export { default as InputOtpSlot } from './InputOtpSlot.vue'

apps/www/src/lib/registry/new-york/example/DrawerDemo.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import { Minus, Plus } from 'lucide-vue-next'
 import { VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -12,7 +12,7 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
+} from '@/lib/registry/new-york/ui/drawer'
 
 const goal = ref(350)
 

apps/www/src/lib/registry/new-york/example/DrawerDialog.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/lib/registry/default/ui/dialog'
+} from '@/lib/registry/new-york/ui/dialog'
 import {
   Drawer,
   DrawerClose,
@@ -19,9 +19,9 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '@/lib/registry/default/ui/drawer'
+} from '@/lib/registry/new-york/ui/drawer'
-import { Label } from '@/lib/registry/default/ui/label'
+import { Label } from '@/lib/registry/new-york/ui/label'
-import { Input } from '@/lib/registry/default/ui/input'
+import { Input } from '@/lib/registry/new-york/ui/input'
 
 // Reuse `form` section
 const [UseTemplate, GridForm] = createReusableTemplate()

apps/www/src/lib/registry/new-york/example/InputOtpControlled.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/new-york/ui/input-otp'
+
+const input = ref('')
+</script>
+
+<template>
+  <div class="space-y-2">
+    <InputOtp
+      v-slot="{ slots }"
+      v-model="input"
+      :maxlength="6"
+    >
+      <InputOtpGroup>
+        <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+      </InputOtpGroup>
+    </InputOtp>
+    <div class="text-center text-sm">
+      {{ input === ''
+        ? 'Enter your one-time password.'
+        : `You entered: ${input}`
+      }}
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/example/InputOtpDemo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { InputOtp, InputOtpGroup, InputOtpSeparator, InputOtpSlot } from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, idx) in slots.slice(0, 3)" v-bind="slot" :key="idx" />
+    </InputOtpGroup>
+    <InputOtpSeparator />
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, idx) in slots.slice(3)" v-bind="slot" :key="idx" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/new-york/example/InputOtpDisabled.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+    disabled
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/new-york/example/InputOtpForm.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/new-york/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,
+})
+
+const onSubmit = handleSubmit(({ pin }) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin, null, 2))),
+  })
+})
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6 mx-auto" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="pin">
+      <FormItem>
+        <FormLabel>OTP</FormLabel>
+        <FormControl>
+          <InputOtp
+            v-slot="{ slots }"
+            :maxlength="6"
+            v-bind="componentField"
+          >
+            <InputOtpGroup>
+              <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+            </InputOtpGroup>
+          </InputOtp>
+        </FormControl>
+        <FormDescription>
+          Please enter the one-time password sent to your phone.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button>Submit</Button>
+  </form>
+</template>

apps/www/src/lib/registry/new-york/example/InputOtpPattern.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'vue-input-otp'
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSlot,
+} from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+    :pattern="REGEXP_ONLY_DIGITS_AND_CHARS"
+  >
+    <InputOtpGroup>
+      <InputOtpSlot v-for="(slot, index) in slots" v-bind="slot" :key="index" />
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/new-york/example/InputOtpSeparatorDemo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  InputOtp,
+  InputOtpGroup,
+  InputOtpSeparator,
+  InputOtpSlot,
+} from '@/lib/registry/new-york/ui/input-otp'
+</script>
+
+<template>
+  <InputOtp
+    v-slot="{ slots }"
+    :maxlength="6"
+  >
+    <InputOtpGroup class="gap-2">
+      <template v-for="(slot, index) in slots" :key="index">
+        <InputOtpSlot class="rounded-md border" v-bind="slot" />
+        <template v-if="index !== slots.length - 1">
+          <InputOtpSeparator />
+        </template>
+      </template>
+    </InputOtpGroup>
+  </InputOtp>
+</template>

apps/www/src/lib/registry/new-york/ui/input-otp/InputOtp.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp'
+import { OTPInput } from 'vue-input-otp'
+import { useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="{ isFocused, isHovering, slots }"
+    v-bind="forwardedProps"
+    :container-class="cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.class)"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot :is-focused :is-hovering :slots />
+  </OTPInput>
+</template>

apps/www/src/lib/registry/new-york/ui/input-otp/InputOtpGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
+    <slot />
+  </primitive>
+</template>

apps/www/src/lib/registry/new-york/ui/input-otp/InputOtpSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { DashIcon } from '@radix-icons/vue'
+
+const props = defineProps<PrimitiveProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <DashIcon />
+    </slot>
+  </primitive>
+</template>

apps/www/src/lib/registry/new-york/ui/input-otp/InputOtpSlot.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { useForwardProps } from 'radix-vue'
+import type { SlotProps } from 'vue-input-otp'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SlotProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+      isActive && 'z-10 ring-2 ring-offset-background ring-ring',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    {{ char }}
+
+    <div v-if="hasFakeCaret" class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div class="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/ui/input-otp/index.ts

@@ -0,0 +1,4 @@
+export { default as InputOtp } from './InputOtp.vue'
+export { default as InputOtpGroup } from './InputOtpGroup.vue'
+export { default as InputOtpSeparator } from './InputOtpSeparator.vue'
+export { default as InputOtpSlot } from './InputOtpSlot.vue'

apps/www/src/public/registry/index.json

@@ -337,6 +337,21 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "input-otp",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/input-otp/InputOtp.vue",
+      "ui/input-otp/InputOtpGroup.vue",
+      "ui/input-otp/InputOtpSeparator.vue",
+      "ui/input-otp/InputOtpSlot.vue",
+      "ui/input-otp/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "label",
     "dependencies": [],

apps/www/src/public/registry/styles/default/input-otp.json

@@ -0,0 +1,30 @@
+{
+  "name": "input-otp",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "InputOtp.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { OTPInputProps } from 'vue-input-otp'\nimport { OTPInput } from 'vue-input-otp'\nimport { useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <OTPInput\n    v-slot=\"{ isFocused, isHovering, slots }\"\n    v-bind=\"forwardedProps\"\n    :container-class=\"cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.class)\"\n    class=\"disabled:cursor-not-allowed\"\n  >\n    <slot :is-focused :is-hovering :slots />\n  </OTPInput>\n</template>\n"
+    },
+    {
+      "name": "InputOtpGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
+    },
+    {
+      "name": "InputOtpSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { Dot } from 'lucide-vue-next'\n\nconst props = defineProps<PrimitiveProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <Dot />\n    </slot>\n  </primitive>\n</template>\n"
+    },
+    {
+      "name": "InputOtpSlot.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { useForwardProps } from 'radix-vue'\nimport type { SlotProps } from 'vue-input-otp'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SlotProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div\n    :class=\"cn(\n      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',\n      isActive && 'z-10 ring-2 ring-offset-background ring-ring',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    <template v-if=\"char !== null\">\n      {{ char }}\n    </template>\n\n    <div v-if=\"hasFakeCaret\" class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <div class=\"animate-caret-blink h-4 w-px bg-foreground duration-1000\" />\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as InputOtp } from './InputOtp.vue'\nexport { default as InputOtpGroup } from './InputOtpGroup.vue'\nexport { default as InputOtpSeparator } from './InputOtpSeparator.vue'\nexport { default as InputOtpSlot } from './InputOtpSlot.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

apps/www/src/public/registry/styles/new-york/input-otp.json

@@ -0,0 +1,30 @@
+{
+  "name": "input-otp",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "InputOtp.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { OTPInputProps } from 'vue-input-otp'\nimport { OTPInput } from 'vue-input-otp'\nimport { useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <OTPInput\n    v-slot=\"{ isFocused, isHovering, slots }\"\n    v-bind=\"forwardedProps\"\n    :container-class=\"cn('flex items-center gap-2 has-[:disabled]:opacity-50', props.class)\"\n    class=\"disabled:cursor-not-allowed\"\n  >\n    <slot :is-focused :is-hovering :slots />\n  </OTPInput>\n</template>\n"
+    },
+    {
+      "name": "InputOtpGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\" :class=\"cn('flex items-center', props.class)\">\n    <slot />\n  </primitive>\n</template>\n"
+    },
+    {
+      "name": "InputOtpSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { DashIcon } from '@radix-icons/vue'\n\nconst props = defineProps<PrimitiveProps>()\n\nconst forwardedProps = useForwardProps(props)\n</script>\n\n<template>\n  <Primitive v-bind=\"forwardedProps\">\n    <slot>\n      <DashIcon />\n    </slot>\n  </primitive>\n</template>\n"
+    },
+    {
+      "name": "InputOtpSlot.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { useForwardProps } from 'radix-vue'\nimport type { SlotProps } from 'vue-input-otp'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SlotProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div\n    :class=\"cn(\n      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',\n      isActive && 'z-10 ring-2 ring-offset-background ring-ring',\n      props.class,\n    )\"\n    v-bind=\"forwardedProps\"\n  >\n    {{ char }}\n\n    <div v-if=\"hasFakeCaret\" class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <div class=\"animate-caret-blink h-4 w-px bg-foreground duration-1000\" />\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as InputOtp } from './InputOtp.vue'\nexport { default as InputOtpGroup } from './InputOtpGroup.vue'\nexport { default as InputOtpSeparator } from './InputOtpSeparator.vue'\nexport { default as InputOtpSlot } from './InputOtpSlot.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

apps/www/tailwind.config.js

@@ -79,12 +79,17 @@ export default {
           from: { height: 'var(--radix-collapsible-content-height)' },
           to: { height: 0 },
         },
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-in-out',
         'accordion-up': 'accordion-up 0.2s ease-in-out',
         'collapsible-down': 'collapsible-down 0.2s ease-in-out',
         'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
       },
     },
   },

package.json

@@ -35,7 +35,7 @@
     "lint-staged": "^15.2.2",
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.13.3",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vitest": "^0.34.6"
   },
   "commitlint": {

pnpm-lock.yaml

@@ -10,10 +10,10 @@ importers:
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^2.7.0
-        version: 2.7.0(@vue/compiler-sfc@3.4.21)(eslint@8.57.0)(typescript@5.3.3)(vitest@0.34.6)
+        version: 2.7.0(@vue/compiler-sfc@3.4.21)(eslint@8.57.0)(typescript@5.4.2)(vitest@0.34.6)
       '@commitlint/cli':
         specifier: ^19.0.3
-        version: 19.0.3(@types/node@20.11.25)(typescript@5.3.3)
+        version: 19.0.3(@types/node@20.11.25)(typescript@5.4.2)
       '@commitlint/config-conventional':
         specifier: ^19.0.3
         version: 19.0.3
@@ -33,8 +33,8 @@ importers:
         specifier: ^0.13.3
         version: 0.13.3
       typescript:
-        specifier: ^5.3.3
+        specifier: ^5.4.2
-        version: 5.3.3
+        version: 5.4.2
       vitest:
         specifier: ^0.34.6
         version: 0.34.6(@vitest/ui@0.34.7)
@@ -107,6 +107,9 @@ importers:
       vue:
         specifier: ^3.4.21
         version: 3.4.21(typescript@5.4.2)
+      vue-input-otp:
+        specifier: ^0.1.0
+        version: 0.1.0(vue@3.4.21)
       vue-sonner:
         specifier: ^1.1.2
         version: 1.1.2
@@ -485,7 +488,7 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.22
 
-  /@antfu/eslint-config@2.7.0(@vue/compiler-sfc@3.4.21)(eslint@8.57.0)(typescript@5.3.3)(vitest@0.34.6):
+  /@antfu/eslint-config@2.7.0(@vue/compiler-sfc@3.4.21)(eslint@8.57.0)(typescript@5.4.2)(vitest@0.34.6):
     resolution: {integrity: sha512-CMILR+ZeiahWk8LhDlsHij/LPygX6QvQxl5AknTXm2QcFpMR6CZ14JHxTgkQJnRLM78D/CYZXwV38rU3us3PlQ==}
     hasBin: true
     peerDependencies:
@@ -527,9 +530,9 @@ packages:
       '@eslint-types/jsdoc': 46.8.2-1
       '@eslint-types/typescript-eslint': 7.0.2
       '@eslint-types/unicorn': 51.0.1
-      '@stylistic/eslint-plugin': 1.6.3(eslint@8.57.0)(typescript@5.3.3)
+      '@stylistic/eslint-plugin': 1.6.3(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.4.2)
       eslint: 8.57.0
       eslint-config-flat-gitignore: 0.1.3
       eslint-merge-processors: 0.1.0(eslint@8.57.0)
@@ -541,11 +544,11 @@ packages:
       eslint-plugin-markdown: 3.0.1(eslint@8.57.0)
       eslint-plugin-n: 16.6.2(eslint@8.57.0)
       eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-perfectionist: 2.5.0(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2)
+      eslint-plugin-perfectionist: 2.5.0(eslint@8.57.0)(typescript@5.4.2)(vue-eslint-parser@9.4.2)
       eslint-plugin-toml: 0.9.2(eslint@8.57.0)
       eslint-plugin-unicorn: 51.0.1(eslint@8.57.0)
       eslint-plugin-unused-imports: 3.1.0(@typescript-eslint/eslint-plugin@7.1.0)(eslint@8.57.0)
-      eslint-plugin-vitest: 0.3.22(@typescript-eslint/eslint-plugin@7.1.0)(eslint@8.57.0)(typescript@5.3.3)(vitest@0.34.6)
+      eslint-plugin-vitest: 0.3.22(@typescript-eslint/eslint-plugin@7.1.0)(eslint@8.57.0)(typescript@5.4.2)(vitest@0.34.6)
       eslint-plugin-vue: 9.22.0(eslint@8.57.0)
       eslint-plugin-yml: 1.12.2(eslint@8.57.0)
       eslint-processor-vue-blocks: 0.1.1(@vue/compiler-sfc@3.4.21)(eslint@8.57.0)
@@ -1088,14 +1091,14 @@ packages:
       mime: 3.0.0
     dev: true
 
-  /@commitlint/cli@19.0.3(@types/node@20.11.25)(typescript@5.3.3):
+  /@commitlint/cli@19.0.3(@types/node@20.11.25)(typescript@5.4.2):
     resolution: {integrity: sha512-mGhh/aYPib4Vy4h+AGRloMY+CqkmtdeKPV9poMcZeImF5e3knQ5VYaSeAM0mEzps1dbKsHvABwaDpafLUuM96g==}
     engines: {node: '>=v18'}
     hasBin: true
     dependencies:
       '@commitlint/format': 19.0.3
       '@commitlint/lint': 19.0.3
-      '@commitlint/load': 19.0.3(@types/node@20.11.25)(typescript@5.3.3)
+      '@commitlint/load': 19.0.3(@types/node@20.11.25)(typescript@5.4.2)
       '@commitlint/read': 19.0.3
       '@commitlint/types': 19.0.3
       execa: 8.0.1
@@ -1164,7 +1167,7 @@ packages:
       '@commitlint/types': 19.0.3
     dev: true
 
-  /@commitlint/load@19.0.3(@types/node@20.11.25)(typescript@5.3.3):
+  /@commitlint/load@19.0.3(@types/node@20.11.25)(typescript@5.4.2):
     resolution: {integrity: sha512-18Tk/ZcDFRKIoKfEcl7kC+bYkEQ055iyKmGsYDoYWpKf6FUvBrP9bIWapuy/MB+kYiltmP9ITiUx6UXtqC9IRw==}
     engines: {node: '>=v18'}
     dependencies:
@@ -1173,8 +1176,8 @@ packages:
       '@commitlint/resolve-extends': 19.0.3
       '@commitlint/types': 19.0.3
       chalk: 5.3.0
-      cosmiconfig: 8.3.6(typescript@5.3.3)
+      cosmiconfig: 8.3.6(typescript@5.4.2)
-      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.25)(cosmiconfig@8.3.6)(typescript@5.3.3)
+      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.25)(cosmiconfig@8.3.6)(typescript@5.4.2)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -3497,20 +3500,20 @@ packages:
       picomatch: 4.0.1
     dev: true
 
-  /@stylistic/eslint-plugin-plus@1.6.3(eslint@8.57.0)(typescript@5.3.3):
+  /@stylistic/eslint-plugin-plus@1.6.3(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-TuwQOdyVGycDPw5XeF7W4f3ZonAVzOAzORSaD2yGAJ0fRAbJ+l/v3CkKzIAqBBwWkc+c2aRMsWtLP2+viBnmlQ==}
     peerDependencies:
       eslint: '*'
     dependencies:
       '@types/eslint': 8.56.5
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.2)
       eslint: 8.57.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@stylistic/eslint-plugin-ts@1.6.3(eslint@8.57.0)(typescript@5.3.3):
+  /@stylistic/eslint-plugin-ts@1.6.3(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-v5GwZsPLblWM9uAIdaSi31Sed3XBWlTFQJ3b5upEmj6QsKYivA5nmIYutwqqL133QdVWjmC86pINlx2Muq3uNQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -3518,14 +3521,14 @@ packages:
     dependencies:
       '@stylistic/eslint-plugin-js': 1.6.3(eslint@8.57.0)
       '@types/eslint': 8.56.5
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.2)
       eslint: 8.57.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@stylistic/eslint-plugin@1.6.3(eslint@8.57.0)(typescript@5.3.3):
+  /@stylistic/eslint-plugin@1.6.3(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-WDa4FjhImp7YcztRaMG09svhKYYhi2Hc4p9ltQRSqyB4fsUUFm+GKzStqqH7xfjHnxacMJaOnaMGRTUqIIZDLA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -3533,8 +3536,8 @@ packages:
     dependencies:
       '@stylistic/eslint-plugin-js': 1.6.3(eslint@8.57.0)
       '@stylistic/eslint-plugin-jsx': 1.6.3(eslint@8.57.0)
-      '@stylistic/eslint-plugin-plus': 1.6.3(eslint@8.57.0)(typescript@5.3.3)
+      '@stylistic/eslint-plugin-plus': 1.6.3(eslint@8.57.0)(typescript@5.4.2)
-      '@stylistic/eslint-plugin-ts': 1.6.3(eslint@8.57.0)(typescript@5.3.3)
+      '@stylistic/eslint-plugin-ts': 1.6.3(eslint@8.57.0)(typescript@5.4.2)
       '@types/eslint': 8.56.5
       eslint: 8.57.0
     transitivePeerDependencies:
@@ -4068,7 +4071,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin@7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3):
+  /@typescript-eslint/eslint-plugin@7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-j6vT/kCulhG5wBmGtstKeiVr1rdXE4nk+DT1k6trYkwlrvW9eOF5ZbgKnd/YR6PcM4uTEXa0h6Fcvf6X7Dxl0w==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4080,10 +4083,10 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.4.2)
       '@typescript-eslint/scope-manager': 7.1.0
-      '@typescript-eslint/type-utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/type-utils': 7.1.0(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.4.2)
       '@typescript-eslint/visitor-keys': 7.1.0
       debug: 4.3.4
       eslint: 8.57.0
@@ -4091,8 +4094,8 @@ packages:
       ignore: 5.3.1
       natural-compare: 1.4.0
       semver: 7.6.0
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      ts-api-utils: 1.0.3(typescript@5.4.2)
-      typescript: 5.3.3
+      typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4118,7 +4121,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.3.3):
+  /@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-V1EknKUubZ1gWFjiOZhDSNToOjs63/9O0puCgGS8aDOgpZY326fzFu15QAUjwaXzRZjf/qdsdBrckYdv9YxB8w==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4130,11 +4133,11 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 7.1.0
       '@typescript-eslint/types': 7.1.0
-      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.4.2)
       '@typescript-eslint/visitor-keys': 7.1.0
       debug: 4.3.4
       eslint: 8.57.0
-      typescript: 5.3.3
+      typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4183,7 +4186,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils@7.1.0(eslint@8.57.0)(typescript@5.3.3):
+  /@typescript-eslint/type-utils@7.1.0(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-UZIhv8G+5b5skkcuhgvxYWHjk7FW7/JP5lPASMEUoliAPwIH/rxoUSQPia2cuOj9AmDZmwUl1usKm85t5VUMew==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4193,12 +4196,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.4.2)
-      '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.4.2)
       debug: 4.3.4
       eslint: 8.57.0
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      ts-api-utils: 1.0.3(typescript@5.4.2)
-      typescript: 5.3.3
+      typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4240,7 +4243,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3):
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.2):
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4256,13 +4259,13 @@ packages:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.0
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      ts-api-utils: 1.0.3(typescript@5.4.2)
-      typescript: 5.3.3
+      typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@7.1.0(typescript@5.3.3):
+  /@typescript-eslint/typescript-estree@7.1.0(typescript@5.4.2):
     resolution: {integrity: sha512-k7MyrbD6E463CBbSpcOnwa8oXRdHzH1WiVzOipK3L5KSML92ZKgUBrTlehdi7PEIMT8k0bQixHUGXggPAlKnOQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4278,8 +4281,8 @@ packages:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.0
-      ts-api-utils: 1.0.3(typescript@5.3.3)
+      ts-api-utils: 1.0.3(typescript@5.4.2)
-      typescript: 5.3.3
+      typescript: 5.4.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4303,7 +4306,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.3.3):
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4314,7 +4317,7 @@ packages:
       '@types/semver': 7.5.6
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.2)
       eslint: 8.57.0
       semver: 7.6.0
     transitivePeerDependencies:
@@ -4322,7 +4325,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@7.1.0(eslint@8.57.0)(typescript@5.3.3):
+  /@typescript-eslint/utils@7.1.0(eslint@8.57.0)(typescript@5.4.2):
     resolution: {integrity: sha512-WUFba6PZC5OCGEmbweGpnNJytJiLG7ZvDBJJoUcX4qZYf1mGZ97mO2Mps6O2efxJcJdRNpqweCistDbZMwIVHw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
@@ -4333,7 +4336,7 @@ packages:
       '@types/semver': 7.5.6
       '@typescript-eslint/scope-manager': 7.1.0
       '@typescript-eslint/types': 7.1.0
-      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3)
+      '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.4.2)
       eslint: 8.57.0
       semver: 7.6.0
     transitivePeerDependencies:
@@ -6026,7 +6029,7 @@ packages:
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
-  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.25)(cosmiconfig@8.3.6)(typescript@5.3.3):
+  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.25)(cosmiconfig@8.3.6)(typescript@5.4.2):
     resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
     engines: {node: '>=v16'}
     peerDependencies:
@@ -6035,9 +6038,9 @@ packages:
       typescript: '>=4'
     dependencies:
       '@types/node': 20.11.25
-      cosmiconfig: 8.3.6(typescript@5.3.3)
+      cosmiconfig: 8.3.6(typescript@5.4.2)
       jiti: 1.21.0
-      typescript: 5.3.3
+      typescript: 5.4.2
     dev: true
 
   /cosmiconfig@7.1.0:
@@ -6051,7 +6054,7 @@ packages:
       yaml: 1.10.2
     dev: false
 
-  /cosmiconfig@8.3.6(typescript@5.3.3):
+  /cosmiconfig@8.3.6(typescript@5.4.2):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -6064,7 +6067,7 @@ packages:
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
-      typescript: 5.3.3
+      typescript: 5.4.2
     dev: true
 
   /crc-32@1.2.2:
@@ -7148,7 +7151,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.4.2)
       debug: 3.2.7
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
@@ -7282,7 +7285,7 @@ packages:
     engines: {node: '>=5.0.0'}
     dev: true
 
-  /eslint-plugin-perfectionist@2.5.0(eslint@8.57.0)(typescript@5.3.3)(vue-eslint-parser@9.4.2):
+  /eslint-plugin-perfectionist@2.5.0(eslint@8.57.0)(typescript@5.4.2)(vue-eslint-parser@9.4.2):
     resolution: {integrity: sha512-F6XXcq4mKKUe/SREoMGQqzgw6cgCgf3pFzkFfQVIGtqD1yXVpQjnhTepzhBeZfxZwgMzR9HO4yH4CUhIQ2WBcQ==}
     peerDependencies:
       astro-eslint-parser: ^0.16.0
@@ -7300,7 +7303,7 @@ packages:
       vue-eslint-parser:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.2)
       eslint: 8.57.0
       minimatch: 9.0.3
       natural-compare-lite: 1.4.0
@@ -7362,12 +7365,12 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.4.2)
       eslint: 8.57.0
       eslint-rule-composer: 0.3.0
     dev: true
 
-  /eslint-plugin-vitest@0.3.22(@typescript-eslint/eslint-plugin@7.1.0)(eslint@8.57.0)(typescript@5.3.3)(vitest@0.34.6):
+  /eslint-plugin-vitest@0.3.22(@typescript-eslint/eslint-plugin@7.1.0)(eslint@8.57.0)(typescript@5.4.2)(vitest@0.34.6):
     resolution: {integrity: sha512-atkFGQ7aVgcuSeSMDqnyevIyUpfBPMnosksgEPrKE7Y8xQlqG/5z2IQ6UDau05zXaaFv7Iz8uzqvIuKshjZ0Zw==}
     engines: {node: ^18.0.0 || >= 20.0.0}
     peerDependencies:
@@ -7380,8 +7383,8 @@ packages:
       vitest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/eslint-plugin': 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.2)
       eslint: 8.57.0
       vitest: 0.34.6(@vitest/ui@0.34.7)
     transitivePeerDependencies:
@@ -12429,15 +12432,6 @@ packages:
     hasBin: true
     dev: true
 
-  /ts-api-utils@1.0.3(typescript@5.3.3):
-    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
-    engines: {node: '>=16.13.0'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.3.3
-    dev: true
-
   /ts-api-utils@1.0.3(typescript@5.4.2):
     resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
     engines: {node: '>=16.13.0'}
@@ -12598,12 +12592,6 @@ packages:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: false
 
-  /typescript@5.3.3:
-    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-    dev: true
-
   /typescript@5.4.2:
     resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
     engines: {node: '>=14.17'}
@@ -13650,6 +13638,14 @@ packages:
       - supports-color
     dev: true
 
+  /vue-input-otp@0.1.0(vue@3.4.21):
+    resolution: {integrity: sha512-vRkb/ECwMMPOH7YRFJBJ9lLhE3MiVuxNSqitY5l/KJ7FHzlMIjfyhAW2y9nkhE1NMY/kmtiusYjkNSfCVrFFTA==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
   /vue-router@4.3.0(vue@3.4.21):
     resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==}
     peerDependencies: