@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
@@ -1,54 +1,158 @@
1
1
  import { memo } from 'react';
2
2
  import { cn } from '../../../shadcn/lib/utils';
3
- import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../../shadcn/ui/card';
4
- import { Separator } from '../../../shadcn/ui/separator';
5
3
  import type { SectionBuilderProps, SectionLeaf, SectionNode } from './types';
6
- import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../shadcn/ui/tabs';
4
+ import {
5
+ Tabs,
6
+ TabsList,
7
+ TabsTrigger,
8
+ TabsContent,
9
+ } from '../../../shadcn/ui/tabs';
10
+ import SectionContainer from './SectionContainer';
7
11
 
8
12
  // Tailwind-safe literal class maps (1-12)
9
13
  const GRID_COLS = {
10
14
  base: {
11
- 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4', 5: 'grid-cols-5', 6: 'grid-cols-6',
12
- 7: 'grid-cols-7', 8: 'grid-cols-8', 9: 'grid-cols-9', 10: 'grid-cols-10', 11: 'grid-cols-11', 12: 'grid-cols-12',
15
+ 1: 'grid-cols-1',
16
+ 2: 'grid-cols-2',
17
+ 3: 'grid-cols-3',
18
+ 4: 'grid-cols-4',
19
+ 5: 'grid-cols-5',
20
+ 6: 'grid-cols-6',
21
+ 7: 'grid-cols-7',
22
+ 8: 'grid-cols-8',
23
+ 9: 'grid-cols-9',
24
+ 10: 'grid-cols-10',
25
+ 11: 'grid-cols-11',
26
+ 12: 'grid-cols-12',
13
27
  } as Record<number, string>,
14
28
  sm: {
15
- 1: 'sm:grid-cols-1', 2: 'sm:grid-cols-2', 3: 'sm:grid-cols-3', 4: 'sm:grid-cols-4', 5: 'sm:grid-cols-5', 6: 'sm:grid-cols-6',
16
- 7: 'sm:grid-cols-7', 8: 'sm:grid-cols-8', 9: 'sm:grid-cols-9', 10: 'sm:grid-cols-10', 11: 'sm:grid-cols-11', 12: 'sm:grid-cols-12',
29
+ 1: 'sm:grid-cols-1',
30
+ 2: 'sm:grid-cols-2',
31
+ 3: 'sm:grid-cols-3',
32
+ 4: 'sm:grid-cols-4',
33
+ 5: 'sm:grid-cols-5',
34
+ 6: 'sm:grid-cols-6',
35
+ 7: 'sm:grid-cols-7',
36
+ 8: 'sm:grid-cols-8',
37
+ 9: 'sm:grid-cols-9',
38
+ 10: 'sm:grid-cols-10',
39
+ 11: 'sm:grid-cols-11',
40
+ 12: 'sm:grid-cols-12',
17
41
  } as Record<number, string>,
18
42
  md: {
19
- 1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4', 5: 'md:grid-cols-5', 6: 'md:grid-cols-6',
20
- 7: 'md:grid-cols-7', 8: 'md:grid-cols-8', 9: 'md:grid-cols-9', 10: 'md:grid-cols-10', 11: 'md:grid-cols-11', 12: 'md:grid-cols-12',
43
+ 1: 'md:grid-cols-1',
44
+ 2: 'md:grid-cols-2',
45
+ 3: 'md:grid-cols-3',
46
+ 4: 'md:grid-cols-4',
47
+ 5: 'md:grid-cols-5',
48
+ 6: 'md:grid-cols-6',
49
+ 7: 'md:grid-cols-7',
50
+ 8: 'md:grid-cols-8',
51
+ 9: 'md:grid-cols-9',
52
+ 10: 'md:grid-cols-10',
53
+ 11: 'md:grid-cols-11',
54
+ 12: 'md:grid-cols-12',
21
55
  } as Record<number, string>,
22
56
  lg: {
23
- 1: 'lg:grid-cols-1', 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4', 5: 'lg:grid-cols-5', 6: 'lg:grid-cols-6',
24
- 7: 'lg:grid-cols-7', 8: 'lg:grid-cols-8', 9: 'lg:grid-cols-9', 10: 'lg:grid-cols-10', 11: 'lg:grid-cols-11', 12: 'lg:grid-cols-12',
57
+ 1: 'lg:grid-cols-1',
58
+ 2: 'lg:grid-cols-2',
59
+ 3: 'lg:grid-cols-3',
60
+ 4: 'lg:grid-cols-4',
61
+ 5: 'lg:grid-cols-5',
62
+ 6: 'lg:grid-cols-6',
63
+ 7: 'lg:grid-cols-7',
64
+ 8: 'lg:grid-cols-8',
65
+ 9: 'lg:grid-cols-9',
66
+ 10: 'lg:grid-cols-10',
67
+ 11: 'lg:grid-cols-11',
68
+ 12: 'lg:grid-cols-12',
25
69
  } as Record<number, string>,
26
70
  xl: {
27
- 1: 'xl:grid-cols-1', 2: 'xl:grid-cols-2', 3: 'xl:grid-cols-3', 4: 'xl:grid-cols-4', 5: 'xl:grid-cols-5', 6: 'xl:grid-cols-6',
28
- 7: 'xl:grid-cols-7', 8: 'xl:grid-cols-8', 9: 'xl:grid-cols-9', 10: 'xl:grid-cols-10', 11: 'xl:grid-cols-11', 12: 'xl:grid-cols-12',
71
+ 1: 'xl:grid-cols-1',
72
+ 2: 'xl:grid-cols-2',
73
+ 3: 'xl:grid-cols-3',
74
+ 4: 'xl:grid-cols-4',
75
+ 5: 'xl:grid-cols-5',
76
+ 6: 'xl:grid-cols-6',
77
+ 7: 'xl:grid-cols-7',
78
+ 8: 'xl:grid-cols-8',
79
+ 9: 'xl:grid-cols-9',
80
+ 10: 'xl:grid-cols-10',
81
+ 11: 'xl:grid-cols-11',
82
+ 12: 'xl:grid-cols-12',
29
83
  } as Record<number, string>,
30
84
  };
