@xaui/native 0.9.1-alpha.2 → 0.9.1-alpha.4
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-PBVPOX7D.js → chunk-2KXQATVL.js} +3 -27
- package/dist/{chunk-M7P46XKI.cjs → chunk-3QBT3Q65.cjs} +27 -2
- package/dist/{chunk-NHPQQQ7P.cjs → chunk-AW63PTQ4.cjs} +33 -57
- package/dist/chunk-ECDWSSHJ.js +688 -0
- package/dist/chunk-IYFGO523.cjs +688 -0
- package/dist/{chunk-RBNCR5KB.js → chunk-X2K2FX3W.js} +25 -0
- package/dist/index.cjs +32 -4
- package/dist/index.d.cts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +36 -8
- package/dist/system/index.cjs +31 -3
- package/dist/system/index.d.cts +224 -3
- package/dist/system/index.d.ts +224 -3
- package/dist/system/index.js +32 -4
- package/dist/theme/index.cjs +3 -3
- package/dist/theme/index.d.cts +3 -2
- package/dist/theme/index.d.ts +3 -2
- package/dist/theme/index.js +6 -6
- package/dist/{theme.type-B3ODSLbB.d.cts → theme.type-C9bFJKFm.d.cts} +7 -1
- package/dist/{theme.type-B3ODSLbB.d.ts → theme.type-C9bFJKFm.d.ts} +7 -1
- package/package.json +1 -1
- package/dist/chunk-B755PRVJ.cjs +0 -274
- package/dist/chunk-RCP3SD26.js +0 -274
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
// src/theme/theme-context.ts
|
|
2
|
+
import { createContext } from "react";
|
|
3
|
+
var ThemeContext = createContext(null);
|
|
4
|
+
|
|
5
|
+
// src/theme/theme-hooks.ts
|
|
6
|
+
import { useContext } from "react";
|
|
7
|
+
function useXAUITheme() {
|
|
8
|
+
const theme = useContext(ThemeContext);
|
|
9
|
+
if (theme === null) {
|
|
10
|
+
throw new Error("XAUI: useXAUITheme must be used within <XAUIProvider>.");
|
|
11
|
+
}
|
|
12
|
+
return theme;
|
|
13
|
+
}
|
|
14
|
+
function useColorMode() {
|
|
15
|
+
return useXAUITheme().mode;
|
|
16
|
+
}
|
|
17
|
+
function useThemeColor(token) {
|
|
18
|
+
const { colors } = useXAUITheme();
|
|
19
|
+
return Array.isArray(token) ? token.map((key) => colors[key]) : colors[token];
|
|
20
|
+
}
|
|
21
|
+
|
|
1
22
|
// src/utils/colors.ts
|
|
2
23
|
var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
|
|
3
24
|
var linearToSrgb = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
|
|
@@ -94,6 +115,10 @@ function deriveTint(tint, theme) {
|
|
|
94
115
|
}
|
|
95
116
|
|
|
96
117
|
export {
|
|
118
|
+
ThemeContext,
|
|
119
|
+
useXAUITheme,
|
|
120
|
+
useColorMode,
|
|
121
|
+
useThemeColor,
|
|
97
122
|
mix,
|
|
98
123
|
alpha,
|
|
99
124
|
deriveTint
|
package/dist/index.cjs
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var _chunkB755PRVJcjs = require('./chunk-B755PRVJ.cjs');
|
|
9
8
|
|
|
10
9
|
|
|
11
10
|
|
|
@@ -20,11 +19,10 @@ var _chunkB755PRVJcjs = require('./chunk-B755PRVJ.cjs');
|
|
|
20
19
|
|
|
21
20
|
|
|
22
21
|
|
|
22
|
+
var _chunkIYFGO523cjs = require('./chunk-IYFGO523.cjs');
|
|
23
23
|
|
|
24
|
-
var _chunkNHPQQQ7Pcjs = require('./chunk-NHPQQQ7P.cjs');
|
|
25
24
|
|
|
26
25
|
|
|
27
|
-
var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
|
|
28
26
|
|
|
29
27
|
|
|
30
28
|
|
|
@@ -33,12 +31,14 @@ var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
|
|
|
33
31
|
|
|
34
32
|
|
|
35
33
|
|
|
34
|
+
var _chunkAW63PTQ4cjs = require('./chunk-AW63PTQ4.cjs');
|
|
36
35
|
|
|
37
36
|
|
|
38
37
|
|
|
39
38
|
|
|
40
39
|
|
|
41
40
|
|
|
41
|
+
var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
|
@@ -47,4 +47,32 @@ var _chunkM7P46XKIcjs = require('./chunk-M7P46XKI.cjs');
|
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
exports.HIGHLIGHT_OPACITY = _chunkIYFGO523cjs.HIGHLIGHT_OPACITY; exports.PRESS_DURATION = _chunkIYFGO523cjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkIYFGO523cjs.PRESS_SCALE; exports.Portal = _chunkIYFGO523cjs.Portal; exports.PortalContext = _chunkIYFGO523cjs.PortalContext; exports.PortalHost = _chunkIYFGO523cjs.PortalHost; exports.PressableFeedback = _chunkIYFGO523cjs.PressableFeedback; exports.RELEASE_DURATION = _chunkIYFGO523cjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkIYFGO523cjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkIYFGO523cjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkIYFGO523cjs.RIPPLE_OPACITY; exports.Slot = _chunkIYFGO523cjs.Slot; exports.ThemeContext = _chunk3QBT3Q65cjs.ThemeContext; exports.XAUIProvider = _chunkAW63PTQ4cjs.XAUIProvider; exports.buildRadius = _chunkAW63PTQ4cjs.buildRadius; exports.buildShadows = _chunkAW63PTQ4cjs.buildShadows; exports.childrenToString = _chunkIYFGO523cjs.childrenToString; exports.createRecipe = _chunkIYFGO523cjs.createRecipe; exports.createSlotContext = _chunkIYFGO523cjs.createSlotContext; exports.createTheme = _chunkAW63PTQ4cjs.createTheme; exports.defaultTheme = _chunkAW63PTQ4cjs.defaultTheme; exports.deriveColors = _chunkAW63PTQ4cjs.deriveColors; exports.deriveTint = _chunk3QBT3Q65cjs.deriveTint; exports.mergeProps = _chunkIYFGO523cjs.mergeProps; exports.mergeRefs = _chunkIYFGO523cjs.mergeRefs; exports.palette = _chunkAW63PTQ4cjs.palette; exports.primitives = _chunkAW63PTQ4cjs.primitives; exports.resolveAnimation = _chunkIYFGO523cjs.resolveAnimation; exports.resolveSlotAnimation = _chunkIYFGO523cjs.resolveSlotAnimation; exports.sourceKeys = _chunkAW63PTQ4cjs.sourceKeys; exports.tokens = _chunkAW63PTQ4cjs.tokens; exports.useColorMode = _chunk3QBT3Q65cjs.useColorMode; exports.useFeedback = _chunkIYFGO523cjs.useFeedback; exports.useThemeColor = _chunk3QBT3Q65cjs.useThemeColor; exports.useXAUITheme = _chunk3QBT3Q65cjs.useXAUITheme;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export { AsChildProps, Axes, CompoundVariant, MergeableProps, PossibleRef, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs } from './system/index.cjs';
|
|
1
|
+
export { AnimationConfig, AnimationProp, AsChildProps, Axes, CompoundVariant, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PossibleRef, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackProps, PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, Recipe, RecipeConfig, ResolveArgs, ResolvedAnimation, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotAnimation, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback } from './system/index.cjs';
|
|
2
2
|
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, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-
|
|
4
|
-
import 'react-native';
|
|
3
|
+
export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C9bFJKFm.cjs';
|
|
5
4
|
import 'react';
|
|
5
|
+
import 'react-native';
|
|
6
|
+
import 'react-native-reanimated';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export { AsChildProps, Axes, CompoundVariant, MergeableProps, PossibleRef, Recipe, RecipeConfig, ResolveArgs, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs } from './system/index.js';
|
|
1
|
+
export { AnimationConfig, AnimationProp, AsChildProps, Axes, CompoundVariant, FeedbackContext, FeedbackVariant, HIGHLIGHT_OPACITY, MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, PortalHostProps, PortalMethods, PortalProps, PossibleRef, PressableFeedback, PressableFeedbackHighlightProps, PressableFeedbackProps, PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, Recipe, RecipeConfig, ResolveArgs, ResolvedAnimation, ResolvedSelection, ResolvedStyles, Selection, Slot, SlotAnimation, SlotProps, SlotStyle, SlotStyles, StateName, States, StyleFn, TintArgs, VariantColors, VariantRole, VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback } from './system/index.js';
|
|
2
2
|
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, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-
|
|
4
|
-
import 'react-native';
|
|
3
|
+
export { C as ColorMode, F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, X as XAUIColors, b as XAUIDerivedColors, c as XAUIPrimitiveColors, d as XAUIRadius, e as XAUIShadow, f as XAUISourceColors, g as XAUITheme, h as XAUIThemeConfig, i as XAUIThemeSet } from './theme.type-C9bFJKFm.js';
|
|
5
4
|
import 'react';
|
|
5
|
+
import 'react-native';
|
|
6
|
+
import 'react-native-reanimated';
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
import {
|
|
2
|
+
HIGHLIGHT_OPACITY,
|
|
3
|
+
PRESS_DURATION,
|
|
4
|
+
PRESS_SCALE,
|
|
5
|
+
Portal,
|
|
6
|
+
PortalContext,
|
|
7
|
+
PortalHost,
|
|
8
|
+
PressableFeedback,
|
|
9
|
+
RELEASE_DURATION,
|
|
10
|
+
RIPPLE_COVERAGE,
|
|
11
|
+
RIPPLE_DURATION,
|
|
12
|
+
RIPPLE_OPACITY,
|
|
2
13
|
Slot,
|
|
3
14
|
childrenToString,
|
|
4
15
|
createRecipe,
|
|
5
16
|
createSlotContext,
|
|
6
17
|
mergeProps,
|
|
7
|
-
mergeRefs
|
|
8
|
-
|
|
18
|
+
mergeRefs,
|
|
19
|
+
resolveAnimation,
|
|
20
|
+
resolveSlotAnimation,
|
|
21
|
+
useFeedback
|
|
22
|
+
} from "./chunk-ECDWSSHJ.js";
|
|
9
23
|
import {
|
|
10
|
-
ThemeContext,
|
|
11
24
|
XAUIProvider,
|
|
12
25
|
buildRadius,
|
|
13
26
|
buildShadows,
|
|
@@ -17,15 +30,27 @@ import {
|
|
|
17
30
|
palette,
|
|
18
31
|
primitives,
|
|
19
32
|
sourceKeys,
|
|
20
|
-
tokens
|
|
33
|
+
tokens
|
|
34
|
+
} from "./chunk-2KXQATVL.js";
|
|
35
|
+
import {
|
|
36
|
+
ThemeContext,
|
|
37
|
+
deriveTint,
|
|
21
38
|
useColorMode,
|
|
22
39
|
useThemeColor,
|
|
23
40
|
useXAUITheme
|
|
24
|
-
} from "./chunk-
|
|
25
|
-
import {
|
|
26
|
-
deriveTint
|
|
27
|
-
} from "./chunk-RBNCR5KB.js";
|
|
41
|
+
} from "./chunk-X2K2FX3W.js";
|
|
28
42
|
export {
|
|
43
|
+
HIGHLIGHT_OPACITY,
|
|
44
|
+
PRESS_DURATION,
|
|
45
|
+
PRESS_SCALE,
|
|
46
|
+
Portal,
|
|
47
|
+
PortalContext,
|
|
48
|
+
PortalHost,
|
|
49
|
+
PressableFeedback,
|
|
50
|
+
RELEASE_DURATION,
|
|
51
|
+
RIPPLE_COVERAGE,
|
|
52
|
+
RIPPLE_DURATION,
|
|
53
|
+
RIPPLE_OPACITY,
|
|
29
54
|
Slot,
|
|
30
55
|
ThemeContext,
|
|
31
56
|
XAUIProvider,
|
|
@@ -42,9 +67,12 @@ export {
|
|
|
42
67
|
mergeRefs,
|
|
43
68
|
palette,
|
|
44
69
|
primitives,
|
|
70
|
+
resolveAnimation,
|
|
71
|
+
resolveSlotAnimation,
|
|
45
72
|
sourceKeys,
|
|
46
73
|
tokens,
|
|
47
74
|
useColorMode,
|
|
75
|
+
useFeedback,
|
|
48
76
|
useThemeColor,
|
|
49
77
|
useXAUITheme
|
|
50
78
|
};
|
package/dist/system/index.cjs
CHANGED
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
var _chunkB755PRVJcjs = require('../chunk-B755PRVJ.cjs');
|
|
9
|
-
require('../chunk-M7P46XKI.cjs');
|
|
10
8
|
|
|
11
9
|
|
|
12
10
|
|
|
@@ -14,4 +12,34 @@ require('../chunk-M7P46XKI.cjs');
|
|
|
14
12
|
|
|
15
13
|
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
var _chunkIYFGO523cjs = require('../chunk-IYFGO523.cjs');
|
|
23
|
+
require('../chunk-3QBT3Q65.cjs');
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
exports.HIGHLIGHT_OPACITY = _chunkIYFGO523cjs.HIGHLIGHT_OPACITY; exports.PRESS_DURATION = _chunkIYFGO523cjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkIYFGO523cjs.PRESS_SCALE; exports.Portal = _chunkIYFGO523cjs.Portal; exports.PortalContext = _chunkIYFGO523cjs.PortalContext; exports.PortalHost = _chunkIYFGO523cjs.PortalHost; exports.PressableFeedback = _chunkIYFGO523cjs.PressableFeedback; exports.RELEASE_DURATION = _chunkIYFGO523cjs.RELEASE_DURATION; exports.RIPPLE_COVERAGE = _chunkIYFGO523cjs.RIPPLE_COVERAGE; exports.RIPPLE_DURATION = _chunkIYFGO523cjs.RIPPLE_DURATION; exports.RIPPLE_OPACITY = _chunkIYFGO523cjs.RIPPLE_OPACITY; exports.Slot = _chunkIYFGO523cjs.Slot; exports.childrenToString = _chunkIYFGO523cjs.childrenToString; exports.createRecipe = _chunkIYFGO523cjs.createRecipe; exports.createSlotContext = _chunkIYFGO523cjs.createSlotContext; exports.mergeProps = _chunkIYFGO523cjs.mergeProps; exports.mergeRefs = _chunkIYFGO523cjs.mergeRefs; exports.resolveAnimation = _chunkIYFGO523cjs.resolveAnimation; exports.resolveSlotAnimation = _chunkIYFGO523cjs.resolveSlotAnimation; exports.useFeedback = _chunkIYFGO523cjs.useFeedback;
|
package/dist/system/index.d.cts
CHANGED
|
@@ -1,7 +1,228 @@
|
|
|
1
|
-
import { g as XAUITheme, X as XAUIColors } from '../theme.type-B3ODSLbB.cjs';
|
|
2
|
-
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
1
|
import * as react from 'react';
|
|
4
2
|
import { ReactNode, Provider, Ref, RefCallback } from 'react';
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { PressableProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
5
|
+
import { SharedValue } from 'react-native-reanimated';
|
|
6
|
+
import { g as XAUITheme, X as XAUIColors } from '../theme.type-C9bFJKFm.cjs';
|
|
7
|
+
|
|
8
|
+
type PortalProps = {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Renders its children into the nearest `PortalHost` instead of where it sits. What
|
|
13
|
+
* `Dialog`, `Sheet`, `Drawer` and `Snackbar` are built on: an overlay has to escape the
|
|
14
|
+
* clipping and stacking of whatever container happened to hold the trigger.
|
|
15
|
+
*
|
|
16
|
+
* Both halves run in layout effects rather than effects, which is deliberate: the content
|
|
17
|
+
* lands in the same commit as the trigger's, so an overlay neither shows one frame late
|
|
18
|
+
* nor survives one frame past the unmount that closed it. The unpublish sits in its own
|
|
19
|
+
* effect so that it does not depend on `children` — a re-publish then keeps the portal's
|
|
20
|
+
* place in the host's order instead of dropping it and re-adding it at the end.
|
|
21
|
+
*/
|
|
22
|
+
declare function Portal({ children }: PortalProps): null;
|
|
23
|
+
declare namespace Portal {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
type PortalMethods = {
|
|
28
|
+
addPortal: (key: string, element: ReactNode) => void;
|
|
29
|
+
removePortal: (key: string) => void;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* `null` outside a host, and `Portal` treats that as "render nothing" rather than
|
|
33
|
+
* throwing: an app that forgot `PortalHost` should lose its overlays, not crash on the
|
|
34
|
+
* first `Dialog`.
|
|
35
|
+
*/
|
|
36
|
+
declare const PortalContext: react.Context<PortalMethods | null>;
|
|
37
|
+
|
|
38
|
+
type PortalHostProps = {
|
|
39
|
+
children: ReactNode;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* Where every `Portal` in the tree below renders. Mounted once, at the root of the app,
|
|
43
|
+
* above navigation — an overlay that renders inside a screen is clipped by it.
|
|
44
|
+
*/
|
|
45
|
+
declare function PortalHost({ children }: PortalHostProps): react.JSX.Element;
|
|
46
|
+
declare namespace PortalHost {
|
|
47
|
+
var displayName: string;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* What the root does under the finger. `scale-highlight` and `scale-ripple` mount their
|
|
52
|
+
* overlay themselves; `scale` mounts none, which is what a root picks when it renders its
|
|
53
|
+
* own `<PressableFeedback.Highlight>` to style it (R1: no prop reaches into another
|
|
54
|
+
* component's insides).
|
|
55
|
+
*/
|
|
56
|
+
type FeedbackVariant = 'scale-highlight' | 'scale-ripple' | 'scale' | 'none';
|
|
57
|
+
type AnimationConfig = {
|
|
58
|
+
scale?: boolean;
|
|
59
|
+
highlight?: boolean;
|
|
60
|
+
ripple?: boolean;
|
|
61
|
+
};
|
|
62
|
+
/**
|
|
63
|
+
* `false` and `'disabled'` turn this component's animations off. `'disable-all'` turns
|
|
64
|
+
* them off for its descendants too — a long list kills every row's worklets with one
|
|
65
|
+
* prop instead of threading it down. An object switches them off one at a time.
|
|
66
|
+
*/
|
|
67
|
+
type AnimationProp = boolean | 'disabled' | 'disable-all' | AnimationConfig;
|
|
68
|
+
/** `animation` once normalised — what the components actually read. */
|
|
69
|
+
type ResolvedAnimation = {
|
|
70
|
+
scale: boolean;
|
|
71
|
+
highlight: boolean;
|
|
72
|
+
ripple: boolean;
|
|
73
|
+
/** True when every sub-animation is off: the branch that mounts no worklet at all. */
|
|
74
|
+
none: boolean;
|
|
75
|
+
/** Propagated to descendants through context. */
|
|
76
|
+
disableAll: boolean;
|
|
77
|
+
};
|
|
78
|
+
type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & {
|
|
79
|
+
/** Controlled: the root owns the state, because its recipe resolves on it (R5). */
|
|
80
|
+
isPressed?: boolean;
|
|
81
|
+
/** R8: `disabled` is not part of the public vocabulary, `isX` is. */
|
|
82
|
+
isDisabled?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Merge into the single child instead of rendering a pressable (R12) — **keeping the
|
|
85
|
+
* feedback**. Swapping this component out for a bare `Slot` would silently drop the
|
|
86
|
+
* touch feedback of every `asChild` control.
|
|
87
|
+
*/
|
|
88
|
+
asChild?: boolean;
|
|
89
|
+
feedbackVariant?: FeedbackVariant;
|
|
90
|
+
animation?: AnimationProp;
|
|
91
|
+
style?: StyleProp<ViewStyle>;
|
|
92
|
+
/**
|
|
93
|
+
* `Pressable`'s function form is dropped on purpose. It exists to hand the press state
|
|
94
|
+
* to children; here the root above already owns that state and this publishes it
|
|
95
|
+
* through context, so the function form would be a second, quieter source of truth.
|
|
96
|
+
*/
|
|
97
|
+
children?: ReactNode;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* A slot's own animation, overriding the blanket one on the root. `false` switches that
|
|
101
|
+
* slot off; the object tunes it. Deliberately two knobs rather than a full timing
|
|
102
|
+
* surface — anything past this is a different animation, and that is a component's job,
|
|
103
|
+
* not a prop's.
|
|
104
|
+
*/
|
|
105
|
+
type SlotAnimation = boolean | {
|
|
106
|
+
/** Milliseconds. Falls back to the shared press timing. */
|
|
107
|
+
duration?: number;
|
|
108
|
+
/** How far the overlay goes at full press, 0 to 1. */
|
|
109
|
+
opacity?: number;
|
|
110
|
+
};
|
|
111
|
+
type FeedbackContext = {
|
|
112
|
+
isPressed: boolean;
|
|
113
|
+
animation: ResolvedAnimation;
|
|
114
|
+
/** Absent on the static branch, where nothing animates and no worklet is mounted. */
|
|
115
|
+
progress?: SharedValue<number>;
|
|
116
|
+
/**
|
|
117
|
+
* Bumped on every press-in. The ripple starts from this rather than from a `useEffect`
|
|
118
|
+
* on `isPressed`: a one-shot driven by a boolean depends on React re-rendering between
|
|
119
|
+
* the two touch events, and starting it from the event that carries the coordinates is
|
|
120
|
+
* both simpler and impossible to miss.
|
|
121
|
+
*/
|
|
122
|
+
pressCount?: SharedValue<number>;
|
|
123
|
+
/** Where the finger landed, and how big the root is — the ripple needs both. */
|
|
124
|
+
origin?: SharedValue<{
|
|
125
|
+
x: number;
|
|
126
|
+
y: number;
|
|
127
|
+
}>;
|
|
128
|
+
size?: SharedValue<{
|
|
129
|
+
width: number;
|
|
130
|
+
height: number;
|
|
131
|
+
}>;
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
type PressableFeedbackHighlightProps = {
|
|
135
|
+
style?: StyleProp<ViewStyle>;
|
|
136
|
+
/** Overrides the blanket `animation` on the root, for this overlay only. */
|
|
137
|
+
animation?: SlotAnimation;
|
|
138
|
+
};
|
|
139
|
+
/**
|
|
140
|
+
* The press wash: one flat overlay fading in under the finger.
|
|
141
|
+
*
|
|
142
|
+
* It is a **neutral** wash, not the variant's pressed colour. A component picks one or
|
|
143
|
+
* the other — this overlay, or a `pressed` state in its recipe swapping `bg` for
|
|
144
|
+
* `bgPressed` — never both, or a pressed button darkens twice.
|
|
145
|
+
*/
|
|
146
|
+
declare function PressableFeedbackHighlight({ style, animation: override, }: PressableFeedbackHighlightProps): react.JSX.Element;
|
|
147
|
+
declare namespace PressableFeedbackHighlight {
|
|
148
|
+
var displayName: string;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
type PressableFeedbackRippleProps = {
|
|
152
|
+
style?: StyleProp<ViewStyle>;
|
|
153
|
+
/** Overrides the blanket `animation` on the root, for this overlay only. */
|
|
154
|
+
animation?: SlotAnimation;
|
|
155
|
+
};
|
|
156
|
+
/**
|
|
157
|
+
* A circle washing outwards from where the finger landed.
|
|
158
|
+
*
|
|
159
|
+
* It is a **one-shot, independent of how long the press lasts**: the wave runs its course
|
|
160
|
+
* and ends, the way a ripple in water does. Tying it to the press would leave a disc
|
|
161
|
+
* parked on the control for as long as a finger rests there.
|
|
162
|
+
*
|
|
163
|
+
* It needs the root to clip — `PressableFeedback` sets `overflow: 'hidden'` when it
|
|
164
|
+
* mounts one — and it renders nothing on the static branch: a ripple that cannot expand
|
|
165
|
+
* is a coloured disc sitting on the control, which reads as a defect rather than as
|
|
166
|
+
* reduced motion.
|
|
167
|
+
*/
|
|
168
|
+
declare function PressableFeedbackRipple({ style, animation: override, }: PressableFeedbackRippleProps): react.JSX.Element | null;
|
|
169
|
+
declare namespace PressableFeedbackRipple {
|
|
170
|
+
var displayName: string;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
declare const useFeedback: () => FeedbackContext;
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* The values the v0 tree shipped with (`Animated.spring` to `0.975`, `bounciness: 0`,
|
|
177
|
+
* over roughly 100ms). Kept identical on purpose: the touch feedback is the part of a
|
|
178
|
+
* library users feel rather than read, and changing its timing in a rewrite would be a
|
|
179
|
+
* regression nobody asked for. `bounciness: 0` is why a duration replaces the spring —
|
|
180
|
+
* a spring with no bounce is a curve.
|
|
181
|
+
*/
|
|
182
|
+
declare const PRESS_SCALE = 0.975;
|
|
183
|
+
declare const PRESS_DURATION = 100;
|
|
184
|
+
declare const RELEASE_DURATION = 150;
|
|
185
|
+
/** How far the wash and the ripple go at full press. */
|
|
186
|
+
declare const HIGHLIGHT_OPACITY = 0.08;
|
|
187
|
+
declare const RIPPLE_OPACITY = 0.12;
|
|
188
|
+
declare const RIPPLE_DURATION = 350;
|
|
189
|
+
/**
|
|
190
|
+
* The circle's radius as a multiple of the control's diagonal. Above 1 it covers from
|
|
191
|
+
* any point on the control, so where the finger landed never enters the calculation.
|
|
192
|
+
*/
|
|
193
|
+
declare const RIPPLE_COVERAGE = 1.25;
|
|
194
|
+
/**
|
|
195
|
+
* One shape out of four accepted ones, so the components read a record instead of
|
|
196
|
+
* re-deciding what `'disable-all'` meant.
|
|
197
|
+
*
|
|
198
|
+
* `inheritedDisableAll` comes from an ancestor that asked for it, and it wins: a list
|
|
199
|
+
* that switched its rows' animations off cannot be overridden by a row.
|
|
200
|
+
*/
|
|
201
|
+
declare function resolveAnimation(animation: AnimationProp | undefined, inheritedDisableAll?: boolean): ResolvedAnimation;
|
|
202
|
+
type ResolvedSlotAnimation = {
|
|
203
|
+
enabled: boolean;
|
|
204
|
+
duration: number;
|
|
205
|
+
opacity: number;
|
|
206
|
+
};
|
|
207
|
+
/**
|
|
208
|
+
* A slot's own `animation` over the root's blanket one, with the root winning when it
|
|
209
|
+
* switched everything off — `animation="disable-all"` on an ancestor cannot be undone by
|
|
210
|
+
* an overlay that asks nicely.
|
|
211
|
+
*/
|
|
212
|
+
declare function resolveSlotAnimation(override: SlotAnimation | undefined, enabledByRoot: boolean, defaultOpacity: number, defaultDuration?: number): ResolvedSlotAnimation;
|
|
213
|
+
|
|
214
|
+
declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "children" | "style" | "disabled"> & {
|
|
215
|
+
isPressed?: boolean;
|
|
216
|
+
isDisabled?: boolean;
|
|
217
|
+
asChild?: boolean;
|
|
218
|
+
feedbackVariant?: FeedbackVariant;
|
|
219
|
+
animation?: AnimationProp;
|
|
220
|
+
style?: react_native.StyleProp<react_native.ViewStyle>;
|
|
221
|
+
children?: react.ReactNode;
|
|
222
|
+
} & react.RefAttributes<react_native.View>> & {
|
|
223
|
+
Highlight: typeof PressableFeedbackHighlight;
|
|
224
|
+
Ripple: typeof PressableFeedbackRipple;
|
|
225
|
+
};
|
|
5
226
|
|
|
6
227
|
/**
|
|
7
228
|
* A slot is a view or a text node, and a recipe writes one object per slot, so the two
|
|
@@ -171,4 +392,4 @@ type SlotProps = MergeableProps & {
|
|
|
171
392
|
*/
|
|
172
393
|
declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
|
|
173
394
|
|
|
174
|
-
export { type AsChildProps, type Axes, type CompoundVariant, type MergeableProps, type PossibleRef, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs };
|
|
395
|
+
export { type AnimationConfig, type AnimationProp, type AsChildProps, type Axes, type CompoundVariant, type FeedbackContext, type FeedbackVariant, HIGHLIGHT_OPACITY, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackProps, type PressableFeedbackRippleProps, RELEASE_DURATION, RIPPLE_COVERAGE, RIPPLE_DURATION, RIPPLE_OPACITY, type Recipe, type RecipeConfig, type ResolveArgs, type ResolvedAnimation, type ResolvedSelection, type ResolvedStyles, type Selection, Slot, type SlotAnimation, type SlotProps, type SlotStyle, type SlotStyles, type StateName, type States, type StyleFn, type TintArgs, type VariantColors, type VariantRole, type VariantTokens, childrenToString, createRecipe, createSlotContext, mergeProps, mergeRefs, resolveAnimation, resolveSlotAnimation, useFeedback };
|