@sqrzro/ui 4.0.0-alpha.6 → 4.0.0-alpha.61

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 (295) hide show
  1. package/dist/components/buttons/ActionButton/index.d.ts +8 -6
  2. package/dist/components/buttons/ActionButton/index.js +3 -27
  3. package/dist/components/buttons/Button/index.d.ts +7 -6
  4. package/dist/components/buttons/Button/index.js +9 -19
  5. package/dist/components/collections/Collection/index.d.ts +7 -3
  6. package/dist/components/collections/Collection/index.js +9 -7
  7. package/dist/components/collections/DataTable/index.d.ts +14 -0
  8. package/dist/components/collections/DataTable/index.js +14 -0
  9. package/dist/components/collections/DefinitionList/index.d.ts +13 -0
  10. package/dist/components/collections/DefinitionList/index.js +13 -0
  11. package/dist/components/collections/EmptyMessage/index.d.ts +1 -1
  12. package/dist/components/collections/EmptyMessage/index.js +6 -4
  13. package/dist/components/collections/EmptyMessageAction/index.d.ts +2 -2
  14. package/dist/components/collections/EmptyMessageAction/index.js +1 -1
  15. package/dist/components/collections/List/index.d.ts +6 -3
  16. package/dist/components/collections/List/index.js +2 -2
  17. package/dist/components/collections/ListClientComponent/index.d.ts +7 -4
  18. package/dist/components/collections/ListClientComponent/index.js +8 -5
  19. package/dist/components/collections/ListItem/index.d.ts +10 -3
  20. package/dist/components/collections/ListItem/index.js +15 -23
  21. package/dist/components/collections/ListItemMenu/index.d.ts +8 -0
  22. package/dist/components/collections/ListItemMenu/index.js +7 -0
  23. package/dist/components/collections/ListItemMeta/index.d.ts +6 -4
  24. package/dist/components/collections/ListItemMeta/index.js +13 -17
  25. package/dist/components/collections/ListItemSecondary/index.d.ts +5 -3
  26. package/dist/components/collections/ListItemSecondary/index.js +12 -8
  27. package/dist/components/collections/Pagination/index.d.ts +1 -1
  28. package/dist/components/collections/Pagination/index.js +6 -7
  29. package/dist/components/collections/PaginationLink/index.d.ts +9 -0
  30. package/dist/components/collections/PaginationLink/index.js +9 -0
  31. package/dist/components/collections/Table/index.d.ts +3 -4
  32. package/dist/components/collections/Table/index.js +2 -8
  33. package/dist/components/collections/TableClientComponent/index.d.ts +7 -6
  34. package/dist/components/collections/TableClientComponent/index.js +11 -26
  35. package/dist/components/collections/TableRow/index.d.ts +13 -0
  36. package/dist/components/collections/TableRow/index.js +15 -0
  37. package/dist/components/collections/interfaces.d.ts +41 -34
  38. package/dist/components/collections/lang.js +1 -1
  39. package/dist/components/collections/utility/is-paginated.d.ts +1 -1
  40. package/dist/components/collections/utility/is-right-aligned.d.ts +3 -0
  41. package/dist/components/collections/utility/is-right-aligned.js +11 -0
  42. package/dist/components/collections/utility/normalize-href.d.ts +2 -0
  43. package/dist/components/collections/utility/normalize-href.js +8 -0
  44. package/dist/components/collections/utility/render-cell.d.ts +5 -0
  45. package/dist/components/collections/utility/render-cell.js +33 -0
  46. package/dist/components/elements/Badge/index.d.ts +12 -0
  47. package/dist/components/elements/Badge/index.js +9 -0
  48. package/dist/components/elements/ContentLink/index.d.ts +4 -0
  49. package/dist/components/elements/ContentLink/index.js +7 -0
  50. package/dist/components/elements/InfoPanel/index.d.ts +11 -0
  51. package/dist/components/elements/InfoPanel/index.js +9 -0
  52. package/dist/components/{utility → elements}/Link/index.d.ts +3 -2
  53. package/dist/components/{utility → elements}/Link/index.js +10 -9
  54. package/dist/components/elements/Menu/index.d.ts +19 -0
  55. package/dist/components/elements/Menu/index.js +17 -0
  56. package/dist/components/elements/MenuItem/index.d.ts +9 -0
  57. package/dist/components/elements/MenuItem/index.js +12 -0
  58. package/dist/components/elements/Page/index.d.ts +19 -0
  59. package/dist/components/elements/Page/index.js +18 -0
  60. package/dist/components/elements/Reference/index.d.ts +9 -0
  61. package/dist/components/elements/Reference/index.js +16 -0
  62. package/dist/components/elements/Summary/index.d.ts +13 -0
  63. package/dist/components/elements/Summary/index.js +22 -0
  64. package/dist/components/errors/AppError/index.d.ts +19 -0
  65. package/dist/components/errors/AppError/index.js +9 -0
  66. package/dist/components/errors/AppForbiddenError/index.d.ts +7 -0
  67. package/dist/components/errors/AppForbiddenError/index.js +6 -0
  68. package/dist/components/errors/AppNotFoundError/index.d.ts +7 -0
  69. package/dist/components/errors/AppNotFoundError/index.js +6 -0
  70. package/dist/components/errors/AppServerError/index.d.ts +8 -0
  71. package/dist/components/errors/AppServerError/index.js +17 -0
  72. package/dist/components/index.d.ts +35 -6
  73. package/dist/components/index.js +17 -3
  74. package/dist/components/modals/ConfirmModal/index.d.ts +5 -3
  75. package/dist/components/modals/ConfirmModal/index.js +3 -3
  76. package/dist/components/modals/Modal/index.d.ts +4 -4
  77. package/dist/components/modals/Modal/index.js +3 -3
  78. package/dist/components/modals/ModalActions/index.d.ts +3 -3
  79. package/dist/components/modals/ModalActions/index.js +4 -3
  80. package/dist/components/utility/Action/index.d.ts +11 -0
  81. package/dist/components/utility/Action/index.js +48 -0
  82. package/dist/components/utility/ActionList/index.d.ts +5 -5
  83. package/dist/components/utility/ActionList/index.js +5 -3
  84. package/dist/components/utility/AppBody/index.d.ts +5 -0
  85. package/dist/components/utility/AppBody/index.js +9 -0
  86. package/dist/components/utility/Calendar/index.d.ts +32 -0
  87. package/dist/components/utility/Calendar/index.js +66 -0
  88. package/dist/components/utility/CalendarDay/index.d.ts +11 -0
  89. package/dist/components/utility/CalendarDay/index.js +22 -0
  90. package/dist/components/utility/Confirmable/index.d.ts +9 -0
  91. package/dist/components/utility/Confirmable/index.js +14 -0
  92. package/dist/components/utility/Container/index.d.ts +1 -1
  93. package/dist/components/utility/Container/index.js +2 -2
  94. package/dist/components/utility/Loader/index.d.ts +1 -1
  95. package/dist/components/utility/Loader/index.js +5 -4
  96. package/dist/components/utility/Popover/index.d.ts +1 -1
  97. package/dist/components/utility/Popover/index.js +5 -5
  98. package/dist/components/utility/Toast/index.d.ts +2 -2
  99. package/dist/components/utility/Toast/index.js +6 -4
  100. package/dist/components/utility/Toaster/index.js +5 -5
  101. package/dist/filters/components/FilterBar/index.d.ts +5 -2
  102. package/dist/filters/components/FilterBarClientComponent/index.d.ts +2 -4
  103. package/dist/filters/components/FilterBarClientComponent/index.js +3 -43
  104. package/dist/filters/components/FilterClearButton/index.d.ts +7 -2
  105. package/dist/filters/components/FilterClearButton/index.js +8 -4
  106. package/dist/filters/components/FilterControl/index.d.ts +1 -1
  107. package/dist/filters/components/FilterControl/index.js +11 -4
  108. package/dist/filters/components/FilterItem/index.d.ts +2 -1
  109. package/dist/filters/components/FilterItem/index.js +3 -7
  110. package/dist/filters/components/FilterPanel/index.d.ts +1 -1
  111. package/dist/filters/{utility/filter.d.ts → filter.d.ts} +1 -1
  112. package/dist/filters/{utility/filter.js → filter.js} +8 -8
  113. package/dist/filters/filters/BooleanFilter/index.js +1 -1
  114. package/dist/filters/filters/CalendarFilter/index.js +3 -2
  115. package/dist/filters/filters/DateFilter/index.d.ts +1 -1
  116. package/dist/filters/filters/DateFilter/index.js +9 -4
  117. package/dist/filters/filters/DropdownFilter/index.js +1 -1
  118. package/dist/filters/filters/Filter/index.d.ts +5 -4
  119. package/dist/filters/filters/Filter/index.js +7 -7
  120. package/dist/filters/filters/SearchFilter/index.d.ts +7 -2
  121. package/dist/filters/filters/SearchFilter/index.js +8 -8
  122. package/dist/filters/filters/interfaces.d.ts +0 -2
  123. package/dist/filters/index.d.ts +2 -1
  124. package/dist/filters/index.js +2 -1
  125. package/dist/filters/interfaces.d.ts +2 -2
  126. package/dist/filters/utility/render-value.js +5 -5
  127. package/dist/forms/components/Autocomplete/index.d.ts +2 -2
  128. package/dist/forms/components/Autocomplete/index.js +3 -3
  129. package/dist/forms/components/AutocompleteList/index.d.ts +7 -0
  130. package/dist/forms/components/AutocompleteList/index.js +15 -0
  131. package/dist/forms/components/BaseCalendarInput/index.d.ts +11 -0
  132. package/dist/forms/components/BaseCalendarInput/index.js +22 -0
  133. package/dist/forms/components/CSVInput/index.d.ts +11 -0
  134. package/dist/forms/components/CSVInput/index.js +32 -0
  135. package/dist/forms/components/CalendarInput/index.d.ts +6 -0
  136. package/dist/forms/components/CalendarInput/index.js +14 -0
  137. package/dist/forms/components/ColorInput/index.d.ts +16 -0
  138. package/dist/forms/components/ColorInput/index.js +14 -0
  139. package/dist/forms/components/Dropdown/index.d.ts +1 -1
  140. package/dist/forms/components/Dropdown/index.js +9 -8
  141. package/dist/forms/components/DropdownItem/index.d.ts +9 -0
  142. package/dist/forms/components/DropdownItem/index.js +9 -0
  143. package/dist/forms/components/DropdownList/index.d.ts +1 -1
  144. package/dist/forms/components/DropdownList/index.js +7 -11
  145. package/dist/forms/components/EditableForm/index.d.ts +3 -3
  146. package/dist/forms/components/EditableForm/index.js +9 -9
  147. package/dist/forms/components/EditableFormField/index.d.ts +1 -1
  148. package/dist/forms/components/EditableFormField/index.js +3 -3
  149. package/dist/forms/components/EditableFormFields/index.d.ts +6 -0
  150. package/dist/forms/components/EditableFormFields/index.js +22 -1
  151. package/dist/forms/components/Form/index.d.ts +4 -2
  152. package/dist/forms/components/Form/index.js +7 -6
  153. package/dist/forms/components/FormError/index.d.ts +2 -2
  154. package/dist/forms/components/FormError/index.js +7 -5
  155. package/dist/forms/components/FormField/index.d.ts +7 -5
  156. package/dist/forms/components/FormField/index.js +15 -7
  157. package/dist/forms/components/FormFields/index.d.ts +19 -2
  158. package/dist/forms/components/FormFields/index.js +38 -2
  159. package/dist/forms/components/FormLabel/index.d.ts +1 -1
  160. package/dist/forms/components/FormLabel/index.js +4 -3
  161. package/dist/forms/components/ModalForm/index.d.ts +3 -2
  162. package/dist/forms/components/ModalForm/index.js +4 -3
  163. package/dist/forms/components/NumberInput/index.d.ts +1 -1
  164. package/dist/forms/components/PasswordComplexity/index.d.ts +16 -0
  165. package/dist/forms/components/PasswordComplexity/index.js +14 -0
  166. package/dist/forms/components/PasswordComplexityItem/index.d.ts +8 -0
  167. package/dist/forms/components/PasswordComplexityItem/index.js +10 -0
  168. package/dist/forms/components/PasswordInput/index.d.ts +1 -1
  169. package/dist/forms/components/PasswordInput/index.js +6 -6
  170. package/dist/forms/components/PointsInput/index.d.ts +5 -0
  171. package/dist/forms/components/{MoneyInput → PointsInput}/index.js +3 -3
  172. package/dist/forms/components/RangeCalendarInput/index.d.ts +6 -0
  173. package/dist/forms/components/RangeCalendarInput/index.js +14 -0
  174. package/dist/forms/components/StaticTextInput/index.d.ts +2 -2
  175. package/dist/forms/components/StaticTextInput/index.js +6 -7
  176. package/dist/forms/components/Switch/index.d.ts +9 -3
  177. package/dist/forms/components/Switch/index.js +7 -5
  178. package/dist/forms/components/TextArea/index.d.ts +14 -0
  179. package/dist/forms/components/TextArea/index.js +15 -0
  180. package/dist/forms/components/TextInput/index.d.ts +1 -1
  181. package/dist/forms/components/TextInput/index.js +5 -4
  182. package/dist/forms/hooks/useAutocomplete.d.ts +8 -6
  183. package/dist/forms/hooks/useAutocomplete.js +4 -4
  184. package/dist/forms/hooks/useDropdown.d.ts +5 -7
  185. package/dist/forms/hooks/useDropdown.js +5 -5
  186. package/dist/forms/hooks/useEditableDropdown.d.ts +4 -0
  187. package/dist/forms/hooks/useEditableDropdown.js +6 -0
  188. package/dist/forms/hooks/useEditableForm.js +8 -1
  189. package/dist/forms/hooks/useForm.d.ts +6 -7
  190. package/dist/forms/hooks/useForm.js +25 -27
  191. package/dist/forms/hooks/useModalForm.d.ts +2 -2
  192. package/dist/forms/hooks/useModalForm.js +8 -1
  193. package/dist/forms/index.d.ts +22 -6
  194. package/dist/forms/index.js +9 -4
  195. package/dist/forms/interfaces.d.ts +1 -1
  196. package/dist/forms/utility/extract-input-props.js +1 -0
  197. package/dist/forms/utility/format-date-value.d.ts +2 -0
  198. package/dist/forms/utility/format-date-value.js +13 -0
  199. package/dist/forms/utility/format-file-size.d.ts +2 -0
  200. package/dist/forms/utility/format-file-size.js +11 -0
  201. package/dist/hooks/index.d.ts +3 -0
  202. package/dist/hooks/index.js +3 -0
  203. package/dist/hooks/useConfirmable.d.ts +21 -0
  204. package/dist/hooks/useConfirmable.js +58 -0
  205. package/dist/hooks/useDownload.d.ts +2 -0
  206. package/dist/hooks/useDownload.js +18 -0
  207. package/dist/hooks/usePopover.d.ts +12 -0
  208. package/dist/hooks/usePopover.js +24 -0
  209. package/dist/hooks/useSelected.d.ts +12 -0
  210. package/dist/hooks/useSelected.js +35 -0
  211. package/dist/hooks/useServerAction.d.ts +10 -0
  212. package/dist/hooks/useServerAction.js +17 -0
  213. package/dist/hooks/useSuccess.d.ts +10 -0
  214. package/dist/hooks/useSuccess.js +22 -0
  215. package/dist/mail/Mail/index.d.ts +8 -0
  216. package/dist/mail/Mail/index.js +106 -0
  217. package/dist/mail/MailBlock/index.d.ts +5 -0
  218. package/dist/mail/MailBlock/index.js +5 -0
  219. package/dist/mail/MailButton/index.d.ts +8 -0
  220. package/dist/mail/MailButton/index.js +28 -0
  221. package/dist/mail/MailTable/index.d.ts +9 -0
  222. package/dist/mail/MailTable/index.js +7 -0
  223. package/dist/mail/index.d.ts +8 -0
  224. package/dist/mail/index.js +4 -0
  225. package/dist/mail/utility/convert-to-datauri.d.ts +2 -0
  226. package/dist/mail/utility/convert-to-datauri.js +16 -0
  227. package/dist/mail/utility/get-mail-config.d.ts +4 -0
  228. package/dist/mail/utility/get-mail-config.js +34 -0
  229. package/dist/mail/utility/interfaces.d.ts +23 -0
  230. package/dist/navigation/components/AppNavigation/index.d.ts +3 -1
  231. package/dist/navigation/components/AppNavigation/index.js +4 -4
  232. package/dist/navigation/components/AppNavigationItem/index.d.ts +5 -3
  233. package/dist/navigation/components/AppNavigationItem/index.js +16 -7
  234. package/dist/navigation/components/Tabs/index.js +1 -4
  235. package/dist/navigation/hooks/useNavigation.d.ts +3 -3
  236. package/dist/navigation/hooks/useNavigation.js +5 -5
  237. package/dist/styles/classnames/config.d.ts +91 -0
  238. package/dist/styles/classnames/config.js +1 -0
  239. package/dist/styles/classnames/interfaces.d.ts +56 -0
  240. package/dist/styles/classnames/interfaces.js +1 -0
  241. package/dist/styles/classnames/utility/apply-sizes.d.ts +3 -0
  242. package/dist/styles/classnames/utility/apply-sizes.js +21 -0
  243. package/dist/styles/classnames/utility/apply-variants.d.ts +3 -0
  244. package/dist/styles/classnames/utility/apply-variants.js +26 -0
  245. package/dist/styles/classnames/utility/is-classname-object.d.ts +3 -0
  246. package/dist/styles/classnames/utility/is-classname-object.js +7 -0
  247. package/dist/styles/classnames/utility/parse-classnames.d.ts +6 -0
  248. package/dist/styles/classnames/utility/parse-classnames.js +33 -0
  249. package/dist/styles/context.d.ts +28 -0
  250. package/dist/styles/context.js +19 -0
  251. package/dist/styles/icons/config.d.ts +22 -0
  252. package/dist/styles/icons/config.js +1 -0
  253. package/dist/styles/icons/interfaces.d.ts +4 -0
  254. package/dist/styles/icons/interfaces.js +1 -0
  255. package/dist/styles/index.d.ts +6 -2
  256. package/dist/styles/index.js +2 -1
  257. package/dist/styles/styles.css +60 -0
  258. package/dist/utility/compare-dates.d.ts +2 -0
  259. package/dist/utility/compare-dates.js +13 -0
  260. package/dist/utility/get-date-state.d.ts +8 -0
  261. package/dist/utility/get-date-state.js +63 -0
  262. package/dist/utility/get-days.d.ts +2 -0
  263. package/dist/utility/get-days.js +5 -0
  264. package/dist/utility/get-weeks.d.ts +2 -0
  265. package/dist/utility/get-weeks.js +31 -0
  266. package/dist/utility/index.d.ts +1 -1
  267. package/dist/utility/interfaces.d.ts +33 -17
  268. package/dist/utility/is-data-object-array.d.ts +3 -0
  269. package/dist/utility/is-data-object-array.js +5 -0
  270. package/dist/utility/is-data-object.d.ts +3 -0
  271. package/dist/utility/is-data-object.js +4 -0
  272. package/package.json +31 -19
  273. package/dist/components/buttons/ConfirmableButton/index.d.ts +0 -7
  274. package/dist/components/buttons/ConfirmableButton/index.js +0 -13
  275. package/dist/components/collections/utility/filter-columns.d.ts +0 -3
  276. package/dist/components/collections/utility/filter-columns.js +0 -8
  277. package/dist/components/collections/utility/get-selected-from-search-params.d.ts +0 -2
  278. package/dist/components/collections/utility/get-selected-from-search-params.js +0 -5
  279. package/dist/components/collections/utility/set-selected-to-search-params.d.ts +0 -2
  280. package/dist/components/collections/utility/set-selected-to-search-params.js +0 -4
  281. package/dist/components/utility/ClassNames/index.d.ts +0 -6
  282. package/dist/components/utility/ClassNames/index.js +0 -7
  283. package/dist/components/utility/Page/index.d.ts +0 -18
  284. package/dist/components/utility/Page/index.js +0 -34
  285. package/dist/components/utility/RootLayout/index.d.ts +0 -12
  286. package/dist/components/utility/RootLayout/index.js +0 -14
  287. package/dist/forms/components/MoneyInput/index.d.ts +0 -5
  288. package/dist/styles/config.d.ts +0 -64
  289. package/dist/styles/config.js +0 -43
  290. package/dist/styles/icons.d.ts +0 -15
  291. package/dist/styles/icons.js +0 -7
  292. package/dist/styles/interfaces.d.ts +0 -41
  293. /package/dist/{styles → mail/utility}/interfaces.js +0 -0
  294. /package/dist/styles/{tw.d.ts → classnames/utility/tw.d.ts} +0 -0
  295. /package/dist/styles/{tw.js → classnames/utility/tw.js} +0 -0
