@cerberus-design/react 0.7.4 → 0.8.0-next-e3b4e2b

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 (163) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.ts +592 -7
  2. package/build/legacy/chunk-2VPKILZ6.js +122 -0
  3. package/build/legacy/chunk-2VPKILZ6.js.map +1 -0
  4. package/build/legacy/chunk-3C2DJSEE.js +16 -0
  5. package/build/legacy/chunk-3C2DJSEE.js.map +1 -0
  6. package/build/legacy/chunk-3GXISGPS.js +47 -0
  7. package/build/legacy/chunk-3GXISGPS.js.map +1 -0
  8. package/build/legacy/{chunk-2ATICEW3.js → chunk-6F34A7NZ.js} +4 -2
  9. package/build/legacy/chunk-6F34A7NZ.js.map +1 -0
  10. package/build/legacy/chunk-7VJOPJVX.js +29 -0
  11. package/build/legacy/chunk-7VJOPJVX.js.map +1 -0
  12. package/build/legacy/chunk-A5WYZVUR.js +28 -0
  13. package/build/legacy/chunk-A5WYZVUR.js.map +1 -0
  14. package/build/legacy/{chunk-XGNAFSMG.js → chunk-AAKIOHAX.js} +3 -3
  15. package/build/{modern/chunk-6TXQZ3PB.js → legacy/chunk-BEYPMC73.js} +2 -2
  16. package/build/legacy/chunk-GVNPFXKL.js +26 -0
  17. package/build/legacy/chunk-GVNPFXKL.js.map +1 -0
  18. package/build/legacy/chunk-HW76XVA3.js +22 -0
  19. package/build/legacy/chunk-HW76XVA3.js.map +1 -0
  20. package/build/legacy/{chunk-JWQJLOX4.js → chunk-IL5ELPTT.js} +2 -2
  21. package/build/legacy/{chunk-CU7HXAKM.js → chunk-JJGZRBIR.js} +4 -4
  22. package/build/legacy/{chunk-7CZ3NIGH.js → chunk-L46XIE3D.js} +11 -11
  23. package/build/legacy/chunk-LF2QFS5S.js +76 -0
  24. package/build/legacy/chunk-LF2QFS5S.js.map +1 -0
  25. package/build/legacy/chunk-N3FUF4TB.js +12 -0
  26. package/build/legacy/chunk-N3FUF4TB.js.map +1 -0
  27. package/build/legacy/chunk-PJ3744I6.js +24 -0
  28. package/build/legacy/chunk-PJ3744I6.js.map +1 -0
  29. package/build/legacy/chunk-SMCEFK6Q.js +63 -0
  30. package/build/legacy/chunk-SMCEFK6Q.js.map +1 -0
  31. package/build/legacy/{chunk-5GEC53G7.js → chunk-XB4ZRAH4.js} +5 -5
  32. package/build/legacy/chunk-XREC5IJE.js +24 -0
  33. package/build/legacy/chunk-XREC5IJE.js.map +1 -0
  34. package/build/legacy/components/Button.js +1 -1
  35. package/build/legacy/components/Droppable.js +8 -0
  36. package/build/legacy/components/Droppable.js.map +1 -0
  37. package/build/legacy/components/FileUploader.js +11 -0
  38. package/build/legacy/components/FileUploader.js.map +1 -0
  39. package/build/legacy/components/Input.js +4 -4
  40. package/build/legacy/components/Label.js +2 -2
  41. package/build/legacy/components/Notification.js +11 -0
  42. package/build/legacy/components/Notification.js.map +1 -0
  43. package/build/legacy/components/NotificationDescription.js +7 -0
  44. package/build/legacy/components/NotificationDescription.js.map +1 -0
  45. package/build/legacy/components/NotificationHeading.js +7 -0
  46. package/build/legacy/components/NotificationHeading.js.map +1 -0
  47. package/build/legacy/components/Table.js +9 -0
  48. package/build/legacy/components/Table.js.map +1 -0
  49. package/build/legacy/components/Tbody.js +7 -0
  50. package/build/legacy/components/Tbody.js.map +1 -0
  51. package/build/legacy/components/Td.js +7 -0
  52. package/build/legacy/components/Td.js.map +1 -0
  53. package/build/legacy/components/Th.js +8 -0
  54. package/build/legacy/components/Th.js.map +1 -0
  55. package/build/legacy/components/Thead.js +7 -0
  56. package/build/legacy/components/Thead.js.map +1 -0
  57. package/build/legacy/components/Toggle.js +3 -3
  58. package/build/legacy/config/cerbIcons.js +1 -1
  59. package/build/legacy/config/defineIcons.js +2 -2
  60. package/build/legacy/context/confirm-modal.js +4 -4
  61. package/build/legacy/context/notification-center.js +19 -0
  62. package/build/legacy/context/notification-center.js.map +1 -0
  63. package/build/legacy/context/prompt-modal.js +7 -7
  64. package/build/legacy/index.js +86 -35
  65. package/build/legacy/index.js.map +1 -1
  66. package/build/modern/_tsup-dts-rollup.d.ts +592 -7
  67. package/build/modern/chunk-3C2DJSEE.js +16 -0
  68. package/build/modern/chunk-3C2DJSEE.js.map +1 -0
  69. package/build/modern/chunk-3GXISGPS.js +47 -0
  70. package/build/modern/chunk-3GXISGPS.js.map +1 -0
  71. package/build/modern/chunk-4N2L357B.js +76 -0
  72. package/build/modern/chunk-4N2L357B.js.map +1 -0
  73. package/build/modern/{chunk-2ATICEW3.js → chunk-6F34A7NZ.js} +4 -2
  74. package/build/modern/chunk-6F34A7NZ.js.map +1 -0
  75. package/build/modern/chunk-7VJOPJVX.js +29 -0
  76. package/build/modern/chunk-7VJOPJVX.js.map +1 -0
  77. package/build/modern/chunk-A5WYZVUR.js +28 -0
  78. package/build/modern/chunk-A5WYZVUR.js.map +1 -0
  79. package/build/{legacy/chunk-6TXQZ3PB.js → modern/chunk-BEYPMC73.js} +2 -2
  80. package/build/modern/chunk-GVNPFXKL.js +26 -0
  81. package/build/modern/chunk-GVNPFXKL.js.map +1 -0
  82. package/build/modern/chunk-HW76XVA3.js +22 -0
  83. package/build/modern/chunk-HW76XVA3.js.map +1 -0
  84. package/build/modern/{chunk-JWQJLOX4.js → chunk-IL5ELPTT.js} +2 -2
  85. package/build/modern/chunk-IOG6XIR5.js +62 -0
  86. package/build/modern/chunk-IOG6XIR5.js.map +1 -0
  87. package/build/modern/{chunk-CU7HXAKM.js → chunk-JJGZRBIR.js} +4 -4
  88. package/build/modern/{chunk-FAXDUWAU.js → chunk-LTDNZRUY.js} +11 -11
  89. package/build/modern/chunk-N3FUF4TB.js +12 -0
  90. package/build/modern/chunk-N3FUF4TB.js.map +1 -0
  91. package/build/modern/chunk-PJ3744I6.js +24 -0
  92. package/build/modern/chunk-PJ3744I6.js.map +1 -0
  93. package/build/modern/chunk-QO2UXGW4.js +122 -0
  94. package/build/modern/chunk-QO2UXGW4.js.map +1 -0
  95. package/build/modern/{chunk-5GEC53G7.js → chunk-XB4ZRAH4.js} +5 -5
  96. package/build/modern/chunk-XREC5IJE.js +24 -0
  97. package/build/modern/chunk-XREC5IJE.js.map +1 -0
  98. package/build/modern/{chunk-TPRGGEVJ.js → chunk-Y5IY7O23.js} +3 -3
  99. package/build/modern/components/Button.js +1 -1
  100. package/build/modern/components/Droppable.js +8 -0
  101. package/build/modern/components/Droppable.js.map +1 -0
  102. package/build/modern/components/FileUploader.js +11 -0
  103. package/build/modern/components/FileUploader.js.map +1 -0
  104. package/build/modern/components/Input.js +4 -4
  105. package/build/modern/components/Label.js +2 -2
  106. package/build/modern/components/Notification.js +11 -0
  107. package/build/modern/components/Notification.js.map +1 -0
  108. package/build/modern/components/NotificationDescription.js +7 -0
  109. package/build/modern/components/NotificationDescription.js.map +1 -0
  110. package/build/modern/components/NotificationHeading.js +7 -0
  111. package/build/modern/components/NotificationHeading.js.map +1 -0
  112. package/build/modern/components/Table.js +9 -0
  113. package/build/modern/components/Table.js.map +1 -0
  114. package/build/modern/components/Tbody.js +7 -0
  115. package/build/modern/components/Tbody.js.map +1 -0
  116. package/build/modern/components/Td.js +7 -0
  117. package/build/modern/components/Td.js.map +1 -0
  118. package/build/modern/components/Th.js +8 -0
  119. package/build/modern/components/Th.js.map +1 -0
  120. package/build/modern/components/Thead.js +7 -0
  121. package/build/modern/components/Thead.js.map +1 -0
  122. package/build/modern/components/Toggle.js +3 -3
  123. package/build/modern/config/cerbIcons.js +1 -1
  124. package/build/modern/config/defineIcons.js +2 -2
  125. package/build/modern/context/confirm-modal.js +4 -4
  126. package/build/modern/context/notification-center.js +19 -0
  127. package/build/modern/context/notification-center.js.map +1 -0
  128. package/build/modern/context/prompt-modal.js +7 -7
  129. package/build/modern/index.js +86 -35
  130. package/build/modern/index.js.map +1 -1
  131. package/package.json +5 -2
  132. package/src/components/Button.tsx +6 -3
  133. package/src/components/Droppable.tsx +33 -0
  134. package/src/components/FileUploader.tsx +55 -0
  135. package/src/components/Notification.tsx +98 -0
  136. package/src/components/NotificationDescription.tsx +31 -0
  137. package/src/components/NotificationHeading.tsx +28 -0
  138. package/src/components/Table.tsx +58 -0
  139. package/src/components/Tbody.tsx +31 -0
  140. package/src/components/Td.tsx +34 -0
  141. package/src/components/Th.tsx +56 -0
  142. package/src/components/Thead.tsx +24 -0
  143. package/src/config/cerbIcons.ts +20 -4
  144. package/src/context/notification-center.tsx +181 -0
  145. package/src/index.ts +15 -0
  146. package/build/legacy/chunk-2ATICEW3.js.map +0 -1
  147. package/build/legacy/chunk-C45DY4VE.js +0 -17
  148. package/build/legacy/chunk-C45DY4VE.js.map +0 -1
  149. package/build/modern/chunk-2ATICEW3.js.map +0 -1
  150. package/build/modern/chunk-C45DY4VE.js +0 -17
  151. package/build/modern/chunk-C45DY4VE.js.map +0 -1
  152. /package/build/legacy/{chunk-XGNAFSMG.js.map → chunk-AAKIOHAX.js.map} +0 -0
  153. /package/build/legacy/{chunk-6TXQZ3PB.js.map → chunk-BEYPMC73.js.map} +0 -0
  154. /package/build/legacy/{chunk-JWQJLOX4.js.map → chunk-IL5ELPTT.js.map} +0 -0
  155. /package/build/legacy/{chunk-CU7HXAKM.js.map → chunk-JJGZRBIR.js.map} +0 -0
  156. /package/build/legacy/{chunk-7CZ3NIGH.js.map → chunk-L46XIE3D.js.map} +0 -0
  157. /package/build/legacy/{chunk-5GEC53G7.js.map → chunk-XB4ZRAH4.js.map} +0 -0
  158. /package/build/modern/{chunk-6TXQZ3PB.js.map → chunk-BEYPMC73.js.map} +0 -0
  159. /package/build/modern/{chunk-JWQJLOX4.js.map → chunk-IL5ELPTT.js.map} +0 -0
  160. /package/build/modern/{chunk-CU7HXAKM.js.map → chunk-JJGZRBIR.js.map} +0 -0
  161. /package/build/modern/{chunk-FAXDUWAU.js.map → chunk-LTDNZRUY.js.map} +0 -0
  162. /package/build/modern/{chunk-5GEC53G7.js.map → chunk-XB4ZRAH4.js.map} +0 -0
  163. /package/build/modern/{chunk-TPRGGEVJ.js.map → chunk-Y5IY7O23.js.map} +0 -0
