@cerberus-design/react 0.13.1 → 0.13.2

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

@@ -99,12 +99,12 @@ import { PointerSensor } from '@dnd-kit/core';
 import { PointerSensorOptions } from '@dnd-kit/core';
 import { PointerSensorProps } from '@dnd-kit/core';
 import { pointerWithin } from '@dnd-kit/core';
+import { PortalProps as PortalProps_2 } from '@ark-ui/react';
 import type { Pretty } from '@cerberus/styled-system/types';
 import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
-import { ReactPortal } from 'react';
 import type { RecipeVariantProps } from '@cerberus/styled-system/types';
 import { rectIntersection } from '@dnd-kit/core';
 import { RefAttributes } from 'react';
@@ -299,6 +299,27 @@ declare type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> & AvatarVariantPr
 export { AvatarProps }
 export { AvatarProps as AvatarProps_alias_1 }
 
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+declare interface BaseConfirmOptions {
+    /**
+     * The heading of the confirm modal.
+     */
+    heading: string;
+    /**
+     * The text for the action button.
+     */
+    actionText: string;
+    /**
+     * The text for the cancel button.
+     */
+    cancelText: string;
+}
+export { BaseConfirmOptions }
+export { BaseConfirmOptions as BaseConfirmOptions_alias_1 }
+
 /**
  * This module exports the NotificationDescription component.
  * @module
@@ -640,6 +661,19 @@ declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
 
+declare interface DestructiveConfirmOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     */
+    kind?: 'destructive';
+    /**
+     * The description of the confirm modal. Can only be a string for destructive confirm modals.
+     */
+    description?: string;
+}
+export { DestructiveConfirmOptions }
+export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
+
 export { DistanceMeasurement }
 
 export { DndContext }
@@ -1669,6 +1703,23 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+declare interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     * @default 'non-destructive'
+     */
+    kind?: 'non-destructive';
+    /**
+     * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
+     * @example
+     * ```tsx
+     * description: <>Use a Fragment because we put the content within a Paragraph tag.</>
+     */
+    description?: ReactNode;
+}
+export { NonDestructiveConfirmModalOptions }
+export { NonDestructiveConfirmModalOptions as NonDestructiveConfirmModalOptions_alias_1 }
+
 declare type NonIndeterminateProgressBarProps = {
     /**
      * A unique identifier for the progress bar. Required for accessibility.
@@ -1869,7 +1920,7 @@ export { pointerWithin }
  *   )
  * }
  */
-declare function Portal(props: PropsWithChildren<PortalProps>): ReactPortal;
+declare const Portal: (props: PropsWithChildren<PortalProps_2>) => JSX_2.Element;
 export { Portal }
 export { Portal as Portal_alias_1 }
 
@@ -1877,17 +1928,7 @@ export { Portal as Portal_alias_1 }
  * This module is the Portal component.
  * @module
  */
-declare interface PortalProps {
-    /**
-     * The root container to render the children into.
-     * @default document.body
-     */
-    container?: Element | DocumentFragment;
-    /**
-     * An optional key to use for the Portal component.
-     */
-    key?: null | string;
-}
+declare type PortalProps = PortalProps_2;
 export { PortalProps }
 export { PortalProps as PortalProps_alias_1 }
 
@@ -2046,6 +2087,23 @@ export { RadioRecipe as RadioRecipe_alias_1 }
 
 export { rectIntersection }
 
+/**
+ * This module provides a hook to get Cerberus colors from the document root.
+ * @module useRootColors
+ */
+declare interface RootColorsResult {
+    /**
+     * A record of Cerberus colors where the key is the token name provided and the value is the color hex.
+     */
+    colors: Record<string, string>;
+    /**
+     * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.
+     */
+    refetch: () => Promise<void>;
+}
+export { RootColorsResult }
+export { RootColorsResult as RootColorsResult_alias_1 }
+
 export { ScreenReaderInstructions }
 
 /**
@@ -2138,33 +2196,7 @@ declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
 export { Show }
 export { Show as Show_alias_1 }
 
-/**
- * This module provides a context and hook for the confirm modal.
- * @module
- */
-declare interface ShowConfirmModalOptions {
-    /**
-     * The kind of confirm modal to show.
-     * @default 'non-destructive'
-     */
-    kind?: 'destructive' | 'non-destructive';
-    /**
-     * The heading of the confirm modal.
-     */
-    heading: string;
-    /**
-     * The description of the confirm modal.
-     */
-    description?: string;
-    /**
-     * The text for the action button.
-     */
-    actionText: string;
-    /**
-     * The text for the cancel button.
-     */
-    cancelText: string;
-}
+declare type ShowConfirmModalOptions = NonDestructiveConfirmModalOptions | DestructiveConfirmOptions;
 export { ShowConfirmModalOptions }
 export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 
@@ -2985,6 +3017,17 @@ declare function usePromptModal(): PromptModalValue;
 export { usePromptModal }
 export { usePromptModal as usePromptModal_alias_1 }
 
+/**
+ * This hook returns a record of Cerberus colors from the document root.
+ * This is useful when you are working with a component that uses the `<canvas>`
+ * element.
+ * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).
+ * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.
+ */
+declare function useRootColors(colors?: string[]): RootColorsResult;
+export { useRootColors }
+export { useRootColors as useRootColors_alias_1 }
+
 export { useSensor }
 
 export { useSensors }

package/build/modern/{chunk-KUT2YEEQ.js → chunk-3XGLNXJJ.js}

@@ -1,6 +1,9 @@
+import {
+  NotificationHeading
+} from "./chunk-SXIXDXG3.js";
 import {
   Portal
-} from "./chunk-K2PSHGS7.js";
+} from "./chunk-IQJDVFPP.js";
 import {
   Notification
 } from "./chunk-7SGPJM66.js";
