@xaui/native 0.9.1-alpha.21 → 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-4NE3SLTM.cjs → chunk-BH5DSJVX.cjs} +102 -73
- package/dist/{chunk-BPBY7ON7.cjs → chunk-BNWS26PX.cjs} +19 -21
- package/dist/{chunk-5LC6KVL3.cjs → chunk-DXGQ43IV.cjs} +3 -3
- package/dist/{chunk-ISVUXVFL.js → chunk-FNQF4KQV.js} +19 -71
- package/dist/{chunk-YRCUALUQ.js → chunk-FTCTTBLG.js} +7 -9
- package/dist/{chunk-JL27KVRT.js → chunk-FVP5FUVS.js} +3 -3
- package/dist/{chunk-UL263KGM.cjs → chunk-GBPWTFTU.cjs} +10 -10
- package/dist/{chunk-TUJBDS5M.js → chunk-GG2WWCBK.js} +10 -10
- 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-IBRVMLUF.js → chunk-KM2TI5IC.js} +107 -80
- 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-APCBIHLR.cjs → chunk-VDRRD6GM.cjs} +29 -81
- 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 -7
- package/dist/components/button/index.d.cts +193 -244
- package/dist/components/button/index.d.ts +193 -244
- package/dist/components/button/index.js +5 -6
- package/dist/components/card/index.cjs +5 -6
- package/dist/components/card/index.d.cts +193 -193
- package/dist/components/card/index.d.ts +193 -193
- package/dist/components/card/index.js +4 -5
- 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-CC3NNCqF.d.ts → create-recipe-CbXika57.d.ts} +4 -3
- package/dist/{create-recipe-CPBFg7ym.d.cts → create-recipe-jHlk434p.d.cts} +4 -3
- package/dist/{icon.type-Cs1tMX0W.d.cts → icon.type-CF4KiMKl.d.cts} +1 -1
- package/dist/{icon.type-BkcEPJbK.d.ts → icon.type-Dq4_qePa.d.ts} +1 -1
- package/dist/index.cjs +36 -14
- package/dist/index.d.cts +8 -5
- package/dist/index.d.ts +8 -5
- package/dist/index.js +55 -33
- package/dist/{pressable-feedback.type-wfeiJz5m.d.cts → pressable-feedback.type-BA2C9sSz.d.cts} +1 -1
- package/dist/{pressable-feedback.type-DsvWZXWC.d.ts → pressable-feedback.type-Bs4dQlGj.d.ts} +1 -1
- 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 +15 -7
- package/dist/system/index.d.cts +174 -100
- package/dist/system/index.d.ts +174 -100
- package/dist/system/index.js +15 -7
- package/dist/theme/index.cjs +2 -2
- package/dist/theme/index.d.cts +10 -10
- package/dist/theme/index.d.ts +10 -10
- package/dist/theme/index.js +1 -1
- package/package.json +21 -1
- package/dist/chunk-RRRGLRRP.cjs +0 -28
- package/dist/chunk-SGHP76GU.js +0 -28
|
@@ -36,15 +36,14 @@ function _optionalChain(ops) {
|
|
|
36
36
|
}
|
|
37
37
|
return value;
|
|
38
38
|
}
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var _chunkUVO4GFSWcjs = require('./chunk-UVO4GFSW.cjs');
|
|
43
|
-
var _chunkEVXZGNPAcjs = require('./chunk-EVXZGNPA.cjs');
|
|
39
|
+
var _chunkDXGQ43IVcjs = require('./chunk-DXGQ43IV.cjs');
|
|
40
|
+
var _chunkBH5DSJVXcjs = require('./chunk-BH5DSJVX.cjs');
|
|
41
|
+
var _chunkYXVKQMCKcjs = require('./chunk-YXVKQMCK.cjs');
|
|
44
42
|
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
43
|
+
var _chunkHUZ4AUM2cjs = require('./chunk-HUZ4AUM2.cjs');
|
|
45
44
|
|
|
46
45
|
// src/components/button/button.context.ts
|
|
47
|
-
var [ButtonProvider, useButton] =
|
|
46
|
+
var [ButtonProvider, useButton] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "Button");
|
|
48
47
|
|
|
49
48
|
// src/components/button/button-icon.tsx
|
|
50
49
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -56,7 +55,7 @@ function ButtonIcon({
|
|
|
56
55
|
const {
|
|
57
56
|
icon
|
|
58
57
|
} = useButton();
|
|
59
|
-
return /* @__PURE__ */_jsxruntime.jsx.call(void 0,
|
|
58
|
+
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkDXGQ43IVcjs.Icon, {
|
|
60
59
|
size: _nullishCoalesce(size, () => icon.size),
|
|
61
60
|
color: _nullishCoalesce(color, () => icon.color),
|
|
62
61
|
...rest
|
|
@@ -76,7 +75,7 @@ var ButtonLabel = _react.forwardRef.call(void 0, function ButtonLabel2({
|
|
|
76
75
|
const {
|
|
77
76
|
labelStyle
|
|
78
77
|
} = useButton();
|
|
79
|
-
const [styleProps, rest] =
|
|
78
|
+
const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
80
79
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.Text, {
|
|
81
80
|
ref,
|
|
82
81
|
numberOfLines,
|
|
@@ -100,7 +99,7 @@ function ButtonSpinner({
|
|
|
100
99
|
const {
|
|
101
100
|
spinnerStyle
|
|
102
101
|
} = useButton();
|
|
103
|
-
const [styleProps] =
|
|
102
|
+
const [styleProps] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
104
103
|
const ringStyle = [spinnerStyle, styleProps, style];
|
|
105
104
|
if (!animation) return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
|
|
106
105
|
style: ringStyle
|
|
@@ -110,10 +109,10 @@ function ButtonSpinner({
|
|
|
110
109
|
});
|
|
111
110
|
}
|
|
112
111
|
ButtonSpinner.displayName = "XAUI.Button.Spinner";
|
|
113
|
-
const
|
|
114
|
-
code: "function
|
|
115
|
-
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-
|
|
116
|
-
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\":[]}"
|
|
117
116
|
};
|
|
118
117
|
function SpinningRing({
|
|
119
118
|
style
|
|
@@ -126,28 +125,28 @@ function SpinningRing({
|
|
|
126
125
|
}), -1, false);
|
|
127
126
|
return () => _reactnativereanimated.cancelAnimation.call(void 0, angle);
|
|
128
127
|
}, [angle]);
|
|
129
|
-
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function
|
|
130
|
-
|
|
128
|
+
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkVDRRD6GMCjs1Factory({
|
|
129
|
+
_worklet_12867052884334_init_data,
|
|
131
130
|
angle
|
|
132
131
|
}) {
|
|
133
132
|
const _e = [new global.Error(), -2, -27];
|
|
134
|
-
const
|
|
133
|
+
const chunkVDRRD6GMCjs1 = function () {
|
|
135
134
|
return {
|
|
136
135
|
transform: [{
|
|
137
136
|
rotate: `${angle.value}deg`
|
|
138
137
|
}]
|
|
139
138
|
};
|
|
140
139
|
};
|
|
141
|
-
|
|
140
|
+
chunkVDRRD6GMCjs1.__closure = {
|
|
142
141
|
angle
|
|
143
142
|
};
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
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;
|
|
149
148
|
}({
|
|
150
|
-
|
|
149
|
+
_worklet_12867052884334_init_data,
|
|
151
150
|
angle
|
|
152
151
|
}), [angle]);
|
|
153
152
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
|
|
@@ -231,7 +230,7 @@ function sizeAxis(step) {
|
|
|
231
230
|
spinner: ring(theme, theme.fontSizes[glyph])
|
|
232
231
|
});
|
|
233
232
|
}
|
|
234
|
-
var buttonRecipe =
|
|
233
|
+
var buttonRecipe = _chunkYXVKQMCKcjs.createRecipe.call(void 0, {
|
|
235
234
|
slots: SLOTS,
|
|
236
235
|
base: theme => ({
|
|
237
236
|
root: {
|
|
@@ -307,58 +306,7 @@ var buttonRecipe = _chunkUVO4GFSWcjs.createRecipe.call(void 0, {
|
|
|
307
306
|
radius: "4xl"
|
|
308
307
|
})
|
|
309
308
|
},
|
|
310
|
-
radius:
|
|
311
|
-
xs: t => ({
|
|
312
|
-
root: {
|
|
313
|
-
borderRadius: t.radius.xs
|
|
314
|
-
}
|
|
315
|
-
}),
|
|
316
|
-
sm: t => ({
|
|
317
|
-
root: {
|
|
318
|
-
borderRadius: t.radius.sm
|
|
319
|
-
}
|
|
320
|
-
}),
|
|
321
|
-
md: t => ({
|
|
322
|
-
root: {
|
|
323
|
-
borderRadius: t.radius.md
|
|
324
|
-
}
|
|
325
|
-
}),
|
|
326
|
-
lg: t => ({
|
|
327
|
-
root: {
|
|
328
|
-
borderRadius: t.radius.lg
|
|
329
|
-
}
|
|
330
|
-
}),
|
|
331
|
-
xl: t => ({
|
|
332
|
-
root: {
|
|
333
|
-
borderRadius: t.radius.xl
|
|
334
|
-
}
|
|
335
|
-
}),
|
|
336
|
-
"2xl": t => ({
|
|
337
|
-
root: {
|
|
338
|
-
borderRadius: t.radius["2xl"]
|
|
339
|
-
}
|
|
340
|
-
}),
|
|
341
|
-
"3xl": t => ({
|
|
342
|
-
root: {
|
|
343
|
-
borderRadius: t.radius["3xl"]
|
|
344
|
-
}
|
|
345
|
-
}),
|
|
346
|
-
"4xl": t => ({
|
|
347
|
-
root: {
|
|
348
|
-
borderRadius: t.radius["4xl"]
|
|
349
|
-
}
|
|
350
|
-
}),
|
|
351
|
-
field: t => ({
|
|
352
|
-
root: {
|
|
353
|
-
borderRadius: t.radius.field
|
|
354
|
-
}
|
|
355
|
-
}),
|
|
356
|
-
full: t => ({
|
|
357
|
-
root: {
|
|
358
|
-
borderRadius: t.radius.full
|
|
359
|
-
}
|
|
360
|
-
})
|
|
361
|
-
},
|
|
309
|
+
radius: _chunkYXVKQMCKcjs.radiusAxis.call(void 0, "root"),
|
|
362
310
|
// A square on a fixed height. No width is computed, and none needs to be.
|
|
363
311
|
isIconOnly: {
|
|
364
312
|
true: () => ({
|
|
@@ -420,8 +368,8 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
|
|
|
420
368
|
...props
|
|
421
369
|
}, ref) {
|
|
422
370
|
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0);
|
|
423
|
-
const [styleProps, rest] =
|
|
424
|
-
const [isPressed, press] =
|
|
371
|
+
const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
372
|
+
const [isPressed, press] = _chunkBH5DSJVXcjs.usePressState.call(void 0, {
|
|
425
373
|
onPressIn,
|
|
426
374
|
onPressOut
|
|
427
375
|
});
|
|
@@ -464,14 +412,14 @@ var ButtonRoot = _react.forwardRef.call(void 0, function Button({
|
|
|
464
412
|
const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _2 => _2.root]), styleProps, typeof style === "function" ? style({
|
|
465
413
|
pressed: isPressed
|
|
466
414
|
}) : style];
|
|
467
|
-
const text =
|
|
415
|
+
const text = _chunkHUZ4AUM2cjs.childrenToString.call(void 0, children);
|
|
468
416
|
const showSpinner = isLoading && !containsElementOfType(children, ButtonSpinner);
|
|
469
417
|
if (isIconOnly && !rest.accessibilityLabel && !rest["aria-label"]) {
|
|
470
|
-
|
|
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.");
|
|
471
419
|
}
|
|
472
420
|
return /* @__PURE__ */_jsxruntime.jsx.call(void 0, ButtonProvider, {
|
|
473
421
|
value: context,
|
|
474
|
-
children: /* @__PURE__ */_jsxruntime.jsx.call(void 0,
|
|
422
|
+
children: /* @__PURE__ */_jsxruntime.jsx.call(void 0, _chunkBH5DSJVXcjs.PressableFeedback, {
|
|
475
423
|
ref,
|
|
476
424
|
isPressed,
|
|
477
425
|
isDisabled: isDisabled || isLoading,
|
|
@@ -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 };
|