@gympass/yoga 7.96.1 → 7.96.2

package/cjs/Chips/native/Chips.js

@@ -65,11 +65,17 @@ var import_react = __toESM(require("react"));
 var import_prop_types = require("prop-types");
 var import_styled_components = __toESM(require("styled-components"));
 var import_react_native = require("react-native");
+var import_yoga_common = require("@gympass/yoga-common");
 var import_Counter = __toESM(require("./Counter"));
 var import_Theme = require("../../Theme");
 var import_Text = __toESM(require("../../Text"));
 var import_Icon = __toESM(require("../../Icon"));
-const Wrapper = import_styled_components.default.View`
+const BORDER_OPACITY = 0.4;
+const Wrapper = import_styled_components.default.View.attrs(({ theme: { yoga } }) => {
+  return {
+    borderColor: (0, import_yoga_common.hexToRgb)(yoga.colors.secondary, BORDER_OPACITY)
+  };
+})`
   height: 32px;
   max-width: 216px;
 
@@ -78,10 +84,9 @@ const Wrapper = import_styled_components.default.View`
   justify-content: flex-start;
 
   margin-right: ${import_Theme.theme.spacing.xxsmall}px;
-  padding: ${import_Theme.theme.spacing.xxsmall}px;
+  padding: ${import_Theme.theme.spacing.xxxsmall}px ${import_Theme.theme.spacing.xsmall}px;
 
   border-style: solid;
-  border-color: ${import_Theme.theme.colors.elements.lineAndBorders};
   border-radius: ${import_Theme.theme.radii.circle}px;
   border-width: ${import_Theme.theme.borders.small}px;
 
@@ -91,22 +96,27 @@ const Wrapper = import_styled_components.default.View`
 
   ${({ disabled }) => disabled ? import_styled_components.css`
           background-color: ${import_Theme.theme.colors.elements.backgroundAndDisabled};
-          color: ${import_Theme.theme.colors.elements.selectionAndIcons};
-
-          border-color: ${import_Theme.theme.colors.elements.lineAndBorders};
+          border-color: ${import_Theme.theme.colors.elements.backgroundAndDisabled};
         ` : ""}
 
   ${({ selected }) => selected ? import_styled_components.css`
           background-color: ${import_Theme.theme.colors.secondary};
-          border-color: transparent;
+        ` : ""}
+
+  ${({ justAnIcon }) => justAnIcon ? import_styled_components.css`
+          padding: ${import_Theme.theme.spacing.xxsmall}px;
         ` : ""}
 `;
 const StyledChips = (0, import_styled_components.default)(import_Text.default)`
   font-size: ${import_Theme.theme.fontSizes.xsmall}px;
-  line-height: ${import_Theme.theme.lineHeights.xxsmall}px;
+  line-height: ${import_Theme.theme.lineHeights.xsmall}px;
 
   flex-shrink: 1;
 
+  ${({ disabled }) => disabled ? import_styled_components.css`
+          color: ${import_Theme.theme.colors.text.disabled};
+        ` : ""}
+
   ${({ selected }) => selected ? import_styled_components.css`
           color: ${import_Theme.theme.colors.white};
         ` : ""}
@@ -122,7 +132,7 @@ const Chips = import_react.default.forwardRef(
       onToggle,
       onPress = onToggle,
       theme: {
-        yoga: { spacing }
+        yoga: { spacing, colors }
       }
     } = _b, props = __objRest(_b, [
       "children",
@@ -135,6 +145,9 @@ const Chips = import_react.default.forwardRef(
       "theme"
     ]);
     const [FirstIcon, SecondIcon] = icons;
+    const justAnIcon = (icons[0] || icons[1]) && !children;
+    const fillSelected = selected ? "white" : "secondary";
+    const fillIcon = disabled ? colors.text.disabled : fillSelected;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_native.TouchableWithoutFeedback,
       __spreadProps(__spreadValues({
@@ -142,42 +155,51 @@ const Chips = import_react.default.forwardRef(
         ref,
         accessibilityRole: "button"
       }, props), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { disabled, selected, children: [
-          SecondIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Icon.default,
-            {
-              as: SecondIcon,
-              fill: selected ? "white" : "secondary",
-              width: "small",
-              height: "small",
-              style: {
-                marginRight: children ? spacing.xxxsmall : void 0
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            StyledChips,
-            {
-              as: selected ? import_Text.default.Medium : import_Text.default,
-              selected,
-              numberOfLines: 1,
-              children
-            }
-          ),
-          selected && counter && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Counter.default, { value: counter }),
-          FirstIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Icon.default,
-            {
-              as: FirstIcon,
-              fill: selected ? "white" : "secondary",
-              width: "small",
-              height: "small",
-              style: {
-                marginLeft: children ? spacing.xxxsmall : void 0
-              }
-            }
-          )
-        ] })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          Wrapper,
+          {
+            disabled,
+            selected,
+            justAnIcon,
+            children: [
+              SecondIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Icon.default,
+                {
+                  as: SecondIcon,
+                  fill: fillIcon,
+                  width: "small",
+                  height: "small",
+                  style: {
+                    marginRight: children ? spacing.xxxsmall : void 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                StyledChips,
+                {
+                  disabled,
+                  as: selected ? import_Text.default.Bold : import_Text.default,
+                  selected,
+                  numberOfLines: 1,
+                  children
+                }
+              ),
+              selected && counter && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Counter.default, { value: counter }),
+              FirstIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Icon.default,
+                {
+                  as: FirstIcon,
+                  fill: fillIcon,
+                  width: "small",
+                  height: "small",
+                  style: {
+                    marginLeft: children ? spacing.xxxsmall : void 0
+                  }
+                }
+              )
+            ]
+          }
+        )
       })
     );
   }

