@mailstep/design-system 0.7.58 → 0.7.59-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.58",
+  "version": "0.7.59-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Tabs/TabContent.d.ts

@@ -1,3 +1,3 @@
-import { TabContentProps } from './types';
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import type { TabContentProps } from './types';
 export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => ReactElement | null;

package/ui/Blocks/Tabs/Tabs.d.ts

@@ -1,2 +1,2 @@
-import { TabsProps } from './types';
-export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: TabsProps) => JSX.Element;
+import type { TabsProps } from './types';
+export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }: TabsProps) => JSX.Element;

package/ui/Blocks/Tabs/Tabs.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
-import { Text } from '../../Elements/Text';
 import { Icon } from '../../Elements/Icon';
+import { Text } from '../../Elements/Text';
+import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
 var Tab = function (_a) {
-    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;
+    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch, minWidth = _a.minWidth;
     var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
     var handleOnClick = useCallback(function () {
         onTabSwitch(value);
     }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 || (badgeCount && badgeCount > 0) && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
+                    (badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) })))] }) }));
 };
 export var Tabs = function (_a) {
-    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt;
+    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt, minTabWidth = _a.minTabWidth;
     return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
-            return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
+            return (_jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, minWidth: minTabWidth, onTabSwitch: onTabSwitch }, index));
         }) }));
 };

package/ui/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt }: import("../types").TabsProps) => JSX.Element;
+    component: ({ tabsDefinition, activeTab, onTabSwitch, mb, mt, minTabWidth }: import("../types").TabsProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/Tabs/styles.d.ts

@@ -5,6 +5,7 @@ export declare const RoundedWrap: import("styled-components").StyledComponent<"d
 export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     active: boolean;
     disabled?: boolean | undefined;
+    minWidth?: string | string[] | undefined;
 }, never>;
 export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $mb?: string | undefined;

package/ui/Blocks/Tabs/styles.js

@@ -7,10 +7,13 @@ export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1
 export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n"])));
 export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
 var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
-export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 8px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: 100px;\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: 120px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 8px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: 100px;\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: 120px;\n  }\n"])), function (_a) {
+export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", ";\n\n  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'auto' : 'pointer');
 }, th.color('gray'), function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth ? (Array.isArray(minWidth) ? minWidth[0] : minWidth) : '100px';
+}, function (_a) {
     var disabled = _a.disabled;
     return th.color(disabled ? 'gray' : 'typoPrimary');
 }, function (_a) {
@@ -19,6 +22,9 @@ export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTempla
 }, function (_a) {
     var active = _a.active;
     return (active ? activeTab : '');
+}, function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth ? (Array.isArray(minWidth) ? minWidth[1] : minWidth) : '120px';
 });
 export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
     var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;

package/ui/Blocks/Tabs/types.d.ts

@@ -12,12 +12,14 @@ export type TabsProps = {
     onTabSwitch: (tab: number) => void;
     mb?: string;
     mt?: string;
+    minTabWidth?: string | string[];
 };
 export type TabElementProps = {
     tabDefinition: TabDefinition;
     value: number;
     isActive: boolean;
     onTabSwitch: (tab: number) => void;
+    minWidth?: string | string[];
 };
 export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
     activeTab: number;

package/ui/index.es.js

@@ -49634,13 +49634,15 @@ const Ewe = /* @__PURE__ */ ti(Iwe), kwe = at`
   cursor: ${({
   disabled: e
 }) => e ? "auto" : "pointer"};
-  padding: 0 8px 12px;
+  padding: 0 12px 12px;
   transition: 200ms;
   color: ${V.color("gray")};
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 0.03em;
-  min-width: 100px;
+  min-width: ${({
+  minWidth: e
+}) => e ? Array.isArray(e) ? e[0] : e : "100px"};
 
   & > div {
     display: none;
@@ -49666,7 +49668,9 @@ const Ewe = /* @__PURE__ */ ti(Iwe), kwe = at`
 }) => e ? Ak : ""};
 
   @media (min-width: 400px) {
-    min-width: 120px;
+    min-width: ${({
+  minWidth: e
+}) => e ? Array.isArray(e) ? e[1] : e : "120px"};
   }
 `, Vwe = _.div`
   display: flex;
