@k3-universe/react-kit 0.0.27 → 0.0.29

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 (422) hide show
  1. package/.storybook/main.ts +1 -1
  2. package/.storybook/preview.ts +18 -10
  3. package/biome.json +10 -0
  4. package/dist/index.js +2319 -1227
  5. package/dist/kit/builder/auth/AuthProvider.d.ts +36 -0
  6. package/dist/kit/builder/auth/AuthProvider.d.ts.map +1 -0
  7. package/dist/kit/builder/auth/adapter.d.ts +14 -0
  8. package/dist/kit/builder/auth/adapter.d.ts.map +1 -0
  9. package/dist/kit/builder/auth/client-adapters.d.ts +149 -0
  10. package/dist/kit/builder/auth/client-adapters.d.ts.map +1 -0
  11. package/dist/kit/builder/auth/components.d.ts +119 -0
  12. package/dist/kit/builder/auth/components.d.ts.map +1 -0
  13. package/dist/kit/builder/auth/hooks.d.ts +158 -0
  14. package/dist/kit/builder/auth/hooks.d.ts.map +1 -0
  15. package/dist/kit/builder/auth/index.d.ts +11 -0
  16. package/dist/kit/builder/auth/index.d.ts.map +1 -0
  17. package/dist/kit/builder/auth/permission-checker.d.ts +31 -0
  18. package/dist/kit/builder/auth/permission-checker.d.ts.map +1 -0
  19. package/dist/kit/builder/auth/storage.d.ts +17 -0
  20. package/dist/kit/builder/auth/storage.d.ts.map +1 -0
  21. package/dist/kit/builder/auth/token-manager.d.ts +9 -0
  22. package/dist/kit/builder/auth/token-manager.d.ts.map +1 -0
  23. package/dist/kit/builder/auth/types.d.ts +183 -0
  24. package/dist/kit/builder/auth/types.d.ts.map +1 -0
  25. package/dist/kit/builder/data-table/components/DataTable.d.ts +2 -1
  26. package/dist/kit/builder/data-table/components/DataTable.d.ts.map +1 -1
  27. package/dist/kit/builder/data-table/components/DataTableColumnHeader.d.ts +2 -2
  28. package/dist/kit/builder/data-table/components/DataTableColumnHeader.d.ts.map +1 -1
  29. package/dist/kit/builder/data-table/components/DataTablePagination.d.ts +2 -1
  30. package/dist/kit/builder/data-table/components/DataTablePagination.d.ts.map +1 -1
  31. package/dist/kit/builder/data-table/components/DataTableViewOptions.d.ts +1 -1
  32. package/dist/kit/builder/data-table/components/DataTableViewOptions.d.ts.map +1 -1
  33. package/dist/kit/builder/data-table/types.d.ts.map +1 -1
  34. package/dist/kit/builder/dialog/index.d.ts +1 -1
  35. package/dist/kit/builder/dialog/index.d.ts.map +1 -1
  36. package/dist/kit/builder/dialog/provider.d.ts +0 -1
  37. package/dist/kit/builder/dialog/provider.d.ts.map +1 -1
  38. package/dist/kit/builder/form/components/FormBuilder.d.ts.map +1 -1
  39. package/dist/kit/builder/form/components/FormBuilderActions.d.ts.map +1 -1
  40. package/dist/kit/builder/form/components/FormBuilderContext.d.ts.map +1 -1
  41. package/dist/kit/builder/form/components/FormBuilderField.d.ts +1 -1
  42. package/dist/kit/builder/form/components/FormBuilderField.d.ts.map +1 -1
  43. package/dist/kit/builder/form/components/fields/ArrayField.d.ts +1 -1
  44. package/dist/kit/builder/form/components/fields/ArrayField.d.ts.map +1 -1
  45. package/dist/kit/builder/form/components/fields/AutocompleteField.d.ts +1 -1
  46. package/dist/kit/builder/form/components/fields/AutocompleteField.d.ts.map +1 -1
  47. package/dist/kit/builder/form/components/fields/CheckboxField.d.ts +1 -1
  48. package/dist/kit/builder/form/components/fields/CheckboxField.d.ts.map +1 -1
  49. package/dist/kit/builder/form/components/fields/DateField.d.ts +1 -1
  50. package/dist/kit/builder/form/components/fields/DateField.d.ts.map +1 -1
  51. package/dist/kit/builder/form/components/fields/DatePickerField.d.ts +1 -1
  52. package/dist/kit/builder/form/components/fields/DatePickerField.d.ts.map +1 -1
  53. package/dist/kit/builder/form/components/fields/DateRangePickerField.d.ts +1 -1
  54. package/dist/kit/builder/form/components/fields/DateRangePickerField.d.ts.map +1 -1
  55. package/dist/kit/builder/form/components/fields/DateTimePickerField.d.ts +1 -1
  56. package/dist/kit/builder/form/components/fields/DateTimePickerField.d.ts.map +1 -1
  57. package/dist/kit/builder/form/components/fields/DateTimeRangePickerField.d.ts +1 -1
  58. package/dist/kit/builder/form/components/fields/DateTimeRangePickerField.d.ts.map +1 -1
  59. package/dist/kit/builder/form/components/fields/FileField.d.ts +1 -1
  60. package/dist/kit/builder/form/components/fields/FileField.d.ts.map +1 -1
  61. package/dist/kit/builder/form/components/fields/MonthPickerField.d.ts +1 -1
  62. package/dist/kit/builder/form/components/fields/MonthPickerField.d.ts.map +1 -1
  63. package/dist/kit/builder/form/components/fields/MonthRangePickerField.d.ts +1 -1
  64. package/dist/kit/builder/form/components/fields/MonthRangePickerField.d.ts.map +1 -1
  65. package/dist/kit/builder/form/components/fields/NumberField.d.ts +1 -1
  66. package/dist/kit/builder/form/components/fields/NumberField.d.ts.map +1 -1
  67. package/dist/kit/builder/form/components/fields/ObjectField.d.ts.map +1 -1
  68. package/dist/kit/builder/form/components/fields/RadioField.d.ts +1 -1
  69. package/dist/kit/builder/form/components/fields/RadioField.d.ts.map +1 -1
  70. package/dist/kit/builder/form/components/fields/SelectField.d.ts +1 -1
  71. package/dist/kit/builder/form/components/fields/SelectField.d.ts.map +1 -1
  72. package/dist/kit/builder/form/components/fields/SwitchField.d.ts +1 -1
  73. package/dist/kit/builder/form/components/fields/SwitchField.d.ts.map +1 -1
  74. package/dist/kit/builder/form/components/fields/TextField.d.ts +1 -1
  75. package/dist/kit/builder/form/components/fields/TextField.d.ts.map +1 -1
  76. package/dist/kit/builder/form/components/fields/TextareaField.d.ts +1 -1
  77. package/dist/kit/builder/form/components/fields/TextareaField.d.ts.map +1 -1
  78. package/dist/kit/builder/form/components/fields/TimePickerField.d.ts +1 -1
  79. package/dist/kit/builder/form/components/fields/TimePickerField.d.ts.map +1 -1
  80. package/dist/kit/builder/form/components/fields/TimeRangePickerField.d.ts +1 -1
  81. package/dist/kit/builder/form/components/fields/TimeRangePickerField.d.ts.map +1 -1
  82. package/dist/kit/builder/form/components/fields/index.d.ts.map +1 -1
  83. package/dist/kit/builder/form/components/fields/types.d.ts.map +1 -1
  84. package/dist/kit/builder/form/components/sectionNodes.d.ts.map +1 -1
  85. package/dist/kit/builder/form/hooks/useFormBuilder.d.ts.map +1 -1
  86. package/dist/kit/builder/form/types.d.ts.map +1 -1
  87. package/dist/kit/builder/form/utils/section-factories.d.ts.map +1 -1
  88. package/dist/kit/builder/page/Page.d.ts.map +1 -1
  89. package/dist/kit/builder/page/index.d.ts.map +1 -1
  90. package/dist/kit/builder/section/SectionBuilder.d.ts +1 -1
  91. package/dist/kit/builder/section/SectionBuilder.d.ts.map +1 -1
  92. package/dist/kit/builder/section/SectionContainer.d.ts +14 -0
  93. package/dist/kit/builder/section/SectionContainer.d.ts.map +1 -0
  94. package/dist/kit/builder/stack-dialog/context.d.ts.map +1 -1
  95. package/dist/kit/builder/stack-dialog/hooks.d.ts.map +1 -1
  96. package/dist/kit/builder/stack-dialog/index.d.ts +3 -3
  97. package/dist/kit/builder/stack-dialog/index.d.ts.map +1 -1
  98. package/dist/kit/builder/stack-dialog/provider.d.ts.map +1 -1
  99. package/dist/kit/builder/stack-dialog/renderer.d.ts.map +1 -1
  100. package/dist/kit/builder/stack-dialog/types.d.ts +1 -1
  101. package/dist/kit/builder/stack-dialog/types.d.ts.map +1 -1
  102. package/dist/kit/components/autocomplete/Autocomplete.d.ts +1 -1
  103. package/dist/kit/components/autocomplete/Autocomplete.d.ts.map +1 -1
  104. package/dist/kit/components/autocomplete/types.d.ts.map +1 -1
  105. package/dist/kit/components/datepicker/DatePicker.d.ts.map +1 -1
  106. package/dist/kit/components/datepicker/DateRangePicker.d.ts.map +1 -1
  107. package/dist/kit/components/datetimepicker/DateTimePicker.d.ts.map +1 -1
  108. package/dist/kit/components/datetimepicker/DateTimeRangePicker.d.ts.map +1 -1
  109. package/dist/kit/components/datetimepicker/index.d.ts.map +1 -1
  110. package/dist/kit/components/fileuploader/FileUploader.d.ts.map +1 -1
  111. package/dist/kit/components/fileuploader/types.d.ts +2 -2
  112. package/dist/kit/components/forminfo/FormInfoError.d.ts.map +1 -1
  113. package/dist/kit/components/login/Login.d.ts +1 -1
  114. package/dist/kit/components/login/Login.d.ts.map +1 -1
  115. package/dist/kit/components/monthpicker/MonthInput.d.ts.map +1 -1
  116. package/dist/kit/components/monthpicker/MonthPicker.d.ts.map +1 -1
  117. package/dist/kit/components/monthpicker/MonthRangeInput.d.ts.map +1 -1
  118. package/dist/kit/components/monthpicker/MonthRangePicker.d.ts.map +1 -1
  119. package/dist/kit/components/timepicker/TimePicker.d.ts.map +1 -1
  120. package/dist/kit/components/timepicker/TimeRangePicker.d.ts.map +1 -1
  121. package/dist/kit/components/timepicker/index.d.ts.map +1 -1
  122. package/dist/kit/layouts/admin/components/AdminLayout.d.ts.map +1 -1
  123. package/dist/kit/layouts/admin/components/ThemeToggle.d.ts.map +1 -1
  124. package/dist/kit/layouts/admin/hooks/menu.d.ts.map +1 -1
  125. package/dist/kit/layouts/admin/providers/AdminMenuProvider.d.ts +1 -1
  126. package/dist/kit/layouts/admin/providers/AdminMenuProvider.d.ts.map +1 -1
  127. package/dist/shadcn/hooks/use-mobile.d.ts.map +1 -1
  128. package/dist/shadcn/ui/accordion.d.ts +2 -2
  129. package/dist/shadcn/ui/accordion.d.ts.map +1 -1
  130. package/dist/shadcn/ui/alert-dialog.d.ts +4 -4
  131. package/dist/shadcn/ui/alert-dialog.d.ts.map +1 -1
  132. package/dist/shadcn/ui/alert.d.ts +4 -4
  133. package/dist/shadcn/ui/alert.d.ts.map +1 -1
  134. package/dist/shadcn/ui/aspect-ratio.d.ts +1 -1
  135. package/dist/shadcn/ui/aspect-ratio.d.ts.map +1 -1
  136. package/dist/shadcn/ui/avatar.d.ts +2 -2
  137. package/dist/shadcn/ui/avatar.d.ts.map +1 -1
  138. package/dist/shadcn/ui/badge.d.ts +2 -2
  139. package/dist/shadcn/ui/badge.d.ts.map +1 -1
  140. package/dist/shadcn/ui/breadcrumb.d.ts +8 -8
  141. package/dist/shadcn/ui/breadcrumb.d.ts.map +1 -1
  142. package/dist/shadcn/ui/button.d.ts +2 -2
  143. package/dist/shadcn/ui/button.d.ts.map +1 -1
  144. package/dist/shadcn/ui/calendar.d.ts +2 -2
  145. package/dist/shadcn/ui/calendar.d.ts.map +1 -1
  146. package/dist/shadcn/ui/card.d.ts +8 -8
  147. package/dist/shadcn/ui/card.d.ts.map +1 -1
  148. package/dist/shadcn/ui/carousel.d.ts +5 -5
  149. package/dist/shadcn/ui/carousel.d.ts.map +1 -1
  150. package/dist/shadcn/ui/chart.d.ts +7 -7
  151. package/dist/shadcn/ui/chart.d.ts.map +1 -1
  152. package/dist/shadcn/ui/checkbox.d.ts +2 -2
  153. package/dist/shadcn/ui/checkbox.d.ts.map +1 -1
  154. package/dist/shadcn/ui/collapsible.d.ts +1 -1
  155. package/dist/shadcn/ui/collapsible.d.ts.map +1 -1
  156. package/dist/shadcn/ui/command.d.ts +2 -2
  157. package/dist/shadcn/ui/command.d.ts.map +1 -1
  158. package/dist/shadcn/ui/context-menu.d.ts +4 -4
  159. package/dist/shadcn/ui/context-menu.d.ts.map +1 -1
  160. package/dist/shadcn/ui/dialog.d.ts +4 -4
  161. package/dist/shadcn/ui/dialog.d.ts.map +1 -1
  162. package/dist/shadcn/ui/drawer.d.ts +3 -3
  163. package/dist/shadcn/ui/drawer.d.ts.map +1 -1
  164. package/dist/shadcn/ui/dropdown-menu.d.ts +4 -4
  165. package/dist/shadcn/ui/dropdown-menu.d.ts.map +1 -1
  166. package/dist/shadcn/ui/form.d.ts +5 -5
  167. package/dist/shadcn/ui/form.d.ts.map +1 -1
  168. package/dist/shadcn/ui/hover-card.d.ts +2 -2
  169. package/dist/shadcn/ui/hover-card.d.ts.map +1 -1
  170. package/dist/shadcn/ui/input-otp.d.ts +4 -4
  171. package/dist/shadcn/ui/input-otp.d.ts.map +1 -1
  172. package/dist/shadcn/ui/input.d.ts +2 -2
  173. package/dist/shadcn/ui/input.d.ts.map +1 -1
  174. package/dist/shadcn/ui/label.d.ts +2 -2
  175. package/dist/shadcn/ui/label.d.ts.map +1 -1
  176. package/dist/shadcn/ui/menubar.d.ts +4 -4
  177. package/dist/shadcn/ui/menubar.d.ts.map +1 -1
  178. package/dist/shadcn/ui/navigation-menu.d.ts +2 -2
  179. package/dist/shadcn/ui/navigation-menu.d.ts.map +1 -1
  180. package/dist/shadcn/ui/pagination.d.ts +6 -6
  181. package/dist/shadcn/ui/pagination.d.ts.map +1 -1
  182. package/dist/shadcn/ui/popover.d.ts +2 -2
  183. package/dist/shadcn/ui/popover.d.ts.map +1 -1
  184. package/dist/shadcn/ui/progress.d.ts +2 -2
  185. package/dist/shadcn/ui/progress.d.ts.map +1 -1
  186. package/dist/shadcn/ui/radio-group.d.ts +2 -2
  187. package/dist/shadcn/ui/radio-group.d.ts.map +1 -1
  188. package/dist/shadcn/ui/resizable.d.ts +2 -2
  189. package/dist/shadcn/ui/resizable.d.ts.map +1 -1
  190. package/dist/shadcn/ui/scroll-area.d.ts +2 -2
  191. package/dist/shadcn/ui/scroll-area.d.ts.map +1 -1
  192. package/dist/shadcn/ui/select.d.ts +3 -3
  193. package/dist/shadcn/ui/select.d.ts.map +1 -1
  194. package/dist/shadcn/ui/separator.d.ts +2 -2
  195. package/dist/shadcn/ui/separator.d.ts.map +1 -1
  196. package/dist/shadcn/ui/sheet.d.ts +5 -5
  197. package/dist/shadcn/ui/sheet.d.ts.map +1 -1
  198. package/dist/shadcn/ui/sidebar.d.ts +26 -26
  199. package/dist/shadcn/ui/sidebar.d.ts.map +1 -1
  200. package/dist/shadcn/ui/skeleton.d.ts +1 -1
  201. package/dist/shadcn/ui/skeleton.d.ts.map +1 -1
  202. package/dist/shadcn/ui/slider.d.ts +2 -2
  203. package/dist/shadcn/ui/slider.d.ts.map +1 -1
  204. package/dist/shadcn/ui/sonner.d.ts.map +1 -1
  205. package/dist/shadcn/ui/switch.d.ts +2 -2
  206. package/dist/shadcn/ui/switch.d.ts.map +1 -1
  207. package/dist/shadcn/ui/table.d.ts +9 -9
  208. package/dist/shadcn/ui/table.d.ts.map +1 -1
  209. package/dist/shadcn/ui/tabs.d.ts +2 -2
  210. package/dist/shadcn/ui/tabs.d.ts.map +1 -1
  211. package/dist/shadcn/ui/textarea.d.ts +2 -2
  212. package/dist/shadcn/ui/textarea.d.ts.map +1 -1
  213. package/dist/shadcn/ui/toggle-group.d.ts +2 -2
  214. package/dist/shadcn/ui/toggle-group.d.ts.map +1 -1
  215. package/dist/shadcn/ui/toggle.d.ts +2 -2
  216. package/dist/shadcn/ui/toggle.d.ts.map +1 -1
  217. package/dist/shadcn/ui/tooltip.d.ts +2 -2
  218. package/dist/shadcn/ui/tooltip.d.ts.map +1 -1
  219. package/package.json +2 -2
  220. package/src/index.ts +1 -1
  221. package/src/kit/builder/auth/AuthProvider.tsx +131 -0
  222. package/src/kit/builder/auth/adapter.ts +436 -0
  223. package/src/kit/builder/auth/client-adapters.ts +398 -0
  224. package/src/kit/builder/auth/components.tsx +221 -0
  225. package/src/kit/builder/auth/hooks.ts +237 -0
  226. package/src/kit/builder/auth/index.ts +134 -0
  227. package/src/kit/builder/auth/permission-checker.ts +150 -0
  228. package/src/kit/builder/auth/storage.ts +366 -0
  229. package/src/kit/builder/auth/token-manager.ts +55 -0
  230. package/src/kit/builder/auth/types.ts +393 -0
  231. package/src/kit/builder/data-table/components/DataTable.tsx +216 -82
  232. package/src/kit/builder/data-table/components/DataTableColumnHeader.tsx +9 -5
  233. package/src/kit/builder/data-table/components/DataTablePagination.tsx +49 -27
  234. package/src/kit/builder/data-table/components/DataTableViewOptions.tsx +13 -4
  235. package/src/kit/builder/data-table/types.ts +18 -3
  236. package/src/kit/builder/dialog/index.ts +5 -1
  237. package/src/kit/builder/dialog/provider.tsx +56 -27
  238. package/src/kit/builder/form/components/FormBuilder.tsx +10 -14
  239. package/src/kit/builder/form/components/FormBuilderActions.tsx +1 -1
  240. package/src/kit/builder/form/components/FormBuilderContext.tsx +13 -6
  241. package/src/kit/builder/form/components/FormBuilderField.tsx +70 -20
  242. package/src/kit/builder/form/components/fields/ArrayField.tsx +148 -62
  243. package/src/kit/builder/form/components/fields/AutocompleteField.tsx +53 -18
  244. package/src/kit/builder/form/components/fields/CheckboxField.tsx +20 -11
  245. package/src/kit/builder/form/components/fields/DateField.tsx +17 -6
  246. package/src/kit/builder/form/components/fields/DatePickerField.tsx +15 -10
  247. package/src/kit/builder/form/components/fields/DateRangePickerField.tsx +20 -15
  248. package/src/kit/builder/form/components/fields/DateTimePickerField.tsx +16 -11
  249. package/src/kit/builder/form/components/fields/DateTimeRangePickerField.tsx +23 -17
  250. package/src/kit/builder/form/components/fields/FileField.tsx +10 -5
  251. package/src/kit/builder/form/components/fields/MonthPickerField.tsx +18 -11
  252. package/src/kit/builder/form/components/fields/MonthRangePickerField.tsx +23 -17
  253. package/src/kit/builder/form/components/fields/NumberField.tsx +9 -4
  254. package/src/kit/builder/form/components/fields/ObjectField.tsx +12 -7
  255. package/src/kit/builder/form/components/fields/RadioField.tsx +32 -14
  256. package/src/kit/builder/form/components/fields/SelectField.tsx +26 -11
  257. package/src/kit/builder/form/components/fields/SwitchField.tsx +20 -11
  258. package/src/kit/builder/form/components/fields/TextField.tsx +11 -5
  259. package/src/kit/builder/form/components/fields/TextareaField.tsx +9 -4
  260. package/src/kit/builder/form/components/fields/TimePickerField.tsx +16 -11
  261. package/src/kit/builder/form/components/fields/TimeRangePickerField.tsx +23 -17
  262. package/src/kit/builder/form/components/fields/index.ts +21 -21
  263. package/src/kit/builder/form/components/fields/types.ts +15 -11
  264. package/src/kit/builder/form/components/sectionNodes.tsx +63 -40
  265. package/src/kit/builder/form/hooks/useFormBuilder.ts +83 -34
  266. package/src/kit/builder/form/types.ts +173 -148
  267. package/src/kit/builder/form/utils/section-factories.ts +4 -1
  268. package/src/kit/builder/form/utils/transformers.ts +4 -4
  269. package/src/kit/builder/form/utils/validations.ts +1 -1
  270. package/src/kit/builder/page/Page.tsx +26 -6
  271. package/src/kit/builder/page/index.ts +1 -1
  272. package/src/kit/builder/section/SectionBuilder.tsx +252 -127
  273. package/src/kit/builder/section/SectionContainer.tsx +85 -0
  274. package/src/kit/builder/stack-dialog/context.ts +10 -4
  275. package/src/kit/builder/stack-dialog/hooks.ts +4 -3
  276. package/src/kit/builder/stack-dialog/index.ts +5 -11
  277. package/src/kit/builder/stack-dialog/provider.tsx +11 -11
  278. package/src/kit/builder/stack-dialog/renderer.tsx +23 -26
  279. package/src/kit/builder/stack-dialog/types.ts +18 -18
  280. package/src/kit/components/autocomplete/Autocomplete.tsx +631 -549
  281. package/src/kit/components/autocomplete/types.ts +17 -17
  282. package/src/kit/components/datepicker/DatePicker.tsx +33 -9
  283. package/src/kit/components/datepicker/DateRangePicker.tsx +159 -87
  284. package/src/kit/components/datetimepicker/DateTimePicker.tsx +136 -30
  285. package/src/kit/components/datetimepicker/DateTimeRangePicker.tsx +257 -67
  286. package/src/kit/components/datetimepicker/index.ts +3 -3
  287. package/src/kit/components/fileuploader/FileUploader.tsx +315 -180
  288. package/src/kit/components/fileuploader/index.ts +3 -3
  289. package/src/kit/components/fileuploader/types.ts +3 -3
  290. package/src/kit/components/forminfo/FormInfoError.tsx +26 -11
  291. package/src/kit/components/login/Login.tsx +13 -4
  292. package/src/kit/components/monthpicker/MonthInput.tsx +13 -4
  293. package/src/kit/components/monthpicker/MonthPicker.tsx +12 -11
  294. package/src/kit/components/monthpicker/MonthRangeInput.tsx +29 -8
  295. package/src/kit/components/monthpicker/MonthRangePicker.tsx +23 -21
  296. package/src/kit/components/timepicker/TimePicker.tsx +19 -11
  297. package/src/kit/components/timepicker/TimeRangePicker.tsx +106 -29
  298. package/src/kit/components/timepicker/index.ts +3 -3
  299. package/src/kit/layouts/admin/components/AdminLayout.tsx +53 -24
  300. package/src/kit/layouts/admin/components/ThemeToggle.tsx +3 -9
  301. package/src/kit/layouts/admin/hooks/menu.ts +11 -5
  302. package/src/kit/layouts/admin/providers/AdminMenuProvider.tsx +59 -39
  303. package/src/kit/layouts/admin/types/index.ts +1 -1
  304. package/src/kit/themes/base.css +1 -1
  305. package/src/kit/themes/clean-slate.css +40 -32
  306. package/src/kit/themes/default.css +34 -24
  307. package/src/kit/themes/minimal-modern.css +37 -29
  308. package/src/kit/themes/spotify.css +56 -39
  309. package/src/shadcn/hooks/use-mobile.ts +13 -11
  310. package/src/shadcn/lib/utils.ts +2 -2
  311. package/src/shadcn/ui/accordion.tsx +14 -14
  312. package/src/shadcn/ui/alert-dialog.tsx +29 -29
  313. package/src/shadcn/ui/alert.tsx +20 -20
  314. package/src/shadcn/ui/aspect-ratio.tsx +4 -4
  315. package/src/shadcn/ui/avatar.tsx +13 -13
  316. package/src/shadcn/ui/badge.tsx +16 -16
  317. package/src/shadcn/ui/breadcrumb.tsx +28 -28
  318. package/src/shadcn/ui/button.tsx +23 -23
  319. package/src/shadcn/ui/calendar.tsx +82 -78
  320. package/src/shadcn/ui/card.tsx +27 -27
  321. package/src/shadcn/ui/carousel.tsx +93 -93
  322. package/src/shadcn/ui/chart.tsx +103 -103
  323. package/src/shadcn/ui/checkbox.tsx +9 -9
  324. package/src/shadcn/ui/collapsible.tsx +6 -6
  325. package/src/shadcn/ui/command.tsx +36 -36
  326. package/src/shadcn/ui/context-menu.tsx +40 -40
  327. package/src/shadcn/ui/dialog.tsx +28 -28
  328. package/src/shadcn/ui/drawer.tsx +30 -30
  329. package/src/shadcn/ui/dropdown-menu.tsx +41 -41
  330. package/src/shadcn/ui/form.tsx +48 -47
  331. package/src/shadcn/ui/hover-card.tsx +11 -11
  332. package/src/shadcn/ui/input-otp.tsx +23 -23
  333. package/src/shadcn/ui/input.tsx +9 -9
  334. package/src/shadcn/ui/label.tsx +8 -8
  335. package/src/shadcn/ui/menubar.tsx +47 -47
  336. package/src/shadcn/ui/navigation-menu.tsx +33 -33
  337. package/src/shadcn/ui/pagination.tsx +28 -28
  338. package/src/shadcn/ui/popover.tsx +12 -12
  339. package/src/shadcn/ui/progress.tsx +8 -8
  340. package/src/shadcn/ui/radio-group.tsx +11 -11
  341. package/src/shadcn/ui/resizable.tsx +14 -14
  342. package/src/shadcn/ui/scroll-area.tsx +15 -15
  343. package/src/shadcn/ui/select.tsx +34 -34
  344. package/src/shadcn/ui/separator.tsx +9 -9
  345. package/src/shadcn/ui/sheet.tsx +36 -36
  346. package/src/shadcn/ui/sidebar.tsx +227 -227
  347. package/src/shadcn/ui/skeleton.tsx +5 -5
  348. package/src/shadcn/ui/slider.tsx +12 -12
  349. package/src/shadcn/ui/sonner.tsx +11 -11
  350. package/src/shadcn/ui/switch.tsx +9 -9
  351. package/src/shadcn/ui/table.tsx +32 -32
  352. package/src/shadcn/ui/tabs.tsx +14 -14
  353. package/src/shadcn/ui/textarea.tsx +7 -7
  354. package/src/shadcn/ui/toggle-group.tsx +17 -17
  355. package/src/shadcn/ui/toggle.tsx +16 -16
  356. package/src/shadcn/ui/tooltip.tsx +11 -11
  357. package/src/stories/FileUploader.stories.tsx +23 -4
  358. package/src/stories/kit/builder/DataTable.Basic.stories.tsx +14 -4
  359. package/src/stories/kit/builder/DataTable.Filters.stories.tsx +36 -14
  360. package/src/stories/kit/builder/DataTable.Pagination.stories.tsx +3 -2
  361. package/src/stories/kit/builder/DataTable.SelectionAndActions.stories.tsx +18 -4
  362. package/src/stories/kit/builder/DataTable.Sorting.stories.tsx +18 -7
  363. package/src/stories/kit/builder/Dialog.stories.tsx +19 -13
  364. package/src/stories/kit/builder/Form.ArrayLayouts.stories.tsx +40 -16
  365. package/src/stories/kit/builder/Form.Autocomplete.stories.tsx +34 -22
  366. package/src/stories/kit/builder/Form.Basic.stories.tsx +38 -6
  367. package/src/stories/kit/builder/Form.Complex.stories.tsx +356 -111
  368. package/src/stories/kit/builder/Form.DateTime.stories.tsx +12 -8
  369. package/src/stories/kit/builder/Form.Dynamic.stories.tsx +695 -132
  370. package/src/stories/kit/builder/Form.Files.stories.tsx +37 -26
  371. package/src/stories/kit/builder/Form.MultipleFormBuilder.stories.tsx +46 -42
  372. package/src/stories/kit/builder/Form.Pickers.stories.tsx +12 -8
  373. package/src/stories/kit/builder/Form.Simple.stories.tsx +15 -6
  374. package/src/stories/kit/builder/Form.Time.stories.tsx +12 -8
  375. package/src/stories/kit/builder/Page.stories.tsx +32 -6
  376. package/src/stories/kit/builder/Section.stories.tsx +58 -11
  377. package/src/stories/kit/components/Autocomplete.stories.tsx +55 -22
  378. package/src/stories/kit/components/DatePicker.stories.tsx +80 -13
  379. package/src/stories/kit/components/DateRangePicker.stories.tsx +52 -11
  380. package/src/stories/kit/components/Login.stories.tsx +8 -2
  381. package/src/stories/kit/components/MonthPicker.stories.tsx +26 -6
  382. package/src/stories/kit/components/MonthRangePicker.stories.tsx +24 -5
  383. package/src/stories/kit/components/TimePicker.stories.tsx +18 -16
  384. package/src/stories/kit/components/TimeRangePicker.stories.tsx +18 -12
  385. package/src/stories/kit/layouts/admin/AdminLayout.Basic.stories.tsx +29 -6
  386. package/src/stories/kit/layouts/admin/AdminLayout.Collapsible.stories.tsx +26 -5
  387. package/src/stories/kit/layouts/admin/AdminLayout.Complex.stories.tsx +101 -18
  388. package/src/stories/kit/layouts/admin/AdminLayout.CustomSidebarHeaderComponent.stories.tsx +18 -4
  389. package/src/stories/kit/layouts/admin/AdminLayout.CustomSidebarTitleAndIcon.stories.tsx +17 -4
  390. package/src/stories/kit/layouts/admin/AdminLayout.HeaderSlots.stories.tsx +28 -6
  391. package/src/stories/shadcn/ui/Accordion.stories.tsx +33 -10
  392. package/src/stories/shadcn/ui/AlertDialog.stories.tsx +3 -1
  393. package/src/stories/shadcn/ui/Button.stories.tsx +3 -1
  394. package/src/stories/shadcn/ui/Calendar.stories.tsx +6 -1
  395. package/src/stories/shadcn/ui/Card.stories.tsx +11 -2
  396. package/src/stories/shadcn/ui/Checkbox.stories.tsx +11 -3
  397. package/src/stories/shadcn/ui/Collapsible.stories.tsx +12 -5
  398. package/src/stories/shadcn/ui/ContextMenu.stories.tsx +12 -4
  399. package/src/stories/shadcn/ui/Dialog.stories.tsx +15 -3
  400. package/src/stories/shadcn/ui/Drawer.stories.tsx +5 -2
  401. package/src/stories/shadcn/ui/DropdownMenu.stories.tsx +15 -5
  402. package/src/stories/shadcn/ui/Form.stories.tsx +5 -2
  403. package/src/stories/shadcn/ui/HoverCard.stories.tsx +8 -2
  404. package/src/stories/shadcn/ui/Input.stories.tsx +3 -1
  405. package/src/stories/shadcn/ui/InputOtp.stories.tsx +9 -2
  406. package/src/stories/shadcn/ui/Menubar.stories.tsx +21 -7
  407. package/src/stories/shadcn/ui/NavigationMenu.stories.tsx +30 -5
  408. package/src/stories/shadcn/ui/Popover.stories.tsx +8 -2
  409. package/src/stories/shadcn/ui/Resizable.stories.tsx +17 -5
  410. package/src/stories/shadcn/ui/ScrollArea.stories.tsx +54 -2
  411. package/src/stories/shadcn/ui/Select.stories.tsx +7 -1
  412. package/src/stories/shadcn/ui/Sheet.stories.tsx +2 -1
  413. package/src/stories/shadcn/ui/Sidebar.stories.tsx +13 -2
  414. package/src/stories/shadcn/ui/Sonner.stories.tsx +12 -2
  415. package/src/stories/shadcn/ui/Table.stories.tsx +86 -27
  416. package/src/stories/shadcn/ui/Tabs.stories.tsx +9 -2
  417. package/src/stories/shadcn/ui/Textarea.stories.tsx +3 -1
  418. package/src/stories/shadcn/ui/Toggle.stories.tsx +10 -2
  419. package/src/stories/shadcn/ui/Tooltip.stories.tsx +6 -1
  420. package/tsconfig.json +1 -5
  421. package/tsconfig.tsbuildinfo +1 -0
  422. package/eslint.config.mjs +0 -19
