@kayord/ui 0.13.21 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/dist/components/custom/combobox/Combobox.svelte +1 -1
  2. package/dist/components/custom/data-table/DataTable.svelte +1 -1
  3. package/dist/components/custom/data-table/DataTableHeader.svelte +1 -1
  4. package/dist/components/custom/data-table/Pagination.svelte +1 -1
  5. package/dist/components/custom/progress-loading/ProgressLoading.svelte +2 -2
  6. package/dist/components/ui/accordion/accordion-content.svelte +2 -2
  7. package/dist/components/ui/alert/alert-title.svelte +1 -1
  8. package/dist/components/ui/alert-dialog/alert-dialog-content.svelte +1 -1
  9. package/dist/components/ui/alert-dialog/alert-dialog-description.svelte +1 -1
  10. package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte +1 -1
  11. package/dist/components/ui/avatar/avatar-fallback.svelte +1 -1
  12. package/dist/components/ui/avatar/avatar-image.svelte +1 -1
  13. package/dist/components/ui/breadcrumb/breadcrumb-list.svelte +1 -1
  14. package/dist/components/ui/breadcrumb/breadcrumb-page.svelte +1 -1
  15. package/dist/components/ui/calendar/calendar-cell.svelte +1 -1
  16. package/dist/components/ui/calendar/calendar-day.svelte +2 -2
  17. package/dist/components/ui/calendar/calendar-head-cell.svelte +1 -1
  18. package/dist/components/ui/calendar/calendar-months.svelte +1 -1
  19. package/dist/components/ui/card/card-description.svelte +1 -1
  20. package/dist/components/ui/card/card-title.svelte +1 -1
  21. package/dist/components/ui/card/card.svelte +1 -1
  22. package/dist/components/ui/carousel/carousel-next.svelte +1 -1
  23. package/dist/components/ui/carousel/carousel-previous.svelte +1 -1
  24. package/dist/components/ui/checkbox/checkbox.svelte +1 -1
  25. package/dist/components/ui/command/command-dialog.svelte +1 -1
  26. package/dist/components/ui/command/command-group.svelte +2 -2
  27. package/dist/components/ui/command/command-input.svelte +1 -1
  28. package/dist/components/ui/command/command-item.svelte +1 -1
  29. package/dist/components/ui/command/command-link-item.svelte +1 -1
  30. package/dist/components/ui/command/command-list.svelte +1 -1
  31. package/dist/components/ui/command/command-separator.svelte +1 -1
  32. package/dist/components/ui/command/command-shortcut.svelte +1 -1
  33. package/dist/components/ui/command/command.svelte +1 -1
  34. package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte +1 -1
  35. package/dist/components/ui/context-menu/context-menu-content.svelte +1 -1
  36. package/dist/components/ui/context-menu/context-menu-group-heading.svelte +1 -1
  37. package/dist/components/ui/context-menu/context-menu-item.svelte +1 -1
  38. package/dist/components/ui/context-menu/context-menu-radio-item.svelte +1 -1
  39. package/dist/components/ui/context-menu/context-menu-separator.svelte +1 -1
  40. package/dist/components/ui/context-menu/context-menu-shortcut.svelte +1 -1
  41. package/dist/components/ui/context-menu/context-menu-sub-content.svelte +1 -1
  42. package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte +1 -1
  43. package/dist/components/ui/dialog/dialog-content.svelte +2 -2
  44. package/dist/components/ui/dialog/dialog-description.svelte +1 -1
  45. package/dist/components/ui/dialog/dialog-overlay.svelte +1 -1
  46. package/dist/components/ui/dialog/dialog-title.svelte +1 -1
  47. package/dist/components/ui/drawer/drawer-content.svelte +2 -2
  48. package/dist/components/ui/drawer/drawer-description.svelte +1 -1
  49. package/dist/components/ui/drawer/drawer-title.svelte +1 -1
  50. package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +1 -1
  51. package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
  52. package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte +1 -1
  53. package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +1 -1
  54. package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte +1 -1
  55. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +1 -1
  56. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -1
  57. package/dist/components/ui/form/form-description.svelte +1 -1
  58. package/dist/components/ui/form/form-field-errors.svelte +1 -1
  59. package/dist/components/ui/form/form-legend.svelte +1 -1
  60. package/dist/components/ui/hover-card/hover-card-content.svelte +1 -1
  61. package/dist/components/ui/input/input.svelte +34 -11
  62. package/dist/components/ui/input/input.svelte.d.ts +10 -2
  63. package/dist/components/ui/input-otp/input-otp-slot.svelte +3 -3
  64. package/dist/components/ui/label/label.svelte +1 -1
  65. package/dist/components/ui/menubar/menubar-checkbox-item.svelte +1 -1
  66. package/dist/components/ui/menubar/menubar-content.svelte +1 -1
  67. package/dist/components/ui/menubar/menubar-item.svelte +1 -1
  68. package/dist/components/ui/menubar/menubar-radio-item.svelte +1 -1
  69. package/dist/components/ui/menubar/menubar-separator.svelte +1 -1
  70. package/dist/components/ui/menubar/menubar-shortcut.svelte +1 -1
  71. package/dist/components/ui/menubar/menubar-sub-content.svelte +1 -1
  72. package/dist/components/ui/menubar/menubar-sub-trigger.svelte +1 -1
  73. package/dist/components/ui/menubar/menubar-trigger.svelte +1 -1
  74. package/dist/components/ui/menubar/menubar.svelte +1 -1
  75. package/dist/components/ui/popover/popover-content.svelte +1 -1
  76. package/dist/components/ui/progress/progress.svelte +2 -2
  77. package/dist/components/ui/radio-group/radio-group-item.svelte +1 -1
  78. package/dist/components/ui/range-calendar/range-calendar-cell.svelte +1 -1
  79. package/dist/components/ui/range-calendar/range-calendar-day.svelte +1 -1
  80. package/dist/components/ui/range-calendar/range-calendar-head-cell.svelte +1 -1
  81. package/dist/components/ui/range-calendar/range-calendar-months.svelte +1 -1
  82. package/dist/components/ui/resizable/resizable-handle.svelte +2 -2
  83. package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte +2 -2
  84. package/dist/components/ui/select/select-content.svelte +1 -1
  85. package/dist/components/ui/select/select-group-heading.svelte +1 -1
  86. package/dist/components/ui/select/select-item.svelte +1 -1
  87. package/dist/components/ui/select/select-separator.svelte +1 -1
  88. package/dist/components/ui/select/select-trigger.svelte +1 -1
  89. package/dist/components/ui/separator/separator.svelte +1 -1
  90. package/dist/components/ui/sheet/sheet-content.svelte +1 -1
  91. package/dist/components/ui/sheet/sheet-description.svelte +1 -1
  92. package/dist/components/ui/sheet/sheet-overlay.svelte +1 -1
  93. package/dist/components/ui/sheet/sheet-title.svelte +1 -1
  94. package/dist/components/ui/sidebar/sidebar-input.svelte +1 -1
  95. package/dist/components/ui/sidebar/sidebar-input.svelte.d.ts +7 -1
  96. package/dist/components/ui/sidebar/sidebar-inset.svelte +2 -2
  97. package/dist/components/ui/sidebar/sidebar-menu-badge.svelte +1 -1
  98. package/dist/components/ui/sidebar/sidebar-menu-skeleton.svelte +1 -1
  99. package/dist/components/ui/sidebar/sidebar-menu-sub.svelte +1 -1
  100. package/dist/components/ui/sidebar/sidebar-provider.svelte +1 -1
  101. package/dist/components/ui/sidebar/sidebar-rail.svelte +2 -2
  102. package/dist/components/ui/sidebar/sidebar-separator.svelte +1 -1
  103. package/dist/components/ui/sidebar/sidebar.svelte +8 -8
  104. package/dist/components/ui/skeleton/skeleton.svelte +1 -1
  105. package/dist/components/ui/slider/slider.svelte +15 -5
  106. package/dist/components/ui/switch/switch.svelte +2 -2
  107. package/dist/components/ui/table/table-caption.svelte +1 -1
  108. package/dist/components/ui/table/table-head.svelte +1 -1
  109. package/dist/components/ui/table/table-row.svelte +1 -1
  110. package/dist/components/ui/tabs/tabs-content.svelte +1 -1
  111. package/dist/components/ui/tabs/tabs-list.svelte +1 -1
  112. package/dist/components/ui/tabs/tabs-trigger.svelte +1 -1
  113. package/dist/components/ui/textarea/textarea.svelte +1 -1
  114. package/dist/components/ui/tooltip/tooltip-content.svelte +1 -1
  115. package/package.json +15 -18