@@ -8,14 +11,11 @@ import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
 import {
-  NotificationHeading
-} from "./chunk-SXIXDXG3.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 
 // src/context/notification-center.tsx
 import {
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-KUT2YEEQ.js.map
+//# sourceMappingURL=chunk-3XGLNXJJ.js.map

package/build/modern/chunk-3XGLNXJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [activeNotifications, setActiveNotifications] = useState<\n    NotifyOptions[]\n  >([])\n  const styles = notification()\n\n  const handleNotify = useCallback((options: NotifyOptions) => {\n    setActiveNotifications((prev) => {\n      const id = `${options.palette}:${prev.length + 1}`\n      return [...prev, { ...options, id }]\n    })\n  }, [])\n\n  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    setActiveNotifications((prev) => {\n      const item = prev.find((option) => option.id === target.value)\n      if (item?.onClose) item.onClose()\n      return prev.filter((option) => option.id !== target.value)\n    })\n  }, [])\n\n  const handleCloseAll = useCallback(() => {\n    setActiveNotifications((prev) => {\n      prev.forEach((item) => {\n        if (item.onClose) item.onClose()\n      })\n      return []\n    })\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={activeNotifications.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={activeNotifications.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {activeNotifications.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description } = props\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"success\"\n        >\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"warning\"\n        >\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-NCUHRVW2.js → chunk-FBSESDWJ.js}

@@ -1,9 +1,12 @@
 import {
   Portal
-} from "./chunk-K2PSHGS7.js";
+} from "./chunk-IQJDVFPP.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
@@ -17,8 +20,8 @@ import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   Field
 } from "./chunk-UZDVOIW5.js";
@@ -31,9 +34,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -240,4 +240,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-NCUHRVW2.js.map
+//# sourceMappingURL=chunk-FBSESDWJ.js.map

package/build/modern/{chunk-KFGI37CO.js → chunk-GRUXP3NG.js}

@@ -1,9 +1,12 @@
 import {
   Portal
-} from "./chunk-K2PSHGS7.js";
+} from "./chunk-IQJDVFPP.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
@@ -11,8 +14,8 @@ import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -22,9 +25,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -43,6 +43,7 @@ import {
 } from "react";
 import { css } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
+import { HStack, VStack } from "@cerberus/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConfirmModalContext = createContext(null);
 function ConfirmModal(props) {
@@ -51,9 +52,10 @@ function ConfirmModal(props) {
   const [content, setContent] = useState(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
+  const kind = content?.kind ?? "non-destructive";
   const palette = useMemo(
-    () => content?.kind === "destructive" ? "danger" : "action",
-    [content]
+    () => kind === "destructive" ? "danger" : "action",
+    [kind]
   );
   const handleChoice = useCallback(
     (e) => {
@@ -69,7 +71,7 @@ function ConfirmModal(props) {
   const handleShow = useCallback(
     (options) => {
       return new Promise((resolve) => {
-        setContent({ ...options, kind: options.kind || "non-destructive" });
+        setContent({ ...options });
         show();
         resolveRef.current = resolve;
       });
@@ -84,7 +86,7 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Modal, { onKeyDown: focusTrap, ref: modalRef, children: /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
       /* @__PURE__ */ jsxs(ModalHeader, { children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -122,44 +124,36 @@ function ConfirmModal(props) {
         /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
         /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
       ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: hstack({
-            gap: "4"
-          }),
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                autoFocus: true,
-                className: css({
-                  w: "1/2"
-                }),
-                name: "confirm",
-                onClick: handleChoice,
-                palette,
-                value: "true",
-                children: content?.actionText
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: css({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content?.cancelText
-              }
-            )
-          ]
-        }
-      )
-    ] }) })
+      /* @__PURE__ */ jsxs(HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            autoFocus: true,
+            className: css({
+              w: "1/2"
+            }),
+            name: "confirm",
+            onClick: handleChoice,
+            palette,
+            value: "true",
+            children: content?.actionText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: css({
+              w: "1/2"
+            }),
+            name: "cancel",
+            onClick: handleChoice,
+            usage: "outlined",
+            value: "false",
+            children: content?.cancelText
+          }
+        )
+      ] })
+    ] }) }) })
   ] });
 }
 function useConfirmModal() {
@@ -176,4 +170,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-KFGI37CO.js.map
+//# sourceMappingURL=chunk-GRUXP3NG.js.map

package/build/modern/chunk-GRUXP3NG.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  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\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'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\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 * @see https://cerberus.digitalu.design/react/confirm-modal\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  const kind = content?.kind ?? 'non-destructive'\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\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 })\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          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <div\n                className={hstack({\n                  justify: 'center',\n                  w: 'full',\n                })}\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<ConfirmIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<ConfirmIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </div>\n              <ModalHeading>{content?.heading}</ModalHeading>\n              <ModalDescription>{content?.description}</ModalDescription>\n            </ModalHeader>\n\n            <HStack gap=\"4\" w=\"full\">\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            </HStack>\n          </VStack>\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":"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","names":[]}

package/build/modern/chunk-IQJDVFPP.js

@@ -0,0 +1,10 @@
+// src/components/Portal.tsx
+import {
+  Portal as ArkPortal
+} from "@ark-ui/react";
+var Portal = ArkPortal;
+
+export {
+  Portal
+};
+//# sourceMappingURL=chunk-IQJDVFPP.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n"],"mappings":";AAAA;AAAA,EACE,UAAU;AAAA,OAEL;AA2BA,IAAM,SAAS;","names":[]}

package/build/modern/chunk-RMVJK26W.js

@@ -0,0 +1,39 @@
+// src/hooks/useRootColors.ts
+import { useCallback, useEffect, useMemo, useReducer } from "react";
+function useRootColors(colors = []) {
+  const [state, dispatch] = useReducer(rootColorsReducer, {});
+  const handleRefetch = useCallback(() => {
+    return new Promise((resolve) => {
+      dispatch(formatColors(colors));
+      resolve();
+    });
+  }, []);
+  useEffect(() => {
+    if (Object.keys(state).length === colors.length) return;
+    dispatch(formatColors(colors));
+    console.log("updating colors in root hook");
+  }, [colors]);
+  return useMemo(
+    () => ({ colors: state, refetch: handleRefetch }),
+    [state, handleRefetch]
+  );
+}
+function formatColors(colors) {
+  const rootStyles = getComputedStyle(document.body);
+  return colors.reduce(
+    (acc, color) => {
+      const formattedColor = color.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase().replaceAll(".", "-");
+      acc[color] = rootStyles.getPropertyValue(`--cerberus-colors-${formattedColor}`).trim();
+      return acc;
+    },
+    {}
+  );
+}
+function rootColorsReducer(state, action) {
+  return { ...state, ...action };
+}
+
+export {
+  useRootColors
+};
+//# sourceMappingURL=chunk-RMVJK26W.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useRootColors.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useMemo, useReducer } from 'react'\n\n/**\n * This module provides a hook to get Cerberus colors from the document root.\n * @module useRootColors\n */\n\nexport interface RootColorsResult {\n  /**\n   * A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n   */\n  colors: Record<string, string>\n  /**\n   * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.\n   */\n  refetch: () => Promise<void>\n}\n\n/**\n * This hook returns a record of Cerberus colors from the document root.\n * This is useful when you are working with a component that uses the `<canvas>`\n * element.\n * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).\n * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n */\nexport function useRootColors(colors: string[] = []): RootColorsResult {\n  const [state, dispatch] = useReducer(rootColorsReducer, {})\n\n  const handleRefetch = useCallback(() => {\n    return new Promise<void>((resolve) => {\n      dispatch(formatColors(colors))\n      resolve()\n    })\n  }, [])\n\n  useEffect(() => {\n    if (Object.keys(state).length === colors.length) return\n    dispatch(formatColors(colors))\n    console.log('updating colors in root hook')\n  }, [colors])\n\n  // reducer is already memoized\n  return useMemo(\n    () => ({ colors: state, refetch: handleRefetch }),\n    [state, handleRefetch],\n  )\n}\n\nfunction formatColors(colors: string[]): Record<string, string> {\n  const rootStyles = getComputedStyle(document.body)\n  return colors.reduce(\n    (acc, color) => {\n      const formattedColor = color\n        .replace(/([a-z])([A-Z])/g, '$1-$2')\n        .toLowerCase()\n        .replaceAll('.', '-')\n      acc[color] = rootStyles\n        .getPropertyValue(`--cerberus-colors-${formattedColor}`)\n        .trim()\n      return acc\n    },\n    {} as Record<string, string>,\n  )\n}\n\nfunction rootColorsReducer(\n  state: Record<string, string>,\n  action: Record<string, string>,\n): Record<string, string> {\n  return { ...state, ...action }\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,SAAS,kBAAkB;AAyBrD,SAAS,cAAc,SAAmB,CAAC,GAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAE1D,QAAM,gBAAgB,YAAY,MAAM;AACtC,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,eAAS,aAAa,MAAM,CAAC;AAC7B,cAAQ;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,OAAO,OAAQ;AACjD,aAAS,aAAa,MAAM,CAAC;AAC7B,YAAQ,IAAI,8BAA8B;AAAA,EAC5C,GAAG,CAAC,MAAM,CAAC;AAGX,SAAO;AAAA,IACL,OAAO,EAAE,QAAQ,OAAO,SAAS,cAAc;AAAA,IAC/C,CAAC,OAAO,aAAa;AAAA,EACvB;AACF;AAEA,SAAS,aAAa,QAA0C;AAC9D,QAAM,aAAa,iBAAiB,SAAS,IAAI;AACjD,SAAO,OAAO;AAAA,IACZ,CAAC,KAAK,UAAU;AACd,YAAM,iBAAiB,MACpB,QAAQ,mBAAmB,OAAO,EAClC,YAAY,EACZ,WAAW,KAAK,GAAG;AACtB,UAAI,KAAK,IAAI,WACV,iBAAiB,qBAAqB,cAAc,EAAE,EACtD,KAAK;AACR,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEA,SAAS,kBACP,OACA,QACwB;AACxB,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;","names":[]}

package/build/modern/{chunk-J4LOSTEP.js → chunk-WFJWCZ7E.js}

@@ -1,21 +1,24 @@
 import {
   Portal
-} from "./chunk-K2PSHGS7.js";
+} from "./chunk-IQJDVFPP.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -25,9 +28,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -101,42 +101,42 @@ function CTAModal(props) {
           children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Close modal", onClick: close, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsxs(ModalHeader, { children: [
