@foxford/ui 2.9.2-beta-d5c15b2-20230912 → 2.10.0-beta-7f4c4c4-20230914

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 d,Switcher as m,Label as c}from'./style.js';import{jsxs as h,jsx as l}from'react/jsx-runtime';var p=["value","disabled","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:x=!1,tabIndex:P,id:S,name:g,children:k,onChange:y}=v,w=r(v,p);var C='brand'===u.preset;'string'==typeof w.preset&&(C='brand'===w.preset);var N=C?s:i;return h(n,e(e(e({},w),N),{},{ref:b,checked:j,disabled:x,brandPresetUsed:C,children:[l(d,{id:S,name:g,checked:j,type:"checkbox",tabIndex:P,onChange:e=>{x||'function'!=typeof y||y(e.target.checked,e)},disabled:x}),l(m,e({htmlFor:S},N)),k?l(c,{htmlFor:S,children:k}):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 { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport * as Styled from './style'\n\nexport interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty<'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    tabIndex,\n    id,\n    name,\n    children,\n    onChange,\n    ...config\n  } = useConfigPriority<SwitcherProps>(theme.components?.Switcher, props)\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 (!disabled && typeof onChange === 'function') onChange(event.target.checked, event)\n  }\n\n  return (\n    <Styled.Root\n      {...config}\n      {...propsByPreset}\n      ref={ref}\n      checked={value}\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        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","tabIndex","id","name","children","onChange","_useConfigPriority","config","_objectWithoutProperties","_excluded","brandPresetUsed","preset","propsByPreset","BRAND_PROPS","DEFAULT_PROPS","_jsxs","Styled.Root","checked","_jsx","Styled.Input","type","event","target","Styled.Switcher","_objectSpread","htmlFor","Styled.Label","displayName"],"mappings":"whBAOMA,IAAAA,EAAiB,WAEjBC,IAAAA,EAAWC,GAAAA,CAA2CC,EAAOC,KAAQ,IAAAC,EACzE,IAAMC,EAAQC,IAEd,IASIC,EAAAA,UAAiCF,EAAAA,EAAMG,kBAAAA,aAANJ,EAAkBJ,SAAUE,IAT3DO,MACJA,GAAAA,EADIC,SAEJA,KAFIC,SAGJA,EAHIC,GAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,SAOJA,GAPFC,EAQKC,EARLC,EAAAF,EAAAG,GAWA,IAAIC,EAAmC,UAAjBf,EAAMgB,OACC,iBAAlBJ,EAAOI,SAAqBD,EAAoC,UAAlBH,EAAOI,QAEhE,IAAMC,EAAgBF,EAAkBG,EAAcC,EAMtD,OACEC,EAACC,EACKT,EAAAA,EAAAA,EAAAA,GAAAA,GACAK,GAFN,GAAA,CAGEnB,IAAKA,EACLwB,QAASlB,EACTC,SAAUA,EACVU,gBAAiBA,EANnBN,SAQE,CAAAc,EAACC,EAAD,CACEjB,GAAIA,EACJC,KAAMA,EACNc,QAASlB,EACTqB,KAAK,WACLnB,SAAUA,EACVI,SAnB4DgB,IAC3DrB,GAAgC,mBAAbK,GAAyBA,EAASgB,EAAMC,OAAOL,QAASI,IAmB5ErB,SAAUA,IAEZkB,EAACK,EAADC,EAAA,CAAiBC,QAASvB,GAAQU,IACjCR,EAAWc,EAACQ,EAAD,CAAcD,QAASvB,EAAvBE,SAA4BA,IAA2B,YAKzEd,EAASqC,YAjDc"}

package/components/Switcher/constants.js