@@ -0,0 +1,122 @@
1
+ import {
2
+ Notification
3
+ } from "./chunk-LF2QFS5S.js";
4
+ import {
5
+ NotificationDescription
6
+ } from "./chunk-HW76XVA3.js";
7
+ import {
8
+ NotificationHeading
9
+ } from "./chunk-3C2DJSEE.js";
10
+ import {
11
+ Portal
12
+ } from "./chunk-4CAT3FHV.js";
13
+ import {
14
+ Button
15
+ } from "./chunk-6F34A7NZ.js";
16
+ import {
17
+ Show
18
+ } from "./chunk-4O4QFF4S.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 == null ? void 0 : 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: "text",
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__ */ jsxs(
90
+ Notification,
91
+ {
92
+ id: option.id,
93
+ onClose: handleClose,
94
+ open: true,
95
+ palette: option.palette,
96
+ children: [
97
+ /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
98
+ /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
99
+ ]
100
+ },
101
+ option.id
102
+ ))
103
+ }
104
+ )
105
+ ] }) }) })
106
+ ] });
107
+ }
108
+ function useNotificationCenter() {
109
+ const context = useContext(NotificationsContext);
110
+ if (!context) {
111
+ throw new Error(
112
+ "useNotificationCenter must be used within a NotificationsProvider"
113
+ );
114
+ }
115
+ return context;
116
+ }
117
+
118
+ export {
119
+ NotificationCenter,
120
+ useNotificationCenter
121
+ };
122
+ //# sourceMappingURL=chunk-2VPKILZ6.js.map
@@ -0,0 +1 @@
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 palette: 'info' | 'success' | 'warning' | 'danger'\n heading: string\n id?: string\n description?: ReactNode\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\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=\"text\"\n >\n Close all\n </Button>\n </Show>\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 <Notification\n id={option.id!}\n key={option.id}\n onClose={handleClose}\n open\n palette={option.palette}\n >\n <NotificationHeading palette={option.palette}>\n {option.heading}\n </NotificationHeading>\n <NotificationDescription palette={option.palette}>\n {option.description}\n </NotificationDescription>\n </Notification>\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\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":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,WAAW,cAAc;AAElC,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AA+FL,cAqBE,YArBF;AA5Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AACJ,QAAM,SAAS,aAAa;AAE5B,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,6BAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,MAAM;AACvC,2BAAuB,CAAC,SAAS;AAC/B,WAAK,QAAQ,CAAC,SAAS;AACrB,YAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,MACjC,CAAC;AACD,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB,+BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,0BAAC,QAAK,MAAM,oBAAoB,UAAU,GACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,OAAO,UAAU,UAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cAEX,SAAS;AAAA,cACT,MAAI;AAAA,cACJ,SAAS,OAAO;AAAA,cAEhB;AAAA,oCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,gBACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,YAVK,OAAO;AAAA,UAWd,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
@@ -0,0 +1,16 @@
1
+ // src/components/NotificationHeading.tsx
2
+ import { cx } from "@cerberus/styled-system/css";
3
+ import {
4
+ notification
5
+ } from "@cerberus/styled-system/recipes";
6
+ import { jsx } from "react/jsx-runtime";
7
+ function NotificationHeading(props) {
8
+ const { palette, ...nativeProps } = props;
9
+ const styles = notification({ palette });
10
+ return /* @__PURE__ */ jsx("p", { className: cx(nativeProps.className, styles.heading), ...nativeProps });
11
+ }
12
+
13
+ export {
14
+ NotificationHeading
15
+ };
16
+ //# sourceMappingURL=chunk-3C2DJSEE.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}
@@ -0,0 +1,47 @@
1
+ import {
2
+ Show
3
+ } from "./chunk-4O4QFF4S.js";
4
+
5
+ // src/components/Th.tsx
6
+ import { css, cx } from "@cerberus/styled-system/css";
7
+ import { th } from "@cerberus/styled-system/recipes";
8
+ import { jsx } from "react/jsx-runtime";
9
+ function Th(props) {
10
+ const { size, onClick, ...nativeProps } = props;
11
+ return /* @__PURE__ */ jsx(
12
+ Show,
13
+ {
14
+ when: Boolean(onClick),
15
+ fallback: /* @__PURE__ */ jsx(
16
+ "th",
17
+ {
18
+ ...nativeProps,
19
+ className: cx(nativeProps.className, th({ size }))
20
+ }
21
+ ),
22
+ children: /* @__PURE__ */ jsx("th", { ...nativeProps, children: /* @__PURE__ */ jsx(
23
+ "button",
24
+ {
25
+ className: cx(
26
+ nativeProps.className,
27
+ th({ size }),
28
+ css({
29
+ alignItems: "center",
30
+ display: "inline-flex",
31
+ justifyContent: "space-between",
32
+ userSelect: "none",
33
+ w: "full"
34
+ })
35
+ ),
36
+ onClick,
37
+ children: props.children
38
+ }
39
+ ) })
40
+ }
41
+ );
42
+ }
43
+
44
+ export {
45
+ Th
46
+ };
47
+ //# sourceMappingURL=chunk-3GXISGPS.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n const { size, onClick, ...nativeProps } = props\n return (\n <Show\n when={Boolean(onClick)}\n fallback={\n <th\n {...nativeProps}\n className={cx(nativeProps.className, th({ size }))}\n />\n }\n >\n <th {...nativeProps}>\n <button\n className={cx(\n nativeProps.className,\n th({ size }),\n css({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'space-between',\n userSelect: 'none',\n w: 'full',\n }),\n )}\n onClick={onClick}\n >\n {props.children}\n </button>\n </th>\n </Show>\n )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AA4BhC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1,6 +1,8 @@
1
1
  // src/components/Button.tsx
