@cerberus-design/react 1.8.0 → 1.8.1-next.1787328771932.4470fe2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/admonition/match-avatar.cjs +20 -28
  2. package/dist/components/admonition/match-avatar.js +21 -29
  3. package/dist/components/button/button.cjs +4 -3
  4. package/dist/components/button/button.js +5 -4
  5. package/dist/hooks/useTheme.cjs +8 -10
  6. package/dist/hooks/useTheme.js +9 -11
  7. package/dist/panda.buildinfo.json +4 -4
  8. package/package.json +7 -7
package/dist/components/admonition/match-avatar.cjs CHANGED
@@ -2,41 +2,33 @@
2
2
  "use client";
3
3
  const require_cerberus = require("../../context/cerberus.cjs");
4
4
  const require_avatar = require("../avatar/avatar.cjs");
5
- let react = require("react");
6
5
  let react_jsx_runtime = require("react/jsx-runtime");
7
6
  //#region src/components/admonition/match-avatar.tsx
8
7
  function MatchAvatar(props) {
9
8
  const { palette = "page" } = props;
10
9
  const { icons } = require_cerberus.useCerberusContext();
11
10
  const { infoNotification: InfoIcon, successNotification: SuccessIcon, warningNotification: WarningIcon, dangerNotification: DangerIcon } = icons;
12
- const elRef = (0, react.useRef)({
13
- page: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
14
- gradient: "charon-light",
15
- fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoIcon, {}),
16
- size: "sm"
17
- }),
18
- info: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
19
- gradient: "amphiaraus-dark",
20
- fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoIcon, {}),
21
- size: "sm"
22
- }),
23
- success: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
24
- gradient: "thanatos-dark",
25
- fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuccessIcon, {}),
26
- size: "sm"
27
- }),
28
- warning: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
29
- gradient: "asphodel-light",
30
- fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WarningIcon, {}),
31
- size: "sm"
32
- }),
33
- danger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
34
- gradient: "hades-light",
35
- fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DangerIcon, {}),
36
- size: "sm"
37
- })
11
+ const ICON_MAP = {
12
+ page: InfoIcon,
13
+ info: InfoIcon,
14
+ success: SuccessIcon,
15
+ warning: WarningIcon,
16
+ danger: DangerIcon
17
+ };
18
+ const gradient = GRADIENT_MAP[palette];
19
+ const Fallback = ICON_MAP[palette];
20
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
21
+ gradient,
22
+ fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, {}),
23
+ size: "sm"
38
24
  });
39
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: elRef.current[palette] });
40
25
  }
26
+ var GRADIENT_MAP = {
27
+ page: "charon-light",
28
+ info: "amphiaraus-dark",
29
+ success: "thanatos-dark",
30
+ warning: "asphodel-light",
31
+ danger: "hades-light"
32
+ };
41
33
  //#endregion
42
34
  exports.MatchAvatar = MatchAvatar;
package/dist/components/admonition/match-avatar.js CHANGED
@@ -2,41 +2,33 @@
2
2
  "use client";
3
3
  import { useCerberusContext } from "../../context/cerberus.js";
4
4
  import { Avatar } from "../avatar/avatar.js";
5
- import { useRef } from "react";
6
- import { Fragment, jsx } from "react/jsx-runtime";
5
+ import { jsx } from "react/jsx-runtime";
7
6
  //#region src/components/admonition/match-avatar.tsx
