@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.
- package/build/legacy/_tsup-dts-rollup.d.ts +592 -7
- package/build/legacy/chunk-2VPKILZ6.js +122 -0
- package/build/legacy/chunk-2VPKILZ6.js.map +1 -0
- package/build/legacy/chunk-3C2DJSEE.js +16 -0
- package/build/legacy/chunk-3C2DJSEE.js.map +1 -0
- package/build/legacy/chunk-3GXISGPS.js +47 -0
- package/build/legacy/chunk-3GXISGPS.js.map +1 -0
- package/build/legacy/{chunk-2ATICEW3.js → chunk-6F34A7NZ.js} +4 -2
- package/build/legacy/chunk-6F34A7NZ.js.map +1 -0
- package/build/legacy/chunk-7VJOPJVX.js +29 -0
- package/build/legacy/chunk-7VJOPJVX.js.map +1 -0
- package/build/legacy/chunk-A5WYZVUR.js +28 -0
- package/build/legacy/chunk-A5WYZVUR.js.map +1 -0
- package/build/legacy/{chunk-XGNAFSMG.js → chunk-AAKIOHAX.js} +3 -3
- package/build/{modern/chunk-6TXQZ3PB.js → legacy/chunk-BEYPMC73.js} +2 -2
- package/build/legacy/chunk-GVNPFXKL.js +26 -0
- package/build/legacy/chunk-GVNPFXKL.js.map +1 -0
- package/build/legacy/chunk-HW76XVA3.js +22 -0
- package/build/legacy/chunk-HW76XVA3.js.map +1 -0
- package/build/legacy/{chunk-JWQJLOX4.js → chunk-IL5ELPTT.js} +2 -2
- package/build/legacy/{chunk-CU7HXAKM.js → chunk-JJGZRBIR.js} +4 -4
- package/build/legacy/{chunk-7CZ3NIGH.js → chunk-L46XIE3D.js} +11 -11
- package/build/legacy/chunk-LF2QFS5S.js +76 -0
- package/build/legacy/chunk-LF2QFS5S.js.map +1 -0
- package/build/legacy/chunk-N3FUF4TB.js +12 -0
- package/build/legacy/chunk-N3FUF4TB.js.map +1 -0
- package/build/legacy/chunk-PJ3744I6.js +24 -0
- package/build/legacy/chunk-PJ3744I6.js.map +1 -0
- package/build/legacy/chunk-SMCEFK6Q.js +63 -0
- package/build/legacy/chunk-SMCEFK6Q.js.map +1 -0
- package/build/legacy/{chunk-5GEC53G7.js → chunk-XB4ZRAH4.js} +5 -5
- package/build/legacy/chunk-XREC5IJE.js +24 -0
- package/build/legacy/chunk-XREC5IJE.js.map +1 -0
- package/build/legacy/components/Button.js +1 -1
- package/build/legacy/components/Droppable.js +8 -0
- package/build/legacy/components/Droppable.js.map +1 -0
- package/build/legacy/components/FileUploader.js +11 -0
- package/build/legacy/components/FileUploader.js.map +1 -0
- package/build/legacy/components/Input.js +4 -4
- package/build/legacy/components/Label.js +2 -2
- package/build/legacy/components/Notification.js +11 -0
- package/build/legacy/components/Notification.js.map +1 -0
- package/build/legacy/components/NotificationDescription.js +7 -0
- package/build/legacy/components/NotificationDescription.js.map +1 -0
- package/build/legacy/components/NotificationHeading.js +7 -0
- package/build/legacy/components/NotificationHeading.js.map +1 -0
- package/build/legacy/components/Table.js +9 -0
- package/build/legacy/components/Table.js.map +1 -0
- package/build/legacy/components/Tbody.js +7 -0
- package/build/legacy/components/Tbody.js.map +1 -0
- package/build/legacy/components/Td.js +7 -0
- package/build/legacy/components/Td.js.map +1 -0
- package/build/legacy/components/Th.js +8 -0
- package/build/legacy/components/Th.js.map +1 -0
- package/build/legacy/components/Thead.js +7 -0
- package/build/legacy/components/Thead.js.map +1 -0
- package/build/legacy/components/Toggle.js +3 -3
- package/build/legacy/config/cerbIcons.js +1 -1
- package/build/legacy/config/defineIcons.js +2 -2
- package/build/legacy/context/confirm-modal.js +4 -4
- package/build/legacy/context/notification-center.js +19 -0
- package/build/legacy/context/notification-center.js.map +1 -0
- package/build/legacy/context/prompt-modal.js +7 -7
- package/build/legacy/index.js +86 -35
- package/build/legacy/index.js.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +592 -7
- package/build/modern/chunk-3C2DJSEE.js +16 -0
- package/build/modern/chunk-3C2DJSEE.js.map +1 -0
- package/build/modern/chunk-3GXISGPS.js +47 -0
- package/build/modern/chunk-3GXISGPS.js.map +1 -0
- package/build/modern/chunk-4N2L357B.js +76 -0
- package/build/modern/chunk-4N2L357B.js.map +1 -0
- package/build/modern/{chunk-2ATICEW3.js → chunk-6F34A7NZ.js} +4 -2
- package/build/modern/chunk-6F34A7NZ.js.map +1 -0
- package/build/modern/chunk-7VJOPJVX.js +29 -0
- package/build/modern/chunk-7VJOPJVX.js.map +1 -0
- package/build/modern/chunk-A5WYZVUR.js +28 -0
- package/build/modern/chunk-A5WYZVUR.js.map +1 -0
- package/build/{legacy/chunk-6TXQZ3PB.js → modern/chunk-BEYPMC73.js} +2 -2
- package/build/modern/chunk-GVNPFXKL.js +26 -0
- package/build/modern/chunk-GVNPFXKL.js.map +1 -0
- package/build/modern/chunk-HW76XVA3.js +22 -0
- package/build/modern/chunk-HW76XVA3.js.map +1 -0
- package/build/modern/{chunk-JWQJLOX4.js → chunk-IL5ELPTT.js} +2 -2
- package/build/modern/chunk-IOG6XIR5.js +62 -0
- package/build/modern/chunk-IOG6XIR5.js.map +1 -0
- package/build/modern/{chunk-CU7HXAKM.js → chunk-JJGZRBIR.js} +4 -4
- package/build/modern/{chunk-FAXDUWAU.js → chunk-LTDNZRUY.js} +11 -11
- package/build/modern/chunk-N3FUF4TB.js +12 -0
- package/build/modern/chunk-N3FUF4TB.js.map +1 -0
- package/build/modern/chunk-PJ3744I6.js +24 -0
- package/build/modern/chunk-PJ3744I6.js.map +1 -0
- package/build/modern/chunk-QO2UXGW4.js +122 -0
- package/build/modern/chunk-QO2UXGW4.js.map +1 -0
- package/build/modern/{chunk-5GEC53G7.js → chunk-XB4ZRAH4.js} +5 -5
- package/build/modern/chunk-XREC5IJE.js +24 -0
- package/build/modern/chunk-XREC5IJE.js.map +1 -0
- package/build/modern/{chunk-TPRGGEVJ.js → chunk-Y5IY7O23.js} +3 -3
- package/build/modern/components/Button.js +1 -1
- package/build/modern/components/Droppable.js +8 -0
- package/build/modern/components/Droppable.js.map +1 -0
- package/build/modern/components/FileUploader.js +11 -0
- package/build/modern/components/FileUploader.js.map +1 -0
- package/build/modern/components/Input.js +4 -4
- package/build/modern/components/Label.js +2 -2
- package/build/modern/components/Notification.js +11 -0
- package/build/modern/components/Notification.js.map +1 -0
- package/build/modern/components/NotificationDescription.js +7 -0
- package/build/modern/components/NotificationDescription.js.map +1 -0
- package/build/modern/components/NotificationHeading.js +7 -0
- package/build/modern/components/NotificationHeading.js.map +1 -0
- package/build/modern/components/Table.js +9 -0
- package/build/modern/components/Table.js.map +1 -0
- package/build/modern/components/Tbody.js +7 -0
- package/build/modern/components/Tbody.js.map +1 -0
- package/build/modern/components/Td.js +7 -0
- package/build/modern/components/Td.js.map +1 -0
- package/build/modern/components/Th.js +8 -0
- package/build/modern/components/Th.js.map +1 -0
- package/build/modern/components/Thead.js +7 -0
- package/build/modern/components/Thead.js.map +1 -0
- package/build/modern/components/Toggle.js +3 -3
- package/build/modern/config/cerbIcons.js +1 -1
- package/build/modern/config/defineIcons.js +2 -2
- package/build/modern/context/confirm-modal.js +4 -4
- package/build/modern/context/notification-center.js +19 -0
- package/build/modern/context/notification-center.js.map +1 -0
- package/build/modern/context/prompt-modal.js +7 -7
- package/build/modern/index.js +86 -35
- package/build/modern/index.js.map +1 -1
- package/package.json +5 -2
- package/src/components/Button.tsx +6 -3
- package/src/components/Droppable.tsx +33 -0
- package/src/components/FileUploader.tsx +55 -0
- package/src/components/Notification.tsx +98 -0
- package/src/components/NotificationDescription.tsx +31 -0
- package/src/components/NotificationHeading.tsx +28 -0
- package/src/components/Table.tsx +58 -0
- package/src/components/Tbody.tsx +31 -0
- package/src/components/Td.tsx +34 -0
- package/src/components/Th.tsx +56 -0
- package/src/components/Thead.tsx +24 -0
- package/src/config/cerbIcons.ts +20 -4
- package/src/context/notification-center.tsx +181 -0
- package/src/index.ts +15 -0
- package/build/legacy/chunk-2ATICEW3.js.map +0 -1
- package/build/legacy/chunk-C45DY4VE.js +0 -17
- package/build/legacy/chunk-C45DY4VE.js.map +0 -1
- package/build/modern/chunk-2ATICEW3.js.map +0 -1
- package/build/modern/chunk-C45DY4VE.js +0 -17
- package/build/modern/chunk-C45DY4VE.js.map +0 -1
- /package/build/legacy/{chunk-XGNAFSMG.js.map → chunk-AAKIOHAX.js.map} +0 -0
- /package/build/legacy/{chunk-6TXQZ3PB.js.map → chunk-BEYPMC73.js.map} +0 -0
- /package/build/legacy/{chunk-JWQJLOX4.js.map → chunk-IL5ELPTT.js.map} +0 -0
- /package/build/legacy/{chunk-CU7HXAKM.js.map → chunk-JJGZRBIR.js.map} +0 -0
- /package/build/legacy/{chunk-7CZ3NIGH.js.map → chunk-L46XIE3D.js.map} +0 -0
- /package/build/legacy/{chunk-5GEC53G7.js.map → chunk-XB4ZRAH4.js.map} +0 -0
- /package/build/modern/{chunk-6TXQZ3PB.js.map → chunk-BEYPMC73.js.map} +0 -0
- /package/build/modern/{chunk-JWQJLOX4.js.map → chunk-IL5ELPTT.js.map} +0 -0
- /package/build/modern/{chunk-CU7HXAKM.js.map → chunk-JJGZRBIR.js.map} +0 -0
- /package/build/modern/{chunk-FAXDUWAU.js.map → chunk-LTDNZRUY.js.map} +0 -0
- /package/build/modern/{chunk-5GEC53G7.js.map → chunk-XB4ZRAH4.js.map} +0 -0
- /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 {
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
155
|
+
//# sourceMappingURL=chunk-AAKIOHAX.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
defaultIcons
|
|
3
|
-
} from "./chunk-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
22
|
-
import {
|
|
23
|
-
Input
|
|
24
|
-
} from "./chunk-5GEC53G7.js";
|
|
27
|
+
} from "./chunk-6F34A7NZ.js";
|
|
25
28
|
import {
|
|
26
|
-
|
|
27
|
-
} from "./chunk-
|
|
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-
|
|
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-
|
|
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":[]}
|