2
2
  import { cx } from "@cerberus/styled-system/css";
3
- import { button } from "@cerberus/styled-system/recipes";
3
+ import {
4
+ button
5
+ } from "@cerberus/styled-system/recipes";
4
6
  import { jsx } from "react/jsx-runtime";
5
7
  function Button(props) {
6
8
  const { palette, usage, shape, ...nativeProps } = props;
@@ -23,4 +25,4 @@ function Button(props) {
23
25
  export {
24
26
  Button
25
27
  };
26
- //# sourceMappingURL=chunk-2ATICEW3.js.map
28
+ //# sourceMappingURL=chunk-6F34A7NZ.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n button,\n type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n />\n )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAiBH;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -0,0 +1,29 @@
1
+ // src/components/Droppable.tsx
2
+ import { useDroppable } from "@dnd-kit/core";
3
+ import { useId } from "react";
4
+ import { jsx } from "react/jsx-runtime";
5
+ function Droppable(props) {
6
+ const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
7
+ const uuid = useId();
8
+ const { isOver, setNodeRef } = useDroppable({
9
+ data,
10
+ disabled,
11
+ id: id || uuid,
12
+ resizeObserverConfig
13
+ });
14
+ return /* @__PURE__ */ jsx(
15
+ "div",
16
+ {
17
+ ...nativeProps,
18
+ "data-over": isOver,
19
+ "data-dropped": dropped,
20
+ ref: setNodeRef,
21
+ children: props.children
22
+ }
23
+ );
24
+ }
25
+
26
+ export {
27
+ Droppable
28
+ };
29
+ //# sourceMappingURL=chunk-7VJOPJVX.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Droppable.tsx"],"sourcesContent":["'use client'\n\nimport { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'\nimport { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'\n\nexport interface DroppableProps\n extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,\n UseDroppableArguments {\n dropped?: boolean\n}\n\nexport function Droppable(props: PropsWithChildren<DroppableProps>) {\n const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =\n props\n const uuid = useId()\n const { isOver, setNodeRef } = useDroppable({\n data,\n disabled,\n id: id || uuid,\n resizeObserverConfig,\n })\n\n return (\n <div\n {...nativeProps}\n data-over={isOver}\n data-dropped={dropped}\n ref={setNodeRef}\n >\n {props.children}\n </div>\n )\n}\n"],"mappings":";AAEA,SAAS,oBAAgD;AACzD,SAAS,aAA8D;AAoBnE;AAZG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,IAAI,UAAU,MAAM,sBAAsB,GAAG,YAAY,IACxE;AACF,QAAM,OAAO,MAAM;AACnB,QAAM,EAAE,QAAQ,WAAW,IAAI,aAAa;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,IAAI,MAAM;AAAA,IACV;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,gBAAc;AAAA,MACd,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}
@@ -0,0 +1,28 @@
1
+ // src/components/Table.tsx
2
+ import { cx } from "@cerberus/styled-system/css";
3
+ import { table } from "@cerberus/styled-system/recipes";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ function Table(props) {
6
+ const { caption, children, ...nativeProps } = props;
7
+ const styles = table();
8
+ return /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxs(
9
+ "table",
10
+ {
11
+ ...nativeProps,
12
+ className: cx(nativeProps.className, styles.table),
13
+ children: [
14
+ /* @__PURE__ */ jsx("caption", { className: styles.caption, children: caption }),
15
+ children
16
+ ]
17
+ }
18
+ ) });
19
+ }
20
+ function Tr(props) {
21
+ return /* @__PURE__ */ jsx("tr", { ...props });
22
+ }
23
+
24
+ export {
25
+ Table,
26
+ Tr
27
+ };
28
+ //# sourceMappingURL=chunk-A5WYZVUR.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n caption: string\n}\n\n/**\n * The Table component is used to render a table.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @prop caption - An easy to understand description of the table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n * {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n const { caption, children, ...nativeProps } = props\n const styles = table()\n\n return (\n <div className={styles.container}>\n <table\n {...nativeProps}\n className={cx(nativeProps.className, styles.table)}\n >\n <caption className={styles.caption}>{caption}</caption>\n {children}\n </table>\n </div>\n )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n * {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n return <tr {...props} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AA6BhB,SAIE,KAJF;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,MAAM;AAErB,SACE,oBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,4BAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,oBAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}
@@ -18,7 +18,7 @@ import {
18
18
  } from "./chunk-JJP2TFTU.js";
