@mailstep/design-system 0.1.13 → 0.1.14-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/Blocks/Tabs/TabContent.js +9 -0
- package/ui/Blocks/Tabs/TabContent.js.map +1 -0
- package/ui/Blocks/Tabs/Tabs.js +2 -2
- package/ui/Blocks/Tabs/Tabs.js.map +1 -1
- package/ui/Blocks/Tabs/styles.js +5 -2
- package/ui/Blocks/Tabs/styles.js.map +1 -1
- package/ui/Blocks/Tabs/types.d.ts +2 -1
- package/ui/dts/Blocks/Tabs/TabContent.d.ts +1 -1
- package/ui/dts/Blocks/Tabs/Tabs.d.ts +1 -1
- package/ui/dts/Blocks/Tabs/index.d.ts +1 -2
- package/ui/dts/Blocks/Tabs/stories/Tabs.stories.d.ts +1 -1
- package/ui/dts/Blocks/Tabs/styles.d.ts +3 -1
- package/ui/dts/Blocks/Tabs/types.d.ts +2 -2
- package/ui/dts/index.d.ts +1 -2
- package/ui/index.d.ts +1 -1
- package/ui/index.js +6 -4
- package/ui/index.js.map +1 -1
- package/ui/Blocks/Tabs/index.js +0 -12
- package/ui/Blocks/Tabs/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabContent.js","sources":["../../../../packages/ui/Blocks/Tabs/TabContent.tsx"],"sourcesContent":["export var TabContent = function (_a) {\n var activeTab = _a.activeTab, value = _a.value, children = _a.children;\n return activeTab === value ? children : null;\n};\n//# sourceMappingURL=TabContent.js.map"],"names":[],"mappings":";;AAAU,IAAC,UAAU,GAAG,UAAU,EAAE,EAAE;AACtC,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC;AAC3E,IAAI,OAAO,SAAS,KAAK,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;AACjD;;;;"}
|
package/ui/Blocks/Tabs/Tabs.js
CHANGED
|
@@ -16,8 +16,8 @@ var Tab = function (_a) {
|
|
|
16
16
|
return (jsxRuntime.jsx(styles.StyledTabWrapper, { children: jsxRuntime.jsxs(styles.Tab, { onClick: handleOnClick, active: isActive, children: [icon && (jsxRuntime.jsx(styles.StyledImageBox, { children: jsxRuntime.jsx(Icon.default, { icon: icon }) })), jsxRuntime.jsx(Text.default, { children: label }), isActive && badgeCount && badgeCount > 0 && (jsxRuntime.jsx(styles.RoundedWrap, { children: jsxRuntime.jsx(Text.default, { variant: "medium", children: badgeCount }) }))] }) }));
|
|
17
17
|
};
|
|
18
18
|
var Tabs = function (_a) {
|
|
19
|
-
var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch;
|
|
20
|
-
return (jsxRuntime.jsx(styles.TabPanel, { children: tabsDefinition.map(function (item, index) {
|
|
19
|
+
var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
|
|
20
|
+
return (jsxRuntime.jsx(styles.TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
|
|
21
21
|
return jsxRuntime.jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
|
|
22
22
|
}) }));
|
|
23
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../packages/ui/Blocks/Tabs/Tabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';\nimport { Text } from '../../Elements/Text';\nimport { Icon } from '../../Elements/Icon';\nvar Tab = function (_a) {\n var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;\n var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;\n var handleOnClick = useCallback(function () {\n onTabSwitch(value);\n }, [onTabSwitch, value]);\n return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: \"medium\", children: badgeCount }) }))] }) }));\n};\nexport var Tabs = function (_a) {\n var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch;\n return (_jsx(TabPanel, { children: tabsDefinition.map(function (item, index) {\n return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);\n }) }));\n};\n//# sourceMappingURL=Tabs.js.map"],"names":["useCallback","_jsx","StyledTabWrapper","_jsxs","StyledTab","StyledImageBox","Icon","Text","RoundedWrap","TabPanel"],"mappings":";;;;;;;;;AAKA,IAAI,GAAG,GAAG,UAAU,EAAE,EAAE;AACxB,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;AACjH,IAAI,IAAI,IAAI,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;AACtG,IAAI,IAAI,aAAa,GAAGA,iBAAW,CAAC,YAAY;AAChD,QAAQ,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7B,IAAI,QAAQC,cAAI,CAACC,uBAAgB,EAAE,EAAE,QAAQ,EAAEC,eAAK,CAACC,UAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAKH,cAAI,CAACI,qBAAc,EAAE,EAAE,QAAQ,EAAEJ,cAAI,CAACK,YAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEL,cAAI,CAACM,YAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,IAAI,UAAU,IAAI,UAAU,GAAG,CAAC,KAAKN,cAAI,CAACO,kBAAW,EAAE,EAAE,QAAQ,EAAEP,cAAI,CAACM,YAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACjX,CAAC,CAAC;AACQ,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../packages/ui/Blocks/Tabs/Tabs.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';\nimport { Text } from '../../Elements/Text';\nimport { Icon } from '../../Elements/Icon';\nvar Tab = function (_a) {\n var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;\n var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;\n var handleOnClick = useCallback(function () {\n onTabSwitch(value);\n }, [onTabSwitch, value]);\n return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: \"medium\", children: badgeCount }) }))] }) }));\n};\nexport var Tabs = function (_a) {\n var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;\n return (_jsx(TabPanel, { \"$mb\": mb, children: tabsDefinition.map(function (item, index) {\n return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);\n }) }));\n};\n//# sourceMappingURL=Tabs.js.map"],"names":["useCallback","_jsx","StyledTabWrapper","_jsxs","StyledTab","StyledImageBox","Icon","Text","RoundedWrap","TabPanel"],"mappings":";;;;;;;;;AAKA,IAAI,GAAG,GAAG,UAAU,EAAE,EAAE;AACxB,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC;AACjH,IAAI,IAAI,IAAI,GAAG,aAAa,CAAC,IAAI,EAAE,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC;AACtG,IAAI,IAAI,aAAa,GAAGA,iBAAW,CAAC,YAAY;AAChD,QAAQ,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3B,KAAK,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7B,IAAI,QAAQC,cAAI,CAACC,uBAAgB,EAAE,EAAE,QAAQ,EAAEC,eAAK,CAACC,UAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAKH,cAAI,CAACI,qBAAc,EAAE,EAAE,QAAQ,EAAEJ,cAAI,CAACK,YAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEL,cAAI,CAACM,YAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,IAAI,UAAU,IAAI,UAAU,GAAG,CAAC,KAAKN,cAAI,CAACO,kBAAW,EAAE,EAAE,QAAQ,EAAEP,cAAI,CAACM,YAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACjX,CAAC,CAAC;AACQ,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;AAC/G,IAAI,QAAQN,cAAI,CAACQ,eAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,UAAU,IAAI,EAAE,KAAK,EAAE;AAC5F,YAAY,OAAOR,cAAI,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAK,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC;AACpI,SAAS,CAAC,EAAE,CAAC,EAAE;AACf;;;;"}
|
package/ui/Blocks/Tabs/styles.js
CHANGED
|
@@ -11,11 +11,14 @@ var StyledImageBox = styled__default.default(styled.x.div)(templateObject_1 || (
|
|
|
11
11
|
var StyledTabWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
|
|
12
12
|
var RoundedWrap = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib.__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"])), styled.th.color('lightGray7'));
|
|
13
13
|
var activeTab = styled.css(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n color: ", ";\n position: relative;\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 position: relative;\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"])), styled.th.color('red1'), styled.th.color('red1'), styled.th.color('typoPrimary'));
|
|
14
|
-
var Tab = styled__default.default.div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n padding: 0.6rem;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n height: 46px;\n letter-spacing: 0.03em;\n margin-top: 10px;\n min-width: 120px;\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 display: inline-flex;\n align-items: center;\n cursor: pointer;\n padding: 0.6rem;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n height: 46px;\n letter-spacing: 0.03em;\n margin-top: 10px;\n min-width: 120px;\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"])), styled.th.color('gray'), styled.th.color('typoPrimary'), activeTab, function (_a) {
|
|
14
|
+
var Tab = styled__default.default.div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0.6rem;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n height: 46px;\n letter-spacing: 0.03em;\n margin-top: 10px;\n min-width: 120px;\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 display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0.6rem;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n height: 46px;\n letter-spacing: 0.03em;\n margin-top: 10px;\n min-width: 120px;\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"])), styled.th.color('gray'), styled.th.color('typoPrimary'), activeTab, function (_a) {
|
|
15
15
|
var active = _a.active;
|
|
16
16
|
return (active ? activeTab : '');
|
|
17
17
|
});
|
|
18
|
-
var TabPanel = styled__default.default.div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\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 min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 2px;\n }\n"])),
|
|
18
|
+
var TabPanel = styled__default.default.div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\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 min-height: 3rem;\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\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) {
|
|
19
|
+
var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
|
|
20
|
+
return $mb;
|
|
21
|
+
}, styled.th.color('bgLightGray1'));
|
|
19
22
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
20
23
|
|
|
21
24
|
exports.RoundedWrap = RoundedWrap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Tabs/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { css, th, x } from '@xstyled/styled-components';\nexport var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n margin-right: 1em;\\n\"], [\"\\n margin-right: 1em;\\n\"])));\nexport var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n display: flex;\\n flex-direction: row;\\n align-items: baseline;\\n\"], [\"\\n display: flex;\\n flex-direction: row;\\n align-items: baseline;\\n\"])));\nexport 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'));\nvar activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n color: \", \";\\n position: relative;\\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 position: relative;\\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'));\nexport var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n padding: 0.6rem;\\n transition: 200ms;\\n color: \", \";\\n font-weight: bold;\\n font-size: 14px;\\n height: 46px;\\n letter-spacing: 0.03em;\\n margin-top: 10px;\\n min-width: 120px;\\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 display: inline-flex;\\n align-items: center;\\n cursor: pointer;\\n padding: 0.6rem;\\n transition: 200ms;\\n color: \", \";\\n font-weight: bold;\\n font-size: 14px;\\n height: 46px;\\n letter-spacing: 0.03em;\\n margin-top: 10px;\\n min-width: 120px;\\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\"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {\n var active = _a.active;\n return (active ? activeTab : '');\n});\nexport var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\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 min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\n &:after {\\n content: '';\\n position: absolute;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n background-color: \", \";\\n height: 2px;\\n }\\n\"])), th.color('bgLightGray1'));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;\n//# sourceMappingURL=styles.js.map"],"names":["styled","x","__makeTemplateObject","th","css"],"mappings":";;;;;;;;;AAEU,IAAC,cAAc,GAAGA,uBAAM,CAACC,QAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;AAC3J,IAAC,gBAAgB,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,wEAAwE,CAAC,EAAE,CAAC,wEAAwE,CAAC,CAAC,CAAC,EAAE;AACtP,IAAC,WAAW,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,EAAE,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;AAC3gB,IAAI,SAAS,GAAGC,UAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGF,0BAAoB,CAAC,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,EAAE,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;AACptB,IAAC,GAAG,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Tabs/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { css, th, x } from '@xstyled/styled-components';\nexport var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n margin-right: 1em;\\n\"], [\"\\n margin-right: 1em;\\n\"])));\nexport var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n display: flex;\\n flex-direction: row;\\n align-items: baseline;\\n\"], [\"\\n display: flex;\\n flex-direction: row;\\n align-items: baseline;\\n\"])));\nexport 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'));\nvar activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n color: \", \";\\n position: relative;\\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 position: relative;\\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'));\nexport var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n padding: 0.6rem;\\n transition: 200ms;\\n color: \", \";\\n font-weight: bold;\\n font-size: 14px;\\n height: 46px;\\n letter-spacing: 0.03em;\\n margin-top: 10px;\\n min-width: 120px;\\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 display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n padding: 0.6rem;\\n transition: 200ms;\\n color: \", \";\\n font-weight: bold;\\n font-size: 14px;\\n height: 46px;\\n letter-spacing: 0.03em;\\n margin-top: 10px;\\n min-width: 120px;\\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\"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {\n var active = _a.active;\n return (active ? activeTab : '');\n});\nexport var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\n margin-bottom: \", \";\\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 min-height: 3rem;\\n display: flex;\\n align-items: flex-end;\\n overflow: auto;\\n width: fit-content;\\n position: relative;\\n margin-bottom: \", \";\\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) {\n var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;\n return $mb;\n}, th.color('bgLightGray1'));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;\n//# sourceMappingURL=styles.js.map"],"names":["styled","x","__makeTemplateObject","th","css"],"mappings":";;;;;;;;;AAEU,IAAC,cAAc,GAAGA,uBAAM,CAACC,QAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;AAC3J,IAAC,gBAAgB,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,wEAAwE,CAAC,EAAE,CAAC,wEAAwE,CAAC,CAAC,CAAC,EAAE;AACtP,IAAC,WAAW,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,EAAE,CAAC,0HAA0H,EAAE,wEAAwE,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;AAC3gB,IAAI,SAAS,GAAGC,UAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGF,0BAAoB,CAAC,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,EAAE,CAAC,aAAa,EAAE,uJAAuJ,EAAE,+GAA+G,EAAE,UAAU,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;AACptB,IAAC,GAAG,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,wJAAwJ,EAAE,4PAA4P,EAAE,6BAA6B,EAAE,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC,wJAAwJ,EAAE,4PAA4P,EAAE,6BAA6B,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;AAC3jC,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC;AAC3B,IAAI,QAAQ,MAAM,GAAG,SAAS,GAAG,EAAE,EAAE;AACrC,CAAC,EAAE;AACO,IAAC,QAAQ,GAAGH,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGE,0BAAoB,CAAC,CAAC,uJAAuJ,EAAE,gIAAgI,EAAE,4BAA4B,CAAC,EAAE,CAAC,uJAAuJ,EAAE,gIAAgI,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AACpuB,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAClD,IAAI,OAAO,GAAG,CAAC;AACf,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;AAC7B,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;;;;;"}
|
|
@@ -8,6 +8,7 @@ type TabsProps = {
|
|
|
8
8
|
tabsDefinition: TabDefinition[];
|
|
9
9
|
activeTab: number;
|
|
10
10
|
onTabSwitch: (tab: number) => void;
|
|
11
|
+
mb?: string;
|
|
11
12
|
};
|
|
12
13
|
type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
|
|
13
14
|
activeTab: number;
|
|
@@ -16,7 +17,7 @@ type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
|
|
|
16
17
|
type TabContentProps = {
|
|
17
18
|
activeTab: number;
|
|
18
19
|
value: number;
|
|
19
|
-
children:
|
|
20
|
+
children: Element | null;
|
|
20
21
|
};
|
|
21
22
|
|
|
22
23
|
export { TabContentProps, TabDefinition, TabsProps, UseTabsHook };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TabContentProps } from './types';
|
|
2
|
-
export declare const TabContent: ({ activeTab, value, children }: TabContentProps) =>
|
|
2
|
+
export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => Element | null;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TabsProps } from './types';
|
|
3
|
-
export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch }: TabsProps) => JSX.Element;
|
|
3
|
+
export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb }: TabsProps) => JSX.Element;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ tabsDefinition, activeTab, onTabSwitch }: import("../types").TabsProps) => JSX.Element;
|
|
5
|
+
component: ({ tabsDefinition, activeTab, onTabSwitch, mb }: import("../types").TabsProps) => JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
argTypes: {};
|
|
8
8
|
};
|
|
@@ -5,4 +5,6 @@ export declare const RoundedWrap: import("styled-components").StyledComponent<"d
|
|
|
5
5
|
export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
6
6
|
active: boolean;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
8
|
+
export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
9
|
+
$mb?: string | undefined;
|
|
10
|
+
}, never>;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
export type TabDefinition = {
|
|
3
2
|
label: string;
|
|
4
3
|
icon?: string;
|
|
@@ -9,6 +8,7 @@ export type TabsProps = {
|
|
|
9
8
|
tabsDefinition: TabDefinition[];
|
|
10
9
|
activeTab: number;
|
|
11
10
|
onTabSwitch: (tab: number) => void;
|
|
11
|
+
mb?: string;
|
|
12
12
|
};
|
|
13
13
|
export type TabElementProps = {
|
|
14
14
|
tabDefinition: TabDefinition;
|
|
@@ -23,5 +23,5 @@ export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
|
|
|
23
23
|
export type TabContentProps = {
|
|
24
24
|
activeTab: number;
|
|
25
25
|
value: number;
|
|
26
|
-
children:
|
|
26
|
+
children: Element | null;
|
|
27
27
|
};
|
package/ui/dts/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import CornerDialog from './Blocks/CornerDialog';
|
|
|
2
2
|
import ImageList from './Blocks/ImageList';
|
|
3
3
|
import LightBox from './Blocks/LightBox';
|
|
4
4
|
import Modal from './Blocks/Modal';
|
|
5
|
-
import Tabs from './Blocks/Tabs';
|
|
6
5
|
import Alert from './Elements/Alert';
|
|
7
6
|
import Avatar from './Elements/Avatar';
|
|
8
7
|
import Badge from './Elements/Badge';
|
|
@@ -33,7 +32,7 @@ import Input from './Forms/Input';
|
|
|
33
32
|
import RadioButton from './Forms/RadioButton';
|
|
34
33
|
import ThemeProvider from './ThemeProvider';
|
|
35
34
|
import utils from './utils';
|
|
36
|
-
export { Card, CornerDialog, ImageList, LightBox, Modal,
|
|
35
|
+
export { Card, CornerDialog, ImageList, LightBox, Modal, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils };
|
|
37
36
|
export * from './Blocks/CornerDialog';
|
|
38
37
|
export * from './Blocks/ImageList';
|
|
39
38
|
export * from './Blocks/LightBox';
|
package/ui/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ export { CornerDialog } from './Blocks/CornerDialog/index.js';
|
|
|
2
2
|
export { ImageList } from './Blocks/ImageList/index.js';
|
|
3
3
|
export { LightBox, useLightBox } from './Blocks/LightBox/index.js';
|
|
4
4
|
export { default as Modal, useClickOutside, useModal } from './Blocks/Modal/index.js';
|
|
5
|
-
export { TabContent, Tabs, useTabs } from './Blocks/Tabs/index.js';
|
|
6
5
|
export { default as Alert } from './Elements/Alert/index.js';
|
|
7
6
|
export { default as Avatar } from './Elements/Avatar/index.js';
|
|
8
7
|
export { default as Badge } from './Elements/Badge/index.js';
|
|
@@ -33,6 +32,7 @@ export { default as Input } from './Forms/Input/index.js';
|
|
|
33
32
|
export { default as RadioButton } from './Forms/RadioButton/index.js';
|
|
34
33
|
export { default as ThemeProvider, themes } from './ThemeProvider/index.js';
|
|
35
34
|
export { createRgba, default as utils } from './utils/index.js';
|
|
35
|
+
export { TabContent, Tabs, useTabs } from './Blocks/Tabs/index.js';
|
|
36
36
|
export { CornerDialogProps, Intent } from './Blocks/CornerDialog/types.js';
|
|
37
37
|
export { ImageData } from './Blocks/LightBox/types.js';
|
|
38
38
|
export { ImageUploadProps } from './Blocks/ImageList/types.js';
|
package/ui/index.js
CHANGED
|
@@ -7,8 +7,6 @@ var useLightBox = require('./Blocks/LightBox/hooks/useLightBox.js');
|
|
|
7
7
|
var Modal = require('./Blocks/Modal/Modal.js');
|
|
8
8
|
var useModal = require('./Blocks/Modal/hooks/useModal.js');
|
|
9
9
|
var useClickOutside = require('./Blocks/Modal/hooks/useClickOutside.js');
|
|
10
|
-
var Tabs = require('./Blocks/Tabs/Tabs.js');
|
|
11
|
-
var useTabs = require('./Blocks/Tabs/hooks/useTabs.js');
|
|
12
10
|
var Alert = require('./Elements/Alert/Alert.js');
|
|
13
11
|
var Avatar = require('./Elements/Avatar/Avatar.js');
|
|
14
12
|
var Badge = require('./Elements/Badge/Badge.js');
|
|
@@ -58,6 +56,9 @@ var RadioButton = require('./Forms/RadioButton/RadioButton.js');
|
|
|
58
56
|
var ThemeProvider = require('./ThemeProvider/ThemeProvider.js');
|
|
59
57
|
var index$2 = require('./ThemeProvider/themes/index.js');
|
|
60
58
|
var index$1 = require('./utils/index.js');
|
|
59
|
+
var Tabs = require('./Blocks/Tabs/Tabs.js');
|
|
60
|
+
var TabContent = require('./Blocks/Tabs/TabContent.js');
|
|
61
|
+
var useTabs = require('./Blocks/Tabs/hooks/useTabs.js');
|
|
61
62
|
var createRgba = require('./utils/CreateRgba/createRgba.js');
|
|
62
63
|
var KeyPress = require('./utils/KeyPress/KeyPress.js');
|
|
63
64
|
|
|
@@ -70,8 +71,6 @@ exports.useLightBox = useLightBox.useLightBox;
|
|
|
70
71
|
exports.Modal = Modal.Modal;
|
|
71
72
|
exports.useModal = useModal.useModal;
|
|
72
73
|
exports.useClickOutside = useClickOutside.useClickOutside;
|
|
73
|
-
exports.Tabs = Tabs.Tabs;
|
|
74
|
-
exports.useTabs = useTabs.useTabs;
|
|
75
74
|
exports.Alert = Alert.default;
|
|
76
75
|
exports.Avatar = Avatar.Avatar;
|
|
77
76
|
exports.Badge = Badge.default;
|
|
@@ -139,6 +138,9 @@ exports.RadioButton = RadioButton.default;
|
|
|
139
138
|
exports.ThemeProvider = ThemeProvider.default;
|
|
140
139
|
exports.themes = index$2.default;
|
|
141
140
|
exports.utils = index$1.default;
|
|
141
|
+
exports.Tabs = Tabs.Tabs;
|
|
142
|
+
exports.TabContent = TabContent.TabContent;
|
|
143
|
+
exports.useTabs = useTabs.useTabs;
|
|
142
144
|
exports.createRgba = createRgba.createRgba;
|
|
143
145
|
exports.KeyPress = KeyPress.default;
|
|
144
146
|
//# sourceMappingURL=index.js.map
|
package/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/ui/Blocks/Tabs/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|