@cerberus-design/react 0.13.1 → 0.13.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\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 } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport interface CTAModalProviderProps {}\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const FallbackIcon = $cerberusIcons.confirmModal\n  const confirmIcon = content?.icon as ReactNode\n  const { close: CloseIcon } = $cerberusIcons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      if (typeof action?.onClick === 'function') {\n        action.onClick(event)\n      }\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <ModalHeader>\n            <HStack justify=\"center\" w=\"full\">\n              <Avatar\n                ariaLabel=\"\"\n                gradient=\"charon-light\"\n                icon={\n                  <Show\n                    when={Boolean(confirmIcon)}\n                    fallback={<FallbackIcon size={24} />}\n                  >\n                    {confirmIcon}\n                  </Show>\n                }\n                src=\"\"\n              />\n            </HStack>\n            <VStack gap=\"lg\" w=\"full\">\n              <ModalHeading>{content?.heading}</ModalHeading>\n              <ModalDescription>{content?.description}</ModalDescription>\n            </VStack>\n          </ModalHeader>\n\n          <HStack gap=\"md\" pt=\"sm\" w=\"full\">\n            <Show when={Boolean(content?.actions?.length)}>\n              {content?.actions?.map((action, index) => (\n                <Button\n                  data-index={index}\n                  className={css({\n                    w: '1/2',\n                  })}\n                  key={index}\n                  onClick={handleActionClick}\n                  shape=\"rounded\"\n                  usage=\"outlined\"\n                >\n                  {action.text}\n                </Button>\n              ))}\n            </Show>\n          </HStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\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 } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n  /**\n   * The heading of the cta modal.\n   */\n  heading: string\n  /**\n   * The description of the cta modal.\n   */\n  description?: string\n  /**\n   * The icon used for the modal Avatar.\n   */\n  icon?: ReactNode\n  /**\n   * The actions for the cta modal. Max of 2 actions.\n   */\n  actions: {\n    text: string\n    onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>\n  }[]\n}\n\nexport interface CTAModalValue {\n  show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport interface CTAModalProviderProps {}\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n  const { modalRef, show, close } = useModal()\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const FallbackIcon = $cerberusIcons.confirmModal\n  const confirmIcon = content?.icon as ReactNode\n  const { close: CloseIcon } = $cerberusIcons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      const maxActions = 2\n      if (options.actions.length > maxActions) {\n        throw new Error(\n          `CTA Modal only supports a maximum of ${maxActions} actions.`,\n        )\n      }\n      setContent({ ...options })\n      show()\n    },\n    [show],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = event.currentTarget.getAttribute('data-index')\n      const action = content?.actions[Number(index)]\n      if (typeof action?.onClick === 'function') {\n        action.onClick(event)\n      }\n      close()\n    },\n    [content, close],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <span\n            className={css({\n              padding: 'md',\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 'decorator',\n            })}\n          >\n            <IconButton ariaLabel=\"Close modal\" onClick={close}>\n              <CloseIcon />\n            </IconButton>\n          </span>\n\n          <VStack gap=\"xl\" w=\"full\">\n            <ModalHeader>\n              <VStack gap=\"lg\" w=\"full\">\n                <Avatar\n                  ariaLabel=\"\"\n                  gradient=\"charon-light\"\n                  icon={\n                    <Show\n                      when={Boolean(confirmIcon)}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\n                  src=\"\"\n                />\n                <ModalHeading>{content?.heading}</ModalHeading>\n                <ModalDescription>{content?.description}</ModalDescription>\n              </VStack>\n            </ModalHeader>\n\n            <HStack gap=\"md\" w=\"full\">\n              <Show when={Boolean(content?.actions?.length)}>\n                {content?.actions?.map((action, index) => (\n                  <Button\n                    data-index={index}\n                    className={css({\n                      w: '1/2',\n                    })}\n                    key={index}\n                    onClick={handleActionClick}\n                    shape=\"rounded\"\n                    usage=\"outlined\"\n                  >\n                    {action.text}\n                  </Button>\n                ))}\n              </Show>\n            </HStack>\n          </VStack>\n        </Modal>\n      </Portal>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-ZFAIE47A.js → chunk-XY6WL55R.js}

@@ -12,7 +12,6 @@ function ModalHeader(props) {
         vstack({
           alignItems: "flex-start",
           gap: "md",
-          mb: "md",
           position: "relative"
         })
       )
