@xaui/native 0.9.1-alpha.2 → 0.9.1-alpha.20

package/dist/pressable-feedback.type-BwkKLQlX.d.ts

@@ -0,0 +1,195 @@
+import { ComponentType, ReactNode } from 'react';
+import { ImageSourcePropType, StyleProp, ImageStyle, PressableProps, ViewStyle } from 'react-native';
+import { I as ImageStyleProps, V as ViewStyleProps } from './style-props.type-B1BG5TCm.js';
+import { SharedValue } from 'react-native-reanimated';
+
+/**
+ * The props Lucide, Ionicons and `react-native-vector-icons` all accept — the shape
+ * `as` is handed. It is a convention rather than an interface anyone published, which is
+ * exactly why `Icon` exists: without it every call site computes the two values by hand.
+ */
+type IconComponentProps = {
+    size?: number;
+    color?: string;
+};
+/** What every form takes, and the only lever the two non-rendering ones have. */
+type IconBase = {
+    /** Overrides what the surrounding slot asked for. */
+    size?: number;
+    /** A raw value (R7), never a token. Overrides the slot's. */
+    color?: string;
+};
+/**
+ * An icon component — `size` and `color` are injected into it.
+ *
+ * No style props and no `style`: we do not render this node, the third party does, and
+ * there is no published interface that says it would accept either. Wrapping it in a view
+ * to make them work would add a level of depth to every icon in the library.
+ */
+type IconAsProps = IconBase & {
+    as: ComponentType<IconComponentProps>;
+    children?: never;
+    source?: never;
+};
+/**
+ * A raw `react-native-svg` element, cloned with the resolved size and colour.
+ *
+ * No style props and no `style` either: the node is the caller's own element, and they can
+ * style it where they wrote it.
+ */
+type IconChildrenProps = IconBase & {
+    as?: never;
+    children: ReactNode;
+    source?: never;
+};
+/**
+ * An image, tinted with the resolved colour — **the one form that carries R14**, because
+ * it is the one where we render the node.
+ */
+type IconSourceProps = IconBase & ImageStyleProps & {
+    as?: never;
+    children?: never;
+    source: ImageSourcePropType;
+    style?: StyleProp<ImageStyle>;
+};
+/**
+ * Three forms, and the type says which one you are in.
+ *
+ * The union is what makes R14's boundary checkable rather than merely documented. When
+ * every form declared the style props, `<Icon as={Trash2} marginEnd={8} />` compiled and
+ * did nothing at all — the prop was dropped on the two forms that do not render the node,
+ * silently, and only a comment said so. Now it is a compile error that points at `size`
+ * and `color`, which are the levers those forms actually have.
+ *
+ * It also makes the three mutually exclusive, which they always were at runtime: `as`
+ * wins over children, and children over `source`.
+ */
+type IconProps = IconAsProps | IconChildrenProps | IconSourceProps;
+/** What a component root publishes so the icons inside it need no props at all. */
+type IconContextValue = {
+    size?: number;
+    color?: string;
+};
+
+type AnimationConfig = {
+    scale?: boolean;
+    highlight?: boolean;
+    ripple?: boolean;
+};
+/**
+ * `false` and `'disabled'` turn this component's animations off. `'disable-all'` turns
+ * them off for its descendants too — a long list kills every row's worklets with one
+ * prop instead of threading it down. An object switches them off one at a time.
+ */
+type AnimationProp = boolean | 'disabled' | 'disable-all' | AnimationConfig;
+/** `animation` once normalised — what the components actually read. */
+type ResolvedAnimation = {
+    scale: boolean;
+    highlight: boolean;
+    ripple: boolean;
+    /** True when every sub-animation is off: the branch that mounts no worklet at all. */
+    none: boolean;
+    /** Propagated to descendants through context. */
+    disableAll: boolean;
+};
+/**
+ * R14 — it renders a `Pressable`, so it takes that node's style keys as props. The
+ * primitive every pressable component in the library is built on cannot be the one place
+ * where `padding={16}` has to become an object again.
+ */
+type PressableFeedbackProps = Omit<PressableProps, 'style' | 'children' | 'disabled'> & ViewStyleProps & {
+    /** Controlled: the root owns the state, because its recipe resolves on it (R5). */
+    isPressed?: boolean;
+    /** R8: `disabled` is not part of the public vocabulary, `isX` is. */
+    isDisabled?: boolean;
+    /**
+     * Merge into the single child instead of rendering a pressable (R12) — **keeping the
+     * feedback**. Swapping this component out for a bare `Slot` would silently drop the
+     * touch feedback of every `asChild` control.
+     */
+    asChild?: boolean;
+    animation?: AnimationProp;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The overlays are children, not a prop — `<PressableFeedback.Highlight />` or
+     * `<PressableFeedback.Ripple />`, in any order: the root paints them under everything
+     * else wherever they sit. The scale is the root's own and needs nothing rendered.
+     *
+     * `Pressable`'s function form is dropped on purpose. It exists to hand the press state
+     * to children; here the root above already owns that state and this publishes it
+     * through context, so the function form would be a second, quieter source of truth.
+     */
+    children?: ReactNode;
+};
+/**
+ * A slot's own animation, overriding the blanket one on the root. `false` switches that
+ * slot off; the object tunes it. Deliberately two knobs rather than a full timing
+ * surface — anything past this is a different animation, and that is a component's job,
+ * not a prop's.
+ */
+type SlotAnimation = boolean | {
+    /** Milliseconds. Falls back to the shared press timing. */
+    duration?: number;
+    /** How far the overlay goes at full press, 0 to 1. */
+    opacity?: number;
+};
+/** One ripple wave. Two of them, so a rapid double tap does not cut the one in flight. */
+type RippleWave = {
+    /** `0 → 1` as the circle opens. */
+    expand: SharedValue<number>;
+    /** `0 → 1` as the ink arrives, on its own curve. */
+    alpha: SharedValue<number>;
+    /** Where the finger landed, in the root's coordinates. */
+    origin: SharedValue<{
+        x: number;
+        y: number;
+    }>;
+};
+/**
+ * The corner keys an overlay copies off the root. The `Left`/`Right` forms are absent
+ * rather than forgotten: R13 bans them, because RN mirrors only the logical ones under RTL.
+ */
+type RadiusStyle = Pick<ViewStyle, 'borderRadius' | 'borderStartStartRadius' | 'borderStartEndRadius' | 'borderEndStartRadius' | 'borderEndEndRadius'>;
+type FeedbackContext = {
+    /**
+     * The overlay's ink, resolved by the root from its own background.
+     *
+     * A wash or a wave has to contrast with what it sits on, and only the root knows that —
+     * it flattens its own `style` and reads `backgroundColor`, then takes the contrasting
+     * side the same way a tint does. Black ink at 10% on a saturated fill is close to
+     * invisible, which is the one thing a press indicator cannot be.
+     */
+    ink: string;
+    /**
+     * The root's own corners, so an overlay rounds itself to match. `corners` and not
+     * `radius`: the ripple already has a radius, and it is a length in points rather than a
+     * shape.
+     *
+     * An absolute fill has square corners and every control here is rounded, so without this
+     * both the wash and the wave paint outside the surface at each corner. The overlay
+     * carries the clip rather than the root: clipping the root would also cut a child that
+     * legitimately overflows — a badge on a button's corner — and that child has nothing to
+     * do with the press.
+     */
+    corners: RadiusStyle;
+    isPressed: boolean;
+    animation: ResolvedAnimation;
+    /** Absent on the static branch, where nothing animates and no worklet is mounted. */
+    progress?: SharedValue<number>;
+    /** How big the root is — what the scale coefficient is computed from. */
+    size?: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * The two ripple waves, driven by the **root**.
+     *
+     * They belong to the root because the root is the touch surface. An overlay carrying its
+     * own handlers only hears touches that land on *it* — and it is a sibling of the label,
+     * not its parent, so pressing the text of a button would do nothing. Touches bubble to
+     * the `Pressable`, which is why the handlers live there and the waves are published down.
+     */
+    waves?: readonly [RippleWave, RippleWave];
+};
+
+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 };

