@xaui/native 0.9.1-alpha.2 → 0.9.1-alpha.20
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-2WMVDMFV.cjs +62 -0
- package/dist/chunk-33QILJJH.cjs +143 -0
- package/dist/chunk-4EPS7UBO.js +496 -0
- package/dist/{chunk-M7P46XKI.cjs → chunk-57SJ4LJF.cjs} +33 -3
- package/dist/chunk-6ARON3XT.cjs +534 -0
- package/dist/{chunk-RBNCR5KB.js → chunk-A3EGFI6T.js} +31 -1
- package/dist/chunk-A4VD4MHK.cjs +757 -0
- package/dist/{chunk-NHPQQQ7P.cjs → chunk-BHTFIZTQ.cjs} +55 -88
- package/dist/chunk-EVXZGNPA.cjs +303 -0
- package/dist/chunk-EXX6ATAS.js +303 -0
- package/dist/chunk-GGW42MY4.js +20 -0
- package/dist/chunk-JXLRHKCQ.js +143 -0
- package/dist/chunk-MC7SY2QH.cjs +20 -0
- package/dist/{chunk-PBVPOX7D.js → chunk-MWXE7D4L.js} +29 -62
- package/dist/{chunk-RCP3SD26.js → chunk-N7C4UNUL.js} +2 -126
- package/dist/chunk-RMLFMRWL.js +102 -0
- package/dist/chunk-UBA6AEY6.cjs +102 -0
- package/dist/{chunk-B755PRVJ.cjs → chunk-UVO4GFSW.cjs} +3 -127
- package/dist/chunk-WXAME7KB.js +728 -0
- package/dist/chunk-XHZBXYVU.js +62 -0
- package/dist/components/button/index.cjs +15 -0
- package/dist/components/button/index.d.cts +658 -0
- package/dist/components/button/index.d.ts +658 -0
- package/dist/components/button/index.js +15 -0
- package/dist/components/typography/index.cjs +14 -0
- package/dist/components/typography/index.d.cts +116 -0
- package/dist/components/typography/index.d.ts +116 -0
- package/dist/components/typography/index.js +14 -0
- package/dist/components/view/index.cjs +16 -0
- package/dist/components/view/index.d.cts +152 -0
- package/dist/components/view/index.d.ts +152 -0
- package/dist/components/view/index.js +16 -0
- package/dist/create-recipe-C0XXjuow.d.cts +89 -0
- package/dist/create-recipe-CPXFo2rk.d.ts +89 -0
- package/dist/index.cjs +151 -5
- package/dist/index.d.cts +77 -4
- package/dist/index.d.ts +77 -4
- package/dist/index.js +155 -9
- package/dist/pressable-feedback.type-1K8YEOb8.d.cts +195 -0
- package/dist/pressable-feedback.type-BwkKLQlX.d.ts +195 -0
- package/dist/style-props.type-B1BG5TCm.d.cts +31 -0
- package/dist/style-props.type-B1BG5TCm.d.ts +31 -0
- package/dist/system/index.cjs +64 -3
- package/dist/system/index.d.cts +299 -75
- package/dist/system/index.d.ts +299 -75
- package/dist/system/index.js +66 -5
- package/dist/theme/index.cjs +4 -3
- package/dist/theme/index.d.cts +26 -14
- package/dist/theme/index.d.ts +26 -14
- package/dist/theme/index.js +7 -6
- package/dist/{theme.type-B3ODSLbB.d.cts → theme.type-C2gNHpEx.d.cts} +8 -2
- package/dist/{theme.type-B3ODSLbB.d.ts → theme.type-C2gNHpEx.d.ts} +8 -2
- package/package.json +64 -18
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,78 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.cjs';
|
|
2
|
+
export { TextSpan, TextSpanProps, Typography, TypographyProps, TypographySlot, TypographyVariant, typographyRecipe } from './components/typography/index.cjs';
|
|
3
|
+
export { AxisProps, Column, ColumnProps, Grid, GridContextValue, GridItemProps, GridProps, Row, RowProps, Stack, StackItemProps, StackProps, useGrid } from './components/view/index.cjs';
|
|
4
|
+
import { RefCallback } from 'react';
|
|
5
|
+
import { PossibleRef } from './system/index.cjs';
|
|
6
|
+
export { AsChildProps, FEEDBACK_OVERLAY, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, SCALE_REFERENCE_WIDTH, Slot, SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps } from './system/index.cjs';
|
|
7
|
+
import { GestureResponderEvent } from 'react-native';
|
|
8
|
+
export { A as AnimationConfig, c as AnimationProp, F as FeedbackContext, I as IconComponentProps, a as IconContextValue, b as IconProps, P as PressableFeedbackProps, R as RadiusStyle, d as ResolvedAnimation, e as RippleWave, S as SlotAnimation } from './pressable-feedback.type-1K8YEOb8.cjs';
|
|
9
|
+
export { A as Axes, C as CompoundVariant, R as Recipe, b as RecipeConfig, a as ResolveArgs, d as ResolvedSelection, e as ResolvedStyles, S as Selection, f as SlotStyle, g as SlotStyles, h as StateName, i as States, j as StyleFn, T as TintArgs, V as VariantColors, k as VariantRole, l as VariantTokens, c as createRecipe } from './create-recipe-C0XXjuow.cjs';
|
|
10
|
+
export { D as DirectionalStyleKey, I as ImageStyleProps, S as StyleProps, T as TextStyleProps, V as ViewStyleProps } from './style-props.type-B1BG5TCm.cjs';
|
|
2
11
|
export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.cjs';
|
|
3
|
-
export { C as ColorMode, F as FontSizeKey,
|
|
4
|
-
import 'react-native';
|
|
5
|
-
|
|
12
|
+
export { C as ColorMode, F as FontSizeKey, b as FontWeightKey, R as RadiusKey, S as Size, a as XAUIColors, c as XAUIDerivedColors, d as XAUIPrimitiveColors, e as XAUIRadius, f as XAUIShadow, g as XAUISourceColors, X as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C2gNHpEx.cjs';
|
|
13
|
+
import 'react-native-reanimated';
|
|
14
|
+
|
|
15
|
+
type ControllableStateOptions<T> = {
|
|
16
|
+
/** Present means controlled: the caller owns the value and this never stores one. */
|
|
17
|
+
value?: T;
|
|
18
|
+
/** The starting value when uncontrolled. */
|
|
19
|
+
defaultValue: T;
|
|
20
|
+
/** Called with every new value, controlled or not. */
|
|
21
|
+
onChange?: (value: T) => void;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* One state that works both ways, so a component never has two code paths for "the
|
|
25
|
+
* caller drives this" and "we do".
|
|
26
|
+
*
|
|
27
|
+
* The setter is stable across renders and reads the current value from a ref, so a
|
|
28
|
+
* handler built on it can be passed to a memoized child without rebuilding it on every
|
|
29
|
+
* render — which is the whole reason components reach for this rather than a local
|
|
30
|
+
* `useState` plus an `if`.
|
|
31
|
+
*/
|
|
32
|
+
declare function useControllableState<T>({ value, defaultValue, onChange, }: ControllableStateOptions<T>): [T, (next: T | ((current: T) => T)) => void];
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* `mergeRefs` for a component that renders: memoized on the refs it was given, so React
|
|
36
|
+
* does not detach and reattach every one of them on each render — which it does whenever
|
|
37
|
+
* a ref callback changes identity, and which costs a node measurement every time.
|
|
38
|
+
*/
|
|
39
|
+
declare function useMergedRef<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* `null` as much as `undefined`: that is how `PressableProps` types its handlers, and a
|
|
43
|
+
* root forwarding what it was given should not have to launder them first.
|
|
44
|
+
*/
|
|
45
|
+
type PressHandlers = {
|
|
46
|
+
onPressIn?: PressHandler | null;
|
|
47
|
+
onPressOut?: PressHandler | null;
|
|
48
|
+
};
|
|
49
|
+
type PressHandler = (event: GestureResponderEvent) => void;
|
|
50
|
+
/**
|
|
51
|
+
* The press state a root owns, with the handlers that maintain it.
|
|
52
|
+
*
|
|
53
|
+
* It exists because every pressable component needs the same three things and gets one
|
|
54
|
+
* of them wrong on its own: the state has to be *up here* — the recipe resolves on it
|
|
55
|
+
* (R5) — the caller's handlers must be **composed, never replaced**, and the returned
|
|
56
|
+
* handlers must keep their identity so passing them down does not defeat a memo.
|
|
57
|
+
*
|
|
58
|
+
* ```tsx
|
|
59
|
+
* const [isPressed, pressHandlers] = usePressState(props)
|
|
60
|
+
* const styles = recipe.resolve({ theme, selection, states: { pressed: isPressed } })
|
|
61
|
+
* <PressableFeedback isPressed={isPressed} {...pressHandlers} />
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
declare function usePressState(handlers?: PressHandlers): [boolean, {
|
|
65
|
+
onPressIn: PressHandler;
|
|
66
|
+
onPressOut: PressHandler;
|
|
67
|
+
}];
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* The value from the render before this one, `undefined` on the first.
|
|
71
|
+
*
|
|
72
|
+
* Written in an effect rather than during render on purpose: reading it mid-render would
|
|
73
|
+
* make "previous" mean something different depending on whether React re-ran the render,
|
|
74
|
+
* which under StrictMode it does.
|
|
75
|
+
*/
|
|
76
|
+
declare function usePrevious<T>(value: T): T | undefined;
|
|
77
|
+
|
|
78
|
+
export { type ControllableStateOptions, PossibleRef, type PressHandlers, useControllableState, useMergedRef, usePressState, usePrevious };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,78 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.js';
|
|
2
|
+
export { TextSpan, TextSpanProps, Typography, TypographyProps, TypographySlot, TypographyVariant, typographyRecipe } from './components/typography/index.js';
|
|
3
|
+
export { AxisProps, Column, ColumnProps, Grid, GridContextValue, GridItemProps, GridProps, Row, RowProps, Stack, StackItemProps, StackProps, useGrid } from './components/view/index.js';
|
|
4
|
+
import { RefCallback } from 'react';
|
|
5
|
+
import { PossibleRef } from './system/index.js';
|
|
6
|
+
export { AsChildProps, FEEDBACK_OVERLAY, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, SCALE_REFERENCE_WIDTH, Slot, SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps } from './system/index.js';
|
|
7
|
+
import { GestureResponderEvent } from 'react-native';
|
|
8
|
+
export { A as AnimationConfig, c as AnimationProp, F as FeedbackContext, I as IconComponentProps, a as IconContextValue, b as IconProps, P as PressableFeedbackProps, R as RadiusStyle, d as ResolvedAnimation, e as RippleWave, S as SlotAnimation } from './pressable-feedback.type-BwkKLQlX.js';
|
|
9
|
+
export { A as Axes, C as CompoundVariant, R as Recipe, b as RecipeConfig, a as ResolveArgs, d as ResolvedSelection, e as ResolvedStyles, S as Selection, f as SlotStyle, g as SlotStyles, h as StateName, i as States, j as StyleFn, T as TintArgs, V as VariantColors, k as VariantRole, l as VariantTokens, c as createRecipe } from './create-recipe-CPXFo2rk.js';
|
|
10
|
+
export { D as DirectionalStyleKey, I as ImageStyleProps, S as StyleProps, T as TextStyleProps, V as ViewStyleProps } from './style-props.type-B1BG5TCm.js';
|
|
2
11
|
export { ColorModePreference, PaletteFamily, PaletteShade, ThemeContext, XAUIProvider, XAUIProviderProps, XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme } from './theme/index.js';
|
|
3
|
-
export { C as ColorMode, F as FontSizeKey,
|
|
4
|
-
import 'react-native';
|
|
5
|
-
|
|
12
|
+
export { C as ColorMode, F as FontSizeKey, b as FontWeightKey, R as RadiusKey, S as Size, a as XAUIColors, c as XAUIDerivedColors, d as XAUIPrimitiveColors, e as XAUIRadius, f as XAUIShadow, g as XAUISourceColors, X as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C2gNHpEx.js';
|
|
13
|
+
import 'react-native-reanimated';
|
|
14
|
+
|
|
15
|
+
type ControllableStateOptions<T> = {
|
|
16
|
+
/** Present means controlled: the caller owns the value and this never stores one. */
|
|
17
|
+
value?: T;
|
|
18
|
+
/** The starting value when uncontrolled. */
|
|
19
|
+
defaultValue: T;
|
|
20
|
+
/** Called with every new value, controlled or not. */
|
|
21
|
+
onChange?: (value: T) => void;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* One state that works both ways, so a component never has two code paths for "the
|
|
25
|
+
* caller drives this" and "we do".
|
|
26
|
+
*
|
|
27
|
+
* The setter is stable across renders and reads the current value from a ref, so a
|
|
28
|
+
* handler built on it can be passed to a memoized child without rebuilding it on every
|
|
29
|
+
* render — which is the whole reason components reach for this rather than a local
|
|
30
|
+
* `useState` plus an `if`.
|
|
31
|
+
*/
|
|
32
|
+
declare function useControllableState<T>({ value, defaultValue, onChange, }: ControllableStateOptions<T>): [T, (next: T | ((current: T) => T)) => void];
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* `mergeRefs` for a component that renders: memoized on the refs it was given, so React
|
|
36
|
+
* does not detach and reattach every one of them on each render — which it does whenever
|
|
37
|
+
* a ref callback changes identity, and which costs a node measurement every time.
|
|
38
|
+
*/
|
|
39
|
+
declare function useMergedRef<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* `null` as much as `undefined`: that is how `PressableProps` types its handlers, and a
|
|
43
|
+
* root forwarding what it was given should not have to launder them first.
|
|
44
|
+
*/
|
|
45
|
+
type PressHandlers = {
|
|
46
|
+
onPressIn?: PressHandler | null;
|
|
47
|
+
onPressOut?: PressHandler | null;
|
|
48
|
+
};
|
|
49
|
+
type PressHandler = (event: GestureResponderEvent) => void;
|
|
50
|
+
/**
|
|
51
|
+
* The press state a root owns, with the handlers that maintain it.
|
|
52
|
+
*
|
|
53
|
+
* It exists because every pressable component needs the same three things and gets one
|
|
54
|
+
* of them wrong on its own: the state has to be *up here* — the recipe resolves on it
|
|
55
|
+
* (R5) — the caller's handlers must be **composed, never replaced**, and the returned
|
|
56
|
+
* handlers must keep their identity so passing them down does not defeat a memo.
|
|
57
|
+
*
|
|
58
|
+
* ```tsx
|
|
59
|
+
* const [isPressed, pressHandlers] = usePressState(props)
|
|
60
|
+
* const styles = recipe.resolve({ theme, selection, states: { pressed: isPressed } })
|
|
61
|
+
* <PressableFeedback isPressed={isPressed} {...pressHandlers} />
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
declare function usePressState(handlers?: PressHandlers): [boolean, {
|
|
65
|
+
onPressIn: PressHandler;
|
|
66
|
+
onPressOut: PressHandler;
|
|
67
|
+
}];
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* The value from the render before this one, `undefined` on the first.
|
|
71
|
+
*
|
|
72
|
+
* Written in an effect rather than during render on purpose: reading it mid-render would
|
|
73
|
+
* make "previous" mean something different depending on whether React re-ran the render,
|
|
74
|
+
* which under StrictMode it does.
|
|
75
|
+
*/
|
|
76
|
+
declare function usePrevious<T>(value: T): T | undefined;
|
|
77
|
+
|
|
78
|
+
export { type ControllableStateOptions, PossibleRef, type PressHandlers, useControllableState, useMergedRef, usePressState, usePrevious };
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,64 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Button,
|
|
3
|
+
buttonRecipe,
|
|
4
|
+
useButton,
|
|
5
|
+
usePressState,
|
|
6
|
+
warnDev
|
|
7
|
+
} from "./chunk-4EPS7UBO.js";
|
|
8
|
+
import {
|
|
9
|
+
TextSpan,
|
|
10
|
+
Typography,
|
|
11
|
+
typographyRecipe
|
|
12
|
+
} from "./chunk-RMLFMRWL.js";
|
|
13
|
+
import {
|
|
14
|
+
Column,
|
|
15
|
+
Grid,
|
|
16
|
+
Row,
|
|
17
|
+
Stack,
|
|
18
|
+
useGrid
|
|
19
|
+
} from "./chunk-JXLRHKCQ.js";
|
|
20
|
+
import {
|
|
21
|
+
Portal,
|
|
22
|
+
PortalContext,
|
|
23
|
+
PortalHost
|
|
24
|
+
} from "./chunk-XHZBXYVU.js";
|
|
25
|
+
import {
|
|
26
|
+
FEEDBACK_OVERLAY,
|
|
27
|
+
HIGHLIGHT_DURATION,
|
|
28
|
+
HIGHLIGHT_OPACITY,
|
|
29
|
+
Icon,
|
|
30
|
+
IconContext,
|
|
31
|
+
PRESS_DURATION,
|
|
32
|
+
PRESS_SCALE,
|
|
33
|
+
PressableFeedback,
|
|
34
|
+
RIPPLE_CONFIRM_DURATION,
|
|
35
|
+
RIPPLE_EXPAND_DURATION,
|
|
36
|
+
RIPPLE_FADE_IN,
|
|
37
|
+
RIPPLE_FADE_OUT,
|
|
38
|
+
RIPPLE_FADE_OUT_DELAY,
|
|
39
|
+
RIPPLE_OPACITY,
|
|
40
|
+
RIPPLE_START_SCALE,
|
|
41
|
+
SCALE_REFERENCE_WIDTH,
|
|
42
|
+
markOverlay,
|
|
43
|
+
pressScaleFor,
|
|
44
|
+
resolveAnimation,
|
|
45
|
+
resolveSlotAnimation,
|
|
46
|
+
rippleRadiusFor,
|
|
47
|
+
useFeedback,
|
|
48
|
+
useIconContext
|
|
49
|
+
} from "./chunk-WXAME7KB.js";
|
|
50
|
+
import {
|
|
51
|
+
createRecipe
|
|
52
|
+
} from "./chunk-N7C4UNUL.js";
|
|
1
53
|
import {
|
|
2
54
|
Slot,
|
|
3
55
|
childrenToString,
|
|
4
|
-
createRecipe,
|
|
5
56
|
createSlotContext,
|
|
6
57
|
mergeProps,
|
|
7
|
-
mergeRefs
|
|
8
|
-
|
|
58
|
+
mergeRefs,
|
|
59
|
+
useStyleProps
|
|
60
|
+
} from "./chunk-EXX6ATAS.js";
|
|
9
61
|
import {
|
|
10
|
-
ThemeContext,
|
|
11
62
|
XAUIProvider,
|
|
12
63
|
buildRadius,
|
|
13
64
|
buildShadows,
|
|
@@ -17,20 +68,100 @@ import {
|
|
|
17
68
|
palette,
|
|
18
69
|
primitives,
|
|
19
70
|
sourceKeys,
|
|
20
|
-
tokens
|
|
71
|
+
tokens
|
|
72
|
+
} from "./chunk-MWXE7D4L.js";
|
|
73
|
+
import {
|
|
74
|
+
ThemeContext,
|
|
75
|
+
deriveTint,
|
|
21
76
|
useColorMode,
|
|
22
77
|
useThemeColor,
|
|
23
78
|
useXAUITheme
|
|
24
|
-
} from "./chunk-
|
|
25
|
-
import
|
|
26
|
-
|
|
27
|
-
|
|
79
|
+
} from "./chunk-A3EGFI6T.js";
|
|
80
|
+
import "./chunk-GGW42MY4.js";
|
|
81
|
+
|
|
82
|
+
// src/hooks/use-controllable-state.ts
|
|
83
|
+
import { useCallback, useRef, useState } from "react";
|
|
84
|
+
function useControllableState({
|
|
85
|
+
value,
|
|
86
|
+
defaultValue,
|
|
87
|
+
onChange
|
|
88
|
+
}) {
|
|
89
|
+
const [uncontrolled, setUncontrolled] = useState(defaultValue);
|
|
90
|
+
const isControlled = value !== void 0;
|
|
91
|
+
const current = isControlled ? value : uncontrolled;
|
|
92
|
+
useControlWarning(isControlled);
|
|
93
|
+
const latest = useRef(current);
|
|
94
|
+
latest.current = current;
|
|
95
|
+
const onChangeRef = useRef(onChange);
|
|
96
|
+
onChangeRef.current = onChange;
|
|
97
|
+
const controlled = useRef(isControlled);
|
|
98
|
+
controlled.current = isControlled;
|
|
99
|
+
const set = useCallback((next) => {
|
|
100
|
+
const resolved = typeof next === "function" ? next(latest.current) : next;
|
|
101
|
+
if (resolved === latest.current) return;
|
|
102
|
+
if (!controlled.current) setUncontrolled(resolved);
|
|
103
|
+
onChangeRef.current?.(resolved);
|
|
104
|
+
}, []);
|
|
105
|
+
return [current, set];
|
|
106
|
+
}
|
|
107
|
+
function useControlWarning(isControlled) {
|
|
108
|
+
const wasControlled = useRef(isControlled);
|
|
109
|
+
if (wasControlled.current !== isControlled) {
|
|
110
|
+
warnDev(
|
|
111
|
+
`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.`
|
|
112
|
+
);
|
|
113
|
+
wasControlled.current = isControlled;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// src/hooks/use-merged-ref.ts
|
|
118
|
+
import { useMemo } from "react";
|
|
119
|
+
function useMergedRef(...refs) {
|
|
120
|
+
return useMemo(() => mergeRefs(...refs), refs);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// src/hooks/use-previous.ts
|
|
124
|
+
import { useEffect, useRef as useRef2 } from "react";
|
|
125
|
+
function usePrevious(value) {
|
|
126
|
+
const previous = useRef2(void 0);
|
|
127
|
+
useEffect(() => {
|
|
128
|
+
previous.current = value;
|
|
129
|
+
}, [value]);
|
|
130
|
+
return previous.current;
|
|
131
|
+
}
|
|
28
132
|
export {
|
|
133
|
+
Button,
|
|
134
|
+
Column,
|
|
135
|
+
FEEDBACK_OVERLAY,
|
|
136
|
+
Grid,
|
|
137
|
+
HIGHLIGHT_DURATION,
|
|
138
|
+
HIGHLIGHT_OPACITY,
|
|
139
|
+
Icon,
|
|
140
|
+
IconContext,
|
|
141
|
+
PRESS_DURATION,
|
|
142
|
+
PRESS_SCALE,
|
|
143
|
+
Portal,
|
|
144
|
+
PortalContext,
|
|
145
|
+
PortalHost,
|
|
146
|
+
PressableFeedback,
|
|
147
|
+
RIPPLE_CONFIRM_DURATION,
|
|
148
|
+
RIPPLE_EXPAND_DURATION,
|
|
149
|
+
RIPPLE_FADE_IN,
|
|
150
|
+
RIPPLE_FADE_OUT,
|
|
151
|
+
RIPPLE_FADE_OUT_DELAY,
|
|
152
|
+
RIPPLE_OPACITY,
|
|
153
|
+
RIPPLE_START_SCALE,
|
|
154
|
+
Row,
|
|
155
|
+
SCALE_REFERENCE_WIDTH,
|
|
29
156
|
Slot,
|
|
157
|
+
Stack,
|
|
158
|
+
TextSpan,
|
|
30
159
|
ThemeContext,
|
|
160
|
+
Typography,
|
|
31
161
|
XAUIProvider,
|
|
32
162
|
buildRadius,
|
|
33
163
|
buildShadows,
|
|
164
|
+
buttonRecipe,
|
|
34
165
|
childrenToString,
|
|
35
166
|
createRecipe,
|
|
36
167
|
createSlotContext,
|
|
@@ -38,13 +169,28 @@ export {
|
|
|
38
169
|
defaultTheme,
|
|
39
170
|
deriveColors,
|
|
40
171
|
deriveTint,
|
|
172
|
+
markOverlay,
|
|
41
173
|
mergeProps,
|
|
42
174
|
mergeRefs,
|
|
43
175
|
palette,
|
|
176
|
+
pressScaleFor,
|
|
44
177
|
primitives,
|
|
178
|
+
resolveAnimation,
|
|
179
|
+
resolveSlotAnimation,
|
|
180
|
+
rippleRadiusFor,
|
|
45
181
|
sourceKeys,
|
|
46
182
|
tokens,
|
|
183
|
+
typographyRecipe,
|
|
184
|
+
useButton,
|
|
47
185
|
useColorMode,
|
|
186
|
+
useControllableState,
|
|
187
|
+
useFeedback,
|
|
188
|
+
useGrid,
|
|
189
|
+
useIconContext,
|
|
190
|
+
useMergedRef,
|
|
191
|
+
usePressState,
|
|
192
|
+
usePrevious,
|
|
193
|
+
useStyleProps,
|
|
48
194
|
useThemeColor,
|
|
49
195
|
useXAUITheme
|
|
50
196
|
};
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { ComponentType, ReactNode } from 'react';
|
|
2
|
+
import { ImageSourcePropType, StyleProp, ImageStyle, PressableProps, ViewStyle } from 'react-native';
|
|
3
|
+
import { I as ImageStyleProps, V as ViewStyleProps } from './style-props.type-B1BG5TCm.cjs';
|
|
4
|
+
import { SharedValue } from 'react-native-reanimated';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
|
|
8
|
+
* `as` is handed. It is a convention rather than an interface anyone published, which is
|
|
9
|
+
* exactly why `Icon` exists: without it every call site computes the two values by hand.
|
|
10
|
+
*/
|
|
11
|
+
type IconComponentProps = {
|
|
12
|
+
size?: number;
|
|
13
|
+
color?: string;
|
|
14
|
+
};
|
|
15
|
+
/** What every form takes, and the only lever the two non-rendering ones have. */
|
|
16
|
+
type IconBase = {
|
|
17
|
+
/** Overrides what the surrounding slot asked for. */
|
|
18
|
+
size?: number;
|
|
19
|
+
/** A raw value (R7), never a token. Overrides the slot's. */
|
|
20
|
+
color?: string;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* An icon component — `size` and `color` are injected into it.
|
|
24
|
+
*
|
|
25
|
+
* No style props and no `style`: we do not render this node, the third party does, and
|
|
26
|
+
* there is no published interface that says it would accept either. Wrapping it in a view
|
|
27
|
+
* to make them work would add a level of depth to every icon in the library.
|
|
28
|
+
*/
|
|
29
|
+
type IconAsProps = IconBase & {
|
|
30
|
+
as: ComponentType<IconComponentProps>;
|
|
31
|
+
children?: never;
|
|
32
|
+
source?: never;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* A raw `react-native-svg` element, cloned with the resolved size and colour.
|
|
36
|
+
*
|
|
37
|
+
* No style props and no `style` either: the node is the caller's own element, and they can
|
|
38
|
+
* style it where they wrote it.
|
|
39
|
+
*/
|
|
40
|
+
type IconChildrenProps = IconBase & {
|
|
41
|
+
as?: never;
|
|
42
|
+
children: ReactNode;
|
|
43
|
+
source?: never;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* An image, tinted with the resolved colour — **the one form that carries R14**, because
|
|
47
|
+
* it is the one where we render the node.
|
|
48
|
+
*/
|
|
49
|
+
type IconSourceProps = IconBase & ImageStyleProps & {
|
|
50
|
+
as?: never;
|
|
51
|
+
children?: never;
|
|
52
|
+
source: ImageSourcePropType;
|
|
53
|
+
style?: StyleProp<ImageStyle>;
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* Three forms, and the type says which one you are in.
|
|
57
|
+
*
|
|
58
|
+
* The union is what makes R14's boundary checkable rather than merely documented. When
|
|
59
|
+
* every form declared the style props, `<Icon as={Trash2} marginEnd={8} />` compiled and
|
|
60
|
+
* did nothing at all — the prop was dropped on the two forms that do not render the node,
|
|
61
|
+
* silently, and only a comment said so. Now it is a compile error that points at `size`
|
|
62
|
+
* and `color`, which are the levers those forms actually have.
|
|
63
|
+
*
|
|
64
|
+
* It also makes the three mutually exclusive, which they always were at runtime: `as`
|
|
65
|
+
* wins over children, and children over `source`.
|
|
66
|
+
*/
|
|
67
|
+
type IconProps = IconAsProps | IconChildrenProps | IconSourceProps;
|
|
68
|
+
/** What a component root publishes so the icons inside it need no props at all. */
|
|
69
|
+
type IconContextValue = {
|
|
70
|
+
size?: number;
|
|
71
|
+
color?: string;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
type AnimationConfig = {
|
|
75
|
+
scale?: boolean;
|
|
76
|
+
highlight?: boolean;
|
|
77
|
+
ripple?: boolean;
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* `false` and `'disabled'` turn this component's animations off. `'disable-all'` turns
|
|
81
|
+
* them off for its descendants too — a long list kills every row's worklets with one
|
|
82
|
+
* prop instead of threading it down. An object switches them off one at a time.
|
|
83
|
+
*/
|
|
84
|
+
type AnimationProp = boolean | 'disabled' | 'disable-all' | AnimationConfig;
|
|
85
|
+
/** `animation` once normalised — what the components actually read. */
|
|
86
|
+
type ResolvedAnimation = {
|
|
87
|
+
scale: boolean;
|
|
88
|
+
highlight: boolean;
|
|
89
|
+
ripple: boolean;
|
|
90
|
+
/** True when every sub-animation is off: the branch that mounts no worklet at all. */
|
|
91
|
+
none: boolean;
|
|
92
|
+
/** Propagated to descendants through context. */
|
|
93
|
+
disableAll: boolean;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* R14 — it renders a `Pressable`, so it takes that node's style keys as props. The
|
|
97
|
+
* primitive every pressable component in the library is built on cannot be the one place
|
|
98
|
+
* where `padding={16}` has to become an object again.
|
|
99
|
+
*/
|
|
100
|
+
type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & ViewStyleProps & {
|
|
101
|
+
/** Controlled: the root owns the state, because its recipe resolves on it (R5). */
|
|
102
|
+
isPressed?: boolean;
|
|
103
|
+
/** R8: `disabled` is not part of the public vocabulary, `isX` is. */
|
|
104
|
+
isDisabled?: boolean;
|
|
105
|
+
/**
|
|
106
|
+
* Merge into the single child instead of rendering a pressable (R12) — **keeping the
|
|
107
|
+
* feedback**. Swapping this component out for a bare `Slot` would silently drop the
|
|
108
|
+
* touch feedback of every `asChild` control.
|
|
109
|
+
*/
|
|
110
|
+
asChild?: boolean;
|
|
111
|
+
animation?: AnimationProp;
|
|
112
|
+
style?: StyleProp<ViewStyle>;
|
|
113
|
+
/**
|
|
114
|
+
* The overlays are children, not a prop — `<PressableFeedback.Highlight />` or
|
|
115
|
+
* `<PressableFeedback.Ripple />`, in any order: the root paints them under everything
|
|
116
|
+
* else wherever they sit. The scale is the root's own and needs nothing rendered.
|
|
117
|
+
*
|
|
118
|
+
* `Pressable`'s function form is dropped on purpose. It exists to hand the press state
|
|
119
|
+
* to children; here the root above already owns that state and this publishes it
|
|
120
|
+
* through context, so the function form would be a second, quieter source of truth.
|
|
121
|
+
*/
|
|
122
|
+
children?: ReactNode;
|
|
123
|
+
};
|
|
124
|
+
/**
|
|
125
|
+
* A slot's own animation, overriding the blanket one on the root. `false` switches that
|
|
126
|
+
* slot off; the object tunes it. Deliberately two knobs rather than a full timing
|
|
127
|
+
* surface — anything past this is a different animation, and that is a component's job,
|
|
128
|
+
* not a prop's.
|
|
129
|
+
*/
|
|
130
|
+
type SlotAnimation = boolean | {
|
|
131
|
+
/** Milliseconds. Falls back to the shared press timing. */
|
|
132
|
+
duration?: number;
|
|
133
|
+
/** How far the overlay goes at full press, 0 to 1. */
|
|
134
|
+
opacity?: number;
|
|
135
|
+
};
|
|
136
|
+
/** One ripple wave. Two of them, so a rapid double tap does not cut the one in flight. */
|
|
137
|
+
type RippleWave = {
|
|
138
|
+
/** `0 → 1` as the circle opens. */
|
|
139
|
+
expand: SharedValue<number>;
|
|
140
|
+
/** `0 → 1` as the ink arrives, on its own curve. */
|
|
141
|
+
alpha: SharedValue<number>;
|
|
142
|
+
/** Where the finger landed, in the root's coordinates. */
|
|
143
|
+
origin: SharedValue<{
|
|
144
|
+
x: number;
|
|
145
|
+
y: number;
|
|
146
|
+
}>;
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* The corner keys an overlay copies off the root. The `Left`/`Right` forms are absent
|
|
150
|
+
* rather than forgotten: R13 bans them, because RN mirrors only the logical ones under RTL.
|
|
151
|
+
*/
|
|
152
|
+
type RadiusStyle = Pick<ViewStyle, 'borderRadius' | 'borderStartStartRadius' | 'borderStartEndRadius' | 'borderEndStartRadius' | 'borderEndEndRadius'>;
|
|
153
|
+
type FeedbackContext = {
|
|
154
|
+
/**
|
|
155
|
+
* The overlay's ink, resolved by the root from its own background.
|
|
156
|
+
*
|
|
157
|
+
* A wash or a wave has to contrast with what it sits on, and only the root knows that —
|
|
158
|
+
* it flattens its own `style` and reads `backgroundColor`, then takes the contrasting
|
|
159
|
+
* side the same way a tint does. Black ink at 10% on a saturated fill is close to
|
|
160
|
+
* invisible, which is the one thing a press indicator cannot be.
|
|
161
|
+
*/
|
|
162
|
+
ink: string;
|
|
163
|
+
/**
|
|
164
|
+
* The root's own corners, so an overlay rounds itself to match. `corners` and not
|
|
165
|
+
* `radius`: the ripple already has a radius, and it is a length in points rather than a
|
|
166
|
+
* shape.
|
|
167
|
+
*
|
|
168
|
+
* An absolute fill has square corners and every control here is rounded, so without this
|
|
169
|
+
* both the wash and the wave paint outside the surface at each corner. The overlay
|
|
170
|
+
* carries the clip rather than the root: clipping the root would also cut a child that
|
|
171
|
+
* legitimately overflows — a badge on a button's corner — and that child has nothing to
|
|
172
|
+
* do with the press.
|
|
173
|
+
*/
|
|
174
|
+
corners: RadiusStyle;
|
|
175
|
+
isPressed: boolean;
|
|
176
|
+
animation: ResolvedAnimation;
|
|
177
|
+
/** Absent on the static branch, where nothing animates and no worklet is mounted. */
|
|
178
|
+
progress?: SharedValue<number>;
|
|
179
|
+
/** How big the root is — what the scale coefficient is computed from. */
|
|
180
|
+
size?: SharedValue<{
|
|
181
|
+
width: number;
|
|
182
|
+
height: number;
|
|
183
|
+
}>;
|
|
184
|
+
/**
|
|
185
|
+
* The two ripple waves, driven by the **root**.
|
|
186
|
+
*
|
|
187
|
+
* They belong to the root because the root is the touch surface. An overlay carrying its
|
|
188
|
+
* own handlers only hears touches that land on *it* — and it is a sibling of the label,
|
|
189
|
+
* not its parent, so pressing the text of a button would do nothing. Touches bubble to
|
|
190
|
+
* the `Pressable`, which is why the handlers live there and the waves are published down.
|
|
191
|
+
*/
|
|
192
|
+
waves?: readonly [RippleWave, RippleWave];
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
export type { AnimationConfig as A, FeedbackContext as F, IconComponentProps as I, PressableFeedbackProps as P, RadiusStyle as R, SlotAnimation as S, IconContextValue as a, IconProps as b, AnimationProp as c, ResolvedAnimation as d, RippleWave as e };
|