fix: add whitespace-nowrap for Button, Select, Tab (#266)

* fix(Button): add 'whitespace-nowrap' to base styles

* refactor(Button): use VariantProps for Button Props instead of NonNullable

* fix(Select): add whitespace-nowrap and truncate to SelectTrigger

apps/www/src/lib/registry/default/ui/button/Button.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
+interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
+
 interface Props extends PrimitiveProps {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  variant?: ButtonVariantProps['variant']
+  size?: ButtonVariantProps['size']
   as?: string
 }
 
 withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
   as: 'button',
 })
 </script>

apps/www/src/lib/registry/default/ui/button/index.ts

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
         props.class,
       ),
       props.invalid

apps/www/src/lib/registry/new-york/ui/button/Button.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
+interface ButtonVariantProps extends VariantProps<typeof buttonVariants> {}
+
 interface Props extends PrimitiveProps {
-  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  variant?: ButtonVariantProps['variant']
+  size?: ButtonVariantProps['size']
   as?: string
 }
 
 withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
   as: 'button',
 })
 </script>

apps/www/src/lib/registry/new-york/ui/button/index.ts

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 whitespace-nowrap [&>span]:truncate [&>span]:min-w-0',
         props.class,
       ),
       props.invalid