⚠️ refactor (form): refactor label component for improved styling and responsiveness

app/components/pub/ui/toggle-group/ToggleGroup.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@/components/ui/toggle'
 import type { VariantProps } from 'class-variance-authority'
 import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { toggleVariants } from '@/components/pub/ui/toggle'
 import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed, provide } from 'vue'
+import { cn } from '~/lib/utils'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
 
-const props = defineProps<ToggleGroupRootProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleGroupVariants['variant']
-  size?: ToggleGroupVariants['size']
-}>()
+const props = defineProps<
+  ToggleGroupRootProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
 const emits = defineEmits<ToggleGroupRootEmits>()
 
 provide('toggleGroup', {

app/components/pub/ui/toggle-group/ToggleGroupItem.vue

@@ -2,18 +2,20 @@
 import type { VariantProps } from 'class-variance-authority'
 import type { ToggleGroupItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { toggleVariants } from '@/components/ui/toggle'
-import { cn } from '@/lib/utils'
 import { ToggleGroupItem, useForwardProps } from 'radix-vue'
 import { computed, inject } from 'vue'
+import { toggleVariants } from '@/components/pub/ui/toggle'
+import { cn } from '@/lib/utils'
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
 
-const props = defineProps<ToggleGroupItemProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleGroupVariants['variant']
-  size?: ToggleGroupVariants['size']
-}>()
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes['class']
+    variant?: ToggleGroupVariants['variant']
+    size?: ToggleGroupVariants['size']
+  }
+>()
 
 const context = inject<ToggleGroupVariants>('toggleGroup')
 
@@ -27,10 +29,16 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <ToggleGroupItem
-    v-bind="forwardedProps" :class="cn(toggleVariants({
-      variant: context?.variant || variant,
-      size: context?.size || size,
-    }), props.class)"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size,
+        }),
+        props.class,
+      )
+    "
   >
     <slot />
   </ToggleGroupItem>