@react-spectrum/s2 0.10.1 → 0.11.1
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/dist/ComboBox.cjs +19 -4
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +19 -4
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/DatePicker.cjs +2 -5
- package/dist/DatePicker.cjs.map +1 -1
- package/dist/DatePicker.css.map +1 -1
- package/dist/DatePicker.mjs +2 -5
- package/dist/DatePicker.mjs.map +1 -1
- package/dist/DateRangePicker.cjs +2 -5
- package/dist/DateRangePicker.cjs.map +1 -1
- package/dist/DateRangePicker.css.map +1 -1
- package/dist/DateRangePicker.mjs +2 -5
- package/dist/DateRangePicker.mjs.map +1 -1
- package/dist/SelectBoxGroup.cjs +342 -0
- package/dist/SelectBoxGroup.cjs.map +1 -0
- package/dist/SelectBoxGroup.css +503 -0
- package/dist/SelectBoxGroup.css.map +1 -0
- package/dist/SelectBoxGroup.mjs +335 -0
- package/dist/SelectBoxGroup.mjs.map +1 -0
- package/dist/SkeletonCollection.cjs +6 -1
- package/dist/SkeletonCollection.cjs.map +1 -1
- package/dist/SkeletonCollection.mjs +7 -2
- package/dist/SkeletonCollection.mjs.map +1 -1
- package/dist/Tabs.cjs +102 -77
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +8 -4
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +102 -77
- package/dist/Tabs.mjs.map +1 -1
- package/dist/main.cjs +5 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +43 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +21 -21
- package/src/ComboBox.tsx +20 -5
- package/src/DatePicker.tsx +1 -7
- package/src/DateRangePicker.tsx +1 -7
- package/src/SelectBoxGroup.tsx +408 -0
- package/src/SkeletonCollection.tsx +6 -2
- package/src/Tabs.tsx +49 -24
- package/src/index.ts +2 -0
- package/style/dist/main.cjs +24 -24
- package/style/dist/module.mjs +13 -13
- package/style/dist/properties.mjs +3 -3
- package/style/dist/spectrum-theme.cjs +219 -219
- package/style/dist/spectrum-theme.mjs +210 -210
- package/style/dist/style-macro.cjs +80 -80
- package/style/dist/style-macro.mjs +75 -75
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import $
|
|
2
|
-
import {resolve as $
|
|
3
|
-
import {fileURLToPath as $
|
|
4
|
-
import $
|
|
1
|
+
import $hYWfm$propertiesmjs2 from "./properties.mjs";
|
|
2
|
+
import {resolve as $hYWfm$resolve, dirname as $hYWfm$dirname} from "path";
|
|
3
|
+
import {fileURLToPath as $hYWfm$fileURLToPath} from "url";
|
|
4
|
+
import $hYWfm$fs from "fs";
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -18,11 +18,11 @@ import $aofoq$fs from "fs";
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
var $
|
|
21
|
+
var $6aa8bfe5ed29b83a$var$$parcel$__dirname = $hYWfm$resolve($hYWfm$dirname($hYWfm$fileURLToPath(import.meta.url)), "..");
|
|
22
22
|
// Postfix all class names with version for now.
|
|
23
|
-
const $
|
|
24
|
-
const $
|
|
25
|
-
class $
|
|
23
|
+
const $6aa8bfe5ed29b83a$var$json = JSON.parse((0, $hYWfm$fs).readFileSync($6aa8bfe5ed29b83a$var$$parcel$__dirname + '/../package.json', 'utf8'));
|
|
24
|
+
const $6aa8bfe5ed29b83a$var$POSTFIX = $6aa8bfe5ed29b83a$var$json.version.includes('nightly') ? $6aa8bfe5ed29b83a$var$json.version.match(/-nightly-(.*)/)[1] : $6aa8bfe5ed29b83a$var$json.version.replace(/[0.]/g, '');
|
|
25
|
+
class $6aa8bfe5ed29b83a$export$d03475ad9df06cd2 {
|
|
26
26
|
constructor(property, toCSS){
|
|
27
27
|
this.property = property;
|
|
28
28
|
this.toCSS = toCSS || ((value)=>String(value));
|
|
@@ -36,14 +36,14 @@ class $1619a4f0ddc7ccfb$export$d03475ad9df06cd2 {
|
|
|
36
36
|
return this.toCSS(value);
|
|
37
37
|
}
|
|
38
38
|
toCSSProperties(customProperty, value) {
|
|
39
|
-
return $
|
|
39
|
+
return $6aa8bfe5ed29b83a$var$mapConditionalValue(value, (value)=>[
|
|
40
40
|
{
|
|
41
41
|
[customProperty || this.property]: String(value)
|
|
42
42
|
}
|
|
43
43
|
]);
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
class $
|
|
46
|
+
class $6aa8bfe5ed29b83a$export$965169194d2485f7 extends $6aa8bfe5ed29b83a$export$d03475ad9df06cd2 {
|
|
47
47
|
constructor(property, mapping){
|
|
48
48
|
super(property);
|
|
49
49
|
this.mapping = mapping;
|
|
@@ -59,15 +59,15 @@ class $1619a4f0ddc7ccfb$export$965169194d2485f7 extends $1619a4f0ddc7ccfb$export
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
-
class $
|
|
62
|
+
class $6aa8bfe5ed29b83a$export$40ae678e65d951f2 extends $6aa8bfe5ed29b83a$export$965169194d2485f7 {
|
|
63
63
|
toCSSValue(value) {
|
|
64
64
|
let [color, opacity] = value.split('/');
|
|
65
|
-
return $
|
|
65
|
+
return $6aa8bfe5ed29b83a$var$mapConditionalValue(this.mapping[color], (value)=>{
|
|
66
66
|
return opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
class $
|
|
70
|
+
class $6aa8bfe5ed29b83a$export$6bff0717a72a8669 extends $6aa8bfe5ed29b83a$export$965169194d2485f7 {
|
|
71
71
|
constructor(property, mapping){
|
|
72
72
|
super(property, mapping);
|
|
73
73
|
}
|
|
@@ -76,7 +76,7 @@ class $1619a4f0ddc7ccfb$export$6bff0717a72a8669 extends $1619a4f0ddc7ccfb$export
|
|
|
76
76
|
return super.toCSSValue(value);
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
class $
|
|
79
|
+
class $6aa8bfe5ed29b83a$export$8c6b4dc3755476bb extends $6aa8bfe5ed29b83a$export$6bff0717a72a8669 {
|
|
80
80
|
constructor(property, mapping, numberToCSS){
|
|
81
81
|
super(property, mapping);
|
|
82
82
|
this.numberToCSS = numberToCSS;
|
|
@@ -86,12 +86,12 @@ class $1619a4f0ddc7ccfb$export$8c6b4dc3755476bb extends $1619a4f0ddc7ccfb$export
|
|
|
86
86
|
return super.toCSSValue(value);
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
class $
|
|
89
|
+
class $6aa8bfe5ed29b83a$export$1b6028cfca42adca {
|
|
90
90
|
constructor(properties, expand, mapping){
|
|
91
91
|
this.cssProperties = properties;
|
|
92
92
|
this.expand = expand;
|
|
93
|
-
if (mapping instanceof $
|
|
94
|
-
else if (mapping) this.mapping = new $
|
|
93
|
+
if (mapping instanceof $6aa8bfe5ed29b83a$export$965169194d2485f7) this.mapping = mapping;
|
|
94
|
+
else if (mapping) this.mapping = new $6aa8bfe5ed29b83a$export$965169194d2485f7(properties[0], mapping);
|
|
95
95
|
else this.mapping = null;
|
|
96
96
|
}
|
|
97
97
|
toCSSValue(value) {
|
|
@@ -100,23 +100,23 @@ class $1619a4f0ddc7ccfb$export$1b6028cfca42adca {
|
|
|
100
100
|
}
|
|
101
101
|
toCSSProperties(customProperty, value) {
|
|
102
102
|
if (customProperty) throw new Error('Style properties that expand into multiple CSS properties cannot be set as CSS variables.');
|
|
103
|
-
return $
|
|
103
|
+
return $6aa8bfe5ed29b83a$var$mapConditionalValue(value, (value)=>[
|
|
104
104
|
this.expand(value)
|
|
105
105
|
]);
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
function $
|
|
108
|
+
function $6aa8bfe5ed29b83a$var$mapConditionalValue(value, fn) {
|
|
109
109
|
if (typeof value === 'object' && !Array.isArray(value)) {
|
|
110
110
|
let res = {};
|
|
111
|
-
for(let condition in value)res[condition] = $
|
|
111
|
+
for(let condition in value)res[condition] = $6aa8bfe5ed29b83a$var$mapConditionalValue(value[condition], fn);
|
|
112
112
|
return res;
|
|
113
113
|
} else return fn(value);
|
|
114
114
|
}
|
|
115
|
-
function $
|
|
115
|
+
function $6aa8bfe5ed29b83a$var$mapConditionalShorthand(value, fn) {
|
|
116
116
|
if (typeof value === 'object') {
|
|
117
117
|
let res = {};
|
|
118
118
|
for(let condition in value){
|
|
119
|
-
let properties = $
|
|
119
|
+
let properties = $6aa8bfe5ed29b83a$var$mapConditionalShorthand(value[condition], fn);
|
|
120
120
|
for(let property in properties){
|
|
121
121
|
res[property] ??= {};
|
|
122
122
|
res[property][condition] = properties[property];
|
|
@@ -125,21 +125,21 @@ function $1619a4f0ddc7ccfb$var$mapConditionalShorthand(value, fn) {
|
|
|
125
125
|
return res;
|
|
126
126
|
} else return fn(value);
|
|
127
127
|
}
|
|
128
|
-
function $
|
|
128
|
+
function $6aa8bfe5ed29b83a$export$22a8270399010c94(value) {
|
|
129
129
|
if (typeof value === 'string' && value.startsWith('--')) return `var(${value})`;
|
|
130
130
|
else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') return value.slice(1, -1);
|
|
131
131
|
else if (typeof value === 'string' && (/^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) || /^(inherit|initial|unset)$/.test(value))) return value;
|
|
132
132
|
}
|
|
133
|
-
function $
|
|
134
|
-
return $
|
|
133
|
+
function $6aa8bfe5ed29b83a$var$shortCSSPropertyName(property) {
|
|
134
|
+
return $hYWfm$propertiesmjs1.properties[property] ?? $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(property, true);
|
|
135
135
|
}
|
|
136
|
-
function $
|
|
137
|
-
let className = $
|
|
136
|
+
function $6aa8bfe5ed29b83a$var$classNamePrefix(property, cssProperty) {
|
|
137
|
+
let className = $hYWfm$propertiesmjs1.properties[cssProperty];
|
|
138
138
|
if (className && property === '--' + className) return '-' + className + '_-';
|
|
139
139
|
if (className && !property.startsWith('--')) return className;
|
|
140
|
-
return '-' + $
|
|
140
|
+
return '-' + $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(property, true) + '-';
|
|
141
141
|
}
|
|
142
|
-
function $
|
|
142
|
+
function $6aa8bfe5ed29b83a$export$25d302a5b900a763(theme) {
|
|
143
143
|
let properties = new Map(Object.entries(theme.properties).map(([k, v])=>{
|
|
144
144
|
if (!Array.isArray(v) && v.cssProperties) return [
|
|
145
145
|
k,
|
|
@@ -147,7 +147,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
147
147
|
];
|
|
148
148
|
return [
|
|
149
149
|
k,
|
|
150
|
-
new $
|
|
150
|
+
new $6aa8bfe5ed29b83a$export$965169194d2485f7(k, v)
|
|
151
151
|
];
|
|
152
152
|
}));
|
|
153
153
|
let dependencies = new Set();
|
|
@@ -166,7 +166,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
166
166
|
let usedPriorities = 0;
|
|
167
167
|
let setRules = (key, value)=>{
|
|
168
168
|
usedPriorities = Math.max(usedPriorities, value[0]);
|
|
169
|
-
rules.set(key, new $
|
|
169
|
+
rules.set(key, new $6aa8bfe5ed29b83a$var$GroupRule(value[1]));
|
|
170
170
|
};
|
|
171
171
|
hasConditions = false;
|
|
172
172
|
for(let key in style){
|
|
@@ -182,7 +182,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
182
182
|
if (theme.shorthands[key]) {
|
|
183
183
|
let shorthand = theme.shorthands[key];
|
|
184
184
|
if (typeof shorthand === 'function') {
|
|
185
|
-
let expanded = $
|
|
185
|
+
let expanded = $6aa8bfe5ed29b83a$var$mapConditionalShorthand(value, shorthand);
|
|
186
186
|
for(let k in expanded){
|
|
187
187
|
let v = expanded[k];
|
|
188
188
|
values.set(k, v);
|
|
@@ -201,7 +201,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
201
201
|
if (value != null) {
|
|
202
202
|
if (!(dep in theme.properties)) throw new Error(`Unknown dependency ${dep}`);
|
|
203
203
|
let prop = properties.get(dep);
|
|
204
|
-
let name = `--${$
|
|
204
|
+
let name = `--${$6aa8bfe5ed29b83a$var$shortCSSPropertyName(prop.cssProperties[0])}`;
|
|
205
205
|
// Could potentially use @property to prevent the var from inheriting in children.
|
|
206
206
|
setRules(name, compileValue(name, dep, value));
|
|
207
207
|
setRules(dep, compileValue(dep, dep, name));
|
|
@@ -215,7 +215,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
215
215
|
for(let i = 0; i <= usedPriorities; i++){
|
|
216
216
|
if (first) first = false;
|
|
217
217
|
else css += ', ';
|
|
218
|
-
css += $
|
|
218
|
+
css += $6aa8bfe5ed29b83a$var$layerName($6aa8bfe5ed29b83a$var$generateName(i, true));
|
|
219
219
|
}
|
|
220
220
|
css += ';\n\n';
|
|
221
221
|
// If allowed overrides are provided, generate code to match the input override string and include only allowed classes.
|
|
@@ -244,13 +244,13 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
244
244
|
let prop = properties.get(property);
|
|
245
245
|
if (prop) {
|
|
246
246
|
for (let property of prop.cssProperties)if (property && allowedOverridesSet.has(property)) {
|
|
247
|
-
let selector = $
|
|
247
|
+
let selector = $6aa8bfe5ed29b83a$var$classNamePrefix(property, property);
|
|
248
248
|
let p = property.replace('--', '__');
|
|
249
249
|
js += `let ${p} = false;\n`;
|
|
250
250
|
loop += ` if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
|
|
251
251
|
}
|
|
252
252
|
} else if (property.startsWith('--') && allowedOverridesSet.has(property)) {
|
|
253
|
-
let selector = $
|
|
253
|
+
let selector = $6aa8bfe5ed29b83a$var$classNamePrefix(property, property);
|
|
254
254
|
let p = property.replace('--', '__');
|
|
255
255
|
js += `let ${p} = false;\n`;
|
|
256
256
|
loop += ` if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
|
|
@@ -258,7 +258,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
258
258
|
}
|
|
259
259
|
let regex = `/(?:^|\\s)(${[
|
|
260
260
|
...allowedOverridesSet
|
|
261
|
-
].map((p)=>$
|
|
261
|
+
].map((p)=>$6aa8bfe5ed29b83a$var$classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
|
|
262
262
|
if (loop) {
|
|
263
263
|
js += `let matches = (overrides || '').matchAll(${regex});\n`;
|
|
264
264
|
js += 'for (let p of matches) {\n';
|
|
@@ -271,14 +271,14 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
271
271
|
let isStatic = !(hasConditions || allowedOverrides);
|
|
272
272
|
let className = '';
|
|
273
273
|
let rulesByLayer = new Map();
|
|
274
|
-
let rootRule = new $
|
|
274
|
+
let rootRule = new $6aa8bfe5ed29b83a$var$GroupRule([
|
|
275
275
|
...rules.values()
|
|
276
276
|
]);
|
|
277
277
|
if (isStatic) className += rootRule.getStaticClassName();
|
|
278
278
|
else js += rootRule.toJS(allowedOverridesSet) + '\n';
|
|
279
279
|
rootRule.toCSS(rulesByLayer);
|
|
280
280
|
for (let [layer, rules] of rulesByLayer){
|
|
281
|
-
css += `@layer ${$
|
|
281
|
+
css += `@layer ${$6aa8bfe5ed29b83a$var$layerName(layer)} {\n`;
|
|
282
282
|
css += rules.join('\n\n');
|
|
283
283
|
css += '}\n\n';
|
|
284
284
|
}
|
|
@@ -318,7 +318,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
318
318
|
// The @layer order in the generated CSS will ensure that it overrides classes applied by runtime conditions.
|
|
319
319
|
let isCSSCondition = condition in theme.conditions || /^[@:]/.test(condition);
|
|
320
320
|
if (!wasCSSCondition && isCSSCondition && rules.length) rules = [
|
|
321
|
-
new $
|
|
321
|
+
new $6aa8bfe5ed29b83a$var$GroupRule(rules)
|
|
322
322
|
];
|
|
323
323
|
wasCSSCondition = isCSSCondition;
|
|
324
324
|
// Increment the current priority whenever we see a new CSS condition.
|
|
@@ -350,7 +350,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
350
350
|
}
|
|
351
351
|
function compileCondition(conditions, condition, priority, rules) {
|
|
352
352
|
if (condition === 'default' || conditions.has(condition)) return [
|
|
353
|
-
new $
|
|
353
|
+
new $6aa8bfe5ed29b83a$var$GroupRule(rules)
|
|
354
354
|
];
|
|
355
355
|
if (condition in theme.conditions || /^[@:]/.test(condition)) {
|
|
356
356
|
// Conditions starting with : are CSS pseudo classes. Nest them inside the parent rule.
|
|
@@ -358,27 +358,27 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
358
358
|
if (prelude.startsWith(':')) {
|
|
359
359
|
for (let rule of rules)rule.addPseudo(prelude);
|
|
360
360
|
return [
|
|
361
|
-
new $
|
|
361
|
+
new $6aa8bfe5ed29b83a$var$GroupRule(rules, $6aa8bfe5ed29b83a$var$generateName(priority, true))
|
|
362
362
|
];
|
|
363
363
|
}
|
|
364
364
|
// Otherwise, wrap the rule in the condition (e.g. @media).
|
|
365
365
|
// Top level layer is based on the priority of the rule, not the condition.
|
|
366
366
|
// Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
|
|
367
|
-
let layer = `${$
|
|
367
|
+
let layer = `${$6aa8bfe5ed29b83a$var$generateName(priority, true)}.${$hYWfm$propertiesmjs.conditions[theme.conditions[condition] || condition] || $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(condition, true)}`;
|
|
368
368
|
return [
|
|
369
|
-
new $
|
|
369
|
+
new $6aa8bfe5ed29b83a$var$AtRule(rules, prelude, layer)
|
|
370
370
|
];
|
|
371
371
|
}
|
|
372
372
|
hasConditions = true;
|
|
373
373
|
return [
|
|
374
|
-
new $
|
|
374
|
+
new $6aa8bfe5ed29b83a$var$ConditionalRule(rules, condition)
|
|
375
375
|
];
|
|
376
376
|
}
|
|
377
377
|
function compileRule(property, themeProperty, value, priority, conditions, skipConditions) {
|
|
378
378
|
let propertyFunction = properties.get(themeProperty);
|
|
379
379
|
if (propertyFunction) {
|
|
380
380
|
// Expand value to conditional CSS values, and then to rules.
|
|
381
|
-
let arbitrary = $
|
|
381
|
+
let arbitrary = $6aa8bfe5ed29b83a$export$22a8270399010c94(value);
|
|
382
382
|
let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
|
|
383
383
|
let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
|
|
384
384
|
return conditionalToRules(cssProperties, priority, conditions, skipConditions, (value, priority, conditions)=>{
|
|
@@ -395,17 +395,17 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
395
395
|
let cssProperties = prop.cssProperties;
|
|
396
396
|
if (cssProperties.length !== 1) throw new Error(`self(${v}) is not supported. ${v} expands to multiple CSS properties.`);
|
|
397
397
|
dependencies.add(v);
|
|
398
|
-
return `var(--${$
|
|
398
|
+
return `var(--${$6aa8bfe5ed29b83a$var$shortCSSPropertyName(cssProperties[0])}`;
|
|
399
399
|
});
|
|
400
400
|
// Generate selector. This consists of three parts: property, conditions, value.
|
|
401
401
|
let cssProperty = key;
|
|
402
402
|
if (property.startsWith('--')) cssProperty = propertyFunction.cssProperties[0];
|
|
403
|
-
let className = $
|
|
404
|
-
if (conditions.size > 0) for (let condition of conditions)className += $
|
|
405
|
-
if (cssProperty !== key) className += $
|
|
406
|
-
className += $
|
|
407
|
-
className += $
|
|
408
|
-
rules.push(new $
|
|
403
|
+
let className = $6aa8bfe5ed29b83a$var$classNamePrefix(key, cssProperty);
|
|
404
|
+
if (conditions.size > 0) for (let condition of conditions)className += $hYWfm$propertiesmjs.conditions[theme.conditions[condition] || condition] || $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(condition);
|
|
405
|
+
if (cssProperty !== key) className += $6aa8bfe5ed29b83a$var$shortCSSPropertyName(cssProperty);
|
|
406
|
+
className += $hYWfm$propertiesmjs2.values[cssProperty]?.[String(value)] ?? $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(String(value));
|
|
407
|
+
className += $6aa8bfe5ed29b83a$var$POSTFIX;
|
|
408
|
+
rules.push(new $6aa8bfe5ed29b83a$var$StyleRule(className, key, String(value)));
|
|
409
409
|
}
|
|
410
410
|
return [
|
|
411
411
|
0,
|
|
@@ -415,7 +415,7 @@ function $1619a4f0ddc7ccfb$export$25d302a5b900a763(theme) {
|
|
|
415
415
|
} else throw new Error('Unknown property ' + themeProperty);
|
|
416
416
|
}
|
|
417
417
|
}
|
|
418
|
-
function $
|
|
418
|
+
function $6aa8bfe5ed29b83a$var$kebab(property) {
|
|
419
419
|
if (property.startsWith('--')) return property;
|
|
420
420
|
return property.replace(/([a-z])([A-Z])/g, (_, a, b)=>`${a}-${b.toLowerCase()}`);
|
|
421
421
|
}
|
|
@@ -423,44 +423,44 @@ function $1619a4f0ddc7ccfb$var$kebab(property) {
|
|
|
423
423
|
// This maps to an alphabet containing lower case letters, upper case letters, and numbers.
|
|
424
424
|
// For numbers larger than 62, an underscore is prepended.
|
|
425
425
|
// This encoding allows easy parsing to enable runtime merging by property.
|
|
426
|
-
function $
|
|
426
|
+
function $6aa8bfe5ed29b83a$var$generateName(index, atStart = false) {
|
|
427
427
|
if (index < 26) // lower case letters
|
|
428
428
|
return String.fromCharCode(index + 97);
|
|
429
429
|
if (index < 52) // upper case letters
|
|
430
430
|
return String.fromCharCode(index - 26 + 65);
|
|
431
431
|
if (index < 62 && !atStart) // numbers
|
|
432
432
|
return String.fromCharCode(index - 52 + 48);
|
|
433
|
-
return '_' + $
|
|
433
|
+
return '_' + $6aa8bfe5ed29b83a$var$generateName(index - (atStart ? 52 : 62));
|
|
434
434
|
}
|
|
435
435
|
// For arbitrary values, we use a hash of the string to generate the class name.
|
|
436
|
-
function $
|
|
437
|
-
let c = $
|
|
436
|
+
function $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(v, atStart = false) {
|
|
437
|
+
let c = $6aa8bfe5ed29b83a$var$toBase62($6aa8bfe5ed29b83a$var$hash(v));
|
|
438
438
|
if (atStart && /^[0-9]/.test(c)) c = `_${c}`;
|
|
439
439
|
return c;
|
|
440
440
|
}
|
|
441
|
-
function $
|
|
442
|
-
if (value === 0) return $
|
|
441
|
+
function $6aa8bfe5ed29b83a$var$toBase62(value) {
|
|
442
|
+
if (value === 0) return $6aa8bfe5ed29b83a$var$generateName(value);
|
|
443
443
|
let res = '';
|
|
444
444
|
while(value){
|
|
445
445
|
let remainder = value % 62;
|
|
446
|
-
res += $
|
|
446
|
+
res += $6aa8bfe5ed29b83a$var$generateName(remainder);
|
|
447
447
|
value = Math.floor((value - remainder) / 62);
|
|
448
448
|
}
|
|
449
449
|
return res;
|
|
450
450
|
}
|
|
451
451
|
// djb2 hash function.
|
|
452
452
|
// http://www.cse.yorku.ca/~oz/hash.html
|
|
453
|
-
function $
|
|
453
|
+
function $6aa8bfe5ed29b83a$var$hash(v) {
|
|
454
454
|
let hash = 5381;
|
|
455
455
|
for(let i = 0; i < v.length; i++)hash = (hash << 5) + hash + v.charCodeAt(i) >>> 0;
|
|
456
456
|
return hash;
|
|
457
457
|
}
|
|
458
|
-
function $
|
|
458
|
+
function $6aa8bfe5ed29b83a$var$layerName(name) {
|
|
459
459
|
// All of our layers should be sub-layers of a single parent layer, so that
|
|
460
460
|
// the unsafe overrides layer always comes after.
|
|
461
461
|
return `_.${name}`;
|
|
462
462
|
}
|
|
463
|
-
/** A CSS style rule. */ class $
|
|
463
|
+
/** A CSS style rule. */ class $6aa8bfe5ed29b83a$var$StyleRule {
|
|
464
464
|
constructor(className, property, value){
|
|
465
465
|
this.className = className;
|
|
466
466
|
this.pseudos = '';
|
|
@@ -481,7 +481,7 @@ function $1619a4f0ddc7ccfb$var$layerName(name) {
|
|
|
481
481
|
preludes.forEach((p, i)=>{
|
|
482
482
|
content += `${p} {\n${' '.repeat((i + 2) * 2)}`;
|
|
483
483
|
});
|
|
484
|
-
content += `${$
|
|
484
|
+
content += `${$6aa8bfe5ed29b83a$var$kebab(this.property)}: ${this.value};\n`;
|
|
485
485
|
preludes.map((_, i)=>{
|
|
486
486
|
content += `${' '.repeat((preludes.length - i) * 2)}}\n`;
|
|
487
487
|
});
|
|
@@ -501,7 +501,7 @@ function $1619a4f0ddc7ccfb$var$layerName(name) {
|
|
|
501
501
|
return res;
|
|
502
502
|
}
|
|
503
503
|
}
|
|
504
|
-
/** Base class for rules that contain other rules. */ class $
|
|
504
|
+
/** Base class for rules that contain other rules. */ class $6aa8bfe5ed29b83a$var$GroupRule {
|
|
505
505
|
constructor(rules, layer){
|
|
506
506
|
this.rules = rules;
|
|
507
507
|
this.layer = layer ?? null;
|
|
@@ -517,16 +517,16 @@ function $1619a4f0ddc7ccfb$var$layerName(name) {
|
|
|
517
517
|
}
|
|
518
518
|
toJS(allowedOverridesSet, indent = '') {
|
|
519
519
|
let rules = this.rules.slice();
|
|
520
|
-
let conditional = rules.filter((rule)=>rule instanceof $
|
|
520
|
+
let conditional = rules.filter((rule)=>rule instanceof $6aa8bfe5ed29b83a$var$ConditionalRule).reverse().map((rule, i)=>{
|
|
521
521
|
return `${i > 0 ? ' else ' : ''}${rule.toJS(allowedOverridesSet, indent)}`;
|
|
522
522
|
});
|
|
523
|
-
let elseCases = rules.filter((rule)=>!(rule instanceof $
|
|
523
|
+
let elseCases = rules.filter((rule)=>!(rule instanceof $6aa8bfe5ed29b83a$var$ConditionalRule)).map((rule)=>rule.toJS(allowedOverridesSet, indent));
|
|
524
524
|
if (conditional.length && elseCases.length) return `${conditional.join('')} else {\n${indent} ${elseCases.join('\n' + indent + ' ')}\n${indent}}`;
|
|
525
525
|
if (conditional.length) return conditional.join('');
|
|
526
526
|
return elseCases.join('\n' + indent);
|
|
527
527
|
}
|
|
528
528
|
}
|
|
529
|
-
/** A rule that applies conditionally in CSS (e.g. @media). */ class $
|
|
529
|
+
/** A rule that applies conditionally in CSS (e.g. @media). */ class $6aa8bfe5ed29b83a$var$AtRule extends $6aa8bfe5ed29b83a$var$GroupRule {
|
|
530
530
|
constructor(rules, prelude, layer){
|
|
531
531
|
super(rules, layer);
|
|
532
532
|
this.prelude = prelude;
|
|
@@ -537,7 +537,7 @@ function $1619a4f0ddc7ccfb$var$layerName(name) {
|
|
|
537
537
|
preludes?.pop();
|
|
538
538
|
}
|
|
539
539
|
}
|
|
540
|
-
/** A rule that applies conditionally at runtime. */ class $
|
|
540
|
+
/** A rule that applies conditionally at runtime. */ class $6aa8bfe5ed29b83a$var$ConditionalRule extends $6aa8bfe5ed29b83a$var$GroupRule {
|
|
541
541
|
constructor(rules, condition){
|
|
542
542
|
super(rules);
|
|
543
543
|
this.condition = condition;
|
|
@@ -549,14 +549,14 @@ function $1619a4f0ddc7ccfb$var$layerName(name) {
|
|
|
549
549
|
return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + ' ')}\n${indent}}`;
|
|
550
550
|
}
|
|
551
551
|
}
|
|
552
|
-
function $
|
|
552
|
+
function $6aa8bfe5ed29b83a$export$1776c186c69df29e(css, layer = '_.a') {
|
|
553
553
|
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
|
|
554
554
|
// We also check if this is globalThis, which happens in non-strict mode bundles.
|
|
555
555
|
// Also allow style to be called as a normal function in tests.
|
|
556
556
|
// @ts-ignore
|
|
557
557
|
// eslint-disable-next-line
|
|
558
558
|
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The raw macro must be imported with {type: "macro"}.');
|
|
559
|
-
let className = $
|
|
559
|
+
let className = $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(css, true);
|
|
560
560
|
css = `@layer ${layer} {
|
|
561
561
|
.${className} {
|
|
562
562
|
${css}
|
|
@@ -570,14 +570,14 @@ function $1619a4f0ddc7ccfb$export$1776c186c69df29e(css, layer = '_.a') {
|
|
|
570
570
|
});
|
|
571
571
|
return className;
|
|
572
572
|
}
|
|
573
|
-
function $
|
|
573
|
+
function $6aa8bfe5ed29b83a$export$d25ddfdf17c3ad3e(css) {
|
|
574
574
|
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
|
|
575
575
|
// We also check if this is globalThis, which happens in non-strict mode bundles.
|
|
576
576
|
// Also allow style to be called as a normal function in tests.
|
|
577
577
|
// @ts-ignore
|
|
578
578
|
// eslint-disable-next-line
|
|
579
579
|
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The keyframes macro must be imported with {type: "macro"}.');
|
|
580
|
-
let name = $
|
|
580
|
+
let name = $6aa8bfe5ed29b83a$var$generateArbitraryValueSelector(css, true);
|
|
581
581
|
css = `@keyframes ${name} {
|
|
582
582
|
${css}
|
|
583
583
|
}`;
|
|
@@ -589,5 +589,5 @@ function $1619a4f0ddc7ccfb$export$d25ddfdf17c3ad3e(css) {
|
|
|
589
589
|
}
|
|
590
590
|
|
|
591
591
|
|
|
592
|
-
export {$
|
|
592
|
+
export {$6aa8bfe5ed29b83a$export$d03475ad9df06cd2 as ArbitraryProperty, $6aa8bfe5ed29b83a$export$965169194d2485f7 as MappedProperty, $6aa8bfe5ed29b83a$export$40ae678e65d951f2 as ColorProperty, $6aa8bfe5ed29b83a$export$6bff0717a72a8669 as PercentageProperty, $6aa8bfe5ed29b83a$export$8c6b4dc3755476bb as SizingProperty, $6aa8bfe5ed29b83a$export$1b6028cfca42adca as ExpandedProperty, $6aa8bfe5ed29b83a$export$22a8270399010c94 as parseArbitraryValue, $6aa8bfe5ed29b83a$export$25d302a5b900a763 as createTheme, $6aa8bfe5ed29b83a$export$1776c186c69df29e as raw, $6aa8bfe5ed29b83a$export$d25ddfdf17c3ad3e as keyframes};
|
|
593
593
|
//# sourceMappingURL=style-macro.mjs.map
|