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

README.md

@@ -2,7 +2,6 @@
 
 RSSA - Front End
 
-
 > [!IMPORTANT]
 > Read this following instructions before doing your job
 
@@ -65,22 +64,22 @@ The basic development workflow follows these steps:
 ## Code Conventions
 
 - Under the script setup block, putting things in group with the following order:
-   - Imports → all dependencies, sorted by external, alias (~), and relative imports.
+  - Imports → all dependencies, sorted by external, alias (~), and relative imports.
-   - Props & Emits → clearly define component inputs & outputs.
+  - Props & Emits → clearly define component inputs & outputs.
-   - State & Computed → all ref, reactive, and computed variables grouped together.
+  - State & Computed → all ref, reactive, and computed variables grouped together.
-   - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
+  - Lifecycle Hooks → grouped by mounting → updating → unmounting order.
-   - Functions → async first (fetching, API calls), then utility & event handlers.
+  - Functions → async first (fetching, API calls), then utility & event handlers.
-   - Watchers → if needed, put them at the bottom.
+  - Watchers → if needed, put them at the bottom.
-   - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
+  - Template → keep clean and minimal logic, use methods/computed instead of inline JS.
 - Declaration Naming
-   - Uses PascalCase for `type` naming
+  - Uses PascalCase for `type` naming
-   - Uses camelCase for `variable` and `const` naming
+  - Uses camelCase for `variable` and `const` naming
-   - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
+  - Underscore can be used to indicates that a variable has derived from an attribute of an object<br />
-      for example: `person_name` indicates it is an attribute `name` from object `person`
+    for example: `person_name` indicates it is an attribute `name` from object `person`
 - Looping
-   - Uses `i`, `j`, `k` as variable for `for` looping index
+  - Uses `i`, `j`, `k` as variable for `for` looping index
-   - Uses `item` as object instantition for `forEach` loop callback
+  - Uses `item` as object instantition for `forEach` loop callback
-   - Uses `item` as object instantition for `v-for` loop callback in the template
+  - Uses `item` as object instantition for `v-for` loop callback in the template
 
 ## Git Workflows
 

app/components/app/patient/entry-form.vue

@@ -13,22 +13,32 @@ import Label from '~/components/pub/form/label.vue'
     </div>
 
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div>
+      <Block>
-        <Block>
+        <FieldGroup :column="3">
-          <FieldGroup :column="2">
+          <Label>Nama</Label>
-            <Label>Nama</Label>
+          <Field>
-            <Field name="name">
+            <Input type="text" name="name" />
-              <Input type="text" name="name" />
+          </Field>
-            </Field>
+        </FieldGroup>
-          </FieldGroup>
+        <FieldGroup :column="3">
-          <FieldGroup :column="2">
+          <Label>Nama</Label>
-            <Label>Nomor RM</Label>
+          <Field>
-            <Field name="name">
+            <Input type="text" name="name" />
-              <Input type="text" name="name" />
+          </Field>
-            </Field>
+        </FieldGroup>
-          </FieldGroup>
+        <FieldGroup :column="3">
-        </Block>
+          <Label>Nomor RM</Label>
-      </div>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+        <FieldGroup>
+          <Label dynamic>Alamat</Label>
+          <Field>
+            <Input type="text" name="name" />
+          </Field>
+        </FieldGroup>
+      </Block>
     </div>
     <div class="my-2 flex justify-end py-2">
       <PubNavFooterCsd />

app/components/app/patient/list-cfg.ts

@@ -1,11 +1,5 @@
-import type {
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
-  Col,
+import { defineAsyncComponent } from 'vue'
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/nav/types'
 
 type SmallDetailDto = any
 

app/components/app/patient/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg.ts'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 defineProps<{
   data: any[]

app/components/pub/form/field-group.vue

@@ -16,71 +16,29 @@ const props = withDefaults(
   },
 )
 
-const classVal = computed(() => {
+const wrapperClass = computed(() => [
-  let val = ''
+  'w-full flex-shrink-0',
 
-  if (props.column === 2) val += 'column-2 '
+  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
-  else if (props.column === 3) val += 'column-3 '
+  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 ' : '',
-  else val += 'column-1 '
+  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
+  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
+  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
 
-  if (props.density === 'dense') val += 'density-dense '
+  props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
 
-  if (props.side === 'break') val += 'side-break '
+  props.side !== 'break' ? 'md:flex' : '',
 
-  if (props.position === 'dynamic') val += 'position-dynamic '
+  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
 
-  return (val + (props.class || '')).trim()
+  props.class,
-})
+])
 </script>
 
 <template>
