@xaui/native 0.9.1-alpha.13 → 0.9.1-alpha.15
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-B3EAZ2CC.js → chunk-64L44HEI.js} +155 -144
- package/dist/{chunk-2FOEFUPM.cjs → chunk-BAACHVM4.cjs} +8 -3
- package/dist/{chunk-RWLODK55.js → chunk-E3756MJC.js} +15 -15
- package/dist/{chunk-MLJ543GP.cjs → chunk-NLFE3CRM.cjs} +23 -23
- package/dist/{chunk-IVVFYUDW.cjs → chunk-PUER6Y4M.cjs} +134 -122
- package/dist/{chunk-TO6DAGFB.js → chunk-UOJBK5Z4.js} +7 -2
- package/dist/components/button/index.cjs +3 -3
- package/dist/components/button/index.d.cts +322 -7
- package/dist/components/button/index.d.ts +322 -7
- package/dist/components/button/index.js +2 -2
- package/dist/{create-recipe-oiLAlJ4u.d.cts → create-recipe-BcUu9b2I.d.cts} +41 -31
- package/dist/{create-recipe-3OPwcC6P.d.ts → create-recipe-DD9W6m9b.d.ts} +41 -31
- package/dist/index.cjs +6 -6
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +3 -3
- package/dist/system/index.cjs +3 -3
- package/dist/system/index.d.cts +174 -173
- package/dist/system/index.d.ts +174 -173
- package/dist/system/index.js +2 -2
- package/package.json +1 -1
package/dist/system/index.d.ts
CHANGED
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode,
|
|
3
|
-
import { b as IconProps, a as IconContextValue, S as SlotAnimation, F as FeedbackContext, c as AnimationProp, d as ResolvedAnimation } from '../create-recipe-
|
|
4
|
-
export { A as AnimationConfig, i as Axes, C as CompoundVariant, D as DirectionalStyleKey, I as IconComponentProps, u as ImageStyleProps, P as PressableFeedbackProps, R as RadiusStyle, g as Recipe, j as RecipeConfig, h as ResolveArgs, k as ResolvedSelection, l as ResolvedStyles, e as RippleWave, m as Selection, n as SlotStyle, o as SlotStyles, p as StateName, q as States, r as StyleFn, v as StyleProps, w as TextStyleProps, T as TintArgs, V as VariantColors, s as VariantRole, t as VariantTokens,
|
|
2
|
+
import { ReactNode, Provider, Ref, RefCallback } from 'react';
|
|
3
|
+
import { b as IconProps, a as IconContextValue, x as ViewStyleProps, S as SlotAnimation, F as FeedbackContext, c as AnimationProp, d as ResolvedAnimation } from '../create-recipe-DD9W6m9b.js';
|
|
4
|
+
export { A as AnimationConfig, i as Axes, C as CompoundVariant, D as DirectionalStyleKey, I as IconComponentProps, u as ImageStyleProps, P as PressableFeedbackProps, R as RadiusStyle, g as Recipe, j as RecipeConfig, h as ResolveArgs, k as ResolvedSelection, l as ResolvedStyles, e as RippleWave, m as Selection, n as SlotStyle, o as SlotStyles, p as StateName, q as States, r as StyleFn, v as StyleProps, w as TextStyleProps, T as TintArgs, V as VariantColors, s as VariantRole, t as VariantTokens, f as createRecipe } from '../create-recipe-DD9W6m9b.js';
|
|
5
5
|
import * as react_native from 'react-native';
|
|
6
6
|
import { StyleProp, ViewStyle } from 'react-native';
|
|
7
7
|
import 'react-native-reanimated';
|
|
8
8
|
import '../theme.type-C9bFJKFm.js';
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* The runtime half of R14. The type half lives in `system/style-props/`, and the two are
|
|
12
|
+
* pinned to each other by a compile-time check there: a React Native upgrade that adds or
|
|
13
|
+
* removes a style key fails `type-check` with the key's name rather than drifting.
|
|
14
|
+
*
|
|
15
|
+
* One set for the three style types rather than one per node. A caller cannot write
|
|
16
|
+
* `fontSize` on a view slot — that slot's props are typed `ViewStyleProps` — so the split
|
|
17
|
+
* never has to know which node it runs for, and every component shares one table.
|
|
18
|
+
*/
|
|
19
|
+
declare const STYLE_PROP_KEYS: readonly ["alignContent", "alignItems", "alignSelf", "aspectRatio", "boxSizing", "columnGap", "direction", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "justifyContent", "overflow", "rowGap", "bottom", "end", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "position", "start", "top", "zIndex", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginEnd", "marginHorizontal", "marginInline", "marginInlineEnd", "marginInlineStart", "marginStart", "marginTop", "marginVertical", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingEnd", "paddingHorizontal", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingStart", "paddingTop", "paddingVertical", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "borderBlockColor", "borderBlockEndColor", "borderBlockStartColor", "borderBottomColor", "borderBottomEndRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderCurve", "borderEndColor", "borderEndEndRadius", "borderEndStartRadius", "borderEndWidth", "borderRadius", "borderStartColor", "borderStartEndRadius", "borderStartStartRadius", "borderStartWidth", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth", "backfaceVisibility", "backgroundColor", "boxShadow", "cursor", "elevation", "experimental_backgroundImage", "filter", "isolation", "mixBlendMode", "opacity", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "rotation", "scaleX", "scaleY", "transform", "transformMatrix", "transformOrigin", "translateX", "translateY", "color", "fontFamily", "fontSize", "fontStyle", "fontVariant", "fontWeight", "includeFontPadding", "letterSpacing", "lineHeight", "textAlign", "textAlignVertical", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "userSelect", "verticalAlign", "writingDirection", "objectFit", "overlayColor", "resizeMode", "tintColor"];
|
|
20
|
+
type StylePropKey = (typeof STYLE_PROP_KEYS)[number];
|
|
21
|
+
/** What `splitStyleProps` takes out of a props object. */
|
|
22
|
+
type StylePropsOf<P> = Pick<P, Extract<keyof P, StylePropKey>>;
|
|
23
|
+
/** What it leaves in it. */
|
|
24
|
+
type RestPropsOf<P> = Omit<P, StylePropKey>;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* `splitStyleProps`, memoized on the values (R14). A component calls it on what is left
|
|
28
|
+
* after destructuring its own props, applies the style half between the tint and its
|
|
29
|
+
* `style`, and forwards the rest:
|
|
30
|
+
*
|
|
31
|
+
* ```tsx
|
|
32
|
+
* const [styleProps, rest] = useStyleProps(props)
|
|
33
|
+
* <Pressable style={[styles.root, tint, styleProps, style]} {...rest} />
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* The identity is stable while the values are, which is what a memoized child or an
|
|
37
|
+
* animated style depends on. It is keyed on a hash rather than on the object, because the
|
|
38
|
+
* object is a fresh rest-spread on every render and would never hit.
|
|
39
|
+
*/
|
|
40
|
+
declare function useStyleProps<P extends object>(props: P): [StylePropsOf<P>, RestPropsOf<P>];
|
|
41
|
+
|
|
10
42
|
/**
|
|
11
43
|
* The gap nobody else closes: an icon is a third-party component, so a slot context does
|
|
12
44
|
* not reach it and every call site ends up computing the colour by hand.
|
|
@@ -22,7 +54,7 @@ import '../theme.type-C9bFJKFm.js';
|
|
|
22
54
|
* through `source` — and the resolution is the same for all three: an explicit prop, else
|
|
23
55
|
* what the surrounding slot published, else the theme.
|
|
24
56
|
*/
|
|
25
|
-
declare function Icon({ as: Component, children, source, size, color, style, }: IconProps): react.JSX.Element;
|
|
57
|
+
declare function Icon({ as: Component, children, source, size, color, style, ...props }: IconProps): react.JSX.Element;
|
|
26
58
|
declare namespace Icon {
|
|
27
59
|
var displayName: string;
|
|
28
60
|
}
|
|
@@ -35,7 +67,139 @@ declare namespace Icon {
|
|
|
35
67
|
declare const IconContext: react.Context<IconContextValue>;
|
|
36
68
|
declare function useIconContext(): IconContextValue;
|
|
37
69
|
|
|
38
|
-
type
|
|
70
|
+
type PortalProps = {
|
|
71
|
+
children: ReactNode;
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* Renders its children into the nearest `PortalHost` instead of where it sits. What
|
|
75
|
+
* `Dialog`, `Sheet`, `Drawer` and `Snackbar` are built on: an overlay has to escape the
|
|
76
|
+
* clipping and stacking of whatever container happened to hold the trigger.
|
|
77
|
+
*
|
|
78
|
+
* Both halves run in layout effects rather than effects, which is deliberate: the content
|
|
79
|
+
* lands in the same commit as the trigger's, so an overlay neither shows one frame late
|
|
80
|
+
* nor survives one frame past the unmount that closed it. The unpublish sits in its own
|
|
81
|
+
* effect so that it does not depend on `children` — a re-publish then keeps the portal's
|
|
82
|
+
* place in the host's order instead of dropping it and re-adding it at the end.
|
|
83
|
+
*/
|
|
84
|
+
declare function Portal({ children }: PortalProps): null;
|
|
85
|
+
declare namespace Portal {
|
|
86
|
+
var displayName: string;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
type PortalMethods = {
|
|
90
|
+
addPortal: (key: string, element: ReactNode) => void;
|
|
91
|
+
removePortal: (key: string) => void;
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* `null` outside a host, and `Portal` treats that as "render nothing" rather than
|
|
95
|
+
* throwing: an app that forgot `PortalHost` should lose its overlays, not crash on the
|
|
96
|
+
* first `Dialog`.
|
|
97
|
+
*/
|
|
98
|
+
declare const PortalContext: react.Context<PortalMethods | null>;
|
|
99
|
+
|
|
100
|
+
/** R14 — it renders a view of its own, so it takes that view's style keys as props. */
|
|
101
|
+
type PortalHostProps = ViewStyleProps & {
|
|
102
|
+
children: ReactNode;
|
|
103
|
+
};
|
|
104
|
+
/**
|
|
105
|
+
* Where every `Portal` in the tree below renders. Mounted once, at the root of the app,
|
|
106
|
+
* above navigation — an overlay that renders inside a screen is clipped by it.
|
|
107
|
+
*/
|
|
108
|
+
declare function PortalHost({ children, ...props }: PortalHostProps): react.JSX.Element;
|
|
109
|
+
declare namespace PortalHost {
|
|
110
|
+
var displayName: string;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* R3: the string a root should wrap in its default text slot, or `null` when it should
|
|
115
|
+
* render its children as they are.
|
|
116
|
+
*
|
|
117
|
+
* The whole tree is stringified recursively rather than the first child inspected. That
|
|
118
|
+
* is what makes `<Button>{count} items</Button>` work — children there are the array
|
|
119
|
+
* `[3, ' items']`, and an `isValidElement` check on the first entry would call it an
|
|
120
|
+
* element-free tree only by accident, while a check for "is the first child a string"
|
|
121
|
+
* would miss it outright.
|
|
122
|
+
*
|
|
123
|
+
* `null` for an empty result as much as for a tree containing an element: in both cases
|
|
124
|
+
* there is nothing to wrap, and a root's fallback — render the children — is right for
|
|
125
|
+
* both. It also keeps `<Button>{false}</Button>` from mounting an empty text node.
|
|
126
|
+
*/
|
|
127
|
+
declare function childrenToString(children: ReactNode): string | null;
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* A context a slot cannot read by accident. Every compound gets one, and it carries
|
|
131
|
+
* **resolved** values — style references the root already computed, not tokens for the
|
|
132
|
+
* slot to resolve again (R5).
|
|
133
|
+
*
|
|
134
|
+
* ```ts
|
|
135
|
+
* const [ButtonProvider, useButton] = createSlotContext<ButtonContext>('Button')
|
|
136
|
+
* ```
|
|
137
|
+
*
|
|
138
|
+
* The tuple is what lets each compound name its own hook, which R10 requires it to
|
|
139
|
+
* export. `name` gives both halves of the error, so there is one place to spell it.
|
|
140
|
+
*/
|
|
141
|
+
declare function createSlotContext<T>(name: string): readonly [Provider<T | null>, () => T];
|
|
142
|
+
|
|
143
|
+
/** Anything React accepts as a ref, plus the absence of one. */
|
|
144
|
+
type PossibleRef<T> = Ref<T> | undefined;
|
|
145
|
+
/**
|
|
146
|
+
* The props `mergeProps` knows how to combine. Deliberately loose: it merges whatever a
|
|
147
|
+
* root hands to whatever child it was given, and neither side is knowable from here.
|
|
148
|
+
*/
|
|
149
|
+
type MergeableProps = Record<string, unknown>;
|
|
150
|
+
type AsChildProps = {
|
|
151
|
+
/**
|
|
152
|
+
* Merge this component's props into its single child instead of rendering an element
|
|
153
|
+
* of its own — a navigation `Link` as a `Button`, a bespoke trigger as a `Select`.
|
|
154
|
+
*/
|
|
155
|
+
asChild?: boolean;
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Merges a root's own props into the child it renders through `asChild` (R12). Four
|
|
160
|
+
* rules, and the child wins wherever they do not apply — it is the more specific intent:
|
|
161
|
+
*
|
|
162
|
+
* - **Event handlers compose.** Both run, ours first: the component's own behaviour (the
|
|
163
|
+
* press state that drives its styles) happens before the child's side effect (the
|
|
164
|
+
* navigation). Replacing one with the other is the bug this exists to prevent.
|
|
165
|
+
* - **Styles stack**, ours under the child's, so the child can override.
|
|
166
|
+
* - **`ref`s merge** through `mergeRefs`. React 19 passes `ref` as an ordinary prop, so
|
|
167
|
+
* it arrives here rather than beside the props, and dropping it would sever the root's
|
|
168
|
+
* handle on the node.
|
|
169
|
+
* - **Everything else: the child's value wins**, and ours fills in what it left unset.
|
|
170
|
+
*/
|
|
171
|
+
declare function mergeProps(ours: MergeableProps, theirs: MergeableProps): MergeableProps;
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* One callback that feeds several refs — what lets a root keep its own handle on a node
|
|
175
|
+
* while still honouring the ref its caller passed (R9), and what `asChild` needs to
|
|
176
|
+
* forward a ref into the child it merges into (R12).
|
|
177
|
+
*
|
|
178
|
+
* It returns nothing on purpose. React 19 reads a ref callback's return value as a
|
|
179
|
+
* cleanup function while React 18 ignores it, and this package supports both; letting
|
|
180
|
+
* a merged cleanup through would behave differently on each. React calls every ref with
|
|
181
|
+
* `null` on unmount anyway, which this forwards.
|
|
182
|
+
*/
|
|
183
|
+
declare function mergeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
|
|
184
|
+
|
|
185
|
+
type SlotProps = MergeableProps & {
|
|
186
|
+
children?: ReactNode;
|
|
187
|
+
};
|
|
188
|
+
/**
|
|
189
|
+
* The render branch behind `asChild` (R12). A root picks it instead of its own element:
|
|
190
|
+
*
|
|
191
|
+
* ```tsx
|
|
192
|
+
* const Root = asChild ? Slot : Pressable
|
|
193
|
+
* return <Root ref={ref} {...rootProps}>{children}</Root>
|
|
194
|
+
* ```
|
|
195
|
+
*
|
|
196
|
+
* One line per root, which is the point — forty-seven roots each hand-rolling a
|
|
197
|
+
* `cloneElement` and a ref merge would drift, and R12 has to hold uniformly from the
|
|
198
|
+
* first component or the ref signature of the whole core changes later.
|
|
199
|
+
*/
|
|
200
|
+
declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
|
|
201
|
+
|
|
202
|
+
type PressableFeedbackHighlightProps = ViewStyleProps & {
|
|
39
203
|
style?: StyleProp<ViewStyle>;
|
|
40
204
|
animation?: SlotAnimation;
|
|
41
205
|
/**
|
|
@@ -69,12 +233,12 @@ type PressableFeedbackHighlightProps = {
|
|
|
69
233
|
* have made the root's layout apply to the wrapper instead, and would have added the depth
|
|
70
234
|
* §8 removed.
|
|
71
235
|
*/
|
|
72
|
-
declare function PressableFeedbackHighlight({ style, animation: override, children, }: PressableFeedbackHighlightProps): react.JSX.Element;
|
|
236
|
+
declare function PressableFeedbackHighlight({ style, animation: override, children, ...props }: PressableFeedbackHighlightProps): react.JSX.Element;
|
|
73
237
|
declare namespace PressableFeedbackHighlight {
|
|
74
238
|
var displayName: string;
|
|
75
239
|
}
|
|
76
240
|
|
|
77
|
-
type PressableFeedbackRippleProps = {
|
|
241
|
+
type PressableFeedbackRippleProps = ViewStyleProps & {
|
|
78
242
|
/** Applies to the wave itself, not to the container that clips it. */
|
|
79
243
|
style?: StyleProp<ViewStyle>;
|
|
80
244
|
animation?: SlotAnimation;
|
|
@@ -118,7 +282,7 @@ type PressableFeedbackRippleProps = {
|
|
|
118
282
|
* target rather than at a point, the target is **half the diagonal**, and the centre
|
|
119
283
|
* **travels** from the finger to the middle of the control. The constants carry the why.
|
|
120
284
|
*/
|
|
121
|
-
declare function PressableFeedbackRipple({ style, animation: override, children, }: PressableFeedbackRippleProps): react.JSX.Element;
|
|
285
|
+
declare function PressableFeedbackRipple({ style, animation: override, children, ...props }: PressableFeedbackRippleProps): react.JSX.Element;
|
|
122
286
|
declare namespace PressableFeedbackRipple {
|
|
123
287
|
var displayName: string;
|
|
124
288
|
}
|
|
@@ -212,7 +376,7 @@ declare function resolveSlotAnimation(override: SlotAnimation | undefined, enabl
|
|
|
212
376
|
* off — and it is the only shape that survives `asChild`, where the caller's own element
|
|
213
377
|
* is the pressable and there is no sibling for the primitive to inject.
|
|
214
378
|
*/
|
|
215
|
-
declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "children" | "style" | "disabled"> & {
|
|
379
|
+
declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_native.PressableProps, "children" | "style" | "disabled"> & ViewStyleProps & {
|
|
216
380
|
isPressed?: boolean;
|
|
217
381
|
isDisabled?: boolean;
|
|
218
382
|
asChild?: boolean;
|
|
@@ -224,167 +388,4 @@ declare const PressableFeedback: react.ForwardRefExoticComponent<Omit<react_nati
|
|
|
224
388
|
Ripple: typeof PressableFeedbackRipple;
|
|
225
389
|
};
|
|
226
390
|
|
|
227
|
-
|
|
228
|
-
* The runtime half of R14. The type half lives in `system/style-props/`, and the two are
|
|
229
|
-
* pinned to each other by a compile-time check there: a React Native upgrade that adds or
|
|
230
|
-
* removes a style key fails `type-check` with the key's name rather than drifting.
|
|
231
|
-
*
|
|
232
|
-
* One set for the three style types rather than one per node. A caller cannot write
|
|
233
|
-
* `fontSize` on a view slot — that slot's props are typed `ViewStyleProps` — so the split
|
|
234
|
-
* never has to know which node it runs for, and every component shares one table.
|
|
235
|
-
*/
|
|
236
|
-
declare const STYLE_PROP_KEYS: readonly ["alignContent", "alignItems", "alignSelf", "aspectRatio", "boxSizing", "columnGap", "direction", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "gap", "justifyContent", "overflow", "rowGap", "bottom", "end", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "position", "start", "top", "zIndex", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginEnd", "marginHorizontal", "marginInline", "marginInlineEnd", "marginInlineStart", "marginStart", "marginTop", "marginVertical", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingEnd", "paddingHorizontal", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingStart", "paddingTop", "paddingVertical", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "width", "borderBlockColor", "borderBlockEndColor", "borderBlockStartColor", "borderBottomColor", "borderBottomEndRadius", "borderBottomStartRadius", "borderBottomWidth", "borderColor", "borderCurve", "borderEndColor", "borderEndEndRadius", "borderEndStartRadius", "borderEndWidth", "borderRadius", "borderStartColor", "borderStartEndRadius", "borderStartStartRadius", "borderStartWidth", "borderStyle", "borderTopColor", "borderTopEndRadius", "borderTopStartRadius", "borderTopWidth", "borderWidth", "backfaceVisibility", "backgroundColor", "boxShadow", "cursor", "elevation", "experimental_backgroundImage", "filter", "isolation", "mixBlendMode", "opacity", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "rotation", "scaleX", "scaleY", "transform", "transformMatrix", "transformOrigin", "translateX", "translateY", "color", "fontFamily", "fontSize", "fontStyle", "fontVariant", "fontWeight", "includeFontPadding", "letterSpacing", "lineHeight", "textAlign", "textAlignVertical", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "userSelect", "verticalAlign", "writingDirection", "objectFit", "overlayColor", "resizeMode", "tintColor"];
|
|
237
|
-
type StylePropKey = (typeof STYLE_PROP_KEYS)[number];
|
|
238
|
-
/** What `splitStyleProps` takes out of a props object. */
|
|
239
|
-
type StylePropsOf<P> = Pick<P, Extract<keyof P, StylePropKey>>;
|
|
240
|
-
/** What it leaves in it. */
|
|
241
|
-
type RestPropsOf<P> = Omit<P, StylePropKey>;
|
|
242
|
-
|
|
243
|
-
/**
|
|
244
|
-
* `splitStyleProps`, memoized on the values (R14). A component calls it on what is left
|
|
245
|
-
* after destructuring its own props, applies the style half between the tint and its
|
|
246
|
-
* `style`, and forwards the rest:
|
|
247
|
-
*
|
|
248
|
-
* ```tsx
|
|
249
|
-
* const [styleProps, rest] = useStyleProps(props)
|
|
250
|
-
* <Pressable style={[styles.root, tint, styleProps, style]} {...rest} />
|
|
251
|
-
* ```
|
|
252
|
-
*
|
|
253
|
-
* The identity is stable while the values are, which is what a memoized child or an
|
|
254
|
-
* animated style depends on. It is keyed on a hash rather than on the object, because the
|
|
255
|
-
* object is a fresh rest-spread on every render and would never hit.
|
|
256
|
-
*/
|
|
257
|
-
declare function useStyleProps<P extends object>(props: P): [StylePropsOf<P>, RestPropsOf<P>];
|
|
258
|
-
|
|
259
|
-
/** Anything React accepts as a ref, plus the absence of one. */
|
|
260
|
-
type PossibleRef<T> = Ref<T> | undefined;
|
|
261
|
-
/**
|
|
262
|
-
* The props `mergeProps` knows how to combine. Deliberately loose: it merges whatever a
|
|
263
|
-
* root hands to whatever child it was given, and neither side is knowable from here.
|
|
264
|
-
*/
|
|
265
|
-
type MergeableProps = Record<string, unknown>;
|
|
266
|
-
type AsChildProps = {
|
|
267
|
-
/**
|
|
268
|
-
* Merge this component's props into its single child instead of rendering an element
|
|
269
|
-
* of its own — a navigation `Link` as a `Button`, a bespoke trigger as a `Select`.
|
|
270
|
-
*/
|
|
271
|
-
asChild?: boolean;
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
type PortalProps = {
|
|
275
|
-
children: ReactNode;
|
|
276
|
-
};
|
|
277
|
-
/**
|
|
278
|
-
* Renders its children into the nearest `PortalHost` instead of where it sits. What
|
|
279
|
-
* `Dialog`, `Sheet`, `Drawer` and `Snackbar` are built on: an overlay has to escape the
|
|
280
|
-
* clipping and stacking of whatever container happened to hold the trigger.
|
|
281
|
-
*
|
|
282
|
-
* Both halves run in layout effects rather than effects, which is deliberate: the content
|
|
283
|
-
* lands in the same commit as the trigger's, so an overlay neither shows one frame late
|
|
284
|
-
* nor survives one frame past the unmount that closed it. The unpublish sits in its own
|
|
285
|
-
* effect so that it does not depend on `children` — a re-publish then keeps the portal's
|
|
286
|
-
* place in the host's order instead of dropping it and re-adding it at the end.
|
|
287
|
-
*/
|
|
288
|
-
declare function Portal({ children }: PortalProps): null;
|
|
289
|
-
declare namespace Portal {
|
|
290
|
-
var displayName: string;
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
type PortalMethods = {
|
|
294
|
-
addPortal: (key: string, element: ReactNode) => void;
|
|
295
|
-
removePortal: (key: string) => void;
|
|
296
|
-
};
|
|
297
|
-
/**
|
|
298
|
-
* `null` outside a host, and `Portal` treats that as "render nothing" rather than
|
|
299
|
-
* throwing: an app that forgot `PortalHost` should lose its overlays, not crash on the
|
|
300
|
-
* first `Dialog`.
|
|
301
|
-
*/
|
|
302
|
-
declare const PortalContext: react.Context<PortalMethods | null>;
|
|
303
|
-
|
|
304
|
-
type PortalHostProps = {
|
|
305
|
-
children: ReactNode;
|
|
306
|
-
};
|
|
307
|
-
/**
|
|
308
|
-
* Where every `Portal` in the tree below renders. Mounted once, at the root of the app,
|
|
309
|
-
* above navigation — an overlay that renders inside a screen is clipped by it.
|
|
310
|
-
*/
|
|
311
|
-
declare function PortalHost({ children }: PortalHostProps): react.JSX.Element;
|
|
312
|
-
declare namespace PortalHost {
|
|
313
|
-
var displayName: string;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
/**
|
|
317
|
-
* R3: the string a root should wrap in its default text slot, or `null` when it should
|
|
318
|
-
* render its children as they are.
|
|
319
|
-
*
|
|
320
|
-
* The whole tree is stringified recursively rather than the first child inspected. That
|
|
321
|
-
* is what makes `<Button>{count} items</Button>` work — children there are the array
|
|
322
|
-
* `[3, ' items']`, and an `isValidElement` check on the first entry would call it an
|
|
323
|
-
* element-free tree only by accident, while a check for "is the first child a string"
|
|
324
|
-
* would miss it outright.
|
|
325
|
-
*
|
|
326
|
-
* `null` for an empty result as much as for a tree containing an element: in both cases
|
|
327
|
-
* there is nothing to wrap, and a root's fallback — render the children — is right for
|
|
328
|
-
* both. It also keeps `<Button>{false}</Button>` from mounting an empty text node.
|
|
329
|
-
*/
|
|
330
|
-
declare function childrenToString(children: ReactNode): string | null;
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* A context a slot cannot read by accident. Every compound gets one, and it carries
|
|
334
|
-
* **resolved** values — style references the root already computed, not tokens for the
|
|
335
|
-
* slot to resolve again (R5).
|
|
336
|
-
*
|
|
337
|
-
* ```ts
|
|
338
|
-
* const [ButtonProvider, useButton] = createSlotContext<ButtonContext>('Button')
|
|
339
|
-
* ```
|
|
340
|
-
*
|
|
341
|
-
* The tuple is what lets each compound name its own hook, which R10 requires it to
|
|
342
|
-
* export. `name` gives both halves of the error, so there is one place to spell it.
|
|
343
|
-
*/
|
|
344
|
-
declare function createSlotContext<T>(name: string): readonly [Provider<T | null>, () => T];
|
|
345
|
-
|
|
346
|
-
/**
|
|
347
|
-
* Merges a root's own props into the child it renders through `asChild` (R12). Four
|
|
348
|
-
* rules, and the child wins wherever they do not apply — it is the more specific intent:
|
|
349
|
-
*
|
|
350
|
-
* - **Event handlers compose.** Both run, ours first: the component's own behaviour (the
|
|
351
|
-
* press state that drives its styles) happens before the child's side effect (the
|
|
352
|
-
* navigation). Replacing one with the other is the bug this exists to prevent.
|
|
353
|
-
* - **Styles stack**, ours under the child's, so the child can override.
|
|
354
|
-
* - **`ref`s merge** through `mergeRefs`. React 19 passes `ref` as an ordinary prop, so
|
|
355
|
-
* it arrives here rather than beside the props, and dropping it would sever the root's
|
|
356
|
-
* handle on the node.
|
|
357
|
-
* - **Everything else: the child's value wins**, and ours fills in what it left unset.
|
|
358
|
-
*/
|
|
359
|
-
declare function mergeProps(ours: MergeableProps, theirs: MergeableProps): MergeableProps;
|
|
360
|
-
|
|
361
|
-
/**
|
|
362
|
-
* One callback that feeds several refs — what lets a root keep its own handle on a node
|
|
363
|
-
* while still honouring the ref its caller passed (R9), and what `asChild` needs to
|
|
364
|
-
* forward a ref into the child it merges into (R12).
|
|
365
|
-
*
|
|
366
|
-
* It returns nothing on purpose. React 19 reads a ref callback's return value as a
|
|
367
|
-
* cleanup function while React 18 ignores it, and this package supports both; letting
|
|
368
|
-
* a merged cleanup through would behave differently on each. React calls every ref with
|
|
369
|
-
* `null` on unmount anyway, which this forwards.
|
|
370
|
-
*/
|
|
371
|
-
declare function mergeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
|
|
372
|
-
|
|
373
|
-
type SlotProps = MergeableProps & {
|
|
374
|
-
children?: ReactNode;
|
|
375
|
-
};
|
|
376
|
-
/**
|
|
377
|
-
* The render branch behind `asChild` (R12). A root picks it instead of its own element:
|
|
378
|
-
*
|
|
379
|
-
* ```tsx
|
|
380
|
-
* const Root = asChild ? Slot : Pressable
|
|
381
|
-
* return <Root ref={ref} {...rootProps}>{children}</Root>
|
|
382
|
-
* ```
|
|
383
|
-
*
|
|
384
|
-
* One line per root, which is the point — forty-seven roots each hand-rolling a
|
|
385
|
-
* `cloneElement` and a ref merge would drift, and R12 has to hold uniformly from the
|
|
386
|
-
* first component or the ref signature of the whole core changes later.
|
|
387
|
-
*/
|
|
388
|
-
declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<unknown>>;
|
|
389
|
-
|
|
390
|
-
export { AnimationProp, type AsChildProps, FEEDBACK_OVERLAY, FeedbackContext, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, ResolvedAnimation, SCALE_REFERENCE_WIDTH, Slot, SlotAnimation, type SlotProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps };
|
|
391
|
+
export { AnimationProp, type AsChildProps, FEEDBACK_OVERLAY, FeedbackContext, HIGHLIGHT_DURATION, HIGHLIGHT_OPACITY, Icon, IconContext, IconContextValue, IconProps, type MergeableProps, PRESS_DURATION, PRESS_SCALE, Portal, PortalContext, PortalHost, type PortalHostProps, type PortalMethods, type PortalProps, type PossibleRef, PressableFeedback, type PressableFeedbackHighlightProps, type PressableFeedbackRippleProps, RIPPLE_CONFIRM_DURATION, RIPPLE_EXPAND_DURATION, RIPPLE_FADE_IN, RIPPLE_FADE_OUT, RIPPLE_FADE_OUT_DELAY, RIPPLE_OPACITY, RIPPLE_START_SCALE, ResolvedAnimation, SCALE_REFERENCE_WIDTH, Slot, SlotAnimation, type SlotProps, ViewStyleProps, childrenToString, createSlotContext, markOverlay, mergeProps, mergeRefs, pressScaleFor, resolveAnimation, resolveSlotAnimation, rippleRadiusFor, useFeedback, useIconContext, useStyleProps };
|
package/dist/system/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
Portal,
|
|
3
3
|
PortalContext,
|
|
4
4
|
PortalHost
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-UOJBK5Z4.js";
|
|
6
6
|
import {
|
|
7
7
|
FEEDBACK_OVERLAY,
|
|
8
8
|
HIGHLIGHT_DURATION,
|
|
@@ -34,7 +34,7 @@ import {
|
|
|
34
34
|
useFeedback,
|
|
35
35
|
useIconContext,
|
|
36
36
|
useStyleProps
|
|
37
|
-
} from "../chunk-
|
|
37
|
+
} from "../chunk-64L44HEI.js";
|
|
38
38
|
import "../chunk-XJARE6SC.js";
|
|
39
39
|
export {
|
|
40
40
|
FEEDBACK_OVERLAY,
|