@itcase/ui-web 1.9.105 → 1.9.106

package/dist/cjs/components/Checkbox.js

@@ -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 i={defaultPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverTertiary",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:i,setAppearance:e=>{l.appearance=e}};exports.Checkbox=function(i){const{id:a,appearance:s,className:t,dataTestId:b,dataTour:x,label:d,desc:C,checked:h,disabled:n,indeterminate:v,Tag:k="label",value:u,before:f,after:y,isActive:T,isChecked:_,isDisabled:m,isSkeleton:H,onBlur:A,onChange:P,onFocus:p}=i,S=o.useAppearanceConfig(s,l,m),z=o.useDevicePropsGenerator(i,S),{fillCheckboxActiveClass:B,fillCheckboxActiveHoverClass:g,fillCheckboxClass:$,fillCheckboxHoverClass:j,fillCheckmarkClass:w,fillClass:q,fillHoverClass:N,labelTextColor:Q,labelTextSize:W,labelTextWeight:F,descTextColor:D,descTextSize:L,descTextWeight:G,borderColorCheckboxActiveClass:I,borderColorCheckboxActiveHoverClass:M,borderColorCheckboxClass:X,borderColorCheckboxHoverClass:E,shapeClass:J,sizeClass:K,widthClass:O}=z;return e.jsxs(k,{className:r(t,"checkbox",q&&`fill_${q}`,N&&`fill_${N}`,K&&`checkbox_size_${K}`,h?B&&`checkbox_fill_active_${B}`:$&&`checkbox_fill_${$}`,h?g&&`checkbox_fill_active_hover_${g}`:j&&`checkbox_fill_hover_${j}`,h?I&&`checkbox_border-color_active_${I}`:X&&`checkbox_border-color_${X}`,h?M&&`checkbox_border-color_active_hover_${M}`:E&&`checkbox_border-color_hover_${E}`,O&&`width_${O}`,H&&"skeleton"),"data-testid":b,"data-tour":x,htmlFor:"label"===k&&a,children:[f,e.jsxs("div",{className:"checkbox__item",children:[e.jsx("input",{id:a,className:"checkbox__input",type:"checkbox",checked:T||_||h,disabled:m||n,value:u,onBlur:A,onChange:P,onFocus:p}),e.jsx("div",{className:r("checkbox__state",J&&`shape_${J}`),children:" "}),e.jsx("div",{className:r(v?"checkbox__state-indeterminate":"checkbox__state-checkmark",(h||v)&&w&&`fill_${w}`),children:" "})]}),d&&e.jsx(c.Text,{className:"checkbox__label",size:W,textColor:Q,textWeight:F,children:d}),C&&e.jsx(c.Text,{className:"checkbox__desc",size:L,textColor:D,textWeight:G,children:C}),y&&e.jsx("div",{className:"checkbox__after",children:y})]})},exports.checkboxAppearance=i,exports.checkboxConfig=l;
+"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;

package/dist/components/Checkbox.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as c,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 a={defaultPrimary:{fill:"surfaceSecondary",fillCheckbox:"surfaceSecondary",fillCheckboxActive:"surfaceQuaternary",fillCheckboxActiveHover:"surfaceActiveHoverTertiary",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"}},s={appearance:a,setAppearance:e=>{s.appearance=e}};function t(a){const{id:t,appearance:b,className:d,dataTestId:x,dataTour:C,label:h,desc:n,checked:v,disabled:k,indeterminate:f,Tag:u="label",value:y,before:m,after:T,isActive:_,isChecked:H,isDisabled:A,isSkeleton:p,onBlur:P,onChange:S,onFocus:z}=a,B=c(b,s,A),g=i(a,B),{fillCheckboxActiveClass:$,fillCheckboxActiveHoverClass:w,fillCheckboxClass:N,fillCheckboxHoverClass:Q,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,shapeClass:O,sizeClass:R,widthClass:U}=g;return e(u,{className:o(d,"checkbox",F&&`fill_${F}`,j&&`fill_${j}`,R&&`checkbox_size_${R}`,v?$&&`checkbox_fill_active_${$}`:N&&`checkbox_fill_${N}`,v?w&&`checkbox_fill_active_hover_${w}`:Q&&`checkbox_fill_hover_${Q}`,v?E&&`checkbox_border-color_active_${E}`:J&&`checkbox_border-color_${J}`,v?G&&`checkbox_border-color_active_hover_${G}`:K&&`checkbox_border-color_hover_${K}`,U&&`width_${U}`,p&&"skeleton"),"data-testid":x,"data-tour":C,htmlFor:"label"===u&&t,children:[m,e("div",{className:"checkbox__item",children:[r("input",{id:t,className:"checkbox__input",type:"checkbox",checked:_||H||v,disabled:A||k,value:y,onBlur:P,onChange:S,onFocus:z}),r("div",{className:o("checkbox__state",O&&`shape_${O}`),children:" "}),r("div",{className:o(f?"checkbox__state-indeterminate":"checkbox__state-checkmark",(v||f)&&W&&`fill_${W}`),children:" "})]}),h&&r(l,{className:"checkbox__label",size:q,textColor:L,textWeight:D,children:h}),n&&r(l,{className:"checkbox__desc",size:M,textColor:I,textWeight:X,children:n}),T&&r("div",{className:"checkbox__after",children:T})]})}export{t as Checkbox,a as checkboxAppearance,s as checkboxConfig};
+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};

package/dist/css/styles/bundles.css

@@ -53716,6 +53716,20 @@ div.avatar-stack {
       }
     }
 }