-  <div
+  <div :class="wrapperClass">
-    :class="[
-      column === 1 ? 'w-full' : column === 2 ? 'pe-4 md:w-1/2' : 'pe-4 md:w-1/3',
-      density === 'dense' ? '' : 'mb-2 md:mb-2.5 xl:mb-3',
-      side !== 'break' ? 'md:flex' : '',
-      position === 'dynamic' ? 'ps-4' : '',
-      props.class,
-    ]"
-  >
     <slot />
   </div>
 </template>
 
-<style scoped>
+<style scoped></style>
-.column-1,
-.column-2,
-.column-3 {
-  @apply w-full flex-shrink-0;
-}
-
-.column-1:not(.density-dense):not(:last-child),
-.column-2:not(.density-dense):not(:last-child),
-.column-3:not(.density-dense):not(:last-child) {
-  @apply mb-2 md:mb-2.5 xl:mb-3;
-}
-
-.column-2:not(.position-dynamic),
-.column-3:not(.position-dynamic) {
-  @apply pe-4;
-}
-
-.column-2:is(.position-dynamic),
-.column-3:is(.position-dynamic) {
-  @apply ps-4;
-}
-
-.column-1:not(.side-break),
-.column-2:not(.side-break),
-.column-3:not(.side-break) {
-  @apply md:flex;
-}
-
-.column-2:not(.side-break) {
-  @apply md:w-1/2;
-}
-
-.column-3:not(.side-break) {
-  @apply md:w-1/3;
-}
-</style>

app/components/pub/form/label.vue

@@ -4,69 +4,49 @@ const props = withDefaults(
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
-    class?: string
   }>(),
   {
     size: 'default',
     height: 'default',
     position: 'default',
-    class: '',
   },
 )
 
-const classVal = computed(() => {
+const sizeMap = {
-  let val = ''
+  default: 'w-28 2xl:w-36',
+  narrow: 'w-24 2xl:w-28',
+  wide: 'w-44 2xl:w-48',
+} as const
 
-  if (props.size === 'narrow') val += 'size-narrow '
+const heightMap = {
-  else if (props.size === 'wide') val += 'size-wide '
+  default: 'pt-2 2xl:pt-2.5',
-  else val += 'size-default '
+  compact: 'leading-[14pt]',
+} as const
 
-  if (props.height === 'compact') val += 'height-compact '
+const positionWrapMap = {
-  else val += 'height-default '
+  default: 'pe-2 text-start',
+  dynamic: 'md:text-end',
+} as const
 
-  if (props.position === 'dynamic') val += 'position-dynamic '
+const positionChildMap = {
-  else val += 'position-default '
+  default: '',
+  dynamic: 'block pe-2.5',
+} as const
 
-  return (val + (props.class || '')).trim()
+const wrapperClass = computed(() => [
-})
+  'block shrink-0',
+  sizeMap[props.size],
+  heightMap[props.height],
+  positionWrapMap[props.position],
+])
+
+const labelClass = computed(() => positionChildMap[props.position])
 </script>
 
 <template>
-  <div class="label" :class="classVal">
+  <div :class="wrapperClass">
-    <label>
+    <label :class="labelClass">
       <slot />
     </label>
   </div>
 </template>
-
-<style scoped>
-.label {
-  @apply block flex-shrink-0 shrink-0;
-}
-
-.size-default {
-  @apply w-28 2xl:w-36;
-}
-.size-narrow {
-  @apply w-24 2xl:w-28;
-}
-.size-wide {
-  @apply w-44 2xl:w-48;
-}
-
-.height-default {
-  @apply pt-2 2xl:pt-2.5;
-}
-
-.height-compact {
-  line-height: 14pt;
-}
-
-.position-default {
-  @apply pe-2 text-start;
-}
-
-.position-dynamic > * {
-  @apply block pe-2.5 md:text-end;
-}
-</style>

app/components/pub/nav/types.ts

