@cerberus-design/react 0.6.1-next-8062b70 → 0.6.1-next-fa4208e

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -6,6 +6,7 @@ import { ChangeEvent } from 'react';
 import { Context } from 'react';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
+import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { iconButton } from '@cerberus/styled-system/recipes';
 import { input } from '@cerberus/styled-system/recipes';
@@ -23,6 +24,7 @@ import { ReactPortal } from 'react';
 import { RecipeVariantProps } from '@cerberus/styled-system/css';
 import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus-design/styled-system/types';
 import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { TabsVariantProps } from '@cerberus-design/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
@@ -321,6 +323,88 @@ declare type LabelRecipeProps = RecipeVariantProps<typeof label>;
 export { LabelRecipeProps }
 export { LabelRecipeProps as LabelRecipeProps_alias_1 }
 
+/**
+ * The Modal component is the root element for a customizable modal.
+ * @example
+ * ```tsx
+ * const { modalRef } = useModal()
+ *
+ * <Modal ref={modalRef}>
+ *  <ModalIcon icon={$cerberusIcons.alert} />
+ *  <h2>Modal Heading</h2>
+ *  <p>Modal description</p>
+ * </Modal>
+ * ```
+ */
+declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDialogElement>>;
+export { Modal }
+export { Modal as Modal_alias_1 }
+
+/**
+ * The ModalDescription component is a heading element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalDescription>Modal Heading</ModalDescription>
+ * </Modal>
+ * ```
+ */
+declare function ModalDescription(props: ModalDescriptionProps): JSX_2.Element;
+export { ModalDescription }
+export { ModalDescription as ModalDescription_alias_1 }
+
+/**
+ * This module contains the ModalDescription component for a customizable modal.
+ * @module
+ */
+declare type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export { ModalDescriptionProps }
+export { ModalDescriptionProps as ModalDescriptionProps_alias_1 }
+
+/**
+ * The ModalHeader component is a header element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalHeader>
+ *     <h2>Modal Heading</h2>
+ *   </ModalHeader>
+ * </Modal>
+ * ```
+ */
+declare function ModalHeader(props: ModalHeaderProps): JSX_2.Element;
+export { ModalHeader }
+export { ModalHeader as ModalHeader_alias_1 }
+
+/**
+ * This module contains the ModalHeader component for a customizable modal.
+ * @module
+ */
+declare type ModalHeaderProps = HTMLAttributes<HTMLDivElement>;
+export { ModalHeaderProps }
+export { ModalHeaderProps as ModalHeaderProps_alias_1 }
+
+/**
+ * The ModalHeading component is a heading element for a customizable modal.
+ * @example
+ * ```tsx
+ * <Modal>
+ *   <ModalHeading>Modal Heading</ModalHeading>
+ * </Modal>
+ * ```
+ */
+declare function ModalHeading(props: ModalHeadingProps): JSX_2.Element;
+export { ModalHeading }
+export { ModalHeading as ModalHeading_alias_1 }
+
+/**
+ * This module contains the ModalHeading component for a customizable modal.
+ * @module
+ */
+declare type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>;
+export { ModalHeadingProps }
+export { ModalHeadingProps as ModalHeadingProps_alias_1 }
+
 declare function ModalIcon(props: PropsWithChildren<ModalIconProps>): JSX_2.Element;
 export { ModalIcon }
 export { ModalIcon as ModalIcon_alias_1 }
@@ -333,6 +417,14 @@ declare type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps;
 export { ModalIconProps }
 export { ModalIconProps as ModalIconProps_alias_1 }
 
+/**
+ * This module contains the Modal root component for a customizable modal.
+ * @module
+ */
+declare type ModalProps = HTMLAttributes<HTMLDialogElement>;
+export { ModalProps }
+export { ModalProps as ModalProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }
@@ -809,6 +901,20 @@ declare function useFieldContext(): FieldContextValue;
 export { useFieldContext }
 export { useFieldContext as useFieldContext_alias_1 }
 
+declare function useModal(): UseModalReturnValue;
+export { useModal }
+export { useModal as useModal_alias_1 }
+
+/**
+ * This module provides a hook for using a custom modal.
+ * @module
+ */
+declare interface UseModalReturnValue {
+    modalRef: RefObject<HTMLDialogElement>;
+    show: () => void;
+    close: () => void;
+}
+
 declare function useNavMenuContext(): NavMenuContextValue;
 export { useNavMenuContext }
 export { useNavMenuContext as useNavMenuContext_alias_1 }

