@cerberus-design/react 0.14.2 → 0.15.0

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 (241) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.cts +374 -80
  2. package/build/legacy/components/Accordion.cjs +4 -187
  3. package/build/legacy/components/Accordion.cjs.map +1 -1
  4. package/build/legacy/components/Accordion.client.cjs +64 -0
  5. package/build/legacy/components/Accordion.client.cjs.map +1 -0
  6. package/build/legacy/components/AccordionItemGroup.cjs +41 -185
  7. package/build/legacy/components/AccordionItemGroup.cjs.map +1 -1
  8. package/build/legacy/components/Admonition.cjs +89 -239
  9. package/build/legacy/components/Admonition.cjs.map +1 -1
  10. package/build/legacy/components/Admonition.client.cjs +219 -0
  11. package/build/legacy/components/Admonition.client.cjs.map +1 -0
  12. package/build/legacy/components/AnimatingUploadIcon.cjs.map +1 -1
  13. package/build/legacy/components/Avatar.cjs +23 -174
  14. package/build/legacy/components/Avatar.cjs.map +1 -1
  15. package/build/legacy/components/Checkbox.cjs +22 -168
  16. package/build/legacy/components/Checkbox.cjs.map +1 -1
  17. package/build/legacy/components/DatePicker.client.cjs +129 -272
  18. package/build/legacy/components/DatePicker.client.cjs.map +1 -1
  19. package/build/legacy/components/DatePicker.server.cjs +17 -271
  20. package/build/legacy/components/DatePicker.server.cjs.map +1 -1
  21. package/build/legacy/components/Dialog.cjs +86 -0
  22. package/build/legacy/components/Dialog.cjs.map +1 -0
  23. package/build/legacy/components/Dialog.client.cjs +95 -0
  24. package/build/legacy/components/Dialog.client.cjs.map +1 -0
  25. package/build/legacy/components/FileStatus.cjs +62 -212
  26. package/build/legacy/components/FileStatus.cjs.map +1 -1
  27. package/build/legacy/components/FileUploader.cjs +29 -180
  28. package/build/legacy/components/FileUploader.cjs.map +1 -1
  29. package/build/legacy/components/Input.cjs +20 -172
  30. package/build/legacy/components/Input.cjs.map +1 -1
  31. package/build/legacy/components/Modal.cjs.map +1 -1
  32. package/build/legacy/components/ModalDescription.cjs.map +1 -1
  33. package/build/legacy/components/ModalHeader.cjs.map +1 -1
  34. package/build/legacy/components/ModalHeading.cjs.map +1 -1
  35. package/build/legacy/components/Notification.cjs +26 -176
  36. package/build/legacy/components/Notification.cjs.map +1 -1
  37. package/build/legacy/components/Select.cjs +26 -178
  38. package/build/legacy/components/Select.cjs.map +1 -1
  39. package/build/legacy/components/Tag.cjs +16 -167
  40. package/build/legacy/components/Tag.cjs.map +1 -1
  41. package/build/legacy/components/Toggle.cjs +20 -172
  42. package/build/legacy/components/Toggle.cjs.map +1 -1
  43. package/build/legacy/config/defineIcons.cjs +3 -39
  44. package/build/legacy/config/defineIcons.cjs.map +1 -1
  45. package/build/legacy/config/{cerbIcons.cjs → index.cjs} +22 -29
  46. package/build/legacy/config/index.cjs.map +1 -0
  47. package/build/legacy/config/types.cjs +19 -0
  48. package/build/legacy/config/types.cjs.map +1 -0
  49. package/build/legacy/context/cerberus.cjs +46 -0
  50. package/build/legacy/context/cerberus.cjs.map +1 -0
  51. package/build/legacy/context/confirm-modal.cjs +105 -321
  52. package/build/legacy/context/confirm-modal.cjs.map +1 -1
  53. package/build/legacy/context/cta-modal.cjs +137 -336
  54. package/build/legacy/context/cta-modal.cjs.map +1 -1
  55. package/build/legacy/context/notification-center/store.cjs +66 -0
  56. package/build/legacy/context/notification-center/store.cjs.map +1 -0
  57. package/build/legacy/context/notification-center/types.cjs +19 -0
  58. package/build/legacy/context/notification-center/types.cjs.map +1 -0
  59. package/build/legacy/context/notification-center.cjs +142 -249
  60. package/build/legacy/context/notification-center.cjs.map +1 -1
  61. package/build/legacy/context/prompt-modal.cjs +185 -388
  62. package/build/legacy/context/prompt-modal.cjs.map +1 -1
  63. package/build/legacy/index.cjs +1577 -1456
  64. package/build/legacy/index.cjs.map +1 -1
  65. package/build/modern/_tsup-dts-rollup.d.ts +374 -80
  66. package/build/modern/{chunk-BVCXVZAF.js → chunk-25HMVHLT.js} +6 -5
  67. package/build/modern/chunk-25HMVHLT.js.map +1 -0
  68. package/build/modern/chunk-36N4527B.js +1 -0
  69. package/build/modern/chunk-5EWCH7AI.js +82 -0
  70. package/build/modern/chunk-5EWCH7AI.js.map +1 -0
  71. package/build/modern/chunk-5SNLQZYP.js +25 -0
  72. package/build/modern/chunk-5SNLQZYP.js.map +1 -0
  73. package/build/modern/chunk-6BN3XKQF.js +42 -0
  74. package/build/modern/chunk-6BN3XKQF.js.map +1 -0
  75. package/build/modern/{chunk-2UXE5PDG.js → chunk-7NN3SJ7W.js} +1 -1
  76. package/build/modern/chunk-7NN3SJ7W.js.map +1 -0
  77. package/build/modern/{chunk-KWJ5FKX7.js → chunk-BAWZBF5Q.js} +5 -3
  78. package/build/modern/chunk-BAWZBF5Q.js.map +1 -0
  79. package/build/modern/{chunk-6BH5J5GF.js → chunk-BHB56M7S.js} +31 -46
  80. package/build/modern/chunk-BHB56M7S.js.map +1 -0
  81. package/build/modern/{chunk-HKJMLWVP.js → chunk-EDARV2EI.js} +5 -4
  82. package/build/modern/chunk-EDARV2EI.js.map +1 -0
  83. package/build/modern/{chunk-5OVH3INN.js → chunk-FGCO27TC.js} +25 -53
  84. package/build/modern/chunk-FGCO27TC.js.map +1 -0
  85. package/build/modern/{chunk-PVIMOXSO.js → chunk-GCQMH4QA.js} +5 -4
  86. package/build/modern/chunk-GCQMH4QA.js.map +1 -0
  87. package/build/modern/chunk-GITT5645.js +20 -0
  88. package/build/modern/chunk-GITT5645.js.map +1 -0
  89. package/build/modern/{chunk-TJCFYL5W.js → chunk-IGHMP4WA.js} +1 -20
  90. package/build/modern/chunk-IGHMP4WA.js.map +1 -0
  91. package/build/modern/chunk-ISCJ542I.js +82 -0
  92. package/build/modern/chunk-ISCJ542I.js.map +1 -0
  93. package/build/modern/{chunk-HVKM54BA.js → chunk-IW3LIRDG.js} +1 -1
  94. package/build/modern/chunk-IW3LIRDG.js.map +1 -0
  95. package/build/modern/chunk-JAROS4Q3.js +180 -0
  96. package/build/modern/chunk-JAROS4Q3.js.map +1 -0
  97. package/build/modern/{chunk-BE4EOU2P.js → chunk-JIRW4XOJ.js} +1 -1
  98. package/build/modern/chunk-JIRW4XOJ.js.map +1 -0
  99. package/build/modern/chunk-KDDPAJMR.js +9 -0
  100. package/build/modern/chunk-KDDPAJMR.js.map +1 -0
  101. package/build/modern/{chunk-XOROL3JY.js → chunk-KKHL3ZO4.js} +5 -4
  102. package/build/modern/chunk-KKHL3ZO4.js.map +1 -0
  103. package/build/modern/{chunk-U36UZJGZ.js → chunk-MZ3UCDUL.js} +5 -4
  104. package/build/modern/chunk-MZ3UCDUL.js.map +1 -0
  105. package/build/modern/{chunk-T2JOPPGL.js → chunk-N24COMHJ.js} +11 -4
  106. package/build/modern/chunk-N24COMHJ.js.map +1 -0
  107. package/build/modern/chunk-NJSETNRL.js +68 -0
  108. package/build/modern/chunk-NJSETNRL.js.map +1 -0
  109. package/build/modern/{chunk-XY6WL55R.js → chunk-NUMM4TNC.js} +1 -1
  110. package/build/modern/chunk-NUMM4TNC.js.map +1 -0
  111. package/build/modern/{chunk-FXLLRVAM.js → chunk-O6LFWUHI.js} +8 -6
  112. package/build/modern/chunk-O6LFWUHI.js.map +1 -0
  113. package/build/modern/{chunk-JJZQGR7A.js → chunk-RDRD6ACD.js} +9 -6
  114. package/build/modern/chunk-RDRD6ACD.js.map +1 -0
  115. package/build/modern/{chunk-XXWR7UGH.js → chunk-SD3OVTHT.js} +75 -103
  116. package/build/modern/chunk-SD3OVTHT.js.map +1 -0
  117. package/build/modern/chunk-TFL56AYR.js +56 -0
  118. package/build/modern/chunk-TFL56AYR.js.map +1 -0
  119. package/build/modern/chunk-V3M3ZOQI.js +38 -0
  120. package/build/modern/chunk-V3M3ZOQI.js.map +1 -0
  121. package/build/modern/{chunk-QK7R2XJM.js → chunk-XQICKZH4.js} +6 -5
  122. package/build/modern/chunk-XQICKZH4.js.map +1 -0
  123. package/build/modern/chunk-XZGXRRSQ.js +31 -0
  124. package/build/modern/chunk-XZGXRRSQ.js.map +1 -0
  125. package/build/modern/{chunk-KPUYKHLW.js → chunk-YKKNWILF.js} +71 -15
  126. package/build/modern/chunk-YKKNWILF.js.map +1 -0
  127. package/build/modern/{chunk-Q7BRMIBR.js → chunk-ZL6ZITLA.js} +1 -1
  128. package/build/modern/chunk-ZL6ZITLA.js.map +1 -0
  129. package/build/modern/components/Accordion.client.js +9 -0
  130. package/build/modern/components/Accordion.client.js.map +1 -0
  131. package/build/modern/components/Accordion.js +1 -7
  132. package/build/modern/components/AccordionItemGroup.js +4 -6
  133. package/build/modern/components/Admonition.client.js +11 -0
  134. package/build/modern/components/Admonition.client.js.map +1 -0
  135. package/build/modern/components/Admonition.js +4 -6
  136. package/build/modern/components/AnimatingUploadIcon.js +1 -1
  137. package/build/modern/components/Avatar.js +3 -5
  138. package/build/modern/components/Checkbox.js +2 -5
  139. package/build/modern/components/DatePicker.client.js +8 -7
  140. package/build/modern/components/DatePicker.server.js +3 -13
  141. package/build/modern/components/Dialog.client.js +10 -0
  142. package/build/modern/components/Dialog.client.js.map +1 -0
  143. package/build/modern/components/Dialog.js +24 -0
  144. package/build/modern/components/Dialog.js.map +1 -0
  145. package/build/modern/components/FileStatus.js +3 -6
  146. package/build/modern/components/FileUploader.js +3 -6
  147. package/build/modern/components/Input.js +2 -5
  148. package/build/modern/components/Modal.js +1 -1
  149. package/build/modern/components/ModalDescription.js +1 -1
  150. package/build/modern/components/ModalHeader.js +1 -1
  151. package/build/modern/components/ModalHeading.js +1 -1
  152. package/build/modern/components/Notification.js +2 -5
  153. package/build/modern/components/Select.js +2 -5
  154. package/build/modern/components/Tag.js +3 -5
  155. package/build/modern/components/Toggle.js +2 -5
  156. package/build/modern/config/defineIcons.js +2 -5
  157. package/build/modern/config/index.js +14 -0
  158. package/build/modern/config/index.js.map +1 -0
  159. package/build/modern/config/types.js +2 -0
  160. package/build/modern/config/types.js.map +1 -0
  161. package/build/modern/context/cerberus.js +10 -0
  162. package/build/modern/context/cerberus.js.map +1 -0
  163. package/build/modern/context/confirm-modal.js +5 -13
  164. package/build/modern/context/cta-modal.js +7 -14
  165. package/build/modern/context/notification-center/store.js +15 -0
  166. package/build/modern/context/notification-center/store.js.map +1 -0
  167. package/build/modern/context/notification-center/types.js +1 -0
  168. package/build/modern/context/notification-center/types.js.map +1 -0
  169. package/build/modern/context/notification-center.js +5 -7
  170. package/build/modern/context/prompt-modal.js +8 -15
  171. package/build/modern/index.js +111 -75
  172. package/build/modern/index.js.map +1 -1
  173. package/package.json +4 -8
  174. package/src/components/Accordion.client.tsx +46 -0
  175. package/src/components/Accordion.tsx +0 -37
  176. package/src/components/AccordionItemGroup.tsx +1 -1
  177. package/src/components/Admonition.client.tsx +73 -0
  178. package/src/components/Admonition.tsx +1 -70
  179. package/src/components/AnimatingUploadIcon.tsx +3 -3
  180. package/src/components/Avatar.tsx +5 -2
  181. package/src/components/Checkbox.tsx +10 -3
  182. package/src/components/DatePicker.client.tsx +111 -15
  183. package/src/components/DatePicker.server.tsx +2 -75
  184. package/src/components/Dialog.client.tsx +39 -0
  185. package/src/components/Dialog.tsx +165 -0
  186. package/src/components/FileStatus.tsx +5 -3
  187. package/src/components/FileUploader.tsx +3 -2
  188. package/src/components/Input.tsx +4 -2
  189. package/src/components/Modal.tsx +1 -16
  190. package/src/components/ModalDescription.tsx +1 -8
  191. package/src/components/ModalHeader.tsx +1 -10
  192. package/src/components/ModalHeading.tsx +1 -8
  193. package/src/components/Notification.tsx +9 -4
  194. package/src/components/Select.tsx +5 -2
  195. package/src/components/Tag.tsx +5 -2
  196. package/src/components/Toggle.tsx +4 -3
  197. package/src/config/defineIcons.ts +28 -16
  198. package/src/config/index.ts +28 -0
  199. package/src/config/types.ts +42 -0
  200. package/src/context/cerberus.tsx +44 -0
  201. package/src/context/confirm-modal.tsx +44 -42
  202. package/src/context/cta-modal.tsx +25 -38
  203. package/src/context/notification-center/store.ts +88 -0
  204. package/src/context/notification-center/types.ts +28 -0
  205. package/src/context/notification-center.tsx +81 -46
  206. package/src/context/prompt-modal.tsx +101 -103
  207. package/src/index.ts +15 -8
  208. package/build/legacy/config/cerbIcons.cjs.map +0 -1
  209. package/build/modern/chunk-2UXE5PDG.js.map +0 -1
  210. package/build/modern/chunk-5OVH3INN.js.map +0 -1
  211. package/build/modern/chunk-6BH5J5GF.js.map +0 -1
  212. package/build/modern/chunk-BC5SZDYY.js +0 -132
  213. package/build/modern/chunk-BC5SZDYY.js.map +0 -1
  214. package/build/modern/chunk-BE4EOU2P.js.map +0 -1
  215. package/build/modern/chunk-BVCXVZAF.js.map +0 -1
  216. package/build/modern/chunk-CRII2HNX.js +0 -55
  217. package/build/modern/chunk-CRII2HNX.js.map +0 -1
  218. package/build/modern/chunk-CVTON5DQ.js +0 -162
  219. package/build/modern/chunk-CVTON5DQ.js.map +0 -1
  220. package/build/modern/chunk-FXLLRVAM.js.map +0 -1
  221. package/build/modern/chunk-HKJMLWVP.js.map +0 -1
  222. package/build/modern/chunk-HVKM54BA.js.map +0 -1
  223. package/build/modern/chunk-JJZQGR7A.js.map +0 -1
  224. package/build/modern/chunk-KPUYKHLW.js.map +0 -1
  225. package/build/modern/chunk-KWJ5FKX7.js.map +0 -1
  226. package/build/modern/chunk-PVIMOXSO.js.map +0 -1
  227. package/build/modern/chunk-Q7BRMIBR.js.map +0 -1
  228. package/build/modern/chunk-QK7R2XJM.js.map +0 -1
  229. package/build/modern/chunk-QMF5ZNDG.js +0 -27
  230. package/build/modern/chunk-QMF5ZNDG.js.map +0 -1
  231. package/build/modern/chunk-QQOWWMZ3.js +0 -138
  232. package/build/modern/chunk-QQOWWMZ3.js.map +0 -1
  233. package/build/modern/chunk-T2JOPPGL.js.map +0 -1
  234. package/build/modern/chunk-TJCFYL5W.js.map +0 -1
  235. package/build/modern/chunk-U36UZJGZ.js.map +0 -1
  236. package/build/modern/chunk-XOROL3JY.js.map +0 -1
  237. package/build/modern/chunk-XXWR7UGH.js.map +0 -1
  238. package/build/modern/chunk-XY6WL55R.js.map +0 -1
  239. package/build/modern/config/cerbIcons.js +0 -9
  240. package/src/config/cerbIcons.ts +0 -73
  241. /package/build/modern/{config/cerbIcons.js.map → chunk-36N4527B.js.map} +0 -0
