@gympass/yoga 7.89.0 → 7.90.1

package/cjs/Avatar/native/Avatar.js

@@ -71,7 +71,7 @@ var import_yoga_common = require("@gympass/yoga-common");
 var import_Box = __toESM(require("../../Box"));
 var import_Icon = __toESM(require("../../Icon"));
 const BORDER_WIDTH = 1;
-const BORDER_OPACITY = 0.25;
+const BORDER_OPACITY = 0.1;
 const BorderImage = (0, import_styled_components.default)(import_Box.default).attrs(({ theme: { yoga } }) => {
   return {
     borderColor: (0, import_yoga_common.hexToRgb)(yoga.colors.secondary, BORDER_OPACITY),

package/cjs/NavigationMenu/web/Menu/Menu.js

@@ -100,8 +100,8 @@ const Menu = ({ avatar: Avatar, subtitle, title, onClick }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledMenu, { hasAction, onClick, children: [
     Avatar,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTextContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { children: title || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Text.Small, { color: "deep", children: subtitle })
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledText, { children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Text.Small, { color: "deep", children: subtitle })
     ] }),
     hasAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.ArrowRight, size: "large", fill: "vibin" })
   ] });

package/cjs/NavigationMenu/web/Switcher/Switcher.js

@@ -88,6 +88,7 @@ const Switcher = ({
   actions,
   avatar: Avatar,
   fill = "transparent",
+  isLoading = false,
   sideOffset = 36,
   subtitle,
   title
@@ -95,10 +96,21 @@ const Switcher = ({
   const hasActions = actions == null ? void 0 : actions.length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledSwitcher, { fill, children: [
     Avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTextContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { children: title || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Text.Tiny, { color: "deep", children: subtitle })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTextContainer, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_yoga.Skeleton,
+        {
+          type: "text",
+          variant: "overline",
+          width: "100%",
+          marginBottom: "4px"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Skeleton, { type: "text", variant: "overline", width: "100%" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTitle, { children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga.Text.Tiny, { color: "deep", children: subtitle })
+    ] }) }),
     hasActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Actions.default, { actions, sideOffset })
   ] });
 };

package/esm/Avatar/native/Avatar.js

@@ -40,7 +40,7 @@ import { hexToRgb } from "@gympass/yoga-common";
 import Box from "../../Box";
 import Icon from "../../Icon";
 const BORDER_WIDTH = 1;
