pixelize-design-library 2.4.1-beta.2 → 2.4.1-beta.3

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 (329) hide show
  1. package/dist/Components/Accordion/accordionColors.d.ts.map +1 -1
  2. package/dist/Components/Accordion/accordionColors.js +17 -3
  3. package/dist/Components/Checkbox/Checkbox.styles.d.ts.map +1 -1
  4. package/dist/Components/Checkbox/Checkbox.styles.js +13 -2
  5. package/dist/Components/CustomModulesTable/EditModuleModal.d.ts.map +1 -1
  6. package/dist/Components/CustomModulesTable/EditModuleModal.js +5 -1
  7. package/dist/Components/DatePicker/CalendarPanel.d.ts.map +1 -1
  8. package/dist/Components/DatePicker/CalendarPanel.js +3 -1
  9. package/dist/Components/Editor/joditThemeVars.d.ts.map +1 -1
  10. package/dist/Components/Editor/joditThemeVars.js +9 -0
  11. package/dist/Components/FilePreview/FilePreview.d.ts.map +1 -1
  12. package/dist/Components/FilePreview/FilePreview.js +3 -1
  13. package/dist/Components/FileUploader/FileUploader.js +2 -2
  14. package/dist/Components/FilterSidebar/FilterSidebar.js +1 -1
  15. package/dist/Components/NavigationBar/NavigationBar.d.ts.map +1 -1
  16. package/dist/Components/NavigationBar/NavigationBar.js +10 -6
  17. package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts.map +1 -1
  18. package/dist/Components/OrgSwitcher/OrgSwitcher.js +22 -3
  19. package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts +1 -0
  20. package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts.map +1 -1
  21. package/dist/Components/OrgSwitcher/OrgSwitcherProps.js +3 -3
  22. package/dist/Components/OrganizationDetails/CreateOrgModal.js +6 -4
  23. package/dist/Components/OrganizationDetails/OrganizationDetails.d.ts.map +1 -1
  24. package/dist/Components/OrganizationDetails/OrganizationDetails.js +55 -7
  25. package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts +24 -14
  26. package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts.map +1 -1
  27. package/dist/Components/PlanPill/PlanPill.d.ts +5 -0
  28. package/dist/Components/PlanPill/PlanPill.d.ts.map +1 -0
  29. package/dist/Components/PlanPill/PlanPill.js +41 -0
  30. package/dist/Components/PlanPill/PlanPillProps.d.ts +28 -0
  31. package/dist/Components/PlanPill/PlanPillProps.d.ts.map +1 -0
  32. package/dist/Components/PlanPill/PlanPillProps.js +2 -0
  33. package/dist/Components/Search/Search.d.ts.map +1 -1
  34. package/dist/Components/Search/Search.js +4 -2
  35. package/dist/Components/Select/Select.styles.d.ts.map +1 -1
  36. package/dist/Components/Select/Select.styles.js +29 -20
  37. package/dist/Components/SelectSearch/SelectSearch.js +1 -1
  38. package/dist/Components/SideBar/SecondaryBar.d.ts.map +1 -1
  39. package/dist/Components/SideBar/SecondaryBar.js +10 -2
  40. package/dist/Components/SideBar/SideBar.js +1 -1
  41. package/dist/Components/SideBar/components/MenuItemBox.d.ts.map +1 -1
  42. package/dist/Components/SideBar/components/MenuItemBox.js +7 -6
  43. package/dist/Components/Table/components/tableRowHoverStyle.d.ts +9 -8
  44. package/dist/Components/Table/components/tableRowHoverStyle.d.ts.map +1 -1
  45. package/dist/Components/Table/components/tableRowHoverStyle.js +12 -12
  46. package/dist/Components/Table/settings/ManageColumns.js +2 -2
  47. package/dist/Components/UpgradeButton/UpgradeButton.d.ts.map +1 -1
  48. package/dist/Components/UpgradeButton/UpgradeButton.js +25 -7
  49. package/dist/Components/UserDetails/UserDetails.d.ts.map +1 -1
  50. package/dist/Components/UserDetails/UserDetails.js +5 -2
  51. package/dist/Theme/chakra/componentStyles.d.ts +2 -0
  52. package/dist/Theme/chakra/componentStyles.d.ts.map +1 -1
  53. package/dist/Theme/chakra/componentStyles.js +74 -0
  54. package/dist/Theme/chakra/createBrandTheme.d.ts.map +1 -1
  55. package/dist/Theme/chakra/createBrandTheme.js +47 -0
  56. package/dist/Theme/tokens/brands/index.d.ts.map +1 -1
  57. package/dist/Theme/tokens/brands/index.js +20 -18
  58. package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts.map +1 -1
  59. package/dist/Theme/tokens/brands/zinc/palette.dark.js +4 -2
  60. package/dist/Theme/tokens/builders/outlineRung.d.ts +35 -0
  61. package/dist/Theme/tokens/builders/outlineRung.d.ts.map +1 -0
  62. package/dist/Theme/tokens/builders/outlineRung.js +69 -0
  63. package/dist/Theme/tokens/builders/statusTone.d.ts +35 -0
  64. package/dist/Theme/tokens/builders/statusTone.d.ts.map +1 -0
  65. package/dist/Theme/tokens/builders/statusTone.js +63 -0
  66. package/dist/Utils/planExpiry.d.ts +19 -0
  67. package/dist/Utils/planExpiry.d.ts.map +1 -0
  68. package/dist/Utils/planExpiry.js +61 -0
  69. package/dist/index.d.ts +7 -1
  70. package/dist/index.d.ts.map +1 -1
  71. package/dist/index.js +21 -3
  72. package/package.json +5 -1
  73. package/.claude/settings.local.json +0 -51
  74. package/.cursor/TASK-SETUP.md +0 -43
  75. package/.cursor/agents/be-impl.md +0 -37
  76. package/.cursor/agents/fe-impl.md +0 -39
  77. package/.cursor/agents/task-plan.md +0 -56
  78. package/.cursor/agents/test-create.md +0 -31
  79. package/.cursor/agents/test-exec.md +0 -26
  80. package/.cursor/hooks/task-hint.env +0 -1
  81. package/.cursor/hooks/task-skill-nudge.sh +0 -71
  82. package/.cursor/hooks/task-slash-guard.sh +0 -31
  83. package/.cursor/hooks.json +0 -13
  84. package/.cursor/modules/account-management/MODULE.md +0 -41
  85. package/.cursor/modules/buttons/MODULE.md +0 -47
  86. package/.cursor/modules/cards/MODULE.md +0 -55
  87. package/.cursor/modules/charts/MODULE.md +0 -40
  88. package/.cursor/modules/common/MODULE.md +0 -36
  89. package/.cursor/modules/contact-auth/MODULE.md +0 -19
  90. package/.cursor/modules/data-display/MODULE.md +0 -42
  91. package/.cursor/modules/feedback/MODULE.md +0 -38
  92. package/.cursor/modules/form/MODULE.md +0 -13
  93. package/.cursor/modules/inputs-basic/MODULE.md +0 -42
  94. package/.cursor/modules/inputs-date-file/MODULE.md +0 -67
  95. package/.cursor/modules/inputs-select/MODULE.md +0 -89
  96. package/.cursor/modules/inputs-toggle/MODULE.md +0 -24
  97. package/.cursor/modules/kanban/MODULE.md +0 -22
  98. package/.cursor/modules/layout-navigation/MODULE.md +0 -319
  99. package/.cursor/modules/overlays/MODULE.md +0 -82
  100. package/.cursor/modules/playground/MODULE.md +0 -28
  101. package/.cursor/modules/table/MODULE.md +0 -84
  102. package/.cursor/modules/theme/MODULE.md +0 -431
  103. package/.cursor/modules/types-exports/MODULE.md +0 -17
  104. package/.cursor/modules/utility-ui/MODULE.md +0 -50
  105. package/.cursor/modules/utils-hooks/MODULE.md +0 -35
  106. package/.cursor/pixelize-task-statusline.sh +0 -64
  107. package/.cursor/plans/blocked/.gitkeep +0 -0
  108. package/.cursor/plans/current.md +0 -12
  109. package/.cursor/plans/current.theme-tokens-dark-mode.md +0 -77
  110. package/.cursor/plans/current.theme-tokens-dark.md +0 -155
  111. package/.cursor/plans/done/.gitkeep +0 -0
  112. package/.cursor/rules +0 -31
  113. package/.cursor/skills/task/SKILL.md +0 -167
  114. package/CLAUDE.md +0 -148
  115. package/__mocks__/styleMock.js +0 -8
  116. package/coverage/clover.xml +0 -405
  117. package/coverage/coverage-final.json +0 -16
  118. package/coverage/coverage-summary.json +0 -50
  119. package/coverage/lcov-report/Button/Button.tsx.html +0 -244
  120. package/coverage/lcov-report/Button/index.html +0 -116
  121. package/coverage/lcov-report/Checkbox/Checkbox.tsx.html +0 -433
  122. package/coverage/lcov-report/Checkbox/index.html +0 -116
  123. package/coverage/lcov-report/Common/ErrorMessage.tsx.html +0 -148
  124. package/coverage/lcov-report/Common/FormLabel.tsx.html +0 -331
  125. package/coverage/lcov-report/Common/HelperText.tsx.html +0 -124
  126. package/coverage/lcov-report/Common/index.html +0 -146
  127. package/coverage/lcov-report/Components/Button/Button.tsx.html +0 -244
  128. package/coverage/lcov-report/Components/Button/index.html +0 -116
  129. package/coverage/lcov-report/Components/Checkbox/Checkbox.tsx.html +0 -433
  130. package/coverage/lcov-report/Components/Checkbox/index.html +0 -116
  131. package/coverage/lcov-report/Components/Common/ErrorMessage.tsx.html +0 -148
  132. package/coverage/lcov-report/Components/Common/FormLabel.tsx.html +0 -331
  133. package/coverage/lcov-report/Components/Common/HelperText.tsx.html +0 -124
  134. package/coverage/lcov-report/Components/Common/index.html +0 -146
  135. package/coverage/lcov-report/Components/CustomModulesTable/CustomModulesTable.tsx.html +0 -712
  136. package/coverage/lcov-report/Components/CustomModulesTable/DeleteModuleModal.tsx.html +0 -343
  137. package/coverage/lcov-report/Components/CustomModulesTable/EditModuleModal.tsx.html +0 -313
  138. package/coverage/lcov-report/Components/CustomModulesTable/index.html +0 -146
  139. package/coverage/lcov-report/Components/Divider/Divider.tsx.html +0 -133
  140. package/coverage/lcov-report/Components/Divider/index.html +0 -116
  141. package/coverage/lcov-report/Components/Dropdown/DropDown.tsx.html +0 -994
  142. package/coverage/lcov-report/Components/Dropdown/index.html +0 -116
  143. package/coverage/lcov-report/Components/EmptyState/EmptyState.tsx.html +0 -466
  144. package/coverage/lcov-report/Components/EmptyState/index.html +0 -116
  145. package/coverage/lcov-report/Components/Header/HeaderActions.tsx.html +0 -373
  146. package/coverage/lcov-report/Components/Header/index.html +0 -116
  147. package/coverage/lcov-report/Components/Input/TextInput.tsx.html +0 -487
  148. package/coverage/lcov-report/Components/Input/index.html +0 -116
  149. package/coverage/lcov-report/Components/Input/textInputIconSize.ts.html +0 -205
  150. package/coverage/lcov-report/Components/KanbanBoard/AccountCard.tsx.html +0 -547
  151. package/coverage/lcov-report/Components/KanbanBoard/AccountRow.tsx.html +0 -190
  152. package/coverage/lcov-report/Components/KanbanBoard/KanbanActions/KanbanActions.tsx.html +0 -247
  153. package/coverage/lcov-report/Components/KanbanBoard/KanbanActions/index.html +0 -116
  154. package/coverage/lcov-report/Components/KanbanBoard/KanbanBoard.tsx.html +0 -3598
  155. package/coverage/lcov-report/Components/KanbanBoard/MeasuredItem.tsx.html +0 -283
  156. package/coverage/lcov-report/Components/KanbanBoard/index.html +0 -161
  157. package/coverage/lcov-report/Components/OrganizationDetails/CreateOrgModal.tsx.html +0 -511
  158. package/coverage/lcov-report/Components/OrganizationDetails/DeleteOrgModal.tsx.html +0 -334
  159. package/coverage/lcov-report/Components/OrganizationDetails/OrganizationDetails.tsx.html +0 -1519
  160. package/coverage/lcov-report/Components/OrganizationDetails/index.html +0 -146
  161. package/coverage/lcov-report/Components/RolesPermission/DeleteRoleModal.tsx.html +0 -328
  162. package/coverage/lcov-report/Components/RolesPermission/RolesPermission.tsx.html +0 -1732
  163. package/coverage/lcov-report/Components/RolesPermission/index.html +0 -131
  164. package/coverage/lcov-report/Components/SearchSelect/SearchSelect.tsx.html +0 -2575
  165. package/coverage/lcov-report/Components/SearchSelect/SelectTruncatedLabel.tsx.html +0 -202
  166. package/coverage/lcov-report/Components/SearchSelect/index.html +0 -146
  167. package/coverage/lcov-report/Components/SearchSelect/searchSelectSize.ts.html +0 -496
  168. package/coverage/lcov-report/Components/Select/Select.tsx.html +0 -361
  169. package/coverage/lcov-report/Components/Select/index.html +0 -116
  170. package/coverage/lcov-report/Components/SideBar/components/OtherApps.tsx.html +0 -562
  171. package/coverage/lcov-report/Components/SideBar/components/OverflowTooltipText.tsx.html +0 -346
  172. package/coverage/lcov-report/Components/SideBar/components/index.html +0 -116
  173. package/coverage/lcov-report/Components/SignInActivityTable/SignInActivityTable.tsx.html +0 -490
  174. package/coverage/lcov-report/Components/SignInActivityTable/index.html +0 -116
  175. package/coverage/lcov-report/Components/Table/components/TableActions.tsx.html +0 -595
  176. package/coverage/lcov-report/Components/Table/components/TableBody.tsx.html +0 -2212
  177. package/coverage/lcov-report/Components/Table/components/TableGroupRow.tsx.html +0 -358
  178. package/coverage/lcov-report/Components/Table/components/TableLoading.tsx.html +0 -358
  179. package/coverage/lcov-report/Components/Table/components/index.html +0 -161
  180. package/coverage/lcov-report/Components/Table/settings/ManageColumns.tsx.html +0 -856
  181. package/coverage/lcov-report/Components/Table/settings/index.html +0 -116
  182. package/coverage/lcov-report/Components/Tag/Tag.styles.tsx.html +0 -331
  183. package/coverage/lcov-report/Components/Tag/Tag.tsx.html +0 -256
  184. package/coverage/lcov-report/Components/Tag/index.html +0 -131
  185. package/coverage/lcov-report/Components/ToolTip/ToolTip.tsx.html +0 -286
  186. package/coverage/lcov-report/Components/ToolTip/index.html +0 -116
  187. package/coverage/lcov-report/Components/UserDetails/AddUserModal.tsx.html +0 -709
  188. package/coverage/lcov-report/Components/UserDetails/ChangeRoleModal.tsx.html +0 -505
  189. package/coverage/lcov-report/Components/UserDetails/DeactivateConfirmModal.tsx.html +0 -379
  190. package/coverage/lcov-report/Components/UserDetails/UserDetails.tsx.html +0 -1900
  191. package/coverage/lcov-report/Components/UserDetails/index.html +0 -161
  192. package/coverage/lcov-report/EmptyState/EmptyState.tsx.html +0 -466
  193. package/coverage/lcov-report/EmptyState/index.html +0 -116
  194. package/coverage/lcov-report/Hooks/index.html +0 -116
  195. package/coverage/lcov-report/Hooks/usePreferences.ts.html +0 -421
  196. package/coverage/lcov-report/Input/TextInput.tsx.html +0 -487
  197. package/coverage/lcov-report/Input/index.html +0 -131
  198. package/coverage/lcov-report/Input/textInputIconSize.ts.html +0 -205
  199. package/coverage/lcov-report/KanbanBoard.tsx.html +0 -3481
  200. package/coverage/lcov-report/OrganizationDetails/CreateOrgModal.tsx.html +0 -511
  201. package/coverage/lcov-report/OrganizationDetails/DeleteOrgModal.tsx.html +0 -334
  202. package/coverage/lcov-report/OrganizationDetails/OrganizationDetails.tsx.html +0 -1519
  203. package/coverage/lcov-report/OrganizationDetails/index.html +0 -146
  204. package/coverage/lcov-report/RolesPermission/DeleteRoleModal.tsx.html +0 -328
  205. package/coverage/lcov-report/RolesPermission/RolesPermission.tsx.html +0 -1732
  206. package/coverage/lcov-report/RolesPermission/index.html +0 -116
  207. package/coverage/lcov-report/SearchSelect/SearchSelect.tsx.html +0 -2575
  208. package/coverage/lcov-report/SearchSelect/SelectTruncatedLabel.tsx.html +0 -202
  209. package/coverage/lcov-report/SearchSelect/index.html +0 -146
  210. package/coverage/lcov-report/SearchSelect/searchSelectSize.ts.html +0 -496
  211. package/coverage/lcov-report/Table/CompactSelect.tsx.html +0 -379
  212. package/coverage/lcov-report/Table/Components/ActiveFilters.tsx.html +0 -514
  213. package/coverage/lcov-report/Table/Components/HeaderActions.tsx.html +0 -373
  214. package/coverage/lcov-report/Table/Components/Pagination.tsx.html +0 -574
  215. package/coverage/lcov-report/Table/Components/TableActions.tsx.html +0 -574
  216. package/coverage/lcov-report/Table/Components/TableBody.tsx.html +0 -1027
  217. package/coverage/lcov-report/Table/Components/TableFilters.tsx.html +0 -397
  218. package/coverage/lcov-report/Table/Components/TableHeader.tsx.html +0 -1060
  219. package/coverage/lcov-report/Table/Components/TableLoading.tsx.html +0 -361
  220. package/coverage/lcov-report/Table/Components/TableSearch.tsx.html +0 -337
  221. package/coverage/lcov-report/Table/Components/index.html +0 -266
  222. package/coverage/lcov-report/Table/Components/useDebounce.ts.html +0 -178
  223. package/coverage/lcov-report/Table/Components/useTable.ts.html +0 -778
  224. package/coverage/lcov-report/Table/LeftFilterPane.tsx.html +0 -1810
  225. package/coverage/lcov-report/Table/SelectOperationControls.tsx.html +0 -178
  226. package/coverage/lcov-report/Table/Table.tsx.html +0 -1567
  227. package/coverage/lcov-report/Table/TableProps.tsx.html +0 -658
  228. package/coverage/lcov-report/Table/TableSettings/ManageColumns.tsx.html +0 -619
  229. package/coverage/lcov-report/Table/TableSettings/TableFilters.tsx.html +0 -229
  230. package/coverage/lcov-report/Table/TableSettings/TableSettings.tsx.html +0 -532
  231. package/coverage/lcov-report/Table/TableSettings/index.html +0 -146
  232. package/coverage/lcov-report/Table/TableToDo.tsx.html +0 -973
  233. package/coverage/lcov-report/Table/TextOperationControls.tsx.html +0 -271
  234. package/coverage/lcov-report/Table/filterTypes.ts.html +0 -97
  235. package/coverage/lcov-report/Table/index.html +0 -176
  236. package/coverage/lcov-report/Table/settings/ManageColumns.tsx.html +0 -856
  237. package/coverage/lcov-report/Table/settings/index.html +0 -116
  238. package/coverage/lcov-report/Tag/Tag.tsx.html +0 -256
  239. package/coverage/lcov-report/Tag/index.html +0 -116
  240. package/coverage/lcov-report/Theme/buildBrandTokens.ts.html +0 -175
  241. package/coverage/lcov-report/Theme/chartColorsFromTheme.ts.html +0 -214
  242. package/coverage/lcov-report/Theme/index.html +0 -131
  243. package/coverage/lcov-report/Theme/useCustomTheme.ts.html +0 -100
  244. package/coverage/lcov-report/ToolTip/ToolTip.tsx.html +0 -286
  245. package/coverage/lcov-report/ToolTip/index.html +0 -116
  246. package/coverage/lcov-report/UserDetails/AddUserModal.tsx.html +0 -709
  247. package/coverage/lcov-report/UserDetails/ChangeRoleModal.tsx.html +0 -505
  248. package/coverage/lcov-report/UserDetails/index.html +0 -116
  249. package/coverage/lcov-report/Utils/functions.ts.html +0 -106
  250. package/coverage/lcov-report/Utils/index.html +0 -116
  251. package/coverage/lcov-report/Utils/table.ts.html +0 -1189
  252. package/coverage/lcov-report/base.css +0 -224
  253. package/coverage/lcov-report/block-navigation.js +0 -87
  254. package/coverage/lcov-report/favicon.png +0 -0
  255. package/coverage/lcov-report/index.html +0 -251
  256. package/coverage/lcov-report/prettify.css +0 -1
  257. package/coverage/lcov-report/prettify.js +0 -2
  258. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  259. package/coverage/lcov-report/sorter.js +0 -210
  260. package/coverage/lcov.info +0 -981
  261. package/dist/Theme/Dark/theme.d.ts +0 -3
  262. package/dist/Theme/Dark/theme.d.ts.map +0 -1
  263. package/dist/Theme/Dark/theme.js +0 -277
  264. package/dist/Theme/Default/palette.d.ts +0 -375
  265. package/dist/Theme/Default/palette.d.ts.map +0 -1
  266. package/dist/Theme/Default/palette.js +0 -306
  267. package/dist/Theme/Default/theme.d.ts +0 -3
  268. package/dist/Theme/Default/theme.d.ts.map +0 -1
  269. package/dist/Theme/Default/theme.js +0 -19
  270. package/dist/Theme/Emerald/palette.d.ts +0 -375
  271. package/dist/Theme/Emerald/palette.d.ts.map +0 -1
  272. package/dist/Theme/Emerald/palette.js +0 -125
  273. package/dist/Theme/Emerald/theme.d.ts +0 -3
  274. package/dist/Theme/Emerald/theme.d.ts.map +0 -1
  275. package/dist/Theme/Emerald/theme.js +0 -19
  276. package/dist/Theme/Meadow/palette.d.ts +0 -375
  277. package/dist/Theme/Meadow/palette.d.ts.map +0 -1
  278. package/dist/Theme/Meadow/palette.js +0 -123
  279. package/dist/Theme/Meadow/theme.d.ts +0 -3
  280. package/dist/Theme/Meadow/theme.d.ts.map +0 -1
  281. package/dist/Theme/Meadow/theme.js +0 -19
  282. package/dist/Theme/Radiant/palette.d.ts +0 -375
  283. package/dist/Theme/Radiant/palette.d.ts.map +0 -1
  284. package/dist/Theme/Radiant/palette.js +0 -125
  285. package/dist/Theme/Radiant/theme.d.ts +0 -3
  286. package/dist/Theme/Radiant/theme.d.ts.map +0 -1
  287. package/dist/Theme/Radiant/theme.js +0 -19
  288. package/dist/Theme/Rosewood/palette.d.ts +0 -375
  289. package/dist/Theme/Rosewood/palette.d.ts.map +0 -1
  290. package/dist/Theme/Rosewood/palette.js +0 -125
  291. package/dist/Theme/Rosewood/theme.d.ts +0 -3
  292. package/dist/Theme/Rosewood/theme.d.ts.map +0 -1
  293. package/dist/Theme/Rosewood/theme.js +0 -19
  294. package/dist/Theme/Skyline/palette.d.ts +0 -375
  295. package/dist/Theme/Skyline/palette.d.ts.map +0 -1
  296. package/dist/Theme/Skyline/palette.js +0 -123
  297. package/dist/Theme/Skyline/theme.d.ts +0 -3
  298. package/dist/Theme/Skyline/theme.d.ts.map +0 -1
  299. package/dist/Theme/Skyline/theme.js +0 -19
  300. package/dist/Theme/Slate/palette.d.ts +0 -375
  301. package/dist/Theme/Slate/palette.d.ts.map +0 -1
  302. package/dist/Theme/Slate/palette.js +0 -123
  303. package/dist/Theme/Slate/theme.d.ts +0 -3
  304. package/dist/Theme/Slate/theme.d.ts.map +0 -1
  305. package/dist/Theme/Slate/theme.js +0 -19
  306. package/dist/Theme/buildBrandTokens.d.ts +0 -16
  307. package/dist/Theme/buildBrandTokens.d.ts.map +0 -1
  308. package/dist/Theme/buildBrandTokens.js +0 -33
  309. package/dist/Theme/chartColorsFromTheme.d.ts +0 -19
  310. package/dist/Theme/chartColorsFromTheme.d.ts.map +0 -1
  311. package/dist/Theme/chartColorsFromTheme.js +0 -34
  312. package/dist/Theme/common.d.ts +0 -167
  313. package/dist/Theme/common.d.ts.map +0 -1
  314. package/dist/Theme/common.js +0 -112
  315. package/dist/Theme/componentStyles.d.ts +0 -10
  316. package/dist/Theme/componentStyles.d.ts.map +0 -1
  317. package/dist/Theme/componentStyles.js +0 -19
  318. package/dist/Theme/fonts.d.ts +0 -37
  319. package/dist/Theme/fonts.d.ts.map +0 -1
  320. package/dist/Theme/fonts.js +0 -41
  321. package/dist/Theme/space.d.ts +0 -34
  322. package/dist/Theme/space.d.ts.map +0 -1
  323. package/dist/Theme/space.js +0 -35
  324. package/dist/Theme/theme.d.ts +0 -3
  325. package/dist/Theme/theme.d.ts.map +0 -1
  326. package/dist/Theme/theme.js +0 -12
  327. package/eslint.config.js +0 -48
  328. package/index.html +0 -13
  329. package/vite.config.ts +0 -13
