fix: make NumberField more flexible (#613)

Change the NumberField, so it could be used
in different configuration without extra
effort from the developer.

apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <div :class="cn('flex items-center h-10 rounded-md border border-input px-1 py-2 ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:opacity-50', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue

@@ -4,5 +4,5 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <NumberFieldInput :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm text-center 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')" />
+  <NumberFieldInput :class="cn('w-full bg-background text-sm text-center placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50')" />
 </template>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <div :class="cn('flex items-center h-9 rounded-md border border-input bg-transparent py-1 shadow-sm transition-colors focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:opacity-50', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue

@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>

apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue

@@ -4,5 +4,5 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <NumberFieldInput :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')" />
+  <NumberFieldInput :class="cn('w-full bg-transparent text-sm text-center  placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed')" />
 </template>