@xaui/native 0.9.1-alpha.16 → 0.9.1-alpha.18

package/dist/chunk-4K3LZS7M.js

@@ -0,0 +1,448 @@
+import {
+  deriveTint,
+  stableHash
+} from "./chunk-XJARE6SC.js";
+
+// src/system/style-props/use-style-props.ts
+import { useMemo } from "react";
+
+// src/utils/style-props.ts
+var STYLE_PROP_KEYS = [
+  // Flex and layout
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "aspectRatio",
+  "boxSizing",
+  "columnGap",
+  "direction",
+  "display",
+  "flex",
+  "flexBasis",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "gap",
+  "justifyContent",
+  "overflow",
+  "rowGap",
+  // Position
+  "bottom",
+  "end",
+  "inset",
+  "insetBlock",
+  "insetBlockEnd",
+  "insetBlockStart",
+  "insetInline",
+  "insetInlineEnd",
+  "insetInlineStart",
+  "position",
+  "start",
+  "top",
+  "zIndex",
+  // Margin
+  "margin",
+  "marginBlock",
+  "marginBlockEnd",
+  "marginBlockStart",
+  "marginBottom",
+  "marginEnd",
+  "marginHorizontal",
+  "marginInline",
+  "marginInlineEnd",
+  "marginInlineStart",
+  "marginStart",
+  "marginTop",
+  "marginVertical",
+  // Padding
+  "padding",
+  "paddingBlock",
+  "paddingBlockEnd",
+  "paddingBlockStart",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingInline",
+  "paddingInlineEnd",
+  "paddingInlineStart",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  // Size
+  "height",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "width",
+  // Border
+  "borderBlockColor",
+  "borderBlockEndColor",
+  "borderBlockStartColor",
+  "borderBottomColor",
+  "borderBottomEndRadius",
+  "borderBottomStartRadius",
+  "borderBottomWidth",
+  "borderColor",
+  "borderCurve",
+  "borderEndColor",
+  "borderEndEndRadius",
+  "borderEndStartRadius",
+  "borderEndWidth",
+  "borderRadius",
+  "borderStartColor",
+  "borderStartEndRadius",
+  "borderStartStartRadius",
+  "borderStartWidth",
+  "borderStyle",
+  "borderTopColor",
+  "borderTopEndRadius",
+  "borderTopStartRadius",
+  "borderTopWidth",
+  "borderWidth",
+  // Fill, shadow, and the rest of a box's paint
+  "backfaceVisibility",
+  "backgroundColor",
+  "boxShadow",
+  "cursor",
+  "elevation",
+  "experimental_backgroundImage",
+  "filter",
+  "isolation",
+  "mixBlendMode",
+  "opacity",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  // Transform
+  "rotation",
+  "scaleX",
+  "scaleY",
+  "transform",
+  "transformMatrix",
+  "transformOrigin",
+  "translateX",
+  "translateY",
+  // Text — a text slot only
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "includeFontPadding",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textAlignVertical",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  "textTransform",
+  "userSelect",
+  "verticalAlign",
+  "writingDirection",
+  // Image — an image slot only
+  "objectFit",
+  "overlayColor",
+  "resizeMode",
+  "tintColor"
+];
+var STYLE_PROP_KEY_SET = new Set(STYLE_PROP_KEYS);
+function splitStyleProps(props) {
+  const styleProps = {};
+  const rest = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (STYLE_PROP_KEY_SET.has(key)) styleProps[key] = value;
+    else rest[key] = value;
+  }
+  return [styleProps, rest];
+}
+
+// src/system/style-props/use-style-props.ts
+function useStyleProps(props) {
+  const [styleProps, rest] = splitStyleProps(props);
+  const key = stableHash(styleProps);
+  return [useMemo(() => styleProps, [key]), rest];
+}
+
+// src/system/slot/children-to-string.ts
+import { isValidElement } 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 (isValidElement(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;
+}
+
+// src/system/slot/create-slot-context.ts
+import { createContext, useContext } from "react";
+function createSlotContext(name) {
+  const Context = createContext(null);
+  Context.displayName = `XAUI.${name}.Context`;
+  function useSlotContext() {
+    const value = useContext(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/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
+import { cloneElement, forwardRef, isValidElement as isValidElement2 } from "react";
+var Slot = forwardRef(function Slot2({ children, ...ours }, ref) {
+  if (!isValidElement2(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/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 } 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 = StyleSheet.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;
+}
+
+export {
+  useStyleProps,
+  childrenToString,
+  createSlotContext,
+  mergeRefs,
+  mergeProps,
+  Slot,
+  createRecipe
+};