@foxford/ui 2.127.0 → 2.129.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Switch/Knob.js +1 -1
- package/components/Switch/Knob.js.map +1 -1
- package/components/Switch/Knob.mjs +1 -1
- package/components/Switch/Knob.mjs.map +1 -1
- package/components/Switch/Switch.js +1 -1
- package/components/Switch/Switch.js.map +1 -1
- package/components/Switch/Switch.mjs +1 -1
- package/components/Switch/Switch.mjs.map +1 -1
- package/components/Switch/sizes.js +2 -0
- package/components/Switch/sizes.js.map +1 -0
- package/components/Switch/sizes.mjs +2 -0
- package/components/Switch/sizes.mjs.map +1 -0
- package/components/Switch/style.js +1 -1
- package/components/Switch/style.js.map +1 -1
- package/components/Switch/style.mjs +1 -1
- package/components/Switch/style.mjs.map +1 -1
- package/dts/index.d.ts +3 -2
- package/icon-pack/src/collection.json.js +1 -1
- package/icon-pack/src/collection.json.mjs +1 -1
- package/package.json +2 -2
- package/components/Switch/constants.js +0 -2
- package/components/Switch/constants.js.map +0 -1
- package/components/Switch/constants.mjs +0 -2
- package/components/Switch/constants.mjs.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var withMergedProps=require('../../hocs/withMergedProps.js');var
|
|
1
|
+
'use strict';var withMergedProps=require('../../hocs/withMergedProps.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');const Knob=withMergedProps.withMergedProps(({size:e="m",...s})=>jsxRuntime.jsx(style.Knob,{...s,size:e}),{displayName:'Knob',sizes:sizes.SIZES_KNOB});exports.Knob=Knob;
|
|
2
2
|
//# sourceMappingURL=Knob.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Knob.js","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './
|
|
1
|
+
{"version":3,"file":"Knob.js","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './sizes'\nimport * as Styled from './style'\nimport type { KnobProps } from './types'\n\nconst COMPONENT_NAME = 'Knob'\n\nconst Knob: React.ForwardRefExoticComponent<KnobProps> = withMergedProps<KnobProps, HTMLSpanElement>(\n ({ size = 'm', ...props }) => {\n return <Styled.Knob {...props} size={size} />\n },\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES_KNOB,\n }\n)\n\nexport { Knob }\n"],"names":["Knob","withMergedProps","size","props","_jsx","Styled","displayName","sizes","SIZES_KNOB"],"mappings":"sLAOA,MAAMA,KAAmDC,gBAAAA,gBACvD,EAAGC,OAAO,OAAQC,KACTC,WAAAA,IAACC,MAAAA,KAAW,IAAKF,EAAOD,KAAMA,IAEvC,CACEI,YAPmB,OAQnBC,MAAOC,MAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_KNOB}from'./
|
|
1
|
+
import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{SIZES_KNOB}from'./sizes.mjs';import{Knob as Knob$1}from'./style.mjs';import{jsx}from'react/jsx-runtime';const Knob=withMergedProps(({size:o="m",...s})=>jsx(Knob$1,{...s,size:o}),{displayName:'Knob',sizes:SIZES_KNOB});export{Knob};
|
|
2
2
|
//# sourceMappingURL=Knob.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Knob.mjs","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './
|
|
1
|
+
{"version":3,"file":"Knob.mjs","sources":["../../../../src/components/Switch/Knob.tsx"],"sourcesContent":["import { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES_KNOB } from './sizes'\nimport * as Styled from './style'\nimport type { KnobProps } from './types'\n\nconst COMPONENT_NAME = 'Knob'\n\nconst Knob: React.ForwardRefExoticComponent<KnobProps> = withMergedProps<KnobProps, HTMLSpanElement>(\n ({ size = 'm', ...props }) => {\n return <Styled.Knob {...props} size={size} />\n },\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES_KNOB,\n }\n)\n\nexport { Knob }\n"],"names":["Knob","withMergedProps","size","props","_jsx","Styled","displayName","sizes","SIZES_KNOB"],"mappings":"2KAOA,MAAMA,KAAmDC,gBACvD,EAAGC,OAAO,OAAQC,KACTC,IAACC,OAAW,IAAKF,EAAOD,KAAMA,IAEvC,CACEI,YAPmB,OAQnBC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var Knob=require('./Knob.js');var
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var Knob=require('./Knob.js');var sizes=require('./sizes.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');const Switch=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:i="m",knobProps:t={},sizeXXS:r,sizeXS:n,sizeS:a,sizeM:z,sizeL:c,sizeXL:o,sizes:l,sizeUnits:u,preset:d,inline:j,palette:p,style:h,className:x,disabled:S,...m}=e;const w={size:i,sizeXXS:r,sizeXS:n,sizeS:a,sizeM:z,sizeL:c,sizeXL:o};return jsxRuntime.jsxs(style.Root,{...w,sizes:l,sizeUnits:u,preset:d,inline:j,palette:p,style:h,className:x,disabled:S,children:[jsxRuntime.jsx(style.Input,{...m,disabled:S,type:"checkbox",ref:s}),jsxRuntime.jsx(style.Track,{children:jsxRuntime.jsx(Knob.Knob,{...w,...t})})]})}),{displayName:"Switch",sizes:sizes.SIZES});exports.COMPONENT_NAME="Switch",exports.Switch=Switch;
|
|
2
2
|
//# sourceMappingURL=Switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Knob } from './Knob'\nimport { SIZES } from './
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Knob } from './Knob'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { SwitchProps } from './types'\n\nconst COMPONENT_NAME = 'Switch'\n\n/**\n *\n * *v1.1.0*\n *\n * Контрол для переключения между двумя значениями: включено или выключено.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<input\\> элемента.\n */\nconst Switch: React.ForwardRefExoticComponent<SwitchProps> = withMergedProps<SwitchProps, HTMLInputElement>(\n forwardRef<HTMLInputElement, MergedProps<SwitchProps>>((props, ref) => {\n const {\n size = 'm',\n knobProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n preset,\n inline,\n palette,\n style,\n className,\n disabled,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root\n {...sizeProps}\n sizes={sizes}\n sizeUnits={sizeUnits}\n preset={preset}\n inline={inline}\n palette={palette}\n style={style}\n className={className}\n disabled={disabled}\n >\n <Styled.Input {...inputProps} disabled={disabled} type='checkbox' ref={ref} />\n <Styled.Track>\n <Knob {...sizeProps} {...knobProps} />\n </Styled.Track>\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Switch, COMPONENT_NAME }\n"],"names":["Switch","withMergedProps","forwardRef","props","ref","size","knobProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","preset","inline","palette","style","className","disabled","inputProps","sizeProps","_jsxs","Styled","children","_jsx","type","Knob","displayName","SIZES"],"mappings":"+OAkBA,MAAMA,OAAuDC,gBAAAA,gBAC3DC,MAAAA,WAAuD,CAACC,EAAOC,KAC7D,MAAMC,KACJA,EAAO,IAAGC,UACVA,EAAY,CAAA,EAAEC,QACdA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,OACNA,EAAMC,QACNA,QACAC,EAAKC,UACLA,EAASC,SACTA,KACGC,GACDlB,EAEJ,MAAMmB,EAAY,CAChBjB,OACAE,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEW,WAAAA,KAACC,MAAAA,KAAW,IACNF,EACJT,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EACTC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAASK,SAAA,CAEnBC,WAAAA,IAACF,YAAY,IAAKH,EAAYD,SAAUA,EAAUO,KAAK,WAAWvB,IAAKA,IACvEsB,WAAAA,IAACF,YAAY,CAAAC,SACXC,WAAAA,IAACE,UAAI,IAAKN,KAAehB,WAKjC,CACEuB,YA9DmB,SA+DnBhB,MAAOiB,MAAAA,+BA/DY"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{Knob}from'./Knob.mjs';import{SIZES}from'./
|
|
1
|
+
import{forwardRef}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{Knob}from'./Knob.mjs';import{SIZES}from'./sizes.mjs';import{Root,Input,Track}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';const COMPONENT_NAME='Switch';const Switch=withMergedProps(forwardRef((s,e)=>{const{size:i="m",knobProps:t={},sizeXXS:r,sizeXS:o,sizeS:m,sizeM:n,sizeL:z,sizeXL:c,sizes:p,sizeUnits:a,preset:l,inline:d,palette:S,style:f,className:h,disabled:j,...w}=s;const x={size:i,sizeXXS:r,sizeXS:o,sizeS:m,sizeM:n,sizeL:z,sizeXL:c};return jsxs(Root,{...x,sizes:p,sizeUnits:a,preset:l,inline:d,palette:S,style:f,className:h,disabled:j,children:[jsx(Input,{...w,disabled:j,type:"checkbox",ref:e}),jsx(Track,{children:jsx(Knob,{...x,...t})})]})}),{displayName:"Switch",sizes:SIZES});export{COMPONENT_NAME,Switch};
|
|
2
2
|
//# sourceMappingURL=Switch.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Knob } from './Knob'\nimport { SIZES } from './
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Knob } from './Knob'\nimport { SIZES } from './sizes'\nimport * as Styled from './style'\nimport type { SwitchProps } from './types'\n\nconst COMPONENT_NAME = 'Switch'\n\n/**\n *\n * *v1.1.0*\n *\n * Контрол для переключения между двумя значениями: включено или выключено.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<input\\> элемента.\n */\nconst Switch: React.ForwardRefExoticComponent<SwitchProps> = withMergedProps<SwitchProps, HTMLInputElement>(\n forwardRef<HTMLInputElement, MergedProps<SwitchProps>>((props, ref) => {\n const {\n size = 'm',\n knobProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n preset,\n inline,\n palette,\n style,\n className,\n disabled,\n ...inputProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n return (\n <Styled.Root\n {...sizeProps}\n sizes={sizes}\n sizeUnits={sizeUnits}\n preset={preset}\n inline={inline}\n palette={palette}\n style={style}\n className={className}\n disabled={disabled}\n >\n <Styled.Input {...inputProps} disabled={disabled} type='checkbox' ref={ref} />\n <Styled.Track>\n <Knob {...sizeProps} {...knobProps} />\n </Styled.Track>\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Switch, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Switch","withMergedProps","forwardRef","props","ref","size","knobProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","preset","inline","palette","style","className","disabled","inputProps","sizeProps","_jsxs","Styled","children","_jsx","type","Knob","displayName","SIZES"],"mappings":"wOAQA,MAAMA,eAAiB,SAUvB,MAAMC,OAAuDC,gBAC3DC,WAAuD,CAACC,EAAOC,KAC7D,MAAMC,KACJA,EAAO,IAAGC,UACVA,EAAY,CAAA,EAAEC,QACdA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,MACNA,EAAKC,UACLA,EAASC,OACTA,EAAMC,OACNA,EAAMC,QACNA,EAAOC,MACPA,EAAKC,UACLA,EAASC,SACTA,KACGC,GACDlB,EAEJ,MAAMmB,EAAY,CAChBjB,OACAE,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,OACEW,KAACC,KAAW,IACNF,EACJT,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EACTC,MAAOA,EACPC,UAAWA,EACXC,SAAUA,EAASK,SAAA,CAEnBC,IAACF,MAAY,IAAKH,EAAYD,SAAUA,EAAUO,KAAK,WAAWvB,IAAKA,IACvEsB,IAACF,MAAY,CAAAC,SACXC,IAACE,KAAI,IAAKN,KAAehB,WAKjC,CACEuB,YA9DmB,SA+DnBhB,MAAOiB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';exports.SIZES={xl:{'--switch-height':'32px',width:58,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},l:{'--switch-height':'28px',width:52,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},m:{'--switch-height':'24px',width:44,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},s:{'--switch-height':'20px',width:36,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},xs:{'--switch-height':'18px',width:32,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"}},exports.SIZES_KNOB={xl:{width:22,height:22},l:{width:20,height:20},m:{width:16,height:16},s:{width:14,height:14},xs:{width:12,height:12}};
|
|
2
|
+
//# sourceMappingURL=sizes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizes.js","sources":["../../../../src/components/Switch/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xl: {\n '--switch-height': '32px',\n width: 58,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n l: {\n '--switch-height': '28px',\n width: 52,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n m: {\n '--switch-height': '24px',\n width: 44,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n s: {\n '--switch-height': '20px',\n width: 36,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n xs: {\n '--switch-height': '18px',\n width: 32,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n}\n\nexport const SIZES_KNOB: Record<Size, CSSProperties> = {\n xl: {\n width: 22,\n height: 22,\n },\n l: {\n width: 20,\n height: 20,\n },\n m: {\n width: 16,\n height: 16,\n },\n s: {\n width: 14,\n height: 14,\n },\n xs: {\n width: 12,\n height: 12,\n },\n}\n"],"names":["xl","width","height","borderRadius","l","m","s","xs"],"mappings":"2BAGkD,CAChDA,GAAI,CACF,kBAAmB,OACnBC,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBC,EAAG,CACD,kBAAmB,OACnBH,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBE,EAAG,CACD,kBAAmB,OACnBJ,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBG,EAAG,CACD,kBAAmB,OACnBL,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBI,GAAI,CACF,kBAAmB,OACnBN,MAAO,GACPC,OAAQ,uBACRC,aAAc,wDAIqC,CACrDH,GAAI,CACFC,MAAO,GACPC,OAAQ,IAEVE,EAAG,CACDH,MAAO,GACPC,OAAQ,IAEVG,EAAG,CACDJ,MAAO,GACPC,OAAQ,IAEVI,EAAG,CACDL,MAAO,GACPC,OAAQ,IAEVK,GAAI,CACFN,MAAO,GACPC,OAAQ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const SIZES={xl:{'--switch-height':'32px',width:58,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},l:{'--switch-height':'28px',width:52,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},m:{'--switch-height':'24px',width:44,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},s:{'--switch-height':'20px',width:36,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"},xs:{'--switch-height':'18px',width:32,height:'var(--switch-height)',borderRadius:"calc(var(--switch-height) * 0.5)"}};const SIZES_KNOB={xl:{width:22,height:22},l:{width:20,height:20},m:{width:16,height:16},s:{width:14,height:14},xs:{width:12,height:12}};export{SIZES,SIZES_KNOB};
|
|
2
|
+
//# sourceMappingURL=sizes.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizes.mjs","sources":["../../../../src/components/Switch/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n xl: {\n '--switch-height': '32px',\n width: 58,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n l: {\n '--switch-height': '28px',\n width: 52,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n m: {\n '--switch-height': '24px',\n width: 44,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n s: {\n '--switch-height': '20px',\n width: 36,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n xs: {\n '--switch-height': '18px',\n width: 32,\n height: 'var(--switch-height)',\n borderRadius: `calc(var(--switch-height) * 0.5)`,\n },\n}\n\nexport const SIZES_KNOB: Record<Size, CSSProperties> = {\n xl: {\n width: 22,\n height: 22,\n },\n l: {\n width: 20,\n height: 20,\n },\n m: {\n width: 16,\n height: 16,\n },\n s: {\n width: 14,\n height: 14,\n },\n xs: {\n width: 12,\n height: 12,\n },\n}\n"],"names":["SIZES","xl","width","height","borderRadius","l","m","s","xs","SIZES_KNOB"],"mappings":"AAGO,MAAMA,MAAqC,CAChDC,GAAI,CACF,kBAAmB,OACnBC,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBC,EAAG,CACD,kBAAmB,OACnBH,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBE,EAAG,CACD,kBAAmB,OACnBJ,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBG,EAAG,CACD,kBAAmB,OACnBL,MAAO,GACPC,OAAQ,uBACRC,aAAc,oCAEhBI,GAAI,CACF,kBAAmB,OACnBN,MAAO,GACPC,OAAQ,uBACRC,aAAc,qCAIX,MAAMK,WAA0C,CACrDR,GAAI,CACFC,MAAO,GACPC,OAAQ,IAEVE,EAAG,CACDH,MAAO,GACPC,OAAQ,IAEVG,EAAG,CACDJ,MAAO,GACPC,OAAQ,IAEVI,EAAG,CACDL,MAAO,GACPC,OAAQ,IAEVK,GAAI,CACFN,MAAO,GACPC,OAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardSwitchProp=style.createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=style.createShouldForwardProp();const Input=styled__default.default.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled__default.default.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize.responsiveSize);const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `,o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover.hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover.hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize.responsiveSize);exports.Input=Input,exports.Knob=Knob,exports.Root=Root,exports.Track=Track;
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var style=require('../../shared/utils/style.js');var responsiveSize=require('../../mixins/responsive-size.js');var hover=require('../../mixins/hover.js');function _interopDefault(o){return o&&o.__esModule?o:{default:o}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const shouldForwardSwitchProp=style.createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=style.createShouldForwardProp();const Input=styled__default.default.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled__default.default.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;border-radius:50%;","}"],responsiveSize.responsiveSize);const Root=styled__default.default.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `,o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor__default.default(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor__default.default(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover.hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover.hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize.responsiveSize);exports.Input=Input,exports.Knob=Knob,exports.Root=Root,exports.Track=Track;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"kZAQA,MAAMA,wBAA0BC,MAAAA,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,MAAAA,0BAEvB,MAAMI,MAAQC,gBAAAA,QAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,gBAAAA,QAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,gBAAAA,QAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n border-radius: 50%;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"kZAQA,MAAMA,wBAA0BC,MAAAA,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,MAAAA,0BAEvB,MAAMI,MAAQC,gBAAAA,QAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,gBAAAA,QAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,gBAAAA,QAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,gNAAA,KAYIS,eAAAA,gBAmCC,MAAMC,KAAOV,gBAAAA,QAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAO,oCAAoCJ,EAAMG,MAAMC,OAAO,uGAMrGJ,IACDK,OAtDcC,EAsDL,CACPC,UAAWP,EAAMG,MAAMC,OAAO,sBAC9BI,gBAAiBR,EAAMG,MAAMC,OAAO,oBACpCK,WAAYT,EAAMG,MAAMC,OAAO,sBAC/BM,gBAAiBC,mBAAAA,QAAUX,EAAMG,MAAMC,OAAO,uBAAuBQ,OAAO,GAAGC,WAC/EC,kBAAmBd,EAAMG,MAAMC,OAAO,0BACtCW,uBAAwBJ,mBAAAA,QAAUX,EAAMG,MAAMC,OAAO,2BAA2BY,QAAQ,GAAGH,WAC3FI,mBAAoBjB,EAAMG,MAAMC,OAAO,qBACvCc,0BAA2BlB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMM,SA/D8B,WACrCX,WAAWE,wCACKS,EAAQC,2CACFD,EAAQE,gCAE9Bb,kCACgBW,EAAQG,2BAExBrB,kCAAkCO,kCAClBW,EAAQQ,kCAExB1B,oBAAoBO,kCACJW,EAAQW,mCAExB7B,4BAA4BO,kCACZW,EAAQY,sCAE5BC,YACA,6BACsBb,EAAQI,yBAE9B,aAAatB,0BAA0BO,eAEvCwB,YACA,6BACsBb,EAAQS,gCAE9B,aAAa3B,kCAAkCO,aA3BjCW,OAkEdR,eAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardSwitchProp=createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=createShouldForwardProp();const Input=styled.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;","}"],responsiveSize);const Root=styled.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `,o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize);export{Input,Knob,Root,Track};
|
|
1
|
+
import styled from'styled-components';import tinycolor from'tinycolor2';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{responsiveSize}from'../../mixins/responsive-size.mjs';import{hover}from'../../mixins/hover.mjs';const shouldForwardSwitchProp=createShouldForwardProp(o=>!['inline','disabled'].includes(o));const shouldForwardKnobProp=createShouldForwardProp();const Input=styled.input.withConfig({shouldForwardProp:o=>!['error','success','onColored'].includes(o)}).withConfig({displayName:"Switch__Input",componentId:"ui__sc-9l6yad-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;cursor:inherit;&:focus{outline:none;}"]);const Track=styled.span.withConfig({displayName:"Switch__Track",componentId:"ui__sc-9l6yad-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;padding:0 1px;border-radius:inherit;transition:background-color 250ms linear;"]);const Knob=styled.span.withConfig({shouldForwardProp:shouldForwardKnobProp}).withConfig({displayName:"Switch__Knob",componentId:"ui__sc-9l6yad-2"})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:50%;height:100%;transition:transform 250ms cubic-bezier(0.45,0,0.2,1);&::after{content:'';flex-shrink:0;border-radius:50%;","}"],responsiveSize);const Root=styled.span.withConfig({shouldForwardProp:shouldForwardSwitchProp}).withConfig({displayName:"Switch__Root",componentId:"ui__sc-9l6yad-3"})([""," "," ",""],o=>`\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${o.inline?'inline-flex':'flex'};\n cursor: ${o.disabled?'not-allowed':'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${o.theme.colors['border-focus-inner']}, 0 0 0 4px ${o.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `,o=>{return r={knobColor:o.theme.colors['bg-oncolor-primary'],knobShadowColor:o.theme.colors['bg-oncolor-hover'],trackColor:o.theme.colors['bg-onmain-tertiary'],trackColorHover:tinycolor(o.theme.colors['bg-onmain-tertiary']).darken(6).toString(),trackColorChecked:o.theme.colors['bg-brand-primary-basic'],trackColorCheckedHover:tinycolor(o.theme.colors['bg-brand-primary-basic']).lighten(4).toString(),trackColorDisabled:o.theme.colors['bg-disabled-small'],trackColorDisabledChecked:o.theme.colors['bg-disabled-active'],...o.palette},`\n & > ${Track} > ${Knob}::after {\n background-color: ${r.knobColor};\n box-shadow: 0px 2px 4px ${r.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${r.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${r.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${r.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${r.trackColorDisabledChecked};\n }\n ${hover(`\n background-color: ${r.trackColorHover};\n `,`&:hover > ${Input}:not(:disabled) + ${Track}`)}\n ${hover(`\n background-color: ${r.trackColorCheckedHover};\n `,`&:hover > ${Input}:not(:disabled):checked + ${Track}`)}\n`;var r},responsiveSize);export{Input,Knob,Root,Track};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"iPAQA,MAAMA,wBAA0BC,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,0BAEvB,MAAMI,MAAQC,OAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,OAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,OAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Switch/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { CSSColor } from 'shared/types'\nimport { hover } from 'mixins/hover'\nimport type { StyledSwitchProps, StyledKnobProps, SwitchPalette } from './types'\n\nconst shouldForwardSwitchProp = createShouldForwardProp((propKey) => !['inline', 'disabled'].includes(propKey))\n\nconst shouldForwardKnobProp = createShouldForwardProp()\n\nexport const Input = styled.input.withConfig({\n shouldForwardProp: (propKey) => !['error', 'success', 'onColored'].includes(propKey),\n})`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n border: none;\n opacity: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n cursor: inherit;\n &:focus {\n outline: none;\n }\n`\n\nexport const Track = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0 1px;\n border-radius: inherit;\n transition: background-color 250ms linear;\n`\n\nexport const Knob = styled.span.withConfig<StyledKnobProps>({\n shouldForwardProp: shouldForwardKnobProp,\n})`\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: transform 250ms cubic-bezier(0.45, 0, 0.2, 1);\n &::after {\n content: '';\n flex-shrink: 0;\n border-radius: 50%;\n ${responsiveSize}\n }\n`\n\nconst template = (palette: SwitchPalette) => `\n & > ${Track} > ${Knob}::after {\n background-color: ${palette.knobColor};\n box-shadow: 0px 2px 4px ${palette.knobShadowColor};\n }\n & > ${Track} {\n background-color: ${palette.trackColor};\n }\n & > ${Input}:not(:disabled):checked + ${Track} {\n background-color: ${palette.trackColorChecked};\n }\n & > ${Input}:disabled + ${Track} {\n background-color: ${palette.trackColorDisabled};\n }\n & > ${Input}:disabled:checked + ${Track} {\n background-color: ${palette.trackColorDisabledChecked};\n }\n ${hover(\n `\n background-color: ${palette.trackColorHover};\n `,\n `&:hover > ${Input}:not(:disabled) + ${Track}`\n )}\n ${hover(\n `\n background-color: ${palette.trackColorCheckedHover};\n `,\n `&:hover > ${Input}:not(:disabled):checked + ${Track}`\n )}\n`\n\nexport const Root = styled.span.withConfig<StyledSwitchProps>({\n shouldForwardProp: shouldForwardSwitchProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n flex-shrink: 0;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n & > ${Input}:checked + ${Track} > ${Knob} {\n transform: translateX(100%);\n }\n\n & > ${Input}:focus-visible + ${Track} {\n box-shadow: 0 0 0 2px ${props.theme.colors['border-focus-inner']}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n\n ${(props) =>\n template({\n knobColor: props.theme.colors['bg-oncolor-primary'],\n knobShadowColor: props.theme.colors['bg-oncolor-hover'],\n trackColor: props.theme.colors['bg-onmain-tertiary'],\n trackColorHover: tinycolor(props.theme.colors['bg-onmain-tertiary']).darken(6).toString() as CSSColor,\n trackColorChecked: props.theme.colors['bg-brand-primary-basic'],\n trackColorCheckedHover: tinycolor(props.theme.colors['bg-brand-primary-basic']).lighten(4).toString() as CSSColor,\n trackColorDisabled: props.theme.colors['bg-disabled-small'],\n trackColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardSwitchProp","createShouldForwardProp","propKey","includes","shouldForwardKnobProp","Input","styled","input","withConfig","shouldForwardProp","displayName","componentId","Track","span","Knob","responsiveSize","Root","props","inline","disabled","theme","colors","template","palette","knobColor","knobShadowColor","trackColor","trackColorHover","tinycolor","darken","toString","trackColorChecked","trackColorCheckedHover","lighten","trackColorDisabled","trackColorDisabledChecked","hover"],"mappings":"iPAQA,MAAMA,wBAA0BC,wBAAyBC,IAAa,CAAC,SAAU,YAAYC,SAASD,IAEtG,MAAME,sBAAwBH,0BAEvB,MAAMI,MAAQC,OAAOC,MAAMC,WAAW,CAC3CC,kBAAoBP,IAAa,CAAC,QAAS,UAAW,aAAaC,SAASD,KAC5EM,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAFmBL,CAEnB,CAAA,qKAiBWM,MAAQN,OAAOO,KAAIL,WAAA,CAAAE,YAAA,gBAAAC,YAAA,mBAAXL,CAAW,CAAA,8JAYzB,MAAMQ,KAAOR,OAAOO,KAAKL,WAA4B,CAC1DC,kBAAmBL,wBACnBI,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,gNAAA,KAYIS,gBAmCC,MAAMC,KAAOV,OAAOO,KAAKL,WAA8B,CAC5DC,kBAAmBT,0BACnBQ,WAAA,CAAAE,YAAA,eAAAC,YAAA,mBAFkBL,CAElB,CAAA,GAAA,IAAA,IAAA,IACGW,GAAU,gIAKEA,EAAMC,OAAS,cAAgB,0BAChCD,EAAME,SAAW,cAAgB,2BAErCd,mBAAmBO,WAAWE,sEAI9BT,yBAAyBO,0CACLK,EAAMG,MAAMC,OAAO,oCAAoCJ,EAAMG,MAAMC,OAAO,uGAMrGJ,IACDK,OAtDcC,EAsDL,CACPC,UAAWP,EAAMG,MAAMC,OAAO,sBAC9BI,gBAAiBR,EAAMG,MAAMC,OAAO,oBACpCK,WAAYT,EAAMG,MAAMC,OAAO,sBAC/BM,gBAAiBC,UAAUX,EAAMG,MAAMC,OAAO,uBAAuBQ,OAAO,GAAGC,WAC/EC,kBAAmBd,EAAMG,MAAMC,OAAO,0BACtCW,uBAAwBJ,UAAUX,EAAMG,MAAMC,OAAO,2BAA2BY,QAAQ,GAAGH,WAC3FI,mBAAoBjB,EAAMG,MAAMC,OAAO,qBACvCc,0BAA2BlB,EAAMG,MAAMC,OAAO,yBAC3CJ,EAAMM,SA/D8B,WACrCX,WAAWE,wCACKS,EAAQC,2CACFD,EAAQE,gCAE9Bb,kCACgBW,EAAQG,2BAExBrB,kCAAkCO,kCAClBW,EAAQQ,kCAExB1B,oBAAoBO,kCACJW,EAAQW,mCAExB7B,4BAA4BO,kCACZW,EAAQY,sCAE5BC,MACA,6BACsBb,EAAQI,yBAE9B,aAAatB,0BAA0BO,eAEvCwB,MACA,6BACsBb,EAAQS,gCAE9B,aAAa3B,kCAAkCO,aA3BjCW,OAkEdR"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1011,6 +1011,7 @@ type IconName$1 =
|
|
|
1011
1011
|
| 'messageCircleQuestion'
|
|
1012
1012
|
| 'messageCircleNotif'
|
|
1013
1013
|
| 'messageCircleLines'
|
|
1014
|
+
| 'messageCircleXmark'
|
|
1014
1015
|
| 'messageSquareLines'
|
|
1015
1016
|
| 'messageSquare'
|
|
1016
1017
|
| 'phone'
|
|
@@ -6954,7 +6955,7 @@ interface SwitchProps extends ResponsiveSizeProps<Size$8>, Omit<React.ComponentP
|
|
|
6954
6955
|
* Использование кортежей включает применение размеров в зависимости от ширины вьюпорта.
|
|
6955
6956
|
*
|
|
6956
6957
|
* @general
|
|
6957
|
-
* @default '
|
|
6958
|
+
* @default 'm' */
|
|
6958
6959
|
size?: Size$8 | [DESKTOP: Size$8, TABLET: Size$8, MOBILE: Size$8] | [XL: Size$8, L: Size$8, M: Size$8, S: Size$8, XS: Size$8, XXS: Size$8];
|
|
6959
6960
|
/**
|
|
6960
6961
|
* Размер для XXS брейкпоинта.
|
|
@@ -6998,7 +6999,7 @@ interface SwitchProps extends ResponsiveSizeProps<Size$8>, Omit<React.ComponentP
|
|
|
6998
6999
|
|
|
6999
7000
|
/**
|
|
7000
7001
|
*
|
|
7001
|
-
* *v1.
|
|
7002
|
+
* *v1.1.0*
|
|
7002
7003
|
*
|
|
7003
7004
|
* Контрол для переключения между двумя значениями: включено или выключено.
|
|
7004
7005
|
*
|