@kayord/ui 3.0.12 → 4.0.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 (303) hide show
  1. package/README.md +70 -156
  2. package/dist/components/custom/animations/NumberTicker.svelte +2 -3
  3. package/dist/components/custom/copy-button/CopyButton.svelte +0 -1
  4. package/dist/components/custom/data-table/DataTable.svelte +42 -69
  5. package/dist/components/custom/data-table/DataTable.svelte.d.ts +14 -9
  6. package/dist/components/custom/data-table/DataTableFooter.svelte +7 -6
  7. package/dist/components/custom/data-table/DataTableFooter.svelte.d.ts +9 -8
  8. package/dist/components/custom/data-table/DataTableHeader.svelte +27 -13
  9. package/dist/components/custom/data-table/DataTableHeader.svelte.d.ts +9 -9
  10. package/dist/components/custom/data-table/DataTableView.svelte +7 -6
  11. package/dist/components/custom/data-table/DataTableView.svelte.d.ts +8 -7
  12. package/dist/components/custom/data-table/FullscreenModeToggle.svelte +11 -6
  13. package/dist/components/custom/data-table/Pagination.svelte +57 -41
  14. package/dist/components/custom/data-table/Pagination.svelte.d.ts +9 -8
  15. package/dist/components/custom/data-table/data-table-utils.js +19 -21
  16. package/dist/components/custom/data-table/features.d.ts +157 -0
  17. package/dist/components/custom/data-table/features.js +36 -0
  18. package/dist/components/custom/data-table/index.d.ts +5 -2
  19. package/dist/components/custom/data-table/index.js +3 -2
  20. package/dist/components/custom/data-table/shad-table.svelte.d.ts +9 -8
  21. package/dist/components/custom/data-table/shad-table.svelte.js +54 -230
  22. package/dist/components/custom/data-table/table-search-params.d.ts +9 -7
  23. package/dist/components/custom/data-table/table-search-params.js +29 -20
  24. package/dist/components/custom/data-table/table-url-sync.svelte.d.ts +42 -0
  25. package/dist/components/custom/data-table/table-url-sync.svelte.js +81 -0
  26. package/dist/components/custom/data-table/types.d.ts +9 -5
  27. package/dist/components/custom/light-switch.svelte/LightSwitch.svelte +1 -1
  28. package/dist/components/custom/loader/Loader.svelte +0 -2
  29. package/dist/components/custom/loader/Loader.svelte.d.ts +1 -3
  30. package/dist/components/custom/theme-selector/ThemeSelector.svelte +1 -1
  31. package/dist/components/ui/accordion/accordion-content.svelte +2 -2
  32. package/dist/components/ui/accordion/accordion-item.svelte +5 -1
  33. package/dist/components/ui/accordion/accordion-trigger.svelte +5 -11
  34. package/dist/components/ui/alert/alert-action.svelte +6 -1
  35. package/dist/components/ui/alert/alert-description.svelte +1 -1
  36. package/dist/components/ui/alert/alert-title.svelte +1 -1
  37. package/dist/components/ui/alert/alert.svelte +8 -3
  38. package/dist/components/ui/alert-dialog/alert-dialog-action.svelte +5 -1
  39. package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte +5 -1
  40. package/dist/components/ui/alert-dialog/alert-dialog-content.svelte +1 -1
  41. package/dist/components/ui/alert-dialog/alert-dialog-description.svelte +6 -5
  42. package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte +1 -1
  43. package/dist/components/ui/alert-dialog/alert-dialog-header.svelte +1 -4
  44. package/dist/components/ui/alert-dialog/alert-dialog-media.svelte +1 -4
  45. package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte +6 -5
  46. package/dist/components/ui/alert-dialog/alert-dialog-title.svelte +6 -5
  47. package/dist/components/ui/avatar/avatar-fallback.svelte +6 -2
  48. package/dist/components/ui/avatar/avatar-group-count.svelte +1 -1
  49. package/dist/components/ui/avatar/avatar-group.svelte +1 -1
  50. package/dist/components/ui/avatar/avatar-image.svelte +6 -2
  51. package/dist/components/ui/avatar/avatar.svelte +1 -1
  52. package/dist/components/ui/badge/badge.svelte +1 -2
  53. package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte +3 -3
  54. package/dist/components/ui/breadcrumb/breadcrumb-item.svelte +12 -2
  55. package/dist/components/ui/breadcrumb/breadcrumb-list.svelte +7 -2
  56. package/dist/components/ui/breadcrumb/breadcrumb-page.svelte +1 -1
  57. package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte +8 -3
  58. package/dist/components/ui/button/button.svelte +5 -10
  59. package/dist/components/ui/button/index.js +1 -1
  60. package/dist/components/ui/button-group/button-group-text.svelte +1 -4
  61. package/dist/components/ui/calendar/calendar-cell.svelte +5 -1
  62. package/dist/components/ui/calendar/calendar-day.svelte +7 -3
  63. package/dist/components/ui/calendar/calendar-grid-body.svelte +5 -1
  64. package/dist/components/ui/calendar/calendar-grid-head.svelte +5 -1
  65. package/dist/components/ui/calendar/calendar-grid-row.svelte +5 -1
  66. package/dist/components/ui/calendar/calendar-grid.svelte +10 -2
  67. package/dist/components/ui/calendar/calendar-head-cell.svelte +9 -2
  68. package/dist/components/ui/calendar/calendar-header.svelte +9 -2
  69. package/dist/components/ui/calendar/calendar-heading.svelte +10 -2
  70. package/dist/components/ui/calendar/calendar-month-select.svelte +7 -5
  71. package/dist/components/ui/calendar/calendar-months.svelte +5 -1
  72. package/dist/components/ui/calendar/calendar-next-button.svelte +1 -1
  73. package/dist/components/ui/calendar/calendar-prev-button.svelte +1 -1
  74. package/dist/components/ui/calendar/calendar-year-select.svelte +7 -5
  75. package/dist/components/ui/calendar/calendar.svelte +1 -1
  76. package/dist/components/ui/card/card-action.svelte +4 -1
  77. package/dist/components/ui/card/card-content.svelte +6 -1
  78. package/dist/components/ui/card/card-description.svelte +6 -1
  79. package/dist/components/ui/card/card-footer.svelte +1 -1
  80. package/dist/components/ui/card/card-header.svelte +1 -1
  81. package/dist/components/ui/card/card.svelte +1 -4
  82. package/dist/components/ui/carousel/carousel-content.svelte +5 -1
  83. package/dist/components/ui/carousel/carousel-item.svelte +5 -1
  84. package/dist/components/ui/carousel/carousel-next.svelte +3 -3
  85. package/dist/components/ui/carousel/carousel-previous.svelte +3 -3
  86. package/dist/components/ui/carousel/carousel.svelte +6 -1
  87. package/dist/components/ui/chart/chart-tooltip.svelte +17 -8
  88. package/dist/components/ui/chart/chart-tooltip.svelte.d.ts +2 -1
  89. package/dist/components/ui/chart/chart-utils.js +3 -1
  90. package/dist/components/ui/checkbox/checkbox.svelte +9 -6
  91. package/dist/components/ui/collapsible/collapsible.svelte +5 -1
  92. package/dist/components/ui/command/command-dialog.svelte +1 -1
  93. package/dist/components/ui/command/command-empty.svelte +5 -1
  94. package/dist/components/ui/command/command-group.svelte +2 -5
  95. package/dist/components/ui/command/command-input.svelte +6 -5
  96. package/dist/components/ui/command/command-item.svelte +9 -6
  97. package/dist/components/ui/command/command-link-item.svelte +6 -2
  98. package/dist/components/ui/command/command-list.svelte +6 -2
  99. package/dist/components/ui/command/command-separator.svelte +6 -2
  100. package/dist/components/ui/command/command-shortcut.svelte +1 -4
  101. package/dist/components/ui/command/command.svelte +1 -1
  102. package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte +4 -4
  103. package/dist/components/ui/context-menu/context-menu-content.svelte +1 -1
  104. package/dist/components/ui/context-menu/context-menu-group-heading.svelte +1 -1
  105. package/dist/components/ui/context-menu/context-menu-item.svelte +1 -1
  106. package/dist/components/ui/context-menu/context-menu-label.svelte +1 -1
  107. package/dist/components/ui/context-menu/context-menu-radio-group.svelte +11 -2
  108. package/dist/components/ui/context-menu/context-menu-radio-item.svelte +4 -4
  109. package/dist/components/ui/context-menu/context-menu-separator.svelte +6 -2
  110. package/dist/components/ui/context-menu/context-menu-shortcut.svelte +1 -4
  111. package/dist/components/ui/context-menu/context-menu-sub-content.svelte +6 -5
  112. package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte +2 -2
  113. package/dist/components/ui/context-menu/context-menu-trigger.svelte +5 -1
  114. package/dist/components/ui/data-table/index.d.ts +2 -3
  115. package/dist/components/ui/data-table/index.js +1 -3
  116. package/dist/components/ui/dialog/dialog-close.svelte +5 -1
  117. package/dist/components/ui/dialog/dialog-content.svelte +3 -3
  118. package/dist/components/ui/dialog/dialog-description.svelte +6 -5
  119. package/dist/components/ui/dialog/dialog-footer.svelte +1 -4
  120. package/dist/components/ui/dialog/dialog-header.svelte +6 -1
  121. package/dist/components/ui/dialog/dialog-overlay.svelte +6 -5
  122. package/dist/components/ui/dialog/dialog-title.svelte +5 -1
  123. package/dist/components/ui/dialog/dialog-trigger.svelte +5 -1
  124. package/dist/components/ui/drawer/drawer-content.svelte +2 -5
  125. package/dist/components/ui/drawer/drawer-description.svelte +6 -2
  126. package/dist/components/ui/drawer/drawer-footer.svelte +6 -1
  127. package/dist/components/ui/drawer/drawer-header.svelte +1 -4
  128. package/dist/components/ui/drawer/drawer-overlay.svelte +6 -5
  129. package/dist/components/ui/drawer/drawer-title.svelte +6 -2
  130. package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte +6 -1
  131. package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +6 -6
  132. package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
  133. package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte +1 -1
  134. package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte +1 -1
  135. package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte +11 -2
  136. package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +4 -4
  137. package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte +6 -2
  138. package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte +1 -4
  139. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +6 -5
  140. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +2 -2
  141. package/dist/components/ui/empty/empty-content.svelte +4 -1
  142. package/dist/components/ui/empty/empty-description.svelte +1 -1
  143. package/dist/components/ui/empty/empty-header.svelte +1 -1
  144. package/dist/components/ui/empty/empty-title.svelte +6 -1
  145. package/dist/components/ui/empty/empty.svelte +1 -1
  146. package/dist/components/ui/field/field-content.svelte +1 -1
  147. package/dist/components/ui/field/field-description.svelte +2 -2
  148. package/dist/components/ui/field/field-error.svelte +1 -1
  149. package/dist/components/ui/field/field-group.svelte +1 -1
  150. package/dist/components/ui/field/field-label.svelte +7 -2
  151. package/dist/components/ui/field/field-separator.svelte +2 -2
  152. package/dist/components/ui/field/field-set.svelte +1 -4
  153. package/dist/components/ui/field/field-title.svelte +1 -4
  154. package/dist/components/ui/form/form-description.svelte +1 -1
  155. package/dist/components/ui/form/form-element-field.svelte +2 -1
  156. package/dist/components/ui/form/form-field-errors.svelte +5 -1
  157. package/dist/components/ui/form/form-field.svelte +2 -1
  158. package/dist/components/ui/form/form-label.svelte +5 -1
  159. package/dist/components/ui/form/form-legend.svelte +6 -2
  160. package/dist/components/ui/hover-card/hover-card-content.svelte +1 -4
  161. package/dist/components/ui/input/input.svelte +4 -3
  162. package/dist/components/ui/input-group/input-group-addon.svelte +1 -2
  163. package/dist/components/ui/input-group/input-group-input.svelte +1 -4
  164. package/dist/components/ui/input-group/input-group-text.svelte +1 -4
  165. package/dist/components/ui/input-group/input-group-textarea.svelte +1 -4
  166. package/dist/components/ui/input-group/input-group.svelte +1 -1
  167. package/dist/components/ui/input-otp/input-otp-group.svelte +1 -4
  168. package/dist/components/ui/input-otp/input-otp-separator.svelte +3 -3
  169. package/dist/components/ui/input-otp/input-otp-slot.svelte +11 -4
  170. package/dist/components/ui/input-otp/input-otp.svelte +1 -1
  171. package/dist/components/ui/item/item-actions.svelte +6 -1
  172. package/dist/components/ui/item/item-content.svelte +1 -1
  173. package/dist/components/ui/item/item-description.svelte +1 -1
  174. package/dist/components/ui/item/item-footer.svelte +1 -1
  175. package/dist/components/ui/item/item-group.svelte +1 -4
  176. package/dist/components/ui/item/item-header.svelte +1 -1
  177. package/dist/components/ui/item/item-media.svelte +1 -2
  178. package/dist/components/ui/item/item-separator.svelte +12 -2
  179. package/dist/components/ui/item/item-title.svelte +1 -4
  180. package/dist/components/ui/kbd/kbd-group.svelte +6 -1
  181. package/dist/components/ui/kbd/kbd.svelte +1 -1
  182. package/dist/components/ui/label/label.svelte +6 -2
  183. package/dist/components/ui/menubar/menubar-checkbox-item.svelte +6 -6
  184. package/dist/components/ui/menubar/menubar-content.svelte +1 -1
  185. package/dist/components/ui/menubar/menubar-item.svelte +1 -4
  186. package/dist/components/ui/menubar/menubar-radio-group.svelte +5 -1
  187. package/dist/components/ui/menubar/menubar-radio-item.svelte +4 -4
  188. package/dist/components/ui/menubar/menubar-separator.svelte +5 -1
  189. package/dist/components/ui/menubar/menubar-shortcut.svelte +1 -4
  190. package/dist/components/ui/menubar/menubar-sub-content.svelte +6 -5
  191. package/dist/components/ui/menubar/menubar-sub-trigger.svelte +2 -2
  192. package/dist/components/ui/menubar/menubar-trigger.svelte +6 -5
  193. package/dist/components/ui/menubar/menubar.svelte +6 -2
  194. package/dist/components/ui/native-select/index.d.ts +1 -1
  195. package/dist/components/ui/native-select/index.js +1 -1
  196. package/dist/components/ui/native-select/native-select-opt-group.svelte +5 -1
  197. package/dist/components/ui/native-select/native-select.svelte +7 -8
  198. package/dist/components/ui/navigation-menu/navigation-menu-content.svelte +6 -2
  199. package/dist/components/ui/navigation-menu/navigation-menu-indicator.svelte +6 -2
  200. package/dist/components/ui/navigation-menu/navigation-menu-item.svelte +5 -1
  201. package/dist/components/ui/navigation-menu/navigation-menu-link.svelte +6 -5
  202. package/dist/components/ui/navigation-menu/navigation-menu-list.svelte +9 -2
  203. package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte +2 -5
  204. package/dist/components/ui/navigation-menu/navigation-menu-viewport.svelte +6 -2
  205. package/dist/components/ui/navigation-menu/navigation-menu.svelte +4 -1
  206. package/dist/components/ui/pagination/pagination-content.svelte +6 -1
  207. package/dist/components/ui/pagination/pagination-ellipsis.svelte +3 -6
  208. package/dist/components/ui/pagination/pagination-item.svelte +5 -1
  209. package/dist/components/ui/pagination/pagination-link.svelte +5 -1
  210. package/dist/components/ui/pagination/pagination-next-button.svelte +1 -1
  211. package/dist/components/ui/pagination/pagination-next.svelte +6 -2
  212. package/dist/components/ui/pagination/pagination-prev-button.svelte +1 -1
  213. package/dist/components/ui/pagination/pagination-previous.svelte +11 -3
  214. package/dist/components/ui/popover/popover-content.svelte +1 -1
  215. package/dist/components/ui/popover/popover-description.svelte +6 -1
  216. package/dist/components/ui/popover/popover-header.svelte +6 -1
  217. package/dist/components/ui/popover/popover-title.svelte +6 -1
  218. package/dist/components/ui/popover/popover-trigger.svelte +11 -2
  219. package/dist/components/ui/progress/progress.svelte +1 -1
  220. package/dist/components/ui/radio-group/radio-group-item.svelte +3 -5
  221. package/dist/components/ui/radio-group/radio-group.svelte +1 -1
  222. package/dist/components/ui/range-calendar/range-calendar-cell.svelte +6 -2
  223. package/dist/components/ui/range-calendar/range-calendar-day.svelte +8 -4
  224. package/dist/components/ui/range-calendar/range-calendar-grid-row.svelte +5 -1
  225. package/dist/components/ui/range-calendar/range-calendar-grid.svelte +5 -1
  226. package/dist/components/ui/range-calendar/range-calendar-head-cell.svelte +9 -2
  227. package/dist/components/ui/range-calendar/range-calendar-header.svelte +9 -2
  228. package/dist/components/ui/range-calendar/range-calendar-heading.svelte +10 -2
  229. package/dist/components/ui/range-calendar/range-calendar-month-select.svelte +6 -4
  230. package/dist/components/ui/range-calendar/range-calendar-months.svelte +5 -1
  231. package/dist/components/ui/range-calendar/range-calendar-next-button.svelte +1 -1
  232. package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte +1 -1
  233. package/dist/components/ui/range-calendar/range-calendar-year-select.svelte +6 -4
  234. package/dist/components/ui/range-calendar/range-calendar.svelte +1 -1
  235. package/dist/components/ui/resizable/resizable-handle.svelte +2 -2
  236. package/dist/components/ui/resizable/resizable-pane-group.svelte +4 -1
  237. package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte +5 -2
  238. package/dist/components/ui/scroll-area/scroll-area.svelte +7 -2
  239. package/dist/components/ui/select/select-content.svelte +4 -2
  240. package/dist/components/ui/select/select-group-heading.svelte +1 -1
  241. package/dist/components/ui/select/select-group.svelte +11 -2
  242. package/dist/components/ui/select/select-item.svelte +3 -3
  243. package/dist/components/ui/select/select-label.svelte +1 -1
  244. package/dist/components/ui/select/select-scroll-down-button.svelte +3 -6
  245. package/dist/components/ui/select/select-scroll-up-button.svelte +3 -6
  246. package/dist/components/ui/select/select-separator.svelte +6 -2
  247. package/dist/components/ui/select/select-trigger.svelte +3 -3
  248. package/dist/components/ui/select/select.svelte +5 -1
  249. package/dist/components/ui/separator/separator.svelte +1 -1
  250. package/dist/components/ui/sheet/sheet-content.svelte +3 -3
  251. package/dist/components/ui/sheet/sheet-description.svelte +6 -2
  252. package/dist/components/ui/sheet/sheet-footer.svelte +6 -1
  253. package/dist/components/ui/sheet/sheet-header.svelte +6 -1
  254. package/dist/components/ui/sheet/sheet-overlay.svelte +6 -2
  255. package/dist/components/ui/sheet/sheet-title.svelte +6 -2
  256. package/dist/components/ui/sidebar/sidebar-content.svelte +1 -1
  257. package/dist/components/ui/sidebar/sidebar-footer.svelte +1 -1
  258. package/dist/components/ui/sidebar/sidebar-group-content.svelte +1 -1
  259. package/dist/components/ui/sidebar/sidebar-group.svelte +1 -1
  260. package/dist/components/ui/sidebar/sidebar-header.svelte +1 -1
  261. package/dist/components/ui/sidebar/sidebar-input.svelte +1 -1
  262. package/dist/components/ui/sidebar/sidebar-inset.svelte +1 -4
  263. package/dist/components/ui/sidebar/sidebar-menu-badge.svelte +1 -1
  264. package/dist/components/ui/sidebar/sidebar-menu-button.svelte +1 -2
  265. package/dist/components/ui/sidebar/sidebar-menu-skeleton.svelte +1 -1
  266. package/dist/components/ui/sidebar/sidebar-menu-sub.svelte +1 -4
  267. package/dist/components/ui/sidebar/sidebar-menu.svelte +1 -1
  268. package/dist/components/ui/sidebar/sidebar-provider.svelte +10 -2
  269. package/dist/components/ui/sidebar/sidebar-rail.svelte +1 -1
  270. package/dist/components/ui/sidebar/sidebar-separator.svelte +6 -2
  271. package/dist/components/ui/sidebar/sidebar-trigger.svelte +2 -2
  272. package/dist/components/ui/sidebar/sidebar.svelte +11 -5
  273. package/dist/components/ui/skeleton/skeleton.svelte +1 -1
  274. package/dist/components/ui/slider/slider.svelte +6 -4
  275. package/dist/components/ui/sonner/sonner.svelte +5 -5
  276. package/dist/components/ui/spinner/spinner.svelte +2 -10
  277. package/dist/components/ui/switch/switch.svelte +2 -2
  278. package/dist/components/ui/table/table-caption.svelte +1 -1
  279. package/dist/components/ui/table/table-cell.svelte +7 -7
  280. package/dist/components/ui/table/table-footer.svelte +1 -1
  281. package/dist/components/ui/table/table-head.svelte +7 -10
  282. package/dist/components/ui/table/table-header.svelte +6 -1
  283. package/dist/components/ui/table/table-row.svelte +1 -6
  284. package/dist/components/ui/tabs/tabs-content.svelte +6 -2
  285. package/dist/components/ui/tabs/tabs-trigger.svelte +7 -3
  286. package/dist/components/ui/tabs/tabs.svelte +1 -1
  287. package/dist/components/ui/textarea/textarea.svelte +1 -1
  288. package/dist/components/ui/toggle/index.d.ts +1 -1
  289. package/dist/components/ui/toggle/index.js +1 -1
  290. package/dist/components/ui/toggle-group/toggle-group-item.svelte +1 -1
  291. package/dist/components/ui/toggle-group/toggle-group.svelte +1 -1
  292. package/dist/components/ui/tooltip/tooltip-content.svelte +2 -2
  293. package/dist/data-table/index.d.ts +4 -1
  294. package/dist/data-table/index.js +11 -1
  295. package/package.json +33 -27
  296. package/dist/components/custom/data-table/shad-table-old.svelte.d.ts +0 -9
  297. package/dist/components/custom/data-table/shad-table-old.svelte.js +0 -202
  298. package/dist/components/ui/data-table/data-table.svelte.d.ts +0 -40
  299. package/dist/components/ui/data-table/data-table.svelte.js +0 -110
  300. package/dist/components/ui/data-table/flex-render.svelte +0 -37
  301. package/dist/components/ui/data-table/flex-render.svelte.d.ts +0 -33
  302. package/dist/components/ui/data-table/render-helpers.d.ts +0 -90
  303. package/dist/components/ui/data-table/render-helpers.js +0 -99