@@ -74,7 +74,7 @@
74
74
 
75
75
  <input hidden bind:value {name} />
76
76
 
77
- <Popover.Content class="w-[--bits-floating-anchor-width] p-0" align="start">
77
+ <Popover.Content class="w-(--bits-floating-anchor-width) p-0" align="start">
78
78
  <Command.Root {shouldFilter}>
79
79
  <Command.Input autofocus placeholder={`Search ${name}...`} class="h-9" bind:value={search} />
80
80
  <Command.List>
@@ -76,7 +76,7 @@
76
76
  <div
77
77
  class={cn(
78
78
  "w-full",
79
- tableStore.isFullscreen ? "absolute left-0 top-0 z-10 h-screen bg-background transition-all" : "w-full",
79
+ tableStore.isFullscreen ? "bg-background absolute top-0 left-0 z-10 h-screen transition-all" : "w-full",
80
80
  className
81
81
  )}
82
82
  >
@@ -28,7 +28,7 @@
28
28
  {:else if header.column.getIsSorted() == "desc"}
29
29
  <ArrowUpIcon class="size-4" />
30
30
  {:else}
31
- <ArrowUpDownIcon class="size-4 text-muted" />
31
+ <ArrowUpDownIcon class="text-muted size-4" />
32
32
  {/if}