package/cjs/Chips/web/Chips.js

@@ -68,6 +68,8 @@ var import_yoga_common = require("@gympass/yoga-common");
 var import_Theme = require("../../Theme");
 var import_Icon = __toESM(require("../../Icon"));
 var import_Counter = __toESM(require("./Counter"));
+const BORDER_OPACITY = 0.4;
+const BORDER_PRESSED_OPACITY = 0.6;
 const Text = import_styled_components.default.span`
   display: inline-block;
   box-sizing: border-box;
@@ -89,7 +91,7 @@ const Wrapper = import_styled_components.default.button`
   cursor: pointer;
 
   ${(_a) => {
-  var _b = _a, { selected } = _b, props = __objRest(_b, ["selected"]);
+  var _b = _a, { selected, justAnIcon } = _b, props = __objRest(_b, ["selected", "justAnIcon"]);
   const {
     spacing,
     borders,
@@ -102,7 +104,7 @@ const Wrapper = import_styled_components.default.button`
   } = (0, import_Theme.theme)(props);
   const commonStyles = `
 
-      padding: ${spacing.xxsmall}px;
+      padding: ${justAnIcon ? `${spacing.xxsmall}px` : `${spacing.xxsmall}px ${spacing.xsmall}px`};
 
       border-radius: ${radii.circle}px;
       border-width: ${borders.small}px;
@@ -117,11 +119,15 @@ const Wrapper = import_styled_components.default.button`
 
       &[disabled] {
         background-color: ${colors.elements.backgroundAndDisabled};
-        color: ${colors.elements.selectionAndIcons};
+        color: ${colors.text.disabled};
 
-        border-color: ${colors.elements.lineAndBorders};
+        border-color: ${colors.elements.backgroundAndDisabled};
 
         cursor: not-allowed;
+
+        svg {
+          fill: ${colors.text.disabled};
+        }
       }
 
       svg {
@@ -137,17 +143,25 @@ const Wrapper = import_styled_components.default.button`
 
         border-color: transparent;
 
-        font-weight: ${fontWeights.medium};
+        font-weight: ${fontWeights.bold};
 
         &:hover:enabled {
           border-color: ${colors.secondary};
         }
+
+        &:active:enabled {
+          background-color: ${(0, import_yoga_common.hexToRgb)(
+      colors.secondary,
+      BORDER_PRESSED_OPACITY
+    )};
+          border-color: transparent;
+        }
       `;
   }
   return `
       ${commonStyles}
 
-      border-color: ${colors.elements.lineAndBorders};
+      border-color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_OPACITY)};
 
       background-color: ${colors.white};
       color: ${colors.secondary};
@@ -158,9 +172,13 @@ const Wrapper = import_styled_components.default.button`
         border-color: ${colors.secondary};
       }
 
-      &:focus:enabled,
       &:active:enabled {
-        border-color: ${(0, import_yoga_common.hexToRgb)(colors.elements.lineAndBorders, 0.75)};
+        border-color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
+        color: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
+
+        svg {
+          fill: ${(0, import_yoga_common.hexToRgb)(colors.secondary, BORDER_PRESSED_OPACITY)};
+        }
       }
     `;
 }}
@@ -189,6 +207,7 @@ const Chips = import_react.default.forwardRef(
       "theme"
     ]);
     const [FirstIcon, SecondIcon] = icons;
