feat: pin input (#325)

* feat: pin input

* chore: build registry

* chore: build registry, add form example

* chore: update demo abit

---------

Co-authored-by: zernonia <zernonia@gmail.com>

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

@@ -254,6 +254,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/pagination',
           items: [],
         },
+        {
+          title: 'Pin Input',
+          href: '/docs/components/pin-input',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Popover',
           href: '/docs/components/popover',

apps/www/__registry__/index.ts

@@ -485,6 +485,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/PaginationDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/PaginationDemo.vue'],
     },
+    PinInputDemo: {
+      name: 'PinInputDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input'],
+      component: () => import('../src/lib/registry/default/example/PinInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PinInputDemo.vue'],
+    },
+    PinInputFormDemo: {
+      name: 'PinInputFormDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input', 'button', 'form', 'toast'],
+      component: () => import('../src/lib/registry/default/example/PinInputFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PinInputFormDemo.vue'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',
@@ -1390,6 +1404,20 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/PaginationDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/PaginationDemo.vue'],
     },
+    PinInputDemo: {
+      name: 'PinInputDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input'],
+      component: () => import('../src/lib/registry/new-york/example/PinInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PinInputDemo.vue'],
+    },
+    PinInputFormDemo: {
+      name: 'PinInputFormDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input', 'button', 'form', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/PinInputFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PinInputFormDemo.vue'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',

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

@@ -0,0 +1,21 @@
+---
+title: PIN Input
+description: Allows users to input a sequence of one-character alphanumeric inputs.
+source: apps/www/src/lib/registry/default/ui/pin-input
+primitive: https://www.radix-vue.com/components/pin-input.html
+---
+
+<ComponentPreview name="PinInputDemo" /> 
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add pin-input
+```
+
+## Usage
+
+### Form
+
+<ComponentPreview name="PinInputFormDemo" /> 

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/default/ui/pin-input'
+
+const value = ref<string[]>([])
+const handleComplete = (e: string[]) => alert(e.join(''))
+</script>
+
+<template>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      class="flex gap-2 items-center mt-1"
+      @complete="handleComplete"
+    >
+      <PinInputInput
+        v-for="(id, index) in 5"
+        :key="id"
+        :index="index"
+      />
+    </PinInput>
+  </div>
+</template>

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

@@ -0,0 +1,78 @@
+<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 {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+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'
+
+const formSchema = toTypedSchema(z.object({
+  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
+}))
+
+const { handleSubmit, setValues } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    pin: [],
+  },
+})
+
+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.join(''), null, 2))),
+  })
+})
+
+const handleComplete = (e: string[]) => console.log(e.join(''))
+</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>
+          <PinInput
+            id="pin-input"
+            placeholder="○"
+            class="flex gap-2 items-center mt-1"
+            otp
+            type="number"
+            :name="componentField.name"
+            @complete="handleComplete"
+            @update:model-value="(arrStr) => {
+              setValues({
+                pin: arrStr.filter(Boolean),
+              })
+            }"
+          >
+            <PinInputInput
+              v-for="(id, index) in 5"
+              :key="id"
+              :index="index"
+            />
+          </PinInput>
+        </FormControl>
+        <FormDescription>
+          Allows users to input a sequence of one-character alphanumeric inputs.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button>Submit</Button>
+  </form>
+</template>

apps/www/src/lib/registry/default/ui/pin-input/PinInput.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+    <slot />
+  </PinInputRoot>
+</template>

apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>

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

@@ -0,0 +1,2 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputInput } from './PinInputInput.vue'

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+
+const value = ref<string[]>([])
+function handleComplete() {
+  console.log('212121')
+}
+</script>
+
+<template>
+  <PinInput
+    id="pin-input"
+    v-model="value"
+    placeholder="○"
+    class="flex gap-2 items-center mt-1"
+    @complete="handleComplete"
+  >
+    <PinInputInput
+      v-for="(id, index) in 5"
+      :key="id"
+      :index="index"
+    />
+  </PinInput>
+</template>

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

@@ -0,0 +1,78 @@
+<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 {
+  PinInput,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+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'
+
+const formSchema = toTypedSchema(z.object({
+  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
+}))
+
+const { handleSubmit, setValues } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    pin: [],
+  },
+})
+
+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.join(''), null, 2))),
+  })
+})
+
+const handleComplete = (e: string[]) => console.log(e.join(''))
+</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>
+          <PinInput
+            id="pin-input"
+            placeholder="○"
+            class="flex gap-2 items-center mt-1"
+            otp
+            type="number"
+            :name="componentField.name"
+            @complete="handleComplete"
+            @update:model-value="(arrStr) => {
+              setValues({
+                pin: arrStr.filter(Boolean),
+              })
+            }"
+          >
+            <PinInputInput
+              v-for="(id, index) in 5"
+              :key="id"
+              :index="index"
+            />
+          </PinInput>
+        </FormControl>
+        <FormDescription>
+          Allows users to input a sequence of one-character alphanumeric inputs.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+
+    <Button>Submit</Button>
+  </form>
+</template>

apps/www/src/lib/registry/new-york/ui/pin-input/PinInput.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+    <slot />
+  </PinInputRoot>
+</template>

apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>

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

@@ -0,0 +1,2 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputInput } from './PinInputInput.vue'

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

@@ -392,6 +392,19 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "pin-input",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/pin-input/PinInput.vue",
+      "ui/pin-input/PinInputInput.vue",
+      "ui/pin-input/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "popover",
     "dependencies": [],

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

@@ -0,0 +1,22 @@
+{
+  "name": "pin-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
+    },
+    {
+      "name": "PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "pin-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "PinInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<PinInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PinInputRoot v-bind=\"forwarded\" :class=\"cn('flex gap-2 items-center', props.class)\">\n    <slot />\n  </PinInputRoot>\n</template>\n"
+    },
+    {
+      "name": "PinInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PinInputInput v-bind=\"forwardedProps\" :class=\"cn('flex w-10 h-10 text-center rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}