@@ -1,4 +1,5 @@
-import type { ComponentType } from '@unovis/ts'
+// import type { ComponentType } from '@unovis/ts'
+import type { Component } from 'vue'
 
 export interface ListItemDto {
   id: number
@@ -6,6 +7,8 @@ export interface ListItemDto {
   code: string
 }
 
+export type ComponentType = Component
+
 export interface RecComponent {
   idx?: number
   rec: object

app/components/pub/ui/accordion/AccordionContent.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AccordionContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AccordionContent } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/accordion/AccordionItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AccordionItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AccordionItem, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/accordion/AccordionTrigger.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { AccordionTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronDown } from 'lucide-vue-next'
 import {
   AccordionHeader,
@@ -9,6 +8,7 @@ import {
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/alert-dialog/AlertDialogAction.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AlertDialogActionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AlertDialogAction } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AlertDialogCancelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AlertDialogCancel } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/alert-dialog/AlertDialogContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { AlertDialogContentEmits, AlertDialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   AlertDialogContent,
 
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()

app/components/pub/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { AlertDialogDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { AlertDialogTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { AlertDialogTitle } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/avatar/Avatar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { AvatarVariants } from '.'
-import { cn } from '@/lib/utils'
 import { AvatarRoot } from 'radix-vue'
+import { cn } from '@/lib/utils'
 import { avatarVariant } from '.'
 
 const props = withDefaults(defineProps<{

app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

app/components/pub/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { PrimitiveProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',

app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

app/components/pub/ui/button/index.ts

@@ -1,35 +1,35 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: "text-primary underline-offset-4 hover:underline",
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: "size-9",
+        icon: 'size-9',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default',
     },
   },
 )

app/components/pub/ui/calendar/Calendar.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarRootEmits, CalendarRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 
 const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/calendar/CalendarCell.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarCellProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarCell, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/calendar/CalendarCellTrigger.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarCellTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarCellTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/calendar/CalendarGrid.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarGridProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarGrid, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/calendar/CalendarGridRow.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarGridRowProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarGridRow, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/calendar/CalendarHeadCell.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarHeadCellProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarHeadCell, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/calendar/CalendarHeader.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarHeaderProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarHeader, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/calendar/CalendarHeading.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarHeadingProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarHeading, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/calendar/CalendarNextButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarNext, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/calendar/CalendarPrevButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { CalendarPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CalendarPrev, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '../button'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/carousel/CarouselNext.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
 import { ArrowRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 import { Button } from '../button'
 import { useCarousel } from './useCarousel'
 

app/components/pub/ui/carousel/CarouselPrevious.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
 import { ArrowLeft } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
 import { Button } from '../button'
 import { useCarousel } from './useCarousel'
 

app/components/pub/ui/carousel/useCarousel.ts

@@ -34,7 +34,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
 
     onMounted(() => {
       if (!emblaApi.value)
-        return
+      { return }
 
       emblaApi.value?.on('init', onSelect)
       emblaApi.value?.on('reInit', onSelect)
@@ -51,7 +51,7 @@ function useCarousel() {
   const carouselState = useInjectCarousel()
 
   if (!carouselState)
-    throw new Error('useCarousel must be used within a <Carousel />')
+  { throw new Error('useCarousel must be used within a <Carousel />') }
 
   return carouselState
 }

app/components/pub/ui/chart-area/AreaChart.vue

@@ -2,11 +2,11 @@
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Area, Axis, CurveType, Line } from '@unovis/ts'
 import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {

app/components/pub/ui/chart-bar/BarChart.vue

@@ -2,11 +2,11 @@
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
 import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {

app/components/pub/ui/chart-donut/DonutChart.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Donut } from '@unovis/ts'
 import { VisDonut, VisSingleContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartSingleTooltip, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {

app/components/pub/ui/chart-line/LineChart.vue

@@ -2,11 +2,11 @@
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import type { Component } from 'vue'
 import type { BaseChartProps } from '.'
-import { cn } from '@/lib/utils'
 import { Axis, CurveType, Line } from '@unovis/ts'
 import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
 import { useMounted } from '@vueuse/core'
 import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {

app/components/pub/ui/checkbox/Checkbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()

app/components/pub/ui/command/Command.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,

app/components/pub/ui/command/CommandEmpty.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxEmptyProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxEmpty } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/command/CommandGroup.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxGroupProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxGroupProps & {
   class?: HTMLAttributes['class']

app/components/pub/ui/command/CommandInput.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { ComboboxInputProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Search } from 'lucide-vue-next'
 import { ComboboxInput, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,

app/components/pub/ui/command/CommandItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()

app/components/pub/ui/command/CommandList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   dismissable: false,

app/components/pub/ui/command/CommandSeparator.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ComboboxSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ComboboxSeparator } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()

app/components/pub/ui/context-menu/ContextMenuContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()

app/components/pub/ui/context-menu/ContextMenuItem.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuItem,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()

app/components/pub/ui/context-menu/ContextMenuLabel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ContextMenuLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ContextMenuLabel } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

app/components/pub/ui/context-menu/ContextMenuRadioItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()

app/components/pub/ui/context-menu/ContextMenuSeparator.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ContextMenuSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/context-menu/ContextMenuSubContent.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   ContextMenuSubContent,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ContextMenuSubTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

app/components/pub/ui/dialog/DialogContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -12,6 +11,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()

app/components/pub/ui/dialog/DialogDescription.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogDescriptionProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DialogDescription, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/dialog/DialogScrollContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -12,6 +11,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()

app/components/pub/ui/dialog/DialogTitle.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogTitleProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DialogTitle, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/drawer/DrawerContent.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { useForwardPropsEmits } from 'radix-vue'
 import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import { cn } from '@/lib/utils'
 import DrawerOverlay from './DrawerOverlay.vue'
 
 const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()

app/components/pub/ui/drawer/DrawerDescription.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DrawerDescription } from 'vaul-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 

app/components/pub/ui/drawer/DrawerOverlay.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DialogOverlayProps } from 'radix-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DrawerOverlay } from 'vaul-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
 

app/components/pub/ui/drawer/DrawerTitle.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DrawerTitleProps } from 'vaul-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DrawerTitle } from 'vaul-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
 

app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   DropdownMenuContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),

app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DropdownMenuItem, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
@@ -10,6 +9,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DropdownMenuSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
 
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes['class']

app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   DropdownMenuSubContent,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DropdownMenuSubTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/form/FormItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { provide } from 'vue'
+import { cn } from '@/lib/utils'
 import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 const props = defineProps<{

app/components/pub/ui/form/FormLabel.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { Label } from '@/components/ui/label'
+import { Label } from '@/components/pub/ui/label'
 import { cn } from '@/lib/utils'
 import { useFormField } from './useFormField'
 
@@ -11,13 +11,7 @@ const { error, formItemId } = useFormField()
 </script>
 
 <template>
-  <Label
+  <Label :class="cn(error && 'text-destructive', props.class)" :for="formItemId">
-    :class="cn(
-      error && 'text-destructive',
-      props.class,
-    )"
-    :for="formItemId"
-  >
     <slot />
   </Label>
 </template>

app/components/pub/ui/form/useFormField.ts

@@ -13,7 +13,7 @@ export function useFormField() {
   }
 
   if (!fieldContext)
-    throw new Error('useFormField should be used within <FormField>')
+  { throw new Error('useFormField should be used within <FormField>') }
 
   const { name } = fieldContext
   const id = fieldItemContext

app/components/pub/ui/hover-card/HoverCardContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { HoverCardContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   HoverCardContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),

app/components/pub/ui/label/Label.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { LabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Label } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/menubar/Menubar.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { MenubarRootEmits, MenubarRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarRoot,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()

app/components/pub/ui/menubar/MenubarCheckboxItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarCheckboxItem,
 
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarCheckboxItemEmits>()

app/components/pub/ui/menubar/MenubarContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarContent,
 
@@ -9,6 +8,7 @@ import {
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),

app/components/pub/ui/menubar/MenubarItem.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { MenubarItemEmits, MenubarItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarItem,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

app/components/pub/ui/menubar/MenubarLabel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { MenubarLabelProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>

app/components/pub/ui/menubar/MenubarRadioItem.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()

app/components/pub/ui/menubar/MenubarSeparator.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { MenubarSeparatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarSeparator, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/menubar/MenubarSubContent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenubarSubContentEmits, MenubarSubContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   MenubarPortal,
   MenubarSubContent,
@@ -9,6 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/menubar/MenubarSubTrigger.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { MenubarSubTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarSubTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

app/components/pub/ui/menubar/MenubarTrigger.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { MenubarTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { MenubarTrigger, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/navigation-menu/NavigationMenu.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuRoot,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
 
 const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/navigation-menu/NavigationMenuContent.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuContent,
 
   useForwardPropsEmits,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NavigationMenuIndicatorProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { NavigationMenuIndicator, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/navigation-menu/NavigationMenuList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NavigationMenuListProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { NavigationMenuList, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuTriggerProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuTrigger,
 
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { navigationMenuTriggerStyle } from '.'
 
 const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()

app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { NavigationMenuViewportProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import {
   NavigationMenuViewport,
 
   useForwardProps,
 } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/number-field/NumberField.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NumberFieldRootEmits>()

app/components/pub/ui/number-field/NumberFieldDecrement.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { NumberFieldDecrementProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Minus } from 'lucide-vue-next'
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/number-field/NumberFieldIncrement.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { NumberFieldIncrementProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { Plus } from 'lucide-vue-next'
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/number-field/NumberFieldInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
 import { NumberFieldInput } from 'radix-vue'
+import { cn } from '@/lib/utils'
 </script>
 
 <template>

app/components/pub/ui/pagination/PaginationEllipsis.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { PaginationEllipsis } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/pagination/PaginationFirst.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationFirstProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationFirst } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-double-arrow-left" />
       </slot>

app/components/pub/ui/pagination/PaginationLast.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationLastProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationLast } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-double-arrow-right" />
       </slot>

app/components/pub/ui/pagination/PaginationNext.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationNext } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-chevron-right" />
       </slot>

app/components/pub/ui/pagination/PaginationPrev.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationPrev } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-chevron-left" />
       </slot>

app/components/pub/ui/pin-input/PinInput.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { PinInputRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: () => [],