@foxford/ui 2.7.1 → 2.8.0-beta-59fcb2c-20230822

package/components/Switcher/Switcher.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{createRef as a}from'react';import{Root as t,Input as o,Switcher as n,Label as i}from'./style.js';import{jsxs as l,jsx as s}from'react/jsx-runtime';var c=["id","value","name","children","tabIndex","onChange"];function d(d){var m=a();var{id:h,value:p,name:u,children:b,tabIndex:f,onChange:x}=d,v=r(d,c);return l(t,e(e({value:p},v),{},{children:[s(o,{id:h,name:u,checked:p,type:"checkbox",tabIndex:f,ref:m,onChange:e=>{d.disabled||'function'!=typeof x||x(e.target.checked,e)}}),s(n,{htmlFor:h}),b?s(i,{htmlFor:h,children:b}):null]}))}d.defaultProps={value:!1,disabled:!1,color:'atlantis'},d.displayName='Switcher';export{d as Switcher};
+import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as a}from'react';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{BRAND_PROPS as s,DEFAULT_PROPS as i}from'./constants.js';import{Root as n,Input as c,Switcher as d,Label as l}from'./style.js';import{jsxs as m,jsx as h}from'react/jsx-runtime';var p=["value","disabled","color","tabIndex","id","name","children","onChange"];var b='Switcher';var f=a(((a,b)=>{var f;var u=t();var v=o(null===(f=u.components)||void 0===f?void 0:f.Switcher,a),{value:j=!1,disabled:y=!1,color:S="atlantis",tabIndex:k,id:x,name:P,children:g,onChange:w}=v,C=r(v,p);var N=!y&&'function'==typeof w;var R='brand'===u.preset;'string'==typeof C.preset&&(R='brand'===C.preset);var D=R?s:i;return m(n,e(e(e({},C),D),{},{ref:b,checked:j,color:S,disabled:y,brandPresetUsed:R,children:[h(c,{id:x,name:P,checked:j,type:"checkbox",tabIndex:k,onChange:e=>{N&&w(e.target.checked,e)},onKeyDown:e=>{['Enter','Spacebar',' '].includes(e.key)&&N&&(e.preventDefault(),w(!j,e))},disabled:y}),h(d,e({htmlFor:x},D)),g?h(l,{htmlFor:x,children:g}):null]}))}));f.displayName="Switcher";export{b as COMPONENT_NAME,f as Switcher};
 //# sourceMappingURL=Switcher.js.map