@@ -1,162 +0,0 @@
1
- import {
2
- Notification
3
- } from "./chunk-JJZQGR7A.js";
4
- import {
5
- NotificationDescription
6
- } from "./chunk-UXY3KCC3.js";
7
- import {
8
- NotificationHeading
9
- } from "./chunk-SLHYBPJ5.js";
10
- import {
11
- Portal
12
- } from "./chunk-IQJDVFPP.js";
13
- import {
14
- Button
15
- } from "./chunk-EXGKZGML.js";
16
- import {
17
- Show
18
- } from "./chunk-BUVVRQLZ.js";
19
-
20
- // src/context/notification-center.tsx
21
- import {
22
- createContext,
23
- useCallback,
24
- useContext,
25
- useMemo,
26
- useState
27
- } from "react";
28
- import { animateIn, vstack } from "@cerberus/styled-system/patterns";
29
- import { notification } from "@cerberus/styled-system/recipes";
30
- import { cx } from "@cerberus/styled-system/css";
31
- import { jsx, jsxs } from "react/jsx-runtime";
32
- var NotificationsContext = createContext(null);
33
- function NotificationCenter(props) {
34
- const [activeNotifications, setActiveNotifications] = useState([]);
35
- const styles = notification();
36
- const handleNotify = useCallback((options) => {
37
- setActiveNotifications((prev) => {
38
- const id = `${options.palette}:${prev.length + 1}`;
39
- return [...prev, { ...options, id }];
40
- });
41
- }, []);
42
- const handleClose = useCallback((e) => {
43
- const target = e.currentTarget;
44
- setActiveNotifications((prev) => {
45
- const item = prev.find((option) => option.id === target.value);
46
- if (item?.onClose) item.onClose();
47
- return prev.filter((option) => option.id !== target.value);
48
- });
49
- }, []);
50
- const handleCloseAll = useCallback(() => {
51
- setActiveNotifications((prev) => {
52
- prev.forEach((item) => {
53
- if (item.onClose) item.onClose();
54
- });
55
- return [];
56
- });
57
- }, []);
58
- const value = useMemo(
59
- () => ({
60
- notify: handleNotify
61
- }),
62
- [handleNotify]
63
- );
64
- return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
65
- props.children,
66
- /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsxs("div", { className: styles.center, children: [
67
- /* @__PURE__ */ jsx(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ jsx(
68
- Button,
69
- {
70
- className: cx(styles.closeAll, animateIn()),
71
- onClick: handleCloseAll,
72
- palette: "action",
73
- shape: "rounded",
74
- size: "sm",
75
- usage: "ghost",
76
- children: "Close all"
77
- }
78
- ) }),
79
- /* @__PURE__ */ jsx(
80
- "div",
81
- {
82
- className: vstack({
83
- alignItems: "flex-end",
84
- gap: "4"
85
- }),
86
- style: {
87
- alignItems: "flex-end"
88
- },
89
- children: activeNotifications.map((option) => /* @__PURE__ */ jsx(
90
- MatchNotification,
91
- {
92
- ...option,
93
- onClose: handleClose
94
- },
95
- option.id
96
- ))
97
- }
98
- )
99
- ] }) }) })
100
- ] });
101
- }
102
- function MatchNotification(props) {
103
- const { palette, id, onClose, heading, description } = props;
104
- switch (palette) {
105
- case "success":
106
- return /* @__PURE__ */ jsxs(
107
- Notification,
108
- {
109
- id,
110
- onClose,
111
- open: true,
112
- palette: "success",
113
- children: [
114
- /* @__PURE__ */ jsx(NotificationHeading, { palette: "success", children: heading }),
115
- /* @__PURE__ */ jsx(NotificationDescription, { palette: "success", children: description })
116
- ]
117
- },
118
- id
119
- );
120
- case "warning":
121
- return /* @__PURE__ */ jsxs(
122
- Notification,
123
- {
124
- id,
125
- onClose,
126
- open: true,
127
- palette: "warning",
128
- children: [
129
- /* @__PURE__ */ jsx(NotificationHeading, { palette: "warning", children: heading }),
130
- /* @__PURE__ */ jsx(NotificationDescription, { palette: "warning", children: description })
131
- ]
132
- },
133
- id
134
- );
135
- case "danger":
136
- return /* @__PURE__ */ jsxs(Notification, { id, onClose, open: true, palette: "danger", children: [
137
- /* @__PURE__ */ jsx(NotificationHeading, { palette: "danger", children: heading }),
138
- /* @__PURE__ */ jsx(NotificationDescription, { palette: "danger", children: description })
139
- ] }, id);
140
- case "info":
141
- default:
142
- return /* @__PURE__ */ jsxs(Notification, { id, onClose, open: true, palette: "info", children: [
143
- /* @__PURE__ */ jsx(NotificationHeading, { palette: "info", children: heading }),
144
- /* @__PURE__ */ jsx(NotificationDescription, { palette: "info", children: description })
145
- ] }, id);
146
- }
147
- }
148
- function useNotificationCenter() {
149
- const context = useContext(NotificationsContext);
150
- if (!context) {
151
- throw new Error(
152
- "useNotificationCenter must be used within a NotificationsProvider"
153
- );
154
- }
155
- return context;
156
- }
157
-
158
- export {
159
- NotificationCenter,
160
- useNotificationCenter
161
- };
162
- //# sourceMappingURL=chunk-CVTON5DQ.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n /**\n * The palette of the notification.\n * @default 'info'\n */\n palette: 'info' | 'success' | 'warning' | 'danger'\n /**\n * The heading of the notification.\n */\n heading: string\n /**\n * The unique id of the notification.\n */\n id?: string\n /**\n * The description of the notification.\n */\n description?: ReactNode\n /**\n * The action to take when the notification is closed\n */\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"ghost\"\n >\n Close all\n </Button>\n </Show>\n\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/FileStatus.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n useMemo,\n type HTMLAttributes,\n type MouseEvent,\n} from 'react'\nimport {\n fileStatus,\n type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Field } from '../context/field'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n /**\n * A unique identifier for the file status. Required for accessibility.\n */\n id: string\n /**\n * The name of the file.\n */\n file: string\n /**\n * The percentage of the file that has been processed.\n */\n now: ProgressBarProps['now']\n /**\n * The status of the file.\n */\n status: processStatus\n /**\n * The action to perform on the file when a user clicks the\n * button located at the end of the status card.\n * @param status - The status of the file.\n * @param e - The event object.\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n * @default () => {}\n */\n onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n TODO = 'todo',\n PROCESSING = 'processing',\n DONE = 'done',\n ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n const { file, now, status, onClick, ...nativeProps } = props\n const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n const palette = useMemo(() => getPalette(status), [status])\n const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n const styles = useMemo(() => {\n switch (status) {\n case processStatus.TODO:\n return fileStatus({ status: 'todo' })\n case processStatus.PROCESSING:\n return fileStatus({ status: 'processing' })\n case processStatus.DONE:\n return fileStatus({ status: 'done' })\n case processStatus.ERROR:\n return fileStatus({ status: 'error' })\n default:\n return fileStatus()\n }\n }, [status])\n\n const handleClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const actionStatus = getStatusActionLabel(\n status,\n ).toLocaleLowerCase() as FileStatusActions\n onClick(actionStatus, e)\n },\n [onClick],\n )\n\n return (\n <div\n {...nativeProps}\n className={cx(nativeProps.className, styles.root, hstack())}\n >\n <Avatar\n ariaLabel=\"\"\n gradient={modalIconPalette}\n icon={<MatchFileStatusIcon size={24} status={status} />}\n src=\"\"\n />\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0.12rem',\n w: 'full',\n })}\n >\n <small\n className={css({\n color: 'page.text.initial',\n textStyle: 'label-sm',\n })}\n >\n {file}\n </small>\n <ProgressBar\n id={props.id}\n label=\"File upload status\"\n now={now}\n size=\"sm\"\n />\n <Field invalid={modalIconPalette === 'hades-dark'}>\n <FieldMessage\n className={css({\n color: 'page.text.100',\n })}\n id={`help:${file}`}\n >\n <MatchFileStatusText status={status} now={now} />\n </FieldMessage>\n </Field>\n </div>\n\n <IconButton\n ariaLabel={actionLabel}\n onClick={handleClick}\n palette={palette}\n size=\"sm\"\n >\n <MatchStatusAction status={status} />\n </IconButton>\n </div>\n )\n}\n\ninterface FileStatusElProps {\n status: FileStatusProps['status']\n size?: 16 | 20 | 24 | 32\n now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n const {\n waitingFileUploader: TodoIcon,\n fileUploader: FileUploaderIcon,\n invalidAlt: InvalidIcon,\n successNotification: DoneIcon,\n } = $cerberusIcons\n\n switch (props.status) {\n case processStatus.TODO:\n return <TodoIcon size={props.size} />\n case processStatus.PROCESSING:\n return <FileUploaderIcon size={props.size} />\n case processStatus.DONE:\n return <DoneIcon size={props.size} />\n case processStatus.ERROR:\n return <InvalidIcon size={props.size} />\n default:\n throw new Error('Unknown status')\n }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n switch (props.status) {\n case processStatus.TODO:\n return 'Waiting to upload'\n case processStatus.PROCESSING:\n return `${props.now}% Complete`\n case processStatus.DONE:\n return 'File uploaded successfully'\n case processStatus.ERROR:\n return 'There was an error uploading the file'\n default:\n throw new Error('Invalid status')\n }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons\n switch (props.status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return <CloseIcon />\n case processStatus.ERROR:\n return <RedoIcon />\n case processStatus.DONE:\n return <TrashIcon />\n default:\n throw new Error('Invalid status')\n }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n switch (status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return 'Cancel'\n case processStatus.ERROR:\n return 'Retry'\n case processStatus.DONE:\n return 'Delete'\n default:\n return ''\n }\n}\n\nfunction getPalette(status: FileStatusKey) {\n switch (status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return 'danger'\n case processStatus.ERROR:\n return 'action'\n case processStatus.DONE:\n return 'danger'\n default:\n return 'action'\n }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n switch (status) {\n case processStatus.TODO:\n case processStatus.PROCESSING:\n return 'charon-light'\n case processStatus.ERROR:\n return 'hades-dark'\n case processStatus.DONE:\n return 'thanatos-light'\n default:\n return 'charon-light'\n }\n}\n"],"mappings":"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","names":["processStatus"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type {\n HTMLAttributes,\n MouseEventHandler,\n PropsWithChildren,\n} from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n iconButton,\n tag,\n type TagVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagVariantProps & {\n /**\n * The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n */\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n /**\n * The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n */\n gradient?: never\n /**\n * The palette to use for the tag. Not available when the onClick prop is\n * provided.\n */\n palette?: never\n /**\n * The action to be performed when the tag is clicked.\n */\n onClick: MouseEventHandler<HTMLSpanElement>\n /**\n * The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' | 'rounded'\n * @default 'pill'\n */\n shape?: never\n /**\n * The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' | 'outlined'\n * @default 'filled'\n */\n usage?: never\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { close: Close } = $cerberusIcons\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;;;;AAMA,SAAS,KAAK,UAAU;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAiEH,SAyBM,KAzBN;AATG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAClD,QAAM,EAAE,OAAO,MAAM,IAAI;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n"],"mappings":";AAkBM,SAaI,KAbJ;AATC,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,OAAM;AAAA,oBACN,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAa;AAAA,oBACb,SAAQ;AAAA,oBACR,QAAO;AAAA,oBAEP;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,eAAc;AAAA,wBACd,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,aAAY;AAAA;AAAA,oBACb;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = (props.palette || 'info') as\n | 'info'\n | 'success'\n | 'warning'\n | 'danger'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key]\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n /**\n * The unique id of the notification. Required for the onClose callback.\n */\n id: string\n /**\n * Called when the close button is clicked.\n */\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n const { close: CloseIcon } = $cerberusIcons\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <CloseIcon />\n </button>\n </dialog>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAiBE,cAuCL,YAvCK;AART,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAW,MAAM,WAAW;AAKlC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n DatePicker as ArkDP,\n type DatePickerContentProps,\n type DatePickerInputProps,\n type DatePickerRootProps,\n type DatePickerViewProps,\n // type DateValue,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\n// import { useCallback } from 'react'\nimport { datePicker } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n DatePickerTrigger,\n DatePickerView,\n DatePickerContext,\n DatePickerViewControlGroup,\n DatePickerTable,\n DatePickerTableHeader,\n DatePickerTableCellTrigger,\n DatePickerTableCell,\n} from './DatePicker.server'\n// import { formatISOToMilitary } from '../hooks/useDate'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n const states = useFieldContext()\n\n // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112\n\n // There is a bug with the Root component that causes random date selection\n // onBlur after the first selection if the format prop is used.\n // const handleFormat = useCallback((value: DateValue) => {\n // return formatISOToMilitary(value.toString())\n // }, [])\n\n return (\n <ArkDP.Root\n {...props}\n {...states}\n positioning={{\n placement: 'bottom-start',\n }}\n />\n )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n const { invalid, ...fieldStates } = useFieldContext()\n return (\n <ArkDP.Control className={datePickerStyles.control}>\n <DatePickerTrigger />\n <ArkDP.Input\n {...props}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n />\n </ArkDP.Control>\n )\n}\n\n/**\n * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\" selection=\"range\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <RangePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: DatePickerInputProps) {\n const { invalid, ...fieldStates } = useFieldContext()\n return (\n <ArkDP.Control data-range className={datePickerStyles.control}>\n <DatePickerTrigger />\n <ArkDP.Input\n {...props}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n data-range-input\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n index={0}\n />\n <ArkDP.Input\n {...props}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n data-range-input\n data-range-end-input\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n index={1}\n />\n </ArkDP.Control>\n )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(props: DatePickerContentProps) {\n const { children, ...contentProps } = props\n return (\n <Portal>\n <ArkDP.Positioner className={datePickerStyles.positioner}>\n <ArkDP.Content\n {...contentProps}\n className={cx(contentProps.className, datePickerStyles.content)}\n >\n {children}\n </ArkDP.Content>\n </ArkDP.Positioner>\n </Portal>\n )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n function isToday(date: ArkDP.DateValue): boolean {\n const today = new Date()\n const formatted = today.toISOString().split('T')[0]\n const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n return formatted === arkDate\n }\n\n function isPastDay(date: ArkDP.DateValue): boolean {\n const today = new Date()\n const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n return new Date(arkDate) < today\n }\n\n function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n if (isToday(date)) return 'today'\n if (isPastDay(date)) return 'past'\n return 'future'\n }\n\n return (\n <DatePickerView {...props} view=\"day\">\n <DatePickerContext>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableHead>\n <ArkDP.TableRow>\n {datePicker.weekDays.map((weekDay, id) => (\n <DatePickerTableHeader key={id}>\n {weekDay.narrow}\n </DatePickerTableHeader>\n ))}\n </ArkDP.TableRow>\n </ArkDP.TableHead>\n\n <ArkDP.TableBody>\n {datePicker.weeks.map((week, id) => (\n <ArkDP.TableRow key={id}>\n {week.map((day, id) => (\n <DatePickerTableCell key={id} value={day}>\n <DatePickerTableCellTrigger\n data-date={getDayValue(day)}\n >\n {day.day}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </DatePickerContext>\n </DatePickerView>\n )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n return (\n <ArkDP.View {...props} view=\"month\">\n <ArkDP.Context>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableBody>\n {datePicker\n .getMonthsGrid({ columns: 4, format: 'short' })\n .map((months, id) => (\n <ArkDP.TableRow key={id}>\n {months.map((month, id) => (\n <DatePickerTableCell key={id} value={month.value}>\n <DatePickerTableCellTrigger>\n {month.label}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </ArkDP.Context>\n </ArkDP.View>\n )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n return (\n <ArkDP.View {...props} view=\"year\">\n <ArkDP.Context>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableBody>\n {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n <ArkDP.TableRow key={id}>\n {years.map((year, id) => (\n <DatePickerTableCell key={id} value={year.value}>\n <DatePickerTableCellTrigger>\n {year.label}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </ArkDP.Context>\n </ArkDP.View>\n )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar() {\n return (\n <DatePickerContent>\n <DatePickerDayView />\n <DatePickerMonthView />\n <DatePickerYearView />\n </DatePickerContent>\n )\n}\n"],"mappings":"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","names":["datePicker","id"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/AccordionItemGroup.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { type AccordionVariantProps } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren } from 'react'\nimport { Show } from './Show'\nimport {\n AccordionItem,\n AccordionItemContent,\n AccordionItemIndicator,\n AccordionItemTrigger,\n} from './Accordion'\nimport { css } from '@cerberus/styled-system/css'\n\n/**\n * This module contains an abstraction of the AccordionItem components.\n * @module\n */\n\nexport interface AccordionItemGroupBaseProps extends ArkAccordion.ItemProps {\n /**\n * The heading of the accordion item to open and close the content.\n */\n heading: string\n /**\n * The position of the arrow indicator.\n */\n indicatorPosition?: 'start' | 'end'\n}\nexport type AccordionItemGroupProps = AccordionItemGroupBaseProps &\n AccordionVariantProps\n\n/**\n * A grouped item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItemGroup heading=\"Accordion Item 1\" value=\"one\">\n * Accordion Item 1 content\n * </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function AccordionItemGroup(\n props: PropsWithChildren<AccordionItemGroupProps>,\n) {\n const {\n size,\n heading,\n children,\n indicatorPosition = 'end',\n ...itemProps\n } = props\n const triggerStyles =\n indicatorPosition === 'start'\n ? {\n gap: 'md',\n justifyContent: 'flex-start',\n }\n : undefined\n\n return (\n <AccordionItem {...itemProps}>\n <AccordionItemTrigger className={css(triggerStyles)} size={size}>\n <Show when={indicatorPosition === 'start'}>\n <AccordionItemIndicator size={size} />\n </Show>\n\n {heading}\n\n <Show when={indicatorPosition === 'end'}>\n <AccordionItemIndicator size={size} />\n </Show>\n </AccordionItemTrigger>\n\n <AccordionItemContent size={size}>{children}</AccordionItemContent>\n </AccordionItem>\n )\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAS,WAAW;AAqDd,SAEI,KAFJ;AApBC,SAAS,mBACd,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,gBACJ,sBAAsB,UAClB;AAAA,IACE,KAAK;AAAA,IACL,gBAAgB;AAAA,EAClB,IACA;AAEN,SACE,qBAAC,iBAAe,GAAG,WACjB;AAAA,yBAAC,wBAAqB,WAAW,IAAI,aAAa,GAAG,MACnD;AAAA,0BAAC,QAAK,MAAM,sBAAsB,SAChC,8BAAC,0BAAuB,MAAY,GACtC;AAAA,MAEC;AAAA,MAED,oBAAC,QAAK,MAAM,sBAAsB,OAChC,8BAAC,0BAAuB,MAAY,GACtC;AAAA,OACF;AAAA,IAEA,oBAAC,wBAAqB,MAAa,UAAS;AAAA,KAC9C;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n avatar,\n type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n /**\n * An optional icon to show when no src or ariaLabel is provided.\n */\n icon?: ReactNode\n /**\n * The size of the avatar.\n */\n width?: number\n /**\n * The size of the avatar.\n */\n height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n SharedAvatarProps & {\n /**\n * The aria-label for the avatar needed for accessibility.\n */\n ariaLabel: string\n /**\n * An optional element to replace the image. Recommended for Next.js Image component.\n */\n as?: never\n /**\n * The source of the image.\n */\n src: string\n }\nexport type AvatarAsProps = SharedAvatarProps & {\n /**\n * An optional element to replace the image. Recommended for Next.js Image component.\n */\n as: ReactNode\n /**\n * The aria-label for the avatar needed for accessibility.\n */\n ariaLabel?: never\n /**\n * The source of the image.\n */\n src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n AvatarVariantProps) &\n (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n * ariaLabel=\"Protector Cerberus\"\n * src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n const {\n ariaLabel,\n as,\n gradient,\n size,\n src,\n width,\n height,\n icon,\n ...nativeProps\n } = props\n const { avatar: AvatarIcon } = $cerberusIcons\n const initials = (ariaLabel || '')\n .split(' ')\n .map((word) => word[0])\n .join('')\n .slice(0, 2)\n\n return (\n <div\n {...nativeProps}\n className={cx(\n nativeProps.className,\n avatar({ gradient, size }),\n circle(),\n )}\n >\n <Show\n when={Boolean(src) || Boolean(as)}\n fallback={\n <Show\n when={Boolean(initials)}\n fallback={\n <Show\n when={Boolean(icon)}\n fallback={\n <AvatarIcon\n size={iconSizeMap[size as keyof typeof iconSizeMap]}\n />\n }\n >\n {icon}\n </Show>\n }\n >\n {initials}\n </Show>\n }\n >\n <Show\n when={Boolean(as)}\n fallback={\n <img\n alt={props.ariaLabel}\n className={css({\n h: 'full',\n objectFit: 'cover',\n w: 'full',\n })}\n decoding=\"async\"\n loading=\"lazy\"\n src={src}\n height={height}\n width={width}\n />\n }\n >\n {as}\n </Show>\n </Show>\n </div>\n )\n}\n\nconst iconSizeMap = {\n xs: 16,\n sm: 16,\n md: 20,\n lg: 34,\n xl: 32,\n '2xl': 32,\n '3xl': 32,\n '4xl': 32,\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AA0GW;AArCX,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,YAAY,aAAa,IAC5B,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,MAAM,GAAG,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO,EAAE,UAAU,KAAK,CAAC;AAAA,QACzB,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,GAAG,KAAK,QAAQ,EAAE;AAAA,UAChC,UACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,QAAQ;AAAA,cACtB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,IAAI;AAAA,kBAClB,UACE;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY,IAAgC;AAAA;AAAA,kBACpD;AAAA,kBAGD;AAAA;AAAA,cACH;AAAA,cAGD;AAAA;AAAA,UACH;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,EAAE;AAAA,cAChB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK,MAAM;AAAA,kBACX,WAAW,IAAI;AAAA,oBACb,GAAG;AAAA,oBACH,WAAW;AAAA,oBACX,GAAG;AAAA,kBACL,CAAC;AAAA,kBACD,UAAS;AAAA,kBACT,SAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cAGD;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n * <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAqBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n toggle,\n type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'id' | 'value'\n> & {\n /**\n * The FieldMessage providing context for the Toggle.\n */\n describedBy?: string\n /**\n * A unique identifier for the Toggle. Required for accessibility.\n */\n id: string\n /**\n * The value of the Toggle.\n */\n value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n * <Field>\n * <Label htmlFor=\"toggle\">Show notifications</Label>\n * <Toggle\n * checked={checked === 'toggle'}\n * id=\"toggle\"\n * onChange={handleChange}\n * value=\"toggle\"\n * />\n * </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n const { size, describedBy, ...nativeProps } = props\n const styles = toggle({ size })\n const { invalid, ...state } = useFieldContext()\n const Icon = $cerberusIcons.toggleChecked\n\n return (\n <span\n className={cx('group', styles.track, hstack())}\n data-checked={props.checked || props.defaultChecked}\n >\n <input\n {...nativeProps}\n {...state}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx('peer', styles.input)}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span\n className={cx(\n styles.thumb,\n vstack({\n justify: 'center',\n }),\n )}\n >\n <Icon />\n </span>\n </span>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AAyDH,SAIE,KAJF;AAPG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,OAAO,OAAO,OAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,27 +0,0 @@
1
- import {
2
- defaultIcons
3
- } from "./chunk-CRII2HNX.js";
4
-
5
- // src/config/defineIcons.ts
6
- function _validateIconsProperties(icons) {
7
- if (!icons.invalid) {
8
- throw new Error(
9
- "The an invalid property must be defined in your custom icons library."
10
- );
11
- }
12
- }
13
- function defineIcons(icons) {
14
- _validateIconsProperties(icons);
15
- $cerberusIcons = {
16
- ...defaultIcons,
17
- ...icons
18
- };
19
- return $cerberusIcons;
20
- }
21
- var $cerberusIcons = defaultIcons;
22
-
23
- export {
24
- defineIcons,
25
- $cerberusIcons
26
- };
27
- //# sourceMappingURL=chunk-QMF5ZNDG.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAA6C;AACvE,2BAAyB,KAAK;AAC9B,mBAAiB;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SAAO;AACT;AAIO,IAAI,iBAAiB;","names":[]}
@@ -1,138 +0,0 @@
1
- import {
2
- Avatar
3
- } from "./chunk-PVIMOXSO.js";
4
- import {
5
- Show
6
- } from "./chunk-BUVVRQLZ.js";
7
- import {
8
- $cerberusIcons
9
- } from "./chunk-QMF5ZNDG.js";
10
-
11
- // src/components/Admonition.tsx
12
- import {
13
- admonition
14
- } from "@cerberus/styled-system/recipes";
15
- import { cx } from "@cerberus/styled-system/css";
16
- import { hstack } from "@cerberus/styled-system/patterns";
17
- import { jsx, jsxs } from "react/jsx-runtime";
18
- function Admonition(props) {
19
- const { children, palette = "page", usage, icon, ...nativeProps } = props;
20
- return /* @__PURE__ */ jsxs(
21
- "aside",
22
- {
23
- ...nativeProps,
24
- className: cx(
25
- nativeProps.className,
26
- hstack({
27
- gap: "md",
28
- w: "full"
29
- }),
30
- admonition({ palette, usage }).root
31
- ),
32
- children: [
33
- /* @__PURE__ */ jsx(Show, { when: Boolean(icon), fallback: /* @__PURE__ */ jsx(MatchAvatar, { palette }), children: icon }),
34
- /* @__PURE__ */ jsx("div", { children })
35
- ]
36
- }
37
- );
38
- }
39
- function AdmonitionHeading(props) {
40
- const { palette, usage, ...nativeProps } = props;
41
- return /* @__PURE__ */ jsx(
42
- "p",
43
- {
44
- ...nativeProps,
45
- className: cx(
46
- nativeProps.className,
47
- admonition({ palette, usage }).heading
48
- )
49
- }
50
- );
51
- }
52
- function AdmonitionDescription(props) {
53
- const { palette, usage, ...nativeProps } = props;
54
- return /* @__PURE__ */ jsx(
55
- "p",
56
- {
57
- ...nativeProps,
58
- className: cx(
59
- nativeProps.className,
60
- admonition({ palette, usage }).description
61
- )
62
- }
63
- );
64
- }
65
- function MatchAvatar(props) {
66
- const {
67
- infoNotification: InfoIcon,
68
- successNotification: SuccessIcon,
69
- warningNotification: WarningIcon,
70
- dangerNotification: DangerIcon
71
- } = $cerberusIcons;
72
- switch (props.palette) {
73
- case "page":
74
- return /* @__PURE__ */ jsx(
75
- Avatar,
76
- {
77
- gradient: "charon-light",
78
- ariaLabel: "",
79
- icon: /* @__PURE__ */ jsx(InfoIcon, {}),
80
- size: "sm",
81
- src: ""
82
- }
83
- );
84
- case "info":
85
- return /* @__PURE__ */ jsx(
86
- Avatar,
87
- {
88
- gradient: "amphiaraus-dark",
89
- ariaLabel: "",
90
- icon: /* @__PURE__ */ jsx(InfoIcon, {}),
91
- size: "sm",
92
- src: ""
93
- }
94
- );
95
- case "success":
96
- return /* @__PURE__ */ jsx(
97
- Avatar,
98
- {
99
- gradient: "thanatos-dark",
100
- ariaLabel: "",
101
- icon: /* @__PURE__ */ jsx(SuccessIcon, {}),
102
- size: "sm",
103
- src: ""
104
- }
105
- );
106
- case "warning":
107
- return /* @__PURE__ */ jsx(
108
- Avatar,
109
- {
110
- gradient: "asphodel-light",
111
- ariaLabel: "",
112
- icon: /* @__PURE__ */ jsx(WarningIcon, {}),
113
- size: "sm",
114
- src: ""
115
- }
116
- );
117
- case "danger":
118
- return /* @__PURE__ */ jsx(
119
- Avatar,
120
- {
121
- gradient: "hades-light",
122
- ariaLabel: "",
123
- icon: /* @__PURE__ */ jsx(DangerIcon, {}),
124
- size: "sm",
125
- src: ""
126
- }
127
- );
128
- default:
129
- throw new Error("Unsupported admonition palette");
130
- }
131
- }
132
-
133
- export {
134
- Admonition,
135
- AdmonitionHeading,
136
- AdmonitionDescription
137
- };
138
- //# sourceMappingURL=chunk-QQOWWMZ3.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Admonition.tsx"],"sourcesContent":["import {\n admonition,\n type AdmonitionVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { Avatar } from './Avatar'\nimport { Show } from './Show'\n\n/**\n * This module provides a set of components for creating admonitions.\n * @module Admonition\n */\n\nexport type AdmonitionProps = HTMLAttributes<HTMLDivElement> &\n AdmonitionVariantProps & {\n /**\n * One off replacement for the icon.\n */\n icon?: ReactNode\n }\n\n/**\n * The `Admonition` component is used to create an admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function Admonition(props: AdmonitionProps) {\n const { children, palette = 'page', usage, icon, ...nativeProps } = props\n return (\n <aside\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n gap: 'md',\n w: 'full',\n }),\n admonition({ palette, usage }).root,\n )}\n >\n <Show when={Boolean(icon)} fallback={<MatchAvatar palette={palette} />}>\n {icon}\n </Show>\n <div>{children}</div>\n </aside>\n )\n}\n\nexport type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> &\n AdmonitionVariantProps\n\n/**\n * The `AdmonitionHeading` component is used to create a heading within an\n * admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function AdmonitionHeading(props: AdmonitionHeadingProps) {\n const { palette, usage, ...nativeProps } = props\n return (\n <p\n {...nativeProps}\n className={cx(\n nativeProps.className,\n admonition({ palette, usage }).heading,\n )}\n />\n )\n}\n\nexport type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> &\n AdmonitionVariantProps\n\n/**\n * The `AdmonitionDescription` component is used to create a description within\n * an admonition.\n * @example\n * ```tsx\n * <Admonition palette=\"page\">\n * <AdmonitionHeading palette=\"page\">Page</AdmonitionHeading>\n * <AdmonitionDescription palette=\"page\">\n * This is a page admonition.\n * </AdmonitionDescription>\n * </Admonition>\n * ```\n * @see https://cerberus.digitalu.design/react/admonition\n */\nexport function AdmonitionDescription(props: AdmonitionDescriptionProps) {\n const { palette, usage, ...nativeProps } = props\n return (\n <p\n {...nativeProps}\n className={cx(\n nativeProps.className,\n admonition({ palette, usage }).description,\n )}\n />\n )\n}\n\n// Private components\n\ntype MatchAvatarProps = AdmonitionVariantProps\n\nfunction MatchAvatar(props: MatchAvatarProps) {\n const {\n infoNotification: InfoIcon,\n successNotification: SuccessIcon,\n warningNotification: WarningIcon,\n dangerNotification: DangerIcon,\n } = $cerberusIcons\n switch (props.palette) {\n case 'page':\n return (\n <Avatar\n gradient=\"charon-light\"\n ariaLabel=\"\"\n icon={<InfoIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'info':\n return (\n <Avatar\n gradient=\"amphiaraus-dark\"\n ariaLabel=\"\"\n icon={<InfoIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'success':\n return (\n <Avatar\n gradient=\"thanatos-dark\"\n ariaLabel=\"\"\n icon={<SuccessIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'warning':\n return (\n <Avatar\n gradient=\"asphodel-light\"\n ariaLabel=\"\"\n icon={<WarningIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n case 'danger':\n return (\n <Avatar\n gradient=\"hades-light\"\n ariaLabel=\"\"\n icon={<DangerIcon />}\n size=\"sm\"\n src=\"\"\n />\n )\n\n default:\n throw new Error('Unsupported admonition palette')\n }\n}\n"],"mappings":";;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAmCnB,SAWuC,KAXvC;AAHG,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,UAAU,UAAU,QAAQ,OAAO,MAAM,GAAG,YAAY,IAAI;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,UACL,GAAG;AAAA,QACL,CAAC;AAAA,QACD,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA,MAEA;AAAA,4BAAC,QAAK,MAAM,QAAQ,IAAI,GAAG,UAAU,oBAAC,eAAY,SAAkB,GACjE,gBACH;AAAA,QACA,oBAAC,SAAK,UAAS;AAAA;AAAA;AAAA,EACjB;AAEJ;AAmBO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,SAAS,OAAO,GAAG,YAAY,IAAI;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA;AAAA,EACF;AAEJ;AAmBO,SAAS,sBAAsB,OAAmC;AACvE,QAAM,EAAE,SAAS,OAAO,GAAG,YAAY,IAAI;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW,EAAE,SAAS,MAAM,CAAC,EAAE;AAAA,MACjC;AAAA;AAAA,EACF;AAEJ;AAMA,SAAS,YAAY,OAAyB;AAC5C,QAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,EACtB,IAAI;AACJ,UAAQ,MAAM,SAAS;AAAA,IACrB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,YAAS;AAAA,UAChB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,YAAS;AAAA,UAChB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,eAAY;AAAA,UACnB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,eAAY;AAAA,UACnB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAU;AAAA,UACV,MAAM,oBAAC,cAAW;AAAA,UAClB,MAAK;AAAA,UACL,KAAI;AAAA;AAAA,MACN;AAAA,IAGJ;AACE,YAAM,IAAI,MAAM,gCAAgC;AAAA,EACpD;AACF;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n checkbox,\n type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n /**\n * The id of the FieldMessage element describing the Checkbox.\n */\n describedBy?: string\n /**\n * The unique identifier for the checkbox. Required for accessibility.\n */\n id: string\n /**\n * Used to display a mixed checked state.\n * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)\n */\n mixed?: boolean\n }\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n * <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function Checkbox(props: CheckboxProps) {\n const { describedBy, size, checked, mixed, ...nativeProps } = props\n const { invalid, ...fieldStates } = useFieldContext()\n const styles = checkbox({ size })\n const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } =\n $cerberusIcons\n\n return (\n <div\n className={cx(\n styles.root,\n vstack({\n gap: '0',\n justify: 'center',\n }),\n )}\n >\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n {...(mixed && { 'aria-checked': 'mixed' })}\n className={cx('peer', nativeProps.className, styles.input)}\n type=\"checkbox\"\n />\n <Show when={checked && !mixed}>\n <span className={styles.icon}>\n <CheckIcon />\n </span>\n </Show>\n <Show when={mixed}>\n <span className={styles.icon}>\n <IndeterminateIcon />\n </span>\n </Show>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AAgDf,SASE,KATF;AARG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AAC9D,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAC5D;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,WAAW,GAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,QAAK,MAAM,WAAW,CAAC,OACtB,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,aAAU,GACb,GACF;AAAA,QACA,oBAAC,QAAK,MAAM,OACV,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,qBAAkB,GACrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n accordion,\n type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\nexport type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps\n\n/**\n * The context provider for the Accordion family.\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItemGroup heading=\"Item 1 heading\" value=\"one\">\n * This is the content\n * </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function Accordion(props: AccordionProps) {\n const { size, className, ...rootProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Root\n collapsible\n className={cx(className, styles.root)}\n {...rootProps}\n />\n )\n}\n\ntype AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps\n\n/**\n * The item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItem(props: AccordionItemProps) {\n const { size, ...itemProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Item\n {...itemProps}\n className={cx(itemProps.className, styles.item)}\n />\n )\n}\n\nexport type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &\n AccordionVariantProps\n\n/**\n * The trigger for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItemTrigger(props: AccordionItemTriggerProps) {\n const { size, ...triggerProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemTrigger\n {...triggerProps}\n className={cx(triggerProps.className, styles.itemTrigger)}\n />\n )\n}\n\nexport type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &\n AccordionVariantProps\n\n/**\n * The indicator for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemIndicator(props: AccordionItemIndicatorProps) {\n const { size, ...indicatorProps } = props\n const styles = accordion({ size })\n const iconSize = size === 'sm' ? 16 : '24'\n const { accordionIndicator: ChevronDown } = $cerberusIcons\n\n return (\n <ArkAccordion.ItemIndicator\n {...indicatorProps}\n className={cx(indicatorProps.className, styles.itemIndicator)}\n >\n <ChevronDown size={iconSize} />\n </ArkAccordion.ItemIndicator>\n )\n}\n\nexport type AccordionItemContentProps = ArkAccordion.ItemContentProps &\n AccordionVariantProps\n\n/**\n * The content for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemContent(props: AccordionItemContentProps) {\n const { size, ...contentProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemContent\n {...contentProps}\n className={cx(contentProps.className, styles.itemContent)}\n />\n )\n}\n"],"mappings":";;;;;AAAA,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAqBH;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,WAAW,GAAG,UAAU,IAAI;AAC1C,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,WAAW,OAAO,IAAI;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAqBO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,UAAU,WAAW,OAAO,IAAI;AAAA;AAAA,EAChD;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;AAsBO,SAAS,uBAAuB,OAAoC;AACzE,QAAM,EAAE,MAAM,GAAG,eAAe,IAAI;AACpC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,EAAE,oBAAoB,YAAY,IAAI;AAE5C,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,eAAe,WAAW,OAAO,aAAa;AAAA,MAE5D,8BAAC,eAAY,MAAM,UAAU;AAAA;AAAA,EAC/B;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n /**\n * The id of the FieldMessage component used to describe the input. Required for accessibility.\n */\n describedBy?: string\n /**\n * The unique identifier for the input element. Required for accessibility.\n */\n id: string\n /**\n * An optional icon to display at the start of the input.\n */\n startIcon?: ReactNode\n /**\n * An optional icon to display at the end of the input.\n */\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputVariantProps\n\n/**\n * A component that allows the user to input text. Must be wrapped in a Field\n * component to keep track of the state for entire group of elements related to\n * the field.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n const { invalid: InvalidIcon } = $cerberusIcons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAwCf,SAEI,KAFJ;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport {\n select,\n type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the select components.\n * @module\n */\n\nexport type SelectProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n 'size'\n> &\n SelectVariantProps & {\n /**\n * The unique id of the select element. Required for accessibility.\n */\n id: string\n /**\n * The id of the FieldMessage that describes the select element.\n */\n describedBy?: string\n }\n\n/**\n * Used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/select\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n * <Select describedby=\"help:fruit\" id=\"fruit\">\n * <Option value=\"\">Choose option</Option>\n * <Option value=\"one\">Option 1</Option>\n * <Option value=\"two\">Option 2</Option>\n * <Option value=\"three\">Option 3</Option>\n * </Select>\n * </Field>\n * ```\n */\nexport function Select(props: SelectProps) {\n const { describedBy, size, ...nativeProps } = props\n const { invalid, ...fieldStates } = useFieldContext()\n const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons\n const styles = select({\n size,\n })\n\n return (\n <div className={styles.root}>\n <select\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={styles.input}\n />\n <span\n className={cx(\n styles.iconStack,\n hstack({\n gap: '2',\n }),\n )}\n >\n <Show when={invalid}>\n <span\n {...(invalid && { 'data-invalid': true })}\n className={styles.stateIcon}\n >\n <InvalidIcon />\n </span>\n </Show>\n <span className={styles.arrowIcon}>\n <SelectArrow />\n </span>\n </span>\n </div>\n )\n}\n\n// We only export this component for consistency with the other components\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>\n\n/**\n * Option component\n * props: OptionHTMLAttributes<HTMLOptionElement>\n * @example\n * ```tsx\n * <Option value=\"one\">Option 1</Option>\n * ```\n */\nexport function Option(props: OptionProps) {\n return <option {...props} />\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AAoDD,cAOA,YAPA;AAVC,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,EAAE,SAAS,aAAa,aAAa,YAAY,IAAI;AAC3D,QAAM,SAAS,OAAO;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACE,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,OAAO;AAAA;AAAA,IACpB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,YACL,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,8BAAC,QAAK,MAAM,SACV;AAAA,YAAC;AAAA;AAAA,cACE,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,cACvC,WAAW,OAAO;AAAA,cAElB,8BAAC,eAAY;AAAA;AAAA,UACf,GACF;AAAA,UACA,oBAAC,UAAK,WAAW,OAAO,WACtB,8BAAC,eAAY,GACf;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAcO,SAAS,OAAO,OAAoB;AACzC,SAAO,oBAAC,YAAQ,GAAG,OAAO;AAC5B;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n /**\n * The kind of prompt modal to show.\n * @default 'non-destructive'\n */\n kind?: 'destructive' | 'non-destructive'\n /**\n * The heading of the prompt modal.\n */\n heading: string\n /**\n * The description of the prompt modal.\n */\n description?: string\n /**\n * The key to confirm the action.\n */\n key: string\n /**\n * The text for the action button.\n */\n actionText: string\n /**\n * The text for the cancel button.\n */\n cancelText: string\n}\nexport type PromptShowResult =\n | ((value: string | PromiseLike<string>) => void)\n | null\n\nexport interface PromptModalValue {\n /**\n * The method to trigger the prompt modal.\n * @returns the value of the key if the action is confirmed.\n * @example\n * ```tsx\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n */\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(modalRef)\n const PromptIcon = $cerberusIcons.promptModal\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(inputValue)\n }\n close()\n },\n [inputValue, close],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <div\n className={hstack({\n justify: 'center',\n w: 'full',\n })}\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<PromptIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<PromptIcon size={24} />}\n src=\"\"\n />\n </Show>\n </div>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label\n className={css({\n gap: 1,\n justifyContent: 'flex-start',\n })}\n htmlFor=\"confirm\"\n size=\"md\"\n >\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </Modal>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeader>\n * <h2>Modal Heading</h2>\n * </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n return (\n <div\n {...props}\n className={cx(\n props.className,\n vstack({\n alignItems: 'flex-start',\n gap: 'md',\n position: 'relative',\n }),\n )}\n />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,9 +0,0 @@
1
- import {
2
- defaultIcons
3
- } from "../chunk-CRII2HNX.js";
4
- import "../chunk-E3PAEB7Y.js";
5
- import "../chunk-HVKM54BA.js";
6
- export {
7
- defaultIcons
8
- };
9
- //# sourceMappingURL=cerbIcons.js.map