@xaui/native 0.9.1-alpha.3 → 0.9.1-alpha.30
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-27ZRTZEE.js +293 -0
- package/dist/chunk-3FV4COTM.js +68 -0
- package/dist/chunk-423RQBOX.js +21 -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-5RQ7AZPN.cjs +455 -0
- package/dist/chunk-5Z4P6WHR.cjs +525 -0
- package/dist/chunk-6RVCGLKZ.js +661 -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-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-E4TS6632.cjs +314 -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-FMZQW35T.js +431 -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-GI24YJPE.js +314 -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-KOC3KQIT.js +124 -0
- package/dist/chunk-KPWZLUES.cjs +124 -0
- package/dist/chunk-KWCHSIMI.cjs +293 -0
- package/dist/chunk-MC7SY2QH.cjs +20 -0
- package/dist/chunk-N527BTY4.cjs +366 -0
- package/dist/chunk-NBFWWQFW.cjs +346 -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-TGZZ3RZU.cjs +86 -0
- package/dist/{chunk-2KXQATVL.js → chunk-TZG3DERP.js} +46 -46
- package/dist/chunk-UBQLKIZC.cjs +431 -0
- 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-YKL6XHM6.js +346 -0
- package/dist/chunk-ZP2E2H2G.cjs +119 -0
- package/dist/chunk-ZSLNGBDS.cjs +700 -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/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 +246 -4
- package/dist/index.d.cts +109 -4
- package/dist/index.d.ts +109 -4
- package/dist/index.js +266 -24
- 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 +174 -18
- package/dist/chunk-QAMNNTGM.js +0 -637
- package/dist/chunk-V63JO65F.cjs +0 -637
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { mergeRefs } from "./chunk-URSKA2VR.js";
|
|
2
|
+
|
|
3
|
+
// src/hooks/use-merged-ref.ts
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
function useMergedRef(...refs) {
|
|
6
|
+
return useMemo(() => mergeRefs(...refs), refs);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
// src/hooks/use-previous.ts
|
|
10
|
+
import { useEffect, useRef } from "react";
|
|
11
|
+
function usePrevious(value) {
|
|
12
|
+
const previous = useRef(void 0);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
previous.current = value;
|
|
15
|
+
}, [value]);
|
|
16
|
+
return previous.current;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// src/hooks/use-rotation.ts
|
|
20
|
+
import { useEffect as useEffect2 } from "react";
|
|
21
|
+
import { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
|
|
22
|
+
var ROTATION_DURATION = 900;
|
|
23
|
+
const _worklet_9664866718948_init_data = {
|
|
24
|
+
code: "function chunkBVJQ3UPZJs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
|
|
25
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-BVJQ3UPZ.js",
|
|
26
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkBVJQ3UPZJs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-BVJQ3UPZ.js\"],\"mappings\":\"AAyC0B,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE5B,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
|
|
27
|
+
};
|
|
28
|
+
function useRotation() {
|
|
29
|
+
const angle = useSharedValue(0);
|
|
30
|
+
useEffect2(() => {
|
|
31
|
+
angle.value = withRepeat(withTiming(360, {
|
|
32
|
+
duration: ROTATION_DURATION,
|
|
33
|
+
easing: Easing.linear
|
|
34
|
+
}), -1, false);
|
|
35
|
+
return () => cancelAnimation(angle);
|
|
36
|
+
}, [angle]);
|
|
37
|
+
return useAnimatedStyle(function chunkBVJQ3UPZJs1Factory({
|
|
38
|
+
_worklet_9664866718948_init_data,
|
|
39
|
+
angle
|
|
40
|
+
}) {
|
|
41
|
+
const _e = [new global.Error(), -2, -27];
|
|
42
|
+
const chunkBVJQ3UPZJs1 = function () {
|
|
43
|
+
return {
|
|
44
|
+
transform: [{
|
|
45
|
+
rotate: `${angle.value}deg`
|
|
46
|
+
}]
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
chunkBVJQ3UPZJs1.__closure = {
|
|
50
|
+
angle
|
|
51
|
+
};
|
|
52
|
+
chunkBVJQ3UPZJs1.__workletHash = 9664866718948;
|
|
53
|
+
chunkBVJQ3UPZJs1.__pluginVersion = "0.7.4";
|
|
54
|
+
chunkBVJQ3UPZJs1.__initData = _worklet_9664866718948_init_data;
|
|
55
|
+
chunkBVJQ3UPZJs1.__stackDetails = _e;
|
|
56
|
+
return chunkBVJQ3UPZJs1;
|
|
57
|
+
}({
|
|
58
|
+
_worklet_9664866718948_init_data,
|
|
59
|
+
angle
|
|
60
|
+
}), [angle]);
|
|
61
|
+
}
|
|
62
|
+
export { useMergedRef, usePrevious, ROTATION_DURATION, useRotation };
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import {
|
|
2
|
+
InputField,
|
|
3
|
+
useInput
|
|
4
|
+
} from "./chunk-A5OCK3C2.js";
|
|
5
|
+
import {
|
|
6
|
+
Icon
|
|
7
|
+
} from "./chunk-3FV4COTM.js";
|
|
8
|
+
import {
|
|
9
|
+
Slot,
|
|
10
|
+
createSlotContext
|
|
11
|
+
} from "./chunk-E2CWBQTV.js";
|
|
12
|
+
import {
|
|
13
|
+
useStyleProps
|
|
14
|
+
} from "./chunk-URSKA2VR.js";
|
|
15
|
+
|
|
16
|
+
// src/components/input-group/input-group-field.tsx
|
|
17
|
+
import { forwardRef, useMemo } from "react";
|
|
18
|
+
|
|
19
|
+
// src/components/input-group/input-group.context.ts
|
|
20
|
+
var [InputGroupProvider, useInputGroup] = createSlotContext("InputGroup");
|
|
21
|
+
|
|
22
|
+
// src/components/input-group/input-group.utils.ts
|
|
23
|
+
function decoratorPadding(prefixWidth, suffixWidth) {
|
|
24
|
+
const paddingStart = prefixWidth > 0 ? prefixWidth : void 0;
|
|
25
|
+
const paddingEnd = suffixWidth > 0 ? suffixWidth : void 0;
|
|
26
|
+
if (paddingStart === void 0 && paddingEnd === void 0) return void 0;
|
|
27
|
+
return { paddingStart, paddingEnd };
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// src/components/input-group/input-group-field.tsx
|
|
31
|
+
import { jsx } from "react/jsx-runtime";
|
|
32
|
+
var InputGroupField = forwardRef(
|
|
33
|
+
function InputGroupField2({ style, ...props }, ref) {
|
|
34
|
+
const { prefixWidth, suffixWidth } = useInputGroup();
|
|
35
|
+
const padding = useMemo(
|
|
36
|
+
() => decoratorPadding(prefixWidth, suffixWidth),
|
|
37
|
+
[prefixWidth, suffixWidth]
|
|
38
|
+
);
|
|
39
|
+
return /* @__PURE__ */ jsx(InputField, { ref, ...props, style: [padding, style] });
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
InputGroupField.displayName = "XAUI.InputGroup.Field";
|
|
43
|
+
|
|
44
|
+
// src/components/input-group/input-group-icon.tsx
|
|
45
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
46
|
+
function InputGroupIcon({ size, color, ...rest }) {
|
|
47
|
+
const { icon } = useInput();
|
|
48
|
+
return /* @__PURE__ */ jsx2(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
|
|
49
|
+
}
|
|
50
|
+
InputGroupIcon.displayName = "XAUI.InputGroup.Icon";
|
|
51
|
+
|
|
52
|
+
// src/components/input-group/input-group-prefix.tsx
|
|
53
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
54
|
+
|
|
55
|
+
// src/components/input-group/input-group-decorator.tsx
|
|
56
|
+
import { forwardRef as forwardRef2, useCallback } from "react";
|
|
57
|
+
import { View } from "react-native";
|
|
58
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
59
|
+
var InputGroupDecorator = forwardRef2(
|
|
60
|
+
function InputGroupDecorator2({ side, children, isDecorative = false, onLayout, style, ...props }, ref) {
|
|
61
|
+
const { prefixStyle, suffixStyle, isDisabled } = useInput();
|
|
62
|
+
const { setPrefixWidth, setSuffixWidth } = useInputGroup();
|
|
63
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
64
|
+
const report = side === "prefix" ? setPrefixWidth : setSuffixWidth;
|
|
65
|
+
const handleLayout = useCallback(
|
|
66
|
+
(event) => {
|
|
67
|
+
report(event.nativeEvent.layout.width);
|
|
68
|
+
onLayout?.(event);
|
|
69
|
+
},
|
|
70
|
+
[report, onLayout]
|
|
71
|
+
);
|
|
72
|
+
const isInert = isDecorative || isDisabled;
|
|
73
|
+
return /* @__PURE__ */ jsx3(
|
|
74
|
+
View,
|
|
75
|
+
{
|
|
76
|
+
ref,
|
|
77
|
+
accessibilityElementsHidden: isDecorative || void 0,
|
|
78
|
+
importantForAccessibility: isDecorative ? "no-hide-descendants" : void 0,
|
|
79
|
+
pointerEvents: isInert ? "none" : void 0,
|
|
80
|
+
...rest,
|
|
81
|
+
style: [side === "prefix" ? prefixStyle : suffixStyle, styleProps, style],
|
|
82
|
+
onLayout: handleLayout,
|
|
83
|
+
children
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
InputGroupDecorator.displayName = "XAUI.InputGroup.Decorator";
|
|
89
|
+
|
|
90
|
+
// src/components/input-group/input-group-prefix.tsx
|
|
91
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
92
|
+
var InputGroupPrefix = forwardRef3(
|
|
93
|
+
function InputGroupPrefix2(props, ref) {
|
|
94
|
+
return /* @__PURE__ */ jsx4(InputGroupDecorator, { ref, side: "prefix", ...props });
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
InputGroupPrefix.displayName = "XAUI.InputGroup.Prefix";
|
|
98
|
+
|
|
99
|
+
// src/components/input-group/input-group-suffix.tsx
|
|
100
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
101
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
102
|
+
var InputGroupSuffix = forwardRef4(
|
|
103
|
+
function InputGroupSuffix2(props, ref) {
|
|
104
|
+
return /* @__PURE__ */ jsx5(InputGroupDecorator, { ref, side: "suffix", ...props });
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
InputGroupSuffix.displayName = "XAUI.InputGroup.Suffix";
|
|
108
|
+
|
|
109
|
+
// src/components/input-group/input-group.tsx
|
|
110
|
+
import { forwardRef as forwardRef5, useMemo as useMemo2, useState } from "react";
|
|
111
|
+
import { View as View2 } from "react-native";
|
|
112
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
113
|
+
var InputGroupRoot = forwardRef5(function InputGroup({ children, asChild = false, style, ...props }, ref) {
|
|
114
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
115
|
+
const [prefixWidth, setPrefixWidth] = useState(0);
|
|
116
|
+
const [suffixWidth, setSuffixWidth] = useState(0);
|
|
117
|
+
const context = useMemo2(
|
|
118
|
+
() => ({ prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
|
|
119
|
+
[prefixWidth, suffixWidth]
|
|
120
|
+
);
|
|
121
|
+
const rootStyle = [styleProps, style];
|
|
122
|
+
const surface = asChild ? (
|
|
123
|
+
// R12 — the caller's element *is* the row.
|
|
124
|
+
/* @__PURE__ */ jsx6(Slot, { ref, ...rest, style: rootStyle, children })
|
|
125
|
+
) : /* @__PURE__ */ jsx6(View2, { ref, ...rest, style: rootStyle, children });
|
|
126
|
+
return /* @__PURE__ */ jsx6(InputGroupProvider, { value: context, children: surface });
|
|
127
|
+
});
|
|
128
|
+
InputGroupRoot.displayName = "XAUI.InputGroup.Root";
|
|
129
|
+
|
|
130
|
+
// src/components/input-group/index.ts
|
|
131
|
+
var InputGroup2 = Object.assign(InputGroupRoot, {
|
|
132
|
+
Prefix: InputGroupPrefix,
|
|
133
|
+
Field: InputGroupField,
|
|
134
|
+
Suffix: InputGroupSuffix,
|
|
135
|
+
Icon: InputGroupIcon
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
export {
|
|
139
|
+
useInputGroup,
|
|
140
|
+
decoratorPadding,
|
|
141
|
+
InputGroupField,
|
|
142
|
+
InputGroupIcon,
|
|
143
|
+
InputGroupPrefix,
|
|
144
|
+
InputGroupSuffix,
|
|
145
|
+
InputGroupRoot,
|
|
146
|
+
InputGroup2 as InputGroup
|
|
147
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import {
|
|
2
|
+
mergeRefs
|
|
3
|
+
} from "./chunk-URSKA2VR.js";
|
|
4
|
+
|
|
5
|
+
// src/system/slot/create-slot-context.ts
|
|
6
|
+
import { createContext, useContext } from "react";
|
|
7
|
+
function createSlotContext(name) {
|
|
8
|
+
const Context = createContext(null);
|
|
9
|
+
Context.displayName = `XAUI.${name}.Context`;
|
|
10
|
+
function useSlotContext() {
|
|
11
|
+
const value = useContext(Context);
|
|
12
|
+
if (value === null) {
|
|
13
|
+
const error = new Error(
|
|
14
|
+
`XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
|
|
15
|
+
);
|
|
16
|
+
Error.captureStackTrace?.(
|
|
17
|
+
error,
|
|
18
|
+
useSlotContext
|
|
19
|
+
);
|
|
20
|
+
throw error;
|
|
21
|
+
}
|
|
22
|
+
return value;
|
|
23
|
+
}
|
|
24
|
+
return [Context.Provider, useSlotContext];
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// src/system/slot/merge-props.ts
|
|
28
|
+
var EVENT_HANDLER = /^on[A-Z]/;
|
|
29
|
+
function mergeProps(ours, theirs) {
|
|
30
|
+
const merged = { ...ours };
|
|
31
|
+
for (const key of Object.keys(theirs)) {
|
|
32
|
+
const ourValue = ours[key];
|
|
33
|
+
const theirValue = theirs[key];
|
|
34
|
+
if (EVENT_HANDLER.test(key)) {
|
|
35
|
+
merged[key] = composeHandlers(ourValue, theirValue);
|
|
36
|
+
} else if (key === "style") {
|
|
37
|
+
merged[key] = mergeStyles(ourValue, theirValue);
|
|
38
|
+
} else if (key === "ref") {
|
|
39
|
+
merged[key] = mergeRefs(
|
|
40
|
+
ourValue,
|
|
41
|
+
theirValue
|
|
42
|
+
);
|
|
43
|
+
} else {
|
|
44
|
+
merged[key] = theirValue;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return merged;
|
|
48
|
+
}
|
|
49
|
+
function composeHandlers(ours, theirs) {
|
|
50
|
+
if (typeof ours !== "function") return theirs;
|
|
51
|
+
if (typeof theirs !== "function") return ours;
|
|
52
|
+
return (...args) => {
|
|
53
|
+
;
|
|
54
|
+
ours(...args);
|
|
55
|
+
return theirs(...args);
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
function mergeStyles(ours, theirs) {
|
|
59
|
+
if (typeof ours === "function" || typeof theirs === "function") {
|
|
60
|
+
return (state) => [
|
|
61
|
+
resolveStyle(ours, state),
|
|
62
|
+
resolveStyle(theirs, state)
|
|
63
|
+
];
|
|
64
|
+
}
|
|
65
|
+
return [ours, theirs];
|
|
66
|
+
}
|
|
67
|
+
function resolveStyle(style, state) {
|
|
68
|
+
return typeof style === "function" ? style(state) : style;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// src/system/slot/slot.tsx
|
|
72
|
+
import { cloneElement, forwardRef, isValidElement } from "react";
|
|
73
|
+
var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
|
|
74
|
+
if (!isValidElement(children)) {
|
|
75
|
+
throw new Error(
|
|
76
|
+
"XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
const child = children;
|
|
80
|
+
const merged = mergeProps(ours, child.props);
|
|
81
|
+
merged.ref = mergeRefs(ref, refOf(child));
|
|
82
|
+
return cloneElement(child, merged);
|
|
83
|
+
});
|
|
84
|
+
Slot.displayName = "XAUI.Slot";
|
|
85
|
+
function refOf(element) {
|
|
86
|
+
const fromProps = element.props.ref;
|
|
87
|
+
const fromElement = element.ref;
|
|
88
|
+
return fromProps ?? fromElement;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// src/system/slot/children-to-string.ts
|
|
92
|
+
import { isValidElement as isValidElement2 } from "react";
|
|
93
|
+
function childrenToString(children) {
|
|
94
|
+
const text = stringify(children);
|
|
95
|
+
return text === null || text === "" ? null : text;
|
|
96
|
+
}
|
|
97
|
+
function stringify(node) {
|
|
98
|
+
if (node === null || node === void 0 || typeof node === "boolean") return "";
|
|
99
|
+
if (typeof node === "string") return node;
|
|
100
|
+
if (typeof node === "number") return String(node);
|
|
101
|
+
if (isValidElement2(node)) return null;
|
|
102
|
+
if (Array.isArray(node)) {
|
|
103
|
+
let text = "";
|
|
104
|
+
for (const child of node) {
|
|
105
|
+
const part = stringify(child);
|
|
106
|
+
if (part === null) return null;
|
|
107
|
+
text += part;
|
|
108
|
+
}
|
|
109
|
+
return text;
|
|
110
|
+
}
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
export {
|
|
115
|
+
createSlotContext,
|
|
116
|
+
mergeProps,
|
|
117
|
+
Slot,
|
|
118
|
+
childrenToString
|
|
119
|
+
};
|
|
@@ -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 _chunkWR7YLDVVcjs = require('./chunk-WR7YLDVV.cjs');
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.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;
|