@cerberus-design/react 0.12.0-next-bd594cf → 0.12.0-next-d7d547a
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.cts +112 -0
- package/build/legacy/components/Tooltip.cjs +55 -0
- package/build/legacy/components/Tooltip.cjs.map +1 -0
- package/build/legacy/context/notification-center.cjs +1 -1
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/hooks/useDate.cjs +122 -0
- package/build/legacy/hooks/useDate.cjs.map +1 -0
- package/build/legacy/index.cjs +212 -88
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +112 -0
- package/build/modern/{chunk-ZBMA5G54.js → chunk-7MM5KYEX.js} +4 -4
- package/build/modern/chunk-CZND26FC.js +98 -0
- package/build/modern/chunk-CZND26FC.js.map +1 -0
- package/build/modern/{chunk-3FCUTX4S.js → chunk-J4LOSTEP.js} +13 -13
- package/build/modern/{chunk-ON64MA6L.js → chunk-KFGI37CO.js} +12 -12
- package/build/modern/chunk-KML4CTMK.js +33 -0
- package/build/modern/chunk-KML4CTMK.js.map +1 -0
- package/build/modern/{chunk-PNR7ZUAR.js → chunk-KUT2YEEQ.js} +7 -7
- package/build/modern/chunk-KUT2YEEQ.js.map +1 -0
- package/build/modern/{chunk-IFD2BUUW.js → chunk-NCUHRVW2.js} +15 -15
- package/build/modern/components/FileStatus.js +2 -2
- package/build/modern/components/Tooltip.js +7 -0
- package/build/modern/components/Tooltip.js.map +1 -0
- package/build/modern/context/confirm-modal.js +5 -5
- package/build/modern/context/cta-modal.js +5 -5
- package/build/modern/context/notification-center.js +3 -3
- package/build/modern/context/prompt-modal.js +6 -6
- package/build/modern/hooks/useDate.js +14 -0
- package/build/modern/hooks/useDate.js.map +1 -0
- package/build/modern/index.js +43 -29
- package/build/modern/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Tooltip.tsx +61 -0
- package/src/context/notification-center.tsx +1 -1
- package/src/hooks/useDate.ts +164 -0
- package/src/index.ts +2 -0
- package/build/modern/chunk-PNR7ZUAR.js.map +0 -1
- /package/build/modern/{chunk-ZBMA5G54.js.map → chunk-7MM5KYEX.js.map} +0 -0
- /package/build/modern/{chunk-3FCUTX4S.js.map → chunk-J4LOSTEP.js.map} +0 -0
- /package/build/modern/{chunk-ON64MA6L.js.map → chunk-KFGI37CO.js.map} +0 -0
- /package/build/modern/{chunk-IFD2BUUW.js.map → chunk-NCUHRVW2.js.map} +0 -0
|
@@ -130,6 +130,7 @@ import { TdVariantProps } from '@cerberus/styled-system/recipes';
|
|
|
130
130
|
import type { TextareaHTMLAttributes } from 'react';
|
|
131
131
|
import { ThVariantProps } from '@cerberus/styled-system/recipes';
|
|
132
132
|
import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
|
|
133
|
+
import { TooltipContentProps } from '@ark-ui/react/tooltip';
|
|
133
134
|
import { TouchSensor } from '@dnd-kit/core';
|
|
134
135
|
import { TouchSensorOptions } from '@dnd-kit/core';
|
|
135
136
|
import { Translate } from '@dnd-kit/core';
|
|
@@ -579,6 +580,21 @@ export { Data }
|
|
|
579
580
|
|
|
580
581
|
export { DataRef }
|
|
581
582
|
|
|
583
|
+
/**
|
|
584
|
+
* Date formatting options
|
|
585
|
+
* @example
|
|
586
|
+
* ```tsx
|
|
587
|
+
* const date = new Date()
|
|
588
|
+
* const formatted = date.format(DateFormats.USMilitary)
|
|
589
|
+
*/
|
|
590
|
+
declare const DateFormats: {
|
|
591
|
+
readonly ISO: string;
|
|
592
|
+
readonly USMilitary: string;
|
|
593
|
+
readonly Months: string[];
|
|
594
|
+
};
|
|
595
|
+
export { DateFormats }
|
|
596
|
+
export { DateFormats as DateFormats_alias_1 }
|
|
597
|
+
|
|
582
598
|
export { defaultAnnouncements }
|
|
583
599
|
|
|
584
600
|
export { defaultCoordinates }
|
|
@@ -1015,6 +1031,24 @@ declare interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement
|
|
|
1015
1031
|
export { FileUploaderProps }
|
|
1016
1032
|
export { FileUploaderProps as FileUploaderProps_alias_1 }
|
|
1017
1033
|
|
|
1034
|
+
/**
|
|
1035
|
+
* Converts a string to US Military format. Used within the `useDate` hook.
|
|
1036
|
+
* @param input The string to format
|
|
1037
|
+
* @returns The formatted string in US Military format (DD MMM YYYY)
|
|
1038
|
+
*/
|
|
1039
|
+
declare function formatMilitaryDate(input: string): string;
|
|
1040
|
+
export { formatMilitaryDate }
|
|
1041
|
+
export { formatMilitaryDate as formatMilitaryDate_alias_1 }
|
|
1042
|
+
|
|
1043
|
+
/**
|
|
1044
|
+
* Converts a string in US Military format to ISO format. Used within the `useDate` hook.
|
|
1045
|
+
* @param input The string to format
|
|
1046
|
+
* @returns The formatted string in ISO format (YYYY-MM-DD)
|
|
1047
|
+
*/
|
|
1048
|
+
declare function formatMilitaryToISO(input: string): string;
|
|
1049
|
+
export { formatMilitaryToISO }
|
|
1050
|
+
export { formatMilitaryToISO as formatMilitaryToISO_alias_1 }
|
|
1051
|
+
|
|
1018
1052
|
/**
|
|
1019
1053
|
* This module contains utility functions that are used across your app.
|
|
1020
1054
|
* @module Utils
|
|
@@ -2731,6 +2765,36 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
|
|
|
2731
2765
|
export { ToggleProps }
|
|
2732
2766
|
export { ToggleProps as ToggleProps_alias_1 }
|
|
2733
2767
|
|
|
2768
|
+
/**
|
|
2769
|
+
* The Tooltip component is used to provide additional information about an element when it is hovered over.
|
|
2770
|
+
* @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
|
|
2771
|
+
* @example
|
|
2772
|
+
* ```tsx
|
|
2773
|
+
* <Tooltip content="This is a tooltip">
|
|
2774
|
+
* <Information />
|
|
2775
|
+
* </Tooltip>
|
|
2776
|
+
*/
|
|
2777
|
+
declare function Tooltip(props: TooltipProps & TooltipContentProps): JSX_2.Element;
|
|
2778
|
+
export { Tooltip }
|
|
2779
|
+
export { Tooltip as Tooltip_alias_1 }
|
|
2780
|
+
|
|
2781
|
+
/**
|
|
2782
|
+
* This module contains the Tooltip component.
|
|
2783
|
+
* @module Tooltip
|
|
2784
|
+
*/
|
|
2785
|
+
declare interface TooltipProps {
|
|
2786
|
+
/**
|
|
2787
|
+
* The text content to display in the tooltip.
|
|
2788
|
+
*/
|
|
2789
|
+
content: ReactNode;
|
|
2790
|
+
/**
|
|
2791
|
+
* The position of the tooltip relative to the trigger element.
|
|
2792
|
+
*/
|
|
2793
|
+
position?: 'top' | 'right' | 'bottom' | 'left';
|
|
2794
|
+
}
|
|
2795
|
+
export { TooltipProps }
|
|
2796
|
+
export { TooltipProps as TooltipProps_alias_1 }
|
|
2797
|
+
|
|
2734
2798
|
export { TouchSensor }
|
|
2735
2799
|
|
|
2736
2800
|
export { TouchSensorOptions }
|
|
@@ -2771,6 +2835,54 @@ declare function useCTAModal(): CTAModalValue;
|
|
|
2771
2835
|
export { useCTAModal }
|
|
2772
2836
|
export { useCTAModal as useCTAModal_alias_1 }
|
|
2773
2837
|
|
|
2838
|
+
/**
|
|
2839
|
+
* A hook for formatting and validating date inputs. The date format defaults to US Military format.
|
|
2840
|
+
* @example
|
|
2841
|
+
* ```tsx
|
|
2842
|
+
* const MyComponent = () => {
|
|
2843
|
+
* const date = useDate({ initialValue: '01 JAN 2024' })
|
|
2844
|
+
* return <input onChange={date.onChange} type="text" value={date.value} />
|
|
2845
|
+
* }
|
|
2846
|
+
*/
|
|
2847
|
+
declare function useDate(options?: UseDateOptions): UseDateReturn;
|
|
2848
|
+
export { useDate }
|
|
2849
|
+
export { useDate as useDate_alias_1 }
|
|
2850
|
+
|
|
2851
|
+
declare interface UseDateBase {
|
|
2852
|
+
/**
|
|
2853
|
+
* The format of the date input
|
|
2854
|
+
*/
|
|
2855
|
+
format?: string;
|
|
2856
|
+
/**
|
|
2857
|
+
* The callback to run when the date input changes
|
|
2858
|
+
*/
|
|
2859
|
+
onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
|
|
2860
|
+
}
|
|
2861
|
+
export { UseDateBase }
|
|
2862
|
+
export { UseDateBase as UseDateBase_alias_1 }
|
|
2863
|
+
|
|
2864
|
+
declare interface UseDateOptions extends UseDateBase {
|
|
2865
|
+
/**
|
|
2866
|
+
* The initial value of the date input
|
|
2867
|
+
*/
|
|
2868
|
+
initialValue?: string;
|
|
2869
|
+
}
|
|
2870
|
+
export { UseDateOptions }
|
|
2871
|
+
export { UseDateOptions as UseDateOptions_alias_1 }
|
|
2872
|
+
|
|
2873
|
+
declare interface UseDateReturn extends UseDateBase {
|
|
2874
|
+
/**
|
|
2875
|
+
* The ISO formatted date string
|
|
2876
|
+
*/
|
|
2877
|
+
ISO: string;
|
|
2878
|
+
/**
|
|
2879
|
+
* The value of the date input
|
|
2880
|
+
*/
|
|
2881
|
+
value: string;
|
|
2882
|
+
}
|
|
2883
|
+
export { UseDateReturn }
|
|
2884
|
+
export { UseDateReturn as UseDateReturn_alias_1 }
|
|
2885
|
+
|
|
2774
2886
|
export { useDndContext }
|
|
2775
2887
|
|
|
2776
2888
|
export { UseDndContextReturnValue }
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/Tooltip.tsx
|
|
21
|
+
var Tooltip_exports = {};
|
|
22
|
+
__export(Tooltip_exports, {
|
|
23
|
+
Tooltip: () => Tooltip
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Tooltip_exports);
|
|
26
|
+
var import_tooltip = require("@ark-ui/react/tooltip");
|
|
27
|
+
var import_css = require("@cerberus/styled-system/css");
|
|
28
|
+
var import_recipes = require("@cerberus/styled-system/recipes");
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
function Tooltip(props) {
|
|
31
|
+
const { content, children, ...nativeProps } = props;
|
|
32
|
+
const styles = (0, import_recipes.tooltip)();
|
|
33
|
+
const position = {
|
|
34
|
+
placement: props.position || "top"
|
|
35
|
+
};
|
|
36
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
|
|
37
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, children }),
|
|
38
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
39
|
+
import_tooltip.Tooltip.Content,
|
|
40
|
+
{
|
|
41
|
+
...nativeProps,
|
|
42
|
+
className: (0, import_css.cx)(nativeProps.className, styles.content),
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.ArrowTip, { className: styles.arrowTip }) }),
|
|
45
|
+
content
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
) })
|
|
49
|
+
] });
|
|
50
|
+
}
|
|
51
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
52
|
+
0 && (module.exports = {
|
|
53
|
+
Tooltip
|
|
54
|
+
});
|
|
55
|
+
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n Tooltip as ArkTooltip,\n type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n /**\n * The text content to display in the tooltip.\n */\n content: ReactNode\n /**\n * The position of the tooltip relative to the trigger element.\n */\n position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n * <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n const { content, children, ...nativeProps } = props\n const styles = tooltip()\n const position = {\n placement: props.position || 'top',\n }\n\n return (\n <ArkTooltip.Root openDelay={400} positioning={position}>\n <ArkTooltip.Trigger className={styles.trigger}>\n {children}\n </ArkTooltip.Trigger>\n\n <ArkTooltip.Positioner>\n <ArkTooltip.Content\n {...nativeProps}\n className={cx(nativeProps.className, styles.content)}\n >\n <ArkTooltip.Arrow className={styles.arrow}>\n <ArkTooltip.ArrowTip className={styles.arrowTip} />\n </ArkTooltip.Arrow>\n\n {content}\n </ArkTooltip.Content>\n </ArkTooltip.Positioner>\n </ArkTooltip.Root>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAGO;AACP,iBAAmB;AACnB,qBAAwB;AAqClB;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,aAAS,wBAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,6CAAC,eAAAA,QAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,gDAAC,eAAAA,QAAW,SAAX,EAAmB,WAAW,OAAO,SACnC,UACH;AAAA,IAEA,4CAAC,eAAAA,QAAW,YAAX,EACC;AAAA,MAAC,eAAAA,QAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,sDAAC,eAAAA,QAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,sDAAC,eAAAA,QAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":["ArkTooltip"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Portal.tsx","../../../src/components/Button.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n /**\n * The palette of the notification.\n * @default 'info'\n */\n palette: 'info' | 'success' | 'warning' | 'danger'\n /**\n * The heading of the notification.\n */\n heading: string\n /**\n * The unique id of the notification.\n */\n id?: string\n /**\n * The description of the notification.\n */\n description?: ReactNode\n /**\n * The action to take when the notification is closed\n */\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"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 <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\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","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\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","'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport 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 /**\n * The unique id of the notification. Required for the onClose callback.\n */\n id: string\n /**\n * Called when the close button is clicked.\n */\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n const { close: CloseIcon } = $cerberusIcons\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <CloseIcon />\n </button>\n </dialog>\n )\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n","'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n /**\n * The root container to render the children into.\n * @default document.body\n */\n container?: Element | DocumentFragment\n /**\n * An optional key to use for the Portal component.\n */\n key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n * return (\n * <Portal>\n * <div>Portal Content outside of the React VDom tree</div>\n * </Portal>\n * )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container || document.body\n return createPortal(props.children, container, props.key)\n}\n","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 * @see https://cerberus.digitalu.design/react/button\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":"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","names":["import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_patterns","import_recipes","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Portal.tsx","../../../src/components/Button.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n /**\n * The palette of the notification.\n * @default 'info'\n */\n palette: 'info' | 'success' | 'warning' | 'danger'\n /**\n * The heading of the notification.\n */\n heading: string\n /**\n * The unique id of the notification.\n */\n id?: string\n /**\n * The description of the notification.\n */\n description?: ReactNode\n /**\n * The action to take when the notification is closed\n */\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"ghost\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\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","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\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","'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport 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 /**\n * The unique id of the notification. Required for the onClose callback.\n */\n id: string\n /**\n * Called when the close button is clicked.\n */\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n const { close: CloseIcon } = $cerberusIcons\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <CloseIcon />\n </button>\n </dialog>\n )\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n","'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n /**\n * The root container to render the children into.\n * @default document.body\n */\n container?: Element | DocumentFragment\n /**\n * An optional key to use for the Portal component.\n */\n key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n * return (\n * <Portal>\n * <div>Portal Content outside of the React VDom tree</div>\n * </Portal>\n * )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container || document.body\n return createPortal(props.children, container, props.key)\n}\n","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 * @see https://cerberus.digitalu.design/react/button\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":"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","names":["import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_patterns","import_recipes","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx_runtime"]}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/hooks/useDate.ts
|
|
22
|
+
var useDate_exports = {};
|
|
23
|
+
__export(useDate_exports, {
|
|
24
|
+
DateFormats: () => DateFormats,
|
|
25
|
+
formatMilitaryDate: () => formatMilitaryDate,
|
|
26
|
+
formatMilitaryToISO: () => formatMilitaryToISO,
|
|
27
|
+
useDate: () => useDate
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(useDate_exports);
|
|
30
|
+
var import_react = require("react");
|
|
31
|
+
function useDate(options) {
|
|
32
|
+
const initialValue = (options == null ? void 0 : options.initialValue) ?? "";
|
|
33
|
+
const format = (options == null ? void 0 : options.format) ?? DateFormats.USMilitary;
|
|
34
|
+
const onChange = options == null ? void 0 : options.onChange;
|
|
35
|
+
const [value, setValue] = (0, import_react.useState)(initialValue);
|
|
36
|
+
const handleChange = (0, import_react.useCallback)(
|
|
37
|
+
(e) => {
|
|
38
|
+
const newValue = formatMilitaryDate(e.currentTarget.value);
|
|
39
|
+
if (onChange) onChange(e);
|
|
40
|
+
setValue(newValue);
|
|
41
|
+
},
|
|
42
|
+
[onChange]
|
|
43
|
+
);
|
|
44
|
+
return (0, import_react.useMemo)(
|
|
45
|
+
() => ({
|
|
46
|
+
format,
|
|
47
|
+
value,
|
|
48
|
+
ISO: formatMilitaryToISO(value),
|
|
49
|
+
onChange: handleChange
|
|
50
|
+
}),
|
|
51
|
+
[format, value, handleChange]
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
function formatMilitaryToISO(input) {
|
|
55
|
+
const [day, month, year] = input.split(" ");
|
|
56
|
+
const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
|
|
57
|
+
const monthNum = monthIndex + 1;
|
|
58
|
+
return `${year ?? "0000"}-${monthNum.toString().padStart(2, "0")}-${day.padStart(
|
|
59
|
+
2,
|
|
60
|
+
"0"
|
|
61
|
+
)}`;
|
|
62
|
+
}
|
|
63
|
+
function formatMilitaryDate(input) {
|
|
64
|
+
let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, "");
|
|
65
|
+
let day = "";
|
|
66
|
+
let month = "";
|
|
67
|
+
let year = "";
|
|
68
|
+
if (formatted.length >= 2) {
|
|
69
|
+
day = formatted.replace(/[^0-9]/g, "").slice(0, 2);
|
|
70
|
+
const dayNum = parseInt(day, 10);
|
|
71
|
+
if (dayNum > 31) day = "31";
|
|
72
|
+
else if (dayNum === 0) day = "01";
|
|
73
|
+
formatted = formatted.slice(2);
|
|
74
|
+
}
|
|
75
|
+
if (formatted.length >= 3) {
|
|
76
|
+
month = formatted.slice(0, 3);
|
|
77
|
+
const monthIndex = MONTHS.findIndex((m) => m.startsWith(month));
|
|
78
|
+
if (monthIndex !== -1) {
|
|
79
|
+
month = MONTHS[monthIndex];
|
|
80
|
+
} else {
|
|
81
|
+
month = month.replace(/[^A-Z]/g, "");
|
|
82
|
+
}
|
|
83
|
+
formatted = formatted.slice(3);
|
|
84
|
+
}
|
|
85
|
+
if (formatted.length > 0) {
|
|
86
|
+
year = formatted.slice(0, 4);
|
|
87
|
+
}
|
|
88
|
+
return [day, month, year].filter(Boolean).join(" ");
|
|
89
|
+
}
|
|
90
|
+
var DateFormats = {
|
|
91
|
+
get ISO() {
|
|
92
|
+
return "YYYY-MM-DD";
|
|
93
|
+
},
|
|
94
|
+
get USMilitary() {
|
|
95
|
+
return "DD MMM YYYY";
|
|
96
|
+
},
|
|
97
|
+
get Months() {
|
|
98
|
+
return MONTHS;
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
var MONTHS = [
|
|
102
|
+
"JAN",
|
|
103
|
+
"FEB",
|
|
104
|
+
"MAR",
|
|
105
|
+
"APR",
|
|
106
|
+
"MAY",
|
|
107
|
+
"JUN",
|
|
108
|
+
"JUL",
|
|
109
|
+
"AUG",
|
|
110
|
+
"SEP",
|
|
111
|
+
"OCT",
|
|
112
|
+
"NOV",
|
|
113
|
+
"DEC"
|
|
114
|
+
];
|
|
115
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
116
|
+
0 && (module.exports = {
|
|
117
|
+
DateFormats,
|
|
118
|
+
formatMilitaryDate,
|
|
119
|
+
formatMilitaryToISO,
|
|
120
|
+
useDate
|
|
121
|
+
});
|
|
122
|
+
//# sourceMappingURL=useDate.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useCallback,\n ChangeEvent,\n useMemo,\n type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n /**\n * The format of the date input\n */\n format?: string\n /**\n * The callback to run when the date input changes\n */\n onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n /**\n * The initial value of the date input\n */\n initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n /**\n * The ISO formatted date string\n */\n ISO: string\n /**\n * The value of the date input\n */\n value: string\n}\n\n/**\n * A hook for formatting and validating date inputs. The date format defaults to US Military format.\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const date = useDate({ initialValue: '01 JAN 2024' })\n * return <input onChange={date.onChange} type=\"text\" value={date.value} />\n * }\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n const initialValue = options?.initialValue ?? ''\n const format = options?.format ?? DateFormats.USMilitary\n const onChange = options?.onChange\n const [value, setValue] = useState(initialValue)\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = formatMilitaryDate(e.currentTarget.value)\n if (onChange) onChange(e)\n setValue(newValue)\n },\n [onChange],\n )\n\n return useMemo(\n () => ({\n format,\n value,\n ISO: formatMilitaryToISO(value),\n onChange: handleChange,\n }),\n [format, value, handleChange],\n )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n const [day, month, year] = input.split(' ')\n const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n const monthNum = monthIndex + 1\n return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n 2,\n '0',\n )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n let day = ''\n let month = ''\n let year = ''\n\n // Format day\n if (formatted.length >= 2) {\n day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n const dayNum = parseInt(day, 10)\n if (dayNum > 31) day = '31'\n else if (dayNum === 0) day = '01'\n formatted = formatted.slice(2)\n }\n\n // Format month\n if (formatted.length >= 3) {\n month = formatted.slice(0, 3)\n const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n if (monthIndex !== -1) {\n month = MONTHS[monthIndex]\n } else {\n month = month.replace(/[^A-Z]/g, '')\n }\n formatted = formatted.slice(3)\n }\n\n // Format year\n if (formatted.length > 0) {\n year = formatted.slice(0, 4)\n }\n\n return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n get ISO() {\n return 'YYYY-MM-DD'\n },\n get USMilitary() {\n return 'DD MMM YYYY'\n },\n get Months() {\n return MONTHS\n },\n}\n\nconst MONTHS = [\n 'JAN',\n 'FEB',\n 'MAR',\n 'APR',\n 'MAY',\n 'JUN',\n 'JUL',\n 'AUG',\n 'SEP',\n 'OCT',\n 'NOV',\n 'DEC',\n]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AAwCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,gBAAe,mCAAS,iBAAgB;AAC9C,QAAM,UAAS,mCAAS,WAAU,YAAY;AAC9C,QAAM,WAAW,mCAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAE/C,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
|