@itcase/ui-web 1.10.0 → 1.10.2
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/dist/cjs/components/Tab.js +1 -1
- package/dist/components/Tab.js +1 -1
- package/dist/css/styles/bundles.css +35 -27
- package/dist/types/components/Tab/Tab.appearance.d.ts +8 -0
- package/dist/types/components/Tab/Tab.interface.d.ts +3 -2
- package/dist/types/components/Tab/Tab.js +2 -2
- package/dist/types/components/Tab/appearance/tabSize.d.ts +8 -0
- package/dist/types/components/Tab/appearance/tabSize.js +8 -0
- package/package.json +3 -3
- package/dist/types/components/Dropzone/appearance/default.d.ts +0 -20
- package/dist/types/components/Dropzone/appearance/default.js +0 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("clsx"),a=require("@itcase/ui-core/hooks"),l=require("@itcase/ui-core/utils"),s=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc");const c={warningPrimary:{fill:"warningPrimary",fillDisabled:"disabledPrimary",labelColor:"warningTextPrimary",labelColorActive:"warningTextPrimary",badgeAppearance:"warningPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"disabledPrimary"},errorPrimary:{fill:"errorPrimary",fillDisabled:"disabledPrimary",labelColor:"errorTextPrimary",labelColorActive:"errorTextPrimary",labelColorDisabled:"errorTextDisabled",badgeAppearance:"errorPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"errorDisabled"},successPrimary:{fill:"successPrimary",fillDisabled:"successDisabled",labelColor:"successTextPrimary",labelColorActive:"successTextPrimary",labelColorDisabled:"successTextDisabled",badgeAppearance:"successPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"successDisabled"},surfacePrimary:{fill:"surfacePrimary",fillActive:"surfaceActivePrimary",fillActiveHover:"surfaceHoverSecondary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFill:"surfacePrimary",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillActive:"accentActivePrimary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverQuaternary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},sizeXXL:{size:"xxl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXL:{size:"xl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeL:{size:"l",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeM:{size:"m",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeS:{size:"s",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXS:{size:"xs",labelTextSize:"xs",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXXS:{size:"xxs",labelTextSize:"xs",badgeAppearanceSize:"sizeXXS",dividerSize:"s",dividerSizeActive:"m"},solid:{borderColor:"none",borderColorActive:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none",borderColorActive:"none",dividerFill:"none"}},t={appearance:c,setAppearance:e=>{t.appearance=e}};function o(c){const{appearance:o,className:d,dataTestId:n,dataTour:b,label:v,badgeValue:u,href:p,link:f,rel:y,target:m,before:x,after:A,isActive:z=!1,isDisabled:S=!1,isSkeleton:C,onClick:g,onMouseEnter:P,children:T}=c,_=a.useAppearanceConfig(o,t,S),D=a.useDevicePropsGenerator(c,_),{rootClasses:h}=a.useActiveClasses({propsGenerator:D,isActive:z,isDisabled:S}),{justifyContentClass:F,alignClass:H,labelTextAlign:j,labelTextColor:w,labelTextColorActive:$,labelTextColorHover:I,labelTextSize:X,labelTextStyle:k,labelTextWeight:B,labelTextWrap:M,badgeAppearance:N,badgeAppearanceSize:q,badgeShape:L,badgeSize:W,badgeTextColor:G,badgeTextSize:Q,dividerFill:V,dividerFillActive:E,dividerFillActiveHover:K,dividerFillDisabled:O,dividerFillHover:J,dividerSize:R,dividerSizeActive:U,icon:Y,iconFill:Z,iconFillIcon:ee,iconFillSize:ie,iconShape:re,iconSize:ae,iconSrc:le,linkFill:se,shapeClass:ce,sizeClass:te,widthClass:oe}=D,{styles:de}=a.useStyles(c);return e.jsx("div",{className:r("tab",d,h,z&&"tab_state_active",S&&"tab_state_disabled",te&&`tab_size_${te}`,ce&&`shape_${ce}`,oe&&`width_${oe}`,F&&`tab_justify-content_${F}`,C&&"skeleton",g&&"cursor_type_pointer"),"data-testid":n&&`${n}Tab`,"data-tour":b,style:de,onClick:g,onMouseEnter:P,children:e.jsxs(s.Link,{className:r("tab__link",!S&&"cursor_type_pointer"),fill:se,href:f||p,rel:y,target:m,children:[x,T||e.jsxs(i.Fragment,{children:[e.jsxs("div",{className:r("tab__wrapper",H&&`align_${H}`),children:[v&&e.jsx(s.Text,{className:"tab__label",size:X,textAlign:j,textColor:w,textColorActive:$,textColorHover:I,textStyle:k,textWeight:B,textWrap:M,isActive:z,isDisabled:S,children:v}),Boolean(u)&&e.jsx(s.Badge,{appearance:l.mergeAppearanceKeys(N,q),size:W,textColor:G,textSize:Q,shape:L,value:u}),(Y||le)&&e.jsx(s.Icon,{className:"tab__icon_after",fill:Z,fillSize:ie,iconFill:ee,iconSize:ae,imageSrc:le,shape:re,SvgImage:Y})]}),z,e.jsx(s.Divider,{className:"tab__divider",width:"fill",direction:"horizontal",size:z?U:R,fill:V,fillActive:E,fillActiveHover:K,fillDisabled:O,fillHover:J,zIndex:"1",isActive:z,isDisabled:S})]}),A]})})}exports.Tab=o,exports.TabGroup=function(l){const{className:s,dataTestId:c,dataTour:t,horizontalScroll:d,style:n,tabAppearance:b,tabList:v,children:u}=l,p=a.useDevicePropsGenerator(l),{directionClass:f,alignClass:y,alignDirectionClass:m,fillClass:x,borderColorClass:A,borderTypeClass:z,borderWidthClass:S,widthClass:C,wrapClass:g}=p,{styles:P,wrapper:T}=a.useStyles(l);return e.jsx("div",{className:r(s,"tab-group","group",C&&`width_${C}`,m&&`align_${m}`,f&&`group_direction_${f}`,y&&`align_${y}`,x&&`fill_${x}`,d&&"group_scroll_horizontal",g&&`group_wrap_${g}`,A&&`border-color_${A}`,S&&`border-width_${S}`,z&&`border_type_${z}`),"data-testid":c,"data-tour":t,style:Object.assign({},P,n),children:d?e.jsxs("div",{className:"tab-group__wrapper",style:T,children:[v?.map(i=>e.jsx(o,{appearance:b,label:i.label,isActive:i.isActive},i.key)),u]}):e.jsxs(i.Fragment,{children:[v?.map(i=>e.jsx(o,{appearance:b,label:i.label,badgeValue:i.badgeValue,icon:i.icon,iconSrc:i.iconSrc,isActive:i.isActive,onClick:i.onClick},i.key)),u]})})},exports.tabAppearance=c,exports.tabConfig=t;
|
package/dist/components/Tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import r from"react";import a from"clsx";import{useAppearanceConfig as l,useDevicePropsGenerator as s,useActiveClasses as c,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as o}from"@itcase/ui-core/utils";import{L as d,T as n,B as b,I as v,D as m}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";const f={warningPrimary:{fill:"warningPrimary",fillDisabled:"disabledPrimary",labelColor:"warningTextPrimary",labelColorActive:"warningTextPrimary",badgeAppearance:"warningPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"disabledPrimary"},errorPrimary:{fill:"errorPrimary",fillDisabled:"disabledPrimary",labelColor:"errorTextPrimary",labelColorActive:"errorTextPrimary",labelColorDisabled:"errorTextDisabled",badgeAppearance:"errorPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"errorDisabled"},successPrimary:{fill:"successPrimary",fillDisabled:"successDisabled",labelColor:"successTextPrimary",labelColorActive:"successTextPrimary",labelColorDisabled:"successTextDisabled",badgeAppearance:"successPrimary sizeM solid rounded",dividerFill:"accentPrimary",dividerFillDisabled:"successDisabled"},surfacePrimary:{fill:"surfacePrimary",fillActive:"surfaceActivePrimary",fillActiveHover:"surfaceHoverSecondary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFill:"surfacePrimary",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillActive:"accentActivePrimary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverQuaternary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillActive:"surfaceActiveSecondary",fillActiveHover:"surfaceHoverTertiary",fillDisabled:"surfaceDisabled",fillHover:"surfaceHoverSecondary",labelTextColor:"surfaceTextPrimary",labelTextColorActive:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderColorActive:"surfaceBorderActivePrimary",badgeAppearance:"accentPrimary sizeM solid circular",dividerFillActive:"accentPrimary",dividerFillDisabled:"accentDisabled",iconFillIcon:"surfaceItemPrimary"},sizeXXL:{size:"xxl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXL:{size:"xl",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeL:{size:"l",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeM:{size:"m",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeS:{size:"s",labelTextSize:"s",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXS:{size:"xs",labelTextSize:"xs",badgeAppearanceSize:"sizeXS",dividerSize:"s",dividerSizeActive:"m"},sizeXXS:{size:"xxs",labelTextSize:"xs",badgeAppearanceSize:"sizeXXS",dividerSize:"s",dividerSizeActive:"m"},solid:{borderColor:"none",borderColorActive:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none",borderColorActive:"none",dividerFill:"none"}},p={appearance:f,setAppearance:e=>{p.appearance=e}};function u(f){const{appearance:u,className:y,dataTestId:z,dataTour:A,label:S,badgeValue:x,href:C,link:g,rel:P,target:T,before:_,after:D,isActive:h=!1,isDisabled:F=!1,isSkeleton:H,onClick:w,onMouseEnter:$,children:I}=f,X=l(u,p,F),k=s(f,X),{rootClasses:B}=c({propsGenerator:k,isActive:h,isDisabled:F}),{justifyContentClass:M,alignClass:N,labelTextAlign:j,labelTextColor:L,labelTextColorActive:W,labelTextColorHover:Q,labelTextSize:V,labelTextStyle:E,labelTextWeight:G,labelTextWrap:O,badgeAppearance:q,badgeAppearanceSize:J,badgeShape:K,badgeSize:R,badgeTextColor:U,badgeTextSize:Y,dividerFill:Z,dividerFillActive:ee,dividerFillActiveHover:ie,dividerFillDisabled:re,dividerFillHover:ae,dividerSize:le,dividerSizeActive:se,icon:ce,iconFill:te,iconFillIcon:oe,iconFillSize:de,iconShape:ne,iconSize:be,iconSrc:ve,linkFill:me,shapeClass:fe,sizeClass:pe,widthClass:ue}=k,{styles:ye}=t(f);return e("div",{className:a("tab",y,B,h&&"tab_state_active",F&&"tab_state_disabled",pe&&`tab_size_${pe}`,fe&&`shape_${fe}`,ue&&`width_${ue}`,M&&`tab_justify-content_${M}`,H&&"skeleton",w&&"cursor_type_pointer"),"data-testid":z&&`${z}Tab`,"data-tour":A,style:ye,onClick:w,onMouseEnter:$,children:i(d,{className:a("tab__link",!F&&"cursor_type_pointer"),fill:me,href:g||C,rel:P,target:T,children:[_,I||i(r.Fragment,{children:[i("div",{className:a("tab__wrapper",N&&`align_${N}`),children:[S&&e(n,{className:"tab__label",size:V,textAlign:j,textColor:L,textColorActive:W,textColorHover:Q,textStyle:E,textWeight:G,textWrap:O,isActive:h,isDisabled:F,children:S}),Boolean(x)&&e(b,{appearance:o(q,J),size:R,textColor:U,textSize:Y,shape:K,value:x}),(ce||ve)&&e(v,{className:"tab__icon_after",fill:te,fillSize:de,iconFill:oe,iconSize:be,imageSrc:ve,shape:ne,SvgImage:ce})]}),h,e(m,{className:"tab__divider",width:"fill",direction:"horizontal",size:h?se:le,fill:Z,fillActive:ee,fillActiveHover:ie,fillDisabled:re,fillHover:ae,zIndex:"1",isActive:h,isDisabled:F})]}),D]})})}function y(l){const{className:c,dataTestId:o,dataTour:d,horizontalScroll:n,style:b,tabAppearance:v,tabList:m,children:f}=l,p=s(l),{directionClass:y,alignClass:z,alignDirectionClass:A,fillClass:S,borderColorClass:x,borderTypeClass:C,borderWidthClass:g,widthClass:P,wrapClass:T}=p,{styles:_,wrapper:D}=t(l);return e("div",{className:a(c,"tab-group","group",P&&`width_${P}`,A&&`align_${A}`,y&&`group_direction_${y}`,z&&`align_${z}`,S&&`fill_${S}`,n&&"group_scroll_horizontal",T&&`group_wrap_${T}`,x&&`border-color_${x}`,g&&`border-width_${g}`,C&&`border_type_${C}`),"data-testid":o,"data-tour":d,style:Object.assign({},_,b),children:n?i("div",{className:"tab-group__wrapper",style:D,children:[m?.map(i=>e(u,{appearance:v,label:i.label,isActive:i.isActive},i.key)),f]}):i(r.Fragment,{children:[m?.map(i=>e(u,{appearance:v,label:i.label,badgeValue:i.badgeValue,icon:i.icon,iconSrc:i.iconSrc,isActive:i.isActive,onClick:i.onClick},i.key)),f]})})}export{u as Tab,y as TabGroup,f as tabAppearance,p as tabConfig};
|
|
@@ -38307,7 +38307,7 @@ textarea.fill {
|
|
|
38307
38307
|
&_rounded {
|
|
38308
38308
|
border-radius: 8px;
|
|
38309
38309
|
}
|
|
38310
|
-
&_rounded-s {
|
|
38310
|
+
&_rounded-s, {
|
|
38311
38311
|
border-radius: 0.5m;
|
|
38312
38312
|
}
|
|
38313
38313
|
&_rounded-m {
|
|
@@ -38316,7 +38316,8 @@ textarea.fill {
|
|
|
38316
38316
|
&_rounded-l {
|
|
38317
38317
|
border-radius: 1.5m;
|
|
38318
38318
|
}
|
|
38319
|
-
&_rounded-x-l
|
|
38319
|
+
&_rounded-x-l,
|
|
38320
|
+
&_rounded-xl {
|
|
38320
38321
|
border-radius: 2m;
|
|
38321
38322
|
}
|
|
38322
38323
|
&_circular {
|
|
@@ -61855,7 +61856,9 @@ h2.react-datepicker__current-month {
|
|
|
61855
61856
|
opacity: 0%;
|
|
61856
61857
|
}
|
|
61857
61858
|
}
|
|
61859
|
+
.form-dropzone,
|
|
61858
61860
|
.dropzone {
|
|
61861
|
+
flex: 1;
|
|
61859
61862
|
flex-direction: column;
|
|
61860
61863
|
&__dropzone {
|
|
61861
61864
|
width: 100%;
|
|
@@ -61863,32 +61866,9 @@ h2.react-datepicker__current-month {
|
|
|
61863
61866
|
z-index: 1;
|
|
61864
61867
|
outline: 0;
|
|
61865
61868
|
@mixin easing easeOutQuart, all, 0.2s;
|
|
61866
|
-
&_size {
|
|
61867
|
-
&_xl {
|
|
61868
|
-
^^&-wrapper {
|
|
61869
|
-
padding: var(--dropzone-size-xl-padding);
|
|
61870
|
-
}
|
|
61871
|
-
}
|
|
61872
|
-
&_l {
|
|
61873
|
-
^^&-wrapper {
|
|
61874
|
-
padding: var(--dropzone-size-l-padding);
|
|
61875
|
-
}
|
|
61876
|
-
}
|
|
61877
|
-
&_m {
|
|
61878
|
-
^^&-wrapper {
|
|
61879
|
-
padding: var(--dropzone-size-m-padding);
|
|
61880
|
-
}
|
|
61881
|
-
}
|
|
61882
|
-
&_s {
|
|
61883
|
-
^^&-wrapper {
|
|
61884
|
-
padding: var(--dropzone-size-s-padding);
|
|
61885
|
-
}
|
|
61886
|
-
}
|
|
61887
|
-
}
|
|
61888
61869
|
&-wrapper {
|
|
61889
61870
|
display: grid;
|
|
61890
61871
|
gap: 16px;
|
|
61891
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
61892
61872
|
transition: var(--dropzone-transition);
|
|
61893
61873
|
}
|
|
61894
61874
|
^&__hint {
|
|
@@ -61897,9 +61877,10 @@ h2.react-datepicker__current-month {
|
|
|
61897
61877
|
text-align: center;
|
|
61898
61878
|
display: flex;
|
|
61899
61879
|
flex-flow: column nowrap;
|
|
61900
|
-
align-items: center;
|
|
61901
61880
|
cursor: pointer;
|
|
61902
|
-
place-content: center
|
|
61881
|
+
place-content: center;
|
|
61882
|
+
grid-column-start: 1;
|
|
61883
|
+
grid-column-end: 10;
|
|
61903
61884
|
&-title {
|
|
61904
61885
|
padding: 0 0 8px 0;
|
|
61905
61886
|
margin: 0;
|
|
@@ -61985,6 +61966,33 @@ h2.react-datepicker__current-month {
|
|
|
61985
61966
|
}
|
|
61986
61967
|
}
|
|
61987
61968
|
}
|
|
61969
|
+
.form-dropzone,
|
|
61970
|
+
.dropzone {
|
|
61971
|
+
&__dropzone {
|
|
61972
|
+
&_size {
|
|
61973
|
+
&_xl {
|
|
61974
|
+
^^&-wrapper {
|
|
61975
|
+
padding: var(--dropzone-size-xl-padding);
|
|
61976
|
+
}
|
|
61977
|
+
}
|
|
61978
|
+
&_l {
|
|
61979
|
+
^^&-wrapper {
|
|
61980
|
+
padding: var(--dropzone-size-l-padding);
|
|
61981
|
+
}
|
|
61982
|
+
}
|
|
61983
|
+
&_m {
|
|
61984
|
+
^^&-wrapper {
|
|
61985
|
+
padding: var(--dropzone-size-m-padding);
|
|
61986
|
+
}
|
|
61987
|
+
}
|
|
61988
|
+
&_s {
|
|
61989
|
+
^^&-wrapper {
|
|
61990
|
+
padding: var(--dropzone-size-s-padding);
|
|
61991
|
+
}
|
|
61992
|
+
}
|
|
61993
|
+
}
|
|
61994
|
+
}
|
|
61995
|
+
}
|
|
61988
61996
|
.dropzone {
|
|
61989
61997
|
&&_type_avatar {
|
|
61990
61998
|
width: 144px;
|
|
@@ -18,41 +18,49 @@ declare const tabAppearance: {
|
|
|
18
18
|
labelTextSize: "s";
|
|
19
19
|
badgeAppearanceSize: "sizeXS";
|
|
20
20
|
dividerSize: "s";
|
|
21
|
+
dividerSizeActive: "m";
|
|
21
22
|
};
|
|
22
23
|
sizeXL: {
|
|
23
24
|
size: "xl";
|
|
24
25
|
labelTextSize: "s";
|
|
25
26
|
badgeAppearanceSize: "sizeXS";
|
|
26
27
|
dividerSize: "s";
|
|
28
|
+
dividerSizeActive: "m";
|
|
27
29
|
};
|
|
28
30
|
sizeL: {
|
|
29
31
|
size: "l";
|
|
30
32
|
labelTextSize: "s";
|
|
31
33
|
badgeAppearanceSize: "sizeXS";
|
|
32
34
|
dividerSize: "s";
|
|
35
|
+
dividerSizeActive: "m";
|
|
33
36
|
};
|
|
34
37
|
sizeM: {
|
|
35
38
|
size: "m";
|
|
36
39
|
labelTextSize: "s";
|
|
37
40
|
badgeAppearanceSize: "sizeXS";
|
|
38
41
|
dividerSize: "s";
|
|
42
|
+
dividerSizeActive: "m";
|
|
39
43
|
};
|
|
40
44
|
sizeS: {
|
|
41
45
|
size: "s";
|
|
42
46
|
labelTextSize: "s";
|
|
43
47
|
badgeAppearanceSize: "sizeXS";
|
|
44
48
|
dividerSize: "s";
|
|
49
|
+
dividerSizeActive: "m";
|
|
45
50
|
};
|
|
46
51
|
sizeXS: {
|
|
47
52
|
size: "xs";
|
|
48
53
|
labelTextSize: "xs";
|
|
49
54
|
badgeAppearanceSize: "sizeXS";
|
|
55
|
+
dividerSize: "s";
|
|
56
|
+
dividerSizeActive: "m";
|
|
50
57
|
};
|
|
51
58
|
sizeXXS: {
|
|
52
59
|
size: "xxs";
|
|
53
60
|
labelTextSize: "xs";
|
|
54
61
|
badgeAppearanceSize: "sizeXXS";
|
|
55
62
|
dividerSize: "s";
|
|
63
|
+
dividerSizeActive: "m";
|
|
56
64
|
};
|
|
57
65
|
surfacePrimary: {
|
|
58
66
|
fill: "surfacePrimary";
|
|
@@ -26,6 +26,7 @@ type TabAppearanceProps = {
|
|
|
26
26
|
dividerFillDisabled?: DividerProps['fillDisabled'];
|
|
27
27
|
dividerFillHover?: DividerProps['fillHover'];
|
|
28
28
|
dividerSize?: DividerProps['size'];
|
|
29
|
+
dividerSizeActive?: DividerProps['size'];
|
|
29
30
|
fill?: FillProps;
|
|
30
31
|
fillActive?: FillActiveProps;
|
|
31
32
|
fillActiveHover?: FillHoverProps;
|
|
@@ -111,7 +112,7 @@ type TabGroupProps = StyleAttributes & TabGroupAppearanceProps & {
|
|
|
111
112
|
type TabConfig = AppearanceConfig<AppearanceKeysDefault, TabAppearanceProps>;
|
|
112
113
|
type TabAppearance = TabConfig['appearance'];
|
|
113
114
|
type TabAppearanceStyle = AppearanceRecord<AppearanceStyleKey, TabAppearanceProps, Extract<keyof TabAppearanceProps, 'borderColor' | 'borderColorActive' | 'dividerFill' | 'fill'>>;
|
|
114
|
-
type TabAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, TabAppearanceProps, Extract<keyof TabAppearanceProps, 'badgeAppearanceSize' | 'dividerSize' | 'labelTextSize' | 'size'>>;
|
|
115
|
+
type TabAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, TabAppearanceProps, Extract<keyof TabAppearanceProps, 'badgeAppearanceSize' | 'dividerSize' | 'dividerSizeActive' | 'labelTextSize' | 'size'>>;
|
|
115
116
|
type TabAppearanceKey = NonNullable<TabProps['appearance']>;
|
|
116
117
|
type TabGalleryStory = ComponentGalleryArgs & Pick<TabProps, 'isActive' | 'isDisabled' | 'isSkeleton' | 'label'>;
|
|
117
|
-
export type { TabAppearance, TabAppearanceKey, TabAppearanceSize, TabAppearanceStyle, TabConfig, TabGalleryStory, TabGroupProps,
|
|
118
|
+
export type { TabAppearance, TabAppearanceKey, TabAppearanceSize, TabAppearanceStyle, TabConfig, TabGalleryStory, TabGroupProps, TabItem, TabProps, };
|
|
@@ -24,8 +24,8 @@ function Tab(props) {
|
|
|
24
24
|
isActive: isActive,
|
|
25
25
|
isDisabled: isDisabled,
|
|
26
26
|
});
|
|
27
|
-
const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
27
|
+
const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, dividerSizeActive, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, sizeClass, widthClass, } = propsGenerator;
|
|
28
28
|
const { styles: tab } = useStyles(props);
|
|
29
|
-
return (_jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: _jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (_jsxs(React.Fragment, { children: [_jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (_jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), _jsx(Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
|
|
29
|
+
return (_jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: _jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (_jsxs(React.Fragment, { children: [_jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (_jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (_jsx(Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), isActive, _jsx(Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: isActive ? dividerSizeActive : dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
|
|
30
30
|
}
|
|
31
31
|
export { Tab, tabConfig };
|
|
@@ -4,41 +4,49 @@ declare const tabAppearanceSize: {
|
|
|
4
4
|
labelTextSize: "s";
|
|
5
5
|
badgeAppearanceSize: "sizeXS";
|
|
6
6
|
dividerSize: "s";
|
|
7
|
+
dividerSizeActive: "m";
|
|
7
8
|
};
|
|
8
9
|
sizeXL: {
|
|
9
10
|
size: "xl";
|
|
10
11
|
labelTextSize: "s";
|
|
11
12
|
badgeAppearanceSize: "sizeXS";
|
|
12
13
|
dividerSize: "s";
|
|
14
|
+
dividerSizeActive: "m";
|
|
13
15
|
};
|
|
14
16
|
sizeL: {
|
|
15
17
|
size: "l";
|
|
16
18
|
labelTextSize: "s";
|
|
17
19
|
badgeAppearanceSize: "sizeXS";
|
|
18
20
|
dividerSize: "s";
|
|
21
|
+
dividerSizeActive: "m";
|
|
19
22
|
};
|
|
20
23
|
sizeM: {
|
|
21
24
|
size: "m";
|
|
22
25
|
labelTextSize: "s";
|
|
23
26
|
badgeAppearanceSize: "sizeXS";
|
|
24
27
|
dividerSize: "s";
|
|
28
|
+
dividerSizeActive: "m";
|
|
25
29
|
};
|
|
26
30
|
sizeS: {
|
|
27
31
|
size: "s";
|
|
28
32
|
labelTextSize: "s";
|
|
29
33
|
badgeAppearanceSize: "sizeXS";
|
|
30
34
|
dividerSize: "s";
|
|
35
|
+
dividerSizeActive: "m";
|
|
31
36
|
};
|
|
32
37
|
sizeXS: {
|
|
33
38
|
size: "xs";
|
|
34
39
|
labelTextSize: "xs";
|
|
35
40
|
badgeAppearanceSize: "sizeXS";
|
|
41
|
+
dividerSize: "s";
|
|
42
|
+
dividerSizeActive: "m";
|
|
36
43
|
};
|
|
37
44
|
sizeXXS: {
|
|
38
45
|
size: "xxs";
|
|
39
46
|
labelTextSize: "xs";
|
|
40
47
|
badgeAppearanceSize: "sizeXXS";
|
|
41
48
|
dividerSize: "s";
|
|
49
|
+
dividerSizeActive: "m";
|
|
42
50
|
};
|
|
43
51
|
};
|
|
44
52
|
export { tabAppearanceSize };
|
|
@@ -4,41 +4,49 @@ const tabAppearanceSize = {
|
|
|
4
4
|
labelTextSize: 's',
|
|
5
5
|
badgeAppearanceSize: 'sizeXS',
|
|
6
6
|
dividerSize: 's',
|
|
7
|
+
dividerSizeActive: 'm',
|
|
7
8
|
},
|
|
8
9
|
sizeXL: {
|
|
9
10
|
size: 'xl',
|
|
10
11
|
labelTextSize: 's',
|
|
11
12
|
badgeAppearanceSize: 'sizeXS',
|
|
12
13
|
dividerSize: 's',
|
|
14
|
+
dividerSizeActive: 'm',
|
|
13
15
|
},
|
|
14
16
|
sizeL: {
|
|
15
17
|
size: 'l',
|
|
16
18
|
labelTextSize: 's',
|
|
17
19
|
badgeAppearanceSize: 'sizeXS',
|
|
18
20
|
dividerSize: 's',
|
|
21
|
+
dividerSizeActive: 'm',
|
|
19
22
|
},
|
|
20
23
|
sizeM: {
|
|
21
24
|
size: 'm',
|
|
22
25
|
labelTextSize: 's',
|
|
23
26
|
badgeAppearanceSize: 'sizeXS',
|
|
24
27
|
dividerSize: 's',
|
|
28
|
+
dividerSizeActive: 'm',
|
|
25
29
|
},
|
|
26
30
|
sizeS: {
|
|
27
31
|
size: 's',
|
|
28
32
|
labelTextSize: 's',
|
|
29
33
|
badgeAppearanceSize: 'sizeXS',
|
|
30
34
|
dividerSize: 's',
|
|
35
|
+
dividerSizeActive: 'm',
|
|
31
36
|
},
|
|
32
37
|
sizeXS: {
|
|
33
38
|
size: 'xs',
|
|
34
39
|
labelTextSize: 'xs',
|
|
35
40
|
badgeAppearanceSize: 'sizeXS',
|
|
41
|
+
dividerSize: 's',
|
|
42
|
+
dividerSizeActive: 'm',
|
|
36
43
|
},
|
|
37
44
|
sizeXXS: {
|
|
38
45
|
size: 'xxs',
|
|
39
46
|
labelTextSize: 'xs',
|
|
40
47
|
badgeAppearanceSize: 'sizeXXS',
|
|
41
48
|
dividerSize: 's',
|
|
49
|
+
dividerSizeActive: 'm',
|
|
42
50
|
},
|
|
43
51
|
};
|
|
44
52
|
export { tabAppearanceSize };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.2",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@itcase/tokens-am": "^1.1.57",
|
|
54
54
|
"@itcase/tokens-baikal": "^1.1.54",
|
|
55
55
|
"@itcase/tokens-palette": "^1.1.50",
|
|
56
|
-
"@itcase/ui-core": "^1.10.
|
|
56
|
+
"@itcase/ui-core": "^1.10.2",
|
|
57
57
|
"@rc-component/tooltip": "^1.4.0",
|
|
58
58
|
"clsx": "^2.1.1",
|
|
59
59
|
"date-fns": "^4.2.1",
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"storybook": "^10.4.0",
|
|
115
115
|
"typescript": "^6.0.3"
|
|
116
116
|
},
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "9f4196ce2a51940669bc5529f615253ab8c1f2f9"
|
|
118
118
|
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
declare const defaultDropzoneProps: {
|
|
2
|
-
fill: string;
|
|
3
|
-
fillHover: string;
|
|
4
|
-
hintTitle: string;
|
|
5
|
-
hintTitleTextColor: string;
|
|
6
|
-
hintTitleTextSize: string;
|
|
7
|
-
removeThumbText: string;
|
|
8
|
-
removeThumbTextColor: string;
|
|
9
|
-
removeThumbTextHoverColor: string;
|
|
10
|
-
removeThumbTextSize: string;
|
|
11
|
-
shape: string;
|
|
12
|
-
showFilename: boolean;
|
|
13
|
-
thumbBorderColor: string;
|
|
14
|
-
thumbBorderColorHover: string;
|
|
15
|
-
thumbBorderWidth: number;
|
|
16
|
-
thumbNameTextColor: string;
|
|
17
|
-
thumbNameTextSize: string;
|
|
18
|
-
isPreviews: boolean;
|
|
19
|
-
};
|
|
20
|
-
export { defaultDropzoneProps };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
const defaultDropzoneProps = {
|
|
2
|
-
fill: 'surfaceSecondary',
|
|
3
|
-
fillHover: 'surfaceTertiary',
|
|
4
|
-
// borderColor: 'surfaceBorderTertiary',
|
|
5
|
-
// borderColorHover: 'surfaceBorderQuaternary',
|
|
6
|
-
hintTitle: 'Перетащите изображение или выберите файл с компьютера',
|
|
7
|
-
hintTitleTextColor: 'surfaceTextPrimary',
|
|
8
|
-
hintTitleTextSize: 'm',
|
|
9
|
-
removeThumbText: 'удалить',
|
|
10
|
-
removeThumbTextColor: 'errorTextPrimary',
|
|
11
|
-
removeThumbTextHoverColor: 'errorTextPrimaryHover',
|
|
12
|
-
removeThumbTextSize: 's',
|
|
13
|
-
shape: 'rounded',
|
|
14
|
-
showFilename: true,
|
|
15
|
-
thumbBorderColor: 'surfaceBorderTertiary',
|
|
16
|
-
thumbBorderColorHover: 'surfaceBorderQuaternary',
|
|
17
|
-
thumbBorderWidth: 1,
|
|
18
|
-
thumbNameTextColor: 'surfaceTextPrimary',
|
|
19
|
-
thumbNameTextSize: 's',
|
|
20
|
-
isPreviews: true,
|
|
21
|
-
};
|
|
22
|
-
export { defaultDropzoneProps };
|