@cerberus-design/react 1.7.0 → 1.7.1

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 +3 -2
  2. package/dist/components/admonition/match-avatar.js +3 -2
  3. package/dist/components/feature-flag/feature-flag.cjs +2 -1
  4. package/dist/components/feature-flag/feature-flag.js +2 -1
  5. package/dist/panda.buildinfo.json +1 -1
  6. package/dist/system/primitive-factory.cjs +51 -84
  7. package/dist/system/primitive-factory.js +51 -84
  8. package/package.json +8 -8
package/dist/components/admonition/match-avatar.cjs CHANGED
@@ -9,7 +9,7 @@ function MatchAvatar(props) {
9
9
  const { palette = "page" } = props;
10
10
  const { icons } = require_cerberus.useCerberusContext();
11
11
  const { infoNotification: InfoIcon, successNotification: SuccessIcon, warningNotification: WarningIcon, dangerNotification: DangerIcon } = icons;
12
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, react.useRef)({
12
+ const elRef = (0, react.useRef)({
13
13
  page: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
14
14
  gradient: "charon-light",
15
15
  fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InfoIcon, {}),
@@ -35,7 +35,8 @@ function MatchAvatar(props) {
35
35
  fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DangerIcon, {}),
36
36
  size: "sm"
37
37
  })
38
- }).current[palette] });
38
+ });
39
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: elRef.current[palette] });
39
40
  }
40
41
  //#endregion
41
42
  exports.MatchAvatar = MatchAvatar;
package/dist/components/admonition/match-avatar.js CHANGED
@@ -9,7 +9,7 @@ function MatchAvatar(props) {
9
9
  const { palette = "page" } = props;
10
10
  const { icons } = useCerberusContext();
11
11
  const { infoNotification: InfoIcon, successNotification: SuccessIcon, warningNotification: WarningIcon, dangerNotification: DangerIcon } = icons;
12
- return /* @__PURE__ */ jsx(Fragment, { children: useRef({
12
+ const elRef = useRef({
13
13
  page: /* @__PURE__ */ jsx(Avatar, {
14
14
  gradient: "charon-light",
15
15
  fallback: /* @__PURE__ */ jsx(InfoIcon, {}),
@@ -35,7 +35,8 @@ function MatchAvatar(props) {
35
35
  fallback: /* @__PURE__ */ jsx(DangerIcon, {}),
36
36
  size: "sm"
37
37
  })
38
- }).current[palette] });
38
+ });
39
+ return /* @__PURE__ */ jsx(Fragment, { children: elRef.current[palette] });
39
40
  }
40
41
  //#endregion
41
42
  export { MatchAvatar };
package/dist/components/feature-flag/feature-flag.cjs CHANGED
@@ -8,8 +8,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
8
8
  * @see https://cerberus.digitalu.design/react/feature-flags
9
9
  */
10
10
  function FeatureFlag(props) {
11
+ const showContent = require_feature_flags.useFeatureFlags(props.flag);
11
12
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
12
- when: require_feature_flags.useFeatureFlags(props.flag),
13
+ when: showContent,
13
14
  children: props.children
14
15
  });
15
16
  }
package/dist/components/feature-flag/feature-flag.js CHANGED
@@ -8,8 +8,9 @@ import { jsx } from "react/jsx-runtime";
8
8
  * @see https://cerberus.digitalu.design/react/feature-flags
9
9
  */
10
10
  function FeatureFlag(props) {
11
+ const showContent = useFeatureFlags(props.flag);
11
12
  return /* @__PURE__ */ jsx(Show, {
12
- when: useFeatureFlags(props.flag),
13
+ when: showContent,
13
14
  children: props.children
14
15
  });
15
16
  }
