@foxford/ui 2.21.1 → 2.21.2
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/Anchor/style.js +1 -1
- package/components/Anchor/style.js.map +1 -1
- package/components/Arrow/Arrow.js +1 -1
- package/components/Arrow/Arrow.js.map +1 -1
- package/components/Arrow/constants.js +1 -1
- package/components/Arrow/constants.js.map +1 -1
- package/components/Arrow/default-constants.js +2 -0
- package/components/Arrow/default-constants.js.map +1 -0
- package/components/Arrow/style.js +1 -1
- package/components/Arrow/style.js.map +1 -1
- package/components/ArrowBadge/ArrowBadge.js +1 -1
- package/components/ArrowBadge/ArrowBadge.js.map +1 -1
- package/components/ArrowBadge/style.js +1 -1
- package/components/ArrowBadge/style.js.map +1 -1
- package/components/Badge/style.js +1 -1
- package/components/Badge/style.js.map +1 -1
- package/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/constants.js +1 -1
- package/components/Button/constants.js.map +1 -1
- package/components/Button/default-constants.js +2 -0
- package/components/Button/default-constants.js.map +1 -0
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/FormInputLabel/FormInputLabel.js +1 -1
- package/components/FormInputLabel/FormInputLabel.js.map +1 -1
- package/components/FormInputLabel/style.js +1 -1
- package/components/FormInputLabel/style.js.map +1 -1
- package/components/FormLabel/FormLabel.js +1 -1
- package/components/FormLabel/FormLabel.js.map +1 -1
- package/components/FormLabel/style.js +1 -1
- package/components/FormLabel/style.js.map +1 -1
- package/components/Input/Input.js +1 -1
- package/components/Input/Input.js.map +1 -1
- package/components/Input/style.js +1 -1
- package/components/Input/style.js.map +1 -1
- package/components/InputCheckbox/InputCheckbox.js +1 -1
- package/components/InputCheckbox/InputCheckbox.js.map +1 -1
- package/components/InputCheckbox/constants.js +1 -1
- package/components/InputCheckbox/constants.js.map +1 -1
- package/components/InputCheckbox/style.js +1 -1
- package/components/InputCheckbox/style.js.map +1 -1
- package/components/InputRadio/InputRadio.js +1 -1
- package/components/InputRadio/InputRadio.js.map +1 -1
- package/components/InputRadio/style.js +1 -1
- package/components/InputRadio/style.js.map +1 -1
- package/components/Tab/Tab.js +1 -1
- package/components/Tab/Tab.js.map +1 -1
- package/components/Tab/constants.js +1 -1
- package/components/Tab/constants.js.map +1 -1
- package/components/Tab/default-constants.js +2 -0
- package/components/Tab/default-constants.js.map +1 -0
- package/components/Tab/style.js +1 -1
- package/components/Tab/style.js.map +1 -1
- package/components/Text/Text.js +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text/constants.js +1 -1
- package/components/Text/constants.js.map +1 -1
- package/components/Text/default-constants.js +2 -0
- package/components/Text/default-constants.js.map +1 -0
- package/components/Text/style.js +1 -1
- package/components/Text/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 +252 -200
- package/hocs/withMergedProps.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/shared/regexp.js +1 -1
- package/shared/regexp.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { Text } from 'components/Text'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'active',\n 'error',\n 'success',\n 'disabled',\n 'onColored',\n 'labelPosition',\n 'inline',\n ].includes(propKey)\n)\n\nexport const Label = styled(Text).attrs({ forwardedAs: 'label' })`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: 1;\n background-image: linear-gradient(90deg, transparent, currentColor);\n transition-property: color, opacity;\n }\n`\n\nexport const Caption = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n white-space: nowrap;\n cursor: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform;\n`\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:focus-within {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Label}::after {\n color: ${palette.backgroundColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n })\n .attrs<StyledFormInputLabelProps>(<Required<Pick<StyledFormInputLabelProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.25em 0.6em 0.25em 1em',\n minHeight: '3em',\n borderRadius: '0.6em',\n }),\n })`\n ${(props) => {\n let transform = props.active ? 'scale(0.7) translateX(-21.5%) translateY(-145%)' : 'translateY(-50%)'\n let opacity = '1'\n let zIndex = 'auto'\n\n if (props.labelPosition === 'top') {\n transform = 'scale(0.7) translateX(-21.5%) translateY(-145%)'\n }\n if (props.labelPosition === 'center') {\n transform = `translateY(-50%)`\n opacity = props.active ? '0' : '1'\n zIndex = props.active ? '-1' : 'auto'\n }\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ${Label}::after,\n & > ${Label} > ${Caption} {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ${Label} > ${Caption} {\n transform: ${transform};\n opacity: ${opacity};\n z-index: ${zIndex};\n }\n\n &:focus-within {\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 &:hover > ${Label}::after,\n &:focus-within > ${Label}::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","Label","styled","Text","attrs","forwardedAs","withConfig","componentId","Caption","span","template","palette","concat","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","onColored","disabled","css","props","_objectSpread","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Root","div","shouldForwardProp","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","minHeight","borderRadius","_props$cursor","transform","active","opacity","zIndex","labelPosition","inline","cursor","white","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/FormInputLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { Text } from 'components/Text'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormInputLabelProps, FormInputLabelPalette } from './types'\n\nconst shouldForwardFormInputLabelProp = createShouldForwardProp(\n (propKey) =>\n ![\n 'primary',\n 'secondary',\n 'active',\n 'error',\n 'success',\n 'disabled',\n 'onColored',\n 'labelPosition',\n 'inline',\n ].includes(propKey)\n)\n\nexport const Label = styled(Text).attrs({ forwardedAs: 'label' })`\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-grow: 1;\n align-self: stretch;\n cursor: inherit;\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 40px;\n height: 100%;\n pointer-events: none;\n opacity: 1;\n background-image: linear-gradient(90deg, transparent, currentColor);\n transition-property: color, opacity;\n }\n`\n\nexport const Caption = styled.span`\n box-sizing: border-box;\n position: absolute;\n left: 0;\n top: 50%;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n pointer-events: none;\n transition-property: transform;\n`\n\nconst template = (palette: FormInputLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n &:focus-within {\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n }\n & > ${Label}::after {\n color: ${palette.backgroundColor};\n }\n`\n\nconst COLOR_SCHEMA = {\n onColored: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n secondary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n primary: {\n disabled: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors.transparent,\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors.transparent,\n ...props.palette,\n })}\n `,\n error: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-bg-success-500'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-bg-success-500'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormInputLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-secondary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-secondary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(4).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.div\n .withConfig<StyledFormInputLabelProps>({\n shouldForwardProp: shouldForwardFormInputLabelProp,\n })\n .attrs<StyledFormInputLabelProps>(<Required<Pick<StyledFormInputLabelProps, 'dynamicSizeDeclaration'>>>{\n dynamicSizeDeclaration: (size, sizeUnits) => ({\n fontSize: typeof size === 'string' ? size : `${size}${sizeUnits}`,\n padding: '0.25em 0.6em 0.25em 1em',\n minHeight: '3em',\n borderRadius: '0.6em',\n }),\n })`\n ${(props) => {\n let transform = props.active ? 'scale(0.7) translateX(-21.5%) translateY(-145%)' : 'translateY(-50%)'\n let opacity = '1'\n let zIndex = 'auto'\n\n if (props.labelPosition === 'top') {\n transform = 'scale(0.7) translateX(-21.5%) translateY(-145%)'\n }\n if (props.labelPosition === 'center') {\n transform = `translateY(-50%)`\n opacity = props.active ? '0' : '1'\n zIndex = props.active ? '-1' : 'auto'\n }\n\n return `\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n min-width: min-content;\n border: 1px solid transparent;\n transition-property: background-color;\n\n &,\n & > ${Label}::after,\n & > ${Label} > ${Caption} {\n transition-duration: 150ms;\n transition-timing-function: ease;\n }\n\n & > ${Label} > ${Caption} {\n transform: ${transform};\n opacity: ${opacity};\n z-index: ${zIndex};\n }\n\n &:focus-within {\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 &:hover > ${Label}::after,\n &:focus-within > ${Label}::after {\n opacity: 0;\n }\n `\n }}\n ${(props) => {\n let schema = COLOR_SCHEMA.primary\n\n if (props.secondary) schema = COLOR_SCHEMA.secondary\n if (props.onColored) schema = COLOR_SCHEMA.onColored\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormInputLabelProp","createShouldForwardProp","propKey","includes","Label","styled","Text","attrs","forwardedAs","withConfig","componentId","Caption","span","template","palette","concat","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","onColored","disabled","css","props","_objectSpread","theme","colors","transparent","error","success","default","tinycolor","darken","toString","secondary","primary","Root","div","shouldForwardProp","dynamicSizeDeclaration","size","sizeUnits","fontSize","padding","minHeight","borderRadius","transform","active","opacity","zIndex","labelPosition","inline","white","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as s,cloneElement as o}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as t}from'../Text/Text.js';import{Root as a}from'./style.js';import{SIZES as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as s,cloneElement as o}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as t}from'../Text/Text.js';import{Root as a}from'./style.js';import{SIZES as l}from'./constants.js';import{jsxs as c,jsx as p}from'react/jsx-runtime';var m=["size","textProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","error","success","checked","onColored","children","control","label"];var n='FormLabel';var z=i(s(((s,i)=>{var{size:l="m",textProps:n={},sizeXXS:z,sizeXS:d,sizeS:b,sizeM:f,sizeL:h,sizeXL:S,disabled:X,error:j,success:u,checked:L,onColored:x,children:v,control:M,label:y}=s,P=r(s,m);var C={size:l,sizeXXS:z,sizeXS:d,sizeS:b,sizeM:f,sizeL:h,sizeXL:S};var E={disabled:X,error:j,success:u,checked:L,onColored:x};var N='object'==typeof M&&'object'==typeof M.props&&null!==M.props?M.props:{};return c(a,e(e(e(e({},P),C),E),{},{ref:i,children:['function'==typeof M?M(e(e({},C),E)):o(M,e(e(e({},C),E),N)),p(t,e(e({as:"span",appearance:"body",size:"inherit",color:"inherit",marginLeft:8},n),{},{children:null!=y?y:v}))]}))})),{displayName:"FormLabel",sizes:l});export{n as COMPONENT_NAME,z as FormLabel};
|
|
2
2
|
//# sourceMappingURL=FormLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import { forwardRef, cloneElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport * as Styled from './style'\nimport { SIZES } from './constants'\nimport type { FormLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormLabel'\n\n/**\n *\n * Component accepts all \\<label\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [FormLabelProps](https://github.com/foxford/ui/blob/master/src/components/FormLabel/types.ts)\n */\nconst FormLabel: React.ForwardRefExoticComponent<FormLabelProps> = withMergedProps<FormLabelProps, HTMLLabelElement>(\n forwardRef(\n (\n {\n size = 'm',\n textProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n disabled,\n error,\n success,\n checked,\n onColored,\n
|
|
1
|
+
{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import { forwardRef, cloneElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport * as Styled from './style'\nimport { SIZES } from './constants'\nimport type { FormLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormLabel'\n\n/**\n *\n * Component accepts all \\<label\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [FormLabelProps](https://github.com/foxford/ui/blob/master/src/components/FormLabel/types.ts)\n */\nconst FormLabel: React.ForwardRefExoticComponent<FormLabelProps> = withMergedProps<FormLabelProps, HTMLLabelElement>(\n forwardRef(\n (\n {\n size = 'm',\n textProps = {},\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n disabled,\n error,\n success,\n checked,\n onColored,\n children,\n control,\n label,\n ...props\n },\n ref\n ) => {\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const stateProps = {\n disabled,\n error,\n success,\n checked,\n onColored,\n }\n\n const elementProps =\n typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n return (\n <Styled.Root {...props} {...sizeProps} {...stateProps} ref={ref}>\n {typeof control === 'function'\n ? control({\n ...sizeProps,\n ...stateProps,\n })\n : cloneElement(control, {\n ...sizeProps,\n ...stateProps,\n ...elementProps,\n })}\n <Text as='span' appearance='body' size='inherit' color='inherit' marginLeft={8} {...textProps}>\n {label ?? children}\n </Text>\n </Styled.Root>\n )\n }\n ),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { FormLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormLabel","withMergedProps","forwardRef","_ref","ref","size","textProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","error","success","checked","onColored","children","control","label","props","_objectWithoutProperties","_excluded","sizeProps","stateProps","elementProps","_jsxs","Styled.Root","cloneElement","_jsx","Text","_objectSpread","as","appearance","color","marginLeft","displayName","sizes","SIZES"],"mappings":"wiBAOMA,IAAAA,EAAiB,YAYjBC,IAAAA,EAA6DC,EACjEC,GAAAA,CACEC,EAoBEC,KACG,IApBHC,KACEA,EAAO,IADTC,UAEEA,EAAY,GAFdC,QAGEA,EAHFC,OAIEA,EAJFC,MAKEA,EALFC,MAMEA,EANFC,MAOEA,EAPFC,OAQEA,EARFC,SASEA,EATFC,MAUEA,EAVFC,QAWEA,EAXFC,QAYEA,EAZFC,UAaEA,EAbFC,SAcEA,EAdFC,QAeEA,EAfFC,MAgBEA,GAICjB,EAHEkB,EAGFC,EAAAnB,EAAAoB,GACH,IAAMC,EAAY,CAChBnB,KAAAA,EACAE,QAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,OAAAA,GAGF,IAAMa,EAAa,CACjBZ,SAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,UAAAA,GAGF,IAAMS,EACe,iBAAZP,GAAiD,iBAAlBA,EAAQE,OAAwC,OAAlBF,EAAQE,MAAiBF,EAAQE,MAAQ,GAE/G,OACEM,EAACC,aAAgBP,GAAWG,GAAeC,GAA3C,GAAA,CAAuDrB,IAAKA,EAA5Dc,SACG,CAAmB,mBAAZC,EACJA,EACKK,EAAAA,EAAAA,GAAAA,GACAC,IAELI,EAAaV,EACRK,EAAAA,EAAAA,EAAAA,GAAAA,GACAC,GACAC,IAETI,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAG,OAAOC,WAAW,OAAO7B,KAAK,UAAU8B,MAAM,UAAUC,WAAY,GAAO9B,GAApF,GAAA,CAAAY,SACGE,MAAAA,EAAAA,EAASF,YAMpB,CACEmB,YA7EmB,YA8EnBC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import l from'tinycolor2';import{createShouldForwardProp as n}from'../../shared/utils/style.js';import{responsiveSize as c}from'../../mixins/responsive-size.js';import{responsiveMargin as t}from'../../mixins/responsive-margin.js';var a=n((o=>!['inline','clear','disabled','error','success','checked','onColored'].includes(o)));var s=o=>"\n color: ".concat(o.color,";\n background-color: ").concat(o.backgroundColor,";\n border-color: ").concat(o.borderColor,";\n &:hover {\n color: ").concat(o.colorHover,";\n background-color: ").concat(o.backgroundColorHover,";\n border-color: ").concat(o.borderColorHover,";\n }\n");var d={default:{disabled:e(["",""],(r=>s(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors['border-disabled'],colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors['border-disabled']},r.palette)))),error:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-success']},r.palette)))),checked:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100'],borderColor:r.theme.colors['border-brand-primary-active'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100'],borderColorHover:r.theme.colors['border-brand-primary-active']},r.palette)))),default:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:l(r.theme.colors['bg-onmain-secondary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},onColored:{disabled:e(["",""],(r=>s(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-onmain-secondary'],borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette)))),error:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-error-200'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-error-200'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-success-200'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-success-200'],borderColorHover:r.theme.colors['alert-success']},r.palette)))),checked:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-onmain-primary'],borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette)))),default:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:l(r.theme.colors['bg-onmain-secondary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))}};var m=r.label.withConfig({shouldForwardProp:a}).withConfig({componentId:"fox-ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>"\n box-sizing: border-box;\n isolation: isolate;\n display: ".concat(o.inline?'inline-flex':'flex',";\n cursor: ").concat(o.disabled?'not-allowed':'pointer',";\n align-items: center;\n border-radius: 8px;\n padding: 12px 16px 12px 12px;\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n ")),(o=>{if(o.clear)return'';var r=o.onColored?d.onColored:d.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),c,t);export{m as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormLabelProps, FormLabelPalette } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors['border-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors['border-brand-primary-active'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100'],\n borderColorHover: props.theme.colors['border-brand-primary-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.cursor ? props.cursor : 'pointer'};\n align-items: center;\n border-radius: 8px;\n padding: 12px 16px 12px 12px;\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `}\n ${(props) => {\n if (props.clear) return ''\n\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n if (props.checked) return schema.checked\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","_objectSpread","theme","colors","error","success","checked","tinycolor","darken","toString","onColored","Root","styled","label","withConfig","shouldForwardProp","componentId","inline","cursor","clear","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormLabelProps, FormLabelPalette } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n &:hover {\n color: ${palette.colorHover};\n background-color: ${palette.backgroundColorHover};\n border-color: ${palette.borderColorHover};\n }\n`\n\nconst COLOR_SCHEMA = {\n default: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-disabled-large'],\n borderColor: props.theme.colors['border-disabled'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-disabled-large'],\n borderColorHover: props.theme.colors['border-disabled'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-100'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-100'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-brand-primary-100'],\n borderColor: props.theme.colors['border-brand-primary-active'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-brand-primary-100'],\n borderColorHover: props.theme.colors['border-brand-primary-active'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n onColored: {\n disabled: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-disabled'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-disabled'],\n backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n error: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-error-200'],\n borderColor: props.theme.colors['alert-bg-error-500'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n borderColorHover: props.theme.colors['alert-bg-error-500'],\n ...props.palette,\n })}\n `,\n success: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['alert-bg-success-200'],\n borderColor: props.theme.colors['alert-success'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n borderColorHover: props.theme.colors['alert-success'],\n ...props.palette,\n })}\n `,\n checked: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-primary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n default: css<StyledFormLabelProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.theme.colors['bg-onmain-secondary'],\n borderColor: props.theme.colors['border-onmain-default-large'],\n colorHover: props.theme.colors['content-onmain-primary'],\n backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n borderColorHover: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n `,\n },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n shouldForwardProp: shouldForwardFormLabelProp,\n})`\n ${(props) => `\n box-sizing: border-box;\n isolation: isolate;\n display: ${props.inline ? 'inline-flex' : 'flex'};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n align-items: center;\n border-radius: 8px;\n padding: 12px 16px 12px 12px;\n border: 1px solid transparent;\n background-color: transparent;\n transition-property: background-color;\n transition-duration: 150ms;\n transition-timing-function: ease-in;\n `}\n ${(props) => {\n if (props.clear) return ''\n\n const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n if (props.disabled) return schema.disabled\n if (props.error) return schema.error\n if (props.success) return schema.success\n if (props.checked) return schema.checked\n\n return schema.default\n }}\n\n ${responsiveSize}\n ${responsiveMargin}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","_objectSpread","theme","colors","error","success","checked","tinycolor","darken","toString","onColored","Root","styled","label","withConfig","shouldForwardProp","componentId","inline","concat","clear","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import t from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as i,useRef as a,useImperativeHandle as e,useState as n}from'react';import{useTheme as o}from'styled-components';import{withMergedProps as m}from'../../hocs/withMergedProps.js';import{FormInputLabel as s}from'../FormInputLabel/FormInputLabel.js';import{SIZES as l}from'../FormInputLabel/constants.js';import{Icon as g}from'../Icon/Icon.js';import'../Icon/icons.js';import{InputPhone as p}from'../Input.Phone/Input.Phone.js';import{Spacer as u}from'../Spacer/Spacer.js';import c from'./images/minus.module.svg.js';import d from'./images/plus.module.svg.js';import{Root as X,Input as h,InputControl as f}from'./style.js';import{jsx as S,jsxs as L,Fragment as v}from'react/jsx-runtime';var b=["size","mask","rounded","color","placeholderColor","width","type","labelPosition","textProps","iconProps","controls","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","marginUnits","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","onColored","fluid","disabled","inline","inputRef"];var y='Input';var z=Object.assign(m(i(((i,m)=>{var l,p,y,z;var T=o();var{size:R="m",mask:w="",rounded:B=!0,color:M="mineShaft",placeholderColor:P="silver",width:C=T.defaultInputControlsWidth,type:I="text",labelPosition:x="dynamic",textProps:j={},iconProps:F={},controls:k={},preset:N,className:A,style:E,sizeXXS:U,sizeXS:V,sizeS:O,sizeM:W,sizeL:D,sizeXL:H,sizeUnits:Z,sizes:_,margin:q,marginXXS:G,marginXS:J,marginS:K,marginM:Q,marginL:Y,marginXL:$,marginTop:rr,marginTopXXS:tr,marginTopXS:ir,marginTopS:ar,marginTopM:er,marginTopL:nr,marginTopXL:or,marginRight:mr,marginRightXXS:sr,marginRightXS:lr,marginRightS:gr,marginRightM:pr,marginRightL:ur,marginRightXL:cr,marginBottom:dr,marginBottomXXS:Xr,marginBottomXS:hr,marginBottomS:fr,marginBottomM:Sr,marginBottomL:Lr,marginBottomXL:vr,marginLeft:br,marginLeftXXS:yr,marginLeftXS:zr,marginLeftS:Tr,marginLeftM:Rr,marginLeftL:wr,marginLeftXL:Br,marginUnits:Mr,palette:Pr,widthXXS:Cr,widthXS:Ir,widthS:xr,widthM:jr,widthL:Fr,widthXL:kr,error:Nr,success:Ar,label:Er,icon:Ur,text:Vr,primary:Or,secondary:Wr,onColored:Dr,fluid:Hr,disabled:Zr,inline:_r,inputRef:qr}=i,Gr=t(i,b);var{icon:Jr,iconProps:Kr={},buttonProps:Qr={}}=null!==(l=k.additional)&&void 0!==l?l:{};var{icon:Yr,iconProps:$r={},buttonProps:rt=[]}=null!==(p=k.number)&&void 0!==p?p:{};var[tt,at]=Array.isArray(Yr)?Yr:[Yr];var et=null!==(y=Array.isArray(rt)?rt[0]:rt)&&void 0!==y?y:{};var nt=null!==(z=Array.isArray(rt)?rt[1]:{})&&void 0!==z?z:{};var ot=a(null);e(m,(()=>ot.current),[]);var mt='string'==typeof Gr.value||'number'==typeof Gr.value||'string'==typeof Gr.defaultValue||'number'==typeof Gr.defaultValue;var[st,lt]=n(mt);var[gt,pt]=n(mt);var[ut,ct]=n((()=>{if('number'!==I||void 0===Gr.min)return!1;var{value:r=1/0,defaultValue:t=1/0}=Gr;var i='number'==typeof r?r:parseFloat(r);var a='number'==typeof t?t:parseFloat(t);var e='number'==typeof Gr.min?Gr.min:parseFloat(Gr.min);return Math.min(i,a)<=e}));var[dt,Xt]=n((()=>{if('number'!==I||void 0===Gr.max)return!1;var{value:r=-1/0,defaultValue:t=-1/0}=Gr;var i='number'==typeof r?r:parseFloat(r);var a='number'==typeof t?t:parseFloat(t);var e='number'==typeof Gr.max?Gr.max:parseFloat(Gr.max);return Math.max(i,a)>=e}));return'brand'!==N?S(X,r(r({},Gr),{},{inputRef:null!=qr?qr:r=>{ot.current=r},className:A,style:E,size:'number'==typeof R?R:void 0,mask:w,rounded:B,color:M,placeholderColor:P,width:C,widthXXS:Cr,widthXS:Ir,widthS:xr,widthM:jr,widthL:Fr,widthXL:kr,error:Nr,type:I,fluid:Hr,disabled:Zr})):S(s,{className:A,style:E,size:R,sizeXXS:U,sizeXS:V,sizeS:O,sizeM:W,sizeL:D,sizeXL:H,sizeUnits:Z,sizes:_,margin:q,marginXXS:G,marginXS:J,marginS:K,marginM:Q,marginL:Y,marginXL:$,marginTop:rr,marginTopXXS:tr,marginTopXS:ir,marginTopS:ar,marginTopM:er,marginTopL:nr,marginTopXL:or,marginRight:mr,marginRightXXS:sr,marginRightXS:lr,marginRightS:gr,marginRightM:pr,marginRightL:ur,marginRightXL:cr,marginBottom:dr,marginBottomXXS:Xr,marginBottomXS:hr,marginBottomS:fr,marginBottomM:Sr,marginBottomL:Lr,marginBottomXL:vr,marginLeft:br,marginLeftXXS:yr,marginLeftXS:zr,marginLeftS:Tr,marginLeftM:Rr,marginLeftL:wr,marginLeftXL:Br,marginUnits:Mr,palette:Pr,error:Nr,success:Ar,label:Er,labelPosition:x,icon:Ur,text:Vr,primary:Or,secondary:Wr,onColored:Dr,disabled:Zr,inline:_r,active:st,textProps:j,iconProps:r({size:24,color:Zr?'content-disabled':'content-onmain-tertiary'},F),onClick:()=>{ot.current&&ot.current.focus()},onFocus:r=>{r.target!==r.currentTarget&<(!0)},onBlur:r=>{r.target===r.currentTarget||gt||lt(!1)},input:S(h,r(r({},Gr),{},{inputRef:r=>{ot.current=r},mask:w,palette:Pr,type:I,label:Er,labelPosition:x,disabled:Zr,active:st,onChange:r=>{if(Gr.onChange&&Gr.onChange(r),'number'===I){var t=parseFloat(r.currentTarget.value);var i=t<=parseFloat(r.currentTarget.min);var a=t>=parseFloat(r.currentTarget.max);ct(i),Xt(a),(i||a)&&r.currentTarget.focus()}},onBlur:r=>{r.stopPropagation(),Gr.onBlur&&Gr.onBlur(r),pt(Boolean(r.currentTarget.value)),lt(Boolean(r.currentTarget.value))}})),controls:Jr||'number'===I?L(v,{children:[Jr&&S(f,r(r({},Qr),{},{type:"button",palette:Pr,disabled:Zr,onClick:r=>{r.stopPropagation(),Qr.onClick&&Qr.onClick(r)},children:S(g,r({icon:Jr,as:"span",size:24,color:"inherit"},Kr))})),'number'===I&&L(u,{display:"flex",marginLeft:4,children:[S(f,r(r({},et),{},{type:"button",palette:Pr,disabled:Zr||ut,onClick:r=>{r.stopPropagation(),et.onClick&&et.onClick(r);try{if(ot.current){var t=ot.current.value;if(ot.current.stepDown(),t!==ot.current.value){var i=new Event('input',{bubbles:!0});ot.current.dispatchEvent(i)}}}catch(r){console.error(r)}},children:S(g,r({icon:null!=tt?tt:S(c,{}),as:"span",size:24,color:"inherit"},$r))})),S(f,r(r({},nt),{},{type:"button",palette:Pr,disabled:Zr||dt,onClick:r=>{r.stopPropagation(),nt.onClick&&nt.onClick(r);try{if(ot.current){var t=ot.current.value;if(ot.current.stepUp(),t!==ot.current.value){var i=new Event('input',{bubbles:!0});ot.current.dispatchEvent(i)}}}catch(r){console.error(r)}},children:S(g,r({icon:null!=at?at:S(d,{}),as:"span",size:24,color:"inherit"},$r))}))]})]}):void 0})})),{sizes:l,displayName:"Input"}),{Phone:p});export{y as COMPONENT_NAME,z as Input};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { Icon } from 'components/Icon'\nimport { InputPhone } from 'components/Input.Phone'\nimport { Spacer } from 'components/Spacer'\nimport Minus from './images/minus.module.svg'\nimport Plus from './images/plus.module.svg'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Component accepts all \\<input\\> attributes and \"react-input-mask\" props.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to \\<input\\>.\n *\n * See full [InputProps](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts)\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n mask = '',\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n controls = {},\n preset,\n className,\n style,\n cursor,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n marginUnits,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n primary,\n secondary,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const {\n icon: additionalControlIcon,\n iconProps: additionalControlIconProps = {},\n buttonProps: additionalControlButtonProps = {},\n } = controls.additional ?? {}\n\n const {\n icon: numberControlIcon,\n iconProps: numberControlIconProps = {},\n buttonProps: numberControlButtonProps = [],\n } = controls.number ?? {}\n\n const [minus, plus] = Array.isArray(numberControlIcon) ? numberControlIcon : [numberControlIcon]\n\n const minusButtonProps =\n (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[0] : numberControlButtonProps) ?? {}\n\n const plusButtonProps = (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[1] : {}) ?? {}\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const hasInitValue =\n typeof props.value === 'string' ||\n typeof props.value === 'number' ||\n typeof props.defaultValue === 'string' ||\n typeof props.defaultValue === 'number'\n\n const [active, setActive] = useState(hasInitValue)\n const [hasValue, setHasValue] = useState(hasInitValue)\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n mask={mask}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n className={className}\n style={style}\n cursor={cursor}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n marginUnits={marginUnits}\n palette={palette}\n error={error}\n success={success}\n label={label}\n labelPosition={labelPosition}\n icon={icon}\n text={text}\n primary={primary}\n secondary={secondary}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={active}\n textProps={textProps}\n iconProps={{\n size: 24,\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setActive(true)\n }\n }}\n onBlur={(evt) => {\n if (evt.target !== evt.currentTarget && !hasValue) {\n setActive(false)\n }\n }}\n input={\n <Styled.Input\n {...inputProps}\n inputRef={(input) => {\n ref.current = input\n }}\n mask={mask}\n palette={palette}\n type={type}\n label={label}\n labelPosition={labelPosition}\n disabled={disabled}\n active={active}\n cursor={cursor}\n onBlur={(evt) => {\n evt.stopPropagation()\n if (inputProps.onBlur) {\n inputProps.onBlur(evt)\n }\n\n setHasValue(Boolean(evt.currentTarget.value))\n setActive(Boolean(evt.currentTarget.value))\n }}\n />\n }\n controls={\n additionalControlIcon || type === 'number' ? (\n <>\n {additionalControlIcon && (\n <Styled.InputControl\n {...additionalControlButtonProps}\n type='button'\n palette={palette}\n disabled={disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (additionalControlButtonProps.onClick) {\n additionalControlButtonProps.onClick(evt)\n }\n }}\n >\n <Icon\n icon={additionalControlIcon}\n as='span'\n size={24}\n color='inherit'\n {...additionalControlIconProps}\n />\n </Styled.InputControl>\n )}\n {type === 'number' && (\n <Spacer display='flex' marginLeft={4}>\n <Styled.InputControl\n {...minusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (minusButtonProps.onClick) {\n minusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n <Icon icon={minus ?? <Minus />} as='span' size={24} color='inherit' {...numberControlIconProps} />\n </Styled.InputControl>\n <Styled.InputControl\n {...plusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (plusButtonProps.onClick) {\n plusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n <Icon icon={plus ?? <Plus />} as='span' size={24} color='inherit' {...numberControlIconProps} />\n </Styled.InputControl>\n </Spacer>\n )}\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","_controls$additional","_controls$number","_ref","_ref2","theme","useTheme","size","mask","rounded","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","textProps","iconProps","controls","preset","className","style","cursor","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","marginUnits","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","onColored","fluid","disabled","inline","inputRef","inputProps","_excluded","additionalControlIcon","additionalControlIconProps","buttonProps","additionalControlButtonProps","additional","numberControlIcon","numberControlIconProps","numberControlButtonProps","number","minus","plus","Array","isArray","minusButtonProps","plusButtonProps","ref","useRef","useImperativeHandle","current","hasInitValue","value","defaultValue","active","setActive","useState","hasValue","setHasValue","_jsx","Styled.Root","input","undefined","FormInputLabel","_objectSpread","onClick","focus","onFocus","evt","target","currentTarget","onBlur","Styled.Input","stopPropagation","Boolean","_jsxs","_Fragment","children","Styled.InputControl","Icon","as","Spacer","display","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","Minus","stepUp","Plus","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useState, useImperativeHandle, useRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { FormInputLabel, SIZES } from 'components/FormInputLabel'\nimport { Icon } from 'components/Icon'\nimport { InputPhone } from 'components/Input.Phone'\nimport { Spacer } from 'components/Spacer'\nimport Minus from './images/minus.module.svg'\nimport Plus from './images/plus.module.svg'\nimport * as Styled from './style'\nimport type { InputProps } from './types'\n\nconst COMPONENT_NAME = 'Input'\n\n/**\n *\n * Component accepts all \\<input\\> attributes and \"react-input-mask\" props.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to \\<input\\>.\n *\n * See full [InputProps](https://github.com/foxford/ui/blob/master/src/components/Input/types.ts)\n */\nconst Input: React.ForwardRefExoticComponent<InputProps> & { Phone: typeof InputPhone } = Object.assign(\n withMergedProps<InputProps, HTMLInputElement>(\n forwardRef((props, forwardedRef) => {\n const theme = useTheme()\n\n const {\n size = 'm',\n mask = '',\n rounded = true,\n color = 'mineShaft',\n placeholderColor = 'silver',\n width = theme.defaultInputControlsWidth,\n type = 'text',\n labelPosition = 'dynamic',\n textProps = {},\n iconProps = {},\n controls = {},\n preset,\n className,\n style,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizeUnits,\n sizes,\n margin,\n marginXXS,\n marginXS,\n marginS,\n marginM,\n marginL,\n marginXL,\n marginTop,\n marginTopXXS,\n marginTopXS,\n marginTopS,\n marginTopM,\n marginTopL,\n marginTopXL,\n marginRight,\n marginRightXXS,\n marginRightXS,\n marginRightS,\n marginRightM,\n marginRightL,\n marginRightXL,\n marginBottom,\n marginBottomXXS,\n marginBottomXS,\n marginBottomS,\n marginBottomM,\n marginBottomL,\n marginBottomXL,\n marginLeft,\n marginLeftXXS,\n marginLeftXS,\n marginLeftS,\n marginLeftM,\n marginLeftL,\n marginLeftXL,\n marginUnits,\n palette,\n widthXXS,\n widthXS,\n widthS,\n widthM,\n widthL,\n widthXL,\n error,\n success,\n label,\n icon,\n text,\n primary,\n secondary,\n onColored,\n fluid,\n disabled,\n inline,\n inputRef,\n ...inputProps\n } = props\n\n const {\n icon: additionalControlIcon,\n iconProps: additionalControlIconProps = {},\n buttonProps: additionalControlButtonProps = {},\n } = controls.additional ?? {}\n\n const {\n icon: numberControlIcon,\n iconProps: numberControlIconProps = {},\n buttonProps: numberControlButtonProps = [],\n } = controls.number ?? {}\n\n const [minus, plus] = Array.isArray(numberControlIcon) ? numberControlIcon : [numberControlIcon]\n\n const minusButtonProps =\n (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[0] : numberControlButtonProps) ?? {}\n\n const plusButtonProps = (Array.isArray(numberControlButtonProps) ? numberControlButtonProps[1] : {}) ?? {}\n\n const ref = useRef<HTMLInputElement | null>(null)\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(forwardedRef, () => ref.current, [])\n\n const hasInitValue =\n typeof inputProps.value === 'string' ||\n typeof inputProps.value === 'number' ||\n typeof inputProps.defaultValue === 'string' ||\n typeof inputProps.defaultValue === 'number'\n\n const [active, setActive] = useState(hasInitValue)\n const [hasValue, setHasValue] = useState(hasInitValue)\n\n const [minusDisabled, setMinusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.min === undefined) return false\n\n const { value = Infinity, defaultValue = Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const minValue = typeof inputProps.min === 'number' ? inputProps.min : parseFloat(inputProps.min)\n\n return Math.min(initValue, initDefaultValue) <= minValue\n })\n\n const [plusDisabled, setPlusDisabled] = useState(() => {\n if (type !== 'number' || inputProps.max === undefined) return false\n\n const { value = -Infinity, defaultValue = -Infinity } = inputProps\n\n const initValue = typeof value === 'number' ? value : parseFloat(value)\n const initDefaultValue = typeof defaultValue === 'number' ? defaultValue : parseFloat(defaultValue)\n const maxValue = typeof inputProps.max === 'number' ? inputProps.max : parseFloat(inputProps.max)\n\n return Math.max(initValue, initDefaultValue) >= maxValue\n })\n\n if (preset !== 'brand') {\n return (\n <Styled.Root\n {...inputProps}\n inputRef={\n inputRef ??\n ((input) => {\n ref.current = input\n })\n }\n className={className}\n style={style}\n size={typeof size === 'number' ? size : undefined}\n mask={mask}\n rounded={rounded}\n color={color}\n placeholderColor={placeholderColor}\n width={width}\n widthXXS={widthXXS}\n widthXS={widthXS}\n widthS={widthS}\n widthM={widthM}\n widthL={widthL}\n widthXL={widthXL}\n error={error}\n type={type}\n fluid={fluid}\n disabled={disabled}\n />\n )\n }\n\n return (\n <FormInputLabel\n className={className}\n style={style}\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizeUnits={sizeUnits}\n sizes={sizes}\n margin={margin}\n marginXXS={marginXXS}\n marginXS={marginXS}\n marginS={marginS}\n marginM={marginM}\n marginL={marginL}\n marginXL={marginXL}\n marginTop={marginTop}\n marginTopXXS={marginTopXXS}\n marginTopXS={marginTopXS}\n marginTopS={marginTopS}\n marginTopM={marginTopM}\n marginTopL={marginTopL}\n marginTopXL={marginTopXL}\n marginRight={marginRight}\n marginRightXXS={marginRightXXS}\n marginRightXS={marginRightXS}\n marginRightS={marginRightS}\n marginRightM={marginRightM}\n marginRightL={marginRightL}\n marginRightXL={marginRightXL}\n marginBottom={marginBottom}\n marginBottomXXS={marginBottomXXS}\n marginBottomXS={marginBottomXS}\n marginBottomS={marginBottomS}\n marginBottomM={marginBottomM}\n marginBottomL={marginBottomL}\n marginBottomXL={marginBottomXL}\n marginLeft={marginLeft}\n marginLeftXXS={marginLeftXXS}\n marginLeftXS={marginLeftXS}\n marginLeftS={marginLeftS}\n marginLeftM={marginLeftM}\n marginLeftL={marginLeftL}\n marginLeftXL={marginLeftXL}\n marginUnits={marginUnits}\n palette={palette}\n error={error}\n success={success}\n label={label}\n labelPosition={labelPosition}\n icon={icon}\n text={text}\n primary={primary}\n secondary={secondary}\n onColored={onColored}\n disabled={disabled}\n inline={inline}\n active={active}\n textProps={textProps}\n iconProps={{\n size: 24,\n color: disabled ? 'content-disabled' : 'content-onmain-tertiary',\n ...iconProps,\n }}\n onClick={() => {\n if (ref.current) {\n ref.current.focus()\n }\n }}\n onFocus={(evt) => {\n if (evt.target !== evt.currentTarget) {\n setActive(true)\n }\n }}\n onBlur={(evt) => {\n if (evt.target !== evt.currentTarget && !hasValue) {\n setActive(false)\n }\n }}\n input={\n <Styled.Input\n {...inputProps}\n inputRef={(input) => {\n ref.current = input\n }}\n mask={mask}\n palette={palette}\n type={type}\n label={label}\n labelPosition={labelPosition}\n disabled={disabled}\n active={active}\n onChange={(evt) => {\n if (inputProps.onChange) {\n inputProps.onChange(evt)\n }\n\n if (type === 'number') {\n const currentValue = parseFloat(evt.currentTarget.value)\n\n const minValueReached = currentValue <= parseFloat(evt.currentTarget.min)\n const maxValueReached = currentValue >= parseFloat(evt.currentTarget.max)\n\n setMinusDisabled(minValueReached)\n setPlusDisabled(maxValueReached)\n\n if (minValueReached || maxValueReached) {\n evt.currentTarget.focus()\n }\n }\n }}\n onBlur={(evt) => {\n evt.stopPropagation()\n if (inputProps.onBlur) {\n inputProps.onBlur(evt)\n }\n\n setHasValue(Boolean(evt.currentTarget.value))\n setActive(Boolean(evt.currentTarget.value))\n }}\n />\n }\n controls={\n additionalControlIcon || type === 'number' ? (\n <>\n {additionalControlIcon && (\n <Styled.InputControl\n {...additionalControlButtonProps}\n type='button'\n palette={palette}\n disabled={disabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (additionalControlButtonProps.onClick) {\n additionalControlButtonProps.onClick(evt)\n }\n }}\n >\n <Icon\n icon={additionalControlIcon}\n as='span'\n size={24}\n color='inherit'\n {...additionalControlIconProps}\n />\n </Styled.InputControl>\n )}\n {type === 'number' && (\n <Spacer display='flex' marginLeft={4}>\n <Styled.InputControl\n {...minusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled || minusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (minusButtonProps.onClick) {\n minusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepDown()\n\n const decremented = ref.current.value\n if (prev !== decremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n <Icon icon={minus ?? <Minus />} as='span' size={24} color='inherit' {...numberControlIconProps} />\n </Styled.InputControl>\n <Styled.InputControl\n {...plusButtonProps}\n type='button'\n palette={palette}\n disabled={disabled || plusDisabled}\n onClick={(evt) => {\n evt.stopPropagation()\n if (plusButtonProps.onClick) {\n plusButtonProps.onClick(evt)\n }\n\n try {\n if (ref.current) {\n const prev = ref.current.value\n ref.current.stepUp()\n\n const incremented = ref.current.value\n if (prev !== incremented) {\n const event = new Event('input', { bubbles: true })\n ref.current.dispatchEvent(event)\n }\n }\n } catch (err) {\n // eslint-disable-next-line no-console\n console.error(err)\n }\n }}\n >\n <Icon icon={plus ?? <Plus />} as='span' size={24} color='inherit' {...numberControlIconProps} />\n </Styled.InputControl>\n </Spacer>\n )}\n </>\n ) : undefined\n }\n />\n )\n }),\n {\n sizes: SIZES,\n displayName: COMPONENT_NAME,\n }\n ),\n {\n Phone: InputPhone,\n }\n)\n\nexport { Input, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Input","Object","assign","withMergedProps","forwardRef","props","forwardedRef","_controls$additional","_controls$number","_ref","_ref2","theme","useTheme","size","mask","rounded","color","placeholderColor","width","defaultInputControlsWidth","type","labelPosition","textProps","iconProps","controls","preset","className","style","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizeUnits","sizes","margin","marginXXS","marginXS","marginS","marginM","marginL","marginXL","marginTop","marginTopXXS","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","marginRight","marginRightXXS","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","marginBottom","marginBottomXXS","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","marginLeft","marginLeftXXS","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","marginUnits","palette","widthXXS","widthXS","widthS","widthM","widthL","widthXL","error","success","label","icon","text","primary","secondary","onColored","fluid","disabled","inline","inputRef","inputProps","_excluded","additionalControlIcon","additionalControlIconProps","buttonProps","additionalControlButtonProps","additional","numberControlIcon","numberControlIconProps","numberControlButtonProps","number","minus","plus","Array","isArray","minusButtonProps","plusButtonProps","ref","useRef","useImperativeHandle","current","hasInitValue","value","defaultValue","active","setActive","useState","hasValue","setHasValue","minusDisabled","setMinusDisabled","undefined","min","Infinity","initValue","parseFloat","initDefaultValue","minValue","Math","plusDisabled","setPlusDisabled","max","maxValue","_jsx","Styled.Root","input","FormInputLabel","_objectSpread","onClick","focus","onFocus","evt","target","currentTarget","onBlur","Styled.Input","onChange","currentValue","minValueReached","maxValueReached","stopPropagation","Boolean","_jsxs","_Fragment","children","Styled.InputControl","Icon","as","Spacer","display","prev","stepDown","event","Event","bubbles","dispatchEvent","err","console","Minus","stepUp","Plus","SIZES","displayName","Phone","InputPhone"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as n}from'styled-components';import e from'react-input-mask';import t from'tinycolor2';import{color as l}from'../../mixins/color.js';import{property as a,responsiveNamedProperty as c}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'./helpers.js';import{focus as s}from'../../mixins/focus.js';var d=n(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>t(o.theme.colors.pomegranate).setAlpha(.1).toString()));var p=n(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);var u=n(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));var h=n(["border-radius:",";"],(o=>o.theme.borderRadius));var b=o=>n(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?l(o.color):null,o.placeholderColor?l(o.placeholderColor):null,u,o.disabled?p:null,o.rounded?h:null,o.width?a(i(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null,c({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:i}),o.fluid?n(["width:100%;"]):null,o.error?d:null);var m=r(e).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({componentId:"fox-ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>b(o)));var g=r(e).withConfig({shouldForwardProp:o=>!['palette','label','labelPosition','active'
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import r,{css as n}from'styled-components';import e from'react-input-mask';import t from'tinycolor2';import{color as l}from'../../mixins/color.js';import{property as a,responsiveNamedProperty as c}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'./helpers.js';import{focus as s}from'../../mixins/focus.js';var d=n(["border:1px solid ",";background-color:",";"],(o=>o.theme.colors.pomegranate),(o=>t(o.theme.colors.pomegranate).setAlpha(.1).toString()));var p=n(["background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;&:disabled{background-color:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.04);color:rgba(0,0,0,0.16);cursor:not-allowed;}"]);var u=n(["&:focus{border:1px solid ",";outline:none;}"],(o=>o.theme.colors.accent));var h=n(["border-radius:",";"],(o=>o.theme.borderRadius));var b=o=>n(["box-sizing:border-box;display:block;background-color:",";border:solid 1px ",";width:auto;appearance:none;font-size:16px;",";&::placeholder{","}"," "," "," "," "," "," ",""],o.theme.colors.white,o.theme.colors.alto,o.color?l(o.color):null,o.placeholderColor?l(o.placeholderColor):null,u,o.disabled?p:null,o.rounded?h:null,o.width?a(i(o.width),o.fluid&&'auto'!==o.width?'max-width':'width'):null,c({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:i}),o.fluid?n(["width:100%;"]):null,o.error?d:null);var m=r(e).withConfig({shouldForwardProp:o=>!['color','placeholderColor','rounded','fluid','error'].includes(o)&&!o.includes('width')}).withConfig({componentId:"fox-ui__sc-1gazj3c-0"})(["line-height:24px;padding:15px 20px 11px;",""],(o=>b(o)));var g=r(e).withConfig({shouldForwardProp:o=>!['palette','label','labelPosition','active'].includes(o)}).withConfig({componentId:"fox-ui__sc-1gazj3c-1"})([""," ",""],(o=>{var r='1';var n='0px';return o.label&&'dynamic'===o.labelPosition&&(r="".concat(o.active?1:0),n='0.8em'),o.label&&'top'===o.labelPosition&&(n='0.8em'),o.label&&'center'===o.labelPosition&&(r="".concat(o.active?1:0)),"\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ".concat(r,";\n padding-top: ").concat(n,";\n cursor: ").concat(o.disabled?'not-allowed':'pointer',";\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n ")}),(r=>{return n=o({inputColor:r.theme.colors['content-onmain-primary'],inputPlaceholderColor:r.theme.colors['content-onmain-secondary'],inputColorDisabled:r.theme.colors['content-disabled'],inputPlaceholderColorDisabled:r.theme.colors['content-disabled']},r.palette),"\n color: ".concat(n.inputColor,";\n &::placeholder {\n color: ").concat(n.inputPlaceholderColor,";\n }\n &:disabled {\n color: ").concat(n.inputColorDisabled,";\n }\n &:disabled::placeholder {\n color: ").concat(n.inputPlaceholderColorDisabled,";\n }\n");var n}));var f=r.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-1gazj3c-2"})(["box-sizing:border-box;appearance:none;position:relative;padding:5px;margin:0;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;cursor:",";&:first-child{margin-left:4px;}&:not(:first-child){margin-left:9px;}&:not(:first-child)::before{content:'';position:absolute;width:1px;height:60%;top:50%;left:-5px;transform:translateY(-50%);}"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(r=>{return n=o({controlsColor:r.theme.colors['content-onmain-tertiary'],controlsColorHover:r.theme.colors['content-onmain-primary'],controlsColorActive:r.theme.colors['content-onmain-primary'],controlsColorDisabled:r.theme.colors['content-disabled'],controlsBackgroundColor:r.theme.colors.transparent,controlsBackgroundColorHover:t(r.theme.colors['bg-oncolor-hover']).lighten(20).toString(),controlsBackgroundColorActive:r.theme.colors['bg-oncolor-hover'],controlsBackgroundColorDisabled:r.theme.colors.transparent,controlsSeparatorColor:r.theme.colors['border-onmain-default-large']},r.palette),"\n color: ".concat(n.controlsColor,";\n background-color: ").concat(n.controlsBackgroundColor,";\n &:hover {\n color: ").concat(n.controlsColorHover,";\n background-color: ").concat(n.controlsBackgroundColorHover,";\n }\n &:active {\n color: ").concat(n.controlsColorActive,";\n background-color: ").concat(n.controlsBackgroundColorActive,";\n }\n &:disabled {\n color: ").concat(n.controlsColorDisabled,";\n background-color: ").concat(n.controlsBackgroundColorDisabled,";\n }\n &:not(:first-child)::before {\n background-color: ").concat(n.controlsSeparatorColor,";\n }\n");var n}),s);export{g as Input,f as InputControl,m as Root,b as baseInputStyle,p as disabledStyle,d as errorStyle,u as focusStyle,h as roundedStyle};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type {\n StyledBaseInputProps,\n StyledInputProps,\n StyledInputControlsProps,\n InputPalette,\n InputControlsPalette,\n} from './types'\n\nconst template = (palette: InputPalette) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (palette: InputControlsPalette) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\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 ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active', 'cursor'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.cursor ?? props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: inherit;\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","componentId","Input","propKey","_props$cursor","opacity","paddingTop","label","labelPosition","concat","active","cursor","template","palette","_objectSpread","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Input/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport InputMask from 'react-input-mask'\nimport tinycolor from 'tinycolor2'\nimport type { StyledProps } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from 'components/Input/helpers'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledBaseInputProps, StyledInputProps, StyledInputControlsProps, InputPalette } from './types'\n\nconst template = (\n palette: Pick<\n InputPalette,\n | 'inputColor'\n | 'inputPlaceholderColor'\n | 'inputColorDisabled'\n | 'inputColorDisabled'\n | 'inputPlaceholderColorDisabled'\n >\n) => `\n color: ${palette.inputColor};\n &::placeholder {\n color: ${palette.inputPlaceholderColor};\n }\n &:disabled {\n color: ${palette.inputColorDisabled};\n }\n &:disabled::placeholder {\n color: ${palette.inputPlaceholderColorDisabled};\n }\n`\n\nconst controlsTemplate = (\n palette: Pick<\n InputPalette,\n | 'controlsColor'\n | 'controlsBackgroundColor'\n | 'controlsColorHover'\n | 'controlsBackgroundColorHover'\n | 'controlsColorActive'\n | 'controlsBackgroundColorActive'\n | 'controlsColorDisabled'\n | 'controlsBackgroundColorDisabled'\n | 'controlsSeparatorColor'\n >\n) => `\n color: ${palette.controlsColor};\n background-color: ${palette.controlsBackgroundColor};\n &:hover {\n color: ${palette.controlsColorHover};\n background-color: ${palette.controlsBackgroundColorHover};\n }\n &:active {\n color: ${palette.controlsColorActive};\n background-color: ${palette.controlsBackgroundColorActive};\n }\n &:disabled {\n color: ${palette.controlsColorDisabled};\n background-color: ${palette.controlsBackgroundColorDisabled};\n }\n &:not(:first-child)::before {\n background-color: ${palette.controlsSeparatorColor};\n }\n`\n\nexport const errorStyle = css`\n border: 1px solid ${(props) => props.theme.colors.pomegranate};\n background-color: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n`\n\nexport const disabledStyle = css`\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n &:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n border-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.16);\n cursor: not-allowed;\n }\n`\n\nexport const focusStyle = css`\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.accent};\n outline: none;\n }\n`\n\nexport const roundedStyle = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nexport const baseInputStyle = (\n props: StyledProps<\n Pick<\n StyledBaseInputProps,\n | 'color'\n | 'placeholderColor'\n | 'disabled'\n | 'rounded'\n | 'width'\n | 'widthXS'\n | 'widthS'\n | 'widthM'\n | 'widthL'\n | 'widthXL'\n | 'fluid'\n | 'error'\n >\n >\n) => css`\n box-sizing: border-box;\n display: block;\n background-color: ${props.theme.colors.white};\n border: solid 1px ${props.theme.colors.alto};\n width: auto;\n appearance: none;\n font-size: 16px;\n ${props.color ? color(props.color) : null};\n &::placeholder {\n ${props.placeholderColor ? color(props.placeholderColor) : null}\n }\n ${focusStyle}\n ${props.disabled ? disabledStyle : null}\n ${props.rounded ? roundedStyle : null}\n\n ${props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\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 ${props.fluid\n ? css`\n width: 100%;\n `\n : null}\n ${props.error ? errorStyle : null}\n`\n\nexport const Root: React.ComponentType<StyledBaseInputProps> = styled(InputMask).withConfig<StyledBaseInputProps>({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error'].includes(prop) && !prop.includes('width'),\n})`\n line-height: 24px;\n padding: 15px 20px 11px;\n ${(props) => baseInputStyle(props)}\n`\n\nexport const Input: React.ComponentType<StyledInputProps> = styled(InputMask).withConfig<StyledInputProps>({\n shouldForwardProp: (propKey) => !['palette', 'label', 'labelPosition', 'active'].includes(propKey),\n})`\n ${(props) => {\n let opacity = '1'\n let paddingTop = '0px'\n\n if (props.label && props.labelPosition === 'dynamic') {\n opacity = `${props.active ? 1 : 0}`\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'top') {\n paddingTop = '0.8em'\n }\n\n if (props.label && props.labelPosition === 'center') {\n opacity = `${props.active ? 1 : 0}`\n }\n\n return `\n box-sizing: border-box;\n appearance: textfield;\n border: none;\n padding: 0;\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n background-color: transparent;\n width: 100%;\n align-self: stretch;\n opacity: ${opacity};\n padding-top: ${paddingTop};\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n\n &[type=\"number\"]::-webkit-outer-spin-button,\n &[type=\"number\"]::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &:focus {\n cursor: text;\n outline: none;\n }\n `\n }}\n ${(props) =>\n template({\n inputColor: props.theme.colors['content-onmain-primary'],\n inputPlaceholderColor: props.theme.colors['content-onmain-secondary'],\n inputColorDisabled: props.theme.colors['content-disabled'],\n inputPlaceholderColorDisabled: props.theme.colors['content-disabled'],\n ...props.palette,\n })}\n`\n\nexport const InputControl = styled.button.withConfig<StyledInputControlsProps>({\n shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n box-sizing: border-box;\n appearance: none;\n position: relative;\n padding: 5px;\n margin: 0;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 8px;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n &:first-child {\n margin-left: 4px;\n }\n &:not(:first-child) {\n margin-left: 9px;\n }\n &:not(:first-child)::before {\n content: '';\n position: absolute;\n width: 1px;\n height: 60%;\n top: 50%;\n left: -5px;\n transform: translateY(-50%);\n }\n ${(props) =>\n controlsTemplate({\n controlsColor: props.theme.colors['content-onmain-tertiary'],\n controlsColorHover: props.theme.colors['content-onmain-primary'],\n controlsColorActive: props.theme.colors['content-onmain-primary'],\n controlsColorDisabled: props.theme.colors['content-disabled'],\n controlsBackgroundColor: props.theme.colors.transparent,\n controlsBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover'])\n .lighten(20)\n .toString() as CSSColor,\n controlsBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n controlsBackgroundColorDisabled: props.theme.colors.transparent,\n controlsSeparatorColor: props.theme.colors['border-onmain-default-large'],\n ...props.palette,\n })}\n\n ${focus}\n`\n"],"names":["errorStyle","css","props","theme","colors","pomegranate","tinycolor","setAlpha","toString","disabledStyle","focusStyle","accent","roundedStyle","borderRadius","baseInputStyle","white","alto","color","placeholderColor","disabled","rounded","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","error","Root","styled","InputMask","withConfig","shouldForwardProp","prop","includes","componentId","Input","propKey","opacity","paddingTop","label","labelPosition","concat","active","template","palette","_objectSpread","inputColor","inputPlaceholderColor","inputColorDisabled","inputPlaceholderColorDisabled","InputControl","button","controlsTemplate","controlsColor","controlsColorHover","controlsColorActive","controlsColorDisabled","controlsBackgroundColor","transparent","controlsBackgroundColorHover","lighten","controlsBackgroundColorActive","controlsBackgroundColorDisabled","controlsSeparatorColor","focus"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as i}from'react';import{withMergedProps as r}from'../../hocs/withMergedProps.js';import{SIZES as t}from'./constants.js';import{Root as a,Input as o,InputMask as n,InputIndeterminate as z,InputChecked as l}from'./style.js';import{jsxs as m,jsx as p}from'react/jsx-runtime';var c=["size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","inline","error","success","onColored","palette","style","indeterminate","className","disabled"];var d='InputCheckbox';var u=r(i(((i,r)=>{var{size:t="m",sizeXXS:d,sizeXS:u,sizeS:b,sizeM:h,sizeL:S,sizeXL:X,sizes:f,sizeUnits:I,inline:j,error:x,success:C,onColored:M,palette:N,style:k,indeterminate:y,className:L,disabled:v}=i,P=s(i,c);return m(a,{size:t,sizeXXS:d,sizeXS:u,sizeS:b,sizeM:h,sizeL:S,sizeXL:X,sizes:f,sizeUnits:I,inline:j,error:x,success:C,onColored:M,palette:N,style:k,indeterminate:y,className:L,disabled:v,children:[p(o,e(e({},P),{},{disabled:v,type:"checkbox",ref:r})),p(n,{children:p(!0===y?z:l,{})})]})})),{displayName:"InputCheckbox",sizes:t});export{d as COMPONENT_NAME,u as InputCheckbox};
|
|
2
2
|
//# sourceMappingURL=InputCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputCheckbox.js","sources":["../../../../src/components/InputCheckbox/InputCheckbox.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { InputCheckboxProps } from './types'\n\nconst COMPONENT_NAME = 'InputCheckbox'\n\n/**\n *\n * Component accepts all \\<input\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to \\<input\\>.\n *\n * See full [InputCheckboxProps](https://github.com/foxford/ui/blob/master/src/components/InputCheckbox/types.ts)\n *\n * @visibleName Checkbox\n */\nconst InputCheckbox: React.ForwardRefExoticComponent<InputCheckboxProps> = withMergedProps<\n InputCheckboxProps,\n HTMLInputElement\n>(\n forwardRef(\n (\n {\n size = 'm',\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n inline,\n error,\n success,\n onColored,\n palette,\n
|
|
1
|
+
{"version":3,"file":"InputCheckbox.js","sources":["../../../../src/components/InputCheckbox/InputCheckbox.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { InputCheckboxProps } from './types'\n\nconst COMPONENT_NAME = 'InputCheckbox'\n\n/**\n *\n * Component accepts all \\<input\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to \\<input\\>.\n *\n * See full [InputCheckboxProps](https://github.com/foxford/ui/blob/master/src/components/InputCheckbox/types.ts)\n *\n * @visibleName Checkbox\n */\nconst InputCheckbox: React.ForwardRefExoticComponent<InputCheckboxProps> = withMergedProps<\n InputCheckboxProps,\n HTMLInputElement\n>(\n forwardRef(\n (\n {\n size = 'm',\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n sizes,\n sizeUnits,\n inline,\n error,\n success,\n onColored,\n palette,\n style,\n indeterminate,\n className,\n disabled,\n ...inputProps\n },\n ref\n ) => {\n return (\n <Styled.Root\n size={size}\n sizeXXS={sizeXXS}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n sizes={sizes}\n sizeUnits={sizeUnits}\n inline={inline}\n error={error}\n success={success}\n onColored={onColored}\n palette={palette}\n style={style}\n indeterminate={indeterminate}\n className={className}\n disabled={disabled}\n >\n <Styled.Input {...inputProps} disabled={disabled} type='checkbox' ref={ref} />\n <Styled.InputMask>\n {indeterminate === true ? <Styled.InputIndeterminate /> : <Styled.InputChecked />}\n </Styled.InputMask>\n </Styled.Root>\n )\n }\n ),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { InputCheckbox, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","InputCheckbox","withMergedProps","forwardRef","_ref","ref","size","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","sizes","sizeUnits","inline","error","success","onColored","palette","style","indeterminate","className","disabled","inputProps","_objectWithoutProperties","_excluded","_jsxs","Styled.Root","children","_jsx","Styled.Input","type","Styled.InputMask","Styled.InputIndeterminate","Styled.InputChecked","displayName","SIZES"],"mappings":"2kBAMMA,IAAAA,EAAiB,gBAcjBC,IAAAA,EAAqEC,EAIzEC,GAAAA,CACEC,EAsBEC,KACG,IAtBHC,KACEA,EAAO,IADTC,QAEEA,EAFFC,OAGEA,EAHFC,MAIEA,EAJFC,MAKEA,EALFC,MAMEA,EANFC,OAOEA,EAPFC,MAQEA,EARFC,UASEA,EATFC,OAUEA,EAVFC,MAWEA,EAXFC,QAYEA,EAZFC,UAaEA,EAbFC,QAcEA,EAdFC,MAeEA,EAfFC,cAgBEA,EAhBFC,UAiBEA,EAjBFC,SAkBEA,GAICnB,EAHEoB,EAGFC,EAAArB,EAAAsB,GACH,OACEC,EAACC,EAAD,CACEtB,KAAMA,EACNC,QAASA,EACTC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRC,MAAOA,EACPC,UAAWA,EACXC,OAAQA,EACRC,MAAOA,EACPC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTC,MAAOA,EACPC,cAAeA,EACfC,UAAWA,EACXC,SAAUA,EAlBZM,SAAA,CAoBEC,EAACC,SAAiBP,GAAlB,GAAA,CAA8BD,SAAUA,EAAUS,KAAK,WAAW3B,IAAKA,KACvEyB,EAACG,EAAD,CAAAJ,SAC4BC,GAAP,IAAlBT,EAA0Ba,EAAgCC,EAA1D,YAMX,CACEC,YAzEmB,gBA0EnBvB,MAAOwB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var d={xxxl:{width:40,height:40,borderRadius:8},xxl:{width:36,height:36,borderRadius:8},xl:{width:32,height:32,borderRadius:7},l:{width:28,height:28,borderRadius:6},m:{width:24,height:24,borderRadius:5},s:{width:20,height:20,borderRadius:4},xs:{width:18,height:18,borderRadius:4},xxs:{width:16,height:16,borderRadius:4},xxxs:{width:14,height:14,borderRadius:3}};export{d as SIZES};
|
|
2
2
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../../../../src/components/InputCheckbox/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n width: 40,\n height: 40,\n },\n xxl: {\n width: 36,\n height: 36,\n },\n xl: {\n width: 32,\n height: 32,\n },\n l: {\n width: 28,\n height: 28,\n },\n m: {\n width: 24,\n height: 24,\n },\n s: {\n width: 20,\n height: 20,\n },\n xs: {\n width: 18,\n height: 18,\n },\n xxs: {\n width: 16,\n height: 16,\n },\n xxxs: {\n width: 14,\n height: 14,\n },\n}\n"],"names":["SIZES","xxxl","width","height","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,MAAO,GACPC,OAAQ,
|
|
1
|
+
{"version":3,"file":"constants.js","sources":["../../../../src/components/InputCheckbox/constants.ts"],"sourcesContent":["import type { Sizes } from 'shared/types'\n\nexport const SIZES: Sizes = {\n xxxl: {\n width: 40,\n height: 40,\n borderRadius: 8,\n },\n xxl: {\n width: 36,\n height: 36,\n borderRadius: 8,\n },\n xl: {\n width: 32,\n height: 32,\n borderRadius: 7,\n },\n l: {\n width: 28,\n height: 28,\n borderRadius: 6,\n },\n m: {\n width: 24,\n height: 24,\n borderRadius: 5,\n },\n s: {\n width: 20,\n height: 20,\n borderRadius: 4,\n },\n xs: {\n width: 18,\n height: 18,\n borderRadius: 4,\n },\n xxs: {\n width: 16,\n height: 16,\n borderRadius: 4,\n },\n xxxs: {\n width: 14,\n height: 14,\n borderRadius: 3,\n },\n}\n"],"names":["SIZES","xxxl","width","height","borderRadius","xxl","xl","l","m","s","xs","xxs","xxxs"],"mappings":"AAEO,IAAMA,EAAe,CAC1BC,KAAM,CACJC,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBC,IAAK,CACHH,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBE,GAAI,CACFJ,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBG,EAAG,CACDL,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBI,EAAG,CACDN,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBK,EAAG,CACDP,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBM,GAAI,CACFR,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBO,IAAK,CACHT,MAAO,GACPC,OAAQ,GACRC,aAAc,GAEhBQ,KAAM,CACJV,MAAO,GACPC,OAAQ,GACRC,aAAc"}
|