From 454ecf0df717aaff9733c5a421ebfeaaa10e2047 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sun, 10 Mar 2024 19:15:39 +0330
Subject: [PATCH] feat: `PinInput` with `input-otp` demos and styles (#402)

---
 apps/www/__registry__/index.ts                | 42 +++++++++++++++++++
 .../src/content/docs/components/pin-input.md  | 17 ++++++--
 .../default/example/PinInputControlled.vue    | 30 +++++++++++++
 .../registry/default/example/PinInputDemo.vue | 14 ++++---
 .../default/example/PinInputDisabled.vue      | 29 +++++++++++++
 .../default/example/PinInputFormDemo.vue      | 15 ++++---
 .../default/example/PinInputSeparatorDemo.vue | 35 ++++++++++++++++
 .../default/ui/pin-input/PinInputGroup.vue    | 18 ++++++++
 .../default/ui/pin-input/PinInputInput.vue    |  2 +-
 .../ui/pin-input/PinInputSeparator.vue        | 15 +++++++
 .../registry/default/ui/pin-input/index.ts    |  2 +
 .../new-york/example/PinInputControlled.vue   | 30 +++++++++++++
 .../new-york/example/PinInputDemo.vue         | 34 ++++++++-------
 .../new-york/example/PinInputDisabled.vue     | 29 +++++++++++++
 .../new-york/example/PinInputFormDemo.vue     | 15 ++++---
 .../example/PinInputSeparatorDemo.vue         | 35 ++++++++++++++++
 .../new-york/ui/pin-input/PinInputGroup.vue   | 18 ++++++++
 .../new-york/ui/pin-input/PinInputInput.vue   |  2 +-
 .../ui/pin-input/PinInputSeparator.vue        | 15 +++++++
 .../registry/new-york/ui/pin-input/index.ts   |  2 +
 apps/www/src/public/registry/index.json       |  4 +-
 .../registry/styles/default/pin-input.json    | 14 +++++--
 .../registry/styles/new-york/pin-input.json   | 14 +++++--
 eslint.config.js                              |  7 ++++
 24 files changed, 392 insertions(+), 46 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/PinInputControlled.vue
 create mode 100644 apps/www/src/lib/registry/default/example/PinInputDisabled.vue
 create mode 100644 apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
 create mode 100644 apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 474837f4..152f0e1a 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -549,6 +549,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"],
     },
+    "PinInputControlled": {
+      name: "PinInputControlled",
+      type: "components:example",
+      registryDependencies: ["pin-input"],
+      component: () => import("../src/lib/registry/default/example/PinInputControlled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/PinInputControlled.vue"],
+    },
     "PinInputDemo": {
       name: "PinInputDemo",
       type: "components:example",
@@ -556,6 +563,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/PinInputDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/PinInputDemo.vue"],
     },
+    "PinInputDisabled": {
+      name: "PinInputDisabled",
+      type: "components:example",
+      registryDependencies: ["pin-input"],
+      component: () => import("../src/lib/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/PinInputDisabled.vue"],
+    },
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
       type: "components:example",
@@ -563,6 +577,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/PinInputFormDemo.vue"],
     },
+    "PinInputSeparatorDemo": {
+      name: "PinInputSeparatorDemo",
+      type: "components:example",
+      registryDependencies: ["pin-input"],
+      component: () => import("../src/lib/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/PinInputSeparatorDemo.vue"],
+    },
     "PopoverDemo": {
       name: "PopoverDemo",
       type: "components:example",
@@ -1586,6 +1607,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"],
     },
+    "PinInputControlled": {
+      name: "PinInputControlled",
+      type: "components:example",
+      registryDependencies: ["pin-input"],
+      component: () => import("../src/lib/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/PinInputControlled.vue"],
+    },
     "PinInputDemo": {
       name: "PinInputDemo",
       type: "components:example",
@@ -1593,6 +1621,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/PinInputDemo.vue"],
     },
+    "PinInputDisabled": {
+      name: "PinInputDisabled",
+      type: "components:example",
+      registryDependencies: ["pin-input"],
+      component: () => import("../src/lib/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/PinInputDisabled.vue"],
+    },
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
       type: "components:example",
@@ -1600,6 +1635,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/PinInputFormDemo.vue"],
     },