package/build/legacy/chunk-2F5TB2EV.js

@@ -0,0 +1,25 @@
+// src/components/ModalHeader.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { vstack } from "@cerberus-design/styled-system/patterns";
+import { jsx } from "react/jsx-runtime";
+function ModalHeader(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cx(
+        props.className,
+        vstack({
+          alignItems: "flex-start",
+          gap: "4",
+          mb: "8"
+        })
+      )
+    }
+  );
+}
+
+export {
+  ModalHeader
+};
+//# sourceMappingURL=chunk-2F5TB2EV.js.map

package/build/legacy/chunk-2F5TB2EV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeader>\n *     <h2>Modal Heading</h2>\n *   </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: '4',\n          mb: '8',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAuBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/{chunk-UZIN7UOS.js → chunk-D3ZXZA3U.js}

@@ -1,21 +1,36 @@
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  Modal
+} from "./chunk-TPFNVGYA.js";
+import {
+  ModalDescription
+} from "./chunk-UPODPCRD.js";
+import {
+  ModalHeader
+} from "./chunk-2F5TB2EV.js";
+import {
+  ModalHeading
+} from "./chunk-OGSAAB6K.js";
+import {
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  ModalIcon
-} from "./chunk-G3JEWPLM.js";
 import {
   trapFocus
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
 } from "./chunk-6TXQZ3PB.js";
+import {
+  useModal
+} from "./chunk-TZNYJ3G7.js";
 
 // src/context/confirm-modal.tsx
 import {
@@ -27,38 +42,41 @@ import {
   useState
 } from "react";
 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 { hstack } from "@cerberus-design/styled-system/patterns";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConfirmModalContext = createContext(null);
 function ConfirmModal(props) {
-  const dialogRef = useRef(null);
+  const { modalRef, show, close } = useModal();
   const resolveRef = useRef(null);
   const [content, setContent] = useState(null);
-  const focusTrap = trapFocus(dialogRef);
+  const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
   const palette = useMemo(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const styles = modal();
-  const handleChoice = useCallback((e) => {
-    var _a, _b, _c;
-    const target = e.currentTarget;
-    if (target.value === "true") {
-      (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
-    }
-    (_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, false);
-    (_c = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _c.close();
-  }, []);
-  const handleShow = useCallback((options) => {
-    return new Promise((resolve) => {
-      var _a;
-      setContent({ ...options, kind: options.kind || "non-destructive" });
-      (_a = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _a.showModal();
-      resolveRef.current = resolve;
-    });
-  }, []);
+  const handleChoice = useCallback(
+    (e) => {
+      var _a, _b;
+      const target = e.currentTarget;
+      if (target.value === "true") {
+        (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
+      }
+      (_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, false);
+      close();
+    },
+    [close]
+  );
+  const handleShow = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        show();
+        resolveRef.current = resolve;
+      });
+    },
+    [show]
+  );
   const value = useMemo(
     () => ({
       show: handleShow
@@ -67,29 +85,19 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
-      /* @__PURE__ */ jsxs(
-        "section",
-        {
-          className: vstack({
-            alignItems: "flex-start",
-            gap: "4",
-            mb: "8"
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              Show,
-              {
-                when: palette === "danger",
-                fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }) }),
-                children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }) })
-              }
-            ),
-            /* @__PURE__ */ jsx("h2", { className: styles.heading, children: content == null ? void 0 : content.heading }),
-            /* @__PURE__ */ jsx("p", { className: styles.description, children: content == null ? void 0 : content.description })
-          ]
-        }
-      ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsx(
+          Show,
+          {
+            when: palette === "danger",
+            fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ jsx(ModalDescription, { children: content == null ? void 0 : content.description })
+      ] }),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -144,4 +152,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-UZIN7UOS.js.map
+//# sourceMappingURL=chunk-D3ZXZA3U.js.map

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