33
33
  </button>
34
34
  {/if}
@@ -17,7 +17,7 @@
17
17
  </script>
18
18
 
19
19
  <div class="flex items-center justify-between py-2">
20
- <div class="flex-1 text-sm text-muted-foreground">
20
+ <div class="text-muted-foreground flex-1 text-sm">
21
21
  {#if table.options.enableRowSelection}
22
22
  {table.getFilteredSelectedRowModel().rows.length} of
23
23
  {table.getFilteredRowModel().rows.length} row(s) selected.
@@ -10,8 +10,8 @@
10
10
  let { class: className = undefined, ...rest }: Props = $props();
11
11
  </script>
12
12
 
13
- <Progress.Root class={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...rest}>
14
- <div class="progressbar-infinite h-full w-full flex-1 bg-primary transition-all"></div>
13
+ <Progress.Root class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)} {...rest}>
14
+ <div class="progressbar-infinite bg-primary h-full w-full flex-1 transition-all"></div>
15
15
  </Progress.Root>
16
16
 
17
17
  <style>
@@ -13,12 +13,12 @@
13
13
  <AccordionPrimitive.Content
14
14
  bind:ref
15
15
  class={cn(
16
- "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
16
+ "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
17
17
  className
18
18
  )}
19
19
  {...restProps}
20
20
  >
21
- <div class="pb-4 pt-0">
21
+ <div class="pt-0 pb-4">
22
22
  {@render children?.()}
23
23
  </div>
24
24
  </AccordionPrimitive.Content>
@@ -18,7 +18,7 @@
18
18
  role="heading"
19
19
  aria-level={level}
20
20
  bind:this={ref}
