@xaui/native 0.9.1-alpha.28 → 0.9.1-alpha.29
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-3JATAB7S.js → chunk-4GTAZM2C.js} +4 -2
- package/dist/{chunk-N4UJYDOW.js → chunk-5RFRASSB.js} +20 -18
- package/dist/{chunk-V2FQN6ZK.js → chunk-7BOFQN2G.js} +1 -1
- package/dist/{chunk-5OXZIZRZ.cjs → chunk-APONC4DB.cjs} +7 -7
- package/dist/{chunk-6FBGCF5T.cjs → chunk-AQNWXJYV.cjs} +2 -2
- package/dist/chunk-BA2DBSAN.js +102 -0
- package/dist/{chunk-TR2TGPDQ.js → chunk-D4SOU26X.js} +1 -1
- package/dist/{chunk-CQRUNV6S.cjs → chunk-E25JH7W2.cjs} +17 -17
- package/dist/{chunk-V6DGGDHF.cjs → chunk-F3H4TXAY.cjs} +5 -5
- package/dist/chunk-F6CQ6CBI.cjs +112 -0
- package/dist/{chunk-ZTA47PO5.js → chunk-FDSQOPJH.js} +1 -1
- package/dist/{chunk-JCKVYYZO.cjs → chunk-FFEUGWVA.cjs} +3 -3
- package/dist/{chunk-YXVKQMCK.cjs → chunk-FNEUOBCV.cjs} +4 -2
- package/dist/{chunk-Y7U6ACMB.cjs → chunk-FXHRNUCS.cjs} +2 -2
- package/dist/{chunk-J4JFIC4W.cjs → chunk-GCU5A5MM.cjs} +3 -3
- package/dist/{chunk-G52TQJBI.js → chunk-HOIQRGSK.js} +1 -1
- package/dist/chunk-L3Q5TVYE.js +659 -0
- package/dist/{chunk-WEMZ4VMC.js → chunk-NG4GFBDR.js} +1 -1
- package/dist/chunk-O5KDIEDH.cjs +735 -0
- package/dist/chunk-RZC4VFB5.cjs +698 -0
- package/dist/{chunk-5A4M6X5B.cjs → chunk-SVRZJEDU.cjs} +5 -5
- package/dist/{chunk-3LKGVKQY.cjs → chunk-TFNB2PNI.cjs} +4 -4
- package/dist/{chunk-3YN7JQ55.js → chunk-V3KS5PPK.js} +2 -2
- package/dist/{chunk-AXSJPWSJ.js → chunk-V56334S3.js} +1 -1
- package/dist/{chunk-EHARM2EN.js → chunk-VUEDYW3M.js} +1 -1
- package/dist/{chunk-LKB3RIR2.js → chunk-XYFMSRNJ.js} +2 -2
- package/dist/{chunk-56KVKM27.js → chunk-YGOXQSNU.js} +15 -15
- package/dist/{chunk-H7DVR52Z.cjs → chunk-YWBTIWT5.cjs} +3 -3
- package/dist/components/alert/index.cjs +3 -3
- package/dist/components/alert/index.js +2 -2
- package/dist/components/button/index.cjs +3 -3
- package/dist/components/button/index.js +2 -2
- package/dist/components/card/index.cjs +3 -3
- package/dist/components/card/index.js +2 -2
- package/dist/components/checkbox/index.cjs +4 -4
- package/dist/components/checkbox/index.js +3 -3
- package/dist/components/chip/index.cjs +3 -3
- package/dist/components/chip/index.js +2 -2
- package/dist/components/input/index.cjs +3 -3
- package/dist/components/input/index.js +2 -2
- package/dist/components/input-group/index.cjs +4 -4
- package/dist/components/input-group/index.js +3 -3
- package/dist/components/input-otp/index.cjs +3 -3
- package/dist/components/input-otp/index.js +2 -2
- package/dist/components/radio/index.cjs +4 -4
- package/dist/components/radio/index.js +3 -3
- package/dist/components/switch/index.cjs +25 -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 +25 -0
- package/dist/components/text-area/index.cjs +4 -4
- package/dist/components/text-area/index.js +3 -3
- package/dist/components/typography/index.cjs +3 -3
- package/dist/components/typography/index.js +2 -2
- package/dist/index.cjs +30 -14
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +29 -13
- package/dist/system/index.cjs +3 -3
- package/dist/system/index.d.cts +13 -1
- package/dist/system/index.d.ts +13 -1
- package/dist/system/index.js +2 -2
- package/package.json +11 -1
- package/dist/chunk-63TWVWHG.cjs +0 -584
- package/dist/chunk-E6EFYPJR.cjs +0 -41
- package/dist/chunk-EYJEUXXC.js +0 -98
|
@@ -0,0 +1,659 @@
|
|
|
1
|
+
import { useControllableState } from "./chunk-F6W3JQ7K.js";
|
|
2
|
+
import { PressableFeedback, usePressState } from "./chunk-4HELPMAK.js";
|
|
3
|
+
import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
|
|
4
|
+
import { childrenToString, createSlotContext, useStyleProps } from "./chunk-PMO62QK4.js";
|
|
5
|
+
import { useXAUITheme } from "./chunk-A3EGFI6T.js";
|
|
6
|
+
|
|
7
|
+
// src/components/switch/switch-label.tsx
|
|
8
|
+
import { forwardRef } from "react";
|
|
9
|
+
import { Text } from "react-native";
|
|
10
|
+
|
|
11
|
+
// src/components/switch/switch.context.ts
|
|
12
|
+
var [SwitchProvider, useSwitch] = createSlotContext("Switch");
|
|
13
|
+
|
|
14
|
+
// src/components/switch/switch-label.tsx
|
|
15
|
+
import { jsx } from "react/jsx-runtime";
|
|
16
|
+
var SwitchLabel = forwardRef(function SwitchLabel2({
|
|
17
|
+
children,
|
|
18
|
+
style,
|
|
19
|
+
...props
|
|
20
|
+
}, ref) {
|
|
21
|
+
const {
|
|
22
|
+
labelStyle
|
|
23
|
+
} = useSwitch();
|
|
24
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
25
|
+
return /* @__PURE__ */jsx(Text, {
|
|
26
|
+
ref,
|
|
27
|
+
style: [labelStyle, styleProps, style],
|
|
28
|
+
...rest,
|
|
29
|
+
children
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
SwitchLabel.displayName = "XAUI.Switch.Label";
|
|
33
|
+
|
|
34
|
+
// src/components/switch/switch-thumb.tsx
|
|
35
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
36
|
+
import { I18nManager, View } from "react-native";
|
|
37
|
+
import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
|
|
38
|
+
|
|
39
|
+
// src/components/switch/switch.style.ts
|
|
40
|
+
var SWITCH_DURATION = 175;
|
|
41
|
+
|
|
42
|
+
// src/components/switch/switch-thumb.tsx
|
|
43
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
44
|
+
var SwitchThumb = forwardRef2(function SwitchThumb2({
|
|
45
|
+
children,
|
|
46
|
+
animation = true,
|
|
47
|
+
style,
|
|
48
|
+
...props
|
|
49
|
+
}, ref) {
|
|
50
|
+
const {
|
|
51
|
+
thumbStyle,
|
|
52
|
+
thumb,
|
|
53
|
+
travel,
|
|
54
|
+
isSelected
|
|
55
|
+
} = useSwitch();
|
|
56
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
57
|
+
const base = [thumbStyle, styleProps, style];
|
|
58
|
+
const distance = I18nManager.isRTL ? -travel : travel;
|
|
59
|
+
if (!animation) {
|
|
60
|
+
return /* @__PURE__ */jsx2(View, {
|
|
61
|
+
ref,
|
|
62
|
+
...rest,
|
|
63
|
+
style: [base, {
|
|
64
|
+
backgroundColor: isSelected ? thumb.on : thumb.off,
|
|
65
|
+
transform: [{
|
|
66
|
+
translateX: isSelected ? distance : 0
|
|
67
|
+
}]
|
|
68
|
+
}],
|
|
69
|
+
children
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
return /* @__PURE__ */jsx2(SlidingThumb, {
|
|
73
|
+
ref,
|
|
74
|
+
style: base,
|
|
75
|
+
colors: thumb,
|
|
76
|
+
distance,
|
|
77
|
+
isSelected,
|
|
78
|
+
...rest,
|
|
79
|
+
children
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
SwitchThumb.displayName = "XAUI.Switch.Thumb";
|
|
83
|
+
const _worklet_17160884480018_init_data = {
|
|
84
|
+
code: "function chunkL3Q5TVYEJs1(){const{withTiming,isSelected,SWITCH_DURATION}=this.__closure;return withTiming(isSelected?1:0,{duration:SWITCH_DURATION});}",
|
|
85
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js",
|
|
86
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkL3Q5TVYEJs1\",\"withTiming\",\"isSelected\",\"SWITCH_DURATION\",\"__closure\",\"duration\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js\"],\"mappings\":\"AAwFmC,SAAAA,gBAAMA,CAAA,QAAAC,UAAA,CAAAC,UAAA,CAAAC,eAAA,OAAAC,SAAA,CAErC,MAAO,CAAAH,UAAU,CAACC,UAAU,CAAG,CAAC,CAAG,CAAC,CAAE,CAAEG,QAAQ,CAAEF,eAAgB,CAAC,CAAC,CACtE\",\"ignoreList\":[]}"
|
|
87
|
+
};
|
|
88
|
+
const _worklet_17348188710512_init_data = {
|
|
89
|
+
code: "function chunkL3Q5TVYEJs2(){const{progress,distance,interpolateColor,colors}=this.__closure;return{transform:[{translateX:progress.value*distance}],backgroundColor:interpolateColor(progress.value,[0,1],[colors.off,colors.on])};}",
|
|
90
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js",
|
|
91
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkL3Q5TVYEJs2\",\"progress\",\"distance\",\"interpolateColor\",\"colors\",\"__closure\",\"transform\",\"translateX\",\"value\",\"backgroundColor\",\"off\",\"on\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js\"],\"mappings\":\"AA4FyC,SAAAA,gBAAMA,CAAA,QAAAC,QAAA,CAAAC,QAAA,CAAAC,gBAAA,CAAAC,MAAA,OAAAC,SAAA,CAE3C,MAAO,CACLC,SAAS,CAAE,CAAC,CAAEC,UAAU,CAAEN,QAAQ,CAACO,KAAK,CAAGN,QAAS,CAAC,CAAC,CACtDO,eAAe,CAAEN,gBAAgB,CAC/BF,QAAQ,CAACO,KAAK,CACd,CAAC,CAAC,CAAE,CAAC,CAAC,CACN,CAACJ,MAAM,CAACM,GAAG,CAAEN,MAAM,CAACO,EAAE,CACxB,CACF,CAAC,CACH\",\"ignoreList\":[]}"
|
|
92
|
+
};
|
|
93
|
+
var SlidingThumb = forwardRef2(function SlidingThumb2({
|
|
94
|
+
style,
|
|
95
|
+
colors,
|
|
96
|
+
distance,
|
|
97
|
+
isSelected,
|
|
98
|
+
children,
|
|
99
|
+
...rest
|
|
100
|
+
}, ref) {
|
|
101
|
+
const progress = useDerivedValue(function chunkL3Q5TVYEJs1Factory({
|
|
102
|
+
_worklet_17160884480018_init_data,
|
|
103
|
+
withTiming,
|
|
104
|
+
isSelected,
|
|
105
|
+
SWITCH_DURATION
|
|
106
|
+
}) {
|
|
107
|
+
const _e = [new global.Error(), -4, -27];
|
|
108
|
+
const chunkL3Q5TVYEJs1 = function () {
|
|
109
|
+
return withTiming(isSelected ? 1 : 0, {
|
|
110
|
+
duration: SWITCH_DURATION
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
chunkL3Q5TVYEJs1.__closure = {
|
|
114
|
+
withTiming,
|
|
115
|
+
isSelected,
|
|
116
|
+
SWITCH_DURATION
|
|
117
|
+
};
|
|
118
|
+
chunkL3Q5TVYEJs1.__workletHash = 17160884480018;
|
|
119
|
+
chunkL3Q5TVYEJs1.__pluginVersion = "0.7.4";
|
|
120
|
+
chunkL3Q5TVYEJs1.__initData = _worklet_17160884480018_init_data;
|
|
121
|
+
chunkL3Q5TVYEJs1.__stackDetails = _e;
|
|
122
|
+
return chunkL3Q5TVYEJs1;
|
|
123
|
+
}({
|
|
124
|
+
_worklet_17160884480018_init_data,
|
|
125
|
+
withTiming,
|
|
126
|
+
isSelected,
|
|
127
|
+
SWITCH_DURATION
|
|
128
|
+
}), [isSelected]);
|
|
129
|
+
const animatedStyle = useAnimatedStyle(function chunkL3Q5TVYEJs2Factory({
|
|
130
|
+
_worklet_17348188710512_init_data,
|
|
131
|
+
progress,
|
|
132
|
+
distance,
|
|
133
|
+
interpolateColor,
|
|
134
|
+
colors
|
|
135
|
+
}) {
|
|
136
|
+
const _e = [new global.Error(), -5, -27];
|
|
137
|
+
const chunkL3Q5TVYEJs2 = function () {
|
|
138
|
+
return {
|
|
139
|
+
transform: [{
|
|
140
|
+
translateX: progress.value * distance
|
|
141
|
+
}],
|
|
142
|
+
backgroundColor: interpolateColor(progress.value, [0, 1], [colors.off, colors.on])
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
chunkL3Q5TVYEJs2.__closure = {
|
|
146
|
+
progress,
|
|
147
|
+
distance,
|
|
148
|
+
interpolateColor,
|
|
149
|
+
colors
|
|
150
|
+
};
|
|
151
|
+
chunkL3Q5TVYEJs2.__workletHash = 17348188710512;
|
|
152
|
+
chunkL3Q5TVYEJs2.__pluginVersion = "0.7.4";
|
|
153
|
+
chunkL3Q5TVYEJs2.__initData = _worklet_17348188710512_init_data;
|
|
154
|
+
chunkL3Q5TVYEJs2.__stackDetails = _e;
|
|
155
|
+
return chunkL3Q5TVYEJs2;
|
|
156
|
+
}({
|
|
157
|
+
_worklet_17348188710512_init_data,
|
|
158
|
+
progress,
|
|
159
|
+
distance,
|
|
160
|
+
interpolateColor,
|
|
161
|
+
colors
|
|
162
|
+
}), [progress, distance, colors.off, colors.on]);
|
|
163
|
+
return /* @__PURE__ */jsx2(Animated.View, {
|
|
164
|
+
ref,
|
|
165
|
+
...rest,
|
|
166
|
+
style: [style, animatedStyle],
|
|
167
|
+
children
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
|
|
171
|
+
// src/components/switch/switch-track.tsx
|
|
172
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
173
|
+
import { View as View2 } from "react-native";
|
|
174
|
+
import Animated2, { interpolateColor as interpolateColor2, useAnimatedStyle as useAnimatedStyle2, useDerivedValue as useDerivedValue2, withTiming as withTiming2 } from "react-native-reanimated";
|
|
175
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
176
|
+
var SwitchTrack = forwardRef3(function SwitchTrack2({
|
|
177
|
+
children,
|
|
178
|
+
animation = true,
|
|
179
|
+
style,
|
|
180
|
+
...props
|
|
181
|
+
}, ref) {
|
|
182
|
+
const {
|
|
183
|
+
trackStyle,
|
|
184
|
+
track,
|
|
185
|
+
isSelected
|
|
186
|
+
} = useSwitch();
|
|
187
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
188
|
+
const base = [trackStyle, styleProps, style];
|
|
189
|
+
if (!animation) {
|
|
190
|
+
return /* @__PURE__ */jsx3(View2, {
|
|
191
|
+
ref,
|
|
192
|
+
...rest,
|
|
193
|
+
style: [base, {
|
|
194
|
+
backgroundColor: isSelected ? track.on : track.off
|
|
195
|
+
}],
|
|
196
|
+
children
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
return /* @__PURE__ */jsx3(CrossfadingTrack, {
|
|
200
|
+
ref,
|
|
201
|
+
style: base,
|
|
202
|
+
colors: track,
|
|
203
|
+
isSelected,
|
|
204
|
+
...rest,
|
|
205
|
+
children
|
|
206
|
+
});
|
|
207
|
+
});
|
|
208
|
+
SwitchTrack.displayName = "XAUI.Switch.Track";
|
|
209
|
+
const _worklet_3163804062864_init_data = {
|
|
210
|
+
code: "function chunkL3Q5TVYEJs3(){const{withTiming2,isSelected,SWITCH_DURATION}=this.__closure;return withTiming2(isSelected?1:0,{duration:SWITCH_DURATION});}",
|
|
211
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js",
|
|
212
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkL3Q5TVYEJs3\",\"withTiming2\",\"isSelected\",\"SWITCH_DURATION\",\"__closure\",\"duration\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js\"],\"mappings\":\"AAiJoC,SAAAA,gBAAMA,CAAA,QAAAC,WAAA,CAAAC,UAAA,CAAAC,eAAA,OAAAC,SAAA,CAEtC,MAAO,CAAAH,WAAW,CAACC,UAAU,CAAG,CAAC,CAAG,CAAC,CAAE,CAAEG,QAAQ,CAAEF,eAAgB,CAAC,CAAC,CACvE\",\"ignoreList\":[]}"
|
|
213
|
+
};
|
|
214
|
+
const _worklet_512235081398_init_data = {
|
|
215
|
+
code: "function chunkL3Q5TVYEJs4(){const{interpolateColor2,progress,colors}=this.__closure;return{backgroundColor:interpolateColor2(progress.value,[0,1],[colors.off,colors.on])};}",
|
|
216
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js",
|
|
217
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkL3Q5TVYEJs4\",\"interpolateColor2\",\"progress\",\"colors\",\"__closure\",\"backgroundColor\",\"value\",\"off\",\"on\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-L3Q5TVYE.js\"],\"mappings\":\"AAqJ0C,SAAAA,gBAAMA,CAAA,QAAAC,iBAAA,CAAAC,QAAA,CAAAC,MAAA,OAAAC,SAAA,CAE5C,MAAO,CACLC,eAAe,CAAEJ,iBAAiB,CAChCC,QAAQ,CAACI,KAAK,CACd,CAAC,CAAC,CAAE,CAAC,CAAC,CACN,CAACH,MAAM,CAACI,GAAG,CAAEJ,MAAM,CAACK,EAAE,CACxB,CACF,CAAC,CACH\",\"ignoreList\":[]}"
|
|
218
|
+
};
|
|
219
|
+
var CrossfadingTrack = forwardRef3(function CrossfadingTrack2({
|
|
220
|
+
style,
|
|
221
|
+
colors,
|
|
222
|
+
isSelected,
|
|
223
|
+
children,
|
|
224
|
+
...rest
|
|
225
|
+
}, ref) {
|
|
226
|
+
const progress = useDerivedValue2(function chunkL3Q5TVYEJs3Factory({
|
|
227
|
+
_worklet_3163804062864_init_data,
|
|
228
|
+
withTiming2,
|
|
229
|
+
isSelected,
|
|
230
|
+
SWITCH_DURATION
|
|
231
|
+
}) {
|
|
232
|
+
const _e = [new global.Error(), -4, -27];
|
|
233
|
+
const chunkL3Q5TVYEJs3 = function () {
|
|
234
|
+
return withTiming2(isSelected ? 1 : 0, {
|
|
235
|
+
duration: SWITCH_DURATION
|
|
236
|
+
});
|
|
237
|
+
};
|
|
238
|
+
chunkL3Q5TVYEJs3.__closure = {
|
|
239
|
+
withTiming2,
|
|
240
|
+
isSelected,
|
|
241
|
+
SWITCH_DURATION
|
|
242
|
+
};
|
|
243
|
+
chunkL3Q5TVYEJs3.__workletHash = 3163804062864;
|
|
244
|
+
chunkL3Q5TVYEJs3.__pluginVersion = "0.7.4";
|
|
245
|
+
chunkL3Q5TVYEJs3.__initData = _worklet_3163804062864_init_data;
|
|
246
|
+
chunkL3Q5TVYEJs3.__stackDetails = _e;
|
|
247
|
+
return chunkL3Q5TVYEJs3;
|
|
248
|
+
}({
|
|
249
|
+
_worklet_3163804062864_init_data,
|
|
250
|
+
withTiming2,
|
|
251
|
+
isSelected,
|
|
252
|
+
SWITCH_DURATION
|
|
253
|
+
}), [isSelected]);
|
|
254
|
+
const animatedStyle = useAnimatedStyle2(function chunkL3Q5TVYEJs4Factory({
|
|
255
|
+
_worklet_512235081398_init_data,
|
|
256
|
+
interpolateColor2,
|
|
257
|
+
progress,
|
|
258
|
+
colors
|
|
259
|
+
}) {
|
|
260
|
+
const _e = [new global.Error(), -4, -27];
|
|
261
|
+
const chunkL3Q5TVYEJs4 = function () {
|
|
262
|
+
return {
|
|
263
|
+
backgroundColor: interpolateColor2(progress.value, [0, 1], [colors.off, colors.on])
|
|
264
|
+
};
|
|
265
|
+
};
|
|
266
|
+
chunkL3Q5TVYEJs4.__closure = {
|
|
267
|
+
interpolateColor2,
|
|
268
|
+
progress,
|
|
269
|
+
colors
|
|
270
|
+
};
|
|
271
|
+
chunkL3Q5TVYEJs4.__workletHash = 512235081398;
|
|
272
|
+
chunkL3Q5TVYEJs4.__pluginVersion = "0.7.4";
|
|
273
|
+
chunkL3Q5TVYEJs4.__initData = _worklet_512235081398_init_data;
|
|
274
|
+
chunkL3Q5TVYEJs4.__stackDetails = _e;
|
|
275
|
+
return chunkL3Q5TVYEJs4;
|
|
276
|
+
}({
|
|
277
|
+
_worklet_512235081398_init_data,
|
|
278
|
+
interpolateColor2,
|
|
279
|
+
progress,
|
|
280
|
+
colors
|
|
281
|
+
}), [progress, colors.off, colors.on]);
|
|
282
|
+
return /* @__PURE__ */jsx3(Animated2.View, {
|
|
283
|
+
ref,
|
|
284
|
+
...rest,
|
|
285
|
+
style: [style, animatedStyle],
|
|
286
|
+
children
|
|
287
|
+
});
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
// src/components/switch/switch.tsx
|
|
291
|
+
import { forwardRef as forwardRef4, useCallback, useMemo } from "react";
|
|
292
|
+
import { StyleSheet } from "react-native";
|
|
293
|
+
|
|
294
|
+
// src/components/switch/switch.recipe.ts
|
|
295
|
+
var SLOTS = ["root", "track", "trackSelected", "thumb", "thumbSelected", "label"];
|
|
296
|
+
var VARIANT_TOKENS = {
|
|
297
|
+
primary: {
|
|
298
|
+
bg: "default",
|
|
299
|
+
fg: "white",
|
|
300
|
+
bgSelected: "accent",
|
|
301
|
+
fgSelected: "accentForeground"
|
|
302
|
+
},
|
|
303
|
+
secondary: {
|
|
304
|
+
bg: "default",
|
|
305
|
+
fg: "white",
|
|
306
|
+
bgSelected: "accent",
|
|
307
|
+
fgSelected: "accentForeground"
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
function sizeAxis(step) {
|
|
311
|
+
const {
|
|
312
|
+
track,
|
|
313
|
+
height,
|
|
314
|
+
thumb,
|
|
315
|
+
padding,
|
|
316
|
+
gap,
|
|
317
|
+
label
|
|
318
|
+
} = step;
|
|
319
|
+
return theme => {
|
|
320
|
+
const trackHeight = theme.spacing(height);
|
|
321
|
+
const knob = theme.spacing(thumb);
|
|
322
|
+
return {
|
|
323
|
+
root: {
|
|
324
|
+
gap: theme.spacing(gap)
|
|
325
|
+
},
|
|
326
|
+
track: {
|
|
327
|
+
width: theme.spacing(track),
|
|
328
|
+
height: trackHeight
|
|
329
|
+
},
|
|
330
|
+
thumb: {
|
|
331
|
+
width: knob,
|
|
332
|
+
height: knob,
|
|
333
|
+
// `start`, never `left` (R13): the knob rests at the leading edge, and RTL mirrors
|
|
334
|
+
// the logical property and only it.
|
|
335
|
+
start: theme.spacing(padding),
|
|
336
|
+
top: (trackHeight - knob) / 2
|
|
337
|
+
},
|
|
338
|
+
label: {
|
|
339
|
+
fontSize: theme.fontSizes[label],
|
|
340
|
+
lineHeight: theme.lineHeights[label]
|
|
341
|
+
}
|
|
342
|
+
};
|
|
343
|
+
};
|
|
344
|
+
}
|
|
345
|
+
var INSIDE = {
|
|
346
|
+
sm: {
|
|
347
|
+
track: 11,
|
|
348
|
+
height: 6.5,
|
|
349
|
+
thumb: 5,
|
|
350
|
+
padding: 0.75,
|
|
351
|
+
gap: 2,
|
|
352
|
+
label: "sm"
|
|
353
|
+
},
|
|
354
|
+
md: {
|
|
355
|
+
track: 12,
|
|
356
|
+
height: 7,
|
|
357
|
+
thumb: 5.5,
|
|
358
|
+
padding: 0.75,
|
|
359
|
+
gap: 2,
|
|
360
|
+
label: "md"
|
|
361
|
+
},
|
|
362
|
+
lg: {
|
|
363
|
+
track: 14,
|
|
364
|
+
height: 8,
|
|
365
|
+
thumb: 6.5,
|
|
366
|
+
padding: 0.75,
|
|
367
|
+
gap: 2.5,
|
|
368
|
+
label: "lg"
|
|
369
|
+
}
|
|
370
|
+
};
|
|
371
|
+
var OVERLAP = {
|
|
372
|
+
sm: {
|
|
373
|
+
track: 11,
|
|
374
|
+
height: 4.5,
|
|
375
|
+
thumb: 6,
|
|
376
|
+
padding: 0,
|
|
377
|
+
gap: 2,
|
|
378
|
+
label: "sm"
|
|
379
|
+
},
|
|
380
|
+
md: {
|
|
381
|
+
track: 12,
|
|
382
|
+
height: 4.5,
|
|
383
|
+
thumb: 6.5,
|
|
384
|
+
padding: 0,
|
|
385
|
+
gap: 2,
|
|
386
|
+
label: "md"
|
|
387
|
+
},
|
|
388
|
+
lg: {
|
|
389
|
+
track: 14,
|
|
390
|
+
height: 5,
|
|
391
|
+
thumb: 7.5,
|
|
392
|
+
padding: 0,
|
|
393
|
+
gap: 2.5,
|
|
394
|
+
label: "lg"
|
|
395
|
+
}
|
|
396
|
+
};
|
|
397
|
+
var switchRecipe = createRecipe({
|
|
398
|
+
slots: SLOTS,
|
|
399
|
+
base: theme => ({
|
|
400
|
+
root: {
|
|
401
|
+
flexDirection: "row",
|
|
402
|
+
alignItems: "center",
|
|
403
|
+
alignSelf: "flex-start"
|
|
404
|
+
},
|
|
405
|
+
track: {
|
|
406
|
+
borderRadius: theme.radius.full,
|
|
407
|
+
borderCurve: "continuous",
|
|
408
|
+
// Never `hidden`: on `secondary` the thumb stands outside the track, and clipping it
|
|
409
|
+
// would cut the knob in half rather than let it overlap.
|
|
410
|
+
overflow: "visible"
|
|
411
|
+
},
|
|
412
|
+
thumb: {
|
|
413
|
+
position: "absolute",
|
|
414
|
+
borderRadius: theme.radius.full,
|
|
415
|
+
alignItems: "center",
|
|
416
|
+
justifyContent: "center",
|
|
417
|
+
// The knob is the thing that moves, and a shadow is what says so.
|
|
418
|
+
...theme.shadows.field
|
|
419
|
+
},
|
|
420
|
+
label: {
|
|
421
|
+
fontFamily: theme.fontFamilies.body,
|
|
422
|
+
color: theme.colors.foreground
|
|
423
|
+
}
|
|
424
|
+
}),
|
|
425
|
+
variantTokens: VARIANT_TOKENS,
|
|
426
|
+
/**
|
|
427
|
+
* Four colours on four slots, and the two `*Selected` ones exist to be **flattened into
|
|
428
|
+
* values** rather than rendered: the track crosses from one to the other and the thumb
|
|
429
|
+
* with it, which is an interpolation on the UI thread rather than a style swap.
|
|
430
|
+
*
|
|
431
|
+
* They are roles for the reason the `Checkbox`'s are: the tint pass re-runs `paint` and
|
|
432
|
+
* never the axes, so this is what makes `color` the colour the switch turns on to.
|
|
433
|
+
*/
|
|
434
|
+
paint: (_theme, colors) => ({
|
|
435
|
+
track: {
|
|
436
|
+
backgroundColor: colors.bg
|
|
437
|
+
},
|
|
438
|
+
trackSelected: {
|
|
439
|
+
backgroundColor: colors.bgSelected
|
|
440
|
+
},
|
|
441
|
+
thumb: {
|
|
442
|
+
backgroundColor: colors.fg
|
|
443
|
+
},
|
|
444
|
+
thumbSelected: {
|
|
445
|
+
backgroundColor: colors.fgSelected
|
|
446
|
+
}
|
|
447
|
+
}),
|
|
448
|
+
variants: {
|
|
449
|
+
/**
|
|
450
|
+
* Declared and empty, which is unusual and deliberate: **every** number of this
|
|
451
|
+
* component depends on the shape as well as the size, so the whole table lives in the
|
|
452
|
+
* compounds below. The axis is here because the selection needs it to be typed, and
|
|
453
|
+
* because a reader looking for "what does `size` do" should find the answer next to
|
|
454
|
+
* the other axes rather than infer it from an absence.
|
|
455
|
+
*/
|
|
456
|
+
size: {
|
|
457
|
+
sm: () => ({}),
|
|
458
|
+
md: () => ({}),
|
|
459
|
+
lg: () => ({})
|
|
460
|
+
},
|
|
461
|
+
/**
|
|
462
|
+
* Both, always together: a track that lost its capsule while the knob kept its circle
|
|
463
|
+
* is a control rounded by halves. The knob's corner is the same named value rather
|
|
464
|
+
* than the track's less the padding — that nesting rule reaches zero before the outer
|
|
465
|
+
* radius does, and a sharp knob inside a slightly rounded track looks like a mistake.
|
|
466
|
+
*/
|
|
467
|
+
radius: radiusAxis("track", "thumb")
|
|
468
|
+
},
|
|
469
|
+
/** The six geometries — two shapes, three sizes — and nothing else. */
|
|
470
|
+
compoundVariants: [{
|
|
471
|
+
when: {
|
|
472
|
+
variant: "primary",
|
|
473
|
+
size: "sm"
|
|
474
|
+
},
|
|
475
|
+
style: sizeAxis(INSIDE.sm)
|
|
476
|
+
}, {
|
|
477
|
+
when: {
|
|
478
|
+
variant: "primary",
|
|
479
|
+
size: "md"
|
|
480
|
+
},
|
|
481
|
+
style: sizeAxis(INSIDE.md)
|
|
482
|
+
}, {
|
|
483
|
+
when: {
|
|
484
|
+
variant: "primary",
|
|
485
|
+
size: "lg"
|
|
486
|
+
},
|
|
487
|
+
style: sizeAxis(INSIDE.lg)
|
|
488
|
+
}, {
|
|
489
|
+
when: {
|
|
490
|
+
variant: "secondary",
|
|
491
|
+
size: "sm"
|
|
492
|
+
},
|
|
493
|
+
style: sizeAxis(OVERLAP.sm)
|
|
494
|
+
}, {
|
|
495
|
+
when: {
|
|
496
|
+
variant: "secondary",
|
|
497
|
+
size: "md"
|
|
498
|
+
},
|
|
499
|
+
style: sizeAxis(OVERLAP.md)
|
|
500
|
+
}, {
|
|
501
|
+
when: {
|
|
502
|
+
variant: "secondary",
|
|
503
|
+
size: "lg"
|
|
504
|
+
},
|
|
505
|
+
style: sizeAxis(OVERLAP.lg)
|
|
506
|
+
}],
|
|
507
|
+
states: {
|
|
508
|
+
disabled: theme => ({
|
|
509
|
+
root: {
|
|
510
|
+
opacity: theme.opacity.disabled
|
|
511
|
+
}
|
|
512
|
+
})
|
|
513
|
+
},
|
|
514
|
+
defaultVariants: {
|
|
515
|
+
variant: "primary",
|
|
516
|
+
size: "md"
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
// src/components/switch/switch.tsx
|
|
521
|
+
import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
522
|
+
var SwitchRoot = forwardRef4(function Switch({
|
|
523
|
+
children,
|
|
524
|
+
variant,
|
|
525
|
+
size,
|
|
526
|
+
radius,
|
|
527
|
+
color,
|
|
528
|
+
isSelected,
|
|
529
|
+
defaultSelected = false,
|
|
530
|
+
onSelectedChange,
|
|
531
|
+
isDisabled = false,
|
|
532
|
+
asChild = false,
|
|
533
|
+
accessibilityRole,
|
|
534
|
+
accessibilityState,
|
|
535
|
+
animation,
|
|
536
|
+
style,
|
|
537
|
+
onPress,
|
|
538
|
+
onPressIn,
|
|
539
|
+
onPressOut,
|
|
540
|
+
...props
|
|
541
|
+
}, ref) {
|
|
542
|
+
const theme = useXAUITheme();
|
|
543
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
544
|
+
const [isPressed, press] = usePressState({
|
|
545
|
+
onPressIn,
|
|
546
|
+
onPressOut
|
|
547
|
+
});
|
|
548
|
+
const [selected, setSelected] = useControllableState({
|
|
549
|
+
value: isSelected,
|
|
550
|
+
defaultValue: defaultSelected,
|
|
551
|
+
onChange: onSelectedChange
|
|
552
|
+
});
|
|
553
|
+
const handlePress = useCallback(event => {
|
|
554
|
+
setSelected(current => !current);
|
|
555
|
+
onPress?.(event);
|
|
556
|
+
}, [setSelected, onPress]);
|
|
557
|
+
const selection = {
|
|
558
|
+
variant,
|
|
559
|
+
size,
|
|
560
|
+
radius
|
|
561
|
+
};
|
|
562
|
+
const states = {
|
|
563
|
+
pressed: isPressed,
|
|
564
|
+
disabled: isDisabled
|
|
565
|
+
};
|
|
566
|
+
const styles = switchRecipe.resolve({
|
|
567
|
+
theme,
|
|
568
|
+
selection,
|
|
569
|
+
states
|
|
570
|
+
});
|
|
571
|
+
const tint = color ? switchRecipe.tint({
|
|
572
|
+
theme,
|
|
573
|
+
color,
|
|
574
|
+
selection,
|
|
575
|
+
states
|
|
576
|
+
}) : void 0;
|
|
577
|
+
const context = useMemo(() => {
|
|
578
|
+
const track = StyleSheet.flatten(styles.track);
|
|
579
|
+
const thumb = StyleSheet.flatten(styles.thumb);
|
|
580
|
+
return {
|
|
581
|
+
trackStyle: styles.track,
|
|
582
|
+
thumbStyle: styles.thumb,
|
|
583
|
+
labelStyle: styles.label,
|
|
584
|
+
// Values, not styles: the two ends of a colour that is crossed on the UI thread.
|
|
585
|
+
// The tint moves the "on" end alone — the track at rest keeps its neutral, because
|
|
586
|
+
// a switch that is off is off in every brand.
|
|
587
|
+
track: {
|
|
588
|
+
off: colorOf(track),
|
|
589
|
+
on: colorOf(StyleSheet.flatten([styles.trackSelected, tint?.trackSelected]))
|
|
590
|
+
},
|
|
591
|
+
thumb: {
|
|
592
|
+
off: colorOf(thumb),
|
|
593
|
+
on: colorOf(StyleSheet.flatten([styles.thumbSelected, tint?.thumbSelected]))
|
|
594
|
+
},
|
|
595
|
+
// The distance the knob slides, and the one number the recipe cannot write: it is
|
|
596
|
+
// the track's width less the thumb and the padding at both ends, and it has to be a
|
|
597
|
+
// number rather than a style because the slide happens in a worklet.
|
|
598
|
+
travel: travelOf(track, thumb),
|
|
599
|
+
isSelected: selected,
|
|
600
|
+
isDisabled
|
|
601
|
+
};
|
|
602
|
+
}, [styles, tint, selected, isDisabled]);
|
|
603
|
+
const rootStyle = [styles.root, styleProps, typeof style === "function" ? style({
|
|
604
|
+
pressed: isPressed
|
|
605
|
+
}) : style];
|
|
606
|
+
const text = childrenToString(children);
|
|
607
|
+
const content = text !== null ? /* @__PURE__ */jsxs(Fragment, {
|
|
608
|
+
children: [/* @__PURE__ */jsx4(SwitchTrack, {
|
|
609
|
+
children: /* @__PURE__ */jsx4(SwitchThumb, {})
|
|
610
|
+
}), /* @__PURE__ */jsx4(SwitchLabel, {
|
|
611
|
+
children: text
|
|
612
|
+
})]
|
|
613
|
+
}) : children ?? /* @__PURE__ */jsx4(SwitchTrack, {
|
|
614
|
+
children: /* @__PURE__ */jsx4(SwitchThumb, {})
|
|
615
|
+
});
|
|
616
|
+
return /* @__PURE__ */jsx4(SwitchProvider, {
|
|
617
|
+
value: context,
|
|
618
|
+
children: /* @__PURE__ */jsx4(PressableFeedback, {
|
|
619
|
+
ref,
|
|
620
|
+
isPressed,
|
|
621
|
+
isDisabled,
|
|
622
|
+
asChild,
|
|
623
|
+
animation,
|
|
624
|
+
accessibilityRole: accessibilityRole ?? "switch",
|
|
625
|
+
accessibilityState: {
|
|
626
|
+
checked: selected,
|
|
627
|
+
disabled: isDisabled,
|
|
628
|
+
...accessibilityState
|
|
629
|
+
},
|
|
630
|
+
...rest,
|
|
631
|
+
style: rootStyle,
|
|
632
|
+
onPress: handlePress,
|
|
633
|
+
onPressIn: press.onPressIn,
|
|
634
|
+
onPressOut: press.onPressOut,
|
|
635
|
+
children: asChild ? children : content
|
|
636
|
+
})
|
|
637
|
+
});
|
|
638
|
+
});
|
|
639
|
+
SwitchRoot.displayName = "XAUI.Switch.Root";
|
|
640
|
+
function colorOf(style) {
|
|
641
|
+
return typeof style.backgroundColor === "string" ? style.backgroundColor : "";
|
|
642
|
+
}
|
|
643
|
+
function travelOf(track, thumb) {
|
|
644
|
+
const width = pointsOf(track.width);
|
|
645
|
+
const knob = pointsOf(thumb.width);
|
|
646
|
+
const inset = pointsOf(thumb.start);
|
|
647
|
+
return Math.max(width - knob - inset * 2, 0);
|
|
648
|
+
}
|
|
649
|
+
function pointsOf(value) {
|
|
650
|
+
return typeof value === "number" ? value : 0;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
// src/components/switch/index.ts
|
|
654
|
+
var Switch2 = Object.assign(SwitchRoot, {
|
|
655
|
+
Track: SwitchTrack,
|
|
656
|
+
Thumb: SwitchThumb,
|
|
657
|
+
Label: SwitchLabel
|
|
658
|
+
});
|
|
659
|
+
export { useSwitch, SwitchLabel, SwitchThumb, SwitchTrack, switchRecipe, SwitchRoot, Switch2 as Switch };
|