@foxford/ui 2.12.1 → 2.13.0-beta-167d3be-20231023
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/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/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/dts/index.d.ts +33 -43
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/index.js +1 -1
- package/mixins/color.js.map +1 -1
- package/mixins/responsive-property.js +1 -1
- package/mixins/responsive-property.js.map +1 -1
- package/mixins/screen.js.map +1 -1
- package/mixins/shared.js +1 -1
- package/mixins/shared.js.map +1 -1
- package/mixins/sizing.js +2 -0
- package/mixins/sizing.js.map +1 -0
- package/package.json +2 -1
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{hexToRgbA,isHex}from'./shared/utils/colors.js';export{ThemeProvider}from'./theme/theme-provider.js';export{adultDarkTheme,adultLightTheme,babyDarkTheme,babyLightTheme,motherDarkTheme,motherLightTheme,teenDarkTheme,teenLightTheme,defaultTheme as theme}from'./theme/themes.js';export{ColorNames}from'./theme/colors.js';export{screenL,screenM,screenMaxL,screenMaxM,screenMaxS,screenMaxXl,screenMaxXs,screenMaxXxs,screenMinL,screenMinM,screenMinS,screenMinXl,screenMinXs,screenRetina,screenS,screenXl,screenXs}from'./mixins/screen.js';export{
|
|
1
|
+
export{hexToRgbA,isHex}from'./shared/utils/colors.js';export{ThemeProvider}from'./theme/theme-provider.js';export{adultDarkTheme,adultLightTheme,babyDarkTheme,babyLightTheme,motherDarkTheme,motherLightTheme,teenDarkTheme,teenLightTheme,defaultTheme as theme}from'./theme/themes.js';export{ColorNames}from'./theme/colors.js';export{screenL,screenM,screenMaxL,screenMaxM,screenMaxS,screenMaxXl,screenMaxXs,screenMaxXxs,screenMinL,screenMinM,screenMinS,screenMinXl,screenMinXs,screenRetina,screenS,screenXl,screenXs}from'./mixins/screen.js';export{property,responsiveNamedProperty,responsiveProperty}from'./mixins/responsive-property.js';export{color}from'./mixins/color.js';export{vAlign}from'./mixins/vAlign.js';export{buildMediaQuery,desktopFirst,mobileFirst}from'./mixins/shared.js';export{ActionBtn}from'./components/ActionBtn/ActionBtn.js';export{Alert}from'./components/Alert/Alert.js';export{Amount}from'./components/Amount/Amount.js';export{CURRENCY_MAP,CurrencyCodes}from'./components/Amount/data/index.js';export{Anchor}from'./components/Anchor/Anchor.js';export{Arrow}from'./components/Arrow/Arrow.js';export{Avatar}from'./components/Avatar/Avatar.js';export{Badge}from'./components/Badge/Badge.js';export{Button}from'./components/Button/Button.js';export{Container}from'./components/Container/Container.js';export{Icon}from'./components/Icon/Icon.js';export{defaultIcons}from'./components/Icon/icons.js';export{Modal}from'./components/Modal/Modal.js';export{Paper}from'./components/Paper/Paper.js';export{Progress}from'./components/Progress/Progress.js';export{Scrollable}from'./components/Scrollable/Scrollable.js';export{Section}from'./components/Section/Section.js';export{Separator}from'./components/Separator/Separator.js';export{Spacer}from'./components/Spacer/Spacer.js';export{Spinner}from'./components/Spinner/Spinner.js';export{Switcher}from'./components/Switcher/Switcher.js';export{Tabs}from'./components/Tabs/Tabs.js';export{Text}from'./components/Text/Text.js';export{Tooltip}from'./components/Tooltip/Tooltip.js';export{Tag}from'./components/Tag/Tag.js';export{ContextMenu}from'./components/ContextMenu/ContextMenu.js';export{Textarea}from'./components/Textarea/Textarea.js';export{Input}from'./components/Input/Input.js';export{baseInputStyle}from'./components/Input/style.js';export{COUNTRY_DATA,DEFAULT_MASK,INITIAL_MASK}from'./components/Input.Phone/constants.js';export{Radio}from'./components/Radio/Radio.js';export{Checkbox}from'./components/Checkbox/Checkbox.js';export{Select}from'./components/Select/Select.js';
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/mixins/color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","sources":["../../../src/mixins/color.ts"],"sourcesContent":["import { css, DefaultTheme, FlattenSimpleInterpolation } from 'styled-components'\nimport { HEX, RGB, RGBA } from '../shared/interfaces'\nimport { ColorNames } from '../theme/colors'\n\ntype ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`\nexport type ColorValue = RGB | RGBA | HEX | 'inherit' | 'initial' | 'transparent'\ntype ColorCalcProperty = (_color: ColorValue) => FlattenSimpleInterpolation | null\ntype ColorCssProperty = string | ColorCalcProperty\nexport type Color = keyof typeof ColorNames | ColorValue\nexport type ColorProperty<T extends ColorPropertyVariants = 'color'> = {\n /**\n * Color name, HEX, rgb or rgba\n */\n [key in `${T}`]?: Color // eslint-disable-line no-unused-vars\n}\n\nexport const getColor = (color: Color, props: { theme: DefaultTheme }) => {\n if (typeof color === 'string' && (color.includes('#') || color.includes('rgb'))) return color\n\n if (props.theme.colors[color]) return props.theme.colors[color]\n\n return color\n}\n\nexport const color =\n (color?: Color, cssProperty: ColorCssProperty = 'color') =>\n () =>\n (props: { theme: DefaultTheme }) => {\n const colorVal = color || props?.theme?.textColor || props?.theme?.fallbackColor\n const _color = getColor(colorVal as ColorValue, props)\n\n if (typeof cssProperty === 'function') {\n return cssProperty(_color)\n }\n\n return css`\n ${cssProperty}: ${_color};\n `\n }\n"],"names":["getColor","color","props","includes","theme","colors","l","cssProperty","_props$theme","_props$theme2","colorVal","textColor","fallbackColor","_color","css"],"mappings":"4CAgBaA,EAAW,CAACC,EAAcC,IAChB,iBAAVD,IAAuBA,EAAME,SAAS,MAAQF,EAAME,SAAS,QAAgBF,EAEpFC,EAAME,MAAMC,OAAOJ,GAAeC,EAAME,MAAMC,OAAOJ,GAElDA,EAGIA,IAAAA,EACX,SAACA,EAADK,GAAA,
|
|
1
|
+
{"version":3,"file":"color.js","sources":["../../../src/mixins/color.ts"],"sourcesContent":["import { css, DefaultTheme, FlattenSimpleInterpolation } from 'styled-components'\nimport { HEX, RGB, RGBA } from '../shared/interfaces'\nimport { ColorNames } from '../theme/colors'\n\ntype ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`\nexport type ColorValue = RGB | RGBA | HEX | 'inherit' | 'initial' | 'transparent'\ntype ColorCalcProperty = (_color: ColorValue) => FlattenSimpleInterpolation | null\ntype ColorCssProperty = string | ColorCalcProperty\nexport type Color = keyof typeof ColorNames | ColorValue\nexport type ColorProperty<T extends ColorPropertyVariants = 'color'> = {\n /**\n * Color name, HEX, rgb or rgba\n */\n [key in `${T}`]?: Color // eslint-disable-line no-unused-vars\n}\n\nexport const getColor = (color: Color, props: { theme: DefaultTheme }) => {\n if (typeof color === 'string' && (color.includes('#') || color.includes('rgb'))) return color\n\n if (props.theme.colors[color]) return props.theme.colors[color]\n\n return color\n}\n\nexport const color =\n (color?: Color | string, cssProperty: ColorCssProperty = 'color') =>\n () =>\n (props: { theme: DefaultTheme }) => {\n const colorVal = color || props?.theme?.textColor || props?.theme?.fallbackColor\n const _color = getColor(colorVal as ColorValue, props)\n\n if (typeof cssProperty === 'function') {\n return cssProperty(_color)\n }\n\n return css`\n ${cssProperty}: ${_color};\n `\n }\n"],"names":["getColor","color","props","includes","theme","colors","l","cssProperty","_props$theme","_props$theme2","colorVal","textColor","fallbackColor","_color","css"],"mappings":"4CAgBaA,EAAW,CAACC,EAAcC,IAChB,iBAAVD,IAAuBA,EAAME,SAAS,MAAQF,EAAME,SAAS,QAAgBF,EAEpFC,EAAME,MAAMC,OAAOJ,GAAeC,EAAME,MAAMC,OAAOJ,GAElDA,EAGIA,IAAAA,EACX,SAACA,EAADK,GAAA,IAAyBC,+BAAzBD,EAAAA,EAAyD,QAAzD,MACA,IACCJ,IAAmC,IAAAM,EAAAC,EAClC,IAAMC,EAAWT,IAASC,MAAAA,GAAA,QAAAA,EAAAA,EAAOE,aAAP,IAAAI,OAAAN,EAAAM,EAAcG,aAAaT,MAAAA,GAApC,QAAAO,EAAoCP,EAAOE,aAA3C,IAAAK,OAAA,EAAoCA,EAAcG,eACnE,IAAMC,EAASb,EAASU,EAAwBR,GAEhD,MAA2B,mBAAhBK,EACFA,EAAYM,GAGdC,EAAP,CAAA,GAAA,IAAA,KACIP,EAAgBM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import n from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as e}from'styled-components';import{screenMaxXxs as r,screenMaxXs as t,screenMaxS as
|
|
1
|
+
import n from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as e}from'styled-components';import{screenMaxXxs as r,screenMaxXs as t,screenMaxS as o,screenMaxM as a,screenMaxL as l,screenMinL as s,screenMinM as i}from'./screen.js';import{buildMediaQuery as c,getMediaQueryByResponsiveProp as u,getLatinSizeMapByCssProperty as p,desktopFirst as f}from'./shared.js';var y,v,m,d,b,g,M,h,x;var S=function(n,r,t,o){var a=arguments.length>1&&void 0!==r?r:'size';var l=arguments.length>2&&void 0!==t?t:'px';var s=arguments.length>3?o:void 0;return()=>()=>{if('boolean'==typeof n)return'function'==typeof a?a(1):null;var r=null!=s?s:p(a);return'function'==typeof a?a('number'==typeof n?n:r[n]):'string'==typeof n&&['auto','initial','inherit'].includes(n)?e(["",":",";"],a,n):e(["",":","",";"],a,'string'==typeof n&&r[n]?r[n]:n,null!=l?l:'')}};var X={XXS:r,XS:t,S:o,M:a,L:l,XL:s};var L={desktop:i,tablet:a,mobile:o};var z=n=>{var{sizes:r,predefinedSizes:t,cssProperty:o="size",sizing:a="px",customSizeHandler:l,sort:s=f}=n;return()=>()=>Object.keys(r).sort(s).map((n=>{if(void 0!==r[n]){var e='function'==typeof l?l(r[n]):r[n];return c(e,o,u(n),a,t)}return null})).filter(Boolean).map((n=>e(["",""],n)))};var P=function(r,t,o){var a=arguments.length>1&&void 0!==t?t:null;var l=arguments.length>2&&void 0!==o?o:'px';return()=>t=>{var o;var s=null!==(o=t[r])&&void 0!==o?o:null;var i=null!=a?a:r;if(!s)return null;if(Array.isArray(s)&&3===s.length){var[c,u,p]=s;return e([""," "," ",""],L.desktop()(y||(y=n(["\n ",": ",";\n "])),i,'number'==typeof c?"".concat(c).concat(null!=l?l:''):c),L.tablet()(v||(v=n(["\n ",": ",";\n "])),i,'number'==typeof u?"".concat(u).concat(null!=l?l:''):u),L.mobile()(m||(m=n(["\n ",": ",";\n "])),i,'number'==typeof p?"".concat(p).concat(null!=l?l:''):p))}if(Array.isArray(s)&&6===s.length&&'string'==typeof i){var[f,S,z,P,k,A]=s;return e([""," "," "," "," "," ",""],X.XL()(d||(d=n(["\n ",": ",";\n "])),i,'number'==typeof f?"".concat(f).concat(null!=l?l:''):f),X.L()(b||(b=n(["\n ",": ",";\n "])),i,'number'==typeof S?"".concat(S).concat(null!=l?l:''):S),X.M()(g||(g=n(["\n ",": ",";\n "])),i,'number'==typeof z?"".concat(z).concat(null!=l?l:''):z),X.S()(M||(M=n(["\n ",": ",";\n "])),i,'number'==typeof P?"".concat(P).concat(null!=l?l:''):P),X.XS()(h||(h=n(["\n ",": ",";\n "])),i,'number'==typeof k?"".concat(k).concat(null!=l?l:''):k),X.XXS()(x||(x=n(["\n ",": ",";\n "])),i,'number'==typeof A?"".concat(A).concat(null!=l?l:''):A))}return'number'==typeof s?e(["",":","",";"],i,s,null!=l?l:null):'string'==typeof s?e(["",":",";"],i,s):null}};export{S as property,z as responsiveNamedProperty,P as responsiveProperty};
|
|
2
2
|
//# sourceMappingURL=responsive-property.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from '../shared/enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinL, screenMaxXxs, screenMinM } from './screen'\nimport { buildMediaQuery, getLatinSizeMapByCssProperty } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n | 'size'\n | 'fontSize'\n | 'height'\n | 'width'\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'margin'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'fluid'\n\nexport type CalcProperty = (\n _size: number | 'auto' | 'initial' | 'inherit' | boolean,\n _sizing?: null | string\n) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n /**\n * Size for breakpoint\n */\n [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport type ResponsiveProperty<V = number | keyof typeof SizeLatin> =\n | V\n | [desktop: V, tablet: V, mobile: V]\n | [xl: V, l: V, m: V, s: V, xs: V, xxs: V]\n\nexport const property =\n (\n value: PossibleValues,\n cssProperty: CssProperty = 'size',\n sizing: null | string = 'px',\n sizes?: Record<SizeLatin, number>\n ) =>\n () =>\n () => {\n if (typeof value === 'boolean') {\n return typeof cssProperty === 'function' ? cssProperty(1) : null\n }\n\n const sizeMap = sizes ?? getLatinSizeMapByCssProperty(cssProperty)\n\n if (typeof cssProperty === 'function') {\n return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n }\n\n if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n return css`\n ${cssProperty}: ${value};\n `\n\n return css`\n ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing ?? ''};\n `\n }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n XXS: screenMaxXxs,\n XS: screenMaxXs,\n S: screenMaxS,\n M: screenMaxM,\n L: screenMaxL,\n XL: screenMinL,\n}\n\nconst SCREEN_SIZE_MAP_BY_DEVICE_ALIAS: Record<'desktop' | 'tablet' | 'mobile', typeof screenMaxXs> = {\n desktop: screenMinM,\n tablet: screenMaxM,\n mobile: screenMaxS,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n if (size.endsWith('XXS')) {\n return SCREEN_SIZE_MAP.XXS\n } else if (size.endsWith('XS')) {\n return SCREEN_SIZE_MAP.XS\n } else if (size.endsWith('S')) {\n return SCREEN_SIZE_MAP.S\n } else if (size.endsWith('M')) {\n return SCREEN_SIZE_MAP.M\n } else if (size.endsWith('XL')) {\n return SCREEN_SIZE_MAP.XL\n } else {\n return SCREEN_SIZE_MAP.L\n }\n}\n\nconst getKey = (key: string): 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | null => {\n if (key.endsWith('XXS')) return 'xxs'\n if (key.endsWith('XS')) return 'xs'\n if (key.endsWith('S')) return 's'\n if (key.endsWith('M')) return 'm'\n if (key.endsWith('XL')) return 'xl'\n if (key.endsWith('L')) return 'l'\n return null\n}\n\nconst DEKSTOP_FIRST_KEYS = ['xl', 'l', 'm', 's', 'xs', 'xxs']\nconst MOBILE_FIRST_KEYS = ['xxs', 'xs', 's', 'm', 'l', 'xl']\n\n/**\n * Sort keys as desktop first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const desktopFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\n/**\n * Sort keys as mobile first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const mobileFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\ninterface ResponsiveNamedPropertyPayload<T extends PropsProperties> {\n sizes: ResponsiveNamedProperty<T>\n cssProperty: CssProperty\n sizing?: null | string\n customSizeHandler?: (_value: PossibleValues) => PossibleValues\n sort?: (_a: string, _b: string) => number\n predefinedSizes?: Record<SizeLatin, number>\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveNamedProperty =\n <T extends PropsProperties>({\n sizes,\n predefinedSizes,\n cssProperty = 'size',\n sizing = 'px',\n customSizeHandler,\n sort = desktopFirst,\n }: ResponsiveNamedPropertyPayload<T>) =>\n () =>\n () => {\n const mediaCssStrArr = Object.keys(sizes)\n .sort(sort)\n .map((size) => {\n if (sizes[size] !== undefined) {\n const _size: PossibleValues =\n typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n\n return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing, predefinedSizes)\n }\n return null\n })\n .filter(Boolean)\n .map(\n (item) =>\n css`\n ${item}\n `\n )\n\n return mediaCssStrArr\n }\n\n/**\n * Миксин для генерации media запросов\n *\n * @param propName имя пропсы\n * @param cssProperty имя css свойства\n * @param sizing значение величины, по умолчанию `px`\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n (propName: string, cssProperty: string | null = null, sizing: null | string = 'px') =>\n () =>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (props: any) => {\n const prop: ResponsiveProperty | null = props[propName] ?? null\n const _cssProperty = cssProperty ?? propName\n if (!prop) return null\n\n if (Array.isArray(prop) && prop.length === 3) {\n const [desktop, tablet, mobile] = prop\n return css`\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.desktop()`\n ${_cssProperty}: ${typeof desktop === 'number' ? `${desktop}${sizing ?? ''}` : desktop};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.tablet()`\n ${_cssProperty}: ${typeof tablet === 'number' ? `${tablet}${sizing ?? ''}` : tablet};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.mobile()`\n ${_cssProperty}: ${typeof mobile === 'number' ? `${mobile}${sizing ?? ''}` : mobile};\n `}\n `\n }\n\n if (Array.isArray(prop) && prop.length === 6 && typeof _cssProperty === 'string') {\n const [xl, l, m, s, xs, xxs] = prop\n return css`\n ${SCREEN_SIZE_MAP.XL()`\n ${_cssProperty}: ${typeof xl === 'number' ? `${xl}${sizing ?? ''}` : xl};\n `}\n ${SCREEN_SIZE_MAP.L()`\n ${_cssProperty}: ${typeof l === 'number' ? `${l}${sizing ?? ''}` : l};\n `}\n ${SCREEN_SIZE_MAP.M()`\n ${_cssProperty}: ${typeof m === 'number' ? `${m}${sizing ?? ''}` : m};\n `}\n ${SCREEN_SIZE_MAP.S()`\n ${_cssProperty}: ${typeof s === 'number' ? `${s}${sizing ?? ''}` : s};\n `}\n ${SCREEN_SIZE_MAP.XS()`\n ${_cssProperty}: ${typeof xs === 'number' ? `${xs}${sizing ?? ''}` : xs};\n `}\n ${SCREEN_SIZE_MAP.XXS()`\n ${_cssProperty}: ${typeof xxs === 'number' ? `${xxs}${sizing ?? ''}` : xxs};\n `}\n `\n }\n\n if (typeof prop === 'number') {\n return css`\n ${_cssProperty}: ${prop}${sizing ?? null};\n `\n }\n\n if (typeof prop === 'string') {\n return css`\n ${_cssProperty}: ${prop};\n `\n }\n\n return null\n }\n"],"names":["property","value","e","r","o","cssProperty","sizing","sizes","arguments","length","sizeMap","getLatinSizeMapByCssProperty","includes","css","SCREEN_SIZE_MAP","XXS","screenMaxXxs","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinL","SCREEN_SIZE_MAP_BY_DEVICE_ALIAS","desktop","screenMinM","tablet","mobile","getKey","key","endsWith","DEKSTOP_FIRST_KEYS","MOBILE_FIRST_KEYS","desktopFirst","a","b","aKey","bKey","findIndex","el","mobileFirst","responsiveNamedProperty","_ref","predefinedSizes","customSizeHandler","sort","Object","keys","map","size","undefined","_size","buildMediaQuery","filter","Boolean","item","responsiveProperty","propName","props","_props$propName","prop","_cssProperty","Array","isArray","_templateObject","_taggedTemplateLiteral","concat","_templateObject2","_templateObject3","xl","l","m","s","xs","xxs","_templateObject4","_templateObject6","_templateObject9"],"mappings":"0VAkDaA,EACX,SACEC,EADFC,EAAAC,EAAAC,GAAA,IAEEC,+BAFFH,EAAAA,EAE6B,OAF7B,IAGEI,+BAHFH,EAAAA,EAG0B,KAH1B,IAIEI,EAJFC,UAAAC,OAAA,EAAAL,SAAA,MAMA,IACA,KACE,GAAqB,kBAAVH,EACT,MAA8B,mBAAhBI,EAA6BA,EAAY,GAAK,KAG9D,IAAMK,EAAUH,MAAAA,EAAAA,EAASI,EAA6BN,GAEtD,MAA2B,mBAAhBA,EACFA,EAA6B,iBAAVJ,EAAqBA,EAAQS,EAAQT,IAG5C,iBAAVA,GAAsB,CAAC,OAAQ,UAAW,WAAWW,SAASX,GAChEY,EAAP,CAAA,GAAA,IAAA,KACIR,EAAgBJ,GAGfY,EACHR,CAAAA,GAAAA,IAAAA,GAAAA,KAAAA,EAAiC,iBAAVJ,GAAsBS,EAAQT,GAASS,EAAQT,GAASA,EAAQK,MAAAA,EAAAA,EAAU,MAIzG,IAAMQ,EAA2E,CAC/EC,IAAKC,EACLC,GAAIC,EACJC,EAAGC,EACHC,EAAGC,EACHC,EAAGC,EACHC,GAAIC,GAGN,IAAMC,EAA+F,CACnGC,QAASC,EACTC,OAAQR,EACRS,OAAQX,GAmBV,IAAMY,EAAUC,GACVA,EAAIC,SAAS,OAAe,MAC5BD,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IACvB,KAGT,IAAMC,EAAqB,CAAC,KAAM,IAAK,IAAK,IAAK,KAAM,OACvD,IAAMC,EAAoB,CAAC,MAAO,KAAM,IAAK,IAAK,IAAK,UAQ1CC,EAAe,CAACC,EAAWC,KACtC,IAAMC,EAAOR,EAAOM,GACpB,IAAMG,EAAOT,EAAOO,GACpB,OAAKC,GAASC,EAECN,EAAmBO,WAAWC,GAAOA,IAAOH,IAC5CL,EAAmBO,WAAWC,GAAOA,IAAOF,KAEjC,EAAI,EALH,OAchBG,EAAc,CAACN,EAAWC,KACrC,IAAMC,EAAOR,EAAOM,GACpB,IAAMG,EAAOT,EAAOO,GACpB,OAAKC,GAASC,EAECL,EAAkBM,WAAWC,GAAOA,IAAOH,IAC3CJ,EAAkBM,WAAWC,GAAOA,IAAOF,KAEhC,EAAI,EALH,GA0BtB,IAAMI,EACXC,IAAA,IAA4BvC,MAC1BA,EAD0BwC,gBAE1BA,EAF0B1C,YAG1BA,EAAc,OAHYC,OAI1BA,EAAS,KAJiB0C,kBAK1BA,EAL0BC,KAM1BA,EAAOZ,GANTS,EAAA,MAQA,IACA,IACyBI,OAAOC,KAAK5C,GAChC0C,KAAKA,GACLG,KAAKC,IACJ,QAAoBC,IAAhB/C,EAAM8C,GAAqB,CAC7B,IAAME,EACyB,mBAAtBP,EAAmCA,EAAkBzC,EAAM8C,IAAS9C,EAAM8C,GAEnF,OAAOG,EAAgBD,EAAOlD,EAnGxC,CAAoCgD,GAC9BA,EAAKnB,SAAS,OACTpB,EAAgBC,IACdsC,EAAKnB,SAAS,MAChBpB,EAAgBG,GACdoC,EAAKnB,SAAS,KAChBpB,EAAgBK,EACdkC,EAAKnB,SAAS,KAChBpB,EAAgBO,EACdgC,EAAKnB,SAAS,MAChBpB,EAAgBW,GAEhBX,EAAgBS,EAZ3B,CAmGgF8B,GAAO/C,EAAQyC,GAEvF,OAAO,QAERU,OAAOC,SACPN,KACEO,GACC9C,EACI8C,CAAAA,GAAAA,IAAAA,UAeDC,EACX,SAACC,EAAD1D,EAAAC,GAAA,IAAmBC,+BAAnBF,EAAAA,EAAgD,KAAhD,IAAsDG,+BAAtDF,EAAAA,EAA8E,KAA9E,MACA,IAEC0D,IAAe,IAAAC,EACd,IAAMC,UAAkCF,EAAAA,EAAMD,kBAAa,KAC3D,IAAMI,EAAe5D,MAAAA,EAAAA,EAAewD,EACpC,IAAKG,EAAM,OAAO,KAElB,GAAIE,MAAMC,QAAQH,IAAyB,IAAhBA,EAAKvD,OAAc,CAC5C,IAAOmB,EAASE,EAAQC,GAAUiC,EAClC,OAAOnD,EAAP,CAAA,GAAA,IAAA,IAAA,IACIc,EAAgCC,SAAhCD,CADJyC,IAAAA,EAAAC,EAAA,CAAA,eAAA,KAAA,iBAEMJ,EAAoC,iBAAZrC,EAAP,GAAA0C,OAAiC1C,GAAUtB,OAAAA,MAAAA,EAAAA,EAAU,IAAOsB,GAE/ED,EAAgCG,QAAhCH,CAJJ4C,IAAAA,EAAAF,EAAA,CAAA,eAAA,KAAA,iBAKMJ,EAAmC,iBAAXnC,EAAP,GAAAwC,OAAgCxC,GAAhCwC,OAAyChE,MAAAA,EAAAA,EAAU,IAAOwB,GAE7EH,EAAgCI,QAAhCJ,CAPJ6C,IAAAA,EAAAH,EAAA,CAAA,eAAA,KAAA,iBAQMJ,EAAmC,iBAAXlC,YAAyBA,GAAhCuC,OAAyChE,MAAAA,EAAAA,EAAU,IAAOyB,IAKnF,GAAImC,MAAMC,QAAQH,IAAyB,IAAhBA,EAAKvD,QAAwC,iBAAjBwD,EAA2B,CAChF,IAAOQ,EAAIC,EAAGC,EAAGC,EAAGC,EAAIC,GAAOd,EAC/B,OAAOnD,EAAP,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IACIC,EAAgBW,IAAhBX,CADJiE,IAAAA,EAAAV,EAAA,CAAA,iBAAA,KAAA,mBAEQJ,EAA+B,iBAAPQ,YAAqBA,GAA5BH,OAAiChE,MAAAA,EAAAA,EAAU,IAAOmE,GAEvE3D,EAAgBS,GAAhBT,CACImD,IAAAA,EAAAA,EAAAA,CAAAA,iBAAAA,KAAAA,mBAAAA,EAA8B,iBAANS,EAAoBA,GAAAA,OAAAA,GAAIpE,OAAAA,MAAAA,EAAAA,EAAU,IAAOoE,GAEnE5D,EAAgBO,GAAhBP,CAPNkE,IAAAA,EAAAX,EAAA,CAAA,iBAAA,KAAA,mBAQQJ,EAA8B,iBAANU,EAAP,GAAAL,OAA2BK,GAA3BL,OAA+BhE,MAAAA,EAAAA,EAAU,IAAOqE,GAEnE7D,EAAgBK,GAAhBL,mDACEmD,EAA8B,iBAANW,EAAoBA,GAAAA,OAAAA,UAAItE,MAAAA,EAAAA,EAAU,IAAOsE,GAEnE9D,EAAgBG,IAAhBH,CACEmD,IAAAA,EAAAA,EAAAA,CAAAA,iBAAAA,KAAAA,mBAAAA,EAA+B,iBAAPY,EAAqBA,GAAAA,OAAAA,GAAKvE,OAAAA,MAAAA,EAAAA,EAAU,IAAOuE,GAErE/D,EAAgBC,KAAhBD,CAhBNmE,IAAAA,EAAAZ,EAAA,CAAA,iBAAA,KAAA,mBAiBQJ,EAAgC,iBAARa,YAAsBA,GAA7BR,OAAmChE,MAAAA,EAAAA,EAAU,IAAOwE,IAK/E,MAAoB,iBAATd,EACFnD,EAAP,CAAA,GAAA,IAAA,GAAA,KACIoD,EAAiBD,EAAO1D,MAAAA,EAAAA,EAAU,MAIpB,iBAAT0D,EACFnD,EAAP,CAAA,GAAA,IAAA,KACIoD,EAAiBD,GAIhB"}
|
|
1
|
+
{"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinL, screenMaxXxs, screenMinM } from 'mixins/screen'\nimport {\n buildMediaQuery,\n getLatinSizeMapByCssProperty,\n desktopFirst,\n getMediaQueryByResponsiveProp,\n} from 'mixins/shared'\nimport type { Size } from 'shared/interfaces'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | Size | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n | 'size'\n | 'fontSize'\n | 'height'\n | 'width'\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'margin'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'fluid'\n\nexport type CalcProperty = (\n _size: number | 'auto' | 'initial' | 'inherit' | boolean,\n _sizing?: null | string\n) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n /**\n * Size for breakpoint\n */\n [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport type ResponsiveProperty<V = number | Size> =\n | V\n | [desktop: V, tablet: V, mobile: V]\n | [xl: V, l: V, m: V, s: V, xs: V, xxs: V]\n\nexport const property =\n (\n value: PossibleValues,\n cssProperty: CssProperty = 'size',\n sizing: null | string = 'px',\n sizes?: Record<Size, number>\n ) =>\n () =>\n () => {\n if (typeof value === 'boolean') {\n return typeof cssProperty === 'function' ? cssProperty(1) : null\n }\n\n const sizeMap = sizes ?? getLatinSizeMapByCssProperty(cssProperty)\n\n if (typeof cssProperty === 'function') {\n return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n }\n\n if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n return css`\n ${cssProperty}: ${value};\n `\n\n return css`\n ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing ?? ''};\n `\n }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n XXS: screenMaxXxs,\n XS: screenMaxXs,\n S: screenMaxS,\n M: screenMaxM,\n L: screenMaxL,\n XL: screenMinL,\n}\n\nconst SCREEN_SIZE_MAP_BY_DEVICE_ALIAS: Record<'desktop' | 'tablet' | 'mobile', typeof screenMaxXs> = {\n desktop: screenMinM,\n tablet: screenMaxM,\n mobile: screenMaxS,\n}\n\ninterface ResponsiveNamedPropertyPayload<T extends PropsProperties> {\n sizes: ResponsiveNamedProperty<T>\n cssProperty: CssProperty\n sizing?: null | string\n customSizeHandler?: (_value: PossibleValues) => PossibleValues\n sort?: (_a: string, _b: string) => number\n predefinedSizes?: Record<Size, number>\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveNamedProperty =\n <T extends PropsProperties>({\n sizes,\n predefinedSizes,\n cssProperty = 'size',\n sizing = 'px',\n customSizeHandler,\n sort = desktopFirst,\n }: ResponsiveNamedPropertyPayload<T>) =>\n () =>\n () => {\n const mediaCssStrArr = Object.keys(sizes)\n .sort(sort)\n .map((size) => {\n if (sizes[size] !== undefined) {\n const _size: PossibleValues =\n typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n\n return buildMediaQuery(_size, cssProperty, getMediaQueryByResponsiveProp(size), sizing, predefinedSizes)\n }\n return null\n })\n .filter(Boolean)\n .map(\n (item) =>\n css`\n ${item}\n `\n )\n\n return mediaCssStrArr\n }\n\n/**\n * Миксин для генерации media запросов\n *\n * @param propName имя пропсы\n * @param cssProperty имя css свойства\n * @param sizing значение величины, по умолчанию `px`\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n (propName: string, cssProperty: string | null = null, sizing: null | string = 'px') =>\n () =>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (props: any) => {\n const prop: ResponsiveProperty | null = props[propName] ?? null\n const _cssProperty = cssProperty ?? propName\n if (!prop) return null\n\n if (Array.isArray(prop) && prop.length === 3) {\n const [desktop, tablet, mobile] = prop\n return css`\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.desktop()`\n ${_cssProperty}: ${typeof desktop === 'number' ? `${desktop}${sizing ?? ''}` : desktop};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.tablet()`\n ${_cssProperty}: ${typeof tablet === 'number' ? `${tablet}${sizing ?? ''}` : tablet};\n `}\n ${SCREEN_SIZE_MAP_BY_DEVICE_ALIAS.mobile()`\n ${_cssProperty}: ${typeof mobile === 'number' ? `${mobile}${sizing ?? ''}` : mobile};\n `}\n `\n }\n\n if (Array.isArray(prop) && prop.length === 6 && typeof _cssProperty === 'string') {\n const [xl, l, m, s, xs, xxs] = prop\n return css`\n ${SCREEN_SIZE_MAP.XL()`\n ${_cssProperty}: ${typeof xl === 'number' ? `${xl}${sizing ?? ''}` : xl};\n `}\n ${SCREEN_SIZE_MAP.L()`\n ${_cssProperty}: ${typeof l === 'number' ? `${l}${sizing ?? ''}` : l};\n `}\n ${SCREEN_SIZE_MAP.M()`\n ${_cssProperty}: ${typeof m === 'number' ? `${m}${sizing ?? ''}` : m};\n `}\n ${SCREEN_SIZE_MAP.S()`\n ${_cssProperty}: ${typeof s === 'number' ? `${s}${sizing ?? ''}` : s};\n `}\n ${SCREEN_SIZE_MAP.XS()`\n ${_cssProperty}: ${typeof xs === 'number' ? `${xs}${sizing ?? ''}` : xs};\n `}\n ${SCREEN_SIZE_MAP.XXS()`\n ${_cssProperty}: ${typeof xxs === 'number' ? `${xxs}${sizing ?? ''}` : xxs};\n `}\n `\n }\n\n if (typeof prop === 'number') {\n return css`\n ${_cssProperty}: ${prop}${sizing ?? null};\n `\n }\n\n if (typeof prop === 'string') {\n return css`\n ${_cssProperty}: ${prop};\n `\n }\n\n return null\n }\n"],"names":["property","value","r","e","o","cssProperty","sizing","sizes","arguments","length","sizeMap","getLatinSizeMapByCssProperty","includes","css","SCREEN_SIZE_MAP","XXS","screenMaxXxs","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinL","SCREEN_SIZE_MAP_BY_DEVICE_ALIAS","desktop","screenMinM","tablet","mobile","responsiveNamedProperty","_ref","predefinedSizes","customSizeHandler","sort","desktopFirst","Object","keys","map","size","undefined","_size","buildMediaQuery","getMediaQueryByResponsiveProp","filter","Boolean","item","responsiveProperty","propName","props","_props$propName","prop","_cssProperty","Array","isArray","_templateObject","_taggedTemplateLiteral","concat","_templateObject2","_templateObject3","xl","l","m","s","xs","xxs","_templateObject4","_templateObject6","_templateObject9"],"mappings":"+YAuDaA,EACX,SACEC,EADFC,EAAAC,EAAAC,GAAA,IAEEC,+BAFFH,EAAAA,EAE6B,OAF7B,IAGEI,+BAHFH,EAAAA,EAG0B,KAH1B,IAIEI,EAJFC,UAAAC,OAAA,EAAAL,OAAA,EAAA,MAMA,IACA,KACE,GAAqB,kBAAVH,EACT,MAA8B,mBAAhBI,EAA6BA,EAAY,GAAK,KAG9D,IAAMK,EAAUH,MAAAA,EAAAA,EAASI,EAA6BN,GAEtD,MAA2B,mBAAhBA,EACFA,EAA6B,iBAAVJ,EAAqBA,EAAQS,EAAQT,IAG5C,iBAAVA,GAAsB,CAAC,OAAQ,UAAW,WAAWW,SAASX,GAChEY,EAAP,CAAA,GAAA,IAAA,KACIR,EAAgBJ,GAGfY,EACHR,CAAAA,GAAAA,IAAAA,GAAAA,KAAAA,EAAiC,iBAAVJ,GAAsBS,EAAQT,GAASS,EAAQT,GAASA,EAAQK,MAAAA,EAAAA,EAAU,MAIzG,IAAMQ,EAA2E,CAC/EC,IAAKC,EACLC,GAAIC,EACJC,EAAGC,EACHC,EAAGC,EACHC,EAAGC,EACHC,GAAIC,GAGN,IAAMC,EAA+F,CACnGC,QAASC,EACTC,OAAQR,EACRS,OAAQX,GAqBH,IAAMY,EACXC,IAAA,IAA4B1B,MAC1BA,EAD0B2B,gBAE1BA,EAF0B7B,YAG1BA,EAAc,OAHYC,OAI1BA,EAAS,KAJiB6B,kBAK1BA,EAL0BC,KAM1BA,EAAOC,GANTJ,EAAA,MAQA,IACA,IACyBK,OAAOC,KAAKhC,GAChC6B,KAAKA,GACLI,KAAKC,IACJ,QAAoBC,IAAhBnC,EAAMkC,GAAqB,CAC7B,IAAME,EACyB,mBAAtBR,EAAmCA,EAAkB5B,EAAMkC,IAASlC,EAAMkC,GAEnF,OAAOG,EAAgBD,EAAOtC,EAAawC,EAA8BJ,GAAOnC,EAAQ4B,GAE1F,OAAO,QAERY,OAAOC,SACPP,KACEQ,GACCnC,EACImC,CAAAA,GAAAA,IAAAA,UAeDC,EACX,SAACC,EAAD/C,EAAAC,GAAA,IAAmBC,+BAAnBF,EAAAA,EAAgD,KAAhD,IAAsDG,+BAAtDF,EAAAA,EAA8E,KAA9E,MACA,IAEC+C,IAAe,IAAAC,EACd,IAAMC,UAAkCF,EAAAA,EAAMD,UAAAA,QAAa,KAC3D,IAAMI,EAAejD,MAAAA,EAAAA,EAAe6C,EACpC,IAAKG,EAAM,OAAO,KAElB,GAAIE,MAAMC,QAAQH,IAAyB,IAAhBA,EAAK5C,OAAc,CAC5C,IAAOmB,EAASE,EAAQC,GAAUsB,EAClC,OAAOxC,EAAP,CAAA,GAAA,IAAA,IAAA,IACIc,EAAgCC,SAAhCD,CADJ8B,IAAAA,EAAAC,EAAA,CAAA,eAAA,KAAA,iBAEMJ,EAAoC,iBAAZ1B,EAAP,GAAA+B,OAAiC/B,GAAUtB,OAAAA,MAAAA,EAAAA,EAAU,IAAOsB,GAE/ED,EAAgCG,QAAhCH,CAJJiC,IAAAA,EAAAF,EAAA,CAAA,eAAA,KAAA,iBAKMJ,EAAmC,iBAAXxB,EAAP,GAAA6B,OAAgC7B,GAAhC6B,OAAyCrD,MAAAA,EAAAA,EAAU,IAAOwB,GAE7EH,EAAgCI,QAAhCJ,CAPJkC,IAAAA,EAAAH,EAAA,CAAA,eAAA,KAAA,iBAQMJ,EAAmC,iBAAXvB,YAAyBA,GAAhC4B,OAAyCrD,MAAAA,EAAAA,EAAU,IAAOyB,IAKnF,GAAIwB,MAAMC,QAAQH,IAAyB,IAAhBA,EAAK5C,QAAwC,iBAAjB6C,EAA2B,CAChF,IAAOQ,EAAIC,EAAGC,EAAGC,EAAGC,EAAIC,GAAOd,EAC/B,OAAOxC,EAAP,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IACIC,EAAgBW,IAAhBX,CADJsD,IAAAA,EAAAV,EAAA,CAAA,iBAAA,KAAA,mBAEQJ,EAA+B,iBAAPQ,YAAqBA,GAA5BH,OAAiCrD,MAAAA,EAAAA,EAAU,IAAOwD,GAEvEhD,EAAgBS,GAAhBT,CACIwC,IAAAA,EAAAA,EAAAA,CAAAA,iBAAAA,KAAAA,mBAAAA,EAA8B,iBAANS,EAAoBA,GAAAA,OAAAA,GAAIzD,OAAAA,MAAAA,EAAAA,EAAU,IAAOyD,GAEnEjD,EAAgBO,GAAhBP,CAPNuD,IAAAA,EAAAX,EAAA,CAAA,iBAAA,KAAA,mBAQQJ,EAA8B,iBAANU,EAAP,GAAAL,OAA2BK,GAA3BL,OAA+BrD,MAAAA,EAAAA,EAAU,IAAO0D,GAEnElD,EAAgBK,GAAhBL,mDACEwC,EAA8B,iBAANW,EAAoBA,GAAAA,OAAAA,UAAI3D,MAAAA,EAAAA,EAAU,IAAO2D,GAEnEnD,EAAgBG,IAAhBH,CACEwC,IAAAA,EAAAA,EAAAA,CAAAA,iBAAAA,KAAAA,mBAAAA,EAA+B,iBAAPY,EAAqBA,GAAAA,OAAAA,GAAK5D,OAAAA,MAAAA,EAAAA,EAAU,IAAO4D,GAErEpD,EAAgBC,KAAhBD,CAhBNwD,IAAAA,EAAAZ,EAAA,CAAA,iBAAA,KAAA,mBAiBQJ,EAAgC,iBAARa,YAAsBA,GAA7BR,OAAmCrD,MAAAA,EAAAA,EAAU,IAAO6D,IAK/E,MAAoB,iBAATd,EACFxC,EAAP,CAAA,GAAA,IAAA,GAAA,KACIyC,EAAiBD,EAAO/C,MAAAA,EAAAA,EAAU,MAIpB,iBAAT+C,EACFxC,EAAP,CAAA,GAAA,IAAA,KACIyC,EAAiBD,GAIhB"}
|
package/mixins/screen.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screen.js","sources":["../../../src/mixins/screen.ts"],"sourcesContent":["import { css } from 'styled-components'\nimport type { CSSObject, ThemeProps, DefaultTheme, SimpleInterpolation, Interpolation } from 'styled-components'\nimport { theme } from '../theme'\n\ntype StyledComponentProps = {\n theme?: { breakpoints?: typeof theme.breakpoints }\n}\n\ntype MediaQueryParams = {\n and?: string\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n condition?: (_props: any) => boolean\n}\n\nconst CONDITIONS = (() => {\n const maxWidth = (breakpoints: typeof theme.breakpoints, point: string) =>\n `(max-width: ${breakpoints[point] - 0.02}px)`\n const minWidth = (breakpoints: typeof theme.breakpoints, point: string) => `(min-width: ${breakpoints[point]}px)`\n\n return {\n MAX: maxWidth,\n MIN: minWidth,\n RANGE: (breakpoints: typeof theme.breakpoints, point1: string, point2: string) =>\n `${minWidth(breakpoints, point1)} and ${maxWidth(breakpoints, point2)}`,\n }\n})()\n\nconst createMediaQuery =\n (condition: (_breakpoints: typeof theme.breakpoints, ..._points: string[]) => string, ...points: string[]) =>\n (params?: MediaQueryParams) =>\n <T extends object>(...args: [CSSObject | TemplateStringsArray, ...Interpolation<T & ThemeProps<DefaultTheme>>[]]) =>\n (props: StyledComponentProps) => {\n const breakpoints = props.theme?.breakpoints ?? theme.breakpoints\n\n if (params !== undefined && typeof params.condition === 'function' && params.condition(props) === false) {\n return css``\n }\n\n return css<T>`\n @media screen and ${condition(breakpoints, ...points)} ${params !== undefined && typeof params.and === 'string'\n ? `and ${params.and}`\n : ``} {\n ${css<T>(...args)}\n }\n `\n }\n\n/**\n * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`\n */\nexport const screenXs = createMediaQuery(CONDITIONS.RANGE, 'xxs', 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`\n */\nexport const screenS = createMediaQuery(CONDITIONS.RANGE, 'xs', 's')\n\n/**\n * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`\n */\nexport const screenM = createMediaQuery(CONDITIONS.RANGE, 's', 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`\n */\nexport const screenL = createMediaQuery(CONDITIONS.RANGE, 'm', 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`\n */\nexport const screenXl = createMediaQuery(CONDITIONS.RANGE, 'l', 'xl')\n\n/**\n * @return `@media screen and (max-width: 319px) { ...args }`\n */\nexport const screenMaxXxs = createMediaQuery(CONDITIONS.MAX, 'xxs')\n\n/**\n * @return `@media screen and (max-width: 374px) { ...args }`\n */\nexport const screenMaxXs = createMediaQuery(CONDITIONS.MAX, 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) { ...args }`\n */\nexport const screenMinXs = createMediaQuery(CONDITIONS.MIN, 'xs')\n\n/**\n * @return `@media screen and (max-width: 767px) { ...args }`\n */\nexport const screenMaxS = createMediaQuery(CONDITIONS.MAX, 's')\n\n/**\n * @return `@media screen and (min-width: 768px) { ...args }`\n */\nexport const screenMinS = createMediaQuery(CONDITIONS.MIN, 's')\n\n/**\n * @return `@media screen and (max-width: 1023px) { ...args }`\n */\nexport const screenMaxM = createMediaQuery(CONDITIONS.MAX, 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) { ...args }`\n */\nexport const screenMinM = createMediaQuery(CONDITIONS.MIN, 'm')\n\n/**\n * @return `@media screen and (max-width: 1279px) { ...args }`\n */\nexport const screenMaxL = createMediaQuery(CONDITIONS.MAX, 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) { ...args }`\n */\nexport const screenMinL = createMediaQuery(CONDITIONS.MIN, 'l')\n\n/**\n * @return `@media screen and (max-width: 1439px) { ...args }`\n */\nexport const screenMaxXl = createMediaQuery(CONDITIONS.MAX, 'xl')\n\n/**\n * @return `@media screen and (min-width: 1440px) { ...args }`\n */\nexport const screenMinXl = createMediaQuery(CONDITIONS.MIN, 'xl')\n\n/**\n * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`\n */\nexport const screenRetina = (...args: [CSSObject | TemplateStringsArray, SimpleInterpolation]) => css`\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n ${css(...args)}\n }\n`\n"],"names":["CONDITIONS","MAX","maxWidth","breakpoints","point","MIN","minWidth","concat","RANGE","point1","point2","createMediaQuery","condition","_len","arguments","length","points","Array","_key","params","_len2","args","_key2","props","_props$theme$breakpoi","_props$theme","theme","css","undefined","and","screenXs","screenS","screenM","screenL","screenXl","screenMaxXxs","screenMaxXs","screenMinXs","screenMaxS","screenMinS","screenMaxM","screenMinM","screenMaxL","screenMinL","screenMaxXl","screenMinXl","screenRetina"],"mappings":"6MAcA,IAAMA,EAKG,CACLC,IALIC,EAAW,CAACC,EAAuCC,IACxCD,eAAAA,OAAAA,EAAYC,GAAS,IADtC,OAMEC,IAJIC,EAAW,CAACH,EAAuCC,IAAxC,eAAAG,OAAyEJ,EAAYC,GAAtG,OAKEI,MAAO,CAACL,EAAuCM,EAAgBC,cAC1DJ,EAASH,EAAaM,GAAeP,SAAAA,OAAAA,EAASC,EAAaO,KATjD,IACXR,EAEAI,EAUR,IAAMK,EACJ,SAACC,GAAD,IAAA,IAAAC,EAAAC,UAAAC,OAAyFC,EAAzF,IAAAC,MAAAJ,EAAA,EAAAA,EAAA,EAAA,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAyFF,EAAzFE,EAAA,GAAAJ,UAAAI,GAAA,OACCC,GACD,WAAA,IAAA,IAAAC,EAAAN,UAAAC,OAAsBM,EAAtB,IAAAJ,MAAAG,GAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAsBD,EAAtBC,GAAAR,UAAAQ,GAAA,OACCC,IAAgC,IAAAC,EAAAC,EAC/B,IAAMtB,EAAW,QAAGoB,EAAA,QAAAA,EAAAA,EAAMG,iBAAND,OAAAA,EAAAA,EAAatB,mBAAhB,IAAAqB,EAAAA,EAA+BE,EAAMvB,YAEtD,YAAA,IAAIgB,GAAoD,mBAArBA,EAAOP,YAAwD,IAA5BO,EAAOP,UAAUW,GAC9EI,EAAP,CAAA,KAGKA,EAAP,CAAA,qBAAA,IAAA,IAAA,KACsBf,EAAUT,KAAgBa,QAAsBY,IAAXT,GAA8C,iBAAfA,EAAOU,IAAtC,OAAAtB,OAC5CY,EAAOU,KADqC,GAGrDF,KAAUN,OAQPS,IAAAA,EAAWnB,EAAiBX,EAAWQ,MAAO,MAAO,MAKrDuB,IAAAA,EAAUpB,EAAiBX,EAAWQ,MAAO,KAAM,KAKnDwB,IAAAA,EAAUrB,EAAiBX,EAAWQ,MAAO,IAAK,KAKlDyB,IAAAA,EAAUtB,EAAiBX,EAAWQ,MAAO,IAAK,KAKlD0B,IAAAA,EAAWvB,EAAiBX,EAAWQ,MAAO,IAAK,MAKzD,IAAM2B,EAAexB,EAAiBX,EAAWC,IAAK,OAKtD,IAAMmC,EAAczB,EAAiBX,EAAWC,IAAK,MAKrD,IAAMoC,EAAc1B,EAAiBX,EAAWK,IAAK,MAKrD,IAAMiC,EAAa3B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMsC,EAAa5B,EAAiBX,EAAWK,IAAK,KAKpD,IAAMmC,EAAa7B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMwC,EAAa9B,EAAiBX,EAAWK,IAAK,KAKpD,IAAMqC,EAAa/B,EAAiBX,EAAWC,IAAK,KAKpD,IAAM0C,EAAahC,EAAiBX,EAAWK,IAAK,KAKpD,IAAMuC,EAAcjC,EAAiBX,EAAWC,IAAK,MAKrD,IAAM4C,EAAclC,EAAiBX,EAAWK,IAAK,MAK/CyC,IAAAA,EAAe,WAAA,OAAsEnB,EAAtE,CAAA,qEAAA,KAEtBA"}
|
|
1
|
+
{"version":3,"file":"screen.js","sources":["../../../src/mixins/screen.ts"],"sourcesContent":["import { css } from 'styled-components'\nimport type { CSSObject, ThemeProps, DefaultTheme, SimpleInterpolation, Interpolation } from 'styled-components'\nimport { theme } from '../theme'\n\ntype StyledComponentProps = {\n theme?: { breakpoints?: typeof theme.breakpoints }\n}\n\ntype MediaQueryParams = {\n and?: string\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n condition?: (_props: any) => boolean\n}\n\nconst CONDITIONS = (() => {\n const maxWidth = (breakpoints: typeof theme.breakpoints, point: string) =>\n `(max-width: ${breakpoints[point] - 0.02}px)`\n const minWidth = (breakpoints: typeof theme.breakpoints, point: string) => `(min-width: ${breakpoints[point]}px)`\n\n return {\n MAX: maxWidth,\n MIN: minWidth,\n RANGE: (breakpoints: typeof theme.breakpoints, point1: string, point2: string) =>\n `${minWidth(breakpoints, point1)} and ${maxWidth(breakpoints, point2)}`,\n }\n})()\n\nconst createMediaQuery =\n (condition: (_breakpoints: typeof theme.breakpoints, ..._points: string[]) => string, ...points: string[]) =>\n (params?: MediaQueryParams) =>\n <T extends object>(...args: [CSSObject | TemplateStringsArray, ...Interpolation<T & ThemeProps<DefaultTheme>>[]]) =>\n (props: StyledComponentProps) => {\n const breakpoints = props.theme?.breakpoints ?? theme.breakpoints\n\n if (params !== undefined && typeof params.condition === 'function' && params.condition(props) === false) {\n return css``\n }\n\n return css<T>`\n @media screen and ${condition(breakpoints, ...points)} ${params !== undefined && typeof params.and === 'string'\n ? `and ${params.and}`\n : ``} {\n ${css<T>(...args)}\n }\n `\n }\n\n/**\n * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`\n */\nexport const screenXs = createMediaQuery(CONDITIONS.RANGE, 'xxs', 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`\n */\nexport const screenS = createMediaQuery(CONDITIONS.RANGE, 'xs', 's')\n\n/**\n * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`\n */\nexport const screenM = createMediaQuery(CONDITIONS.RANGE, 's', 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`\n */\nexport const screenL = createMediaQuery(CONDITIONS.RANGE, 'm', 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`\n */\nexport const screenXl = createMediaQuery(CONDITIONS.RANGE, 'l', 'xl')\n\n/**\n * @return `@media screen and (max-width: 319px) { ...args }`\n */\nexport const screenMaxXxs = createMediaQuery(CONDITIONS.MAX, 'xxs')\n\n/**\n * @return `@media screen and (max-width: 374px) { ...args }`\n */\nexport const screenMaxXs = createMediaQuery(CONDITIONS.MAX, 'xs')\n\n/**\n * @return `@media screen and (min-width: 375px) { ...args }`\n */\nexport const screenMinXs = createMediaQuery(CONDITIONS.MIN, 'xs')\n\n/**\n * @return `@media screen and (max-width: 767px) { ...args }`\n */\nexport const screenMaxS = createMediaQuery(CONDITIONS.MAX, 's')\n\n/**\n * @return `@media screen and (min-width: 768px) { ...args }`\n */\nexport const screenMinS = createMediaQuery(CONDITIONS.MIN, 's')\n\n/**\n * @return `@media screen and (max-width: 1023px) { ...args }`\n */\nexport const screenMaxM = createMediaQuery(CONDITIONS.MAX, 'm')\n\n/**\n * @return `@media screen and (min-width: 1024px) { ...args }`\n */\nexport const screenMinM = createMediaQuery(CONDITIONS.MIN, 'm')\n\n/**\n * @return `@media screen and (max-width: 1279px) { ...args }`\n */\nexport const screenMaxL = createMediaQuery(CONDITIONS.MAX, 'l')\n\n/**\n * @return `@media screen and (min-width: 1280px) { ...args }`\n */\nexport const screenMinL = createMediaQuery(CONDITIONS.MIN, 'l')\n\n/**\n * @return `@media screen and (max-width: 1439px) { ...args }`\n */\nexport const screenMaxXl = createMediaQuery(CONDITIONS.MAX, 'xl')\n\n/**\n * @return `@media screen and (min-width: 1440px) { ...args }`\n */\nexport const screenMinXl = createMediaQuery(CONDITIONS.MIN, 'xl')\n\n/**\n * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`\n */\nexport const screenRetina = (...args: [CSSObject | TemplateStringsArray, SimpleInterpolation]) => css`\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n ${css(...args)}\n }\n`\n\nexport type MediaQuery = ReturnType<typeof createMediaQuery>\n"],"names":["CONDITIONS","MAX","maxWidth","breakpoints","point","MIN","minWidth","concat","RANGE","point1","point2","createMediaQuery","condition","_len","arguments","length","points","Array","_key","params","_len2","args","_key2","props","_props$theme$breakpoi","_props$theme","theme","css","undefined","and","screenXs","screenS","screenM","screenL","screenXl","screenMaxXxs","screenMaxXs","screenMinXs","screenMaxS","screenMinS","screenMaxM","screenMinM","screenMaxL","screenMinL","screenMaxXl","screenMinXl","screenRetina"],"mappings":"6MAcA,IAAMA,EAKG,CACLC,IALIC,EAAW,CAACC,EAAuCC,IACxCD,eAAAA,OAAAA,EAAYC,GAAS,IADtC,OAMEC,IAJIC,EAAW,CAACH,EAAuCC,IAAxC,eAAAG,OAAyEJ,EAAYC,GAAtG,OAKEI,MAAO,CAACL,EAAuCM,EAAgBC,cAC1DJ,EAASH,EAAaM,GAAeP,SAAAA,OAAAA,EAASC,EAAaO,KATjD,IACXR,EAEAI,EAUR,IAAMK,EACJ,SAACC,GAAD,IAAA,IAAAC,EAAAC,UAAAC,OAAyFC,EAAzF,IAAAC,MAAAJ,EAAA,EAAAA,EAAA,EAAA,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAyFF,EAAzFE,EAAA,GAAAJ,UAAAI,GAAA,OACCC,GACD,WAAA,IAAA,IAAAC,EAAAN,UAAAC,OAAsBM,EAAtB,IAAAJ,MAAAG,GAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAsBD,EAAtBC,GAAAR,UAAAQ,GAAA,OACCC,IAAgC,IAAAC,EAAAC,EAC/B,IAAMtB,EAAW,QAAGoB,EAAA,QAAAA,EAAAA,EAAMG,iBAAND,OAAAA,EAAAA,EAAatB,mBAAhB,IAAAqB,EAAAA,EAA+BE,EAAMvB,YAEtD,YAAA,IAAIgB,GAAoD,mBAArBA,EAAOP,YAAwD,IAA5BO,EAAOP,UAAUW,GAC9EI,EAAP,CAAA,KAGKA,EAAP,CAAA,qBAAA,IAAA,IAAA,KACsBf,EAAUT,KAAgBa,QAAsBY,IAAXT,GAA8C,iBAAfA,EAAOU,IAAtC,OAAAtB,OAC5CY,EAAOU,KADqC,GAGrDF,KAAUN,OAQPS,IAAAA,EAAWnB,EAAiBX,EAAWQ,MAAO,MAAO,MAKrDuB,IAAAA,EAAUpB,EAAiBX,EAAWQ,MAAO,KAAM,KAKnDwB,IAAAA,EAAUrB,EAAiBX,EAAWQ,MAAO,IAAK,KAKlDyB,IAAAA,EAAUtB,EAAiBX,EAAWQ,MAAO,IAAK,KAKlD0B,IAAAA,EAAWvB,EAAiBX,EAAWQ,MAAO,IAAK,MAKzD,IAAM2B,EAAexB,EAAiBX,EAAWC,IAAK,OAKtD,IAAMmC,EAAczB,EAAiBX,EAAWC,IAAK,MAKrD,IAAMoC,EAAc1B,EAAiBX,EAAWK,IAAK,MAKrD,IAAMiC,EAAa3B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMsC,EAAa5B,EAAiBX,EAAWK,IAAK,KAKpD,IAAMmC,EAAa7B,EAAiBX,EAAWC,IAAK,KAKpD,IAAMwC,EAAa9B,EAAiBX,EAAWK,IAAK,KAKpD,IAAMqC,EAAa/B,EAAiBX,EAAWC,IAAK,KAKpD,IAAM0C,EAAahC,EAAiBX,EAAWK,IAAK,KAKpD,IAAMuC,EAAcjC,EAAiBX,EAAWC,IAAK,MAKrD,IAAM4C,EAAclC,EAAiBX,EAAWK,IAAK,MAK/CyC,IAAAA,EAAe,WAAA,OAAsEnB,EAAtE,CAAA,qEAAA,KAEtBA"}
|
package/mixins/shared.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as
|
|
1
|
+
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as s}from'styled-components';import{screenMaxXxs as r,screenMaxXs as n,screenMaxS as x,screenMaxM as t,screenMinL as a,screenMaxL as i}from'./screen.js';var l,d;var o=Object.freeze({xxxl:44,xxl:40,xl:36,l:28,m:24,s:20,xs:16,xxs:8,xxxs:4});var v=Object.freeze({xxxl:24,xxl:22,xl:20,l:18,m:16,s:14,xs:12,xxs:10,xxxs:8});var f=['xl','l','m','s','xs','xxs'];var p=['xxs','xs','s','m','l','xl'];function u(e){return'string'==typeof e&&'font-size'===e?v:o}function m(r,n,x,t,a){var i;var o=null!=a?a:u(n);var v='string'==typeof r&&null!==(i=o[r])&&void 0!==i?i:r;if('function'==typeof n){var f=n(v,t);return s(["",""],x()(l||(l=e(["\n ","\n "])),f))}return s(["",""],x()(d||(d=e(["\n ",": ","",";\n "])),n,v,'string'==typeof v?'':null!=t?t:''))}var c=e=>e.endsWith('XXS')?'xxs':e.endsWith('XS')?'xs':e.endsWith('S')?'s':e.endsWith('M')?'m':e.endsWith('XL')?'xl':e.endsWith('L')?'l':null;var h=(e,s)=>{var r=c(e);var n=c(s);return r&&n?f.findIndex((e=>e===r))<f.findIndex((e=>e===n))?-1:1:0};var M=(e,s)=>{var r=c(e);var n=c(s);return r&&n?p.findIndex((e=>e===r))<p.findIndex((e=>e===n))?-1:1:0};var S=e=>e.endsWith('XXS')?r:e.endsWith('XS')?n:e.endsWith('S')?x:e.endsWith('M')?t:e.endsWith('XL')?a:i;export{v as FONT_SIZES_LATIN,o as SIZES_LATIN,m as buildMediaQuery,h as desktopFirst,u as getLatinSizeMapByCssProperty,S as getMediaQueryByResponsiveProp,M as mobileFirst};
|
|
2
2
|
//# sourceMappingURL=shared.js.map
|
package/mixins/shared.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.js","sources":["../../../src/mixins/shared.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport {
|
|
1
|
+
{"version":3,"file":"shared.js","sources":["../../../src/mixins/shared.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport type { Size } from 'shared/interfaces'\nimport { screenXs, screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinL, screenMaxXxs } from './screen'\nimport type { MediaQuery } from './screen'\n\nexport const SIZES_LATIN: Readonly<Record<Size, number>> = Object.freeze({\n xxxl: 44,\n xxl: 40,\n xl: 36,\n l: 28,\n m: 24,\n s: 20,\n xs: 16,\n xxs: 8,\n xxxs: 4,\n})\n\n// eslint-disable-next-line no-unused-vars\nexport const FONT_SIZES_LATIN: Readonly<Record<Size, number>> = Object.freeze({\n xxxl: 24,\n xxl: 22,\n xl: 20,\n l: 18,\n m: 16,\n s: 14,\n xs: 12,\n xxs: 10,\n xxxs: 8,\n})\n\nconst DESKTOP_FIRST_KEYS = ['xl', 'l', 'm', 's', 'xs', 'xxs']\nconst MOBILE_FIRST_KEYS = ['xxs', 'xs', 's', 'm', 'l', 'xl']\n\nexport function getLatinSizeMapByCssProperty<T>(cssProperty: T) {\n if (typeof cssProperty === 'string' && cssProperty === 'font-size') return FONT_SIZES_LATIN\n return SIZES_LATIN\n}\n\nexport function buildMediaQuery(\n value: number | Size | 'auto' | 'initial' | 'inherit' | boolean,\n property:\n | string\n | ((\n _size: number | 'auto' | 'initial' | 'inherit' | boolean,\n _sizing?: null | string\n ) => FlattenSimpleInterpolation | null),\n screenQueryFunction: typeof screenXs,\n sizing: null | string,\n sizes?: Record<Size, number>\n): ReturnType<typeof css> {\n const sizeMap = sizes ?? getLatinSizeMapByCssProperty(property)\n\n const size: number | 'auto' | 'initial' | 'inherit' | boolean =\n typeof value === 'string' ? sizeMap[value] ?? value : value\n\n if (typeof property === 'function') {\n const value = property(size, sizing)\n return css`\n ${screenQueryFunction()`\n ${value}\n `}\n `\n }\n\n return css`\n ${screenQueryFunction()`\n ${property}: ${size as string}${typeof size === 'string' ? '' : sizing ?? ''};\n `}\n `\n}\n\nconst getKey = (key: string): 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | null => {\n if (key.endsWith('XXS')) return 'xxs'\n if (key.endsWith('XS')) return 'xs'\n if (key.endsWith('S')) return 's'\n if (key.endsWith('M')) return 'm'\n if (key.endsWith('XL')) return 'xl'\n if (key.endsWith('L')) return 'l'\n return null\n}\n\nexport const desktopFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = DESKTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = DESKTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\nexport const mobileFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\nexport const getMediaQueryByResponsiveProp = (prop: string): MediaQuery => {\n if (prop.endsWith('XXS')) return screenMaxXxs\n if (prop.endsWith('XS')) return screenMaxXs\n if (prop.endsWith('S')) return screenMaxS\n if (prop.endsWith('M')) return screenMaxM\n if (prop.endsWith('XL')) return screenMinL\n return screenMaxL\n}\n"],"names":["SIZES_LATIN","Object","freeze","xxxl","xxl","xl","l","m","s","xs","xxs","xxxs","FONT_SIZES_LATIN","DESKTOP_FIRST_KEYS","MOBILE_FIRST_KEYS","getLatinSizeMapByCssProperty","cssProperty","buildMediaQuery","value","property","screenQueryFunction","sizing","sizes","_sizeMap$value","sizeMap","size","css","getKey","key","endsWith","desktopFirst","a","b","aKey","bKey","findIndex","el","mobileFirst","getMediaQueryByResponsiveProp","prop","screenMaxXxs","screenMaxXs","screenMaxS","screenMaxM","screenMinL","screenMaxL"],"mappings":"4OAKaA,EAA8CC,OAAOC,OAAO,CACvEC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,EACLC,KAAM,QAIKC,EAAmDX,OAAOC,OAAO,CAC5EC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,GACLC,KAAM,IAGR,IAAME,EAAqB,CAAC,KAAM,IAAK,IAAK,IAAK,KAAM,OACvD,IAAMC,EAAoB,CAAC,MAAO,KAAM,IAAK,IAAK,IAAK,MAEhD,SAASC,EAAgCC,GAC9C,MAA2B,iBAAhBA,GAA4C,cAAhBA,EAAoCJ,EACpEZ,EAGF,SAASiB,EACdC,EACAC,EAMAC,EACAC,EACAC,GACwB,IAAAC,EACxB,IAAMC,EAAUF,MAAAA,EAAAA,EAASP,EAA6BI,GAEtD,IAAMM,EACa,iBAAVP,GAAuCA,QAA9CK,EAA4BC,EAAQN,UAAAA,IAAUA,EAAAA,EAAQA,EAExD,GAAwB,mBAAbC,EAAyB,CAClC,IAAMD,EAAQC,EAASM,EAAMJ,GAC7B,OAAOK,EAAP,CAAA,GAAA,IACIN,GAAAA,qCACEF,IAKR,OAAOQ,UACHN,GAAAA,0CACED,EAAaM,EAAiC,iBAATA,EAAoB,GAAKJ,MAAAA,EAAAA,EAAU,KAKhF,IAAMM,EAAUC,GACVA,EAAIC,SAAS,OAAe,MAC5BD,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IACvB,SAGIC,EAAe,CAACC,EAAWC,KACtC,IAAMC,EAAON,EAAOI,GACpB,IAAMG,EAAOP,EAAOK,GACpB,OAAKC,GAASC,EAECrB,EAAmBsB,WAAWC,GAAOA,IAAOH,IAC5CpB,EAAmBsB,WAAWC,GAAOA,IAAOF,KAEjC,EAAI,EALH,OAQhBG,EAAc,CAACN,EAAWC,KACrC,IAAMC,EAAON,EAAOI,GACpB,IAAMG,EAAOP,EAAOK,GACpB,OAAKC,GAASC,EAECpB,EAAkBqB,WAAWC,GAAOA,IAAOH,IAC3CnB,EAAkBqB,WAAWC,GAAOA,IAAOF,KAEhC,EAAI,EALH,GAQhBI,IAAAA,EAAiCC,GACxCA,EAAKV,SAAS,OAAeW,EAC7BD,EAAKV,SAAS,MAAcY,EAC5BF,EAAKV,SAAS,KAAaa,EAC3BH,EAAKV,SAAS,KAAac,EAC3BJ,EAAKV,SAAS,MAAce,EACzBC"}
|
package/mixins/sizing.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import{css as r}from'styled-components';import{desktopFirst as s,getMediaQueryByResponsiveProp as i}from'./shared.js';import{screenMinM as a,screenMaxM as n,screenMaxS as t,screenMinL as o,screenMaxL as c,screenMaxXs as p,screenMaxXxs as v}from'./screen.js';var z,l;var m=/^size(XXS|XS|S|M|L|XL)$/;var y=[a,n,t];var f=[o,c,n,t,p,v];var u=function(e,r,s,i,a){var n;var t=arguments.length>2&&void 0!==s?s:'fontSize';var o=arguments.length>3&&void 0!==i?i:'px';var c=arguments.length>4?a:void 0;if('number'==typeof e){var p='function'==typeof c?c(e,t,o):{[t]:"".concat(e).concat(o)};return p}return null!==(n=r[e])&&void 0!==n?n:{}};var d=a=>{if(Array.isArray(a.size)){var n=a.size.length>y.length?f:y;return r(["",""],a.size.map(((r,s)=>{var i=n[s];return'function'==typeof i?i()(z||(z=e(["",""])),u(r,a.sizes,a.sizeProperty,a.sizeUnits,a.dynamicSizeDeclaration)):null})))}return r(["",""],[u(a.size,a.sizes,a.sizeProperty,a.sizeUnits,a.dynamicSizeDeclaration),...Object.keys(a).filter((e=>m.test(e))).sort(s).map((r=>i(r)()(l||(l=e(["",""])),u(a[r],a.sizes,a.sizeProperty,a.sizeUnits,a.dynamicSizeDeclaration))))])};export{d as responsiveSizing};
|
|
2
|
+
//# sourceMappingURL=sizing.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizing.js","sources":["../../../src/mixins/sizing.ts"],"sourcesContent":["import { css } from 'styled-components'\nimport type { ThemedStyledProps, DefaultTheme, CSSObject, FlattenInterpolation, ThemeProps } from 'styled-components'\nimport type { CSSProperties } from 'react'\nimport { getMediaQueryByResponsiveProp, desktopFirst } from 'mixins/shared'\nimport type { MediaQuery } from 'mixins/screen'\nimport { screenMinM, screenMaxM, screenMaxS, screenMinL, screenMaxL, screenMaxXs, screenMaxXxs } from 'mixins/screen'\nimport type { ResponsiveSizeProps, ResponsiveInterpolationProps, SizeValue, CSSUnit, Sizes } from 'shared/interfaces'\n\nconst responsiveSizePropRegExp = /^size(XXS|XS|S|M|L|XL)$/\n\nconst DEVICE_MEDIA_QUERIES: [desktop: MediaQuery, tablet: MediaQuery, mobile: MediaQuery] = [\n screenMinM,\n screenMaxM,\n screenMaxS,\n]\n\nconst BREAKPOINTS_MEDIA_QUERIES: [\n xl: MediaQuery,\n l: MediaQuery,\n m: MediaQuery,\n s: MediaQuery,\n xs: MediaQuery,\n xxs: MediaQuery\n] = [screenMinL, screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMaxXxs]\n\nconst buildSizeCSSDeclarations = (\n size: SizeValue,\n sizes: Partial<Sizes>,\n cssProperty: keyof CSSProperties = 'fontSize',\n cssUnit: CSSUnit = 'px',\n dynamicDeclaration?: (size: number, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties\n): CSSObject => {\n if (typeof size === 'number') {\n const declarations =\n typeof dynamicDeclaration === 'function'\n ? dynamicDeclaration(size, cssProperty, cssUnit)\n : { [cssProperty]: `${size}${cssUnit}` }\n\n return declarations as CSSObject\n }\n return (sizes[size] ?? {}) as CSSObject\n}\n\n/**\n *\n * Mixin enables support for responsive sizing in styled component\n */\nconst responsiveSizing = (\n props: ThemedStyledProps<ResponsiveInterpolationProps<ResponsiveSizeProps>, DefaultTheme>\n): FlattenInterpolation<ThemeProps<DefaultTheme>> => {\n if (Array.isArray(props.size)) {\n const queries: MediaQuery[] =\n props.size.length > DEVICE_MEDIA_QUERIES.length ? BREAKPOINTS_MEDIA_QUERIES : DEVICE_MEDIA_QUERIES\n\n return css`\n ${props.size.map((size, idx) => {\n const mediaQuery: MediaQuery | void = queries[idx]\n\n return typeof mediaQuery === 'function'\n ? mediaQuery()`${buildSizeCSSDeclarations(\n size,\n props.sizes,\n props.sizeProperty,\n props.sizeUnits,\n props.dynamicSizeDeclaration\n )}`\n : null\n })}\n `\n } else {\n return css`\n ${[\n buildSizeCSSDeclarations(\n props.size,\n props.sizes,\n props.sizeProperty,\n props.sizeUnits,\n props.dynamicSizeDeclaration\n ),\n ...Object.keys(props)\n .filter((prop) => responsiveSizePropRegExp.test(prop))\n .sort(desktopFirst)\n .map(\n (sizeProp) =>\n getMediaQueryByResponsiveProp(sizeProp)()`${buildSizeCSSDeclarations(\n props[sizeProp],\n props.sizes,\n props.sizeProperty,\n props.sizeUnits,\n props.dynamicSizeDeclaration\n )}`\n ),\n ]}\n `\n }\n}\n\nexport { responsiveSizing }\n"],"names":["responsiveSizePropRegExp","DEVICE_MEDIA_QUERIES","screenMinM","screenMaxM","screenMaxS","BREAKPOINTS_MEDIA_QUERIES","screenMinL","screenMaxL","screenMaxXs","screenMaxXxs","buildSizeCSSDeclarations","size","sizes","i","t","n","_sizes$size","cssProperty","cssUnit","dynamicDeclaration","arguments","length","declarations","concat","responsiveSizing","props","Array","isArray","queries","css","map","idx","mediaQuery","_templateObject","_taggedTemplateLiteral","sizeProperty","sizeUnits","dynamicSizeDeclaration","Object","keys","filter","prop","test","sort","desktopFirst","sizeProp","getMediaQueryByResponsiveProp"],"mappings":"sUAQA,IAAMA,EAA2B,0BAEjC,IAAMC,EAAsF,CAC1FC,EACAC,EACAC,GAGF,IAAMC,EAOF,CAACC,EAAYC,EAAYJ,EAAYC,EAAYI,EAAaC,GAElE,IAAMC,EAA2B,SAC/BC,EACAC,EAF+BC,EAAAC,EAAAC,GAMjB,IAAAC,EAAA,IAHdC,+BAH+BJ,EAAAA,EAGI,WAGrB,IAFdK,+BAJ+BJ,EAAAA,EAIZ,KAEL,IADdK,EACcC,UAAAC,OAAA,EANiBN,OAAA,EAO/B,GAAoB,iBAATJ,EAAmB,CAC5B,IAAMW,EAC0B,mBAAvBH,EACHA,EAAmBR,EAAMM,EAAaC,GACtC,CAAED,CAACA,GAAD,GAAAM,OAAkBZ,GAAlBY,OAAyBL,IAEjC,OAAOI,EAET,eAAAN,EAAQJ,EAAMD,kBAAS,IAOnBa,IAAAA,EACJC,IAEA,GAAIC,MAAMC,QAAQF,EAAMd,MAAO,CAC7B,IAAMiB,EACJH,EAAMd,KAAKU,OAASpB,EAAqBoB,OAAShB,EAA4BJ,EAEhF,OAAO4B,EAAP,CAAA,GAAA,IACIJ,EAAMd,KAAKmB,KAAI,CAACnB,EAAMoB,KACtB,IAAMC,EAAgCJ,EAAQG,GAE9C,MAA6B,mBAAfC,EACVA,GAAAA,CADGC,IAAAA,EAAAC,EAAA,CAAA,GAAA,MACYxB,EACbC,EACAc,EAAMb,MACNa,EAAMU,aACNV,EAAMW,UACNX,EAAMY,yBAER,SAIR,OAAOR,EACH,CAAA,GAAA,IAAA,CACAnB,EACEe,EAAMd,KACNc,EAAMb,MACNa,EAAMU,aACNV,EAAMW,UACNX,EAAMY,2BAELC,OAAOC,KAAKd,GACZe,QAAQC,GAASzC,EAAyB0C,KAAKD,KAC/CE,KAAKC,GACLd,KACEe,GACCC,EAA8BD,EAA9BC,EAAAA,mBAA4CpC,EAC1Ce,EAAMoB,GACNpB,EAAMb,MACNa,EAAMU,aACNV,EAAMW,UACNX,EAAMY"}
|
package/package.json
CHANGED