+.checkbox {
+  &&_width {
+    &_fixed {
+      width: 180px;
+    }
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}
 .checkbox_border-color {
   &_active_none,
   &_active_hover_none,

package/dist/types/components/Checkbox/Checkbox.appearance.d.ts

@@ -97,7 +97,46 @@ declare const checkboxAppearance: {
         fill: "surfaceSecondary";
         fillCheckbox: "surfaceSecondary";
         fillCheckboxActive: "surfaceQuaternary";
-        fillCheckboxActiveHover: "surfaceActiveHoverTertiary";
+        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";

package/dist/types/components/Checkbox/Checkbox.interface.d.ts

@@ -1,5 +1,5 @@
 import type { ElementType, ReactNode } from 'react';
-import { AppearanceConfig, AppearanceKeysState, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceKeysState, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceStateDefault, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, HeightProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import type { StyleAttributes } from '@itcase/ui-core/hooks';
 import type { ComponentGalleryArgs } from 'src/storybook/createComponentGallery';
@@ -21,6 +21,7 @@ type CheckboxAppearanceProps = {
     fillCheckboxHover?: FillHoverProps;
     fillCheckmark?: FillProps;
     fillHover?: FillHoverProps;
+    height?: HeightProps;
     labelTextColor?: TextProps['textColor'];
     labelTextSize?: TextProps['size'];
     labelTextWeight?: TextProps['textWeight'];

package/dist/types/components/Checkbox/Checkbox.js

@@ -13,7 +13,7 @@ function Checkbox(props) {
     const { id, appearance, className, dataTestId, dataTour, label, desc, checked, disabled, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
     const appearanceConfig = useAppearanceConfig(appearance, checkboxConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
+    const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, heightClass, shapeClass, sizeClass, widthClass, } = propsGenerator;
     return (_jsxs(Tag, { className: clsx(className, 'checkbox', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, sizeClass && `checkbox_size_${sizeClass}`, !checked
             ? fillCheckboxClass && `checkbox_fill_${fillCheckboxClass}`
             : fillCheckboxActiveClass &&
@@ -29,7 +29,7 @@ function Checkbox(props) {
             ? borderColorCheckboxHoverClass &&
                 `checkbox_border-color_hover_${borderColorCheckboxHoverClass}`
             : borderColorCheckboxActiveHoverClass &&
-                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: Tag === 'label' && id, children: [before, _jsxs("div", { className: "checkbox__item", children: [_jsx("input", { id: id, className: "checkbox__input", type: "checkbox", checked: isActive || isChecked || checked, disabled: isDisabled || disabled, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), _jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`), children: "\u00A0" }), _jsx("div", { className: clsx(!indeterminate
+                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `checkbox_width_${widthClass}`, heightClass && `checkbox_height_${heightClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: Tag === 'label' && id, children: [before, _jsxs("div", { className: "checkbox__item", children: [_jsx("input", { id: id, className: "checkbox__input", type: "checkbox", checked: isActive || isChecked || checked, disabled: isDisabled || disabled, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), _jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`), children: "\u00A0" }), _jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&

package/dist/types/components/Checkbox/appearance/checkboxDefault.d.ts

@@ -3,7 +3,46 @@ declare const checkboxAppearanceDefault: {
         fill: "surfaceSecondary";
         fillCheckbox: "surfaceSecondary";
         fillCheckboxActive: "surfaceQuaternary";
-        fillCheckboxActiveHover: "surfaceActiveHoverTertiary";
+        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";

package/dist/types/components/Checkbox/appearance/checkboxDefault.js

@@ -3,7 +3,46 @@ const checkboxAppearanceDefault = {
         fill: 'surfaceSecondary',
         fillCheckbox: 'surfaceSecondary',
         fillCheckboxActive: 'surfaceQuaternary',
-        fillCheckboxActiveHover: 'surfaceActiveHoverTertiary',
+        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',

package/dist/types/components/Segmented/appearance/segmentedRequire.js

@@ -12,14 +12,3 @@ const segmentedAppearanceRequire = {
     },
 };
 export { segmentedAppearanceRequire };
-// fill: 'surfacePrimary',
-// fillActive: 'accentPrimary',
-// fillActiveHover: 'accentPrimary',
-// fillHover: 'surfaceHoverSecondary',
-// labelTextActiveColor: 'accentTextPrimary',
-// labelTextActiveColorHover: 'accentTextPrimary',
-// labelTextColor: 'surfaceTextPrimary',
-// borderColor: 'surfaceBorderQuaternary',
-// iconFill: 'surfaceItemQuaternary',
-// iconFillActive: 'surfaceItemSecondary',
-// indicatorFill: 'accentPrimary',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.9.105",
+  "version": "1.9.106",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "@itcase/tokens-am": "^1.1.57",
     "@itcase/tokens-baikal": "^1.1.54",
     "@itcase/tokens-palette": "^1.1.50",
-    "@itcase/ui-core": "^1.9.105",
+    "@itcase/ui-core": "^1.9.106",
     "@rc-component/tooltip": "^1.4.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.2.1",
@@ -114,5 +114,5 @@
     "storybook": "^10.4.0",
     "typescript": "^6.0.3"
   },
-  "gitHead": "b218d412f3af6819f6555abdbef7e83b0646c5bb"
+  "gitHead": "94c244ddf0aa609d195417f05304eef0d5a7eb12"
 }