@cerberus-design/react 0.13.1-next-d1e87c5 → 0.13.1-next-394d7c4

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

@@ -2097,6 +2097,14 @@ export { RadioRecipe as RadioRecipe_alias_1 }
 
 export { rectIntersection }
 
+/**
+ * This module provides a hook to get Cerberus colors from the document root.
+ * @module useRootColors
+ */
+declare type RootColorsResult = Record<string, string>;
+export { RootColorsResult }
+export { RootColorsResult as RootColorsResult_alias_1 }
+
 export { ScreenReaderInstructions }
 
 /**
@@ -3010,6 +3018,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-B3LRHIEG.js}

@@ -1,3 +1,6 @@
+import {
+  NotificationHeading
+} from "./chunk-SXIXDXG3.js";
 import {
   Portal
 } from "./chunk-K2PSHGS7.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-B3LRHIEG.js.map

package/build/modern/chunk-B3LRHIEG.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-4D6VIGNQ.js → chunk-FHS7VVGN.js}

@@ -1,6 +1,9 @@
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.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";
@@ -170,4 +170,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-4D6VIGNQ.js.map
+//# sourceMappingURL=chunk-FHS7VVGN.js.map

package/build/modern/chunk-RO4AJOVX.js

@@ -0,0 +1,24 @@
+// src/hooks/useRootColors.ts
+import { useEffect, useReducer } from "react";
+function useRootColors(colors = []) {
+  const [state, dispatch] = useReducer(rootColorsReducer, {});
+  useEffect(() => {
+    if (Object.keys(state).length === colors.length) return;
+    const rootStyles = getComputedStyle(document.body);
+    const rootColors = 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;
+    }, {});
+    dispatch(rootColors);
+  }, [colors]);
+  return state;
+}
+function rootColorsReducer(state, action) {
+  return { ...state, ...action };
+}
+
+export {
+  useRootColors
+};
+//# sourceMappingURL=chunk-RO4AJOVX.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useRootColors.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, 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 type RootColorsResult = Record<string, string>\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  useEffect(() => {\n    if (Object.keys(state).length === colors.length) return\n\n    const rootStyles = getComputedStyle(document.body)\n    const rootColors = colors.reduce((acc, color) => {\n      const formattedColor = color\n        .replace(/([a-z])([A-Z])/g, '$1-$2')\n        .toLowerCase()\n        .replaceAll('.', '-')\n      acc[color as keyof typeof acc] = rootStyles\n        .getPropertyValue(`--cerberus-colors-${formattedColor}`)\n        .trim()\n      return acc\n    }, {} as RootColorsResult)\n\n    dispatch(rootColors)\n  }, [colors])\n\n  // reducer is already memoized\n  return state\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,WAAW,kBAAkB;AAgB/B,SAAS,cAAc,SAAmB,CAAC,GAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAE1D,YAAU,MAAM;AACd,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,OAAO,OAAQ;AAEjD,UAAM,aAAa,iBAAiB,SAAS,IAAI;AACjD,UAAM,aAAa,OAAO,OAAO,CAAC,KAAK,UAAU;AAC/C,YAAM,iBAAiB,MACpB,QAAQ,mBAAmB,OAAO,EAClC,YAAY,EACZ,WAAW,KAAK,GAAG;AACtB,UAAI,KAAyB,IAAI,WAC9B,iBAAiB,qBAAqB,cAAc,EAAE,EACtD,KAAK;AACR,aAAO;AAAA,IACT,GAAG,CAAC,CAAqB;AAEzB,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,MAAM,CAAC;AAGX,SAAO;AACT;AAEA,SAAS,kBACP,OACA,QACwB;AACxB,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;","names":[]}

package/build/modern/{chunk-MMHCX2RG.js → chunk-S6JWPDB4.js}

@@ -1,6 +1,9 @@
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.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-MMHCX2RG.js.map
+//# sourceMappingURL=chunk-S6JWPDB4.js.map

package/build/modern/{chunk-MXMVC3ZQ.js → chunk-SRPSJGNI.js}

@@ -1,21 +1,24 @@
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } 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";
@@ -152,4 +152,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-MXMVC3ZQ.js.map
+//# sourceMappingURL=chunk-SRPSJGNI.js.map

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

@@ -2,16 +2,16 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-4D6VIGNQ.js";
+} from "../chunk-FHS7VVGN.js";
 import "../chunk-K2PSHGS7.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-MXMVC3ZQ.js";
+} from "../chunk-SRPSJGNI.js";
 import "../chunk-K2PSHGS7.js";
+import "../chunk-Q7BRMIBR.js";
 import "../chunk-XY6WL55R.js";
 import "../chunk-2UXE5PDG.js";
-import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.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";
+} from "../chunk-B3LRHIEG.js";
+import "../chunk-SXIXDXG3.js";
 import "../chunk-K2PSHGS7.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-MMHCX2RG.js";
+} from "../chunk-S6JWPDB4.js";
 import "../chunk-K2PSHGS7.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-RO4AJOVX.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-B3LRHIEG.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-MMHCX2RG.js";
+} from "./chunk-S6JWPDB4.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-4D6VIGNQ.js";
+} from "./chunk-FHS7VVGN.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-MXMVC3ZQ.js";
+} from "./chunk-SRPSJGNI.js";
 import {
-  NotificationCenter,
-  useNotificationCenter
-} from "./chunk-KUT2YEEQ.js";
+  TabList
+} from "./chunk-UKPF7JOB.js";
 import {
   TabPanel
 } from "./chunk-AYIRV5CL.js";
@@ -47,8 +53,8 @@ import {
   Th
 } from "./chunk-SGKHA4EB.js";
 import {
-  Thead
-} from "./chunk-Y6QQCRQV.js";
+  NotificationHeading
+} from "./chunk-SXIXDXG3.js";
 import {
   Portal
 } from "./chunk-K2PSHGS7.js";
@@ -66,8 +72,8 @@ import {
   Tab
 } from "./chunk-SLF6SIPB.js";
 import {
-  TabList
-} from "./chunk-UKPF7JOB.js";
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
 import {
   ModalHeader
 } from "./chunk-XY6WL55R.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-RO4AJOVX.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-next-d1e87c5",
+  "version": "0.13.1-next-394d7c4",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,8 +26,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.13.1-next-d1e87c5"
+    "@cerberus-design/styled-system": "0.13.1-next-394d7c4",
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/context/notification-center.tsx

@@ -141,6 +141,7 @@ export function NotificationCenter(
                 Close all
               </Button>
             </Show>
+
             <div
               className={vstack({
                 alignItems: 'flex-end',

package/src/hooks/useRootColors.ts

@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect, useReducer } from 'react'
+
+/**
+ * This module provides a hook to get Cerberus colors from the document root.
+ * @module useRootColors
+ */
+
+export type RootColorsResult = Record<string, string>
+
+/**
+ * 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.
+ */
+export function useRootColors(colors: string[] = []): RootColorsResult {
+  const [state, dispatch] = useReducer(rootColorsReducer, {})
+
+  useEffect(() => {
+    if (Object.keys(state).length === colors.length) return
+
+    const rootStyles = getComputedStyle(document.body)
+    const rootColors = colors.reduce((acc, color) => {
+      const formattedColor = color
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+        .replaceAll('.', '-')
+      acc[color as keyof typeof acc] = rootStyles
+        .getPropertyValue(`--cerberus-colors-${formattedColor}`)
+        .trim()
+      return acc
+    }, {} as RootColorsResult)
+
+    dispatch(rootColors)
+  }, [colors])
+
+  // reducer is already memoized
+  return state
+}
+
+function rootColorsReducer(
+  state: Record<string, string>,
+  action: Record<string, string>,
+): Record<string, string> {
+  return { ...state, ...action }
+}

package/src/index.ts

@@ -69,6 +69,7 @@ export * from './hooks/useDate'
 export * from './hooks/useModal'
 export * from './hooks/useTheme'
 export * from './hooks/useToggle'
+export * from './hooks/useRootColors'
 
 // aria-helpers
 

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

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