package/dist/panda.buildinfo.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "schemaVersion": "1.11.5",
2
+ "schemaVersion": "1.12.0",
3
3
  "styles": {
4
4
  "atomic": [
5
5
  "display]___[value:flex",
package/dist/system/primitive-factory.cjs CHANGED
@@ -9,8 +9,58 @@ let react_jsx_runtime = require("react/jsx-runtime");
9
9
  * @module @cerberus/core/system/factory
10
10
  */
11
11
  var CerberusPrimitive = class {
12
- recipe;
13
12
  constructor(recipe) {
13
+ this.withNoRecipe = (Component, options) => {
14
+ const { defaultProps } = options || {};
15
+ const El = this.setupStyledComponent(Component);
16
+ const CerbComponent = (0, react.forwardRef)((props, ref) => {
17
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
18
+ ...defaultProps,
19
+ ...props,
20
+ ref
21
+ });
22
+ });
23
+ CerbComponent.displayName = `Cerberus.${typeof El === "string" ? El : El.displayName || El.name}`;
24
+ return CerbComponent;
25
+ };
26
+ this.withRecipe = (Component, options) => {
27
+ const { defaultProps } = options || {};
28
+ const El = this.setupStyledComponent(Component);
29
+ const recipe = this.recipe;
30
+ const CerbComponent = (0, react.forwardRef)((internalProps, ref) => {
31
+ const { css: customCss, ...restOfInternalProps } = internalProps;
32
+ const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
33
+ const recipeStyles = recipe(variantOptions);
34
+ const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
35
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
36
+ ...defaultProps,
37
+ ...nativeProps,
38
+ ref,
39
+ className: (0, styled_system_css.cx)(className, recipeStyles, (0, styled_system_css.css)(customCss))
40
+ });
41
+ });
42
+ CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
43
+ return CerbComponent;
44
+ };
45
+ this.withSlotRecipe = (Component, slot, options) => {
46
+ const { defaultProps } = options || {};
47
+ const El = this.setupStyledComponent(Component);
48
+ const recipe = this.recipe;
49
+ const CerbComponent = (0, react.forwardRef)((internalProps, ref) => {
50
+ const { css: customCss, ...restOfInternalProps } = internalProps;
51
+ const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
52
+ const slotStyles = recipe(variantOptions)[slot];
53
+ const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
54
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
55
+ ...defaultProps,
56
+ ...nativeProps,
57
+ ref,
58
+ className: (0, styled_system_css.cx)(className, slotStyles, (0, styled_system_css.css)(customCss))
59
+ });
60
+ });
61
+ CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
62
+ return CerbComponent;
63
+ };
14
64
  this.recipe = recipe ?? null;
15
65
  }
16
66
  setupStyledComponent(component) {
@@ -19,89 +69,6 @@ var CerberusPrimitive = class {
19
69
  if (arkComponent) return (0, styled_system_jsx_factory.cerberus)(arkComponent);
20
70
  throw new Error(`Unknown component: ${component}`);
21
71
  }
22
- /**
23
- * Creates a Cerberus component with bare features and no recipe.
24
- * @param Component - The React component to enhance with Cerberus features.
25
- * Can be a string or a component reference.
26
- * @returns A new React component that applies Cerberus features to the
27
- * original component.
28
- *
29
- * @example
30
- * ```ts
31
- * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
32
- * const Button = withNoRecipe('button')
33
- * ```
34
- */
35
- withNoRecipe = (Component, options) => {
36
- const { defaultProps } = options || {};
37
- const El = this.setupStyledComponent(Component);
38
- const CerbComponent = (0, react.forwardRef)((props, ref) => {
39
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
40
- ...defaultProps,
41
- ...props,
42
- ref
43
- });
44
- });
45
- CerbComponent.displayName = `Cerberus.${typeof El === "string" ? El : El.displayName || El.name}`;
46
- return CerbComponent;
47
- };
48
- /**
49
- * Creates a Cerberus component with the given recipe.
50
- * @param Component - The React component to enhance with the recipe.
51
- * @param options - Options for the recipe.
52
- * @returns A new React component that applies the recipe to the original
53
- * component.
54
- */
55
- withRecipe = (Component, options) => {
56
- const { defaultProps } = options || {};
57
- const El = this.setupStyledComponent(Component);
58
- const recipe = this.recipe;
59
- const CerbComponent = (0, react.forwardRef)((internalProps, ref) => {
60
- const { css: customCss, ...restOfInternalProps } = internalProps;
61
- const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
62
- const recipeStyles = recipe(variantOptions);
63
- const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
64
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
65
- ...defaultProps,
66
- ...nativeProps,
67
- ref,
68
- className: (0, styled_system_css.cx)(className, recipeStyles, (0, styled_system_css.css)(customCss))
69
- });
70
- });
71
- CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
72
- return CerbComponent;
73
- };
74
- /**
75
- * Creates a Cerberus component with a slot recipe applied.
76
- * @param Component - The React component to enhance with Cerberus features.
77
- * @param recipe - The slot recipe to apply to the component.
78
- * @returns A new React component that applies Cerberus features and the
79
- * specified slot recipe to the original component.
80
- * @example
81
- * ```typescript
82
- * const { withSlotRecipe } = createCerberusPrimitive(field)
83
- * const Field = withSlotRecipe(RawField, field)
84
- * ```
85
- */
86
- withSlotRecipe = (Component, slot, options) => {
87
- const { defaultProps } = options || {};
88
- const El = this.setupStyledComponent(Component);
89
- const recipe = this.recipe;
90
- const CerbComponent = (0, react.forwardRef)((internalProps, ref) => {
91
- const { css: customCss, ...restOfInternalProps } = internalProps;
92
- const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
93
- const slotStyles = recipe(variantOptions)[slot];
94
- const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
95
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(El, {
96
- ...defaultProps,
97
- ...nativeProps,
98
- ref,
99
- className: (0, styled_system_css.cx)(className, slotStyles, (0, styled_system_css.css)(customCss))
100
- });
101
- });
102
- CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
103
- return CerbComponent;
104
- };
105
72
  };