@@ -23,4 +22,4 @@ function ModalHeader(props) {
 export {
   ModalHeader
 };
-//# sourceMappingURL=chunk-ZFAIE47A.js.map
+//# sourceMappingURL=chunk-XY6WL55R.js.map

package/build/modern/{chunk-ZFAIE47A.js.map → chunk-XY6WL55R.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/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 * @see https://cerberus.digitalu.design/react/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: 'md',\n          mb: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;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,UACJ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/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 * @see https://cerberus.digitalu.design/react/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: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAwBnB;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,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-ZFAIE47A.js";
+} from "../chunk-XY6WL55R.js";
 export {
   ModalHeader
 };

package/build/modern/components/Portal.js

@@ -1,7 +1,6 @@
-"use client";
 import {
   Portal
-} from "../chunk-K2PSHGS7.js";
+} from "../chunk-IQJDVFPP.js";
 export {
   Portal
 };

package/build/modern/context/confirm-modal.js

@@ -2,16 +2,16 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-KFGI37CO.js";
-import "../chunk-K2PSHGS7.js";
-import "../chunk-ZFAIE47A.js";
+} from "../chunk-GRUXP3NG.js";
+import "../chunk-IQJDVFPP.js";
+import "../chunk-Q7BRMIBR.js";
+import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
+import "../chunk-EXGKZGML.js";
 import "../chunk-KGQG5JGW.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-EXGKZGML.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/context/cta-modal.js

@@ -2,17 +2,17 @@
 import {
   CTAModal,
   useCTAModal
-} from "../chunk-J4LOSTEP.js";
-import "../chunk-K2PSHGS7.js";
-import "../chunk-ZFAIE47A.js";
-import "../chunk-2UXE5PDG.js";
-import "../chunk-BE4EOU2P.js";
+} from "../chunk-WFJWCZ7E.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-Q7BRMIBR.js";
+import "../chunk-XY6WL55R.js";
+import "../chunk-2UXE5PDG.js";
 import "../chunk-APD6IX5R.js";
+import "../chunk-BE4EOU2P.js";
+import "../chunk-EXGKZGML.js";
 import "../chunk-KGQG5JGW.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-EXGKZGML.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/context/notification-center.js

@@ -2,13 +2,13 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-KUT2YEEQ.js";
-import "../chunk-K2PSHGS7.js";
+} from "../chunk-3XGLNXJJ.js";
+import "../chunk-SXIXDXG3.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-7SGPJM66.js";
 import "../chunk-XEW6TJJ4.js";
-import "../chunk-SXIXDXG3.js";
-import "../chunk-BUVVRQLZ.js";
 import "../chunk-EXGKZGML.js";
+import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/context/prompt-modal.js

@@ -2,19 +2,19 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-NCUHRVW2.js";
-import "../chunk-K2PSHGS7.js";
-import "../chunk-ZFAIE47A.js";
+} from "../chunk-FBSESDWJ.js";
+import "../chunk-IQJDVFPP.js";
+import "../chunk-Q7BRMIBR.js";
+import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
 import "../chunk-NKM6PISB.js";
 import "../chunk-NMF2HYWO.js";
 import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
+import "../chunk-EXGKZGML.js";
 import "../chunk-UZDVOIW5.js";
 import "../chunk-KGQG5JGW.js";
 import "../chunk-SPZYPRZ6.js";
 import "../chunk-BUVVRQLZ.js";
-import "../chunk-EXGKZGML.js";
 import "../chunk-JIZQFTW6.js";
 import "../chunk-VERRHMW4.js";
 import "../chunk-F27AAKQ3.js";

package/build/modern/hooks/useRootColors.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  useRootColors
+} from "../chunk-RMVJK26W.js";
+export {
+  useRootColors
+};
+//# sourceMappingURL=useRootColors.js.map

package/build/modern/hooks/useRootColors.js.map

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

package/build/modern/index.js

@@ -1,11 +1,18 @@
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-3XGLNXJJ.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-NCUHRVW2.js";
+} from "./chunk-FBSESDWJ.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Thead
+} from "./chunk-Y6QQCRQV.js";
 import {
   Toggle
 } from "./chunk-NMNONSHU.js";
