@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.
Files changed (49) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.ts +74 -0
  2. package/build/legacy/{chunk-3TYUA4C7.js → chunk-6TXQZ3PB.js} +2 -2
  3. package/build/{modern/chunk-5RA3ZIXA.js → legacy/chunk-7ISHDUYN.js} +2 -2
  4. package/build/legacy/{chunk-YRUUO4AP.js → chunk-BLJ4SRAF.js} +5 -4
  5. package/build/{modern/chunk-BVK6GEDZ.js.map → legacy/chunk-BLJ4SRAF.js.map} +1 -1
  6. package/build/legacy/{chunk-SCAVVE6E.js → chunk-C45DY4VE.js} +2 -1
  7. package/build/legacy/chunk-C45DY4VE.js.map +1 -0
  8. package/build/legacy/chunk-SNSBODYR.js +224 -0
  9. package/build/legacy/chunk-SNSBODYR.js.map +1 -0
  10. package/build/legacy/{chunk-VLVKNEA5.js → chunk-TAZI77TP.js} +2 -2
  11. package/build/legacy/components/Input.js +3 -3
  12. package/build/legacy/components/Toggle.js +3 -3
  13. package/build/legacy/config/cerbIcons.js +1 -1
  14. package/build/legacy/config/defineIcons.js +2 -2
  15. package/build/legacy/context/confirm-modal.js +5 -3
  16. package/build/legacy/context/prompt-modal.js +22 -0
  17. package/build/legacy/context/prompt-modal.js.map +1 -0
  18. package/build/legacy/index.js +15 -5
  19. package/build/modern/_tsup-dts-rollup.d.ts +74 -0
  20. package/build/modern/{chunk-BVK6GEDZ.js → chunk-4GURONLE.js} +5 -4
  21. package/build/{legacy/chunk-YRUUO4AP.js.map → modern/chunk-4GURONLE.js.map} +1 -1
  22. package/build/modern/{chunk-3TYUA4C7.js → chunk-6TXQZ3PB.js} +2 -2
  23. package/build/{legacy/chunk-5RA3ZIXA.js → modern/chunk-7ISHDUYN.js} +2 -2
  24. package/build/modern/{chunk-SCAVVE6E.js → chunk-C45DY4VE.js} +2 -1
  25. package/build/modern/chunk-C45DY4VE.js.map +1 -0
  26. package/build/modern/chunk-FZ75OJLJ.js +222 -0
  27. package/build/modern/chunk-FZ75OJLJ.js.map +1 -0
  28. package/build/modern/{chunk-VLVKNEA5.js → chunk-TAZI77TP.js} +2 -2
  29. package/build/modern/components/Input.js +3 -3
  30. package/build/modern/components/Toggle.js +3 -3
  31. package/build/modern/config/cerbIcons.js +1 -1
  32. package/build/modern/config/defineIcons.js +2 -2
  33. package/build/modern/context/confirm-modal.js +5 -3
  34. package/build/modern/context/prompt-modal.js +22 -0
  35. package/build/modern/context/prompt-modal.js.map +1 -0
  36. package/build/modern/index.js +15 -5
  37. package/package.json +2 -2
  38. package/src/config/cerbIcons.ts +2 -0
  39. package/src/context/confirm-modal.tsx +3 -3
  40. package/src/context/prompt-modal.tsx +254 -0
  41. package/src/index.ts +1 -0
  42. package/build/legacy/chunk-SCAVVE6E.js.map +0 -1
  43. package/build/modern/chunk-SCAVVE6E.js.map +0 -1
  44. /package/build/legacy/{chunk-3TYUA4C7.js.map → chunk-6TXQZ3PB.js.map} +0 -0
  45. /package/build/legacy/{chunk-5RA3ZIXA.js.map → chunk-7ISHDUYN.js.map} +0 -0
  46. /package/build/legacy/{chunk-VLVKNEA5.js.map → chunk-TAZI77TP.js.map} +0 -0
  47. /package/build/modern/{chunk-3TYUA4C7.js.map → chunk-6TXQZ3PB.js.map} +0 -0
  48. /package/build/modern/{chunk-5RA3ZIXA.js.map → chunk-7ISHDUYN.js.map} +0 -0
  49. /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-SCAVVE6E.js";
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-3TYUA4C7.js.map
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-3TYUA4C7.js";
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-5RA3ZIXA.js.map
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-3TYUA4C7.js";
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-YRUUO4AP.js.map
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.\nfunction 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 />\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 />\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":[]}
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-SCAVVE6E.js.map
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-3TYUA4C7.js";
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-VLVKNEA5.js.map
58
+ //# sourceMappingURL=chunk-TAZI77TP.js.map
@@ -1,11 +1,11 @@
1
1
  "use client";
2
2
  import {
3
3
  Input
4
- } from "../chunk-5RA3ZIXA.js";
4
+ } from "../chunk-7ISHDUYN.js";
5
5
  import "../chunk-ZAU4JVLL.js";
6
6
  import "../chunk-4O4QFF4S.js";
7
- import "../chunk-3TYUA4C7.js";
8
- import "../chunk-SCAVVE6E.js";
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-VLVKNEA5.js";
4
+ } from "../chunk-TAZI77TP.js";
5
5
  import "../chunk-ZAU4JVLL.js";
6
- import "../chunk-3TYUA4C7.js";
7
- import "../chunk-SCAVVE6E.js";
6
+ import "../chunk-6TXQZ3PB.js";
7
+ import "../chunk-C45DY4VE.js";
8
8
  export {
9
9
  Toggle
10
10
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defaultIcons
3
- } from "../chunk-SCAVVE6E.js";
3
+ } from "../chunk-C45DY4VE.js";
4
4
  export {
5
5
  defaultIcons
6
6
  };
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  $cerberusIcons,
3
3
  defineIcons
4
- } from "../chunk-3TYUA4C7.js";
5
- import "../chunk-SCAVVE6E.js";
4
+ } from "../chunk-6TXQZ3PB.js";
5
+ import "../chunk-C45DY4VE.js";
6
6
  export {
7
7
  $cerberusIcons,
8
8
  defineIcons
@@ -1,16 +1,18 @@
1
1
  "use client";
2
2
  import {
3
3
  ConfirmModal,
4
+ ConfirmModalIcon,
4
5
  useConfirmModal
5
- } from "../chunk-YRUUO4AP.js";
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-3TYUA4C7.js";
11
- import "../chunk-SCAVVE6E.js";
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":[]}
@@ -6,11 +6,17 @@ import {
6
6
  } from "./chunk-TCO46FK7.js";
7
7
  import {
8
8
  Toggle
9
- } from "./chunk-VLVKNEA5.js";
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-YRUUO4AP.js";
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-5RA3ZIXA.js";
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-3TYUA4C7.js";
94
- import "./chunk-SCAVVE6E.js";
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,