@customafk/lunas-ui 0.0.26 → 0.0.27

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 (364) hide show
  1. package/dist/{alert-dialog-D-oR0YW3.cjs → alert-dialog-26JyobJb.cjs} +1 -1
  2. package/dist/{alert-dialog-D-oR0YW3.cjs.map → alert-dialog-26JyobJb.cjs.map} +1 -1
  3. package/dist/{alert-dialog-CNHyP_A9.js → alert-dialog-Dv0cgymS.js} +1 -1
  4. package/dist/{alert-dialog-CNHyP_A9.js.map → alert-dialog-Dv0cgymS.js.map} +1 -1
  5. package/dist/{button-BmBtMriU.d.ts → button-CPBLm_02.d.ts} +5 -5
  6. package/dist/{button-tCnJHt8O.d.cts → button-ghXW1WTr.d.cts} +5 -5
  7. package/dist/{calendar-CbuOOMpK.js → calendar-B66UT_fu.js} +1 -1
  8. package/dist/{calendar-CbuOOMpK.js.map → calendar-B66UT_fu.js.map} +1 -1
  9. package/dist/{calendar-B8IKzrdN.cjs → calendar-DXegnGRJ.cjs} +1 -1
  10. package/dist/{calendar-B8IKzrdN.cjs.map → calendar-DXegnGRJ.cjs.map} +1 -1
  11. package/dist/{command-Dr2XmKV6.d.cts → command-CE_Qcgo7.d.ts} +12 -12
  12. package/dist/{command-Dvq-HZwH.d.ts → command-CiEjoEnP.d.cts} +12 -12
  13. package/dist/{command-TFZwJmux.js → command-Dbkg10QA.js} +2 -2
  14. package/dist/{command-TFZwJmux.js.map → command-Dbkg10QA.js.map} +1 -1
  15. package/dist/{command-CoB5R5FI.cjs → command-IL3ogESu.cjs} +2 -2
  16. package/dist/{command-CoB5R5FI.cjs.map → command-IL3ogESu.cjs.map} +1 -1
  17. package/dist/data-display/empty.d.cts +2 -2
  18. package/dist/data-display/statistic.d.cts +2 -2
  19. package/dist/data-display/statistic.d.ts +2 -2
  20. package/dist/{dialog-CSDDiHKO.js → dialog-BEdMA5Lp.js} +1 -1
  21. package/dist/{dialog-CSDDiHKO.js.map → dialog-BEdMA5Lp.js.map} +1 -1
  22. package/dist/{dialog-C-DYoapJ.d.ts → dialog-Bw_T5aco.d.cts} +12 -12
  23. package/dist/{dialog-_Cgij9NP.cjs → dialog-C4oHnJNN.cjs} +1 -1
  24. package/dist/{dialog-_Cgij9NP.cjs.map → dialog-C4oHnJNN.cjs.map} +1 -1
  25. package/dist/{dialog-CA0E_tNX.d.cts → dialog-CoH1pTBH.d.ts} +12 -12
  26. package/dist/dialogs/confirm-dialog.cjs +1 -1
  27. package/dist/dialogs/confirm-dialog.js +1 -1
  28. package/dist/dialogs/detail-dialog/component/sidebar.d.cts +4 -4
  29. package/dist/dialogs/detail-dialog/component/sidebar.d.ts +28 -28
  30. package/dist/dialogs/detail-dialog/index.cjs +1 -1
  31. package/dist/dialogs/detail-dialog/index.js +1 -1
  32. package/dist/dialogs/error-dialog.cjs +1 -1
  33. package/dist/dialogs/error-dialog.js +1 -1
  34. package/dist/dialogs/form-dialog.cjs +1 -1
  35. package/dist/dialogs/form-dialog.d.cts +2 -2
  36. package/dist/dialogs/form-dialog.d.ts +2 -2
  37. package/dist/dialogs/form-dialog.js +1 -1
  38. package/dist/dialogs/loading-dialog.cjs +1 -1
  39. package/dist/dialogs/loading-dialog.js +1 -1
  40. package/dist/{error-dialog-D5R5le-W.cjs → error-dialog-C0PDn-pj.cjs} +2 -2
  41. package/dist/{error-dialog-D5R5le-W.cjs.map → error-dialog-C0PDn-pj.cjs.map} +1 -1
  42. package/dist/{error-dialog-Q99thrSD.js → error-dialog-CCdQ8zbQ.js} +2 -2
  43. package/dist/{error-dialog-Q99thrSD.js.map → error-dialog-CCdQ8zbQ.js.map} +1 -1
  44. package/dist/{form-wrapper-CY-stRaQ.cjs → form-wrapper-Cd8c5MIL.cjs} +2 -2
  45. package/dist/{form-wrapper-CY-stRaQ.cjs.map → form-wrapper-Cd8c5MIL.cjs.map} +1 -1
  46. package/dist/{form-wrapper-C2xlvWx0.js → form-wrapper-DntbFqN1.js} +2 -2
  47. package/dist/{form-wrapper-C2xlvWx0.js.map → form-wrapper-DntbFqN1.js.map} +1 -1
  48. package/dist/forms/combobox-field.cjs +1 -1
  49. package/dist/forms/combobox-field.d.cts +2 -2
  50. package/dist/forms/combobox-field.d.ts +2 -2
  51. package/dist/forms/combobox-field.js +1 -1
  52. package/dist/forms/date-field.cjs +1 -1
  53. package/dist/forms/date-field.d.cts +2 -2
  54. package/dist/forms/date-field.d.ts +2 -2
  55. package/dist/forms/date-field.js +1 -1
  56. package/dist/forms/form-wrapper.cjs +1 -1
  57. package/dist/forms/form-wrapper.d.cts +2 -2
  58. package/dist/forms/form-wrapper.d.ts +2 -2
  59. package/dist/forms/form-wrapper.js +1 -1
  60. package/dist/forms/multi-select-field.cjs +1 -1
  61. package/dist/forms/multi-select-field.cjs.map +1 -1
  62. package/dist/forms/multi-select-field.d.cts +2 -2
  63. package/dist/forms/multi-select-field.d.ts +2 -2
  64. package/dist/forms/multi-select-field.js +1 -1
  65. package/dist/forms/number-field.d.cts +2 -2
  66. package/dist/forms/number-field.d.ts +2 -2
  67. package/dist/forms/password-field.d.cts +2 -2
  68. package/dist/forms/password-field.d.ts +2 -2
  69. package/dist/forms/select-field.d.cts +2 -2
  70. package/dist/forms/select-field.d.ts +2 -2
  71. package/dist/forms/switch-field.d.cts +2 -2
  72. package/dist/forms/switch-field.d.ts +2 -2
  73. package/dist/forms/text-field.d.cts +2 -2
  74. package/dist/forms/text-field.d.ts +2 -2
  75. package/dist/forms/textarea-field.d.cts +2 -2
  76. package/dist/forms/textarea-field.d.ts +2 -2
  77. package/dist/{input-CjNcnHb_.d.ts → input-CUDclgoU.d.ts} +3 -3
  78. package/dist/{input-BsXm0_Iq.d.cts → input-y_n-XGys.d.cts} +3 -3
  79. package/dist/layouts/app-layout/index.d.cts +5 -5
  80. package/dist/layouts/app-layout/index.d.ts +3 -3
  81. package/dist/layouts/flex.d.cts +4 -4
  82. package/dist/layouts/flex.d.ts +4 -4
  83. package/dist/layouts/main/index.d.cts +4 -4
  84. package/dist/layouts/main/index.d.ts +4 -4
  85. package/dist/{multi-select-Cjvm4tK5.cjs → multi-select-3yxD9gbY.cjs} +2 -2
  86. package/dist/{multi-select-Cjvm4tK5.cjs.map → multi-select-3yxD9gbY.cjs.map} +1 -1
  87. package/dist/{multi-select-D0bZVOnm.js → multi-select-Cb07NlA7.js} +2 -2
  88. package/dist/{multi-select-D0bZVOnm.js.map → multi-select-Cb07NlA7.js.map} +1 -1
  89. package/dist/{popover-CTFp7ZXi.js → popover-CqAD7HNo.js} +1 -1
  90. package/dist/{popover-CTFp7ZXi.js.map → popover-CqAD7HNo.js.map} +1 -1
  91. package/dist/{popover-DCcPvdz2.cjs → popover-Dd0acCEk.cjs} +1 -1
  92. package/dist/{popover-DCcPvdz2.cjs.map → popover-Dd0acCEk.cjs.map} +1 -1
  93. package/dist/{separator-5FdzRGaJ.d.ts → separator-BLYi41aC.d.ts} +3 -3
  94. package/dist/{separator-DpxrpK_H.d.cts → separator-ClGBPiYE.d.cts} +3 -3
  95. package/dist/table/index.d.cts +2 -2
  96. package/dist/table/index.d.ts +2 -2
  97. package/dist/{toggle-Cx9H5u3p.d.cts → toggle-BWQWsKMA.d.ts} +4 -4
  98. package/dist/{toggle-DH9IssyE.d.ts → toggle-DnGvFJh8.d.cts} +4 -4
  99. package/dist/{tooltip-Djh_dcy5.d.ts → tooltip-Bk8VwHdM.d.ts} +6 -6
  100. package/dist/{tooltip-BAtWdJyX.d.cts → tooltip-cisSpCHG.d.cts} +6 -6
  101. package/dist/typography/paragraph.d.cts +2 -2
  102. package/dist/typography/paragraph.d.ts +2 -2
  103. package/dist/typography/title.d.cts +2 -2
  104. package/dist/typography/title.d.ts +2 -2
  105. package/dist/ui/alert-dialog.cjs +1 -1
  106. package/dist/ui/alert-dialog.d.cts +12 -12
  107. package/dist/ui/alert-dialog.d.ts +12 -12
  108. package/dist/ui/alert-dialog.js +1 -1
  109. package/dist/ui/alert.d.cts +6 -6
  110. package/dist/ui/alert.d.ts +6 -6
  111. package/dist/ui/aspect-ratio.d.cts +2 -2
  112. package/dist/ui/aspect-ratio.d.ts +2 -2
  113. package/dist/ui/avatar.d.cts +4 -4
  114. package/dist/ui/avatar.d.ts +4 -4
  115. package/dist/ui/badge.d.cts +2 -2
  116. package/dist/ui/badge.d.ts +4 -4
  117. package/dist/ui/breadcrumb.d.cts +8 -8
  118. package/dist/ui/breadcrumb.d.ts +8 -8
  119. package/dist/ui/button.d.cts +1 -1
  120. package/dist/ui/button.d.ts +1 -1
  121. package/dist/ui/calendar.cjs +1 -1
  122. package/dist/ui/calendar.d.cts +4 -4
  123. package/dist/ui/calendar.d.ts +4 -4
  124. package/dist/ui/calendar.js +1 -1
  125. package/dist/ui/card.d.cts +8 -8
  126. package/dist/ui/card.d.ts +8 -8
  127. package/dist/ui/carousel.d.cts +7 -7
  128. package/dist/ui/carousel.d.ts +7 -7
  129. package/dist/ui/collapsible.d.cts +4 -4
  130. package/dist/ui/collapsible.d.ts +4 -4
  131. package/dist/ui/command.cjs +1 -1
  132. package/dist/ui/command.d.cts +2 -2
  133. package/dist/ui/command.d.ts +2 -2
  134. package/dist/ui/command.js +1 -1
  135. package/dist/ui/context-menu.d.cts +16 -16
  136. package/dist/ui/context-menu.d.ts +16 -16
  137. package/dist/ui/dialog.cjs +1 -1
  138. package/dist/ui/dialog.d.cts +1 -1
  139. package/dist/ui/dialog.d.ts +1 -1
  140. package/dist/ui/dialog.js +1 -1
  141. package/dist/ui/dropdown-menu.d.cts +16 -16
  142. package/dist/ui/dropdown-menu.d.ts +16 -16
  143. package/dist/ui/file-uploader.d.cts +2 -2
  144. package/dist/ui/file-uploader.d.ts +2 -2
  145. package/dist/ui/form.d.cts +7 -7
  146. package/dist/ui/form.d.ts +7 -7
  147. package/dist/ui/hover-card.d.cts +4 -4
  148. package/dist/ui/hover-card.d.ts +4 -4
  149. package/dist/ui/input-otp.d.cts +5 -5
  150. package/dist/ui/input-otp.d.ts +5 -5
  151. package/dist/ui/input.d.cts +1 -1
  152. package/dist/ui/input.d.ts +1 -1
  153. package/dist/ui/inputs/search-input.d.cts +1 -1
  154. package/dist/ui/inputs/search-input.d.ts +3 -3
  155. package/dist/ui/label.d.cts +2 -2
  156. package/dist/ui/label.d.ts +2 -2
  157. package/dist/ui/menubar.d.cts +17 -17
  158. package/dist/ui/menubar.d.ts +17 -17
  159. package/dist/ui/multi-select.cjs +1 -1
  160. package/dist/ui/multi-select.d.cts +2 -2
  161. package/dist/ui/multi-select.d.ts +2 -2
  162. package/dist/ui/multi-select.js +1 -1
  163. package/dist/ui/navigation-menu.d.cts +11 -11
  164. package/dist/ui/navigation-menu.d.ts +9 -9
  165. package/dist/ui/pagination.d.cts +9 -9
  166. package/dist/ui/pagination.d.ts +9 -9
  167. package/dist/ui/popover.cjs +1 -1
  168. package/dist/ui/popover.d.cts +5 -5
  169. package/dist/ui/popover.d.ts +5 -5
  170. package/dist/ui/popover.js +1 -1
  171. package/dist/ui/progress.d.cts +2 -2
  172. package/dist/ui/progress.d.ts +2 -2
  173. package/dist/ui/radio-group.d.cts +3 -3
  174. package/dist/ui/radio-group.d.ts +3 -3
  175. package/dist/ui/resizable.d.cts +4 -4
  176. package/dist/ui/resizable.d.ts +4 -4
  177. package/dist/ui/scroll-area.d.ts +3 -3
  178. package/dist/ui/select.d.cts +11 -11
  179. package/dist/ui/select.d.ts +11 -11
  180. package/dist/ui/separator.d.cts +1 -1
  181. package/dist/ui/separator.d.ts +1 -1
  182. package/dist/ui/sheet.d.cts +9 -9
  183. package/dist/ui/sheet.d.ts +9 -9
  184. package/dist/ui/sidebar.d.cts +30 -30
  185. package/dist/ui/sidebar.d.ts +30 -30
  186. package/dist/ui/skeleton.d.cts +2 -2
  187. package/dist/ui/skeleton.d.ts +2 -2
  188. package/dist/ui/slider.d.cts +2 -2
  189. package/dist/ui/slider.d.ts +2 -2
  190. package/dist/ui/sonner.d.cts +2 -2
  191. package/dist/ui/sonner.d.ts +2 -2
  192. package/dist/ui/switch.d.cts +2 -2
  193. package/dist/ui/switch.d.ts +2 -2
  194. package/dist/ui/table.d.cts +9 -9
  195. package/dist/ui/table.d.ts +9 -9
  196. package/dist/ui/tabs.d.cts +5 -5
  197. package/dist/ui/tabs.d.ts +5 -5
  198. package/dist/ui/textarea.d.cts +2 -2
  199. package/dist/ui/textarea.d.ts +2 -2
  200. package/dist/ui/toggle-group.d.cts +4 -4
  201. package/dist/ui/toggle-group.d.ts +4 -4
  202. package/dist/ui/toggle.d.cts +1 -1
  203. package/dist/ui/toggle.d.ts +1 -1
  204. package/dist/ui/tooltip.d.cts +1 -1
  205. package/dist/ui/tooltip.d.ts +1 -1
  206. package/package.json +2 -2
  207. package/styles/base.css +29 -0
  208. package/styles/loader.css +113 -0
  209. package/styles/theme.css +104 -0
  210. package/styles/typography.css +6 -0
  211. package/packages/components/cards/simple-card.tsx +0 -23
  212. package/packages/components/data-display/country.tsx +0 -53
  213. package/packages/components/data-display/data-list.tsx +0 -29
  214. package/packages/components/data-display/date-tooltip.tsx +0 -23
  215. package/packages/components/data-display/date.tsx +0 -157
  216. package/packages/components/data-display/empty.tsx +0 -13
  217. package/packages/components/data-display/name.tsx +0 -23
  218. package/packages/components/data-display/phone-number.tsx +0 -14
  219. package/packages/components/data-display/role-badge.tsx +0 -29
  220. package/packages/components/data-display/statistic.tsx +0 -139
  221. package/packages/components/dialogs/confirm-dialog.tsx +0 -44
  222. package/packages/components/dialogs/detail-dialog/component/header.tsx +0 -10
  223. package/packages/components/dialogs/detail-dialog/component/main.tsx +0 -35
  224. package/packages/components/dialogs/detail-dialog/component/sidebar.tsx +0 -618
  225. package/packages/components/dialogs/detail-dialog/component/wrapper.tsx +0 -15
  226. package/packages/components/dialogs/detail-dialog/index.tsx +0 -91
  227. package/packages/components/dialogs/error-dialog.tsx +0 -34
  228. package/packages/components/dialogs/form-dialog.tsx +0 -74
  229. package/packages/components/dialogs/loading-dialog.tsx +0 -20
  230. package/packages/components/forms/combobox-field.tsx +0 -104
  231. package/packages/components/forms/date-field.tsx +0 -62
  232. package/packages/components/forms/form-wrapper.tsx +0 -120
  233. package/packages/components/forms/multi-select-field.tsx +0 -56
  234. package/packages/components/forms/number-field.tsx +0 -54
  235. package/packages/components/forms/password-field.tsx +0 -38
  236. package/packages/components/forms/select-field.tsx +0 -58
  237. package/packages/components/forms/switch-field.tsx +0 -40
  238. package/packages/components/forms/text-field.tsx +0 -73
  239. package/packages/components/forms/textarea-field.tsx +0 -45
  240. package/packages/components/index.tsx +0 -0
  241. package/packages/components/layouts/app-layout/index.tsx +0 -74
  242. package/packages/components/layouts/app-layout/sidebar.tsx +0 -663
  243. package/packages/components/layouts/flex.tsx +0 -99
  244. package/packages/components/layouts/main/content.tsx +0 -11
  245. package/packages/components/layouts/main/header.tsx +0 -41
  246. package/packages/components/layouts/main/index.tsx +0 -3
  247. package/packages/components/layouts/main/wrapper.tsx +0 -5
  248. package/packages/components/table/data-table-pagination.tsx +0 -70
  249. package/packages/components/table/data-table.tsx +0 -241
  250. package/packages/components/table/index.tsx +0 -107
  251. package/packages/components/typography/paragraph.tsx +0 -29
  252. package/packages/components/typography/title.tsx +0 -31
  253. package/packages/components/ui/alert-dialog.tsx +0 -99
  254. package/packages/components/ui/alert.tsx +0 -44
  255. package/packages/components/ui/aspect-ratio.tsx +0 -11
  256. package/packages/components/ui/avatar.tsx +0 -25
  257. package/packages/components/ui/badge.tsx +0 -57
  258. package/packages/components/ui/breadcrumb.tsx +0 -74
  259. package/packages/components/ui/button.tsx +0 -205
  260. package/packages/components/ui/buttons/add-new.tsx +0 -19
  261. package/packages/components/ui/buttons/edit.tsx +0 -14
  262. package/packages/components/ui/buttons/refresh.tsx +0 -19
  263. package/packages/components/ui/buttons/trash.tsx +0 -14
  264. package/packages/components/ui/buttons/upload-image.tsx +0 -25
  265. package/packages/components/ui/calendar.tsx +0 -141
  266. package/packages/components/ui/card.tsx +0 -44
  267. package/packages/components/ui/carousel.tsx +0 -187
  268. package/packages/components/ui/checkbox.tsx +0 -34
  269. package/packages/components/ui/collapsible.tsx +0 -17
  270. package/packages/components/ui/command.tsx +0 -138
  271. package/packages/components/ui/context-menu.tsx +0 -196
  272. package/packages/components/ui/dialog.tsx +0 -119
  273. package/packages/components/ui/dropdown-menu.tsx +0 -249
  274. package/packages/components/ui/file-uploader.tsx +0 -314
  275. package/packages/components/ui/form.tsx +0 -104
  276. package/packages/components/ui/hover-card.tsx +0 -32
  277. package/packages/components/ui/input-otp.tsx +0 -67
  278. package/packages/components/ui/input.tsx +0 -59
  279. package/packages/components/ui/inputs/number-input.tsx +0 -317
  280. package/packages/components/ui/inputs/password-input.tsx +0 -29
  281. package/packages/components/ui/inputs/search-input.tsx +0 -24
  282. package/packages/components/ui/label.tsx +0 -26
  283. package/packages/components/ui/menubar.tsx +0 -212
  284. package/packages/components/ui/multi-select.tsx +0 -626
  285. package/packages/components/ui/navigation-menu.tsx +0 -124
  286. package/packages/components/ui/pagination.tsx +0 -70
  287. package/packages/components/ui/popover.tsx +0 -49
  288. package/packages/components/ui/progress.tsx +0 -19
  289. package/packages/components/ui/radio-group.tsx +0 -36
  290. package/packages/components/ui/resizable.tsx +0 -47
  291. package/packages/components/ui/scroll-area.tsx +0 -35
  292. package/packages/components/ui/select.tsx +0 -199
  293. package/packages/components/ui/separator.tsx +0 -25
  294. package/packages/components/ui/sheet.tsx +0 -119
  295. package/packages/components/ui/sidebar.tsx +0 -675
  296. package/packages/components/ui/skeleton.tsx +0 -8
  297. package/packages/components/ui/slider.tsx +0 -45
  298. package/packages/components/ui/sonner.tsx +0 -40
  299. package/packages/components/ui/switch.tsx +0 -46
  300. package/packages/components/ui/table.tsx +0 -66
  301. package/packages/components/ui/tabs.tsx +0 -53
  302. package/packages/components/ui/textarea.tsx +0 -46
  303. package/packages/components/ui/toggle-group.tsx +0 -63
  304. package/packages/components/ui/toggle.tsx +0 -34
  305. package/packages/components/ui/tooltip.tsx +0 -53
  306. package/packages/constants.tsx +0 -45
  307. package/packages/hooks/use-callback-ref.ts +0 -22
  308. package/packages/hooks/use-controllable-state.ts +0 -58
  309. package/packages/hooks/use-mobile.ts +0 -19
  310. package/packages/index.css +0 -133
  311. package/packages/lib/utils.ts +0 -24
  312. package/packages/stories/1.Guideline.mdx +0 -3
  313. package/packages/stories/2.Colors.mdx +0 -145
  314. package/packages/stories/3.Pypography.mdx +0 -51
  315. package/packages/stories/cards/simple-card.stories.tsx +0 -24
  316. package/packages/stories/data-display/data-list.stories.tsx +0 -22
  317. package/packages/stories/data-display/empty.stories.tsx +0 -13
  318. package/packages/stories/data-display/form-dialog.stories.tsx +0 -27
  319. package/packages/stories/data-display/name.stories.tsx +0 -25
  320. package/packages/stories/data-display/phone-number.stories.tsx +0 -17
  321. package/packages/stories/data-display/statistic.stories.tsx +0 -41
  322. package/packages/stories/dialogs/confirm-dialog.stories.tsx +0 -26
  323. package/packages/stories/dialogs/detail-dialog.stories.tsx +0 -34
  324. package/packages/stories/dialogs/error-dialog.stories.tsx +0 -27
  325. package/packages/stories/dialogs/loading-dialog.stories.tsx +0 -16
  326. package/packages/stories/forms/combobox-field.stories.tsx +0 -38
  327. package/packages/stories/forms/form-wrapper.stories.tsx +0 -59
  328. package/packages/stories/forms/multi-select-field.stories.tsx +0 -42
  329. package/packages/stories/forms/number-field.stories.tsx +0 -35
  330. package/packages/stories/forms/select-field.stories.tsx +0 -39
  331. package/packages/stories/forms/switch-field.stories.tsx +0 -36
  332. package/packages/stories/forms/text-field.stories.tsx +0 -41
  333. package/packages/stories/forms/textarea-field.stories.tsx +0 -34
  334. package/packages/stories/layouts/app-layout.stories.tsx +0 -49
  335. package/packages/stories/typography/paragraph.stories.tsx +0 -45
  336. package/packages/stories/typography/title.stories.tsx +0 -39
  337. package/packages/stories/ui/alert-dialog.stories.tsx +0 -49
  338. package/packages/stories/ui/alert.stories.tsx +0 -63
  339. package/packages/stories/ui/aspect-ratio.stories.tsx +0 -22
  340. package/packages/stories/ui/badge.stories.tsx +0 -170
  341. package/packages/stories/ui/breadcrumb.stories.tsx +0 -172
  342. package/packages/stories/ui/button.stories.tsx +0 -181
  343. package/packages/stories/ui/card.stories.tsx +0 -58
  344. package/packages/stories/ui/checkbox.stories.tsx +0 -48
  345. package/packages/stories/ui/command.stories.tsx +0 -58
  346. package/packages/stories/ui/dialog.stories.tsx +0 -55
  347. package/packages/stories/ui/dropdown-menu.stories.tsx +0 -89
  348. package/packages/stories/ui/file-uploader.stories.tsx +0 -18
  349. package/packages/stories/ui/input.stories.tsx +0 -38
  350. package/packages/stories/ui/label.stories.tsx +0 -17
  351. package/packages/stories/ui/multi-select.stories.tsx +0 -29
  352. package/packages/stories/ui/popover.stories.tsx +0 -52
  353. package/packages/stories/ui/progress.stories.tsx +0 -17
  354. package/packages/stories/ui/radio-group.stories.tsx +0 -31
  355. package/packages/stories/ui/select.stories.tsx +0 -31
  356. package/packages/stories/ui/separator.stories.tsx +0 -31
  357. package/packages/stories/ui/sheet.stories.tsx +0 -50
  358. package/packages/stories/ui/skeleton.stories.tsx +0 -27
  359. package/packages/stories/ui/switch.stories.tsx +0 -21
  360. package/packages/stories/ui/table.stories.tsx +0 -82
  361. package/packages/stories/ui/tabs.stories.tsx +0 -70
  362. package/packages/stories/ui/textarea.stories.tsx +0 -15
  363. package/packages/stories/ui/toaster.stories.tsx +0 -87
  364. package/packages/types.ts +0 -50