8
7
  function MatchAvatar(props) {
9
8
  const { palette = "page" } = props;
10
9
  const { icons } = useCerberusContext();
11
10
  const { infoNotification: InfoIcon, successNotification: SuccessIcon, warningNotification: WarningIcon, dangerNotification: DangerIcon } = icons;
12
- const elRef = useRef({
13
- page: /* @__PURE__ */ jsx(Avatar, {
14
- gradient: "charon-light",
15
- fallback: /* @__PURE__ */ jsx(InfoIcon, {}),
16
- size: "sm"
17
- }),
18
- info: /* @__PURE__ */ jsx(Avatar, {
19
- gradient: "amphiaraus-dark",
20
- fallback: /* @__PURE__ */ jsx(InfoIcon, {}),
21
- size: "sm"
22
- }),
23
- success: /* @__PURE__ */ jsx(Avatar, {
24
- gradient: "thanatos-dark",
25
- fallback: /* @__PURE__ */ jsx(SuccessIcon, {}),
26
- size: "sm"
27
- }),
28
- warning: /* @__PURE__ */ jsx(Avatar, {
29
- gradient: "asphodel-light",
30
- fallback: /* @__PURE__ */ jsx(WarningIcon, {}),
31
- size: "sm"
32
- }),
33
- danger: /* @__PURE__ */ jsx(Avatar, {
34
- gradient: "hades-light",
35
- fallback: /* @__PURE__ */ jsx(DangerIcon, {}),
36
- size: "sm"
37
- })
11
+ const ICON_MAP = {
12
+ page: InfoIcon,
13
+ info: InfoIcon,
14
+ success: SuccessIcon,
15
+ warning: WarningIcon,
16
+ danger: DangerIcon
17
+ };
18
+ const gradient = GRADIENT_MAP[palette];
19
+ const Fallback = ICON_MAP[palette];
20
+ return /* @__PURE__ */ jsx(Avatar, {
21
+ gradient,
22
+ fallback: /* @__PURE__ */ jsx(Fallback, {}),
23
+ size: "sm"
38
24
  });
39
- return /* @__PURE__ */ jsx(Fragment, { children: elRef.current[palette] });
40
25
  }
26
+ var GRADIENT_MAP = {
27
+ page: "charon-light",
28
+ info: "amphiaraus-dark",
29
+ success: "thanatos-dark",
30
+ warning: "asphodel-light",
31
+ danger: "hades-light"
32
+ };
41
33
  //#endregion
42
34
  export { MatchAvatar };
package/dist/components/button/button.cjs CHANGED
@@ -17,7 +17,7 @@ function ButtonEl(props) {
17
17
  const [variantProps, elProps] = styled_system_recipes.button.splitVariantProps(props);
18
18
  const { pending = false, ...nativeProps } = elProps;
19
19
  const styles = (0, styled_system_recipes.button)(variantProps);
20
- const value = (0, react.useMemo)(() => ({ pending }), [pending]);
20
+ const value = { pending };
21
21
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonContext.Provider, {
22
22
  value,
23
23
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.cerberus.button, {
@@ -34,14 +34,15 @@ function ButtonEl(props) {
34
34
  * a loading spinner.
35
35
  */
36
36
  function ButtonIcon(props) {
37
+ const { children, ref } = props;
37
38
  const { pending } = (0, react.useContext)(ButtonContext);
38
39
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
39
40
  when: pending,
40
- fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.children }),
41
+ fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children }),
41
42
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
42
43
  "data-scope": "button",
43
44
  "data-part": "button-spinner",
44
- ref: props.ref,
45
+ ref,
45
46
  w: "4",
46
47
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, {})
47
48
  })
package/dist/components/button/button.js CHANGED
@@ -3,7 +3,7 @@ import { cerberus } from "../../system/index.js";
3
3
  import { Show } from "../show/show.js";
4
4
  import { Spinner } from "../spinner/spinner.js";
5
5
  import { button } from "styled-system/recipes";
6
- import { createContext, useContext, useMemo } from "react";
6
+ import { createContext, useContext } from "react";
7
7
  import { css, cx } from "styled-system/css";
8
8
  import { Fragment, jsx } from "react/jsx-runtime";
9
9
  import { Box } from "styled-system/jsx";
