@xaui/native 0.9.1-alpha.26 → 0.9.1-alpha.27
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-2EBB5BO3.cjs +361 -0
- package/dist/{chunk-PQHC65AG.js → chunk-56KVKM27.js} +15 -15
- package/dist/{chunk-BULNTP5N.cjs → chunk-63TWVWHG.cjs} +9 -45
- package/dist/chunk-7EIHHOHP.cjs +42 -0
- package/dist/{chunk-WVCAFORA.cjs → chunk-CQRUNV6S.cjs} +15 -15
- package/dist/chunk-F6W3JQ7K.js +42 -0
- package/dist/chunk-LGVIZAB2.js +503 -0
- package/dist/{chunk-I6UCYAO2.js → chunk-N4UJYDOW.js} +23 -56
- package/dist/components/alert/index.cjs +1 -1
- package/dist/components/alert/index.d.cts +1 -1
- package/dist/components/alert/index.d.ts +1 -1
- package/dist/components/alert/index.js +1 -1
- package/dist/components/button/index.cjs +3 -3
- package/dist/components/button/index.d.cts +1 -1
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/button/index.js +2 -2
- package/dist/components/card/index.d.cts +1 -1
- package/dist/components/card/index.d.ts +1 -1
- package/dist/components/checkbox/index.cjs +23 -0
- package/dist/components/checkbox/index.d.cts +1137 -0
- package/dist/components/checkbox/index.d.ts +1137 -0
- package/dist/components/checkbox/index.js +23 -0
- package/dist/components/chip/index.cjs +3 -3
- package/dist/components/chip/index.d.cts +1 -1
- package/dist/components/chip/index.d.ts +1 -1
- package/dist/components/chip/index.js +2 -2
- package/dist/components/input/index.d.cts +3 -3
- package/dist/components/input/index.d.ts +3 -3
- package/dist/components/input-otp/index.cjs +3 -2
- package/dist/components/input-otp/index.d.cts +3 -3
- package/dist/components/input-otp/index.d.ts +3 -3
- package/dist/components/input-otp/index.js +2 -1
- package/dist/components/typography/index.d.cts +1 -1
- package/dist/components/typography/index.d.ts +1 -1
- package/dist/{create-recipe-dBN_ewZc.d.cts → create-recipe-CWvI5ot3.d.cts} +8 -1
- package/dist/{create-recipe-C4JkINrA.d.ts → create-recipe-DUo8doTt.d.ts} +8 -1
- package/dist/index.cjs +28 -12
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +31 -15
- package/dist/system/index.cjs +1 -1
- package/dist/system/index.d.cts +2 -2
- package/dist/system/index.d.ts +2 -2
- package/dist/system/index.js +1 -1
- package/package.json +11 -1
- package/dist/{chunk-3WISQT22.js → chunk-EHARM2EN.js} +3 -3
- package/dist/{chunk-I7G77Q65.cjs → chunk-H7DVR52Z.cjs} +2 -2
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import {
|
|
2
|
+
warnDev
|
|
3
|
+
} from "./chunk-EGLLDKN6.js";
|
|
4
|
+
|
|
5
|
+
// src/hooks/use-controllable-state.ts
|
|
6
|
+
import { useCallback, useRef, useState } from "react";
|
|
7
|
+
function useControllableState({
|
|
8
|
+
value,
|
|
9
|
+
defaultValue,
|
|
10
|
+
onChange
|
|
11
|
+
}) {
|
|
12
|
+
const [uncontrolled, setUncontrolled] = useState(defaultValue);
|
|
13
|
+
const isControlled = value !== void 0;
|
|
14
|
+
const current = isControlled ? value : uncontrolled;
|
|
15
|
+
useControlWarning(isControlled);
|
|
16
|
+
const latest = useRef(current);
|
|
17
|
+
latest.current = current;
|
|
18
|
+
const onChangeRef = useRef(onChange);
|
|
19
|
+
onChangeRef.current = onChange;
|
|
20
|
+
const controlled = useRef(isControlled);
|
|
21
|
+
controlled.current = isControlled;
|
|
22
|
+
const set = useCallback((next) => {
|
|
23
|
+
const resolved = typeof next === "function" ? next(latest.current) : next;
|
|
24
|
+
if (resolved === latest.current) return;
|
|
25
|
+
if (!controlled.current) setUncontrolled(resolved);
|
|
26
|
+
onChangeRef.current?.(resolved);
|
|
27
|
+
}, []);
|
|
28
|
+
return [current, set];
|
|
29
|
+
}
|
|
30
|
+
function useControlWarning(isControlled) {
|
|
31
|
+
const wasControlled = useRef(isControlled);
|
|
32
|
+
if (wasControlled.current !== isControlled) {
|
|
33
|
+
warnDev(
|
|
34
|
+
`a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`
|
|
35
|
+
);
|
|
36
|
+
wasControlled.current = isControlled;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export {
|
|
41
|
+
useControllableState
|
|
42
|
+
};
|
|
@@ -0,0 +1,503 @@
|
|
|
1
|
+
import { useControllableState } from "./chunk-F6W3JQ7K.js";
|
|
2
|
+
import { PressableFeedback, usePressState } from "./chunk-4HELPMAK.js";
|
|
3
|
+
import { createRecipe, radiusAxis } from "./chunk-3JATAB7S.js";
|
|
4
|
+
import { childrenToString, createSlotContext, useStyleProps } from "./chunk-PMO62QK4.js";
|
|
5
|
+
import { useXAUITheme } from "./chunk-A3EGFI6T.js";
|
|
6
|
+
|
|
7
|
+
// src/components/checkbox/checkbox-indicator.tsx
|
|
8
|
+
import { forwardRef } from "react";
|
|
9
|
+
import { View } from "react-native";
|
|
10
|
+
import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
|
|
11
|
+
|
|
12
|
+
// src/components/checkbox/checkbox.context.ts
|
|
13
|
+
var [CheckboxProvider, useCheckbox] = createSlotContext("Checkbox");
|
|
14
|
+
|
|
15
|
+
// src/components/checkbox/checkbox-indicator.tsx
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
var DURATION = 120;
|
|
18
|
+
var FROM_SCALE = 0.8;
|
|
19
|
+
var CheckboxIndicator = forwardRef(function CheckboxIndicator2({
|
|
20
|
+
children,
|
|
21
|
+
animation = true,
|
|
22
|
+
style,
|
|
23
|
+
...props
|
|
24
|
+
}, ref) {
|
|
25
|
+
const {
|
|
26
|
+
indicatorStyle,
|
|
27
|
+
isSelected,
|
|
28
|
+
isIndeterminate
|
|
29
|
+
} = useCheckbox();
|
|
30
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
31
|
+
const isFilled = isSelected || isIndeterminate;
|
|
32
|
+
const mark = children ?? (isIndeterminate ? /* @__PURE__ */jsx(Dash, {}) : /* @__PURE__ */jsx(Check, {}));
|
|
33
|
+
return /* @__PURE__ */jsx(View, {
|
|
34
|
+
ref,
|
|
35
|
+
...rest,
|
|
36
|
+
style: [indicatorStyle, styleProps, style],
|
|
37
|
+
children: animation ? /* @__PURE__ */jsx(AnimatedFill, {
|
|
38
|
+
isSelected: isFilled,
|
|
39
|
+
children: mark
|
|
40
|
+
}) : isFilled && /* @__PURE__ */jsx(StaticFill, {
|
|
41
|
+
children: mark
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
CheckboxIndicator.displayName = "XAUI.Checkbox.Indicator";
|
|
46
|
+
const _worklet_7094250296840_init_data = {
|
|
47
|
+
code: "function chunkLGVIZAB2Js1(){const{withTiming,isSelected,DURATION}=this.__closure;return withTiming(isSelected?1:0,{duration:DURATION});}",
|
|
48
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LGVIZAB2.js",
|
|
49
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkLGVIZAB2Js1\",\"withTiming\",\"isSelected\",\"DURATION\",\"__closure\",\"duration\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LGVIZAB2.js\"],\"mappings\":\"AAoDI,SAAAA,iBAAA,QAAAC,UAAA,CAAAC,UAAA,CAAAC,QAAA,OAAAC,SAAA,OAAM,CAAAH,UAAW,CAAAC,UAAU,CAAI,EAAI,EAAE,CAAEG,QAAQ,CAAEF,QAAS,CAAC\",\"ignoreList\":[]}"
|
|
50
|
+
};
|
|
51
|
+
const _worklet_1452377871009_init_data = {
|
|
52
|
+
code: "function chunkLGVIZAB2Js2(){const{progress,FROM_SCALE}=this.__closure;return{opacity:progress.value,transform:[{scale:FROM_SCALE+(1-FROM_SCALE)*progress.value}]};}",
|
|
53
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-LGVIZAB2.js",
|
|
54
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkLGVIZAB2Js2\",\"progress\",\"FROM_SCALE\",\"__closure\",\"opacity\",\"value\",\"transform\",\"scale\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-LGVIZAB2.js\"],\"mappings\":\"AAuDyC,SAAAA,iBAAA,QAAAC,QAAA,CAAAC,UAAA,OAAAC,SAAA,OAAO,CAC5CC,OAAO,CAAEH,QAAQ,CAACI,KAAK,CACvBC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAEL,UAAU,CAAG,CAAC,CAAC,CAAGA,UAAU,EAAID,QAAQ,CAACI,KAAM,CAAC,CACvE,CAAC\",\"ignoreList\":[]}"
|
|
55
|
+
};
|
|
56
|
+
function AnimatedFill({
|
|
57
|
+
isSelected,
|
|
58
|
+
children
|
|
59
|
+
}) {
|
|
60
|
+
const {
|
|
61
|
+
fillStyle
|
|
62
|
+
} = useCheckbox();
|
|
63
|
+
const progress = useDerivedValue(function chunkLGVIZAB2Js1Factory({
|
|
64
|
+
_worklet_7094250296840_init_data,
|
|
65
|
+
withTiming,
|
|
66
|
+
isSelected,
|
|
67
|
+
DURATION
|
|
68
|
+
}) {
|
|
69
|
+
const _e = [new global.Error(), -4, -27];
|
|
70
|
+
const chunkLGVIZAB2Js1 = () => withTiming(isSelected ? 1 : 0, {
|
|
71
|
+
duration: DURATION
|
|
72
|
+
});
|
|
73
|
+
chunkLGVIZAB2Js1.__closure = {
|
|
74
|
+
withTiming,
|
|
75
|
+
isSelected,
|
|
76
|
+
DURATION
|
|
77
|
+
};
|
|
78
|
+
chunkLGVIZAB2Js1.__workletHash = 7094250296840;
|
|
79
|
+
chunkLGVIZAB2Js1.__pluginVersion = "0.7.4";
|
|
80
|
+
chunkLGVIZAB2Js1.__initData = _worklet_7094250296840_init_data;
|
|
81
|
+
chunkLGVIZAB2Js1.__stackDetails = _e;
|
|
82
|
+
return chunkLGVIZAB2Js1;
|
|
83
|
+
}({
|
|
84
|
+
_worklet_7094250296840_init_data,
|
|
85
|
+
withTiming,
|
|
86
|
+
isSelected,
|
|
87
|
+
DURATION
|
|
88
|
+
}), [isSelected]);
|
|
89
|
+
const animatedStyle = useAnimatedStyle(function chunkLGVIZAB2Js2Factory({
|
|
90
|
+
_worklet_1452377871009_init_data,
|
|
91
|
+
progress,
|
|
92
|
+
FROM_SCALE
|
|
93
|
+
}) {
|
|
94
|
+
const _e = [new global.Error(), -3, -27];
|
|
95
|
+
const chunkLGVIZAB2Js2 = () => ({
|
|
96
|
+
opacity: progress.value,
|
|
97
|
+
transform: [{
|
|
98
|
+
scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value
|
|
99
|
+
}]
|
|
100
|
+
});
|
|
101
|
+
chunkLGVIZAB2Js2.__closure = {
|
|
102
|
+
progress,
|
|
103
|
+
FROM_SCALE
|
|
104
|
+
};
|
|
105
|
+
chunkLGVIZAB2Js2.__workletHash = 1452377871009;
|
|
106
|
+
chunkLGVIZAB2Js2.__pluginVersion = "0.7.4";
|
|
107
|
+
chunkLGVIZAB2Js2.__initData = _worklet_1452377871009_init_data;
|
|
108
|
+
chunkLGVIZAB2Js2.__stackDetails = _e;
|
|
109
|
+
return chunkLGVIZAB2Js2;
|
|
110
|
+
}({
|
|
111
|
+
_worklet_1452377871009_init_data,
|
|
112
|
+
progress,
|
|
113
|
+
FROM_SCALE
|
|
114
|
+
}));
|
|
115
|
+
return /* @__PURE__ */jsx(Animated.View, {
|
|
116
|
+
style: [fillStyle, animatedStyle],
|
|
117
|
+
children
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
function StaticFill({
|
|
121
|
+
children
|
|
122
|
+
}) {
|
|
123
|
+
const {
|
|
124
|
+
fillStyle
|
|
125
|
+
} = useCheckbox();
|
|
126
|
+
return /* @__PURE__ */jsx(View, {
|
|
127
|
+
style: fillStyle,
|
|
128
|
+
children
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
function Check() {
|
|
132
|
+
const {
|
|
133
|
+
checkStyle
|
|
134
|
+
} = useCheckbox();
|
|
135
|
+
return /* @__PURE__ */jsx(View, {
|
|
136
|
+
style: checkStyle
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
function Dash() {
|
|
140
|
+
const {
|
|
141
|
+
dashStyle
|
|
142
|
+
} = useCheckbox();
|
|
143
|
+
return /* @__PURE__ */jsx(View, {
|
|
144
|
+
style: dashStyle
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// src/components/checkbox/checkbox-label.tsx
|
|
149
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
150
|
+
import { Text } from "react-native";
|
|
151
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
152
|
+
var CheckboxLabel = forwardRef2(function CheckboxLabel2({
|
|
153
|
+
children,
|
|
154
|
+
style,
|
|
155
|
+
...props
|
|
156
|
+
}, ref) {
|
|
157
|
+
const {
|
|
158
|
+
labelStyle
|
|
159
|
+
} = useCheckbox();
|
|
160
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
161
|
+
return /* @__PURE__ */jsx2(Text, {
|
|
162
|
+
ref,
|
|
163
|
+
style: [labelStyle, styleProps, style],
|
|
164
|
+
...rest,
|
|
165
|
+
children
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
CheckboxLabel.displayName = "XAUI.Checkbox.Label";
|
|
169
|
+
|
|
170
|
+
// src/components/checkbox/checkbox.tsx
|
|
171
|
+
import { forwardRef as forwardRef3, useCallback, useMemo } from "react";
|
|
172
|
+
|
|
173
|
+
// src/components/checkbox/checkbox.recipe.ts
|
|
174
|
+
var SLOTS = ["root", "indicator", "fill", "check", "dash", "label"];
|
|
175
|
+
var VARIANT_TOKENS = {
|
|
176
|
+
primary: {
|
|
177
|
+
bg: "fieldBackground",
|
|
178
|
+
border: "fieldBorder",
|
|
179
|
+
bgSelected: "accent",
|
|
180
|
+
fgSelected: "accentForeground"
|
|
181
|
+
},
|
|
182
|
+
// `bg: 'default'` is the neutral *token*, not this variant's name — the two namespaces
|
|
183
|
+
// meet here as they do on the `Input`, and for the same reason: on a card,
|
|
184
|
+
// `fieldBackground` is the card's own colour and the box would vanish into it.
|
|
185
|
+
secondary: {
|
|
186
|
+
bg: "default",
|
|
187
|
+
border: "fieldBorder",
|
|
188
|
+
bgSelected: "accent",
|
|
189
|
+
fgSelected: "accentForeground"
|
|
190
|
+
},
|
|
191
|
+
tertiary: {
|
|
192
|
+
border: "fieldBorder",
|
|
193
|
+
bgSelected: "accent",
|
|
194
|
+
fgSelected: "accentForeground"
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
function sizeAxis(step) {
|
|
198
|
+
const {
|
|
199
|
+
box,
|
|
200
|
+
radius,
|
|
201
|
+
label,
|
|
202
|
+
gap,
|
|
203
|
+
stroke
|
|
204
|
+
} = step;
|
|
205
|
+
return theme => {
|
|
206
|
+
const side = theme.spacing(box);
|
|
207
|
+
return {
|
|
208
|
+
root: {
|
|
209
|
+
gap: theme.spacing(gap)
|
|
210
|
+
},
|
|
211
|
+
indicator: {
|
|
212
|
+
width: side,
|
|
213
|
+
height: side,
|
|
214
|
+
borderRadius: theme.radius[radius]
|
|
215
|
+
},
|
|
216
|
+
check: {
|
|
217
|
+
width: side * CHECK_WIDTH,
|
|
218
|
+
height: side * CHECK_HEIGHT,
|
|
219
|
+
borderStartWidth: stroke,
|
|
220
|
+
borderBottomWidth: stroke,
|
|
221
|
+
// An "L" has its ink in one corner, not in the middle of its box, so rotating it
|
|
222
|
+
// about that box's centre leaves the tick sitting low. Rotating by −45° maps a
|
|
223
|
+
// point to `(dy − dx)·√2/2`, and over the two strokes that spans `H` at the top
|
|
224
|
+
// and `H − t − W` at the bottom — an ink centre `(H − t)·√2/4` **below** the box
|
|
225
|
+
// centre, which flexbox then dutifully centres. Lifting by exactly that is what
|
|
226
|
+
// makes the mark look centred rather than measure centred.
|
|
227
|
+
//
|
|
228
|
+
// Both transforms live here, and not half here and half in a sheet, because
|
|
229
|
+
// `transform` is a whole value: the recipe's merge replaces it rather than
|
|
230
|
+
// blending, so a second step would drop the first.
|
|
231
|
+
transform: [{
|
|
232
|
+
translateY: -((side * CHECK_HEIGHT - stroke) * Math.SQRT2) / 4
|
|
233
|
+
}, {
|
|
234
|
+
rotate: "-45deg"
|
|
235
|
+
}]
|
|
236
|
+
},
|
|
237
|
+
// The third state's mark: the check's long stroke, on its own and level.
|
|
238
|
+
dash: {
|
|
239
|
+
width: side * CHECK_WIDTH,
|
|
240
|
+
height: stroke,
|
|
241
|
+
borderRadius: stroke / 2
|
|
242
|
+
},
|
|
243
|
+
label: {
|
|
244
|
+
fontSize: theme.fontSizes[label],
|
|
245
|
+
lineHeight: theme.lineHeights[label]
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
};
|
|
249
|
+
}
|
|
250
|
+
var CHECK_WIDTH = 0.5;
|
|
251
|
+
var CHECK_HEIGHT = 0.25;
|
|
252
|
+
var SIZES = {
|
|
253
|
+
sm: {
|
|
254
|
+
box: 5,
|
|
255
|
+
radius: "sm",
|
|
256
|
+
gap: 2,
|
|
257
|
+
label: "sm",
|
|
258
|
+
stroke: 2
|
|
259
|
+
},
|
|
260
|
+
md: {
|
|
261
|
+
box: 6,
|
|
262
|
+
radius: "md",
|
|
263
|
+
gap: 2,
|
|
264
|
+
label: "md",
|
|
265
|
+
stroke: 2
|
|
266
|
+
},
|
|
267
|
+
lg: {
|
|
268
|
+
box: 7,
|
|
269
|
+
radius: "md",
|
|
270
|
+
gap: 2.5,
|
|
271
|
+
label: "lg",
|
|
272
|
+
stroke: 2.5
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
var checkboxRecipe = createRecipe({
|
|
276
|
+
slots: SLOTS,
|
|
277
|
+
base: theme => ({
|
|
278
|
+
root: {
|
|
279
|
+
flexDirection: "row",
|
|
280
|
+
alignItems: "center",
|
|
281
|
+
alignSelf: "flex-start"
|
|
282
|
+
},
|
|
283
|
+
indicator: {
|
|
284
|
+
alignItems: "center",
|
|
285
|
+
justifyContent: "center",
|
|
286
|
+
borderWidth: theme.borderWidth.field,
|
|
287
|
+
borderCurve: "continuous",
|
|
288
|
+
// The fill is laid inside the box and has to stop at its corners.
|
|
289
|
+
overflow: "hidden"
|
|
290
|
+
},
|
|
291
|
+
// Laid over the box rather than sized to it: the two corners are the indicator's, and
|
|
292
|
+
// an inset of zero is what keeps the fill inside the border it is clipped by.
|
|
293
|
+
fill: {
|
|
294
|
+
position: "absolute",
|
|
295
|
+
top: 0,
|
|
296
|
+
bottom: 0,
|
|
297
|
+
start: 0,
|
|
298
|
+
end: 0,
|
|
299
|
+
alignItems: "center",
|
|
300
|
+
justifyContent: "center"
|
|
301
|
+
},
|
|
302
|
+
label: {
|
|
303
|
+
fontFamily: theme.fontFamilies.body,
|
|
304
|
+
color: theme.colors.foreground
|
|
305
|
+
}
|
|
306
|
+
}),
|
|
307
|
+
variantTokens: VARIANT_TOKENS,
|
|
308
|
+
/**
|
|
309
|
+
* Where the variant's colours land. The border width follows the *presence* of the
|
|
310
|
+
* border role, exactly as on the `Input`.
|
|
311
|
+
*
|
|
312
|
+
* `bgSelected` and `fgSelected` are painted unconditionally, on two slots the indicator
|
|
313
|
+
* only mounts while it is ticked — which is what keeps selection out of the cache key
|
|
314
|
+
* and inside the tint pass at the same time. An axis would have given up the second.
|
|
315
|
+
*/
|
|
316
|
+
paint: (theme, colors) => ({
|
|
317
|
+
indicator: {
|
|
318
|
+
backgroundColor: colors.bg,
|
|
319
|
+
borderColor: colors.border,
|
|
320
|
+
borderWidth: colors.border ? theme.borderWidth.field : 0
|
|
321
|
+
},
|
|
322
|
+
fill: {
|
|
323
|
+
backgroundColor: colors.bgSelected
|
|
324
|
+
},
|
|
325
|
+
check: {
|
|
326
|
+
borderColor: colors.fgSelected
|
|
327
|
+
},
|
|
328
|
+
dash: {
|
|
329
|
+
backgroundColor: colors.fgSelected
|
|
330
|
+
}
|
|
331
|
+
}),
|
|
332
|
+
variants: {
|
|
333
|
+
size: {
|
|
334
|
+
sm: sizeAxis(SIZES.sm),
|
|
335
|
+
md: sizeAxis(SIZES.md),
|
|
336
|
+
lg: sizeAxis(SIZES.lg)
|
|
337
|
+
},
|
|
338
|
+
radius: radiusAxis("indicator"),
|
|
339
|
+
/**
|
|
340
|
+
* Declared after `size` so its border wins. The resting fill is dropped rather than
|
|
341
|
+
* repainted — `undefined` over a colour is what RN reads as "no background" — because
|
|
342
|
+
* a box that is wrong should read as an outline, not as a filled control that happens
|
|
343
|
+
* to be red at the edge. HeroUI reaches the same shape with a compound.
|
|
344
|
+
*/
|
|
345
|
+
isInvalid: {
|
|
346
|
+
true: theme => ({
|
|
347
|
+
indicator: {
|
|
348
|
+
borderColor: theme.colors.danger,
|
|
349
|
+
backgroundColor: void 0
|
|
350
|
+
},
|
|
351
|
+
fill: {
|
|
352
|
+
backgroundColor: theme.colors.danger
|
|
353
|
+
},
|
|
354
|
+
check: {
|
|
355
|
+
borderColor: theme.colors.dangerForeground
|
|
356
|
+
},
|
|
357
|
+
dash: {
|
|
358
|
+
backgroundColor: theme.colors.dangerForeground
|
|
359
|
+
},
|
|
360
|
+
// The label turns with it: on a long form the field that is wrong has to be
|
|
361
|
+
// findable without reading every message.
|
|
362
|
+
label: {
|
|
363
|
+
color: theme.colors.danger
|
|
364
|
+
}
|
|
365
|
+
})
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
/** What `primary` adds to a filled box — the `Input`'s compound, on a smaller field. */
|
|
369
|
+
compoundVariants: [{
|
|
370
|
+
when: {
|
|
371
|
+
variant: "primary"
|
|
372
|
+
},
|
|
373
|
+
style: theme => ({
|
|
374
|
+
indicator: theme.shadows.field
|
|
375
|
+
})
|
|
376
|
+
}],
|
|
377
|
+
states: {
|
|
378
|
+
disabled: theme => ({
|
|
379
|
+
root: {
|
|
380
|
+
opacity: theme.opacity.disabled
|
|
381
|
+
}
|
|
382
|
+
})
|
|
383
|
+
},
|
|
384
|
+
defaultVariants: {
|
|
385
|
+
variant: "secondary",
|
|
386
|
+
size: "md"
|
|
387
|
+
}
|
|
388
|
+
});
|
|
389
|
+
|
|
390
|
+
// src/components/checkbox/checkbox.tsx
|
|
391
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
392
|
+
var CheckboxRoot = forwardRef3(function Checkbox({
|
|
393
|
+
children,
|
|
394
|
+
variant,
|
|
395
|
+
size,
|
|
396
|
+
radius,
|
|
397
|
+
color,
|
|
398
|
+
isSelected,
|
|
399
|
+
defaultSelected = false,
|
|
400
|
+
onSelectedChange,
|
|
401
|
+
isIndeterminate = false,
|
|
402
|
+
isInvalid = false,
|
|
403
|
+
isDisabled = false,
|
|
404
|
+
asChild = false,
|
|
405
|
+
accessibilityRole,
|
|
406
|
+
accessibilityState,
|
|
407
|
+
animation,
|
|
408
|
+
style,
|
|
409
|
+
onPress,
|
|
410
|
+
onPressIn,
|
|
411
|
+
onPressOut,
|
|
412
|
+
...props
|
|
413
|
+
}, ref) {
|
|
414
|
+
const theme = useXAUITheme();
|
|
415
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
416
|
+
const [isPressed, press] = usePressState({
|
|
417
|
+
onPressIn,
|
|
418
|
+
onPressOut
|
|
419
|
+
});
|
|
420
|
+
const [selected, setSelected] = useControllableState({
|
|
421
|
+
value: isSelected,
|
|
422
|
+
defaultValue: defaultSelected,
|
|
423
|
+
onChange: onSelectedChange
|
|
424
|
+
});
|
|
425
|
+
const handlePress = useCallback(event => {
|
|
426
|
+
setSelected(current => isIndeterminate ? true : !current);
|
|
427
|
+
onPress?.(event);
|
|
428
|
+
}, [setSelected, isIndeterminate, onPress]);
|
|
429
|
+
const selection = {
|
|
430
|
+
variant,
|
|
431
|
+
size,
|
|
432
|
+
radius,
|
|
433
|
+
isInvalid: isInvalid ? "true" : void 0
|
|
434
|
+
};
|
|
435
|
+
const states = {
|
|
436
|
+
pressed: isPressed,
|
|
437
|
+
disabled: isDisabled
|
|
438
|
+
};
|
|
439
|
+
const styles = checkboxRecipe.resolve({
|
|
440
|
+
theme,
|
|
441
|
+
selection,
|
|
442
|
+
states
|
|
443
|
+
});
|
|
444
|
+
const tint = color && !isInvalid ? checkboxRecipe.tint({
|
|
445
|
+
theme,
|
|
446
|
+
color,
|
|
447
|
+
selection,
|
|
448
|
+
states
|
|
449
|
+
}) : void 0;
|
|
450
|
+
const context = useMemo(() => ({
|
|
451
|
+
indicatorStyle: tint ? [styles.indicator, tint.indicator] : styles.indicator,
|
|
452
|
+
fillStyle: tint ? [styles.fill, tint.fill] : styles.fill,
|
|
453
|
+
checkStyle: tint ? [styles.check, tint.check] : styles.check,
|
|
454
|
+
dashStyle: tint ? [styles.dash, tint.dash] : styles.dash,
|
|
455
|
+
labelStyle: styles.label,
|
|
456
|
+
isSelected: selected,
|
|
457
|
+
isIndeterminate,
|
|
458
|
+
isDisabled,
|
|
459
|
+
isInvalid
|
|
460
|
+
}), [styles, tint, selected, isIndeterminate, isDisabled, isInvalid]);
|
|
461
|
+
const rootStyle = [styles.root, tint?.root, styleProps, typeof style === "function" ? style({
|
|
462
|
+
pressed: isPressed
|
|
463
|
+
}) : style];
|
|
464
|
+
const text = childrenToString(children);
|
|
465
|
+
const content = text !== null ? /* @__PURE__ */jsxs(Fragment, {
|
|
466
|
+
children: [/* @__PURE__ */jsx3(CheckboxIndicator, {}), /* @__PURE__ */jsx3(CheckboxLabel, {
|
|
467
|
+
children: text
|
|
468
|
+
})]
|
|
469
|
+
}) : children ?? /* @__PURE__ */jsx3(CheckboxIndicator, {});
|
|
470
|
+
return /* @__PURE__ */jsx3(CheckboxProvider, {
|
|
471
|
+
value: context,
|
|
472
|
+
children: /* @__PURE__ */jsx3(PressableFeedback, {
|
|
473
|
+
ref,
|
|
474
|
+
isPressed,
|
|
475
|
+
isDisabled,
|
|
476
|
+
asChild,
|
|
477
|
+
animation,
|
|
478
|
+
accessibilityRole: accessibilityRole ?? "checkbox",
|
|
479
|
+
accessibilityState: {
|
|
480
|
+
// `'mixed'` is the platform's own word for the third state, and it is the only
|
|
481
|
+
// thing that tells a screen reader this box speaks for rows it cannot see.
|
|
482
|
+
checked: isIndeterminate ? "mixed" : selected,
|
|
483
|
+
disabled: isDisabled,
|
|
484
|
+
...accessibilityState
|
|
485
|
+
},
|
|
486
|
+
"aria-invalid": isInvalid,
|
|
487
|
+
...rest,
|
|
488
|
+
style: rootStyle,
|
|
489
|
+
onPress: handlePress,
|
|
490
|
+
onPressIn: press.onPressIn,
|
|
491
|
+
onPressOut: press.onPressOut,
|
|
492
|
+
children: asChild ? children : content
|
|
493
|
+
})
|
|
494
|
+
});
|
|
495
|
+
});
|
|
496
|
+
CheckboxRoot.displayName = "XAUI.Checkbox.Root";
|
|
497
|
+
|
|
498
|
+
// src/components/checkbox/index.ts
|
|
499
|
+
var Checkbox2 = Object.assign(CheckboxRoot, {
|
|
500
|
+
Indicator: CheckboxIndicator,
|
|
501
|
+
Label: CheckboxLabel
|
|
502
|
+
});
|
|
503
|
+
export { useCheckbox, CheckboxIndicator, CheckboxLabel, checkboxRecipe, CheckboxRoot, Checkbox2 as Checkbox };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useControllableState } from "./chunk-F6W3JQ7K.js";
|
|
2
2
|
import { createRecipe, radiusAxis } from "./chunk-3JATAB7S.js";
|
|
3
3
|
import { createSlotContext, useStyleProps } from "./chunk-PMO62QK4.js";
|
|
4
4
|
import { useXAUITheme } from "./chunk-A3EGFI6T.js";
|
|
@@ -39,10 +39,10 @@ function InputOTPCaret({
|
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
InputOTPCaret.displayName = "XAUI.InputOTP.Caret";
|
|
42
|
-
const
|
|
43
|
-
code: "function
|
|
44
|
-
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-
|
|
45
|
-
sourceMap: "{\"version\":3,\"names\":[\"
|
|
42
|
+
const _worklet_16954378841596_init_data = {
|
|
43
|
+
code: "function chunkN4UJYDOWJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
|
|
44
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-N4UJYDOW.js",
|
|
45
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkN4UJYDOWJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-N4UJYDOW.js\"],\"mappings\":\"AA4DyC,SAAAA,iBAAA,QAAAC,OAAA,OAAAC,SAAA,OAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC\",\"ignoreList\":[]}"
|
|
46
46
|
};
|
|
47
47
|
function BlinkingCaret({
|
|
48
48
|
style
|
|
@@ -55,24 +55,24 @@ function BlinkingCaret({
|
|
|
55
55
|
}), -1, true);
|
|
56
56
|
return () => cancelAnimation(opacity);
|
|
57
57
|
}, [opacity]);
|
|
58
|
-
const animatedStyle = useAnimatedStyle(function
|
|
59
|
-
|
|
58
|
+
const animatedStyle = useAnimatedStyle(function chunkN4UJYDOWJs1Factory({
|
|
59
|
+
_worklet_16954378841596_init_data,
|
|
60
60
|
opacity
|
|
61
61
|
}) {
|
|
62
62
|
const _e = [new global.Error(), -2, -27];
|
|
63
|
-
const
|
|
63
|
+
const chunkN4UJYDOWJs1 = () => ({
|
|
64
64
|
opacity: opacity.value
|
|
65
65
|
});
|
|
66
|
-
|
|
66
|
+
chunkN4UJYDOWJs1.__closure = {
|
|
67
67
|
opacity
|
|
68
68
|
};
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return
|
|
69
|
+
chunkN4UJYDOWJs1.__workletHash = 16954378841596;
|
|
70
|
+
chunkN4UJYDOWJs1.__pluginVersion = "0.7.4";
|
|
71
|
+
chunkN4UJYDOWJs1.__initData = _worklet_16954378841596_init_data;
|
|
72
|
+
chunkN4UJYDOWJs1.__stackDetails = _e;
|
|
73
|
+
return chunkN4UJYDOWJs1;
|
|
74
74
|
}({
|
|
75
|
-
|
|
75
|
+
_worklet_16954378841596_init_data,
|
|
76
76
|
opacity
|
|
77
77
|
}));
|
|
78
78
|
return /* @__PURE__ */jsx(Animated.View, {
|
|
@@ -235,40 +235,7 @@ import { forwardRef as forwardRef6, useImperativeHandle, useMemo as useMemo3 } f
|
|
|
235
235
|
import { TextInput, View as View5 } from "react-native";
|
|
236
236
|
|
|
237
237
|
// src/components/input-otp/input-otp.hook.ts
|
|
238
|
-
import { useCallback
|
|
239
|
-
|
|
240
|
-
// src/hooks/use-controllable-state.ts
|
|
241
|
-
import { useCallback, useRef, useState } from "react";
|
|
242
|
-
function useControllableState({
|
|
243
|
-
value,
|
|
244
|
-
defaultValue,
|
|
245
|
-
onChange
|
|
246
|
-
}) {
|
|
247
|
-
const [uncontrolled, setUncontrolled] = useState(defaultValue);
|
|
248
|
-
const isControlled = value !== void 0;
|
|
249
|
-
const current = isControlled ? value : uncontrolled;
|
|
250
|
-
useControlWarning(isControlled);
|
|
251
|
-
const latest = useRef(current);
|
|
252
|
-
latest.current = current;
|
|
253
|
-
const onChangeRef = useRef(onChange);
|
|
254
|
-
onChangeRef.current = onChange;
|
|
255
|
-
const controlled = useRef(isControlled);
|
|
256
|
-
controlled.current = isControlled;
|
|
257
|
-
const set = useCallback(next => {
|
|
258
|
-
const resolved = typeof next === "function" ? next(latest.current) : next;
|
|
259
|
-
if (resolved === latest.current) return;
|
|
260
|
-
if (!controlled.current) setUncontrolled(resolved);
|
|
261
|
-
onChangeRef.current?.(resolved);
|
|
262
|
-
}, []);
|
|
263
|
-
return [current, set];
|
|
264
|
-
}
|
|
265
|
-
function useControlWarning(isControlled) {
|
|
266
|
-
const wasControlled = useRef(isControlled);
|
|
267
|
-
if (wasControlled.current !== isControlled) {
|
|
268
|
-
warnDev(`a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`);
|
|
269
|
-
wasControlled.current = isControlled;
|
|
270
|
-
}
|
|
271
|
-
}
|
|
238
|
+
import { useCallback, useMemo as useMemo2, useRef, useState } from "react";
|
|
272
239
|
|
|
273
240
|
// src/components/input-otp/input-otp.utils.ts
|
|
274
241
|
function buildSlots({
|
|
@@ -322,8 +289,8 @@ function useInputOTPState({
|
|
|
322
289
|
defaultValue,
|
|
323
290
|
onChange: onChangeTextProp
|
|
324
291
|
});
|
|
325
|
-
const [isFocused, setIsFocused] =
|
|
326
|
-
const inputRef =
|
|
292
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
293
|
+
const inputRef = useRef(null);
|
|
327
294
|
const regexp = useMemo2(() => {
|
|
328
295
|
if (!pattern) return null;
|
|
329
296
|
return typeof pattern === "string" ? new RegExp(pattern) : pattern;
|
|
@@ -334,7 +301,7 @@ function useInputOTPState({
|
|
|
334
301
|
isFocused,
|
|
335
302
|
placeholder
|
|
336
303
|
}), [value, maxLength, isFocused, placeholder]);
|
|
337
|
-
const latest =
|
|
304
|
+
const latest = useRef({
|
|
338
305
|
value,
|
|
339
306
|
maxLength,
|
|
340
307
|
regexp,
|
|
@@ -348,7 +315,7 @@ function useInputOTPState({
|
|
|
348
315
|
onComplete,
|
|
349
316
|
setValue
|
|
350
317
|
};
|
|
351
|
-
const onChangeText =
|
|
318
|
+
const onChangeText = useCallback(text => {
|
|
352
319
|
const current = latest.current;
|
|
353
320
|
const candidate = isPaste(text, current.value) ? extractPastedCode(text, current.maxLength) : text;
|
|
354
321
|
const next = candidate.slice(0, current.maxLength);
|
|
@@ -356,8 +323,8 @@ function useInputOTPState({
|
|
|
356
323
|
current.setValue(next);
|
|
357
324
|
if (next.length === current.maxLength) current.onComplete?.(next);
|
|
358
325
|
}, []);
|
|
359
|
-
const onFocus =
|
|
360
|
-
const onBlur =
|
|
326
|
+
const onFocus = useCallback(() => setIsFocused(true), []);
|
|
327
|
+
const onBlur = useCallback(() => setIsFocused(false), []);
|
|
361
328
|
const handle = useMemo2(() => ({
|
|
362
329
|
focus: () => inputRef.current?.focus(),
|
|
363
330
|
blur: () => inputRef.current?.blur(),
|
|
@@ -728,4 +695,4 @@ var InputOTP2 = Object.assign(InputOTPRoot, {
|
|
|
728
695
|
Caret: InputOTPCaret,
|
|
729
696
|
Separator: InputOTPSeparator
|
|
730
697
|
});
|
|
731
|
-
export { useInputOTP, useInputOTPBox,
|
|
698
|
+
export { useInputOTP, useInputOTPBox, buildSlots, extractPastedCode, OTP_DIGITS, OTP_LETTERS, OTP_ALPHANUMERIC, inputOTPRecipe, InputOTP2 as InputOTP };
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
var _chunkJ4JFIC4Wcjs = require('../../chunk-J4JFIC4W.cjs');
|
|
6
6
|
require('../../chunk-J2JJLKLG.cjs');
|
|
7
7
|
require('../../chunk-IG4Q3WQO.cjs');
|
|
8
|
-
require('../../chunk-B4W2XNBP.cjs');
|
|
9
8
|
require('../../chunk-EJQCQPET.cjs');
|
|
9
|
+
require('../../chunk-B4W2XNBP.cjs');
|
|
10
10
|
require('../../chunk-YXVKQMCK.cjs');
|
|
11
11
|
require('../../chunk-HUZ4AUM2.cjs');
|
|
12
12
|
require('../../chunk-57SJ4LJF.cjs');
|