@gympass/yoga 7.104.0 → 7.105.0

package/esm/Drawer/web/Drawer.js

@@ -38,11 +38,11 @@ const StyledDrawer = styled(Dialog)`
   align-self: flex-end;
   position: absolute;
   right: 0;
-  animation: content;
+  animation: drawer-slide-left;
   animation-duration: 400ms;
   animation-fill-mode: forwards;
   transition: 0.25s ease-in-out;
-  @keyframes content {
+  @keyframes drawer-slide-left {
     0% {
       transform: translate3d(100%, 0, 0);
     }

package/esm/NavigationMenu/NavigationMenu.theme.js

@@ -1,59 +1,142 @@
-const NavigationMenu = ({ colors, fontWeights, radii, spacing }) => ({
-  avatar: {
-    height: spacing.xlarge,
-    width: spacing.xlarge
-  },
+import { css } from "styled-components";
+import { merge } from "@gympass/yoga-common";
+const sandy = "#F6EDDF";
+const navigationMenuV3 = ({ colors, fontWeights, fontSizes, radii }) => ({
   backgroundColor: {
-    default: colors.clear,
-    hover: colors.light,
-    stamina: colors.stamina,
-    yoga: colors.yoga,
-    white: colors.white
+    contextMenu: colors.sand,
+    default: colors.sand,
+    hover: sandy,
+    active: sandy
   },
   border: {
-    color: {
-      default: colors.light,
-      white: colors.white
-    },
     radius: {
-      default: radii.small,
-      circle: radii.circle
+      tag: radii.small,
+      contextMenu: radii.small
     }
   },
   font: {
     color: {
-      default: colors.deep,
-      active: colors.vibin,
-      hover: colors.stamina
+      default: colors.text.secondary,
+      active: colors.text.primary,
+      hover: colors.text.secondary
     },
-    weight: { medium: fontWeights.medium }
+    weight: {
+      bold: fontWeights.bold,
+      medium: fontWeights.regular
+    },
+    size: {
+      contextMenu: {
+        title: fontSizes.xlarge
+      }
+    }
   },
-  gap: {
-    xxxsmall: spacing.xxxsmall,
-    xxsmall: spacing.xxsmall,
-    medium: spacing.medium
+  hover: {
+    contextMenu: css`
+      background-color: ${sandy};
+    `
   },
-  height: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge },
   icon: {
-    height: spacing.medium,
-    width: spacing.medium,
     fill: {
-      default: colors.deep,
-      active: colors.vibin,
-      hover: colors.stamina
+      default: colors.text.secondary,
+      actions: colors.text.secondary,
+      active: colors.text.primary,
+      hover: colors.text.secondary
     }
-  },
-  padding: {
-    xxxsmall: spacing.xxxsmall,
-    xxsmall: spacing.xxsmall,
-    xsmall: spacing.xsmall,
-    small: spacing.small
-  },
-  tag: {
-    color: { default: colors.white }
-  },
-  width: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge }
+  }
 });
+const NavigationMenu = (theme) => {
+  const {
+    colors,
+    elevations,
+    fontWeights,
+    fontSizes,
+    radii,
+    spacing,
+    v3theme
+  } = theme;
+  const baseTheme = {
+    avatar: {
+      height: spacing.xlarge,
+      width: spacing.xlarge
+    },
+    backgroundColor: {
+      contextMenu: colors.white,
+      default: colors.clear,
+      hover: colors.light,
+      active: colors.yoga,
+      tag: colors.stamina,
+      bottomMenu: colors.white
+    },
+    border: {
+      color: {
+        default: colors.light
+      },
+      radius: {
+        default: radii.small,
+        circle: radii.circle,
+        tag: v3theme ? radii.small : radii.circle,
+        action: radii.circle,
+        contextMenu: v3theme ? radii.small : radii.circle
+      }
+    },
+    font: {
+      color: {
+        default: colors.deep,
+        active: colors.vibin,
+        hover: colors.stamina
+      },
+      weight: {
+        bold: fontWeights.medium,
+        medium: fontWeights.regular
+      },
+      size: {
+        contextMenu: {
+          title: fontSizes.small
+        }
+      }
+    },
+    gap: {
+      xxxsmall: spacing.xxxsmall,
+      xxsmall: spacing.xxsmall,
+      medium: spacing.medium
+    },
+    height: {
+      xxlarge: spacing.xxlarge,
+      xlarge: spacing.xlarge,
+      contextMenu: spacing.xlarge * 2,
+      bottomMenu: spacing.xxxlarge
+    },
+    hover: {
+      contextMenu: css`
+        box-shadow: ${elevations.small};
+      `
+    },
+    icon: {
+      height: spacing.medium,
+      width: spacing.medium,
+      fill: {
+        default: colors.deep,
+        actions: colors.primary,
+        active: colors.vibin,
+        hover: colors.stamina
+      }
+    },
+    padding: {
+      xxxsmall: spacing.xxxsmall,
+      xxsmall: spacing.xxsmall,
+      xsmall: spacing.xsmall,
+      small: spacing.small
+    },
+    tag: {
+      color: { default: colors.white }
+    },
+    width: { xxlarge: spacing.xxlarge, xlarge: spacing.xlarge }
+  };
+  if (!v3theme) {
+    return baseTheme;
+  }
+  return merge(baseTheme, navigationMenuV3(theme));
+};
 var NavigationMenu_theme_default = NavigationMenu;
 export {
   NavigationMenu_theme_default as default

package/esm/NavigationMenu/web/BottomItems/BottomItem.js

@@ -25,11 +25,13 @@ const Active = css`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { icon, font }
+        navigationmenu: { backgroundColor, icon, font }
       }
     }
   }
 }) => css`
+      background-color: ${backgroundColor.active};
+
       :not(:last-child) {
         pointer-events: none;
       }
@@ -37,6 +39,7 @@ const Active = css`
       div {
         ${StyledText} {
           color: ${font.color.active};
+          font-weight: ${font.weight.bold};
         }
 
         svg {
@@ -51,7 +54,7 @@ const StyledItem = styled.li`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { border, icon, font }
+        navigationmenu: { backgroundColor, border, icon, font }
       }
     }
   }
@@ -71,6 +74,8 @@ const StyledItem = styled.li`
       &:hover,
       &:focus {
         ${!isActive && css`
+          background-color: ${backgroundColor.hover};
+
           ${StyledText} {
             color: ${font.color.hover};
           }

package/esm/NavigationMenu/web/BottomItems/BottomItems.js

@@ -35,13 +35,15 @@ import { media } from "@gympass/yoga-helpers";
 const StyledItemsContainer = styled.nav`
   position: relative;
   ${media.lg`display: none`}
+
+  z-index: ${({ $zIndex }) => $zIndex != null ? $zIndex : 2};
 `;
 const StyledItems = styled.ul`
   ${({
   theme: {
     yoga: {
       components: {
-        navigationmenu: { backgroundColor, border, gap }
+        navigationmenu: { backgroundColor, border, gap, height }
       }
     }
   }
@@ -53,13 +55,12 @@ const StyledItems = styled.ul`
     grid-auto-flow: column;
     align-items: center;
     width: 100%;
-    height: 56px;
-    background-color: ${backgroundColor.white};
+    height: ${height.bottomMenu}px;
+    background-color: ${backgroundColor.bottomMenu};
     margin: 0;
     padding: 0;
     border: 1px solid ${border.color.default};
     gap: ${gap.xxxsmall}px;
-    z-index: ${({ $zIndex }) => $zIndex != null ? $zIndex : 2};
   `}
 `;
 const BottomItems = (_a) => {

package/esm/NavigationMenu/web/Item/styles.js

@@ -1,9 +1,7 @@
 import styled, { css } from "styled-components";
-import { media } from "@gympass/yoga-helpers";
-import Box from "../../../Box";
 import Tag from "../../../Tag";
 import Text from "../../../Text";
-const StyledTextContainer = styled(Box)`
+const StyledTextContainer = styled.div`
   ${({
   isSubItem,
   theme: {
@@ -34,9 +32,9 @@ const StyledTag = styled(Tag)`
   }
 }) => css`
     text-transform: uppercase;
-    background-color: ${backgroundColor.stamina};
+    background-color: ${backgroundColor.tag};
     color: ${tag.color.default};
-    border-radius: ${border.radius.circle}px;
+    border-radius: ${border.radius.tag}px;
   `}
 `;
 const StyledText = styled(Text)`
@@ -58,7 +56,6 @@ const StyledText = styled(Text)`
 `;
 const Active = css`
   ${({
-  isResponsive,
   theme: {
     yoga: {
       components: {
@@ -70,18 +67,11 @@ const Active = css`
     cursor: auto;
 
     > ${StyledTextContainer} {
-      background-color: ${backgroundColor.default};
-
-      ${isResponsive ? media.lg`background-color: ${backgroundColor.yoga}` : css`
-            background-color: ${backgroundColor.yoga};
-          `}
+      background-color: ${backgroundColor.active};
 
       ${StyledText} {
         color: ${font.color.active};
-
-        ${isResponsive ? media.lg`font-weight: ${font.weight.medium}` : css`
-              font-weight: ${font.weight.medium};
-            `}
+        font-weight: ${font.weight.bold};
       }
 
       svg {
@@ -89,7 +79,7 @@ const Active = css`
       }
 
       > ${StyledTag} {
-        background-color: ${backgroundColor.stamina};
+        background-color: ${backgroundColor.tag};
       }
     }
   `}

package/esm/NavigationMenu/web/Menu/Menu.js

@@ -1,51 +1,64 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { ArrowRight } from "@gympass/yoga-icons";
+import { ChevronDown } from "@gympass/yoga-icons";
 import { Text } from "@gympass/yoga";
-import Box from "../../../Box";
 import Icon from "../../../Icon";
-const StyledMenu = styled(Box)`
+const StyledMenu = styled.div`
   ${({
   hasAction,
   theme: {
     yoga: {
       components: {
-        navigationmenu: { avatar, backgroundColor, border, gap, padding }
+        navigationmenu: {
+          backgroundColor,
+          border,
+          gap,
+          padding,
+          height,
+          hover
+        }
       }
     }
   }
 }) => css`
       transition: background-color 300ms ease-in-out;
 
-      display: flex;
+      display: grid;
       align-items: center;
-      justify-content: space-between;
       width: 100%;
+      grid-template-columns: max-content 1fr max-content;
       gap: ${gap.xxsmall}px;
       padding: ${padding.xsmall}px;
-      background-color: ${backgroundColor.white};
-      border-radius: ${border.radius.circle}px;
-      border: 1px solid ${border.color.white};
-
-      > div:first-child {
-        height: ${avatar.height}px;
-        width: ${avatar.width}px;
-      }
+      background-color: ${backgroundColor.contextMenu};
+      border-radius: ${border.radius.contextMenu}px;
+      min-height: ${height.contextMenu}px;
 
       ${hasAction && css`
-        :hover,
+        cursor: pointer;
+        &:hover,
         &:focus {
-          cursor: pointer;
-          border: 1px solid ${border.color.default};
+          ${hover.contextMenu}
         }
       `}
     `}
 `;
-const StyledTextContainer = styled(Box)`
-  flex: 1;
-  overflow: hidden;
+const StyledTextContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => css`
+      display: flex;
+      flex-direction: column;
+      gap: ${gap.xxxsmall}px;
+      overflow: hidden;
+    `}
 `;
-const StyledText = styled(Text.Small)`
+const StyledTitle = styled(Text.H4)`
   ${({
   theme: {
     yoga: {
@@ -55,22 +68,74 @@ const StyledText = styled(Text.Small)`
     }
   }
 }) => css`
-      font-weight: ${font.weight.medium};
+      font-size: ${font.size.contextMenu.title}px;
+      line-height: ${font.size.contextMenu.title}px;
+      font-weight: ${font.weight.bold};
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
     `}
 `;
-const Menu = ({ avatar: Avatar, subtitle, title, onClick }) => {
+const StyledSubtitle = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => css`
+      color: ${font.color.default};
+    `}
+`;
+const StyledActionIconContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { icon }
+      }
+    }
+  }
+}) => css`
+    svg {
+      fill: ${icon.fill.actions};
+    }
+  `}
+`;
+const StyledAvatarContainer = styled.div`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { avatar }
+      }
+    }
+  }
+}) => css`
+    > div:first-child {
+      height: ${avatar.height}px;
+      width: ${avatar.width}px;
+    }
+  `}
+`;
+const Menu = ({
+  avatar: Avatar,
+  icon,
+  subtitle,
+  title,
+  onClick
+}) => {
   const hasAction = Boolean(onClick);
   return /* @__PURE__ */ jsxs(StyledMenu, { hasAction, onClick, children: [
-    Avatar,
+    !!Avatar && /* @__PURE__ */ jsx(StyledAvatarContainer, { children: Avatar }),
     /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
-      title && /* @__PURE__ */ jsx(StyledText, { children: title }),
-      subtitle && /* @__PURE__ */ jsx(Text.Small, { color: "deep", children: subtitle })
+      title && /* @__PURE__ */ jsx(StyledTitle, { children: title }),
+      subtitle && /* @__PURE__ */ jsx(StyledSubtitle, { children: subtitle })
     ] }),
-    hasAction && /* @__PURE__ */ jsx(Icon, { as: ArrowRight, size: "large", fill: "vibin" })
+    hasAction && /* @__PURE__ */ jsx(StyledActionIconContainer, { children: /* @__PURE__ */ jsx(Icon, { as: icon != null ? icon : ChevronDown, size: "large" }) })
   ] });
 };
 var Menu_default = Menu;

package/esm/NavigationMenu/web/NavigationMenu.js

@@ -36,7 +36,6 @@ import Menu from "./Menu";
 import Switcher from "./Switcher";
 import { Item, Subitem } from "./Item";
 import { BottomItems, BottomItem } from "./BottomItems";
-import Box from "../../Box";
 const DeskTopContainer = css`
   ${({
   theme: {
@@ -80,7 +79,7 @@ const StyledNavigationMenu = styled.div`
     `}
   `}
 `;
-const StyledHeader = styled(Box)`
+const StyledHeader = styled.header`
   ${({
   theme: {
     yoga: {
@@ -118,7 +117,7 @@ const StyledItemsGroup = styled.ul`
     gap: ${gap.xxxsmall}px;
   `}
 `;
-const StyledFooter = styled(Box)`
+const StyledFooter = styled.footer`
   ${({
   theme: {
     yoga: {
@@ -137,17 +136,20 @@ const NavigationMenu = (_a) => {
   var _b = _a, {
     children,
     openOnMobile = false,
-    responsive = true
+    responsive = true,
+    zIndex
   } = _b, htmlAttributes = __objRest(_b, [
     "children",
     "openOnMobile",
-    "responsive"
+    "responsive",
+    "zIndex"
   ]);
   return /* @__PURE__ */ jsx(
     StyledNavigationMenu,
     __spreadProps(__spreadValues({}, htmlAttributes), {
       isOpenOnMobile: openOnMobile,
       isResponsive: responsive,
+      $zIndex: zIndex,
       children
     })
   );

package/esm/NavigationMenu/web/Switcher/Actions.js

@@ -8,7 +8,7 @@ const StyledAction = styled.div`
   theme: {
     yoga: {
       components: {
-        navigationmenu: { backgroundColor, border, height, width }
+        navigationmenu: { backgroundColor, border, height, width, icon }
       }
     }
   }
@@ -20,7 +20,11 @@ const StyledAction = styled.div`
       justify-content: center;
       width: ${width.xxlarge}px;
       height: ${height.xxlarge}px;
-      border-radius: ${border.radius.circle}px;
+      border-radius: ${border.radius.action}px;
+
+      svg {
+        fill: ${icon.fill.actions};
+      }
 
       :hover,
       &:focus {
@@ -29,18 +33,18 @@ const StyledAction = styled.div`
       }
     `}
 `;
-function Actions({ actions, sideOffset, $zIndex }) {
+function Actions({ actions, sideOffset, zIndex }) {
   if (!(actions == null ? void 0 : actions.length)) {
     return null;
   }
   return /* @__PURE__ */ jsxs(YogaMenu, { onMouseHover: false, children: [
-    /* @__PURE__ */ jsx(YogaMenu.Action, { children: /* @__PURE__ */ jsx(StyledAction, { children: /* @__PURE__ */ jsx(Icon, { as: MenuMore, size: "medium", fill: "vibin" }) }) }),
+    /* @__PURE__ */ jsx(YogaMenu.Action, { children: /* @__PURE__ */ jsx(StyledAction, { children: /* @__PURE__ */ jsx(Icon, { as: MenuMore, size: "medium" }) }) }),
     /* @__PURE__ */ jsx(
       YogaMenu.List,
       {
         side: "right",
         sideOffset,
-        zIndex: `${$zIndex != null ? $zIndex : 2}`,
+        zIndex: `${zIndex != null ? zIndex : 2}`,
         children: actions.map(({ id, label, onClick }) => /* @__PURE__ */ jsx(YogaMenu.Item, { onClick, children: label }, id))
       }
     )

package/esm/NavigationMenu/web/Switcher/Switcher.js

@@ -58,7 +58,7 @@ const StyledSwitcher = styled(Box)`
       }
     `}
 `;
-const StyledTextContainer = styled(Box)`
+const StyledTextContainer = styled.div`
   flex: 1;
   overflow: hidden;
 `;
@@ -72,7 +72,7 @@ const StyledTitle = styled(Text.Small)`
     }
   }
 }) => css`
-      font-weight: ${font.weight.medium};
+      font-weight: ${font.weight.bold};
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -95,7 +95,7 @@ const Switcher = (_a) => {
     "subtitle",
     "title"
   ]);
-  const hasActions = actions == null ? void 0 : actions.length;
+  const hasActions = !!(actions == null ? void 0 : actions.length);
   return /* @__PURE__ */ jsxs(StyledSwitcher, { fill, children: [
     Avatar,
     /* @__PURE__ */ jsx(StyledTextContainer, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.104.0",
+  "version": "7.105.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": "89d776e82d74a009e4fbca47fb21a00461e234b6",
+  "gitHead": "6190e4f67b4d9ac5a78d43e3fecd6c6d09ddc649",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/{Actions-cd7fac99.d.ts → Actions-752d7514.d.ts}

@@ -6,8 +6,8 @@ declare type SwitcherActionsProps = {
 declare type ActionsProps = {
     actions?: SwitcherActionsProps[];
     sideOffset?: number;
-    $zIndex?: number;
+    zIndex?: number;
 };
-declare function Actions({ actions, sideOffset, $zIndex }: ActionsProps): JSX.Element | null;
+declare function Actions({ actions, sideOffset, zIndex }: ActionsProps): JSX.Element | null;
 
 export { ActionsProps as A, Actions as a };