@gympass/yoga 7.88.0 → 7.88.1

package/esm/Card/native/PlanCard/index.js

@@ -0,0 +1,18 @@
+import { Actions, Button, ButtonText } from "./Actions";
+import Content from "./Content";
+import PlanCard from "./PlanCard";
+import Subtitle from "./Subtitle";
+import Tag from "./Tag";
+import { List, ListItem } from "./List";
+PlanCard.Actions = Actions;
+PlanCard.Button = Button;
+PlanCard.ButtonText = ButtonText;
+PlanCard.Content = Content;
+PlanCard.List = List;
+PlanCard.ListItem = ListItem;
+PlanCard.Subtitle = Subtitle;
+PlanCard.Tag = Tag;
+var PlanCard_default = PlanCard;
+export {
+  PlanCard_default as default
+};

package/esm/Card/native/index.js

@@ -0,0 +1,10 @@
+import Card from "./Card";
+import PlanCard from "./PlanCard";
+import EventCard from "./EventCard";
+import GymCard from "./GymCard";
+export {
+  Card,
+  EventCard,
+  GymCard,
+  PlanCard
+};

package/esm/Checkbox/CheckIcon.js

@@ -0,0 +1,5 @@
+const checkIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfjCw4QFioQDlrfAAABI0lEQVRo3u2YPW7CQBBGP18A0UXpaZEQJ+AG6VJyEroIChrEUSKROkWOkN+WHiSgRnp0QDCQtdeejZL5+tn31tLOjCx5PJ7/niwNlrZ6Wukx26TBD9gCMKeVAj/ikKe0eFinxcNHWjz0LfEPOfzY8Y53vOMd73jHO/534LnnhVcmNCLw+WVrGFra35e8c2OOl/g8KiulEIWXWH8rLawQiZeYnZQXUojGS7RYllWoAC9JdFicHPPFbUBdde++jELFbaeoQg1dr4hCTU03VKHGnh+iUPPI+UnBYOJdUzAauJcUDOc93TPdcZrDl+l6EV/B6vaBChbL1hUFq13vgoLpqplXsMSfUbDGSxJd5gBsGVR/etDvehq6U1PP2VuC+3s8nj+fHXfWlhGVw0EjAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTExLTE0VDE2OjIyOjQyKzAwOjAwR6ZpUQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0xMS0xNFQxNjoyMjo0MiswMDowMDb70e0AAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC";
+var CheckIcon_default = checkIcon;
+export {
+  CheckIcon_default as default
+};

package/esm/Checkbox/Checkbox.theme.js

@@ -0,0 +1,48 @@
+const Checkbox = ({ spacing, colors, borders, radii, fontSizes }) => ({
+  size: 24,
+  margin: {
+    right: spacing.xxsmall
+  },
+  border: {
+    width: borders.medium,
+    radius: radii.xsmall
+  },
+  label: {
+    padding: {
+      left: spacing.xxsmall
+    },
+    font: {
+      size: fontSizes.medium,
+      color: colors.text.primary
+    }
+  },
+  helper: {
+    margin: {
+      top: spacing.xxxsmall
+    },
+    font: {
+      size: fontSizes.small,
+      color: colors.text.secondary
+    }
+  },
+  hover: {
+    border: {
+      radius: radii.circle
+    }
+  },
+  checked: {
+    icon: {
+      color: colors.white
+    }
+  },
+  disabled: {
+    backgroundColor: colors.elements.lineAndBorders,
+    border: {
+      color: colors.elements.lineAndBorders
+    }
+  }
+});
+var Checkbox_theme_default = Checkbox;
+export {
+  Checkbox_theme_default as default
+};

package/esm/Checkbox/CheckboxSwitch.theme.js