@@ -0,0 +1,21 @@
1
+ const keyMap = {
2
+ extraSmall: 'isExtraSmall',
3
+ small: 'isSmall',
4
+ medium: 'isMedium',
5
+ large: 'isLarge',
6
+ extraLarge: 'isExtraLarge',
7
+ };
8
+ function applySizes(sizes) {
9
+ if (!sizes) {
10
+ return {};
11
+ }
12
+ const sizeArray = Array.isArray(sizes) ? sizes : [sizes];
13
+ return sizeArray.reduce((acc, size) => {
14
+ const key = keyMap[size];
15
+ if (key) {
16
+ acc[key] = true;
17
+ }
18
+ return acc;
19
+ }, {});
20
+ }
21
+ export default applySizes;
@@ -0,0 +1,3 @@
1
+ import type { StyleVariant } from '../../../utility/interfaces';
2
+ declare function applyVariants(variants?: StyleVariant[] | StyleVariant | null): Record<string, boolean>;
3
+ export default applyVariants;
@@ -0,0 +1,26 @@
1
+ const keyMap = {
2
+ bordered: 'isBordered',
3
+ danger: 'isDanger',
4
+ error: 'isError',
5
+ hollow: 'isHollow',
6
+ info: 'isInfo',
7
+ primary: 'isPrimary',
8
+ secondary: 'isSecondary',
9
+ success: 'isSuccess',
10
+ tertiary: 'isTertiary',
11
+ warning: 'isWarning',
12
+ };
13
+ function applyVariants(variants) {
14
+ if (!variants) {
15
+ return {};
16
+ }
17
+ const variantArray = Array.isArray(variants) ? variants : [variants];
18
+ return variantArray.reduce((acc, variant) => {
19
+ const key = keyMap[variant];
20
+ if (key) {
21
+ acc[key] = true;
22
+ }
23
+ return acc;
24
+ }, {});
25
+ }
26
+ export default applyVariants;
@@ -0,0 +1,3 @@
1
+ import type { ClassNameObject } from '../interfaces';
2
+ declare function isClassNameObject(value: unknown): value is ClassNameObject;
3
+ export default isClassNameObject;
@@ -0,0 +1,7 @@
1
+ function isClassNameObject(value) {
2
+ return (typeof value === 'object' &&
3
+ value !== null &&
4
+ 'default' in value &&
5
+ typeof value.default === 'string');
6
+ }
7
+ export default isClassNameObject;
@@ -0,0 +1,6 @@
1
+ import type { ExtractClassNames } from '../interfaces';
2
+ declare function parseClassNames<T>(classNames: T, config?: {
3
+ props?: Record<string, boolean>;
4
+ states?: Record<string, boolean>;
5
+ }, overrides?: T): ExtractClassNames<T>;
6
+ export default parseClassNames;
@@ -0,0 +1,33 @@
1
+ import { getEntries } from '@sqrzro/utility';
2
+ import tw from '../utility/tw';
3
+ import isClassNameObject from './is-classname-object';
4
+ function parseClassNames(classNames, config, overrides) {
5
+ if (!classNames) {
6
+ return {};
7
+ }
8
+ const overridden = { ...classNames, ...overrides };
9
+ return getEntries(overridden).reduce((acc, [key, value]) => {
10
+ if (typeof value === 'string') {
11
+ return { ...acc, [key]: value };
12
+ }
13
+ if (isClassNameObject(value)) {
14
+ const { default: defaultClassName, props, states } = value;
15
+ const propClassNames = props
16
+ ? Object.keys(props)
17
+ .filter((key) => config?.props?.[key])
18
+ .map((key) => props[key])
19
+ : [];
20
+ const stateClassNames = states
21
+ ? Object.keys(states)
22
+ .filter((key) => config?.states?.[key])
23
+ .map((key) => states[key])
24
+ : [];
25
+ return {
26
+ ...acc,
27
+ [key]: tw(defaultClassName, ...propClassNames, ...stateClassNames),
28
+ };
29
+ }
30
+ return acc;
31
+ }, {});
32
+ }
33
+ export default parseClassNames;
@@ -0,0 +1,28 @@
1
+ import { UIClassNames } from './classnames/config';
2
+ import { UIIcons } from './icons/config';
3
+ import type { ExtractClassNames } from './classnames/interfaces';
4
+ declare function createUIContext<TClassNames extends object, TIcons extends object>(): {
5
+ UIProvider: ({ data, children }: {
6
+ data: {
7
+ classNames: TClassNames;
8
+ icons: TIcons;
9
+ };
10
+ children: React.ReactNode;
11
+ }) => import("react/jsx-runtime").JSX.Element;
12
+ useClassNames: <K extends keyof TClassNames>(component: K, config?: {
13
+ props?: Record<string, boolean>;
14
+ states?: Record<string, boolean>;
15
+ }, overrides?: TClassNames[K]) => ExtractClassNames<TClassNames[K]>;
16
+ useIcon: <K extends keyof TIcons>(component: K) => TIcons[K];
17
+ };
18
+ export declare const UIProvider: ({ data, children }: {
19
+ data: {
20
+ classNames: UIClassNames;
21
+ icons: UIIcons;
22
+ };
23
+ children: React.ReactNode;
24
+ }) => import("react/jsx-runtime").JSX.Element, useClassNames: <K extends keyof UIClassNames>(component: K, config?: {
25
+ props?: Record<string, boolean>;
26
+ states?: Record<string, boolean>;
27
+ } | undefined, overrides?: UIClassNames[K] | undefined) => ExtractClassNames<UIClassNames[K]>, useIcon: <K extends keyof UIIcons>(component: K) => UIIcons[K];
28
+ export default createUIContext;
@@ -0,0 +1,19 @@
1
+ 'use client';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { createContext, useContext } from 'react';
4
+ import parseClassNames from './classnames/utility/parse-classnames';
5
+ function createUIContext() {
6
+ const UIContext = createContext({});
7
+ const UIProvider = ({ data, children }) => (_jsx(UIContext.Provider, { value: data, children: children }));
8
+ function useClassNames(component, config, overrides) {
9
+ const ctx = useContext(UIContext);
10
+ return parseClassNames(ctx.classNames[component], config, overrides);
11
+ }
12
+ function useIcon(component) {
13
+ const ctx = useContext(UIContext);
14
+ return ctx.icons[component];
15
+ }
16
+ return { UIProvider, useClassNames, useIcon };
17
+ }
18
+ export const { UIProvider, useClassNames, useIcon } = createUIContext();
19
+ export default createUIContext;
@@ -0,0 +1,22 @@
1
+ import type { IconComponent } from './interfaces';
2
+ export interface UIIcons {
3
+ 'appNavigation.menu'?: IconComponent;
4
+ 'calendar.previous'?: IconComponent;
5
+ 'calendar.next'?: IconComponent;
6
+ 'csvInput.upload'?: IconComponent;
7
+ 'csvInput.success'?: IconComponent;
8
+ 'collection.empty'?: IconComponent;
9
+ 'colorInput.clear'?: IconComponent;
10
+ 'dropdown.control'?: IconComponent;
11
+ 'filter.clear'?: IconComponent;
12
+ 'filter.panel'?: IconComponent;
13
+ 'filter.search'?: IconComponent;
14
+ 'formField.error'?: IconComponent;
15
+ 'passwordComplexity.invalid'?: IconComponent;
16
+ 'passwordComplexity.valid'?: IconComponent;
17
+ 'passwordInput.hidden'?: IconComponent;
18
+ 'passwordInput.visible'?: IconComponent;
19
+ 'staticTextInput.clear'?: IconComponent;
20
+ 'utility.success'?: IconComponent;
21
+ 'utility.error'?: IconComponent;
22
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ export type IconComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
2
+ title?: string;
3
+ titleId?: string;
4
+ } & React.RefAttributes<SVGSVGElement>>;
@@ -0,0 +1 @@
1
+ export {};
@@ -1,2 +1,6 @@
1
- export type { RegisteredClassNames } from './config';
2
- export { default as tw, twx } from './tw';
1
+ export type { UIClassNames } from './classnames/config';
2
+ export type * from './classnames/interfaces';
3
+ export { default as tw, twx } from './classnames/utility/tw';
4
+ export type { UIIcons } from './icons/config';
5
+ export type * from './icons/interfaces';
6
+ export { default as createUIContext, UIProvider, useClassNames, useIcon } from './context';
@@ -1 +1,2 @@
1
- export { default as tw, twx } from './tw';
1
+ export { default as tw, twx } from './classnames/utility/tw';
2
+ export { default as createUIContext, UIProvider, useClassNames, useIcon } from './context';
@@ -0,0 +1,60 @@
1
+ @theme {
2
+ /* These are defaults that will (probably) be overwritten by the consuming application */
3
+ --color-primary: var(--color-teal-600);
4
+ --color-primary-dark: var(--color-teal-700);
5
+ --color-on-primary: var(--color-white);
6
+ /* End defaults */
7
+
8
+ --color-button-bg: var(--color-primary);
9
+ --color-button-bg-hover: var(--color-primary-dark);
10
+ --color-button-text: var(--color-on-primary);
11
+ --color-link: var(--color-primary);
12
+ --color-panel: var(--color-white);
13
+
14
+ --color-error: var(--color-red-600);
15
+ }
16
+
17
+ @layer base {
18
+ button {
19
+ @apply cursor-pointer;
20
+ }
21
+
22
+ hr {
23
+ @apply border-slate-200;
24
+ }
25
+
26
+ input::-webkit-inner-spin-button {
27
+ @apply appearance-none m-0;
28
+ }
29
+
30
+ input[type=number] {
31
+ -moz-appearance: textfield;
32
+ appearance: textfield;
33
+ }
34
+
35
+ small {
36
+ @apply text-xs;
37
+ }
38
+
39
+ strong {
40
+ @apply font-semibold;
41
+ }
42
+ }
43
+
44
+ @layer utilities {
45
+ .fade {
46
+ @apply transition-discrete transition-all duration-100 invisible opacity-0 ease-in-out;
47
+ }
48
+
49
+ .fade-open {
50
+ @apply starting:opacity-0 visible opacity-100;
51
+ }
52
+
53
+ .show {
54
+ @apply transition-discrete transition-all duration-100 invisible opacity-0 ease-in-out scale-90;
55
+ }
56
+
57
+ .show-open {
58
+ @apply starting:opacity-0 starting:scale-90 visible opacity-100 scale-100;
59
+ }
60
+ }
@@ -0,0 +1,2 @@
1
+ declare function compareDates(first: Date, second: Date): -1 | 0 | 1;
2
+ export default compareDates;
@@ -0,0 +1,13 @@
1
+ function compareDates(first, second) {
2
+ if (first.getFullYear() !== second.getFullYear()) {
3
+ return first.getFullYear() < second.getFullYear() ? -1 : 1;
4
+ }
5
+ if (first.getMonth() !== second.getMonth()) {
6
+ return first.getMonth() < second.getMonth() ? -1 : 1;
7
+ }
8
+ if (first.getDate() !== second.getDate()) {
9
+ return first.getDate() < second.getDate() ? -1 : 1;
10
+ }
11
+ return 0;
12
+ }
13
+ export default compareDates;
@@ -0,0 +1,8 @@
1
+ export interface DateState {
2
+ isEnd: boolean;
3
+ isInRange: boolean;
4
+ isSelected: boolean;
5
+ isStart: boolean;
6
+ }
7
+ declare function getDateState(date: Date | null, pendingValue?: Date | null, value?: Date | [Date, Date] | null): DateState;
8
+ export default getDateState;
@@ -0,0 +1,63 @@
1
+ import compareDates from './compare-dates';
2
+ function getDateState(date, pendingValue, value) {
3
+ const defaultState = {
4
+ isEnd: false,
5
+ isInRange: false,
6
+ isSelected: false,
7
+ isStart: false,
8
+ };
9
+ // If there is no date, pending value, or value, return null
10
+ if (!date || (!pendingValue && !value)) {
11
+ return defaultState;
12
+ }
13
+ // For single date, check that the date is selected
14
+ if (date &&
15
+ !pendingValue &&
16
+ !Array.isArray(value) &&
17
+ value &&
18
+ compareDates(date, value) === 0) {
19
+ return { ...defaultState, isSelected: true };
20
+ }
21
+ // For range, check that the date is selected, and is the only one selected
22
+ if (date && pendingValue && compareDates(date, pendingValue) === 0) {
23
+ return { ...defaultState, isSelected: true };
24
+ }
25
+ // For range, check that both dates are the same
26
+ if (date &&
27
+ !pendingValue &&
28
+ Array.isArray(value) &&
29
+ value[0] &&
30
+ value[1] &&
31
+ compareDates(value[0], value[1]) === 0 &&
32
+ compareDates(date, value[0]) === 0) {
33
+ return { ...defaultState, isSelected: true };
34
+ }
35
+ // For range, check that the date is selected, and is the first of two selected
36
+ if (date &&
37
+ !pendingValue &&
38
+ Array.isArray(value) &&
39
+ value[0] &&
40
+ compareDates(date, value[0]) === 0) {
41
+ return { ...defaultState, isStart: true };
42
+ }
43
+ // For range, check that the date is selected, and is the second of two selected
44
+ if (date &&
45
+ !pendingValue &&
46
+ Array.isArray(value) &&
47
+ value[1] &&
48
+ compareDates(date, value[1]) === 0) {
49
+ return { ...defaultState, isEnd: true };
50
+ }
51
+ // For range, check that the date is in between two selected dates
52
+ if (date &&
53
+ !pendingValue &&
54
+ Array.isArray(value) &&
55
+ value[0] &&
56
+ value[1] &&
57
+ compareDates(date, value[0]) > 0 &&
58
+ compareDates(date, value[1]) < 0) {
59
+ return { ...defaultState, isInRange: true };
60
+ }
61
+ return defaultState;
62
+ }
63
+ export default getDateState;
@@ -0,0 +1,2 @@
1
+ declare function getDays(): string[];
2
+ export default getDays;
@@ -0,0 +1,5 @@
1
+ const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
2
+ function getDays() {
3
+ return DAYS;
4
+ }
5
+ export default getDays;
@@ -0,0 +1,2 @@
1
+ declare function getWeeks(date: Date): (Date | null)[][];
2
+ export default getWeeks;
@@ -0,0 +1,31 @@
1
+ const DAYS_IN_WEEK = 7;
2
+ const SUNDAY = 6;
3
+ // Most date libraries start the week on Sunday (US). We want to start on Monday (UK).
4
+ function adjustDayOfWeek(num) {
5
+ return num === 0 ? SUNDAY : num - 1;
6
+ }
7
+ function getWeeks(date) {
8
+ const firstDay = new Date(date);
9
+ firstDay.setDate(1);
10
+ const firstDayofMonth = adjustDayOfWeek(firstDay.getDay());
11
+ const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
12
+ // First, fill an array with nulls from Monday until whatver day the first of the month is
13
+ const days = Array(firstDayofMonth).fill(null);
14
+ // Now, add subsequential dates to the array until we reach the number of days in the month
15
+ for (let index = 0; index < daysInMonth; index += 1) {
16
+ const dt = new Date(firstDay);
17
+ dt.setDate(dt.getDate() + index);
18
+ days.push(dt);
19
+ }
20
+ // Fill up the array with nulls until it's a multiple of 7
21
+ while (days.length % DAYS_IN_WEEK) {
22
+ days.push(null);
23
+ }
24
+ // Split the array into 7s, to create a multidimensional array of weeks and days in those weeks
25
+ const weeks = [];
26
+ for (let index = 0; index < days.length; index += DAYS_IN_WEEK) {
27
+ weeks.push(days.slice(index, index + DAYS_IN_WEEK));
28
+ }
29
+ return weeks;
30
+ }
31
+ export default getWeeks;
@@ -1 +1 @@
1
- export type { NextLayoutProps, NextPageProps } from './interfaces';
1
+ export type * from './interfaces';
@@ -1,27 +1,37 @@
1
- export interface ConfirmableObject {
2
- actions?: Omit<Action, 'confirmable'>[];
1
+ import { UseSuccessArgs } from '../hooks/useSuccess';
2
+ export type ActionEvent = React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>;
3
+ export interface SimpleActionObject {
4
+ details?: React.ReactNode;
5
+ href?: string;
6
+ icon?: React.ReactNode;
7
+ isDisabled?: boolean;
8
+ isLoading?: boolean;
9
+ isSubmittable?: boolean;
10
+ label: React.ReactNode;
11
+ onClick?: (event?: ActionEvent) => void;
12
+ searchParams?: Record<string, string>;
13
+ variant?: StyleVariant[] | StyleVariant;
14
+ }
15
+ export interface ActionObject<Data, Response> extends SimpleActionObject, UseSuccessArgs<Response> {
16
+ action?: (data: Data) => Promise<Response>;
17
+ confirmable?: ConfirmableObject<Data, Response>;
18
+ data?: Data;
19
+ }
20
+ export interface ConfirmableObject<Data, Response> extends UseSuccessArgs<Response> {
21
+ actions?: Omit<ActionObject<Data, Response>, 'confirmable'>[];
3
22
  confirmText?: string;
4
23
  description?: React.ReactNode;
5
24
  icon?: React.ReactNode;
6
25
  isLoading?: boolean;
7
26
  modalIcon?: React.ReactNode;
8
27
  onBeforeConfirm?: () => void;
9
- onConfirm: () => void;
28
+ onConfirm?: () => void;
10
29
  submitLabel?: string;
11
- title?: string;
30
+ title?: React.ReactNode;
12
31
  }
13
- export interface Action {
14
- action?: string;
15
- confirmable?: ConfirmableObject;
16
- details?: React.ReactNode;
17
- href?: string;
18
- icon?: React.ReactNode;
19
- isDisabled?: boolean;
20
- isLoading?: boolean;
21
- isSubmittable?: boolean;
32
+ export interface DataObject {
22
33
  label: React.ReactNode;
23
- onClick?: () => void;
24
- variant?: ButtonVariant;
34
+ value: React.ReactNode;
25
35
  }
26
36
  export interface NextLayoutProps {
27
37
  children: React.ReactNode;
@@ -31,5 +41,11 @@ export interface NextPageProps {
31
41
  params?: Promise<Record<string, string>> | null;
32
42
  searchParams?: Promise<Record<string, string>> | null;
33
43
  }
34
- export type StyleVariant = 'bordered' | 'danger' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
35
- export type ButtonVariant = StyleVariant | 'link';
44
+ export type ReferenceObject = {
45
+ id?: string;
46
+ name: string;
47
+ path?: string;
48
+ reference?: string;
49
+ };
50
+ export type SizeVariant = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
51
+ export type StyleVariant = 'bordered' | 'danger' | 'error' | 'hollow' | 'info' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
@@ -0,0 +1,3 @@
1
+ import type { DataObject } from './interfaces';
2
+ declare function isDataObjectArray(item: unknown): item is DataObject[];
3
+ export default isDataObjectArray;
@@ -0,0 +1,5 @@
1
+ import isDataObject from './is-data-object';
2
+ function isDataObjectArray(item) {
3
+ return Array.isArray(item) && item.every(isDataObject);
4
+ }
5
+ export default isDataObjectArray;
@@ -0,0 +1,3 @@
1
+ import type { DataObject } from './interfaces';
2
+ declare function isDataObject(item: unknown): item is DataObject;
3
+ export default isDataObject;
@@ -0,0 +1,4 @@
1
+ function isDataObject(item) {
2
+ return typeof item === 'object' && item !== null && 'label' in item && 'value' in item;
3
+ }
4
+ export default isDataObject;
package/package.json CHANGED
@@ -1,11 +1,15 @@
1
1
  {
2
2
  "name": "@sqrzro/ui",
3
3
  "type": "module",
4
- "version": "4.0.0-alpha.6",
4
+ "version": "4.0.0-alpha.61",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "license": "ISC",
8
8
  "exports": {
9
+ "./addon": {
10
+ "types": "./dist/addon/index.d.ts",
11
+ "default": "./dist/addon/index.js"
12
+ },
9
13
  "./components": {
10
14
  "types": "./dist/components/index.d.ts",
11
15
  "default": "./dist/components/index.js"
@@ -22,6 +26,10 @@
22
26
  "types": "./dist/hooks/index.d.ts",
23
27
  "default": "./dist/hooks/index.js"
24
28
  },
29
+ "./mail": {
30
+ "types": "./dist/mail/index.d.ts",
31
+ "default": "./dist/mail/index.js"
32
+ },
25
33
  "./navigation": {
26
34
  "types": "./dist/navigation/index.d.ts",
27
35
  "default": "./dist/navigation/index.js"
@@ -30,6 +38,9 @@
30
38
  "types": "./dist/styles/index.d.ts",
31
39
  "default": "./dist/styles/index.js"
32
40
  },
41
+ "./styles.css": {
42
+ "default": "./dist/styles/styles.css"
43
+ },
33
44
  "./utility": {
34
45
  "types": "./dist/utility/index.d.ts",
35
46
  "default": "./dist/utility/index.js"
@@ -40,39 +51,40 @@
40
51
  ],
41
52
  "dependencies": {
42
53
  "clsx": "^2.1.1",
43
- "next": "^16.1.6",
54
+ "drizzle-orm": "^0.45.1",
55
+ "next": "^16.2.0",
44
56
  "react": "^19.2.4",
45
- "react-dom": "^19.2.1",
46
- "tailwind-merge": "^3.4.0",
57
+ "react-dom": "^19.2.4",
58
+ "tailwind-merge": "^3.5.0",
47
59
  "use-deep-compare-effect": "^1.8.1",
48
- "@sqrzro/utility": "^4.0.0-alpha.1"
60
+ "@sqrzro/addons": "^4.0.0-alpha.10",
61
+ "@sqrzro/utility": "^4.0.0-alpha.19"
49
62
  },
50
63
  "devDependencies": {
51
- "@storybook/addon-a11y": "^10.1.7",
52
- "@storybook/addon-docs": "^10.1.7",
53
- "@storybook/nextjs": "^10.1.7",
54
- "@testing-library/react": "^16.3.0",
64
+ "@storybook/addon-a11y": "^10.3.1",
65
+ "@storybook/addon-docs": "^10.3.1",
66
+ "@storybook/nextjs": "^10.3.1",
67
+ "@testing-library/react": "^16.3.2",
55
68
  "@testing-library/user-event": "^14.6.1",
56
- "@types/react": "^19.2.7",
69
+ "@types/react": "^19.2.14",
57
70
  "@types/react-dom": "^19.2.3",
58
71
  "concurrently": "^9.2.1",
59
- "next-router-mock": "^1.0.4",
60
- "prettier": "^3.7.4",
61
- "rimraf": "^6.1.2",
62
- "storybook": "^10.1.7",
72
+ "cpx": "^1.5.0",
73
+ "next-router-mock": "^1.0.5",
74
+ "rimraf": "^6.1.3",
75
+ "storybook": "^10.3.1",
63
76
  "tsc-alias": "^1.8.16",
64
77
  "tslib": "^2.8.1",
65
- "typescript": "^5.9.3",
66
- "@sqrzro/prettier-config": "^4.0.0-alpha.1"
78
+ "typescript": "^5.9.3"
67
79
  },
68
80
  "scripts": {
69
- "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias",
81
+ "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias && pnpm build:css",
82
+ "build:css": "cpx \"./src/**/*.css\" ./dist",
70
83
  "clean": "rimraf ./dist",
71
- "dev": "(concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -w\")",
84
+ "dev": "pnpm build:css && (concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -w\")",
72
85
  "docs:start": "storybook dev -p 6006",
73
86
  "docs:build": "storybook build",
74
87
  "lint": "tsc --noEmit && eslint \"./src/**/*.ts\"",
75
- "prettier": "prettier --write \"./src/**/*.tsx\" \"./src/**/*.ts\"",
76
88
  "start": "pnpm dev"
77
89
  }
78
90
  }
@@ -1,7 +0,0 @@
1
- import type { ConfirmableObject } from '../../../utility/interfaces';
2
- import type { ButtonProps } from '../Button';
3
- export type ConfirmableButtonProps = ButtonProps & {
4
- confirmable: ConfirmableObject;
5
- };
6
- declare function ConfirmableButton({ confirmable, ...buttonProps }: Readonly<ConfirmableButtonProps>): React.ReactElement;
7
- export default ConfirmableButton;
@@ -1,13 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { Fragment } from 'react';
4
- import Button from '../Button';
5
- function ConfirmableButton({ confirmable, ...buttonProps }) {
6
- // const { handle, modalProps } = useConfirmable<HTMLButtonElement>({
7
- // isLoading,
8
- // onBeforeConfirm,
9
- // onConfirm: (event) => onClick?.(event),
10
- // });
11
- return (_jsx(Fragment, { children: _jsx(Button, { ...buttonProps, icon: confirmable.icon, isLoading: confirmable.isLoading }) }));
12
- }
13
- export default ConfirmableButton;
@@ -1,3 +0,0 @@
1
- import type { TableColumnObject } from '../interfaces';
2
- declare function filterColumns(columns: TableColumnObject[], isSelectable?: boolean): TableColumnObject[];
3
- export default filterColumns;
@@ -1,8 +0,0 @@
1
- function filterColumns(columns, isSelectable) {
2
- const filtered = columns.filter((column) => column.type !== 'id');
3
- if (isSelectable) {
4
- return [{ id: 'select', type: 'selectable' }, ...filtered];
5
- }
6
- return filtered;
7
- }
8
- export default filterColumns;
@@ -1,2 +0,0 @@
1
- declare function getSelectedFromSearchParams(searchParams: URLSearchParams): string[];
2
- export default getSelectedFromSearchParams;
@@ -1,5 +0,0 @@
1
- function getSelectedFromSearchParams(searchParams) {
2
- const selected = searchParams.get('selected');
3
- return selected ? selected.split('|') : [];
4
- }
5
- export default getSelectedFromSearchParams;