@xanui/core 1.1.5 → 1.1.7
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.d.ts +5 -0
- package/ServerStyleTags.js +3 -3
- package/ServerStyleTags.js.map +1 -1
- package/ServerStyleTags.mjs +2 -2
- package/ServerStyleTags.mjs.map +1 -1
- package/Tag/cssPropList.js +2 -2
- package/Tag/cssPropList.js.map +1 -1
- package/Tag/index.d.ts +6 -0
- package/Tag/index.js +3 -3
- package/Tag/index.js.map +1 -1
- package/Tag/types.d.ts +181 -0
- package/Tag/useTagProps.d.ts +5 -0
- package/Tag/useTagProps.js +3 -3
- package/Tag/useTagProps.js.map +1 -1
- package/Transition/index.d.ts +34 -0
- package/Transition/index.js +3 -3
- package/Transition/index.js.map +1 -1
- package/Transition/index.mjs +2 -2
- package/Transition/index.mjs.map +1 -1
- package/Transition/variants.d.ts +134 -0
- package/breakpoint/BreakpointProvider.js +3 -3
- package/breakpoint/BreakpointProvider.js.map +1 -1
- package/breakpoint/BreakpointProvider.mjs +2 -2
- package/breakpoint/BreakpointProvider.mjs.map +1 -1
- package/breakpoint/useBreakpoint.d.ts +12 -0
- package/breakpoint/useBreakpoint.js +3 -3
- package/breakpoint/useBreakpoint.js.map +1 -1
- package/breakpoint/useBreakpointProps.d.ts +9 -0
- package/breakpoint/useBreakpointProps.js +3 -3
- package/breakpoint/useBreakpointProps.js.map +1 -1
- package/css/aliases.js +2 -2
- package/css/aliases.js.map +1 -1
- package/css/getProps.d.ts +5 -0
- package/css/getProps.js +2 -2
- package/css/getProps.js.map +1 -1
- package/css/getValue.d.ts +5 -0
- package/css/getValue.js +2 -2
- package/css/getValue.js.map +1 -1
- package/css/index.d.ts +16 -0
- package/css/index.js +4 -4
- package/css/index.js.map +1 -1
- package/css/types.d.ts +57 -0
- package/index.d.ts +19 -629
- package/index.js +1 -1
- package/isWindow.d.ts +3 -0
- package/isWindow.js +1 -1
- package/isWindow.js.map +1 -1
- package/package.json +5 -26
- package/theme/ThemeCssVars.js +2 -2
- package/theme/ThemeCssVars.js.map +1 -1
- package/theme/ThemeProvider.d.ts +14 -0
- package/theme/ThemeProvider.js +4 -7
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +2 -5
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/core.d.ts +6 -0
- package/theme/createColor.js +2 -2
- package/theme/createColor.js.map +1 -1
- package/theme/createTheme.js +7 -7
- package/theme/createTheme.js.map +1 -1
- package/theme/createThemeSwitcher.d.ts +9 -0
- package/theme/createThemeSwitcher.js +2 -2
- package/theme/createThemeSwitcher.js.map +1 -1
- package/theme/index.js +1 -1
- package/theme/index.js.map +1 -1
- package/theme/index.mjs +1 -1
- package/theme/index.mjs.map +1 -1
- package/theme/types.d.ts +127 -0
- package/useAnimation.d.ts +21 -0
- package/useColorTemplate.d.ts +6 -0
- package/useColorTemplate.js +2 -2
- package/useColorTemplate.js.map +1 -1
- package/useInterface.d.ts +5 -0
- package/useInterface.js +2 -2
- package/useInterface.js.map +1 -1
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { TransitionElementProps } from './index.js';
|
|
2
|
+
|
|
3
|
+
declare const slideDown: (_arg: TransitionElementProps) => {
|
|
4
|
+
from: {
|
|
5
|
+
transform: string;
|
|
6
|
+
};
|
|
7
|
+
to: {
|
|
8
|
+
transform: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
declare const slideUp: (_arg: TransitionElementProps) => {
|
|
12
|
+
from: {
|
|
13
|
+
transform: string;
|
|
14
|
+
};
|
|
15
|
+
to: {
|
|
16
|
+
transform: string;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
declare const slideRight: (_arg: TransitionElementProps) => {
|
|
20
|
+
from: {
|
|
21
|
+
transform: string;
|
|
22
|
+
};
|
|
23
|
+
to: {
|
|
24
|
+
transform: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
declare const slideLeft: (_arg: TransitionElementProps) => {
|
|
28
|
+
from: {
|
|
29
|
+
transform: string;
|
|
30
|
+
};
|
|
31
|
+
to: {
|
|
32
|
+
transform: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
declare const fade: (_arg: TransitionElementProps) => {
|
|
36
|
+
from: {
|
|
37
|
+
opacity: number;
|
|
38
|
+
};
|
|
39
|
+
to: {
|
|
40
|
+
opacity: number;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
declare const fadeDown: (_arg: TransitionElementProps) => {
|
|
44
|
+
from: {
|
|
45
|
+
transform: string;
|
|
46
|
+
opacity: number;
|
|
47
|
+
};
|
|
48
|
+
to: {
|
|
49
|
+
transform: string;
|
|
50
|
+
opacity: number;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
declare const fadeUp: (_arg: TransitionElementProps) => {
|
|
54
|
+
from: {
|
|
55
|
+
transform: string;
|
|
56
|
+
opacity: number;
|
|
57
|
+
};
|
|
58
|
+
to: {
|
|
59
|
+
transform: string;
|
|
60
|
+
opacity: number;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
declare const fadeRight: (_arg: TransitionElementProps) => {
|
|
64
|
+
from: {
|
|
65
|
+
transform: string;
|
|
66
|
+
opacity: number;
|
|
67
|
+
};
|
|
68
|
+
to: {
|
|
69
|
+
transform: string;
|
|
70
|
+
opacity: number;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
declare const fadeLeft: (_arg: TransitionElementProps) => {
|
|
74
|
+
from: {
|
|
75
|
+
transform: string;
|
|
76
|
+
opacity: number;
|
|
77
|
+
};
|
|
78
|
+
to: {
|
|
79
|
+
transform: string;
|
|
80
|
+
opacity: number;
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
declare const grow: (_arg: TransitionElementProps) => {
|
|
84
|
+
from: {
|
|
85
|
+
transform: string;
|
|
86
|
+
opacity: number;
|
|
87
|
+
};
|
|
88
|
+
to: {
|
|
89
|
+
transform: string;
|
|
90
|
+
opacity: number;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
declare const zoom: (_arg: TransitionElementProps) => {
|
|
94
|
+
from: {
|
|
95
|
+
transform: string;
|
|
96
|
+
opacity: number;
|
|
97
|
+
};
|
|
98
|
+
to: {
|
|
99
|
+
transform: string;
|
|
100
|
+
opacity: number;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
declare const zoomOver: (_arg: TransitionElementProps) => {
|
|
104
|
+
from: {
|
|
105
|
+
transform: string;
|
|
106
|
+
opacity: number;
|
|
107
|
+
};
|
|
108
|
+
to: {
|
|
109
|
+
transform: string;
|
|
110
|
+
opacity: number;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
declare const collapsVerticle: (_arg: TransitionElementProps) => {
|
|
114
|
+
from: {
|
|
115
|
+
height: string;
|
|
116
|
+
overflow: string;
|
|
117
|
+
};
|
|
118
|
+
to: {
|
|
119
|
+
height: string;
|
|
120
|
+
overflow: string;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
declare const collapsHorizental: (_arg: TransitionElementProps) => {
|
|
124
|
+
from: {
|
|
125
|
+
width: string;
|
|
126
|
+
overflow: string;
|
|
127
|
+
};
|
|
128
|
+
to: {
|
|
129
|
+
width: string;
|
|
130
|
+
overflow: string;
|
|
131
|
+
};
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export { collapsHorizental, collapsVerticle, fade, fadeDown, fadeLeft, fadeRight, fadeUp, grow, slideDown, slideLeft, slideRight, slideUp, zoom, zoomOver };
|
|
@@ -1,6 +1,6 @@
|
|
|
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");
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const BreakpointCtx = React.createContext("xl");
|
|
2
2
|
const getKey = () => {
|
|
3
|
-
const isWin = isWindow();
|
|
3
|
+
const isWin = isWindow.default();
|
|
4
4
|
if (isWin) {
|
|
5
5
|
const width = window.innerWidth;
|
|
6
6
|
if (width < index.breakpoints.sm) {
|
|
@@ -39,5 +39,5 @@ const BreakpointProvider = ({ children }) => {
|
|
|
39
39
|
window.removeEventListener("resize", handler);
|
|
40
40
|
};
|
|
41
41
|
}, [current]);
|
|
42
|
-
return (
|
|
42
|
+
return (jsxRuntime.jsx(BreakpointCtx.Provider, Object.assign({ value: current }, { children: children })));
|
|
43
43
|
};exports.BreakpointCtx=BreakpointCtx;exports.BreakpointProvider=BreakpointProvider;//# sourceMappingURL=BreakpointProvider.js.map
|
|
@@ -1 +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":"
|
|
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":["isWindow","breakpoints","useState","_jsx"],"mappings":"6MAKa,MAAA,aAAa,GAAG,KAAK,CAAC,aAAa,CAAiB,IAAI;AAErE,MAAM,MAAM,GAAG,MAAqB;AAChC,IAAA,MAAM,KAAK,GAAGA,gBAAQ,EAAE;AACxB,IAAA,IAAI,KAAK,EAAE;AACP,QAAA,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU;AAC/B,QAAA,IAAI,KAAK,GAAGC,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,QACIC,cAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,KAAK,EAAE,OAAO,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACY;AAEjC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default,{useState}from'react';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const BreakpointCtx = React__default.createContext("xl");
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import React__default,{useState}from'react';import isWindow from'../isWindow.mjs';import {breakpoints}from'../css/index.mjs';const BreakpointCtx = React__default.createContext("xl");
|
|
2
2
|
const getKey = () => {
|
|
3
3
|
const isWin = isWindow();
|
|
4
4
|
if (isWin) {
|
|
@@ -39,5 +39,5 @@ const BreakpointProvider = ({ children }) => {
|
|
|
39
39
|
window.removeEventListener("resize", handler);
|
|
40
40
|
};
|
|
41
41
|
}, [current]);
|
|
42
|
-
return (
|
|
42
|
+
return (jsx(BreakpointCtx.Provider, Object.assign({ value: current }, { children: children })));
|
|
43
43
|
};export{BreakpointCtx,BreakpointProvider};//# sourceMappingURL=BreakpointProvider.mjs.map
|
|
@@ -1 +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":"
|
|
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","_jsx"],"mappings":"iKAKa,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,QACIC,GAAA,CAAC,aAAa,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,KAAK,EAAE,OAAO,EAAA,EAAA,EAAA,QAAA,EACjC,QAAQ,EAAA,CAAA,CACY;AAEjC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BreakpointKeys } from '../css/types.js';
|
|
2
|
+
|
|
3
|
+
declare const useBreakpoint: () => {
|
|
4
|
+
value: BreakpointKeys;
|
|
5
|
+
is: (key: BreakpointKeys) => boolean;
|
|
6
|
+
isDown: (key: BreakpointKeys) => boolean;
|
|
7
|
+
isUp: (key: BreakpointKeys) => boolean;
|
|
8
|
+
isOrDown: (key: BreakpointKeys) => boolean;
|
|
9
|
+
isOrUp: (key: BreakpointKeys) => boolean;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { useBreakpoint as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
'use strict';var React=require('react'),BreakpointProvider=require('./BreakpointProvider.js'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const useBreakpoint = () => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),BreakpointProvider=require('./BreakpointProvider.js'),isWindow=require('../isWindow.js'),index=require('../css/index.js');const useBreakpoint = () => {
|
|
2
2
|
const val = React.useContext(BreakpointProvider.BreakpointCtx);
|
|
3
|
-
const isWin = isWindow();
|
|
3
|
+
const isWin = isWindow.default();
|
|
4
4
|
const o = {
|
|
5
5
|
value: val,
|
|
6
6
|
is: (key) => val === key,
|
|
@@ -20,4 +20,4 @@
|
|
|
20
20
|
isOrUp: (key) => o.is(key) || o.isUp(key)
|
|
21
21
|
};
|
|
22
22
|
return o;
|
|
23
|
-
};
|
|
23
|
+
};exports.default=useBreakpoint;//# sourceMappingURL=useBreakpoint.js.map
|
|
@@ -1 +1 @@
|
|
|
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":"
|
|
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","isWindow","breakpoints"],"mappings":"2NAMM,MAAA,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,GAAG,GAAGA,gBAAU,CAACC,gCAAa,CAAC;AACrC,IAAA,MAAM,KAAK,GAAGC,gBAAQ,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,9 @@
|
|
|
1
|
+
import { BreakpointKeys } from '../css/types.js';
|
|
2
|
+
|
|
3
|
+
type useBreakpointPropsType<P> = P | {
|
|
4
|
+
[key in BreakpointKeys]?: P;
|
|
5
|
+
};
|
|
6
|
+
declare const useBreakpoinProps: <P extends object>(props: useBreakpointPropsType<P>) => useBreakpointPropsType<P>;
|
|
7
|
+
|
|
8
|
+
export { useBreakpoinProps as default };
|
|
9
|
+
export type { useBreakpointPropsType };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
'use strict';var React=require('react'),useBreakpoint=require('./useBreakpoint.js');const useBreakpoinProps = (props) => {
|
|
2
|
-
const bpoint = useBreakpoint();
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),useBreakpoint=require('./useBreakpoint.js');const useBreakpoinProps = (props) => {
|
|
2
|
+
const bpoint = useBreakpoint.default();
|
|
3
3
|
const stringifiedElement = JSON.stringify(props, (key, value) => {
|
|
4
4
|
if (key === '_owner' || key === '_store') {
|
|
5
5
|
return undefined; // Skip circular references
|
|
@@ -39,4 +39,4 @@
|
|
|
39
39
|
}
|
|
40
40
|
return _props;
|
|
41
41
|
}, [format, bpoint.value]);
|
|
42
|
-
};
|
|
42
|
+
};exports.default=useBreakpoinProps;//# sourceMappingURL=useBreakpointProps.js.map
|
|
@@ -1 +1 @@
|
|
|
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":"
|
|
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":["useBreakpoint","isValidElement"],"mappings":"6IAQA,MAAM,iBAAiB,GAAG,CAAmB,KAAgC,KAA+B;AACzG,IAAA,MAAM,MAAM,GAAGA,qBAAa,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,CAACC,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"}
|
package/css/aliases.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';const isStr = (v, or) => typeof v === 'string' ? v : or;
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});const isStr = (v, or) => typeof v === 'string' ? v : or;
|
|
2
2
|
const aliases = {
|
|
3
3
|
bgcolor: (v) => ({ backgroundColor: v }),
|
|
4
4
|
bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
|
|
@@ -26,4 +26,4 @@ const aliases = {
|
|
|
26
26
|
flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
|
|
27
27
|
direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
|
|
28
28
|
gap: (v) => ({ gap: isStr(v, 8 * v) }),
|
|
29
|
-
};
|
|
29
|
+
};exports.default=aliases;//# sourceMappingURL=aliases.js.map
|
package/css/aliases.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"
|
|
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":"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"}
|
package/css/getProps.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';const getProps = (prop, value, _css) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});const getProps = (prop, value, _css) => {
|
|
2
2
|
let important;
|
|
3
3
|
if (typeof value === 'string') {
|
|
4
4
|
const split = value.split("!");
|
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
}
|
|
30
30
|
return p;
|
|
31
31
|
}
|
|
32
|
-
};
|
|
32
|
+
};exports.default=getProps;//# sourceMappingURL=getProps.js.map
|
package/css/getProps.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"
|
|
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":"sEAEM,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,4 +1,4 @@
|
|
|
1
|
-
'use strict';const getColor = (color) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});const getColor = (color) => {
|
|
2
2
|
return {
|
|
3
3
|
[`${color}`]: `var(--color-${color}-primary)`,
|
|
4
4
|
[`${color}.primary`]: `var(--color-${color}-primary)`,
|
|
@@ -89,4 +89,4 @@ const getValue = (prop, value, _css) => {
|
|
|
89
89
|
return withImportant(important, `var(--shadow-${value})`);
|
|
90
90
|
}
|
|
91
91
|
return withImportant(important, colors[value] || value);
|
|
92
|
-
};
|
|
92
|
+
};exports.default=getValue;//# sourceMappingURL=getValue.js.map
|
package/css/getValue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getValue.js","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string) => {\n return {\n [`${color}`]: `var(--color-${color}-primary)`,\n [`${color}.primary`]: `var(--color-${color}-primary)`,\n [`${color}.secondary`]: `var(--color-${color}-secondary)`,\n [`${color}.text`]: `var(--color-${color}-text)`,\n [`${color}.alpha`]: `var(--color-${color}-alpha)`\n }\n}\n\nconst withImportant = (important: any, value: any) => important ? value + important : value\nconst colors: any = {\n \"text\": `var(--color-text-primary)`,\n \"text.primary\": `var(--color-text-primary)`,\n \"text.secondary\": `var(--color-text-secondary)`,\n\n \"background\": `var(--color-background-primary)`,\n \"background.primary\": `var(--color-background-primary)`,\n \"background.secondary\": `var(--color-background-secondary)`,\n \"background.alpha\": `var(--color-background-alpha)`,\n \"divider\": `var(--color-divider)`,\n\n ...getColor(\"brand\"),\n ...getColor(\"accent\"),\n ...getColor(\"info\"),\n ...getColor(\"success\"),\n ...getColor(\"warning\"),\n ...getColor(\"danger\"),\n}\n\nconst breakpoints: any = {\n \"xs\": \"var(--bp-xs)\",\n \"sm\": \"var(--bp-sm)\",\n \"md\": \"var(--bp-md)\",\n \"lg\": \"var(--bp-lg)\",\n \"xl\": \"var(--bp-xl)\"\n}\n\nlet fontsizes: any = {\n \"h1\": \"var(--fontsize-h1)\",\n \"h2\": \"var(--fontsize-h2)\",\n \"h3\": \"var(--fontsize-h3)\",\n \"h4\": \"var(--fontsize-h4)\",\n \"h5\": \"var(--fontsize-h5)\",\n \"h6\": \"var(--fontsize-h6)\",\n \"text\": \"var(--fontsize-text)\",\n \"button\": \"var(--fontsize-button)\",\n \"small\": \"var(--fontsize-small)\"\n}\n\nlet lineHeights: any = {\n \"h1\": \"var(--lineheight-h1)\",\n \"h2\": \"var(--lineheight-h2)\",\n \"h3\": \"var(--lineheight-h3)\",\n \"h4\": \"var(--lineheight-h4)\",\n \"h5\": \"var(--lineheight-h5)\",\n \"h6\": \"var(--lineheight-h6)\",\n \"text\": \"var(--lineheight-text)\",\n \"button\": \"var(--lineheight-button)\",\n \"small\": \"var(--lineheight-small)\"\n}\n\nlet fontWeights: any = {\n \"h1\": \"var(--fontweight-h1)\",\n \"h2\": \"var(--fontweight-h2)\",\n \"h3\": \"var(--fontweight-h3)\",\n \"h4\": \"var(--fontweight-h4)\",\n \"h5\": \"var(--fontweight-h5)\",\n \"h6\": \"var(--fontweight-h6)\",\n \"text\": \"var(--fontweight-text)\",\n \"button\": \"var(--fontweight-button)\",\n \"small\": \"var(--fontweight-small)\"\n}\n\nlet font: any = {\n \"h1\": \"var(--font-h1)\",\n \"h2\": \"var(--font-h2)\",\n \"h3\": \"var(--font-h3)\",\n \"h4\": \"var(--font-h4)\",\n \"h5\": \"var(--font-h5)\",\n \"h6\": \"var(--font-h6)\",\n \"text\": \"var(--font-text)\",\n \"button\": \"var(--font-button)\",\n \"small\": \"var(--font-small)\"\n}\n\nconst getValue = (prop: any, value: string | number, _css: CSSProps): any => {\n let important;\n\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {\n return withImportant(important, breakpoints[value] || value)\n } else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {\n return withImportant(important, \"var(--font-family)\")\n } if (prop === 'font' && typeof value === \"string\" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, font[value] || value)\n } if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, fontWeights[value] || value)\n } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, lineHeights[value] || value)\n } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {\n return withImportant(important, fontsizes[value] || value)\n } else if (typeof value === \"number\" && [\"shadow\", \"boxShadow\"].includes(prop)) {\n return withImportant(important, `var(--shadow-${value})`)\n }\n\n return withImportant(important, colors[value] || value)\n}\n\nexport default getValue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getValue.js","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string) => {\n return {\n [`${color}`]: `var(--color-${color}-primary)`,\n [`${color}.primary`]: `var(--color-${color}-primary)`,\n [`${color}.secondary`]: `var(--color-${color}-secondary)`,\n [`${color}.text`]: `var(--color-${color}-text)`,\n [`${color}.alpha`]: `var(--color-${color}-alpha)`\n }\n}\n\nconst withImportant = (important: any, value: any) => important ? value + important : value\nconst colors: any = {\n \"text\": `var(--color-text-primary)`,\n \"text.primary\": `var(--color-text-primary)`,\n \"text.secondary\": `var(--color-text-secondary)`,\n\n \"background\": `var(--color-background-primary)`,\n \"background.primary\": `var(--color-background-primary)`,\n \"background.secondary\": `var(--color-background-secondary)`,\n \"background.alpha\": `var(--color-background-alpha)`,\n \"divider\": `var(--color-divider)`,\n\n ...getColor(\"brand\"),\n ...getColor(\"accent\"),\n ...getColor(\"info\"),\n ...getColor(\"success\"),\n ...getColor(\"warning\"),\n ...getColor(\"danger\"),\n}\n\nconst breakpoints: any = {\n \"xs\": \"var(--bp-xs)\",\n \"sm\": \"var(--bp-sm)\",\n \"md\": \"var(--bp-md)\",\n \"lg\": \"var(--bp-lg)\",\n \"xl\": \"var(--bp-xl)\"\n}\n\nlet fontsizes: any = {\n \"h1\": \"var(--fontsize-h1)\",\n \"h2\": \"var(--fontsize-h2)\",\n \"h3\": \"var(--fontsize-h3)\",\n \"h4\": \"var(--fontsize-h4)\",\n \"h5\": \"var(--fontsize-h5)\",\n \"h6\": \"var(--fontsize-h6)\",\n \"text\": \"var(--fontsize-text)\",\n \"button\": \"var(--fontsize-button)\",\n \"small\": \"var(--fontsize-small)\"\n}\n\nlet lineHeights: any = {\n \"h1\": \"var(--lineheight-h1)\",\n \"h2\": \"var(--lineheight-h2)\",\n \"h3\": \"var(--lineheight-h3)\",\n \"h4\": \"var(--lineheight-h4)\",\n \"h5\": \"var(--lineheight-h5)\",\n \"h6\": \"var(--lineheight-h6)\",\n \"text\": \"var(--lineheight-text)\",\n \"button\": \"var(--lineheight-button)\",\n \"small\": \"var(--lineheight-small)\"\n}\n\nlet fontWeights: any = {\n \"h1\": \"var(--fontweight-h1)\",\n \"h2\": \"var(--fontweight-h2)\",\n \"h3\": \"var(--fontweight-h3)\",\n \"h4\": \"var(--fontweight-h4)\",\n \"h5\": \"var(--fontweight-h5)\",\n \"h6\": \"var(--fontweight-h6)\",\n \"text\": \"var(--fontweight-text)\",\n \"button\": \"var(--fontweight-button)\",\n \"small\": \"var(--fontweight-small)\"\n}\n\nlet font: any = {\n \"h1\": \"var(--font-h1)\",\n \"h2\": \"var(--font-h2)\",\n \"h3\": \"var(--font-h3)\",\n \"h4\": \"var(--font-h4)\",\n \"h5\": \"var(--font-h5)\",\n \"h6\": \"var(--font-h6)\",\n \"text\": \"var(--font-text)\",\n \"button\": \"var(--font-button)\",\n \"small\": \"var(--font-small)\"\n}\n\nconst getValue = (prop: any, value: string | number, _css: CSSProps): any => {\n let important;\n\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {\n return withImportant(important, breakpoints[value] || value)\n } else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {\n return withImportant(important, \"var(--font-family)\")\n } if (prop === 'font' && typeof value === \"string\" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, font[value] || value)\n } if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, fontWeights[value] || value)\n } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, lineHeights[value] || value)\n } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {\n return withImportant(important, fontsizes[value] || value)\n } else if (typeof value === \"number\" && [\"shadow\", \"boxShadow\"].includes(prop)) {\n return withImportant(important, `var(--shadow-${value})`)\n }\n\n return withImportant(important, colors[value] || value)\n}\n\nexport default getValue"],"names":[],"mappings":"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"}
|
package/css/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as oncss_types from 'oncss/types';
|
|
2
|
+
import { CSSProps, CSSOptionProps } from './types.js';
|
|
3
|
+
|
|
4
|
+
declare const breakpoints: {
|
|
5
|
+
xs: number;
|
|
6
|
+
sm: number;
|
|
7
|
+
md: number;
|
|
8
|
+
lg: number;
|
|
9
|
+
xl: number;
|
|
10
|
+
};
|
|
11
|
+
declare const css: (props: CSSProps, options?: CSSOptionProps) => oncss_types.CSSFactoryType;
|
|
12
|
+
declare const adjustColor: (hex: string, factor: number) => string;
|
|
13
|
+
declare const adjustTextContrast: (color: string) => "#FFFFFF" | "#111111";
|
|
14
|
+
declare const alpha: (color: string, opacity?: number) => string;
|
|
15
|
+
|
|
16
|
+
export { adjustColor, adjustTextContrast, alpha, breakpoints, css };
|
package/css/index.js
CHANGED
|
@@ -7,20 +7,20 @@
|
|
|
7
7
|
};
|
|
8
8
|
const css = (props, options) => {
|
|
9
9
|
const cssOptions = Object.assign(Object.assign({}, options), { breakpoints,
|
|
10
|
-
aliases, getValue: (p, v, _c, dept) => {
|
|
10
|
+
aliases: aliases.default, getValue: (p, v, _c, dept) => {
|
|
11
11
|
if (options === null || options === void 0 ? void 0 : options.getValue) {
|
|
12
12
|
let _val = options === null || options === void 0 ? void 0 : options.getValue(p, v, _c, dept);
|
|
13
13
|
if (_val)
|
|
14
14
|
return _val;
|
|
15
15
|
}
|
|
16
|
-
return getValue(p, v);
|
|
16
|
+
return getValue.default(p, v);
|
|
17
17
|
}, getProps: (p, v, _c, dept) => {
|
|
18
18
|
if (options === null || options === void 0 ? void 0 : options.getProps) {
|
|
19
19
|
let _p = options === null || options === void 0 ? void 0 : options.getProps(p, v, _c, dept);
|
|
20
20
|
if (_p)
|
|
21
21
|
return _p;
|
|
22
22
|
}
|
|
23
|
-
return getProps(p, v, _c);
|
|
23
|
+
return getProps.default(p, v, _c);
|
|
24
24
|
} });
|
|
25
25
|
return oncss.css(props, cssOptions);
|
|
26
26
|
};
|
|
@@ -52,4 +52,4 @@ const alpha = (color, opacity = 1) => {
|
|
|
52
52
|
if (!color.startsWith("#"))
|
|
53
53
|
throw new Error(`color must be hex`);
|
|
54
54
|
return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
|
|
55
|
-
};exports.getValue=getValue;exports.getProps=getProps;exports.adjustColor=adjustColor;exports.adjustTextContrast=adjustTextContrast;exports.alpha=alpha;exports.breakpoints=breakpoints;exports.css=css;//# sourceMappingURL=index.js.map
|
|
55
|
+
};exports.getValue=getValue.default;exports.getProps=getProps.default;exports.adjustColor=adjustColor;exports.adjustTextContrast=adjustTextContrast;exports.alpha=alpha;exports.breakpoints=breakpoints;exports.css=css;//# sourceMappingURL=index.js.map
|
package/css/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n getValue,\n getProps\n}\n\nexport const breakpoints = {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n const cssOptions: CSSOptionProps = {\n ...options,\n breakpoints,\n aliases,\n getValue: (p: any, v: any, _c: any, dept) => {\n if (options?.getValue) {\n let _val = options?.getValue(p, v, _c, dept)\n if (_val) return _val\n }\n return getValue(p, v, _c)\n },\n getProps: (p: any, v: any, _c: any, dept) => {\n if (options?.getProps) {\n let _p = options?.getProps(p, v, _c, dept)\n if (_p) return _p\n }\n return getProps(p, v, _c)\n },\n }\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n hex = hex.replace(/^#/, '')\n\n let r = parseInt(hex.slice(0, 2), 16)\n let g = parseInt(hex.slice(2, 4), 16)\n let b = parseInt(hex.slice(4, 6), 16)\n\n r = Math.floor(r * factor)\n g = Math.floor(g * factor)\n b = Math.floor(b * factor)\n\n r = Math.min(255, Math.max(0, r))\n g = Math.min(255, Math.max(0, g))\n b = Math.min(255, Math.max(0, b))\n\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n color = color.replace(/^#/, '')\n const r = parseInt(color.slice(0, 2), 16);\n const g = parseInt(color.slice(2, 4), 16);\n const b = parseInt(color.slice(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n if (typeof opacity !== 'number') return color\n let _opacity = opacity * 100\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"qMAWa,MAAA,WAAW,GAAG;AACvB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE;;MAGK,GAAG,GAAG,CAAC,KAAe,EAAE,OAAwB,KAAI;AAC7D,IAAA,MAAM,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,OAAO,CAAA,EAAA,EACV,WAAW;AACX,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n getValue,\n getProps\n}\n\nexport const breakpoints = {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n const cssOptions: CSSOptionProps = {\n ...options,\n breakpoints,\n aliases,\n getValue: (p: any, v: any, _c: any, dept) => {\n if (options?.getValue) {\n let _val = options?.getValue(p, v, _c, dept)\n if (_val) return _val\n }\n return getValue(p, v, _c)\n },\n getProps: (p: any, v: any, _c: any, dept) => {\n if (options?.getProps) {\n let _p = options?.getProps(p, v, _c, dept)\n if (_p) return _p\n }\n return getProps(p, v, _c)\n },\n }\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n hex = hex.replace(/^#/, '')\n\n let r = parseInt(hex.slice(0, 2), 16)\n let g = parseInt(hex.slice(2, 4), 16)\n let b = parseInt(hex.slice(4, 6), 16)\n\n r = Math.floor(r * factor)\n g = Math.floor(g * factor)\n b = Math.floor(b * factor)\n\n r = Math.min(255, Math.max(0, r))\n g = Math.min(255, Math.max(0, g))\n b = Math.min(255, Math.max(0, b))\n\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n color = color.replace(/^#/, '')\n const r = parseInt(color.slice(0, 2), 16);\n const g = parseInt(color.slice(2, 4), 16);\n const b = parseInt(color.slice(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n if (typeof opacity !== 'number') return color\n let _opacity = opacity * 100\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["aliases","getValue","getProps","_css"],"mappings":"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"}
|
package/css/types.d.ts
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import * as CSS from 'csstype';
|
|
2
|
+
import { ColorsRefTypes, TypographyRefTypes, ThemeOptions } from '../theme/types.js';
|
|
3
|
+
import * as oncss from 'oncss';
|
|
4
|
+
|
|
5
|
+
type FN = (theme: ThemeOptions) => string | number;
|
|
6
|
+
type CSSBreakpointType = {
|
|
7
|
+
[key in BreakpointKeys]: string | number;
|
|
8
|
+
};
|
|
9
|
+
type CSSValueType<T extends keyof CSS.Properties> = CSS.Properties[T] | Partial<CSSBreakpointType> | number;
|
|
10
|
+
type Aliases = {
|
|
11
|
+
bgcolor?: CSSValueType<'background'> | ColorsRefTypes;
|
|
12
|
+
bgimage?: CSSValueType<'backgroundImage'>;
|
|
13
|
+
bg?: CSSValueType<'background'> | ColorsRefTypes;
|
|
14
|
+
p?: CSSValueType<'padding'>;
|
|
15
|
+
pt?: CSSValueType<'padding'>;
|
|
16
|
+
pr?: CSSValueType<'padding'>;
|
|
17
|
+
pb?: CSSValueType<'padding'>;
|
|
18
|
+
pl?: CSSValueType<'padding'>;
|
|
19
|
+
px?: CSSValueType<'padding'>;
|
|
20
|
+
py?: CSSValueType<'margin'>;
|
|
21
|
+
m?: CSSValueType<'margin'>;
|
|
22
|
+
mt?: CSSValueType<'margin'>;
|
|
23
|
+
mr?: CSSValueType<'margin'>;
|
|
24
|
+
mb?: CSSValueType<'margin'>;
|
|
25
|
+
ml?: CSSValueType<'margin'>;
|
|
26
|
+
mx?: CSSValueType<'margin'>;
|
|
27
|
+
my?: CSSValueType<'margin'>;
|
|
28
|
+
size?: CSSValueType<'width'>;
|
|
29
|
+
spacing?: Partial<CSSBreakpointType> | number;
|
|
30
|
+
radius?: CSSValueType<'borderRadius'> | number;
|
|
31
|
+
borderRadius?: CSSValueType<'borderRadius'> | number;
|
|
32
|
+
shadow?: CSSValueType<'boxShadow'> | number;
|
|
33
|
+
flexBox?: boolean;
|
|
34
|
+
flexRow?: boolean;
|
|
35
|
+
flexColumn?: boolean;
|
|
36
|
+
flexWraped?: boolean;
|
|
37
|
+
direction?: "row" | "column" | CSSValueType<'direction'>;
|
|
38
|
+
gap?: CSSValueType<'gap'>;
|
|
39
|
+
color?: CSSValueType<'color'> | ColorsRefTypes;
|
|
40
|
+
width?: CSSValueType<'width'> | BreakpointKeys;
|
|
41
|
+
height?: CSSValueType<'height'>;
|
|
42
|
+
borderColor?: CSSValueType<'backgroundColor'> | ColorsRefTypes;
|
|
43
|
+
fontFamily?: CSSValueType<"fontFamily"> | "default";
|
|
44
|
+
fontSize?: CSSValueType<"fontSize"> | TypographyRefTypes;
|
|
45
|
+
minWidth?: CSSValueType<"minWidth"> | BreakpointKeys;
|
|
46
|
+
maxWidth?: CSSValueType<"maxWidth"> | BreakpointKeys;
|
|
47
|
+
minHeight?: CSSValueType<"minHeight">;
|
|
48
|
+
maxHeight?: CSSValueType<"maxHeight">;
|
|
49
|
+
};
|
|
50
|
+
type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl";
|
|
51
|
+
type CSSProps = oncss.CSSProps<Aliases, BreakpointKeys>;
|
|
52
|
+
type CSSOptionProps = oncss.CSSOptionProps<Aliases, BreakpointKeys>;
|
|
53
|
+
type GlobalCSS = {
|
|
54
|
+
[key: string]: oncss.CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export type { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS };
|