package/.cursor/modules/inputs-select/MODULE.md DELETED
@@ -1,89 +0,0 @@
1
- # Select & Search
2
-
3
- ## Purpose
4
-
5
- Select, SelectV2, SearchSelect, SelectSearch, MultiSelect, Dropdown, Search.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Select/`, `SelectV2/`, `SearchSelect/`, `SelectSearch/`, `MultiSelect/`, `Dropdown/`, `Search/`
10
-
11
- ## Key rules
12
-
13
- - SearchSelect has performance tests; virtualize for large lists
14
- - Dropdown and SearchSelect main options menu are portaled to `<body>` (`position: fixed`) and clamp to the viewport — right-align/flip above when near edges
15
- - `insideSelect` prefix: mutually exclusive with main dropdown; menu uses `position: fixed`, flips above/below based on viewport space, and re-anchors on scroll/resize; supports `placeholder` when no value
16
-
17
- ## Dark mode
18
-
19
- SearchSelect and SelectSearch source every color from `useCustomTheme()` or a palette-backed Chakra scale literal — no hex in source — so they follow the active light/dark palette.
20
-
21
- - Menu/panel surfaces use `colors.background[50]`, never `colors.white` — `white` is a foreground token (label on a filled button) and stays white in dark. The portaled menus are no exception: a portal escapes the DOM, not the theme
22
- - Chakra scale literals (`gray.300`) are palette-backed — the Chakra theme's `colors` *is* the palette — but the literal `bg="white"` hits the same foreground-token trap as `colors.white`
23
- - Lucide icons default to `currentColor` (a bare `<ChevronDown />` inherits the wrapper's `color`), but an explicit `color` prop is a raw CSS string — a scale name like `"gray.500"` won't resolve there; pass a token value
24
- - Known gap: SearchSelect's "Remove All" X passes `colors.black`, which is untouched in dark, on a `gray[50]` control (L10 in dark) — near-invisible; needs a text token
25
- - Control borders (`MultiSelect`, `Select.styles`, `SelectSearch`) bumped `boxborder` step [500]/[700] to **[800]**: WCAG 1.4.11 needs a 3:1 contrast ratio against any named surface up to `muted` (lightest) — [500]/[700] failed there, [800] clears all with margin (see inline comments at each call site)
26
- - Known behavior change: SearchSelect's inside-select placeholder text dropped the `theme.colors.placeholder?.[500] ?? theme.colors.gray[500]` fallback for a flat `theme.colors.gray[500]` — still a valid token, but only the lavender brand defines a distinct `placeholder` scale (other brands inherit it via spread), so lavender's placeholder text loses its tint and now renders plain gray
27
- - SearchSelect's "Remove All" tooltip dropped its explicit `bg`/`color` overrides, now rendering with ToolTip's own default styling instead of a forced `gray[600]`/`white`
28
-
29
- ## SelectV2 — custom-popup dropdown (additive, new)
30
-
31
- **Why it exists:** the existing `Select` (`src/Components/Select/`) wraps Chakra's `<Select>`, which
32
- renders a **real native `<select>`/`<option>`** — the closed field is themeable, but the open dropdown
33
- popup is painted by the browser's own UA stylesheet, not React. That means it can never get custom
34
- option rendering, hover states beyond OS defaults, or type-ahead filtering — the popup is architecturally
35
- outside Chakra/React's control (same class of gap as the native `color-scheme` bug documented in the
36
- theme MODULE.md, Wave H). `SelectV2` is a MUI-style alternative: a fully React-rendered popup, so every
37
- visual state (hover, selected, focus, disabled) is themeable via `useCustomTheme()`.
38
-
39
- **This is purely additive.** `Select.tsx`/`SelectProps.ts`/`Select.styles.ts` were not touched — existing
40
- consumer apps see **zero behavior change** on upgrading `pixelize-design-library`, whether or not they
41
- ever adopt `SelectV2`. New work should prefer `SelectV2`; old call sites can keep using `Select`
42
- indefinitely, with no forced migration.
43
-
44
- - **Path:** `src/Components/SelectV2/` — `SelectV2.tsx`, `SelectV2Props.ts`, `SelectV2.test.tsx`.
45
- - **Built from existing primitives only** — Chakra `Popover`/`PopoverTrigger`/`PopoverContent` (already
46
- globally dark-mode-patched via `Theme/chakra/Popover.styles.ts`, Wave H) plus plain React state. No new
47
- dependency added (no react-select/downshift/MUI) — bundle size and dependency surface are unchanged for
48
- every consumer.
49
- - **Prop shape mirrors `Select`** for easy future migration: `options: {id, label}[]`, `value`,
50
- `onChange(option | undefined)`, `placeholder`, `label`, `error`, `errorMessage`, `helperText`,
51
- `isDisabled`, `isRequired`, `size` (`sm`/`md`/`lg`, same px/height scale as `Select.styles.ts`). Not
52
- identical — e.g. no `variant`/`colorScheme` passthrough — since it isn't a drop-in wrapper.
53
- - **`data-testid`** is forwarded to the trigger button (same element as `role="combobox"`), so a
54
- `Select` call site's existing `getByTestId(...)` query keeps working after switching to `SelectV2`.
55
- - **Multi-select** via `isMulti` (discriminated union in `SelectV2Props`): `value` becomes
56
- `(string|number)[]`, `onChange` receives the full `OptionProp[]` selection, each row renders a checkbox,
57
- and the popup stays open across picks (`resetAndClose` skips closing on `isMulti`). Trigger shows the
58
- joined labels, or `"N selected"` past `maxLabelsBeforeSummary` (default 2).
59
- - **Custom option/row/trigger content**: `option.icon` + `option.description` give a built-in
60
- icon+label+description row layout with no extra work; `renderOption(option, {isSelected, isActive})`
61
- takes full control of a row (badges, avatars, arbitrary JSX) when that's not enough; `renderValue(selected)`
62
- does the same for the trigger's content. All optional — omit for the original plain-text behavior.
63
- - **`defaultOpen`**: opens the popover immediately on mount instead of waiting for a click — for
64
- inline-edit patterns (a table cell that swaps to a select the instant it becomes editable, replacing a
65
- native `<select autoFocus>`). Click-away still closes it via `Popover`'s own close-on-blur, firing `onBlur`.
66
- - **Type-ahead filtering** built in (`isSearchable`, defaults `true`): a text input at the top of the
67
- popup filters `options` client-side by substring match on `label`. Set `isSearchable={false}` to hide
68
- it (still fully keyboard-navigable without it).
69
- - **Keyboard/ARIA:** trigger is `role="combobox"` with `aria-haspopup="listbox"`/`aria-expanded`/
70
- `aria-controls`; popup list is `role="listbox"` with `role="option"`/`aria-selected` items. ArrowDown/
71
- ArrowUp move the active option (wraps at both ends), Enter selects, Escape closes without selecting,
72
- Tab closes and lets focus move on. Reuses Chakra's `Popover` focus/outside-click handling rather than
73
- reimplementing it.
74
- - **Styling:** trigger box uses `Components/Common/fieldStyles.ts`'s `getFieldStateStyles()` — the same
75
- shared border/focus/error visual standard as `Select`, `SearchSelect`, `MultiSelect` — so a `SelectV2`
76
- sits visually consistent next to any of them. Popup surface/list follow the same token conventions as
77
- `Dropdown`'s portaled menu (`background[50]`, `boxborder[200]`, `primary.opacity[8]` hover).
78
- - **Known gap / fast-follow:** no virtualization — fine for typical option-list sizes (tens to low
79
- hundreds); for very large lists prefer `SearchSelect`, which already has performance tests and
80
- virtualizes.
81
- - **Popup clipped inside `overflow:hidden` ancestors (user-reported, fixed).** `PopoverContent` wasn't
82
- wrapped in Chakra's `<Portal>`, so it rendered inline in the DOM — any ancestor with
83
- `overflow: hidden` (e.g. the library's own `Card variant="elevated"`, used throughout consumer
84
- apps' settings/detail pages) visually clipped the open popup to whatever space was left below the
85
- trigger. Symptom looked like a filtering bug (a 3-option list showing only the first option by
86
- default, but showing correctly once typed down to 1 match) when it was actually the same content
87
- height fitting inside the clipped region either way — the filter never changed. `Dropdown` and
88
- `SearchSelect` already portal their menus for exactly this reason (see "Key rules" above); `SelectV2`
89
- now does too.
package/.cursor/modules/inputs-toggle/MODULE.md DELETED
@@ -1,24 +0,0 @@
1
- # Toggles
2
-
3
- ## Purpose
4
-
5
- Checkbox, RadioButton, Switch, Slider, Toggle/TableToggle.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Checkbox/`, `RadioButton/`, `Switch/`, `Slider/`, `Toggle/`
10
-
11
- ## Key rules
12
-
13
- - RadioButtonGroup for grouped radios
14
-
15
- ## Dark-mode / contrast fixes
16
-
17
- - `Checkbox`: label tooltip now uses the shared `ToolTip` component instead of raw Chakra `Tooltip` with hardcoded `gray[600]`/`white` — `ToolTip` resolves a dark-mode-aware surface itself.
18
- - `Toggle/TableToggle`: selected-tab label color changed from `theme.colors.black` (mode-invariant) to `theme.colors.text[900]` (mode-adaptive). Real bug fix: `black` was rendered on `background[50]`, which is near-black in dark mode — black-on-near-black was invisible; `text[900]` flips to near-white in dark mode.
19
- - **`Slider`/`Switch` thumb bug (theme-level fix):** Chakra's own thumb baseStyle for both
20
- hardcodes `bg: "white"` with **no** `_dark` gate at all (unlike most other components in this
21
- sweep), so every bare `<SliderThumb>`/`<Switch>` rendered a literal white circle/knob on the
22
- dark canvas regardless of mode. Fixed centrally in `Theme/chakra/Slider.styles.ts` and
23
- `Switch.styles.ts` (registered in `componentStyles.ts`), each overriding the thumb part's `bg`
24
- to `theme.colors.backgroundColor?.light ?? theme.colors.background?.[50]`.
package/.cursor/modules/kanban/MODULE.md DELETED
@@ -1,22 +0,0 @@
1
- # Kanban
2
-
3
- ## Purpose
4
-
5
- KanbanBoard with drag-and-drop columns and KanbanActions.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/KanbanBoard/`, `KanbanActions/`
10
- - Tests: `KanbanBoard.test.tsx`, `AccountCard.test.tsx`
11
-
12
- ## Key rules
13
-
14
- - Uses @hello-pangea/dnd; MeasuredItem for layout
15
-
16
- ## Dark mode
17
-
18
- - **KanbanBoard.test.tsx** mocked theme extended with a full `secondary` ramp (`600`-`900`) and
19
- `backgroundColor.main`, for parity with other components' test mocks in this refactor pass.
20
- **Known gap:** neither field is actually read by `KanbanBoard.tsx` or its subcomponents today —
21
- this is inert test-fixture parity, not new dark-mode test coverage. KanbanBoard itself was not
22
- touched in this pass.
package/.cursor/modules/layout-navigation/MODULE.md DELETED
@@ -1,319 +0,0 @@
1
- # Layout & Navigation
2
-
3
- ## Purpose
4
-
5
- Accordion, Breadcrumbs, NavigationBar, SideBar, Header, Drawer, FilterSidebar,
6
- WorkspaceWindow.
7
-
8
- ## Key paths
9
-
10
- - `src/Components/Accordion/`, `Breadcrumbs/`, `NavigationBar/`, `SideBar/`, `Header/`, `Drawer/`, `FilterSidebar/`, `WorkspaceWindow/`
11
-
12
- ## Key rules
13
-
14
- - SideBar/Header have sub-`components/` folders
15
- - Used by crm-frontend, account-frontend sidebars
16
-
17
- ## Dark mode
18
-
19
- FilterSidebar, WorkspaceWindow and WorkspaceTrayPreview read surfaces from
20
- `useCustomTheme()` and follow the active palette. Chakra string tokens (`gray.50`) already
21
- resolve through the swapped palette — only `white` had to change, because `colors.white` is
22
- a **foreground** token that stays white in dark. White surfaces are now
23
- `colors.background[50]` (FilterSidebar thumbs / value bubbles / min-max rows / panel,
24
- WorkspaceWindow shell, WorkspaceTrayPreview popover).
25
-
26
- `WorkspaceWindow` calls `useCustomTheme()` **before** its `state === "minimized"` early
27
- return — after it, hook order would change when the window reopens.
28
-
29
- **First real consumer: tickets (user-reported dark-mode gaps + first adoption).** `WorkspaceWindow`/
30
- `WorkspaceTray`/`WorkspaceTrayPreview` existed but had no consumer yet; tickets' own hand-rolled
31
- floating-ticket-window/tray/hover-preview (`core/workspace/`) was migrated onto these, and the
32
- migration surfaced real gaps the "dark-mode checked" note above didn't cover — the control-bar
33
- `bg="gray.50"`/`borderColor="gray.100"`/title `color="gray.700"` and the tray pill's
34
- `bg/color/borderColor="blue.100/700/200"` were still **hardcoded literals**, not
35
- `useCustomTheme()` tokens, so they didn't actually follow brand/dark-mode. Fixed to
36
- `theme.colors.background?.[100]`/`boxborder?.[200]`/`text?.[700]` (window chrome, same pattern as
37
- `AiLauncher`) and `theme.colors.primary?.[100/700/200]` (tray pill, matching tickets' own prior
38
- token usage). `WorkspaceTrayPreview`'s card wrapper had the same gap (`borderColor="gray.200"`,
39
- `color="gray.800"`) — same fix.
40
- - **`onOverlayClick?: () => void`** added to `WorkspaceWindowProps` — with `size="full"` the
41
- transparent `ModalContent` covers the viewport so Chakra's own `closeOnOverlayClick` never fires;
42
- the parent needs its own "clicked the blurred backdrop" signal (tickets uses it to minimize
43
- rather than close, preserving unsaved edits). `WorkspaceWindow` detects this itself
44
- (`onMouseDown` + `e.target === e.currentTarget` on `ModalContent`) and also exposes
45
- `${testId}-backdrop`.
46
- - **`renderItem?: (item, {restore, close}) => ReactNode`** added to `WorkspaceTrayProps` — full
47
- override for one tray item's pill markup, for a consumer that needs to wrap the pill in its own
48
- logic (tickets wraps it in a ticket-fetching hover preview, `TrayTabPreview`) while still reusing
49
- the tray's positioned/wrap-reverse container. Omit it for the plain built-in pill.
50
- - Tickets' `TrayTabPreview` now delegates the hover-bridge timer/positioning entirely to
51
- `WorkspaceTrayPreview` (`onOpenChange` gates the ticket fetch) and only supplies the ticket-specific
52
- `preview` content — the timer/placement logic that used to be duplicated in the app is gone from
53
- there now.
54
-
55
- ### Header, NavigationBar, FilterSidebar — WCAG/dark pass
56
-
57
- - **Header.tsx** — default (no explicit `colors` prop) styling changed: `bg` now
58
- `themeColor.sidebar.background[500]` (was `gray[700]`), `color`/`hoverText` now
59
- `themeColor.white` (was `background[100]`/`text[600]`), `activeBg` now computed via
60
- `accentTextOnCanvas(themeColor.primary, bg)` (was fixed `primary[400]`), `hoverBg` now
61
- `sidebar.background[400]` (was `gray[500]`). **Visible behavior change** for any consumer
62
- not passing an explicit `colors` prop — not just an internal refactor.
63
- - **Header/HeaderActions.tsx** (the Header's own action bar — distinct from
64
- `Table/components/HeaderActions.tsx`) — "Edit Layout"/"Create New" label ink now
65
- `accentTextOnCanvas(colors?.secondary, colors?.backgroundColor?.main)` (was fixed
66
- `secondary[500]`); its test mock theme expanded with a full `secondary` ramp +
67
- `backgroundColor.main` to match.
68
- - **NavigationBar.tsx** — brand text label (`navigationBarText`) ink now
69
- `accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light)` (was fixed
70
- `secondary[500]`). Its profile/account `MenuList` also sets
71
- `sx={{ "--menu-bg": theme.colors.backgroundColor.light }}` — same Chakra CSS-var fix as
72
- `ButtonGroupIcon` (buttons module): Chakra's `MenuItem` baseStyle hardcodes `--menu-bg` to
73
- white, gated behind `_dark`, which this app's theme-swap dark mode never triggers. Now also
74
- covered app-wide by the theme-level `Menu` style override (`Theme/chakra/Menu.styles.ts`, theme
75
- module Wave G) — this per-call-site `sx` is redundant but harmless alongside it.
76
- - **FilterSidebar.tsx** — section-label tooltip swapped from raw Chakra `Tooltip` (hardcoded
77
- `bg={gray[600]}`/`color={white}`) to the library's `ToolTip` (token-driven); search-input
78
- `borderColor` now `theme.colors.boxborder?.[800] ?? gray[200]` — plain `gray[200]` fails
79
- WCAG 1.4.11 (≥3.0 non-text contrast) as a control boundary in dark mode.
80
- - **desktopMenu.tsx / Header.tsx `activeBg` (QA-caught, blocking)** — `activeBg` was computed via
81
- `accentTextOnCanvas(themeColor.primary, bg)`, which picks its search direction from the canvas's
82
- darkness and assumes that always means a dark-mode-shaped scale (50 darkest -> 900 lightest).
83
- Header's sidebar canvas is always dark regardless of app mode (`buildDarkPalette` leaves `sidebar`
84
- unchanged), but `primary` still follows the active app mode — in light mode it's light-mode-shaped
85
- (50 lightest -> 900 darkest), so walking toward 900 walked toward darker, not lighter, landing
86
- near-black (lavender measured ~1.09 contrast, well under WCAG 1.4.11's 3:1 non-text bar). Since
87
- this same value drove both the active-tab underline (`borderBottom`) and the submenu row highlight
88
- (`bg`), and a separate fix removed `activeBg` from *text* color for the identical reason, the
89
- underline became the only remaining active-state signal — and it was invisible. Fixed with a new
90
- local `pickActiveAccent` (exported from `Header.tsx`, not added to the shared `accentText.ts` — this
91
- need is specific to a canvas that never inverts with app mode) that detects the scale's own
92
- direction from its own data (`primary[50]` vs `primary[900]` luminance) instead of the canvas,
93
- walking toward whichever end is actually lighter and preferring the rung closest to `[500]` that
94
- clears 3:1. Verified computationally correct across all 7 brands x both app modes (`Header.test.tsx`).
95
- The submenu row's label ink also switched from static `text[800]` (tuned for the `background[50]`
96
- canvas, not the `activeBg` fill the active row switches to) to `onFilled(activeBg, white, black)`,
97
- which is provably >=4.5 against any fill regardless of which rung `pickActiveAccent` picks.
98
- - **Drawer.tsx surface bug — now fixed at the theme level.** Same bug class as `Modal`/
99
- `AlertDialog` (overlays module): Chakra's own `Drawer` baseStyle hardcodes `--drawer-bg` to
100
- `colors.white` on the `dialog` part, gated behind a `_dark` this app's theme-swap dark mode
101
- never triggers. Fixed centrally in `Theme/chakra/Drawer.styles.ts` (registered as `Drawer` in
102
- `componentStyles.ts`), mirroring `Modal.styles.ts` — covers every `DrawerContent` app-wide. An
103
- earlier pass's per-call-site `bg={colors?.background?.[50]}` fix is now redundant but harmless.
104
- - **FilterSidebar.tsx WCAG pass (Wave D, QA-driven)** — two real AA/graphical-object failures
105
- found beyond the surface bug above: the min/max price selected-row checkmark icon (`red[600]`
106
- on its own `red[100]` fill, ≈2.89:1, fails the 3:1 non-text bar) now uses
107
- `onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black)` (resolves to black,
108
- ≈13.96:1); the star-rating icon's `color`/`fill` (`orange[500]` on `background[50]`, ≈2.22:1)
109
- now both use `accentTextOnCanvas(theme.colors.orange, <row's actual canvas>)` (resolves to
110
- `orange[800]`, ≈6.33:1) — the canvas mirrors the row's own `bg` ternary (`red[50]` when that
111
- rating is the active filter, `background[50]` otherwise; a code-review catch — the first pass
112
- always computed against `background[50]` even on the selected row). All other `red`/`orange`
113
- usages in this file (row backgrounds, `borderLeftColor`, focus border) are decorative/border
114
- roles and were left unchanged.
115
- - **Two `PopoverContent`s missed by the same QA pass (code-review catch, same file):** the
116
- min/max price value-list popovers had no `bg=`, hitting the identical
117
- Chakra-hardcoded-`colors.white`-behind-`_dark` bug as `Modal`/`AlertDialog`/`Drawer` — just on
118
- `PopoverContent`'s baseStyle (`var(--popper-bg)`) instead of Modal's. Fixed with
119
- `bg={theme.colors.background[50]}` on both, same pattern already used for `MoreItems`/
120
- `OrgSwitcher`/`NavigationBar` popovers elsewhere in the library.
121
- - **Checkbox/option/popover-row hover invisible in dark mode (QA follow-up round, fixed):** all 5
122
- `_hover={{ bg: theme.colors.gray[50] }}` spots in this file (min/max price rows, rating rows, the
123
- filter-option checkbox row, the accordion trigger) used `gray[50]`, a pale near-white tint in
124
- light mode that — once the whole `gray` scale flips for dark — lands within ~1 lightness point of
125
- the dark canvas (~1.08:1 contrast, computed), reading as no hover at all. As a side effect this
126
- also silently fixed the `cards`-variant tautology where the accordion button's own resting
127
- background (`customStyles.buttonStyle.background`, line ~680) equaled its hover token exactly —
128
- hovering a `cards`-variant button visibly did nothing. Fixed via a new pure helper,
129
- `getFilterHoverBg(colors, isDark)` (`filterHoverStyle.ts`, mirrors `Editor/joditThemeVars.ts`'s
130
- pattern) — dark mode now uses `gray[300]` (~2.3:1 against the canvas, clearly visible) which still
131
- keeps the existing `gray[700]`/`gray[800]` row text at/above AA (~4.9:1+) on top of it, so — unlike
132
- the Table row-hover fix — no text-color flip was needed here. Light mode is untouched (`gray[50]`).
133
- Regression tests: `filterHoverStyle.test.ts` (lavender + rosewood).
134
- - **Accordion section-header hover still invisible after the fix above (QA retest follow-up):**
135
- the 5th spot (the accordion trigger row itself) kept showing no hover change even after
136
- `getFilterHoverBg` fixed the other 4. Traced two real, distinct issues in `Accordion.tsx` (not
137
- FilterSidebar): (1) its own `expandedBg`/`softHover` defaults — `primary.opacity[8]` composited
138
- over the dark canvas, and `table.hover[100]`/`gray[50]` — both collapse to ~1.07-1.09:1
139
- (verified numerically), so any Accordion consumer relying on these un-overridden defaults gets an
140
- invisible expanded-state tint and hover in dark mode; (2) FilterSidebar's own header override
141
- (`buttonProps._hover: { bg: hoverBg }`) was verified via direct CSSOM inspection to compile into a
142
- correct `:hover` rule with the right color even with FilterSidebar's exact `customStyles`
143
- shape — the mechanism itself checked out. Fixed (1) with a new pure helper,
144
- `getAccordionHoverColors(colors, isDark)` (`Accordion/accordionColors.ts`, same pattern as
145
- `Editor/joditThemeVars.ts` / `FilterSidebar/filterHoverStyle.ts`): dark mode now uses `gray[200]`
146
- for both (opaque, ~1.6:1 against canvas — visibly present but a step below the `gray[300]`
147
- active-hover fill FilterSidebar/Table already use), light mode unchanged. Reinforced (2) as
148
- belt-and-suspenders: FilterSidebar's `customStyles.hoverbuttonStyle` now also sets
149
- `{ background: hoverBg }`, reasserting the same fill via the `sx` path so the header hover
150
- doesn't depend on a single prop-merge route. Regression tests: `accordionColors.test.ts`
151
- (lavender + rosewood). Note: jsdom cannot simulate real `:hover` rendering, so this was verified
152
- via computed contrast + direct CSSOM rule inspection, not a live click-test; a real-browser
153
- Playwright re-check afterward confirmed the fix applies correctly (`rgba(0,0,0,0)` →
154
- `gray[300]` on hover, both brands, reverting on mouse-away).
155
- - **`Accordion.tsx`/`FilterSidebar.tsx` perf pass:** the new `getAccordionHoverColors`/
156
- `getFilterHoverBg` calls above are now wrapped in `useMemo` (keyed on `theme.colors`/`isDark`),
157
- matching the existing memoization pattern in `Table/components/TableBody.tsx` — avoids
158
- recomputing the color object on every render.
159
-
160
- ### SideBar — active-icon/label dark-mode fix (user-reported via screenshot, blocking)
161
-
162
- `MenuItemBox.tsx`, `MenuPopoverContent.tsx`, `SecondaryBar.tsx`, and `SideBar.tsx` all read the
163
- active/accent icon and label color from `theme.colors.primary[300]`/`[100]` directly. That's
164
- correct in light mode, but breaks in dark mode: `sidebar.background` **never inverts** across
165
- modes (`buildDarkPalette.ts` keeps `sidebar: light.sidebar` — it's already near-black in light
166
- mode), while `primary`'s every rung **does** invert (`toDarkRamp`/`liftAccent`, correct for
167
- badge/tag consumers whose surface inverts alongside them). Pairing an inverted `primary[300]`/
168
- `[100]` with a canvas that stayed put produces near-black text/icons on an already-dark rail —
169
- only the checked/lavender-selected item stayed legible, everything else read as invisible
170
- (exactly the user's report: "only selected lavender is visible to my eyes").
171
-
172
- Presented 3 fix options via an artifact (pinned-light accent / Header's `pickActiveAccent`
173
- pattern / a dedicated non-inverting SideBar accent scale) — user chose **pinned-light accent**.
174
- Fixed with a new pure helper + hook, `src/Components/SideBar/sidebarAccentColors.ts`
175
- (`getSidebarActiveAccent` / `useSidebarActiveAccent`, same pure-function + `useMemo` pattern as
176
- `accordionColors.ts`/`filterHoverStyle.ts`): in dark mode it reuses each rung's own **light-mode**
177
- value (`lightPalettes[brand].primary[300]`/`[100]`) instead of the dark-inverted one — provably
178
- correct because the canvas behind it is identical in both modes, so whatever already clears
179
- contrast in light mode still clears it in dark mode with the same foreground value. Falls back to
180
- the current (still-broken) rung if `brand` is unavailable (a consumer on a plain `ChakraProvider`,
181
- where dark mode never activates anyway) rather than crashing — `brand` is read via
182
- `useContext(ThemeModeContext)` directly, not the throwing `useThemeMode()`, since this hook must
183
- degrade gracefully outside `PixelizeThemeProvider`.
184
-
185
- Wired at every active/accent-icon usage: `MenuItemBox.tsx` (main + submenu icon/label/dot),
186
- `MenuPopoverContent.tsx` (header + submenu icon/label), `SecondaryBar.tsx` (collapsed/expanded
187
- item icon+label, header icon), `SideBar.tsx` (Add-New icon, avatar-initials fallback, footer
188
- control accent icon+label, mobile-nav "Show" `PanelLeft` icon) — every one was reading `[300]`
189
- (icon role) or `[100]` (label role) directly. `borderLeftColor`/`bg` usages of `primary[500]`/
190
- `.opacity[16]`/`.opacity[32]` were left untouched — confirmed not broken (the audit found `[500]`
191
- correctly lifts lighter in dark mode; `.opacity[N]` tints are self-scaling, not absolute rungs).
192
- Regression tests: `sidebarAccentColors.test.ts` (lavender + rosewood) — light mode unchanged,
193
- dark mode pins the light-mode rung (not the dark-inverted one), contrast ≥3:1 (icon) / ≥4.5:1
194
- (label) against the sidebar canvas, graceful fallback when `brand` is unknown.
195
-
196
- ### SideBar default logo — hardcoded black fill invisible on dark-`primary[500]` brands (user-reported, fixed)
197
-
198
- `SidebarHeader`'s fallback mark (no `logo` prop passed) wraps `Assets/defaultLogo.tsx` in a `Box`
199
- with `bg={theme.colors.primary[500]}` + `color={theme.colors.white}` — but the SVG paths inside
200
- `DefaultLogo` hardcoded `fill={theme.colors.black}` instead of inheriting that `color`. Most brands'
201
- `primary[500]` is a mid-tone hue, so a black mark still read against it by accident; **zinc**'s
202
- `primary[500]` is `#18181b` (near-black by design — see zinc's palette comment), so the black-on-
203
- near-black logo was effectively invisible. Fixed by switching all three paths to `fill="currentColor"`
204
- so the mark always matches whatever `color` its wrapper sets, regardless of brand — `DefaultLogo` no
205
- longer needs `useCustomTheme()` at all.
206
-
207
- That alone wasn't sufficient: the wrapper `Box` itself hardcoded `color={theme.colors.white}`
208
- regardless of mode. Zinc **inverts** its dark palette — `primary[500]` is `#18181b` in light but
209
- `#e4e4e7` (near-white) in dark — so a hardcoded-white icon on a hardcoded-white-in-dark-mode fill
210
- went invisible again, this time in dark mode. Fixed with the same `onFilled(fill, white, black)`
211
- WCAG-pick helper already used for the calendar's selected-day circle and `Button.styles.ts`'s solid
212
- variant: `color={onFilled(theme.colors.primary[500], theme.colors.white, theme.colors.black)}`. Any
213
- future "icon on a `primary[500]` fill" spot should use this same helper rather than assuming white
214
- always clears — zinc dark is the proof case that it doesn't.
215
-
216
- ### Known gap — Header "Login" demo button (raw Chakra, wrong-canvas ghost ink)
217
-
218
- `Layout.tsx`'s `/header` playground route renders its `rightSlot` demo content with a **raw**
219
- Chakra `Button` (`import { Button } from "@chakra-ui/react"`, not the library's own `Button`),
220
- `variant="ghost" colorScheme="purple"`. Because Chakra's theme registration is global once
221
- `extendTheme` runs, this raw Button still picks up the library's `Button.styles.ts` ghost-variant
222
- logic (`accentTextOnCanvas(scale, colors.backgroundColor.main)`, buttons module) — but that logic
223
- assumes the **page** canvas. Header's own bar is an always-dark surface
224
- (`sidebar.background[500]`), not the page canvas, so the computed ink is tuned for the wrong
225
- background and can read too dark/low-contrast against Header's actual bar. Not a new bug — it's
226
- the same "wrong canvas" gap as the already-documented Button ghost-variant limitation, now
227
- independently confirmed by the QA pass. Deferred: fixing it correctly needs a `canvasBg` prop
228
- threaded through `Button.styles.ts` so a caller can tell the ghost/outline/link ink helper which
229
- surface it's actually rendering on, rather than always assuming the page canvas — a bigger,
230
- cross-component change out of scope for this pass.
231
-
232
- ## SideBar — responsive overlay (< lg / 992px)
233
-
234
- At/above `lg` the SideBar is unchanged: inline, sticky, with the collapse/mini-rail
235
- (`toggle`). Below `lg` it becomes a slide-in **overlay** above the content (it leaves
236
- layout flow, so content stays full-width — not shrunk):
237
-
238
- - `mobileOpen?: boolean` + `onMobileClose?: () => void` props drive the overlay. Wire
239
- `mobileOpen` to the NavigationBar hamburger (`sideBarToggole` / `onSideBarToggole`).
240
- - Overlay is always expanded (collapse/mini-rail is desktop-only and hidden < lg). The
241
- header's trailing control becomes a Close (X) instead of the collapse chevron.
242
- - Dismiss: backdrop scrim click, **Esc**, the Close button, or **swipe-left** on the
243
- panel. Body scroll is locked while open; panel exposes `role="dialog"`/`aria-modal`.
244
- - NavigationBar hamburger now shows below `lg` (was `< md`); its panel icon is
245
- state-aware (`PanelLeftClose` open / `PanelRightClose` closed).
246
- - The overlay panel has **square edges** (no border radius).
247
- - Overlay panel width = `OVERLAY_WIDTH` (**14.7rem** / 235px — a touch wider than the
248
- inline expanded 13rem for touch), capped by `maxW: 88vw` on very small screens.
249
-
250
- Breakpoint, scrim/slide, and z-index are Chakra responsive props (no JS flash) when
251
- `mobileNav` is off; the breakpoint is read once via `useBreakpointValue({ base: true, lg: false })`.
252
-
253
- ## SideBar — Hide/Show (mobile navbar on big screens)
254
-
255
- A footer **Hide/Show** toggle (next to Collapse) switches the navbar *presentation*
256
- between the docked desktop sidebar and the mobile-style overlay — at **any** width, so
257
- desktop users can get the full-screen content experience. It is a layout switch, **not**
258
- a close: toggling never hides the navigation.
259
-
260
- - `mobileNav?: boolean` forces overlay presentation regardless of breakpoint:
261
- `overlay = (below lg) || mobileNav`. `onToggleMobileNav?: () => void` backs the
262
- footer control (render the control only when provided).
263
- - Footer control: docked → segmented **Collapse | Hide**; desktop mobile-nav overlay →
264
- **Show** (return to docked). Pure below-`lg` overlay shows no navbar-mode control.
265
- - Wire so entering mobile-nav also opens the overlay (sidebar stays visible) and leaving
266
- docks it — see `App.tsx`. NavigationBar `forceSideBarToggle` shows the hamburger at all
267
- widths while `mobileNav` is on.
268
- - Selecting a **leaf** menu item in overlay mode auto-closes the overlay (content returns
269
- to full-screen); submenu **parents** only expand and do not close it.
270
-
271
- ## Persisting sidebar choices — `useSidebarPrefs`
272
-
273
- Opt-in hook (`src/Hooks/useSidebarPrefs.ts`, exported from `index.ts`) that persists the
274
- user's **explicit** layout choices to `localStorage` so they survive reload/restart —
275
- without it, `mobileNav`/collapse reset to desktop default on every mount.
276
-
277
- - Persists `{ mobileNav, collapsed, mobileOpen }` so the sidebar restores to **exactly** the
278
- same state (mode, mini-rail, drawer). It deliberately does **not** persist the `lg`
279
- breakpoint (viewport-driven, must stay live).
280
- - SSR-safe (`typeof window` guards); corrupt/invalid stored values fall back to defaults
281
- per field; `setItem` failures (private mode / quota) no-op without throwing.
282
- - API: state `{ mobileNav, collapsed, mobileOpen }`; setters `setMobileNav / setCollapsed
283
- / setMobileOpen`; toggles `toggleMobileNav / toggleCollapsed / toggleMobileOpen`; plus
284
- **composed handlers** `onToggleMobileNav` (flips navbar mode **and** syncs the drawer)
285
- and `closeMobile`. Options: `storageKey` (default `pixelize:sidebar-prefs:v1`, versioned)
286
- and `defaults`.
287
- - **Consumer adoption** — map the returned values onto `SideBar` + `NavBar`; the composed
288
- handlers mean apps don't re-implement the navbar-mode/drawer behavior:
289
-
290
- ```tsx
291
- const sb = useSidebarPrefs();
292
- <SideBar
293
- toggle={sb.collapsed} changeToggle={sb.toggleCollapsed}
294
- mobileNav={sb.mobileNav} onToggleMobileNav={sb.onToggleMobileNav}
295
- mobileOpen={sb.mobileOpen} onMobileClose={sb.closeMobile} /* ...menus, user */ />
296
- <NavBar sideBarToggole={sb.mobileOpen} onSideBarToggole={sb.toggleMobileOpen}
297
- forceSideBarToggle={sb.mobileNav} /* ...nav props */ />
298
- ```
299
-
300
- See `App.tsx` for the live reference wiring.
301
-
302
- ### Known gaps
303
-
304
- - `SecondaryBar` keeps its current side-by-side stacking inside the overlay — revisit if
305
- it feels cramped on very narrow screens.
306
- - Consumer apps (crm/account/…) must pass `mobileOpen`/`onMobileClose` to adopt overlay
307
- mode, and adopt `useSidebarPrefs` to get persistence; until then they get the unchanged
308
- inline sidebar with non-persisted state.
309
- - Persisted `collapsed` can be transiently overridden by SideBar's existing "auto-collapse
310
- when a secondary panel is active" effect — pre-existing, not regressed.
311
- - Persisting `mobileOpen` means a phone (`belowLg`) left with the drawer open reloads with
312
- it open (until a leaf tap auto-closes it). Accepted to honor "restore exactly the same
313
- state"; revisit with a `belowLg` gate if it proves annoying.
314
- - Dark-mode migration covered FilterSidebar/WorkspaceWindow (surfaces) plus, this pass,
315
- Header (default bg/color/active/hover tokens), NavigationBar (label ink + Menu
316
- `--menu-bg` fix), and Accordion (item surface + expanded/hover tint — see above) — see
317
- "Header, NavigationBar, FilterSidebar — WCAG/dark pass" above. **SideBar's active-icon/
318
- label accent is now fixed** (see "SideBar — active-icon/label dark-mode fix" above); its
319
- notification-count badge contrast gap is still open — see `theme/MODULE.md` Known gaps.
package/.cursor/modules/overlays/MODULE.md DELETED
@@ -1,82 +0,0 @@
1
- # Overlays
2
-
3
- ## Purpose
4
-
5
- Modal, AlertDialog, ToolTip / OverflowToolTip, Toaster (+ `useToaster` hook).
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Modal/`, `AlertDialog/`, `ToolTip/`, `Toaster/`
10
-
11
- ## Key rules
12
-
13
- - **Toaster `showToast({ actions })`:** optional `actions?: (onClose) => ReactNode`
14
- renders action buttons under the message (e.g. Jira-style "View" / "Copy link").
15
- The render-prop receives the toast's own `onClose` so an action can dismiss it;
16
- callers style the buttons with their app theme. Prefer this over a bespoke Chakra
17
- `useToast` in a consumer app — a second `useToast` renders into a *different* toast
18
- portal that a `Modal`'s overlay/focus-trap can hide, so the toast silently never
19
- appears. The toast card slides in (framer tween), pulses the status icon once on
20
- mount, and **pauses the auto-dismiss countdown on hover** so the user can read and
21
- click an action before it dismisses.
22
- - Modal exports ModalHeader, ModalBody, ModalFooter subcomponents
23
- - **ToolTip `overflowOnly`:** pass `overflowOnly` to show the tooltip **only**
24
- when the child text is actually truncated (ellipsis active) — no tooltip when
25
- it fits. The child must be the single clamping element (e.g. `Text` with
26
- `noOfLines`); its ref is managed internally. Works for single- and multi-line
27
- clamps and combines with `isDisabled`. **`OverflowToolTip`** is sugar for
28
- `<ToolTip overflowOnly>`. Powered by the `useIsTruncated` hook (see
29
- `utils-hooks`). Inert unless `overflowOnly` is set — no measurement/observer
30
- for ordinary tooltips, and it never measures on hover/scroll.
31
-
32
- ## Dark mode
33
-
34
- Toaster and ToolTip take all color from the theme (`useTheme()` / `useCustomTheme()`),
35
- so they follow the active light/dark palette; remaining hex literals are only `??`
36
- fallbacks for when no Pixelize palette is in context.
37
-
38
- - **Modal/AlertDialog surface bug — now fixed at the theme level, not per-component.**
39
- Chakra's own `Modal` baseStyle hardcodes `[$bg.variable]: "colors.white"` on the `dialog`
40
- part, gated behind `_dark` — this app's theme-swap dark mode (palette swapped, Chakra
41
- `colorMode` stays `"light"`) never triggers that block, so every `ModalContent` rendered a
42
- white panel with near-invisible text on the dark canvas. `AlertDialog` reuses Chakra's
43
- `Modal` style config internally, so it inherits the same fix with no separate theme key.
44
- Fixed centrally in `Theme/chakra/Modal.styles.ts` (`definePartsStyle` on the `dialog` part,
45
- registered as `Modal` in `componentStyles.ts`) — mirrors `Menu.styles.ts`/`Drawer.styles.ts`.
46
- A prior pass fixed this per-call-site with an explicit `bg=` prop; that approach is
47
- superseded by this theme-level override, which covers every `ModalContent`/`AlertDialogContent`
48
- app-wide with zero per-call-site changes (an explicit `bg=` still wins if a caller sets one).
49
- - **Popover surface bug** — same bug class, fixed in `Theme/chakra/Popover.styles.ts`
50
- (`--popper-bg` + `--popper-arrow-shadow-color`, registered as `Popover` in
51
- `componentStyles.ts`) — see theme module Wave H. Every bare `<PopoverContent>` in the
52
- library (this module doesn't own a dedicated Popover component folder — Popover is used
53
- directly from Chakra by many components, e.g. `OrgSwitcher`, `MoreItems`, `SideBar`,
54
- `DatePicker`) now gets a dark-aware surface for free.
55
-
56
- ## Dark mode — Modal/AlertDialog consumers
57
-
58
- `Drawer` (layout-navigation module) has the identical theme-level fix (`Drawer.styles.ts`). Many
59
- consumer components (see account-management, table, cards MODULE.md) additionally carry an
60
- explicit per-call-site `bg=` from an earlier pass, predating the theme-level `Modal`/`Drawer`
61
- style overrides above — now redundant but harmless (an explicit prop still wins, same value).
62
- `WorkspaceWindow` (layout-navigation) was checked and is **not** affected: its `ModalContent` is
63
- deliberately `bg="transparent"` with an inner `Box bg={theme.colors.background[50]}` as the real
64
- surface.
65
-
66
- - **Toast card surface is `background[50]`, not `colors.white`** — `white` is a
67
- *foreground* token (a label on a filled button) and stays white in dark mode.
68
- Status tints read `colors.semantic[status]`, falling back to the plain ramp
69
- (`green` / `red` / …).
70
- - **ToolTip is an inverted surface** — near-black under a light canvas, carrying a
71
- white label. It uses `sidebar.background[500]`, the one ramp `buildDarkPalette`
72
- passes through un-inverted (`sidebar: light.sidebar`), so it stays near-black in
73
- dark and the label stays legible; any other surface ramp would flip light and
74
- render the white label invisible. Callers overriding `bg` own that contrast.
75
- - **Chakra's raw `Tooltip` baseStyle** hardcodes `--tooltip-bg`/`--tooltip-fg` to
76
- `gray.700`/`whiteAlpha.900` behind `_dark`, same never-triggered gate — our reversed dark
77
- gray ramp makes `gray.700` LIGHT, so a bare (non-`ToolTip`) Chakra `<Tooltip>` renders
78
- near-white-on-near-white. Fixed with a `Tooltip` entry in `componentStyles.ts` pinning both
79
- vars to `black`/`white` — the two tokens `buildDarkPalette` never remaps, so the chip stays a
80
- stable dark-bg/white-text pair in both modes. This library's own `ToolTip` above already sets
81
- its own `bg`/`color` explicitly and is unaffected; the fix targets consumer apps that render a
82
- raw Chakra `Tooltip` directly instead of this component.
package/.cursor/modules/playground/MODULE.md DELETED
@@ -1,28 +0,0 @@
1
- # Playground
2
-
3
- ## Purpose
4
-
5
- Vite dev playground — demo pages not published to npm.
6
-
7
- ## Key paths
8
-
9
- - `src/Pages/` (49 demo files), `src/App.tsx`, `src/Layout.tsx`
10
- - `npm start` launches playground
11
-
12
- ## Key rules
13
-
14
- - Demo API calls to dev.pixelizetech.com are playground-only
15
- - Not included in `dist/` publish output
16
-
17
- ## Recent changes (WCAG contrast + dark-mode pass)
18
-
19
- - `stageProgress.tsx`, `tier1.tsx`, `upgradeButton.tsx`, `orgSwitcher.tsx`: local `Section` demo
20
- wrapper switched from hardcoded `bg="white"` / `border="1px solid #E2E8F0"` / `color="gray.700"`
21
- to `useCustomTheme()` tokens (`background[50]` / `boxborder[300]` / `text[900]`) — previously
22
- stayed white regardless of the active theme.
23
- - `stageProgress.tsx` (4 captions) and `tier1.tsx` (1 caption): `color="gray.400"` →
24
- `theme.colors.gray[500]`, the library's verified muted-text token (`gray.400` fails contrast in
25
- dark mode).
26
- - `card.tsx`: swapped the raw Chakra `Button` (`color="blue"`) for the library's own `Button`
27
- (`colorScheme="primary"`) — a component-choice fix, not a Section/caption token pass.
28
- - Demo-only — no `src/index.ts` export or library API changed.