feat: pin input

apps/www/__registry__/index.ts

@@ -478,6 +478,13 @@ 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'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',
@@ -1362,6 +1369,13 @@ 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'],
+    },
     PopoverDemo: {
       name: 'PopoverDemo',
       type: 'components:example',

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

@@ -0,0 +1,9 @@
+---
+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" /> 
+

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

@@ -0,0 +1,30 @@
+<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>
+
+  {{ value }}
+</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.value, 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.value)
+</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/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.value, 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.value)
+</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'