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

package/dist/chunk-LTX6TB5I.js

@@ -0,0 +1,124 @@
+import {
+  useRotation
+} from "./chunk-3GFRSZYR.js";
+import {
+  createRecipe
+} from "./chunk-4GTAZM2C.js";
+import {
+  alpha,
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/spinner/spinner.tsx
+import { forwardRef } from "react";
+import { View } from "react-native";
+import Animated from "react-native-reanimated";
+
+// src/components/spinner/spinner.recipe.ts
+var SLOTS = ["root", "arc"];
+var VARIANT_TOKENS = {
+  primary: { fg: "accent" },
+  secondary: { fg: "accentSoftForeground" },
+  default: { fg: "foreground" },
+  tertiary: { fg: "muted" },
+  success: { fg: "success" },
+  warning: { fg: "warning" },
+  danger: { fg: "danger" }
+};
+var TRACK_OPACITY = 0.18;
+function sizeAxis(step) {
+  return (theme) => {
+    const diameter = theme.spacing(step.diameter);
+    const stroke = theme.borderWidth.default * step.stroke;
+    return {
+      root: {
+        width: diameter,
+        height: diameter,
+        borderRadius: diameter / 2,
+        borderWidth: stroke
+      },
+      // The arc is the same ring, drawn one stroke outside the track's box so the two
+      // circles land on each other rather than nesting. R13 — `start` and `end`, so the
+      // inset mirrors with the layout instead of staying put.
+      arc: {
+        position: "absolute",
+        top: -stroke,
+        bottom: -stroke,
+        start: -stroke,
+        end: -stroke,
+        borderRadius: diameter / 2 + stroke,
+        borderWidth: stroke
+      }
+    };
+  };
+}
+var SIZES = {
+  xs: { diameter: 4, stroke: 2 },
+  sm: { diameter: 5, stroke: 2 },
+  md: { diameter: 6, stroke: 2 },
+  lg: { diameter: 8, stroke: 3 }
+};
+var spinnerRecipe = createRecipe({
+  slots: SLOTS,
+  base: () => ({
+    // Squircle corners are meaningless on a full circle, and `overflow` would clip the
+    // arc that deliberately sits outside this box.
+    root: { alignItems: "center", justifyContent: "center" }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * One ink, two opacities, and the gap that makes the rotation visible.
+   *
+   * `borderTopColor: 'transparent'` is structural rather than a colour the theme has an
+   * opinion about — it is the quarter of the circle that is missing, and without it a
+   * rotating ring is a ring.
+   */
+  paint: (_theme, colors) => ({
+    root: { borderColor: colors.fg ? alpha(colors.fg, TRACK_OPACITY) : void 0 },
+    arc: { borderColor: colors.fg, borderTopColor: "transparent" }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    }
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/spinner/spinner.tsx
+import { jsx } from "react/jsx-runtime";
+var Spinner = forwardRef(function Spinner2({ variant, size, color, animation = true, style, ...props }, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const selection = { variant, size };
+  const styles = spinnerRecipe.resolve({ theme, selection });
+  const tint = color ? spinnerRecipe.tint({ theme, color, selection }) : void 0;
+  const arcStyle = [styles.arc, tint?.arc];
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ref,
+      accessibilityRole: "progressbar",
+      accessibilityState: { busy: animation },
+      ...rest,
+      style: [styles.root, tint?.root, styleProps, style],
+      children: animation ? /* @__PURE__ */ jsx(SpinningArc, { style: arcStyle }) : /* @__PURE__ */ jsx(View, { style: arcStyle })
+    }
+  );
+});
+Spinner.displayName = "XAUI.Spinner";
+function SpinningArc({ style }) {
+  const rotation = useRotation();
+  return /* @__PURE__ */ jsx(Animated.View, { style: [style, rotation] });
+}
+
+export {
+  spinnerRecipe,
+  Spinner
+};

package/dist/chunk-LUPCPLND.cjs

@@ -0,0 +1,145 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
+
+// src/hooks/use-anchored-position.ts
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/utils/placement.ts
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  start: "end",
+  end: "start"
+};
+function axisOf(placement) {
+  return placement === "top" || placement === "bottom" ? "vertical" : "horizontal";
+}
+function resolvePlacement(input) {
+  const { anchor, content, window, offset, alignOffset, insets } = input;
+  const available = window.width - insets.start - insets.end;
+  const width = Math.min(resolveWidth(input), Math.max(available, 0));
+  const placement = choosePlacement(input);
+  const room = Math.max(roomFor(placement, input), 0);
+  const vertical = axisOf(placement) === "vertical";
+  const maxHeight = vertical ? room : Math.max(window.height - insets.top - insets.bottom, 0);
+  const height = Math.min(content.height, maxHeight);
+  const top = clamp(
+    vertical ? placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height : alignedCross(input, height) + alignOffset,
+    insets.top,
+    Math.max(window.height - insets.bottom - height, insets.top)
+  );
+  const start = clamp(
+    vertical ? alignedCross(input, width) + alignOffset : placement === "end" ? anchor.x + anchor.width + offset : anchor.x - offset - width,
+    insets.start,
+    Math.max(window.width - insets.end - width, insets.start)
+  );
+  return { top, start, width, maxHeight, placement };
+}
+function resolveWidth(input) {
+  const { width, anchor, content, placement, window, insets } = input;
+  if (width === "trigger") {
+    return axisOf(placement) === "vertical" ? anchor.width : content.width;
+  }
+  if (width === "full") return Math.max(window.width - insets.start - insets.end, 0);
+  if (width === "content-fit") return content.width;
+  return width;
+}
+function choosePlacement(input) {
+  const { placement, avoidCollisions, content } = input;
+  if (!avoidCollisions) return placement;
+  const wanted = axisOf(placement) === "vertical" ? content.height : content.width;
+  if (roomFor(placement, input) >= wanted) return placement;
+  const other = OPPOSITE[placement];
+  return roomFor(other, input) > roomFor(placement, input) ? other : placement;
+}
+function roomFor(placement, input) {
+  const { anchor, window, offset, insets } = input;
+  switch (placement) {
+    case "bottom":
+      return window.height - insets.bottom - (anchor.y + anchor.height) - offset;
+    case "top":
+      return anchor.y - insets.top - offset;
+    case "end":
+      return window.width - insets.end - (anchor.x + anchor.width) - offset;
+    case "start":
+      return anchor.x - insets.start - offset;
+  }
+}
+function alignedCross({ align, anchor, placement }, size) {
+  const vertical = axisOf(placement) === "vertical";
+  const origin = vertical ? anchor.x : anchor.y;
+  const extent = vertical ? anchor.width : anchor.height;
+  if (align === "start") return origin;
+  if (align === "end") return origin + extent - size;
+  return origin + (extent - size) / 2;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/hooks/use-anchored-position.ts
+function useAnchoredPosition({
+  anchor,
+  isOpen,
+  onLayout,
+  ...options
+}) {
+  const window = _reactnative.useWindowDimensions.call(void 0, );
+  const origin = _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, _chunkWDDXU3OHcjs.PortalContext), 'optionalAccess', _ => _.origin]), () => ( ZERO));
+  const [measured, setMeasured] = _react.useState.call(void 0, null);
+  const onContentLayout = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onLayout, 'optionalCall', _2 => _2(event)]);
+      const { width, height } = event.nativeEvent.layout;
+      setMeasured(
+        (current) => current !== null && current.width === width && current.height === height ? current : { width, height }
+      );
+    },
+    [onLayout]
+  );
+  if (!isOpen && measured !== null) setMeasured(null);
+  const local = anchor && {
+    ...anchor,
+    x: anchor.x - origin.x,
+    y: anchor.y - origin.y
+  };
+  const position = local && measured ? resolvePlacement({
+    anchor: local,
+    content: measured,
+    window: {
+      width: window.width - origin.x,
+      height: window.height - origin.y
+    },
+    ...options
+  }) : null;
+  return {
+    position,
+    onContentLayout,
+    measuringStyle: {
+      // Invisible, and at the start of the host, so the reader never sees the panel at
+      // the wrong place during the frame it is being measured in.
+      opacity: 0,
+      top: 0,
+      start: 0,
+      ...measuringWidth(options, _optionalChain([local, 'optionalAccess', _3 => _3.width]), window)
+    }
+  };
+}
+function measuringWidth({
+  width,
+  maxWidth,
+  insets
+}, anchorWidth, window) {
+  const screen = Math.max(window.width - insets.start - insets.end, 0);
+  if (width === "trigger") return { width: anchorWidth };
+  if (width === "full") return { width: screen };
+  if (typeof width === "number") return { width };
+  return { maxWidth: Math.min(_nullishCoalesce(maxWidth, () => ( Number.POSITIVE_INFINITY)), screen) };
+}
+var ZERO = { x: 0, y: 0 };
+
+
+
+exports.useAnchoredPosition = useAnchoredPosition;

package/dist/chunk-M63GFNKV.js

@@ -0,0 +1,194 @@
+// src/system/style-props/use-style-props.ts
+import { useMemo } from "react";
+
+// src/utils/stable-hash.ts
+function canonical(value) {
+  if (value === null || typeof value !== "object")
+    return JSON.stringify(value) ?? "null";
+  if (Array.isArray(value)) return `[${value.map(canonical).join(",")}]`;
+  const entries = Object.entries(value).filter(([, v]) => typeof v !== "function").sort(([a], [b]) => a < b ? -1 : 1).map(([k, v]) => `${JSON.stringify(k)}:${canonical(v)}`);
+  return `{${entries.join(",")}}`;
+}
+function stableHash(value) {
+  const input = canonical(value);
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return hash.toString(36);
+}
+
+// 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];
+}
+
+export {
+  stableHash,
+  useStyleProps
+};