@foxford/ui 2.111.0 → 2.112.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/AddElement/style.js +1 -1
- package/components/AddElement/style.js.map +1 -1
- package/components/AddElement/style.mjs +1 -1
- package/components/AddElement/style.mjs.map +1 -1
- package/components/Alert/CountdownCircle.js +1 -1
- package/components/Alert/CountdownCircle.js.map +1 -1
- package/components/Alert/CountdownCircle.mjs +1 -1
- package/components/Alert/CountdownCircle.mjs.map +1 -1
- package/components/ContextMenu/Item.js +1 -1
- package/components/ContextMenu/Item.js.map +1 -1
- package/components/ContextMenu/Item.mjs +1 -1
- package/components/ContextMenu/Item.mjs.map +1 -1
- package/components/ContextMenu.Multilevel/Controls.js +1 -1
- package/components/ContextMenu.Multilevel/Controls.js.map +1 -1
- package/components/ContextMenu.Multilevel/Controls.mjs +1 -1
- package/components/ContextMenu.Multilevel/Controls.mjs.map +1 -1
- package/components/ContextMenu.Multilevel/Heading.js +1 -1
- package/components/ContextMenu.Multilevel/Heading.js.map +1 -1
- package/components/ContextMenu.Multilevel/Heading.mjs +1 -1
- package/components/ContextMenu.Multilevel/Heading.mjs.map +1 -1
- package/components/ContextMenu.Multilevel/SubHeading.js +1 -1
- package/components/ContextMenu.Multilevel/SubHeading.js.map +1 -1
- package/components/ContextMenu.Multilevel/SubHeading.mjs +1 -1
- package/components/ContextMenu.Multilevel/SubHeading.mjs.map +1 -1
- package/components/DialogComponent/style.js +1 -1
- package/components/DialogComponent/style.js.map +1 -1
- package/components/DialogComponent/style.mjs +1 -1
- package/components/DialogComponent/style.mjs.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/FormInputLabel/style.mjs +1 -1
- package/components/FormInputLabel/style.mjs.map +1 -1
- package/components/InputCheckbox/style.js +1 -1
- package/components/InputCheckbox/style.js.map +1 -1
- package/components/InputCheckbox/style.mjs +1 -1
- package/components/InputCheckbox/style.mjs.map +1 -1
- package/components/InputRadio/style.js +1 -1
- package/components/InputRadio/style.js.map +1 -1
- package/components/InputRadio/style.mjs +1 -1
- package/components/InputRadio/style.mjs.map +1 -1
- package/components/Progress.Segmented/style.js +1 -1
- package/components/Progress.Segmented/style.js.map +1 -1
- package/components/Progress.Segmented/style.mjs +1 -1
- package/components/Progress.Segmented/style.mjs.map +1 -1
- 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/components/Switcher/style.js +1 -1
- package/components/Switcher/style.js.map +1 -1
- package/components/Switcher/style.mjs +1 -1
- package/components/Switcher/style.mjs.map +1 -1
- package/components/Tag/Tag.js +1 -1
- package/components/Tag/Tag.js.map +1 -1
- package/components/Tag/Tag.mjs +1 -1
- package/components/Tag/Tag.mjs.map +1 -1
- package/dts/index.d.ts +21 -882
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/mixins/focus.js +1 -1
- package/mixins/focus.js.map +1 -1
- package/mixins/focus.mjs +1 -1
- package/mixins/focus.mjs.map +1 -1
- package/package.json +2 -2
- package/theme/colors-dark.js.map +1 -1
- package/theme/colors-dark.mjs.map +1 -1
- package/theme/colors-light.js.map +1 -1
- package/theme/colors-light.mjs.map +1 -1
- package/theme/colors.js +1 -1
- package/theme/colors.js.map +1 -1
- package/theme/colors.mjs +1 -1
- package/theme/colors.mjs.map +1 -1
- package/theme/theme-colors.js +2 -0
- package/theme/theme-colors.js.map +1 -0
- package/theme/theme-colors.mjs +2 -0
- package/theme/theme-colors.mjs.map +1 -0
- package/theme/themes.js +1 -1
- package/theme/themes.js.map +1 -1
- package/theme/themes.mjs +1 -1
- package/theme/themes.mjs.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const Input=styled__default.default.input.withConfig({displayName:"Switcher__Input",componentId:"ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);const Label=styled__default.default.label.withConfig({displayName:"Switcher__Label",componentId:"ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);const Switcher=styled__default.default.label.withConfig({displayName:"Switcher",componentId:"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%;}"],e=>e.switcherWidth,e=>e.switcherHeight,e=>e.borderRadius,({switcherHeight:e,dotSize:o})=>(e-o)/2,({switcherHeight:e,dotSize:o})=>(e-o)/2,e=>e.dotSize,e=>e.dotSize);const 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`;const checkedStyles=styled.css(["& ","{&::before{left:","px;}}"],Switcher,({switcherWidth:e,switcherHeight:o,dotSize:t})=>e-t-(o-t)/2);const baseStyles=styled.css(["",""],e=>`\n position: relative;\n display: inline-flex;\n flex-direction: row;\n box-sizing: border-box;\n height: ${e.switcherHeight}px;\n line-height: ${e.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 `);const defaultPresetStyle=styled.css(["",""],e=>{const o=e.color||'atlantis';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: ${e.theme.colors.white};\n box-shadow: ${e.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n }\n\n ${e.inactiveColor?`\n background-image: linear-gradient(\n to right,\n ${tinycolor__default.default(color.getColor(e.inactiveColor,e)).lighten(10).toString()},\n ${color.getColor(e.inactiveColor,e)}\n );\n `:''}\n\n ${e.checked?`\n background-image: linear-gradient(\n to right,\n ${tinycolor__default.default(color.getColor(o,e)).lighten(10).toString()},\n ${color.getColor(o,e)}\n );\n `:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n outline: 1px solid ${color.getColor(o,e)};\n outline-offset: 2px;\n }\n `});const brandPresetStyles=styled.css(["",""],e=>`\n & ${Switcher} {\n background-color: ${e.disabled?e.theme.colors[e.checked?'bg-disabled-active':'bg-disabled-small']:e.theme.colors[e.checked?'bg-brand-primary-basic':'bg-onmain-tertiary']};\n\n &::before {\n background-color: ${e.theme.colors['bg-oncolor-primary']};\n box-shadow: ${e.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)'};\n }\n\n ${!e.checked&&e.inactiveColor?`background-color: ${color.getColor(e.inactiveColor,e)};`:''}\n ${e.checked&&e.color?`background-color: ${color.getColor(e.color,e)};`:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n box-shadow: 0 0 0 2px ${e.theme.colors
|
|
1
|
+
'use strict';var styled=require('styled-components');var tinycolor=require('tinycolor2');var color=require('../../mixins/color.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);var tinycolor__default=_interopDefault(tinycolor);const Input=styled__default.default.input.withConfig({displayName:"Switcher__Input",componentId:"ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);const Label=styled__default.default.label.withConfig({displayName:"Switcher__Label",componentId:"ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);const Switcher=styled__default.default.label.withConfig({displayName:"Switcher",componentId:"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%;}"],e=>e.switcherWidth,e=>e.switcherHeight,e=>e.borderRadius,({switcherHeight:e,dotSize:o})=>(e-o)/2,({switcherHeight:e,dotSize:o})=>(e-o)/2,e=>e.dotSize,e=>e.dotSize);const 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`;const checkedStyles=styled.css(["& ","{&::before{left:","px;}}"],Switcher,({switcherWidth:e,switcherHeight:o,dotSize:t})=>e-t-(o-t)/2);const baseStyles=styled.css(["",""],e=>`\n position: relative;\n display: inline-flex;\n flex-direction: row;\n box-sizing: border-box;\n height: ${e.switcherHeight}px;\n line-height: ${e.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 `);const defaultPresetStyle=styled.css(["",""],e=>{const o=e.color||'atlantis';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: ${e.theme.colors.white};\n box-shadow: ${e.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n }\n\n ${e.inactiveColor?`\n background-image: linear-gradient(\n to right,\n ${tinycolor__default.default(color.getColor(e.inactiveColor,e)).lighten(10).toString()},\n ${color.getColor(e.inactiveColor,e)}\n );\n `:''}\n\n ${e.checked?`\n background-image: linear-gradient(\n to right,\n ${tinycolor__default.default(color.getColor(o,e)).lighten(10).toString()},\n ${color.getColor(o,e)}\n );\n `:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n outline: 1px solid ${color.getColor(o,e)};\n outline-offset: 2px;\n }\n `});const brandPresetStyles=styled.css(["",""],e=>`\n & ${Switcher} {\n background-color: ${e.disabled?e.theme.colors[e.checked?'bg-disabled-active':'bg-disabled-small']:e.theme.colors[e.checked?'bg-brand-primary-basic':'bg-onmain-tertiary']};\n\n &::before {\n background-color: ${e.theme.colors['bg-oncolor-primary']};\n box-shadow: ${e.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)'};\n }\n\n ${!e.checked&&e.inactiveColor?`background-color: ${color.getColor(e.inactiveColor,e)};`:''}\n ${e.checked&&e.color?`background-color: ${color.getColor(e.color,e)};`:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n box-shadow: 0 0 0 2px ${e.theme.colors['border-focus-inner']}, 0 0 0 4px ${e.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `);const Root=styled__default.default.div.withConfig({shouldForwardProp:e=>['children','className','style'].includes(e)}).withConfig({displayName:"Switcher__Root",componentId:"ui__sc-w14piw-3"})([""," "," "," ",""],baseStyles,e=>e.checked?checkedStyles:'',e=>e.disabled?disabledStyles:'',({brandPresetUsed:e})=>e?brandPresetStyles:defaultPresetStyle);exports.Input=Input,exports.Label=Label,exports.Root=Root,exports.Switcher=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:\n background 0.3s ease,\n 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:\n background 0.3s ease,\n 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
|
|
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:\n background 0.3s ease,\n 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:\n background 0.3s ease,\n 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['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\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","displayName","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","dotSize","disabledStyles","checkedStyles","css","baseStyles","defaultPresetStyle","color","theme","colors","white","disabled","inactiveColor","tinycolor","getColor","lighten","toString","checked","brandPresetStyles","Root","div","shouldForwardProp","prop","includes","brandPresetUsed"],"mappings":"ySAKaA,MAAQC,gBAAAA,QAAOC,MAAKC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAAY,CAAA,6FAUpBK,MAAQL,gBAAAA,QAAOM,MAAKJ,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAAY,CAAA,sIAUpBO,SAAWP,gBAAAA,QAAOM,MAAKJ,WAAA,CAAAC,YAAA,WAAAC,YAAA,mBAAZJ,CAAY,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,4GAIxBQ,GAAUA,EAAMC,cACfD,GAAUA,EAAME,eAMTF,GAAUA,EAAMG,aAKzB,EAAGD,iBAAgBE,cAAeF,EAAiBE,GAAW,EAC7D,EAAGF,iBAAgBE,cAAeF,EAAiBE,GAAW,EAE5DJ,GAAUA,EAAMI,QACfJ,GAAUA,EAAMI,SAU/B,MAAMC,eAAiB,oDAIjBN,8HASAF,2CAKN,MAAMS,cAAgBC,OAAAA,IAAG,CAAA,KAAA,mBAAA,SACnBR,SAEQ,EAAGE,gBAAeC,iBAAgBE,aACxCH,EAAgBG,GAAWF,EAAiBE,GAAW,GAK/D,MAAMI,WAAaD,OAAAA,IAAG,CAAA,GAAA,IACjBP,GAAU,4HAKDA,EAAME,uCACDF,EAAME,yLAUzB,MAAMO,mBAAqBF,OAAAA,IAAG,CAAA,GAAA,IACzBP,IACD,MAAMU,EAAQV,EAAMU,OAAS,WAE7B,MAAO,aACDX,kKAKoBC,EAAMW,MAAMC,OAAOC,iCACzBb,EAAMc,SAAW,OAAS,0DAIxCd,EAAMe,cACF,wGAGMC,2BAAUC,MAAAA,SAASjB,EAAMe,cAAef,IAAQkB,QAAQ,IAAIC,kCAC5DF,eAASjB,EAAMe,cAAef,yCAGpC,iBAIJA,EAAMoB,QACF,wGAGMJ,mBAAAA,QAAUC,eAASP,EAAOV,IAAQkB,QAAQ,IAAIC,kCAC9CF,MAAAA,SAASP,EAAOV,yCAGtB,0BAIJT,yBAAyBQ,0CACNkB,MAAAA,SAASP,EAAOV,qDAO7C,MAAMqB,kBAAoBd,OAAAA,IAAG,CAAA,GAAA,IACxBP,GAAU,WACPD,uCAEAC,EAAMc,SACFd,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,qBAAuB,qBAC1DpB,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,yBAA2B,0EAI9CpB,EAAMW,MAAMC,OAAO,+CACzBZ,EAAMc,SAAW,OAAS,yDAGvCd,EAAMoB,SAAWpB,EAAMe,cAAgB,qBAAqBE,MAAAA,SAASjB,EAAMe,cAAef,MAAY,aACvGA,EAAMoB,SAAWpB,EAAMU,MAAQ,qBAAqBO,eAASjB,EAAMU,MAAOV,MAAY,sBAGtFT,yBAAyBQ,2CACHC,EAAMW,MAAMC,OAAO,oCAAoCZ,EAAMW,MAAMC,OAAO,kGAOjG,MAAMU,KAAO9B,gBAAAA,QAAO+B,IAAI7B,WAAgC,CAC7D8B,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KACzE/B,WAAA,CAAAC,YAAA,iBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IACEgB,WAECR,GAAWA,EAAMoB,QAAUd,cAAgB,GAC3CN,GAAWA,EAAMc,SAAWT,eAAiB,GAC9C,EAAGsB,qBAAuBA,EAAkBN,kBAAoBZ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{getColor}from'../../mixins/color.mjs';const Input=styled.input.withConfig({displayName:"Switcher__Input",componentId:"ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);const Label=styled.label.withConfig({displayName:"Switcher__Label",componentId:"ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);const Switcher=styled.label.withConfig({displayName:"Switcher",componentId:"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%;}"],e=>e.switcherWidth,e=>e.switcherHeight,e=>e.borderRadius,({switcherHeight:e,dotSize:o})=>(e-o)/2,({switcherHeight:e,dotSize:o})=>(e-o)/2,e=>e.dotSize,e=>e.dotSize);const 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`;const checkedStyles=css(["& ","{&::before{left:","px;}}"],Switcher,({switcherWidth:e,switcherHeight:o,dotSize:n})=>e-n-(o-n)/2);const baseStyles=css(["",""],e=>`\n position: relative;\n display: inline-flex;\n flex-direction: row;\n box-sizing: border-box;\n height: ${e.switcherHeight}px;\n line-height: ${e.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 `);const defaultPresetStyle=css(["",""],e=>{const o=e.color||'atlantis';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: ${e.theme.colors.white};\n box-shadow: ${e.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n }\n\n ${e.inactiveColor?`\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(e.inactiveColor,e)).lighten(10).toString()},\n ${getColor(e.inactiveColor,e)}\n );\n `:''}\n\n ${e.checked?`\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(o,e)).lighten(10).toString()},\n ${getColor(o,e)}\n );\n `:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n outline: 1px solid ${getColor(o,e)};\n outline-offset: 2px;\n }\n `});const brandPresetStyles=css(["",""],e=>`\n & ${Switcher} {\n background-color: ${e.disabled?e.theme.colors[e.checked?'bg-disabled-active':'bg-disabled-small']:e.theme.colors[e.checked?'bg-brand-primary-basic':'bg-onmain-tertiary']};\n\n &::before {\n background-color: ${e.theme.colors['bg-oncolor-primary']};\n box-shadow: ${e.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)'};\n }\n\n ${!e.checked&&e.inactiveColor?`background-color: ${getColor(e.inactiveColor,e)};`:''}\n ${e.checked&&e.color?`background-color: ${getColor(e.color,e)};`:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n box-shadow: 0 0 0 2px ${e.theme.colors
|
|
1
|
+
import styled,{css}from'styled-components';import tinycolor from'tinycolor2';import{getColor}from'../../mixins/color.mjs';const Input=styled.input.withConfig({displayName:"Switcher__Input",componentId:"ui__sc-w14piw-0"})(["position:absolute;overflow:visible;z-index:-1;opacity:0;width:0;height:0;margin:0;"]);const Label=styled.label.withConfig({displayName:"Switcher__Label",componentId:"ui__sc-w14piw-1"})(["display:inline;padding-left:14px;cursor:pointer;user-select:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);const Switcher=styled.label.withConfig({displayName:"Switcher",componentId:"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%;}"],e=>e.switcherWidth,e=>e.switcherHeight,e=>e.borderRadius,({switcherHeight:e,dotSize:o})=>(e-o)/2,({switcherHeight:e,dotSize:o})=>(e-o)/2,e=>e.dotSize,e=>e.dotSize);const 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`;const checkedStyles=css(["& ","{&::before{left:","px;}}"],Switcher,({switcherWidth:e,switcherHeight:o,dotSize:n})=>e-n-(o-n)/2);const baseStyles=css(["",""],e=>`\n position: relative;\n display: inline-flex;\n flex-direction: row;\n box-sizing: border-box;\n height: ${e.switcherHeight}px;\n line-height: ${e.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 `);const defaultPresetStyle=css(["",""],e=>{const o=e.color||'atlantis';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: ${e.theme.colors.white};\n box-shadow: ${e.disabled?'none':'0 0 6px 0 rgba(0, 0, 0, 0.16)'};\n }\n\n ${e.inactiveColor?`\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(e.inactiveColor,e)).lighten(10).toString()},\n ${getColor(e.inactiveColor,e)}\n );\n `:''}\n\n ${e.checked?`\n background-image: linear-gradient(\n to right,\n ${tinycolor(getColor(o,e)).lighten(10).toString()},\n ${getColor(o,e)}\n );\n `:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n outline: 1px solid ${getColor(o,e)};\n outline-offset: 2px;\n }\n `});const brandPresetStyles=css(["",""],e=>`\n & ${Switcher} {\n background-color: ${e.disabled?e.theme.colors[e.checked?'bg-disabled-active':'bg-disabled-small']:e.theme.colors[e.checked?'bg-brand-primary-basic':'bg-onmain-tertiary']};\n\n &::before {\n background-color: ${e.theme.colors['bg-oncolor-primary']};\n box-shadow: ${e.disabled?'none':'0px 2px 4px rgba(0, 0, 0, 0.08)'};\n }\n\n ${!e.checked&&e.inactiveColor?`background-color: ${getColor(e.inactiveColor,e)};`:''}\n ${e.checked&&e.color?`background-color: ${getColor(e.color,e)};`:''}\n }\n\n & ${Input}:focus-visible + ${Switcher} {\n box-shadow: 0 0 0 2px ${e.theme.colors['border-focus-inner']}, 0 0 0 4px ${e.theme.colors['border-focus']};\n outline: 2px solid transparent;\n outline-offset: 2px;\n }\n `);const Root=styled.div.withConfig({shouldForwardProp:e=>['children','className','style'].includes(e)}).withConfig({displayName:"Switcher__Root",componentId:"ui__sc-w14piw-3"})([""," "," "," ",""],baseStyles,e=>e.checked?checkedStyles:'',e=>e.disabled?disabledStyles:'',({brandPresetUsed:e})=>e?brandPresetStyles:defaultPresetStyle);export{Input,Label,Root,Switcher};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","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:\n background 0.3s ease,\n 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:\n background 0.3s ease,\n 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
|
|
1
|
+
{"version":3,"file":"style.mjs","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:\n background 0.3s ease,\n 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:\n background 0.3s ease,\n 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['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\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","displayName","componentId","Label","label","Switcher","props","switcherWidth","switcherHeight","borderRadius","dotSize","disabledStyles","checkedStyles","css","baseStyles","defaultPresetStyle","color","theme","colors","white","disabled","inactiveColor","tinycolor","getColor","lighten","toString","checked","brandPresetStyles","Root","div","shouldForwardProp","prop","includes","brandPresetUsed"],"mappings":"gIAKaA,MAAQC,OAAOC,MAAKC,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAAY,CAAA,6FAUpBK,MAAQL,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,kBAAAC,YAAA,mBAAZJ,CAAY,CAAA,sIAUpBO,SAAWP,OAAOM,MAAKJ,WAAA,CAAAC,YAAA,WAAAC,YAAA,mBAAZJ,CAAY,CAAA,+DAAA,aAAA,+GAAA,oDAAA,WAAA,0BAAA,aAAA,4GAIxBQ,GAAUA,EAAMC,cACfD,GAAUA,EAAME,eAMTF,GAAUA,EAAMG,aAKzB,EAAGD,iBAAgBE,cAAeF,EAAiBE,GAAW,EAC7D,EAAGF,iBAAgBE,cAAeF,EAAiBE,GAAW,EAE5DJ,GAAUA,EAAMI,QACfJ,GAAUA,EAAMI,SAU/B,MAAMC,eAAiB,oDAIjBN,8HASAF,2CAKN,MAAMS,cAAgBC,IAAG,CAAA,KAAA,mBAAA,SACnBR,SAEQ,EAAGE,gBAAeC,iBAAgBE,aACxCH,EAAgBG,GAAWF,EAAiBE,GAAW,GAK/D,MAAMI,WAAaD,IAAG,CAAA,GAAA,IACjBP,GAAU,4HAKDA,EAAME,uCACDF,EAAME,yLAUzB,MAAMO,mBAAqBF,IAAG,CAAA,GAAA,IACzBP,IACD,MAAMU,EAAQV,EAAMU,OAAS,WAE7B,MAAO,aACDX,kKAKoBC,EAAMW,MAAMC,OAAOC,iCACzBb,EAAMc,SAAW,OAAS,0DAIxCd,EAAMe,cACF,wGAGMC,UAAUC,SAASjB,EAAMe,cAAef,IAAQkB,QAAQ,IAAIC,kCAC5DF,SAASjB,EAAMe,cAAef,yCAGpC,iBAIJA,EAAMoB,QACF,wGAGMJ,UAAUC,SAASP,EAAOV,IAAQkB,QAAQ,IAAIC,kCAC9CF,SAASP,EAAOV,yCAGtB,0BAIJT,yBAAyBQ,0CACNkB,SAASP,EAAOV,qDAO7C,MAAMqB,kBAAoBd,IAAG,CAAA,GAAA,IACxBP,GAAU,WACPD,uCAEAC,EAAMc,SACFd,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,qBAAuB,qBAC1DpB,EAAMW,MAAMC,OAAOZ,EAAMoB,QAAU,yBAA2B,0EAI9CpB,EAAMW,MAAMC,OAAO,+CACzBZ,EAAMc,SAAW,OAAS,yDAGvCd,EAAMoB,SAAWpB,EAAMe,cAAgB,qBAAqBE,SAASjB,EAAMe,cAAef,MAAY,aACvGA,EAAMoB,SAAWpB,EAAMU,MAAQ,qBAAqBO,SAASjB,EAAMU,MAAOV,MAAY,sBAGtFT,yBAAyBQ,2CACHC,EAAMW,MAAMC,OAAO,oCAAoCZ,EAAMW,MAAMC,OAAO,kGAOjG,MAAMU,KAAO9B,OAAO+B,IAAI7B,WAAgC,CAC7D8B,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KACzE/B,WAAA,CAAAC,YAAA,iBAAAC,YAAA,mBAFkBJ,CAElB,CAAA,GAAA,IAAA,IAAA,IAAA,IACEgB,WAECR,GAAWA,EAAMoB,QAAUd,cAAgB,GAC3CN,GAAWA,EAAMc,SAAWT,eAAiB,GAC9C,EAAGsB,qBAAuBA,EAAkBN,kBAAoBZ"}
|
package/components/Tag/Tag.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');function Tag(e){const{as:t,textProps:n,content:i,children:s,htmlFor:a,id:l,name:u,inputType:r,value:d,disabled:o,onChange:c,onClick:p,inverse:h,checked:g,...x}=e;return jsxRuntime.jsxs(style.Root,{as:t==='input'?'label':t,inverse:h,checked:g,disabled:o,onClick:t!=='input'?p:void 0,...t==='label'?{htmlFor:a}:{},...t==='button'?{type:'button'}:{},...t==='input'?{htmlFor:l||u}:{},...x,children:[t==='input'?jsxRuntime.jsx("input",{id:l||u,name:u,type:r||'checkbox',tabIndex:0,onChange:e=>(e.persist(),c&&c(e)),onClick:e=>(e.persist(),p&&p(e)),defaultChecked:e.defaultChecked,checked:g,value:d,disabled:o,hidden:!0}):null,s,jsxRuntime.jsx(style.Text,{size:14,forwardedAs:"span",color:g&&!h?'white':'mineShaft',...n,children:i})]})}function TagInput(e){return jsxRuntime.jsx(Tag,{as:"input",...e})}Tag.defaultProps={display:'inline-block',as:'button',height:40},TagInput.defaultProps={display:'inline-block',height:40},Tag.Input=TagInput,Tag.displayName='Tag',exports.Tag=Tag;
|
|
2
2
|
//# sourceMappingURL=Tag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { ResponsiveNamedProperty } from 'mixins/responsive-property'\nimport type { ColorProperty } from 'mixins/color'\nimport type { DisplayProperty } from 'mixins/display'\nimport type { BaseProps } from 'shared/interfaces'\nimport type { TextProps } from 'components/Text'\nimport
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { ResponsiveNamedProperty } from 'mixins/responsive-property'\nimport type { ColorProperty } from 'mixins/color'\nimport type { DisplayProperty } from 'mixins/display'\nimport type { BaseProps } from 'shared/interfaces'\nimport type { TextProps } from 'components/Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n DisplayProperty,\n ColorProperty,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nfunction Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nexport { Tag }\n"],"names":["Tag","props","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_jsxs","Styled","undefined","type","_jsx","tabIndex","e","persist","defaultChecked","hidden","size","forwardedAs","color","TagInput","defaultProps","display","height","Input","displayName"],"mappings":"yFAqEA,SAASA,IAAIC,GACX,MAAMC,GACJA,EAAEC,UACFA,EAASC,QACTA,EAAOC,SACPA,EAAQC,QACRA,EAAOC,GACPA,EAAEC,KACFA,EAAIC,UACJA,EAASC,MACTA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,KACGC,GACDf,EAMJ,OACEgB,WAAAA,KAACC,MAAAA,KAAW,CACVhB,GAAIA,IAAO,QAAU,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAASX,IAAO,QAAUW,OAAUM,KATrBjB,IAAO,QAAU,CAAEI,WAAY,CAAA,KAD9BJ,IAAO,SAAW,CAAEkB,KAAM,UAAa,CAAA,KAExClB,IAAO,QAAU,CAAEI,QAASC,GAAMC,GAAS,CAAA,KAYtDQ,EAASX,SAAA,CAEZH,IAAO,QACNmB,WAAAA,IAAA,QAAA,CACEd,GAAIA,GAAMC,EACVA,KAAMA,EACNY,KAAMX,GAAa,WACnBa,SAAU,EACVV,SAAWW,IACTA,EAAEC,UAEKZ,GAAYA,EAASW,IAE9BV,QAAUU,IACRA,EAAEC,UAEKX,GAAWA,EAAQU,IAE5BE,eAAgBxB,EAAMwB,eACtBV,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVe,QAAM,IAEN,KACHrB,EACDgB,WAAAA,IAACH,MAAAA,KAAW,CAACS,KAAM,GAAIC,YAAY,OAAOC,MAAOd,IAAYD,EAAU,QAAU,eAAiBX,EAASE,SACxGD,MAIT,CAEA,SAAS0B,SAAS7B,GAChB,OAAOoB,WAAAA,IAACrB,IAAG,CAACE,GAAG,WAAYD,GAC7B,CAEAD,IAAI+B,aAAe,CACjBC,QAAS,eACT9B,GAAI,SACJ+B,OAAQ,IAGVH,SAASC,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAGVjC,IAAIkC,MAAQJ,SAEZ9B,IAAImC,YAAc"}
|
package/components/Tag/Tag.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{Root,Text}from'./style.mjs';import{jsxs,jsx}from'react/jsx-runtime';function Tag(e){const{as:t,textProps:n,content:i,children:a,htmlFor:o,id:s,name:l,inputType:d,value:r,disabled:p,onChange:u,onClick:c,inverse:h,checked:g,...m}=e;return jsxs(Root,{as:t==='input'?'label':t,inverse:h,checked:g,disabled:p,onClick:t!=='input'?c:void 0,...t==='label'?{htmlFor:o}:{},...t==='button'?{type:'button'}:{},...t==='input'?{htmlFor:s||l}:{},...m,children:[t==='input'?jsx("input",{id:s||l,name:l,type:d||'checkbox',tabIndex:0,onChange:e=>(e.persist(),u&&u(e)),onClick:e=>(e.persist(),c&&c(e)),defaultChecked:e.defaultChecked,checked:g,value:r,disabled:p,hidden:!0}):null,a,jsx(Text,{size:14,forwardedAs:"span",color:g&&!h?'white':'mineShaft',...n,children:i})]})}function TagInput(e){return jsx(Tag,{as:"input",...e})}Tag.defaultProps={display:'inline-block',as:'button',height:40},TagInput.defaultProps={display:'inline-block',height:40},Tag.Input=TagInput,Tag.displayName='Tag';export{Tag};
|
|
2
2
|
//# sourceMappingURL=Tag.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { ResponsiveNamedProperty } from 'mixins/responsive-property'\nimport type { ColorProperty } from 'mixins/color'\nimport type { DisplayProperty } from 'mixins/display'\nimport type { BaseProps } from 'shared/interfaces'\nimport type { TextProps } from 'components/Text'\nimport
|
|
1
|
+
{"version":3,"file":"Tag.mjs","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { ResponsiveNamedProperty } from 'mixins/responsive-property'\nimport type { ColorProperty } from 'mixins/color'\nimport type { DisplayProperty } from 'mixins/display'\nimport type { BaseProps } from 'shared/interfaces'\nimport type { TextProps } from 'components/Text'\nimport * as Styled from './style'\n\nexport interface TagProps\n extends BaseProps,\n DisplayProperty,\n ColorProperty,\n ResponsiveNamedProperty<'height'>,\n ResponsiveNamedProperty<'width'> {\n as?: 'button' | 'div' | 'input' | 'label'\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Input type\n */\n inputType?: 'checkbox' | 'radio'\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * On click handler\n */\n onClick?(_e: React.MouseEvent<HTMLInputElement>): void\n /**\n * Whether or not Radio is checked\n */\n defaultChecked?: boolean\n /**\n * Value\n */\n value?: string | number\n /** Children are placed before Text */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /** Inner Text content */\n content?: React.ReactNode\n /** Inner Text component props */\n textProps?: TextProps\n /** Checked state */\n checked?: boolean\n /** Disabled state */\n disabled?: boolean\n /** Error state */\n error?: boolean\n /** If as = 'label' could provide for */\n htmlFor?: string\n /**\n * inverse\n */\n inverse?: boolean\n /**\n * Size\n */\n size?: 'l' | 'm' | 's' | 'xs'\n}\n\nfunction Tag(props: typeof Tag.defaultProps & TagProps) {\n const {\n as,\n textProps,\n content,\n children,\n htmlFor,\n id,\n name,\n inputType,\n value,\n disabled,\n onChange,\n onClick,\n inverse,\n checked,\n ...restProps\n } = props\n\n const buttonProps = as === 'button' ? { type: 'button' } : {}\n const labelProps = as === 'label' ? { htmlFor } : {}\n const inputProps = as === 'input' ? { htmlFor: id || name } : {}\n\n return (\n <Styled.Root\n as={as === 'input' ? 'label' : as}\n inverse={inverse}\n checked={checked}\n disabled={disabled}\n onClick={as !== 'input' ? onClick : undefined}\n {...labelProps}\n {...buttonProps}\n {...inputProps}\n {...restProps}\n >\n {as === 'input' ? (\n <input\n id={id || name}\n name={name}\n type={inputType || 'checkbox'}\n tabIndex={0}\n onChange={(e) => {\n e.persist()\n\n return onChange && onChange(e)\n }}\n onClick={(e) => {\n e.persist()\n\n return onClick && onClick(e)\n }}\n defaultChecked={props.defaultChecked}\n checked={checked}\n value={value}\n disabled={disabled}\n hidden\n />\n ) : null}\n {children}\n <Styled.Text size={14} forwardedAs='span' color={checked && !inverse ? 'white' : 'mineShaft'} {...textProps}>\n {content}\n </Styled.Text>\n </Styled.Root>\n )\n}\n\nfunction TagInput(props: typeof TagInput.defaultProps & TagProps) {\n return <Tag as='input' {...props} />\n}\n\nTag.defaultProps = {\n display: 'inline-block',\n as: 'button',\n height: 40,\n}\n\nTagInput.defaultProps = {\n display: 'inline-block',\n height: 40,\n}\n\nTag.Input = TagInput\n\nTag.displayName = 'Tag'\n\nexport { Tag }\n"],"names":["Tag","props","as","textProps","content","children","htmlFor","id","name","inputType","value","disabled","onChange","onClick","inverse","checked","restProps","_jsxs","Styled","undefined","type","_jsx","tabIndex","e","persist","defaultChecked","hidden","size","forwardedAs","color","TagInput","defaultProps","display","height","Input","displayName"],"mappings":"2EAqEA,SAASA,IAAIC,GACX,MAAMC,GACJA,EAAEC,UACFA,EAASC,QACTA,EAAOC,SACPA,EAAQC,QACRA,EAAOC,GACPA,EAAEC,KACFA,EAAIC,UACJA,EAASC,MACTA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,QACPA,EAAOC,QACPA,KACGC,GACDf,EAMJ,OACEgB,KAACC,KAAW,CACVhB,GAAIA,IAAO,QAAU,QAAUA,EAC/BY,QAASA,EACTC,QAASA,EACTJ,SAAUA,EACVE,QAASX,IAAO,QAAUW,OAAUM,KATrBjB,IAAO,QAAU,CAAEI,WAAY,CAAA,KAD9BJ,IAAO,SAAW,CAAEkB,KAAM,UAAa,CAAA,KAExClB,IAAO,QAAU,CAAEI,QAASC,GAAMC,GAAS,CAAA,KAYtDQ,EAASX,SAAA,CAEZH,IAAO,QACNmB,IAAA,QAAA,CACEd,GAAIA,GAAMC,EACVA,KAAMA,EACNY,KAAMX,GAAa,WACnBa,SAAU,EACVV,SAAWW,IACTA,EAAEC,UAEKZ,GAAYA,EAASW,IAE9BV,QAAUU,IACRA,EAAEC,UAEKX,GAAWA,EAAQU,IAE5BE,eAAgBxB,EAAMwB,eACtBV,QAASA,EACTL,MAAOA,EACPC,SAAUA,EACVe,QAAM,IAEN,KACHrB,EACDgB,IAACH,KAAW,CAACS,KAAM,GAAIC,YAAY,OAAOC,MAAOd,IAAYD,EAAU,QAAU,eAAiBX,EAASE,SACxGD,MAIT,CAEA,SAAS0B,SAAS7B,GAChB,OAAOoB,IAACrB,IAAG,CAACE,GAAG,WAAYD,GAC7B,CAEAD,IAAI+B,aAAe,CACjBC,QAAS,eACT9B,GAAI,SACJ+B,OAAQ,IAGVH,SAASC,aAAe,CACtBC,QAAS,eACTC,OAAQ,IAGVjC,IAAIkC,MAAQJ,SAEZ9B,IAAImC,YAAc"}
|