From 5d5afa1101e395eb78e2e8608f348f36f0439e03 Mon Sep 17 00:00:00 2001
From: Duncan Krebbers <duncan@projectfive.nl>
Date: Tue, 12 Nov 2024 17:59:18 +0100
Subject: [PATCH] Add background-color to PinInput

Adds the `bg-background` class to the Pin-input input fields, which styles it similar to regular Input components, and which fixes the background color in dark mode.
---
 .../www/src/lib/registry/default/ui/pin-input/PinInputInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 9277580c..5ea9f45f 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: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)" />
+  <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 bg-background text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)" />
 </template>