21
- class={cn("mb-1 font-medium leading-none tracking-tight", className)}
21
+ class={cn("mb-1 leading-none font-medium tracking-tight", className)}
22
22
  {...restProps}
23
23
  >
24
24
  {@render children?.()}
@@ -18,7 +18,7 @@
18
18
  <AlertDialogPrimitive.Content
19
19
  bind:ref
20
20
  class={cn(
21
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
21
+ "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
22
22
  className
23
23
  )}
24
24
  {...restProps}
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: AlertDialogPrimitive.DescriptionProps = $props();
6
6
  </script>
7
7
 
8
- <AlertDialogPrimitive.Description bind:ref class={cn("text-sm text-muted-foreground", className)} {...restProps} />
8
+ <AlertDialogPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
@@ -8,7 +8,7 @@
8
8
  <AlertDialogPrimitive.Overlay
9
9
  bind:ref
10
10
  class={cn(
11
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
11
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
12
12
  className
13
13
  )}
14
14
  {...restProps}
@@ -7,6 +7,6 @@
7
7
 
8
8
  <AvatarPrimitive.Fallback
9
9
  bind:ref
10
- class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
10
+ class={cn("bg-muted flex size-full items-center justify-center", className)}
11
11
  {...restProps}
12
12
  />
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.ImageProps = $props();
6
6
  </script>
7
7
 
8
- <AvatarPrimitive.Image bind:ref class={cn("aspect-square h-full w-full", className)} {...restProps} />
8
+ <AvatarPrimitive.Image bind:ref class={cn("aspect-square size-full", className)} {...restProps} />
@@ -8,7 +8,7 @@
8
8
 
9
9
  <ol
10
10
  bind:this={ref}
11
- class={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)}
11
+ class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
12
12
  {...restProps}
13
13
  >
14
14
  {@render children?.()}
@@ -16,7 +16,7 @@
16
16
  role="link"
17
17
  aria-disabled="true"
18
18
  aria-current="page"
19
- class={cn("font-normal text-foreground", className)}
19
+ class={cn("text-foreground font-normal", className)}
20
20
  {...restProps}
21
21
  >
22
22
  {@render children?.()}
@@ -8,7 +8,7 @@
8
8
  <CalendarPrimitive.Cell
9
9
  bind:ref
10
10
  class={cn(
11
- "relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50",
11
+ "[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
12
12
  className
13
13
  )}
14
14
  {...restProps}
@@ -13,13 +13,13 @@
13
13
  "size-9 p-0 font-normal",
14
14
  "[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
15
15
  // Selected
16
- "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground",
16
+ "data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
17
17
  // Disabled
18
18
  "data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
19
19
  // Unavailable
20
20
  "data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
21
21
  // Outside months
22
- "data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30",
22
+ "data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
23
23
  className
24
24
  )}
25
25
  {...restProps}
@@ -7,6 +7,6 @@
7
7
 
8
8
  <CalendarPrimitive.HeadCell
9
9
  bind:ref
10
- class={cn("w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground", className)}
10
+ class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
11
11
  {...restProps}
12
12
  />
@@ -13,7 +13,7 @@
13
13
 
14
14
  <div
15
15
  bind:this={ref}
16
- class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
16
+ class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4", className)}
17
17
  {...restProps}
18
18
  >
19
19
  {@render children?.()}
@@ -11,6 +11,6 @@
11
11
  }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
12
12
  </script>
13
13
 
14
- <p bind:this={ref} class={cn("text-sm text-muted-foreground", className)} {...restProps}>
14
+ <p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
15
15
  {@render children?.()}
16
16
  </p>
@@ -18,7 +18,7 @@
18
18
  role="heading"
19
19
  aria-level={level}
20
20
  bind:this={ref}
21
- class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
21
+ class={cn("text-2xl leading-none font-semibold tracking-tight", className)}
22
22
  {...restProps}
23
23
  >