31
85
 
32
86
  const COL_SPAN = {
33
87
  base: {
34
- 1: 'col-span-1', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', 5: 'col-span-5', 6: 'col-span-6',
35
- 7: 'col-span-7', 8: 'col-span-8', 9: 'col-span-9', 10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12',
88
+ 1: 'col-span-1',
89
+ 2: 'col-span-2',
90
+ 3: 'col-span-3',
91
+ 4: 'col-span-4',
92
+ 5: 'col-span-5',
93
+ 6: 'col-span-6',
94
+ 7: 'col-span-7',
95
+ 8: 'col-span-8',
96
+ 9: 'col-span-9',
97
+ 10: 'col-span-10',
98
+ 11: 'col-span-11',
99
+ 12: 'col-span-12',
36
100
  } as Record<number, string>,
37
101
  sm: {
38
- 1: 'sm:col-span-1', 2: 'sm:col-span-2', 3: 'sm:col-span-3', 4: 'sm:col-span-4', 5: 'sm:col-span-5', 6: 'sm:col-span-6',
39
- 7: 'sm:col-span-7', 8: 'sm:col-span-8', 9: 'sm:col-span-9', 10: 'sm:col-span-10', 11: 'sm:col-span-11', 12: 'sm:col-span-12',
102
+ 1: 'sm:col-span-1',
103
+ 2: 'sm:col-span-2',
104
+ 3: 'sm:col-span-3',
105
+ 4: 'sm:col-span-4',
106
+ 5: 'sm:col-span-5',
107
+ 6: 'sm:col-span-6',
108
+ 7: 'sm:col-span-7',
109
+ 8: 'sm:col-span-8',
110
+ 9: 'sm:col-span-9',
111
+ 10: 'sm:col-span-10',
112
+ 11: 'sm:col-span-11',
113
+ 12: 'sm:col-span-12',
40
114
  } as Record<number, string>,
41
115
  md: {
42
- 1: 'md:col-span-1', 2: 'md:col-span-2', 3: 'md:col-span-3', 4: 'md:col-span-4', 5: 'md:col-span-5', 6: 'md:col-span-6',
43
- 7: 'md:col-span-7', 8: 'md:col-span-8', 9: 'md:col-span-9', 10: 'md:col-span-10', 11: 'md:col-span-11', 12: 'md:col-span-12',
116
+ 1: 'md:col-span-1',
117
+ 2: 'md:col-span-2',
118
+ 3: 'md:col-span-3',
119
+ 4: 'md:col-span-4',
120
+ 5: 'md:col-span-5',
121
+ 6: 'md:col-span-6',
122
+ 7: 'md:col-span-7',
123
+ 8: 'md:col-span-8',
124
+ 9: 'md:col-span-9',
125
+ 10: 'md:col-span-10',
126
+ 11: 'md:col-span-11',
127
+ 12: 'md:col-span-12',
44
128
  } as Record<number, string>,
45
129
  lg: {
46
- 1: 'lg:col-span-1', 2: 'lg:col-span-2', 3: 'lg:col-span-3', 4: 'lg:col-span-4', 5: 'lg:col-span-5', 6: 'lg:col-span-6',
47
- 7: 'lg:col-span-7', 8: 'lg:col-span-8', 9: 'lg:col-span-9', 10: 'lg:col-span-10', 11: 'lg:col-span-11', 12: 'lg:col-span-12',
130
+ 1: 'lg:col-span-1',
131
+ 2: 'lg:col-span-2',
132
+ 3: 'lg:col-span-3',
133
+ 4: 'lg:col-span-4',
134
+ 5: 'lg:col-span-5',
135
+ 6: 'lg:col-span-6',
136
+ 7: 'lg:col-span-7',
137
+ 8: 'lg:col-span-8',
138
+ 9: 'lg:col-span-9',
139
+ 10: 'lg:col-span-10',
140
+ 11: 'lg:col-span-11',
141
+ 12: 'lg:col-span-12',
48
142
  } as Record<number, string>,
49
143
  xl: {
50
- 1: 'xl:col-span-1', 2: 'xl:col-span-2', 3: 'xl:col-span-3', 4: 'xl:col-span-4', 5: 'xl:col-span-5', 6: 'xl:col-span-6',
51
- 7: 'xl:col-span-7', 8: 'xl:col-span-8', 9: 'xl:col-span-9', 10: 'xl:col-span-10', 11: 'xl:col-span-11', 12: 'xl:col-span-12',
144
+ 1: 'xl:col-span-1',
145
+ 2: 'xl:col-span-2',
146
+ 3: 'xl:col-span-3',
147
+ 4: 'xl:col-span-4',
148
+ 5: 'xl:col-span-5',
149
+ 6: 'xl:col-span-6',
150
+ 7: 'xl:col-span-7',
151
+ 8: 'xl:col-span-8',
152
+ 9: 'xl:col-span-9',
153
+ 10: 'xl:col-span-10',
154
+ 11: 'xl:col-span-11',
155
+ 12: 'xl:col-span-12',
52
156
  } as Record<number, string>,
53
157
  };
