@xaui/native 0.9.1-alpha.0 → 0.9.1-alpha.10

package/dist/chunk-7D262JCJ.cjs

@@ -0,0 +1,716 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunk3QBT3Q65cjs = require('./chunk-3QBT3Q65.cjs');
+
+// src/system/icon/icon-context.ts
+var _react = require('react');
+var IconContext = _react.createContext.call(void 0, {});
+IconContext.displayName = "XAUI.Icon.Context";
+function useIconContext() {
+  return _react.useContext.call(void 0, IconContext);
+}
+
+// src/system/icon/icon.tsx
+
+var _reactnative = require('react-native');
+var _jsxruntime = require('react/jsx-runtime');
+function Icon({
+  as: Component,
+  children,
+  source,
+  size,
+  color,
+  style
+}) {
+  const inherited = useIconContext();
+  const theme = _chunk3QBT3Q65cjs.useXAUITheme.call(void 0, );
+  const resolvedSize = _nullishCoalesce(_nullishCoalesce(size, () => ( inherited.size)), () => ( theme.fontSizes.md));
+  const resolvedColor = _nullishCoalesce(_nullishCoalesce(color, () => ( inherited.color)), () => ( theme.colors.foreground));
+  if (Component) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { size: resolvedSize, color: resolvedColor });
+  }
+  if (_react.isValidElement.call(void 0, children)) {
+    return _react.cloneElement.call(void 0, children, {
+      width: resolvedSize,
+      height: resolvedSize,
+      color: resolvedColor
+    });
+  }
+  if (source) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Image,
+      {
+        source,
+        style: [
+          { width: resolvedSize, height: resolvedSize, tintColor: resolvedColor },
+          style
+        ]
+      }
+    );
+  }
+  throw new Error(
+    "XAUI: Icon needs one of `as` (an icon component), a raw SVG element as its child, or `source` (an image). It renders nothing on its own."
+  );
+}
+Icon.displayName = "XAUI.Icon";
+
+// src/system/slot/children-to-string.ts
+
+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 (_react.isValidElement.call(void 0, 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
+
+function createSlotContext(name) {
+  const Context = _react.createContext.call(void 0, null);
+  Context.displayName = `XAUI.${name}.Context`;
+  function useSlotContext() {
+    const value = _react.useContext.call(void 0, 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.`
+      );
+      _optionalChain([Error, 'access', _ => _.captureStackTrace, 'optionalCall', _2 => _2(
+        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
+
+var Slot = _react.forwardRef.call(void 0, function Slot2({ children, ...ours }, ref) {
+  if (!_react.isValidElement.call(void 0, 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 _react.cloneElement.call(void 0, child, merged);
+});
+Slot.displayName = "XAUI.Slot";
+function refOf(element) {
+  const fromProps = element.props.ref;
+  const fromElement = element.ref;
+  return _nullishCoalesce(fromProps, () => ( fromElement));
+}
+
+// src/system/pressable-feedback/pressable-feedback-context.ts
+
+var [FeedbackProvider, useFeedback] = createSlotContext("PressableFeedback");
+var DisableAllContext = _react.createContext.call(void 0, false);
+
+// 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 = _nullishCoalesce(animation.scale, () => ( true));
+  const highlight = _nullishCoalesce(animation.highlight, () => ( true));
+  const ripple = _nullishCoalesce(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: _nullishCoalesce(override.duration, () => ( defaultDuration)),
+    opacity: _nullishCoalesce(override.opacity, () => ( defaultOpacity))
+  };
+}
+
+// src/system/pressable-feedback/pressable-feedback.tsx
+
+
+
+
+
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/system/pressable-feedback/pressable-feedback-highlight.tsx
+
+
+
+
+
+
+
+
+function PressableFeedbackHighlight({
+  style,
+  animation: override
+}) {
+  const { isPressed, animation, progress } = useFeedback();
+  const theme = _chunk3QBT3Q65cjs.useXAUITheme.call(void 0, );
+  const settings = resolveSlotAnimation(
+    override,
+    animation.highlight,
+    HIGHLIGHT_OPACITY
+  );
+  const base = [
+    _reactnative.StyleSheet.absoluteFillObject,
+    { backgroundColor: theme.colors.foreground },
+    style
+  ];
+  if (!progress || !settings.enabled) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.View,
+      {
+        pointerEvents: "none",
+        style: [base, { opacity: isPressed ? settings.opacity : 0 }]
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AnimatedHighlight,
+    {
+      base,
+      duration: settings.duration,
+      opacity: settings.opacity
+    }
+  );
+}
+PressableFeedbackHighlight.displayName = "XAUI.PressableFeedback.Highlight";
+function AnimatedHighlight({
+  base,
+  duration,
+  opacity
+}) {
+  const { isPressed } = useFeedback();
+  const shown = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  _react.useEffect.call(void 0, () => {
+    shown.value = _reactnativereanimated.withTiming.call(void 0, isPressed ? 1 : 0, { duration });
+  }, [isPressed, shown, duration]);
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, 
+    () => ({ opacity: shown.value * opacity }),
+    [shown, opacity]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, { pointerEvents: "none", style: [base, animatedStyle] });
+}
+
+// src/system/pressable-feedback/pressable-feedback-ripple.tsx
+
+
+
+
+
+
+
+
+function PressableFeedbackRipple({
+  style,
+  animation: override
+}) {
+  const { animation, progress, pressCount, origin, size } = useFeedback();
+  const theme = _chunk3QBT3Q65cjs.useXAUITheme.call(void 0, );
+  const settings = resolveSlotAnimation(
+    override,
+    animation.ripple,
+    RIPPLE_OPACITY,
+    RIPPLE_DURATION
+  );
+  if (!progress || !pressCount || !origin || !size || !settings.enabled) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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 = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const waveB = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const fromA = _reactnativereanimated.useSharedValue.call(void 0, { x: 0, y: 0 });
+  const fromB = _reactnativereanimated.useSharedValue.call(void 0, { x: 0, y: 0 });
+  const useA = _reactnativereanimated.useSharedValue.call(void 0, true);
+  _reactnativereanimated.useAnimatedReaction.call(void 0, 
+    () => _nullishCoalesce(_optionalChain([pressCount, 'optionalAccess', _3 => _3.value]), () => ( 0)),
+    (count, previous) => {
+      if (previous === null || count === previous) return;
+      const wave = useA.value ? waveA : waveB;
+      const from = useA.value ? fromA : fromB;
+      from.value = _nullishCoalesce(_optionalChain([origin, 'optionalAccess', _4 => _4.value]), () => ( { x: 0, y: 0 }));
+      wave.value = 0;
+      wave.value = _reactnativereanimated.withTiming.call(void 0, 2, { duration: duration * 2 });
+      useA.value = !useA.value;
+    },
+    [pressCount, origin, duration, waveA, waveB, fromA, fromB, useA]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      RippleWave,
+      {
+        wave: waveA,
+        from: fromA,
+        size,
+        color,
+        opacity,
+        style
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      RippleWave,
+      {
+        wave: waveB,
+        from: fromB,
+        size,
+        color,
+        opacity,
+        style
+      }
+    )
+  ] });
+}
+function RippleWave({
+  wave,
+  from,
+  size,
+  color,
+  opacity,
+  style
+}) {
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => {
+    const within = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _5 => _5.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: _reactnativereanimated.interpolate.call(void 0, wave.value, [0, 1, 2], [0, opacity, 0]),
+      transform: [
+        { translateX: at.x - radius },
+        { translateY: at.y - radius },
+        { scale: _reactnativereanimated.interpolate.call(void 0, wave.value, [0, 1, 2], [0, 1, 1]) }
+      ]
+    };
+  }, [wave, from, size, opacity]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnativereanimated2.default.View,
+    {
+      pointerEvents: "none",
+      style: [
+        { position: "absolute", backgroundColor: color },
+        animatedStyle,
+        style
+      ]
+    }
+  );
+}
+
+// src/system/pressable-feedback/pressable-feedback.tsx
+
+var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
+var AnimatedSlot = _reactnativereanimated2.default.createAnimatedComponent(Slot);
+var PressableFeedback = _react.forwardRef.call(void 0, 
+  function PressableFeedback2({ animation, feedbackVariant = "scale-highlight", ...rest }, ref) {
+    const inheritedDisableAll = _react.useContext.call(void 0, DisableAllContext);
+    const resolved = resolveAnimation(animation, inheritedDisableAll);
+    const Feedback = resolved.none || feedbackVariant === "none" ? StaticFeedback : AnimatedFeedback;
+    const body2 = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Feedback,
+      {
+        ref,
+        animation: resolved,
+        feedbackVariant,
+        ...rest
+      }
+    );
+    return resolved.disableAll ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisableAllContext.Provider, { value: true, children: body2 }) : body2;
+  }
+);
+var StaticFeedback = _react.forwardRef.call(void 0, function StaticFeedback2({
+  isPressed = false,
+  isDisabled,
+  asChild = false,
+  animation,
+  feedbackVariant,
+  children,
+  style,
+  ...rest
+}, ref) {
+  const context = _react.useMemo.call(void 0, () => ({ isPressed, animation }), [isPressed, animation]);
+  const Root = asChild ? Slot : _reactnative.Pressable;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FeedbackProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Root,
+    {
+      ref,
+      style: [clipFor(feedbackVariant, asChild), style],
+      disabled: isDisabled,
+      ...rest,
+      children: body(asChild, feedbackVariant, children)
+    }
+  ) });
+});
+var AnimatedFeedback = _react.forwardRef.call(void 0, function AnimatedFeedback2({
+  isPressed = false,
+  isDisabled,
+  asChild = false,
+  animation,
+  feedbackVariant,
+  children,
+  style,
+  onPressIn,
+  onLayout,
+  ...rest
+}, ref) {
+  const progress = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const pressCount = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const origin = _reactnativereanimated.useSharedValue.call(void 0, { x: 0, y: 0 });
+  const size = _reactnativereanimated.useSharedValue.call(void 0, { width: 0, height: 0 });
+  _react.useEffect.call(void 0, () => {
+    progress.value = _reactnativereanimated.withTiming.call(void 0, isPressed ? 1 : 0, {
+      duration: isPressed ? PRESS_DURATION : RELEASE_DURATION
+    });
+  }, [isPressed, progress]);
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, 
+    () => animation.scale ? { transform: [{ scale: 1 - (1 - PRESS_SCALE) * progress.value }] } : {},
+    [animation.scale, progress]
+  );
+  const context = _react.useMemo.call(void 0, 
+    () => ({ 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;
+    _optionalChain([onPressIn, 'optionalCall', _6 => _6(event)]);
+  };
+  const handleLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout;
+    size.value = { width, height };
+    _optionalChain([onLayout, 'optionalCall', _7 => _7(event)]);
+  };
+  const Root = asChild ? AnimatedSlot : AnimatedPressable;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FeedbackProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Root,
+    {
+      ref,
+      style: [clipFor(feedbackVariant, asChild), style, animatedStyle],
+      disabled: isDisabled,
+      onPressIn: handlePressIn,
+      onLayout: handleLayout,
+      ...rest,
+      children: body(asChild, feedbackVariant, children)
+    }
+  ) });
+});
+function body(asChild, variant, children) {
+  if (asChild) return children;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultOverlay, { variant }),
+    children
+  ] });
+}
+var OVERLAY_CLIP = { overflow: "hidden" };
+function clipFor(variant, asChild) {
+  if (asChild) return null;
+  const mountsOverlay = variant === "scale-highlight" || variant === "scale-ripple";
+  return mountsOverlay ? OVERLAY_CLIP : null;
+}
+function DefaultOverlay({ variant }) {
+  if (variant === "scale-highlight") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PressableFeedbackHighlight, {});
+  if (variant === "scale-ripple") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PressableFeedbackRipple, {});
+  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 = _chunk3QBT3Q65cjs.deriveTint.call(void 0, color, theme);
+  const colors = {};
+  for (const [role, token] of Object.entries(_nullishCoalesce(tokens, () => ( {})))) {
+    colors[role] = tint[tintSliceFor(token)];
+  }
+  return colors;
+}
+
+// src/system/recipe/style-cache.ts
+
+
+// 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(_nullishCoalesce(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] ? _optionalChain([states, 'optionalAccess', _8 => _8[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(_nullishCoalesce(config.variants, () => ( {})))) {
+    const value = selection[axis];
+    const fn = value === void 0 ? void 0 : values[value];
+    if (fn) fns.push(fn);
+  }
+  for (const compound of _nullishCoalesce(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(_nullishCoalesce(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] = _nullishCoalesce(built[slot], () => ( {}));
+      const created = _reactnative.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}:${_nullishCoalesce(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 : _optionalChain([config, 'access', _9 => _9.variantTokens, 'optionalAccess', _10 => _10[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;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.IconContext = IconContext; exports.useIconContext = useIconContext; exports.Icon = Icon; exports.childrenToString = childrenToString; exports.createSlotContext = createSlotContext; exports.mergeRefs = mergeRefs; exports.mergeProps = mergeProps; exports.Slot = Slot; exports.useFeedback = useFeedback; exports.PRESS_SCALE = PRESS_SCALE; exports.PRESS_DURATION = PRESS_DURATION; exports.RELEASE_DURATION = RELEASE_DURATION; exports.HIGHLIGHT_OPACITY = HIGHLIGHT_OPACITY; exports.RIPPLE_OPACITY = RIPPLE_OPACITY; exports.RIPPLE_DURATION = RIPPLE_DURATION; exports.RIPPLE_COVERAGE = RIPPLE_COVERAGE; exports.resolveAnimation = resolveAnimation; exports.resolveSlotAnimation = resolveSlotAnimation; exports.PressableFeedback = PressableFeedback3; exports.createRecipe = createRecipe;