-const BORDER_OPACITY = 0.25;
+const BORDER_OPACITY = 0.1;
 const BorderImage = styled(Box).attrs(({ theme: { yoga } }) => {
   return {
     borderColor: hexToRgb(yoga.colors.secondary, BORDER_OPACITY),

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { ArrowRight } from "@gympass/yoga-icons";
-import { Text, Skeleton } from "@gympass/yoga";
+import { Text } from "@gympass/yoga";
 import Box from "../../../Box";
 import Icon from "../../../Icon";
 const StyledMenu = styled(Box)`
@@ -67,8 +67,8 @@ const Menu = ({ avatar: Avatar, subtitle, title, onClick }) => {
   return /* @__PURE__ */ jsxs(StyledMenu, { hasAction, onClick, children: [
     Avatar,
     /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
-      /* @__PURE__ */ jsx(StyledText, { children: title || /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
-      /* @__PURE__ */ jsx(Text.Small, { color: "deep", children: subtitle })
+      title && /* @__PURE__ */ jsx(StyledText, { children: title }),
+      subtitle && /* @__PURE__ */ jsx(Text.Small, { color: "deep", children: subtitle })
     ] }),
     hasAction && /* @__PURE__ */ jsx(Icon, { as: ArrowRight, size: "large", fill: "vibin" })
   ] });

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { Text, Skeleton } from "@gympass/yoga";
 import Actions from "./Actions";
@@ -55,6 +55,7 @@ const Switcher = ({
   actions,
   avatar: Avatar,
   fill = "transparent",
+  isLoading = false,
   sideOffset = 36,
   subtitle,
   title
@@ -62,10 +63,21 @@ const Switcher = ({
   const hasActions = actions == null ? void 0 : actions.length;
   return /* @__PURE__ */ jsxs(StyledSwitcher, { fill, children: [
     Avatar,
-    /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
-      /* @__PURE__ */ jsx(StyledTitle, { children: title || /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
-      /* @__PURE__ */ jsx(Text.Tiny, { color: "deep", children: subtitle })
-    ] }),
+    /* @__PURE__ */ jsx(StyledTextContainer, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          type: "text",
+          variant: "overline",
+          width: "100%",
+          marginBottom: "4px"
+        }
+      ),
+      /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "overline", width: "100%" })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      title && /* @__PURE__ */ jsx(StyledTitle, { children: title }),
+      subtitle && /* @__PURE__ */ jsx(Text.Tiny, { color: "deep", children: subtitle })
+    ] }) }),
     hasActions && /* @__PURE__ */ jsx(Actions, { actions, sideOffset })
   ] });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.89.0",
+  "version": "7.90.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -56,7 +56,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "0f1e1dc67d7dbe17045b0fb018460cf623735b6e",
+  "gitHead": "8dad59f700b4ff4e3be23c1f178258ab0c92663f",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"

package/typings/NavigationMenu/index.d.ts

@@ -1,5 +1,5 @@
-import { N as NavigationMenu } from '../NavigationMenu-7f690c1e.js';
-import '../Switcher-cab05b9f.js';
+import { N as NavigationMenu } from '../NavigationMenu-373d8980.js';
+import '../Switcher-a8dff781.js';
 import 'react';
 
 

package/typings/NavigationMenu/web/Menu/index.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 declare type MenuProps = {
     avatar: React.ReactElement;
     subtitle?: string;
-    title: string;
+    title?: string;
     onClick?: () => void;
 };
 declare const Menu: ({ avatar: Avatar, subtitle, title, onClick }: MenuProps) => JSX.Element;

package/typings/NavigationMenu/web/Switcher/index.d.ts

@@ -1,4 +1,4 @@
-import { a as Switcher } from '../../../Switcher-cab05b9f.js';
+import { a as Switcher } from '../../../Switcher-a8dff781.js';
 import 'react';
 
 

package/typings/NavigationMenu/web/index.d.ts

@@ -1,5 +1,5 @@
-import { N as NavigationMenu } from '../../NavigationMenu-7f690c1e.js';
-import '../../Switcher-cab05b9f.js';
+import { N as NavigationMenu } from '../../NavigationMenu-373d8980.js';
+import '../../Switcher-a8dff781.js';
 import 'react';
 
 

package/typings/{NavigationMenu-7f690c1e.d.ts → NavigationMenu-373d8980.d.ts}

@@ -1,4 +1,4 @@
-import { S as SwitcherActionsProps } from './Switcher-cab05b9f.js';
+import { S as SwitcherActionsProps } from './Switcher-a8dff781.js';
 import React from 'react';
 
 declare type NavigationMenuProps = {
@@ -12,16 +12,17 @@ declare const NavigationMenu: {
     Menu: ({ avatar: Avatar, subtitle, title, onClick }: {
         avatar: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         subtitle?: string | undefined;
-        title: string;
+        title?: string | undefined;
         onClick?: (() => void) | undefined;
     }) => JSX.Element;
-    Switcher: ({ actions, avatar: Avatar, fill, sideOffset, subtitle, title, }: {
+    Switcher: ({ actions, avatar: Avatar, fill, isLoading, sideOffset, subtitle, title, }: {
         actions?: SwitcherActionsProps[] | undefined;
         avatar: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         fill?: string | undefined;
+        isLoading?: boolean | undefined;
         sideOffset?: number | undefined;
         subtitle?: string | undefined;
-        title: string;
+        title?: string | undefined;
     }) => JSX.Element;
     Items: any;
     ItemsGroup: any;

package/typings/{Switcher-cab05b9f.d.ts → Switcher-a8dff781.d.ts}

@@ -9,10 +9,11 @@ declare type SwitcherProps = {
     actions?: SwitcherActionsProps[];
     avatar: React.ReactElement;
     fill?: string;
+    isLoading?: boolean;
     sideOffset?: number;
     subtitle?: string;
-    title: string;
+    title?: string;
 };
-declare const Switcher: ({ actions, avatar: Avatar, fill, sideOffset, subtitle, title, }: SwitcherProps) => JSX.Element;
+declare const Switcher: ({ actions, avatar: Avatar, fill, isLoading, sideOffset, subtitle, title, }: SwitcherProps) => JSX.Element;
 
 export { SwitcherActionsProps as S, Switcher as a };

package/typings/index.d.ts

@@ -2,8 +2,8 @@ import * as prop_types from 'prop-types';
 import prop_types__default, { string, bool, func, node, number, elementType } from 'prop-types';
 import React from 'react';
 export { _ as Icon } from './Icon-4557ae6b.js';
-export { N as NavigationMenu } from './NavigationMenu-7f690c1e.js';
-import './Switcher-cab05b9f.js';
+export { N as NavigationMenu } from './NavigationMenu-373d8980.js';
+import './Switcher-a8dff781.js';
 
 /** This component provides a theme to all React components underneath itself via the context API. */
 declare function ThemeProvider({ children, ...rest }: {