@xaui/native 0.9.1-alpha.2 → 0.9.1-alpha.21
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/chunk-2WMVDMFV.cjs +62 -0
- package/dist/chunk-33QILJJH.cjs +143 -0
- package/dist/chunk-4NE3SLTM.cjs +695 -0
- package/dist/{chunk-M7P46XKI.cjs → chunk-57SJ4LJF.cjs} +33 -3
- package/dist/chunk-5LC6KVL3.cjs +68 -0
- package/dist/{chunk-RBNCR5KB.js → chunk-A3EGFI6T.js} +31 -1
- package/dist/chunk-APCBIHLR.cjs +507 -0
- package/dist/chunk-BPBY7ON7.cjs +451 -0
- package/dist/chunk-EVXZGNPA.cjs +303 -0
- package/dist/chunk-EXX6ATAS.js +303 -0
- package/dist/chunk-GGW42MY4.js +20 -0
- package/dist/chunk-IBRVMLUF.js +668 -0
- package/dist/chunk-ISVUXVFL.js +471 -0
- package/dist/chunk-JL27KVRT.js +68 -0
- package/dist/chunk-JXLRHKCQ.js +143 -0
- package/dist/chunk-MC7SY2QH.cjs +20 -0
- package/dist/{chunk-RCP3SD26.js → chunk-N7C4UNUL.js} +2 -126
- package/dist/chunk-RMLFMRWL.js +102 -0
- package/dist/chunk-RRRGLRRP.cjs +28 -0
- package/dist/chunk-SGHP76GU.js +28 -0
- package/dist/{chunk-PBVPOX7D.js → chunk-TUJBDS5M.js} +30 -63
- package/dist/chunk-UBA6AEY6.cjs +102 -0
- package/dist/{chunk-NHPQQQ7P.cjs → chunk-UL263KGM.cjs} +56 -89
- package/dist/{chunk-B755PRVJ.cjs → chunk-UVO4GFSW.cjs} +3 -127
- package/dist/chunk-XHZBXYVU.js +62 -0
- package/dist/chunk-YRCUALUQ.js +451 -0
- package/dist/components/button/index.cjs +17 -0
- package/dist/components/button/index.d.cts +659 -0
- package/dist/components/button/index.d.ts +659 -0
- package/dist/components/button/index.js +17 -0
- package/dist/components/card/index.cjs +20 -0
- package/dist/components/card/index.d.cts +620 -0
- package/dist/components/card/index.d.ts +620 -0
- package/dist/components/card/index.js +20 -0
- package/dist/components/typography/index.cjs +14 -0
- package/dist/components/typography/index.d.cts +116 -0
- package/dist/components/typography/index.d.ts +116 -0
- package/dist/components/typography/index.js +14 -0
- package/dist/components/view/index.cjs +16 -0
- package/dist/components/view/index.d.cts +152 -0
- package/dist/components/view/index.d.ts +152 -0
- package/dist/components/view/index.js +16 -0
- package/dist/create-recipe-CC3NNCqF.d.ts +94 -0
- package/dist/create-recipe-CPBFg7ym.d.cts +94 -0
- package/dist/icon.type-BkcEPJbK.d.ts +73 -0
- package/dist/icon.type-Cs1tMX0W.d.cts +73 -0
- package/dist/index.cjs +167 -5
- package/dist/index.d.cts +79 -4
- package/dist/index.d.ts +79 -4
- package/dist/index.js +171 -9
- package/dist/pressable-feedback.type-DsvWZXWC.d.ts +127 -0
- package/dist/pressable-feedback.type-wfeiJz5m.d.cts +127 -0
- package/dist/style-props.type-B1BG5TCm.d.cts +31 -0
- package/dist/style-props.type-B1BG5TCm.d.ts +31 -0
- package/dist/system/index.cjs +66 -3
- package/dist/system/index.d.cts +301 -75
- package/dist/system/index.d.ts +301 -75
- package/dist/system/index.js +68 -5
- package/dist/theme/index.cjs +4 -3
- package/dist/theme/index.d.cts +27 -15
- package/dist/theme/index.d.ts +27 -15
- package/dist/theme/index.js +7 -6
- package/dist/{theme.type-B3ODSLbB.d.cts → theme.type-C2gNHpEx.d.cts} +8 -2
- package/dist/{theme.type-B3ODSLbB.d.ts → theme.type-C2gNHpEx.d.ts} +8 -2
- package/package.json +74 -18
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
|
+
|
|
3
|
+
var _chunkMC7SY2QHcjs = require('./chunk-MC7SY2QH.cjs');
|
|
4
|
+
|
|
5
|
+
// src/system/style-props/use-style-props.ts
|
|
6
|
+
var _react = require('react');
|
|
7
|
+
|
|
8
|
+
// src/utils/style-props.ts
|
|
9
|
+
var STYLE_PROP_KEYS = [
|
|
10
|
+
// Flex and layout
|
|
11
|
+
"alignContent",
|
|
12
|
+
"alignItems",
|
|
13
|
+
"alignSelf",
|
|
14
|
+
"aspectRatio",
|
|
15
|
+
"boxSizing",
|
|
16
|
+
"columnGap",
|
|
17
|
+
"direction",
|
|
18
|
+
"display",
|
|
19
|
+
"flex",
|
|
20
|
+
"flexBasis",
|
|
21
|
+
"flexDirection",
|
|
22
|
+
"flexGrow",
|
|
23
|
+
"flexShrink",
|
|
24
|
+
"flexWrap",
|
|
25
|
+
"gap",
|
|
26
|
+
"justifyContent",
|
|
27
|
+
"overflow",
|
|
28
|
+
"rowGap",
|
|
29
|
+
// Position
|
|
30
|
+
"bottom",
|
|
31
|
+
"end",
|
|
32
|
+
"inset",
|
|
33
|
+
"insetBlock",
|
|
34
|
+
"insetBlockEnd",
|
|
35
|
+
"insetBlockStart",
|
|
36
|
+
"insetInline",
|
|
37
|
+
"insetInlineEnd",
|
|
38
|
+
"insetInlineStart",
|
|
39
|
+
"position",
|
|
40
|
+
"start",
|
|
41
|
+
"top",
|
|
42
|
+
"zIndex",
|
|
43
|
+
// Margin
|
|
44
|
+
"margin",
|
|
45
|
+
"marginBlock",
|
|
46
|
+
"marginBlockEnd",
|
|
47
|
+
"marginBlockStart",
|
|
48
|
+
"marginBottom",
|
|
49
|
+
"marginEnd",
|
|
50
|
+
"marginHorizontal",
|
|
51
|
+
"marginInline",
|
|
52
|
+
"marginInlineEnd",
|
|
53
|
+
"marginInlineStart",
|
|
54
|
+
"marginStart",
|
|
55
|
+
"marginTop",
|
|
56
|
+
"marginVertical",
|
|
57
|
+
// Padding
|
|
58
|
+
"padding",
|
|
59
|
+
"paddingBlock",
|
|
60
|
+
"paddingBlockEnd",
|
|
61
|
+
"paddingBlockStart",
|
|
62
|
+
"paddingBottom",
|
|
63
|
+
"paddingEnd",
|
|
64
|
+
"paddingHorizontal",
|
|
65
|
+
"paddingInline",
|
|
66
|
+
"paddingInlineEnd",
|
|
67
|
+
"paddingInlineStart",
|
|
68
|
+
"paddingStart",
|
|
69
|
+
"paddingTop",
|
|
70
|
+
"paddingVertical",
|
|
71
|
+
// Size
|
|
72
|
+
"height",
|
|
73
|
+
"maxHeight",
|
|
74
|
+
"maxWidth",
|
|
75
|
+
"minHeight",
|
|
76
|
+
"minWidth",
|
|
77
|
+
"width",
|
|
78
|
+
// Border
|
|
79
|
+
"borderBlockColor",
|
|
80
|
+
"borderBlockEndColor",
|
|
81
|
+
"borderBlockStartColor",
|
|
82
|
+
"borderBottomColor",
|
|
83
|
+
"borderBottomEndRadius",
|
|
84
|
+
"borderBottomStartRadius",
|
|
85
|
+
"borderBottomWidth",
|
|
86
|
+
"borderColor",
|
|
87
|
+
"borderCurve",
|
|
88
|
+
"borderEndColor",
|
|
89
|
+
"borderEndEndRadius",
|
|
90
|
+
"borderEndStartRadius",
|
|
91
|
+
"borderEndWidth",
|
|
92
|
+
"borderRadius",
|
|
93
|
+
"borderStartColor",
|
|
94
|
+
"borderStartEndRadius",
|
|
95
|
+
"borderStartStartRadius",
|
|
96
|
+
"borderStartWidth",
|
|
97
|
+
"borderStyle",
|
|
98
|
+
"borderTopColor",
|
|
99
|
+
"borderTopEndRadius",
|
|
100
|
+
"borderTopStartRadius",
|
|
101
|
+
"borderTopWidth",
|
|
102
|
+
"borderWidth",
|
|
103
|
+
// Fill, shadow, and the rest of a box's paint
|
|
104
|
+
"backfaceVisibility",
|
|
105
|
+
"backgroundColor",
|
|
106
|
+
"boxShadow",
|
|
107
|
+
"cursor",
|
|
108
|
+
"elevation",
|
|
109
|
+
"experimental_backgroundImage",
|
|
110
|
+
"filter",
|
|
111
|
+
"isolation",
|
|
112
|
+
"mixBlendMode",
|
|
113
|
+
"opacity",
|
|
114
|
+
"outlineColor",
|
|
115
|
+
"outlineOffset",
|
|
116
|
+
"outlineStyle",
|
|
117
|
+
"outlineWidth",
|
|
118
|
+
"shadowColor",
|
|
119
|
+
"shadowOffset",
|
|
120
|
+
"shadowOpacity",
|
|
121
|
+
"shadowRadius",
|
|
122
|
+
// Transform
|
|
123
|
+
"rotation",
|
|
124
|
+
"scaleX",
|
|
125
|
+
"scaleY",
|
|
126
|
+
"transform",
|
|
127
|
+
"transformMatrix",
|
|
128
|
+
"transformOrigin",
|
|
129
|
+
"translateX",
|
|
130
|
+
"translateY",
|
|
131
|
+
// Text — a text slot only
|
|
132
|
+
"color",
|
|
133
|
+
"fontFamily",
|
|
134
|
+
"fontSize",
|
|
135
|
+
"fontStyle",
|
|
136
|
+
"fontVariant",
|
|
137
|
+
"fontWeight",
|
|
138
|
+
"includeFontPadding",
|
|
139
|
+
"letterSpacing",
|
|
140
|
+
"lineHeight",
|
|
141
|
+
"textAlign",
|
|
142
|
+
"textAlignVertical",
|
|
143
|
+
"textDecorationColor",
|
|
144
|
+
"textDecorationLine",
|
|
145
|
+
"textDecorationStyle",
|
|
146
|
+
"textShadowColor",
|
|
147
|
+
"textShadowOffset",
|
|
148
|
+
"textShadowRadius",
|
|
149
|
+
"textTransform",
|
|
150
|
+
"userSelect",
|
|
151
|
+
"verticalAlign",
|
|
152
|
+
"writingDirection",
|
|
153
|
+
// Image — an image slot only
|
|
154
|
+
"objectFit",
|
|
155
|
+
"overlayColor",
|
|
156
|
+
"resizeMode",
|
|
157
|
+
"tintColor"
|
|
158
|
+
];
|
|
159
|
+
var STYLE_PROP_KEY_SET = new Set(STYLE_PROP_KEYS);
|
|
160
|
+
function splitStyleProps(props) {
|
|
161
|
+
const styleProps = {};
|
|
162
|
+
const rest = {};
|
|
163
|
+
for (const [key, value] of Object.entries(props)) {
|
|
164
|
+
if (STYLE_PROP_KEY_SET.has(key)) styleProps[key] = value;
|
|
165
|
+
else rest[key] = value;
|
|
166
|
+
}
|
|
167
|
+
return [styleProps, rest];
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// src/system/style-props/use-style-props.ts
|
|
171
|
+
function useStyleProps(props) {
|
|
172
|
+
const [styleProps, rest] = splitStyleProps(props);
|
|
173
|
+
const key = _chunkMC7SY2QHcjs.stableHash.call(void 0, styleProps);
|
|
174
|
+
return [_react.useMemo.call(void 0, () => styleProps, [key]), rest];
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// src/system/slot/children-to-string.ts
|
|
178
|
+
|
|
179
|
+
function childrenToString(children) {
|
|
180
|
+
const text = stringify(children);
|
|
181
|
+
return text === null || text === "" ? null : text;
|
|
182
|
+
}
|
|
183
|
+
function stringify(node) {
|
|
184
|
+
if (node === null || node === void 0 || typeof node === "boolean") return "";
|
|
185
|
+
if (typeof node === "string") return node;
|
|
186
|
+
if (typeof node === "number") return String(node);
|
|
187
|
+
if (_react.isValidElement.call(void 0, node)) return null;
|
|
188
|
+
if (Array.isArray(node)) {
|
|
189
|
+
let text = "";
|
|
190
|
+
for (const child of node) {
|
|
191
|
+
const part = stringify(child);
|
|
192
|
+
if (part === null) return null;
|
|
193
|
+
text += part;
|
|
194
|
+
}
|
|
195
|
+
return text;
|
|
196
|
+
}
|
|
197
|
+
return null;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// src/system/slot/create-slot-context.ts
|
|
201
|
+
|
|
202
|
+
function createSlotContext(name) {
|
|
203
|
+
const Context = _react.createContext.call(void 0, null);
|
|
204
|
+
Context.displayName = `XAUI.${name}.Context`;
|
|
205
|
+
function useSlotContext() {
|
|
206
|
+
const value = _react.useContext.call(void 0, Context);
|
|
207
|
+
if (value === null) {
|
|
208
|
+
const error = new Error(
|
|
209
|
+
`XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
|
|
210
|
+
);
|
|
211
|
+
_optionalChain([Error, 'access', _ => _.captureStackTrace, 'optionalCall', _2 => _2(
|
|
212
|
+
error,
|
|
213
|
+
useSlotContext
|
|
214
|
+
)]);
|
|
215
|
+
throw error;
|
|
216
|
+
}
|
|
217
|
+
return value;
|
|
218
|
+
}
|
|
219
|
+
return [Context.Provider, useSlotContext];
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
// src/system/slot/merge-refs.ts
|
|
223
|
+
function mergeRefs(...refs) {
|
|
224
|
+
return (value) => {
|
|
225
|
+
for (const ref of refs) {
|
|
226
|
+
if (typeof ref === "function") ref(value);
|
|
227
|
+
else if (ref) ref.current = value;
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// src/system/slot/merge-props.ts
|
|
233
|
+
var EVENT_HANDLER = /^on[A-Z]/;
|
|
234
|
+
function mergeProps(ours, theirs) {
|
|
235
|
+
const merged = { ...ours };
|
|
236
|
+
for (const key of Object.keys(theirs)) {
|
|
237
|
+
const ourValue = ours[key];
|
|
238
|
+
const theirValue = theirs[key];
|
|
239
|
+
if (EVENT_HANDLER.test(key)) {
|
|
240
|
+
merged[key] = composeHandlers(ourValue, theirValue);
|
|
241
|
+
} else if (key === "style") {
|
|
242
|
+
merged[key] = mergeStyles(ourValue, theirValue);
|
|
243
|
+
} else if (key === "ref") {
|
|
244
|
+
merged[key] = mergeRefs(
|
|
245
|
+
ourValue,
|
|
246
|
+
theirValue
|
|
247
|
+
);
|
|
248
|
+
} else {
|
|
249
|
+
merged[key] = theirValue;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
return merged;
|
|
253
|
+
}
|
|
254
|
+
function composeHandlers(ours, theirs) {
|
|
255
|
+
if (typeof ours !== "function") return theirs;
|
|
256
|
+
if (typeof theirs !== "function") return ours;
|
|
257
|
+
return (...args) => {
|
|
258
|
+
;
|
|
259
|
+
ours(...args);
|
|
260
|
+
return theirs(...args);
|
|
261
|
+
};
|
|
262
|
+
}
|
|
263
|
+
function mergeStyles(ours, theirs) {
|
|
264
|
+
if (typeof ours === "function" || typeof theirs === "function") {
|
|
265
|
+
return (state) => [
|
|
266
|
+
resolveStyle(ours, state),
|
|
267
|
+
resolveStyle(theirs, state)
|
|
268
|
+
];
|
|
269
|
+
}
|
|
270
|
+
return [ours, theirs];
|
|
271
|
+
}
|
|
272
|
+
function resolveStyle(style, state) {
|
|
273
|
+
return typeof style === "function" ? style(state) : style;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
// src/system/slot/slot.tsx
|
|
277
|
+
|
|
278
|
+
var Slot = _react.forwardRef.call(void 0, function Slot2({ children, ...ours }, ref) {
|
|
279
|
+
if (!_react.isValidElement.call(void 0, children)) {
|
|
280
|
+
throw new Error(
|
|
281
|
+
"XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
const child = children;
|
|
285
|
+
const merged = mergeProps(ours, child.props);
|
|
286
|
+
merged.ref = mergeRefs(ref, refOf(child));
|
|
287
|
+
return _react.cloneElement.call(void 0, child, merged);
|
|
288
|
+
});
|
|
289
|
+
Slot.displayName = "XAUI.Slot";
|
|
290
|
+
function refOf(element) {
|
|
291
|
+
const fromProps = element.props.ref;
|
|
292
|
+
const fromElement = element.ref;
|
|
293
|
+
return _nullishCoalesce(fromProps, () => ( fromElement));
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
exports.useStyleProps = useStyleProps; exports.childrenToString = childrenToString; exports.createSlotContext = createSlotContext; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot;
|
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
import {
|
|
2
|
+
stableHash
|
|
3
|
+
} from "./chunk-GGW42MY4.js";
|
|
4
|
+
|
|
5
|
+
// src/system/style-props/use-style-props.ts
|
|
6
|
+
import { useMemo } from "react";
|
|
7
|
+
|
|
8
|
+
// src/utils/style-props.ts
|
|
9
|
+
var STYLE_PROP_KEYS = [
|
|
10
|
+
// Flex and layout
|
|
11
|
+
"alignContent",
|
|
12
|
+
"alignItems",
|
|
13
|
+
"alignSelf",
|
|
14
|
+
"aspectRatio",
|
|
15
|
+
"boxSizing",
|
|
16
|
+
"columnGap",
|
|
17
|
+
"direction",
|
|
18
|
+
"display",
|
|
19
|
+
"flex",
|
|
20
|
+
"flexBasis",
|
|
21
|
+
"flexDirection",
|
|
22
|
+
"flexGrow",
|
|
23
|
+
"flexShrink",
|
|
24
|
+
"flexWrap",
|
|
25
|
+
"gap",
|
|
26
|
+
"justifyContent",
|
|
27
|
+
"overflow",
|
|
28
|
+
"rowGap",
|
|
29
|
+
// Position
|
|
30
|
+
"bottom",
|
|
31
|
+
"end",
|
|
32
|
+
"inset",
|
|
33
|
+
"insetBlock",
|
|
34
|
+
"insetBlockEnd",
|
|
35
|
+
"insetBlockStart",
|
|
36
|
+
"insetInline",
|
|
37
|
+
"insetInlineEnd",
|
|
38
|
+
"insetInlineStart",
|
|
39
|
+
"position",
|
|
40
|
+
"start",
|
|
41
|
+
"top",
|
|
42
|
+
"zIndex",
|
|
43
|
+
// Margin
|
|
44
|
+
"margin",
|
|
45
|
+
"marginBlock",
|
|
46
|
+
"marginBlockEnd",
|
|
47
|
+
"marginBlockStart",
|
|
48
|
+
"marginBottom",
|
|
49
|
+
"marginEnd",
|
|
50
|
+
"marginHorizontal",
|
|
51
|
+
"marginInline",
|
|
52
|
+
"marginInlineEnd",
|
|
53
|
+
"marginInlineStart",
|
|
54
|
+
"marginStart",
|
|
55
|
+
"marginTop",
|
|
56
|
+
"marginVertical",
|
|
57
|
+
// Padding
|
|
58
|
+
"padding",
|
|
59
|
+
"paddingBlock",
|
|
60
|
+
"paddingBlockEnd",
|
|
61
|
+
"paddingBlockStart",
|
|
62
|
+
"paddingBottom",
|
|
63
|
+
"paddingEnd",
|
|
64
|
+
"paddingHorizontal",
|
|
65
|
+
"paddingInline",
|
|
66
|
+
"paddingInlineEnd",
|
|
67
|
+
"paddingInlineStart",
|
|
68
|
+
"paddingStart",
|
|
69
|
+
"paddingTop",
|
|
70
|
+
"paddingVertical",
|
|
71
|
+
// Size
|
|
72
|
+
"height",
|
|
73
|
+
"maxHeight",
|
|
74
|
+
"maxWidth",
|
|
75
|
+
"minHeight",
|
|
76
|
+
"minWidth",
|
|
77
|
+
"width",
|
|
78
|
+
// Border
|
|
79
|
+
"borderBlockColor",
|
|
80
|
+
"borderBlockEndColor",
|
|
81
|
+
"borderBlockStartColor",
|
|
82
|
+
"borderBottomColor",
|
|
83
|
+
"borderBottomEndRadius",
|
|
84
|
+
"borderBottomStartRadius",
|
|
85
|
+
"borderBottomWidth",
|
|
86
|
+
"borderColor",
|
|
87
|
+
"borderCurve",
|
|
88
|
+
"borderEndColor",
|
|
89
|
+
"borderEndEndRadius",
|
|
90
|
+
"borderEndStartRadius",
|
|
91
|
+
"borderEndWidth",
|
|
92
|
+
"borderRadius",
|
|
93
|
+
"borderStartColor",
|
|
94
|
+
"borderStartEndRadius",
|
|
95
|
+
"borderStartStartRadius",
|
|
96
|
+
"borderStartWidth",
|
|
97
|
+
"borderStyle",
|
|
98
|
+
"borderTopColor",
|
|
99
|
+
"borderTopEndRadius",
|
|
100
|
+
"borderTopStartRadius",
|
|
101
|
+
"borderTopWidth",
|
|
102
|
+
"borderWidth",
|
|
103
|
+
// Fill, shadow, and the rest of a box's paint
|
|
104
|
+
"backfaceVisibility",
|
|
105
|
+
"backgroundColor",
|
|
106
|
+
"boxShadow",
|
|
107
|
+
"cursor",
|
|
108
|
+
"elevation",
|
|
109
|
+
"experimental_backgroundImage",
|
|
110
|
+
"filter",
|
|
111
|
+
"isolation",
|
|
112
|
+
"mixBlendMode",
|
|
113
|
+
"opacity",
|
|
114
|
+
"outlineColor",
|
|
115
|
+
"outlineOffset",
|
|
116
|
+
"outlineStyle",
|
|
117
|
+
"outlineWidth",
|
|
118
|
+
"shadowColor",
|
|
119
|
+
"shadowOffset",
|
|
120
|
+
"shadowOpacity",
|
|
121
|
+
"shadowRadius",
|
|
122
|
+
// Transform
|
|
123
|
+
"rotation",
|
|
124
|
+
"scaleX",
|
|
125
|
+
"scaleY",
|
|
126
|
+
"transform",
|
|
127
|
+
"transformMatrix",
|
|
128
|
+
"transformOrigin",
|
|
129
|
+
"translateX",
|
|
130
|
+
"translateY",
|
|
131
|
+
// Text — a text slot only
|
|
132
|
+
"color",
|
|
133
|
+
"fontFamily",
|
|
134
|
+
"fontSize",
|
|
135
|
+
"fontStyle",
|
|
136
|
+
"fontVariant",
|
|
137
|
+
"fontWeight",
|
|
138
|
+
"includeFontPadding",
|
|
139
|
+
"letterSpacing",
|
|
140
|
+
"lineHeight",
|
|
141
|
+
"textAlign",
|
|
142
|
+
"textAlignVertical",
|
|
143
|
+
"textDecorationColor",
|
|
144
|
+
"textDecorationLine",
|
|
145
|
+
"textDecorationStyle",
|
|
146
|
+
"textShadowColor",
|
|
147
|
+
"textShadowOffset",
|
|
148
|
+
"textShadowRadius",
|
|
149
|
+
"textTransform",
|
|
150
|
+
"userSelect",
|
|
151
|
+
"verticalAlign",
|
|
152
|
+
"writingDirection",
|
|
153
|
+
// Image — an image slot only
|
|
154
|
+
"objectFit",
|
|
155
|
+
"overlayColor",
|
|
156
|
+
"resizeMode",
|
|
157
|
+
"tintColor"
|
|
158
|
+
];
|
|
159
|
+
var STYLE_PROP_KEY_SET = new Set(STYLE_PROP_KEYS);
|
|
160
|
+
function splitStyleProps(props) {
|
|
161
|
+
const styleProps = {};
|
|
162
|
+
const rest = {};
|
|
163
|
+
for (const [key, value] of Object.entries(props)) {
|
|
164
|
+
if (STYLE_PROP_KEY_SET.has(key)) styleProps[key] = value;
|
|
165
|
+
else rest[key] = value;
|
|
166
|
+
}
|
|
167
|
+
return [styleProps, rest];
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// src/system/style-props/use-style-props.ts
|
|
171
|
+
function useStyleProps(props) {
|
|
172
|
+
const [styleProps, rest] = splitStyleProps(props);
|
|
173
|
+
const key = stableHash(styleProps);
|
|
174
|
+
return [useMemo(() => styleProps, [key]), rest];
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// src/system/slot/children-to-string.ts
|
|
178
|
+
import { isValidElement } from "react";
|
|
179
|
+
function childrenToString(children) {
|
|
180
|
+
const text = stringify(children);
|
|
181
|
+
return text === null || text === "" ? null : text;
|
|
182
|
+
}
|
|
183
|
+
function stringify(node) {
|
|
184
|
+
if (node === null || node === void 0 || typeof node === "boolean") return "";
|
|
185
|
+
if (typeof node === "string") return node;
|
|
186
|
+
if (typeof node === "number") return String(node);
|
|
187
|
+
if (isValidElement(node)) return null;
|
|
188
|
+
if (Array.isArray(node)) {
|
|
189
|
+
let text = "";
|
|
190
|
+
for (const child of node) {
|
|
191
|
+
const part = stringify(child);
|
|
192
|
+
if (part === null) return null;
|
|
193
|
+
text += part;
|
|
194
|
+
}
|
|
195
|
+
return text;
|
|
196
|
+
}
|
|
197
|
+
return null;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// src/system/slot/create-slot-context.ts
|
|
201
|
+
import { createContext, useContext } from "react";
|
|
202
|
+
function createSlotContext(name) {
|
|
203
|
+
const Context = createContext(null);
|
|
204
|
+
Context.displayName = `XAUI.${name}.Context`;
|
|
205
|
+
function useSlotContext() {
|
|
206
|
+
const value = useContext(Context);
|
|
207
|
+
if (value === null) {
|
|
208
|
+
const error = new Error(
|
|
209
|
+
`XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
|
|
210
|
+
);
|
|
211
|
+
Error.captureStackTrace?.(
|
|
212
|
+
error,
|
|
213
|
+
useSlotContext
|
|
214
|
+
);
|
|
215
|
+
throw error;
|
|
216
|
+
}
|
|
217
|
+
return value;
|
|
218
|
+
}
|
|
219
|
+
return [Context.Provider, useSlotContext];
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
// src/system/slot/merge-refs.ts
|
|
223
|
+
function mergeRefs(...refs) {
|
|
224
|
+
return (value) => {
|
|
225
|
+
for (const ref of refs) {
|
|
226
|
+
if (typeof ref === "function") ref(value);
|
|
227
|
+
else if (ref) ref.current = value;
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// src/system/slot/merge-props.ts
|
|
233
|
+
var EVENT_HANDLER = /^on[A-Z]/;
|
|
234
|
+
function mergeProps(ours, theirs) {
|
|
235
|
+
const merged = { ...ours };
|
|
236
|
+
for (const key of Object.keys(theirs)) {
|
|
237
|
+
const ourValue = ours[key];
|
|
238
|
+
const theirValue = theirs[key];
|
|
239
|
+
if (EVENT_HANDLER.test(key)) {
|
|
240
|
+
merged[key] = composeHandlers(ourValue, theirValue);
|
|
241
|
+
} else if (key === "style") {
|
|
242
|
+
merged[key] = mergeStyles(ourValue, theirValue);
|
|
243
|
+
} else if (key === "ref") {
|
|
244
|
+
merged[key] = mergeRefs(
|
|
245
|
+
ourValue,
|
|
246
|
+
theirValue
|
|
247
|
+
);
|
|
248
|
+
} else {
|
|
249
|
+
merged[key] = theirValue;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
return merged;
|
|
253
|
+
}
|
|
254
|
+
function composeHandlers(ours, theirs) {
|
|
255
|
+
if (typeof ours !== "function") return theirs;
|
|
256
|
+
if (typeof theirs !== "function") return ours;
|
|
257
|
+
return (...args) => {
|
|
258
|
+
;
|
|
259
|
+
ours(...args);
|
|
260
|
+
return theirs(...args);
|
|
261
|
+
};
|
|
262
|
+
}
|
|
263
|
+
function mergeStyles(ours, theirs) {
|
|
264
|
+
if (typeof ours === "function" || typeof theirs === "function") {
|
|
265
|
+
return (state) => [
|
|
266
|
+
resolveStyle(ours, state),
|
|
267
|
+
resolveStyle(theirs, state)
|
|
268
|
+
];
|
|
269
|
+
}
|
|
270
|
+
return [ours, theirs];
|
|
271
|
+
}
|
|
272
|
+
function resolveStyle(style, state) {
|
|
273
|
+
return typeof style === "function" ? style(state) : style;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
// src/system/slot/slot.tsx
|
|
277
|
+
import { cloneElement, forwardRef, isValidElement as isValidElement2 } from "react";
|
|
278
|
+
var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
|
|
279
|
+
if (!isValidElement2(children)) {
|
|
280
|
+
throw new Error(
|
|
281
|
+
"XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
const child = children;
|
|
285
|
+
const merged = mergeProps(ours, child.props);
|
|
286
|
+
merged.ref = mergeRefs(ref, refOf(child));
|
|
287
|
+
return cloneElement(child, merged);
|
|
288
|
+
});
|
|
289
|
+
Slot.displayName = "XAUI.Slot";
|
|
290
|
+
function refOf(element) {
|
|
291
|
+
const fromProps = element.props.ref;
|
|
292
|
+
const fromElement = element.ref;
|
|
293
|
+
return fromProps ?? fromElement;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
export {
|
|
297
|
+
useStyleProps,
|
|
298
|
+
childrenToString,
|
|
299
|
+
createSlotContext,
|
|
300
|
+
mergeRefs,
|
|
301
|
+
mergeProps,
|
|
302
|
+
Slot
|
|
303
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// src/utils/stable-hash.ts
|
|
2
|
+
function canonical(value) {
|
|
3
|
+
if (value === null || typeof value !== "object") return JSON.stringify(value) ?? "null";
|
|
4
|
+
if (Array.isArray(value)) return `[${value.map(canonical).join(",")}]`;
|
|
5
|
+
const entries = Object.entries(value).filter(([, v]) => typeof v !== "function").sort(([a], [b]) => a < b ? -1 : 1).map(([k, v]) => `${JSON.stringify(k)}:${canonical(v)}`);
|
|
6
|
+
return `{${entries.join(",")}}`;
|
|
7
|
+
}
|
|
8
|
+
function stableHash(value) {
|
|
9
|
+
const input = canonical(value);
|
|
10
|
+
let hash = 2166136261;
|
|
11
|
+
for (let i = 0; i < input.length; i++) {
|
|
12
|
+
hash ^= input.charCodeAt(i);
|
|
13
|
+
hash = Math.imul(hash, 16777619) >>> 0;
|
|
14
|
+
}
|
|
15
|
+
return hash.toString(36);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
stableHash
|
|
20
|
+
};
|