19
19
  import {
20
20
  Button
21
- } from "./chunk-2ATICEW3.js";
21
+ } from "./chunk-6F34A7NZ.js";
22
22
  import {
23
23
  Show
24
24
  } from "./chunk-4O4QFF4S.js";
@@ -27,7 +27,7 @@ import {
27
27
  } from "./chunk-KESKDLX6.js";
28
28
  import {
29
29
  $cerberusIcons
30
- } from "./chunk-6TXQZ3PB.js";
30
+ } from "./chunk-BEYPMC73.js";
31
31
  import {
32
32
  useModal
33
33
  } from "./chunk-TZNYJ3G7.js";
@@ -152,4 +152,4 @@ export {
152
152
  ConfirmModal,
153
153
  useConfirmModal
154
154
  };
155
- //# sourceMappingURL=chunk-XGNAFSMG.js.map
155
+ //# sourceMappingURL=chunk-AAKIOHAX.js.map
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defaultIcons
3
- } from "./chunk-C45DY4VE.js";
3
+ } from "./chunk-GVNPFXKL.js";
4
4
 
5
5
  // src/config/defineIcons.ts
6
6
  function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
24
24
  defineIcons,
25
25
  $cerberusIcons
26
26
  };
27
- //# sourceMappingURL=chunk-6TXQZ3PB.js.map
27
+ //# sourceMappingURL=chunk-BEYPMC73.js.map
@@ -0,0 +1,26 @@
1
+ // src/config/cerbIcons.ts
2
+ import {
3
+ Checkmark,
4
+ CheckmarkFilled,
5
+ CloudUpload,
6
+ ErrorFilled,
7
+ Information,
8
+ InformationFilled,
9
+ WarningFilled
10
+ } from "@cerberus/icons";
11
+ var defaultIcons = {
12
+ confirmModal: Information,
13
+ promptModal: Information,
14
+ fileUploader: CloudUpload,
15
+ infoNotification: InformationFilled,
16
+ successNotification: CheckmarkFilled,
17
+ warningNotification: WarningFilled,
18
+ dangerNotification: ErrorFilled,
19
+ invalid: WarningFilled,
20
+ toggleChecked: Checkmark
21
+ };
22
+
23
+ export {
24
+ defaultIcons
25
+ };
26
+ //# sourceMappingURL=chunk-GVNPFXKL.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n Checkmark,\n CheckmarkFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n confirmModal?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n confirmModal: Information,\n promptModal: Information,\n fileUploader: CloudUpload,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAiBA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}
@@ -0,0 +1,22 @@
1
+ // src/components/NotificationDescription.tsx
2
+ import { cx } from "@cerberus/styled-system/css";
3
+ import {
4
+ notification
5
+ } from "@cerberus/styled-system/recipes";
6
+ import { jsx } from "react/jsx-runtime";
7
+ function NotificationDescription(props) {
8
+ const { palette, ...nativeProps } = props;
9
+ const styles = notification({ palette });
10
+ return /* @__PURE__ */ jsx(
11
+ "p",
12
+ {
13
+ className: cx(nativeProps.className, styles.description),
14
+ ...nativeProps
15
+ }
16
+ );
17
+ }
18
+
19
+ export {
20
+ NotificationDescription
21
+ };
22
+ //# sourceMappingURL=chunk-HW76XVA3.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/**\n * The NotificationDescription component is used to render the description of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p\n className={cx(nativeProps.className, styles.description)}\n {...nativeProps}\n />\n )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-ZAU4JVLL.js";
4
4
  import {
5
5
  $cerberusIcons
6
- } from "./chunk-6TXQZ3PB.js";
6
+ } from "./chunk-BEYPMC73.js";
7
7
 