@@ -0,0 +1,2 @@
+var i={switcherWidth:60,switcherHeight:32,borderRadius:40,dotSize:24};var e={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  switcherWidth: 60,\n  switcherHeight: 32,\n  borderRadius: 40,\n  dotSize: 24,\n}\n\nexport const BRAND_PROPS: SwitcherPropsByPreset = {\n  switcherWidth: 44,\n  switcherHeight: 24,\n  borderRadius: 48,\n  dotSize: 16,\n}\n"],"names":["DEFAULT_PROPS","switcherWidth","switcherHeight","borderRadius","dotSize","BRAND_PROPS"],"mappings":"AAEO,IAAMA,EAAuC,CAClDC,cAAe,GACfC,eAAgB,GAChBC,aAAc,GACdC,QAAS,IAGJ,IAAMC,EAAqC,CAChDJ,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 c=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 a=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(a," {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    &::before {\n      box-shadow: none;\n    }\n  }\n\n  & ").concat(c," {\n    cursor: not-allowed;\n  }\n");var l=o(["& ","{&::before{left:","px;}}"],a,(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    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n  ")));var h=o(["",""],(n=>{var o=n.color||'atlantis';return"\n      & ".concat(a," {\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.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        ").concat(n.checked?"\n                background-image: linear-gradient(\n                  to right,\n                  ".concat(e(i(o,n)).lighten(10).toString(),",\n                  ").concat(i(o,n),"\n                );\n              "):'',"\n      }\n\n      & ").concat(r,":focus-visible + ").concat(a," {\n        outline: 1px solid ").concat(i(o,n),";\n        outline-offset: 2px;\n      }\n    ")}));var b=o(["",""],(n=>"\n    & ".concat(a," {\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      ").concat(!n.checked&&n.inactiveColor?"background-color: ".concat(i(n.inactiveColor,n),";"):'',"\n      ").concat(n.checked&&n.color?"background-color: ".concat(i(n.color,n),";"):'',"\n    }\n\n    & ").concat(r,":focus-visible + ").concat(a," {\n      outline: 1px solid ").concat(n.color?i(n.color,n):n.theme.colors['bg-brand-primary-basic'],";\n      outline-offset: 2px;\n    }\n  ")));var p=n.div.withConfig({shouldForwardProp:n=>['children','className','style'].includes(n)}).attrs(t).withConfig({componentId:"fox-ui__sc-w14piw-3"})([""," "," "," ",""],d,(n=>n.checked?l:''),(n=>n.disabled?s:''),(n=>{var{brandPresetUsed:o}=n;return o?b:h}));export{r as Input,c as Label,p as Root,a 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 { StyledSwitcherProps, 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<StyledSwitcherProps>`\n  & ${Switcher} {\n    &::before {\n      left: ${({ switcherWidth, switcherHeight, dotSize }) =>\n        switcherWidth - dotSize - (switcherHeight - dotSize) / 2}px;\n    }\n  }\n`\n\nconst baseStyles = css<StyledSwitcherProps>`\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    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    color: inherit;\n  `}\n`\n\nconst defaultPresetStyle = css<StyledSwitcherProps>`\n  ${(props) => {\n    const color = props.color || 'atlantis'\n\n    return `\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.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          props.checked\n            ? `\n                background-image: linear-gradient(\n                  to right,\n                  ${tinycolor(getColor(color, props)).lighten(10).toString()},\n                  ${getColor(color, props)}\n                );\n              `\n            : ''\n        }\n      }\n\n      & ${Input}:focus-visible + ${Switcher} {\n        outline: 1px solid ${getColor(color, props)};\n        outline-offset: 2px;\n      }\n    `\n  }}\n`\n\nconst brandPresetStyles = css<StyledSwitcherProps>`\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      ${!props.checked && props.inactiveColor ? `background-color: ${getColor(props.inactiveColor, props)};` : ''}\n      ${props.checked && props.color ? `background-color: ${getColor(props.color, props)};` : ''}\n    }\n\n    & ${Input}:focus-visible + ${Switcher} {\n      outline: 1px solid ${props.color ? getColor(props.color, props) : 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)<StyledSwitcherProps>`\n  ${baseStyles}\n\n  ${(props) => (props.checked ? checkedStyles : '')}\n  ${(props) => (props.disabled ? disabledStyles : '')}\n  ${({ brandPresetUsed }) => (brandPresetUsed ? brandPresetStyles : defaultPresetStyle)}\n`\n"],"names":["Input","styled","input","withConfig","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","_ref","dotSize","_ref2","disabledStyles","concat","checkedStyles","css","_ref3","baseStyles","defaultPresetStyle","color","theme","colors","white","disabled","inactiveColor","tinycolor","getColor","lighten","toString","checked","brandPresetStyles","Root","div","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","_ref4","brandPresetUsed"],"mappings":"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"}

package/dts/index.d.ts

@@ -1305,6 +1305,25 @@ declare const Textarea: {
     displayName: string;
 };
 
+interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty<'inactiveColor'> {
+    /** Input id */
+    id?: string;
+    /** Input name */
+    name?: string;
+    /**  Input value */
+    value?: boolean;
+    /** Switcher is disabled */
+    disabled?: boolean;
+    /** Tab index */
+    tabIndex?: number;
+    /** Switcher label */
+    children?: React.ReactNode;
+    /** onChange function */
+    onChange?(_checked: boolean, _event: React.ChangeEvent<HTMLInputElement>): void;
+}
+
+declare const Switcher: react.ForwardRefExoticComponent<SwitcherProps & react.RefAttributes<HTMLDivElement>>;
+
 interface Theme {
     breakpoints: Readonly<{
         xl: number;
@@ -1339,6 +1358,7 @@ interface Theme {
         Textarea?: TextareaProps;
         Text?: TextProps;
         'Text.Heading'?: TextHeadingProps;
+        Switcher?: SwitcherProps;
     };
 }
 
@@ -2313,55 +2333,6 @@ declare namespace Spinner {
     var displayName: string;
 }
 
-interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty<'inactiveColor'> {
-    /**
-     * Id for swithcer
-     */
-    id?: string;
-    /**
-     * Name of input
-     */
-    name?: string;
-    /**
-     * Value of input
-     */
-    value?: boolean;
-    /**
-     * Switcher is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Tabindex
-     */
-    tabIndex?: number;
-    /**
-     * Label of switcher
-     */
-    /**
-     * Children react node
-     */
-    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;
-}
-
 interface TabProps extends ColorProperty, ColorProperty<'borderColor'> {
     /**
      * An element type to render as (string or function).