@foxford/ui 2.20.0 → 2.20.1
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/Alert/style.js +1 -1
- package/components/Alert/style.js.map +1 -1
- package/components/FormInputLabel/FormInputLabel.js +1 -1
- package/components/FormInputLabel/FormInputLabel.js.map +1 -1
- package/components/FormInputLabel/constants.js +1 -1
- package/components/FormInputLabel/constants.js.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/Input/style.js +1 -1
- package/components/Input/style.js.map +1 -1
- package/components/InputCheckbox/style.js +1 -1
- package/components/InputCheckbox/style.js.map +1 -1
- package/components/InputRadio/style.js +1 -1
- package/components/InputRadio/style.js.map +1 -1
- package/components/Switcher/style.js +1 -1
- package/components/Switcher/style.js.map +1 -1
- package/components/Textarea/style.js +1 -1
- package/components/Textarea/style.js.map +1 -1
- package/dts/index.d.ts +6 -3
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/mixins/focus.js +1 -1
- package/mixins/focus.js.map +1 -1
- package/mixins/responsive-margin.js.map +1 -1
- package/package.json +1 -1
- package/theme/colors-dark.js +1 -1
- package/theme/colors-dark.js.map +1 -1
- package/theme/colors-light.js +1 -1
- package/theme/colors-light.js.map +1 -1
- package/theme/colors.js +1 -1
- package/theme/colors.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';var a=c((o=>!['inline','error','success','onColored'].includes(o)));var n=r.input.withConfig({componentId:"fox-ui__sc-rgocm7-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;&:focus{outline:none;}"]);var d=r.span.withConfig({componentId:"fox-ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);var
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import{createShouldForwardProp as c}from'../../shared/utils/style.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';var a=c((o=>!['inline','error','success','onColored'].includes(o)));var n=r.input.withConfig({componentId:"fox-ui__sc-rgocm7-0"})(["box-sizing:border-box;position:absolute;top:0;left:0;margin:0;border:none;opacity:0;width:100%;height:100%;z-index:1;&:focus{outline:none;}"]);var d=r.span.withConfig({componentId:"fox-ui__sc-rgocm7-1"})(["box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;border:1px solid transparent;transition-property:border-color;transition-duration:150ms;transition-timing-function:ease-in;&::before{content:'';position:absolute;width:40%;height:40%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;opacity:0;}"]);var s=o=>"\n & > ".concat(d," {\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n }\n & > ").concat(d,"::before {\n background-color: ").concat(o.color,";\n }\n &:hover > ").concat(d," {\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n &:hover > ").concat(d,"::before {\n background-color: ").concat(o.colorHover,";\n }\n & > ").concat(n,":checked:not(:disabled) + ").concat(d," {\n background-color: ").concat(o.backgroundColorChecked,";\n border-color: ").concat(o.borderColorChecked,";\n }\n & > ").concat(n,":checked:not(:disabled) + ").concat(d,"::before {\n background-color: ").concat(o.colorChecked,";\n }\n & > ").concat(n,":disabled:not(:checked) + ").concat(d," {\n background-color: ").concat(o.backgroundColorDisabled,";\n border-color: ").concat(o.borderColorDisabled,";\n }\n & > ").concat(n,":disabled:not(:checked) + ").concat(d,"::before {\n background-color: ").concat(o.colorDisabled,";\n }\n & > ").concat(n,":disabled:checked + ").concat(d," {\n background-color: ").concat(o.backgroundColorDisabledChecked,";\n border-color: ").concat(o.borderColorDisabledChecked,";\n }\n & > ").concat(n,":disabled:checked + ").concat(d,"::before {\n background-color: ").concat(o.colorDisabledChecked,";\n }\n");var t={default:{error:e(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-onmain-primary'],borderColorHover:r.theme.colors['alert-bg-error-500'],colorChecked:r.theme.colors['content-oncolor-primary'],backgroundColorChecked:r.theme.colors['alert-bg-error-500'],borderColorChecked:r.theme.colors['alert-bg-error-500'],colorDisabled:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['border-disabled'],colorDisabledChecked:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:r.theme.colors['bg-disabled-active'],borderColorDisabledChecked:r.theme.colors['bg-disabled-active']},r.palette)))),success:e(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['alert-bg-success-500'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-onmain-primary'],borderColorHover:r.theme.colors['alert-bg-success-500'],colorChecked:r.theme.colors['content-oncolor-primary'],backgroundColorChecked:r.theme.colors['alert-bg-success-500'],borderColorChecked:r.theme.colors['alert-bg-success-500'],colorDisabled:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['border-disabled'],colorDisabledChecked:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:r.theme.colors['bg-disabled-active'],borderColorDisabledChecked:r.theme.colors['bg-disabled-active']},r.palette)))),default:e(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-small'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-onmain-primary'],borderColorHover:r.theme.colors['border-brand-primary'],colorChecked:r.theme.colors['content-oncolor-primary'],backgroundColorChecked:r.theme.colors['bg-brand-primary-basic'],borderColorChecked:r.theme.colors['bg-brand-primary-basic'],colorDisabled:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:r.theme.colors['bg-disabled-large'],borderColorDisabled:r.theme.colors['border-disabled'],colorDisabledChecked:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:r.theme.colors['bg-disabled-active'],borderColorDisabledChecked:r.theme.colors['bg-disabled-active']},r.palette))))},onColored:{error:e(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['alert-error'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-onmain-secondary'],borderColorHover:r.theme.colors['alert-error'],colorChecked:r.theme.colors['content-oncolor-primary'],backgroundColorChecked:r.theme.colors['alert-bg-error-500'],borderColorChecked:r.theme.colors['alert-bg-error-500'],colorDisabled:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['border-disabled'],colorDisabledChecked:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:r.theme.colors['bg-disabled-active'],borderColorDisabledChecked:r.theme.colors['bg-disabled-active']},r.palette)))),success:e(["",""],(r=>s(o({color:r.theme.colors['content-oncolor-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-oncolor-primary'],backgroundColorHover:r.theme.colors['bg-onmain-secondary'],borderColorHover:r.theme.colors['alert-success'],colorChecked:r.theme.colors['content-oncolor-primary'],backgroundColorChecked:r.theme.colors['alert-bg-success-500'],borderColorChecked:r.theme.colors['alert-bg-success-500'],colorDisabled:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['border-disabled'],colorDisabledChecked:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:r.theme.colors['bg-disabled-active'],borderColorDisabledChecked:r.theme.colors['bg-disabled-active']},r.palette)))),default:e(["",""],(r=>s(o({color:r.theme.colors['bg-brand-primary-basic'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-small'],colorHover:r.theme.colors['bg-brand-primary-basic'],backgroundColorHover:r.theme.colors['bg-onmain-primary'],borderColorHover:r.theme.colors['border-brand-primary'],colorChecked:r.theme.colors['bg-brand-primary-basic'],backgroundColorChecked:r.theme.colors['bg-oncolor-primary'],borderColorChecked:r.theme.colors['bg-oncolor-primary'],colorDisabled:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabled:r.theme.colors['bg-disabled-small'],borderColorDisabled:r.theme.colors['border-disabled'],colorDisabledChecked:r.theme.colors['bg-onmain-secondary'],backgroundColorDisabledChecked:r.theme.colors['bg-disabled-active'],borderColorDisabledChecked:r.theme.colors['bg-disabled-active']},r.palette))))}};var b=r.span.withConfig({shouldForwardProp:a}).attrs({dynamicSizeDeclaration:(o,r)=>({fontSize:'string'==typeof o?o:"".concat(o).concat(r),height:'1em',width:'1em'})}).withConfig({componentId:"fox-ui__sc-rgocm7-2"})([""," "," ",""],(o=>"\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ".concat(o.inline?'inline-flex':'flex',";\n border-radius: 50%;\n flex-shrink: 0;\n & > ").concat(n," {\n cursor: ").concat(o.cursor?o.cursor:'pointer',";\n }\n & > ").concat(n,":checked + ").concat(d,"::before {\n opacity: 1;\n }\n & > ").concat(n,":focus-visible + ").concat(d," {\n box-shadow: 0 0 0 2px ").concat(o.theme.colors.white,", 0 0 0 4px ").concat(o.theme.colors['border-focus'],";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n ")),(o=>{var r=o.onColored?t.onColored:t.default;return o.error?r.error:o.success?r.success:r.default}),l);export{n as Input,d as InputMask,b as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/InputRadio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledInputRadioProps, InputRadioPalette } from './types'\n\nconst shouldForwardInputRadioProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored'].includes(propKey)\n)\n\nexport const Input = styled.input`\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 &:focus {\n outline: none;\n }\n`\n\nexport const InputMask = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n border: 1px solid transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n &::before {\n content: '';\n position: absolute;\n width: 40%;\n height: 40%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n opacity: 0;\n }\n`\n\nconst template = (palette: InputRadioPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${palette.color};\n }\n &:hover > ${InputMask} {\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${InputMask}::before {\n background-color: ${palette.colorHover};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['bg-brand-primary-basic'],\n borderColorChecked: props.theme.colors['bg-brand-primary-basic'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-error'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-success'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['bg-brand-primary-basic'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: props.theme.colors['bg-oncolor-primary'],\n borderColorChecked: props.theme.colors['bg-oncolor-primary'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span\n .withConfig<StyledInputRadioProps>({\n shouldForwardProp: shouldForwardInputRadioProp,\n })\n .attrs(<Required<Pick<StyledInputRadioProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n height: '1em',\n width: '1em',\n }\n },\n })`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n & > ${Input} {\n cursor: ${props.cursor ? props.cursor : 'pointer'};\n }\n & > ${Input}:checked + ${InputMask}::before {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${props.theme.colors.toryBlueDark}, 0 0 0 4px ${props.theme.colors.white};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardInputRadioProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","componentId","InputMask","span","template","palette","concat","backgroundColor","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","props","_objectSpread","theme","colors","success","onColored","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","height","width","inline","cursor","toryBlueDark","white","schema","responsiveSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/InputRadio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport type { StyledInputRadioProps, InputRadioPalette } from './types'\n\nconst shouldForwardInputRadioProp = createShouldForwardProp(\n (propKey) => !['inline', 'error', 'success', 'onColored'].includes(propKey)\n)\n\nexport const Input = styled.input`\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 &:focus {\n outline: none;\n }\n`\n\nexport const InputMask = styled.span`\n box-sizing: border-box;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n border: 1px solid transparent;\n transition-property: border-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n &::before {\n content: '';\n position: absolute;\n width: 40%;\n height: 40%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n opacity: 0;\n }\n`\n\nconst template = (palette: InputRadioPalette) => `\n & > ${InputMask} {\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${InputMask}::before {\n background-color: ${palette.color};\n }\n &:hover > ${InputMask} {\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:hover > ${InputMask}::before {\n background-color: ${palette.colorHover};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask} {\n background-color: ${palette.backgroundColorChecked};\n border-color: ${palette.borderColorChecked};\n }\n & > ${Input}:checked:not(:disabled) + ${InputMask}::before {\n background-color: ${palette.colorChecked};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask} {\n background-color: ${palette.backgroundColorDisabled};\n border-color: ${palette.borderColorDisabled};\n }\n & > ${Input}:disabled:not(:checked) + ${InputMask}::before {\n background-color: ${palette.colorDisabled};\n }\n & > ${Input}:disabled:checked + ${InputMask} {\n background-color: ${palette.backgroundColorDisabledChecked};\n border-color: ${palette.borderColorDisabledChecked};\n }\n & > ${Input}:disabled:checked + ${InputMask}::before {\n background-color: ${palette.colorDisabledChecked};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['bg-brand-primary-basic'],\n borderColorChecked: props.theme.colors['bg-brand-primary-basic'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-large'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n error: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-error'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-error'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-error-500'],\n borderColorChecked: props.theme.colors['alert-bg-error-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n success: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-oncolor-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-oncolor-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['alert-success'],\n colorChecked: props.theme.colors['content-oncolor-primary'],\n backgroundColorChecked: props.theme.colors['alert-bg-success-500'],\n borderColorChecked: props.theme.colors['alert-bg-success-500'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledInputRadioProps>`\n ${(props) =>\n template({\n color: props.theme.colors['bg-brand-primary-basic'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-small'],\n colorHover: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-brand-primary'],\n colorChecked: props.theme.colors['bg-brand-primary-basic'],\n backgroundColorChecked: props.theme.colors['bg-oncolor-primary'],\n borderColorChecked: props.theme.colors['bg-oncolor-primary'],\n colorDisabled: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabled: props.theme.colors['bg-disabled-small'],\n borderColorDisabled: props.theme.colors['border-disabled'],\n colorDisabledChecked: props.theme.colors['bg-onmain-secondary'],\n backgroundColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n borderColorDisabledChecked: props.theme.colors['bg-disabled-active'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.span\n .withConfig<StyledInputRadioProps>({\n shouldForwardProp: shouldForwardInputRadioProp,\n })\n .attrs(<Required<Pick<StyledInputRadioProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => {\n return {\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n height: '1em',\n width: '1em',\n }\n },\n })`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n position: relative;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n border-radius: 50%;\n flex-shrink: 0;\n & > ${Input} {\n cursor: ${props.cursor ? props.cursor : 'pointer'};\n }\n & > ${Input}:checked + ${InputMask}::before {\n opacity: 1;\n }\n & > ${Input}:focus-visible + ${InputMask} {\n box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n ${(props) => {\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n`\n"],"names":["shouldForwardInputRadioProp","createShouldForwardProp","propKey","includes","Input","styled","input","withConfig","componentId","InputMask","span","template","palette","concat","backgroundColor","borderColor","color","backgroundColorHover","borderColorHover","colorHover","backgroundColorChecked","borderColorChecked","colorChecked","backgroundColorDisabled","borderColorDisabled","colorDisabled","backgroundColorDisabledChecked","borderColorDisabledChecked","colorDisabledChecked","COLOR_SCHEMA","default","error","css","props","_objectSpread","theme","colors","success","onColored","Root","shouldForwardProp","attrs","dynamicSizeDeclaration","size","sizeUnits","fontSize","height","width","inline","cursor","white","schema","responsiveSize"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n,{css as o}from'styled-components';import e from'tinycolor2';import{getColor as t}from'../../mixins/color.js';var i=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 r=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 a="\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(r," {\n cursor: not-allowed;\n }\n");var s=o(["& ","{&::before{left:","px;}}"],c,(n=>{var{switcherWidth:o,switcherHeight:e,dotSize:t}=n;return o-t-(e-t)/2}));var l=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 d=o(["",""],(n=>{var o=n.color||'atlantis';return"\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.inactiveColor?"\n background-image: linear-gradient(\n to right,\n ".concat(e(t(n.inactiveColor,n)).lighten(10).toString(),",\n ").concat(t(n.inactiveColor,n),"\n );\n "):'',"\n\n ").concat(n.checked?"\n background-image: linear-gradient(\n to right,\n ".concat(e(t(o,n)).lighten(10).toString(),",\n ").concat(t(o,n),"\n );\n "):'',"\n }\n\n & ").concat(i,":focus-visible + ").concat(c," {\n outline: 1px solid ").concat(t(o,n),";\n outline-offset: 2px;\n }\n ")}));var h=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 ").concat(!n.checked&&n.inactiveColor?"background-color: ".concat(t(n.inactiveColor,n),";"):'',"\n ").concat(n.checked&&n.color?"background-color: ".concat(t(n.color,n),";"):'',"\n }\n\n & ").concat(i,":focus-visible + ").concat(c," {\n
|
|
1
|
+
import n,{css as o}from'styled-components';import e from'tinycolor2';import{getColor as t}from'../../mixins/color.js';var i=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 r=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 a="\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(r," {\n cursor: not-allowed;\n }\n");var s=o(["& ","{&::before{left:","px;}}"],c,(n=>{var{switcherWidth:o,switcherHeight:e,dotSize:t}=n;return o-t-(e-t)/2}));var l=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 d=o(["",""],(n=>{var o=n.color||'atlantis';return"\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.inactiveColor?"\n background-image: linear-gradient(\n to right,\n ".concat(e(t(n.inactiveColor,n)).lighten(10).toString(),",\n ").concat(t(n.inactiveColor,n),"\n );\n "):'',"\n\n ").concat(n.checked?"\n background-image: linear-gradient(\n to right,\n ".concat(e(t(o,n)).lighten(10).toString(),",\n ").concat(t(o,n),"\n );\n "):'',"\n }\n\n & ").concat(i,":focus-visible + ").concat(c," {\n outline: 1px solid ").concat(t(o,n),";\n outline-offset: 2px;\n }\n ")}));var h=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 ").concat(!n.checked&&n.inactiveColor?"background-color: ".concat(t(n.inactiveColor,n),";"):'',"\n ").concat(n.checked&&n.color?"background-color: ".concat(t(n.color,n),";"):'',"\n }\n\n & ").concat(i,":focus-visible + ").concat(c," {\n box-shadow: 0 0 0 2px ").concat(n.theme.colors.white,", 0 0 0 4px ").concat(n.theme.colors['border-focus'],";\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n ")));var b=n.div.withConfig({shouldForwardProp:n=>['children','className','style'].includes(n)}).withConfig({componentId:"fox-ui__sc-w14piw-3"})([""," "," "," ",""],l,(n=>n.checked?s:''),(n=>n.disabled?a:''),(n=>{var{brandPresetUsed:o}=n;return o?h:d}));export{i as Input,r as Label,b as Root,c as Switcher};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +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 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
|
|
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 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 box-shadow: 0 0 0 2px ${props.theme.colors.white}, 0 0 0 4px ${props.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `}\n`\n\nexport const Root = styled.div.withConfig<StyledSwitcherProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\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","_ref4","brandPresetUsed"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o,{css as r}from'styled-components';import{property as n,responsiveNamedProperty as e}from'../../mixins/responsive-property.js';import{chooseWidthValue as t}from'../Input/helpers.js';import{baseInputStyle as i}from'../Input/style.js';var
|
|
1
|
+
import o,{css as r}from'styled-components';import{property as n,responsiveNamedProperty as e}from'../../mixins/responsive-property.js';import{chooseWidthValue as t}from'../Input/helpers.js';import{baseInputStyle as i}from'../Input/style.js';import{focus as a}from'../../mixins/focus.js';var d=r(["",";"," "," "," "," ",""],(o=>{var{theme:r}=o;return"\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ".concat(r.colors['bg-onmain-secondary'],";\n border: 1px solid ").concat(r.colors['border-onmain-default-large'],";\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ").concat(r.colors['content-onmain-primary'],";\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ").concat(r.colors['content-onmain-secondary'],";\n }\n\n &:disabled {\n background-color: ").concat(r.colors['bg-disabled-large'],";\n border-color: ").concat(r.colors['border-disabled'],";\n color: ").concat(r.colors['content-disabled'],";\n cursor: not-allowed;\n }\n ")}),(o=>o.width?n(t(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null),(o=>e({sizes:{widthXS:o.widthXS,widthS:o.widthS,widthM:o.widthM,widthL:o.widthL,widthXL:o.widthXL},cssProperty:o.fluid&&'auto'!==o.width?'max-width':'width',customSizeHandler:t})),(o=>{var{fluid:r}=o;return r&&'width: 100%;'}),(o=>{var{error:r,theme:n}=o;return r&&"\n background-color: ".concat(n.colors['alert-bg-error-100'],";\n border: 1px solid ").concat(n.colors['alert-bg-error-500'],";\n ")}),a);var s=r(["resize:none;line-height:23px;padding:16px 20px 11px;",""],i);var c=o.textarea.withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error','brandPresetUsed','theme'].includes(o)&&!o.includes('width')}).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["",""],(o=>{var{brandPresetUsed:r}=o;return r?d:s}));export{c as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { baseInputStyle } from 'components/Input/style'\nimport type { StyledTextareaProps } from './types'\n\nconst brandTextareaStyle = css<StyledTextareaProps>`\n ${({ theme }) => `\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ${theme.colors['bg-onmain-secondary']};\n border: 1px solid ${theme.colors['border-onmain-default-large']};\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${theme.colors['content-onmain-primary']};\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ${theme.colors['content-onmain-secondary']};\n }\n\n &:
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { baseInputStyle } from 'components/Input/style'\nimport { focus } from 'mixins/focus'\nimport type { StyledTextareaProps } from './types'\n\nconst brandTextareaStyle = css<StyledTextareaProps>`\n ${({ theme }) => `\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: none;\n\n background: ${theme.colors['bg-onmain-secondary']};\n border: 1px solid ${theme.colors['border-onmain-default-large']};\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${theme.colors['content-onmain-primary']};\n\n transition-property: background-color, border-color, color, caret-color;\n transition-duration: 200ms;\n transition-timing-function: ease-in;\n\n &::placeholder {\n color: ${theme.colors['content-onmain-secondary']};\n }\n\n &:disabled {\n background-color: ${theme.colors['bg-disabled-large']};\n border-color: ${theme.colors['border-disabled']};\n color: ${theme.colors['content-disabled']};\n cursor: not-allowed;\n }\n `};\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n\n ${(props) =>\n responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n\n ${({ fluid }) => fluid && 'width: 100%;'}\n\n ${({ error, theme }) =>\n error &&\n `\n background-color: ${theme.colors['alert-bg-error-100']};\n border: 1px solid ${theme.colors['alert-bg-error-500']};\n `}\n\n ${focus}\n`\n\nconst baseTextareaStyle = css`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n ${baseInputStyle}\n`\n\nexport const Root = styled.textarea.withConfig<StyledTextareaProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error', 'brandPresetUsed', 'theme'].includes(prop) &&\n !prop.includes('width'),\n})`\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandTextareaStyle : baseTextareaStyle)}\n`\n"],"names":["brandTextareaStyle","css","_ref","theme","colors","concat","props","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","_ref2","_ref3","error","focus","baseTextareaStyle","baseInputStyle","Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","componentId","_ref4","brandPresetUsed"],"mappings":"+RAOA,IAAMA,EAAqBC,EACvB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KAAAC,IAAA,IAACC,MAAEA,GAAHD,EAAA,MAOcC,qIAAAA,OAAAA,EAAMC,OAAO,uBAP3B,6BAAAC,OAQoBF,EAAMC,OAAO,2MAQxBD,EAAMC,OAAO,0BAhBtB,uMAAAC,OAuBWF,EAAMC,OAAO,4BAIFD,0DAAAA,OAAAA,EAAMC,OAAO,qBACjBD,2BAAAA,OAAAA,EAAMC,OAAO,mBA5B/B,oBAAAC,OA6BWF,EAAMC,OAAO,oBA7BxB,+CAkCCE,GACDA,EAAMC,MACFC,EAASC,EAAiBH,EAAMC,OAAQD,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,SAC9F,OAEHD,GACDK,EAAwB,CACtBC,MAAO,CACLC,QAASP,EAAMO,QACfC,OAAQR,EAAMQ,OACdC,OAAQT,EAAMS,OACdC,OAAQV,EAAMU,OACdC,QAASX,EAAMW,SAEjBC,YAAaZ,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,QACnEY,kBAAmBV,MAGrBW,IAAA,IAACV,MAAEA,GAAHU,EAAA,OAAeV,GAAS,kBAExBW,IAAA,IAACC,MAAEA,EAAFnB,MAASA,GAAVkB,EAAA,OACAC,GAAK,6BAAAjB,OAEiBF,EAAMC,OAAO,sBAF9B,+BAAAC,OAGiBF,EAAMC,OAAO,sBAJnC,aAOAmB,GAGJ,IAAMC,EAAoBvB,EAAH,CAAA,uDAAA,IAInBwB,GAGG,IAAMC,EAAOC,EAAOC,SAASC,WAAgC,CAClEC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,QAAS,kBAAmB,SAASC,SAASD,KAChGA,EAAKC,SAAS,WAHFH,WAAA,CAAAI,YAAA,uBAAGN,CAKhB,CAAA,GAAA,KAAAO,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBnC,EAAqBwB"}
|
package/dts/index.d.ts
CHANGED
|
@@ -293,6 +293,7 @@ declare enum BaseColorNames {
|
|
|
293
293
|
'border-onmain-default-small' = "border-onmain-default-small",
|
|
294
294
|
'border-onmain-contrast' = "border-onmain-contrast",
|
|
295
295
|
'border-disabled' = "border-disabled",
|
|
296
|
+
'border-focus' = "border-focus",
|
|
296
297
|
'border-oncolor-disabled' = "border-oncolor-disabled",
|
|
297
298
|
'border-oncolor-default' = "border-oncolor-default",
|
|
298
299
|
'bg-onmain-main' = "bg-onmain-main",
|
|
@@ -506,6 +507,7 @@ declare const ColorNames: {
|
|
|
506
507
|
'border-onmain-default-small': (typeof BaseColorNames)["border-onmain-default-small"];
|
|
507
508
|
'border-onmain-contrast': (typeof BaseColorNames)["border-onmain-contrast"];
|
|
508
509
|
'border-disabled': (typeof BaseColorNames)["border-disabled"];
|
|
510
|
+
'border-focus': (typeof BaseColorNames)["border-focus"];
|
|
509
511
|
'border-oncolor-disabled': (typeof BaseColorNames)["border-oncolor-disabled"];
|
|
510
512
|
'border-oncolor-default': (typeof BaseColorNames)["border-oncolor-default"];
|
|
511
513
|
'bg-onmain-main': (typeof BaseColorNames)["bg-onmain-main"];
|
|
@@ -885,7 +887,8 @@ declare type ResponsiveSizeProps = ResponsiveProps<SizeProperty, SizeValue> & {
|
|
|
885
887
|
};
|
|
886
888
|
|
|
887
889
|
declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
|
|
888
|
-
declare type
|
|
890
|
+
declare type MarginValue = CSSGlobalValue | (string & {}) | number;
|
|
891
|
+
declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, MarginValue> & {
|
|
889
892
|
marginUnits?: CSSUnit;
|
|
890
893
|
};
|
|
891
894
|
|
|
@@ -3265,9 +3268,9 @@ ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
|
|
|
3265
3268
|
/** Type attribute */
|
|
3266
3269
|
type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url';
|
|
3267
3270
|
/** Value for controlled input */
|
|
3268
|
-
value?: string
|
|
3271
|
+
value?: string;
|
|
3269
3272
|
/** Default value for uncontrolled input */
|
|
3270
|
-
defaultValue?: string
|
|
3273
|
+
defaultValue?: string;
|
|
3271
3274
|
/** Label for input */
|
|
3272
3275
|
label?: React.ReactNode;
|
|
3273
3276
|
/** Label position */
|