pin-input

1<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
2import type { PinInputRootEmits, PinInputRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { PinInputRoot, useForwardPropsEmits } from "reka-ui"
6import { cn } from "@/lib/utils"
7 
8const props = withDefaults(defineProps<PinInputRootProps<Type> & { class?: HTMLAttributes["class"] }>(), {
9  modelValue: () => [],
10})
11const emits = defineEmits<PinInputRootEmits<Type>>()
12 
13const delegatedProps = reactiveOmit(props, "class")
14 
15const forwarded = useForwardPropsEmits(delegatedProps, emits)
16</script>
17 
18<template>
19  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
20    <slot />
21  </PinInputRoot>
22</template>