54
158
 
@@ -76,10 +180,22 @@ function flexClasses(options: SectionNode['flex']): string {
76
180
  const gap = options?.gap ?? 'gap-4';
77
181
  const align = options?.align ?? 'stretch';
78
182
  const justify = options?.justify ?? 'start';
79
- const alignClass
80
- = align === 'start' ? 'items-start' : align === 'center' ? 'items-center' : align === 'end' ? 'items-end' : 'items-stretch';
81
- const justifyClass
82
- = justify === 'start' ? 'justify-start' : justify === 'center' ? 'justify-center' : justify === 'between' ? 'justify-between' : 'justify-end';
183
+ const alignClass =
184
+ align === 'start'
185
+ ? 'items-start'
186
+ : align === 'center'
187
+ ? 'items-center'
188
+ : align === 'end'
189
+ ? 'items-end'
190
+ : 'items-stretch';
191
+ const justifyClass =
192
+ justify === 'start'
193
+ ? 'justify-start'
194
+ : justify === 'center'
195
+ ? 'justify-center'
196
+ : justify === 'between'
197
+ ? 'justify-between'
198
+ : 'justify-end';
83
199
  return cn('flex', `flex-${direction}`, wrap, gap, alignClass, justifyClass);
84
200
  }
85
201
 
@@ -101,27 +217,39 @@ function isLeaf(child: SectionNode | SectionLeaf): child is SectionLeaf {
101
217
  function shallowEqualSpan(a?: SectionLeaf['span'], b?: SectionLeaf['span']) {
102
218
  if (a === b) return true;
103
219
  if (!a || !b) return !a && !b;
104
- return a.base === b.base && a.sm === b.sm && a.md === b.md && a.lg === b.lg && a.xl === b.xl;
220
+ return (
221
+ a.base === b.base &&
222
+ a.sm === b.sm &&
223
+ a.md === b.md &&
224
+ a.lg === b.lg &&
225
+ a.xl === b.xl
226
+ );
105
227
  }
106
228
 
107
229
  function shallowEqualLeaf(a: SectionLeaf, b: SectionLeaf) {
108
230
  // Use renderKey when provided to force updates; otherwise ignore content ref equality
109
231
  const renderKeyEqual = (a.renderKey ?? null) === (b.renderKey ?? null);
110
232
  return (
111
- a.key === b.key
112
- && a.hidden === b.hidden
113
- && a.className === b.className
114
- && a.labelLayout === b.labelLayout
115
- && a.labelClassName === b.labelClassName
116
- && a.valueClassName === b.valueClassName
117
- && a.inlineLabelWidthClass === b.inlineLabelWidthClass
118
- && shallowEqualSpan(a.span, b.span)
119
- && renderKeyEqual
233
+ a.key === b.key &&
234
+ a.hidden === b.hidden &&
235
+ a.className === b.className &&
236
+ a.labelLayout === b.labelLayout &&
237
+ a.labelClassName === b.labelClassName &&
238
+ a.valueClassName === b.valueClassName &&
239
+ a.inlineLabelWidthClass === b.inlineLabelWidthClass &&
240
+ shallowEqualSpan(a.span, b.span) &&
241
+ renderKeyEqual
120
242
  );
121
243
  }
122
244
 
123
245
  const SectionLeafRenderer = memo(
124
- function SectionLeafRenderer({ leaf, renderLeaf }: { leaf: SectionLeaf; renderLeaf?: (leaf: SectionLeaf) => React.ReactNode }) {
246
+ function SectionLeafRenderer({
247
+ leaf,
248
+ renderLeaf,
249
+ }: {
250
+ leaf: SectionLeaf;
251
+ renderLeaf?: (leaf: SectionLeaf) => React.ReactNode;
252
+ }) {
125
253
  if (leaf.hidden) return null;
126
254
  const span = leafSpanClasses(leaf);
127
255
 
@@ -131,27 +259,32 @@ const SectionLeafRenderer = memo(
131
259
  }
132
260
 
133
261
  // Default rendering with optional label support
134
- const hasLabel = leaf.label !== undefined && leaf.label !== null && leaf.label !== '';
262
+ const hasLabel =
263
+ leaf.label !== undefined && leaf.label !== null && leaf.label !== '';
135
264
  const layout = leaf.labelLayout ?? 'stacked';
136
265
  const labelBaseCls = 'text-xs text-muted-foreground';
137
266
  const valueBaseCls = 'text-sm leading-6';
138
267
 
139
268
  if (!hasLabel) {
140
- return <div className={cn(span, leaf.className, leaf.valueClassName)}>{leaf.content}</div>;
269
+ return (
270
+ <div className={cn(span, leaf.className, leaf.valueClassName)}>
271
+ {leaf.content}
272
+ </div>
273
+ );
141
274
  }
142
275
 
143
276
  if (layout === 'inline') {
144
277
  const labelWidth = leaf.inlineLabelWidthClass ?? 'w-32';
145
278
  return (
146
279
  <div className={cn(span, leaf.className, 'flex items-start gap-4')}>
147
- <div className={cn(labelWidth, labelBaseCls, leaf.labelClassName)}>{leaf.label}</div>
280
+ <div className={cn(labelWidth, labelBaseCls, leaf.labelClassName)}>
281
+ {leaf.label}
282
+ </div>
148
283
  <div className={cn('flex-1', valueBaseCls, leaf.valueClassName)}>
149
284
  {leaf.content}
150
- {leaf.description
151
- ? (
152
- <div className={cn('mt-1', labelBaseCls)}>{leaf.description}</div>
153
- )
154
- : null}
285
+ {leaf.description ? (
286
+ <div className={cn('mt-1', labelBaseCls)}>{leaf.description}</div>
287
+ ) : null}
155
288
  </div>
156
289
  </div>
157
290
  );
@@ -160,100 +293,68 @@ const SectionLeafRenderer = memo(
160
293
  // Stacked layout
161
294
  return (
162
295
  <div className={cn(span, leaf.className, 'flex flex-col')}>
163
- <div className={cn(labelBaseCls, leaf.labelClassName)}>{leaf.label}</div>
164
- <div className={cn(valueBaseCls, leaf.valueClassName)}>{leaf.content}</div>
165
- {leaf.description
166
- ? (
167
- <div className={cn('mt-1', labelBaseCls)}>{leaf.description}</div>
168
- )
169
- : null}
296
+ <div className={cn(labelBaseCls, leaf.labelClassName)}>
297
+ {leaf.label}
298
+ </div>
299
+ <div className={cn(valueBaseCls, leaf.valueClassName)}>
300
+ {leaf.content}
301
+ </div>
302
+ {leaf.description ? (
303
+ <div className={cn('mt-1', labelBaseCls)}>{leaf.description}</div>
304
+ ) : null}
170
305
  </div>
171
306
  );
172
307
  },
173
- (prev, next) => shallowEqualLeaf(prev.leaf, next.leaf) && prev.renderLeaf === next.renderLeaf,
308
+ (prev, next) =>
309
+ shallowEqualLeaf(prev.leaf, next.leaf) &&
310
+ prev.renderLeaf === next.renderLeaf,
174
311
  );
175
312
 
176
- function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLeaf?: (leaf: SectionLeaf) => React.ReactNode }) {
313
+ function SectionNodeRenderer({
314
+ node,
315
+ renderLeaf,
316
+ }: {
317
+ node: SectionNode;
318
+ renderLeaf?: (leaf: SectionLeaf) => React.ReactNode;
319
+ }) {
177
320
  if (node.hidden) return null;
178
321
  const layout = node.layout ?? 'grid';
179
- const containerClass = layout === 'grid' ? gridClasses(node.grid) : layout === 'flex' ? flexClasses(node.flex) : '';
180
-
181
- // Local presentational container replacing FormBuilderSection
182
- const SectionContainer = ({ children }: { children: React.ReactNode }) => {
183
- const title = node.title;
184
- const description = node.subtitle;
185
- const variant = node.variant ?? 'card';
186
- const className = node.className;
187
- const headerClassName = node.headerClassName;
188
- const contentClassName = node.contentClassName;
189
-
190
- const renderHeader = () => {
191
- if (!title && !description) return null;
192
- return (
193
- <div className={cn('space-y-1', headerClassName)}>
194
- {title && <h3 className="text-lg font-medium leading-none">{title}</h3>}
195
- {description && <p className="text-sm text-muted-foreground">{description}</p>}
196
- </div>
197
- );
198
- };
199
-
200
- const renderContent = () => (
201
- <div className={cn('space-y-4', contentClassName)}>
202
- {children}
203
- </div>
204
- );
205
-
206
- switch (variant) {
207
- case 'card':
208
- return (
209
- <Card className={className}>
210
- {(title || description) && (
211
- <CardHeader>
212
- {title && <CardTitle>{title}</CardTitle>}
213
- {description && <CardDescription>{description}</CardDescription>}
214
- </CardHeader>
215
- )}
216
- <CardContent>
217
- {renderContent()}
218
- </CardContent>
219
- </Card>
220
- );
221
- case 'separator':
222
- return (
223
- <div className={cn('space-y-6', className)}>
224
- {(title || description) && (
225
- <>
226
- {renderHeader()}
227
- <Separator />
228
- </>
229
- )}
230
- {renderContent()}
231
- </div>
232
- );
233
- default:
234
- return (
235
- <div className={cn('space-y-6', className)}>
236
- {renderHeader()}
237
- {renderContent()}
238
- </div>
239
- );
240
- }
241
- };
322
+ const containerClass =
323
+ layout === 'grid'
324
+ ? gridClasses(node.grid)
325
+ : layout === 'flex'
326
+ ? flexClasses(node.flex)
327
+ : '';
242
328
 
243
329
  if (layout === 'tabs' && node.tabs && node.tabs.length > 0) {
244
330
  const defaultTabId = node.defaultTabId ?? node.tabs[0]?.id;
245
331
  return (
246
- <SectionContainer>
332
+ <SectionContainer
333
+ title={node.title}
334
+ description={node.subtitle}
335
+ variant={node.variant}
336
+ className={node.className}
337
+ headerClassName={node.headerClassName}
338
+ contentClassName={node.contentClassName}
339
+ >
247
340
  <Tabs defaultValue={defaultTabId} className={cn('space-y-2')}>
248
341
  <TabsList className={cn(node.tabsListClassName)}>
249
342
  {node.tabs.map((tab) => (
250
- <TabsTrigger key={tab.id} value={tab.id} className={cn(tab.className)}>
343
+ <TabsTrigger
344
+ key={tab.id}
345
+ value={tab.id}
346
+ className={cn(tab.className)}
347
+ >
251
348
  {tab.label}
252
349
  </TabsTrigger>
253
350
  ))}
254
351
  </TabsList>
255
352
  {node.tabs.map((tab) => (
256
- <TabsContent key={tab.id} value={tab.id} className={cn(node.tabsContentClassName, tab.contentClassName)}>
353
+ <TabsContent
354
+ key={tab.id}
355
+ value={tab.id}
356
+ className={cn(node.tabsContentClassName, tab.contentClassName)}
357
+ >
257
358
  <SectionNodeRenderer node={tab.node} renderLeaf={renderLeaf} />
258
359
  </TabsContent>
259
360
  ))}
@@ -263,16 +364,32 @@ function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLe
263
364
  }
264
365
 
265
366
  return (
266
- <SectionContainer>
367
+ <SectionContainer
368
+ title={node.title}
369
+ description={node.subtitle}
370
+ variant={node.variant}
371
+ className={node.className}
372
+ headerClassName={node.headerClassName}
373
+ contentClassName={node.contentClassName}
374
+ >
267
375
  <div className={containerClass}>
268
376
  {(node.children ?? []).map((child) => {
269
377
  if (isLeaf(child)) {
270
- return <SectionLeafRenderer key={child.key} leaf={child} renderLeaf={renderLeaf} />;
378
+ return (
379
+ <SectionLeafRenderer
380
+ key={child.key}
381
+ leaf={child}
382
+ renderLeaf={renderLeaf}
383
+ />
384
+ );
271
385
  }
272
386
  if ((child as SectionNode).hidden) return null;
273
387
  return (
274
388
  <div key={(child as SectionNode).id} className="col-span-full">
275
- <SectionNodeRenderer node={child as SectionNode} renderLeaf={renderLeaf} />
389
+ <SectionNodeRenderer
390
+ node={child as SectionNode}
391
+ renderLeaf={renderLeaf}
392
+ />
276
393
  </div>
277
394
  );
278
395
  })}
@@ -281,11 +398,19 @@ function SectionNodeRenderer({ node, renderLeaf }: { node: SectionNode; renderLe
281
398
  );
282
399
  }
283
400
 
284
- export default function SectionBuilder({ sections, className, renderLeaf }: SectionBuilderProps) {
401
+ export default function SectionBuilder({
402
+ sections,
403
+ className,
404
+ renderLeaf,
405
+ }: SectionBuilderProps) {
285
406
  return (
286
407
  <div className={cn('space-y-6', className)}>
287
- {sections.map(section => (
288
- <SectionNodeRenderer key={section.id} node={section} renderLeaf={renderLeaf} />
408
+ {sections.map((section) => (
409
+ <SectionNodeRenderer
410
+ key={section.id}
411
+ node={section}
412
+ renderLeaf={renderLeaf}
413
+ />
289
414
  ))}
290
415
  </div>
291
416
  );
@@ -0,0 +1,85 @@
1
+ import { Fragment, type ReactNode } from 'react';
2
+
3
+ import { cn } from '../../../shadcn/lib/utils';
4
+ import {
5
+ Card,
6
+ CardContent,
7
+ CardDescription,
8
+ CardHeader,
9
+ CardTitle,
10
+ } from '../../../shadcn/ui/card';
11
+ import { Separator } from '../../../shadcn/ui/separator';
12
+ import type { SectionNode } from './types';
13
+
14
+ export type SectionContainerProps = {
15
+ title?: ReactNode;
16
+ description?: ReactNode;
17
+ variant?: SectionNode['variant'];
18
+ className?: string;
19
+ headerClassName?: string;
20
+ contentClassName?: string;
21
+ children: ReactNode;
22
+ };
23
+
24
+ const SectionContainer = ({
25
+ title,
26
+ description,
27
+ variant = 'card',
28
+ className,
29
+ headerClassName,
30
+ contentClassName,
31
+ children,
32
+ }: SectionContainerProps) => {
33
+ const renderHeader = () => {
34
+ if (!title && !description) return null;
35
+
36
+ return (
37
+ <div className={cn('space-y-1', headerClassName)}>
38
+ {title && <h3 className="text-lg font-medium leading-none">{title}</h3>}
39
+ {description && (
40
+ <p className="text-sm text-muted-foreground">{description}</p>
41
+ )}
42
+ </div>
43
+ );
44
+ };
45
+
46
+ const renderContent = () => (
47
+ <div className={cn('space-y-4', contentClassName)}>{children}</div>
48
+ );
49
+
50
+ switch (variant) {
51
+ case 'card':
52
+ return (
53
+ <Card className={className}>
54
+ {(title || description) && (
55
+ <CardHeader>
56
+ {title && <CardTitle>{title}</CardTitle>}
57
+ {description && <CardDescription>{description}</CardDescription>}
58
+ </CardHeader>
59
+ )}
60
+ <CardContent>{renderContent()}</CardContent>
61
+ </Card>
62
+ );
63
+ case 'separator':
64
+ return (
65
+ <div className={cn('space-y-6', className)}>
66
+ {(title || description) && (
67
+ <Fragment>
68
+ {renderHeader()}
69
+ <Separator />
70
+ </Fragment>
71
+ )}
72
+ {renderContent()}
73
+ </div>
74
+ );
75
+ default:
76
+ return (
77
+ <div className={cn('space-y-6', className)}>
78
+ {renderHeader()}
79
+ {renderContent()}
80
+ </div>
81
+ );
82
+ }
83
+ };
84
+
85
+ export default SectionContainer;
@@ -1,9 +1,15 @@
1
1
  import { createContext } from 'react';
2
- import { StackDialogContextInstance } from './types';
2
+ import type { StackDialogContextInstance } from './types';
3
3
 
4
4
  export const StackDialogContext = createContext<StackDialogContextInstance>({
5
5
  activeDialogs: [],
6
- createDialog: () => { throw new Error('createDialog must be called within StackDialogProvider') },
7
- closeDialog: () => { throw new Error('closeDialog must be called within StackDialogProvider') },
8
- closeAllDialogs: () => { throw new Error('closeAllDialog must be called within StackDialogProvider') },
6
+ createDialog: () => {
7
+ throw new Error('createDialog must be called within StackDialogProvider');
8
+ },
9
+ closeDialog: () => {
10
+ throw new Error('closeDialog must be called within StackDialogProvider');
11
+ },
12
+ closeAllDialogs: () => {
13
+ throw new Error('closeAllDialog must be called within StackDialogProvider');
14
+ },
9
15
  });
@@ -3,10 +3,11 @@ import { StackDialogContext } from './context';
3
3
  import type { StackDialogHook } from './types';
4
4
 
5
5
  export function useStackDialog(): StackDialogHook {
6
- const { createDialog, closeDialog, closeAllDialogs } = useContext(StackDialogContext);
6
+ const { createDialog, closeDialog, closeAllDialogs } =
7
+ useContext(StackDialogContext);
7
8
  return {
8
9
  createDialog,
9
10
  closeDialog,
10
11
  closeAllDialogs,
11
- }
12
- }
12
+ };
13
+ }
@@ -1,18 +1,12 @@
1
- export {
2
- StackDialogContext,
3
- } from './context'
1
+ export { StackDialogContext } from './context';
4
2
 
5
- export {
6
- StackDialogContextProvider as StackDialogProvider,
7
- } from './provider'
3
+ export { StackDialogContextProvider as StackDialogProvider } from './provider';
8
4
 
9
- export {
10
- useStackDialog
11
- } from './hooks'
5
+ export { useStackDialog } from './hooks';
12
6
 
13
7
  export type {
14
8
  StackDialogContextInstance,
15
9
  StackDialogCreateConfig,
16
10
  StackDialogHook,
17
- StackDialogInstance
18
- } from './types'
11
+ StackDialogInstance,
12
+ } from './types';