@@ -0,0 +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 } from '@cerberus-design/styled-system/css'\nimport { hstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\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 { modalRef, show, close } = useModal()\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\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?.(true)\n      }\n      resolveRef.current?.(false)\n      close()\n    },\n    [close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\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        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <Show\n              when={palette === 'danger'}\n              fallback={\n                <ModalIcon palette=\"action\">\n                  <ConfirmIcon size={24} />\n                </ModalIcon>\n              }\n            >\n              <ModalIcon palette=\"danger\">\n                <ConfirmIcon size={24} />\n              </ModalIcon>\n            </Show>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\n\n          <div\n            className={hstack({\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        </Modal>\n      </Portal>\n    </ConfirmModalContext.Provider>\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,WAAW;AACpB,SAAS,cAAc;AA6Gb,SAKQ,KALR;AA9EV,IAAM,sBAAsB,cAAwC,IAAI;AA4BjE,SAAS,aACd,OACA;AACA,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI,SAAS;AAC3C,QAAM,aAAa,OAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyC,IAAI;AAC3E,QAAM,YAAY,UAAU,QAAQ;AACpC,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU;AAAA,IACd,OAAO,mCAAS,UAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AAzF1C;AA0FM,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,yBAAW,YAAX,oCAAqB;AAAA,MACvB;AACA,uBAAW,YAAX,oCAAqB;AACrB,YAAM;AAAA,IACR;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAqC;AACpC,aAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,aAAK;AACL,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,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,SAAM,WAAW,WAAW,KAAK,UAChC;AAAA,2BAAC,eACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,YAAY;AAAA,YAClB,UACE,oBAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,YAGF,8BAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,gBAAc,6CAAS,SAAQ;AAAA,QAChC,oBAAC,oBAAkB,6CAAS,aAAY;AAAA,SAC1C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;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;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-WKSC2WCV.js → chunk-DGPLSWFJ.js}

@@ -1,6 +1,21 @@
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  Modal
+} from "./chunk-TPFNVGYA.js";
+import {
+  ModalDescription
+} from "./chunk-UPODPCRD.js";
+import {
+  ModalHeader
+} from "./chunk-2F5TB2EV.js";
+import {
+  ModalHeading
+} from "./chunk-OGSAAB6K.js";
+import {
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
 import {
   Button
 } from "./chunk-2ATICEW3.js";
@@ -16,15 +31,15 @@ import {
 import {
   Field
 } from "./chunk-ZAU4JVLL.js";
-import {
-  ModalIcon
-} from "./chunk-G3JEWPLM.js";
 import {
   trapFocus
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
 } from "./chunk-6TXQZ3PB.js";
+import {
+  useModal
+} from "./chunk-TZNYJ3G7.js";
 
 // src/context/prompt-modal.tsx
 import {
@@ -37,15 +52,14 @@ import {
 } from "react";
 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 { jsx, jsxs } from "react/jsx-runtime";
 var PromptModalContext = createContext(null);
 function PromptModal(props) {
-  const dialogRef = useRef(null);
+  const { modalRef, show, close } = useModal();
   const resolveRef = useRef(null);
   const [content, setContent] = useState(null);
   const [inputValue, setInputValue] = useState("");
-  const focusTrap = trapFocus(dialogRef);
+  const focusTrap = trapFocus(modalRef);
   const PromptIcon = $cerberusIcons.promptModal;
   const isValid = useMemo(
     () => inputValue === (content == null ? void 0 : content.key),
@@ -55,7 +69,6 @@ function PromptModal(props) {
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const styles = modal();
   const handleChange = useCallback(
     (e) => {
       setInputValue(e.currentTarget.value);
@@ -64,23 +77,25 @@ function PromptModal(props) {
   );
   const handleChoice = useCallback(
     (e) => {
-      var _a, _b;
+      var _a;
       const target = e.currentTarget;
       if (target.value === "true") {
         (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, inputValue);
       }
-      (_b = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _b.close();
+      close();
     },
-    [inputValue]
+    [inputValue, close]
+  );
+  const handleShow = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        show();
+        resolveRef.current = resolve;
+      });
+    },
+    [show]
   );
-  const handleShow = useCallback((options) => {
-    return new Promise((resolve) => {
-      var _a;
-      setContent({ ...options, kind: options.kind || "non-destructive" });
-      (_a = dialogRef == null ? void 0 : dialogRef.current) == null ? void 0 : _a.showModal();
-      resolveRef.current = resolve;
-    });
-  }, []);
   const value = useMemo(
     () => ({
       show: handleShow
@@ -89,28 +104,19 @@ function PromptModal(props) {
   );
   return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: vstack({
-            alignItems: "flex-start",
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              Show,
-              {
-                when: palette === "danger",
-                fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) }),
-                children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) })
-              }
-            ),
-            /* @__PURE__ */ jsx("h2", { className: styles.heading, children: content == null ? void 0 : content.heading }),
-            /* @__PURE__ */ jsx("p", { className: styles.description, children: content == null ? void 0 : content.description })
-          ]
-        }
-      ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsx(
+          Show,
+          {
+            when: palette === "danger",
+            fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ jsx(ModalDescription, { children: content == null ? void 0 : content.description })
+      ] }),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -199,4 +205,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-WKSC2WCV.js.map
+//# sourceMappingURL=chunk-DGPLSWFJ.js.map

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

@@ -0,0 +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 } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\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 { modalRef, show, close } = useModal()\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n  const focusTrap = trapFocus(modalRef)\n  const PromptIcon = $cerberusIcons.promptModal\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\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      close()\n    },\n    [inputValue, close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\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        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\n            <Show\n              when={palette === 'danger'}\n              fallback={\n                <ModalIcon palette=\"action\">\n                  <PromptIcon size={24} />\n                </ModalIcon>\n              }\n            >\n              <ModalIcon palette=\"danger\">\n                <PromptIcon size={24} />\n              </ModalIcon>\n            </Show>\n            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\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        </Modal>\n      </Portal>\n    </PromptModalContext.Provider>\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/legacy/chunk-OGSAAB6K.js

@@ -0,0 +1,12 @@
+// src/components/ModalHeading.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { modal } from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ModalHeading(props) {
+  return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().heading) });
+}
+
+export {
+  ModalHeading
+};
+//# sourceMappingURL=chunk-OGSAAB6K.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/legacy/chunk-TPFNVGYA.js

