@cerberus-design/react 0.6.1-next-2d28489 → 0.6.1-next-8062b70

package/src/context/prompt-modal.tsx

@@ -13,18 +13,15 @@ import {
 } from 'react'
 import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
-import { css, cx } from '@cerberus-design/styled-system/css'
-import { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'
-import {
-  confirmModal,
-  type ConfirmModalVariantProps,
-} from '@cerberus-design/styled-system/recipes'
+import { css } from '@cerberus-design/styled-system/css'
+import { hstack, vstack } from '@cerberus-design/styled-system/patterns'
+import { modal } from '@cerberus-design/styled-system/recipes'
 import { trapFocus } from '../aria-helpers/trap-focus.aria'
 import { Input } from '../components/Input'
 import { Field } from './field'
 import { Label } from '../components/Label'
-import { ConfirmModalIcon } from './confirm-modal'
 import { $cerberusIcons } from '../config/defineIcons'
+import { ModalIcon } from '../components/ModalIcon'
 import { Show } from '../components/Show'
 
 /**
@@ -86,6 +83,7 @@ export function PromptModal(
   const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
   const [inputValue, setInputValue] = useState<string>('')
   const focusTrap = trapFocus(dialogRef)
+  const PromptIcon = $cerberusIcons.promptModal
 
   const isValid = useMemo(
     () => inputValue === content?.key,
@@ -96,7 +94,7 @@ export function PromptModal(
     () => (content?.kind === 'destructive' ? 'danger' : 'action'),
     [content],
   )
-  const styles = confirmModal({ palette })
+  const styles = modal()
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -143,7 +141,18 @@ export function PromptModal(
               gap: '4',
             })}
           >
-            <ConfirmModalIcon palette={palette} />
+            <Show
+              when={palette === 'danger'}
+              fallback={
+                <ModalIcon palette="action">
+                  <PromptIcon size={24} />
+                </ModalIcon>
+              }
+            >
+              <ModalIcon palette="danger">
+                <PromptIcon size={24} />
+              </ModalIcon>
+            </Show>
             <h2 className={styles.heading}>{content?.heading}</h2>
             <p className={styles.description}>{content?.description}</p>
           </div>
@@ -213,38 +222,6 @@ export function PromptModal(
   )
 }
 
-// This is to help show the variant styles for the icon since Panda is
-// not syncing correctly for the danger variant.
-export function PromptModalIcon(props: ConfirmModalVariantProps) {
-  const PromptIcon = $cerberusIcons.promptModal
-  return (
-    <Show
-      when={props.palette === 'danger'}
-      fallback={
-        <div className={cx(confirmModal().icon, circle())}>
-          <PromptIcon size={24} />
-        </div>
-      }
-    >
-      <div
-        className={cx(
-          confirmModal({
-            palette: 'danger',
-          }).icon,
-          circle({
-            bgColor: 'danger.surface.initial',
-          }),
-        )}
-        style={{
-          color: 'var(--cerberus-colors-danger-text-100)',
-        }}
-      >
-        <PromptIcon size={24} />
-      </div>
-    </Show>
-  )
-}
-
 export function usePromptModal(): PromptModalValue {
   const context = useContext(PromptModalContext)
   if (context === null) {

package/src/index.ts

@@ -11,6 +11,7 @@ export * from './components/FeatureFlag'
 export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
+export * from './components/ModalIcon'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'

package/build/legacy/chunk-BLJ4SRAF.js.map

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,KAAK,UAAU;AACxB,SAAS,QAAQ,QAAQ,cAAc;AAEvC;AAAA,EACE;AAAA,OAEK;AAgGG,SAOE,KAPF;AAxEV,IAAM,sBAAsB,cAAwC,IAAI;AA4BjE,SAAS,aACd,OACA;AACA,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,aAAa,OAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyC,IAAI;AAC3E,QAAM,YAAY,UAAU,SAAS;AAErC,QAAM,UAAU;AAAA,IACd,OAAO,mCAAS,UAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AACA,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,QAAM,eAAe,YAAY,CAAC,MAAqC;AAtFzE;AAuFI,UAAM,SAAS,EAAE;AACjB,QAAI,OAAO,UAAU,QAAQ;AAC3B,uBAAW,YAAX,oCAAqB;AAAA,IACvB;AACA,qBAAW,YAAX,oCAAqB;AACrB,iDAAW,YAAX,mBAAoB;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY,CAAC,YAAqC;AACnE,WAAO,IAAI,QAAiB,CAAC,YAAY;AAhG7C;AAiGM,iBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,mDAAW,YAAX,mBAAoB;AACpB,iBAAW,UAAU;AAAA,IACvB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,oBAAoB,UAApB,EAA6B,OAC3B;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,YAAO,WAAW,OAAO,QAAQ,WAAW,WAAW,KAAK,WAC3D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,IAAI;AAAA,UACN,CAAC;AAAA,UAED;AAAA,gCAAC,oBAAiB,SAAkB;AAAA,YACpC,oBAAC,QAAG,WAAW,OAAO,SAAU,6CAAS,SAAQ;AAAA,YACjD,oBAAC,OAAE,WAAW,OAAO,aAAc,6CAAS,aAAY;AAAA;AAAA;AAAA,MAC1D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,gBAAgB;AAAA,YAChB,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAS;AAAA,gBACT,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT;AAAA,gBACA,OAAM;AAAA,gBAEL,6CAAS;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAM;AAAA,gBACN,OAAM;AAAA,gBAEL,6CAAS;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAIO,SAAS,iBAAiB,OAAiC;AAChE,QAAM,WAAW,eAAe;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,MAAM,YAAY;AAAA,MACxB,UACE,oBAAC,SAAI,WAAW,GAAG,aAAa,EAAE,MAAM,OAAO,CAAC,GAC9C,8BAAC,YAAS,MAAM,IAAI,GACtB;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,aAAa;AAAA,cACX,SAAS;AAAA,YACX,CAAC,EAAE;AAAA,YACH,OAAO;AAAA,cACL,SAAS;AAAA,YACX,CAAC;AAAA,UACH;AAAA,UACA,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,UAEA,8BAAC,YAAS,MAAM,IAAI;AAAA;AAAA,MACtB;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/legacy/chunk-SNSBODYR.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/build/modern/chunk-4GURONLE.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/build/modern/chunk-FZ75OJLJ.js.map

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAGP,SAAS,KAAK,UAAU;AACxB,SAAS,QAAQ,QAAQ,cAAc;AACvC;AAAA,EACE;AAAA,OAEK;AAuHG,SAME,KANF;AAzFV,IAAM,qBAAqB,cAAuC,IAAI;AA8B/D,SAAS,YACd,OACA;AACA,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,YAAY,UAAU,SAAS;AAErC,QAAM,UAAU;AAAA,IACd,MAAM,eAAe,SAAS;AAAA,IAC9B,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AACA,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,UAAU;AAAA,MACjC;AACA,iBAAW,SAAS,MAAM;AAAA,IAC5B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,aAAa,YAAY,CAAC,YAAoC;AAClE,WAAO,IAAI,QAAgB,CAAC,YAAY;AACtC,iBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,iBAAW,SAAS,UAAU;AAC9B,iBAAW,UAAU;AAAA,IACvB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAC1B;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,YAAO,WAAW,OAAO,QAAQ,WAAW,WAAW,KAAK,WAC3D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA,gCAAC,oBAAiB,SAAkB;AAAA,YACpC,oBAAC,QAAG,WAAW,OAAO,SAAU,mBAAS,SAAQ;AAAA,YACjD,oBAAC,OAAE,WAAW,OAAO,aAAc,mBAAS,aAAY;AAAA;AAAA;AAAA,MAC1D;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,IAAI;AAAA,YACJ,IAAI;AAAA,UACN,CAAC;AAAA,UAED,+BAAC,SAAM,SAAS,CAAC,SACf;AAAA,iCAAC,SAAM,SAAQ,WAAU,MAAK,MAAK;AAAA;AAAA,cAEjC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,IAAI;AAAA,oBACb,eAAe;AAAA,kBACjB,CAAC;AAAA,kBAEA,mBAAS;AAAA;AAAA,cACZ;AAAA,cAAS;AAAA,eAEX;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA;AAAA,YACP;AAAA,aACF;AAAA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,gBAAgB;AAAA,YAChB,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAS;AAAA,gBACT,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,UAAU,CAAC;AAAA,gBACX,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT;AAAA,gBACA,OAAM;AAAA,gBAEL,mBAAS;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAM;AAAA,gBACN,OAAM;AAAA,gBAEL,mBAAS;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAIO,SAAS,gBAAgB,OAAiC;AAC/D,QAAM,aAAa,eAAe;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,MAAM,YAAY;AAAA,MACxB,UACE,oBAAC,SAAI,WAAW,GAAG,aAAa,EAAE,MAAM,OAAO,CAAC,GAC9C,8BAAC,cAAW,MAAM,IAAI,GACxB;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,aAAa;AAAA,cACX,SAAS;AAAA,YACX,CAAC,EAAE;AAAA,YACH,OAAO;AAAA,cACL,SAAS;AAAA,YACX,CAAC;AAAA,UACH;AAAA,UACA,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,UAEA,8BAAC,cAAW,MAAM,IAAI;AAAA;AAAA,MACxB;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAO;AACT;","names":[]}