@soroush.tech/styled-system 5.1.6
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/LICENSE +26 -0
- package/README.md +150 -0
- package/dist/background-B-jql3jb.mjs +16 -0
- package/dist/background-wugr6cG7.cjs +21 -0
- package/dist/background.cjs +7 -0
- package/dist/background.d.cts +2 -0
- package/dist/background.d.mts +2 -0
- package/dist/background.mjs +2 -0
- package/dist/border-Dder4Dhp.mjs +131 -0
- package/dist/border-UuT-fTpy.cjs +136 -0
- package/dist/border.cjs +7 -0
- package/dist/border.d.cts +2 -0
- package/dist/border.d.mts +2 -0
- package/dist/border.mjs +2 -0
- package/dist/color-BNs17Gw-.cjs +22 -0
- package/dist/color-CGmMe8yP.mjs +17 -0
- package/dist/color.cjs +7 -0
- package/dist/color.d.cts +2 -0
- package/dist/color.d.mts +2 -0
- package/dist/color.mjs +2 -0
- package/dist/core.cjs +144 -0
- package/dist/core.d.cts +2 -0
- package/dist/core.d.mts +2 -0
- package/dist/core.mjs +138 -0
- package/dist/css-nzeM_Xnf.cjs +231 -0
- package/dist/css-rLZ9Oeye.mjs +214 -0
- package/dist/css.cjs +9 -0
- package/dist/css.d.cts +12 -0
- package/dist/css.d.mts +12 -0
- package/dist/css.mjs +2 -0
- package/dist/flexbox-CFkO6PrP.cjs +22 -0
- package/dist/flexbox-XQnlnfa4.mjs +18 -0
- package/dist/flexbox.cjs +7 -0
- package/dist/flexbox.d.cts +2 -0
- package/dist/flexbox.d.mts +2 -0
- package/dist/flexbox.mjs +2 -0
- package/dist/grid-Bpk-QjhF.mjs +41 -0
- package/dist/grid-CpvRIng4.cjs +47 -0
- package/dist/grid.cjs +7 -0
- package/dist/grid.d.cts +2 -0
- package/dist/grid.d.mts +2 -0
- package/dist/grid.mjs +2 -0
- package/dist/index-50KH4Mo7.d.cts +8 -0
- package/dist/index-8PSQ0vkP.d.cts +15 -0
- package/dist/index-9ZhIewzy.d.mts +6 -0
- package/dist/index-BBTVE4EM.d.mts +15 -0
- package/dist/index-BS9GuhQN.d.cts +6 -0
- package/dist/index-BoMacn6F.d.cts +6 -0
- package/dist/index-Bx7IxKu-.d.mts +6 -0
- package/dist/index-C13YRARN.d.mts +6 -0
- package/dist/index-C3_fScux.d.mts +8 -0
- package/dist/index-CX2jWEGJ.d.mts +6 -0
- package/dist/index-CarHCWLQ.d.cts +6 -0
- package/dist/index-Ce09s0FQ.d.cts +6 -0
- package/dist/index-CrUx2vIP.d.mts +6 -0
- package/dist/index-CsS_gcI9.d.mts +6 -0
- package/dist/index-D3t1Lyte.d.mts +6 -0
- package/dist/index-D8EyRZ5p.d.cts +62 -0
- package/dist/index-D8EyRZ5p.d.mts +62 -0
- package/dist/index-DPWkvooj.d.mts +6 -0
- package/dist/index-DVR6hZCd.d.cts +6 -0
- package/dist/index-DZaFk5pk.d.cts +6 -0
- package/dist/index-J3PebPto.d.mts +6 -0
- package/dist/index-Nc-10syf.d.cts +6 -0
- package/dist/index-j3E1mxCg.d.cts +6 -0
- package/dist/index-z86wOHTb.d.cts +6 -0
- package/dist/index.cjs +185 -0
- package/dist/index.d.cts +281 -0
- package/dist/index.d.mts +281 -0
- package/dist/index.mjs +98 -0
- package/dist/layout-B1-2dfQ9.cjs +48 -0
- package/dist/layout-TqD8vcEl.mjs +42 -0
- package/dist/layout.cjs +7 -0
- package/dist/layout.d.cts +2 -0
- package/dist/layout.d.mts +2 -0
- package/dist/layout.mjs +2 -0
- package/dist/position-jf6VlRyR.mjs +42 -0
- package/dist/position-zWvCE4hD.cjs +48 -0
- package/dist/position.cjs +7 -0
- package/dist/position.d.cts +2 -0
- package/dist/position.d.mts +2 -0
- package/dist/position.mjs +2 -0
- package/dist/presets-DjaCx0dm.mjs +16 -0
- package/dist/presets-DlUVOAIL.cjs +21 -0
- package/dist/props.cjs +23 -0
- package/dist/props.d.cts +5 -0
- package/dist/props.d.mts +5 -0
- package/dist/props.mjs +21 -0
- package/dist/shadow-Bp7lx_41.mjs +14 -0
- package/dist/shadow-BrDnaQQl.cjs +18 -0
- package/dist/shadow.cjs +7 -0
- package/dist/shadow.d.cts +2 -0
- package/dist/shadow.d.mts +2 -0
- package/dist/shadow.mjs +2 -0
- package/dist/should-forward-prop.cjs +47 -0
- package/dist/should-forward-prop.d.cts +6 -0
- package/dist/should-forward-prop.d.mts +6 -0
- package/dist/should-forward-prop.mjs +18 -0
- package/dist/space-C14uiNpw.cjs +139 -0
- package/dist/space-CNrX-zoo.mjs +122 -0
- package/dist/space.cjs +9 -0
- package/dist/space.d.cts +2 -0
- package/dist/space.d.mts +2 -0
- package/dist/space.mjs +2 -0
- package/dist/theme-get.cjs +10 -0
- package/dist/theme-get.d.cts +6 -0
- package/dist/theme-get.d.mts +6 -0
- package/dist/theme-get.mjs +5 -0
- package/dist/typography-CptBXSy0.mjs +38 -0
- package/dist/typography-DD_eWLLx.cjs +42 -0
- package/dist/typography.cjs +7 -0
- package/dist/typography.d.cts +2 -0
- package/dist/typography.d.mts +2 -0
- package/dist/typography.mjs +2 -0
- package/dist/variant-CWUfe1Cc.mjs +22 -0
- package/dist/variant-ChsBzwrI.cjs +45 -0
- package/dist/variant.cjs +10 -0
- package/dist/variant.d.cts +2 -0
- package/dist/variant.d.mts +2 -0
- package/dist/variant.mjs +2 -0
- package/package.json +255 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as CSS from "csstype";
|
|
2
|
+
|
|
3
|
+
//#region src/core/core.d.ts
|
|
4
|
+
type StyleObject = Record<string, unknown>;
|
|
5
|
+
type CSSLength = string | number;
|
|
6
|
+
/**
|
|
7
|
+
* A CSS-in-JS style object: typed CSS properties plus nested selectors, at-rules
|
|
8
|
+
* (media queries), and pseudo-classes. Structurally compatible with the `CSSObject`
|
|
9
|
+
* of Emotion and styled-components, so a {@link Parser} can be dropped straight into
|
|
10
|
+
* either engine's `styled()` as an interpolation.
|
|
11
|
+
*/
|
|
12
|
+
interface CSSObject extends CSS.Properties<CSSLength>, CSS.PropertiesHyphen<CSSLength> {
|
|
13
|
+
[selectorOrAtRule: string]: CSSObject | string | number | undefined;
|
|
14
|
+
}
|
|
15
|
+
interface Theme {
|
|
16
|
+
breakpoints?: readonly (string | number)[] | Record<string, string | number>;
|
|
17
|
+
disableStyledSystemCache?: boolean;
|
|
18
|
+
[key: string]: unknown;
|
|
19
|
+
}
|
|
20
|
+
interface Props {
|
|
21
|
+
theme?: Theme;
|
|
22
|
+
[key: string]: unknown;
|
|
23
|
+
}
|
|
24
|
+
type Transform = (value: unknown, scale?: unknown, props?: Props) => unknown;
|
|
25
|
+
interface StyleFn {
|
|
26
|
+
(value: unknown, scale?: unknown, props?: Props): StyleObject | undefined;
|
|
27
|
+
scale?: string;
|
|
28
|
+
defaults?: unknown;
|
|
29
|
+
}
|
|
30
|
+
interface ConfigStyle {
|
|
31
|
+
property?: string;
|
|
32
|
+
properties?: string[];
|
|
33
|
+
scale?: string;
|
|
34
|
+
transform?: Transform;
|
|
35
|
+
defaultScale?: unknown;
|
|
36
|
+
}
|
|
37
|
+
type SystemConfig = Record<string, boolean | StyleFn | ConfigStyle>;
|
|
38
|
+
type ParserConfig = Record<string, StyleFn>;
|
|
39
|
+
interface ParserCache {
|
|
40
|
+
breakpoints?: readonly (string | number)[] | Record<string, string | number>;
|
|
41
|
+
media?: (string | null)[];
|
|
42
|
+
}
|
|
43
|
+
interface Parser {
|
|
44
|
+
(...args: any[]): any;
|
|
45
|
+
config: ParserConfig;
|
|
46
|
+
propNames: string[];
|
|
47
|
+
cache: ParserCache;
|
|
48
|
+
}
|
|
49
|
+
declare const merge: (a: StyleObject, b: StyleObject) => StyleObject;
|
|
50
|
+
declare const get: (obj: any, key?: string | number, def?: any, p?: number, undef?: any) => any;
|
|
51
|
+
declare const createParser: (config: ParserConfig) => Parser;
|
|
52
|
+
declare const createStyleFunction: ({
|
|
53
|
+
properties,
|
|
54
|
+
property,
|
|
55
|
+
scale,
|
|
56
|
+
transform,
|
|
57
|
+
defaultScale
|
|
58
|
+
}: ConfigStyle) => StyleFn;
|
|
59
|
+
declare const system: (args?: SystemConfig) => Parser;
|
|
60
|
+
declare const compose: (...parsers: (Parser | undefined)[]) => Parser;
|
|
61
|
+
//#endregion
|
|
62
|
+
export { Props as a, SystemConfig as c, compose as d, createParser as f, system as g, merge as h, ParserConfig as i, Theme as l, get as m, ConfigStyle as n, StyleFn as o, createStyleFunction as p, Parser as r, StyleObject as s, CSSObject as t, Transform as u };
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_core = require("./core.cjs");
|
|
3
|
+
const require_background = require("./background-wugr6cG7.cjs");
|
|
4
|
+
const require_border = require("./border-UuT-fTpy.cjs");
|
|
5
|
+
const require_color = require("./color-BNs17Gw-.cjs");
|
|
6
|
+
const require_flexbox = require("./flexbox-CFkO6PrP.cjs");
|
|
7
|
+
const require_grid = require("./grid-CpvRIng4.cjs");
|
|
8
|
+
const require_layout = require("./layout-B1-2dfQ9.cjs");
|
|
9
|
+
const require_position = require("./position-zWvCE4hD.cjs");
|
|
10
|
+
const require_typography = require("./typography-DD_eWLLx.cjs");
|
|
11
|
+
const require_space = require("./space-C14uiNpw.cjs");
|
|
12
|
+
const require_shadow = require("./shadow-BrDnaQQl.cjs");
|
|
13
|
+
const require_variant = require("./variant-ChsBzwrI.cjs");
|
|
14
|
+
//#region src/style/style.ts
|
|
15
|
+
const style = ({ prop, cssProperty, alias, key, transformValue, scale, properties }) => {
|
|
16
|
+
const config = {};
|
|
17
|
+
config[prop] = require_core.createStyleFunction({
|
|
18
|
+
properties,
|
|
19
|
+
property: cssProperty || prop,
|
|
20
|
+
scale: key,
|
|
21
|
+
defaultScale: scale,
|
|
22
|
+
transform: transformValue
|
|
23
|
+
});
|
|
24
|
+
if (alias) config[alias] = config[prop];
|
|
25
|
+
return require_core.createParser(config);
|
|
26
|
+
};
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/index.ts
|
|
29
|
+
const layoutFns = require_layout.layout;
|
|
30
|
+
const width = layoutFns.width;
|
|
31
|
+
const height = layoutFns.height;
|
|
32
|
+
const minWidth = layoutFns.minWidth;
|
|
33
|
+
const minHeight = layoutFns.minHeight;
|
|
34
|
+
const maxWidth = layoutFns.maxWidth;
|
|
35
|
+
const maxHeight = layoutFns.maxHeight;
|
|
36
|
+
const size = layoutFns.size;
|
|
37
|
+
const verticalAlign = layoutFns.verticalAlign;
|
|
38
|
+
const display = layoutFns.display;
|
|
39
|
+
const overflow = layoutFns.overflow;
|
|
40
|
+
const overflowX = layoutFns.overflowX;
|
|
41
|
+
const overflowY = layoutFns.overflowY;
|
|
42
|
+
const opacity = require_color.color.opacity;
|
|
43
|
+
const typographyFns = require_typography.typography;
|
|
44
|
+
const fontSize = typographyFns.fontSize;
|
|
45
|
+
const fontFamily = typographyFns.fontFamily;
|
|
46
|
+
const fontWeight = typographyFns.fontWeight;
|
|
47
|
+
const lineHeight = typographyFns.lineHeight;
|
|
48
|
+
const textAlign = typographyFns.textAlign;
|
|
49
|
+
const fontStyle = typographyFns.fontStyle;
|
|
50
|
+
const letterSpacing = typographyFns.letterSpacing;
|
|
51
|
+
const flexboxFns = require_flexbox.flexbox;
|
|
52
|
+
const alignItems = flexboxFns.alignItems;
|
|
53
|
+
const alignContent = flexboxFns.alignContent;
|
|
54
|
+
const justifyItems = flexboxFns.justifyItems;
|
|
55
|
+
const justifyContent = flexboxFns.justifyContent;
|
|
56
|
+
const flexWrap = flexboxFns.flexWrap;
|
|
57
|
+
const flexDirection = flexboxFns.flexDirection;
|
|
58
|
+
const flex = flexboxFns.flex;
|
|
59
|
+
const flexGrow = flexboxFns.flexGrow;
|
|
60
|
+
const flexShrink = flexboxFns.flexShrink;
|
|
61
|
+
const flexBasis = flexboxFns.flexBasis;
|
|
62
|
+
const justifySelf = flexboxFns.justifySelf;
|
|
63
|
+
const alignSelf = flexboxFns.alignSelf;
|
|
64
|
+
const order = flexboxFns.order;
|
|
65
|
+
const gridFns = require_grid.grid;
|
|
66
|
+
const gridGap = gridFns.gridGap;
|
|
67
|
+
const gridColumnGap = gridFns.gridColumnGap;
|
|
68
|
+
const gridRowGap = gridFns.gridRowGap;
|
|
69
|
+
const gridColumn = gridFns.gridColumn;
|
|
70
|
+
const gridRow = gridFns.gridRow;
|
|
71
|
+
const gridAutoFlow = gridFns.gridAutoFlow;
|
|
72
|
+
const gridAutoColumns = gridFns.gridAutoColumns;
|
|
73
|
+
const gridAutoRows = gridFns.gridAutoRows;
|
|
74
|
+
const gridTemplateColumns = gridFns.gridTemplateColumns;
|
|
75
|
+
const gridTemplateRows = gridFns.gridTemplateRows;
|
|
76
|
+
const gridTemplateAreas = gridFns.gridTemplateAreas;
|
|
77
|
+
const gridArea = gridFns.gridArea;
|
|
78
|
+
const borderFns = require_border.border;
|
|
79
|
+
const borderWidth = borderFns.borderWidth;
|
|
80
|
+
const borderStyle = borderFns.borderStyle;
|
|
81
|
+
const borderColor = borderFns.borderColor;
|
|
82
|
+
const borderTop = borderFns.borderTop;
|
|
83
|
+
const borderRight = borderFns.borderRight;
|
|
84
|
+
const borderBottom = borderFns.borderBottom;
|
|
85
|
+
const borderLeft = borderFns.borderLeft;
|
|
86
|
+
const borderRadius = borderFns.borderRadius;
|
|
87
|
+
const backgroundFns = require_background.background;
|
|
88
|
+
const backgroundImage = backgroundFns.backgroundImage;
|
|
89
|
+
const backgroundSize = backgroundFns.backgroundSize;
|
|
90
|
+
const backgroundPosition = backgroundFns.backgroundPosition;
|
|
91
|
+
const backgroundRepeat = backgroundFns.backgroundRepeat;
|
|
92
|
+
const positionFns = require_position.position;
|
|
93
|
+
const zIndex = positionFns.zIndex;
|
|
94
|
+
const top = positionFns.top;
|
|
95
|
+
const right = positionFns.right;
|
|
96
|
+
const bottom = positionFns.bottom;
|
|
97
|
+
const left = positionFns.left;
|
|
98
|
+
//#endregion
|
|
99
|
+
exports.alignContent = alignContent;
|
|
100
|
+
exports.alignItems = alignItems;
|
|
101
|
+
exports.alignSelf = alignSelf;
|
|
102
|
+
exports.background = require_background.background;
|
|
103
|
+
exports.backgroundImage = backgroundImage;
|
|
104
|
+
exports.backgroundPosition = backgroundPosition;
|
|
105
|
+
exports.backgroundRepeat = backgroundRepeat;
|
|
106
|
+
exports.backgroundSize = backgroundSize;
|
|
107
|
+
exports.border = require_border.border;
|
|
108
|
+
exports.borderBottom = borderBottom;
|
|
109
|
+
exports.borderColor = borderColor;
|
|
110
|
+
exports.borderLeft = borderLeft;
|
|
111
|
+
exports.borderRadius = borderRadius;
|
|
112
|
+
exports.borderRight = borderRight;
|
|
113
|
+
exports.borderStyle = borderStyle;
|
|
114
|
+
exports.borderTop = borderTop;
|
|
115
|
+
exports.borderWidth = borderWidth;
|
|
116
|
+
exports.borders = require_border.border;
|
|
117
|
+
exports.bottom = bottom;
|
|
118
|
+
exports.boxShadow = require_shadow.shadow;
|
|
119
|
+
exports.buttonStyle = require_variant.buttonStyle;
|
|
120
|
+
exports.color = require_color.color;
|
|
121
|
+
exports.colorStyle = require_variant.colorStyle;
|
|
122
|
+
exports.compose = require_core.compose;
|
|
123
|
+
exports.createParser = require_core.createParser;
|
|
124
|
+
exports.createStyleFunction = require_core.createStyleFunction;
|
|
125
|
+
exports.display = display;
|
|
126
|
+
exports.flex = flex;
|
|
127
|
+
exports.flexBasis = flexBasis;
|
|
128
|
+
exports.flexDirection = flexDirection;
|
|
129
|
+
exports.flexGrow = flexGrow;
|
|
130
|
+
exports.flexShrink = flexShrink;
|
|
131
|
+
exports.flexWrap = flexWrap;
|
|
132
|
+
exports.flexbox = require_flexbox.flexbox;
|
|
133
|
+
exports.fontFamily = fontFamily;
|
|
134
|
+
exports.fontSize = fontSize;
|
|
135
|
+
exports.fontStyle = fontStyle;
|
|
136
|
+
exports.fontWeight = fontWeight;
|
|
137
|
+
exports.get = require_core.get;
|
|
138
|
+
exports.grid = require_grid.grid;
|
|
139
|
+
exports.gridArea = gridArea;
|
|
140
|
+
exports.gridAutoColumns = gridAutoColumns;
|
|
141
|
+
exports.gridAutoFlow = gridAutoFlow;
|
|
142
|
+
exports.gridAutoRows = gridAutoRows;
|
|
143
|
+
exports.gridColumn = gridColumn;
|
|
144
|
+
exports.gridColumnGap = gridColumnGap;
|
|
145
|
+
exports.gridGap = gridGap;
|
|
146
|
+
exports.gridRow = gridRow;
|
|
147
|
+
exports.gridRowGap = gridRowGap;
|
|
148
|
+
exports.gridTemplateAreas = gridTemplateAreas;
|
|
149
|
+
exports.gridTemplateColumns = gridTemplateColumns;
|
|
150
|
+
exports.gridTemplateRows = gridTemplateRows;
|
|
151
|
+
exports.height = height;
|
|
152
|
+
exports.justifyContent = justifyContent;
|
|
153
|
+
exports.justifyItems = justifyItems;
|
|
154
|
+
exports.justifySelf = justifySelf;
|
|
155
|
+
exports.layout = require_layout.layout;
|
|
156
|
+
exports.left = left;
|
|
157
|
+
exports.letterSpacing = letterSpacing;
|
|
158
|
+
exports.lineHeight = lineHeight;
|
|
159
|
+
exports.margin = require_space.margin;
|
|
160
|
+
exports.maxHeight = maxHeight;
|
|
161
|
+
exports.maxWidth = maxWidth;
|
|
162
|
+
exports.minHeight = minHeight;
|
|
163
|
+
exports.minWidth = minWidth;
|
|
164
|
+
exports.opacity = opacity;
|
|
165
|
+
exports.order = order;
|
|
166
|
+
exports.overflow = overflow;
|
|
167
|
+
exports.overflowX = overflowX;
|
|
168
|
+
exports.overflowY = overflowY;
|
|
169
|
+
exports.padding = require_space.padding;
|
|
170
|
+
exports.position = require_position.position;
|
|
171
|
+
exports.right = right;
|
|
172
|
+
exports.shadow = require_shadow.shadow;
|
|
173
|
+
exports.size = size;
|
|
174
|
+
exports.space = require_space.space;
|
|
175
|
+
exports.style = style;
|
|
176
|
+
exports.system = require_core.system;
|
|
177
|
+
exports.textAlign = textAlign;
|
|
178
|
+
exports.textShadow = require_shadow.shadow;
|
|
179
|
+
exports.textStyle = require_variant.textStyle;
|
|
180
|
+
exports.top = top;
|
|
181
|
+
exports.typography = require_typography.typography;
|
|
182
|
+
exports.variant = require_variant.variant;
|
|
183
|
+
exports.verticalAlign = verticalAlign;
|
|
184
|
+
exports.width = width;
|
|
185
|
+
exports.zIndex = zIndex;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
import { a as Props, c as SystemConfig, d as compose, f as createParser, g as system, i as ParserConfig, m as get, n as ConfigStyle, o as StyleFn, p as createStyleFunction, r as Parser, s as StyleObject, u as Transform } from "./index-D8EyRZ5p.cjs";
|
|
2
|
+
import { t as background } from "./index-DZaFk5pk.cjs";
|
|
3
|
+
import { t as border } from "./index-BoMacn6F.cjs";
|
|
4
|
+
import { t as color } from "./index-j3E1mxCg.cjs";
|
|
5
|
+
import { t as flexbox } from "./index-BS9GuhQN.cjs";
|
|
6
|
+
import { t as grid } from "./index-Ce09s0FQ.cjs";
|
|
7
|
+
import { n as padding, r as space, t as margin } from "./index-50KH4Mo7.cjs";
|
|
8
|
+
import { t as layout } from "./index-Nc-10syf.cjs";
|
|
9
|
+
import { t as typography } from "./index-CarHCWLQ.cjs";
|
|
10
|
+
import { t as position } from "./index-z86wOHTb.cjs";
|
|
11
|
+
import { t as shadow } from "./index-DVR6hZCd.cjs";
|
|
12
|
+
import { a as variant, i as textStyle, n as buttonStyle, r as colorStyle } from "./index-8PSQ0vkP.cjs";
|
|
13
|
+
import * as CSS from "csstype";
|
|
14
|
+
|
|
15
|
+
//#region src/style/style.d.ts
|
|
16
|
+
interface StyleOptions {
|
|
17
|
+
prop: string;
|
|
18
|
+
cssProperty?: string;
|
|
19
|
+
alias?: string;
|
|
20
|
+
key?: string;
|
|
21
|
+
transformValue?: Transform;
|
|
22
|
+
scale?: unknown;
|
|
23
|
+
properties?: string[];
|
|
24
|
+
}
|
|
25
|
+
declare const style: ({
|
|
26
|
+
prop,
|
|
27
|
+
cssProperty,
|
|
28
|
+
alias,
|
|
29
|
+
key,
|
|
30
|
+
transformValue,
|
|
31
|
+
scale,
|
|
32
|
+
properties
|
|
33
|
+
}: StyleOptions) => Parser;
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region src/types.d.ts
|
|
36
|
+
type ObjectOrArray<T, K extends keyof never = keyof never> = T[] | Record<K, T | Record<K, T> | T[]>;
|
|
37
|
+
type Scale = ObjectOrArray<number | string>;
|
|
38
|
+
type TLengthStyledSystem = string | 0 | number;
|
|
39
|
+
interface Theme<TLength = TLengthStyledSystem> {
|
|
40
|
+
breakpoints?: ObjectOrArray<number | string | symbol>;
|
|
41
|
+
mediaQueries?: {
|
|
42
|
+
[size: string]: string;
|
|
43
|
+
};
|
|
44
|
+
space?: ObjectOrArray<CSS.Property.Margin<number | string>>;
|
|
45
|
+
fontSizes?: ObjectOrArray<CSS.Property.FontSize<number>>;
|
|
46
|
+
colors?: ObjectOrArray<CSS.Property.Color>;
|
|
47
|
+
fonts?: ObjectOrArray<CSS.Property.FontFamily>;
|
|
48
|
+
fontWeights?: ObjectOrArray<CSS.Property.FontWeight>;
|
|
49
|
+
lineHeights?: ObjectOrArray<CSS.Property.LineHeight<TLength>>;
|
|
50
|
+
letterSpacings?: ObjectOrArray<CSS.Property.LetterSpacing<TLength>>;
|
|
51
|
+
sizes?: ObjectOrArray<CSS.Property.Height<object> | CSS.Property.Width<object>>;
|
|
52
|
+
borders?: ObjectOrArray<CSS.Property.Border<object>>;
|
|
53
|
+
borderStyles?: ObjectOrArray<CSS.Property.Border<object>>;
|
|
54
|
+
borderWidths?: ObjectOrArray<CSS.Property.BorderWidth<TLength>>;
|
|
55
|
+
radii?: ObjectOrArray<CSS.Property.BorderRadius<TLength>>;
|
|
56
|
+
shadows?: ObjectOrArray<CSS.Property.BoxShadow>;
|
|
57
|
+
zIndices?: ObjectOrArray<CSS.Property.ZIndex>;
|
|
58
|
+
buttons?: ObjectOrArray<CSS.StandardProperties>;
|
|
59
|
+
colorStyles?: ObjectOrArray<CSS.StandardProperties>;
|
|
60
|
+
textStyles?: ObjectOrArray<CSS.StandardProperties>;
|
|
61
|
+
}
|
|
62
|
+
type RequiredTheme = Required<Theme>;
|
|
63
|
+
type ThemeValue<K extends keyof ThemeType, ThemeType, TVal = unknown> = NonNullable<ThemeType[K]> extends TVal[] ? number : NonNullable<ThemeType[K]> extends Record<infer E, TVal> ? E : NonNullable<ThemeType[K]> extends ObjectOrArray<infer F> ? F : never;
|
|
64
|
+
type ResponsiveValue<T, ThemeType extends Theme = RequiredTheme> = T | null | Array<T | null> | { [key in (ThemeValue<'breakpoints', ThemeType> & string) | number]?: T };
|
|
65
|
+
type L = TLengthStyledSystem;
|
|
66
|
+
interface SpaceProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
|
|
67
|
+
m?: ResponsiveValue<TVal, ThemeType>;
|
|
68
|
+
margin?: ResponsiveValue<TVal, ThemeType>;
|
|
69
|
+
mt?: ResponsiveValue<TVal, ThemeType>;
|
|
70
|
+
marginTop?: ResponsiveValue<TVal, ThemeType>;
|
|
71
|
+
mr?: ResponsiveValue<TVal, ThemeType>;
|
|
72
|
+
marginRight?: ResponsiveValue<TVal, ThemeType>;
|
|
73
|
+
mb?: ResponsiveValue<TVal, ThemeType>;
|
|
74
|
+
marginBottom?: ResponsiveValue<TVal, ThemeType>;
|
|
75
|
+
ml?: ResponsiveValue<TVal, ThemeType>;
|
|
76
|
+
marginLeft?: ResponsiveValue<TVal, ThemeType>;
|
|
77
|
+
mx?: ResponsiveValue<TVal, ThemeType>;
|
|
78
|
+
marginX?: ResponsiveValue<TVal, ThemeType>;
|
|
79
|
+
my?: ResponsiveValue<TVal, ThemeType>;
|
|
80
|
+
marginY?: ResponsiveValue<TVal, ThemeType>;
|
|
81
|
+
p?: ResponsiveValue<TVal, ThemeType>;
|
|
82
|
+
padding?: ResponsiveValue<TVal, ThemeType>;
|
|
83
|
+
pt?: ResponsiveValue<TVal, ThemeType>;
|
|
84
|
+
paddingTop?: ResponsiveValue<TVal, ThemeType>;
|
|
85
|
+
pr?: ResponsiveValue<TVal, ThemeType>;
|
|
86
|
+
paddingRight?: ResponsiveValue<TVal, ThemeType>;
|
|
87
|
+
pb?: ResponsiveValue<TVal, ThemeType>;
|
|
88
|
+
paddingBottom?: ResponsiveValue<TVal, ThemeType>;
|
|
89
|
+
pl?: ResponsiveValue<TVal, ThemeType>;
|
|
90
|
+
paddingLeft?: ResponsiveValue<TVal, ThemeType>;
|
|
91
|
+
px?: ResponsiveValue<TVal, ThemeType>;
|
|
92
|
+
paddingX?: ResponsiveValue<TVal, ThemeType>;
|
|
93
|
+
py?: ResponsiveValue<TVal, ThemeType>;
|
|
94
|
+
paddingY?: ResponsiveValue<TVal, ThemeType>;
|
|
95
|
+
}
|
|
96
|
+
interface MarginProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
|
|
97
|
+
m?: ResponsiveValue<TVal, ThemeType>;
|
|
98
|
+
margin?: ResponsiveValue<TVal, ThemeType>;
|
|
99
|
+
mt?: ResponsiveValue<TVal, ThemeType>;
|
|
100
|
+
marginTop?: ResponsiveValue<TVal, ThemeType>;
|
|
101
|
+
mr?: ResponsiveValue<TVal, ThemeType>;
|
|
102
|
+
marginRight?: ResponsiveValue<TVal, ThemeType>;
|
|
103
|
+
mb?: ResponsiveValue<TVal, ThemeType>;
|
|
104
|
+
marginBottom?: ResponsiveValue<TVal, ThemeType>;
|
|
105
|
+
ml?: ResponsiveValue<TVal, ThemeType>;
|
|
106
|
+
marginLeft?: ResponsiveValue<TVal, ThemeType>;
|
|
107
|
+
mx?: ResponsiveValue<TVal, ThemeType>;
|
|
108
|
+
marginX?: ResponsiveValue<TVal, ThemeType>;
|
|
109
|
+
my?: ResponsiveValue<TVal, ThemeType>;
|
|
110
|
+
marginY?: ResponsiveValue<TVal, ThemeType>;
|
|
111
|
+
}
|
|
112
|
+
interface PaddingProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'space', ThemeType>> {
|
|
113
|
+
p?: ResponsiveValue<TVal, ThemeType>;
|
|
114
|
+
padding?: ResponsiveValue<TVal, ThemeType>;
|
|
115
|
+
pt?: ResponsiveValue<TVal, ThemeType>;
|
|
116
|
+
paddingTop?: ResponsiveValue<TVal, ThemeType>;
|
|
117
|
+
pr?: ResponsiveValue<TVal, ThemeType>;
|
|
118
|
+
paddingRight?: ResponsiveValue<TVal, ThemeType>;
|
|
119
|
+
pb?: ResponsiveValue<TVal, ThemeType>;
|
|
120
|
+
paddingBottom?: ResponsiveValue<TVal, ThemeType>;
|
|
121
|
+
pl?: ResponsiveValue<TVal, ThemeType>;
|
|
122
|
+
paddingLeft?: ResponsiveValue<TVal, ThemeType>;
|
|
123
|
+
px?: ResponsiveValue<TVal, ThemeType>;
|
|
124
|
+
paddingX?: ResponsiveValue<TVal, ThemeType>;
|
|
125
|
+
py?: ResponsiveValue<TVal, ThemeType>;
|
|
126
|
+
paddingY?: ResponsiveValue<TVal, ThemeType>;
|
|
127
|
+
}
|
|
128
|
+
interface LayoutProps<ThemeType extends Theme = RequiredTheme> {
|
|
129
|
+
width?: ResponsiveValue<CSS.Property.Width<L>, ThemeType>;
|
|
130
|
+
height?: ResponsiveValue<CSS.Property.Height<L>, ThemeType>;
|
|
131
|
+
minWidth?: ResponsiveValue<CSS.Property.MinWidth<L>, ThemeType>;
|
|
132
|
+
minHeight?: ResponsiveValue<CSS.Property.MinHeight<L>, ThemeType>;
|
|
133
|
+
maxWidth?: ResponsiveValue<CSS.Property.MaxWidth<L>, ThemeType>;
|
|
134
|
+
maxHeight?: ResponsiveValue<CSS.Property.MaxHeight<L>, ThemeType>;
|
|
135
|
+
size?: ResponsiveValue<CSS.Property.Width<L>, ThemeType>;
|
|
136
|
+
overflow?: ResponsiveValue<CSS.Property.Overflow, ThemeType>;
|
|
137
|
+
overflowX?: ResponsiveValue<CSS.Property.OverflowX, ThemeType>;
|
|
138
|
+
overflowY?: ResponsiveValue<CSS.Property.OverflowY, ThemeType>;
|
|
139
|
+
display?: ResponsiveValue<CSS.Property.Display, ThemeType>;
|
|
140
|
+
verticalAlign?: ResponsiveValue<CSS.Property.VerticalAlign<L>, ThemeType>;
|
|
141
|
+
}
|
|
142
|
+
interface TypographyProps<ThemeType extends Theme = RequiredTheme> {
|
|
143
|
+
fontFamily?: ResponsiveValue<CSS.Property.FontFamily, ThemeType>;
|
|
144
|
+
fontSize?: ResponsiveValue<ThemeValue<'fontSizes', ThemeType>, ThemeType>;
|
|
145
|
+
fontWeight?: ResponsiveValue<ThemeValue<'fontWeights', ThemeType> | string, ThemeType>;
|
|
146
|
+
lineHeight?: ResponsiveValue<ThemeValue<'lineHeights', ThemeType>, ThemeType>;
|
|
147
|
+
letterSpacing?: ResponsiveValue<CSS.Property.LetterSpacing<L>, ThemeType>;
|
|
148
|
+
textAlign?: ResponsiveValue<CSS.Property.TextAlign, ThemeType>;
|
|
149
|
+
fontStyle?: ResponsiveValue<CSS.Property.FontStyle, ThemeType>;
|
|
150
|
+
}
|
|
151
|
+
interface FlexboxProps<ThemeType extends Theme = RequiredTheme> {
|
|
152
|
+
alignItems?: ResponsiveValue<CSS.Property.AlignItems, ThemeType>;
|
|
153
|
+
alignContent?: ResponsiveValue<CSS.Property.AlignContent, ThemeType>;
|
|
154
|
+
justifyItems?: ResponsiveValue<CSS.Property.JustifyItems, ThemeType>;
|
|
155
|
+
justifyContent?: ResponsiveValue<CSS.Property.JustifyContent, ThemeType>;
|
|
156
|
+
flexWrap?: ResponsiveValue<CSS.Property.FlexWrap, ThemeType>;
|
|
157
|
+
flexDirection?: ResponsiveValue<CSS.Property.FlexDirection, ThemeType>;
|
|
158
|
+
flex?: ResponsiveValue<CSS.Property.Flex<L>, ThemeType>;
|
|
159
|
+
flexGrow?: ResponsiveValue<CSS.Property.FlexGrow, ThemeType>;
|
|
160
|
+
flexShrink?: ResponsiveValue<CSS.Property.FlexShrink, ThemeType>;
|
|
161
|
+
flexBasis?: ResponsiveValue<CSS.Property.FlexBasis<L>, ThemeType>;
|
|
162
|
+
justifySelf?: ResponsiveValue<CSS.Property.JustifySelf, ThemeType>;
|
|
163
|
+
alignSelf?: ResponsiveValue<CSS.Property.AlignSelf, ThemeType>;
|
|
164
|
+
order?: ResponsiveValue<CSS.Property.Order, ThemeType>;
|
|
165
|
+
}
|
|
166
|
+
interface PositionProps<ThemeType extends Theme = RequiredTheme> {
|
|
167
|
+
position?: ResponsiveValue<CSS.Property.Position, ThemeType>;
|
|
168
|
+
zIndex?: ResponsiveValue<CSS.Property.ZIndex, ThemeType>;
|
|
169
|
+
top?: ResponsiveValue<CSS.Property.Top<L>, ThemeType>;
|
|
170
|
+
right?: ResponsiveValue<CSS.Property.Right<L>, ThemeType>;
|
|
171
|
+
bottom?: ResponsiveValue<CSS.Property.Bottom<L>, ThemeType>;
|
|
172
|
+
left?: ResponsiveValue<CSS.Property.Left<L>, ThemeType>;
|
|
173
|
+
}
|
|
174
|
+
interface ColorProps<ThemeType extends Theme = RequiredTheme, TVal = ThemeValue<'colors', ThemeType>> {
|
|
175
|
+
color?: ResponsiveValue<TVal, ThemeType>;
|
|
176
|
+
backgroundColor?: ResponsiveValue<TVal, ThemeType>;
|
|
177
|
+
bg?: ResponsiveValue<TVal, ThemeType>;
|
|
178
|
+
opacity?: ResponsiveValue<CSS.Property.Opacity, ThemeType>;
|
|
179
|
+
}
|
|
180
|
+
interface BorderProps<ThemeType extends Theme = RequiredTheme> {
|
|
181
|
+
border?: ResponsiveValue<CSS.Property.Border<L>, ThemeType>;
|
|
182
|
+
borderWidth?: ResponsiveValue<CSS.Property.BorderWidth<L>, ThemeType>;
|
|
183
|
+
borderStyle?: ResponsiveValue<CSS.Property.BorderStyle, ThemeType>;
|
|
184
|
+
borderColor?: ResponsiveValue<ThemeValue<'colors', ThemeType>, ThemeType>;
|
|
185
|
+
borderRadius?: ResponsiveValue<ThemeValue<'radii', ThemeType>, ThemeType>;
|
|
186
|
+
borderTop?: ResponsiveValue<CSS.Property.BorderTop<L>, ThemeType>;
|
|
187
|
+
borderRight?: ResponsiveValue<CSS.Property.BorderRight<L>, ThemeType>;
|
|
188
|
+
borderBottom?: ResponsiveValue<CSS.Property.BorderBottom<L>, ThemeType>;
|
|
189
|
+
borderLeft?: ResponsiveValue<CSS.Property.BorderLeft<L>, ThemeType>;
|
|
190
|
+
}
|
|
191
|
+
interface BackgroundProps<ThemeType extends Theme = RequiredTheme> {
|
|
192
|
+
background?: ResponsiveValue<CSS.Property.Background<L>, ThemeType>;
|
|
193
|
+
backgroundImage?: ResponsiveValue<CSS.Property.BackgroundImage, ThemeType>;
|
|
194
|
+
backgroundSize?: ResponsiveValue<CSS.Property.BackgroundSize<L>, ThemeType>;
|
|
195
|
+
backgroundPosition?: ResponsiveValue<CSS.Property.BackgroundPosition<L>, ThemeType>;
|
|
196
|
+
backgroundRepeat?: ResponsiveValue<CSS.Property.BackgroundRepeat, ThemeType>;
|
|
197
|
+
}
|
|
198
|
+
interface GridProps<ThemeType extends Theme = RequiredTheme> {
|
|
199
|
+
gridGap?: ResponsiveValue<CSS.Property.GridGap<L>, ThemeType>;
|
|
200
|
+
gridColumnGap?: ResponsiveValue<CSS.Property.GridColumnGap<L>, ThemeType>;
|
|
201
|
+
gridRowGap?: ResponsiveValue<CSS.Property.GridRowGap<L>, ThemeType>;
|
|
202
|
+
gridColumn?: ResponsiveValue<CSS.Property.GridColumn, ThemeType>;
|
|
203
|
+
gridRow?: ResponsiveValue<CSS.Property.GridRow, ThemeType>;
|
|
204
|
+
gridAutoFlow?: ResponsiveValue<CSS.Property.GridAutoFlow, ThemeType>;
|
|
205
|
+
gridAutoColumns?: ResponsiveValue<CSS.Property.GridAutoColumns<L>, ThemeType>;
|
|
206
|
+
gridAutoRows?: ResponsiveValue<CSS.Property.GridAutoRows<L>, ThemeType>;
|
|
207
|
+
gridTemplateColumns?: ResponsiveValue<CSS.Property.GridTemplateColumns<L>, ThemeType>;
|
|
208
|
+
gridTemplateRows?: ResponsiveValue<CSS.Property.GridTemplateRows<L>, ThemeType>;
|
|
209
|
+
gridTemplateAreas?: ResponsiveValue<CSS.Property.GridTemplateAreas, ThemeType>;
|
|
210
|
+
gridArea?: ResponsiveValue<CSS.Property.GridArea, ThemeType>;
|
|
211
|
+
}
|
|
212
|
+
interface ShadowProps<ThemeType extends Theme = RequiredTheme> {
|
|
213
|
+
boxShadow?: ResponsiveValue<CSS.Property.BoxShadow | string, ThemeType>;
|
|
214
|
+
textShadow?: ResponsiveValue<CSS.Property.TextShadow | string, ThemeType>;
|
|
215
|
+
}
|
|
216
|
+
//#endregion
|
|
217
|
+
//#region src/index.d.ts
|
|
218
|
+
declare const width: Parser;
|
|
219
|
+
declare const height: Parser;
|
|
220
|
+
declare const minWidth: Parser;
|
|
221
|
+
declare const minHeight: Parser;
|
|
222
|
+
declare const maxWidth: Parser;
|
|
223
|
+
declare const maxHeight: Parser;
|
|
224
|
+
declare const size: Parser;
|
|
225
|
+
declare const verticalAlign: Parser;
|
|
226
|
+
declare const display: Parser;
|
|
227
|
+
declare const overflow: Parser;
|
|
228
|
+
declare const overflowX: Parser;
|
|
229
|
+
declare const overflowY: Parser;
|
|
230
|
+
declare const opacity: Parser;
|
|
231
|
+
declare const fontSize: Parser;
|
|
232
|
+
declare const fontFamily: Parser;
|
|
233
|
+
declare const fontWeight: Parser;
|
|
234
|
+
declare const lineHeight: Parser;
|
|
235
|
+
declare const textAlign: Parser;
|
|
236
|
+
declare const fontStyle: Parser;
|
|
237
|
+
declare const letterSpacing: Parser;
|
|
238
|
+
declare const alignItems: Parser;
|
|
239
|
+
declare const alignContent: Parser;
|
|
240
|
+
declare const justifyItems: Parser;
|
|
241
|
+
declare const justifyContent: Parser;
|
|
242
|
+
declare const flexWrap: Parser;
|
|
243
|
+
declare const flexDirection: Parser;
|
|
244
|
+
declare const flex: Parser;
|
|
245
|
+
declare const flexGrow: Parser;
|
|
246
|
+
declare const flexShrink: Parser;
|
|
247
|
+
declare const flexBasis: Parser;
|
|
248
|
+
declare const justifySelf: Parser;
|
|
249
|
+
declare const alignSelf: Parser;
|
|
250
|
+
declare const order: Parser;
|
|
251
|
+
declare const gridGap: Parser;
|
|
252
|
+
declare const gridColumnGap: Parser;
|
|
253
|
+
declare const gridRowGap: Parser;
|
|
254
|
+
declare const gridColumn: Parser;
|
|
255
|
+
declare const gridRow: Parser;
|
|
256
|
+
declare const gridAutoFlow: Parser;
|
|
257
|
+
declare const gridAutoColumns: Parser;
|
|
258
|
+
declare const gridAutoRows: Parser;
|
|
259
|
+
declare const gridTemplateColumns: Parser;
|
|
260
|
+
declare const gridTemplateRows: Parser;
|
|
261
|
+
declare const gridTemplateAreas: Parser;
|
|
262
|
+
declare const gridArea: Parser;
|
|
263
|
+
declare const borderWidth: Parser;
|
|
264
|
+
declare const borderStyle: Parser;
|
|
265
|
+
declare const borderColor: Parser;
|
|
266
|
+
declare const borderTop: Parser;
|
|
267
|
+
declare const borderRight: Parser;
|
|
268
|
+
declare const borderBottom: Parser;
|
|
269
|
+
declare const borderLeft: Parser;
|
|
270
|
+
declare const borderRadius: Parser;
|
|
271
|
+
declare const backgroundImage: Parser;
|
|
272
|
+
declare const backgroundSize: Parser;
|
|
273
|
+
declare const backgroundPosition: Parser;
|
|
274
|
+
declare const backgroundRepeat: Parser;
|
|
275
|
+
declare const zIndex: Parser;
|
|
276
|
+
declare const top: Parser;
|
|
277
|
+
declare const right: Parser;
|
|
278
|
+
declare const bottom: Parser;
|
|
279
|
+
declare const left: Parser;
|
|
280
|
+
//#endregion
|
|
281
|
+
export { BackgroundProps, BorderProps, ColorProps, type ConfigStyle, FlexboxProps, GridProps, LayoutProps, MarginProps, ObjectOrArray, PaddingProps, type Parser, type ParserConfig, PositionProps, type Props, RequiredTheme, ResponsiveValue, Scale, ShadowProps, SpaceProps, type StyleFn, type StyleObject, type SystemConfig, TLengthStyledSystem, Theme, ThemeValue, type Transform, TypographyProps, alignContent, alignItems, alignSelf, background, backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize, border, border as borders, borderBottom, borderColor, borderLeft, borderRadius, borderRight, borderStyle, borderTop, borderWidth, bottom, shadow as boxShadow, shadow, shadow as textShadow, buttonStyle, color, colorStyle, compose, createParser, createStyleFunction, display, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, get, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnGap, gridGap, gridRow, gridRowGap, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, justifyContent, justifyItems, justifySelf, layout, left, letterSpacing, lineHeight, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, order, overflow, overflowX, overflowY, padding, position, right, size, space, style, system, textAlign, textStyle, top, typography, variant, verticalAlign, width, zIndex };
|