@@ -0,0 +1,21 @@
+// src/components/Modal.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { modal } from "@cerberus-design/styled-system/recipes";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function ModalEl(props, ref) {
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ...props,
+      className: cx(props.className, modal().dialog),
+      ref
+    }
+  );
+}
+var Modal = forwardRef(ModalEl);
+
+export {
+  Modal
+};
+//# sourceMappingURL=chunk-TPFNVGYA.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n *  <ModalIcon icon={$cerberusIcons.alert} />\n *  <h2>Modal Heading</h2>\n *  <p>Modal description</p>\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAeO,IAAM,QAAQ,WAAW,OAAO;","names":[]}

package/build/legacy/chunk-TZNYJ3G7.js

@@ -0,0 +1,25 @@
+// src/hooks/useModal.ts
+import { useCallback, useMemo, useRef } from "react";
+function useModal() {
+  const modalRef = useRef(null);
+  const show = useCallback(() => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.showModal();
+  }, []);
+  const close = useCallback(() => {
+    var _a;
+    (_a = modalRef.current) == null ? void 0 : _a.close();
+  }, []);
+  return useMemo(() => {
+    return {
+      modalRef,
+      show,
+      close
+    };
+  }, [modalRef, show, close]);
+}
+
+export {
+  useModal
+};
+//# sourceMappingURL=chunk-TZNYJ3G7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useModal.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\ninterface UseModalReturnValue {\n  modalRef: RefObject<HTMLDialogElement>\n  show: () => void\n  close: () => void\n}\n\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n    }\n  }, [modalRef, show, close])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,cAA8B;AAatD,SAAS,WAAgC;AAC9C,QAAM,WAAW,OAAiC,IAAI;AAEtD,QAAM,OAAO,YAAY,MAAM;AAlBjC;AAmBI,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAtBlC;AAuBI,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,MAAM;AACnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAC5B;","names":[]}

package/build/legacy/chunk-UPODPCRD.js

@@ -0,0 +1,12 @@
+// src/components/ModalDescription.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { modal } from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ModalDescription(props) {
+  return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().description) });
+}
+
+export {
+  ModalDescription
+};
+//# sourceMappingURL=chunk-UPODPCRD.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}

package/build/legacy/components/Modal.js

@@ -0,0 +1,7 @@
+import {
+  Modal
+} from "../chunk-TPFNVGYA.js";
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/build/legacy/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/ModalDescription.js

@@ -0,0 +1,7 @@
+import {
+  ModalDescription
+} from "../chunk-UPODPCRD.js";
+export {
+  ModalDescription
+};
+//# sourceMappingURL=ModalDescription.js.map

package/build/legacy/components/ModalDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/ModalHeader.js

@@ -0,0 +1,7 @@
+import {
+  ModalHeader
+} from "../chunk-2F5TB2EV.js";
+export {
+  ModalHeader
+};
+//# sourceMappingURL=ModalHeader.js.map

package/build/legacy/components/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}