@@ -0,0 +1,70 @@
+import { hexToRgb } from "@gympass/yoga-common";
+const CheckboxSwitch = ({
+  colors,
+  radii,
+  transition,
+  spacing,
+  elevations
+}) => ({
+  track: {
+    width: 48,
+    height: 24,
+    backgroundColor: colors.elements.selectionAndIcons,
+    radii: radii.circle,
+    transition: {
+      duration: transition.duration[1]
+    },
+    checked: {
+      backgroundColor: colors.primary
+    },
+    disabled: {
+      backgroundColor: colors.elements.backgroundAndDisabled
+    }
+  },
+  thumb: {
+    width: spacing.medium,
+    height: spacing.medium,
+    shadowScale: 1.6,
+    left: 2,
+    radii: radii.circle,
+    backgroundColor: colors.white,
+    shadow: elevations.small,
+    transition: {
+      duration: transition.duration[1]
+    },
+    checked: {
+      backgroundColor: colors.primary
+    },
+    disabled: {
+      backgroundColor: colors.white
+    }
+  },
+  focus: {
+    checked: {
+      backgroundColor: hexToRgb(colors.primary, 0.5)
+    },
+    disabled: {
+      backgroundColor: hexToRgb(colors.elements.backgroundAndDisabled, 0.5)
+    }
+  },
+  hover: {
+    checked: {
+      backgroundColor: hexToRgb(colors.primary, 0.25)
+    },
+    disabled: {
+      backgroundColor: hexToRgb(colors.elements.backgroundAndDisabled, 0.25)
+    }
+  },
+  pressed: {
+    checked: {
+      backgroundColor: hexToRgb(colors.primary, 0.75)
+    },
+    disabled: {
+      backgroundColor: hexToRgb(colors.elements.lineAndBorders, 0.75)
+    }
+  }
+});
+var CheckboxSwitch_theme_default = CheckboxSwitch;
+export {
+  CheckboxSwitch_theme_default as default
+};

package/esm/Checkbox/index.js

@@ -0,0 +1,6 @@
+import { Checkbox, Switch } from "./web";
+Checkbox.Switch = Switch;
+var Checkbox_default = Checkbox;
+export {
+  Checkbox_default as default
+};

package/esm/Checkbox/index.native.js

@@ -0,0 +1,6 @@
+import { Checkbox, Switch } from "./native";
+Checkbox.Switch = Switch;
+var index_native_default = Checkbox;
+export {
+  index_native_default as default
+};

package/esm/Checkbox/native/Checkbox.js