@@ -15,15 +22,14 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-KFGI37CO.js";
+} from "./chunk-GRUXP3NG.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-J4LOSTEP.js";
+} from "./chunk-WFJWCZ7E.js";
 import {
-  NotificationCenter,
-  useNotificationCenter
-} from "./chunk-KUT2YEEQ.js";
+  TabList
+} from "./chunk-UKPF7JOB.js";
 import {
   TabPanel
 } from "./chunk-AYIRV5CL.js";
@@ -47,11 +53,11 @@ import {
   Th
 } from "./chunk-SGKHA4EB.js";
 import {
-  Thead
-} from "./chunk-Y6QQCRQV.js";
+  NotificationHeading
+} from "./chunk-SXIXDXG3.js";
 import {
   Portal
-} from "./chunk-K2PSHGS7.js";
+} from "./chunk-IQJDVFPP.js";
 import {
   Radio
 } from "./chunk-FTPZHG6J.js";
@@ -66,11 +72,11 @@ import {
   Tab
 } from "./chunk-SLF6SIPB.js";
 import {
-  TabList
-} from "./chunk-UKPF7JOB.js";
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
-} from "./chunk-ZFAIE47A.js";
+} from "./chunk-XY6WL55R.js";
 import {
   ModalHeading
 } from "./chunk-2UXE5PDG.js";
@@ -95,11 +101,18 @@ import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
 import {
-  NotificationHeading
-} from "./chunk-SXIXDXG3.js";
+  FileStatus,
+  processStatus
+} from "./chunk-7MM5KYEX.js";
+import {
+  ProgressBar
+} from "./chunk-KCANMM64.js";
 import {
   FileUploader
 } from "./chunk-W4DXACNV.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Input
 } from "./chunk-NKM6PISB.js";
@@ -122,8 +135,8 @@ import {
   Modal
 } from "./chunk-BE4EOU2P.js";
 import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+  Button
+} from "./chunk-EXGKZGML.js";
 import {
   Checkbox
 } from "./chunk-NB6DV4VA.js";
@@ -140,32 +153,25 @@ import {
   FeatureFlags,
   useFeatureFlags
 } from "./chunk-CJFW36DZ.js";
-import {
-  Fieldset
-} from "./chunk-3ZDFQO25.js";
-import {
-  FieldsetLabel
-} from "./chunk-PZAZKQMO.js";
-import {
-  FileStatus,
-  processStatus
-} from "./chunk-7MM5KYEX.js";
-import {
-  ProgressBar
-} from "./chunk-KCANMM64.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
 import {
   FieldMessage
 } from "./chunk-JWIJHSI6.js";
+import {
+  Fieldset
+} from "./chunk-3ZDFQO25.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-UZDVOIW5.js";
+import {
+  FieldsetLabel
+} from "./chunk-PZAZKQMO.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
+import {
+  useRootColors
+} from "./chunk-RMVJK26W.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -188,9 +194,6 @@ import {
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -309,6 +312,7 @@ export {
   useNavMenuContext,
   useNotificationCenter,
   usePromptModal,
+  useRootColors,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -27,7 +27,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.13.1"
+    "@cerberus-design/styled-system": "0.13.2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ModalHeader.tsx

@@ -30,7 +30,6 @@ export function ModalHeader(props: ModalHeaderProps) {
         vstack({
           alignItems: 'flex-start',
           gap: 'md',
-          mb: 'md',
           position: 'relative',
         }),
       )}

package/src/components/Portal.tsx

@@ -1,24 +1,14 @@
-'use client'
-
-import type { PropsWithChildren } from 'react'
-import { createPortal } from 'react-dom'
+import {
+  Portal as ArkPortal,
+  type PortalProps as ArkPortalProps,
+} from '@ark-ui/react'
 
 /**
  * This module is the Portal component.
  * @module
  */
 
-export 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
-}
+export type PortalProps = ArkPortalProps
 
 /**
  * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
@@ -38,7 +28,4 @@ export interface PortalProps {
  *   )
  * }
  */
-export function Portal(props: PropsWithChildren<PortalProps>) {
-  const container = props.container || document.body
-  return createPortal(props.children, container, props.key)
-}
+export const Portal = ArkPortal

package/src/context/confirm-modal.tsx

@@ -9,6 +9,7 @@ import {
   useState,
   type MouseEvent,
   type PropsWithChildren,
+  type ReactNode,
 } from 'react'
 import { Portal } from '../components/Portal'
 import { Button } from '../components/Button'