8
8
  // src/components/Toggle.tsx
9
9
  import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
55
55
  export {
56
56
  Toggle
57
57
  };
58
- //# sourceMappingURL=chunk-JWQJLOX4.js.map
58
+ //# sourceMappingURL=chunk-IL5ELPTT.js.map
@@ -1,9 +1,9 @@
1
- import {
2
- Show
3
- } from "./chunk-4O4QFF4S.js";
4
1
  import {
5
2
  useFieldContext
6
3
  } from "./chunk-ZAU4JVLL.js";
4
+ import {
5
+ Show
6
+ } from "./chunk-4O4QFF4S.js";
7
7
 
8
8
  // src/components/Label.tsx
9
9
  import { label } from "@cerberus/styled-system/recipes";
@@ -46,4 +46,4 @@ function Label(props) {
46
46
  export {
47
47
  Label
48
48
  };
49
- //# sourceMappingURL=chunk-CU7HXAKM.js.map
49
+ //# sourceMappingURL=chunk-JJGZRBIR.js.map
@@ -1,6 +1,12 @@
1
1
  import {
2
2
  Portal
3
3
  } from "./chunk-4CAT3FHV.js";
4
+ import {
5
+ Input
6
+ } from "./chunk-XB4ZRAH4.js";
7
+ import {
8
+ Label
9
+ } from "./chunk-JJGZRBIR.js";
4
10
  import {
5
11
  Modal
6
12
  } from "./chunk-2UFNQM55.js";
@@ -18,25 +24,19 @@ import {
18
24
  } from "./chunk-JJP2TFTU.js";
19
25
  import {
20
26
  Button
21
- } from "./chunk-2ATICEW3.js";
22
- import {
23
- Input
24
- } from "./chunk-5GEC53G7.js";
27
+ } from "./chunk-6F34A7NZ.js";
25
28
  import {
26
- Label
27
- } from "./chunk-CU7HXAKM.js";
29
+ Field
30
+ } from "./chunk-ZAU4JVLL.js";
28
31
  import {
29
32
  Show
30
33
  } from "./chunk-4O4QFF4S.js";
