From 1f97ce0d243e2d6c7bb7e43026be6d01270e8dd9 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sun, 24 Mar 2024 00:26:18 +0330
Subject: [PATCH] fix: pin input highlight border (#432)

---
 .../www/src/lib/registry/default/ui/pin-input/PinInputInput.vue | 2 +-
 .../src/lib/registry/new-york/ui/pin-input/PinInputInput.vue    | 2 +-
 apps/www/src/public/registry/styles/default/pin-input.json      | 2 +-
 apps/www/src/public/registry/styles/new-york/pin-input.json     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

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 ba6d0f31..ac3b9525 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('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)" />
+  <PinInputInput v-bind="forwardedProps" :class="cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 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/PinInputInput.vue b/apps/www/src/lib/registry/new-york/ui/pin-input/PinInputInput.vue
index ba6d0f31..ac3b9525 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('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)" />
+  <PinInputInput v-bind="forwardedProps" :class="cn('relative text-center focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 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/public/registry/styles/default/pin-input.json b/apps/www/src/public/registry/styles/default/pin-input.json
index 534e7892..654672e8 100644
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -15,7 +15,7 @@
     },
     {
       "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('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"
+      "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:relative focus:z-10 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",
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 e767ed2b..617f41a3 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
@@ -15,7 +15,7 @@
     },
     {
       "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('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"
+      "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:relative focus:z-10 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",