@@ -17,7 +17,7 @@ function ButtonEl(props) {
17
17
  const [variantProps, elProps] = button.splitVariantProps(props);
18
18
  const { pending = false, ...nativeProps } = elProps;
19
19
  const styles = button(variantProps);
20
- const value = useMemo(() => ({ pending }), [pending]);
20
+ const value = { pending };
21
21
  return /* @__PURE__ */ jsx(ButtonContext.Provider, {
22
22
  value,
23
23
  children: /* @__PURE__ */ jsx(cerberus.button, {
@@ -34,14 +34,15 @@ function ButtonEl(props) {
34
34
  * a loading spinner.
35
35
  */
36
36
  function ButtonIcon(props) {
37
+ const { children, ref } = props;
37
38
  const { pending } = useContext(ButtonContext);
38
39
  return /* @__PURE__ */ jsx(Show, {
39
40
  when: pending,
40
- fallback: /* @__PURE__ */ jsx(Fragment, { children: props.children }),
41
+ fallback: /* @__PURE__ */ jsx(Fragment, { children }),
41
42
  children: /* @__PURE__ */ jsx(Box, {
42
43
  "data-scope": "button",
43
44
  "data-part": "button-spinner",
44
- ref: props.ref,
45
+ ref,
45
46
  w: "4",
46
47
  children: /* @__PURE__ */ jsx(Spinner, {})
47
48
  })
package/dist/hooks/useTheme.cjs CHANGED
@@ -17,8 +17,14 @@ var MODE_KEY = "cerberus-mode";
17
17
  */
18
18
  function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
19
19
  const { updateMode, updateTheme, cache } = options;
20
- const [theme, setTheme] = (0, react.useState)(defaultTheme);
21
- const [colorMode, setColorMode] = (0, react.useState)(defaultColorMode);
20
+ const [theme, setTheme] = (0, react.useState)(() => {
21
+ if (typeof window === "undefined") return defaultTheme;
22
+ return localStorage.getItem("cerberus-theme") ?? defaultTheme;
23
+ });
24
+ const [colorMode, setColorMode] = (0, react.useState)(() => {
25
+ if (typeof window === "undefined") return defaultColorMode;
26
+ return localStorage.getItem("cerberus-mode") ?? defaultColorMode;
27
+ });
22
28
  const handleThemeChange = (0, react.useCallback)((newTheme) => {
23
29
  setTheme(newTheme);
24
30
  updateTheme?.(newTheme);
@@ -27,14 +33,6 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
27
33
  setColorMode(newMode);
28
34
  updateMode?.(newMode);
29
35
  }, [updateMode]);
30
- (0, react.useLayoutEffect)(() => {
31
- const theme = localStorage.getItem(THEME_KEY);
32
- if (theme) setTheme(theme);
33
- }, []);
34
- (0, react.useLayoutEffect)(() => {
35
- const mode = localStorage.getItem(MODE_KEY);
36
- if (mode) setColorMode(mode);
37
- }, []);
38
36
  (0, react.useEffect)(() => {
39
37
  const root = document.documentElement;
40
38
  root.dataset.pandaTheme = theme;
package/dist/hooks/useTheme.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  "use client";
3
- import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
3
+ import { useCallback, useEffect, useMemo, useState } from "react";
4
4
  //#region src/hooks/useTheme.ts
5
5
  /**
6
6
  * This module provides a hook for using the theme.
@@ -17,8 +17,14 @@ var MODE_KEY = "cerberus-mode";
17
17
  */
18
18
  function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options = {}) {
19
19
  const { updateMode, updateTheme, cache } = options;
20
- const [theme, setTheme] = useState(defaultTheme);
21
- const [colorMode, setColorMode] = useState(defaultColorMode);
20
+ const [theme, setTheme] = useState(() => {
21
+ if (typeof window === "undefined") return defaultTheme;
22
+ return localStorage.getItem("cerberus-theme") ?? defaultTheme;
23
+ });
24
+ const [colorMode, setColorMode] = useState(() => {
25
+ if (typeof window === "undefined") return defaultColorMode;
26
+ return localStorage.getItem("cerberus-mode") ?? defaultColorMode;
27
+ });
22
28
  const handleThemeChange = useCallback((newTheme) => {
23
29
  setTheme(newTheme);
24
30
  updateTheme?.(newTheme);
@@ -27,14 +33,6 @@ function useTheme(defaultTheme = "cerberus", defaultColorMode = "light", options
27
33
  setColorMode(newMode);
28
34
  updateMode?.(newMode);
29
35
  }, [updateMode]);
30
- useLayoutEffect(() => {
31
- const theme = localStorage.getItem(THEME_KEY);
32
- if (theme) setTheme(theme);
33
- }, []);
34
- useLayoutEffect(() => {
35
- const mode = localStorage.getItem(MODE_KEY);
36
- if (mode) setColorMode(mode);
37
- }, []);
38
36
  useEffect(() => {
39
37
  const root = document.documentElement;
40
38
  root.dataset.pandaTheme = theme;
package/dist/panda.buildinfo.json CHANGED
@@ -120,18 +120,18 @@
120
120
  "shape]___[value:circle]___[recipe:avatar",
121
121
  "gradient]___[value:hades-dark]___[recipe:avatar",
122
122
  "size]___[value:sm]___[recipe:avatar",
123
- "gradient]___[value:amphiaraus-dark]___[recipe:avatar",
124
- "gradient]___[value:thanatos-dark]___[recipe:avatar",
125
- "gradient]___[value:asphodel-light]___[recipe:avatar",
126
- "gradient]___[value:hades-light]___[recipe:avatar",
127
123
  "gradient]___[value:none]___[recipe:avatar",
128
124
  "gradient]___[value:charon-dark]___[recipe:avatar",
129
125
  "gradient]___[value:nyx-light]___[recipe:avatar",
130
126
  "gradient]___[value:nyx-dark]___[recipe:avatar",
131
127
  "gradient]___[value:amphiaraus-light]___[recipe:avatar",
128
+ "gradient]___[value:amphiaraus-dark]___[recipe:avatar",
132
129
  "gradient]___[value:styx-light]___[recipe:avatar",
133
130
  "gradient]___[value:styx-dark]___[recipe:avatar",
134
131
  "gradient]___[value:thanatos-light]___[recipe:avatar",
132
+ "gradient]___[value:thanatos-dark]___[recipe:avatar",
133
+ "gradient]___[value:hades-light]___[recipe:avatar",
134
+ "gradient]___[value:asphodel-light]___[recipe:avatar",
135
135
  "gradient]___[value:asphodel-dark]___[recipe:avatar",
136
136
  "size]___[value:xs]___[recipe:avatar",
137
137
  "size]___[value:lg]___[recipe:avatar",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cerberus-design/react",
3
- "version": "1.8.0",
3
+ "version": "1.8.1-next.1787328771932.4470fe2",
4
4
  "description": "The Cerberus Design React component library.",
5
5
  "keywords": [
6
6
  "css",
@@ -32,21 +32,21 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@ark-ui/react": "^5.37.2",
35
- "@carbon/icons-react": "^11.85.0"
35
+ "@carbon/icons-react": "^11.86.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@internationalized/date": "^3.12.2",
38
+ "@internationalized/date": "^3.12.3",
39
39
  "@pandacss/dev": "^1.12.0",
40
40
  "@types/react": "^19.2.18",
41
41
  "@types/react-dom": "^19.2.4",
42
42
  "@typescript/typescript6": "^6.0.0",
43
43
  "@vitejs/plugin-react": "^6.0.5",
44
- "globby": "^16.2.2",
45
- "react": "^19.2.7",
46
- "react-dom": "^19.2.7",
44
+ "globby": "^16.2.4",
45
+ "react": "^19.2.8",
46
+ "react-dom": "^19.2.8",
47
47
  "vite": "^8.2.1",
48
48
  "vite-plugin-dts": "^5.0.2",
49
- "@cerberus/panda-preset": "1.8.0",
49
+ "@cerberus/panda-preset": "1.8.1-next.1787328771932.4470fe2",
50
50
  "styled-system": "0.0.0"
51
51
  },
52
52
  "peerDependencies": {