fix: toggle cva

apps/www/.vitepress/theme/style.css

@@ -113,6 +113,10 @@
   pre code {
     @apply relative rounded font-mono text-sm ;
   }
+
+	pre code .line {
+		@apply  px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
+	} 
 }
 
 
@@ -125,12 +129,7 @@
 		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
 		@apply ml-[-50px] mt-[-4px];
 		content: counter(step);
-	}
+	}	
-
-	pre code .line {
-		@apply  px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
-	} 
-	
 }
 
 @media (max-width: 640px) {

apps/www/src/lib/registry/default/ui/toggle/Toggle.vue

@@ -1,46 +1,35 @@
 <script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'radix-vue'
 import { Toggle } from 'radix-vue'
+import type { VariantProps } from 'class-variance-authority'
 import { computed } from 'vue'
-import { cva } from 'class-variance-authority'
+import { toggleVariants } from '.'
-import { cn } from '@/lib/utils'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
-interface ToggleProps {
+interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
-  variant?: 'default' | 'outline'
+
-  size?: 'default' | 'sm' | 'lg'
+interface Props extends ToggleProps {
-  class?: string
+  variant?: ToggleVariantProps['variant']
+  size?: ToggleVariantProps['size']
 }
-
+const props = withDefaults(defineProps<Props>(), {
-const props = withDefaults(defineProps<ToggleProps>(), {
   variant: 'default',
   size: 'default',
 })
+const emits = defineEmits<ToggleEmits>()
 
-const toggleClass = computed(() => {
+const toggleProps = computed(() => {
-  return cva(
+  // eslint-disable-next-line unused-imports/no-unused-vars
-    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-outline-hover hover:text-muted focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-foreground',
+  const { variant, size, ...otherProps } = props
-    {
+  return otherProps
-      variants: {
-        variant: {
-          default: 'bg-transparent',
-          outline:
-            'bg-transparent border border-border hover:bg-outline-hover hover:text-muted',
-        },
-        size: {
-          default: 'h-10 px-3',
-          sm: 'h-9 px-2.5',
-          lg: 'h-11 px-5',
-        },
-      },
-    },
-  )({
-    variant: props.variant,
-    size: props.size,
-  })
 })
 </script>
 
 <template>
-  <Toggle :class="cn(toggleClass, props.class)">
+  <Toggle
+    v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }"
+    :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+  >
     <slot />
   </Toggle>
 </template>

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

@@ -1 +1,25 @@
+import { cva } from 'class-variance-authority'
+
 export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)