@@ -0,0 +1,276 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { bool, func, string, shape } from "prop-types";
+import styled, { withTheme } from "styled-components";
+import { TouchableWithoutFeedback, View } from "react-native";
+import { hexToRgb } from "@gympass/yoga-common";
+import { Check } from "@gympass/yoga-icons";
+import Text from "../../Text";
+const CheckboxWrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+const Label = styled(Text.Regular)(
+  ({
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  }) => `
+  padding-left: ${checkbox.label.padding.left}px;
+
+  font-size: ${checkbox.label.font.size}px;
+
+  color: ${checkbox.label.font.color};
+`
+);
+const HelperWrapper = styled.View(
+  ({
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  }) => `
+  margin-top: ${checkbox.helper.margin.top}px;
+`
+);
+const Helper = styled(Text.Regular)(
+  ({
+    error,
+    theme: {
+      yoga: {
+        colors: { feedback },
+        components: { checkbox }
+      }
+    }
+  }) => `
+  font-size: ${checkbox.helper.font.size}px;
+
+  color: ${error ? feedback.attention[1] : checkbox.helper.font.color};
+`
+);
+const CheckBackground = styled.View(
+  ({
+    checked,
+    disabled,
+    inverted,
+    error,
+    theme: {
+      yoga: {
+        colors: { primary, feedback, elements, white },
+        components: { checkbox }
+      }
+    }
+  }) => {
+    let borderColor = primary;
+    let bgColor = "transparent";
+    if (error) {
+      [, borderColor] = feedback.attention;
+      if (checked) {
+        [, bgColor] = feedback.attention;
+      }
+    } else if (disabled) {
+      borderColor = checkbox.disabled.border.color;
+      if (checked) {
+        bgColor = checkbox.disabled.backgroundColor;
+        borderColor = elements.lineAndBorders;
+      }
+    } else if (checked) {
+      borderColor = primary;
+      bgColor = primary;
+      if (inverted) {
+        bgColor = white;
+        borderColor = white;
+      }
+    } else if (inverted) {
+      borderColor = white;
+    }
+    return `
+      position: absolute;
+
+      width: ${checkbox.size}px;
+      height: ${checkbox.size}px;
+
+      border-radius: ${checkbox.border.radius}px;
+      border-width: ${checkbox.border.width}px;
+      border-style: solid;
+
+      background-color: ${bgColor};
+
+      border-color: ${borderColor};
+    `;
+  }
+);
+const Shadow = styled.View(
+  ({
+    checked,
+    inverted,
+    theme: {
+      yoga: {
+        colors: { primary, elements, white },
+        components: { checkbox }
+      }
+    }
+  }) => {
+    const size = checkbox.size * 1.67;
+    const shadowColor = checked ? primary : elements.backgroundAndDisabled;
+    return `
+      width: ${size}px;
+      height: ${size}px;
+
+      background-color: ${hexToRgb(inverted ? white : shadowColor, 0.75)};
+      border-radius: ${checkbox.hover.border.radius}px;
+    `;
+  }
+);
+const CheckArea = styled.View(
+  ({
+    theme: {
+      yoga: {
+        components: { checkbox }
+      }
+    }
+  }) => `
+  justify-content: center;
+  align-items: center;
+
+  width: ${checkbox.size}px;
+  height: ${checkbox.size}px;
+`
+);
+const Checkbox = (_a) => {
+  var _b = _a, {
+    label,
+    helper,
+    disabled,
+    checked,
+    error,
+    style,
+    onPressIn,
+    onPressOut,
+    inverted,
+    theme: {
+      yoga: {
+        components: { checkbox },
+        colors
+      }
+    }
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "helper",
+    "disabled",
+    "checked",
+    "error",
+    "style",
+    "onPressIn",
+    "onPressOut",
+    "inverted",
+    "theme"
+  ]);
+  const [pressed, setPressed] = useState(false);
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(
+      TouchableWithoutFeedback,
+      __spreadProps(__spreadValues({}, rest), {
+        disabled,
+        onPressIn: (e) => {
+          setPressed(true);
+          onPressIn(e);
+        },
+        onPressOut: (e) => {
+          setPressed(false);
+          onPressOut(e);
+        },
+        children: /* @__PURE__ */ jsxs(CheckboxWrapper, { style, children: [
+          /* @__PURE__ */ jsxs(CheckArea, { children: [
+            pressed && !disabled && /* @__PURE__ */ jsx(Shadow, { pressed, checked, inverted }),
+            /* @__PURE__ */ jsx(
+              CheckBackground,
+              __spreadValues({}, {
+                disabled,
+                checked,
+                error,
+                pressed,
+                inverted
+              })
+            ),
+            checked && /* @__PURE__ */ jsx(
+              Check,
+              {
+                fill: inverted ? colors.primary : checkbox.checked.icon.color,
+                style: { position: "absolute" },
+                width: 24,
+                height: 24
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsx(Label, { children: label })
+        ] })
+      })
+    ),
+    (helper || error) && /* @__PURE__ */ jsx(HelperWrapper, { children: /* @__PURE__ */ jsx(Helper, { error, children: error || helper }) })
+  ] });
+};
+Checkbox.propTypes = {
+  label: string,
+  /** set a short helper text under checkbox */
+  helper: string,
+  checked: bool,
+  disabled: bool,
+  inverted: bool,
+  error: string,
+  style: shape({}),
+  onPressIn: func,
+  onPressOut: func
+};
+Checkbox.defaultProps = {
+  label: void 0,
+  helper: void 0,
+  checked: false,
+  disabled: false,
+  inverted: false,
+  error: void 0,
+  style: {},
+  onPressIn: () => {
+  },
+  onPressOut: () => {
+  }
+};
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = withTheme(Checkbox);
+export {
+  Checkbox_default as default
+};

package/esm/Checkbox/native/Checkbox.test.js

@@ -0,0 +1,108 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import Checkbox from "..";
+import ThemeProvider from "../../Theme";
+const data = {
+  label: "Checkbox Component",
+  helper: "Helper Text"
+};
+describe("<Checkbox />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot without label", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot without label", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, {}) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with default checkbox", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadValues({}, data)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with disabled checkbox", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { disabled: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with checked checkbox", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with disabled and checked checkbox", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { disabled: true, checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with error checkbox", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { error: "Error text" })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with error and checked checkbox", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { error: "Error text", checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with inverted", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { inverted: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with inverted and checked", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { inverted: true, checked: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with inverted and checked and disabled", () => {
+      const { toJSON } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { inverted: true, checked: true, disabled: true })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe("Events", () => {
+    it("should call onChange function when press on Checkbox", () => {
+      const onChangeMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Checkbox, __spreadProps(__spreadValues({}, data), { onPress: onChangeMock, testID: "checkbox" })) })
+      );
+      fireEvent.press(getByTestId("checkbox"));
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+  });
+});