@gympass/yoga 7.106.1 → 7.107.0

package/cjs/Skeleton/Skeleton.theme.js

@@ -21,7 +21,7 @@ __export(Skeleton_theme_exports, {
   default: () => Skeleton_theme_default
 });
 module.exports = __toCommonJS(Skeleton_theme_exports);
-const Skeleton = ({ lineHeights, radii }) => ({
+const Skeleton = ({ colors, lineHeights, radii }) => ({
   border: {
     circular: radii.circle
   },
@@ -37,6 +37,10 @@ const Skeleton = ({ lineHeights, radii }) => ({
       overline: lineHeights.xsmall,
       exception: lineHeights.xxsmall
     }
+  },
+  background: {
+    primary: colors.elements.backgroundAndDisabled,
+    secondary: colors.elements.lineAndBorders
   }
 });
 var Skeleton_theme_default = Skeleton;

package/cjs/Skeleton/native/Skeleton.js

@@ -74,21 +74,22 @@ const StyledSkeleton = import_styled_components.default.View`
   ${import_yoga_system.heights}
 
    ${({
+  color,
   type,
   variant,
   theme: {
     yoga: {
-      colors,
       components: {
         skeleton: {
           border: { [type]: borderRadius },
-          height: { [type]: { [variant]: height } = {} }
+          height: { [type]: { [variant]: height } = {} },
+          background: { [color]: backgroundColor }
         }
       }
     }
   }
 }) => `
-    background-color: ${colors.elements.backgroundAndDisabled};
+    background-color: ${backgroundColor};
     ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
     ${height ? `height: ${height}px;` : ""}
   `}
@@ -120,6 +121,11 @@ function Skeleton(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Animated.View, { style: { opacity }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeleton, __spreadValues({}, props)) });
 }
 Skeleton.propTypes = {
+  /**
+   * Determines which color will be rendered. It can be
+   * 'primary' or 'secondary'.
+   */
+  color: (0, import_prop_types.oneOf)(["primary", "secondary"]),
   /**
    * Determines which type will be rendered. It can be
    * 'circular', 'rectangular' or 'text'.
@@ -165,6 +171,7 @@ Skeleton.propTypes = {
 };
 Skeleton.defaultProps = {
   variant: void 0,
-  animation: "pulse"
+  animation: "pulse",
+  color: "primary"
 };
 var Skeleton_default = Skeleton;

package/cjs/Skeleton/native/Skeleton.test.js

@@ -60,4 +60,13 @@ describe("<Skeleton />", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+  it("should render all background color variants correctly", () => {
+    const { toJSON } = (0, import_react_native.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { type: "text", variant: "body1", width: "100" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { type: "text", variant: "body1", width: "100", color: "secondary" })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/cjs/Skeleton/web/Skeleton.js

@@ -61,22 +61,23 @@ const StyledSkeleton = import_styled_components.default.div`
   ${import_yoga_system.heights}
 
   ${({
+  color,
   type,
   variant,
   animation = "pulse",
   theme: {
     yoga: {
-      colors,
       components: {
         skeleton: {
           border: { [type]: borderRadius },
-          height: { [type]: { [variant]: height } = {} }
+          height: { [type]: { [variant]: height } = {} },
+          background: { [color]: backgroundColor }
         }
       }
     }
   }
 }) => import_styled_components.css`
-    background-color: ${colors.elements.backgroundAndDisabled};
+    background-color: ${backgroundColor};
     ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
     ${height ? `height: ${height}px;` : ""}
 
@@ -99,6 +100,11 @@ function Skeleton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledSkeleton, __spreadValues({}, props));
 }
 Skeleton.propTypes = {
+  /**
+   * Determines which color will be rendered. It can be
+   * 'primary' or 'secondary'.
+   */
+  color: (0, import_prop_types.oneOf)(["primary", "secondary"]),
   /**
    * Determines which type will be rendered. It can be
    * 'circular', 'rectangular' or 'text'.
@@ -144,6 +150,7 @@ Skeleton.propTypes = {
 };
 Skeleton.defaultProps = {
   variant: void 0,
-  animation: "pulse"
+  animation: "pulse",
+  color: "primary"
 };
 var Skeleton_default = Skeleton;

package/cjs/Skeleton/web/Skeleton.test.js

@@ -60,4 +60,13 @@ describe("<Skeleton />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should render all background color variants correctly", () => {
+    const { container } = (0, import_react2.render)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.ThemeProvider, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { type: "text", variant: "body1", width: "100" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { type: "text", variant: "body1", width: "100", color: "secondary" })
+      ] })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/esm/Skeleton/Skeleton.theme.js

@@ -1,4 +1,4 @@
-const Skeleton = ({ lineHeights, radii }) => ({
+const Skeleton = ({ colors, lineHeights, radii }) => ({
   border: {
     circular: radii.circle
   },
@@ -14,6 +14,10 @@ const Skeleton = ({ lineHeights, radii }) => ({
       overline: lineHeights.xsmall,
       exception: lineHeights.xxsmall
     }
+  },
+  background: {
+    primary: colors.elements.backgroundAndDisabled,
+    secondary: colors.elements.lineAndBorders
   }
 });
 var Skeleton_theme_default = Skeleton;

package/esm/Skeleton/native/Skeleton.js

@@ -43,21 +43,22 @@ const StyledSkeleton = styled.View`
   ${heights}
 
    ${({
+  color,
   type,
   variant,
   theme: {
     yoga: {
-      colors,
       components: {
         skeleton: {
           border: { [type]: borderRadius },
-          height: { [type]: { [variant]: height } = {} }
+          height: { [type]: { [variant]: height } = {} },
+          background: { [color]: backgroundColor }
         }
       }
     }
   }
 }) => `
-    background-color: ${colors.elements.backgroundAndDisabled};
+    background-color: ${backgroundColor};
     ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
     ${height ? `height: ${height}px;` : ""}
   `}
@@ -89,6 +90,11 @@ function Skeleton(_a) {
   return /* @__PURE__ */ jsx(Animated.View, { style: { opacity }, children: /* @__PURE__ */ jsx(StyledSkeleton, __spreadValues({}, props)) });
 }
 Skeleton.propTypes = {
+  /**
+   * Determines which color will be rendered. It can be
+   * 'primary' or 'secondary'.
+   */
+  color: oneOf(["primary", "secondary"]),
   /**
    * Determines which type will be rendered. It can be
    * 'circular', 'rectangular' or 'text'.
@@ -134,7 +140,8 @@ Skeleton.propTypes = {
 };
 Skeleton.defaultProps = {
   variant: void 0,
-  animation: "pulse"
+  animation: "pulse",
+  color: "primary"
 };
 var Skeleton_default = Skeleton;
 export {

package/esm/Skeleton/native/Skeleton.test.js

@@ -37,4 +37,13 @@ describe("<Skeleton />", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+  it("should render all background color variants correctly", () => {
+    const { toJSON } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100", color: "secondary" })
+      ] })
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/esm/Skeleton/web/Skeleton.js

@@ -30,22 +30,23 @@ const StyledSkeleton = styled.div`
   ${heights}
 
   ${({
+  color,
   type,
   variant,
   animation = "pulse",
   theme: {
     yoga: {
-      colors,
       components: {
         skeleton: {
           border: { [type]: borderRadius },
-          height: { [type]: { [variant]: height } = {} }
+          height: { [type]: { [variant]: height } = {} },
+          background: { [color]: backgroundColor }
         }
       }
     }
   }
 }) => css`
-    background-color: ${colors.elements.backgroundAndDisabled};
+    background-color: ${backgroundColor};
     ${borderRadius ? `border-radius: ${borderRadius}px;` : ""}
     ${height ? `height: ${height}px;` : ""}
 
@@ -68,6 +69,11 @@ function Skeleton(props) {
   return /* @__PURE__ */ jsx(StyledSkeleton, __spreadValues({}, props));
 }
 Skeleton.propTypes = {
+  /**
+   * Determines which color will be rendered. It can be
+   * 'primary' or 'secondary'.
+   */
+  color: oneOf(["primary", "secondary"]),
   /**
    * Determines which type will be rendered. It can be
    * 'circular', 'rectangular' or 'text'.
@@ -113,7 +119,8 @@ Skeleton.propTypes = {
 };
 Skeleton.defaultProps = {
   variant: void 0,
-  animation: "pulse"
+  animation: "pulse",
+  color: "primary"
 };
 var Skeleton_default = Skeleton;
 export {

package/esm/Skeleton/web/Skeleton.test.js

@@ -37,4 +37,13 @@ describe("<Skeleton />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+  it("should render all background color variants correctly", () => {
+    const { container } = render(
+      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100" }),
+        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100", color: "secondary" })
+      ] })
+    );
+    expect(container).toMatchSnapshot();
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.106.1",
+  "version": "7.107.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -57,7 +57,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "a4f1326b3f40785426df1532d0f098832dedc594",
+  "gitHead": "34c447405c217d56ee520b64a1c60150c60aa43d",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/index.d.ts

@@ -486,6 +486,7 @@ declare const Drawer: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 declare function Skeleton(props: any): JSX.Element;
 declare namespace Skeleton {
     namespace propTypes {
+        const color: prop_types.Requireable<string>;
         const type: prop_types.Validator<string>;
         function variant(props: any, propName: any, componentName: any): void | Error | null;
         const animation: prop_types.Requireable<string | boolean>;
@@ -495,6 +496,8 @@ declare namespace Skeleton {
         export { variant_1 as variant };
         const animation_1: string;
         export { animation_1 as animation };
+        const color_1: string;
+        export { color_1 as color };
     }
 }