@xanui/core 1.1.3 → 1.1.5
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/ServerStyleTags.js +3 -2
- package/ServerStyleTags.js.map +1 -7
- package/ServerStyleTags.mjs +3 -0
- package/ServerStyleTags.mjs.map +1 -0
- package/Tag/cssPropList.js +186 -2
- package/Tag/cssPropList.js.map +1 -7
- package/Tag/cssPropList.mjs +186 -0
- package/Tag/cssPropList.mjs.map +1 -0
- package/Tag/index.js +6 -2
- package/Tag/index.js.map +1 -7
- package/Tag/index.mjs +6 -0
- package/Tag/index.mjs.map +1 -0
- package/Tag/useTagProps.js +21 -2
- package/Tag/useTagProps.js.map +1 -7
- package/Tag/useTagProps.mjs +21 -0
- package/Tag/useTagProps.mjs.map +1 -0
- package/Transition/index.js +93 -2
- package/Transition/index.js.map +1 -7
- package/Transition/index.mjs +93 -0
- package/Transition/index.mjs.map +1 -0
- package/Transition/variants.js +158 -2
- package/Transition/variants.js.map +1 -7
- package/Transition/variants.mjs +158 -0
- package/Transition/variants.mjs.map +1 -0
- package/breakpoint/BreakpointProvider.js +43 -0
- package/breakpoint/BreakpointProvider.js.map +1 -0
- package/breakpoint/BreakpointProvider.mjs +43 -0
- package/breakpoint/BreakpointProvider.mjs.map +1 -0
- package/breakpoint/useBreakpoint.js +23 -2
- package/breakpoint/useBreakpoint.js.map +1 -7
- package/breakpoint/useBreakpoint.mjs +23 -0
- package/breakpoint/useBreakpoint.mjs.map +1 -0
- package/breakpoint/useBreakpointProps.js +42 -2
- package/breakpoint/useBreakpointProps.js.map +1 -7
- package/breakpoint/useBreakpointProps.mjs +42 -0
- package/breakpoint/useBreakpointProps.mjs.map +1 -0
- package/css/aliases.js +29 -2
- package/css/aliases.js.map +1 -7
- package/css/aliases.mjs +29 -0
- package/css/aliases.mjs.map +1 -0
- package/css/getProps.js +32 -2
- package/css/getProps.js.map +1 -7
- package/css/getProps.mjs +32 -0
- package/css/getProps.mjs.map +1 -0
- package/css/getValue.js +92 -2
- package/css/getValue.js.map +1 -7
- package/css/getValue.mjs +92 -0
- package/css/getValue.mjs.map +1 -0
- package/css/index.js +55 -2
- package/css/index.js.map +1 -7
- package/css/index.mjs +55 -0
- package/css/index.mjs.map +1 -0
- package/index.d.ts +629 -21
- package/index.js +1 -2
- package/index.js.map +1 -7
- package/index.mjs +1 -0
- package/index.mjs.map +1 -0
- package/isWindow.js +1 -2
- package/isWindow.js.map +1 -7
- package/isWindow.mjs +1 -0
- package/isWindow.mjs.map +1 -0
- package/package.json +29 -24
- package/theme/ThemeCssVars.js +5 -2
- package/theme/ThemeCssVars.js.map +1 -7
- package/theme/ThemeCssVars.mjs +5 -0
- package/theme/ThemeCssVars.mjs.map +1 -0
- package/theme/ThemeDefaultOptions.js +131 -2
- package/theme/ThemeDefaultOptions.js.map +1 -7
- package/theme/ThemeDefaultOptions.mjs +131 -0
- package/theme/ThemeDefaultOptions.mjs.map +1 -0
- package/theme/ThemeProvider.js +88 -2
- package/theme/ThemeProvider.js.map +1 -7
- package/theme/ThemeProvider.mjs +88 -0
- package/theme/ThemeProvider.mjs.map +1 -0
- package/theme/core.js +18 -2
- package/theme/core.js.map +1 -7
- package/theme/core.mjs +18 -0
- package/theme/core.mjs.map +1 -0
- package/theme/createColor.js +46 -2
- package/theme/createColor.js.map +1 -7
- package/theme/createColor.mjs +46 -0
- package/theme/createColor.mjs.map +1 -0
- package/theme/createTheme.js +21 -2
- package/theme/createTheme.js.map +1 -7
- package/theme/createTheme.mjs +21 -0
- package/theme/createTheme.mjs.map +1 -0
- package/theme/createThemeSwitcher.js +12 -2
- package/theme/createThemeSwitcher.js.map +1 -7
- package/theme/createThemeSwitcher.mjs +12 -0
- package/theme/createThemeSwitcher.mjs.map +1 -0
- package/theme/index.js +2 -2
- package/theme/index.js.map +1 -7
- package/theme/index.mjs +2 -0
- package/theme/index.mjs.map +1 -0
- package/useAnimation.js +25 -2
- package/useAnimation.js.map +1 -7
- package/useAnimation.mjs +25 -0
- package/useAnimation.mjs.map +1 -0
- package/useColorTemplate.js +6 -2
- package/useColorTemplate.js.map +1 -7
- package/useColorTemplate.mjs +6 -0
- package/useColorTemplate.mjs.map +1 -0
- package/useInterface.js +8 -2
- package/useInterface.js.map +1 -7
- package/useInterface.mjs +8 -0
- package/useInterface.mjs.map +1 -0
- package/ServerStyleTags.d.ts +0 -3
- package/Tag/cssPropList.d.ts +0 -2
- package/Tag/index.d.ts +0 -4
- package/Tag/types.d.ts +0 -179
- package/Tag/types.js +0 -1
- package/Tag/types.js.map +0 -7
- package/Tag/useTagProps.d.ts +0 -3
- package/Transition/index.d.ts +0 -31
- package/Transition/variants.d.ts +0 -131
- package/breakpoint/index.d.ts +0 -6
- package/breakpoint/index.js +0 -2
- package/breakpoint/index.js.map +0 -7
- package/breakpoint/useBreakpoint.d.ts +0 -10
- package/breakpoint/useBreakpointProps.d.ts +0 -6
- package/cjs/ServerStyleTags.js +0 -2
- package/cjs/ServerStyleTags.js.map +0 -7
- package/cjs/Tag/cssPropList.js +0 -2
- package/cjs/Tag/cssPropList.js.map +0 -7
- package/cjs/Tag/index.js +0 -2
- package/cjs/Tag/index.js.map +0 -7
- package/cjs/Tag/types.js +0 -2
- package/cjs/Tag/types.js.map +0 -7
- package/cjs/Tag/useTagProps.js +0 -2
- package/cjs/Tag/useTagProps.js.map +0 -7
- package/cjs/Transition/index.js +0 -2
- package/cjs/Transition/index.js.map +0 -7
- package/cjs/Transition/variants.js +0 -2
- package/cjs/Transition/variants.js.map +0 -7
- package/cjs/breakpoint/index.js +0 -2
- package/cjs/breakpoint/index.js.map +0 -7
- package/cjs/breakpoint/useBreakpoint.js +0 -2
- package/cjs/breakpoint/useBreakpoint.js.map +0 -7
- package/cjs/breakpoint/useBreakpointProps.js +0 -2
- package/cjs/breakpoint/useBreakpointProps.js.map +0 -7
- package/cjs/css/aliases.js +0 -2
- package/cjs/css/aliases.js.map +0 -7
- package/cjs/css/getProps.js +0 -2
- package/cjs/css/getProps.js.map +0 -7
- package/cjs/css/getValue.js +0 -2
- package/cjs/css/getValue.js.map +0 -7
- package/cjs/css/index.js +0 -2
- package/cjs/css/index.js.map +0 -7
- package/cjs/css/types.js +0 -2
- package/cjs/css/types.js.map +0 -7
- package/cjs/index.js +0 -2
- package/cjs/index.js.map +0 -7
- package/cjs/isWindow.js +0 -2
- package/cjs/isWindow.js.map +0 -7
- package/cjs/theme/ThemeCssVars.js +0 -2
- package/cjs/theme/ThemeCssVars.js.map +0 -7
- package/cjs/theme/ThemeDefaultOptions.js +0 -2
- package/cjs/theme/ThemeDefaultOptions.js.map +0 -7
- package/cjs/theme/ThemeProvider.js +0 -2
- package/cjs/theme/ThemeProvider.js.map +0 -7
- package/cjs/theme/core.js +0 -2
- package/cjs/theme/core.js.map +0 -7
- package/cjs/theme/createColor.js +0 -2
- package/cjs/theme/createColor.js.map +0 -7
- package/cjs/theme/createTheme.js +0 -2
- package/cjs/theme/createTheme.js.map +0 -7
- package/cjs/theme/createThemeSwitcher.js +0 -2
- package/cjs/theme/createThemeSwitcher.js.map +0 -7
- package/cjs/theme/index.js +0 -2
- package/cjs/theme/index.js.map +0 -7
- package/cjs/theme/types.js +0 -2
- package/cjs/theme/types.js.map +0 -7
- package/cjs/useAnimation.js +0 -2
- package/cjs/useAnimation.js.map +0 -7
- package/cjs/useColorTemplate.js +0 -2
- package/cjs/useColorTemplate.js.map +0 -7
- package/cjs/useInterface.js +0 -2
- package/cjs/useInterface.js.map +0 -7
- package/css/aliases.d.ts +0 -4
- package/css/getProps.d.ts +0 -3
- package/css/getValue.d.ts +0 -3
- package/css/index.d.ts +0 -15
- package/css/types.d.ts +0 -54
- package/css/types.js +0 -1
- package/css/types.js.map +0 -7
- package/isWindow.d.ts +0 -2
- package/theme/ThemeCssVars.d.ts +0 -3
- package/theme/ThemeDefaultOptions.d.ts +0 -68
- package/theme/ThemeProvider.d.ts +0 -11
- package/theme/core.d.ts +0 -7
- package/theme/createColor.d.ts +0 -41
- package/theme/createTheme.d.ts +0 -2
- package/theme/createThemeSwitcher.d.ts +0 -6
- package/theme/index.d.ts +0 -5
- package/theme/types.d.ts +0 -124
- package/theme/types.js +0 -1
- package/theme/types.js.map +0 -7
- package/useAnimation.d.ts +0 -18
- package/useColorTemplate.d.ts +0 -4
- package/useInterface.d.ts +0 -2
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const BreakpointCtx = React.createContext("xl");
|
|
2
|
+
const getKey = () => {
|
|
3
|
+
const isWin = isWindow();
|
|
4
|
+
if (isWin) {
|
|
5
|
+
const width = window.innerWidth;
|
|
6
|
+
if (width < index.breakpoints.sm) {
|
|
7
|
+
return 'xs';
|
|
8
|
+
}
|
|
9
|
+
else if (width > index.breakpoints.xs && width < index.breakpoints.md) {
|
|
10
|
+
return 'sm';
|
|
11
|
+
}
|
|
12
|
+
else if (width > index.breakpoints.sm && width < index.breakpoints.lg) {
|
|
13
|
+
return 'md';
|
|
14
|
+
}
|
|
15
|
+
else if (width > index.breakpoints.md && width < index.breakpoints.xl) {
|
|
16
|
+
return 'lg';
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
return 'xl';
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
return 'xl';
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const BreakpointProvider = ({ children }) => {
|
|
27
|
+
const [current, setCurrent] = React.useState(getKey);
|
|
28
|
+
const handler = () => {
|
|
29
|
+
let c = getKey();
|
|
30
|
+
if (current !== c) {
|
|
31
|
+
setCurrent(c);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
React.useEffect(() => {
|
|
35
|
+
window.removeEventListener("resize", handler);
|
|
36
|
+
window.addEventListener("resize", handler);
|
|
37
|
+
handler();
|
|
38
|
+
return () => {
|
|
39
|
+
window.removeEventListener("resize", handler);
|
|
40
|
+
};
|
|
41
|
+
}, [current]);
|
|
42
|
+
return (React.createElement(BreakpointCtx.Provider, { value: current }, children));
|
|
43
|
+
};exports.BreakpointCtx=BreakpointCtx;exports.BreakpointProvider=BreakpointProvider;//# sourceMappingURL=BreakpointProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["import React, { ReactNode, useState } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\")\n\nconst getKey = (): BreakpointKeys => {\n const isWin = isWindow()\n if (isWin) {\n const width = window.innerWidth\n if (width < breakpoints.sm) {\n return 'xs'\n } else if (width > breakpoints.xs && width < breakpoints.md) {\n return 'sm'\n } else if (width > breakpoints.sm && width < breakpoints.lg) {\n return 'md'\n } else if (width > breakpoints.md && width < breakpoints.xl) {\n return 'lg'\n } else {\n return 'xl'\n }\n } else {\n return 'xl'\n }\n}\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n const [current, setCurrent] = useState<BreakpointKeys>(getKey)\n\n const handler = () => {\n let c = getKey()\n if (current !== c) {\n setCurrent(c)\n }\n }\n\n React.useEffect(() => {\n window.removeEventListener(\"resize\", handler)\n window.addEventListener(\"resize\", handler)\n handler()\n return () => {\n window.removeEventListener(\"resize\", handler)\n }\n }, [current])\n\n return (\n <BreakpointCtx.Provider value={current}>\n {children}\n </BreakpointCtx.Provider>\n )\n}\n"],"names":["breakpoints","useState"],"mappings":"qKAKa,MAAA,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiB,IAAI;AAErE,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,KAAK,EAAE;AACP,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAC/B,QAAA,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACxB,YAAA,OAAO,IAAI;AACd;aAAM,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;AACd;aAAM,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;AACd;aAAM,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,IAAI,KAAK,GAAGA,iBAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;AACd;AAAM,aAAA;AACH,YAAA,OAAO,IAAI;AACd;AACJ;AAAM,SAAA;AACH,QAAA,OAAO,IAAI;AACd;AACL,CAAC;MAEY,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAiB,MAAM,CAAC;IAE9D,MAAM,OAAO,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,GAAG,MAAM,EAAE;QAChB,IAAI,OAAO,KAAK,CAAC,EAAE;YACf,UAAU,CAAC,CAAC,CAAC;AAChB;AACL,KAAC;AAED,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC7C,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC1C,QAAA,OAAO,EAAE;AACT,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AACjD,SAAC;AACL,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,EACjC,QAAQ,CACY;AAEjC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React__default,{useState}from'react';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const BreakpointCtx = React__default.createContext("xl");
|
|
2
|
+
const getKey = () => {
|
|
3
|
+
const isWin = isWindow();
|
|
4
|
+
if (isWin) {
|
|
5
|
+
const width = window.innerWidth;
|
|
6
|
+
if (width < breakpoints.sm) {
|
|
7
|
+
return 'xs';
|
|
8
|
+
}
|
|
9
|
+
else if (width > breakpoints.xs && width < breakpoints.md) {
|
|
10
|
+
return 'sm';
|
|
11
|
+
}
|
|
12
|
+
else if (width > breakpoints.sm && width < breakpoints.lg) {
|
|
13
|
+
return 'md';
|
|
14
|
+
}
|
|
15
|
+
else if (width > breakpoints.md && width < breakpoints.xl) {
|
|
16
|
+
return 'lg';
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
return 'xl';
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
return 'xl';
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const BreakpointProvider = ({ children }) => {
|
|
27
|
+
const [current, setCurrent] = useState(getKey);
|
|
28
|
+
const handler = () => {
|
|
29
|
+
let c = getKey();
|
|
30
|
+
if (current !== c) {
|
|
31
|
+
setCurrent(c);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
React__default.useEffect(() => {
|
|
35
|
+
window.removeEventListener("resize", handler);
|
|
36
|
+
window.addEventListener("resize", handler);
|
|
37
|
+
handler();
|
|
38
|
+
return () => {
|
|
39
|
+
window.removeEventListener("resize", handler);
|
|
40
|
+
};
|
|
41
|
+
}, [current]);
|
|
42
|
+
return (React__default.createElement(BreakpointCtx.Provider, { value: current }, children));
|
|
43
|
+
};export{BreakpointCtx,BreakpointProvider};//# sourceMappingURL=BreakpointProvider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreakpointProvider.mjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["import React, { ReactNode, useState } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\")\n\nconst getKey = (): BreakpointKeys => {\n const isWin = isWindow()\n if (isWin) {\n const width = window.innerWidth\n if (width < breakpoints.sm) {\n return 'xs'\n } else if (width > breakpoints.xs && width < breakpoints.md) {\n return 'sm'\n } else if (width > breakpoints.sm && width < breakpoints.lg) {\n return 'md'\n } else if (width > breakpoints.md && width < breakpoints.xl) {\n return 'lg'\n } else {\n return 'xl'\n }\n } else {\n return 'xl'\n }\n}\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n const [current, setCurrent] = useState<BreakpointKeys>(getKey)\n\n const handler = () => {\n let c = getKey()\n if (current !== c) {\n setCurrent(c)\n }\n }\n\n React.useEffect(() => {\n window.removeEventListener(\"resize\", handler)\n window.addEventListener(\"resize\", handler)\n handler()\n return () => {\n window.removeEventListener(\"resize\", handler)\n }\n }, [current])\n\n return (\n <BreakpointCtx.Provider value={current}>\n {children}\n </BreakpointCtx.Provider>\n )\n}\n"],"names":["React"],"mappings":"6HAKa,MAAA,aAAa,GAAGA,cAAK,CAAC,aAAa,CAAiB,IAAI;AAErE,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,KAAK,EAAE;AACP,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAC/B,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACxB,YAAA,OAAO,IAAI;AACd;aAAM,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;AACd;aAAM,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;AACd;aAAM,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,IAAI,KAAK,GAAG,WAAW,CAAC,EAAE,EAAE;AACzD,YAAA,OAAO,IAAI;AACd;AAAM,aAAA;AACH,YAAA,OAAO,IAAI;AACd;AACJ;AAAM,SAAA;AACH,QAAA,OAAO,IAAI;AACd;AACL,CAAC;MAEY,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAA4B,KAAI;IACzE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,MAAM,CAAC;IAE9D,MAAM,OAAO,GAAG,MAAK;AACjB,QAAA,IAAI,CAAC,GAAG,MAAM,EAAE;QAChB,IAAI,OAAO,KAAK,CAAC,EAAE;YACf,UAAU,CAAC,CAAC,CAAC;AAChB;AACL,KAAC;AAED,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC7C,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC1C,QAAA,OAAO,EAAE;AACT,QAAA,OAAO,MAAK;AACR,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AACjD,SAAC;AACL,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,EACjC,QAAQ,CACY;AAEjC"}
|
|
@@ -1,2 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
'use strict';var React=require('react'),BreakpointProvider=require('./BreakpointProvider.js'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const useBreakpoint = () => {
|
|
2
|
+
const val = React.useContext(BreakpointProvider.BreakpointCtx);
|
|
3
|
+
const isWin = isWindow();
|
|
4
|
+
const o = {
|
|
5
|
+
value: val,
|
|
6
|
+
is: (key) => val === key,
|
|
7
|
+
isDown: (key) => {
|
|
8
|
+
if (isWin) {
|
|
9
|
+
return window.innerWidth > index.breakpoints[key];
|
|
10
|
+
}
|
|
11
|
+
return false;
|
|
12
|
+
},
|
|
13
|
+
isUp: (key) => {
|
|
14
|
+
if (isWin) {
|
|
15
|
+
return window.innerWidth < index.breakpoints[key];
|
|
16
|
+
}
|
|
17
|
+
return false;
|
|
18
|
+
},
|
|
19
|
+
isOrDown: (key) => o.is(key) || o.isDown(key),
|
|
20
|
+
isOrUp: (key) => o.is(key) || o.isUp(key)
|
|
21
|
+
};
|
|
22
|
+
return o;
|
|
23
|
+
};module.exports=useBreakpoint;//# sourceMappingURL=useBreakpoint.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/breakpoint/useBreakpoint.ts"],
|
|
4
|
-
"sourcesContent": ["import { useContext } from \"react\"\nimport { BreakpointCtx } from \".\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const val = useContext(BreakpointCtx)\n const isWin = isWindow()\n const o = {\n value: val,\n is: (key: BreakpointKeys) => val === key,\n isDown: (key: BreakpointKeys) => {\n if (isWin) {\n return window.innerWidth > breakpoints[key]\n }\n return false\n },\n isUp: (key: BreakpointKeys) => {\n if (isWin) {\n return window.innerWidth < breakpoints[key]\n }\n return false\n },\n isOrDown: (key: BreakpointKeys) => o.is(key) || o.isDown(key),\n isOrUp: (key: BreakpointKeys) => o.is(key) || o.isUp(key)\n }\n return o\n}\n\nexport default useBreakpoint\n"],
|
|
5
|
-
"mappings": "AAAA,OAAS,cAAAA,MAAkB,QAC3B,OAAS,iBAAAC,MAAqB,IAC9B,OAAOC,MAAc,cACrB,OAAS,eAAAC,MAAmB,SAG5B,MAAMC,EAAgB,IAAM,CACzB,MAAMC,EAAML,EAAWC,CAAa,EAC9BK,EAAQJ,EAAS,EACjBK,EAAI,CACP,MAAOF,EACP,GAAKG,GAAwBH,IAAQG,EACrC,OAASA,GACFF,EACM,OAAO,WAAaH,EAAYK,CAAG,EAEtC,GAEV,KAAOA,GACAF,EACM,OAAO,WAAaH,EAAYK,CAAG,EAEtC,GAEV,SAAWA,GAAwBD,EAAE,GAAGC,CAAG,GAAKD,EAAE,OAAOC,CAAG,EAC5D,OAASA,GAAwBD,EAAE,GAAGC,CAAG,GAAKD,EAAE,KAAKC,CAAG,CAC3D,EACA,OAAOD,CACV,EAEA,IAAOE,EAAQL",
|
|
6
|
-
"names": ["useContext", "BreakpointCtx", "isWindow", "breakpoints", "useBreakpoint", "val", "isWin", "o", "key", "useBreakpoint_default"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const val = useContext(BreakpointCtx)\n const isWin = isWindow()\n const o = {\n value: val,\n is: (key: BreakpointKeys) => val === key,\n isDown: (key: BreakpointKeys) => {\n if (isWin) {\n return window.innerWidth > breakpoints[key]\n }\n return false\n },\n isUp: (key: BreakpointKeys) => {\n if (isWin) {\n return window.innerWidth < breakpoints[key]\n }\n return false\n },\n isOrDown: (key: BreakpointKeys) => o.is(key) || o.isDown(key),\n isOrUp: (key: BreakpointKeys) => o.is(key) || o.isUp(key)\n }\n return o\n}\n\nexport default useBreakpoint\n"],"names":["useContext","BreakpointCtx","breakpoints"],"mappings":"kKAMM,MAAA,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,GAAG,GAAGA,gBAAU,CAACC,gCAAa,CAAC;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,CAAC,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;QACV,EAAE,EAAE,CAAC,GAAmB,KAAK,GAAG,KAAK,GAAG;AACxC,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAI;AAC7B,YAAA,IAAI,KAAK,EAAE;gBACR,OAAO,MAAM,CAAC,UAAU,GAAGC,iBAAW,CAAC,GAAG,CAAC;AAC7C;AACD,YAAA,OAAO,KAAK;SACd;AACD,QAAA,IAAI,EAAE,CAAC,GAAmB,KAAI;AAC3B,YAAA,IAAI,KAAK,EAAE;gBACR,OAAO,MAAM,CAAC,UAAU,GAAGA,iBAAW,CAAC,GAAG,CAAC;AAC7C;AACD,YAAA,OAAO,KAAK;SACd;AACD,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;AAC7D,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG;KAC1D;AACD,IAAA,OAAO,CAAC;AACX"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import {useContext}from'react';import {BreakpointCtx}from'./BreakpointProvider.mjs';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const useBreakpoint = () => {
|
|
2
|
+
const val = useContext(BreakpointCtx);
|
|
3
|
+
const isWin = isWindow();
|
|
4
|
+
const o = {
|
|
5
|
+
value: val,
|
|
6
|
+
is: (key) => val === key,
|
|
7
|
+
isDown: (key) => {
|
|
8
|
+
if (isWin) {
|
|
9
|
+
return window.innerWidth > breakpoints[key];
|
|
10
|
+
}
|
|
11
|
+
return false;
|
|
12
|
+
},
|
|
13
|
+
isUp: (key) => {
|
|
14
|
+
if (isWin) {
|
|
15
|
+
return window.innerWidth < breakpoints[key];
|
|
16
|
+
}
|
|
17
|
+
return false;
|
|
18
|
+
},
|
|
19
|
+
isOrDown: (key) => o.is(key) || o.isDown(key),
|
|
20
|
+
isOrUp: (key) => o.is(key) || o.isUp(key)
|
|
21
|
+
};
|
|
22
|
+
return o;
|
|
23
|
+
};export{useBreakpoint as default};//# sourceMappingURL=useBreakpoint.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpoint.mjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n const val = useContext(BreakpointCtx)\n const isWin = isWindow()\n const o = {\n value: val,\n is: (key: BreakpointKeys) => val === key,\n isDown: (key: BreakpointKeys) => {\n if (isWin) {\n return window.innerWidth > breakpoints[key]\n }\n return false\n },\n isUp: (key: BreakpointKeys) => {\n if (isWin) {\n return window.innerWidth < breakpoints[key]\n }\n return false\n },\n isOrDown: (key: BreakpointKeys) => o.is(key) || o.isDown(key),\n isOrUp: (key: BreakpointKeys) => o.is(key) || o.isUp(key)\n }\n return o\n}\n\nexport default useBreakpoint\n"],"names":[],"mappings":"qKAMM,MAAA,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,CAAC;AACrC,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,CAAC,GAAG;AACP,QAAA,KAAK,EAAE,GAAG;QACV,EAAE,EAAE,CAAC,GAAmB,KAAK,GAAG,KAAK,GAAG;AACxC,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAI;AAC7B,YAAA,IAAI,KAAK,EAAE;gBACR,OAAO,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC;AAC7C;AACD,YAAA,OAAO,KAAK;SACd;AACD,QAAA,IAAI,EAAE,CAAC,GAAmB,KAAI;AAC3B,YAAA,IAAI,KAAK,EAAE;gBACR,OAAO,MAAM,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC;AAC7C;AACD,YAAA,OAAO,KAAK;SACd;AACD,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;AAC7D,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG;KAC1D;AACD,IAAA,OAAO,CAAC;AACX"}
|
|
@@ -1,2 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
'use strict';var React=require('react'),useBreakpoint=require('./useBreakpoint.js');const useBreakpoinProps = (props) => {
|
|
2
|
+
const bpoint = useBreakpoint();
|
|
3
|
+
const stringifiedElement = JSON.stringify(props, (key, value) => {
|
|
4
|
+
if (key === '_owner' || key === '_store') {
|
|
5
|
+
return undefined; // Skip circular references
|
|
6
|
+
}
|
|
7
|
+
return value;
|
|
8
|
+
}, 2);
|
|
9
|
+
let format = React.useMemo(() => {
|
|
10
|
+
const _format = {
|
|
11
|
+
xs: {},
|
|
12
|
+
sm: {},
|
|
13
|
+
md: {},
|
|
14
|
+
lg: {},
|
|
15
|
+
xl: {}
|
|
16
|
+
};
|
|
17
|
+
for (let prop in props) {
|
|
18
|
+
let val = props[prop];
|
|
19
|
+
if (!React.isValidElement(val) && typeof val === 'object') {
|
|
20
|
+
for (let breakpoin in val) {
|
|
21
|
+
_format[breakpoin][prop] = props[prop][breakpoin];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
_format.xs[prop] = props[prop];
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return _format;
|
|
29
|
+
}, [stringifiedElement, bpoint.value]);
|
|
30
|
+
return React.useMemo(() => {
|
|
31
|
+
let _props = format.xs || {};
|
|
32
|
+
for (let key of ['sm', 'md', 'lg', 'xl']) {
|
|
33
|
+
if (bpoint.isOrDown(key)) {
|
|
34
|
+
_props = Object.assign(Object.assign({}, _props), format[key]);
|
|
35
|
+
}
|
|
36
|
+
if (bpoint.is(key)) {
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return _props;
|
|
41
|
+
}, [format, bpoint.value]);
|
|
42
|
+
};module.exports=useBreakpoinProps;//# sourceMappingURL=useBreakpointProps.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/breakpoint/useBreakpointProps.ts"],
|
|
4
|
-
"sourcesContent": ["import React, { isValidElement } from \"react\"\nimport useBreakpoint from \"./useBreakpoint\"\nimport { BreakpointKeys } from \"../css/types\"\n\nexport type useBreakpointPropsType<P> = P | {\n [key in BreakpointKeys]?: P\n}\n\nconst useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {\n const bpoint = useBreakpoint()\n const stringifiedElement = JSON.stringify(props, (key, value) => {\n if (key === '_owner' || key === '_store') {\n return undefined; // Skip circular references\n }\n return value;\n }, 2);\n\n let format: any = React.useMemo(() => {\n\n const _format: any = {\n xs: {},\n sm: {},\n md: {},\n lg: {},\n xl: {}\n }\n for (let prop in props) {\n let val = (props as any)[prop]\n if (!isValidElement(val) && typeof val === 'object') {\n for (let breakpoin in val) {\n _format[breakpoin][prop] = (props as any)[prop][breakpoin]\n }\n } else {\n _format.xs[prop] = (props as any)[prop]\n }\n }\n\n return _format\n }, [stringifiedElement, bpoint.value])\n\n return React.useMemo(() => {\n let _props = format.xs || {};\n for (let key of ['sm', 'md', 'lg', 'xl']) {\n if (bpoint.isOrDown(key as any)) {\n _props = { ..._props, ...format[key] };\n }\n if (bpoint.is(key as any)) {\n break;\n }\n }\n return _props;\n }, [format, bpoint.value]);\n}\n\n\n\nexport default useBreakpoinProps"],
|
|
5
|
-
"mappings": "AAAA,OAAOA,GAAS,kBAAAC,MAAsB,QACtC,OAAOC,MAAmB,kBAO1B,MAAMC,EAAuCC,GAAgE,CAC1G,MAAMC,EAASH,EAAc,EACvBI,EAAqB,KAAK,UAAUF,EAAO,CAACG,EAAKC,IAAU,CAC9D,GAAI,EAAAD,IAAQ,UAAYA,IAAQ,UAGhC,OAAOC,CACV,EAAG,CAAC,EAEJ,IAAIC,EAAcT,EAAM,QAAQ,IAAM,CAEnC,MAAMU,EAAe,CAClB,GAAI,CAAC,EACL,GAAI,CAAC,EACL,GAAI,CAAC,EACL,GAAI,CAAC,EACL,GAAI,CAAC,CACR,EACA,QAASC,KAAQP,EAAO,CACrB,IAAIQ,EAAOR,EAAcO,CAAI,EAC7B,GAAI,CAACV,EAAeW,CAAG,GAAK,OAAOA,GAAQ,SACxC,QAASC,KAAaD,EACnBF,EAAQG,CAAS,EAAEF,CAAI,EAAKP,EAAcO,CAAI,EAAEE,CAAS,OAG5DH,EAAQ,GAAGC,CAAI,EAAKP,EAAcO,CAAI,CAE5C,CAEA,OAAOD,CACV,EAAG,CAACJ,EAAoBD,EAAO,KAAK,CAAC,EAErC,OAAOL,EAAM,QAAQ,IAAM,CACxB,IAAIc,EAASL,EAAO,IAAM,CAAC,EAC3B,QAASF,IAAO,CAAC,KAAM,KAAM,KAAM,IAAI,EAIpC,GAHIF,EAAO,SAASE,CAAU,IAC3BO,EAAS,CAAE,GAAGA,EAAQ,GAAGL,EAAOF,CAAG,CAAE,GAEpCF,EAAO,GAAGE,CAAU,EACrB,MAGN,OAAOO,CACV,EAAG,CAACL,EAAQJ,EAAO,KAAK,CAAC,CAC5B,EAIA,IAAOU,EAAQZ",
|
|
6
|
-
"names": ["React", "isValidElement", "useBreakpoint", "useBreakpoinProps", "props", "bpoint", "stringifiedElement", "key", "value", "format", "_format", "prop", "val", "breakpoin", "_props", "useBreakpointProps_default"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"useBreakpointProps.js","sources":["../../src/breakpoint/useBreakpointProps.ts"],"sourcesContent":["import React, { isValidElement } from \"react\"\nimport useBreakpoint from \"./useBreakpoint\"\nimport { BreakpointKeys } from \"../css/types\"\n\nexport type useBreakpointPropsType<P> = P | {\n [key in BreakpointKeys]?: P\n}\n\nconst useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {\n const bpoint = useBreakpoint()\n const stringifiedElement = JSON.stringify(props, (key, value) => {\n if (key === '_owner' || key === '_store') {\n return undefined; // Skip circular references\n }\n return value;\n }, 2);\n\n let format: any = React.useMemo(() => {\n\n const _format: any = {\n xs: {},\n sm: {},\n md: {},\n lg: {},\n xl: {}\n }\n for (let prop in props) {\n let val = (props as any)[prop]\n if (!isValidElement(val) && typeof val === 'object') {\n for (let breakpoin in val) {\n _format[breakpoin][prop] = (props as any)[prop][breakpoin]\n }\n } else {\n _format.xs[prop] = (props as any)[prop]\n }\n }\n\n return _format\n }, [stringifiedElement, bpoint.value])\n\n return React.useMemo(() => {\n let _props = format.xs || {};\n for (let key of ['sm', 'md', 'lg', 'xl']) {\n if (bpoint.isOrDown(key as any)) {\n _props = { ..._props, ...format[key] };\n }\n if (bpoint.is(key as any)) {\n break;\n }\n }\n return _props;\n }, [format, bpoint.value]);\n}\n\n\n\nexport default useBreakpoinProps"],"names":["isValidElement"],"mappings":"oFAQA,MAAM,iBAAiB,GAAG,CAAmB,KAAgC,KAA+B;AACzG,IAAA,MAAM,MAAM,GAAG,aAAa,EAAE;AAC9B,IAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AAC7D,QAAA,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,EAAE;YACvC,OAAO,SAAS,CAAC;AACnB;AACD,QAAA,OAAO,KAAK;KACd,EAAE,CAAC,CAAC;AAEL,IAAA,IAAI,MAAM,GAAQ,KAAK,CAAC,OAAO,CAAC,MAAK;AAElC,QAAA,MAAM,OAAO,GAAQ;AAClB,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE;SACN;AACD,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE;AACrB,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,IAAI,CAAC;YAC9B,IAAI,CAACA,oBAAc,CAAC,GAAG,CAAC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAClD,gBAAA,KAAK,IAAI,SAAS,IAAI,GAAG,EAAE;AACxB,oBAAA,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;AAC5D;AACH;AAAM,iBAAA;gBACJ,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;AACzC;AACH;AAED,QAAA,OAAO,OAAO;KAChB,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAEtC,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAK;AACvB,QAAA,IAAI,MAAM,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE;AAC5B,QAAA,KAAK,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;AACvC,YAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAU,CAAC,EAAE;gBAC9B,MAAM,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,MAAM,CAAK,EAAA,MAAM,CAAC,GAAG,CAAC,CAAE;AACxC;AACD,YAAA,IAAI,MAAM,CAAC,EAAE,CAAC,GAAU,CAAC,EAAE;gBACxB;AACF;AACH;AACD,QAAA,OAAO,MAAM;KACf,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAC7B"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React__default,{isValidElement}from'react';import useBreakpoint from'./useBreakpoint.mjs';const useBreakpoinProps = (props) => {
|
|
2
|
+
const bpoint = useBreakpoint();
|
|
3
|
+
const stringifiedElement = JSON.stringify(props, (key, value) => {
|
|
4
|
+
if (key === '_owner' || key === '_store') {
|
|
5
|
+
return undefined; // Skip circular references
|
|
6
|
+
}
|
|
7
|
+
return value;
|
|
8
|
+
}, 2);
|
|
9
|
+
let format = React__default.useMemo(() => {
|
|
10
|
+
const _format = {
|
|
11
|
+
xs: {},
|
|
12
|
+
sm: {},
|
|
13
|
+
md: {},
|
|
14
|
+
lg: {},
|
|
15
|
+
xl: {}
|
|
16
|
+
};
|
|
17
|
+
for (let prop in props) {
|
|
18
|
+
let val = props[prop];
|
|
19
|
+
if (!isValidElement(val) && typeof val === 'object') {
|
|
20
|
+
for (let breakpoin in val) {
|
|
21
|
+
_format[breakpoin][prop] = props[prop][breakpoin];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
_format.xs[prop] = props[prop];
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return _format;
|
|
29
|
+
}, [stringifiedElement, bpoint.value]);
|
|
30
|
+
return React__default.useMemo(() => {
|
|
31
|
+
let _props = format.xs || {};
|
|
32
|
+
for (let key of ['sm', 'md', 'lg', 'xl']) {
|
|
33
|
+
if (bpoint.isOrDown(key)) {
|
|
34
|
+
_props = Object.assign(Object.assign({}, _props), format[key]);
|
|
35
|
+
}
|
|
36
|
+
if (bpoint.is(key)) {
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return _props;
|
|
41
|
+
}, [format, bpoint.value]);
|
|
42
|
+
};export{useBreakpoinProps as default};//# sourceMappingURL=useBreakpointProps.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpointProps.mjs","sources":["../../src/breakpoint/useBreakpointProps.ts"],"sourcesContent":["import React, { isValidElement } from \"react\"\nimport useBreakpoint from \"./useBreakpoint\"\nimport { BreakpointKeys } from \"../css/types\"\n\nexport type useBreakpointPropsType<P> = P | {\n [key in BreakpointKeys]?: P\n}\n\nconst useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {\n const bpoint = useBreakpoint()\n const stringifiedElement = JSON.stringify(props, (key, value) => {\n if (key === '_owner' || key === '_store') {\n return undefined; // Skip circular references\n }\n return value;\n }, 2);\n\n let format: any = React.useMemo(() => {\n\n const _format: any = {\n xs: {},\n sm: {},\n md: {},\n lg: {},\n xl: {}\n }\n for (let prop in props) {\n let val = (props as any)[prop]\n if (!isValidElement(val) && typeof val === 'object') {\n for (let breakpoin in val) {\n _format[breakpoin][prop] = (props as any)[prop][breakpoin]\n }\n } else {\n _format.xs[prop] = (props as any)[prop]\n }\n }\n\n return _format\n }, [stringifiedElement, bpoint.value])\n\n return React.useMemo(() => {\n let _props = format.xs || {};\n for (let key of ['sm', 'md', 'lg', 'xl']) {\n if (bpoint.isOrDown(key as any)) {\n _props = { ..._props, ...format[key] };\n }\n if (bpoint.is(key as any)) {\n break;\n }\n }\n return _props;\n }, [format, bpoint.value]);\n}\n\n\n\nexport default useBreakpoinProps"],"names":["React"],"mappings":"iGAQA,MAAM,iBAAiB,GAAG,CAAmB,KAAgC,KAA+B;AACzG,IAAA,MAAM,MAAM,GAAG,aAAa,EAAE;AAC9B,IAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AAC7D,QAAA,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,EAAE;YACvC,OAAO,SAAS,CAAC;AACnB;AACD,QAAA,OAAO,KAAK;KACd,EAAE,CAAC,CAAC;AAEL,IAAA,IAAI,MAAM,GAAQA,cAAK,CAAC,OAAO,CAAC,MAAK;AAElC,QAAA,MAAM,OAAO,GAAQ;AAClB,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE;SACN;AACD,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE;AACrB,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAClD,gBAAA,KAAK,IAAI,SAAS,IAAI,GAAG,EAAE;AACxB,oBAAA,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;AAC5D;AACH;AAAM,iBAAA;gBACJ,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;AACzC;AACH;AAED,QAAA,OAAO,OAAO;KAChB,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAEtC,IAAA,OAAOA,cAAK,CAAC,OAAO,CAAC,MAAK;AACvB,QAAA,IAAI,MAAM,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE;AAC5B,QAAA,KAAK,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;AACvC,YAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAU,CAAC,EAAE;gBAC9B,MAAM,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,MAAM,CAAK,EAAA,MAAM,CAAC,GAAG,CAAC,CAAE;AACxC;AACD,YAAA,IAAI,MAAM,CAAC,EAAE,CAAC,GAAU,CAAC,EAAE;gBACxB;AACF;AACH;AACD,QAAA,OAAO,MAAM;KACf,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAC7B"}
|
package/css/aliases.js
CHANGED
|
@@ -1,2 +1,29 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
1
|
+
'use strict';const isStr = (v, or) => typeof v === 'string' ? v : or;
|
|
2
|
+
const aliases = {
|
|
3
|
+
bgcolor: (v) => ({ backgroundColor: v }),
|
|
4
|
+
bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
|
|
5
|
+
bg: (v) => ({ background: v }),
|
|
6
|
+
p: (v) => ({ padding: isStr(v, 8 * v) }),
|
|
7
|
+
pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
|
|
8
|
+
pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
|
|
9
|
+
pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
|
|
10
|
+
pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
|
|
11
|
+
px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
|
|
12
|
+
py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
|
|
13
|
+
m: (v) => ({ margin: isStr(v, 8 * v) }),
|
|
14
|
+
mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
|
|
15
|
+
mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
|
|
16
|
+
mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
|
|
17
|
+
ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
|
|
18
|
+
mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
|
|
19
|
+
my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
|
|
20
|
+
radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
21
|
+
borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
22
|
+
shadow: (v) => ({ boxShadow: v }),
|
|
23
|
+
flexBox: (v) => (v ? { display: "flex" } : {}),
|
|
24
|
+
flexRow: (v) => (v ? { flexDirection: "row" } : {}),
|
|
25
|
+
flexColumn: (v) => (v ? { flexDirection: "column" } : {}),
|
|
26
|
+
flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
|
|
27
|
+
direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
|
|
28
|
+
gap: (v) => ({ gap: isStr(v, 8 * v) }),
|
|
29
|
+
};module.exports=aliases;//# sourceMappingURL=aliases.js.map
|
package/css/aliases.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/css/aliases.ts"],
|
|
4
|
-
"sourcesContent": ["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\n bg: (v) => ({ background: v }),\n p: (v) => ({ padding: isStr(v, 8 * v) }),\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n m: (v) => ({ margin: isStr(v, 8 * v) }),\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n shadow: (v) => ({ boxShadow: v }),\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\n};\n\nexport default aliases"],
|
|
5
|
-
"mappings": "AAGA,MAAMA,EAAQ,CAACC,EAAQC,IAAY,OAAOD,GAAM,SAAWA,EAAIC,EAEzDC,EAAkC,CACrC,QAAUF,IAAO,CAAE,gBAAiBA,CAAE,GACtC,QAAUA,IAAO,CAAE,gBAAiB,OAAOA,CAAC,IAAK,eAAgB,QAAS,iBAAkB,WAAY,GACxG,GAAKA,IAAO,CAAE,WAAYA,CAAE,GAC5B,EAAIA,IAAO,CAAE,QAASD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GACtC,GAAKA,IAAO,CAAE,WAAYD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC1C,GAAKA,IAAO,CAAE,aAAcD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC5C,GAAKA,IAAO,CAAE,cAAeD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC7C,GAAKA,IAAO,CAAE,YAAaD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC3C,GAAKA,IAAO,CAAE,YAAaD,EAAMC,EAAG,EAAIA,CAAC,EAAG,aAAcD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC1E,GAAKA,IAAO,CAAE,WAAYD,EAAMC,EAAG,EAAIA,CAAC,EAAG,cAAeD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC1E,EAAIA,IAAO,CAAE,OAAQD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GACrC,GAAKA,IAAO,CAAE,UAAWD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GACzC,GAAKA,IAAO,CAAE,YAAaD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC3C,GAAKA,IAAO,CAAE,aAAcD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC5C,GAAKA,IAAO,CAAE,WAAYD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAC1C,GAAKA,IAAO,CAAE,WAAYD,EAAMC,EAAG,EAAIA,CAAC,EAAG,YAAaD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GACxE,GAAKA,IAAO,CAAE,UAAWD,EAAMC,EAAG,EAAIA,CAAC,EAAG,aAAcD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GACxE,OAASA,IAAO,CAAE,aAAcD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GAChD,aAAeA,IAAO,CAAE,aAAcD,EAAMC,EAAG,EAAIA,CAAC,CAAE,GACtD,OAASA,IAAO,CAAE,UAAWA,CAAE,GAC/B,QAAUA,GAAOA,EAAI,CAAE,QAAS,MAAO,EAAI,CAAC,EAC5C,QAAUA,GAAOA,EAAI,CAAE,cAAe,KAAM,EAAI,CAAC,EACjD,WAAaA,GAAOA,EAAI,CAAE,cAAe,QAAS,EAAI,CAAC,EACvD,WAAaA,GAAOA,EAAI,CAAE,SAAU,MAAO,EAAI,CAAC,EAChD,UAAYA,GAAOA,IAAM,OAASA,IAAM,SAAW,CAAE,cAAeA,CAAE,EAAI,CAAE,UAAWA,CAAE,EACzF,IAAMA,IAAO,CAAE,IAAKD,EAAMC,EAAG,EAAIA,CAAC,CAAE,EACvC,EAEA,IAAOG,EAAQD",
|
|
6
|
-
"names": ["isStr", "v", "or", "aliases", "aliases_default"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"aliases.js","sources":["../../src/css/aliases.ts"],"sourcesContent":["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\n bg: (v) => ({ background: v }),\n p: (v) => ({ padding: isStr(v, 8 * v) }),\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n m: (v) => ({ margin: isStr(v, 8 * v) }),\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n shadow: (v) => ({ boxShadow: v }),\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\n};\n\nexport default aliases"],"names":[],"mappings":"aAGA,MAAM,KAAK,GAAG,CAAC,CAAM,EAAE,EAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAC,GAAG,EAAE;AAEjE,MAAM,OAAO,GAA2B;AACrC,IAAA,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,eAAe,EAAE,CAAA,IAAA,EAAO,CAAC,CAAG,CAAA,CAAA,EAAE,cAAc,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC;AAC1G,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC;AAC9B,IAAA,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AACxC,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC5C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC9C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC/C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC7C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC5E,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC5E,IAAA,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AACvC,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC3C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC7C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC9C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC5C,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC1E,IAAA,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAC1E,IAAA,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AAClD,IAAA,YAAY,EAAE,CAAC,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;AACxD,IAAA,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;IACjC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IAC9C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACnD,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;IACzD,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAClD,IAAA,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,QAAQ,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;AAC3F,IAAA,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;"}
|
package/css/aliases.mjs
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const isStr = (v, or) => typeof v === 'string' ? v : or;
|
|
2
|
+
const aliases = {
|
|
3
|
+
bgcolor: (v) => ({ backgroundColor: v }),
|
|
4
|
+
bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
|
|
5
|
+
bg: (v) => ({ background: v }),
|
|
6
|
+
p: (v) => ({ padding: isStr(v, 8 * v) }),
|
|
7
|
+
pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
|
|
8
|
+
pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
|
|
9
|
+
pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
|
|
10
|
+
pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
|
|
11
|
+
px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
|
|
12
|
+
py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
|
|
13
|
+
m: (v) => ({ margin: isStr(v, 8 * v) }),
|
|
14
|
+
mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
|
|
15
|
+
mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
|
|
16
|
+
mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
|
|
17
|
+
ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
|
|
18
|
+
mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
|
|
19
|
+
my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
|
|
20
|
+
radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
21
|
+
borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
22
|
+
shadow: (v) => ({ boxShadow: v }),
|
|
23
|
+
flexBox: (v) => (v ? { display: "flex" } : {}),
|
|
24
|
+
flexRow: (v) => (v ? { flexDirection: "row" } : {}),
|
|
25
|
+
flexColumn: (v) => (v ? { flexDirection: "column" } : {}),
|
|
26
|
+
flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
|
|
27
|
+
direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
|
|
28
|
+
gap: (v) => ({ gap: isStr(v, 8 * v) }),
|
|
29
|
+
};export{aliases as default};//# sourceMappingURL=aliases.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aliases.mjs","sources":["../../src/css/aliases.ts"],"sourcesContent":["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\n bg: (v) => ({ background: v }),\n p: (v) => ({ padding: isStr(v, 8 * v) }),\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n m: (v) => ({ margin: isStr(v, 8 * v) }),\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n shadow: (v) => ({ boxShadow: v }),\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\n};\n\nexport default aliases"],"names":[],"mappings":"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"}
|
package/css/getProps.js
CHANGED
|
@@ -1,2 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
'use strict';const getProps = (prop, value, _css) => {
|
|
2
|
+
let important;
|
|
3
|
+
if (typeof value === 'string') {
|
|
4
|
+
const split = value.split("!");
|
|
5
|
+
important = split[1] ? "!important" : "";
|
|
6
|
+
value = split[0];
|
|
7
|
+
}
|
|
8
|
+
if (prop === 'disabled') {
|
|
9
|
+
if (value === true) {
|
|
10
|
+
return {
|
|
11
|
+
pointerEvents: "none!important",
|
|
12
|
+
cursor: "default!important",
|
|
13
|
+
userSelect: "none!important",
|
|
14
|
+
opacity: ".8!important"
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return {};
|
|
18
|
+
}
|
|
19
|
+
if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop)) {
|
|
20
|
+
const keys = Object.keys(_css);
|
|
21
|
+
let p = {
|
|
22
|
+
[`${prop}Width`]: value + 'px' + (important || ""),
|
|
23
|
+
};
|
|
24
|
+
if (!keys.includes(`${prop}Color`)) {
|
|
25
|
+
p[`${prop}Color`] = "divider";
|
|
26
|
+
}
|
|
27
|
+
if (!keys.includes(`${prop}Style`)) {
|
|
28
|
+
p[`${prop}Style`] = "solid";
|
|
29
|
+
}
|
|
30
|
+
return p;
|
|
31
|
+
}
|
|
32
|
+
};module.exports=getProps;//# sourceMappingURL=getProps.js.map
|
package/css/getProps.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/css/getProps.ts"],
|
|
4
|
-
"sourcesContent": ["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n let important;\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (prop === 'disabled') {\n if ((value as any) === true) {\n return {\n pointerEvents: \"none!important\",\n cursor: \"default!important\",\n userSelect: \"none!important\",\n opacity: \".8!important\"\n } as any\n }\n return {}\n }\n\n if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n const keys: any = Object.keys(_css)\n let p: any = {\n [`${prop}Width`]: value + 'px' + (important || \"\"),\n }\n if (!keys.includes(`${prop}Color`)) {\n p[`${prop}Color`] = \"divider\"\n }\n if (!keys.includes(`${prop}Style`)) {\n p[`${prop}Style`] = \"solid\"\n }\n return p\n }\n}\n\nexport default getProps"],
|
|
5
|
-
"mappings": "AAEA,MAAMA,EAAW,CAACC,EAAcC,EAAeC,IAAmB,CAC9D,IAAIC,EACJ,GAAI,OAAOF,GAAU,SAAU,CAC3B,MAAMG,EAAQH,EAAM,MAAM,GAAG,EAC7BE,EAAYC,EAAM,CAAC,EAAI,aAAe,GACtCH,EAAQG,EAAM,CAAC,CACnB,CAEA,GAAIJ,IAAS,WACT,OAAKC,IAAkB,GACZ,CACH,cAAe,iBACf,OAAQ,oBACR,WAAY,iBACZ,QAAS,cACb,EAEG,CAAC,EAGZ,GAAIA,GAAS,OAAOA,GAAU,UAAY,CAAC,SAAU,cAAe,aAAc,YAAa,cAAc,EAAE,SAASD,CAAW,EAAG,CAClI,MAAMK,EAAY,OAAO,KAAKH,CAAI,EAClC,IAAII,EAAS,CACT,CAAC,GAAGN,CAAI,OAAO,EAAGC,EAAQ,MAAQE,GAAa,GACnD,EACA,OAAKE,EAAK,SAAS,GAAGL,CAAI,OAAO,IAC7BM,EAAE,GAAGN,CAAI,OAAO,EAAI,WAEnBK,EAAK,SAAS,GAAGL,CAAI,OAAO,IAC7BM,EAAE,GAAGN,CAAI,OAAO,EAAI,SAEjBM,CACX,CACJ,EAEA,IAAOC,EAAQR",
|
|
6
|
-
"names": ["getProps", "prop", "value", "_css", "important", "split", "keys", "p", "getProps_default"]
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"getProps.js","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n let important;\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (prop === 'disabled') {\n if ((value as any) === true) {\n return {\n pointerEvents: \"none!important\",\n cursor: \"default!important\",\n userSelect: \"none!important\",\n opacity: \".8!important\"\n } as any\n }\n return {}\n }\n\n if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n const keys: any = Object.keys(_css)\n let p: any = {\n [`${prop}Width`]: value + 'px' + (important || \"\"),\n }\n if (!keys.includes(`${prop}Color`)) {\n p[`${prop}Color`] = \"divider\"\n }\n if (!keys.includes(`${prop}Style`)) {\n p[`${prop}Style`] = \"solid\"\n }\n return p\n }\n}\n\nexport default getProps"],"names":[],"mappings":"aAEM,MAAA,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAC7D,IAAA,IAAI,SAAS;AACb,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB;IAED,IAAI,IAAI,KAAK,UAAU,EAAE;QACrB,IAAK,KAAa,KAAK,IAAI,EAAE;YACzB,OAAO;AACH,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE;aACL;AACX;AACD,QAAA,OAAO,EAAE;AACZ;IAED,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAW,CAAC,EAAE;QAClI,MAAM,IAAI,GAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAC,GAAQ;AACT,YAAA,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,GAAG,KAAK,GAAG,IAAI,IAAI,SAAS,IAAI,EAAE,CAAC;SACrD;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,SAAS;AAChC;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,OAAO;AAC9B;AACD,QAAA,OAAO,CAAC;AACX;AACL"}
|
package/css/getProps.mjs
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const getProps = (prop, value, _css) => {
|
|
2
|
+
let important;
|
|
3
|
+
if (typeof value === 'string') {
|
|
4
|
+
const split = value.split("!");
|
|
5
|
+
important = split[1] ? "!important" : "";
|
|
6
|
+
value = split[0];
|
|
7
|
+
}
|
|
8
|
+
if (prop === 'disabled') {
|
|
9
|
+
if (value === true) {
|
|
10
|
+
return {
|
|
11
|
+
pointerEvents: "none!important",
|
|
12
|
+
cursor: "default!important",
|
|
13
|
+
userSelect: "none!important",
|
|
14
|
+
opacity: ".8!important"
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return {};
|
|
18
|
+
}
|
|
19
|
+
if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop)) {
|
|
20
|
+
const keys = Object.keys(_css);
|
|
21
|
+
let p = {
|
|
22
|
+
[`${prop}Width`]: value + 'px' + (important || ""),
|
|
23
|
+
};
|
|
24
|
+
if (!keys.includes(`${prop}Color`)) {
|
|
25
|
+
p[`${prop}Color`] = "divider";
|
|
26
|
+
}
|
|
27
|
+
if (!keys.includes(`${prop}Style`)) {
|
|
28
|
+
p[`${prop}Style`] = "solid";
|
|
29
|
+
}
|
|
30
|
+
return p;
|
|
31
|
+
}
|
|
32
|
+
};export{getProps as default};//# sourceMappingURL=getProps.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getProps.mjs","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n let important;\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (prop === 'disabled') {\n if ((value as any) === true) {\n return {\n pointerEvents: \"none!important\",\n cursor: \"default!important\",\n userSelect: \"none!important\",\n opacity: \".8!important\"\n } as any\n }\n return {}\n }\n\n if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n const keys: any = Object.keys(_css)\n let p: any = {\n [`${prop}Width`]: value + 'px' + (important || \"\"),\n }\n if (!keys.includes(`${prop}Color`)) {\n p[`${prop}Color`] = \"divider\"\n }\n if (!keys.includes(`${prop}Style`)) {\n p[`${prop}Style`] = \"solid\"\n }\n return p\n }\n}\n\nexport default getProps"],"names":[],"mappings":"AAEM,MAAA,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAC7D,IAAA,IAAI,SAAS;AACb,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB;IAED,IAAI,IAAI,KAAK,UAAU,EAAE;QACrB,IAAK,KAAa,KAAK,IAAI,EAAE;YACzB,OAAO;AACH,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE;aACL;AACX;AACD,QAAA,OAAO,EAAE;AACZ;IAED,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAW,CAAC,EAAE;QAClI,MAAM,IAAI,GAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAC,GAAQ;AACT,YAAA,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,GAAG,KAAK,GAAG,IAAI,IAAI,SAAS,IAAI,EAAE,CAAC;SACrD;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,SAAS;AAChC;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,OAAO;AAC9B;AACD,QAAA,OAAO,CAAC;AACX;AACL"}
|
package/css/getValue.js
CHANGED
|
@@ -1,2 +1,92 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
'use strict';const getColor = (color) => {
|
|
2
|
+
return {
|
|
3
|
+
[`${color}`]: `var(--color-${color}-primary)`,
|
|
4
|
+
[`${color}.primary`]: `var(--color-${color}-primary)`,
|
|
5
|
+
[`${color}.secondary`]: `var(--color-${color}-secondary)`,
|
|
6
|
+
[`${color}.text`]: `var(--color-${color}-text)`,
|
|
7
|
+
[`${color}.alpha`]: `var(--color-${color}-alpha)`
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
const withImportant = (important, value) => important ? value + important : value;
|
|
11
|
+
const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ "text": `var(--color-text-primary)`, "text.primary": `var(--color-text-primary)`, "text.secondary": `var(--color-text-secondary)`, "background": `var(--color-background-primary)`, "background.primary": `var(--color-background-primary)`, "background.secondary": `var(--color-background-secondary)`, "background.alpha": `var(--color-background-alpha)`, "divider": `var(--color-divider)` }, getColor("brand")), getColor("accent")), getColor("info")), getColor("success")), getColor("warning")), getColor("danger"));
|
|
12
|
+
const breakpoints = {
|
|
13
|
+
"xs": "var(--bp-xs)",
|
|
14
|
+
"sm": "var(--bp-sm)",
|
|
15
|
+
"md": "var(--bp-md)",
|
|
16
|
+
"lg": "var(--bp-lg)",
|
|
17
|
+
"xl": "var(--bp-xl)"
|
|
18
|
+
};
|
|
19
|
+
let fontsizes = {
|
|
20
|
+
"h1": "var(--fontsize-h1)",
|
|
21
|
+
"h2": "var(--fontsize-h2)",
|
|
22
|
+
"h3": "var(--fontsize-h3)",
|
|
23
|
+
"h4": "var(--fontsize-h4)",
|
|
24
|
+
"h5": "var(--fontsize-h5)",
|
|
25
|
+
"h6": "var(--fontsize-h6)",
|
|
26
|
+
"text": "var(--fontsize-text)",
|
|
27
|
+
"button": "var(--fontsize-button)",
|
|
28
|
+
"small": "var(--fontsize-small)"
|
|
29
|
+
};
|
|
30
|
+
let lineHeights = {
|
|
31
|
+
"h1": "var(--lineheight-h1)",
|
|
32
|
+
"h2": "var(--lineheight-h2)",
|
|
33
|
+
"h3": "var(--lineheight-h3)",
|
|
34
|
+
"h4": "var(--lineheight-h4)",
|
|
35
|
+
"h5": "var(--lineheight-h5)",
|
|
36
|
+
"h6": "var(--lineheight-h6)",
|
|
37
|
+
"text": "var(--lineheight-text)",
|
|
38
|
+
"button": "var(--lineheight-button)",
|
|
39
|
+
"small": "var(--lineheight-small)"
|
|
40
|
+
};
|
|
41
|
+
let fontWeights = {
|
|
42
|
+
"h1": "var(--fontweight-h1)",
|
|
43
|
+
"h2": "var(--fontweight-h2)",
|
|
44
|
+
"h3": "var(--fontweight-h3)",
|
|
45
|
+
"h4": "var(--fontweight-h4)",
|
|
46
|
+
"h5": "var(--fontweight-h5)",
|
|
47
|
+
"h6": "var(--fontweight-h6)",
|
|
48
|
+
"text": "var(--fontweight-text)",
|
|
49
|
+
"button": "var(--fontweight-button)",
|
|
50
|
+
"small": "var(--fontweight-small)"
|
|
51
|
+
};
|
|
52
|
+
let font = {
|
|
53
|
+
"h1": "var(--font-h1)",
|
|
54
|
+
"h2": "var(--font-h2)",
|
|
55
|
+
"h3": "var(--font-h3)",
|
|
56
|
+
"h4": "var(--font-h4)",
|
|
57
|
+
"h5": "var(--font-h5)",
|
|
58
|
+
"h6": "var(--font-h6)",
|
|
59
|
+
"text": "var(--font-text)",
|
|
60
|
+
"button": "var(--font-button)",
|
|
61
|
+
"small": "var(--font-small)"
|
|
62
|
+
};
|
|
63
|
+
const getValue = (prop, value, _css) => {
|
|
64
|
+
let important;
|
|
65
|
+
if (typeof value === 'string') {
|
|
66
|
+
const split = value.split("!");
|
|
67
|
+
important = split[1] ? "!important" : "";
|
|
68
|
+
value = split[0];
|
|
69
|
+
}
|
|
70
|
+
if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {
|
|
71
|
+
return withImportant(important, breakpoints[value] || value);
|
|
72
|
+
}
|
|
73
|
+
else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {
|
|
74
|
+
return withImportant(important, "var(--font-family)");
|
|
75
|
+
}
|
|
76
|
+
if (prop === 'font' && typeof value === "string" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
77
|
+
return withImportant(important, font[value] || value);
|
|
78
|
+
}
|
|
79
|
+
if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
80
|
+
return withImportant(important, fontWeights[value] || value);
|
|
81
|
+
}
|
|
82
|
+
else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
83
|
+
return withImportant(important, lineHeights[value] || value);
|
|
84
|
+
}
|
|
85
|
+
else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {
|
|
86
|
+
return withImportant(important, fontsizes[value] || value);
|
|
87
|
+
}
|
|
88
|
+
else if (typeof value === "number" && ["shadow", "boxShadow"].includes(prop)) {
|
|
89
|
+
return withImportant(important, `var(--shadow-${value})`);
|
|
90
|
+
}
|
|
91
|
+
return withImportant(important, colors[value] || value);
|
|
92
|
+
};module.exports=getValue;//# sourceMappingURL=getValue.js.map
|