@itcase/ui-web 1.9.108 → 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.
Files changed (11) hide show
  1. package/dist/cjs/components/Radio.js +1 -1
  2. package/dist/components/Radio.js +1 -1
  3. package/dist/types/components/Checkbox/stories/CheckboxDemo.stories.js +1 -1
  4. package/dist/types/components/Radio/Radio.appearance.d.ts +51 -1
  5. package/dist/types/components/Radio/appearance/radioDefault.d.ts +51 -1
  6. package/dist/types/components/Radio/appearance/radioDefault.js +51 -1
  7. package/dist/types/components/Radio/stories/RadioDemo.stories.js +1 -1
  8. package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts +3 -0
  9. package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts +3 -0
  10. package/dist/types/storybook/createComponentGallery/createComponentGallery.js +31 -2
  11. package/package.json +2 -2
package/dist/cjs/components/Radio.js CHANGED
@@ -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:s,className:c,dataTestId:t,dataTour:n,label:u,desc:f,checked:C,tag:v="label",value:b,isActive:x,isDisabled:y,isSkeleton:_,onChange:m}=i,T=o.useAppearanceConfig(s,l,y),h=o.useDevicePropsGenerator(i,T),{fillCheckmarkClass:R,fillClass:p,fillHoverClass:H,fillRadioActiveClass:B,fillRadioActiveHoverClass:Q,fillRadioClass:A,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}=h;return r.jsxs(v,{className:e(c,"radio",p&&`fill_${p}`,H&&`fill_${H}`,_&&"skeleton",w&&`radio_size_${w}`,C&&x?B&&`radio_fill_active_${B}`:A&&`radio_fill_${A}`,C&&x?Q&&`radio_fill_active_hover_${Q}`:k&&`radio_fill_hover_${k}`,C&&x?q&&`radio_border-color_active_${q}`:X&&`radio_border-color_${X}`,C&&x?N&&`radio_border-color_active_hover_${N}`:L&&`radio_border-color_hover_${L}`),"data-testid":t,"data-tour":n,htmlFor:d,children:[r.jsxs("div",{className:e("radio__item"),children:[r.jsx("input",{id:String(d),className:"radio__input",type:"radio",checked:C,disabled:y,value:b,onChange:m}),r.jsx("div",{className:e("radio__state",W&&`shape_${W}`),children:" "}),r.jsx("div",{className:e("radio__state-checkmark",C&&R&&`fill_${R}`),children:" "})]}),u&&r.jsx(a.Text,{className:"radio__label",size:S,textColor:P,textWeight:z,children:u}),f&&r.jsx(a.Text,{className:"radio__desc",size:$,textColor:g,textWeight:j,children:f})]})},exports.radioAppearance=i,exports.radioConfig=l;
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;
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"}},s={appearance:d,setAppearance:r=>{s.appearance=r}};function t(d){const{id:t,appearance:c,className:n,dataTestId:u,dataTour:f,label:C,desc:v,checked:b,tag:m="label",value:y,isActive:x,isDisabled:_,isSkeleton:T,onChange:h}=d,R=a(c,s,_),p=i(d,R),{fillCheckmarkClass:H,fillClass:B,fillHoverClass:Q,fillRadioActiveClass:A,fillRadioActiveHoverClass:k,fillRadioClass:S,fillRadioHoverClass:z,labelTextColor:P,labelTextSize:g,labelTextWeight:$,descTextColor:N,descTextSize:X,descTextWeight:L,borderRadioColorActiveClass:W,borderRadioColorActiveHoverClass:w,borderRadioColorClass:M,borderRadioColorHoverClass:j,shapeClass:D,sizeClass:q}=p;return r(m,{className:o(n,"radio",B&&`fill_${B}`,Q&&`fill_${Q}`,T&&"skeleton",q&&`radio_size_${q}`,b&&x?A&&`radio_fill_active_${A}`:S&&`radio_fill_${S}`,b&&x?k&&`radio_fill_active_hover_${k}`:z&&`radio_fill_hover_${z}`,b&&x?W&&`radio_border-color_active_${W}`:M&&`radio_border-color_${M}`,b&&x?w&&`radio_border-color_active_hover_${w}`:j&&`radio_border-color_hover_${j}`),"data-testid":u,"data-tour":f,htmlFor:t,children:[r("div",{className:o("radio__item"),children:[e("input",{id:String(t),className:"radio__input",type:"radio",checked:b,disabled:_,value:y,onChange:h}),e("div",{className:o("radio__state",D&&`shape_${D}`),children:" "}),e("div",{className:o("radio__state-checkmark",b&&H&&`fill_${H}`),children:" "})]}),C&&e(l,{className:"radio__label",size:g,textColor:P,textWeight:$,children:C}),v&&e(l,{className:"radio__desc",size:X,textColor:N,textWeight:L,children:v})]})}export{t as Radio,d as radioAppearance,s as radioConfig};
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};
package/dist/types/components/Checkbox/stories/CheckboxDemo.stories.js CHANGED
@@ -25,7 +25,7 @@ const meta = {
25
25
  title: 'Atoms / Checkbox',
26
26
  component: Checkbox,
27
27
  args: {
28
- appearance: 'default sizeM solid rounded',
28
+ appearance: 'default',
29
29
  tier: 'Primary',
30
30
  style: 'solid',
31
31
  shape: 'rounded',
package/dist/types/components/Radio/Radio.appearance.d.ts CHANGED
@@ -101,7 +101,57 @@ declare const radioAppearance: {
101
101
  fill: "surfaceSecondary";
102
102
  fillCheckmark: "surfaceQuaternary";
103
103
  fillRadio: "surfaceSecondary";
104
- fillRadioHover: "surfaceTertiary";
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";
package/dist/types/components/Radio/appearance/radioDefault.d.ts CHANGED
@@ -3,7 +3,57 @@ declare const radioAppearanceDefault: {
3
3
  fill: "surfaceSecondary";
4
4
  fillCheckmark: "surfaceQuaternary";
5
5
  fillRadio: "surfaceSecondary";
6
- fillRadioHover: "surfaceTertiary";
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";
package/dist/types/components/Radio/appearance/radioDefault.js CHANGED
@@ -3,7 +3,57 @@ const radioAppearanceDefault = {
3
3
  fill: 'surfaceSecondary',
4
4
  fillCheckmark: 'surfaceQuaternary',
5
5
  fillRadio: 'surfaceSecondary',
6
- fillRadioHover: 'surfaceTertiary',
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',
package/dist/types/components/Radio/stories/RadioDemo.stories.js CHANGED
@@ -25,7 +25,7 @@ const meta = {
25
25
  title: 'Atoms / Radio',
26
26
  component: Radio,
27
27
  args: {
28
- appearance: 'default sizeM solid rounded',
28
+ appearance: 'default',
29
29
  tier: 'Primary',
30
30
  style: 'solid',
31
31
  shape: 'circular',
package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts CHANGED
@@ -34,5 +34,8 @@ declare const createComponentGallery: <TAppearance extends string = string>({ si
34
34
  shapeOptions: string[];
35
35
  sizeKeys: string[];
36
36
  styleOptions: string[];
37
+ tiersByAppearance: {
38
+ [k: string]: string[];
39
+ };
37
40
  };
38
41
  export { createComponentGallery };
package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts CHANGED
@@ -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;
package/dist/types/storybook/createComponentGallery/createComponentGallery.js CHANGED
@@ -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 = (appearance, tier) => `${appearance}${tier}`;
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 appearanceKey = resolved.resolveAppearanceKey(appearance, tier);
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.108",
3
+ "version": "1.9.109",
4
4
  "description": "UI components",
5
5
  "keywords": "",
6
6
  "license": "MIT",
@@ -114,5 +114,5 @@
114
114
  "storybook": "^10.4.0",
115
115
  "typescript": "^6.0.3"
116
116
  },
117
- "gitHead": "d3a01ec4fe9afa1a36060c2d8bfc7df17509dbaa"
117
+ "gitHead": "ada64189f7c2fb547757b8dc7a2e1ce1fefb34fe"
118
118
  }