+    "PinInputSeparatorDemo": {
+      name: "PinInputSeparatorDemo",
+      type: "components:example",
+      registryDependencies: ["pin-input"],
+      component: () => import("../src/lib/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/PinInputSeparatorDemo.vue"],
+    },
     "PopoverDemo": {
       name: "PopoverDemo",
       type: "components:example",
diff --git a/apps/www/src/content/docs/components/pin-input.md b/apps/www/src/content/docs/components/pin-input.md
index 207e11c4..b20ecf6b 100644
--- a/apps/www/src/content/docs/components/pin-input.md
+++ b/apps/www/src/content/docs/components/pin-input.md
@@ -5,8 +5,7 @@ source: apps/www/src/lib/registry/default/ui/pin-input
 primitive: https://www.radix-vue.com/components/pin-input.html
 ---
 
-<ComponentPreview name="PinInputDemo" /> 
-
+<ComponentPreview name="PinInputDemo" />
 
 ## Installation
 
@@ -16,6 +15,18 @@ npx shadcn-vue@latest add pin-input
 
 ## Usage
 
+### Controlled
+
+<ComponentPreview name="PinInputControlled" />
+
+### Disabled
+
+<ComponentPreview name="PinInputDisabled" />
+
+### Separator
+
+<ComponentPreview name="PinInputSeparatorDemo" />
+
 ### Form
 
-<ComponentPreview name="PinInputFormDemo" /> 
+<ComponentPreview name="PinInputFormDemo" />
diff --git a/apps/www/src/lib/registry/default/example/PinInputControlled.vue b/apps/www/src/lib/registry/default/example/PinInputControlled.vue
new file mode 100644
index 00000000..259ee375
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/PinInputControlled.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/default/ui/pin-input'
+
+const value = ref<string[]>(['1', '2', '3'])
+const handleComplete = (e: string[]) => alert(e.join(''))
+</script>
+
+<template>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      @complete="handleComplete"
+    >
+      <PinInputGroup>
+        <PinInputInput
+          v-for="(id, index) in 5"
+          :key="id"
+          :index="index"
+        />
+      </PinInputGroup>
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/PinInputDemo.vue b/apps/www/src/lib/registry/default/example/PinInputDemo.vue
index fb5d5c93..49ab9bf4 100644
--- a/apps/www/src/lib/registry/default/example/PinInputDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputDemo.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import {
   PinInput,
+  PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/default/ui/pin-input'
 
@@ -15,14 +16,15 @@ const handleComplete = (e: string[]) => alert(e.join(''))
       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"
-      />
+      <PinInputGroup>
+        <PinInputInput
+          v-for="(id, index) in 5"
+          :key="id"
+          :index="index"
+        />
+      </PinInputGroup>
     </PinInput>
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/example/PinInputDisabled.vue b/apps/www/src/lib/registry/default/example/PinInputDisabled.vue
new file mode 100644
index 00000000..982ef5fc
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/PinInputDisabled.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/default/ui/pin-input'
+
+const value = ref<string[]>([])
+</script>
+
+<template>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      disabled
+    >
+      <PinInputGroup>
+        <PinInputInput
+          v-for="(id, index) in 5"
+          :key="id"
+          :index="index"
+        />
+      </PinInputGroup>
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
index a315f936..bf24446a 100644
--- a/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputFormDemo.vue
@@ -5,6 +5,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 import {
   PinInput,
+  PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/default/ui/pin-input'
 import { Button } from '@/lib/registry/default/ui/button'
@@ -25,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
 const { handleSubmit, setValues } = useForm({
   validationSchema: formSchema,
   initialValues: {
-    pin: [],
+    pin: ['1', '2', '3'],
   },
 })
 
@@ -59,11 +60,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
               })
             }"
           >
-            <PinInputInput
-              v-for="(id, index) in 5"
-              :key="id"
-              :index="index"
-            />
+            <PinInputGroup>
+              <PinInputInput
+                v-for="(id, index) in 5"
+                :key="id"
+                :index="index"
+              />
+            </PinInputGroup>
           </PinInput>
         </FormControl>
         <FormDescription>
diff --git a/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue b/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
new file mode 100644
index 00000000..2fb54aa1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+  PinInputSeparator,
+} 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="○"
+      @complete="handleComplete"
+    >
+      <PinInputGroup class="gap-1">
+        <template v-for="(id, index) in 5" :key="id">
+          <PinInputInput
+            class="rounded-md border"
+            :index="index"
+          />
+          <template v-if="index !== 4">
+            <PinInputSeparator />
+          </template>
+        </template>
+      </PinInputGroup>
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
new file mode 100644
index 00000000..97afadae
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputGroup.vue
@@ -0,0 +1,18 @@
+<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>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
index 47eaccbe..ba6d0f31 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputInput.vue
@@ -14,5 +14,5 @@ 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)" />
+  <PinInputInput v-bind="forwardedProps" :class="cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue b/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
new file mode 100644
index 00000000..b00f5665
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/pin-input/PinInputSeparator.vue
@@ -0,0 +1,15 @@
+<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>
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/index.ts b/apps/www/src/lib/registry/default/ui/pin-input/index.ts
index ee290cc8..abec8fce 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/index.ts
+++ b/apps/www/src/lib/registry/default/ui/pin-input/index.ts
@@ -1,2 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
+export { default as PinInputGroup } from './PinInputGroup.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
 export { default as PinInputInput } from './PinInputInput.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue b/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