package/dist/style-props.type-B1BG5TCm.d.cts

@@ -0,0 +1,31 @@
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
+/**
+ * R13 — React Native mirrors a layout under RTL through the Start/End properties and only
+ * those. A props API is exactly where someone writes `paddingLeft` without thinking, so
+ * the type removes the temptation instead of leaving it to a review.
+ */
+type DirectionalStyleKey = 'left' | 'right' | 'paddingLeft' | 'paddingRight' | 'marginLeft' | 'marginRight' | 'borderLeftWidth' | 'borderRightWidth' | 'borderLeftColor' | 'borderRightColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius';
+/**
+ * `pointerEvents` is a style key *and* a `View` prop. R14 says the component's own prop
+ * wins, so it stays the prop it has always been and is not exposed twice — the one name
+ * where the two vocabularies collide.
+ */
+type ComponentOwnedStyleKey = 'pointerEvents';
+/**
+ * The style keys of a node, exposed as props (R14). Not a maintained list: it derives
+ * from the React Native type, minus what R13 forbids.
+ *
+ * ```ts
+ * type CardProps = ViewStyleProps & { variant?: CardVariant }
+ * ```
+ */
+type StyleProps<Style> = Omit<Style, DirectionalStyleKey | ComponentOwnedStyleKey>;
+/** A root, or any slot that renders a view. */
+type ViewStyleProps = StyleProps<ViewStyle>;
+/** A text slot — `color`, `fontSize`, `letterSpacing`… */
+type TextStyleProps = StyleProps<TextStyle>;
+/** An image slot — `resizeMode`, `tintColor`… */
+type ImageStyleProps = StyleProps<ImageStyle>;
+
+export type { DirectionalStyleKey as D, ImageStyleProps as I, StyleProps as S, TextStyleProps as T, ViewStyleProps as V };

package/dist/style-props.type-B1BG5TCm.d.ts

