{
  "name": "input-otp",
  "type": "registry:ui",
  "dependencies": [
    "@vueuse/core",
    "reka-ui",
    "vue-input-otp"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/input-otp/InputOTP.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport type { OTPInputEmits, OTPInputProps } from \"vue-input-otp\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardPropsEmits } from \"reka-ui\"\nimport { OTPInput } from \"vue-input-otp\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<OTPInputProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst emits = defineEmits<OTPInputEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <OTPInput\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :container-class=\"cn('cn-input-otp flex items-center has-disabled:opacity-50', props.class)\"\n    data-slot=\"input-otp\"\n    :spellcheck=\"false\"\n    class=\"cn-input-otp-input disabled:cursor-not-allowed\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </OTPInput>\n</template>\n"
    },
    {
      "path": "ui/input-otp/InputOTPGroup.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{ class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div\n    data-slot=\"input-otp-group\"\n    v-bind=\"forwarded\"\n    :class=\"cn('cn-input-otp-group flex items-center', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
    },
    {
      "path": "ui/input-otp/InputOTPSeparator.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/docs/icon-placeholder\"\n\nconst props = defineProps<{ class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <div\n    data-slot=\"input-otp-separator\"\n    role=\"separator\"\n    v-bind=\"forwarded\"\n    :class=\"cn('cn-input-otp-separator flex items-center', props.class)\"\n  >\n    <slot>\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </slot>\n  </div>\n</template>\n"
    },
    {
      "path": "ui/input-otp/InputOTPSlot.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { useForwardProps } from \"reka-ui\"\nimport { computed } from \"vue\"\nimport { useVueOTPContext } from \"vue-input-otp\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{ index: number, class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardProps(delegatedProps)\n\nconst context = useVueOTPContext()\n\nconst slot = computed(() => context?.value.slots[props.index])\n</script>\n\n<template>\n  <div\n    v-bind=\"forwarded\"\n    data-slot=\"input-otp-slot\"\n    :data-active=\"slot?.isActive\"\n    :class=\"cn('cn-input-otp-slot relative flex items-center justify-center data-[active=true]:z-10', props.class)\"\n  >\n    {{ slot?.char }}\n    <div v-if=\"slot?.hasFakeCaret\" class=\"cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <div class=\"cn-input-otp-caret-line\" />\n    </div>\n  </div>\n</template>\n"
    },
    {
      "path": "ui/input-otp/index.ts",
      "type": "registry:ui",
      "content": "export { default as InputOTP } from \"./InputOTP.vue\"\nexport { default as InputOTPGroup } from \"./InputOTPGroup.vue\"\nexport { default as InputOTPSeparator } from \"./InputOTPSeparator.vue\"\nexport { default as InputOTPSlot } from \"./InputOTPSlot.vue\"\n"
    }
  ]
}