@cerberus-design/react 0.6.1-next-1315bf2 → 0.6.1-next-2d28489
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 +74 -0
- package/build/legacy/{chunk-3TYUA4C7.js → chunk-6TXQZ3PB.js} +2 -2
- package/build/{modern/chunk-5RA3ZIXA.js → legacy/chunk-7ISHDUYN.js} +2 -2
- package/build/legacy/{chunk-YRUUO4AP.js → chunk-BLJ4SRAF.js} +5 -4
- package/build/{modern/chunk-BVK6GEDZ.js.map → legacy/chunk-BLJ4SRAF.js.map} +1 -1
- package/build/legacy/{chunk-SCAVVE6E.js → chunk-C45DY4VE.js} +2 -1
- package/build/legacy/chunk-C45DY4VE.js.map +1 -0
- package/build/legacy/chunk-SNSBODYR.js +224 -0
- package/build/legacy/chunk-SNSBODYR.js.map +1 -0
- package/build/legacy/{chunk-VLVKNEA5.js → chunk-TAZI77TP.js} +2 -2
- package/build/legacy/components/Input.js +3 -3
- 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 +5 -3
- package/build/legacy/context/prompt-modal.js +22 -0
- package/build/legacy/context/prompt-modal.js.map +1 -0
- package/build/legacy/index.js +15 -5
- package/build/modern/_tsup-dts-rollup.d.ts +74 -0
- package/build/modern/{chunk-BVK6GEDZ.js → chunk-4GURONLE.js} +5 -4
- package/build/{legacy/chunk-YRUUO4AP.js.map → modern/chunk-4GURONLE.js.map} +1 -1
- package/build/modern/{chunk-3TYUA4C7.js → chunk-6TXQZ3PB.js} +2 -2
- package/build/{legacy/chunk-5RA3ZIXA.js → modern/chunk-7ISHDUYN.js} +2 -2
- package/build/modern/{chunk-SCAVVE6E.js → chunk-C45DY4VE.js} +2 -1
- package/build/modern/chunk-C45DY4VE.js.map +1 -0
- package/build/modern/chunk-FZ75OJLJ.js +222 -0
- package/build/modern/chunk-FZ75OJLJ.js.map +1 -0
- package/build/modern/{chunk-VLVKNEA5.js → chunk-TAZI77TP.js} +2 -2
- package/build/modern/components/Input.js +3 -3
- 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 +5 -3
- package/build/modern/context/prompt-modal.js +22 -0
- package/build/modern/context/prompt-modal.js.map +1 -0
- package/build/modern/index.js +15 -5
- package/package.json +2 -2
- package/src/config/cerbIcons.ts +2 -0
- package/src/context/confirm-modal.tsx +3 -3
- package/src/context/prompt-modal.tsx +254 -0
- package/src/index.ts +1 -0
- package/build/legacy/chunk-SCAVVE6E.js.map +0 -1
- package/build/modern/chunk-SCAVVE6E.js.map +0 -1
- /package/build/legacy/{chunk-3TYUA4C7.js.map → chunk-6TXQZ3PB.js.map} +0 -0
- /package/build/legacy/{chunk-5RA3ZIXA.js.map → chunk-7ISHDUYN.js.map} +0 -0
- /package/build/legacy/{chunk-VLVKNEA5.js.map → chunk-TAZI77TP.js.map} +0 -0
- /package/build/modern/{chunk-3TYUA4C7.js.map → chunk-6TXQZ3PB.js.map} +0 -0
- /package/build/modern/{chunk-5RA3ZIXA.js.map → chunk-7ISHDUYN.js.map} +0 -0
- /package/build/modern/{chunk-VLVKNEA5.js.map → chunk-TAZI77TP.js.map} +0 -0
|
@@ -3,6 +3,7 @@ import { button } from '@cerberus/styled-system/recipes';
|
|
|
3
3
|
import { ButtonHTMLAttributes } from 'react';
|
|
4
4
|
import { CarbonIconType } from '@cerberus/icons';
|
|
5
5
|
import { ChangeEvent } from 'react';
|
|
6
|
+
import { ConfirmModalVariantProps } from '@cerberus-design/styled-system/recipes';
|
|
6
7
|
import { Context } from 'react';
|
|
7
8
|
import { ElementType } from 'react';
|
|
8
9
|
import { fieldMessage } from '@cerberus/styled-system/recipes';
|
|
@@ -90,6 +91,10 @@ declare function ConfirmModal(props: PropsWithChildren<ConfirmModalProviderProps
|
|
|
90
91
|
export { ConfirmModal }
|
|
91
92
|
export { ConfirmModal as ConfirmModal_alias_1 }
|
|
92
93
|
|
|
94
|
+
declare function ConfirmModalIcon(props: ConfirmModalVariantProps): JSX_2.Element;
|
|
95
|
+
export { ConfirmModalIcon }
|
|
96
|
+
export { ConfirmModalIcon as ConfirmModalIcon_alias_1 }
|
|
97
|
+
|
|
93
98
|
declare interface ConfirmModalProviderProps {
|
|
94
99
|
}
|
|
95
100
|
export { ConfirmModalProviderProps }
|
|
@@ -117,6 +122,7 @@ export { DefaultThemes as DefaultThemes_alias_1 }
|
|
|
117
122
|
|
|
118
123
|
export declare interface DefinedIcons {
|
|
119
124
|
confirmModal?: CarbonIconType | ElementType;
|
|
125
|
+
promptModal?: CarbonIconType | ElementType;
|
|
120
126
|
invalid: CarbonIconType | ElementType;
|
|
121
127
|
toggleChecked?: CarbonIconType | ElementType;
|
|
122
128
|
}
|
|
@@ -436,6 +442,55 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
|
|
|
436
442
|
export { Positions }
|
|
437
443
|
export { Positions as Positions_alias_1 }
|
|
438
444
|
|
|
445
|
+
/**
|
|
446
|
+
* Provides a prompt modal to the app.
|
|
447
|
+
* @example
|
|
448
|
+
* ```tsx
|
|
449
|
+
* // Wrap the Provider around the root of the feature.
|
|
450
|
+
* <PromptModal>
|
|
451
|
+
* <SomeFeatureSection />
|
|
452
|
+
* </PromptModal>
|
|
453
|
+
*
|
|
454
|
+
* // Use the hook to show the prompt modal.
|
|
455
|
+
* const prompt = usePromptModal()
|
|
456
|
+
*
|
|
457
|
+
* const handleClick = useCallback(async () => {
|
|
458
|
+
* const accepted = await prompt.show({
|
|
459
|
+
* kind: 'destructive',
|
|
460
|
+
* heading: 'Delete channel?',
|
|
461
|
+
* description:
|
|
462
|
+
* 'This will permanently delete a channel on your account. There is no going back.',
|
|
463
|
+
* key: CHANNEL_NAME,
|
|
464
|
+
* actionText: 'Yes, delete channel',
|
|
465
|
+
* cancelText: 'No, cancel',
|
|
466
|
+
* })
|
|
467
|
+
* // do something with accepted
|
|
468
|
+
* }, [prompt])
|
|
469
|
+
* ```
|
|
470
|
+
*/
|
|
471
|
+
declare function PromptModal(props: PropsWithChildren<PromptModalProviderProps>): JSX_2.Element;
|
|
472
|
+
export { PromptModal }
|
|
473
|
+
export { PromptModal as PromptModal_alias_1 }
|
|
474
|
+
|
|
475
|
+
declare function PromptModalIcon(props: ConfirmModalVariantProps): JSX_2.Element;
|
|
476
|
+
export { PromptModalIcon }
|
|
477
|
+
export { PromptModalIcon as PromptModalIcon_alias_1 }
|
|
478
|
+
|
|
479
|
+
declare interface PromptModalProviderProps {
|
|
480
|
+
}
|
|
481
|
+
export { PromptModalProviderProps }
|
|
482
|
+
export { PromptModalProviderProps as PromptModalProviderProps_alias_1 }
|
|
483
|
+
|
|
484
|
+
declare interface PromptModalValue {
|
|
485
|
+
show: (options: ShowPromptModalOptions) => Promise<string>;
|
|
486
|
+
}
|
|
487
|
+
export { PromptModalValue }
|
|
488
|
+
export { PromptModalValue as PromptModalValue_alias_1 }
|
|
489
|
+
|
|
490
|
+
declare type PromptShowResult = ((value: string | PromiseLike<string>) => void) | null;
|
|
491
|
+
export { PromptShowResult }
|
|
492
|
+
export { PromptShowResult as PromptShowResult_alias_1 }
|
|
493
|
+
|
|
439
494
|
declare function Radio(props: PropsWithChildren<RadioProps>): JSX_2.Element;
|
|
440
495
|
export { Radio }
|
|
441
496
|
export { Radio as Radio_alias_1 }
|
|
@@ -482,6 +537,21 @@ declare interface ShowConfirmModalOptions {
|
|
|
482
537
|
export { ShowConfirmModalOptions }
|
|
483
538
|
export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
|
|
484
539
|
|
|
540
|
+
/**
|
|
541
|
+
* This module provides a context and hook for the prompt modal.
|
|
542
|
+
* @module
|
|
543
|
+
*/
|
|
544
|
+
declare interface ShowPromptModalOptions {
|
|
545
|
+
kind?: 'destructive' | 'non-destructive';
|
|
546
|
+
heading: string;
|
|
547
|
+
description?: string;
|
|
548
|
+
key: string;
|
|
549
|
+
actionText: string;
|
|
550
|
+
cancelText: string;
|
|
551
|
+
}
|
|
552
|
+
export { ShowPromptModalOptions }
|
|
553
|
+
export { ShowPromptModalOptions as ShowPromptModalOptions_alias_1 }
|
|
554
|
+
|
|
485
555
|
declare interface ShowProps {
|
|
486
556
|
when: boolean | null | undefined;
|
|
487
557
|
fallback?: ReactNode;
|
|
@@ -739,6 +809,10 @@ declare function useNavMenuContext(): NavMenuContextValue;
|
|
|
739
809
|
export { useNavMenuContext }
|
|
740
810
|
export { useNavMenuContext as useNavMenuContext_alias_1 }
|
|
741
811
|
|
|
812
|
+
declare function usePromptModal(): PromptModalValue;
|
|
813
|
+
export { usePromptModal }
|
|
814
|
+
export { usePromptModal as usePromptModal_alias_1 }
|
|
815
|
+
|
|
742
816
|
declare function useTabsContext(): TabsContextValue;
|
|
743
817
|
export { useTabsContext }
|
|
744
818
|
export { useTabsContext as useTabsContext_alias_1 }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
defaultIcons
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-C45DY4VE.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-6TXQZ3PB.js.map
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-4O4QFF4S.js";
|
|
7
7
|
import {
|
|
8
8
|
$cerberusIcons
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
10
10
|
|
|
11
11
|
// src/components/Input.tsx
|
|
12
12
|
import { input } from "@cerberus/styled-system/recipes";
|
|
@@ -39,4 +39,4 @@ function Input(props) {
|
|
|
39
39
|
export {
|
|
40
40
|
Input
|
|
41
41
|
};
|
|
42
|
-
//# sourceMappingURL=chunk-
|
|
42
|
+
//# sourceMappingURL=chunk-7ISHDUYN.js.map
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
} from "./chunk-KESKDLX6.js";
|
|
13
13
|
import {
|
|
14
14
|
$cerberusIcons
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
16
16
|
|
|
17
17
|
// src/context/confirm-modal.tsx
|
|
18
18
|
import {
|
|
@@ -128,7 +128,7 @@ function ConfirmModalIcon(props) {
|
|
|
128
128
|
Show,
|
|
129
129
|
{
|
|
130
130
|
when: props.palette === "danger",
|
|
131
|
-
fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
|
|
131
|
+
fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(InfoIcon, { size: 24 }) }),
|
|
132
132
|
children: /* @__PURE__ */ jsx(
|
|
133
133
|
"div",
|
|
134
134
|
{
|
|
@@ -143,7 +143,7 @@ function ConfirmModalIcon(props) {
|
|
|
143
143
|
style: {
|
|
144
144
|
color: "var(--cerberus-colors-danger-text-100)"
|
|
145
145
|
},
|
|
146
|
-
children: /* @__PURE__ */ jsx(InfoIcon, {})
|
|
146
|
+
children: /* @__PURE__ */ jsx(InfoIcon, { size: 24 })
|
|
147
147
|
}
|
|
148
148
|
)
|
|
149
149
|
}
|
|
@@ -161,6 +161,7 @@ function useConfirmModal() {
|
|
|
161
161
|
|
|
162
162
|
export {
|
|
163
163
|
ConfirmModal,
|
|
164
|
+
ConfirmModalIcon,
|
|
164
165
|
useConfirmModal
|
|
165
166
|
};
|
|
166
|
-
//# sourceMappingURL=chunk-
|
|
167
|
+
//# sourceMappingURL=chunk-BLJ4SRAF.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css, cx } from '@cerberus-design/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport {\n confirmModal,\n type ConfirmModalVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n actionText: string\n cancelText: string\n}\nexport type ShowResult =\n | ((value: boolean | PromiseLike<boolean>) => void)\n | null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const dialogRef = useRef<HTMLDialogElement>(null)\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(dialogRef)\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n const styles = confirmModal({ palette })\n\n const handleChoice = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n dialogRef?.current?.close()\n }, [])\n\n const handleShow = useCallback((options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n dialogRef?.current?.showModal()\n resolveRef.current = resolve\n })\n }, [])\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n })}\n >\n <ConfirmModalIcon palette={palette} />\n <h2 className={styles.heading}>{content?.heading}</h2>\n <p className={styles.description}>{content?.description}</p>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </dialog>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\n// This is to help show the variant styles for the icon since Panda is\n// not syncing correctly for the danger variant.\
|
|
1
|
+
{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css, cx } from '@cerberus-design/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport {\n confirmModal,\n type ConfirmModalVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n actionText: string\n cancelText: string\n}\nexport type ShowResult =\n | ((value: boolean | PromiseLike<boolean>) => void)\n | null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const dialogRef = useRef<HTMLDialogElement>(null)\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(dialogRef)\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n const styles = confirmModal({ palette })\n\n const handleChoice = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n dialogRef?.current?.close()\n }, [])\n\n const handleShow = useCallback((options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n dialogRef?.current?.showModal()\n resolveRef.current = resolve\n })\n }, [])\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n })}\n >\n <ConfirmModalIcon palette={palette} />\n <h2 className={styles.heading}>{content?.heading}</h2>\n <p className={styles.description}>{content?.description}</p>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </dialog>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\n// This is to help show the variant styles for the icon since Panda is\n// not syncing correctly for the danger variant.\nexport function ConfirmModalIcon(props: ConfirmModalVariantProps) {\n const InfoIcon = $cerberusIcons.confirmModal\n return (\n <Show\n when={props.palette === 'danger'}\n fallback={\n <div className={cx(confirmModal().icon, circle())}>\n <InfoIcon size={24} />\n </div>\n }\n >\n <div\n className={cx(\n confirmModal({\n palette: 'danger',\n }).icon,\n circle({\n bgColor: 'danger.surface.initial',\n }),\n )}\n style={{\n color: 'var(--cerberus-colors-danger-text-100)',\n }}\n >\n <InfoIcon size={24} />\n </div>\n </Show>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}
|
|
@@ -6,6 +6,7 @@ import {
|
|
|
6
6
|
} from "@cerberus/icons";
|
|
7
7
|
var defaultIcons = {
|
|
8
8
|
confirmModal: Information,
|
|
9
|
+
promptModal: Information,
|
|
9
10
|
invalid: WarningFilled,
|
|
10
11
|
toggleChecked: Checkmark
|
|
11
12
|
};
|
|
@@ -13,4 +14,4 @@ var defaultIcons = {
|
|
|
13
14
|
export {
|
|
14
15
|
defaultIcons
|
|
15
16
|
};
|
|
16
|
-
//# sourceMappingURL=chunk-
|
|
17
|
+
//# sourceMappingURL=chunk-C45DY4VE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n Checkmark,\n Information,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n confirmModal?: CarbonIconType | ElementType\n promptModal?: CarbonIconType | ElementType\n invalid: CarbonIconType | ElementType\n toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n confirmModal: Information,\n promptModal: Information,\n invalid: WarningFilled,\n toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAUA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ConfirmModalIcon
|
|
3
|
+
} from "./chunk-BLJ4SRAF.js";
|
|
4
|
+
import {
|
|
5
|
+
Portal
|
|
6
|
+
} from "./chunk-4CAT3FHV.js";
|
|
7
|
+
import {
|
|
8
|
+
Button
|
|
9
|
+
} from "./chunk-2ATICEW3.js";
|
|
10
|
+
import {
|
|
11
|
+
Input
|
|
12
|
+
} from "./chunk-7ISHDUYN.js";
|
|
13
|
+
import {
|
|
14
|
+
Label
|
|
15
|
+
} from "./chunk-JJGZRBIR.js";
|
|
16
|
+
import {
|
|
17
|
+
Field
|
|
18
|
+
} from "./chunk-ZAU4JVLL.js";
|
|
19
|
+
import {
|
|
20
|
+
Show
|
|
21
|
+
} from "./chunk-4O4QFF4S.js";
|
|
22
|
+
import {
|
|
23
|
+
trapFocus
|
|
24
|
+
} from "./chunk-KESKDLX6.js";
|
|
25
|
+
import {
|
|
26
|
+
$cerberusIcons
|
|
27
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
28
|
+
|
|
29
|
+
// src/context/prompt-modal.tsx
|
|
30
|
+
import {
|
|
31
|
+
createContext,
|
|
32
|
+
useCallback,
|
|
33
|
+
useContext,
|
|
34
|
+
useMemo,
|
|
35
|
+
useRef,
|
|
36
|
+
useState
|
|
37
|
+
} from "react";
|
|
38
|
+
import { css, cx } from "@cerberus-design/styled-system/css";
|
|
39
|
+
import { circle, hstack, vstack } from "@cerberus-design/styled-system/patterns";
|
|
40
|
+
import {
|
|
41
|
+
confirmModal
|
|
42
|
+
} from "@cerberus-design/styled-system/recipes";
|
|
43
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
44
|
+
var PromptModalContext = createContext(null);
|
|
45
|
+
function PromptModal(props) {
|
|
46
|
+
const dialogRef = useRef(null);
|
|
47
|
+
const resolveRef = useRef(null);
|
|
48
|
+
const [content, setContent] = useState(null);
|
|
49
|
+
const [inputValue, setInputValue] = useState("");
|
|
50
|
+
const focusTrap = trapFocus(dialogRef);
|
|
51
|
+
const isValid = useMemo(
|
|
52
|
+
() => inputValue === (content == null ? void 0 : content.key),
|
|
53
|
+
[inputValue, content]
|
|
54
|
+
);
|
|
55
|
+
const palette = useMemo(
|
|
56
|
+
() => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
|
|
57
|
+
[content]
|
|
58
|
+
);
|
|
59
|
+
const styles = confirmModal({ palette });
|
|
60
|
+
const handleChange = useCallback(
|
|
61
|
+
(e) => {
|
|
62
|
+
setInputValue(e.currentTarget.value);
|
|
63
|
+
},
|
|
64
|
+
[content]
|
|
65
|
+
);
|
|
66
|
+
const handleChoice = useCallback(
|
|
67
|
+
(e) => {
|
|
68
|
+
var _a, _b;
|
|
69
|
+
const target = e.currentTarget;
|
|
70
|
+
if (target.value === "true") {
|
|
71
|
+
(_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, inputValue);
|
|
72
|
+
}
|
|
73
|
+
(_b = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _b.close();
|
|
74
|
+
},
|
|
75
|
+
[inputValue]
|
|
76
|
+
);
|
|
77
|
+
const handleShow = useCallback((options) => {
|
|
78
|
+
return new Promise((resolve) => {
|
|
79
|
+
var _a;
|
|
80
|
+
setContent({ ...options, kind: options.kind || "non-destructive" });
|
|
81
|
+
(_a = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _a.showModal();
|
|
82
|
+
resolveRef.current = resolve;
|
|
83
|
+
});
|
|
84
|
+
}, []);
|
|
85
|
+
const value = useMemo(
|
|
86
|
+
() => ({
|
|
87
|
+
show: handleShow
|
|
88
|
+
}),
|
|
89
|
+
[handleShow]
|
|
90
|
+
);
|
|
91
|
+
return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
|
|
92
|
+
props.children,
|
|
93
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
|
|
94
|
+
/* @__PURE__ */ jsxs(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
className: vstack({
|
|
98
|
+
alignItems: "flex-start",
|
|
99
|
+
gap: "4"
|
|
100
|
+
}),
|
|
101
|
+
children: [
|
|
102
|
+
/* @__PURE__ */ jsx(ConfirmModalIcon, { palette }),
|
|
103
|
+
/* @__PURE__ */ jsx("h2", { className: styles.heading, children: content == null ? void 0 : content.heading }),
|
|
104
|
+
/* @__PURE__ */ jsx("p", { className: styles.description, children: content == null ? void 0 : content.description })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
/* @__PURE__ */ jsx(
|
|
109
|
+
"div",
|
|
110
|
+
{
|
|
111
|
+
className: vstack({
|
|
112
|
+
alignItems: "flex-start",
|
|
113
|
+
mt: "4",
|
|
114
|
+
mb: "8"
|
|
115
|
+
}),
|
|
116
|
+
children: /* @__PURE__ */ jsxs(Field, { invalid: !isValid, children: [
|
|
117
|
+
/* @__PURE__ */ jsxs(Label, { htmlFor: "confirm", size: "md", children: [
|
|
118
|
+
"Type",
|
|
119
|
+
/* @__PURE__ */ jsx(
|
|
120
|
+
"strong",
|
|
121
|
+
{
|
|
122
|
+
className: css({
|
|
123
|
+
textTransform: "uppercase"
|
|
124
|
+
}),
|
|
125
|
+
children: content == null ? void 0 : content.key
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
"to confirm"
|
|
129
|
+
] }),
|
|
130
|
+
/* @__PURE__ */ jsx(
|
|
131
|
+
Input,
|
|
132
|
+
{
|
|
133
|
+
id: "confirm",
|
|
134
|
+
name: "confirm",
|
|
135
|
+
onChange: handleChange,
|
|
136
|
+
type: "text"
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
] })
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
/* @__PURE__ */ jsxs(
|
|
143
|
+
"div",
|
|
144
|
+
{
|
|
145
|
+
className: hstack({
|
|
146
|
+
justifyContent: "stretch",
|
|
147
|
+
gap: "4"
|
|
148
|
+
}),
|
|
149
|
+
children: [
|
|
150
|
+
/* @__PURE__ */ jsx(
|
|
151
|
+
Button,
|
|
152
|
+
{
|
|
153
|
+
autoFocus: true,
|
|
154
|
+
className: css({
|
|
155
|
+
w: "1/2"
|
|
156
|
+
}),
|
|
157
|
+
disabled: !isValid,
|
|
158
|
+
name: "confirm",
|
|
159
|
+
onClick: handleChoice,
|
|
160
|
+
palette,
|
|
161
|
+
value: "true",
|
|
162
|
+
children: content == null ? void 0 : content.actionText
|
|
163
|
+
}
|
|
164
|
+
),
|
|
165
|
+
/* @__PURE__ */ jsx(
|
|
166
|
+
Button,
|
|
167
|
+
{
|
|
168
|
+
className: css({
|
|
169
|
+
w: "1/2"
|
|
170
|
+
}),
|
|
171
|
+
name: "cancel",
|
|
172
|
+
onClick: handleChoice,
|
|
173
|
+
usage: "outlined",
|
|
174
|
+
value: "false",
|
|
175
|
+
children: content == null ? void 0 : content.cancelText
|
|
176
|
+
}
|
|
177
|
+
)
|
|
178
|
+
]
|
|
179
|
+
}
|
|
180
|
+
)
|
|
181
|
+
] }) })
|
|
182
|
+
] });
|
|
183
|
+
}
|
|
184
|
+
function PromptModalIcon(props) {
|
|
185
|
+
const PromptIcon = $cerberusIcons.promptModal;
|
|
186
|
+
return /* @__PURE__ */ jsx(
|
|
187
|
+
Show,
|
|
188
|
+
{
|
|
189
|
+
when: props.palette === "danger",
|
|
190
|
+
fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) }),
|
|
191
|
+
children: /* @__PURE__ */ jsx(
|
|
192
|
+
"div",
|
|
193
|
+
{
|
|
194
|
+
className: cx(
|
|
195
|
+
confirmModal({
|
|
196
|
+
palette: "danger"
|
|
197
|
+
}).icon,
|
|
198
|
+
circle({
|
|
199
|
+
bgColor: "danger.surface.initial"
|
|
200
|
+
})
|
|
201
|
+
),
|
|
202
|
+
style: {
|
|
203
|
+
color: "var(--cerberus-colors-danger-text-100)"
|
|
204
|
+
},
|
|
205
|
+
children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
|
|
206
|
+
}
|
|
207
|
+
)
|
|
208
|
+
}
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
function usePromptModal() {
|
|
212
|
+
const context = useContext(PromptModalContext);
|
|
213
|
+
if (context === null) {
|
|
214
|
+
throw new Error("usePromptModal must be used within a PromptModal Provider");
|
|
215
|
+
}
|
|
216
|
+
return context;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
export {
|
|
220
|
+
PromptModal,
|
|
221
|
+
PromptModalIcon,
|
|
222
|
+
usePromptModal
|
|
223
|
+
};
|
|
224
|
+
//# sourceMappingURL=chunk-SNSBODYR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css, cx } from '@cerberus-design/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport {\n confirmModal,\n type ConfirmModalVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { ConfirmModalIcon } from './confirm-modal'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from '../components/Show'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module\n */\n\nexport interface ShowPromptModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n key: string\n actionText: string\n cancelText: string\n}\nexport type PromptShowResult =\n | ((value: string | PromiseLike<string>) => void)\n | null\n\nexport interface PromptModalValue {\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/**\n * Provides a prompt modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const dialogRef = useRef<HTMLDialogElement>(null)\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(dialogRef)\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n const styles = confirmModal({ palette })\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(inputValue)\n }\n dialogRef?.current?.close()\n },\n [inputValue],\n )\n\n const handleShow = useCallback((options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n dialogRef?.current?.showModal()\n resolveRef.current = resolve\n })\n }, [])\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '4',\n })}\n >\n <ConfirmModalIcon palette={palette} />\n <h2 className={styles.heading}>{content?.heading}</h2>\n <p className={styles.description}>{content?.description}</p>\n </div>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label htmlFor=\"confirm\" size=\"md\">\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </dialog>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\n// This is to help show the variant styles for the icon since Panda is\n// not syncing correctly for the danger variant.\nexport function PromptModalIcon(props: ConfirmModalVariantProps) {\n const PromptIcon = $cerberusIcons.promptModal\n return (\n <Show\n when={props.palette === 'danger'}\n fallback={\n <div className={cx(confirmModal().icon, circle())}>\n <PromptIcon size={24} />\n </div>\n }\n >\n <div\n className={cx(\n confirmModal({\n palette: 'danger',\n }).icon,\n circle({\n bgColor: 'danger.surface.initial',\n }),\n )}\n style={{\n color: 'var(--cerberus-colors-danger-text-100)',\n }}\n >\n <PromptIcon size={24} />\n </div>\n </Show>\n )\n}\n\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-ZAU4JVLL.js";
|
|
4
4
|
import {
|
|
5
5
|
$cerberusIcons
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Toggle.tsx
|
|
9
9
|
import { cx } from "@cerberus-design/styled-system/css";
|
|
@@ -55,4 +55,4 @@ function Toggle(props) {
|
|
|
55
55
|
export {
|
|
56
56
|
Toggle
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=chunk-
|
|
58
|
+
//# sourceMappingURL=chunk-TAZI77TP.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Input
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-7ISHDUYN.js";
|
|
5
5
|
import "../chunk-ZAU4JVLL.js";
|
|
6
6
|
import "../chunk-4O4QFF4S.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-6TXQZ3PB.js";
|
|
8
|
+
import "../chunk-C45DY4VE.js";
|
|
9
9
|
export {
|
|
10
10
|
Input
|
|
11
11
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Toggle
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-TAZI77TP.js";
|
|
5
5
|
import "../chunk-ZAU4JVLL.js";
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-6TXQZ3PB.js";
|
|
7
|
+
import "../chunk-C45DY4VE.js";
|
|
8
8
|
export {
|
|
9
9
|
Toggle
|
|
10
10
|
};
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
ConfirmModal,
|
|
4
|
+
ConfirmModalIcon,
|
|
4
5
|
useConfirmModal
|
|
5
|
-
} from "../chunk-
|
|
6
|
+
} from "../chunk-BLJ4SRAF.js";
|
|
6
7
|
import "../chunk-4CAT3FHV.js";
|
|
7
8
|
import "../chunk-2ATICEW3.js";
|
|
8
9
|
import "../chunk-4O4QFF4S.js";
|
|
9
10
|
import "../chunk-KESKDLX6.js";
|
|
10
|
-
import "../chunk-
|
|
11
|
-
import "../chunk-
|
|
11
|
+
import "../chunk-6TXQZ3PB.js";
|
|
12
|
+
import "../chunk-C45DY4VE.js";
|
|
12
13
|
export {
|
|
13
14
|
ConfirmModal,
|
|
15
|
+
ConfirmModalIcon,
|
|
14
16
|
useConfirmModal
|
|
15
17
|
};
|
|
16
18
|
//# sourceMappingURL=confirm-modal.js.map
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
PromptModal,
|
|
4
|
+
PromptModalIcon,
|
|
5
|
+
usePromptModal
|
|
6
|
+
} from "../chunk-SNSBODYR.js";
|
|
7
|
+
import "../chunk-BLJ4SRAF.js";
|
|
8
|
+
import "../chunk-4CAT3FHV.js";
|
|
9
|
+
import "../chunk-2ATICEW3.js";
|
|
10
|
+
import "../chunk-7ISHDUYN.js";
|
|
11
|
+
import "../chunk-JJGZRBIR.js";
|
|
12
|
+
import "../chunk-ZAU4JVLL.js";
|
|
13
|
+
import "../chunk-4O4QFF4S.js";
|
|
14
|
+
import "../chunk-KESKDLX6.js";
|
|
15
|
+
import "../chunk-6TXQZ3PB.js";
|
|
16
|
+
import "../chunk-C45DY4VE.js";
|
|
17
|
+
export {
|
|
18
|
+
PromptModal,
|
|
19
|
+
PromptModalIcon,
|
|
20
|
+
usePromptModal
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=prompt-modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/build/legacy/index.js
CHANGED
|
@@ -6,11 +6,17 @@ import {
|
|
|
6
6
|
} from "./chunk-TCO46FK7.js";
|
|
7
7
|
import {
|
|
8
8
|
Toggle
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-TAZI77TP.js";
|
|
10
|
+
import {
|
|
11
|
+
PromptModal,
|
|
12
|
+
PromptModalIcon,
|
|
13
|
+
usePromptModal
|
|
14
|
+
} from "./chunk-SNSBODYR.js";
|
|
10
15
|
import {
|
|
11
16
|
ConfirmModal,
|
|
17
|
+
ConfirmModalIcon,
|
|
12
18
|
useConfirmModal
|
|
13
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-BLJ4SRAF.js";
|
|
14
20
|
import {
|
|
15
21
|
NavMenuList,
|
|
16
22
|
getPosition
|
|
@@ -58,7 +64,7 @@ import {
|
|
|
58
64
|
} from "./chunk-SLHX5K6I.js";
|
|
59
65
|
import {
|
|
60
66
|
Input
|
|
61
|
-
} from "./chunk-
|
|
67
|
+
} from "./chunk-7ISHDUYN.js";
|
|
62
68
|
import {
|
|
63
69
|
Label
|
|
64
70
|
} from "./chunk-JJGZRBIR.js";
|
|
@@ -90,8 +96,8 @@ import {
|
|
|
90
96
|
import {
|
|
91
97
|
$cerberusIcons,
|
|
92
98
|
defineIcons
|
|
93
|
-
} from "./chunk-
|
|
94
|
-
import "./chunk-
|
|
99
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
100
|
+
import "./chunk-C45DY4VE.js";
|
|
95
101
|
import {
|
|
96
102
|
MODE_KEY,
|
|
97
103
|
THEME_KEY,
|
|
@@ -103,6 +109,7 @@ export {
|
|
|
103
109
|
$cerberusIcons,
|
|
104
110
|
Button,
|
|
105
111
|
ConfirmModal,
|
|
112
|
+
ConfirmModalIcon,
|
|
106
113
|
FeatureFlag,
|
|
107
114
|
FeatureFlags,
|
|
108
115
|
Field,
|
|
@@ -116,6 +123,8 @@ export {
|
|
|
116
123
|
NavMenuList,
|
|
117
124
|
NavMenuTrigger,
|
|
118
125
|
Portal,
|
|
126
|
+
PromptModal,
|
|
127
|
+
PromptModalIcon,
|
|
119
128
|
Radio,
|
|
120
129
|
Show,
|
|
121
130
|
THEME_KEY,
|
|
@@ -136,6 +145,7 @@ export {
|
|
|
136
145
|
useFeatureFlags,
|
|
137
146
|
useFieldContext,
|
|
138
147
|
useNavMenuContext,
|
|
148
|
+
usePromptModal,
|
|
139
149
|
useTabsContext,
|
|
140
150
|
useTabsKeyboardNavigation,
|
|
141
151
|
useTheme,
|