@@ -0,0 +1,31 @@
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+
+/**
+ * R13 — React Native mirrors a layout under RTL through the Start/End properties and only
+ * those. A props API is exactly where someone writes `paddingLeft` without thinking, so
+ * the type removes the temptation instead of leaving it to a review.
+ */
+type DirectionalStyleKey = 'left' | 'right' | 'paddingLeft' | 'paddingRight' | 'marginLeft' | 'marginRight' | 'borderLeftWidth' | 'borderRightWidth' | 'borderLeftColor' | 'borderRightColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius';
+/**
+ * `pointerEvents` is a style key *and* a `View` prop. R14 says the component's own prop
+ * wins, so it stays the prop it has always been and is not exposed twice — the one name
+ * where the two vocabularies collide.
+ */
+type ComponentOwnedStyleKey = 'pointerEvents';
+/**
+ * The style keys of a node, exposed as props (R14). Not a maintained list: it derives
+ * from the React Native type, minus what R13 forbids.
+ *
+ * ```ts
+ * type CardProps = ViewStyleProps & { variant?: CardVariant }
+ * ```
+ */
+type StyleProps<Style> = Omit<Style, DirectionalStyleKey | ComponentOwnedStyleKey>;
+/** A root, or any slot that renders a view. */
+type ViewStyleProps = StyleProps<ViewStyle>;
+/** A text slot — `color`, `fontSize`, `letterSpacing`… */
+type TextStyleProps = StyleProps<TextStyle>;
+/** An image slot — `resizeMode`, `tintColor`… */
+type ImageStyleProps = StyleProps<ImageStyle>;
+
+export type { DirectionalStyleKey as D, ImageStyleProps as I, StyleProps as S, TextStyleProps as T, ViewStyleProps as V };

package/dist/system/index.cjs

@@ -2,11 +2,10 @@
 
 
 
+var _chunk2WMVDMFVcjs = require('../chunk-2WMVDMFV.cjs');
 
 
 
-var _chunkB755PRVJcjs = require('../chunk-B755PRVJ.cjs');
-require('../chunk-M7P46XKI.cjs');
 
 
 
@@ -14,4 +13,66 @@ require('../chunk-M7P46XKI.cjs');
 
 
 
-exports.Slot = _chunkB755PRVJcjs.Slot; exports.childrenToString = _chunkB755PRVJcjs.childrenToString; exports.createRecipe = _chunkB755PRVJcjs.createRecipe; exports.createSlotContext = _chunkB755PRVJcjs.createSlotContext; exports.mergeProps = _chunkB755PRVJcjs.mergeProps; exports.mergeRefs = _chunkB755PRVJcjs.mergeRefs;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _chunkA4VD4MHKcjs = require('../chunk-A4VD4MHK.cjs');
+
+
+var _chunkUVO4GFSWcjs = require('../chunk-UVO4GFSW.cjs');
+
+
+
+
+
+
+
+var _chunkEVXZGNPAcjs = require('../chunk-EVXZGNPA.cjs');
+require('../chunk-57SJ4LJF.cjs');
+require('../chunk-MC7SY2QH.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.FEEDBACK_OVERLAY = _chunkA4VD4MHKcjs.FEEDBACK_OVERLAY; exports.HIGHLIGHT_DURATION = _chunkA4VD4MHKcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunkA4VD4MHKcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkA4VD4MHKcjs.Icon; exports.IconContext = _chunkA4VD4MHKcjs.IconContext; exports.PRESS_DURATION = _chunkA4VD4MHKcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunkA4VD4MHKcjs.PRESS_SCALE; exports.Portal = _chunk2WMVDMFVcjs.Portal; exports.PortalContext = _chunk2WMVDMFVcjs.PortalContext; exports.PortalHost = _chunk2WMVDMFVcjs.PortalHost; exports.PressableFeedback = _chunkA4VD4MHKcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunkA4VD4MHKcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunkA4VD4MHKcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunkA4VD4MHKcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunkA4VD4MHKcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunkA4VD4MHKcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunkA4VD4MHKcjs.RIPPLE_START_SCALE; exports.SCALE_REFERENCE_WIDTH = _chunkA4VD4MHKcjs.SCALE_REFERENCE_WIDTH; exports.Slot = _chunkEVXZGNPAcjs.Slot; exports.childrenToString = _chunkEVXZGNPAcjs.childrenToString; exports.createRecipe = _chunkUVO4GFSWcjs.createRecipe; exports.createSlotContext = _chunkEVXZGNPAcjs.createSlotContext; exports.markOverlay = _chunkA4VD4MHKcjs.markOverlay; exports.mergeProps = _chunkEVXZGNPAcjs.mergeProps; exports.mergeRefs = _chunkEVXZGNPAcjs.mergeRefs; exports.pressScaleFor = _chunkA4VD4MHKcjs.pressScaleFor; exports.resolveAnimation = _chunkA4VD4MHKcjs.resolveAnimation; exports.resolveSlotAnimation = _chunkA4VD4MHKcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunkA4VD4MHKcjs.rippleRadiusFor; exports.useFeedback = _chunkA4VD4MHKcjs.useFeedback; exports.useIconContext = _chunkA4VD4MHKcjs.useIconContext; exports.useStyleProps = _chunkEVXZGNPAcjs.useStyleProps;