feat: PinInput with input-otp demos and styles (#402)

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",

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

@@ -7,7 +7,6 @@ primitive: https://www.radix-vue.com/components/pin-input.html
 
 <ComponentPreview name="PinInputDemo" />
 
-
 ## Installation
 
 ```bash
@@ -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" />

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>

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
+      <PinInputGroup>
-        v-for="(id, index) in 5"
+        <PinInputInput
-        :key="id"
+          v-for="(id, index) in 5"
-        :index="index"
+          :key="id"
-      />
+          :index="index"
+        />
+      </PinInputGroup>
     </PinInput>
   </div>
 </template>

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>

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
+            <PinInputGroup>
-              v-for="(id, index) in 5"
+              <PinInputInput
-              :key="id"
+                v-for="(id, index) in 5"
-              :index="index"
+                :key="id"
-            />
+                :index="index"
+              />
+            </PinInputGroup>
           </PinInput>
         </FormControl>
         <FormDescription>

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>

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>

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>

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>

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'

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>

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() {
+const handleComplete = (e: string[]) => alert(e.join(''))
-  console.log('212121')
-}
 </script>
 
 <template>
-  <PinInput
+  <div>
-    id="pin-input"
+    <PinInput
-    v-model="value"
+      id="pin-input"
-    placeholder="○"
+      v-model="value"
-    class="flex gap-2 items-center mt-1"
+      placeholder="○"
-    @complete="handleComplete"
+      @complete="handleComplete"
-  >
+    >
-    <PinInputInput
+      <PinInputGroup>
-      v-for="(id, index) in 5"
+        <PinInputInput
-      :key="id"
+          v-for="(id, index) in 5"
-      :index="index"
+          :key="id"
-    />
+          :index="index"
-  </PinInput>
+        />
+      </PinInputGroup>
+    </PinInput>
+  </div>
 </template>

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>

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
+            <PinInputGroup>
-              v-for="(id, index) in 5"
+              <PinInputInput
-              :key="id"
+                v-for="(id, index) in 5"
-              :index="index"
+                :key="id"
-            />
+                :index="index"
+              />
+            </PinInputGroup>
           </PinInput>
         </FormControl>
         <FormDescription>

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>

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>

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>

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>

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'

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"

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

@@ -9,13 +9,21 @@
       "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"

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

@@ -9,13 +9,21 @@
       "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"

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: {