package/src/kit/components/datetimepicker/DateTimeRangePicker.tsx CHANGED
@@ -4,7 +4,11 @@ import * as React from 'react';
4
4
  import { Calendar as CalendarIcon } from 'lucide-react';
5
5
  import { cn } from '../../../shadcn/lib/utils';
6
6
  import { Button } from '../../../shadcn/ui/button';
7
- import { Popover, PopoverContent, PopoverTrigger } from '../../../shadcn/ui/popover';
7
+ import {
8
+ Popover,
9
+ PopoverContent,
10
+ PopoverTrigger,
11
+ } from '../../../shadcn/ui/popover';
8
12
  import { Calendar } from '../../../shadcn/ui/calendar';
9
13
  import {
10
14
  Select,
@@ -21,7 +25,8 @@ export interface DateTimeRangeValue {
21
25
  to?: Date | null;
22
26
  }
23
27
 
24
- export interface DateTimeRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
28
+ export interface DateTimeRangePickerProps
29
+ extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
25
30
  value?: DateTimeRangeValue | null;
26
31
  onChange?: (range: DateTimeRangeValue | null) => void;
27
32
  placeholder?: string;
@@ -47,11 +52,26 @@ export interface DateTimeRangePickerProps extends Omit<React.HTMLAttributes<HTML
47
52
  }