31
- import {
32
- Field
33
- } from "./chunk-ZAU4JVLL.js";
34
34
  import {
35
35
  trapFocus
36
36
  } from "./chunk-KESKDLX6.js";
37
37
  import {
38
38
  $cerberusIcons
39
- } from "./chunk-6TXQZ3PB.js";
39
+ } from "./chunk-BEYPMC73.js";
40
40
  import {
41
41
  useModal
42
42
  } from "./chunk-TZNYJ3G7.js";
@@ -205,4 +205,4 @@ export {
205
205
  PromptModal,
206
206
  usePromptModal
207
207
  };
208
- //# sourceMappingURL=chunk-7CZ3NIGH.js.map
208
+ //# sourceMappingURL=chunk-L46XIE3D.js.map
@@ -0,0 +1,76 @@
1
+ import {
2
+ trapFocus
3
+ } from "./chunk-KESKDLX6.js";
4
+ import {
5
+ $cerberusIcons
6
+ } from "./chunk-BEYPMC73.js";
7
+
8
+ // src/components/Notification.tsx
9
+ import { cx } from "@cerberus/styled-system/css";
10
+ import { hstack, vstack } from "@cerberus/styled-system/patterns";
11
+ import {
12
+ notification
13
+ } from "@cerberus/styled-system/recipes";
14
+ import {
15
+ useRef
16
+ } from "react";
17
+ import { Close } from "@cerberus/icons";
18
+ import { jsx, jsxs } from "react/jsx-runtime";
19
+ function MatchNotificationIcon(props) {
20
+ const palette = props.palette || "info";
21
+ const key = `${palette}Notification`;
22
+ const Icon = $cerberusIcons[key];
23
+ return /* @__PURE__ */ jsx(Icon, {});
24
+ }
25
+ function Notification(props) {
26
+ const { children, palette, onClose, ...nativeProps } = props;
27
+ const ref = useRef(null);
28
+ const onKeyDown = trapFocus(ref);
29
+ const styles = notification({ palette });
30
+ return /* @__PURE__ */ jsxs(
31
+ "dialog",
32
+ {
33
+ ...nativeProps,
34
+ className: cx(
35
+ nativeProps.className,
36
+ hstack({
37
+ position: "relative",
38
+ gap: "4"
39
+ }),
40
+ styles.dialog
41
+ ),
42
+ onKeyDown,
43
+ ref,
44
+ role: "alert",
45
+ children: [
46
+ /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(MatchNotificationIcon, { palette }) }),
47
+ /* @__PURE__ */ jsx(
48
+ "div",
49
+ {
50
+ className: vstack({
51
+ alignItems: "flex-start",
52
+ gap: "0",
53
+ py: "2"
54
+ }),
55
+ children
56
+ }
57
+ ),
58
+ /* @__PURE__ */ jsx(
59
+ "button",
60
+ {
61
+ "aria-label": "Close",
62
+ className: styles.close,
63
+ onClick: onClose,
64
+ value: props.id,
65
+ children: /* @__PURE__ */ jsx(Close, {})
66
+ }
67
+ )
68
+ ]
69
+ }
70
+ );
71
+ }
72
+
73
+ export {
74
+ Notification
75
+ };
76
+ //# sourceMappingURL=chunk-LF2QFS5S.js.map
@@ -0,0 +1 @@
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 { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\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'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n id: string\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\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\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 role=\"alert\"\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 <Close />\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;AACP,SAAS,aAAa;AAcb,cA+BL,YA/BK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AAuBO,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;AAEvC,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,MACA,MAAK;AAAA,MAEL;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,SAAM;AAAA;AAAA,QACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -0,0 +1,12 @@
1
+ // src/components/Thead.tsx
2
+ import { cx } from "@cerberus/styled-system/css";
3
+ import { thead } from "@cerberus/styled-system/recipes";
4
+ import { jsx } from "react/jsx-runtime";
5
+ function Thead(props) {
6
+ return /* @__PURE__ */ jsx("thead", { ...props, className: cx(props.className, thead()) });
7
+ }
8
+
9
+ export {
10
+ Thead
11
+ };
12
+ //# sourceMappingURL=chunk-N3FUF4TB.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the Thead component.\n * @module\n */\n\nexport type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>\n\n/**\n * The Thead component is used to render a table header.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Thead>\n * {children}\n * </Thead>\n * ```\n */\nexport function Thead(props: TheadProps) {\n return <thead {...props} className={cx(props.className, thead())} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAqBb;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,oBAAC,WAAO,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,CAAC,GAAG;AACpE;","names":[]}
@@ -0,0 +1,24 @@
1
+ // src/components/Tbody.tsx
2
+ import { tbody } from "@cerberus/styled-system/recipes";
3
+ import { cx } from "@cerberus/styled-system/css";
4
+ import { jsx } from "react/jsx-runtime";
5
+ function Tbody(props) {
6
+ const { decoration, ...nativeProps } = props;
7
+ return /* @__PURE__ */ jsx(
8
+ "tbody",
9
+ {
10
+ ...nativeProps,
11
+ className: cx(
12
+ nativeProps.className,
13
+ tbody({
14
+ decoration
15
+ })
16
+ )
17
+ }
18
+ );
19
+ }
20
+
21
+ export {
22
+ Tbody
23
+ };
24
+ //# sourceMappingURL=chunk-PJ3744I6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { TableHTMLAttributes } from 'react'\n\nexport type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <TBody>\n * {children}\n * </TBody>\n * ```\n */\nexport function Tbody(props: TbodyProps) {\n const { decoration, ...nativeProps } = props\n return (\n <tbody\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tbody({\n decoration,\n }),\n )}\n />\n )\n}\n"],"mappings":";AAAA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAmBf;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,YAAY,GAAG,YAAY,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}