@cerberus-design/react 0.13.1-next-394d7c4 → 0.13.1-next-8e40fb6

package/build/legacy/index.cjs

@@ -1727,11 +1727,8 @@ function NotificationDescription(props) {
 }
 
 // src/components/Portal.tsx
-var import_react_dom = require("react-dom");
-function Portal(props) {
-  const container = props.container || document.body;
-  return (0, import_react_dom.createPortal)(props.children, container, props.key);
-}
+var import_react12 = require("@ark-ui/react");
+var Portal = import_react12.Portal;
 
 // src/components/Radio.tsx
 var import_css28 = require("@cerberus/styled-system/css");
@@ -1899,21 +1896,21 @@ function Spinner(props) {
 }
 
 // src/components/Tab.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/context/tabs.tsx
 var import_recipes24 = require("@cerberus/styled-system/recipes");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var TabsContext = (0, import_react12.createContext)(null);
+var TabsContext = (0, import_react13.createContext)(null);
 function Tabs(props) {
   const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = (0, import_react12.useState)(() => cache ? "" : active ?? "");
-  const tabsList = (0, import_react12.useRef)([]);
-  const uuid = (0, import_react12.useMemo)(() => {
+  const [activeTab, setActiveTab] = (0, import_react13.useState)(() => cache ? "" : active ?? "");
+  const tabsList = (0, import_react13.useRef)([]);
+  const uuid = (0, import_react13.useMemo)(() => {
     return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
   }, [id]);
-  const value = (0, import_react12.useMemo)(
+  const value = (0, import_react13.useMemo)(
     () => ({
       tabs: tabsList,
       id: uuid,
@@ -1923,7 +1920,7 @@ function Tabs(props) {
     }),
     [activeTab, setActiveTab, palette, uuid, tabsList]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (cache) {
       const cachedTab = window.localStorage.getItem(uuid);
       setActiveTab(
@@ -1931,7 +1928,7 @@ function Tabs(props) {
       );
     }
   }, [cache, active, uuid]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (cache && activeTab) {
       window.localStorage.setItem(uuid, activeTab);
     }
@@ -1939,7 +1936,7 @@ function Tabs(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TabsContext.Provider, { value, children: props.children });
 }
 function useTabsContext() {
-  const context = (0, import_react12.useContext)(TabsContext);
+  const context = (0, import_react13.useContext)(TabsContext);
   if (!context) {
     throw new Error("useTabsContext must be used within a Tabs Provider.");
   }
@@ -1950,7 +1947,7 @@ function useTabsContext() {
 var import_css30 = require("@cerberus/styled-system/css");
 
 // src/aria-helpers/tabs.aria.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function getNextIndex(index, length) {
   return index === length - 1 ? 0 : index + 1;
 }
@@ -1959,8 +1956,8 @@ function getPrevIndex(index, length) {
 }
 function useTabsKeyboardNavigation() {
   const { tabs: tabs2 } = useTabsContext();
-  const [activeTab, setActiveTab] = (0, import_react13.useState)(-1);
-  (0, import_react13.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react14.useState)(-1);
+  (0, import_react14.useEffect)(() => {
     const handleKeyDown = (event) => {
       const index = activeTab === -1 ? tabs2.current.findIndex((tab) => tab.ariaSelected === "true") : activeTab;
       const nextIndex = getNextIndex(index, tabs2.current.length);
@@ -2010,9 +2007,9 @@ var import_jsx_runtime38 = require("react/jsx-runtime");
 function Tab(props) {
   const { value, ...nativeProps } = props;
   const { active, onTabUpdate, styles } = useTabsContext();
-  const [isPending, startTransition] = (0, import_react14.useTransition)();
+  const [isPending, startTransition] = (0, import_react15.useTransition)();
   const { ref } = useTabsKeyboardNavigation();
-  const isActive = (0, import_react14.useMemo)(() => active === value, [active, value]);
+  const isActive = (0, import_react15.useMemo)(() => active === value, [active, value]);
   function handleClick(e) {
     var _a;
     (_a = props.onClick) == null ? void 0 : _a.call(props, e);
@@ -2063,12 +2060,12 @@ function TabList(props) {
 
 // src/components/TabPanel.tsx
 var import_css32 = require("@cerberus/styled-system/css");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
   const { active, styles } = useTabsContext();
-  const isActive = (0, import_react15.useMemo)(() => active === tab, [active, tab]);
+  const isActive = (0, import_react16.useMemo)(() => active === tab, [active, tab]);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Show, { when: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
@@ -2346,26 +2343,26 @@ function Tooltip(props) {
 }
 
 // src/context/confirm-modal.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_css42 = require("@cerberus/styled-system/css");
 var import_patterns16 = require("@cerberus/styled-system/patterns");
 
 // src/hooks/useModal.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useModal() {
-  const modalRef = (0, import_react16.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-  const show = (0, import_react16.useCallback)(() => {
+  const modalRef = (0, import_react17.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const show = (0, import_react17.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
     setIsOpen(true);
   }, []);
-  const close = (0, import_react16.useCallback)(() => {
+  const close = (0, import_react17.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
     setIsOpen(false);
   }, []);
-  return (0, import_react16.useMemo)(() => {
+  return (0, import_react17.useMemo)(() => {
     return {
       modalRef,
       show,
@@ -2378,19 +2375,19 @@ function useModal() {
 // src/context/confirm-modal.tsx
 var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react17.createContext)(null);
+var ConfirmModalContext = (0, import_react18.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react17.useRef)(null);
-  const [content, setContent] = (0, import_react17.useState)(null);
+  const resolveRef = (0, import_react18.useRef)(null);
+  const [content, setContent] = (0, import_react18.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const ConfirmIcon = $cerberusIcons.confirmModal;
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
-  const palette = (0, import_react17.useMemo)(
+  const palette = (0, import_react18.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react17.useCallback)(
+  const handleChoice = (0, import_react18.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -2402,7 +2399,7 @@ function ConfirmModal(props) {
     },
     [close]
   );
-  const handleShow = (0, import_react17.useCallback)(
+  const handleShow = (0, import_react18.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -2412,7 +2409,7 @@ function ConfirmModal(props) {
     },
     [show]
   );
-  const value = (0, import_react17.useMemo)(
+  const value = (0, import_react18.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2491,7 +2488,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react17.useContext)(ConfirmModalContext);
+  const context = (0, import_react18.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"
@@ -2501,21 +2498,21 @@ function useConfirmModal() {
 }
 
 // src/context/cta-modal.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx2 = require("@cerberus/styled-system/jsx");
 var import_css43 = require("@cerberus/styled-system/css");
 var import_jsx3 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime51 = require("react/jsx-runtime");
-var CTAModalContext = (0, import_react18.createContext)(null);
+var CTAModalContext = (0, import_react19.createContext)(null);
 function CTAModal(props) {
   var _a, _b;
   const { modalRef, show, close } = useModal();
-  const [content, setContent] = (0, import_react18.useState)(null);
+  const [content, setContent] = (0, import_react19.useState)(null);
   const focusTrap = trapFocus(modalRef);
   const FallbackIcon = $cerberusIcons.confirmModal;
   const confirmIcon = content == null ? void 0 : content.icon;
   const { close: CloseIcon } = $cerberusIcons;
-  const handleShow = (0, import_react18.useCallback)(
+  const handleShow = (0, import_react19.useCallback)(
     (options) => {
       const maxActions = 2;
       if (options.actions.length > maxActions) {
@@ -2528,7 +2525,7 @@ function CTAModal(props) {
     },
     [show]
   );
-  const handleActionClick = (0, import_react18.useCallback)(
+  const handleActionClick = (0, import_react19.useCallback)(
     (event) => {
       const index = event.currentTarget.getAttribute("data-index");
       const action = content == null ? void 0 : content.actions[Number(index)];
@@ -2539,7 +2536,7 @@ function CTAModal(props) {
     },
     [content, close]
   );
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react19.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2601,7 +2598,7 @@ function CTAModal(props) {
   ] });
 }
 function useCTAModal() {
-  const context = (0, import_react18.useContext)(CTAModalContext);
+  const context = (0, import_react19.useContext)(CTAModalContext);
   if (context === null) {
     throw new Error("useCTAModal must be used within a CTAModal Provider");
   }
@@ -2609,22 +2606,22 @@ function useCTAModal() {
 }
 
 // src/context/notification-center.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_patterns17 = require("@cerberus/styled-system/patterns");
 var import_recipes34 = require("@cerberus/styled-system/recipes");
 var import_css44 = require("@cerberus/styled-system/css");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var NotificationsContext = (0, import_react19.createContext)(null);
+var NotificationsContext = (0, import_react20.createContext)(null);
 function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = (0, import_react19.useState)([]);
+  const [activeNotifications, setActiveNotifications] = (0, import_react20.useState)([]);
   const styles = (0, import_recipes34.notification)();
-  const handleNotify = (0, import_react19.useCallback)((options) => {
+  const handleNotify = (0, import_react20.useCallback)((options) => {
     setActiveNotifications((prev) => {
       const id = `${options.palette}:${prev.length + 1}`;
       return [...prev, { ...options, id }];
     });
   }, []);
-  const handleClose = (0, import_react19.useCallback)((e) => {
+  const handleClose = (0, import_react20.useCallback)((e) => {
     const target = e.currentTarget;
     setActiveNotifications((prev) => {
       const item = prev.find((option) => option.id === target.value);
@@ -2632,7 +2629,7 @@ function NotificationCenter(props) {
       return prev.filter((option) => option.id !== target.value);
     });
   }, []);
-  const handleCloseAll = (0, import_react19.useCallback)(() => {
+  const handleCloseAll = (0, import_react20.useCallback)(() => {
     setActiveNotifications((prev) => {
       prev.forEach((item) => {
         if (item.onClose) item.onClose();
@@ -2640,7 +2637,7 @@ function NotificationCenter(props) {
       return [];
     });
   }, []);
-  const value = (0, import_react19.useMemo)(
+  const value = (0, import_react20.useMemo)(
     () => ({
       notify: handleNotify
     }),
@@ -2731,7 +2728,7 @@ function MatchNotification(props) {
   }
 }
 function useNotificationCenter() {
-  const context = (0, import_react19.useContext)(NotificationsContext);
+  const context = (0, import_react20.useContext)(NotificationsContext);
   if (!context) {
     throw new Error(
       "useNotificationCenter must be used within a NotificationsProvider"
@@ -2741,33 +2738,33 @@ function useNotificationCenter() {
 }
 
 // src/context/prompt-modal.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_css45 = require("@cerberus/styled-system/css");
 var import_patterns18 = require("@cerberus/styled-system/patterns");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react20.createContext)(null);
+var PromptModalContext = (0, import_react21.createContext)(null);
 function PromptModal(props) {
   const { modalRef, show, close } = useModal();
-  const resolveRef = (0, import_react20.useRef)(null);
-  const [content, setContent] = (0, import_react20.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react20.useState)("");
+  const resolveRef = (0, import_react21.useRef)(null);
+  const [content, setContent] = (0, import_react21.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react21.useState)("");
   const focusTrap = trapFocus(modalRef);
   const PromptIcon = $cerberusIcons.promptModal;
-  const isValid = (0, import_react20.useMemo)(
+  const isValid = (0, import_react21.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react20.useMemo)(
+  const palette = (0, import_react21.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react20.useCallback)(
+  const handleChange = (0, import_react21.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react20.useCallback)(
+  const handleChoice = (0, import_react21.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -2778,7 +2775,7 @@ function PromptModal(props) {
     },
     [inputValue, close]
   );
-  const handleShow = (0, import_react20.useCallback)(
+  const handleShow = (0, import_react21.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -2788,7 +2785,7 @@ function PromptModal(props) {
     },
     [show]
   );
-  const value = (0, import_react20.useMemo)(
+  const value = (0, import_react21.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -2922,7 +2919,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react20.useContext)(PromptModalContext);
+  const context = (0, import_react21.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }
@@ -2930,50 +2927,50 @@ function usePromptModal() {
 }
 
 // src/context/theme.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/hooks/useTheme.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var THEME_KEY = "cerberus-theme";
 var MODE_KEY = "cerberus-mode";
 function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
   const { updateMode, updateTheme, cache } = options;
-  const [theme, setTheme] = (0, import_react21.useState)(defaultTheme);
-  const [colorMode, setColorMode] = (0, import_react21.useState)(defaultColorMode);
-  const handleThemeChange = (0, import_react21.useCallback)(
+  const [theme, setTheme] = (0, import_react22.useState)(defaultTheme);
+  const [colorMode, setColorMode] = (0, import_react22.useState)(defaultColorMode);
+  const handleThemeChange = (0, import_react22.useCallback)(
     (newTheme) => {
       setTheme(newTheme);
       updateTheme == null ? void 0 : updateTheme(newTheme);
     },
     [updateTheme]
   );
-  const handleColorModeChange = (0, import_react21.useCallback)(
+  const handleColorModeChange = (0, import_react22.useCallback)(
     (newMode) => {
       setColorMode(newMode);
       updateMode == null ? void 0 : updateMode(newMode);
     },
     [updateMode]
   );
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const theme2 = localStorage.getItem(THEME_KEY);
     if (theme2) {
       setTheme(theme2);
     }
   }, []);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react22.useLayoutEffect)(() => {
     const mode = localStorage.getItem(MODE_KEY);
     if (mode) {
       setColorMode(mode);
     }
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const root = document.documentElement;
     root.dataset.pandaTheme = theme;
     if (cache) {
       localStorage.setItem(THEME_KEY, theme);
     }
   }, [theme, cache]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const root = document.documentElement;
     if (colorMode === "system") {
       root.dataset.colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2984,7 +2981,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
       localStorage.setItem(MODE_KEY, colorMode);
     }
   }, [colorMode, cache]);
-  return (0, import_react21.useMemo)(
+  return (0, import_react22.useMemo)(
     () => ({
       theme,
       mode: colorMode,
@@ -2997,7 +2994,7 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
 
 // src/context/theme.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react22.createContext)(
+var ThemeContext = (0, import_react23.createContext)(
   null
 );
 function ThemeProvider(props) {
@@ -3009,7 +3006,7 @@ function ThemeProvider(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ThemeContext.Provider, { value: state, children: props.children });
 }
 function useThemeContext() {
-  const context = (0, import_react22.useContext)(ThemeContext);
+  const context = (0, import_react23.useContext)(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -3017,13 +3014,13 @@ function useThemeContext() {
 }
 
 // src/hooks/useDate.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function useDate(options) {
   const initialValue = (options == null ? void 0 : options.initialValue) ?? "";
   const format = (options == null ? void 0 : options.format) ?? DateFormats.USMilitary;
   const onChange = options == null ? void 0 : options.onChange;
-  const [value, setValue] = (0, import_react23.useState)(initialValue);
-  const handleChange = (0, import_react23.useCallback)(
+  const [value, setValue] = (0, import_react24.useState)(initialValue);
+  const handleChange = (0, import_react24.useCallback)(
     (e) => {
       const newValue = formatMilitaryDate(e.currentTarget.value);
       if (onChange) onChange(e);
@@ -3031,7 +3028,7 @@ function useDate(options) {
     },
     [onChange]
   );
-  return (0, import_react23.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({
       format,
       value,
@@ -3104,11 +3101,11 @@ var MONTHS = [
 ];
 
 // src/hooks/useToggle.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useToggle(options) {
-  const [checked, setChecked] = (0, import_react24.useState)((options == null ? void 0 : options.checked) ?? "");
+  const [checked, setChecked] = (0, import_react25.useState)((options == null ? void 0 : options.checked) ?? "");
   const onChange = options == null ? void 0 : options.onChange;
-  const handleChange = (0, import_react24.useCallback)(
+  const handleChange = (0, import_react25.useCallback)(
     (e) => {
       const target = e.currentTarget;
       setChecked((prev) => {
@@ -3118,24 +3115,39 @@ function useToggle(options) {
     },
     [onChange]
   );
-  return (0, import_react24.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
+  return (0, import_react25.useMemo)(() => ({ checked, handleChange }), [checked, handleChange]);
 }
 
 // src/hooks/useRootColors.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useRootColors(colors = []) {
-  const [state, dispatch] = (0, import_react25.useReducer)(rootColorsReducer, {});
-  (0, import_react25.useEffect)(() => {
+  const [state, dispatch] = (0, import_react26.useReducer)(rootColorsReducer, {});
+  const handleRefetch = (0, import_react26.useCallback)(() => {
+    return new Promise((resolve) => {
+      dispatch(formatColors(colors));
+      resolve();
+    });
+  }, []);
+  (0, import_react26.useEffect)(() => {
     if (Object.keys(state).length === colors.length) return;
-    const rootStyles = getComputedStyle(document.body);
-    const rootColors = colors.reduce((acc, color) => {
+    dispatch(formatColors(colors));
+    console.log("updating colors in root hook");
+  }, [colors]);
+  return (0, import_react26.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;
-    }, {});
-    dispatch(rootColors);
-  }, [colors]);
-  return state;
+    },
+    {}
+  );
 }
 function rootColorsReducer(state, action) {
   return { ...state, ...action };