106
73
  //#endregion
107
74
  exports.CerberusPrimitive = CerberusPrimitive;
package/dist/system/primitive-factory.js CHANGED
@@ -9,8 +9,58 @@ import { jsx } from "react/jsx-runtime";
9
9
  * @module @cerberus/core/system/factory
10
10
  */
11
11
  var CerberusPrimitive = class {
12
- recipe;
13
12
  constructor(recipe) {
13
+ this.withNoRecipe = (Component, options) => {
14
+ const { defaultProps } = options || {};
15
+ const El = this.setupStyledComponent(Component);
16
+ const CerbComponent = forwardRef((props, ref) => {
17
+ return /* @__PURE__ */ jsx(El, {
18
+ ...defaultProps,
19
+ ...props,
20
+ ref
21
+ });
22
+ });
23
+ CerbComponent.displayName = `Cerberus.${typeof El === "string" ? El : El.displayName || El.name}`;
24
+ return CerbComponent;
25
+ };
26
+ this.withRecipe = (Component, options) => {
27
+ const { defaultProps } = options || {};
28
+ const El = this.setupStyledComponent(Component);
29
+ const recipe = this.recipe;
30
+ const CerbComponent = forwardRef((internalProps, ref) => {
31
+ const { css: customCss, ...restOfInternalProps } = internalProps;
32
+ const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
33
+ const recipeStyles = recipe(variantOptions);
34
+ const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
35
+ return /* @__PURE__ */ jsx(El, {
36
+ ...defaultProps,
37
+ ...nativeProps,
38
+ ref,
39
+ className: cx(className, recipeStyles, css(customCss))
40
+ });
41
+ });
42
+ CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
43
+ return CerbComponent;
44
+ };
45
+ this.withSlotRecipe = (Component, slot, options) => {
46
+ const { defaultProps } = options || {};
47
+ const El = this.setupStyledComponent(Component);
48
+ const recipe = this.recipe;
49
+ const CerbComponent = forwardRef((internalProps, ref) => {
50
+ const { css: customCss, ...restOfInternalProps } = internalProps;
51
+ const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
52
+ const slotStyles = recipe(variantOptions)[slot];
53
+ const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
54
+ return /* @__PURE__ */ jsx(El, {
55
+ ...defaultProps,
56
+ ...nativeProps,
57
+ ref,
58
+ className: cx(className, slotStyles, css(customCss))
59
+ });
60
+ });
61
+ CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
62
+ return CerbComponent;
63
+ };
14
64
  this.recipe = recipe ?? null;
15
65
  }
16
66
  setupStyledComponent(component) {
@@ -19,89 +69,6 @@ var CerberusPrimitive = class {
19
69
  if (arkComponent) return cerberus(arkComponent);
20
70
  throw new Error(`Unknown component: ${component}`);
21
71
  }
22
- /**
23
- * Creates a Cerberus component with bare features and no recipe.
24
- * @param Component - The React component to enhance with Cerberus features.
25
- * Can be a string or a component reference.
26
- * @returns A new React component that applies Cerberus features to the
27
- * original component.
28
- *
29
- * @example
30
- * ```ts
31
- * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
32
- * const Button = withNoRecipe('button')
33
- * ```
34
- */
35
- withNoRecipe = (Component, options) => {
36
- const { defaultProps } = options || {};
37
- const El = this.setupStyledComponent(Component);
38
- const CerbComponent = forwardRef((props, ref) => {
39
- return /* @__PURE__ */ jsx(El, {
40
- ...defaultProps,
41
- ...props,
42
- ref
43
- });
44
- });
45
- CerbComponent.displayName = `Cerberus.${typeof El === "string" ? El : El.displayName || El.name}`;
46
- return CerbComponent;
47
- };
48
- /**
49
- * Creates a Cerberus component with the given recipe.
50
- * @param Component - The React component to enhance with the recipe.
51
- * @param options - Options for the recipe.
52
- * @returns A new React component that applies the recipe to the original
53
- * component.
54
- */
55
- withRecipe = (Component, options) => {
56
- const { defaultProps } = options || {};
57
- const El = this.setupStyledComponent(Component);
58
- const recipe = this.recipe;
59
- const CerbComponent = forwardRef((internalProps, ref) => {
60
- const { css: customCss, ...restOfInternalProps } = internalProps;
61
- const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
62
- const recipeStyles = recipe(variantOptions);
63
- const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
64
- return /* @__PURE__ */ jsx(El, {
65
- ...defaultProps,
66
- ...nativeProps,
67
- ref,
68
- className: cx(className, recipeStyles, css(customCss))
69
- });
70
- });
71
- CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
72
- return CerbComponent;
73
- };
74
- /**
75
- * Creates a Cerberus component with a slot recipe applied.
76
- * @param Component - The React component to enhance with Cerberus features.
77
- * @param recipe - The slot recipe to apply to the component.
78
- * @returns A new React component that applies Cerberus features and the
79
- * specified slot recipe to the original component.
80
- * @example
81
- * ```typescript
82
- * const { withSlotRecipe } = createCerberusPrimitive(field)
83
- * const Field = withSlotRecipe(RawField, field)
84
- * ```
85
- */
86
- withSlotRecipe = (Component, slot, options) => {
87
- const { defaultProps } = options || {};
88
- const El = this.setupStyledComponent(Component);
89
- const recipe = this.recipe;
90
- const CerbComponent = forwardRef((internalProps, ref) => {
91
- const { css: customCss, ...restOfInternalProps } = internalProps;
92
- const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
93
- const slotStyles = recipe(variantOptions)[slot];
94
- const className = typeof nativeProps.className === "string" ? nativeProps.className : void 0;
95
- return /* @__PURE__ */ jsx(El, {
96
- ...defaultProps,
97
- ...nativeProps,
98
- ref,
99
- className: cx(className, slotStyles, css(customCss))
100
- });
101
- });
102
- CerbComponent.displayName = typeof El === "string" ? El : El.displayName || El.name;
103
- return CerbComponent;
104
- };
105
72
  };
106
73
  //#endregion
107
74
  export { CerberusPrimitive };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cerberus-design/react",
3
- "version": "1.7.0",
3
+ "version": "1.7.1",
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.83.0"
35
+ "@carbon/icons-react": "^11.85.0"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@internationalized/date": "^3.12.2",
39
- "@pandacss/dev": "^1.11.5",
40
- "@types/react": "^19.2.17",
41
- "@types/react-dom": "^19.2.3",
39
+ "@pandacss/dev": "^1.12.0",
40
+ "@types/react": "^19.2.18",
41
+ "@types/react-dom": "^19.2.4",
42
42
  "@typescript/typescript6": "^6.0.0",
43
- "@vitejs/plugin-react": "^6.0.3",
43
+ "@vitejs/plugin-react": "^6.0.5",
44
44
  "globby": "^16.2.2",
45
45
  "react": "^19.2.7",
46
46
  "react-dom": "^19.2.7",
47
- "vite": "^8.0.16",
47
+ "vite": "^8.2.1",
48
48
  "vite-plugin-dts": "^5.0.2",
49
- "@cerberus/panda-preset": "1.7.0",
49
+ "@cerberus/panda-preset": "1.7.1",
50
50
  "styled-system": "0.0.0"
51
51
  },
52
52
  "peerDependencies": {