daleui 0.0.2 → 0.0.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/README.md +43 -0
- package/dist/check-DEVerfH5.js +72 -0
- package/dist/components/Box/Box.d.ts +34 -0
- package/dist/components/Box/Box.js +34 -0
- package/dist/components/Button/Button.d.ts +37 -0
- package/dist/components/Button/Button.js +367 -0
- package/dist/components/Card/Card.d.ts +68 -0
- package/dist/components/Card/Card.js +132 -0
- package/dist/components/Checkbox/Checkbox.d.ts +34 -0
- package/dist/components/Checkbox/Checkbox.js +657 -0
- package/dist/components/Flex/Flex.d.ts +361 -0
- package/dist/components/Flex/Flex.js +65 -0
- package/dist/components/HStack/HStack.d.ts +23 -0
- package/dist/components/HStack/HStack.js +35 -0
- package/dist/components/Heading/Heading.d.ts +33 -0
- package/dist/components/Heading/Heading.js +67 -0
- package/dist/components/Icon/Icon.d.ts +20 -0
- package/dist/components/Icon/Icon.js +325 -0
- package/dist/components/Label/Label.d.ts +35 -0
- package/dist/components/Label/Label.js +74 -0
- package/dist/components/Link/Link.d.ts +33 -0
- package/dist/components/Link/Link.js +176 -0
- package/dist/components/PasswordInput/PasswordInput.d.ts +17 -0
- package/dist/components/PasswordInput/PasswordInput.js +151 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +82 -0
- package/dist/components/RadioGroup/RadioGroup.js +713 -0
- package/dist/components/Select/Select.d.ts +39 -0
- package/dist/components/Select/Select.js +222 -0
- package/dist/components/Tag/Tag.d.ts +26 -0
- package/dist/components/Tag/Tag.js +189 -0
- package/dist/components/Text/Text.d.ts +22 -0
- package/dist/components/Text/Text.js +115 -0
- package/dist/components/TextInput/TextInput.d.ts +21 -0
- package/dist/components/TextInput/TextInput.js +106 -0
- package/dist/components/VStack/VStack.d.ts +23 -0
- package/dist/components/VStack/VStack.js +35 -0
- package/dist/css-QiVVeZaw.js +212 -0
- package/dist/cva-BrKodHDH.js +57 -0
- package/dist/cx-DN21T1EH.js +9 -0
- package/dist/hstack-cCrHxysi.js +43 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +18 -0
- package/dist/index.js +37 -0
- package/dist/tokens/colors.d.ts +4 -0
- package/dist/tokens/iconography.d.ts +45 -0
- package/dist/tokens/spacing.d.ts +42 -0
- package/dist/tokens/typography.d.ts +312 -0
- package/dist/use-locale-context-DYXE7B4r.js +775 -0
- package/package.json +62 -39
- package/styled-system/css/conditions.mjs +36 -0
- package/styled-system/css/css.d.ts +22 -0
- package/styled-system/css/css.mjs +45 -0
- package/styled-system/css/cva.d.ts +6 -0
- package/styled-system/css/cva.mjs +87 -0
- package/styled-system/css/cx.d.ts +5 -0
- package/styled-system/css/cx.mjs +15 -0
- package/styled-system/css/index.d.ts +5 -0
- package/styled-system/css/index.mjs +4 -0
- package/styled-system/css/sva.d.ts +4 -0
- package/styled-system/css/sva.mjs +46 -0
- package/styled-system/helpers.mjs +316 -0
- package/styled-system/patterns/aspect-ratio.d.ts +20 -0
- package/styled-system/patterns/aspect-ratio.mjs +38 -0
- package/styled-system/patterns/bleed.d.ts +21 -0
- package/styled-system/patterns/bleed.mjs +24 -0
- package/styled-system/patterns/box.d.ts +20 -0
- package/styled-system/patterns/box.mjs +15 -0
- package/styled-system/patterns/center.d.ts +20 -0
- package/styled-system/patterns/center.mjs +21 -0
- package/styled-system/patterns/circle.d.ts +20 -0
- package/styled-system/patterns/circle.mjs +25 -0
- package/styled-system/patterns/container.d.ts +20 -0
- package/styled-system/patterns/container.mjs +21 -0
- package/styled-system/patterns/cq.d.ts +21 -0
- package/styled-system/patterns/cq.mjs +21 -0
- package/styled-system/patterns/divider.d.ts +22 -0
- package/styled-system/patterns/divider.mjs +25 -0
- package/styled-system/patterns/flex.d.ts +26 -0
- package/styled-system/patterns/flex.mjs +26 -0
- package/styled-system/patterns/float.d.ts +23 -0
- package/styled-system/patterns/float.mjs +52 -0
- package/styled-system/patterns/grid-item.d.ts +25 -0
- package/styled-system/patterns/grid-item.mjs +25 -0
- package/styled-system/patterns/grid.d.ts +24 -0
- package/styled-system/patterns/grid.mjs +27 -0
- package/styled-system/patterns/hstack.d.ts +21 -0
- package/styled-system/patterns/hstack.mjs +24 -0
- package/styled-system/patterns/index.d.ts +21 -0
- package/styled-system/patterns/index.mjs +20 -0
- package/styled-system/patterns/link-overlay.d.ts +20 -0
- package/styled-system/patterns/link-overlay.mjs +24 -0
- package/styled-system/patterns/spacer.d.ts +20 -0
- package/styled-system/patterns/spacer.mjs +21 -0
- package/styled-system/patterns/square.d.ts +20 -0
- package/styled-system/patterns/square.mjs +24 -0
- package/styled-system/patterns/stack.d.ts +23 -0
- package/styled-system/patterns/stack.mjs +24 -0
- package/styled-system/patterns/visually-hidden.d.ts +20 -0
- package/styled-system/patterns/visually-hidden.mjs +18 -0
- package/styled-system/patterns/vstack.d.ts +21 -0
- package/styled-system/patterns/vstack.mjs +24 -0
- package/styled-system/patterns/wrap.d.ts +24 -0
- package/styled-system/patterns/wrap.mjs +25 -0
- package/styled-system/tokens/index.d.ts +9 -0
- package/styled-system/tokens/index.mjs +3176 -0
- package/styled-system/tokens/tokens.d.ts +63 -0
- package/styled-system/types/composition.d.ts +224 -0
- package/styled-system/types/conditions.d.ts +310 -0
- package/styled-system/types/csstype.d.ts +21298 -0
- package/styled-system/types/global.d.ts +20 -0
- package/styled-system/types/index.d.ts +7 -0
- package/styled-system/types/parts.d.ts +8 -0
- package/styled-system/types/pattern.d.ts +78 -0
- package/styled-system/types/prop-type.d.ts +265 -0
- package/styled-system/types/recipe.d.ts +181 -0
- package/styled-system/types/selectors.d.ts +59 -0
- package/styled-system/types/static-css.d.ts +56 -0
- package/styled-system/types/style-props.d.ts +7504 -0
- package/styled-system/types/system-types.d.ts +269 -0
- package/.github/CODEOWNERS +0 -1
- package/.github/FUNDING.yml +0 -1
- package/.github/workflows/automation.yml +0 -13
- package/.github/workflows/chromatic.yml +0 -19
- package/.github/workflows/deployment.yml +0 -32
- package/.github/workflows/integration.yml +0 -15
- package/.github/workflows/storybook-tests.yml +0 -17
- package/.storybook/main.ts +0 -18
- package/.storybook/preview.ts +0 -29
- package/.storybook/test-runner.ts +0 -33
- package/bun.lock +0 -2099
- package/chromatic.config.json +0 -5
- package/eslint.config.js +0 -28
- package/index.html +0 -13
- package/panda.config.ts +0 -61
- package/postcss.config.cjs +0 -5
- package/public/logo.svg +0 -9
- package/src/App.tsx +0 -67
- package/src/assets/Discord.svg +0 -1
- package/src/assets/GitHub.svg +0 -1
- package/src/assets/LinkedIn.svg +0 -1
- package/src/assets/Medium.svg +0 -1
- package/src/assets/YouTube.svg +0 -1
- package/src/components/Button/Button.stories.tsx +0 -115
- package/src/components/Button/Button.test.tsx +0 -108
- package/src/components/Button/Button.tsx +0 -245
- package/src/components/Button/index.tsx +0 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +0 -129
- package/src/components/Checkbox/Checkbox.test.tsx +0 -169
- package/src/components/Checkbox/Checkbox.tsx +0 -190
- package/src/components/Heading/Heading.stories.tsx +0 -72
- package/src/components/Heading/Heading.test.tsx +0 -55
- package/src/components/Heading/Heading.tsx +0 -73
- package/src/components/Heading/index.tsx +0 -1
- package/src/components/Icon/Icon.stories.tsx +0 -106
- package/src/components/Icon/Icon.test.tsx +0 -44
- package/src/components/Icon/Icon.tsx +0 -116
- package/src/components/Icon/index.tsx +0 -1
- package/src/components/Text/Text.stories.tsx +0 -65
- package/src/components/Text/Text.test.tsx +0 -54
- package/src/components/Text/Text.tsx +0 -93
- package/src/components/Text/index.tsx +0 -1
- package/src/index.css +0 -2
- package/src/main.tsx +0 -10
- package/src/setupTests.tsx +0 -5
- package/src/styles/globalCss.ts +0 -43
- package/src/tokens/colors.mdx +0 -100
- package/src/tokens/colors.ts +0 -288
- package/src/tokens/iconography.mdx +0 -15
- package/src/tokens/iconography.tsx +0 -54
- package/src/tokens/typography.mdx +0 -38
- package/src/tokens/typography.ts +0 -132
- package/src/vite-env.d.ts +0 -2
- package/tsconfig.app.json +0 -25
- package/tsconfig.json +0 -7
- package/tsconfig.node.json +0 -22
- package/vite.config.ts +0 -16
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
// src/assert.ts
|
|
2
|
+
function isObject(value) {
|
|
3
|
+
return typeof value === "object" && value != null && !Array.isArray(value);
|
|
4
|
+
}
|
|
5
|
+
var isObjectOrArray = (obj) => typeof obj === "object" && obj !== null;
|
|
6
|
+
|
|
7
|
+
// src/compact.ts
|
|
8
|
+
function compact(value) {
|
|
9
|
+
return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// src/condition.ts
|
|
13
|
+
var isBaseCondition = (v) => v === "base";
|
|
14
|
+
function filterBaseConditions(c) {
|
|
15
|
+
return c.slice().filter((v) => !isBaseCondition(v));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// src/hash.ts
|
|
19
|
+
function toChar(code) {
|
|
20
|
+
return String.fromCharCode(code + (code > 25 ? 39 : 97));
|
|
21
|
+
}
|
|
22
|
+
function toName(code) {
|
|
23
|
+
let name = "";
|
|
24
|
+
let x;
|
|
25
|
+
for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;
|
|
26
|
+
return toChar(x % 52) + name;
|
|
27
|
+
}
|
|
28
|
+
function toPhash(h, x) {
|
|
29
|
+
let i = x.length;
|
|
30
|
+
while (i) h = h * 33 ^ x.charCodeAt(--i);
|
|
31
|
+
return h;
|
|
32
|
+
}
|
|
33
|
+
function toHash(value) {
|
|
34
|
+
return toName(toPhash(5381, value) >>> 0);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// src/important.ts
|
|
38
|
+
var importantRegex = /\s*!(important)?/i;
|
|
39
|
+
function isImportant(value) {
|
|
40
|
+
return typeof value === "string" ? importantRegex.test(value) : false;
|
|
41
|
+
}
|
|
42
|
+
function withoutImportant(value) {
|
|
43
|
+
return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
|
|
44
|
+
}
|
|
45
|
+
function withoutSpace(str) {
|
|
46
|
+
return typeof str === "string" ? str.replaceAll(" ", "_") : str;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// src/memo.ts
|
|
50
|
+
var memo = (fn) => {
|
|
51
|
+
const cache = /* @__PURE__ */ new Map();
|
|
52
|
+
const get = (...args) => {
|
|
53
|
+
const key = JSON.stringify(args);
|
|
54
|
+
if (cache.has(key)) {
|
|
55
|
+
return cache.get(key);
|
|
56
|
+
}
|
|
57
|
+
const result = fn(...args);
|
|
58
|
+
cache.set(key, result);
|
|
59
|
+
return result;
|
|
60
|
+
};
|
|
61
|
+
return get;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
// src/merge-props.ts
|
|
65
|
+
var MERGE_OMIT = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
|
|
66
|
+
function mergeProps(...sources) {
|
|
67
|
+
return sources.reduce((prev, obj) => {
|
|
68
|
+
if (!obj) return prev;
|
|
69
|
+
Object.keys(obj).forEach((key) => {
|
|
70
|
+
if (MERGE_OMIT.has(key)) return;
|
|
71
|
+
const prevValue = prev[key];
|
|
72
|
+
const value = obj[key];
|
|
73
|
+
if (isObject(prevValue) && isObject(value)) {
|
|
74
|
+
prev[key] = mergeProps(prevValue, value);
|
|
75
|
+
} else {
|
|
76
|
+
prev[key] = value;
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
return prev;
|
|
80
|
+
}, {});
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// src/walk-object.ts
|
|
84
|
+
var isNotNullish = (element) => element != null;
|
|
85
|
+
function walkObject(target, predicate, options = {}) {
|
|
86
|
+
const { stop, getKey } = options;
|
|
87
|
+
function inner(value, path = []) {
|
|
88
|
+
if (isObjectOrArray(value)) {
|
|
89
|
+
const result = {};
|
|
90
|
+
for (const [prop, child] of Object.entries(value)) {
|
|
91
|
+
const key = getKey?.(prop, child) ?? prop;
|
|
92
|
+
const childPath = [...path, key];
|
|
93
|
+
if (stop?.(value, childPath)) {
|
|
94
|
+
return predicate(value, path);
|
|
95
|
+
}
|
|
96
|
+
const next = inner(child, childPath);
|
|
97
|
+
if (isNotNullish(next)) {
|
|
98
|
+
result[key] = next;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return result;
|
|
102
|
+
}
|
|
103
|
+
return predicate(value, path);
|
|
104
|
+
}
|
|
105
|
+
return inner(target);
|
|
106
|
+
}
|
|
107
|
+
function mapObject(obj, fn) {
|
|
108
|
+
if (Array.isArray(obj)) return obj.map((value) => fn(value));
|
|
109
|
+
if (!isObject(obj)) return fn(obj);
|
|
110
|
+
return walkObject(obj, (value) => fn(value));
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// src/normalize-style-object.ts
|
|
114
|
+
function toResponsiveObject(values, breakpoints) {
|
|
115
|
+
return values.reduce(
|
|
116
|
+
(acc, current, index) => {
|
|
117
|
+
const key = breakpoints[index];
|
|
118
|
+
if (current != null) {
|
|
119
|
+
acc[key] = current;
|
|
120
|
+
}
|
|
121
|
+
return acc;
|
|
122
|
+
},
|
|
123
|
+
{}
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
function normalizeStyleObject(styles, context, shorthand = true) {
|
|
127
|
+
const { utility, conditions } = context;
|
|
128
|
+
const { hasShorthand, resolveShorthand } = utility;
|
|
129
|
+
return walkObject(
|
|
130
|
+
styles,
|
|
131
|
+
(value) => {
|
|
132
|
+
return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
stop: (value) => Array.isArray(value),
|
|
136
|
+
getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0
|
|
137
|
+
}
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// src/classname.ts
|
|
142
|
+
var fallbackCondition = {
|
|
143
|
+
shift: (v) => v,
|
|
144
|
+
finalize: (v) => v,
|
|
145
|
+
breakpoints: { keys: [] }
|
|
146
|
+
};
|
|
147
|
+
var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
|
|
148
|
+
function createCss(context) {
|
|
149
|
+
const { utility, hash, conditions: conds = fallbackCondition } = context;
|
|
150
|
+
const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
|
|
151
|
+
const hashFn = (conditions, className) => {
|
|
152
|
+
let result;
|
|
153
|
+
if (hash) {
|
|
154
|
+
const baseArray = [...conds.finalize(conditions), className];
|
|
155
|
+
result = formatClassName(utility.toHash(baseArray, toHash));
|
|
156
|
+
} else {
|
|
157
|
+
const baseArray = [...conds.finalize(conditions), formatClassName(className)];
|
|
158
|
+
result = baseArray.join(":");
|
|
159
|
+
}
|
|
160
|
+
return result;
|
|
161
|
+
};
|
|
162
|
+
return memo(({ base, ...styles } = {}) => {
|
|
163
|
+
const styleObject = Object.assign(styles, base);
|
|
164
|
+
const normalizedObject = normalizeStyleObject(styleObject, context);
|
|
165
|
+
const classNames = /* @__PURE__ */ new Set();
|
|
166
|
+
walkObject(normalizedObject, (value, paths) => {
|
|
167
|
+
if (value == null) return;
|
|
168
|
+
const important = isImportant(value);
|
|
169
|
+
const [prop, ...allConditions] = conds.shift(paths);
|
|
170
|
+
const conditions = filterBaseConditions(allConditions);
|
|
171
|
+
const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
|
|
172
|
+
let className = hashFn(conditions, transformed.className);
|
|
173
|
+
if (important) className = `${className}!`;
|
|
174
|
+
classNames.add(className);
|
|
175
|
+
});
|
|
176
|
+
return Array.from(classNames).join(" ");
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
function compactStyles(...styles) {
|
|
180
|
+
return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
|
|
181
|
+
}
|
|
182
|
+
function createMergeCss(context) {
|
|
183
|
+
function resolve(styles) {
|
|
184
|
+
const allStyles = compactStyles(...styles);
|
|
185
|
+
if (allStyles.length === 1) return allStyles;
|
|
186
|
+
return allStyles.map((style) => normalizeStyleObject(style, context));
|
|
187
|
+
}
|
|
188
|
+
function mergeCss(...styles) {
|
|
189
|
+
return mergeProps(...resolve(styles));
|
|
190
|
+
}
|
|
191
|
+
function assignCss(...styles) {
|
|
192
|
+
return Object.assign({}, ...resolve(styles));
|
|
193
|
+
}
|
|
194
|
+
return { mergeCss: memo(mergeCss), assignCss };
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// src/hypenate-property.ts
|
|
198
|
+
var wordRegex = /([A-Z])/g;
|
|
199
|
+
var msRegex = /^ms-/;
|
|
200
|
+
var hypenateProperty = memo((property) => {
|
|
201
|
+
if (property.startsWith("--")) return property;
|
|
202
|
+
return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
// src/is-css-function.ts
|
|
206
|
+
var fns = ["min", "max", "clamp", "calc"];
|
|
207
|
+
var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`);
|
|
208
|
+
var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);
|
|
209
|
+
|
|
210
|
+
// src/is-css-unit.ts
|
|
211
|
+
var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
|
|
212
|
+
var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;
|
|
213
|
+
var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);
|
|
214
|
+
var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);
|
|
215
|
+
|
|
216
|
+
// src/is-css-var.ts
|
|
217
|
+
var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v);
|
|
218
|
+
|
|
219
|
+
// src/pattern-fns.ts
|
|
220
|
+
var patternFns = {
|
|
221
|
+
map: mapObject,
|
|
222
|
+
isCssFunction,
|
|
223
|
+
isCssVar,
|
|
224
|
+
isCssUnit
|
|
225
|
+
};
|
|
226
|
+
var getPatternStyles = (pattern, styles) => {
|
|
227
|
+
if (!pattern?.defaultValues) return styles;
|
|
228
|
+
const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;
|
|
229
|
+
return Object.assign({}, defaults, compact(styles));
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
// src/slot.ts
|
|
233
|
+
var getSlotRecipes = (recipe = {}) => {
|
|
234
|
+
const init = (slot) => ({
|
|
235
|
+
className: [recipe.className, slot].filter(Boolean).join("__"),
|
|
236
|
+
base: recipe.base?.[slot] ?? {},
|
|
237
|
+
variants: {},
|
|
238
|
+
defaultVariants: recipe.defaultVariants ?? {},
|
|
239
|
+
compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
|
|
240
|
+
});
|
|
241
|
+
const slots = recipe.slots ?? [];
|
|
242
|
+
const recipeParts = slots.map((slot) => [slot, init(slot)]);
|
|
243
|
+
for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
|
|
244
|
+
for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
|
|
245
|
+
recipeParts.forEach(([slot, slotRecipe]) => {
|
|
246
|
+
slotRecipe.variants[variantsKey] ??= {};
|
|
247
|
+
slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
|
|
248
|
+
});
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
return Object.fromEntries(recipeParts);
|
|
252
|
+
};
|
|
253
|
+
var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
|
|
254
|
+
|
|
255
|
+
// src/split-props.ts
|
|
256
|
+
function splitProps(props, ...keys) {
|
|
257
|
+
const descriptors = Object.getOwnPropertyDescriptors(props);
|
|
258
|
+
const dKeys = Object.keys(descriptors);
|
|
259
|
+
const split = (k) => {
|
|
260
|
+
const clone = {};
|
|
261
|
+
for (let i = 0; i < k.length; i++) {
|
|
262
|
+
const key = k[i];
|
|
263
|
+
if (descriptors[key]) {
|
|
264
|
+
Object.defineProperty(clone, key, descriptors[key]);
|
|
265
|
+
delete descriptors[key];
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
return clone;
|
|
269
|
+
};
|
|
270
|
+
const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
|
|
271
|
+
return keys.map(fn).concat(split(dKeys));
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
// src/uniq.ts
|
|
275
|
+
var uniq = (...items) => {
|
|
276
|
+
const set = items.reduce((acc, currItems) => {
|
|
277
|
+
if (currItems) {
|
|
278
|
+
currItems.forEach((item) => acc.add(item));
|
|
279
|
+
}
|
|
280
|
+
return acc;
|
|
281
|
+
}, /* @__PURE__ */ new Set([]));
|
|
282
|
+
return Array.from(set);
|
|
283
|
+
};
|
|
284
|
+
export {
|
|
285
|
+
compact,
|
|
286
|
+
createCss,
|
|
287
|
+
createMergeCss,
|
|
288
|
+
filterBaseConditions,
|
|
289
|
+
getPatternStyles,
|
|
290
|
+
getSlotCompoundVariant,
|
|
291
|
+
getSlotRecipes,
|
|
292
|
+
hypenateProperty,
|
|
293
|
+
isBaseCondition,
|
|
294
|
+
isObject,
|
|
295
|
+
mapObject,
|
|
296
|
+
memo,
|
|
297
|
+
mergeProps,
|
|
298
|
+
patternFns,
|
|
299
|
+
splitProps,
|
|
300
|
+
toHash,
|
|
301
|
+
uniq,
|
|
302
|
+
walkObject,
|
|
303
|
+
withoutSpace
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
export function __spreadValues(a, b) {
|
|
311
|
+
return { ...a, ...b }
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
export function __objRest(source, exclude) {
|
|
315
|
+
return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
|
|
316
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface AspectRatioProperties {
|
|
9
|
+
ratio?: ConditionalValue<number>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
|
|
13
|
+
|
|
14
|
+
interface AspectRatioPatternFn {
|
|
15
|
+
(styles?: AspectRatioStyles): string
|
|
16
|
+
raw: (styles?: AspectRatioStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const aspectRatio: AspectRatioPatternFn;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const aspectRatioConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { ratio = 4 / 3, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
position: "relative",
|
|
9
|
+
_before: {
|
|
10
|
+
content: `""`,
|
|
11
|
+
display: "block",
|
|
12
|
+
height: "0",
|
|
13
|
+
paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
|
|
14
|
+
},
|
|
15
|
+
"&>*": {
|
|
16
|
+
display: "flex",
|
|
17
|
+
justifyContent: "center",
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
overflow: "hidden",
|
|
20
|
+
position: "absolute",
|
|
21
|
+
inset: "0",
|
|
22
|
+
width: "100%",
|
|
23
|
+
height: "100%"
|
|
24
|
+
},
|
|
25
|
+
"&>img, &>video": {
|
|
26
|
+
objectFit: "cover"
|
|
27
|
+
},
|
|
28
|
+
...rest
|
|
29
|
+
};
|
|
30
|
+
}}
|
|
31
|
+
|
|
32
|
+
export const getAspectRatioStyle = (styles = {}) => {
|
|
33
|
+
const _styles = getPatternStyles(aspectRatioConfig, styles)
|
|
34
|
+
return aspectRatioConfig.transform(_styles, patternFns)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
|
|
38
|
+
aspectRatio.raw = getAspectRatioStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface BleedProperties {
|
|
9
|
+
inline?: SystemProperties["marginInline"]
|
|
10
|
+
block?: SystemProperties["marginBlock"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
|
|
14
|
+
|
|
15
|
+
interface BleedPatternFn {
|
|
16
|
+
(styles?: BleedStyles): string
|
|
17
|
+
raw: (styles?: BleedStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const bleed: BleedPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const bleedConfig = {
|
|
5
|
+
transform(props, { map, isCssUnit, isCssVar }) {
|
|
6
|
+
const { inline, block, ...rest } = props;
|
|
7
|
+
const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
|
|
8
|
+
return {
|
|
9
|
+
"--bleed-x": map(inline, valueFn),
|
|
10
|
+
"--bleed-y": map(block, valueFn),
|
|
11
|
+
marginInline: "calc(var(--bleed-x, 0) * -1)",
|
|
12
|
+
marginBlock: "calc(var(--bleed-y, 0) * -1)",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{inline:'0',block:'0'}}
|
|
17
|
+
|
|
18
|
+
export const getBleedStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(bleedConfig, styles)
|
|
20
|
+
return bleedConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const bleed = (styles) => css(getBleedStyle(styles))
|
|
24
|
+
bleed.raw = getBleedStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface BoxProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
|
|
13
|
+
|
|
14
|
+
interface BoxPatternFn {
|
|
15
|
+
(styles?: BoxStyles): string
|
|
16
|
+
raw: (styles?: BoxStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const box: BoxPatternFn;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const boxConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return props;
|
|
7
|
+
}}
|
|
8
|
+
|
|
9
|
+
export const getBoxStyle = (styles = {}) => {
|
|
10
|
+
const _styles = getPatternStyles(boxConfig, styles)
|
|
11
|
+
return boxConfig.transform(_styles, patternFns)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const box = (styles) => css(getBoxStyle(styles))
|
|
15
|
+
box.raw = getBoxStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CenterProperties {
|
|
9
|
+
inline?: ConditionalValue<boolean>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
|
|
13
|
+
|
|
14
|
+
interface CenterPatternFn {
|
|
15
|
+
(styles?: CenterStyles): string
|
|
16
|
+
raw: (styles?: CenterStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const center: CenterPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const centerConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { inline, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: inline ? "inline-flex" : "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
...rest
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getCenterStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(centerConfig, styles)
|
|
17
|
+
return centerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const center = (styles) => css(getCenterStyle(styles))
|
|
21
|
+
center.raw = getCenterStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CircleProperties {
|
|
9
|
+
size?: SystemProperties["width"]
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
|
|
13
|
+
|
|
14
|
+
interface CirclePatternFn {
|
|
15
|
+
(styles?: CircleStyles): string
|
|
16
|
+
raw: (styles?: CircleStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const circle: CirclePatternFn;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const circleConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { size, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
flex: "0 0 auto",
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
borderRadius: "9999px",
|
|
15
|
+
...rest
|
|
16
|
+
};
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
export const getCircleStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(circleConfig, styles)
|
|
21
|
+
return circleConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const circle = (styles) => css(getCircleStyle(styles))
|
|
25
|
+
circle.raw = getCircleStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface ContainerProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
|
|
13
|
+
|
|
14
|
+
interface ContainerPatternFn {
|
|
15
|
+
(styles?: ContainerStyles): string
|
|
16
|
+
raw: (styles?: ContainerStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const container: ContainerPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const containerConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
position: "relative",
|
|
8
|
+
maxWidth: "8xl",
|
|
9
|
+
mx: "auto",
|
|
10
|
+
px: { base: "4", md: "6", lg: "8" },
|
|
11
|
+
...props
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getContainerStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(containerConfig, styles)
|
|
17
|
+
return containerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const container = (styles) => css(getContainerStyle(styles))
|
|
21
|
+
container.raw = getContainerStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CqProperties {
|
|
9
|
+
name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
|
|
10
|
+
type?: SystemProperties["containerType"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
|
|
14
|
+
|
|
15
|
+
interface CqPatternFn {
|
|
16
|
+
(styles?: CqStyles): string
|
|
17
|
+
raw: (styles?: CqStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const cq: CqPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const cqConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { name, type, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
containerType: type,
|
|
9
|
+
containerName: name,
|
|
10
|
+
...rest
|
|
11
|
+
};
|
|
12
|
+
},
|
|
13
|
+
defaultValues:{type:'inline-size'}}
|
|
14
|
+
|
|
15
|
+
export const getCqStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(cqConfig, styles)
|
|
17
|
+
return cqConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const cq = (styles) => css(getCqStyle(styles))
|
|
21
|
+
cq.raw = getCqStyle
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface DividerProperties {
|
|
9
|
+
orientation?: "horizontal" | "vertical"
|
|
10
|
+
thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
|
|
11
|
+
color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
|
|
15
|
+
|
|
16
|
+
interface DividerPatternFn {
|
|
17
|
+
(styles?: DividerStyles): string
|
|
18
|
+
raw: (styles?: DividerStyles) => SystemStyleObject
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
export declare const divider: DividerPatternFn;
|