@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.
- package/dist/chunk-3YN7JQ55.js +342 -0
- package/dist/chunk-5A4M6X5B.cjs +289 -0
- package/dist/chunk-E6EFYPJR.cjs +41 -0
- package/dist/chunk-EYJEUXXC.js +98 -0
- package/dist/chunk-LKB3RIR2.js +289 -0
- package/dist/{chunk-2EBB5BO3.cjs → chunk-V6DGGDHF.cjs} +11 -30
- package/dist/components/checkbox/index.cjs +3 -2
- package/dist/components/checkbox/index.d.cts +4 -5
- package/dist/components/checkbox/index.d.ts +4 -5
- package/dist/components/checkbox/index.js +2 -1
- package/dist/components/radio/index.cjs +24 -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 +24 -0
- package/dist/index.cjs +21 -3
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +20 -2
- package/dist/system/index.cjs +6 -2
- package/dist/system/index.d.cts +34 -1
- package/dist/system/index.d.ts +34 -1
- package/dist/system/index.js +5 -1
- package/package.json +11 -1
- package/dist/chunk-LGVIZAB2.js +0 -503
- /package/dist/{chunk-6HXWQ5AU.cjs → chunk-VZGBEGDV.cjs} +0 -0
- /package/dist/{chunk-AKXG43S4.js → chunk-Y4BPKSD3.js} +0 -0
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
// src/system/selection-fill/selection-fill.tsx
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var DURATION = 120;
|
|
6
|
+
var FROM_SCALE = 0.8;
|
|
7
|
+
function SelectionFill({
|
|
8
|
+
isVisible,
|
|
9
|
+
style,
|
|
10
|
+
animation = true,
|
|
11
|
+
children
|
|
12
|
+
}) {
|
|
13
|
+
if (!animation) {
|
|
14
|
+
return isVisible ? /* @__PURE__ */jsx(View, {
|
|
15
|
+
style,
|
|
16
|
+
children
|
|
17
|
+
}) : null;
|
|
18
|
+
}
|
|
19
|
+
return /* @__PURE__ */jsx(AnimatedFill, {
|
|
20
|
+
isVisible,
|
|
21
|
+
style,
|
|
22
|
+
children
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
SelectionFill.displayName = "XAUI.SelectionFill";
|
|
26
|
+
const _worklet_7679226029618_init_data = {
|
|
27
|
+
code: "function chunkEYJEUXXCJs1(){const{withTiming,isVisible,DURATION}=this.__closure;return withTiming(isVisible?1:0,{duration:DURATION});}",
|
|
28
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-EYJEUXXC.js",
|
|
29
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkEYJEUXXCJs1\",\"withTiming\",\"isVisible\",\"DURATION\",\"__closure\",\"duration\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-EYJEUXXC.js\"],\"mappings\":\"AA4BI,SAAAA,iBAAA,QAAAC,UAAA,CAAAC,SAAA,CAAAC,QAAA,OAAAC,SAAA,OAAM,CAAAH,UAAW,CAAAC,SAAS,CAAI,EAAI,EAAE,CAAEG,QAAQ,CAAEF,QAAS,CAAC\",\"ignoreList\":[]}"
|
|
30
|
+
};
|
|
31
|
+
const _worklet_7274007758171_init_data = {
|
|
32
|
+
code: "function chunkEYJEUXXCJs2(){const{progress,FROM_SCALE}=this.__closure;return{opacity:progress.value,transform:[{scale:FROM_SCALE+(1-FROM_SCALE)*progress.value}]};}",
|
|
33
|
+
location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-EYJEUXXC.js",
|
|
34
|
+
sourceMap: "{\"version\":3,\"names\":[\"chunkEYJEUXXCJs2\",\"progress\",\"FROM_SCALE\",\"__closure\",\"opacity\",\"value\",\"transform\",\"scale\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-EYJEUXXC.js\"],\"mappings\":\"AA+ByC,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\":[]}"
|
|
35
|
+
};
|
|
36
|
+
function AnimatedFill({
|
|
37
|
+
isVisible,
|
|
38
|
+
style,
|
|
39
|
+
children
|
|
40
|
+
}) {
|
|
41
|
+
const progress = useDerivedValue(function chunkEYJEUXXCJs1Factory({
|
|
42
|
+
_worklet_7679226029618_init_data,
|
|
43
|
+
withTiming,
|
|
44
|
+
isVisible,
|
|
45
|
+
DURATION
|
|
46
|
+
}) {
|
|
47
|
+
const _e = [new global.Error(), -4, -27];
|
|
48
|
+
const chunkEYJEUXXCJs1 = () => withTiming(isVisible ? 1 : 0, {
|
|
49
|
+
duration: DURATION
|
|
50
|
+
});
|
|
51
|
+
chunkEYJEUXXCJs1.__closure = {
|
|
52
|
+
withTiming,
|
|
53
|
+
isVisible,
|
|
54
|
+
DURATION
|
|
55
|
+
};
|
|
56
|
+
chunkEYJEUXXCJs1.__workletHash = 7679226029618;
|
|
57
|
+
chunkEYJEUXXCJs1.__pluginVersion = "0.7.4";
|
|
58
|
+
chunkEYJEUXXCJs1.__initData = _worklet_7679226029618_init_data;
|
|
59
|
+
chunkEYJEUXXCJs1.__stackDetails = _e;
|
|
60
|
+
return chunkEYJEUXXCJs1;
|
|
61
|
+
}({
|
|
62
|
+
_worklet_7679226029618_init_data,
|
|
63
|
+
withTiming,
|
|
64
|
+
isVisible,
|
|
65
|
+
DURATION
|
|
66
|
+
}), [isVisible]);
|
|
67
|
+
const animatedStyle = useAnimatedStyle(function chunkEYJEUXXCJs2Factory({
|
|
68
|
+
_worklet_7274007758171_init_data,
|
|
69
|
+
progress,
|
|
70
|
+
FROM_SCALE
|
|
71
|
+
}) {
|
|
72
|
+
const _e = [new global.Error(), -3, -27];
|
|
73
|
+
const chunkEYJEUXXCJs2 = () => ({
|
|
74
|
+
opacity: progress.value,
|
|
75
|
+
transform: [{
|
|
76
|
+
scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value
|
|
77
|
+
}]
|
|
78
|
+
});
|
|
79
|
+
chunkEYJEUXXCJs2.__closure = {
|
|
80
|
+
progress,
|
|
81
|
+
FROM_SCALE
|
|
82
|
+
};
|
|
83
|
+
chunkEYJEUXXCJs2.__workletHash = 7274007758171;
|
|
84
|
+
chunkEYJEUXXCJs2.__pluginVersion = "0.7.4";
|
|
85
|
+
chunkEYJEUXXCJs2.__initData = _worklet_7274007758171_init_data;
|
|
86
|
+
chunkEYJEUXXCJs2.__stackDetails = _e;
|
|
87
|
+
return chunkEYJEUXXCJs2;
|
|
88
|
+
}({
|
|
89
|
+
_worklet_7274007758171_init_data,
|
|
90
|
+
progress,
|
|
91
|
+
FROM_SCALE
|
|
92
|
+
}));
|
|
93
|
+
return /* @__PURE__ */jsx(Animated.View, {
|
|
94
|
+
style: [style, animatedStyle],
|
|
95
|
+
children
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
export { SelectionFill };
|
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useControllableState
|
|
3
|
+
} from "./chunk-F6W3JQ7K.js";
|
|
4
|
+
import {
|
|
5
|
+
SelectionFill
|
|
6
|
+
} from "./chunk-EYJEUXXC.js";
|
|
7
|
+
import {
|
|
8
|
+
PressableFeedback,
|
|
9
|
+
usePressState
|
|
10
|
+
} from "./chunk-4HELPMAK.js";
|
|
11
|
+
import {
|
|
12
|
+
createRecipe,
|
|
13
|
+
radiusAxis
|
|
14
|
+
} from "./chunk-3JATAB7S.js";
|
|
15
|
+
import {
|
|
16
|
+
childrenToString,
|
|
17
|
+
createSlotContext,
|
|
18
|
+
useStyleProps
|
|
19
|
+
} from "./chunk-PMO62QK4.js";
|
|
20
|
+
import {
|
|
21
|
+
useXAUITheme
|
|
22
|
+
} from "./chunk-A3EGFI6T.js";
|
|
23
|
+
|
|
24
|
+
// src/components/radio/radio-indicator.tsx
|
|
25
|
+
import { forwardRef } from "react";
|
|
26
|
+
import { View } from "react-native";
|
|
27
|
+
|
|
28
|
+
// src/components/radio/radio.context.ts
|
|
29
|
+
var [RadioProvider, useRadio] = createSlotContext("Radio");
|
|
30
|
+
|
|
31
|
+
// src/components/radio/radio-indicator.tsx
|
|
32
|
+
import { jsx } from "react/jsx-runtime";
|
|
33
|
+
var RadioIndicator = forwardRef(
|
|
34
|
+
function RadioIndicator2({ children, animation = true, style, ...props }, ref) {
|
|
35
|
+
const { indicatorStyle, fillStyle, isSelected } = useRadio();
|
|
36
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
37
|
+
return /* @__PURE__ */ jsx(View, { ref, ...rest, style: [indicatorStyle, styleProps, style], children: /* @__PURE__ */ jsx(
|
|
38
|
+
SelectionFill,
|
|
39
|
+
{
|
|
40
|
+
isVisible: isSelected,
|
|
41
|
+
style: fillStyle,
|
|
42
|
+
animation,
|
|
43
|
+
children: children ?? /* @__PURE__ */ jsx(Thumb, {})
|
|
44
|
+
}
|
|
45
|
+
) });
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
RadioIndicator.displayName = "XAUI.Radio.Indicator";
|
|
49
|
+
function Thumb() {
|
|
50
|
+
const { thumbStyle } = useRadio();
|
|
51
|
+
return /* @__PURE__ */ jsx(View, { style: thumbStyle });
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// src/components/radio/radio-label.tsx
|
|
55
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
56
|
+
import { Text } from "react-native";
|
|
57
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
58
|
+
var RadioLabel = forwardRef2(function RadioLabel2({ children, style, ...props }, ref) {
|
|
59
|
+
const { labelStyle } = useRadio();
|
|
60
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
61
|
+
return /* @__PURE__ */ jsx2(Text, { ref, style: [labelStyle, styleProps, style], ...rest, children });
|
|
62
|
+
});
|
|
63
|
+
RadioLabel.displayName = "XAUI.Radio.Label";
|
|
64
|
+
|
|
65
|
+
// src/components/radio/radio.tsx
|
|
66
|
+
import { forwardRef as forwardRef3, useCallback, useMemo } from "react";
|
|
67
|
+
|
|
68
|
+
// src/components/radio/radio.recipe.ts
|
|
69
|
+
var SLOTS = ["root", "indicator", "fill", "thumb", "label"];
|
|
70
|
+
var VARIANT_TOKENS = {
|
|
71
|
+
primary: {
|
|
72
|
+
bg: "fieldBackground",
|
|
73
|
+
border: "fieldBorder",
|
|
74
|
+
bgSelected: "accent",
|
|
75
|
+
fgSelected: "accentForeground"
|
|
76
|
+
},
|
|
77
|
+
secondary: {
|
|
78
|
+
bg: "default",
|
|
79
|
+
border: "fieldBorder",
|
|
80
|
+
bgSelected: "accent",
|
|
81
|
+
fgSelected: "accentForeground"
|
|
82
|
+
},
|
|
83
|
+
tertiary: {
|
|
84
|
+
border: "fieldBorder",
|
|
85
|
+
bgSelected: "accent",
|
|
86
|
+
fgSelected: "accentForeground"
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
function sizeAxis(step) {
|
|
90
|
+
const { box, label, gap } = step;
|
|
91
|
+
return (theme) => {
|
|
92
|
+
const side = theme.spacing(box);
|
|
93
|
+
const dot = Math.round(side * THUMB_RATIO);
|
|
94
|
+
return {
|
|
95
|
+
root: { gap: theme.spacing(gap) },
|
|
96
|
+
indicator: { width: side, height: side },
|
|
97
|
+
thumb: { width: dot, height: dot, borderRadius: dot / 2 },
|
|
98
|
+
label: {
|
|
99
|
+
fontSize: theme.fontSizes[label],
|
|
100
|
+
lineHeight: theme.lineHeights[label]
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
var THUMB_RATIO = 10 / 24;
|
|
106
|
+
var SIZES = {
|
|
107
|
+
sm: { box: 5, gap: 2, label: "sm" },
|
|
108
|
+
md: { box: 6, gap: 2, label: "md" },
|
|
109
|
+
lg: { box: 7, gap: 2.5, label: "lg" }
|
|
110
|
+
};
|
|
111
|
+
var radioRecipe = createRecipe({
|
|
112
|
+
slots: SLOTS,
|
|
113
|
+
base: (theme) => ({
|
|
114
|
+
root: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start" },
|
|
115
|
+
indicator: {
|
|
116
|
+
alignItems: "center",
|
|
117
|
+
justifyContent: "center",
|
|
118
|
+
borderWidth: theme.borderWidth.field,
|
|
119
|
+
// The one shape decision this component makes, and the whole difference between it
|
|
120
|
+
// and the `Checkbox`: a radio is round, at every size. `radius` still overrides it.
|
|
121
|
+
borderRadius: theme.radius.full,
|
|
122
|
+
overflow: "hidden"
|
|
123
|
+
},
|
|
124
|
+
fill: {
|
|
125
|
+
position: "absolute",
|
|
126
|
+
top: 0,
|
|
127
|
+
bottom: 0,
|
|
128
|
+
start: 0,
|
|
129
|
+
end: 0,
|
|
130
|
+
alignItems: "center",
|
|
131
|
+
justifyContent: "center"
|
|
132
|
+
},
|
|
133
|
+
label: {
|
|
134
|
+
fontFamily: theme.fontFamilies.body,
|
|
135
|
+
color: theme.colors.foreground
|
|
136
|
+
}
|
|
137
|
+
}),
|
|
138
|
+
variantTokens: VARIANT_TOKENS,
|
|
139
|
+
/** The `Checkbox`'s paint, with a dot where the check was. */
|
|
140
|
+
paint: (theme, colors) => ({
|
|
141
|
+
indicator: {
|
|
142
|
+
backgroundColor: colors.bg,
|
|
143
|
+
borderColor: colors.border,
|
|
144
|
+
borderWidth: colors.border ? theme.borderWidth.field : 0
|
|
145
|
+
},
|
|
146
|
+
fill: { backgroundColor: colors.bgSelected },
|
|
147
|
+
thumb: { backgroundColor: colors.fgSelected }
|
|
148
|
+
}),
|
|
149
|
+
variants: {
|
|
150
|
+
size: {
|
|
151
|
+
sm: sizeAxis(SIZES.sm),
|
|
152
|
+
md: sizeAxis(SIZES.md),
|
|
153
|
+
lg: sizeAxis(SIZES.lg)
|
|
154
|
+
},
|
|
155
|
+
radius: radiusAxis("indicator"),
|
|
156
|
+
/** Declared after `size` so its border wins. The `Checkbox`'s rule, to the letter. */
|
|
157
|
+
isInvalid: {
|
|
158
|
+
true: (theme) => ({
|
|
159
|
+
indicator: { borderColor: theme.colors.danger, backgroundColor: void 0 },
|
|
160
|
+
fill: { backgroundColor: theme.colors.danger },
|
|
161
|
+
thumb: { backgroundColor: theme.colors.dangerForeground },
|
|
162
|
+
label: { color: theme.colors.danger }
|
|
163
|
+
})
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
compoundVariants: [
|
|
167
|
+
{
|
|
168
|
+
when: { variant: "primary" },
|
|
169
|
+
style: (theme) => ({ indicator: theme.shadows.field })
|
|
170
|
+
}
|
|
171
|
+
],
|
|
172
|
+
states: {
|
|
173
|
+
disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
|
|
174
|
+
},
|
|
175
|
+
defaultVariants: { variant: "secondary", size: "md" }
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
// src/components/radio/radio.tsx
|
|
179
|
+
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
180
|
+
var RadioRoot = forwardRef3(function Radio({
|
|
181
|
+
children,
|
|
182
|
+
variant,
|
|
183
|
+
size,
|
|
184
|
+
radius,
|
|
185
|
+
color,
|
|
186
|
+
isSelected,
|
|
187
|
+
defaultSelected = false,
|
|
188
|
+
onSelectedChange,
|
|
189
|
+
isInvalid = false,
|
|
190
|
+
isDisabled = false,
|
|
191
|
+
asChild = false,
|
|
192
|
+
accessibilityRole,
|
|
193
|
+
accessibilityState,
|
|
194
|
+
animation,
|
|
195
|
+
style,
|
|
196
|
+
onPress,
|
|
197
|
+
onPressIn,
|
|
198
|
+
onPressOut,
|
|
199
|
+
...props
|
|
200
|
+
}, ref) {
|
|
201
|
+
const theme = useXAUITheme();
|
|
202
|
+
const [styleProps, rest] = useStyleProps(props);
|
|
203
|
+
const [isPressed, press] = usePressState({ onPressIn, onPressOut });
|
|
204
|
+
const [selected, setSelected] = useControllableState({
|
|
205
|
+
value: isSelected,
|
|
206
|
+
defaultValue: defaultSelected,
|
|
207
|
+
onChange: onSelectedChange
|
|
208
|
+
});
|
|
209
|
+
const handlePress = useCallback(
|
|
210
|
+
(event) => {
|
|
211
|
+
setSelected(true);
|
|
212
|
+
onPress?.(event);
|
|
213
|
+
},
|
|
214
|
+
[setSelected, onPress]
|
|
215
|
+
);
|
|
216
|
+
const selection = {
|
|
217
|
+
variant,
|
|
218
|
+
size,
|
|
219
|
+
radius,
|
|
220
|
+
isInvalid: isInvalid ? "true" : void 0
|
|
221
|
+
};
|
|
222
|
+
const states = { pressed: isPressed, disabled: isDisabled };
|
|
223
|
+
const styles = radioRecipe.resolve({ theme, selection, states });
|
|
224
|
+
const tint = color && !isInvalid ? radioRecipe.tint({ theme, color, selection, states }) : void 0;
|
|
225
|
+
const context = useMemo(
|
|
226
|
+
() => ({
|
|
227
|
+
// The tint never reaches the circle at rest — only the fill and the dot that say it
|
|
228
|
+
// is the chosen one. The `Checkbox` says why, at the same line.
|
|
229
|
+
indicatorStyle: styles.indicator,
|
|
230
|
+
fillStyle: tint ? [styles.fill, tint.fill] : styles.fill,
|
|
231
|
+
thumbStyle: tint ? [styles.thumb, tint.thumb] : styles.thumb,
|
|
232
|
+
labelStyle: styles.label,
|
|
233
|
+
isSelected: selected,
|
|
234
|
+
isDisabled,
|
|
235
|
+
isInvalid
|
|
236
|
+
}),
|
|
237
|
+
[styles, tint, selected, isDisabled, isInvalid]
|
|
238
|
+
);
|
|
239
|
+
const rootStyle = [
|
|
240
|
+
styles.root,
|
|
241
|
+
tint?.root,
|
|
242
|
+
styleProps,
|
|
243
|
+
typeof style === "function" ? style({ pressed: isPressed }) : style
|
|
244
|
+
];
|
|
245
|
+
const text = childrenToString(children);
|
|
246
|
+
const content = text !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
247
|
+
/* @__PURE__ */ jsx3(RadioIndicator, {}),
|
|
248
|
+
/* @__PURE__ */ jsx3(RadioLabel, { children: text })
|
|
249
|
+
] }) : children ?? /* @__PURE__ */ jsx3(RadioIndicator, {});
|
|
250
|
+
return /* @__PURE__ */ jsx3(RadioProvider, { value: context, children: /* @__PURE__ */ jsx3(
|
|
251
|
+
PressableFeedback,
|
|
252
|
+
{
|
|
253
|
+
ref,
|
|
254
|
+
isPressed,
|
|
255
|
+
isDisabled,
|
|
256
|
+
asChild,
|
|
257
|
+
animation,
|
|
258
|
+
accessibilityRole: accessibilityRole ?? "radio",
|
|
259
|
+
accessibilityState: {
|
|
260
|
+
checked: selected,
|
|
261
|
+
disabled: isDisabled,
|
|
262
|
+
...accessibilityState
|
|
263
|
+
},
|
|
264
|
+
"aria-invalid": isInvalid,
|
|
265
|
+
...rest,
|
|
266
|
+
style: rootStyle,
|
|
267
|
+
onPress: handlePress,
|
|
268
|
+
onPressIn: press.onPressIn,
|
|
269
|
+
onPressOut: press.onPressOut,
|
|
270
|
+
children: asChild ? children : content
|
|
271
|
+
}
|
|
272
|
+
) });
|
|
273
|
+
});
|
|
274
|
+
RadioRoot.displayName = "XAUI.Radio.Root";
|
|
275
|
+
|
|
276
|
+
// src/components/radio/index.ts
|
|
277
|
+
var Radio2 = Object.assign(RadioRoot, {
|
|
278
|
+
Indicator: RadioIndicator,
|
|
279
|
+
Label: RadioLabel
|
|
280
|
+
});
|
|
281
|
+
|
|
282
|
+
export {
|
|
283
|
+
useRadio,
|
|
284
|
+
RadioIndicator,
|
|
285
|
+
RadioLabel,
|
|
286
|
+
radioRecipe,
|
|
287
|
+
RadioRoot,
|
|
288
|
+
Radio2 as Radio
|
|
289
|
+
};
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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
2
|
|
|
3
3
|
var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
var _chunkE6EFYPJRcjs = require('./chunk-E6EFYPJR.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
6
9
|
|
|
7
10
|
var _chunkIG4Q3WQOcjs = require('./chunk-IG4Q3WQO.cjs');
|
|
8
11
|
|
|
@@ -22,47 +25,21 @@ var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
|
|
|
22
25
|
var _react = require('react');
|
|
23
26
|
var _reactnative = require('react-native');
|
|
24
27
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
|
|
29
|
-
|
|
30
28
|
// src/components/checkbox/checkbox.context.ts
|
|
31
29
|
var [CheckboxProvider, useCheckbox] = _chunkHUZ4AUM2cjs.createSlotContext.call(void 0, "Checkbox");
|
|
32
30
|
|
|
33
31
|
// src/components/checkbox/checkbox-indicator.tsx
|
|
34
32
|
var _jsxruntime = require('react/jsx-runtime');
|
|
35
|
-
var DURATION = 120;
|
|
36
|
-
var FROM_SCALE = 0.8;
|
|
37
33
|
var CheckboxIndicator = _react.forwardRef.call(void 0,
|
|
38
34
|
function CheckboxIndicator2({ children, animation = true, style, ...props }, ref) {
|
|
39
|
-
const { indicatorStyle, isSelected, isIndeterminate } = useCheckbox();
|
|
35
|
+
const { indicatorStyle, fillStyle, isSelected, isIndeterminate } = useCheckbox();
|
|
40
36
|
const [styleProps, rest] = _chunkHUZ4AUM2cjs.useStyleProps.call(void 0, props);
|
|
41
37
|
const isFilled = isSelected || isIndeterminate;
|
|
42
38
|
const mark = _nullishCoalesce(children, () => ( (isIndeterminate ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dash, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Check, {}))));
|
|
43
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [indicatorStyle, styleProps, style], children:
|
|
39
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [indicatorStyle, styleProps, style], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkE6EFYPJRcjs.SelectionFill, { isVisible: isFilled, style: fillStyle, animation, children: mark }) });
|
|
44
40
|
}
|
|
45
41
|
);
|
|
46
42
|
CheckboxIndicator.displayName = "XAUI.Checkbox.Indicator";
|
|
47
|
-
function AnimatedFill({
|
|
48
|
-
isSelected,
|
|
49
|
-
children
|
|
50
|
-
}) {
|
|
51
|
-
const { fillStyle } = useCheckbox();
|
|
52
|
-
const progress = _reactnativereanimated.useDerivedValue.call(void 0,
|
|
53
|
-
() => _reactnativereanimated.withTiming.call(void 0, isSelected ? 1 : 0, { duration: DURATION }),
|
|
54
|
-
[isSelected]
|
|
55
|
-
);
|
|
56
|
-
const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
|
|
57
|
-
opacity: progress.value,
|
|
58
|
-
transform: [{ scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value }]
|
|
59
|
-
}));
|
|
60
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { style: [fillStyle, animatedStyle], children });
|
|
61
|
-
}
|
|
62
|
-
function StaticFill({ children }) {
|
|
63
|
-
const { fillStyle } = useCheckbox();
|
|
64
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: fillStyle, children });
|
|
65
|
-
}
|
|
66
43
|
function Check() {
|
|
67
44
|
const { checkStyle } = useCheckbox();
|
|
68
45
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: checkStyle });
|
|
@@ -294,7 +271,11 @@ var CheckboxRoot = _react.forwardRef.call(void 0, function Checkbox({
|
|
|
294
271
|
const tint = color && !isInvalid ? checkboxRecipe.tint({ theme, color, selection, states }) : void 0;
|
|
295
272
|
const context = _react.useMemo.call(void 0,
|
|
296
273
|
() => ({
|
|
297
|
-
|
|
274
|
+
// The tint never reaches the box **at rest**, only the two nodes that say the box
|
|
275
|
+
// is ticked. `paint` writes the resting fill from `bg` and the tint pass re-runs
|
|
276
|
+
// `paint`, so applying `tint.indicator` here would paint an unticked box in the
|
|
277
|
+
// caller's brand colour — which reads as ticked, which is the one thing it is not.
|
|
278
|
+
indicatorStyle: styles.indicator,
|
|
298
279
|
fillStyle: tint ? [styles.fill, tint.fill] : styles.fill,
|
|
299
280
|
checkStyle: tint ? [styles.check, tint.check] : styles.check,
|
|
300
281
|
dashStyle: tint ? [styles.dash, tint.dash] : styles.dash,
|
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _chunkV6DGGDHFcjs = require('../../chunk-V6DGGDHF.cjs');
|
|
9
9
|
require('../../chunk-7EIHHOHP.cjs');
|
|
10
|
+
require('../../chunk-E6EFYPJR.cjs');
|
|
10
11
|
require('../../chunk-IG4Q3WQO.cjs');
|
|
11
12
|
require('../../chunk-EJQCQPET.cjs');
|
|
12
13
|
require('../../chunk-YXVKQMCK.cjs');
|
|
@@ -20,4 +21,4 @@ require('../../chunk-MC7SY2QH.cjs');
|
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
|
|
23
|
-
exports.Checkbox =
|
|
24
|
+
exports.Checkbox = _chunkV6DGGDHFcjs.Checkbox; exports.CheckboxIndicator = _chunkV6DGGDHFcjs.CheckboxIndicator; exports.CheckboxLabel = _chunkV6DGGDHFcjs.CheckboxLabel; exports.CheckboxRoot = _chunkV6DGGDHFcjs.CheckboxRoot; exports.checkboxRecipe = _chunkV6DGGDHFcjs.checkboxRecipe; exports.useCheckbox = _chunkV6DGGDHFcjs.useCheckbox;
|
|
@@ -607,16 +607,15 @@ declare const CheckboxRoot: react.ForwardRefExoticComponent<{
|
|
|
607
607
|
* from where they look like a tick — so a checkbox works in a project that has installed
|
|
608
608
|
* no icon set. That is the `CloseButton`'s bargain, taken for the same reason.
|
|
609
609
|
*
|
|
610
|
-
* The fill
|
|
611
|
-
*
|
|
612
|
-
* check arriving before its background reads as a glitch rather than as an animation.
|
|
610
|
+
* The fill and its motion are `SelectionFill`'s, shared with the `Radio`: what differs
|
|
611
|
+
* between the two controls is the mark and the shape it sits in, not how either arrives.
|
|
613
612
|
*/
|
|
614
613
|
declare const CheckboxIndicator: react.ForwardRefExoticComponent<{
|
|
615
|
-
children?: ReactNode;
|
|
614
|
+
children?: react.ReactNode;
|
|
616
615
|
animation?: boolean;
|
|
617
616
|
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
618
617
|
} & Omit<react_native.ViewProps, keyof {
|
|
619
|
-
children?: ReactNode;
|
|
618
|
+
children?: react.ReactNode;
|
|
620
619
|
animation?: boolean;
|
|
621
620
|
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
622
621
|
}> & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "animation"> & react.RefAttributes<View>>;
|
|
@@ -607,16 +607,15 @@ declare const CheckboxRoot: react.ForwardRefExoticComponent<{
|
|
|
607
607
|
* from where they look like a tick — so a checkbox works in a project that has installed
|
|
608
608
|
* no icon set. That is the `CloseButton`'s bargain, taken for the same reason.
|
|
609
609
|
*
|
|
610
|
-
* The fill
|
|
611
|
-
*
|
|
612
|
-
* check arriving before its background reads as a glitch rather than as an animation.
|
|
610
|
+
* The fill and its motion are `SelectionFill`'s, shared with the `Radio`: what differs
|
|
611
|
+
* between the two controls is the mark and the shape it sits in, not how either arrives.
|
|
613
612
|
*/
|
|
614
613
|
declare const CheckboxIndicator: react.ForwardRefExoticComponent<{
|
|
615
|
-
children?: ReactNode;
|
|
614
|
+
children?: react.ReactNode;
|
|
616
615
|
animation?: boolean;
|
|
617
616
|
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
618
617
|
} & Omit<react_native.ViewProps, keyof {
|
|
619
|
-
children?: ReactNode;
|
|
618
|
+
children?: react.ReactNode;
|
|
620
619
|
animation?: boolean;
|
|
621
620
|
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
622
621
|
}> & Omit<ViewStyleProps, "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "animation"> & react.RefAttributes<View>>;
|
|
@@ -5,8 +5,9 @@ import {
|
|
|
5
5
|
CheckboxRoot,
|
|
6
6
|
checkboxRecipe,
|
|
7
7
|
useCheckbox
|
|
8
|
-
} from "../../chunk-
|
|
8
|
+
} from "../../chunk-3YN7JQ55.js";
|
|
9
9
|
import "../../chunk-F6W3JQ7K.js";
|
|
10
|
+
import "../../chunk-EYJEUXXC.js";
|
|
10
11
|
import "../../chunk-4HELPMAK.js";
|
|
11
12
|
import "../../chunk-EGLLDKN6.js";
|
|
12
13
|
import "../../chunk-3JATAB7S.js";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _chunk5A4M6X5Bcjs = require('../../chunk-5A4M6X5B.cjs');
|
|
9
|
+
require('../../chunk-7EIHHOHP.cjs');
|
|
10
|
+
require('../../chunk-E6EFYPJR.cjs');
|
|
11
|
+
require('../../chunk-IG4Q3WQO.cjs');
|
|
12
|
+
require('../../chunk-EJQCQPET.cjs');
|
|
13
|
+
require('../../chunk-YXVKQMCK.cjs');
|
|
14
|
+
require('../../chunk-HUZ4AUM2.cjs');
|
|
15
|
+
require('../../chunk-57SJ4LJF.cjs');
|
|
16
|
+
require('../../chunk-MC7SY2QH.cjs');
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
exports.Radio = _chunk5A4M6X5Bcjs.Radio; exports.RadioIndicator = _chunk5A4M6X5Bcjs.RadioIndicator; exports.RadioLabel = _chunk5A4M6X5Bcjs.RadioLabel; exports.RadioRoot = _chunk5A4M6X5Bcjs.RadioRoot; exports.radioRecipe = _chunk5A4M6X5Bcjs.radioRecipe; exports.useRadio = _chunk5A4M6X5Bcjs.useRadio;
|