+    const justAnIcon = (icons[0] || icons[1]) && !children;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Wrapper,
       __spreadProps(__spreadValues({
@@ -196,6 +215,7 @@ const Chips = import_react.default.forwardRef(
         disabled,
         onClick,
         ref,
+        justAnIcon,
         type: "button"
       }, props), {
         children: [

package/esm/Chips/native/Chips.js

@@ -34,11 +34,17 @@ import React from "react";
 import { number, arrayOf, bool, func, node } from "prop-types";
 import styled, { css, withTheme } from "styled-components";
 import { TouchableWithoutFeedback } from "react-native";
+import { hexToRgb } from "@gympass/yoga-common";
 import Counter from "./Counter";
 import { theme } from "../../Theme";
 import Text from "../../Text";
 import Icon from "../../Icon";
-const Wrapper = styled.View`
+const BORDER_OPACITY = 0.4;
+const Wrapper = styled.View.attrs(({ theme: { yoga } }) => {
+  return {
+    borderColor: hexToRgb(yoga.colors.secondary, BORDER_OPACITY)
+  };
+})`
   height: 32px;
   max-width: 216px;
 
@@ -47,10 +53,9 @@ const Wrapper = styled.View`
   justify-content: flex-start;
 
   margin-right: ${theme.spacing.xxsmall}px;
-  padding: ${theme.spacing.xxsmall}px;
+  padding: ${theme.spacing.xxxsmall}px ${theme.spacing.xsmall}px;
 
   border-style: solid;
-  border-color: ${theme.colors.elements.lineAndBorders};
   border-radius: ${theme.radii.circle}px;
   border-width: ${theme.borders.small}px;
 
@@ -60,22 +65,27 @@ const Wrapper = styled.View`
 
   ${({ disabled }) => disabled ? css`
           background-color: ${theme.colors.elements.backgroundAndDisabled};
-          color: ${theme.colors.elements.selectionAndIcons};
-
-          border-color: ${theme.colors.elements.lineAndBorders};
+          border-color: ${theme.colors.elements.backgroundAndDisabled};
         ` : ""}
 
   ${({ selected }) => selected ? css`
           background-color: ${theme.colors.secondary};
-          border-color: transparent;
+        ` : ""}
+
+  ${({ justAnIcon }) => justAnIcon ? css`
+          padding: ${theme.spacing.xxsmall}px;
         ` : ""}
 `;
 const StyledChips = styled(Text)`
   font-size: ${theme.fontSizes.xsmall}px;
-  line-height: ${theme.lineHeights.xxsmall}px;
+  line-height: ${theme.lineHeights.xsmall}px;
 
   flex-shrink: 1;
 
+  ${({ disabled }) => disabled ? css`
+          color: ${theme.colors.text.disabled};
+        ` : ""}
+
   ${({ selected }) => selected ? css`
           color: ${theme.colors.white};
         ` : ""}
@@ -91,7 +101,7 @@ const Chips = React.forwardRef(
       onToggle,
       onPress = onToggle,
       theme: {
-        yoga: { spacing }
+        yoga: { spacing, colors }
       }
     } = _b, props = __objRest(_b, [
       "children",
@@ -104,6 +114,9 @@ const Chips = React.forwardRef(
       "theme"
     ]);
     const [FirstIcon, SecondIcon] = icons;
+    const justAnIcon = (icons[0] || icons[1]) && !children;
+    const fillSelected = selected ? "white" : "secondary";
+    const fillIcon = disabled ? colors.text.disabled : fillSelected;
     return /* @__PURE__ */ jsx(
       TouchableWithoutFeedback,
       __spreadProps(__spreadValues({
@@ -111,42 +124,51 @@ const Chips = React.forwardRef(
         ref,
         accessibilityRole: "button"
       }, props), {
-        children: /* @__PURE__ */ jsxs(Wrapper, { disabled, selected, children: [
-          SecondIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              as: SecondIcon,
-              fill: selected ? "white" : "secondary",
-              width: "small",
-              height: "small",
-              style: {
-                marginRight: children ? spacing.xxxsmall : void 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            StyledChips,
-            {
-              as: selected ? Text.Medium : Text,
-              selected,
-              numberOfLines: 1,
-              children
-            }
-          ),
-          selected && counter && !disabled && /* @__PURE__ */ jsx(Counter, { value: counter }),
-          FirstIcon && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              as: FirstIcon,
-              fill: selected ? "white" : "secondary",
-              width: "small",
-              height: "small",
-              style: {
-                marginLeft: children ? spacing.xxxsmall : void 0
-              }
-            }
-          )
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          Wrapper,
+          {
+            disabled,
+            selected,
+            justAnIcon,
+            children: [
+              SecondIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  as: SecondIcon,
+                  fill: fillIcon,
+                  width: "small",
+                  height: "small",
+                  style: {
+                    marginRight: children ? spacing.xxxsmall : void 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StyledChips,
+                {
+                  disabled,
+                  as: selected ? Text.Bold : Text,
+                  selected,
+                  numberOfLines: 1,
+                  children
+                }
+              ),
+              selected && counter && !disabled && /* @__PURE__ */ jsx(Counter, { value: counter }),
+              FirstIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  as: FirstIcon,
+                  fill: fillIcon,
+                  width: "small",
+                  height: "small",
+                  style: {
+                    marginLeft: children ? spacing.xxxsmall : void 0
+                  }
+                }
+              )
+            ]
+          }
+        )
       })
     );
   }

package/esm/Chips/web/Chips.js

@@ -37,6 +37,8 @@ import { hexToRgb } from "@gympass/yoga-common";
 import { theme } from "../../Theme";
 import Icon from "../../Icon";
 import Counter from "./Counter";
+const BORDER_OPACITY = 0.4;
+const BORDER_PRESSED_OPACITY = 0.6;
 const Text = styled.span`
   display: inline-block;
   box-sizing: border-box;
@@ -58,7 +60,7 @@ const Wrapper = styled.button`
   cursor: pointer;
 
   ${(_a) => {
-  var _b = _a, { selected } = _b, props = __objRest(_b, ["selected"]);
+  var _b = _a, { selected, justAnIcon } = _b, props = __objRest(_b, ["selected", "justAnIcon"]);
   const {
     spacing,
     borders,
@@ -71,7 +73,7 @@ const Wrapper = styled.button`
   } = theme(props);
   const commonStyles = `
 
-      padding: ${spacing.xxsmall}px;
+      padding: ${justAnIcon ? `${spacing.xxsmall}px` : `${spacing.xxsmall}px ${spacing.xsmall}px`};
 
       border-radius: ${radii.circle}px;
       border-width: ${borders.small}px;
@@ -86,11 +88,15 @@ const Wrapper = styled.button`
 
       &[disabled] {
         background-color: ${colors.elements.backgroundAndDisabled};
-        color: ${colors.elements.selectionAndIcons};
+        color: ${colors.text.disabled};
 
-        border-color: ${colors.elements.lineAndBorders};
+        border-color: ${colors.elements.backgroundAndDisabled};
 
         cursor: not-allowed;
+
+        svg {
+          fill: ${colors.text.disabled};
+        }
       }
 
       svg {
@@ -106,17 +112,25 @@ const Wrapper = styled.button`
 
         border-color: transparent;
 
-        font-weight: ${fontWeights.medium};
+        font-weight: ${fontWeights.bold};
 
         &:hover:enabled {
           border-color: ${colors.secondary};
         }
+
+        &:active:enabled {
+          background-color: ${hexToRgb(
+      colors.secondary,
+      BORDER_PRESSED_OPACITY
+    )};
+          border-color: transparent;
+        }
       `;
   }
   return `
       ${commonStyles}
 
-      border-color: ${colors.elements.lineAndBorders};
+      border-color: ${hexToRgb(colors.secondary, BORDER_OPACITY)};
 
       background-color: ${colors.white};
       color: ${colors.secondary};
@@ -127,9 +141,13 @@ const Wrapper = styled.button`
         border-color: ${colors.secondary};
       }
 
-      &:focus:enabled,
       &:active:enabled {
-        border-color: ${hexToRgb(colors.elements.lineAndBorders, 0.75)};
+        border-color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
+        color: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
+
+        svg {
+          fill: ${hexToRgb(colors.secondary, BORDER_PRESSED_OPACITY)};
+        }
       }
     `;
 }}
@@ -158,6 +176,7 @@ const Chips = React.forwardRef(
       "theme"
     ]);
     const [FirstIcon, SecondIcon] = icons;
+    const justAnIcon = (icons[0] || icons[1]) && !children;
     return /* @__PURE__ */ jsxs(
       Wrapper,
       __spreadProps(__spreadValues({
@@ -165,6 +184,7 @@ const Chips = React.forwardRef(
         disabled,
         onClick,
         ref,
+        justAnIcon,
         type: "button"
       }, props), {
         children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.96.1",
+  "version": "7.96.2",
   "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": "a16ac9a9aec864b53a8f40a720d72e7366c2a1d9",
+  "gitHead": "3c29667a48ee7711af163e79795737495861eda3",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"