24
24
  {@render children?.()}
@@ -11,6 +11,6 @@
11
11
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
12
12
  </script>
13
13
 
14
- <div bind:this={ref} class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...restProps}>
14
+ <div bind:this={ref} class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)} {...restProps}>
15
15
  {@render children?.()}
16
16
  </div>
@@ -22,7 +22,7 @@
22
22
  class={cn(
23
23
  "absolute size-8 touch-manipulation rounded-full",
24
24
  emblaCtx.orientation === "horizontal"
25
- ? "-right-12 top-1/2 -translate-y-1/2"
25
+ ? "top-1/2 -right-12 -translate-y-1/2"
26
26
  : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
27
27
  className
28
28
  )}
@@ -22,7 +22,7 @@
22
22
  class={cn(
23
23
  "absolute size-8 touch-manipulation rounded-full",
24
24
  emblaCtx.orientation === "horizontal"
25
- ? "-left-12 top-1/2 -translate-y-1/2"
25
+ ? "top-1/2 -left-12 -translate-y-1/2"
26
26
  : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
27
27
  className
28
28
  )}
@@ -16,7 +16,7 @@
16
16
  <CheckboxPrimitive.Root
17
17
  bind:ref
18
18
  class={cn(
19
- "peer box-content size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
19
+ "border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
20
20
  className
21
21
  )}
22
22
  bind:checked
@@ -21,7 +21,7 @@
21
21
  <Dialog.Root bind:open {...restProps}>
22
22
  <Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
23
23
  <Command
24
- class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
24
+ class="[&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
25
25
  {...restProps}
26
26
  bind:value
27
27
  bind:ref
@@ -13,9 +13,9 @@
13
13
  } = $props();
14
14
  </script>
15
15
 
16
- <CommandPrimitive.Group class={cn("overflow-hidden p-1 text-foreground", className)} bind:ref {...restProps}>
16
+ <CommandPrimitive.Group class={cn("text-foreground overflow-hidden p-1", className)} bind:ref {...restProps}>
17
17
  {#if heading}
18
- <CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
18
+ <CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
19
19
  {heading}
20
20
  </CommandPrimitive.GroupHeading>
21
21
  {/if}
@@ -15,7 +15,7 @@
15
15
  <Search class="mr-2 size-4 shrink-0 opacity-50" />
16
16
  <CommandPrimitive.Input
17
17
  class={cn(
18
- "flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
18
+ "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
19
19
  className
20
20
  )}
21
21
  bind:ref
@@ -7,7 +7,7 @@
7
7
 
8
8
  <CommandPrimitive.Item
9
9
  class={cn(
10
- "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
10
+ "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
11
11
  className
12
12
  )}
13
13
  bind:ref
@@ -7,7 +7,7 @@
7
7
 
8
8
  <CommandPrimitive.LinkItem
9
9
  class={cn(
10
- "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
10
+ "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
11
11
  className
12
12
  )}
13
13
  bind:ref
@@ -6,7 +6,7 @@
6
6
  </script>
7
7
 
8
8
  <CommandPrimitive.List
9
- class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
9
+ class={cn("max-h-[300px] overflow-x-hidden overflow-y-auto", className)}
10
10
  {...restProps}
11
11
  bind:ref
12
12
  />
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: CommandPrimitive.SeparatorProps = $props();
6
6
  </script>
7
7
 
8
- <CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} bind:ref {...restProps} />
8
+ <CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />
@@ -11,6 +11,6 @@
11
11
  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
12
12
  </script>
13
13
 
14
- <span bind:this={ref} class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...restProps}>
14
+ <span bind:this={ref} class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...restProps}>
15
15
  {@render children?.()}
16
16
  </span>
@@ -11,7 +11,7 @@
11
11
  </script>
12
12
 
13
13
  <CommandPrimitive.Root
14
- class={cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className)}
14
+ class={cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className)}
15
15
  bind:value
16
16
  bind:ref