package/components/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switcher.js","sources":["../../../../src/components/Switcher/Switcher.tsx"],"sourcesContent":["import { createRef } from 'react'\nimport { Color } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SwitcherProps extends BaseProps, Color<'color'>, Color<'inactiveColor'> {\n  /**\n   * Id for swithcer\n   */\n  id?: string\n  /**\n   * Name of input\n   */\n  name?: string\n  /**\n   * Value of input\n   */\n  value?: boolean\n  /**\n   * Switcher is disabled\n   */\n  disabled?: boolean\n  /**\n   * Tabindex\n   */\n  tabIndex?: number\n  /**\n   * Label of switcher\n   */\n  /**\n   * Children react node\n   */\n  children?: React.ReactNode\n  /**\n   * onChange function\n   */\n  onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement>): void\n}\n\nSwitcher.defaultProps = {\n  value: false,\n  disabled: false,\n  color: 'atlantis',\n}\n\nSwitcher.displayName = 'Switcher'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'inactiveColor'>`](#/Миксины)\n */\nexport function Switcher(props: typeof Switcher.defaultProps & SwitcherProps) {\n  const inputRef = createRef<HTMLInputElement>()\n  const { id, value, name, children, tabIndex, onChange, ...restProps } = props\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!props.disabled && typeof onChange === 'function') {\n      onChange(event.target.checked, event)\n    }\n  }\n\n  return (\n    <Styled.Root value={value} {...restProps}>\n      <Styled.Input\n        id={id}\n        name={name}\n        checked={value}\n        type='checkbox'\n        tabIndex={tabIndex}\n        ref={inputRef}\n        onChange={handleChange}\n      />\n      <Styled.Switcher htmlFor={id} />\n      {children ? <Styled.Label htmlFor={id}>{children}</Styled.Label> : null}\n    </Styled.Root>\n  )\n}\n"],"names":["Switcher","props","inputRef","createRef","id","value","name","children","tabIndex","onChange","restProps","_excluded","_jsxs","Styled.Root","_objectSpread","_jsx","Styled.Input","checked","type","ref","event","disabled","target","Styled.Switcher","htmlFor","Styled.Label","defaultProps","color","displayName"],"mappings":"yUAqDO,SAASA,EAASC,GACvB,IAAMC,EAAWC,IACjB,IAAMC,GAAEA,EAAFC,MAAMA,EAANC,KAAaA,EAAbC,SAAmBA,EAAnBC,SAA6BA,EAA7BC,SAAuCA,GAA2BR,EAAdS,IAAcT,EAAxEU,GAQA,OACEC,EAACC,EAADC,EAAAA,EAAA,CAAaT,MAAOA,GAAWK,GAA/B,GAAA,CAAAH,SACE,CAAAQ,EAACC,EAAD,CACEZ,GAAIA,EACJE,KAAMA,EACNW,QAASZ,EACTa,KAAK,WACLV,SAAUA,EACVW,IAAKjB,EACLO,SAf4DW,IAC3DnB,EAAMoB,UAAgC,mBAAbZ,GAC5BA,EAASW,EAAME,OAAOL,QAASG,MAe/BL,EAACQ,EAAD,CAAiBC,QAASpB,IACzBG,EAAWQ,EAACU,EAAD,CAAcD,QAASpB,EAAvBG,SAA4BA,IAA2B,SApCzEP,EAAS0B,aAAe,CACtBrB,OAAO,EACPgB,UAAU,EACVM,MAAO,YAGT3B,EAAS4B,YAAc"}
+{"version":3,"file":"Switcher.js","sources":["../../../../src/components/Switcher/Switcher.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport type { SwitcherProps } from './types'\nimport { DEFAULT_PROPS, BRAND_PROPS } from './constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Switcher'\n\nconst Switcher = forwardRef<HTMLDivElement, SwitcherProps>((props, ref) => {\n  const theme = useFallbackTheme()\n\n  const {\n    value = false,\n    disabled = false,\n    color = 'atlantis',\n    tabIndex,\n    id,\n    name,\n    children,\n    onChange,\n    ...config\n  } = useConfigPriority<SwitcherProps>(theme.components?.Switcher, props)\n  const isChangeable = !disabled && typeof onChange === 'function'\n\n  let brandPresetUsed = theme.preset === 'brand'\n  if (typeof config.preset === 'string') brandPresetUsed = config.preset === 'brand'\n\n  const propsByPreset = brandPresetUsed ? BRAND_PROPS : DEFAULT_PROPS\n\n  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (isChangeable) onChange(event.target.checked, event)\n  }\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n    if (['Enter', 'Spacebar', ' '].includes(event.key) && isChangeable) {\n      event.preventDefault()\n      onChange(!value, event)\n    }\n  }\n\n  return (\n    <Styled.Root\n      {...config}\n      {...propsByPreset}\n      ref={ref}\n      checked={value}\n      color={color}\n      disabled={disabled}\n      brandPresetUsed={brandPresetUsed}\n    >\n      <Styled.Input\n        id={id}\n        name={name}\n        checked={value}\n        type='checkbox'\n        tabIndex={tabIndex}\n        onChange={handleChange}\n        onKeyDown={onKeyDown}\n        disabled={disabled}\n      />\n      <Styled.Switcher htmlFor={id} {...propsByPreset} />\n      {children ? <Styled.Label htmlFor={id}>{children}</Styled.Label> : null}\n    </Styled.Root>\n  )\n})\n\nSwitcher.displayName = COMPONENT_NAME\n\nexport { Switcher, COMPONENT_NAME }\n\nexport type { SwitcherProps }\n"],"names":["COMPONENT_NAME","Switcher","forwardRef","props","ref","_theme$components","theme","useFallbackTheme","useConfigPriority","components","value","disabled","color","tabIndex","id","name","children","onChange","_useConfigPriority","config","_objectWithoutProperties","_excluded","isChangeable","brandPresetUsed","preset","propsByPreset","BRAND_PROPS","DEFAULT_PROPS","_jsxs","Styled.Root","checked","_jsx","Styled.Input","type","event","target","onKeyDown","includes","key","preventDefault","Styled.Switcher","_objectSpread","htmlFor","Styled.Label","displayName"],"mappings":"giBAOMA,IAAAA,EAAiB,WAEjBC,IAAAA,EAAWC,IAA2CC,EAAOC,KAAQ,IAAAC,EACzE,IAAMC,EAAQC,IAEd,IAUIC,EAAAA,UAAiCF,EAAAA,EAAMG,+BAANJ,EAAkBJ,SAAUE,IAV3DO,MACJA,KADIC,SAEJA,KAFIC,MAGJA,EAAQ,WAHJC,SAIJA,EAJIC,GAKJA,EALIC,KAMJA,EANIC,SAOJA,EAPIC,SAQJA,GARFC,EASKC,EATLC,EAAAF,EAAAG,GAWA,IAAMC,GAAgBX,GAAgC,mBAAbM,EAEzC,IAAIM,EAAmC,UAAjBjB,EAAMkB,OACC,iBAAlBL,EAAOK,SAAqBD,EAAoC,UAAlBJ,EAAOK,QAEhE,IAAMC,EAAgBF,EAAkBG,EAAcC,EAatD,OACEC,EAACC,EACKV,EAAAA,EAAAA,EAAAA,GAAAA,GACAM,GAFN,GAAA,CAGErB,IAAKA,EACL0B,QAASpB,EACTE,MAAOA,EACPD,SAAUA,EACVY,gBAAiBA,EAPnBP,SASE,CAAAe,EAACC,EAAD,CACElB,GAAIA,EACJC,KAAMA,EACNe,QAASpB,EACTuB,KAAK,WACLpB,SAAUA,EACVI,SA3B4DiB,IAC5DZ,GAAcL,EAASiB,EAAMC,OAAOL,QAASI,IA2B7CE,UAxB2DF,IAC3D,CAAC,QAAS,WAAY,KAAKG,SAASH,EAAMI,MAAQhB,IACpDY,EAAMK,iBACNtB,GAAUP,EAAOwB,KAsBfvB,SAAUA,IAEZoB,EAACS,EAADC,EAAA,CAAiBC,QAAS5B,GAAQW,IACjCT,EAAWe,EAACY,EAAD,CAAcD,QAAS5B,EAAvBE,SAA4BA,IAA2B,YAKzEf,EAAS2C,YA5Dc"}

package/components/Switcher/constants.js

@@ -0,0 +1,2 @@
+var i={fontSize:16,switcherWidth:60,switcherHeight:32,borderRadius:40,dotSize:24};var e={fontSize:18,switcherWidth:44,switcherHeight:24,borderRadius:48,dotSize:16};export{e as BRAND_PROPS,i as DEFAULT_PROPS};
+//# sourceMappingURL=constants.js.map

package/components/Switcher/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/components/Switcher/constants.ts"],"sourcesContent":["import type { SwitcherPropsByPreset } from './types'\n\nexport const DEFAULT_PROPS: SwitcherPropsByPreset = {\n  fontSize: 16,\n  switcherWidth: 60,\n  switcherHeight: 32,\n  borderRadius: 40,\n  dotSize: 24,\n}\n\nexport const BRAND_PROPS: SwitcherPropsByPreset = {\n  fontSize: 18,\n  switcherWidth: 44,\n  switcherHeight: 24,\n  borderRadius: 48,\n  dotSize: 16,\n}\n"],"names":["DEFAULT_PROPS","fontSize","switcherWidth","switcherHeight","borderRadius","dotSize","BRAND_PROPS"],"mappings":"AAEO,IAAMA,EAAuC,CAClDC,SAAU,GACVC,cAAe,GACfC,eAAgB,GAChBC,aAAc,GACdC,QAAS,IAGJ,IAAMC,EAAqC,CAChDL,SAAU,GACVC,cAAe,GACfC,eAAgB,GAChBC,aAAc,GACdC,QAAS"}

package/components/Switcher/style.js

@@ -1,2 +1,2 @@
-import o,{css as e}from'styled-components';import i from'tinycolor2';import{getColor as r}from'../../mixins/color.js';var t=o.input.withConfig({componentId:"fox-ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);var n=o.label.withConfig({componentId:"fox-ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);var a=o.label.withConfig({componentId:"fox-ui__sc-w14piw-2"})(["position:relative;display:block;box-sizing:border-box;width:","px;height:","px;cursor:pointer;user-select:none;transition:background 0.3s ease,background-image 0.3s ease;border-radius:","px;box-shadow:inset 0 2px 2px 0 rgba(0,0,0,0.08);background-color:",";flex:0 0 auto;&:before{position:absolute;top:","px;left:","px;display:block;width:","px;height:","px;content:'';transition:background 0.3s ease,left 0.3s ease;transform:translateZ(0);border-radius:100%;background-color:",";box-shadow:0 0 6px 0 rgba(0,0,0,0.16);}&:active{&::before{box-shadow:0 0 1px 1px rgba(0,0,0,0.2);}}"],60,32,40,"#eaecf3",4,4,24,24,(o=>o.theme.colors.white));var l=e(["cursor:not-allowed;opacity:0.7;& ","{cursor:not-allowed;background-color:",";box-shadow:none;&:before{background-color:",";box-shadow:none;}}& ","{cursor:not-allowed;}"],a,"#eaecf3",(o=>o.theme.colors.white),n);var s=e(["& ","{&:before{left:","px;}}"],a,32);var c=o.div.withConfig({shouldForwardProp:o=>['className','style','children'].includes(o)}).withConfig({componentId:"fox-ui__sc-w14piw-3"})(["line-height:","px;position:relative;display:inline-flex;flex-direction:row;box-sizing:border-box;height:","px;vertical-align:middle;justify-content:flex-start;align-content:center;align-items:center;max-width:100%;color:inherit;"," "," ",""],32,32,(o=>o.disabled?l:null),(o=>o.value?s:null),(o=>o.value&&o.color?e(["& ","{background-image:linear-gradient( to right,",","," );}"],a,i(r(o.color,o)).lighten(10).toString(),r(o.color,o)):o.inactiveColor?e(["& ","{background-image:linear-gradient( to right,",","," );}"],a,i(r(o.inactiveColor,o)).lighten(10).toString(),r(o.inactiveColor,o)):null));export{t as Input,n as Label,c as Root,a as Switcher};
+import n,{css as o}from'styled-components';import e from'tinycolor2';import{injectDefaultTheme as t}from'../../shared/utils/inject-theme.js';import{getColor as i}from'../../mixins/color.js';var r=n.input.withConfig({componentId:"fox-ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);var a=n.label.withConfig({componentId:"fox-ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);var c=n.label.withConfig({componentId:"fox-ui__sc-w14piw-2"})(["position:relative;display:block;box-sizing:border-box;width:","px;height:","px;cursor:pointer;user-select:none;transition:background 0.3s ease,background-image 0.3s ease;border-radius:","px;flex:0 0 auto;&::before{position:absolute;top:","px;left:","px;display:block;width:","px;height:","px;content:'';transition:background 0.3s ease,left 0.3s ease;transform:translateZ(0);border-radius:50%;}"],(n=>n.switcherWidth),(n=>n.switcherHeight),(n=>n.borderRadius),(n=>{var{switcherHeight:o,dotSize:e}=n;return(o-e)/2}),(n=>{var{switcherHeight:o,dotSize:e}=n;return(o-e)/2}),(n=>n.dotSize),(n=>n.dotSize));var s="\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ".concat(c," {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ").concat(a," {\n    cursor: not-allowed;\n  }\n");var l=o(["& ","{&::before{left:","px;}}"],c,(n=>{var{switcherWidth:o,switcherHeight:e,dotSize:t}=n;return o-t-(e-t)/2}));var d=o([""," ",""],(n=>"\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ".concat(n.switcherHeight,"px;\n    line-height: ").concat(n.switcherHeight,"px;\n    font-size: ").concat(n.fontSize,"px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n    ").concat(n.disabled?s:'',"\n  ")),(n=>n.checked?l:''));var h=o(["",""],(n=>"\n    & ".concat(c," {\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n      background-color: #eaecf3;\n\n      &::before {\n        background-color: ").concat(n.theme.colors.white,";\n        box-shadow: ").concat(n.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)',";\n      }\n\n      ").concat(n.checked&&n.color?"\n              background-image: linear-gradient(\n                to right,\n                ".concat(e(i(n.color,n)).lighten(10).toString(),",\n                ").concat(i(n.color,n),"\n              );\n            "):n.inactiveColor?"\n              background-image: linear-gradient(\n                to right,\n                ".concat(e(i(n.inactiveColor,n)).lighten(10).toString(),",\n                ").concat(i(n.inactiveColor,n),"\n              );\n            "):'',"\n    }\n\n    & ").concat(r,":focus-visible + ").concat(c," {\n      outline: 1px solid ").concat(n.theme.colors.alto,";\n      outline-offset: 2px;\n    }\n  ")));var p=o(["",""],(n=>"\n    & ".concat(c," {\n      background-color: ").concat(n.disabled?n.theme.colors[n.checked?'bg-disabled-active':'bg-disabled-small']:n.theme.colors[n.checked?'bg-brand-primary-basic':'bg-onmain-tertiary'],";\n\n      &::before {\n        background-color: ").concat(n.theme.colors['bg-oncolor-primary'],";\n        box-shadow: ").concat(n.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)',";\n      }\n    }\n\n    & ").concat(r,":focus-visible + ").concat(c," {\n      outline: 1px solid ").concat(n.theme.colors['bg-brand-primary-basic'],";\n      outline-offset: 2px;\n    }\n  ")));var b=n.div.withConfig({shouldForwardProp:n=>['children','className','style'].includes(n)}).attrs(t).withConfig({componentId:"fox-ui__sc-w14piw-3"})([""," ",""],d,(n=>{var{brandPresetUsed:o}=n;return o?p:h}));export{r as Input,a as Label,b as Root,c as Switcher};
 //# sourceMappingURL=style.js.map

package/components/Switcher/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { getColor } from 'mixins/color'\nimport { SwitcherProps } from './Switcher'\n\nconst switcherWidth = 60\nconst switcherHeight = 32\nconst borderRadius = 40\nconst dotSize = 24\nconst defaultBackground = '#eaecf3'\n\nexport const Input = styled.input`\n  position: absolute;\n  overflow: visible;\n  z-index: -1;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n`\n\nexport const Label = styled.label`\n  display: inline;\n  padding-left: 14px;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label`\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: ${switcherWidth}px;\n  height: ${switcherHeight}px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.3s ease, background-image 0.3s ease;\n  border-radius: ${borderRadius}px;\n  box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n  background-color: ${defaultBackground};\n  flex: 0 0 auto;\n  &:before {\n    position: absolute;\n    top: ${(switcherHeight - dotSize) / 2}px;\n    left: ${(switcherHeight - dotSize) / 2}px;\n    display: block;\n    width: ${dotSize}px;\n    height: ${dotSize}px;\n    content: '';\n    transition: background 0.3s ease, left 0.3s ease;\n    transform: translateZ(0);\n    border-radius: 100%;\n    background-color: ${(props) => props.theme.colors.white};\n    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);\n  }\n\n  &:active {\n    &::before {\n      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);\n    }\n  }\n`\n\nconst disabled = css`\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    background-color: ${defaultBackground};\n    box-shadow: none;\n    &:before {\n      background-color: ${(props) => props.theme.colors.white};\n      box-shadow: none;\n    }\n  }\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`\n\nconst checked = css`\n  & ${Switcher} {\n    &:before {\n      left: ${switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n    }\n  }\n`\n\nexport const Root = styled.div.withConfig<Omit<SwitcherProps, 'onChange'>>({\n  shouldForwardProp: (prop) => ['className', 'style', 'children'].includes(prop),\n})`\n  line-height: ${switcherHeight}px;\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  height: ${switcherHeight}px;\n  vertical-align: middle;\n  justify-content: flex-start;\n  align-content: center;\n  align-items: center;\n  max-width: 100%;\n  color: inherit;\n  ${(props) => (props.disabled ? disabled : null)}\n  ${(props) => (props.value ? checked : null)}\n  ${(props) =>\n    props.value && props.color\n      ? css`\n          & ${Switcher} {\n            background-image: linear-gradient(\n              to right,\n              ${tinycolor(getColor(props.color, props)).lighten(10).toString()},\n              ${getColor(props.color, props)}\n            );\n          }\n        `\n      : props.inactiveColor\n      ? css`\n          & ${Switcher} {\n            background-image: linear-gradient(\n              to right,\n              ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n              ${getColor(props.inactiveColor, props)}\n            );\n          }\n        `\n      : null}\n`\n"],"names":["Input","styled","input","withConfig","componentId","Label","label","Switcher","props","theme","colors","white","disabled","css","checked","switcherWidth","Root","div","shouldForwardProp","prop","includes","switcherHeight","value","color","tinycolor","getColor","lighten","toString","inactiveColor"],"mappings":"sHAWaA,IAAAA,EAAQC,EAAOC,MAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,uFAUMI,IAAAA,EAAQJ,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,gIAUMM,IAAAA,EAAWN,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,+DAAA,aAAA,+GAAA,qEAAA,iDAAA,WAAA,0BAAA,aAAA,4HAAA,wGA1BC,GACC,GACF,GAEK,UAqCf,EACC,EAvCI,GAAA,IA+CSO,GAAUA,EAAMC,MAAMC,OAAOC,QAWtD,IAAMC,EAAWC,8KAIXN,EA7DoB,WAkECC,GAAUA,EAAMC,MAAMC,OAAOC,OAIlDN,GAKN,IAAMS,EAAUD,EACVN,CAAAA,KAAAA,kBAAAA,SAAAA,EAEQQ,IAKP,IAAMC,EAAOf,EAAOgB,IAAId,WAA4C,CACzEe,kBAAoBC,GAAS,CAAC,YAAa,QAAS,YAAYC,SAASD,KAD1DhB,WAAA,CAAAC,YAAA,uBAAGH,CAGHoB,CAAAA,eAAAA,4FAAAA,4HAAAA,IAAAA,IAAAA,IAzFM,GAAA,IAqGlBb,GAAWA,EAAMI,SAAWA,EAAW,OACvCJ,GAAWA,EAAMc,MAAQR,EAAU,OACnCN,GACDA,EAAMc,OAASd,EAAMe,MACjBV,EACMN,CAAAA,KAAAA,+CAAAA,IAAAA,QAAAA,EAGEiB,EAAUC,EAASjB,EAAMe,MAAOf,IAAQkB,QAAQ,IAAIC,WACpDF,EAASjB,EAAMe,MAAOf,IAI9BA,EAAMoB,cACNf,mEACMN,EAGEiB,EAAUC,EAASjB,EAAMoB,cAAepB,IAAQkB,QAAQ,IAAIC,WAC5DF,EAASjB,EAAMoB,cAAepB,IAItC"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/Switcher/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { getColor } from 'mixins/color'\nimport type { SwitcherRootProps, SwitcherPropsByPreset } from './types'\n\nexport const Input = styled.input`\n  position: absolute;\n  overflow: visible;\n  z-index: -1;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n`\n\nexport const Label = styled.label`\n  display: inline;\n  padding-left: 14px;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`\n\nexport const Switcher = styled.label<SwitcherPropsByPreset>`\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: ${(props) => props.switcherWidth}px;\n  height: ${(props) => props.switcherHeight}px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.3s ease, background-image 0.3s ease;\n  border-radius: ${(props) => props.borderRadius}px;\n  flex: 0 0 auto;\n\n  &::before {\n    position: absolute;\n    top: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n    left: ${({ switcherHeight, dotSize }) => (switcherHeight - dotSize) / 2}px;\n    display: block;\n    width: ${(props) => props.dotSize}px;\n    height: ${(props) => props.dotSize}px;\n    content: '';\n    transition: background 0.3s ease, left 0.3s ease;\n    transform: translateZ(0);\n    border-radius: 50%;\n  }\n`\n\nconst disabledStyles = `\n  cursor: not-allowed;\n  opacity: 0.7;\n\n  & ${Switcher} {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ${Label} {\n    cursor: not-allowed;\n  }\n`\n\nconst checkedStyles = css<SwitcherRootProps>`\n  & ${Switcher} {\n    &::before {\n      left: ${({ switcherWidth, switcherHeight, dotSize }) =>\n        switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n    }\n  }\n`\n\nconst baseStyles = css<SwitcherRootProps>`\n  ${(props) => `\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: ${props.switcherHeight}px;\n    line-height: ${props.switcherHeight}px;\n    font-size: ${props.fontSize}px;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n    ${props.disabled ? disabledStyles : ''}\n  `}\n  ${(props) => (props.checked ? checkedStyles : '')}\n`\n\nconst PRESET_DEFAULT = css<SwitcherRootProps>`\n  ${(props) => `\n    & ${Switcher} {\n      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.08);\n      background-color: #eaecf3;\n\n      &::before {\n        background-color: ${props.theme.colors.white};\n        box-shadow: ${props.disabled ? 'none' : '0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n      }\n\n      ${\n        props.checked && props.color\n          ? `\n              background-image: linear-gradient(\n                to right,\n                ${tinycolor(getColor(props.color, props)).lighten(10).toString()},\n                ${getColor(props.color, props)}\n              );\n            `\n          : props.inactiveColor\n          ? `\n              background-image: linear-gradient(\n                to right,\n                ${tinycolor(getColor(props.inactiveColor, props)).lighten(10).toString()},\n                ${getColor(props.inactiveColor, props)}\n              );\n            `\n          : ''\n      }\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      outline: 1px solid ${props.theme.colors.alto};\n      outline-offset: 2px;\n    }\n  `}\n`\n\nconst PRESET_BRAND = css<SwitcherRootProps>`\n  ${(props) => `\n    & ${Switcher} {\n      background-color: ${\n        props.disabled\n          ? props.theme.colors[props.checked ? 'bg-disabled-active' : 'bg-disabled-small']\n          : props.theme.colors[props.checked ? 'bg-brand-primary-basic' : 'bg-onmain-tertiary']\n      };\n\n      &::before {\n        background-color: ${props.theme.colors['bg-oncolor-primary']};\n        box-shadow: ${props.disabled ? 'none' : '0px 2px 4px rgba(0, 0, 0, 0.08)'};\n      }\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      outline: 1px solid ${props.theme.colors['bg-brand-primary-basic']};\n      outline-offset: 2px;\n    }\n  `}\n`\n\nexport const Root = styled.div\n  .withConfig({\n    shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n  })\n  .attrs(injectDefaultTheme)<SwitcherRootProps>`\n  ${baseStyles}\n  ${({ brandPresetUsed }) => (brandPresetUsed ? PRESET_BRAND : PRESET_DEFAULT)}\n`\n"],"names":["Input","styled","input","withConfig","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","_ref","dotSize","_ref2","disabledStyles","concat","checkedStyles","css","_ref3","baseStyles","fontSize","disabled","checked","PRESET_DEFAULT","theme","colors","white","color","tinycolor","getColor","lighten","toString","inactiveColor","alto","PRESET_BRAND","Root","div","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","_ref4","brandPresetUsed"],"mappings":"8LAMaA,IAAAA,EAAQC,EAAOC,MAAVC,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,uFAUMI,IAAAA,EAAQJ,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAd,CAAA,gIAUMM,IAAAA,EAAWN,EAAOK,MAAVH,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,6GAITO,GAAUA,EAAMC,gBACfD,GAAUA,EAAME,iBAITF,GAAUA,EAAMG,eAKzBC,IAAA,IAACF,eAAEA,EAAFG,QAAkBA,GAAnBD,EAAA,OAAkCF,EAAiBG,GAAW,KAC7DC,IAAA,IAACJ,eAAEA,EAAFG,QAAkBA,GAAnBC,EAAA,OAAkCJ,EAAiBG,GAAW,KAE5DL,GAAUA,EAAMK,UACfL,GAAUA,EAAMK,UAQ/B,IAAME,EAAc,oDAAAC,OAIdT,EAJc,uHAAAS,OAadX,EAbN,uCAkBA,IAAMY,EAAgBC,EAAH,CAAA,KAAA,mBAAA,SACbX,GAEQY,IAAA,IAACV,cAAEA,EAAFC,eAAiBA,EAAjBG,QAAiCA,GAAlCM,EAAA,OACNV,EAAgBI,GAAWH,EAAiBG,GAAW,KAK/D,IAAMO,EAAaF,EACdV,CAAAA,GAAAA,IAAAA,KAAAA,sIAKSA,EAAME,eALhB,0BAAAM,OAMeR,EAAME,eACRF,wBAAAA,OAAAA,EAAMa,SAPnB,6KAAAL,OAcER,EAAMc,SAAWP,EAAiB,aAEnCP,GAAWA,EAAMe,QAAUN,EAAgB,KAGhD,IAAMO,EAAiBN,EAAH,CAAA,GAAA,KACfV,GACGD,WAAAA,OAAAA,EAKoBC,mJAAAA,OAAAA,EAAMiB,MAAMC,OAAOC,MAN3C,2BAAAX,OAOkBR,EAAMc,SAAW,OAAS,gCAIxCd,wBAAAA,OAAAA,EAAMe,SAAWf,EAAMoB,MAAvB,kGAAAZ,OAIUa,EAAUC,EAAStB,EAAMoB,MAAOpB,IAAQuB,QAAQ,IAAIC,WAJ9D,uBAAAhB,OAKUc,EAAStB,EAAMoB,MAAOpB,uCAG5BA,EAAMyB,cAAN,kGAAAjB,OAIMa,EAAUC,EAAStB,EAAMyB,cAAezB,IAAQuB,QAAQ,IAAIC,WAJlE,uBAAAhB,OAKMc,EAAStB,EAAMyB,cAAezB,GALpC,oCAQA,GA3BR,qBAAAQ,OA+BIhB,EAAyBO,qBAAAA,OAAAA,EACNC,iCAAAA,OAAAA,EAAMiB,MAAMC,OAAOQ,KAhC1C,8CAsCJ,IAAMC,EAAejB,EAAH,CAAA,GAAA,KACbV,GACGD,WAAAA,OAAAA,EAEAC,gCAAAA,OAAAA,EAAMc,SACFd,EAAMiB,MAAMC,OAAOlB,EAAMe,QAAU,qBAAuB,qBAC1Df,EAAMiB,MAAMC,OAAOlB,EAAMe,QAAU,yBAA2B,sBALtE,sDAAAP,OASwBR,EAAMiB,MAAMC,OAAO,sBACzBlB,2BAAAA,OAAAA,EAAMc,SAAW,OAAS,kCAV5C,+BAAAN,OAcIhB,EAdJ,qBAAAgB,OAc6BT,EACNC,iCAAAA,OAAAA,EAAMiB,MAAMC,OAAO,wEAMvC,IAAMU,EAAOnC,EAAOoC,IACxBlC,WAAW,CACVmC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KAE1EE,MAAMC,GAJQvC,WAAA,CAAAC,YAAA,uBAAGH,CAAH,CAAA,GAAA,IAAA,IAKbmB,GACAuB,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBT,EAAeX"}

