@xaui/native 0.9.1-alpha.27 → 0.9.1-alpha.28

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.
@@ -1,503 +0,0 @@
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 };
File without changes
File without changes