@@ -49695,28 +49699,30 @@ const Ewe = /* @__PURE__ */ ti(Iwe), kwe = at`
   tabDefinition: e,
   value: t,
   isActive: n,
-  onTabSwitch: r
+  onTabSwitch: r,
+  minWidth: i
 }) => {
   const {
-    icon: i,
-    label: o,
-    badgeCount: l,
-    disabled: c
-  } = e, d = de(() => {
+    icon: o,
+    label: l,
+    badgeCount: c,
+    disabled: d
+  } = e, f = de(() => {
     r(t);
   }, [r, t]);
-  return /* @__PURE__ */ p.jsx(Nwe, { children: /* @__PURE__ */ p.jsxs(Bwe, { onClick: c ? void 0 : d, active: n, disabled: c, children: [
-    i && /* @__PURE__ */ p.jsx(Dwe, { children: /* @__PURE__ */ p.jsx(bt, { icon: i }) }),
-    /* @__PURE__ */ p.jsx(T7, { children: o }),
-    l === 0 || l && l > 0 && /* @__PURE__ */ p.jsx(jwe, { children: /* @__PURE__ */ p.jsx(T7, { variant: "medium", children: l }) })
+  return /* @__PURE__ */ p.jsx(Nwe, { children: /* @__PURE__ */ p.jsxs(Bwe, { onClick: d ? void 0 : f, active: n, disabled: d, minWidth: i, children: [
+    o && /* @__PURE__ */ p.jsx(Dwe, { children: /* @__PURE__ */ p.jsx(bt, { icon: o }) }),
+    /* @__PURE__ */ p.jsx(T7, { children: l }),
+    c === 0 || c && c > 0 && /* @__PURE__ */ p.jsx(jwe, { children: /* @__PURE__ */ p.jsx(T7, { variant: "medium", children: c }) })
   ] }) });
 }, EIe = ({
   tabsDefinition: e,
   activeTab: t,
   onTabSwitch: n,
   mb: r,
-  mt: i
-}) => /* @__PURE__ */ p.jsx(Vwe, { $mb: r, $mt: i, children: e.map((o, l) => /* @__PURE__ */ p.jsx(Fwe, { value: l, tabDefinition: o, isActive: l === t, onTabSwitch: n }, l)) }), kIe = ({
+  mt: i,
+  minTabWidth: o
+}) => /* @__PURE__ */ p.jsx(Vwe, { $mb: r, $mt: i, children: e.map((l, c) => /* @__PURE__ */ p.jsx(Fwe, { value: c, tabDefinition: l, isActive: c === t, minWidth: o, onTabSwitch: n }, c)) }), kIe = ({
   activeTab: e,
   value: t,
   children: n

package/ui/index.umd.js

@@ -4033,13 +4033,13 @@ function print() { __p += __j.call(arguments, '') }
   align-items: center;
   justify-content: center;
   cursor: ${({disabled:e})=>e?"auto":"pointer"};
-  padding: 0 8px 12px;
+  padding: 0 12px 12px;
   transition: 200ms;
   color: ${F.color("gray")};
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 0.03em;
-  min-width: 100px;
+  min-width: ${({minWidth:e})=>e?Array.isArray(e)?e[0]:e:"100px"};
 
   & > div {
     display: none;
@@ -4059,7 +4059,7 @@ function print() { __p += __j.call(arguments, '') }
   ${({active:e})=>e?Lj:""};
 
   @media (min-width: 400px) {
-    min-width: 120px;
+    min-width: ${({minWidth:e})=>e?Array.isArray(e)?e[1]:e:"120px"};
   }
 `,_xe=Z.div`
   display: flex;
@@ -4080,7 +4080,7 @@ function print() { __p += __j.call(arguments, '') }
     background-color: ${F.color("bgLightGray1")};
     height: 2px;
   }
-`,Zxe=({tabDefinition:e,value:t,isActive:n,onTabSwitch:r})=>{const{icon:i,label:o,badgeCount:l,disabled:c}=e,d=C.useCallback(()=>{r(t)},[r,t]);return p.jsx(zxe,{children:p.jsxs(Gxe,{onClick:c?void 0:d,active:n,disabled:c,children:[i&&p.jsx(Hxe,{children:p.jsx(ht,{icon:i})}),p.jsx(Gg,{children:o}),l===0||l&&l>0&&p.jsx(Wxe,{children:p.jsx(Gg,{variant:"medium",children:l})})]})})},Uxe=({tabsDefinition:e,activeTab:t,onTabSwitch:n,mb:r,mt:i})=>p.jsx(_xe,{$mb:r,$mt:i,children:e.map((o,l)=>p.jsx(Zxe,{value:l,tabDefinition:o,isActive:l===t,onTabSwitch:n},l))}),Yxe=({activeTab:e,value:t,children:n})=>e===t?n:null,Jxe=e=>{const t=e.map(l=>l.default).indexOf(!0),n=t===-1?0:t,[r,i]=C.useState(n),o=C.useCallback(l=>{i(l)},[]);return{activeTab:r,onTabSwitch:o}},Xxe=on(Re.div)`
+`,Zxe=({tabDefinition:e,value:t,isActive:n,onTabSwitch:r,minWidth:i})=>{const{icon:o,label:l,badgeCount:c,disabled:d}=e,f=C.useCallback(()=>{r(t)},[r,t]);return p.jsx(zxe,{children:p.jsxs(Gxe,{onClick:d?void 0:f,active:n,disabled:d,minWidth:i,children:[o&&p.jsx(Hxe,{children:p.jsx(ht,{icon:o})}),p.jsx(Gg,{children:l}),c===0||c&&c>0&&p.jsx(Wxe,{children:p.jsx(Gg,{variant:"medium",children:c})})]})})},Uxe=({tabsDefinition:e,activeTab:t,onTabSwitch:n,mb:r,mt:i,minTabWidth:o})=>p.jsx(_xe,{$mb:r,$mt:i,children:e.map((l,c)=>p.jsx(Zxe,{value:c,tabDefinition:l,isActive:c===t,minWidth:o,onTabSwitch:n},c))}),Yxe=({activeTab:e,value:t,children:n})=>e===t?n:null,Jxe=e=>{const t=e.map(l=>l.default).indexOf(!0),n=t===-1?0:t,[r,i]=C.useState(n),o=C.useCallback(l=>{i(l)},[]);return{activeTab:r,onTabSwitch:o}},Xxe=on(Re.div)`
   width: calc(100vw - 20px);
   display: flex;
   min-height: 48px;