@itcase/ui-web 1.9.107 → 1.9.109
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/Checkbox.js +1 -1
- package/dist/cjs/components/Radio.js +1 -1
- package/dist/components/Checkbox.js +1 -1
- package/dist/components/Radio.js +1 -1
- package/dist/css/styles/bundles.css +15 -3
- package/dist/types/components/Checkbox/Checkbox.js +1 -1
- package/dist/types/components/Checkbox/stories/CheckboxDemo.stories.js +1 -1
- package/dist/types/components/Radio/Radio.appearance.d.ts +51 -1
- package/dist/types/components/Radio/appearance/radioDefault.d.ts +51 -1
- package/dist/types/components/Radio/appearance/radioDefault.js +51 -1
- package/dist/types/components/Radio/stories/RadioDemo.stories.js +1 -1
- package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts +3 -0
- package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts +3 -0
- package/dist/types/storybook/createComponentGallery/createComponentGallery.js +31 -2
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),o=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const a={defaultPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckbox:"surfaceQuaternary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultTertiary:{fill:"surfaceTertiary",fillCheckbox:"surfaceTertiary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},errorPrimary:{fill:"errorTertiary",fillCheckbox:"errorTertiary",fillCheckboxActive:"errorQuaternary",fillCheckboxActiveHover:"errorActiveHoverPrimary",fillCheckboxHover:"errorHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"errorBorderQuaternary",borderColorCheckboxActive:"errorBorderActiveQuaternary",borderColorCheckboxActiveHover:"errorBorderActivePrimary",borderColorCheckboxHover:"errorBorderHoverPrimary"},successPrimary:{fill:"successTertiary",fillCheckbox:"successTertiary",fillCheckboxActive:"successSecondary",fillCheckboxActiveHover:"successActiveHoverPrimary",fillCheckboxHover:"successHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"successBorderSecondary",borderColorCheckboxActive:"successBorderSecondary",borderColorCheckboxActiveHover:"successBorderActivePrimary",borderColorCheckboxHover:"successBorderHoverPrimary"},requirePrimary:{fill:"warningTertiary",fillCheckbox:"warningTertiary",fillCheckboxActive:"warningPrimary",fillCheckboxActiveHover:"warningActiveHoverPrimary",fillCheckboxHover:"warningHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"warningBorderSecondary",borderColorCheckboxActive:"warningBorderSecondary",borderColorCheckboxActiveHover:"warningBorderActivePrimary",borderColorCheckboxHover:"warningBorderHoverPrimary"},disabledPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverTertiary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"disabledTextSecondary",descTextColor:"disabledTextSecondary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},sizeXL:{size:"xl",labelTextSize:"s",descTextSize:"xs"},sizeL:{size:"l",labelTextSize:"s",descTextSize:"xs"},sizeM:{size:"m",labelTextSize:"m",descTextSize:"xs"},sizeS:{size:"s",labelTextSize:"s",descTextSize:"xs"},solid:{borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},rounded:{shape:"rounded"}},l={appearance:a,setAppearance:e=>{l.appearance=e}};exports.Checkbox=function(a){const{id:i,appearance:s,className:t,dataTestId:b,dataTour:x,label:C,desc:d,checked:v,disabled:h,indeterminate:u,Tag:f="label",value:n,before:k,after:y,isActive:T,isChecked:H,isDisabled:A,isSkeleton:m,onBlur:_,onChange:P,onFocus:B}=a,S=o.useAppearanceConfig(s,l,A),p=o.useDevicePropsGenerator(a,S),{fillCheckboxActiveClass:Q,fillCheckboxActiveHoverClass:g,fillCheckboxClass:z,fillCheckboxHoverClass:$,fillCheckmarkClass:j,fillClass:w,fillHoverClass:q,labelTextColor:N,labelTextSize:W,labelTextWeight:F,descTextColor:D,descTextSize:L,descTextWeight:G,borderColorCheckboxActiveClass:I,borderColorCheckboxActiveHoverClass:M,borderColorCheckboxClass:X,borderColorCheckboxHoverClass:E,heightClass:J,shapeClass:K,sizeClass:O,widthClass:R}=p;return e.jsxs(f,{className:r(t,"checkbox",w&&`fill_${w}`,q&&`fill_${q}`,O&&`checkbox_size_${O}`,v?Q&&`checkbox_fill_active_${Q}`:z&&`checkbox_fill_${z}`,v?g&&`checkbox_fill_active_hover_${g}`:$&&`checkbox_fill_hover_${$}`,v?I&&`checkbox_border-color_active_${I}`:X&&`checkbox_border-color_${X}`,v?M&&`checkbox_border-color_active_hover_${M}`:E&&`checkbox_border-color_hover_${E}`,R&&`checkbox_width_${R}`,J&&`checkbox_height_${J}`,m&&"skeleton"),"data-testid":b,"data-tour":x,htmlFor:"label"===f&&i,children:[k,e.jsxs("div",{className:"checkbox__item",children:[e.jsx("input",{id:i,className:"checkbox__input",type:"checkbox",checked:T||H||v,disabled:A||h,value:n,onBlur:_,onChange:P,onFocus:B}),e.jsx("div",{className:r("checkbox__state",K&&`shape_${K}`),children:" "}),e.jsx("div",{className:r(u?"checkbox__state-indeterminate":"checkbox__state-checkmark",(v||u)&&j&&`fill_${j}`),children:" "})]}),C&&e.jsx(c.Text,{className:"checkbox__label",size:W,textColor:N,textWeight:F,children:C}),d&&e.jsx(c.Text,{className:"checkbox__desc",size:L,textColor:D,textWeight:G,children:d}),y&&e.jsx("div",{className:"checkbox__after",children:y})]})},exports.checkboxAppearance=a,exports.checkboxConfig=l;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),o=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const a={defaultPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckbox:"surfaceQuaternary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultTertiary:{fill:"surfaceTertiary",fillCheckbox:"surfaceTertiary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},errorPrimary:{fill:"errorTertiary",fillCheckbox:"errorTertiary",fillCheckboxActive:"errorQuaternary",fillCheckboxActiveHover:"errorActiveHoverPrimary",fillCheckboxHover:"errorHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"errorBorderQuaternary",borderColorCheckboxActive:"errorBorderActiveQuaternary",borderColorCheckboxActiveHover:"errorBorderActivePrimary",borderColorCheckboxHover:"errorBorderHoverPrimary"},successPrimary:{fill:"successTertiary",fillCheckbox:"successTertiary",fillCheckboxActive:"successSecondary",fillCheckboxActiveHover:"successActiveHoverPrimary",fillCheckboxHover:"successHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"successBorderSecondary",borderColorCheckboxActive:"successBorderSecondary",borderColorCheckboxActiveHover:"successBorderActivePrimary",borderColorCheckboxHover:"successBorderHoverPrimary"},requirePrimary:{fill:"warningTertiary",fillCheckbox:"warningTertiary",fillCheckboxActive:"warningPrimary",fillCheckboxActiveHover:"warningActiveHoverPrimary",fillCheckboxHover:"warningHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"warningBorderSecondary",borderColorCheckboxActive:"warningBorderSecondary",borderColorCheckboxActiveHover:"warningBorderActivePrimary",borderColorCheckboxHover:"warningBorderHoverPrimary"},disabledPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverTertiary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"disabledTextSecondary",descTextColor:"disabledTextSecondary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},sizeXL:{size:"xl",labelTextSize:"s",descTextSize:"xs"},sizeL:{size:"l",labelTextSize:"s",descTextSize:"xs"},sizeM:{size:"m",labelTextSize:"m",descTextSize:"xs"},sizeS:{size:"s",labelTextSize:"s",descTextSize:"xs"},solid:{borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},rounded:{shape:"rounded"}},l={appearance:a,setAppearance:e=>{l.appearance=e}};exports.Checkbox=function(a){const{id:i,appearance:s,className:t,dataTestId:b,dataTour:x,label:C,desc:d,checked:v,disabled:h,indeterminate:u,Tag:f="label",value:n,before:k,after:y,isActive:T,isChecked:H,isDisabled:A,isSkeleton:m,onBlur:_,onChange:P,onFocus:B}=a,S=o.useAppearanceConfig(s,l,A),p=o.useDevicePropsGenerator(a,S),{fillCheckboxActiveClass:Q,fillCheckboxActiveHoverClass:g,fillCheckboxClass:z,fillCheckboxHoverClass:$,fillCheckmarkClass:j,fillClass:w,fillHoverClass:q,labelTextColor:N,labelTextSize:W,labelTextWeight:F,descTextColor:D,descTextSize:L,descTextWeight:G,borderColorCheckboxActiveClass:I,borderColorCheckboxActiveHoverClass:M,borderColorCheckboxClass:X,borderColorCheckboxHoverClass:E,heightClass:J,shapeClass:K,sizeClass:O,widthClass:R}=p;return e.jsxs(f,{className:r(t,"checkbox",w&&`fill_${w}`,q&&`fill_${q}`,O&&`checkbox_size_${O}`,v?Q&&`checkbox_fill_active_${Q}`:z&&`checkbox_fill_${z}`,v?g&&`checkbox_fill_active_hover_${g}`:$&&`checkbox_fill_hover_${$}`,v?I&&`checkbox_border-color_active_${I}`:X&&`checkbox_border-color_${X}`,v?M&&`checkbox_border-color_active_hover_${M}`:E&&`checkbox_border-color_hover_${E}`,R&&`checkbox_width_${R}`,J&&`checkbox_height_${J}`,m&&"skeleton"),"data-testid":b,"data-tour":x,htmlFor:"label"===f&&i,children:[k,e.jsxs("div",{className:"checkbox__item",children:[e.jsx("input",{id:i,className:"checkbox__input",type:"checkbox",checked:T||H||v,disabled:A||h,value:n,onBlur:_,onChange:P,onFocus:B}),e.jsx("div",{className:r("checkbox__state",K&&`shape_${K}`),children:" "}),e.jsx("div",{className:r(u?"checkbox__state-indeterminate":"checkbox__state-checkmark",(v||u)&&j&&`fill_${j}`),children:" "})]}),(C||d)&&e.jsxs("div",{className:"checkbox__text",children:[C&&e.jsx(c.Text,{className:"checkbox__label",size:W,textColor:N,textWeight:F,children:C}),d&&e.jsx(c.Text,{className:"checkbox__desc",size:L,textColor:D,textWeight:G,children:d})]}),y&&e.jsx("div",{className:"checkbox__after",children:y})]})},exports.checkboxAppearance=a,exports.checkboxConfig=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var r=require("react/jsx-runtime"),e=require("clsx"),o=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const i={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioHover:"surfaceTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},successPrimary:{fill:"successTertiary",fillCheckmark:"accentSecondary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"accentBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},requirePrimary:{fill:"warningTertiary",fillCheckmark:"warningPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"warningBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary"},disabledPrimary:{fill:"surfaceDisabled",fillCheckmark:"surfaceQuaternary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},sizeM:{size:"m",labelTextSize:"s",descTextSize:"xs"},sizeXS:{size:"xs",labelTextSize:"m",descTextSize:"xs"},sizeXXS:{size:"xxs",labelTextSize:"m",descTextSize:"xs"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none",borderRadioColor:"none",borderRadioColorActive:"none",borderRadioColorActiveHover:"none",borderRadioColorHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none"}},l={appearance:i,setAppearance:r=>{l.appearance=r}};exports.Radio=function(i){const{id:d,appearance:
|
|
1
|
+
"use strict";var r=require("react/jsx-runtime"),e=require("clsx"),o=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const i={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceQuaternary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultSecondary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultTertiary:{fill:"surfaceTertiary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceTertiary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},successPrimary:{fill:"successTertiary",fillCheckmark:"accentSecondary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"accentBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},requirePrimary:{fill:"warningTertiary",fillCheckmark:"warningPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"warningBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary"},disabledPrimary:{fill:"surfaceDisabled",fillCheckmark:"surfaceQuaternary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},sizeM:{size:"m",labelTextSize:"s",descTextSize:"xs"},sizeXS:{size:"xs",labelTextSize:"m",descTextSize:"xs"},sizeXXS:{size:"xxs",labelTextSize:"m",descTextSize:"xs"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none",borderRadioColor:"none",borderRadioColorActive:"none",borderRadioColorActiveHover:"none",borderRadioColorHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none"}},l={appearance:i,setAppearance:r=>{l.appearance=r}};exports.Radio=function(i){const{id:d,appearance:c,className:s,dataTestId:t,dataTour:u,label:n,desc:f,checked:v,tag:C="label",value:y,isActive:b,isDisabled:x,isSkeleton:R,onChange:T}=i,Q=o.useAppearanceConfig(c,l,x),m=o.useDevicePropsGenerator(i,Q),{fillCheckmarkClass:H,fillClass:h,fillHoverClass:_,fillRadioActiveClass:A,fillRadioActiveHoverClass:B,fillRadioClass:p,fillRadioHoverClass:k,labelTextColor:P,labelTextSize:S,labelTextWeight:z,descTextColor:g,descTextSize:$,descTextWeight:j,borderRadioColorActiveClass:q,borderRadioColorActiveHoverClass:N,borderRadioColorClass:X,borderRadioColorHoverClass:L,shapeClass:W,sizeClass:w}=m;return r.jsxs(C,{className:e(s,"radio",h&&`fill_${h}`,_&&`fill_${_}`,R&&"skeleton",w&&`radio_size_${w}`,v&&b?A&&`radio_fill_active_${A}`:p&&`radio_fill_${p}`,v&&b?B&&`radio_fill_active_hover_${B}`:k&&`radio_fill_hover_${k}`,v&&b?q&&`radio_border-color_active_${q}`:X&&`radio_border-color_${X}`,v&&b?N&&`radio_border-color_active_hover_${N}`:L&&`radio_border-color_hover_${L}`),"data-testid":t,"data-tour":u,htmlFor:d,children:[r.jsxs("div",{className:e("radio__item"),children:[r.jsx("input",{id:String(d),className:"radio__input",type:"radio",checked:v,disabled:x,value:y,onChange:T}),r.jsx("div",{className:e("radio__state",W&&`shape_${W}`),children:" "}),r.jsx("div",{className:e("radio__state-checkmark",v&&H&&`fill_${H}`),children:" "})]}),n&&r.jsx(a.Text,{className:"radio__label",size:S,textColor:P,textWeight:z,children:n}),f&&r.jsx(a.Text,{className:"radio__desc",size:$,textColor:g,textWeight:j,children:f})]})},exports.radioAppearance=i,exports.radioConfig=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as c,useDevicePropsGenerator as a}from"@itcase/ui-core/hooks";import{T as l}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const i={defaultPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckbox:"surfaceQuaternary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultTertiary:{fill:"surfaceTertiary",fillCheckbox:"surfaceTertiary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},errorPrimary:{fill:"errorTertiary",fillCheckbox:"errorTertiary",fillCheckboxActive:"errorQuaternary",fillCheckboxActiveHover:"errorActiveHoverPrimary",fillCheckboxHover:"errorHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"errorBorderQuaternary",borderColorCheckboxActive:"errorBorderActiveQuaternary",borderColorCheckboxActiveHover:"errorBorderActivePrimary",borderColorCheckboxHover:"errorBorderHoverPrimary"},successPrimary:{fill:"successTertiary",fillCheckbox:"successTertiary",fillCheckboxActive:"successSecondary",fillCheckboxActiveHover:"successActiveHoverPrimary",fillCheckboxHover:"successHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"successBorderSecondary",borderColorCheckboxActive:"successBorderSecondary",borderColorCheckboxActiveHover:"successBorderActivePrimary",borderColorCheckboxHover:"successBorderHoverPrimary"},requirePrimary:{fill:"warningTertiary",fillCheckbox:"warningTertiary",fillCheckboxActive:"warningPrimary",fillCheckboxActiveHover:"warningActiveHoverPrimary",fillCheckboxHover:"warningHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"warningBorderSecondary",borderColorCheckboxActive:"warningBorderSecondary",borderColorCheckboxActiveHover:"warningBorderActivePrimary",borderColorCheckboxHover:"warningBorderHoverPrimary"},disabledPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverTertiary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"disabledTextSecondary",descTextColor:"disabledTextSecondary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},sizeXL:{size:"xl",labelTextSize:"s",descTextSize:"xs"},sizeL:{size:"l",labelTextSize:"s",descTextSize:"xs"},sizeM:{size:"m",labelTextSize:"m",descTextSize:"xs"},sizeS:{size:"s",labelTextSize:"s",descTextSize:"xs"},solid:{borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},rounded:{shape:"rounded"}},t={appearance:i,setAppearance:e=>{t.appearance=e}};function s(i){const{id:s,appearance:b,className:C,dataTestId:x,dataTour:d,label:v,desc:h,checked:f,disabled:n,indeterminate:u,Tag:k="label",value:y,before:m,after:T,isActive:H,isChecked:A,isDisabled:_,isSkeleton:P,onBlur:B,onChange:p,onFocus:S}=i,Q=c(b,t,_),z=a(i,Q),{fillCheckboxActiveClass:g,fillCheckboxActiveHoverClass:$,fillCheckboxClass:w,fillCheckboxHoverClass:N,fillCheckmarkClass:W,fillClass:F,fillHoverClass:j,labelTextColor:L,labelTextSize:q,labelTextWeight:D,descTextColor:I,descTextSize:M,descTextWeight:X,borderColorCheckboxActiveClass:E,borderColorCheckboxActiveHoverClass:G,borderColorCheckboxClass:J,borderColorCheckboxHoverClass:K,heightClass:O,shapeClass:R,sizeClass:U,widthClass:V}=z;return e(k,{className:o(C,"checkbox",F&&`fill_${F}`,j&&`fill_${j}`,U&&`checkbox_size_${U}`,f?g&&`checkbox_fill_active_${g}`:w&&`checkbox_fill_${w}`,f?$&&`checkbox_fill_active_hover_${$}`:N&&`checkbox_fill_hover_${N}`,f?E&&`checkbox_border-color_active_${E}`:J&&`checkbox_border-color_${J}`,f?G&&`checkbox_border-color_active_hover_${G}`:K&&`checkbox_border-color_hover_${K}`,V&&`checkbox_width_${V}`,O&&`checkbox_height_${O}`,P&&"skeleton"),"data-testid":x,"data-tour":d,htmlFor:"label"===k&&s,children:[m,e("div",{className:"checkbox__item",children:[r("input",{id:s,className:"checkbox__input",type:"checkbox",checked:H||A||f,disabled:_||n,value:y,onBlur:B,onChange:p,onFocus:S}),r("div",{className:o("checkbox__state",R&&`shape_${R}`),children:" "}),r("div",{className:o(u?"checkbox__state-indeterminate":"checkbox__state-checkmark",(f||u)&&W&&`fill_${W}`),children:" "})]}),v&&r(l,{className:"checkbox__label",size:q,textColor:L,textWeight:D,children:v}),h&&r(l,{className:"checkbox__desc",size:M,textColor:I,textWeight:X,children:h}),T&&r("div",{className:"checkbox__after",children:T})]})}export{s as Checkbox,i as checkboxAppearance,t as checkboxConfig};
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as c,useDevicePropsGenerator as a}from"@itcase/ui-core/hooks";import{T as l}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const i={defaultPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckbox:"surfaceQuaternary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},defaultTertiary:{fill:"surfaceTertiary",fillCheckbox:"surfaceTertiary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverQuaternary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},errorPrimary:{fill:"errorTertiary",fillCheckbox:"errorTertiary",fillCheckboxActive:"errorQuaternary",fillCheckboxActiveHover:"errorActiveHoverPrimary",fillCheckboxHover:"errorHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"errorBorderQuaternary",borderColorCheckboxActive:"errorBorderActiveQuaternary",borderColorCheckboxActiveHover:"errorBorderActivePrimary",borderColorCheckboxHover:"errorBorderHoverPrimary"},successPrimary:{fill:"successTertiary",fillCheckbox:"successTertiary",fillCheckboxActive:"successSecondary",fillCheckboxActiveHover:"successActiveHoverPrimary",fillCheckboxHover:"successHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"successBorderSecondary",borderColorCheckboxActive:"successBorderSecondary",borderColorCheckboxActiveHover:"successBorderActivePrimary",borderColorCheckboxHover:"successBorderHoverPrimary"},requirePrimary:{fill:"warningTertiary",fillCheckbox:"warningTertiary",fillCheckboxActive:"warningPrimary",fillCheckboxActiveHover:"warningActiveHoverPrimary",fillCheckboxHover:"warningHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColorCheckbox:"warningBorderSecondary",borderColorCheckboxActive:"warningBorderSecondary",borderColorCheckboxActiveHover:"warningBorderActivePrimary",borderColorCheckboxHover:"warningBorderHoverPrimary"},disabledPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverTertiary",fillCheckboxHover:"surfaceHoverTertiary",labelTextColor:"disabledTextSecondary",descTextColor:"disabledTextSecondary",borderColorCheckbox:"surfaceBorderQuaternary",borderColorCheckboxActive:"surfaceBorderQuaternary",borderColorCheckboxActiveHover:"surfaceBorderActivePrimary",borderColorCheckboxHover:"surfaceBorderHoverPrimary"},sizeXL:{size:"xl",labelTextSize:"s",descTextSize:"xs"},sizeL:{size:"l",labelTextSize:"s",descTextSize:"xs"},sizeM:{size:"m",labelTextSize:"m",descTextSize:"xs"},sizeS:{size:"s",labelTextSize:"s",descTextSize:"xs"},solid:{borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColorCheckbox:"none",borderColorCheckboxActive:"none",borderColorCheckboxActiveHover:"none",borderColorCheckboxHover:"none"},rounded:{shape:"rounded"}},t={appearance:i,setAppearance:e=>{t.appearance=e}};function s(i){const{id:s,appearance:b,className:C,dataTestId:x,dataTour:d,label:v,desc:h,checked:f,disabled:n,indeterminate:u,Tag:k="label",value:y,before:m,after:T,isActive:H,isChecked:A,isDisabled:_,isSkeleton:P,onBlur:B,onChange:p,onFocus:S}=i,Q=c(b,t,_),z=a(i,Q),{fillCheckboxActiveClass:g,fillCheckboxActiveHoverClass:$,fillCheckboxClass:w,fillCheckboxHoverClass:N,fillCheckmarkClass:W,fillClass:F,fillHoverClass:j,labelTextColor:L,labelTextSize:q,labelTextWeight:D,descTextColor:I,descTextSize:M,descTextWeight:X,borderColorCheckboxActiveClass:E,borderColorCheckboxActiveHoverClass:G,borderColorCheckboxClass:J,borderColorCheckboxHoverClass:K,heightClass:O,shapeClass:R,sizeClass:U,widthClass:V}=z;return e(k,{className:o(C,"checkbox",F&&`fill_${F}`,j&&`fill_${j}`,U&&`checkbox_size_${U}`,f?g&&`checkbox_fill_active_${g}`:w&&`checkbox_fill_${w}`,f?$&&`checkbox_fill_active_hover_${$}`:N&&`checkbox_fill_hover_${N}`,f?E&&`checkbox_border-color_active_${E}`:J&&`checkbox_border-color_${J}`,f?G&&`checkbox_border-color_active_hover_${G}`:K&&`checkbox_border-color_hover_${K}`,V&&`checkbox_width_${V}`,O&&`checkbox_height_${O}`,P&&"skeleton"),"data-testid":x,"data-tour":d,htmlFor:"label"===k&&s,children:[m,e("div",{className:"checkbox__item",children:[r("input",{id:s,className:"checkbox__input",type:"checkbox",checked:H||A||f,disabled:_||n,value:y,onBlur:B,onChange:p,onFocus:S}),r("div",{className:o("checkbox__state",R&&`shape_${R}`),children:" "}),r("div",{className:o(u?"checkbox__state-indeterminate":"checkbox__state-checkmark",(f||u)&&W&&`fill_${W}`),children:" "})]}),(v||h)&&e("div",{className:"checkbox__text",children:[v&&r(l,{className:"checkbox__label",size:q,textColor:L,textWeight:D,children:v}),h&&r(l,{className:"checkbox__desc",size:M,textColor:I,textWeight:X,children:h})]}),T&&r("div",{className:"checkbox__after",children:T})]})}export{s as Checkbox,i as checkboxAppearance,t as checkboxConfig};
|
package/dist/components/Radio.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as a,useDevicePropsGenerator as i}from"@itcase/ui-core/hooks";import{T as l}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const d={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioHover:"surfaceTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},successPrimary:{fill:"successTertiary",fillCheckmark:"accentSecondary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"accentBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},requirePrimary:{fill:"warningTertiary",fillCheckmark:"warningPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"warningBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary"},disabledPrimary:{fill:"surfaceDisabled",fillCheckmark:"surfaceQuaternary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},sizeM:{size:"m",labelTextSize:"s",descTextSize:"xs"},sizeXS:{size:"xs",labelTextSize:"m",descTextSize:"xs"},sizeXXS:{size:"xxs",labelTextSize:"m",descTextSize:"xs"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none",borderRadioColor:"none",borderRadioColorActive:"none",borderRadioColorActiveHover:"none",borderRadioColorHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none"}},
|
|
1
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as a,useDevicePropsGenerator as i}from"@itcase/ui-core/hooks";import{T as l}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const d={defaultPrimary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultQuaternary:{fill:"surfaceQuaternary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceQuaternary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultSecondary:{fill:"surfaceSecondary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceSecondary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},defaultTertiary:{fill:"surfaceTertiary",fillCheckmark:"surfaceQuaternary",fillRadio:"surfaceTertiary",fillRadioActive:"surfaceQuaternary",fillRadioActiveHover:"surfaceActiveHoverQuaternary",fillRadioHover:"surfaceHoverTertiary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary",shape:"circular"},errorPrimary:{fill:"errorTertiary",fillCheckmark:"errorPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"errorBorderQuaternary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},successPrimary:{fill:"successTertiary",fillCheckmark:"accentSecondary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"accentBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},requirePrimary:{fill:"warningTertiary",fillCheckmark:"warningPrimary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"warningBorderSecondary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderQuaternary",borderRadioColorActiveHover:"surfaceBorderQuaternary",borderRadioColorHover:"surfaceBorderQuaternary"},disabledPrimary:{fill:"surfaceDisabled",fillCheckmark:"surfaceQuaternary",labelTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",borderRadioColor:"surfaceBorderQuaternary",borderRadioColorActive:"surfaceBorderActiveQuaternary",borderRadioColorActiveHover:"surfaceBorderHoverQuaternary",borderRadioColorHover:"surfaceBorderHoverQuaternary"},sizeM:{size:"m",labelTextSize:"s",descTextSize:"xs"},sizeXS:{size:"xs",labelTextSize:"m",descTextSize:"xs"},sizeXXS:{size:"xxs",labelTextSize:"m",descTextSize:"xs"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none",borderRadioColor:"none",borderRadioColorActive:"none",borderRadioColorActiveHover:"none",borderRadioColorHover:"none"},outlined:{fill:"none",fillHover:"none"},full:{},ghost:{fill:"none",fillHover:"none",borderColor:"none",borderColorHover:"none"}},c={appearance:d,setAppearance:r=>{c.appearance=r}};function t(d){const{id:t,appearance:s,className:u,dataTestId:f,dataTour:n,label:v,desc:y,checked:C,tag:b="label",value:m,isActive:R,isDisabled:x,isSkeleton:T,onChange:Q}=d,H=a(s,c,x),h=i(d,H),{fillCheckmarkClass:_,fillClass:B,fillHoverClass:A,fillRadioActiveClass:p,fillRadioActiveHoverClass:k,fillRadioClass:P,fillRadioHoverClass:S,labelTextColor:z,labelTextSize:g,labelTextWeight:$,descTextColor:N,descTextSize:X,descTextWeight:L,borderRadioColorActiveClass:W,borderRadioColorActiveHoverClass:w,borderRadioColorClass:M,borderRadioColorHoverClass:j,shapeClass:D,sizeClass:q}=h;return r(b,{className:o(u,"radio",B&&`fill_${B}`,A&&`fill_${A}`,T&&"skeleton",q&&`radio_size_${q}`,C&&R?p&&`radio_fill_active_${p}`:P&&`radio_fill_${P}`,C&&R?k&&`radio_fill_active_hover_${k}`:S&&`radio_fill_hover_${S}`,C&&R?W&&`radio_border-color_active_${W}`:M&&`radio_border-color_${M}`,C&&R?w&&`radio_border-color_active_hover_${w}`:j&&`radio_border-color_hover_${j}`),"data-testid":f,"data-tour":n,htmlFor:t,children:[r("div",{className:o("radio__item"),children:[e("input",{id:String(t),className:"radio__input",type:"radio",checked:C,disabled:x,value:m,onChange:Q}),e("div",{className:o("radio__state",D&&`shape_${D}`),children:" "}),e("div",{className:o("radio__state-checkmark",C&&_&&`fill_${_}`),children:" "})]}),v&&e(l,{className:"radio__label",size:g,textColor:z,textWeight:$,children:v}),y&&e(l,{className:"radio__desc",size:X,textColor:N,textWeight:L,children:y})]})}export{t as Radio,d as radioAppearance,c as radioConfig};
|
|
@@ -48114,8 +48114,22 @@ div.avatar-stack {
|
|
|
48114
48114
|
.checkbox {
|
|
48115
48115
|
width: auto;
|
|
48116
48116
|
display: grid;
|
|
48117
|
-
&:has(.checkbox__label, .checkbox__desc) {
|
|
48117
|
+
&:has(.checkbox__text, .checkbox__label, .checkbox__desc, .checkbox__after) {
|
|
48118
48118
|
grid-template-columns: auto 1fr;
|
|
48119
|
+
align-items: center;
|
|
48120
|
+
^&__item {
|
|
48121
|
+
grid-row: 1 / -1;
|
|
48122
|
+
}
|
|
48123
|
+
}
|
|
48124
|
+
&__label,
|
|
48125
|
+
&__desc,
|
|
48126
|
+
&__after {
|
|
48127
|
+
grid-column: 2;
|
|
48128
|
+
}
|
|
48129
|
+
&__text {
|
|
48130
|
+
display: flex;
|
|
48131
|
+
flex-direction: column;
|
|
48132
|
+
grid-column: 2;
|
|
48119
48133
|
}
|
|
48120
48134
|
&__item {
|
|
48121
48135
|
font-size: 0;
|
|
@@ -48124,9 +48138,7 @@ div.avatar-stack {
|
|
|
48124
48138
|
display: flex;
|
|
48125
48139
|
justify-content: center;
|
|
48126
48140
|
align-items: center;
|
|
48127
|
-
align-self: start;
|
|
48128
48141
|
cursor: pointer;
|
|
48129
|
-
grid-row-start: span 3;
|
|
48130
48142
|
^&__input {
|
|
48131
48143
|
width: 100%;
|
|
48132
48144
|
height: 100%;
|
|
@@ -33,6 +33,6 @@ function Checkbox(props) {
|
|
|
33
33
|
? 'checkbox__state-checkmark'
|
|
34
34
|
: 'checkbox__state-indeterminate', (checked || indeterminate) &&
|
|
35
35
|
fillCheckmarkClass &&
|
|
36
|
-
`fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (_jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (_jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc })), after && _jsx("div", { className: "checkbox__after", children: after })] }));
|
|
36
|
+
`fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), (label || desc) && (_jsxs("div", { className: "checkbox__text", children: [label && (_jsx(Text, { className: "checkbox__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (_jsx(Text, { className: "checkbox__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })), after && _jsx("div", { className: "checkbox__after", children: after })] }));
|
|
37
37
|
}
|
|
38
38
|
export { Checkbox, checkboxConfig };
|
|
@@ -101,7 +101,57 @@ declare const radioAppearance: {
|
|
|
101
101
|
fill: "surfaceSecondary";
|
|
102
102
|
fillCheckmark: "surfaceQuaternary";
|
|
103
103
|
fillRadio: "surfaceSecondary";
|
|
104
|
-
|
|
104
|
+
fillRadioActive: "surfaceQuaternary";
|
|
105
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
106
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
107
|
+
labelTextColor: "surfaceTextPrimary";
|
|
108
|
+
descTextColor: "surfaceTextPrimary";
|
|
109
|
+
borderColor: "surfaceBorderQuaternary";
|
|
110
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
111
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
112
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
113
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
114
|
+
shape: "circular";
|
|
115
|
+
};
|
|
116
|
+
defaultQuaternary: {
|
|
117
|
+
fill: "surfaceQuaternary";
|
|
118
|
+
fillCheckmark: "surfaceQuaternary";
|
|
119
|
+
fillRadio: "surfaceQuaternary";
|
|
120
|
+
fillRadioActive: "surfaceQuaternary";
|
|
121
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
122
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
123
|
+
labelTextColor: "surfaceTextPrimary";
|
|
124
|
+
descTextColor: "surfaceTextPrimary";
|
|
125
|
+
borderColor: "surfaceBorderQuaternary";
|
|
126
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
127
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
128
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
129
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
130
|
+
shape: "circular";
|
|
131
|
+
};
|
|
132
|
+
defaultSecondary: {
|
|
133
|
+
fill: "surfaceSecondary";
|
|
134
|
+
fillCheckmark: "surfaceQuaternary";
|
|
135
|
+
fillRadio: "surfaceSecondary";
|
|
136
|
+
fillRadioActive: "surfaceQuaternary";
|
|
137
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
138
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
139
|
+
labelTextColor: "surfaceTextPrimary";
|
|
140
|
+
descTextColor: "surfaceTextPrimary";
|
|
141
|
+
borderColor: "surfaceBorderQuaternary";
|
|
142
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
143
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
144
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
145
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
146
|
+
shape: "circular";
|
|
147
|
+
};
|
|
148
|
+
defaultTertiary: {
|
|
149
|
+
fill: "surfaceTertiary";
|
|
150
|
+
fillCheckmark: "surfaceQuaternary";
|
|
151
|
+
fillRadio: "surfaceTertiary";
|
|
152
|
+
fillRadioActive: "surfaceQuaternary";
|
|
153
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
154
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
105
155
|
labelTextColor: "surfaceTextPrimary";
|
|
106
156
|
descTextColor: "surfaceTextPrimary";
|
|
107
157
|
borderColor: "surfaceBorderQuaternary";
|
|
@@ -3,7 +3,57 @@ declare const radioAppearanceDefault: {
|
|
|
3
3
|
fill: "surfaceSecondary";
|
|
4
4
|
fillCheckmark: "surfaceQuaternary";
|
|
5
5
|
fillRadio: "surfaceSecondary";
|
|
6
|
-
|
|
6
|
+
fillRadioActive: "surfaceQuaternary";
|
|
7
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
8
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
9
|
+
labelTextColor: "surfaceTextPrimary";
|
|
10
|
+
descTextColor: "surfaceTextPrimary";
|
|
11
|
+
borderColor: "surfaceBorderQuaternary";
|
|
12
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
13
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
14
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
15
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
16
|
+
shape: "circular";
|
|
17
|
+
};
|
|
18
|
+
defaultQuaternary: {
|
|
19
|
+
fill: "surfaceQuaternary";
|
|
20
|
+
fillCheckmark: "surfaceQuaternary";
|
|
21
|
+
fillRadio: "surfaceQuaternary";
|
|
22
|
+
fillRadioActive: "surfaceQuaternary";
|
|
23
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
24
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
25
|
+
labelTextColor: "surfaceTextPrimary";
|
|
26
|
+
descTextColor: "surfaceTextPrimary";
|
|
27
|
+
borderColor: "surfaceBorderQuaternary";
|
|
28
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
29
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
30
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
31
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
32
|
+
shape: "circular";
|
|
33
|
+
};
|
|
34
|
+
defaultSecondary: {
|
|
35
|
+
fill: "surfaceSecondary";
|
|
36
|
+
fillCheckmark: "surfaceQuaternary";
|
|
37
|
+
fillRadio: "surfaceSecondary";
|
|
38
|
+
fillRadioActive: "surfaceQuaternary";
|
|
39
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
40
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
41
|
+
labelTextColor: "surfaceTextPrimary";
|
|
42
|
+
descTextColor: "surfaceTextPrimary";
|
|
43
|
+
borderColor: "surfaceBorderQuaternary";
|
|
44
|
+
borderRadioColor: "surfaceBorderQuaternary";
|
|
45
|
+
borderRadioColorActive: "surfaceBorderQuaternary";
|
|
46
|
+
borderRadioColorActiveHover: "surfaceBorderQuaternary";
|
|
47
|
+
borderRadioColorHover: "surfaceBorderQuaternary";
|
|
48
|
+
shape: "circular";
|
|
49
|
+
};
|
|
50
|
+
defaultTertiary: {
|
|
51
|
+
fill: "surfaceTertiary";
|
|
52
|
+
fillCheckmark: "surfaceQuaternary";
|
|
53
|
+
fillRadio: "surfaceTertiary";
|
|
54
|
+
fillRadioActive: "surfaceQuaternary";
|
|
55
|
+
fillRadioActiveHover: "surfaceActiveHoverQuaternary";
|
|
56
|
+
fillRadioHover: "surfaceHoverTertiary";
|
|
7
57
|
labelTextColor: "surfaceTextPrimary";
|
|
8
58
|
descTextColor: "surfaceTextPrimary";
|
|
9
59
|
borderColor: "surfaceBorderQuaternary";
|
|
@@ -3,7 +3,57 @@ const radioAppearanceDefault = {
|
|
|
3
3
|
fill: 'surfaceSecondary',
|
|
4
4
|
fillCheckmark: 'surfaceQuaternary',
|
|
5
5
|
fillRadio: 'surfaceSecondary',
|
|
6
|
-
|
|
6
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
7
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
8
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
9
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
10
|
+
descTextColor: 'surfaceTextPrimary',
|
|
11
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
12
|
+
borderRadioColor: 'surfaceBorderQuaternary',
|
|
13
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
14
|
+
borderRadioColorActiveHover: 'surfaceBorderQuaternary',
|
|
15
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
16
|
+
shape: 'circular',
|
|
17
|
+
},
|
|
18
|
+
defaultQuaternary: {
|
|
19
|
+
fill: 'surfaceQuaternary',
|
|
20
|
+
fillCheckmark: 'surfaceQuaternary',
|
|
21
|
+
fillRadio: 'surfaceQuaternary',
|
|
22
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
23
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
24
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
25
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
26
|
+
descTextColor: 'surfaceTextPrimary',
|
|
27
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
28
|
+
borderRadioColor: 'surfaceBorderQuaternary',
|
|
29
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
30
|
+
borderRadioColorActiveHover: 'surfaceBorderQuaternary',
|
|
31
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
32
|
+
shape: 'circular',
|
|
33
|
+
},
|
|
34
|
+
defaultSecondary: {
|
|
35
|
+
fill: 'surfaceSecondary',
|
|
36
|
+
fillCheckmark: 'surfaceQuaternary',
|
|
37
|
+
fillRadio: 'surfaceSecondary',
|
|
38
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
39
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
40
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
41
|
+
labelTextColor: 'surfaceTextPrimary',
|
|
42
|
+
descTextColor: 'surfaceTextPrimary',
|
|
43
|
+
borderColor: 'surfaceBorderQuaternary',
|
|
44
|
+
borderRadioColor: 'surfaceBorderQuaternary',
|
|
45
|
+
borderRadioColorActive: 'surfaceBorderQuaternary',
|
|
46
|
+
borderRadioColorActiveHover: 'surfaceBorderQuaternary',
|
|
47
|
+
borderRadioColorHover: 'surfaceBorderQuaternary',
|
|
48
|
+
shape: 'circular',
|
|
49
|
+
},
|
|
50
|
+
defaultTertiary: {
|
|
51
|
+
fill: 'surfaceTertiary',
|
|
52
|
+
fillCheckmark: 'surfaceQuaternary',
|
|
53
|
+
fillRadio: 'surfaceTertiary',
|
|
54
|
+
fillRadioActive: 'surfaceQuaternary',
|
|
55
|
+
fillRadioActiveHover: 'surfaceActiveHoverQuaternary',
|
|
56
|
+
fillRadioHover: 'surfaceHoverTertiary',
|
|
7
57
|
labelTextColor: 'surfaceTextPrimary',
|
|
8
58
|
descTextColor: 'surfaceTextPrimary',
|
|
9
59
|
borderColor: 'surfaceBorderQuaternary',
|
|
@@ -6,8 +6,11 @@ type ComponentGalleryArgs = {
|
|
|
6
6
|
tier: string;
|
|
7
7
|
};
|
|
8
8
|
type ComponentGalleryResolved = {
|
|
9
|
+
normalizeAppearanceGroup: (appearance: string) => string;
|
|
9
10
|
resolveAppearanceKey: (appearance: string, tier: string) => string;
|
|
11
|
+
resolveTier: (appearance: string, tier: string) => string;
|
|
10
12
|
sizeKeys: string[];
|
|
13
|
+
tiersByAppearance: Record<string, string[]>;
|
|
11
14
|
};
|
|
12
15
|
type ComponentGallerySizeGridProps = {
|
|
13
16
|
children: (sizeKey: string) => ReactNode;
|
|
@@ -15,6 +15,23 @@ const DEFAULT_TIER_ORDER = [
|
|
|
15
15
|
'MutedTertiary',
|
|
16
16
|
'MutedQuaternary',
|
|
17
17
|
];
|
|
18
|
+
const matchAppearanceGroup = (appearance, appearanceList) => {
|
|
19
|
+
if (appearanceList.includes(appearance)) {
|
|
20
|
+
return appearance;
|
|
21
|
+
}
|
|
22
|
+
const matchedGroup = [...appearanceList]
|
|
23
|
+
.sort((left, right) => right.length - left.length)
|
|
24
|
+
.find((group) => appearance === group ||
|
|
25
|
+
appearance.startsWith(`${group} `) ||
|
|
26
|
+
appearance.startsWith(group));
|
|
27
|
+
return matchedGroup ?? appearance.split(' ')[0] ?? appearance;
|
|
28
|
+
};
|
|
29
|
+
const resolveTierForAppearance = (tier, tiersForAppearance) => {
|
|
30
|
+
if (tiersForAppearance.includes(tier)) {
|
|
31
|
+
return tier;
|
|
32
|
+
}
|
|
33
|
+
return tiersForAppearance[0] ?? tier;
|
|
34
|
+
};
|
|
18
35
|
const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
|
|
19
36
|
const appearanceList = Object.keys(appearanceGroups).sort();
|
|
20
37
|
const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
|
|
@@ -26,7 +43,13 @@ const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tie
|
|
|
26
43
|
const appearanceTierOptions = [
|
|
27
44
|
...new Set(Object.values(tiersByAppearance).flat()),
|
|
28
45
|
].sort((left, right) => tierOrder.indexOf(left) - tierOrder.indexOf(right));
|
|
29
|
-
const resolveAppearanceKey = (
|
|
46
|
+
const resolveAppearanceKey = (appearanceGroup, tier) => `${appearanceGroup}${tier}`;
|
|
47
|
+
const normalizeAppearanceGroup = (appearance) => matchAppearanceGroup(appearance, appearanceList);
|
|
48
|
+
const resolveTier = (appearance, tier) => {
|
|
49
|
+
const appearanceGroup = normalizeAppearanceGroup(appearance);
|
|
50
|
+
const tiersForAppearance = tiersByAppearance[appearanceGroup] ?? [];
|
|
51
|
+
return resolveTierForAppearance(tier, tiersForAppearance);
|
|
52
|
+
};
|
|
30
53
|
const sizeKeys = Object.keys(size);
|
|
31
54
|
const styleOptions = Object.keys(style);
|
|
32
55
|
const shapeOptions = Object.keys(shape);
|
|
@@ -59,12 +82,17 @@ const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tie
|
|
|
59
82
|
}),
|
|
60
83
|
};
|
|
61
84
|
const resolved = {
|
|
85
|
+
normalizeAppearanceGroup,
|
|
62
86
|
resolveAppearanceKey,
|
|
87
|
+
resolveTier,
|
|
63
88
|
sizeKeys,
|
|
89
|
+
tiersByAppearance,
|
|
64
90
|
};
|
|
65
91
|
const render = (args, renderComponent) => {
|
|
66
92
|
const { appearance, shape, style, tier } = args;
|
|
67
|
-
const
|
|
93
|
+
const appearanceGroup = resolved.normalizeAppearanceGroup(appearance);
|
|
94
|
+
const resolvedTier = resolved.resolveTier(appearance, tier);
|
|
95
|
+
const appearanceKey = resolved.resolveAppearanceKey(appearanceGroup, resolvedTier);
|
|
68
96
|
return (_jsx(ComponentGallerySizeGrid, { sizeKeys: resolved.sizeKeys, children: (sizeKey) => renderComponent({
|
|
69
97
|
appearance: mergeAppearanceKeys(appearanceKey, style, shape, sizeKey),
|
|
70
98
|
args: args,
|
|
@@ -80,6 +108,7 @@ const createComponentGallery = ({ size, src, appearanceGroups, shape, style, tie
|
|
|
80
108
|
shapeOptions,
|
|
81
109
|
sizeKeys,
|
|
82
110
|
styleOptions,
|
|
111
|
+
tiersByAppearance,
|
|
83
112
|
};
|
|
84
113
|
};
|
|
85
114
|
export { createComponentGallery };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.109",
|
|
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.9.
|
|
56
|
+
"@itcase/ui-core": "^1.9.108",
|
|
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": "ada64189f7c2fb547757b8dc7a2e1ce1fefb34fe"
|
|
118
118
|
}
|