@foxford/ui 2.9.0 → 2.9.1-beta-edfc6c0-20230906

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.
@@ -1 +1 @@
1
- {"version":3,"file":"screen.js","sources":["../../../src/mixins/screen.ts"],"sourcesContent":["import { css, CSSObject, SimpleInterpolation } 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 (...args: [CSSObject | TemplateStringsArray, ...SimpleInterpolation[]]) =>\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`\n @media screen and ${condition(breakpoints, ...points)} ${params !== undefined && typeof params.and === 'string'\n ? `and ${params.and}`\n : ``} {\n ${css(...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":"6MAaA,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,OAAIM,EAAJ,IAAAJ,MAAAG,GAAAE,EAAA,EAAAA,EAAAF,EAAAE,IAAID,EAAJC,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,KAAON,OAQJS,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"],"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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@foxford/ui",
3
- "version": "2.9.0",
3
+ "version": "2.9.1-beta-edfc6c0-20230906",
4
4
  "description": "UI components library",
5
5
  "main": "index.cjs.js",
6
6
  "module": "index.js",
@@ -84,3 +84,4 @@
84
84
  "ui-kit"
85
85
  ]
86
86
  }
87
+