@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.31
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-3FV4COTM.js +68 -0
- package/dist/chunk-423RQBOX.js +21 -0
- package/dist/chunk-42FMGB5M.js +661 -0
- package/dist/chunk-4GTAZM2C.js +174 -0
- package/dist/chunk-4XPLPQLM.cjs +147 -0
- package/dist/{chunk-3QBT3Q65.cjs → chunk-57SJ4LJF.cjs} +7 -2
- package/dist/chunk-5GO7MAVY.cjs +74 -0
- package/dist/chunk-5PTBRJM7.cjs +346 -0
- package/dist/chunk-5RQ7AZPN.cjs +455 -0
- package/dist/chunk-5Z4P6WHR.cjs +525 -0
- package/dist/chunk-7DPL3ZDS.cjs +21 -0
- package/dist/chunk-7EIHHOHP.cjs +42 -0
- package/dist/chunk-7SEZGVTY.js +62 -0
- package/dist/chunk-7XKQJQF2.cjs +70 -0
- package/dist/{chunk-X2K2FX3W.js → chunk-A3EGFI6T.js} +6 -1
- package/dist/chunk-A5OCK3C2.js +525 -0
- package/dist/chunk-AETWQQWU.cjs +92 -0
- package/dist/chunk-ANNUYP55.cjs +431 -0
- package/dist/chunk-BA2DBSAN.js +102 -0
- package/dist/chunk-BFMTUMTU.js +669 -0
- package/dist/chunk-BVJQ3UPZ.js +62 -0
- package/dist/chunk-DFME724B.js +147 -0
- package/dist/chunk-E2CWBQTV.js +119 -0
- package/dist/chunk-EGLLDKN6.js +9 -0
- package/dist/chunk-EJQCQPET.cjs +9 -0
- package/dist/chunk-F6CQ6CBI.cjs +112 -0
- package/dist/chunk-F6W3JQ7K.js +42 -0
- package/dist/chunk-FNEUOBCV.cjs +174 -0
- package/dist/chunk-G7K652GC.js +145 -0
- package/dist/chunk-GGW42MY4.js +20 -0
- package/dist/chunk-GLGU2WFL.cjs +190 -0
- package/dist/chunk-GPVNCJ3Z.cjs +696 -0
- package/dist/chunk-GVQOD3VW.js +74 -0
- package/dist/chunk-IHOCANCQ.js +293 -0
- package/dist/chunk-JDFV4W6N.cjs +700 -0
- package/dist/chunk-KOC3KQIT.js +124 -0
- package/dist/chunk-KPWZLUES.cjs +124 -0
- package/dist/chunk-L7JN6OBQ.cjs +314 -0
- package/dist/chunk-MC7SY2QH.cjs +20 -0
- package/dist/chunk-MDVSCWJI.js +314 -0
- package/dist/chunk-N527BTY4.cjs +366 -0
- package/dist/chunk-NYRXUGVL.js +104 -0
- package/dist/{chunk-AW63PTQ4.cjs → chunk-OHEHPQLC.cjs} +72 -72
- package/dist/chunk-Q3WFY5N3.js +366 -0
- package/dist/chunk-QGN2BBJO.cjs +104 -0
- package/dist/chunk-RDTKAAHX.js +346 -0
- package/dist/chunk-TGZZ3RZU.cjs +86 -0
- package/dist/{chunk-2KXQATVL.js → chunk-TZG3DERP.js} +46 -46
- package/dist/chunk-URSKA2VR.js +190 -0
- package/dist/chunk-V4WDMM6Z.js +86 -0
- package/dist/chunk-VJEER76X.js +455 -0
- package/dist/chunk-VZBWYWEI.cjs +736 -0
- package/dist/chunk-WR7YLDVV.cjs +68 -0
- package/dist/chunk-X4HQ4H2V.js +701 -0
- package/dist/chunk-XFSW3ZNI.cjs +145 -0
- package/dist/chunk-XQFAUDR2.cjs +62 -0
- package/dist/chunk-ZH5XVNHG.js +92 -0
- package/dist/chunk-ZH6BHLQR.js +431 -0
- package/dist/chunk-ZP2E2H2G.cjs +119 -0
- package/dist/chunk-ZVWXM3UK.cjs +293 -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 +20 -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 +20 -0
- package/dist/components/button/index.cjs +21 -0
- package/dist/components/button/index.d.cts +613 -0
- package/dist/components/button/index.d.ts +613 -0
- package/dist/components/button/index.js +21 -0
- package/dist/components/card/index.cjs +22 -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 +22 -0
- package/dist/components/checkbox/index.cjs +26 -0
- package/dist/components/checkbox/index.d.cts +1136 -0
- package/dist/components/checkbox/index.d.ts +1136 -0
- package/dist/components/checkbox/index.js +26 -0
- package/dist/components/chip/index.cjs +20 -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 +20 -0
- package/dist/components/divider/index.cjs +13 -0
- package/dist/components/divider/index.d.cts +117 -0
- package/dist/components/divider/index.d.ts +117 -0
- package/dist/components/divider/index.js +13 -0
- package/dist/components/input/index.cjs +25 -0
- package/dist/components/input/index.d.cts +205 -0
- package/dist/components/input/index.d.ts +205 -0
- package/dist/components/input/index.js +25 -0
- package/dist/components/input-group/index.cjs +27 -0
- package/dist/components/input-group/index.d.cts +270 -0
- package/dist/components/input-group/index.d.ts +270 -0
- package/dist/components/input-group/index.js +27 -0
- package/dist/components/input-otp/index.cjs +29 -0
- package/dist/components/input-otp/index.d.cts +325 -0
- package/dist/components/input-otp/index.d.ts +325 -0
- package/dist/components/input-otp/index.js +29 -0
- package/dist/components/radio/index.cjs +26 -0
- package/dist/components/radio/index.d.cts +1102 -0
- package/dist/components/radio/index.d.ts +1102 -0
- package/dist/components/radio/index.js +26 -0
- package/dist/components/spinner/index.cjs +16 -0
- package/dist/components/spinner/index.d.cts +104 -0
- package/dist/components/spinner/index.d.ts +104 -0
- package/dist/components/spinner/index.js +16 -0
- package/dist/components/switch/index.cjs +27 -0
- package/dist/components/switch/index.d.cts +1154 -0
- package/dist/components/switch/index.d.ts +1154 -0
- package/dist/components/switch/index.js +27 -0
- package/dist/components/text-area/index.cjs +14 -0
- package/dist/components/text-area/index.d.cts +73 -0
- package/dist/components/text-area/index.d.ts +73 -0
- package/dist/components/text-area/index.js +14 -0
- package/dist/components/typography/index.cjs +15 -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 +15 -0
- package/dist/components/view/index.cjs +17 -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 +17 -0
- package/dist/create-recipe-BdVd2ffi.d.ts +114 -0
- package/dist/create-recipe-dC7wMfnj.d.cts +114 -0
- package/dist/icon.type-Kml72iSz.d.ts +73 -0
- package/dist/icon.type-d_i9ma-i.d.cts +73 -0
- package/dist/index.cjs +252 -4
- package/dist/index.d.cts +110 -4
- package/dist/index.d.ts +110 -4
- package/dist/index.js +271 -23
- package/dist/input.type-BUMDlzL9.d.cts +167 -0
- package/dist/input.type-D2qgi03E.d.ts +167 -0
- package/dist/pressable-feedback.type-BA2C9sSz.d.cts +127 -0
- package/dist/pressable-feedback.type-Bs4dQlGj.d.ts +127 -0
- package/dist/style-props.type-CfnoGEP7.d.cts +31 -0
- package/dist/style-props.type-CfnoGEP7.d.ts +31 -0
- package/dist/system/index.cjs +60 -3
- package/dist/system/index.d.cts +347 -181
- package/dist/system/index.d.ts +347 -181
- package/dist/system/index.js +71 -14
- package/dist/theme/index.cjs +4 -3
- package/dist/theme/index.d.cts +34 -23
- package/dist/theme/index.d.ts +34 -23
- package/dist/theme/index.js +3 -2
- package/dist/{theme.type-C9bFJKFm.d.cts → theme.type-C2gNHpEx.d.cts} +1 -1
- package/dist/{theme.type-C9bFJKFm.d.ts → theme.type-C2gNHpEx.d.ts} +1 -1
- package/package.json +184 -18
- package/dist/chunk-QAMNNTGM.js +0 -637
- package/dist/chunk-V63JO65F.cjs +0 -637
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useRotation
|
|
3
|
+
} from "./chunk-BVJQ3UPZ.js";
|
|
4
|
+
import {
|
|
5
|
+
createRecipe
|
|
6
|
+
} from "./chunk-4GTAZM2C.js";
|
|
7
|
+
import {
|
|
8
|
+
alpha,
|
|
9
|
+
useXAUITheme
|
|
10
|
+
} from "./chunk-A3EGFI6T.js";
|
|
11
|
+
import {
|
|
12
|
+
useStyleProps
|
|
13
|
+
} from "./chunk-URSKA2VR.js";
|
|
14
|
+
|
|
15
|
+
// src/components/spinner/spinner.tsx
|
|
16
|
+
import { forwardRef } from "react";
|
|
17
|
+
import { View } from "react-native";
|
|
18
|
+
import Animated from "react-native-reanimated";
|
|
19
|
+
|
|
20
|
+
// src/components/spinner/spinner.recipe.ts
|
|
21
|
+
var SLOTS = ["root", "arc"];
|
|
22
|
+
var VARIANT_TOKENS = {
|
|
23
|
+
primary: { fg: "accent" },
|
|
24
|
+
secondary: { fg: "accentSoftForeground" },
|
|
25
|
+
default: { fg: "foreground" },
|
|
26
|
+
tertiary: { fg: "muted" },
|
|
27
|
+
success: { fg: "success" },
|
|
28
|
+
warning: { fg: "warning" },
|
|
29
|
+
danger: { fg: "danger" }
|
|
30
|
+
};
|
|
31
|
+
var TRACK_OPACITY = 0.18;
|
|
32
|
+
function sizeAxis(step) {
|
|
33
|
+
return (theme) => {
|
|
34
|
+
const diameter = theme.spacing(step.diameter);
|
|
35
|
+
const stroke = theme.borderWidth.default * step.stroke;
|
|
36
|
+
return {
|
|
37
|
+
root: {
|
|
38
|
+
width: diameter,
|
|
39
|
+
height: diameter,
|
|
40
|
+
borderRadius: diameter / 2,
|
|
41
|
+
borderWidth: stroke
|
|
42
|
+
},
|
|
43
|
+
// The arc is the same ring, drawn one stroke outside the track's box so the two
|
|
44
|
+
// circles land on each other rather than nesting. R13 — `start` and `end`, so the
|
|
45
|
+
// inset mirrors with the layout instead of staying put.
|
|
46
|
+
arc: {
|
|
47
|
+
position: "absolute",
|
|
48
|
+
top: -stroke,
|
|
49
|
+
bottom: -stroke,
|
|
50
|
+
start: -stroke,
|
|
51
|
+
end: -stroke,
|
|
52
|
+
borderRadius: diameter / 2 + stroke,
|
|
53
|
+
borderWidth: stroke
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
var SIZES = {
|
|
59
|
+
xs: { diameter: 4, stroke: 2 },
|
|
60
|
+
sm: { diameter: 5, stroke: 2 },
|
|
61
|
+
md: { diameter: 6, stroke: 2 },
|
|
62
|
+
lg: { diameter: 8, stroke: 3 }
|
|
63
|
+
};
|
|
64
|
+
var spinnerRecipe = createRecipe({
|
|
65
|
+
slots: SLOTS,
|
|
66
|
+
base: () => ({
|
|
67
|
+
// Squircle corners are meaningless on a full circle, and `overflow` would clip the
|
|
68
|
+
// arc that deliberately sits outside this box.
|
|
69
|
+
root: { alignItems: "center", justifyContent: "center" }
|
|
70
|
+
}),
|
|
71
|
+
variantTokens: VARIANT_TOKENS,
|
|
72
|
+
/**
|
|
73
|
+
* One ink, two opacities, and the gap that makes the rotation visible.
|
|
74
|
+
*
|
|
75
|
+
* `borderTopColor: 'transparent'` is structural rather than a colour the theme has an
|
|
76
|
+
* opinion about — it is the quarter of the circle that is missing, and without it a
|
|
77
|
+
* rotating ring is a ring.
|
|
78
|
+
*/
|
|
79
|
+
paint: (_theme, colors) => ({
|
|
80
|
+
root: { borderColor: colors.fg ? alpha(colors.fg, TRACK_OPACITY) : void 0 },
|
|
81
|
+
arc: { borderColor: colors.fg, borderTopColor: "transparent" }
|
|
82
|
+
}),
|
|
83
|
+
variants: {
|
|
84
|
+
size: {
|
|
85
|
+
xs: sizeAxis(SIZES.xs),
|
|
86
|
+
sm: sizeAxis(SIZES.sm),
|
|
87
|
+
md: sizeAxis(SIZES.md),
|
|
88
|
+
lg: sizeAxis(SIZES.lg)
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
defaultVariants: { variant: "primary", size: "md" }
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// src/components/spinner/spinner.tsx
|
|
95
|
+
import { jsx } from "react/jsx-runtime";
|
|
96
|
+
var Spinner = forwardRef(function Spinner2({ variant, size, color, animation = true, style, ...props }, ref) {
|
|
97
|
+
const theme = useXAUITheme();
|
|
98
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
99
|
+
const selection = { variant, size };
|
|
100
|
+
const styles = spinnerRecipe.resolve({ theme, selection });
|
|
101
|
+
const tint = color ? spinnerRecipe.tint({ theme, color, selection }) : void 0;
|
|
102
|
+
const arcStyle = [styles.arc, tint?.arc];
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
104
|
+
View,
|
|
105
|
+
{
|
|
106
|
+
ref,
|
|
107
|
+
accessibilityRole: "progressbar",
|
|
108
|
+
accessibilityState: { busy: animation },
|
|
109
|
+
...rest,
|
|
110
|
+
style: [styles.root, tint?.root, styleProps, style],
|
|
111
|
+
children: animation ? /* @__PURE__ */ jsx(SpinningArc, { style: arcStyle }) : /* @__PURE__ */ jsx(View, { style: arcStyle })
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
});
|
|
115
|
+
Spinner.displayName = "XAUI.Spinner";
|
|
116
|
+
function SpinningArc({ style }) {
|
|
117
|
+
const rotation = useRotation();
|
|
118
|
+
return /* @__PURE__ */ jsx(Animated.View, { style: [style, rotation] });
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
export {
|
|
122
|
+
spinnerRecipe,
|
|
123
|
+
Spinner
|
|
124
|
+
};
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunk7XKQJQF2cjs = require('./chunk-7XKQJQF2.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
|
|
14
|
+
|
|
15
|
+
// src/components/spinner/spinner.tsx
|
|
16
|
+
var _react = require('react');
|
|
17
|
+
var _reactnative = require('react-native');
|
|
18
|
+
var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
|
|
19
|
+
|
|
20
|
+
// src/components/spinner/spinner.recipe.ts
|
|
21
|
+
var SLOTS = ["root", "arc"];
|
|
22
|
+
var VARIANT_TOKENS = {
|
|
23
|
+
primary: { fg: "accent" },
|
|
24
|
+
secondary: { fg: "accentSoftForeground" },
|
|
25
|
+
default: { fg: "foreground" },
|
|
26
|
+
tertiary: { fg: "muted" },
|
|
27
|
+
success: { fg: "success" },
|
|
28
|
+
warning: { fg: "warning" },
|
|
29
|
+
danger: { fg: "danger" }
|
|
30
|
+
};
|
|
31
|
+
var TRACK_OPACITY = 0.18;
|
|
32
|
+
function sizeAxis(step) {
|
|
33
|
+
return (theme) => {
|
|
34
|
+
const diameter = theme.spacing(step.diameter);
|
|
35
|
+
const stroke = theme.borderWidth.default * step.stroke;
|
|
36
|
+
return {
|
|
37
|
+
root: {
|
|
38
|
+
width: diameter,
|
|
39
|
+
height: diameter,
|
|
40
|
+
borderRadius: diameter / 2,
|
|
41
|
+
borderWidth: stroke
|
|
42
|
+
},
|
|
43
|
+
// The arc is the same ring, drawn one stroke outside the track's box so the two
|
|
44
|
+
// circles land on each other rather than nesting. R13 — `start` and `end`, so the
|
|
45
|
+
// inset mirrors with the layout instead of staying put.
|
|
46
|
+
arc: {
|
|
47
|
+
position: "absolute",
|
|
48
|
+
top: -stroke,
|
|
49
|
+
bottom: -stroke,
|
|
50
|
+
start: -stroke,
|
|
51
|
+
end: -stroke,
|
|
52
|
+
borderRadius: diameter / 2 + stroke,
|
|
53
|
+
borderWidth: stroke
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
var SIZES = {
|
|
59
|
+
xs: { diameter: 4, stroke: 2 },
|
|
60
|
+
sm: { diameter: 5, stroke: 2 },
|
|
61
|
+
md: { diameter: 6, stroke: 2 },
|
|
62
|
+
lg: { diameter: 8, stroke: 3 }
|
|
63
|
+
};
|
|
64
|
+
var spinnerRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
65
|
+
slots: SLOTS,
|
|
66
|
+
base: () => ({
|
|
67
|
+
// Squircle corners are meaningless on a full circle, and `overflow` would clip the
|
|
68
|
+
// arc that deliberately sits outside this box.
|
|
69
|
+
root: { alignItems: "center", justifyContent: "center" }
|
|
70
|
+
}),
|
|
71
|
+
variantTokens: VARIANT_TOKENS,
|
|
72
|
+
/**
|
|
73
|
+
* One ink, two opacities, and the gap that makes the rotation visible.
|
|
74
|
+
*
|
|
75
|
+
* `borderTopColor: 'transparent'` is structural rather than a colour the theme has an
|
|
76
|
+
* opinion about — it is the quarter of the circle that is missing, and without it a
|
|
77
|
+
* rotating ring is a ring.
|
|
78
|
+
*/
|
|
79
|
+
paint: (_theme, colors) => ({
|
|
80
|
+
root: { borderColor: colors.fg ? _chunk57SJ4LJFcjs.alpha.call(void 0, colors.fg, TRACK_OPACITY) : void 0 },
|
|
81
|
+
arc: { borderColor: colors.fg, borderTopColor: "transparent" }
|
|
82
|
+
}),
|
|
83
|
+
variants: {
|
|
84
|
+
size: {
|
|
85
|
+
xs: sizeAxis(SIZES.xs),
|
|
86
|
+
sm: sizeAxis(SIZES.sm),
|
|
87
|
+
md: sizeAxis(SIZES.md),
|
|
88
|
+
lg: sizeAxis(SIZES.lg)
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
defaultVariants: { variant: "primary", size: "md" }
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// src/components/spinner/spinner.tsx
|
|
95
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
96
|
+
var Spinner = _react.forwardRef.call(void 0, function Spinner2({ variant, size, color, animation = true, style, ...props }, ref) {
|
|
97
|
+
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
|
|
98
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
99
|
+
const selection = { variant, size };
|
|
100
|
+
const styles = spinnerRecipe.resolve({ theme, selection });
|
|
101
|
+
const tint = color ? spinnerRecipe.tint({ theme, color, selection }) : void 0;
|
|
102
|
+
const arcStyle = [styles.arc, _optionalChain([tint, 'optionalAccess', _ => _.arc])];
|
|
103
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
104
|
+
_reactnative.View,
|
|
105
|
+
{
|
|
106
|
+
ref,
|
|
107
|
+
accessibilityRole: "progressbar",
|
|
108
|
+
accessibilityState: { busy: animation },
|
|
109
|
+
...rest,
|
|
110
|
+
style: [styles.root, _optionalChain([tint, 'optionalAccess', _2 => _2.root]), styleProps, style],
|
|
111
|
+
children: animation ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SpinningArc, { style: arcStyle }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: arcStyle })
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
});
|
|
115
|
+
Spinner.displayName = "XAUI.Spinner";
|
|
116
|
+
function SpinningArc({ style }) {
|
|
117
|
+
const rotation = _chunk7XKQJQF2cjs.useRotation.call(void 0, );
|
|
118
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { style: [style, rotation] });
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
exports.spinnerRecipe = spinnerRecipe; exports.Spinner = Spinner;
|
|
@@ -0,0 +1,314 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunk7XKQJQF2cjs = require('./chunk-7XKQJQF2.cjs');
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunkGPVNCJ3Zcjs = require('./chunk-GPVNCJ3Z.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
var _chunkWR7YLDVVcjs = require('./chunk-WR7YLDVV.cjs');
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
var _chunkZP2E2H2Gcjs = require('./chunk-ZP2E2H2G.cjs');
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
var _chunkGLGU2WFLcjs = require('./chunk-GLGU2WFL.cjs');
|
|
30
|
+
|
|
31
|
+
// src/components/button/button.context.ts
|
|
32
|
+
var [ButtonProvider, useButton] = _chunkZP2E2H2Gcjs.createSlotContext.call(void 0, "Button");
|
|
33
|
+
|
|
34
|
+
// src/components/button/button-icon.tsx
|
|
35
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
36
|
+
function ButtonIcon({ size, color, ...rest }) {
|
|
37
|
+
const { icon } = useButton();
|
|
38
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWR7YLDVVcjs.Icon, { size: _nullishCoalesce(size, () => ( icon.size)), color: _nullishCoalesce(color, () => ( icon.color)), ...rest });
|
|
39
|
+
}
|
|
40
|
+
ButtonIcon.displayName = "XAUI.Button.Icon";
|
|
41
|
+
|
|
42
|
+
// src/components/button/button-label.tsx
|
|
43
|
+
var _react = require('react');
|
|
44
|
+
var _reactnative = require('react-native');
|
|
45
|
+
|
|
46
|
+
var ButtonLabel = _react.forwardRef.call(void 0, function ButtonLabel2({ children, style, numberOfLines = 1, ...props }, ref) {
|
|
47
|
+
const { labelStyle } = useButton();
|
|
48
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
49
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
50
|
+
_reactnative.Text,
|
|
51
|
+
{
|
|
52
|
+
ref,
|
|
53
|
+
numberOfLines,
|
|
54
|
+
style: [labelStyle, styleProps, style],
|
|
55
|
+
...rest,
|
|
56
|
+
children
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
});
|
|
60
|
+
ButtonLabel.displayName = "XAUI.Button.Label";
|
|
61
|
+
|
|
62
|
+
// src/components/button/button-spinner.tsx
|
|
63
|
+
|
|
64
|
+
var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
|
|
65
|
+
|
|
66
|
+
function ButtonSpinner({
|
|
67
|
+
style,
|
|
68
|
+
animation = true,
|
|
69
|
+
...props
|
|
70
|
+
}) {
|
|
71
|
+
const { spinnerStyle } = useButton();
|
|
72
|
+
const [styleProps] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
73
|
+
const ringStyle = [spinnerStyle, styleProps, style];
|
|
74
|
+
if (!animation) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: ringStyle });
|
|
75
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SpinningRing, { style: ringStyle });
|
|
76
|
+
}
|
|
77
|
+
ButtonSpinner.displayName = "XAUI.Button.Spinner";
|
|
78
|
+
function SpinningRing({ style }) {
|
|
79
|
+
const rotation = _chunk7XKQJQF2cjs.useRotation.call(void 0, );
|
|
80
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { style: [style, rotation] });
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// src/components/button/button.tsx
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
// src/components/button/button.recipe.ts
|
|
88
|
+
var SLOTS = ["root", "label", "icon", "spinner"];
|
|
89
|
+
var VARIANT_TOKENS = {
|
|
90
|
+
primary: { bg: "accent", bgPressed: "accentPressed", fg: "accentForeground" },
|
|
91
|
+
// The accent's soft slice, not a second neutral: `secondary` is to `primary` what
|
|
92
|
+
// `danger-soft` is to `danger`, and it reads as the same family at lower emphasis.
|
|
93
|
+
secondary: {
|
|
94
|
+
bg: "accentSoft",
|
|
95
|
+
bgPressed: "accentSoftPressed",
|
|
96
|
+
fg: "accentSoftForeground"
|
|
97
|
+
},
|
|
98
|
+
default: { bg: "default", bgPressed: "defaultPressed", fg: "defaultForeground" },
|
|
99
|
+
tertiary: {
|
|
100
|
+
border: "border",
|
|
101
|
+
bgPressed: "defaultSoftPressed",
|
|
102
|
+
fg: "foreground"
|
|
103
|
+
},
|
|
104
|
+
ghost: { bgPressed: "defaultSoftPressed", fg: "foreground" },
|
|
105
|
+
danger: { bg: "danger", bgPressed: "dangerPressed", fg: "dangerForeground" },
|
|
106
|
+
"danger-soft": {
|
|
107
|
+
bg: "dangerSoft",
|
|
108
|
+
bgPressed: "dangerSoftPressed",
|
|
109
|
+
fg: "dangerSoftForeground"
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
function ring(theme, size) {
|
|
113
|
+
return {
|
|
114
|
+
width: size,
|
|
115
|
+
height: size,
|
|
116
|
+
borderRadius: size / 2,
|
|
117
|
+
borderWidth: theme.borderWidth.default * 2,
|
|
118
|
+
borderTopColor: "transparent"
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
function sizeAxis(step) {
|
|
122
|
+
const { size, padding, gap, glyph, radius } = step;
|
|
123
|
+
return (theme) => ({
|
|
124
|
+
root: {
|
|
125
|
+
height: theme.controlHeights[size],
|
|
126
|
+
paddingHorizontal: theme.spacing(padding),
|
|
127
|
+
gap: theme.spacing(gap),
|
|
128
|
+
borderRadius: theme.radius[radius]
|
|
129
|
+
},
|
|
130
|
+
label: {
|
|
131
|
+
fontSize: theme.fontSizes[size],
|
|
132
|
+
lineHeight: theme.lineHeights[size]
|
|
133
|
+
},
|
|
134
|
+
icon: { fontSize: theme.fontSizes[glyph] },
|
|
135
|
+
spinner: ring(theme, theme.fontSizes[glyph])
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
var buttonRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
|
|
139
|
+
slots: SLOTS,
|
|
140
|
+
base: (theme) => ({
|
|
141
|
+
root: {
|
|
142
|
+
flexDirection: "row",
|
|
143
|
+
alignItems: "center",
|
|
144
|
+
justifyContent: "center",
|
|
145
|
+
borderWidth: 0,
|
|
146
|
+
// iOS's squircle. Free on Android, and it is what makes a large radius read as a
|
|
147
|
+
// shape rather than as two arcs meeting a straight edge.
|
|
148
|
+
borderCurve: "continuous"
|
|
149
|
+
},
|
|
150
|
+
label: {
|
|
151
|
+
fontFamily: theme.fontFamilies.body,
|
|
152
|
+
fontWeight: theme.fontWeights.medium
|
|
153
|
+
}
|
|
154
|
+
}),
|
|
155
|
+
variantTokens: VARIANT_TOKENS,
|
|
156
|
+
/**
|
|
157
|
+
* Where the variant's colours land, for every variant at once. The border width follows
|
|
158
|
+
* the *presence* of the border role rather than a per-variant flag — `tertiary` is the
|
|
159
|
+
* only variant that names one, and that fact is already in the table above.
|
|
160
|
+
*/
|
|
161
|
+
paint: (theme, colors) => ({
|
|
162
|
+
root: {
|
|
163
|
+
backgroundColor: colors.bg,
|
|
164
|
+
borderColor: colors.border,
|
|
165
|
+
borderWidth: colors.border ? theme.borderWidth.default : 0
|
|
166
|
+
},
|
|
167
|
+
label: { color: colors.fg },
|
|
168
|
+
icon: { color: colors.fg },
|
|
169
|
+
spinner: { borderColor: colors.fg }
|
|
170
|
+
}),
|
|
171
|
+
/**
|
|
172
|
+
* Declaration order is application order: `radius` overrides the radius `size` set, and
|
|
173
|
+
* `isIconOnly` overrides its padding. Both are axes rather than a static sheet merged
|
|
174
|
+
* at the call site, so they stay inside the cache key and a press still allocates
|
|
175
|
+
* nothing.
|
|
176
|
+
*/
|
|
177
|
+
variants: {
|
|
178
|
+
size: {
|
|
179
|
+
xs: sizeAxis({ size: "xs", padding: 3, gap: 1, glyph: "sm", radius: "3xl" }),
|
|
180
|
+
sm: sizeAxis({
|
|
181
|
+
size: "sm",
|
|
182
|
+
padding: 3.5,
|
|
183
|
+
gap: 1.5,
|
|
184
|
+
glyph: "md",
|
|
185
|
+
radius: "3xl"
|
|
186
|
+
}),
|
|
187
|
+
md: sizeAxis({ size: "md", padding: 4, gap: 2, glyph: "lg", radius: "3xl" }),
|
|
188
|
+
lg: sizeAxis({ size: "lg", padding: 5, gap: 2.5, glyph: "xl", radius: "4xl" })
|
|
189
|
+
},
|
|
190
|
+
radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "root"),
|
|
191
|
+
// A square on a fixed height. No width is computed, and none needs to be.
|
|
192
|
+
isIconOnly: {
|
|
193
|
+
true: () => ({ root: { paddingHorizontal: 0, aspectRatio: 1 } })
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
/**
|
|
197
|
+
* The pressed colour lives here rather than in a `PressableFeedback.Highlight`, because
|
|
198
|
+
* a control picks one treatment or the other — both, and a pressed button darkens
|
|
199
|
+
* twice. This one is the variant's own `…Pressed` token, so the press reads as the
|
|
200
|
+
* button's colour going down rather than as a neutral film over it, and a tinted button
|
|
201
|
+
* presses through the same OKLab formula as a token one.
|
|
202
|
+
*/
|
|
203
|
+
states: {
|
|
204
|
+
pressed: (_theme, colors) => ({ root: { backgroundColor: colors.bgPressed } }),
|
|
205
|
+
disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
|
|
206
|
+
},
|
|
207
|
+
defaultVariants: { variant: "primary", size: "md" }
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
// src/components/button/button.utils.ts
|
|
211
|
+
|
|
212
|
+
function containsElementOfType(children, type) {
|
|
213
|
+
return _react.Children.toArray(children).some(
|
|
214
|
+
(child) => _react.isValidElement.call(void 0, child) && child.type === type
|
|
215
|
+
);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
// src/components/button/button.tsx
|
|
219
|
+
|
|
220
|
+
var ButtonRoot = _react.forwardRef.call(void 0, function Button({
|
|
221
|
+
children,
|
|
222
|
+
variant,
|
|
223
|
+
size,
|
|
224
|
+
radius,
|
|
225
|
+
color,
|
|
226
|
+
isDisabled = false,
|
|
227
|
+
isLoading = false,
|
|
228
|
+
isIconOnly = false,
|
|
229
|
+
asChild = false,
|
|
230
|
+
accessibilityRole = "button",
|
|
231
|
+
accessibilityState,
|
|
232
|
+
style,
|
|
233
|
+
onPressIn,
|
|
234
|
+
onPressOut,
|
|
235
|
+
...props
|
|
236
|
+
}, ref) {
|
|
237
|
+
const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
|
|
238
|
+
const [styleProps, rest] = _chunkGLGU2WFLcjs.useStyleProps.call(void 0, props);
|
|
239
|
+
const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
|
|
240
|
+
const selection = {
|
|
241
|
+
variant,
|
|
242
|
+
size,
|
|
243
|
+
radius,
|
|
244
|
+
isIconOnly: isIconOnly ? "true" : void 0
|
|
245
|
+
};
|
|
246
|
+
const states = { pressed: isPressed, disabled: isDisabled || isLoading };
|
|
247
|
+
const styles = buttonRecipe.resolve({ theme, selection, states });
|
|
248
|
+
const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : void 0;
|
|
249
|
+
const context = _react.useMemo.call(void 0, () => {
|
|
250
|
+
const icon = _reactnative.StyleSheet.flatten([styles.icon, _optionalChain([tint, 'optionalAccess', _ => _.icon])]);
|
|
251
|
+
return {
|
|
252
|
+
labelStyle: tint ? [styles.label, tint.label] : styles.label,
|
|
253
|
+
spinnerStyle: tint ? [styles.spinner, tint.spinner] : styles.spinner,
|
|
254
|
+
icon: {
|
|
255
|
+
size: icon.fontSize,
|
|
256
|
+
// `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
|
|
257
|
+
// hand to a third-party component expecting a string.
|
|
258
|
+
color: typeof icon.color === "string" ? icon.color : void 0
|
|
259
|
+
},
|
|
260
|
+
isDisabled,
|
|
261
|
+
isLoading
|
|
262
|
+
};
|
|
263
|
+
}, [styles, tint, isDisabled, isLoading]);
|
|
264
|
+
const rootStyle = [
|
|
265
|
+
styles.root,
|
|
266
|
+
_optionalChain([tint, 'optionalAccess', _2 => _2.root]),
|
|
267
|
+
styleProps,
|
|
268
|
+
typeof style === "function" ? style({ pressed: isPressed }) : style
|
|
269
|
+
];
|
|
270
|
+
const text = _chunkZP2E2H2Gcjs.childrenToString.call(void 0, children);
|
|
271
|
+
const showSpinner = isLoading && !containsElementOfType(children, ButtonSpinner);
|
|
272
|
+
if (isIconOnly && !rest.accessibilityLabel && !rest["aria-label"]) {
|
|
273
|
+
_chunkEJQCQPETcjs.warnDev.call(void 0,
|
|
274
|
+
"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."
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
278
|
+
_chunkGPVNCJ3Zcjs.PressableFeedback,
|
|
279
|
+
{
|
|
280
|
+
ref,
|
|
281
|
+
isPressed,
|
|
282
|
+
isDisabled: isDisabled || isLoading,
|
|
283
|
+
asChild,
|
|
284
|
+
accessibilityRole,
|
|
285
|
+
accessibilityState: {
|
|
286
|
+
disabled: isDisabled,
|
|
287
|
+
busy: isLoading,
|
|
288
|
+
...accessibilityState
|
|
289
|
+
},
|
|
290
|
+
...rest,
|
|
291
|
+
style: rootStyle,
|
|
292
|
+
onPressIn: press.onPressIn,
|
|
293
|
+
onPressOut: press.onPressOut,
|
|
294
|
+
children: asChild ? children : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
295
|
+
showSpinner ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonSpinner, {}) : null,
|
|
296
|
+
text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonLabel, { children: text }) : children
|
|
297
|
+
] })
|
|
298
|
+
}
|
|
299
|
+
) });
|
|
300
|
+
});
|
|
301
|
+
ButtonRoot.displayName = "XAUI.Button.Root";
|
|
302
|
+
|
|
303
|
+
// src/components/button/index.ts
|
|
304
|
+
var Button2 = Object.assign(ButtonRoot, {
|
|
305
|
+
Label: ButtonLabel,
|
|
306
|
+
Icon: ButtonIcon,
|
|
307
|
+
Spinner: ButtonSpinner
|
|
308
|
+
});
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
exports.useButton = useButton; exports.buttonRecipe = buttonRecipe; exports.Button = Button2;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/utils/stable-hash.ts
|
|
2
|
+
function canonical(value) {
|
|
3
|
+
if (value === null || typeof value !== "object") return _nullishCoalesce(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
|
+
|
|
19
|
+
|
|
20
|
+
exports.stableHash = stableHash;
|