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

package/dist/chunk-ECDWSSHJ.js

@@ -0,0 +1,688 @@
+import {
+  deriveTint,
+  useXAUITheme
+} from "./chunk-X2K2FX3W.js";
+
+// src/system/portal/portal.tsx
+import { useContext, useId, useLayoutEffect } from "react";
+
+// src/system/portal/portal-context.ts
+import { createContext } from "react";
+var PortalContext = createContext(null);
+
+// src/system/portal/portal.tsx
+function Portal({ children }) {
+  const context = useContext(PortalContext);
+  const key = useId();
+  useLayoutEffect(() => {
+    context?.addPortal(key, children);
+  }, [children, context, key]);
+  useLayoutEffect(() => {
+    return () => context?.removePortal(key);
+  }, [context, key]);
+  return null;
+}
+Portal.displayName = "XAUI.Portal";
+
+// src/system/portal/portal-host.tsx
+import { Fragment, useCallback, useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
+var styles = StyleSheet.create({
+  container: { flex: 1 }
+});
+function PortalHost({ children }) {
+  const [portals, setPortals] = useState(/* @__PURE__ */ new Map());
+  const addPortal = useCallback((key, element) => {
+    setPortals((current) => new Map(current).set(key, element));
+  }, []);
+  const removePortal = useCallback((key) => {
+    setPortals((current) => {
+      if (!current.has(key)) return current;
+      const next = new Map(current);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+  const methods = useMemo(
+    () => ({ addPortal, removePortal }),
+    [addPortal, removePortal]
+  );
+  return /* @__PURE__ */ React.createElement(PortalContext.Provider, { value: methods }, /* @__PURE__ */ React.createElement(View, { style: styles.container }, children, Array.from(portals, ([key, element]) => /* @__PURE__ */ React.createElement(Fragment, { key }, element))));
+}
+PortalHost.displayName = "XAUI.PortalHost";
+
+// src/system/pressable-feedback/pressable-feedback.tsx
+import { forwardRef as forwardRef2, useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { Pressable } from "react-native";
+import Animated3, {
+  useAnimatedStyle as useAnimatedStyle3,
+  useSharedValue as useSharedValue3,
+  withTiming as withTiming3
+} from "react-native-reanimated";
+
+// src/system/pressable-feedback/pressable-feedback-context.ts
+import { createContext as createContext3 } from "react";
+
+// src/system/slot/create-slot-context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+function createSlotContext(name) {
+  const Context = createContext2(null);
+  Context.displayName = `XAUI.${name}.Context`;
+  function useSlotContext() {
+    const value = useContext2(Context);
+    if (value === null) {
+      const error = new Error(
+        `XAUI: use${name} must be called inside <${name}>. A slot reads the values its root resolved, so it can only be rendered as a child of one.`
+      );
+      Error.captureStackTrace?.(
+        error,
+        useSlotContext
+      );
+      throw error;
+    }
+    return value;
+  }
+  return [Context.Provider, useSlotContext];
+}
+
+// src/system/pressable-feedback/pressable-feedback-context.ts
+var [FeedbackProvider, useFeedback] = createSlotContext("PressableFeedback");
+var DisableAllContext = createContext3(false);
+
+// src/system/pressable-feedback/pressable-feedback-highlight.tsx
+import { useEffect } from "react";
+import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+
+// src/system/pressable-feedback/pressable-feedback.animation.ts
+var PRESS_SCALE = 0.975;
+var PRESS_DURATION = 100;
+var RELEASE_DURATION = 150;
+var HIGHLIGHT_OPACITY = 0.08;
+var RIPPLE_OPACITY = 0.12;
+var RIPPLE_DURATION = 350;
+var RIPPLE_COVERAGE = 1.25;
+var ALL_OFF = {
+  scale: false,
+  highlight: false,
+  ripple: false,
+  none: true
+};
+var ALL_ON = {
+  scale: true,
+  highlight: true,
+  ripple: true,
+  none: false
+};
+function resolveAnimation(animation, inheritedDisableAll = false) {
+  if (inheritedDisableAll) return { ...ALL_OFF, disableAll: true };
+  if (animation === false || animation === "disabled") {
+    return { ...ALL_OFF, disableAll: false };
+  }
+  if (animation === "disable-all") return { ...ALL_OFF, disableAll: true };
+  if (animation === void 0 || animation === true) {
+    return { ...ALL_ON, disableAll: false };
+  }
+  const scale = animation.scale ?? true;
+  const highlight = animation.highlight ?? true;
+  const ripple = animation.ripple ?? true;
+  return {
+    scale,
+    highlight,
+    ripple,
+    none: !scale && !highlight && !ripple,
+    disableAll: false
+  };
+}
+function resolveSlotAnimation(override, enabledByRoot, defaultOpacity, defaultDuration = PRESS_DURATION) {
+  const fallback = {
+    enabled: enabledByRoot,
+    duration: defaultDuration,
+    opacity: defaultOpacity
+  };
+  if (override === void 0 || override === true) return fallback;
+  if (override === false) return { ...fallback, enabled: false };
+  return {
+    enabled: enabledByRoot,
+    duration: override.duration ?? defaultDuration,
+    opacity: override.opacity ?? defaultOpacity
+  };
+}
+
+// src/system/pressable-feedback/pressable-feedback-highlight.tsx
+function PressableFeedbackHighlight({
+  style,
+  animation: override
+}) {
+  const { isPressed, animation, progress } = useFeedback();
+  const theme = useXAUITheme();
+  const settings = resolveSlotAnimation(
+    override,
+    animation.highlight,
+    HIGHLIGHT_OPACITY
+  );
+  const base = [
+    StyleSheet2.absoluteFillObject,
+    { backgroundColor: theme.colors.foreground },
+    style
+  ];
+  if (!progress || !settings.enabled) {
+    return /* @__PURE__ */ React.createElement(
+      View2,
+      {
+        pointerEvents: "none",
+        style: [base, { opacity: isPressed ? settings.opacity : 0 }]
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    AnimatedHighlight,
+    {
+      base,
+      duration: settings.duration,
+      opacity: settings.opacity
+    }
+  );
+}
+PressableFeedbackHighlight.displayName = "XAUI.PressableFeedback.Highlight";
+function AnimatedHighlight({
+  base,
+  duration,
+  opacity
+}) {
+  const { isPressed } = useFeedback();
+  const shown = useSharedValue(0);
+  useEffect(() => {
+    shown.value = withTiming(isPressed ? 1 : 0, { duration });
+  }, [isPressed, shown, duration]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: shown.value * opacity
+  }));
+  return /* @__PURE__ */ React.createElement(Animated.View, { pointerEvents: "none", style: [base, animatedStyle] });
+}
+
+// src/system/pressable-feedback/pressable-feedback-ripple.tsx
+import Animated2, {
+  interpolate,
+  useAnimatedReaction,
+  useAnimatedStyle as useAnimatedStyle2,
+  useSharedValue as useSharedValue2,
+  withTiming as withTiming2
+} from "react-native-reanimated";
+function PressableFeedbackRipple({
+  style,
+  animation: override
+}) {
+  const { animation, progress, pressCount, origin, size } = useFeedback();
+  const theme = useXAUITheme();
+  const settings = resolveSlotAnimation(
+    override,
+    animation.ripple,
+    RIPPLE_OPACITY,
+    RIPPLE_DURATION
+  );
+  if (!progress || !pressCount || !origin || !size || !settings.enabled) return null;
+  return /* @__PURE__ */ React.createElement(
+    AnimatedRipple,
+    {
+      color: theme.colors.foreground,
+      duration: settings.duration,
+      opacity: settings.opacity,
+      style
+    }
+  );
+}
+PressableFeedbackRipple.displayName = "XAUI.PressableFeedback.Ripple";
+function AnimatedRipple({
+  color,
+  duration,
+  opacity,
+  style
+}) {
+  const { pressCount, origin, size } = useFeedback();
+  const waveA = useSharedValue2(0);
+  const waveB = useSharedValue2(0);
+  const fromA = useSharedValue2({ x: 0, y: 0 });
+  const fromB = useSharedValue2({ x: 0, y: 0 });
+  const useA = useSharedValue2(true);
+  useAnimatedReaction(
+    () => pressCount?.value ?? 0,
+    (count, previous) => {
+      if (previous === null || count === previous) return;
+      const wave = useA.value ? waveA : waveB;
+      const from = useA.value ? fromA : fromB;
+      from.value = origin?.value ?? { x: 0, y: 0 };
+      wave.value = 0;
+      wave.value = withTiming2(2, { duration: duration * 2 });
+      useA.value = !useA.value;
+    }
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    RippleWave,
+    {
+      wave: waveA,
+      from: fromA,
+      size,
+      color,
+      opacity,
+      style
+    }
+  ), /* @__PURE__ */ React.createElement(
+    RippleWave,
+    {
+      wave: waveB,
+      from: fromB,
+      size,
+      color,
+      opacity,
+      style
+    }
+  ));
+}
+function RippleWave({
+  wave,
+  from,
+  size,
+  color,
+  opacity,
+  style
+}) {
+  const animatedStyle = useAnimatedStyle2(() => {
+    const within = size?.value ?? { width: 0, height: 0 };
+    const radius = Math.sqrt(within.width * within.width + within.height * within.height) * RIPPLE_COVERAGE;
+    const at = from.value;
+    return {
+      width: radius * 2,
+      height: radius * 2,
+      borderRadius: radius,
+      // Rises as the circle opens and drains once it is open — so the wave is at its
+      // strongest when it covers the control, not when it is a dot under the finger.
+      opacity: interpolate(wave.value, [0, 1, 2], [0, opacity, 0]),
+      transform: [
+        { translateX: at.x - radius },
+        { translateY: at.y - radius },
+        { scale: interpolate(wave.value, [0, 1, 2], [0, 1, 1]) }
+      ]
+    };
+  });
+  return /* @__PURE__ */ React.createElement(
+    Animated2.View,
+    {
+      pointerEvents: "none",
+      style: [
+        { position: "absolute", backgroundColor: color },
+        animatedStyle,
+        style
+      ]
+    }
+  );
+}
+
+// src/system/slot/slot.tsx
+import { cloneElement, forwardRef, isValidElement } from "react";
+
+// src/system/slot/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+// src/system/slot/merge-props.ts
+var EVENT_HANDLER = /^on[A-Z]/;
+function mergeProps(ours, theirs) {
+  const merged = { ...ours };
+  for (const key of Object.keys(theirs)) {
+    const ourValue = ours[key];
+    const theirValue = theirs[key];
+    if (EVENT_HANDLER.test(key)) {
+      merged[key] = composeHandlers(ourValue, theirValue);
+    } else if (key === "style") {
+      merged[key] = mergeStyles(ourValue, theirValue);
+    } else if (key === "ref") {
+      merged[key] = mergeRefs(
+        ourValue,
+        theirValue
+      );
+    } else {
+      merged[key] = theirValue;
+    }
+  }
+  return merged;
+}
+function composeHandlers(ours, theirs) {
+  if (typeof ours !== "function") return theirs;
+  if (typeof theirs !== "function") return ours;
+  return (...args) => {
+    ;
+    ours(...args);
+    return theirs(...args);
+  };
+}
+function mergeStyles(ours, theirs) {
+  if (typeof ours === "function" || typeof theirs === "function") {
+    return (state) => [
+      resolveStyle(ours, state),
+      resolveStyle(theirs, state)
+    ];
+  }
+  return [ours, theirs];
+}
+function resolveStyle(style, state) {
+  return typeof style === "function" ? style(state) : style;
+}
+
+// src/system/slot/slot.tsx
+var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
+  if (!isValidElement(children)) {
+    throw new Error(
+      "XAUI: asChild expects exactly one React element as its child, and merges the component's props into it. Text, a fragment, several children or none give it nothing to merge into \u2014 drop `asChild` to render the component itself."
+    );
+  }
+  const child = children;
+  const merged = mergeProps(ours, child.props);
+  merged.ref = mergeRefs(ref, refOf(child));
+  return cloneElement(child, merged);
+});
+Slot.displayName = "XAUI.Slot";
+function refOf(element) {
+  const fromProps = element.props.ref;
+  const fromElement = element.ref;
+  return fromProps ?? fromElement;
+}
+
+// src/system/pressable-feedback/pressable-feedback.tsx
+var AnimatedPressable = Animated3.createAnimatedComponent(Pressable);
+var AnimatedSlot = Animated3.createAnimatedComponent(Slot);
+var PressableFeedback = forwardRef2(
+  function PressableFeedback2({ animation, feedbackVariant = "scale-highlight", ...rest }, ref) {
+    const inheritedDisableAll = useContext3(DisableAllContext);
+    const resolved = resolveAnimation(animation, inheritedDisableAll);
+    const Feedback = resolved.none || feedbackVariant === "none" ? StaticFeedback : AnimatedFeedback;
+    const body = /* @__PURE__ */ React.createElement(
+      Feedback,
+      {
+        ref,
+        animation: resolved,
+        feedbackVariant,
+        ...rest
+      }
+    );
+    return resolved.disableAll ? /* @__PURE__ */ React.createElement(DisableAllContext.Provider, { value: true }, body) : body;
+  }
+);
+var StaticFeedback = forwardRef2(function StaticFeedback2({
+  isPressed = false,
+  isDisabled,
+  asChild = false,
+  animation,
+  feedbackVariant,
+  children,
+  style,
+  ...rest
+}, ref) {
+  const context = useMemo2(() => ({ isPressed, animation }), [isPressed, animation]);
+  const Root = asChild ? Slot : Pressable;
+  return /* @__PURE__ */ React.createElement(Root, { ref, style, disabled: isDisabled, ...rest }, /* @__PURE__ */ React.createElement(FeedbackProvider, { value: context }, /* @__PURE__ */ React.createElement(DefaultOverlay, { variant: feedbackVariant }), children));
+});
+var AnimatedFeedback = forwardRef2(function AnimatedFeedback2({
+  isPressed = false,
+  isDisabled,
+  asChild = false,
+  animation,
+  feedbackVariant,
+  children,
+  style,
+  onPressIn,
+  onLayout,
+  ...rest
+}, ref) {
+  const progress = useSharedValue3(0);
+  const pressCount = useSharedValue3(0);
+  const origin = useSharedValue3({ x: 0, y: 0 });
+  const size = useSharedValue3({ width: 0, height: 0 });
+  useEffect2(() => {
+    progress.value = withTiming3(isPressed ? 1 : 0, {
+      duration: isPressed ? PRESS_DURATION : RELEASE_DURATION
+    });
+  }, [isPressed, progress]);
+  const animatedStyle = useAnimatedStyle3(
+    () => animation.scale ? { transform: [{ scale: 1 - (1 - PRESS_SCALE) * progress.value }] } : {}
+  );
+  const context = useMemo2(
+    () => ({ isPressed, animation, progress, pressCount, origin, size }),
+    [isPressed, animation, progress, pressCount, origin, size]
+  );
+  const handlePressIn = (event) => {
+    const { locationX, locationY } = event.nativeEvent;
+    origin.value = { x: locationX, y: locationY };
+    pressCount.value += 1;
+    onPressIn?.(event);
+  };
+  const handleLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout;
+    size.value = { width, height };
+    onLayout?.(event);
+  };
+  const clip = feedbackVariant === "scale-ripple" ? { overflow: "hidden" } : null;
+  const Root = asChild ? AnimatedSlot : AnimatedPressable;
+  return /* @__PURE__ */ React.createElement(
+    Root,
+    {
+      ref,
+      style: [clip, style, animatedStyle],
+      disabled: isDisabled,
+      onPressIn: handlePressIn,
+      onLayout: handleLayout,
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(FeedbackProvider, { value: context }, /* @__PURE__ */ React.createElement(DefaultOverlay, { variant: feedbackVariant }), children)
+  );
+});
+function DefaultOverlay({ variant }) {
+  if (variant === "scale-highlight") return /* @__PURE__ */ React.createElement(PressableFeedbackHighlight, null);
+  if (variant === "scale-ripple") return /* @__PURE__ */ React.createElement(PressableFeedbackRipple, null);
+  return null;
+}
+
+// src/system/pressable-feedback/index.ts
+var PressableFeedback3 = Object.assign(PressableFeedback, {
+  Highlight: PressableFeedbackHighlight,
+  Ripple: PressableFeedbackRipple
+});
+
+// src/system/recipe/resolve-tint.ts
+var TINT_SLICE_BY_SUFFIX = [
+  [/SoftForeground$/, "softForeground"],
+  [/SoftPressed$/, "softPressed"],
+  [/Soft$/, "soft"],
+  [/Foreground$/, "foreground"],
+  [/Pressed$/, "pressed"]
+];
+function tintSliceFor(token) {
+  for (const [suffix, slice] of TINT_SLICE_BY_SUFFIX) {
+    if (suffix.test(token)) return slice;
+  }
+  return "base";
+}
+function resolveTint(tokens, color, theme) {
+  const tint = deriveTint(color, theme);
+  const colors = {};
+  for (const [role, token] of Object.entries(tokens ?? {})) {
+    colors[role] = tint[tintSliceFor(token)];
+  }
+  return colors;
+}
+
+// src/system/recipe/style-cache.ts
+import { StyleSheet as StyleSheet3 } from "react-native";
+
+// src/system/recipe/variant-map.ts
+var STATE_ORDER = ["focused", "pressed", "disabled"];
+function resolveSelection(defaultVariants, selection) {
+  const resolved = { ...defaultVariants };
+  for (const [axis, value] of Object.entries(selection ?? {})) {
+    if (value !== void 0) resolved[axis] = value;
+  }
+  return resolved;
+}
+function resolveVariantColors(tokens, theme) {
+  const colors = {};
+  for (const [role, token] of entriesOf(tokens)) {
+    const value = theme.colors[token];
+    if (value === void 0) {
+      throw new Error(
+        `XAUI: the recipe names "${token}" for its "${role}" role, but the theme has no such colour token. Check the spelling against XAUIColors.`
+      );
+    }
+    colors[role] = value;
+  }
+  return colors;
+}
+function activeStateFns(states, active) {
+  const fns = [];
+  for (const state of STATE_ORDER) {
+    const fn = active[state] ? states?.[state] : void 0;
+    if (fn) fns.push(fn);
+  }
+  return fns;
+}
+function collectStyleFns(config, selection, states) {
+  const fns = [];
+  if (config.base) fns.push(config.base);
+  if (config.paint) fns.push(config.paint);
+  for (const [axis, values] of Object.entries(config.variants ?? {})) {
+    const value = selection[axis];
+    const fn = value === void 0 ? void 0 : values[value];
+    if (fn) fns.push(fn);
+  }
+  for (const compound of config.compoundVariants ?? []) {
+    if (appliesTo(compound.when, selection)) fns.push(compound.style);
+  }
+  return [...fns, ...activeStateFns(config.states, states)];
+}
+function appliesTo(when, selection) {
+  return Object.entries(when).every(([axis, value]) => selection[axis] === value);
+}
+function entriesOf(tokens) {
+  return Object.entries(tokens ?? {});
+}
+
+// src/system/recipe/style-cache.ts
+function createStyleCache(slots) {
+  const entries = /* @__PURE__ */ new Map();
+  return {
+    read(key, build) {
+      const hit = entries.get(key);
+      if (hit) return hit;
+      const built = build();
+      const complete = {};
+      for (const slot of slots) complete[slot] = built[slot] ?? {};
+      const created = StyleSheet3.create(complete);
+      entries.set(key, created);
+      return created;
+    },
+    get size() {
+      return entries.size;
+    },
+    clear() {
+      entries.clear();
+    }
+  };
+}
+function cacheKey(theme, selection, states) {
+  const axes = Object.keys(selection).sort().map((axis) => `${axis}:${selection[axis] ?? "-"}`).join("|");
+  const active = STATE_ORDER.filter((state) => states[state]).join(",");
+  return `${theme.id}|${theme.mode}|${axes}|${active}`;
+}
+
+// src/system/recipe/create-recipe.ts
+function createRecipe(config) {
+  const cache = createStyleCache(config.slots);
+  const tokensFor = (variant) => variant === void 0 ? void 0 : config.variantTokens?.[variant];
+  return {
+    slots: config.slots,
+    resolve({ theme, selection, states = {} }) {
+      const resolved = resolveSelection(config.defaultVariants, selection);
+      return cache.read(cacheKey(theme, resolved, states), () => {
+        const colors = resolveVariantColors(tokensFor(resolved.variant), theme);
+        return apply(collectStyleFns(config, resolved, states), theme, colors);
+      });
+    },
+    tint({ theme, color, selection, states = {} }) {
+      if (!config.paint) return {};
+      const resolved = resolveSelection(config.defaultVariants, selection);
+      const tokens = tokensFor(resolved.variant);
+      if (!tokens) return {};
+      const colors = resolveTint(tokens, color, theme);
+      const fns = [config.paint, ...activeStateFns(config.states, states)];
+      return apply(fns, theme, colors);
+    }
+  };
+}
+function apply(fns, theme, colors) {
+  const merged = {};
+  for (const fn of fns) {
+    const produced = fn(theme, colors);
+    for (const slot of Object.keys(produced)) {
+      const style = produced[slot];
+      if (!style) continue;
+      const previous = merged[slot];
+      merged[slot] = previous ? { ...previous, ...style } : style;
+    }
+  }
+  return merged;
+}
+
+// src/system/slot/children-to-string.ts
+import { isValidElement as isValidElement2 } from "react";
+function childrenToString(children) {
+  const text = stringify(children);
+  return text === null || text === "" ? null : text;
+}
+function stringify(node) {
+  if (node === null || node === void 0 || typeof node === "boolean") return "";
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (isValidElement2(node)) return null;
+  if (Array.isArray(node)) {
+    let text = "";
+    for (const child of node) {
+      const part = stringify(child);
+      if (part === null) return null;
+      text += part;
+    }
+    return text;
+  }
+  return null;
+}
+
+export {
+  PortalContext,
+  Portal,
+  PortalHost,
+  createSlotContext,
+  useFeedback,
+  PRESS_SCALE,
+  PRESS_DURATION,
+  RELEASE_DURATION,
+  HIGHLIGHT_OPACITY,
+  RIPPLE_OPACITY,
+  RIPPLE_DURATION,
+  RIPPLE_COVERAGE,
+  resolveAnimation,
+  resolveSlotAnimation,
+  mergeRefs,
+  mergeProps,
+  Slot,
+  PressableFeedback3 as PressableFeedback,
+  createRecipe,
+  childrenToString
+};