-        /* @__PURE__ */ jsx(HStack, { justify: "center", w: "full", children: /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            ariaLabel: "",
-            gradient: "charon-light",
-            icon: /* @__PURE__ */ jsx(
-              Show,
-              {
-                when: Boolean(confirmIcon),
-                fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
-                children: confirmIcon
-              }
-            ),
-            src: ""
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+      /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
+        /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              ariaLabel: "",
+              gradient: "charon-light",
+              icon: /* @__PURE__ */ jsx(
+                Show,
+                {
+                  when: Boolean(confirmIcon),
+                  fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
+                  children: confirmIcon
+                }
+              ),
+              src: ""
+            }
+          ),
           /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
           /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(HStack, { gap: "md", pt: "sm", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          "data-index": index,
-          className: css({
-            w: "1/2"
-          }),
-          onClick: handleActionClick,
-          shape: "rounded",
-          usage: "outlined",
-          children: action.text
-        },
-        index
-      )) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(Show, { when: Boolean(content?.actions?.length), children: content?.actions?.map((action, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-index": index,
+            className: css({
+              w: "1/2"
+            }),
+            onClick: handleActionClick,
+            shape: "rounded",
+            usage: "outlined",
+            children: action.text
+          },
+          index
+        )) }) })
+      ] })
     ] }) })
   ] });
 }
@@ -152,4 +152,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-J4LOSTEP.js.map
+//# sourceMappingURL=chunk-WFJWCZ7E.js.map