48
53
 
49
54
  const pad2 = (n: number) => String(n).padStart(2, '0');
50
- function startOfDay(d: Date) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }
51
- function sameDay(a: Date, b: Date) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
52
- function isBefore(date: Date, min?: Date) { return !!(min && date < startOfDay(min)); }
53
- function isAfter(date: Date, max?: Date) { return !!(max && date > startOfDay(max)); }
54
- function inDisabled(date: Date, items?: Array<Date | { from: Date; to: Date }>) {
55
+ function startOfDay(d: Date) {
56
+ return new Date(d.getFullYear(), d.getMonth(), d.getDate());
57
+ }
58
+ function sameDay(a: Date, b: Date) {
59
+ return (
60
+ a.getFullYear() === b.getFullYear() &&
61
+ a.getMonth() === b.getMonth() &&
62
+ a.getDate() === b.getDate()
63
+ );
64
+ }
65
+ function isBefore(date: Date, min?: Date) {
66
+ return !!(min && date < startOfDay(min));
67
+ }
68
+ function isAfter(date: Date, max?: Date) {
69
+ return !!(max && date > startOfDay(max));
70
+ }
71
+ function inDisabled(
72
+ date: Date,
73
+ items?: Array<Date | { from: Date; to: Date }>,
74
+ ) {
55
75
  if (!items || items.length === 0) return false;
56
76
  const d = startOfDay(date);
57
77
  for (const it of items) {
@@ -65,11 +85,17 @@ function inDisabled(date: Date, items?: Array<Date | { from: Date; to: Date }>)
65
85
  }
66
86
  return false;
67
87
  }
68
- function rangeContainsDisabled(from?: Date, to?: Date, items?: Array<Date | { from: Date; to: Date }>) {
88
+ function rangeContainsDisabled(
89
+ from?: Date,
90
+ to?: Date,
91
+ items?: Array<Date | { from: Date; to: Date }>,
92
+ ) {
69
93
  if (!from || !to) return false;
70
94
  if (!items || items.length === 0) return false;
71
- const a = startOfDay(from); const b = startOfDay(to);
72
- const start = a <= b ? a : b; const end = a <= b ? b : a;
95
+ const a = startOfDay(from);
96
+ const b = startOfDay(to);
97
+ const start = a <= b ? a : b;
98
+ const end = a <= b ? b : a;
73
99
  let cur = start;
74
100
  while (cur <= end) {
75
101
  if (inDisabled(cur, items)) return true;
@@ -99,9 +125,29 @@ function TimeSelectors({
99
125
  disabled?: boolean;
100
126
  compact?: boolean;
101
127
  }) {
102
- const hours = React.useMemo(() => (hourCycle === 12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i)), [hourCycle]);
103
- const minutes = React.useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep), [minuteStep]);
104
- const seconds = React.useMemo(() => Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep), [secondStep]);
128
+ const hours = React.useMemo(
129
+ () =>
130
+ hourCycle === 12
131
+ ? Array.from({ length: 12 }, (_, i) => i + 1)
132
+ : Array.from({ length: 24 }, (_, i) => i),
133
+ [hourCycle],
134
+ );
135
+ const minutes = React.useMemo(
136
+ () =>
137
+ Array.from(
138
+ { length: Math.ceil(60 / minuteStep) },
139
+ (_, i) => i * minuteStep,
140
+ ),
141
+ [minuteStep],
142
+ );
143
+ const seconds = React.useMemo(
144
+ () =>
145
+ Array.from(
146
+ { length: Math.ceil(60 / secondStep) },
147
+ (_, i) => i * secondStep,
148
+ ),
149
+ [secondStep],
150
+ );
105
151
  const selectedHour = React.useMemo(() => {
106
152
  if (!value) return hourCycle === 12 ? 12 : 0;
107
153
  const h = value.getHours();
@@ -109,21 +155,33 @@ function TimeSelectors({
109
155
  }, [value, hourCycle]);
110
156
  const selectedMinute = value?.getMinutes() ?? 0;
111
157
  const selectedSecond = value?.getSeconds() ?? 0;
112
- const selectedPeriod: 'AM' | 'PM' = value && value.getHours() >= 12 ? 'PM' : 'AM';
158
+ const selectedPeriod: 'AM' | 'PM' =
159
+ value && value.getHours() >= 12 ? 'PM' : 'AM';
113
160
 
114
- const setPart = (part: 'hour' | 'minute' | 'second' | 'period', v: number | 'AM' | 'PM') => {
161
+ const setPart = (
162
+ part: 'hour' | 'minute' | 'second' | 'period',
163
+ v: number | 'AM' | 'PM',
164
+ ) => {
115
165
  const base = value
116
166
  ? new Date(value)
117
167
  : (() => {
118
168
  const n = new Date();
119
- return new Date(n.getFullYear(), n.getMonth(), n.getDate(), 0, 0, 0, 0);
169
+ return new Date(
170
+ n.getFullYear(),
171
+ n.getMonth(),
172
+ n.getDate(),
173
+ 0,
174
+ 0,
175
+ 0,
176
+ 0,
177
+ );
120
178
  })();
121
179
  if (part === 'hour') {
122
180
  let h = Number(v);
123
181
  if (hourCycle === 12) {
124
182
  const isPM = base.getHours() >= 12;
125
183
  h = h % 12;
126
- base.setHours(isPM ? (h === 12 ? 12 : h + 12) : (h === 12 ? 0 : h));
184
+ base.setHours(isPM ? (h === 12 ? 12 : h + 12) : h === 12 ? 0 : h);
127
185
  } else {
128
186
  base.setHours(h);
129
187
  }
@@ -147,28 +205,46 @@ function TimeSelectors({
147
205
  {!compact && <div className="text-xs text-muted-foreground">{label}</div>}
148
206
  <div className="flex items-end gap-2">
149
207
  <div className={widthClass}>
150
- {!compact && <div className="mb-1 block text-xs text-muted-foreground">Hour</div>}
151
- <Select disabled={disabled} value={String(selectedHour)} onValueChange={(v) => setPart('hour', Number(v))}>
208
+ {!compact && (
209
+ <div className="mb-1 block text-xs text-muted-foreground">Hour</div>
210
+ )}
211
+ <Select
212
+ disabled={disabled}
213
+ value={String(selectedHour)}
214
+ onValueChange={(v) => setPart('hour', Number(v))}
215
+ >
152
216
  <SelectTrigger aria-label={`${label} hour`}>
153
217
  <SelectValue />
154
218
  </SelectTrigger>
155
219
  <SelectContent>
156
220
  {hours.map((h) => (
157
- <SelectItem key={h} value={String(h)}>{hourCycle === 12 ? h : pad2(h)}</SelectItem>
221
+ <SelectItem key={h} value={String(h)}>
222
+ {hourCycle === 12 ? h : pad2(h)}
223
+ </SelectItem>
158
224
  ))}
159
225
  </SelectContent>
160
226
  </Select>
161
227
  </div>
162
228
  {(precision === 'minute' || precision === 'second') && (
163
229
  <div className={widthClass}>
164
- {!compact && <div className="mb-1 block text-xs text-muted-foreground">Minute</div>}
165
- <Select disabled={disabled} value={String(selectedMinute - (selectedMinute % minuteStep))} onValueChange={(v) => setPart('minute', Number(v))}>
230
+ {!compact && (
231
+ <div className="mb-1 block text-xs text-muted-foreground">
232
+ Minute
233
+ </div>
234
+ )}
235
+ <Select
236
+ disabled={disabled}
237
+ value={String(selectedMinute - (selectedMinute % minuteStep))}
238
+ onValueChange={(v) => setPart('minute', Number(v))}
239
+ >
166
240
  <SelectTrigger aria-label={`${label} minute`}>
167
241
  <SelectValue />
168
242
  </SelectTrigger>
169
243
  <SelectContent>
170
244
  {minutes.map((m) => (
171
- <SelectItem key={m} value={String(m)}>{pad2(m)}</SelectItem>
245
+ <SelectItem key={m} value={String(m)}>
246
+ {pad2(m)}
247
+ </SelectItem>
172
248
  ))}
173
249
  </SelectContent>
174
250
  </Select>
@@ -176,14 +252,24 @@ function TimeSelectors({
176
252
  )}
177
253
  {precision === 'second' && (
178
254
  <div className={widthClass}>
179
- {!compact && <div className="mb-1 block text-xs text-muted-foreground">Second</div>}
180
- <Select disabled={disabled} value={String(selectedSecond - (selectedSecond % secondStep))} onValueChange={(v) => setPart('second', Number(v))}>
255
+ {!compact && (
256
+ <div className="mb-1 block text-xs text-muted-foreground">
257
+ Second
258
+ </div>
259
+ )}
260
+ <Select
261
+ disabled={disabled}
262
+ value={String(selectedSecond - (selectedSecond % secondStep))}
263
+ onValueChange={(v) => setPart('second', Number(v))}
264
+ >
181
265
  <SelectTrigger aria-label={`${label} second`}>
182
266
  <SelectValue />
183
267
  </SelectTrigger>
184
268
  <SelectContent>
185
269
  {seconds.map((s) => (
186
- <SelectItem key={s} value={String(s)}>{pad2(s)}</SelectItem>
270
+ <SelectItem key={s} value={String(s)}>
271
+ {pad2(s)}
272
+ </SelectItem>
187
273
  ))}
188
274
  </SelectContent>
189
275
  </Select>
@@ -191,8 +277,16 @@ function TimeSelectors({
191
277
  )}
192
278
  {hourCycle === 12 && (
193
279
  <div className={widthClass}>
194
- {!compact && <div className="mb-1 block text-xs text-muted-foreground">Period</div>}
195
- <Select disabled={disabled} value={selectedPeriod} onValueChange={(v) => setPart('period', v as 'AM' | 'PM')}>
280
+ {!compact && (
281
+ <div className="mb-1 block text-xs text-muted-foreground">
282
+ Period
283
+ </div>
284
+ )}
285
+ <Select
286
+ disabled={disabled}
287
+ value={selectedPeriod}
288
+ onValueChange={(v) => setPart('period', v as 'AM' | 'PM')}
289
+ >
196
290
  <SelectTrigger aria-label={`${label} period`}>
197
291
  <SelectValue />
198
292
  </SelectTrigger>
@@ -229,29 +323,43 @@ export function DateTimeRangePicker({
229
323
  }: DateTimeRangePickerProps) {
230
324
  const [internalOpen, setInternalOpen] = React.useState(false);
231
325
  const isOpen = typeof props.open === 'boolean' ? props.open : internalOpen;
232
- const setOpen = (o: boolean) => (props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o));
233
- const [draft, setDraft] = React.useState<DateTimeRangeValue | null>(value ?? null);
326
+ const setOpen = (o: boolean) =>
327
+ props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o);
328
+ const [draft, setDraft] = React.useState<DateTimeRangeValue | null>(
329
+ value ?? null,
330
+ );
234
331
 
235
332
  React.useEffect(() => {
236
333
  if (isOpen) setDraft(value ?? null);
237
334
  }, [isOpen, value]);
238
335
 
239
- const fmtTime = React.useCallback((d?: Date | null) => {
240
- if (!d) return '';
241
- const h = d.getHours();
242
- const m = d.getMinutes();
243
- const s = d.getSeconds();
244
- return hourCycle === 12
245
- ? `${((h % 12) || 12)}:${pad2(m)}${timePrecision === 'second' ? `:${pad2(s)}` : ''} ${h >= 12 ? 'PM' : 'AM'}`
246
- : `${pad2(h)}:${pad2(m)}${timePrecision === 'second' ? `:${pad2(s)}` : ''}`;
247
- }, [hourCycle, timePrecision]);
336
+ const fmtTime = React.useCallback(
337
+ (d?: Date | null) => {
338
+ if (!d) return '';
339
+ const h = d.getHours();
340
+ const m = d.getMinutes();
341
+ const s = d.getSeconds();
342
+ return hourCycle === 12
343
+ ? `${h % 12 || 12}:${pad2(m)}${timePrecision === 'second' ? `:${pad2(s)}` : ''} ${h >= 12 ? 'PM' : 'AM'}`
344
+ : `${pad2(h)}:${pad2(m)}${timePrecision === 'second' ? `:${pad2(s)}` : ''}`;
345
+ },
346
+ [hourCycle, timePrecision],
347
+ );
248
348
 
249
349
  const label = React.useMemo(() => {
250
350
  const f = draft?.from ?? value?.from ?? null;
251
351
  const t = draft?.to ?? value?.to ?? null;
252
352
  if (f && t) {
253
- const fd = f.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
254
- const td = t.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
353
+ const fd = f.toLocaleDateString(undefined, {
354
+ year: 'numeric',
355
+ month: 'short',
356
+ day: '2-digit',
357
+ });
358
+ const td = t.toLocaleDateString(undefined, {
359
+ year: 'numeric',
360
+ month: 'short',
361
+ day: '2-digit',
362
+ });
255
363
  return `${fd} ${fmtTime(f)} – ${td} ${fmtTime(t)}`;
256
364
  }
257
365
  return placeholder;
@@ -265,8 +373,12 @@ export function DateTimeRangePicker({
265
373
  const yyyy = d.getFullYear();
266
374
  return `${dd} / ${mm} / ${yyyy}`;
267
375
  }, []);
268
- const [fromInput, setFromInput] = React.useState<string>(fmtDate(draft?.from ?? value?.from ?? null));
269
- const [toInput, setToInput] = React.useState<string>(fmtDate(draft?.to ?? value?.to ?? null));
376
+ const [fromInput, setFromInput] = React.useState<string>(
377
+ fmtDate(draft?.from ?? value?.from ?? null),
378
+ );
379
+ const [toInput, setToInput] = React.useState<string>(
380
+ fmtDate(draft?.to ?? value?.to ?? null),
381
+ );
270
382
  React.useEffect(() => {
271
383
  if (isOpen) {
272
384
  setFromInput(fmtDate(value?.from ?? null));
@@ -276,20 +388,31 @@ export function DateTimeRangePicker({
276
388
  const maskDate = (raw: string) => {
277
389
  const digits = raw.replace(/\D/g, '').slice(0, 8);
278
390
  const parts: string[] = [];
279
- const dd = digits.slice(0, Math.min(2, digits.length)); if (dd) parts.push(dd);
280
- const mm = digits.length > 2 ? digits.slice(2, Math.min(4, digits.length)) : ''; if (mm) parts.push(mm);
281
- const yyyy = digits.length > 4 ? digits.slice(4) : ''; if (yyyy) parts.push(yyyy);
391
+ const dd = digits.slice(0, Math.min(2, digits.length));
392
+ if (dd) parts.push(dd);
393
+ const mm =
394
+ digits.length > 2 ? digits.slice(2, Math.min(4, digits.length)) : '';
395
+ if (mm) parts.push(mm);
396
+ const yyyy = digits.length > 4 ? digits.slice(4) : '';
397
+ if (yyyy) parts.push(yyyy);
282
398
  return parts.join(' / ');
283
399
  };
284
400
  const parseMasked = (masked: string): Date | undefined => {
285
401
  const m = masked.match(/^(\d{1,2})\s*\/\s*(\d{1,2})\s*\/\s*(\d{4})$/);
286
402
  if (!m) return undefined;
287
- const dd = Number(m[1]); const mm = Number(m[2]); const yyyy = Number(m[3]);
403
+ const dd = Number(m[1]);
404
+ const mm = Number(m[2]);
405
+ const yyyy = Number(m[3]);
288
406
  if (mm < 1 || mm > 12) return undefined;
289
407
  const lastDay = new Date(yyyy, mm, 0).getDate();
290
408
  if (dd < 1 || dd > lastDay) return undefined;
291
409
  const out = new Date(yyyy, mm - 1, dd);
292
- if (isBefore(out, minDate) || isAfter(out, maxDate) || inDisabled(out, disabledDates)) return undefined;
410
+ if (
411
+ isBefore(out, minDate) ||
412
+ isAfter(out, maxDate) ||
413
+ inDisabled(out, disabledDates)
414
+ )
415
+ return undefined;
293
416
  return out;
294
417
  };
295
418
  const fromParsed = parseMasked(fromInput);
@@ -304,7 +427,7 @@ export function DateTimeRangePicker({
304
427
  fromParsed.getDate(),
305
428
  base.getHours(),
306
429
  base.getMinutes(),
307
- base.getSeconds()
430
+ base.getSeconds(),
308
431
  );
309
432
  }
310
433
  return fromParsed;
@@ -321,25 +444,44 @@ export function DateTimeRangePicker({
321
444
  toParsed.getDate(),
322
445
  base.getHours(),
323
446
  base.getMinutes(),
324
- base.getSeconds()
447
+ base.getSeconds(),
325
448
  );
326
449
  }
327
450
  return toParsed;
328
451
  }
329
452
  return draft?.to ?? undefined;
330
453
  }, [toParsed, draft, value]);
331
- const invalidRange = !mergedFrom || !mergedTo || isBefore(mergedFrom, minDate) || isAfter(mergedTo, maxDate) || mergedFrom > mergedTo || rangeContainsDisabled(mergedFrom, mergedTo, disabledDates);
454
+ const invalidRange =
455
+ !mergedFrom ||
456
+ !mergedTo ||
457
+ isBefore(mergedFrom, minDate) ||
458
+ isAfter(mergedTo, maxDate) ||
459
+ mergedFrom > mergedTo ||
460
+ rangeContainsDisabled(mergedFrom, mergedTo, disabledDates);
332
461
 
333
462
  return (
334
463
  <div className={cn('w-fit', className)} {...props}>
335
464
  <Popover open={isOpen} onOpenChange={setOpen}>
336
465
  <PopoverTrigger asChild>
337
- <Button type="button" disabled={disabled} variant={buttonVariant} className={cn('w-[360px] justify-start text-left font-normal', !value && 'text-muted-foreground')}>
466
+ <Button
467
+ type="button"
468
+ disabled={disabled}
469
+ variant={buttonVariant}
470
+ className={cn(
471
+ 'w-[360px] justify-start text-left font-normal',
472
+ !value && 'text-muted-foreground',
473
+ )}
474
+ >
338
475
  <CalendarIcon className="mr-2 h-4 w-4" />
339
476
  {label}
340
477
  </Button>
341
478
  </PopoverTrigger>
342
- <PopoverContent className="w-auto max-w-none p-4" align="start" side={popoverSide ?? 'bottom'} sideOffset={8}>
479
+ <PopoverContent
480
+ className="w-auto max-w-none p-4"
481
+ align="start"
482
+ side={popoverSide ?? 'bottom'}
483
+ sideOffset={8}
484
+ >
343
485
  <div className={cn('w-fit min-w-0', contentClassName)}>
344
486
  {/* Header row: date inputs with inline time selectors beside each */}
345
487
  <div className="mb-3 rounded-md border border-input bg-background/50 px-3 py-2">
@@ -360,7 +502,7 @@ export function DateTimeRangePicker({
360
502
  p.getDate(),
361
503
  prev ? prev.getHours() : 0,
362
504
  prev ? prev.getMinutes() : 0,
363
- prev ? prev.getSeconds() : 0
505
+ prev ? prev.getSeconds() : 0,
364
506
  );
365
507
  setDraft((d) => ({ ...(d ?? {}), from: withTime }));
366
508
  }
@@ -372,7 +514,9 @@ export function DateTimeRangePicker({
372
514
  label="From"
373
515
  compact
374
516
  value={draft?.from ?? null}
375
- onChange={(d) => setDraft((prev) => ({ ...(prev ?? {}), from: d }))}
517
+ onChange={(d) =>
518
+ setDraft((prev) => ({ ...(prev ?? {}), from: d }))
519
+ }
376
520
  precision={timePrecision}
377
521
  hourCycle={hourCycle}
378
522
  minuteStep={minuteStep}
@@ -397,7 +541,7 @@ export function DateTimeRangePicker({
397
541
  p.getDate(),
398
542
  prev ? prev.getHours() : 0,
399
543
  prev ? prev.getMinutes() : 0,
400
- prev ? prev.getSeconds() : 0
544
+ prev ? prev.getSeconds() : 0,
401
545
  );
402
546
  setDraft((d) => ({ ...(d ?? {}), to: withTime }));
403
547
  }
@@ -409,7 +553,9 @@ export function DateTimeRangePicker({
409
553
  label="To"
410
554
  compact
411
555
  value={draft?.to ?? null}
412
- onChange={(d) => setDraft((prev) => ({ ...(prev ?? {}), to: d }))}
556
+ onChange={(d) =>
557
+ setDraft((prev) => ({ ...(prev ?? {}), to: d }))
558
+ }
413
559
  precision={timePrecision}
414
560
  hourCycle={hourCycle}
415
561
  minuteStep={minuteStep}
@@ -424,39 +570,83 @@ export function DateTimeRangePicker({
424
570
  <Calendar
425
571
  mode="range"
426
572
  numberOfMonths={numberOfMonths}
427
- selected={draft?.from && draft?.to ? { from: draft.from, to: draft.to } : undefined}
573
+ selected={
574
+ draft?.from && draft?.to
575
+ ? { from: draft.from, to: draft.to }
576
+ : undefined
577
+ }
428
578
  onSelect={(range) => {
429
579
  if (disabled) return;
430
- if (!range) { setDraft(null); return; }
580
+ if (!range) {
581
+ setDraft(null);
582
+ return;
583
+ }
431
584
  const { from, to } = range as { from?: Date; to?: Date };
432
- if (from && (isBefore(from, minDate) || isAfter(from, maxDate))) return;
433
- if (to && (isBefore(to, minDate) || isAfter(to, maxDate))) return;
434
- if (from && to && rangeContainsDisabled(from, to, disabledDates)) return;
585
+ if (from && (isBefore(from, minDate) || isAfter(from, maxDate)))
586
+ return;
587
+ if (to && (isBefore(to, minDate) || isAfter(to, maxDate)))
588
+ return;
589
+ if (
590
+ from &&
591
+ to &&
592
+ rangeContainsDisabled(from, to, disabledDates)
593
+ )
594
+ return;
435
595
  const prevFrom = draft?.from ?? from;
436
596
  const prevTo = draft?.to ?? to;
437
597
  const nextFrom = from
438
- ? new Date(from.getFullYear(), from.getMonth(), from.getDate(), prevFrom?.getHours?.() ?? 0, prevFrom?.getMinutes?.() ?? 0, prevFrom?.getSeconds?.() ?? 0)
598
+ ? new Date(
599
+ from.getFullYear(),
600
+ from.getMonth(),
601
+ from.getDate(),
602
+ prevFrom?.getHours?.() ?? 0,
603
+ prevFrom?.getMinutes?.() ?? 0,
604
+ prevFrom?.getSeconds?.() ?? 0,
605
+ )
439
606
  : undefined;
440
607
  const nextTo = to
441
- ? new Date(to.getFullYear(), to.getMonth(), to.getDate(), prevTo?.getHours?.() ?? 0, prevTo?.getMinutes?.() ?? 0, prevTo?.getSeconds?.() ?? 0)
608
+ ? new Date(
609
+ to.getFullYear(),
610
+ to.getMonth(),
611
+ to.getDate(),
612
+ prevTo?.getHours?.() ?? 0,
613
+ prevTo?.getMinutes?.() ?? 0,
614
+ prevTo?.getSeconds?.() ?? 0,
615
+ )
442
616
  : undefined;
443
617
  setDraft({ from: nextFrom ?? null, to: nextTo ?? null });
444
618
  setFromInput(fmtDate(nextFrom ?? null));
445
619
  setToInput(fmtDate(nextTo ?? null));
446
620
  }}
447
621
  defaultMonth={draft?.from ?? value?.from ?? new Date()}
448
- disabled={(d) => isBefore(d, minDate) || isAfter(d, maxDate) || inDisabled(d, disabledDates)}
622
+ disabled={(d) =>
623
+ isBefore(d, minDate) ||
624
+ isAfter(d, maxDate) ||
625
+ inDisabled(d, disabledDates)
626
+ }
449
627
  buttonVariant="ghost"
450
628
  showOutsideDays
451
629
  />
452
630
  </div>
453
631
  {(props.showFooter ?? true) && (
454
632
  <div className="flex items-center justify-between gap-2 pt-3 mt-3 border-t">
455
- <Button type="button" variant="outline" size="sm" onClick={() => setOpen(false)} disabled={disabled}>
633
+ <Button
634
+ type="button"
635
+ variant="outline"
636
+ size="sm"
637
+ onClick={() => setOpen(false)}
638
+ disabled={disabled}
639
+ >
456
640
  {props.cancelLabel ?? 'Cancel'}
457
641
  </Button>
458
642
  <div className="flex gap-2">
459
- <Button type="button" variant="ghost" size="sm" onClick={() => onChange?.(null)} disabled={disabled}>
643
+ <Button
644
+ type="button"
645
+ variant="ghost"
646
+ size="sm"
647
+ onClick={() => onChange?.(null)}
648
+ disabled={disabled}
649
+ >
460
650
  {props.clearLabel ?? 'Clear'}
461
651
  </Button>
462
652
  <Button
package/src/kit/components/datetimepicker/index.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { DateTimePicker } from './DateTimePicker'
2
- export { DateTimeRangePicker } from './DateTimeRangePicker'
3
- export default void 0
1
+ export { DateTimePicker } from './DateTimePicker';
2
+ export { DateTimeRangePicker } from './DateTimeRangePicker';
3
+ export default void 0;