package/dts/index.d.ts

@@ -349,24 +349,6 @@ interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedPr
     required?: boolean | undefined;
 }
 
-/**
- * Converts HEX color code to RGB(A) string
- *
- * @export
- * @param {string} HEX color with length of either 3 or 6 (can be with or without '#' sign)
- * @param {Number} alpha channel which specifies the opacity of the color
- * @returns {String} RGB(A) string
- */
-declare function hexToRgbA(hex: string, alpha?: number): string;
-/**
- * Checks if value is HEX color
- *
- * @export
- * @param {string} HEX color with length of either 3 or 6 (can be with or without '#' sign)
- * @returns {boolean}
- */
-declare function isHex(hex: string): boolean;
-
 declare type StyledComponentProps = {
     theme?: {
         breakpoints?: typeof defaultTheme.breakpoints;
@@ -1732,55 +1714,25 @@ declare namespace Spinner {
     var displayName: string;
 }
 
-interface SwitcherProps extends BaseProps, Color<'color'>, Color<'inactiveColor'> {
-    /**
-     * Id for swithcer
-     */
+interface SwitcherProps extends BaseProps$1, Color$1<'color'>, Color$1<'inactiveColor'> {
+    /** Input id */
     id?: string;
-    /**
-     * Name of input
-     */
+    /** Input name */
     name?: string;
-    /**
-     * Value of input
-     */
+    /**  Input value */
     value?: boolean;
-    /**
-     * Switcher is disabled
-     */
+    /** Switcher is disabled */
     disabled?: boolean;
-    /**
-     * Tabindex
-     */
+    /** Tab index */
     tabIndex?: number;
-    /**
-     * Label of switcher
-     */
-    /**
-     * Children react node
-     */
+    /** Switcher label */
     children?: React.ReactNode;
-    /**
-     * onChange function
-     */
-    onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement>): void;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`Color<'inactiveColor'>`](#/Миксины)
- */
-declare function Switcher(props: typeof Switcher.defaultProps & SwitcherProps): JSX.Element;
-declare namespace Switcher {
-    var defaultProps: {
-        value: boolean;
-        disabled: boolean;
-        color: string;
-    };
-    var displayName: string;
+    /** onChange function */
+    onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>): void;
 }
 
+declare const Switcher: react.ForwardRefExoticComponent<SwitcherProps & react.RefAttributes<HTMLDivElement>>;
+
 interface TabProps extends Color, Color<'borderColor'> {
     /**
      * An element type to render as (string or function).
@@ -2443,4 +2395,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };