@xaui/native 0.9.1-alpha.20 → 0.9.1-alpha.22
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-RMLFMRWL.js → chunk-2U6JR7BF.js} +5 -5
- package/dist/{chunk-N7C4UNUL.js → chunk-3JATAB7S.js} +23 -1
- package/dist/chunk-4MHJOWM4.cjs +364 -0
- package/dist/{chunk-2WMVDMFV.cjs → chunk-6HXWQ5AU.cjs} +2 -2
- package/dist/chunk-6WW4CSPY.cjs +82 -0
- package/dist/chunk-AHL33YAO.js +425 -0
- package/dist/{chunk-XHZBXYVU.js → chunk-AKXG43S4.js} +1 -1
- package/dist/{chunk-A4VD4MHK.cjs → chunk-BH5DSJVX.cjs} +100 -133
- package/dist/chunk-BNWS26PX.cjs +449 -0
- package/dist/chunk-DXGQ43IV.cjs +68 -0
- package/dist/{chunk-4EPS7UBO.js → chunk-FNQF4KQV.js} +20 -97
- package/dist/chunk-FTCTTBLG.js +449 -0
- package/dist/chunk-FVP5FUVS.js +68 -0
- package/dist/{chunk-BHTFIZTQ.cjs → chunk-GBPWTFTU.cjs} +11 -11
- package/dist/{chunk-MWXE7D4L.js → chunk-GG2WWCBK.js} +11 -11
- package/dist/{chunk-EVXZGNPA.cjs → chunk-HUZ4AUM2.cjs} +98 -98
- package/dist/chunk-I6PE5UUH.cjs +425 -0
- package/dist/{chunk-33QILJJH.cjs → chunk-IBEX4XGV.cjs} +11 -11
- package/dist/{chunk-WXAME7KB.js → chunk-KM2TI5IC.js} +126 -159
- package/dist/chunk-OGC4RKE3.js +364 -0
- package/dist/{chunk-JXLRHKCQ.js → chunk-OYZYWWJ6.js} +1 -1
- package/dist/{chunk-EXX6ATAS.js → chunk-PMO62QK4.js} +101 -101
- package/dist/{chunk-UBA6AEY6.cjs → chunk-RAWOJ3N3.cjs} +8 -8
- package/dist/{chunk-6ARON3XT.cjs → chunk-VDRRD6GM.cjs} +31 -110
- package/dist/{chunk-UVO4GFSW.cjs → chunk-YXVKQMCK.cjs} +23 -1
- package/dist/chunk-ZQ3JSWRO.js +82 -0
- package/dist/close-button.type-BUYuoSt2.d.ts +36 -0
- package/dist/close-button.type-CHsgZ3wO.d.cts +36 -0
- package/dist/components/alert/index.cjs +17 -0
- package/dist/components/alert/index.d.cts +169 -0
- package/dist/components/alert/index.d.ts +169 -0
- package/dist/components/alert/index.js +17 -0
- package/dist/components/button/index.cjs +6 -5
- package/dist/components/button/index.d.cts +193 -243
- package/dist/components/button/index.d.ts +193 -243
- package/dist/components/button/index.js +5 -4
- package/dist/components/card/index.cjs +19 -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 +19 -0
- package/dist/components/chip/index.cjs +17 -0
- package/dist/components/chip/index.d.cts +608 -0
- package/dist/components/chip/index.d.ts +608 -0
- package/dist/components/chip/index.js +17 -0
- package/dist/components/typography/index.cjs +4 -4
- package/dist/components/typography/index.d.cts +4 -4
- package/dist/components/typography/index.d.ts +4 -4
- package/dist/components/typography/index.js +3 -3
- package/dist/components/view/index.cjs +3 -3
- package/dist/components/view/index.d.cts +7 -7
- package/dist/components/view/index.d.ts +7 -7
- package/dist/components/view/index.js +2 -2
- package/dist/{create-recipe-CPXFo2rk.d.ts → create-recipe-CbXika57.d.ts} +7 -1
- package/dist/{create-recipe-C0XXjuow.d.cts → create-recipe-jHlk434p.d.cts} +7 -1
- package/dist/icon.type-CF4KiMKl.d.cts +73 -0
- package/dist/icon.type-Dq4_qePa.d.ts +73 -0
- package/dist/index.cjs +49 -11
- package/dist/index.d.cts +9 -4
- package/dist/index.d.ts +9 -4
- package/dist/index.js +71 -33
- package/dist/{pressable-feedback.type-BwkKLQlX.d.ts → pressable-feedback.type-BA2C9sSz.d.cts} +4 -72
- package/dist/{pressable-feedback.type-1K8YEOb8.d.cts → pressable-feedback.type-Bs4dQlGj.d.ts} +4 -72
- package/dist/{style-props.type-B1BG5TCm.d.cts → style-props.type-CfnoGEP7.d.cts} +1 -1
- package/dist/{style-props.type-B1BG5TCm.d.ts → style-props.type-CfnoGEP7.d.ts} +1 -1
- package/dist/system/index.cjs +16 -6
- package/dist/system/index.d.cts +174 -98
- package/dist/system/index.d.ts +174 -98
- package/dist/system/index.js +20 -10
- package/dist/theme/index.cjs +2 -2
- package/dist/theme/index.d.cts +11 -11
- package/dist/theme/index.d.ts +11 -11
- package/dist/theme/index.js +1 -1
- package/package.json +31 -1
|
@@ -36,13 +36,14 @@ function _optionalChain(ops) {
|
|
|
36
36
|
}
|
|
37
37
|
return value;
|
|
38
38
|
}
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
39
|
+
var _chunkDXGQ43IVcjs = require('./chunk-DXGQ43IV.cjs');
|
|
40
|
+
var _chunkBH5DSJVXcjs = require('./chunk-BH5DSJVX.cjs');
|
|
41
|
+
var _chunkYXVKQMCKcjs = require('./chunk-YXVKQMCK.cjs');
|
|
42
42
|
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
43
|
+
var _chunkHUZ4AUM2cjs = require('./chunk-HUZ4AUM2.cjs');
|
|
43
44
|
|
|
44
45
|
// src/components/button/button.context.ts
|
|
45
|
-
var [ButtonProvider, useButton] =
|
|
46
|
+
var [ButtonProvider, useButton] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "Button");
|
|
46
47
|
|
|
47
48
|
// src/components/button/button-icon.tsx
|
|
48
49
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -54,7 +55,7 @@ function ButtonIcon({
|
|
|
54
55
|
const {
|
|
55
56
|
icon
|
|
56
57
|
} = useButton();
|
|
57
|
-
return /* @__PURE__ */_jsxruntime.jsx.call(void 0,
|
|
58
|
+
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkDXGQ43IVcjs.Icon, {
|
|
58
59
|
size: _nullishCoalesce(size, () => icon.size),
|
|
59
60
|
color: _nullishCoalesce(color, () => icon.color),
|
|
60
61
|
...rest
|
|
@@ -74,7 +75,7 @@ var ButtonLabel = _react.forwardRef.call(void 0, function ButtonLabel2({
|
|
|
74
75
|
const {
|
|
75
76
|
labelStyle
|
|
76
77
|
} = useButton();
|
|
77
|
-
const [styleProps, rest] =
|
|
78
|
+
const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
78
79
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
|
|
79
80
|
ref,
|
|
80
81
|
numberOfLines,
|
|
@@ -98,7 +99,7 @@ function ButtonSpinner({
|
|
|
98
99
|
const {
|
|
99
100
|
spinnerStyle
|
|
100
101
|
} = useButton();
|
|
101
|
-
const [styleProps] =
|
|
102
|
+
const [styleProps] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
102
103
|
const ringStyle = [spinnerStyle, styleProps, style];
|
|
103
104
|
if (!animation) return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
|
|
104
105
|
style: ringStyle
|
|
@@ -108,10 +109,10 @@ function ButtonSpinner({
|
|
|
108
109
|
});
|
|
109
110
|
}
|
|
110
111
|
ButtonSpinner.displayName = "XAUI.Button.Spinner";
|
|
111
|
-
const
|
|
112
|
-
code: "function
|
|
113
|
-
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-
|
|
114
|
-
sourceMap: "{\"version\":3,\"names\":[\"
|
|
112
|
+
const _worklet_12867052884334_init_data = {
|
|
113
|
+
code: "function chunkVDRRD6GMCjs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
|
|
114
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-VDRRD6GM.cjs",
|
|
115
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkVDRRD6GMCjs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-VDRRD6GM.cjs\"],\"mappings\":\"AAmF6E,SAAAA,iBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE/E,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
|
|
115
116
|
};
|
|
116
117
|
function SpinningRing({
|
|
117
118
|
style
|
|
@@ -124,28 +125,28 @@ function SpinningRing({
|
|
|
124
125
|
}), -1, false);
|
|
125
126
|
return () => _reactnativereanimated.cancelAnimation.call(void 0, angle);
|
|
126
127
|
}, [angle]);
|
|
127
|
-
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function
|
|
128
|
-
|
|
128
|
+
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkVDRRD6GMCjs1Factory({
|
|
129
|
+
_worklet_12867052884334_init_data,
|
|
129
130
|
angle
|
|
130
131
|
}) {
|
|
131
132
|
const _e = [new global.Error(), -2, -27];
|
|
132
|
-
const
|
|
133
|
+
const chunkVDRRD6GMCjs1 = function () {
|
|
133
134
|
return {
|
|
134
135
|
transform: [{
|
|
135
136
|
rotate: `${angle.value}deg`
|
|
136
137
|
}]
|
|
137
138
|
};
|
|
138
139
|
};
|
|
139
|
-
|
|
140
|
+
chunkVDRRD6GMCjs1.__closure = {
|
|
140
141
|
angle
|
|
141
142
|
};
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
return
|
|
143
|
+
chunkVDRRD6GMCjs1.__workletHash = 12867052884334;
|
|
144
|
+
chunkVDRRD6GMCjs1.__pluginVersion = "0.7.4";
|
|
145
|
+
chunkVDRRD6GMCjs1.__initData = _worklet_12867052884334_init_data;
|
|
146
|
+
chunkVDRRD6GMCjs1.__stackDetails = _e;
|
|
147
|
+
return chunkVDRRD6GMCjs1;
|
|
147
148
|
}({
|
|
148
|
-
|
|
149
|
+
_worklet_12867052884334_init_data,
|
|
149
150
|
angle
|
|
150
151
|
}), [angle]);
|
|
151
152
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
|
|
@@ -155,33 +156,6 @@ function SpinningRing({
|
|
|
155
156
|
|
|
156
157
|
// src/components/button/button.tsx
|
|
157
158
|
|
|
158
|
-
// src/hooks/use-press-state.ts
|
|
159
|
-
|
|
160
|
-
function usePressState(handlers = {}) {
|
|
161
|
-
const [isPressed, setIsPressed] = _react.useState.call(void 0, false);
|
|
162
|
-
const latest = _react.useRef.call(void 0, handlers);
|
|
163
|
-
latest.current = handlers;
|
|
164
|
-
const onPressIn = _react.useCallback.call(void 0, event => {
|
|
165
|
-
setIsPressed(true);
|
|
166
|
-
_optionalChain([latest, 'access', _ => _.current, 'access', _2 => _2.onPressIn, 'optionalCall', _3 => _3(event)]);
|
|
167
|
-
}, []);
|
|
168
|
-
const onPressOut = _react.useCallback.call(void 0, event => {
|
|
169
|
-
setIsPressed(false);
|
|
170
|
-
_optionalChain([latest, 'access', _4 => _4.current, 'access', _5 => _5.onPressOut, 'optionalCall', _6 => _6(event)]);
|
|
171
|
-
}, []);
|
|
172
|
-
const press = _react.useRef.call(void 0, {
|
|
173
|
-
onPressIn,
|
|
174
|
-
onPressOut
|
|
175
|
-
}).current;
|
|
176
|
-
return [isPressed, press];
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// src/utils/warn-dev.ts
|
|
180
|
-
function warnDev(message) {
|
|
181
|
-
if (typeof __DEV__ !== "undefined" && !__DEV__) return;
|
|
182
|
-
console.warn(`XAUI: ${message}`);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
159
|
// src/components/button/button.recipe.ts
|
|
186
160
|
var SLOTS = ["root", "label", "icon", "spinner"];
|
|
187
161
|
var VARIANT_TOKENS = {
|
|
@@ -256,7 +230,7 @@ function sizeAxis(step) {
|
|
|
256
230
|
spinner: ring(theme, theme.fontSizes[glyph])
|
|
257
231
|
});
|
|
258
232
|
}
|
|
259
|
-
var buttonRecipe =
|
|
233
|
+
var buttonRecipe = _chunkYXVKQMCKcjs.createRecipe.call(void 0, {
|
|
260
234
|
slots: SLOTS,
|
|
261
235
|
base: theme => ({
|
|
262
236
|
root: {
|
|
@@ -332,58 +306,7 @@ var buttonRecipe = _chunkUVO4GFSWcjs.createRecipe.call(void 0, {
|
|
|
332
306
|
radius: "4xl"
|
|
333
307
|
})
|
|
334
308
|
},
|
|
335
|
-
radius:
|
|
336
|
-
xs: t => ({
|
|
337
|
-
root: {
|
|
338
|
-
borderRadius: t.radius.xs
|
|
339
|
-
}
|
|
340
|
-
}),
|
|
341
|
-
sm: t => ({
|
|
342
|
-
root: {
|
|
343
|
-
borderRadius: t.radius.sm
|
|
344
|
-
}
|
|
345
|
-
}),
|
|
346
|
-
md: t => ({
|
|
347
|
-
root: {
|
|
348
|
-
borderRadius: t.radius.md
|
|
349
|
-
}
|
|
350
|
-
}),
|
|
351
|
-
lg: t => ({
|
|
352
|
-
root: {
|
|
353
|
-
borderRadius: t.radius.lg
|
|
354
|
-
}
|
|
355
|
-
}),
|
|
356
|
-
xl: t => ({
|
|
357
|
-
root: {
|
|
358
|
-
borderRadius: t.radius.xl
|
|
359
|
-
}
|
|
360
|
-
}),
|
|
361
|
-
"2xl": t => ({
|
|
362
|
-
root: {
|
|
363
|
-
borderRadius: t.radius["2xl"]
|
|
364
|
-
}
|
|
365
|
-
}),
|
|
366
|
-
"3xl": t => ({
|
|
367
|
-
root: {
|
|
368
|
-
borderRadius: t.radius["3xl"]
|
|
369
|
-
}
|
|
370
|
-
}),
|
|
371
|
-
"4xl": t => ({
|
|
372
|
-
root: {
|
|
373
|
-
borderRadius: t.radius["4xl"]
|
|
374
|
-
}
|
|
375
|
-
}),
|
|
376
|
-
field: t => ({
|
|
377
|
-
root: {
|
|
378
|
-
borderRadius: t.radius.field
|
|
379
|
-
}
|
|
380
|
-
}),
|
|
381
|
-
full: t => ({
|
|
382
|
-
root: {
|
|
383
|
-
borderRadius: t.radius.full
|
|
384
|
-
}
|
|
385
|
-
})
|
|
386
|
-
},
|
|
309
|
+
radius: _chunkYXVKQMCKcjs.radiusAxis.call(void 0, "root"),
|
|
387
310
|
// A square on a fixed height. No width is computed, and none needs to be.
|
|
388
311
|
isIconOnly: {
|
|
389
312
|
true: () => ({
|
|
@@ -445,8 +368,8 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
|
|
|
445
368
|
...props
|
|
446
369
|
}, ref) {
|
|
447
370
|
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0);
|
|
448
|
-
const [styleProps, rest] =
|
|
449
|
-
const [isPressed, press] = usePressState({
|
|
371
|
+
const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
372
|
+
const [isPressed, press] = _chunkBH5DSJVXcjs.usePressState.call(void 0, {
|
|
450
373
|
onPressIn,
|
|
451
374
|
onPressOut
|
|
452
375
|
});
|
|
@@ -472,7 +395,7 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
|
|
|
472
395
|
states
|
|
473
396
|
}) : void 0;
|
|
474
397
|
const context = _react.useMemo.call(void 0, () => {
|
|
475
|
-
const icon = _reactnative.StyleSheet.flatten([styles.icon, _optionalChain([tint, 'optionalAccess',
|
|
398
|
+
const icon = _reactnative.StyleSheet.flatten([styles.icon, _optionalChain([tint, 'optionalAccess', _ => _.icon])]);
|
|
476
399
|
return {
|
|
477
400
|
labelStyle: tint ? [styles.label, tint.label] : styles.label,
|
|
478
401
|
spinnerStyle: tint ? [styles.spinner, tint.spinner] : styles.spinner,
|
|
@@ -486,17 +409,17 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
|
|
|
486
409
|
isLoading
|
|
487
410
|
};
|
|
488
411
|
}, [styles, tint, isDisabled, isLoading]);
|
|
489
|
-
const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess',
|
|
412
|
+
const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _2 => _2.root]), styleProps, typeof style === "function" ? style({
|
|
490
413
|
pressed: isPressed
|
|
491
414
|
}) : style];
|
|
492
|
-
const text =
|
|
415
|
+
const text = _chunkHUZ4AUM2cjs.childrenToString.call(void 0, children);
|
|
493
416
|
const showSpinner = isLoading && !containsElementOfType(children, ButtonSpinner);
|
|
494
417
|
if (isIconOnly && !rest.accessibilityLabel && !rest["aria-label"]) {
|
|
495
|
-
warnDev("Button: an icon-only button needs an `accessibilityLabel` \u2014 there is no text for a screen reader to read, so it announces as an unlabelled button.");
|
|
418
|
+
_chunkBH5DSJVXcjs.warnDev.call(void 0, "Button: an icon-only button needs an `accessibilityLabel` \u2014 there is no text for a screen reader to read, so it announces as an unlabelled button.");
|
|
496
419
|
}
|
|
497
420
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, ButtonProvider, {
|
|
498
421
|
value: context,
|
|
499
|
-
children: /* @__PURE__ */_jsxruntime.jsx.call(void 0,
|
|
422
|
+
children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkBH5DSJVXcjs.PressableFeedback, {
|
|
500
423
|
ref,
|
|
501
424
|
isPressed,
|
|
502
425
|
isDisabled: isDisabled || isLoading,
|
|
@@ -528,7 +451,5 @@ var Button2 = Object.assign(ButtonRoot, {
|
|
|
528
451
|
Spinner: ButtonSpinner
|
|
529
452
|
});
|
|
530
453
|
exports.useButton = useButton;
|
|
531
|
-
exports.usePressState = usePressState;
|
|
532
|
-
exports.warnDev = warnDev;
|
|
533
454
|
exports.buttonRecipe = buttonRecipe;
|
|
534
455
|
exports.Button = Button2;
|
|
@@ -145,6 +145,28 @@ function apply(fns, theme, colors) {
|
|
|
145
145
|
return merged;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
|
+
// src/system/recipe/radius-axis.ts
|
|
149
|
+
function radiusAxis(slot) {
|
|
150
|
+
const axis = {};
|
|
151
|
+
for (const key of RADIUS_KEYS) {
|
|
152
|
+
axis[key] = (theme) => ({ [slot]: { borderRadius: theme.radius[key] } });
|
|
153
|
+
}
|
|
154
|
+
return axis;
|
|
155
|
+
}
|
|
156
|
+
var RADIUS_KEYS = [
|
|
157
|
+
"xs",
|
|
158
|
+
"sm",
|
|
159
|
+
"md",
|
|
160
|
+
"lg",
|
|
161
|
+
"xl",
|
|
162
|
+
"2xl",
|
|
163
|
+
"3xl",
|
|
164
|
+
"4xl",
|
|
165
|
+
"field",
|
|
166
|
+
"full"
|
|
167
|
+
];
|
|
168
|
+
|
|
169
|
+
|
|
148
170
|
|
|
149
171
|
|
|
150
|
-
exports.createRecipe = createRecipe;
|
|
172
|
+
exports.createRecipe = createRecipe; exports.radiusAxis = radiusAxis;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import {
|
|
2
|
+
PressableFeedback,
|
|
3
|
+
usePressState,
|
|
4
|
+
warnDev
|
|
5
|
+
} from "./chunk-KM2TI5IC.js";
|
|
6
|
+
import {
|
|
7
|
+
useStyleProps
|
|
8
|
+
} from "./chunk-PMO62QK4.js";
|
|
9
|
+
|
|
10
|
+
// src/system/close-button/close-button.tsx
|
|
11
|
+
import { forwardRef } from "react";
|
|
12
|
+
import { View } from "react-native";
|
|
13
|
+
|
|
14
|
+
// src/system/close-button/close-button.style.ts
|
|
15
|
+
import { StyleSheet } from "react-native";
|
|
16
|
+
var closeButtonSheet = StyleSheet.create({
|
|
17
|
+
bar: { transform: [{ rotate: "45deg" }] },
|
|
18
|
+
barMirrored: { transform: [{ rotate: "-45deg" }] }
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// src/system/close-button/close-button.tsx
|
|
22
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
23
|
+
var HIT_SLOP = 8;
|
|
24
|
+
var CloseButton = forwardRef(function CloseButton2({
|
|
25
|
+
name,
|
|
26
|
+
children,
|
|
27
|
+
baseStyle,
|
|
28
|
+
glyphStyle,
|
|
29
|
+
accessibilityRole = "button",
|
|
30
|
+
hitSlop = HIT_SLOP,
|
|
31
|
+
style,
|
|
32
|
+
onPressIn,
|
|
33
|
+
onPressOut,
|
|
34
|
+
...props
|
|
35
|
+
}, ref) {
|
|
36
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
37
|
+
const [isPressed, press] = usePressState({ onPressIn, onPressOut });
|
|
38
|
+
if (!rest.accessibilityLabel && !rest["aria-label"]) {
|
|
39
|
+
warnDev(
|
|
40
|
+
`${name}: a close button needs an \`accessibilityLabel\` \u2014 the cross is not text, and the label beside it names what is being dismissed, not the action.`
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
PressableFeedback,
|
|
45
|
+
{
|
|
46
|
+
ref,
|
|
47
|
+
isPressed,
|
|
48
|
+
accessibilityRole,
|
|
49
|
+
hitSlop,
|
|
50
|
+
...rest,
|
|
51
|
+
style: [
|
|
52
|
+
baseStyle,
|
|
53
|
+
styleProps,
|
|
54
|
+
typeof style === "function" ? style({ pressed: isPressed }) : style
|
|
55
|
+
],
|
|
56
|
+
onPressIn: press.onPressIn,
|
|
57
|
+
onPressOut: press.onPressOut,
|
|
58
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
59
|
+
/* @__PURE__ */ jsx(View, { style: [glyphStyle, closeButtonSheet.bar] }),
|
|
60
|
+
/* @__PURE__ */ jsx(View, { style: [glyphStyle, closeButtonSheet.barMirrored] })
|
|
61
|
+
] })
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
});
|
|
65
|
+
CloseButton.displayName = "XAUI.CloseButton";
|
|
66
|
+
|
|
67
|
+
// src/system/close-button/close-button.recipe.ts
|
|
68
|
+
function closeButtonBase(theme) {
|
|
69
|
+
return {
|
|
70
|
+
close: { alignItems: "center", justifyContent: "center" },
|
|
71
|
+
closeGlyph: {
|
|
72
|
+
position: "absolute",
|
|
73
|
+
height: theme.borderWidth.default * 1.5,
|
|
74
|
+
borderRadius: theme.borderWidth.default
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export {
|
|
80
|
+
CloseButton,
|
|
81
|
+
closeButtonBase
|
|
82
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle, PressableStateCallbackType } from 'react-native';
|
|
3
|
+
import { P as PressableFeedbackProps } from './pressable-feedback.type-Bs4dQlGj.js';
|
|
4
|
+
|
|
5
|
+
type CloseButtonOwnProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Names the slot in the development warning about a missing label — `'Chip.Close'`,
|
|
8
|
+
* `'Alert.Close'`. Without it the warning would say "a close button" and leave the
|
|
9
|
+
* reader to find which one.
|
|
10
|
+
*/
|
|
11
|
+
name: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces the built-in cross — an `Icon`, or any glyph. Unset, the button draws its
|
|
14
|
+
* own from two rotated bars, which is what makes a dismissible component work in a
|
|
15
|
+
* project that has installed no icon set.
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* The style the surrounding component's recipe resolved for this node, applied under
|
|
20
|
+
* the caller's own. It is separate from `style` because `style` may be `Pressable`'s
|
|
21
|
+
* function form, and a function cannot be merged into an array without being resolved
|
|
22
|
+
* first — which only this component can do, since it owns the press state.
|
|
23
|
+
*/
|
|
24
|
+
baseStyle?: StyleProp<ViewStyle>;
|
|
25
|
+
/** One bar of the cross: its length, its thickness and its colour, from the recipe. */
|
|
26
|
+
glyphStyle?: StyleProp<ViewStyle>;
|
|
27
|
+
/** R9 — `Pressable`'s function form as much as an object or an array. */
|
|
28
|
+
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* R14 — it renders a `PressableFeedback`, so it carries that node's style keys as props
|
|
32
|
+
* through it.
|
|
33
|
+
*/
|
|
34
|
+
type CloseButtonProps = CloseButtonOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'>;
|
|
35
|
+
|
|
36
|
+
export type { CloseButtonProps as C };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle, PressableStateCallbackType } from 'react-native';
|
|
3
|
+
import { P as PressableFeedbackProps } from './pressable-feedback.type-BA2C9sSz.cjs';
|
|
4
|
+
|
|
5
|
+
type CloseButtonOwnProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Names the slot in the development warning about a missing label — `'Chip.Close'`,
|
|
8
|
+
* `'Alert.Close'`. Without it the warning would say "a close button" and leave the
|
|
9
|
+
* reader to find which one.
|
|
10
|
+
*/
|
|
11
|
+
name: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces the built-in cross — an `Icon`, or any glyph. Unset, the button draws its
|
|
14
|
+
* own from two rotated bars, which is what makes a dismissible component work in a
|
|
15
|
+
* project that has installed no icon set.
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* The style the surrounding component's recipe resolved for this node, applied under
|
|
20
|
+
* the caller's own. It is separate from `style` because `style` may be `Pressable`'s
|
|
21
|
+
* function form, and a function cannot be merged into an array without being resolved
|
|
22
|
+
* first — which only this component can do, since it owns the press state.
|
|
23
|
+
*/
|
|
24
|
+
baseStyle?: StyleProp<ViewStyle>;
|
|
25
|
+
/** One bar of the cross: its length, its thickness and its colour, from the recipe. */
|
|
26
|
+
glyphStyle?: StyleProp<ViewStyle>;
|
|
27
|
+
/** R9 — `Pressable`'s function form as much as an object or an array. */
|
|
28
|
+
style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* R14 — it renders a `PressableFeedback`, so it carries that node's style keys as props
|
|
32
|
+
* through it.
|
|
33
|
+
*/
|
|
34
|
+
type CloseButtonProps = CloseButtonOwnProps & Omit<PressableFeedbackProps, 'isPressed' | 'style' | 'children'>;
|
|
35
|
+
|
|
36
|
+
export type { CloseButtonProps as C };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
var _chunk4MHJOWM4cjs = require('../../chunk-4MHJOWM4.cjs');
|
|
6
|
+
require('../../chunk-6WW4CSPY.cjs');
|
|
7
|
+
require('../../chunk-DXGQ43IV.cjs');
|
|
8
|
+
require('../../chunk-BH5DSJVX.cjs');
|
|
9
|
+
require('../../chunk-YXVKQMCK.cjs');
|
|
10
|
+
require('../../chunk-57SJ4LJF.cjs');
|
|
11
|
+
require('../../chunk-HUZ4AUM2.cjs');
|
|
12
|
+
require('../../chunk-MC7SY2QH.cjs');
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
exports.Alert = _chunk4MHJOWM4cjs.Alert; exports.alertRecipe = _chunk4MHJOWM4cjs.alertRecipe; exports.useAlert = _chunk4MHJOWM4cjs.useAlert;
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
|
|
5
|
+
import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
|
|
6
|
+
import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
|
|
7
|
+
import { a as IconContextValue, b as IconProps } from '../../icon.type-CF4KiMKl.cjs';
|
|
8
|
+
import { C as CloseButtonProps } from '../../close-button.type-CHsgZ3wO.cjs';
|
|
9
|
+
import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-jHlk434p.cjs';
|
|
10
|
+
import '../../pressable-feedback.type-BA2C9sSz.cjs';
|
|
11
|
+
import 'react-native-reanimated';
|
|
12
|
+
|
|
13
|
+
type AlertSlot = 'root' | 'icon' | 'iconGlyph' | 'content' | 'title' | 'description' | 'close' | 'closeGlyph';
|
|
14
|
+
/**
|
|
15
|
+
* Nine names: the surface, the accent in two weights, and the three status families in
|
|
16
|
+
* theirs. An alert is the one component in the library that is **both** a surface and a
|
|
17
|
+
* report, so it takes the emphasis vocabulary of the `Card` for its neutral level and the
|
|
18
|
+
* status vocabulary of the `Chip` for the rest.
|
|
19
|
+
*
|
|
20
|
+
* - **`default`** — the `surface` fill and the surface shadow, exactly the `Card`'s
|
|
21
|
+
* `default`. This is HeroUI's alert: a neutral card, with the status carried by the icon
|
|
22
|
+
* rather than by the background.
|
|
23
|
+
* - **`primary` / `secondary`** — the full accent and its soft slice, for the
|
|
24
|
+
* informational alert that is not an outcome.
|
|
25
|
+
* - **`success` / `warning` / `danger`**, each with a `-soft` slice — the tinted surface
|
|
26
|
+
* most alerts want, and the solid fill for the banner that has to stop the reader.
|
|
27
|
+
*
|
|
28
|
+
* `tertiary` and `ghost` are absent: an alert without a surface is a paragraph, and the
|
|
29
|
+
* outline case is `default` with `borderWidth` and `borderColor` as style props (R14).
|
|
30
|
+
*/
|
|
31
|
+
type AlertVariant = 'default' | 'primary' | 'secondary' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
|
|
32
|
+
type AlertSize = Size;
|
|
33
|
+
/**
|
|
34
|
+
* What the `Alert` itself understands. R14 — a name in here is the component's, so the
|
|
35
|
+
* style prop that shares it is not exposed: `size` is the alert's scale and never
|
|
36
|
+
* `ViewStyle`'s, and `color` is R7's tint.
|
|
37
|
+
*/
|
|
38
|
+
type AlertOwnProps = {
|
|
39
|
+
variant?: AlertVariant;
|
|
40
|
+
/**
|
|
41
|
+
* Padding, gaps, radius and the type of `Title` and `Description`. **Never a height**:
|
|
42
|
+
* an alert is a surface, and it is as tall as the message it carries.
|
|
43
|
+
*/
|
|
44
|
+
size?: AlertSize;
|
|
45
|
+
/** Overrides the radius `size` chose. */
|
|
46
|
+
radius?: RadiusKey;
|
|
47
|
+
/**
|
|
48
|
+
* A raw tint (`'#7c3aed'`), never a token (R7). It paints the fill and, through its
|
|
49
|
+
* OKLab-contrasted slice, the title and the icon — so a brand-coloured alert stays
|
|
50
|
+
* readable without being told a second colour.
|
|
51
|
+
*/
|
|
52
|
+
color?: string;
|
|
53
|
+
/** Dims the alert, and reaches the close inside it. */
|
|
54
|
+
isDisabled?: boolean;
|
|
55
|
+
style?: StyleProp<ViewStyle>;
|
|
56
|
+
children?: ReactNode;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* R14 — the alert's own props, `View`'s, and every `ViewStyle` key neither already
|
|
60
|
+
* claims. There is no press behaviour here, deliberately: an alert reports, it is not a
|
|
61
|
+
* control. A dismissible one carries an `Alert.Close`, which is the control.
|
|
62
|
+
*/
|
|
63
|
+
type AlertProps = AlertOwnProps & Omit<ViewProps, keyof AlertOwnProps> & Omit<ViewStyleProps, keyof AlertOwnProps | keyof ViewProps> & {
|
|
64
|
+
/** R12 — merge into the single child instead of rendering a `View`. */
|
|
65
|
+
asChild?: boolean;
|
|
66
|
+
};
|
|
67
|
+
/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
|
|
68
|
+
type AlertContentProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
|
|
69
|
+
children?: ReactNode;
|
|
70
|
+
};
|
|
71
|
+
/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
|
|
72
|
+
type AlertTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
|
|
73
|
+
children?: ReactNode;
|
|
74
|
+
};
|
|
75
|
+
type AlertTitleProps = AlertTextProps;
|
|
76
|
+
type AlertDescriptionProps = AlertTextProps;
|
|
77
|
+
/**
|
|
78
|
+
* `Icon`'s three forms, plus the `ViewStyle` keys of the box around them (R14).
|
|
79
|
+
*
|
|
80
|
+
* Unlike `Button.Icon` and `Chip.Icon`, this slot **renders a view of its own**. It has
|
|
81
|
+
* to: an alert's icon sits beside a block of text rather than on one line with it, and
|
|
82
|
+
* lining the glyph up with the first line's cap-height means offsetting it by half the
|
|
83
|
+
* leading — which needs a node. That node is also what lets the slot carry style props at
|
|
84
|
+
* all, which the other two cannot.
|
|
85
|
+
*/
|
|
86
|
+
type AlertIconGlyphKey = 'as' | 'children' | 'source' | 'size' | 'color';
|
|
87
|
+
/**
|
|
88
|
+
* `Pick`, distributed over `Icon`'s three forms rather than applied to the union as a
|
|
89
|
+
* whole. Applied as a whole it merges them into one shape where `as` and `source` are both
|
|
90
|
+
* optional — which is the boundary `IconProps` was turned into a union to keep, so
|
|
91
|
+
* `<Alert.Icon as={Check} source={png} />` would compile again and one of the two would be
|
|
92
|
+
* silently dropped.
|
|
93
|
+
*/
|
|
94
|
+
type AlertIconGlyphProps<T = IconProps> = T extends IconProps ? Pick<T, AlertIconGlyphKey> : never;
|
|
95
|
+
type AlertIconBoxProps = {
|
|
96
|
+
/** The box, not the glyph — `size` and `color` are what shape the icon itself. */
|
|
97
|
+
style?: StyleProp<ViewStyle>;
|
|
98
|
+
} & Omit<ViewStyleProps, AlertIconGlyphKey | 'style'>;
|
|
99
|
+
type AlertIconProps = AlertIconGlyphProps & AlertIconBoxProps;
|
|
100
|
+
/**
|
|
101
|
+
* Everything the shared `CloseButton` accepts, minus the three the alert supplies itself:
|
|
102
|
+
* the warning's name and the two resolved styles its recipe already decided (R5).
|
|
103
|
+
*/
|
|
104
|
+
type AlertCloseProps = Omit<CloseButtonProps, 'name' | 'baseStyle' | 'glyphStyle'>;
|
|
105
|
+
/**
|
|
106
|
+
* R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
|
|
107
|
+
* cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
|
|
108
|
+
* merges its own `style` on top and does no work of its own.
|
|
109
|
+
*/
|
|
110
|
+
type AlertContextValue = {
|
|
111
|
+
iconStyle: StyleProp<ViewStyle>;
|
|
112
|
+
contentStyle: StyleProp<ViewStyle>;
|
|
113
|
+
titleStyle: StyleProp<TextStyle>;
|
|
114
|
+
descriptionStyle: StyleProp<TextStyle>;
|
|
115
|
+
closeStyle: StyleProp<ViewStyle>;
|
|
116
|
+
closeGlyphStyle: StyleProp<ViewStyle>;
|
|
117
|
+
/**
|
|
118
|
+
* Values, not a style: `Icon` hands `size` and `color` to a third-party component, so
|
|
119
|
+
* the root flattens its icon slot once here rather than in every icon it contains.
|
|
120
|
+
*/
|
|
121
|
+
icon: IconContextValue;
|
|
122
|
+
isDisabled: boolean;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
declare const useAlert: () => AlertContextValue;
|
|
126
|
+
|
|
127
|
+
declare const alertRecipe: Recipe<"title" | "content" | "description" | "root" | "icon" | "iconGlyph" | "close" | "closeGlyph", AlertVariant, {
|
|
128
|
+
readonly size: {
|
|
129
|
+
readonly xs: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
130
|
+
readonly sm: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
131
|
+
readonly md: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
132
|
+
readonly lg: (theme: XAUITheme) => SlotStyles<AlertSlot>;
|
|
133
|
+
};
|
|
134
|
+
readonly radius: Record<RadiusKey, StyleFn<"root">>;
|
|
135
|
+
}>;
|
|
136
|
+
|
|
137
|
+
declare const Alert: react.ForwardRefExoticComponent<{
|
|
138
|
+
variant?: AlertVariant;
|
|
139
|
+
size?: AlertSize;
|
|
140
|
+
radius?: RadiusKey;
|
|
141
|
+
color?: string;
|
|
142
|
+
isDisabled?: boolean;
|
|
143
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
144
|
+
children?: react.ReactNode;
|
|
145
|
+
} & Omit<react_native.ViewProps, keyof {
|
|
146
|
+
variant?: AlertVariant;
|
|
147
|
+
size?: AlertSize;
|
|
148
|
+
radius?: RadiusKey;
|
|
149
|
+
color?: string;
|
|
150
|
+
isDisabled?: boolean;
|
|
151
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
152
|
+
children?: react.ReactNode;
|
|
153
|
+
}> & Omit<ViewStyleProps, "variant" | "size" | "radius" | "color" | "isDisabled" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction"> & {
|
|
154
|
+
asChild?: boolean;
|
|
155
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
156
|
+
Icon: react.ForwardRefExoticComponent<AlertIconProps & react.RefAttributes<react_native.View>>;
|
|
157
|
+
Content: react.ForwardRefExoticComponent<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
|
|
158
|
+
children?: react.ReactNode;
|
|
159
|
+
} & react.RefAttributes<react_native.View>>;
|
|
160
|
+
Title: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
161
|
+
children?: react.ReactNode;
|
|
162
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
163
|
+
Description: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
|
|
164
|
+
children?: react.ReactNode;
|
|
165
|
+
} & react.RefAttributes<react_native.Text>>;
|
|
166
|
+
Close: react.ForwardRefExoticComponent<AlertCloseProps & react.RefAttributes<react_native.View>>;
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export { Alert, type AlertCloseProps, type AlertContentProps, type AlertContextValue, type AlertDescriptionProps, type AlertIconProps, type AlertProps, type AlertSize, type AlertSlot, type AlertTitleProps, type AlertVariant, alertRecipe, useAlert };
|