new file mode 100644
index 00000000..c9b14e49
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+
+const value = ref<string[]>(['1', '2', '3'])
+const handleComplete = (e: string[]) => alert(e.join(''))
+</script>
+
+<template>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      @complete="handleComplete"
+    >
+      <PinInputGroup>
+        <PinInputInput
+          v-for="(id, index) in 5"
+          :key="id"
+          :index="index"
+        />
+      </PinInputGroup>
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
index 0d8bacf2..0148bdb7 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
@@ -2,27 +2,29 @@
 import { ref } from 'vue'
 import {
   PinInput,
+  PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/new-york/ui/pin-input'
 
 const value = ref<string[]>([])
-function handleComplete() {
-  console.log('212121')
-}
+const handleComplete = (e: string[]) => alert(e.join(''))
 </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>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      @complete="handleComplete"
+    >
+      <PinInputGroup>
+        <PinInputInput
+          v-for="(id, index) in 5"
+          :key="id"
+          :index="index"
+        />
+      </PinInputGroup>
+    </PinInput>
+  </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue b/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
new file mode 100644
index 00000000..6d9b19ea
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
+
+const value = ref<string[]>([])
+</script>
+
+<template>
+  <div>
+    <PinInput
+      id="pin-input"
+      v-model="value"
+      placeholder="○"
+      disabled
+    >
+      <PinInputGroup>
+        <PinInputInput
+          v-for="(id, index) in 5"
+          :key="id"
+          :index="index"
+        />
+      </PinInputGroup>
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
index 50b3345b..907f1216 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue
@@ -5,6 +5,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 import {
   PinInput,
+  PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/new-york/ui/pin-input'
 import { Button } from '@/lib/registry/new-york/ui/button'
@@ -25,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
 const { handleSubmit, setValues } = useForm({
   validationSchema: formSchema,
   initialValues: {
-    pin: [],
+    pin: ['1', '2', '3'],
   },
 })
 
@@ -59,11 +60,13 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
               })
             }"
           >
-            <PinInputInput
-              v-for="(id, index) in 5"
-              :key="id"
-              :index="index"
-            />
+            <PinInputGroup>
+              <PinInputInput
+                v-for="(id, index) in 5"
+                :key="id"
+                :index="index"
+              />
+            </PinInputGroup>
           </PinInput>
         </FormControl>
         <FormDescription>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
new file mode 100644
index 00000000..a8b4af24
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+  PinInputSeparator,
+} from '@/lib/registry/new-york/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="○"
+      @complete="handleComplete"
+    >
+      <PinInputGroup class="gap-1">
+        <template v-for="(id, index) in 5" :key="id">
+          <PinInputInput
+            class="rounded-md border"
+            :index="index"
+          />
+          <template v-if="index !== 4">
+            <PinInputSeparator />
+          </template>
+        </template>
+      </PinInputGroup>
+    </PinInput>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
new file mode 100644
index 00000000..97afadae
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputGroup.vue
@@ -0,0 +1,18 @@
+<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>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
index 47eaccbe..ba6d0f31 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
@@ -14,5 +14,5 @@ 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)" />
+  <PinInputInput v-bind="forwardedProps" :class="cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue
new file mode 100644
index 00000000..34b297a2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputSeparator.vue
@@ -0,0 +1,15 @@
+<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>
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts b/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
index ee290cc8..abec8fce 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
@@ -1,2 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
+export { default as PinInputGroup } from './PinInputGroup.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
 export { default as PinInputInput } from './PinInputInput.vue'
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 875832c8..f2d46eb8 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -419,7 +419,9 @@
     ],
     "files": [
       "ui/pin-input/PinInput.vue",
+      "ui/pin-input/PinInputGroup.vue",
       "ui/pin-input/PinInputInput.vue",
+      "ui/pin-input/PinInputSeparator.vue",
       "ui/pin-input/index.ts"
     ],
     "type": "components:ui"
@@ -716,4 +718,4 @@
     ],
     "type": "components:ui"
   }
-]
\ No newline at end of file
+]
diff --git a/apps/www/src/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
index ee35d2bf..534e7892 100644
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -9,14 +9,22 @@
       "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": "PinInputGroup.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'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\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": "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"
+      "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('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "PinInputSeparator.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>()\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": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/pin-input.json b/apps/www/src/public/registry/styles/new-york/pin-input.json
index ee35d2bf..e767ed2b 100644
--- a/apps/www/src/public/registry/styles/new-york/pin-input.json
+++ b/apps/www/src/public/registry/styles/new-york/pin-input.json
@@ -9,14 +9,22 @@
       "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": "PinInputGroup.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'] }>()\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\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": "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"
+      "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('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "PinInputSeparator.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>()\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": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/eslint.config.js b/eslint.config.js
index ee2561fd..cab497d2 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -16,6 +16,13 @@ export default antfu(
       'vue/no-useless-v-bind': 0,
     },
   },
+  {
+    files: ['**/lib/registry/default/example/*.vue', '**/lib/registry/new-york/example/*.vue'],
+    rules: {
+      'no-alert': 0,
+      'no-console': 0,
+    },
+  },
   {
     // Without `files`, they are general rules for all files
     rules: {