17
17
  {...restProps}
@@ -22,7 +22,7 @@
22
22
  bind:checked
23
23
  bind:indeterminate
24
24
  class={cn(
25
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
25
+ "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
26
26
  className
27
27
  )}
28
28
  {...restProps}
@@ -16,7 +16,7 @@
16
16
  <ContextMenuPrimitive.Content
17
17
  bind:ref
18
18
  class={cn(
19
- "z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
19
+ "bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none",
20
20
  className
21
21
  )}
22
22
  {...restProps}
@@ -14,6 +14,6 @@
14
14
 
15
15
  <ContextMenuPrimitive.GroupHeading
16
16
  bind:ref
17
- class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
17
+ class={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
18
18
  {...restProps}
19
19
  />
@@ -15,7 +15,7 @@
15
15
  <ContextMenuPrimitive.Item
16
16
  bind:ref
17
17
  class={cn(
18
- "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
18
+ "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
19
19
  inset && "pl-8",
20
20
  className
21
21
  )}
@@ -14,7 +14,7 @@
14
14
  <ContextMenuPrimitive.RadioItem
15
15
  bind:ref
16
16
  class={cn(
17
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
17
+ "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18
18
  className
19
19
  )}
20
20
  {...restProps}
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: ContextMenuPrimitive.SeparatorProps = $props();
6
6
  </script>
7
7
 
8
- <ContextMenuPrimitive.Separator bind:ref class={cn("-mx-1 my-1 h-px bg-border", className)} {...restProps} />
8
+ <ContextMenuPrimitive.Separator bind:ref class={cn("bg-border -mx-1 my-1 h-px", className)} {...restProps} />
@@ -11,6 +11,6 @@
11
11
  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
12
12
  </script>
13
13
 
14
- <span bind:this={ref} class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...restProps}>
14
+ <span bind:this={ref} class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...restProps}>
15
15
  {@render children?.()}
16
16
  </span>
@@ -8,7 +8,7 @@
8
8
  <ContextMenuPrimitive.SubContent
9
9
  bind:ref
10
10
  class={cn(
11
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
11
+ "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md focus:outline-none",
12
12
  className
13
13
  )}
14
14
  {...restProps}
@@ -17,7 +17,7 @@
17
17
  <ContextMenuPrimitive.SubTrigger
18
18
  bind:ref
19
19
  class={cn(
20
- "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",
20
+ "data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none",
21
21
  inset && "pl-8",
22
22
  className
23
23
  )}
@@ -22,14 +22,14 @@
22
22
  <DialogPrimitive.Content
23
23
  bind:ref
24
24
  class={cn(
25
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
25
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
26
26
  className
27
27
  )}
28
28
  {...restProps}
29
29
  >
30
30
  {@render children?.()}
31
31
  <DialogPrimitive.Close
32
- class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
32
+ class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
33
33
  >
34
34
  <X class="size-4" />
35
35
  <span class="sr-only">Close</span>
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: DialogPrimitive.DescriptionProps = $props();
6
6
  </script>
7
7
 
8
- <DialogPrimitive.Description bind:ref class={cn("text-sm text-muted-foreground", className)} {...restProps} />
8
+ <DialogPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
@@ -8,7 +8,7 @@
8
8
  <DialogPrimitive.Overlay
9
9
  bind:ref
10
10
  class={cn(
11
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
11
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
12
12
  className
13
13
  )}
14
14
  {...restProps}
@@ -7,6 +7,6 @@
7
7
 
8
8
  <DialogPrimitive.Title
9
9
  bind:ref
10
- class={cn("text-lg font-semibold leading-none tracking-tight", className)}
10
+ class={cn("text-lg leading-none font-semibold tracking-tight", className)}
11
11
  {...restProps}
12
12
  />
@@ -19,12 +19,12 @@
19
19
  <DrawerPrimitive.Content
20
20
  bind:ref
