From a830ad8b21eaa74b22514f443db4fce0d6497d1f Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Sun, 23 Jun 2024 22:23:17 +0330
Subject: [PATCH] chore: use CSS :has() feature

---
 .../default/ui/number-field/NumberFieldContent.vue        | 2 +-
 .../default/ui/number-field/NumberFieldDecrement.vue      | 2 +-
 .../default/ui/number-field/NumberFieldIncrement.vue      | 2 +-
 .../registry/default/ui/number-field/NumberFieldInput.vue | 2 +-
 .../new-york/ui/number-field/NumberFieldContent.vue       | 2 +-
 .../new-york/ui/number-field/NumberFieldDecrement.vue     | 2 +-
 .../new-york/ui/number-field/NumberFieldIncrement.vue     | 2 +-
 .../new-york/ui/number-field/NumberFieldInput.vue         | 2 +-
 .../src/public/registry/styles/default/number-field.json  | 8 ++++----
 .../src/public/registry/styles/new-york/number-field.json | 8 ++++----
 10 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
index f8d98859..2cde64ce 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <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)">
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
index a0c8833c..a8c7730b 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
+++ b/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('p-2.5 disabled:cursor-not-allowed', props.class)">
+  <NumberFieldDecrement data-slot="decrement" 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)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
index 2f1828b6..cc37f0cf 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
+++ b/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('p-2.5 disabled:cursor-not-allowed', props.class)">
+  <NumberFieldIncrement data-slot="increment" 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)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
index 181aed8d..7e908a6a 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
+++ b/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('w-full bg-background text-sm text-center placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50')" />
+  <NumberFieldInput data-slot="input" :class="cn('flex h-10 w-full rounded-md border border-input bg-background 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')" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
index 63156ba2..2cde64ce 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <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)">
+  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
index a0c8833c..a8c7730b 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
+++ b/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('p-2.5 disabled:cursor-not-allowed', props.class)">
+  <NumberFieldDecrement data-slot="decrement" 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)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
index 2f1828b6..cc37f0cf 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
+++ b/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('p-2.5 disabled:cursor-not-allowed', props.class)">
+  <NumberFieldIncrement data-slot="increment" 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)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
index 73818870..4046b48a 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
+++ b/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('w-full bg-transparent text-sm text-center  placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed')" />
+  <NumberFieldInput data-slot="input" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent 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')" />
 </template>
diff --git a/apps/www/src/public/registry/styles/default/number-field.json b/apps/www/src/public/registry/styles/default/number-field.json
index 31432ac4..edc03747 100644
--- a/apps/www/src/public/registry/styles/default/number-field.json
+++ b/apps/www/src/public/registry/styles/default/number-field.json
@@ -11,19 +11,19 @@
     },
     {
       "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <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)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement v-bind=\"forwarded\" :class=\"cn('p-2.5 disabled:cursor-not-allowed', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" 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)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement v-bind=\"forwarded\" :class=\"cn('p-2.5 disabled:cursor-not-allowed', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" 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)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <NumberFieldInput :class=\"cn('w-full bg-background text-sm text-center placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <NumberFieldInput data-slot=\"input\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background 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')\" />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/number-field.json b/apps/www/src/public/registry/styles/new-york/number-field.json
index 4c9168c3..ec34b762 100644
--- a/apps/www/src/public/registry/styles/new-york/number-field.json
+++ b/apps/www/src/public/registry/styles/new-york/number-field.json
@@ -11,19 +11,19 @@
     },
     {
       "name": "NumberFieldContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <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)\">\n    <slot />\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div :class=\"cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)\">\n    <slot />\n  </div>\n</template>\n"
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement v-bind=\"forwarded\" :class=\"cn('p-2.5 disabled:cursor-not-allowed', props.class)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldDecrement data-slot=\"decrement\" 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)\">\n    <slot>\n      <Minus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement v-bind=\"forwarded\" :class=\"cn('p-2.5 disabled:cursor-not-allowed', props.class)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <NumberFieldIncrement data-slot=\"increment\" 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)\">\n    <slot>\n      <Plus class=\"h-4 w-4\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <NumberFieldInput :class=\"cn('w-full bg-transparent text-sm text-center  placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <NumberFieldInput data-slot=\"input\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent 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')\" />\n</template>\n"
     },
     {
       "name": "index.ts",