@@ -23,26 +24,18 @@ import { ModalHeader } from '../components/ModalHeader'
 import { ModalHeading } from '../components/ModalHeading'
 import { ModalDescription } from '../components/ModalDescription'
 import { Avatar } from '../components/Avatar'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
 
 /**
  * This module provides a context and hook for the confirm modal.
  * @module
  */
 
-export interface ShowConfirmModalOptions {
-  /**
-   * The kind of confirm modal to show.
-   * @default 'non-destructive'
-   */
-  kind?: 'destructive' | 'non-destructive'
+export interface BaseConfirmOptions {
   /**
    * The heading of the confirm modal.
    */
   heading: string
-  /**
-   * The description of the confirm modal.
-   */
-  description?: string
   /**
    * The text for the action button.
    */
@@ -52,6 +45,37 @@ export interface ShowConfirmModalOptions {
    */
   cancelText: string
 }
+
+export 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 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 type ShowConfirmModalOptions =
+  | NonDestructiveConfirmModalOptions
+  | DestructiveConfirmOptions
+
 export type ShowResult =
   | ((value: boolean | PromiseLike<boolean>) => void)
   | null
@@ -97,10 +121,11 @@ export function ConfirmModal(
   const [content, setContent] = useState<ShowConfirmModalOptions | null>(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(
@@ -118,7 +143,7 @@ export function ConfirmModal(
   const handleShow = useCallback(
     (options: ShowConfirmModalOptions) => {
       return new Promise<boolean>((resolve) => {
-        setContent({ ...options, kind: options.kind || 'non-destructive' })
+        setContent({ ...options })
         show()
         resolveRef.current = resolve
       })
@@ -139,65 +164,63 @@ export function ConfirmModal(
 
       <Portal>
         <Modal onKeyDown={focusTrap} ref={modalRef}>
-          <ModalHeader>
-            <div
-              className={hstack({
-                justify: 'center',
-                w: 'full',
-              })}
-            >
-              <Show
-                when={palette === 'danger'}
-                fallback={
+          <VStack gap="xl" w="full">
+            <ModalHeader>
+              <div
+                className={hstack({
+                  justify: 'center',
+                  w: 'full',
+                })}
+              >
+                <Show
+                  when={palette === 'danger'}
+                  fallback={
+                    <Avatar
+                      ariaLabel=""
+                      gradient="charon-light"
+                      icon={<ConfirmIcon size={24} />}
+                      src=""
+                    />
+                  }
+                >
                   <Avatar
                     ariaLabel=""
-                    gradient="charon-light"
+                    gradient="hades-dark"
                     icon={<ConfirmIcon size={24} />}
                     src=""
                   />
-                }
+                </Show>
+              </div>
+              <ModalHeading>{content?.heading}</ModalHeading>
+              <ModalDescription>{content?.description}</ModalDescription>
+            </ModalHeader>
+
+            <HStack gap="4" w="full">
+              <Button
+                autoFocus
+                className={css({
+                  w: '1/2',
+                })}
+                name="confirm"
+                onClick={handleChoice}
+                palette={palette}
+                value="true"
+              >
+                {content?.actionText}
+              </Button>
+              <Button
+                className={css({
+                  w: '1/2',
+                })}
+                name="cancel"
+                onClick={handleChoice}
+                usage="outlined"
+                value="false"
               >
-                <Avatar
-                  ariaLabel=""
-                  gradient="hades-dark"
-                  icon={<ConfirmIcon size={24} />}
-                  src=""
-                />
-              </Show>
-            </div>
-            <ModalHeading>{content?.heading}</ModalHeading>
-            <ModalDescription>{content?.description}</ModalDescription>
-          </ModalHeader>
-
-          <div
-            className={hstack({
-              gap: '4',
-            })}
-          >
-            <Button
-              autoFocus
-              className={css({
-                w: '1/2',
-              })}
-              name="confirm"
-              onClick={handleChoice}
-              palette={palette}
-              value="true"
-            >
-              {content?.actionText}
-            </Button>
-            <Button
-              className={css({
-                w: '1/2',
-              })}
-              name="cancel"
-              onClick={handleChoice}
-              usage="outlined"
-              value="false"
-            >
-              {content?.cancelText}
-            </Button>
-          </div>
+                {content?.cancelText}
+              </Button>
+            </HStack>
+          </VStack>
         </Modal>
       </Portal>
     </ConfirmModalContext.Provider>