21
21
  class={cn(
22
- "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
22
+ "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
23
23
  className
24
24
  )}
25
25
  {...restProps}
26
26
  >
27
- <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
27
+ <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
28
28
  {@render children?.()}
29
29
  </DrawerPrimitive.Content>
30
30
  </DrawerPrimitive.Portal>
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: DrawerPrimitive.DescriptionProps = $props();
6
6
  </script>
7
7
 
8
- <DrawerPrimitive.Description bind:ref class={cn("text-sm text-muted-foreground", className)} {...restProps} />
8
+ <DrawerPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
@@ -7,6 +7,6 @@
7
7
 
8
8
  <DrawerPrimitive.Title
9
9
  bind:ref
10
- class={cn("text-lg font-semibold leading-none tracking-tight", className)}
10
+ class={cn("text-lg leading-none font-semibold tracking-tight", className)}
11
11
  {...restProps}
12
12
  />
@@ -22,7 +22,7 @@
22
22
  bind:checked
23
23
  bind:indeterminate
24
24
  class={cn(
25
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
25
+ "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
26
26
  className
27
27
  )}
28
28
  {...restProps}
@@ -18,7 +18,7 @@
18
18
  bind:ref
19
19
  {sideOffset}
20
20
  class={cn(
21
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
21
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
22
22
  className
23
23
  )}
24
24
  {...restProps}
@@ -15,7 +15,7 @@
15
15
  <DropdownMenuPrimitive.Item
16
16
  bind:ref
17
17
  class={cn(
18
- "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
18
+ "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
19
19
  inset && "pl-8",
20
20
  className
21
21
  )}
@@ -14,7 +14,7 @@
14
14
  <DropdownMenuPrimitive.RadioItem
15
15
  bind:ref
16
16
  class={cn(
17
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
17
+ "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
18
18
  className
19
19
  )}
20
20
  {...restProps}
@@ -5,4 +5,4 @@
5
5
  let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
6
6
  </script>
7
7
 
8
- <DropdownMenuPrimitive.Separator bind:ref class={cn("-mx-1 my-1 h-px bg-muted", className)} {...restProps} />
8
+ <DropdownMenuPrimitive.Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
@@ -8,7 +8,7 @@
8
8
  <DropdownMenuPrimitive.SubContent
9
9
  bind:ref
10
10
  class={cn(
11
- "z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none",
11
+ "bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
12
12
  className
13
13
  )}
14
14
  {...restProps}
@@ -17,7 +17,7 @@
17
17
  <DropdownMenuPrimitive.SubTrigger
18
18
  bind:ref
19
19
  class={cn(
20
- "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
20
+ "data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
21
21
  inset && "pl-8",
22
22
  className
23
23
  )}
@@ -10,4 +10,4 @@
10
10
  }: WithoutChild<FormPrimitive.DescriptionProps> = $props();
11
11
  </script>
12
12
 
13
- <FormPrimitive.Description bind:ref class={cn("text-sm text-muted-foreground", className)} {...restProps} />
13
+ <FormPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
@@ -14,7 +14,7 @@
14
14
  } = $props();
15
15
  </script>
16
16
 
17
- <FormPrimitive.FieldErrors bind:ref class={cn("text-sm font-medium text-destructive", className)} {...restProps}>
17
+ <FormPrimitive.FieldErrors bind:ref class={cn("text-destructive text-sm font-medium", className)} {...restProps}>
18
18
  {#snippet children({ errors, errorProps })}
19
19
  {#if childrenProp}
20
20
  {@render childrenProp({ errors, errorProps })}
@@ -8,6 +8,6 @@
8
8
 
9
9
  <FormPrimitive.Legend
10
10
  bind:ref
11
- class={cn("text-sm font-medium leading-none data-[fs-error]:text-destructive", className)}
11
+ class={cn("data-[fs-error]:text-destructive text-sm leading-none font-medium", className)}
12
12
  {...restProps}
13
13
  />