@@ -1,675 +0,0 @@
1
- 'use client'
2
- import React from 'react'
3
- import { Slot as SlotPrimitive } from 'radix-ui'
4
- import { cva, type VariantProps } from 'class-variance-authority'
5
- import { MenuIcon } from 'lucide-react'
6
-
7
- import { Button } from '@/components/ui/button'
8
- import { Input } from '@/components/ui/input'
9
- import { Separator } from '@/components/ui/separator'
10
- import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet'
11
- import { Skeleton } from '@/components/ui/skeleton'
12
- import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
13
- import { useIsMobile } from '@/hooks/use-mobile'
14
- import { cn } from '@/lib/utils'
15
-
16
- const SIDEBAR_COOKIE_NAME = 'sidebar_state'
17
- const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
18
- const SIDEBAR_WIDTH = '16rem'
19
- const SIDEBAR_WIDTH_MOBILE = '18rem'
20
- const SIDEBAR_WIDTH_ICON = '3rem'
21
- const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
22
-
23
- type SidebarContextProps = {
24
- state: 'expanded' | 'collapsed'
25
- open: boolean
26
- setOpen: (open: boolean) => void
27
- openMobile: boolean
28
- setOpenMobile: (open: boolean) => void
29
- isMobile: boolean
30
- toggleSidebar: () => void
31
- }
32
-
33
- const SidebarContext = React.createContext<SidebarContextProps | null>(null)
34
-
35
- function useSidebar() {
36
- const context = React.useContext(SidebarContext)
37
- if (!context) {
38
- throw new Error('useSidebar must be used within a SidebarProvider.')
39
- }
40
-
41
- return context
42
- }
43
-
44
- function SidebarProvider({
45
- defaultOpen = true,
46
- open: openProp,
47
- onOpenChange: setOpenProp,
48
- className,
49
- style,
50
- children,
51
- ...props
52
- }: React.ComponentProps<'div'> & {
53
- defaultOpen?: boolean
54
- open?: boolean
55
- onOpenChange?: (open: boolean) => void
56
- }) {
57
- const isMobile = useIsMobile()
58
- const [openMobile, setOpenMobile] = React.useState(false)
59
-
60
- // This is the internal state of the sidebar.
61
- // We use openProp and setOpenProp for control from outside the component.
62
- const [_open, _setOpen] = React.useState(defaultOpen)
63
- const open = openProp ?? _open
64
- const setOpen = React.useCallback(
65
- (value: boolean | ((value: boolean) => boolean)) => {
66
- const openState = typeof value === 'function' ? value(open) : value
67
- if (setOpenProp) {
68
- setOpenProp(openState)
69
- } else {
70
- _setOpen(openState)
71
- }
72
-
73
- // This sets the cookie to keep the sidebar state.
74
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
75
- },
76
- [setOpenProp, open],
77
- )
78
-
79
- // Helper to toggle the sidebar.
80
- const toggleSidebar = React.useCallback(() => {
81
- return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
82
- }, [isMobile, setOpen, setOpenMobile])
83
-
84
- // Adds a keyboard shortcut to toggle the sidebar.
85
- React.useEffect(() => {
86
- const handleKeyDown = (event: KeyboardEvent) => {
87
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
88
- event.preventDefault()
89
- toggleSidebar()
90
- }
91
- }
92
-
93
- window.addEventListener('keydown', handleKeyDown)
94
- return () => window.removeEventListener('keydown', handleKeyDown)
95
- }, [toggleSidebar])
96
-
97
- // We add a state so that we can do data-state="expanded" or "collapsed".
98
- // This makes it easier to style the sidebar with Tailwind classes.
99
- const state = open ? 'expanded' : 'collapsed'
100
-
101
- const contextValue = React.useMemo<SidebarContextProps>(
102
- () => ({
103
- state,
104
- isMobile,
105
-
106
- toggleSidebar,
107
-
108
- open,
109
- setOpen,
110
-
111
- openMobile,
112
- setOpenMobile,
113
- }),
114
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
115
- )
116
-
117
- return (
118
- <SidebarContext.Provider value={contextValue}>
119
- <TooltipProvider delayDuration={0}>
120
- <div
121
- data-slot="sidebar-wrapper"
122
- style={
123
- {
124
- '--sidebar-width': SIDEBAR_WIDTH,
125
- '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
126
- ...style,
127
- } as React.CSSProperties
128
- }
129
- className={cn('group/sidebar-wrapper', 'has-data-[variant=inset]:bg-sidebar', 'flex min-h-svh w-full', className)}
130
- {...props}
131
- >
132
- {children}
133
- </div>
134
- </TooltipProvider>
135
- </SidebarContext.Provider>
136
- )
137
- }
138
-
139
- function Sidebar({
140
- side = 'left',
141
- variant = 'sidebar',
142
- collapsible = 'offcanvas',
143
- className,
144
- children,
145
- ...props
146
- }: React.ComponentProps<'div'> & {
147
- side?: 'left' | 'right'
148
- variant?: 'sidebar' | 'floating' | 'inset'
149
- collapsible?: 'offcanvas' | 'icon' | 'none'
150
- }) {
151
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
152
-
153
- if (collapsible === 'none') {
154
- return (
155
- <aside
156
- data-slot="sidebar"
157
- className={cn('bg-sidebar', 'text-sidebar-foreground', 'flex h-full w-(--sidebar-width) flex-col', 'border-r', className)}
158
- {...props}
159
- >
160
- {children}
161
- </aside>
162
- )
163
- }
164
-
165
- if (isMobile) {
166
- return (
167
- <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
168
- <SheetContent
169
- data-sidebar="sidebar"
170
- data-slot="sidebar"
171
- data-mobile="true"
172
- className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
173
- style={
174
- {
175
- '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
176
- } as React.CSSProperties
177
- }
178
- side={side}
179
- >
180
- <SheetHeader className="sr-only">
181
- <SheetTitle>Sidebar</SheetTitle>
182
- <SheetDescription>Displays the mobile sidebar.</SheetDescription>
183
- </SheetHeader>
184
- <div className="flex h-full w-full flex-col">{children}</div>
185
- </SheetContent>
186
- </Sheet>
187
- )
188
- }
189
-
190
- return (
191
- <aside
192
- className="group peer text-sidebar-foreground bg-card hidden md:block"
193
- data-state={state}
194
- data-collapsible={state === 'collapsed' ? collapsible : ''}
195
- data-variant={variant}
196
- data-side={side}
197
- data-slot="sidebar"
198
- >
199
- {/* This is what handles the sidebar gap on desktop */}
200
- <div
201
- data-slot="sidebar-gap"
202
- className={cn(
203
- 'relative',
204
- 'bg-transparent',
205
- 'transition-[width] duration-200 ease-linear',
206
- 'h-14 w-(--sidebar-width)',
207
- 'group-data-[collapsible=offcanvas]:w-0',
208
- 'group-data-[side=right]:rotate-180',
209
- variant === 'floating' || variant === 'inset'
210
- ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
211
- : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
212
- )}
213
- />
214
- <div
215
- data-slot="sidebar-container"
216
- className={cn(
217
- 'hidden md:flex',
218
- 'fixed inset-y-0 top-14 z-10',
219
- 'h-[calc(100svh-3.5rem)] w-(--sidebar-width)',
220
- 'border-r',
221
- 'transition-[left,right,width] duration-200 ease-linear',
222
- side === 'left' && 'left-0',
223
- side === 'left' && 'group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',
224
- side === 'right' && 'right-0',
225
- side === 'right' && 'group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
226
- // Adjust the padding for floating and inset variants.
227
- variant === 'floating' || variant === 'inset'
228
- ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
229
- : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
230
- className,
231
- )}
232
- {...props}
233
- >
234
- <div
235
- data-sidebar="sidebar"
236
- data-slot="sidebar-inner"
237
- className={cn(
238
- 'flex size-full flex-col',
239
- 'group-data-[variant=floating]:rounded-lg',
240
- 'group-data-[variant=floating]:border',
241
- 'group-data-[variant=floating]:border-sidebar-border',
242
- 'group-data-[variant=floating]:shadow-sm',
243
- )}
244
- >
245
- {children}
246
- </div>
247
- </div>
248
- </aside>
249
- )
250
- }
251
-
252
- function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
253
- const { toggleSidebar } = useSidebar()
254
-
255
- return (
256
- <Button
257
- data-sidebar="trigger"
258
- data-slot="sidebar-trigger"
259
- variant="ghost"
260
- size="icon"
261
- className={cn('size-10 rounded-full', className)}
262
- onClick={(event) => {
263
- onClick?.(event)
264
- toggleSidebar()
265
- }}
266
- {...props}
267
- >
268
- <MenuIcon className="!size-6" />
269
- <span className="sr-only">Toggle Sidebar</span>
270
- </Button>
271
- )
272
- }
273
-
274
- function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
275
- const { toggleSidebar } = useSidebar()
276
-
277
- return (
278
- <button
279
- data-sidebar="rail"
280
- data-slot="sidebar-rail"
281
- aria-label="Toggle Sidebar"
282
- tabIndex={-1}
283
- onClick={toggleSidebar}
284
- title="Toggle Sidebar"
285
- className={cn(
286
- 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex',
287
- 'after:absolute',
288
- 'after:inset-y-0',
289
- 'after:left-1/2',
290
- 'after:w-0.5',
291
- 'group-data-[side=left]:-right-4',
292
- 'group-data-[side=right]:left-0',
293
- 'in-data-[side=left]:cursor-w-resize',
294
- 'in-data-[side=right]:cursor-e-resize',
295
- '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize',
296
- '[[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
297
- 'hover:after:bg-sidebar-border',
298
- 'hover:group-data-[collapsible=offcanvas]:bg-sidebar',
299
- 'group-data-[collapsible=offcanvas]:translate-x-0',
300
- 'group-data-[collapsible=offcanvas]:after:left-full',
301
- '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
302
- '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
303
- className,
304
- )}
305
- {...props}
306
- />
307
- )
308
- }
309
-
310
- function SidebarInset({ className, children, ...props }: React.ComponentProps<'main'>) {
311
- return (
312
- <main data-slot="sidebar-inset" className={cn('w-full', 'relative', 'flex flex-1 flex-col', className)} {...props}>
313
- <div className="h-14 w-full" />
314
- <div className={cn('flex-1 inset-shadow-sm')}>{children}</div>
315
- </main>
316
- )
317
- }
318
-
319
- function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
320
- return <Input data-slot="sidebar-input" data-sidebar="input" className={cn('bg-background h-8 w-full shadow-none', className)} {...props} />
321
- }
322
-
323
- function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
324
- return <div data-slot="sidebar-header" data-sidebar="header" className={cn('flex flex-col gap-2 p-2', className)} {...props} />
325
- }
326
-
327
- function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
328
- return <div data-slot="sidebar-footer" data-sidebar="footer" className={cn('flex flex-col gap-2 p-2', className)} {...props} />
329
- }
330
-
331
- function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
332
- return <Separator data-slot="sidebar-separator" data-sidebar="separator" className={cn('bg-sidebar-border mx-2 w-auto', className)} {...props} />
333
- }
334
-
335
- function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
336
- return (
337
- <div
338
- data-slot="sidebar-content"
339
- data-sidebar="content"
340
- className={cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}
341
- {...props}
342
- />
343
- )
344
- }
345
-
346
- function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
347
- return <div data-slot="sidebar-group" data-sidebar="group" className={cn('relative flex w-full min-w-0 flex-col p-2', className)} {...props} />
348
- }
349
-
350
- function SidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {
351
- const Comp = asChild ? SlotPrimitive.Slot : 'div'
352
-
353
- return (
354
- <Comp
355
- data-slot="sidebar-group-label"
356
- data-sidebar="group-label"
357
- className={cn(
358
- 'text-sidebar-foreground/70',
359
- 'ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear',
360
- 'focus-visible:ring-2',
361
- '[&>svg]:size-4',
362
- '[&>svg]:shrink-0',
363
- 'group-data-[collapsible=icon]:-mt-8',
364
- 'group-data-[collapsible=icon]:opacity-0',
365
- className,
366
- )}
367
- {...props}
368
- />
369
- )
370
- }
371
-
372
- function SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {
373
- const Comp = asChild ? SlotPrimitive.Slot : 'button'
374
-
375
- return (
376
- <Comp
377
- data-slot="sidebar-group-action"
378
- data-sidebar="group-action"
379
- className={cn(
380
- 'text-sidebar-foreground ring-sidebar-ring',
381
- 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform',
382
- 'focus-visible:ring-2',
383
- 'hover:bg-sidebar-accent',
384
- 'hover:text-sidebar-accent-foreground',
385
- '[&>svg]:size-4',
386
- '[&>svg]:shrink-0',
387
- // Increases the hit area of the button on mobile.
388
- 'after:absolute after:-inset-2 md:after:hidden',
389
- 'group-data-[collapsible=icon]:hidden',
390
- className,
391
- )}
392
- {...props}
393
- />
394
- )
395
- }
396
-
397
- function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
398
- return <div data-slot="sidebar-group-content" data-sidebar="group-content" className={cn('w-full text-sm', className)} {...props} />
399
- }
400
-
401
- function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
402
- return <ul data-slot="sidebar-menu" data-sidebar="menu" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />
403
- }
404
-
405
- function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
406
- return <li data-slot="sidebar-menu-item" data-sidebar="menu-item" className={cn('group/menu-item relative', className)} {...props} />
407
- }
408
-
409
- const sidebarMenuButtonVariants = cva(
410
- [
411
- 'peer/menu-button cursor-pointer flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding]',
412
- 'hover:bg-sidebar-accent',
413
- 'hover:text-sidebar-accent-foreground',
414
- 'focus-visible:ring-2',
415
- 'active:bg-sidebar-accent',
416
- 'active:text-sidebar-accent-foreground',
417
- 'disabled:pointer-events-none',
418
- 'disabled:opacity-50',
419
- 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',
420
- 'aria-disabled:pointer-events-none',
421
- 'aria-disabled:opacity-50',
422
- 'data-[active=true]:bg-sidebar-accent',
423
- 'data-[active=true]:font-medium',
424
- 'data-[active=true]:text-sidebar-accent-foreground',
425
- 'data-[state=open]:hover:bg-sidebar-accent',
426
- 'data-[state=open]:hover:text-sidebar-accent-foreground',
427
- 'group-data-[collapsible=icon]:size-8!',
428
- 'group-data-[collapsible=icon]:p-2!',
429
- '[&>span:last-child]:truncate',
430
- '[&>svg]:size-4',
431
- '[&>svg]:shrink-0',
432
- ],
433
- {
434
- variants: {
435
- variant: {
436
- default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
437
- outline:
438
- 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
439
- },
440
- size: {
441
- default: 'h-8 text-sm',
442
- sm: 'h-7 text-xs',
443
- lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
444
- },
445
- },
446
- defaultVariants: {
447
- variant: 'default',
448
- size: 'default',
449
- },
450
- },
451
- )
452
-
453
- function SidebarMenuButton({
454
- asChild = false,
455
- isActive = false,
456
- variant = 'default',
457
- size = 'default',
458
- tooltip,
459
- className,
460
- ...props
461
- }: React.ComponentProps<'button'> & {
462
- asChild?: boolean
463
- isActive?: boolean
464
- tooltip?: string | React.ComponentProps<typeof TooltipContent>
465
- } & VariantProps<typeof sidebarMenuButtonVariants>) {
466
- const Comp = asChild ? SlotPrimitive.Slot : 'button'
467
- const { isMobile, state } = useSidebar()
468
-
469
- const button = (
470
- <Comp
471
- data-slot="sidebar-menu-button"
472
- data-sidebar="menu-button"
473
- data-size={size}
474
- data-active={isActive}
475
- className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
476
- {...props}
477
- />
478
- )
479
-
480
- if (!tooltip) {
481
- return button
482
- }
483
-
484
- if (typeof tooltip === 'string') {
485
- tooltip = {
486
- children: tooltip,
487
- }
488
- }
489
-
490
- return (
491
- <Tooltip>
492
- <TooltipTrigger asChild>{button}</TooltipTrigger>
493
- <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile} {...tooltip} />
494
- </Tooltip>
495
- )
496
- }
497
-
498
- function SidebarMenuAction({
499
- className,
500
- asChild = false,
501
- showOnHover = false,
502
- ...props
503
- }: React.ComponentProps<'button'> & {
504
- asChild?: boolean
505
- showOnHover?: boolean
506
- }) {
507
- const Comp = asChild ? SlotPrimitive.Slot : 'button'
508
-
509
- return (
510
- <Comp
511
- data-slot="sidebar-menu-action"
512
- data-sidebar="menu-action"
513
- className={cn(
514
- 'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform',
515
- 'focus-visible:ring-2',
516
- '[&>svg]:size-4',
517
- '[&>svg]:shrink-0',
518
- // Increases the hit area of the button on mobile.
519
- 'after:absolute after:-inset-2 md:after:hidden',
520
- 'peer-data-[size=sm]/menu-button:top-1',
521
- 'peer-data-[size=default]/menu-button:top-1.5',
522
- 'peer-data-[size=lg]/menu-button:top-2.5',
523
- 'group-data-[collapsible=icon]:hidden',
524
- showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
525
- showOnHover && 'group-focus-within/menu-item:opacity-100',
526
- showOnHover && 'group-hover/menu-item:opacity-100',
527
- showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',
528
- className,
529
- )}
530
- {...props}
531
- />
532
- )
533
- }
534
-
535
- function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
536
- return (
537
- <div
538
- data-slot="sidebar-menu-badge"
539
- data-sidebar="menu-badge"
540
- className={cn(
541
- 'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
542
- 'peer-hover/menu-button:text-sidebar-accent-foreground',
543
- 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
544
- 'peer-data-[size=sm]/menu-button:top-1',
545
- 'peer-data-[size=default]/menu-button:top-1.5',
546
- 'peer-data-[size=lg]/menu-button:top-2.5',
547
- 'group-data-[collapsible=icon]:hidden',
548
- className,
549
- )}
550
- {...props}
551
- />
552
- )
553
- }
554
-
555
- function SidebarMenuSkeleton({
556
- className,
557
- showIcon = false,
558
- ...props
559
- }: React.ComponentProps<'div'> & {
560
- showIcon?: boolean
561
- }) {
562
- // Random width between 50 to 90%.
563
- const width = React.useMemo(() => {
564
- return `${Math.floor(Math.random() * 40) + 50}%`
565
- }, [])
566
-
567
- return (
568
- <div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>
569
- {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
570
- <Skeleton
571
- className="h-4 max-w-(--skeleton-width) flex-1"
572
- data-sidebar="menu-skeleton-text"
573
- style={
574
- {
575
- '--skeleton-width': width,
576
- } as React.CSSProperties
577
- }
578
- />
579
- </div>
580
- )
581
- }
582
-
583
- function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
584
- return (
585
- <ul
586
- data-slot="sidebar-menu-sub"
587
- data-sidebar="menu-sub"
588
- className={cn(
589
- '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',
590
- 'group-data-[collapsible=icon]:hidden',
591
- className,
592
- )}
593
- {...props}
594
- />
595
- )
596
- }
597
-
598
- function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
599
- return <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" className={cn('group/menu-sub-item relative', className)} {...props} />
600
- }
601
-
602
- function SidebarMenuSubButton({
603
- asChild = false,
604
- size = 'md',
605
- isActive = false,
606
- className,
607
- ...props
608
- }: React.ComponentProps<'a'> & {
609
- asChild?: boolean
610
- size?: 'sm' | 'md'
611
- isActive?: boolean
612
- }) {
613
- const Comp = asChild ? SlotPrimitive.Slot : 'a'
614
-
615
- return (
616
- <Comp
617
- data-slot="sidebar-menu-sub-button"
618
- data-sidebar="menu-sub-button"
619
- data-size={size}
620
- data-active={isActive}
621
- className={cn(
622
- 'text-sidebar-foreground ring-sidebar-ring',
623
- 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',
624
- 'hover:bg-sidebar-accent',
625
- 'hover:text-sidebar-accent-foreground',
626
- 'active:bg-sidebar-accent',
627
- 'active:text-sidebar-accent-foreground',
628
- 'focus-visible:ring-2',
629
- 'disabled:pointer-events-none',
630
- 'disabled:opacity-50',
631
- 'aria-disabled:pointer-events-none',
632
- 'aria-disabled:opacity-50',
633
- '[&>span:last-child]:truncate',
634
- '[&>svg]:size-4',
635
- '[&>svg]:shrink-0',
636
- '[&>svg]:text-sidebar-accent-foreground',
637
- 'data-[active=true]:bg-sidebar-accent',
638
- 'data-[active=true]:text-sidebar-accent-foreground',
639
- size === 'sm' && 'text-xs',
640
- size === 'md' && 'text-sm',
641
- 'group-data-[collapsible=icon]:hidden',
642
- className,
643
- )}
644
- {...props}
645
- />
646
- )
647
- }
648
-
649
- export {
650
- Sidebar,
651
- SidebarContent,
652
- SidebarFooter,
653
- SidebarGroup,
654
- SidebarGroupAction,
655
- SidebarGroupContent,
656
- SidebarGroupLabel,
657
- SidebarHeader,
658
- SidebarInput,
659
- SidebarInset,
660
- SidebarMenu,
661
- SidebarMenuAction,
662
- SidebarMenuBadge,
663
- SidebarMenuButton,
664
- SidebarMenuItem,
665
- SidebarMenuSkeleton,
666
- SidebarMenuSub,
667
- SidebarMenuSubButton,
668
- SidebarMenuSubItem,
669
- SidebarProvider,
670
- SidebarRail,
671
- SidebarSeparator,
672
- SidebarTrigger,
673
- // eslint-disable-next-line react-refresh/only-export-components
674
- useSidebar,
675
- }
@@ -1,8 +0,0 @@
1
- 'use client'
2
- import { cn } from '@/lib/utils'
3
-
4
- function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
5
- return <div data-slot="skeleton" className={cn('bg-accent-muted animate-pulse rounded-md', className)} {...props} />
6
- }
7
-
8
- export { Skeleton }