@@ -14,7 +14,7 @@
14
14
  bind:ref
15
15
  data-slot={dataSlot}
16
16
  class={cn(
17
- "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
17
+ "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
18
18
  // this is different in shadcn/ui but self-stretch breaks things for us
19
19
  "data-[orientation=vertical]:h-full",
20
20
  className
@@ -4,7 +4,7 @@
4
4
 
5
5
  <script lang="ts">
6
6
  import { Dialog as SheetPrimitive } from "bits-ui";
7
- import XIcon from "@lucide/svelte/icons/x";
7
+ import XIcon from '@lucide/svelte/icons/x';
8
8
  import { Button } from "../button/index.js";
9
9
  import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
10
10
  import SheetOverlay from "./sheet-overlay.svelte";
@@ -35,7 +35,7 @@
35
35
  data-slot="sheet-content"
36
36
  data-side={side}
37
37
  class={cn(
38
- "bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
38
+ "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
39
39
  className
40
40
  )}
41
41
  {...restProps}
@@ -45,7 +45,7 @@
45
45
  <SheetPrimitive.Close data-slot="sheet-close">
46
46
  {#snippet child({ props })}
47
47
  <Button variant="ghost" class="absolute top-3 right-3" size="icon-sm" {...props}>
48
- <XIcon />
48
+ <XIcon />
49
49
  <span class="sr-only">Close</span>
50
50
  </Button>
51
51
  {/snippet}
@@ -2,12 +2,16 @@
2
2
  import { Dialog as SheetPrimitive } from "bits-ui";
3
3
  import { cn } from "../../../utils.js";
4
4
 
5
- let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.DescriptionProps = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ ...restProps
9
+ }: SheetPrimitive.DescriptionProps = $props();
6
10
  </script>
7
11
 
8
12
  <SheetPrimitive.Description
9
13
  bind:ref
10
14
  data-slot="sheet-description"
11
- class={cn("text-muted-foreground text-sm", className)}
15
+ class={cn("text-sm text-muted-foreground", className)}
12
16
  {...restProps}
13
17
  />
@@ -10,6 +10,11 @@
10
10
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11
11
  </script>
12
12
 
13
- <div bind:this={ref} data-slot="sheet-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
13
+ <div
14
+ bind:this={ref}
15
+ data-slot="sheet-footer"
16
+ class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
17
+ {...restProps}
18
+ >
14
19
  {@render children?.()}
15
20
  </div>
@@ -10,6 +10,11 @@
10
10
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
11
11
  </script>
12
12
 
13
- <div bind:this={ref} data-slot="sheet-header" class={cn("flex flex-col gap-0.5 p-4", className)} {...restProps}>
13
+ <div
14
+ bind:this={ref}
15
+ data-slot="sheet-header"
16
+ class={cn("gap-0.5 p-4 flex flex-col", className)}
17
+ {...restProps}
18
+ >
14
19
  {@render children?.()}
15
20
  </div>
@@ -2,12 +2,16 @@
2
2
  import { Dialog as SheetPrimitive } from "bits-ui";
3
3
  import { cn } from "../../../utils.js";
4
4
 
5
- let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.OverlayProps = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ ...restProps
9
+ }: SheetPrimitive.OverlayProps = $props();
6
10
  </script>
7
11
 
8
12
  <SheetPrimitive.Overlay
9
13
  bind:ref
10
14
  data-slot="sheet-overlay"
11
- class={cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs", className)}
15
+ class={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
12
16
  {...restProps}
13
17
  />
@@ -2,12 +2,16 @@
2
2
  import { Dialog as SheetPrimitive } from "bits-ui";
3
3
  import { cn } from "../../../utils.js";
4
4
 
5
- let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.TitleProps = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ ...restProps
9
+ }: SheetPrimitive.TitleProps = $props();
6
10
  </script>
7
11
 
8
12
  <SheetPrimitive.Title
9
13
  bind:ref
10
14
  data-slot="sheet-title"
11
- class={cn("text-foreground text-base font-medium", className)}
15
+ class={cn("text-base font-medium text-foreground", className)}
12
16
  {...restProps}
13
17
  />
@@ -15,7 +15,7 @@
15
15
  data-slot="sidebar-content"
16
16
  data-sidebar="content"
17
17
  class={cn(
18
- "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
18
+ "no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden",
19
19
  className
20
20
  )}
21
21
  {...restProps}
@@ -14,7 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-footer"
16
16
  data-sidebar="footer"
17
- class={cn("flex flex-col gap-2 p-2", className)}
17
+ class={cn("gap-2 p-2 flex flex-col", className)}
18
18
  {...restProps}
19
19
  >
20
20
  {@render children?.()}
@@ -14,7 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-group-content"
16
16
  data-sidebar="group-content"
17
- class={cn("w-full text-sm", className)}
17
+ class={cn("text-sm w-full", className)}
18
18
  {...restProps}
19
19
  >
20
20
  {@render children?.()}
@@ -14,7 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-group"
16
16
  data-sidebar="group"
17
- class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
17
+ class={cn("p-2 relative flex w-full min-w-0 flex-col", className)}
18
18
  {...restProps}
19
19
  >
20
20
  {@render children?.()}
@@ -14,7 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-header"
16
16
  data-sidebar="header"
17
- class={cn("flex flex-col gap-2 p-2", className)}
17
+ class={cn("gap-2 p-2 flex flex-col", className)}
18
18
  {...restProps}
19
19
  >
20
20
  {@render children?.()}
@@ -16,6 +16,6 @@
16
16
  bind:value
17
17
  data-slot="sidebar-input"
18
18
  data-sidebar="input"
19
- class={cn("bg-background h-8 w-full shadow-none", className)}
19
+ class={cn("h-8 w-full bg-background shadow-none", className)}
20
20
  {...restProps}
21
21
  />
@@ -13,10 +13,7 @@
13
13
  <main
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-inset"
16
- class={cn(
17
- "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
18
- className
19
- )}
16
+ class={cn("bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col", className)}
20
17
  {...restProps}
21
18
  >
22
19
  {@render children?.()}
@@ -15,7 +15,7 @@
15
15
  data-slot="sidebar-menu-badge"
16
16
  data-sidebar="menu-badge"
17
17
  class={cn(
18
- "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
18
+ "pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden",
19
19
  className
20
20
  )}
21
21
  {...restProps}
@@ -6,8 +6,7 @@
6
6
  variants: {
7
7
  variant: {
8
8
  default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
9
- outline:
10
- "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
9
+ outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
11
10
  },
12
11
  size: {
13
12
  default: "h-8 text-sm",
@@ -21,7 +21,7 @@
21
21
  bind:this={ref}
22
22
  data-slot="sidebar-menu-skeleton"
23
23
  data-sidebar="menu-skeleton"
24
- class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
24
+ class={cn("h-8 gap-2 rounded-md px-2 flex items-center", className)}
25
25
  {...restProps}
26
26
  >
27
27
  {#if showIcon}
@@ -14,10 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-menu-sub"
16
16
  data-sidebar="menu-sub"
17
- class={cn(
18
- "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
19
- className
20
- )}
17
+ class={cn("mx-3.5 translate-x-px gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col", className)}
21
18
  {...restProps}
22
19
  >
23
20
  {@render children?.()}
@@ -14,7 +14,7 @@
14
14
  bind:this={ref}
15
15
  data-slot="sidebar-menu"
16
16
  data-sidebar="menu"
17
- class={cn("flex w-full min-w-0 flex-col gap-0", className)}
17
+ class={cn("gap-0 flex w-full min-w-0 flex-col", className)}
18
18
  {...restProps}
19
19
  >
20
20
  {@render children?.()}
@@ -1,7 +1,12 @@
1
1
  <script lang="ts">
2
2
  import * as Tooltip from "../tooltip/index.js";
3
3
  import { cn, type WithElementRef } from "../../../utils.js";
4
- import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./constants.js";
4
+ import {
5
+ SIDEBAR_COOKIE_MAX_AGE,
6
+ SIDEBAR_COOKIE_NAME,
7
+ SIDEBAR_WIDTH,
8
+ SIDEBAR_WIDTH_ICON,
9
+ } from "./constants.js";
5
10
  import { setSidebar } from "./context.svelte.js";
6
11
  import type { HTMLAttributes } from "svelte/elements";
7
12
 
@@ -36,7 +41,10 @@
36
41
  <div
37
42
  data-slot="sidebar-wrapper"
38
43
  style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
39
- class={cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className)}
44
+ class={cn(
45
+ "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
46
+ className
47
+ )}
40
48
  bind:this={ref}
41
49
  {...restProps}
42
50
  >
@@ -25,7 +25,7 @@
25
25
  "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
26
26
  "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
27
27
  "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
28
- "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
28
+ "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
29
29
  "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
30
30
  "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
31
31
  className
@@ -3,13 +3,17 @@
3
3
  import { cn } from "../../../utils.js";
4
4
  import type { ComponentProps } from "svelte";
5
5
 
6
- let { ref = $bindable(null), class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
6
+ let {
7
+ ref = $bindable(null),
8
+ class: className,
9
+ ...restProps
10
+ }: ComponentProps<typeof Separator> = $props();
7
11
  </script>
8
12
 
9
13
  <Separator
10
14
  bind:ref
11
15
  data-slot="sidebar-separator"
12
16
  data-sidebar="separator"
13
- class={cn("bg-sidebar-border mx-2 w-auto", className)}
17
+ class={cn("mx-2 bg-sidebar-border w-auto", className)}
14
18
  {...restProps}
15
19
  />
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
2
+ import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
3
3
  import { Button } from "../button/index.js";
4
4
  import { cn } from "../../../utils.js";
5
5
  import { useSidebar } from "./context.svelte.js";
@@ -31,6 +31,6 @@
31
31
  }}
32
32
  {...restProps}
33
33
  >
34
- <PanelLeftIcon />
34
+ <PanelLeftIcon />
35
35
  <span class="sr-only">Toggle Sidebar</span>
36
36
  </Button>
@@ -24,7 +24,10 @@
24
24
 
25
25
  {#if collapsible === "none"}
26
26
  <div
27
- class={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
27
+ class={cn(
28
+ "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
29
+ className
30
+ )}
28
31
  bind:this={ref}
29
32
  {...restProps}
30
33
  >
@@ -37,7 +40,10 @@
37
40
  data-sidebar="sidebar"
38
41
  data-slot="sidebar"
39
42
  data-mobile="true"
40
- class={cn("bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", className)}
43
+ class={cn(
44
+ "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
45
+ className
46
+ )}
41
47
  style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
42
48
  {side}
43
49
  >
@@ -53,7 +59,7 @@
53
59
  {:else}
54
60
  <div
55
61
  bind:this={ref}
56
- class="group peer text-sidebar-foreground hidden md:block"
62
+ class="group peer hidden text-sidebar-foreground md:block"
57
63
  data-state={sidebar.state}
58
64
  data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
59
65
  data-variant={variant}
@@ -64,7 +70,7 @@
64
70
  <div
65
71
  data-slot="sidebar-gap"
66
72
  class={cn(
67
- "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
73
+ "transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
68
74
  "group-data-[collapsible=offcanvas]:w-0",
69
75
  "group-data-[side=right]:rotate-180",
70
76
  variant === "floating" || variant === "inset"
@@ -90,7 +96,7 @@
90
96
  <div
91
97
  data-sidebar="sidebar"
92
98
  data-slot="sidebar-inner"
93
- class="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
99
+ class="bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col"
94
100
  >
95
101
  {@render children?.()}
96
102
  </div>
@@ -12,6 +12,6 @@
12
12
  <div
13
13
  bind:this={ref}
14
14
  data-slot="skeleton"
15
- class={cn("bg-muted animate-pulse rounded-md", className)}
15
+ class={cn("rounded-md bg-muted animate-pulse", className)}
16
16
  {...restProps}
17
17
  ></div>
@@ -21,7 +21,7 @@ get along, so we shut typescript up by casting `value` to `never`.
21
21
  data-slot="slider"
22
22
  {orientation}
23
23
  class={cn(
24
- "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
24
+ "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
25
25
  className
26
26
  )}
27
27
  {...restProps}
@@ -31,19 +31,21 @@ get along, so we shut typescript up by casting `value` to `never`.
31
31
  data-slot="slider-track"
32
32
  data-orientation={orientation}
33
33
  class={cn(
34
- "bg-muted bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-horizontal:w-full data-vertical:h-full data-vertical:h-full data-vertical:w-1"
34
+ "rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden bg-muted data-horizontal:w-full data-vertical:h-full"
35
35
  )}
36
36
  >
37
37
  <SliderPrimitive.Range
38
38
  data-slot="slider-range"
39
- class={cn("bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full")}
39
+ class={cn(
40
+ "bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
41
+ )}
40
42
  />
41
43
  </span>
42
44
  {#each thumbItems as thumb (thumb.index)}
43
45
  <SliderPrimitive.Thumb
44
46
  data-slot="slider-thumb"
45
47
  index={thumb.index}
46
- class="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
48
+ class="relative size-3 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
47
49
  />
48
50
  {/each}
49
51
  {/snippet}
@@ -1,11 +1,11 @@
1
1
  <script lang="ts">
2
2
  import { mode } from "mode-watcher";
3
3
  import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
4
- import Loader2Icon from "@lucide/svelte/icons/loader-2";
5
- import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
6
- import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
7
- import InfoIcon from "@lucide/svelte/icons/info";
8
- import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
4
+ import Loader2Icon from '@lucide/svelte/icons/loader-2';
5
+ import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
6
+ import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
7
+ import InfoIcon from '@lucide/svelte/icons/info';
8
+ import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
9
9
 
10
10
  let { ...restProps }: SonnerProps = $props();
11
11
  </script>
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import Loader2Icon from "@lucide/svelte/icons/loader-2";
2
+ import Loader2Icon from '@lucide/svelte/icons/loader-2';
3
3
  import { cn } from "../../../utils.js";
4
4
  import type { SVGAttributes } from "svelte/elements";
5
5
 
@@ -15,12 +15,4 @@
15
15
  }: SVGAttributes<SVGSVGElement> = $props();
16
16
  </script>
17
17
 
18
- <Loader2Icon
19
- {role}
20
- name={name === null ? undefined : name}
21
- color={color === null ? undefined : color}
22
- stroke={stroke === null ? undefined : stroke}
23
- aria-label={ariaLabel}
24
- class={cn("size-4 animate-spin", className)}
25
- {...restProps}
26
- />
18
+ <Loader2Icon {role} name={name === null ? undefined : name} color={color === null ? undefined : color} stroke={stroke === null ? undefined : stroke} aria-label={ariaLabel} class={cn("size-4 animate-spin", className)} {...restProps} />
@@ -19,13 +19,13 @@
19
19
  data-slot="switch"
20
20
  data-size={size}
21
21
  class={cn(
22
- "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
22
+ "shrink-0 rounded-full border border-transparent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
23
23
  className
24
24
  )}
25
25
  {...restProps}
26
26
  >
27
27
  <SwitchPrimitive.Thumb
28
28
  data-slot="switch-thumb"
29
- class="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:data-[state=checked]:translate-x-[calc(-100%)]"
29
+ class="rounded-full bg-background group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
30
30
  />
31
31
  </SwitchPrimitive.Root>
@@ -13,7 +13,7 @@
13
13
  <caption
14
14
  bind:this={ref}
15
15
  data-slot="table-caption"
16
- class={cn("text-muted-foreground mt-4 text-sm", className)}
16
+ class={cn("mt-4 text-sm text-muted-foreground", className)}
17
17
  {...restProps}
18
18
  >
19
19
  {@render children?.()}
@@ -2,14 +2,14 @@
2
2
  import { cn, type WithElementRef } from "../../../utils.js";
3
3
  import type { HTMLTdAttributes } from "svelte/elements";
4
4
 
5
- let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLTdAttributes> = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ children,
9
+ ...restProps
10
+ }: WithElementRef<HTMLTdAttributes> = $props();
6
11
  </script>
7
12
 
8
- <td
9
- bind:this={ref}
10
- data-slot="table-cell"
11
- class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
12
- {...restProps}
13
- >
13
+ <td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
14
14
  {@render children?.()}
15
15
  </td>
@@ -13,7 +13,7 @@
13
13
  <tfoot
14
14
  bind:this={ref}
15
15
  data-slot="table-footer"
16
- class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
16
+ class={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
17
17
  {...restProps}
18
18
  >
19
19
  {@render children?.()}
@@ -2,17 +2,14 @@
2
2
  import { cn, type WithElementRef } from "../../../utils.js";
3
3
  import type { HTMLThAttributes } from "svelte/elements";
4
4
 
5
- let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLThAttributes> = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ children,
9
+ ...restProps
10
+ }: WithElementRef<HTMLThAttributes> = $props();
6
11
  </script>
7
12
 
8
- <th
9
- bind:this={ref}
10
- data-slot="table-head"
11
- class={cn(
12
- "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
13
- className
14
- )}
15
- {...restProps}
16
- >
13
+ <th bind:this={ref} data-slot="table-head" class={cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
17
14
  {@render children?.()}
18
15
  </th>
@@ -10,6 +10,11 @@
10
10
  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
11
11
  </script>
12
12
 
13
- <thead bind:this={ref} data-slot="table-header" class={cn("[&_tr]:border-b", className)} {...restProps}>
13
+ <thead
14
+ bind:this={ref}
15
+ data-slot="table-header"
16
+ class={cn("[&_tr]:border-b", className)}
17
+ {...restProps}
18
+ >
14
19
  {@render children?.()}
15
20
  </thead>
@@ -10,11 +10,6 @@
10
10
  }: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
11
11
  </script>
12
12
 
13
- <tr
14
- bind:this={ref}
15
- data-slot="table-row"
16
- class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
17
- {...restProps}
18
- >
13
+ <tr bind:this={ref} data-slot="table-row" class={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...restProps}>
19
14
  {@render children?.()}
20
15
  </tr>
@@ -2,12 +2,16 @@
2
2
  import { Tabs as TabsPrimitive } from "bits-ui";
3
3
  import { cn } from "../../../utils.js";
4
4
 
5
- let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ContentProps = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ ...restProps
9
+ }: TabsPrimitive.ContentProps = $props();
6
10
  </script>
7
11
 
8
12
  <TabsPrimitive.Content
9
13
  bind:ref
10
14
  data-slot="tabs-content"
11
- class={cn("flex-1 text-sm outline-none", className)}
15
+ class={cn("text-sm flex-1 outline-none", className)}
12
16
  {...restProps}
13
17
  />
@@ -2,17 +2,21 @@
2
2
  import { Tabs as TabsPrimitive } from "bits-ui";
3
3
  import { cn } from "../../../utils.js";
4
4
 
5
- let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.TriggerProps = $props();
5
+ let {
6
+ ref = $bindable(null),
7
+ class: className,
8
+ ...restProps
9
+ }: TabsPrimitive.TriggerProps = $props();
6
10
  </script>
7
11
 
8
12
  <TabsPrimitive.Trigger
9
13
  bind:ref
10
14
  data-slot="tabs-trigger"
11
15
  class={cn(
12
- "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
16
+ "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
13
17
  "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
14
18
  "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
15
- "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
19
+ "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
16
20
  className
17
21
  )}
18
22
  {...restProps}