@xaui/native 0.9.1-alpha.38 → 0.9.1-alpha.39

package/dist/chunk-2EGR4LWD.js

@@ -0,0 +1,145 @@
+import {
+  PortalContext
+} from "./chunk-2PMXMKS5.js";
+
+// src/hooks/use-anchored-position.ts
+import { useCallback, useContext, useState } from "react";
+import { useWindowDimensions } from "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 = useWindowDimensions();
+  const origin = useContext(PortalContext)?.origin ?? ZERO;
+  const [measured, setMeasured] = useState(null);
+  const onContentLayout = useCallback(
+    (event) => {
+      onLayout?.(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, local?.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(maxWidth ?? Number.POSITIVE_INFINITY, screen) };
+}
+var ZERO = { x: 0, y: 0 };
+
+export {
+  useAnchoredPosition
+};

package/dist/chunk-37L7YGZV.cjs

@@ -0,0 +1,425 @@
+"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 _chunkLUPCPLNDcjs = require('./chunk-LUPCPLND.cjs');
+
+
+var _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
+
+
+
+
+
+var _chunkEKS3W46Mcjs = require('./chunk-EKS3W46M.cjs');
+
+
+var _chunkWFEMJCXOcjs = require('./chunk-WFEMJCXO.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkTGMVEHV7cjs = require('./chunk-TGMVEHV7.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+var _chunk7GHM4GKLcjs = require('./chunk-7GHM4GKL.cjs');
+
+
+
+var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/popover/popover-close.tsx
+var _react = require('react');
+
+// src/components/popover/popover.context.ts
+var [PopoverProvider, usePopover] = _chunk7GHM4GKLcjs.createSlotContext.call(void 0, "Popover");
+
+// src/components/popover/popover-close.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var PopoverClose = _react.forwardRef.call(void 0, 
+  function PopoverClose2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { close } = usePopover();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+        close();
+      },
+      [close, onPress]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkTGMVEHV7cjs.PressableFeedback,
+      {
+        ref,
+        isPressed,
+        asChild,
+        accessibilityRole,
+        ...rest,
+        style: [
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    );
+  }
+);
+PopoverClose.displayName = "XAUI.Popover.Close";
+
+// src/components/popover/popover-content.tsx
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+// src/components/popover/popover.recipe.ts
+var SLOTS = ["trigger", "overlay", "content", "title", "description"];
+function popoverMeasure(fontSize) {
+  return fontSize * 13;
+}
+var popoverRecipe = _chunkFNEUOBCVcjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    overlay: { position: "absolute", top: 0, bottom: 0, start: 0, end: 0 },
+    content: {
+      position: "absolute",
+      backgroundColor: theme.colors.overlay,
+      // HeroUI's twelve by sixteen: a panel is read, not scanned, so it is wider-padded
+      // than it is tall-padded.
+      paddingVertical: theme.spacing(3),
+      paddingHorizontal: theme.spacing(4),
+      // Their `--radius-3xl` on a base of 8 is 24 points; our base is 12, so the same 24
+      // is `2xl`. Reading their key rather than their number puts a pill on it.
+      borderRadius: theme.radius["2xl"],
+      borderCurve: "continuous",
+      gap: theme.spacing(1.5),
+      ...theme.shadows.overlay
+    },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      fontSize: theme.fontSizes.lg,
+      lineHeight: theme.lineHeights.lg,
+      color: theme.colors.overlayForeground
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      fontSize: theme.fontSizes.md,
+      lineHeight: theme.lineHeights.md,
+      color: theme.colors.muted
+    }
+  }),
+  variantTokens: { default: {} },
+  variants: { radius: _chunkFNEUOBCVcjs.radiusAxis.call(void 0, "content") },
+  states: {
+    disabled: (theme) => ({ trigger: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "default" }
+});
+
+// src/components/popover/popover-content.tsx
+
+var DEFAULT_OFFSET = 9;
+var DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  start: 12,
+  end: 12
+};
+var PopoverContent = _react.forwardRef.call(void 0, 
+  function PopoverContent2({
+    children,
+    placement = "bottom",
+    align = "center",
+    width = "content-fit",
+    offset = DEFAULT_OFFSET,
+    alignOffset = 0,
+    avoidCollisions = true,
+    insets,
+    style,
+    onLayout,
+    ...props
+  }, ref) {
+    const context = usePopover();
+    const { contentStyle, isOpen, anchor } = context;
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+    const { position, onContentLayout, measuringStyle } = _chunkLUPCPLNDcjs.useAnchoredPosition.call(void 0, {
+      anchor,
+      isOpen,
+      placement,
+      align,
+      width,
+      offset,
+      alignOffset,
+      avoidCollisions,
+      insets: { ...DEFAULT_INSETS, ...insets },
+      maxWidth: popoverMeasure(theme.fontSizes.md),
+      onLayout
+    });
+    if (!isOpen || anchor === null) return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDDXU3OHcjs.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnativereanimated2.default.View,
+      {
+        ref,
+        entering: position ? _chunkEKS3W46Mcjs.anchoredEntering.call(void 0, position.placement) : void 0,
+        exiting: position ? _chunkEKS3W46Mcjs.anchoredExiting.call(void 0, position.placement) : void 0,
+        onLayout: onContentLayout,
+        ...rest,
+        style: [
+          contentStyle,
+          position === null ? measuringStyle : {
+            top: position.top,
+            start: position.start,
+            width: position.width,
+            maxHeight: position.maxHeight
+          },
+          styleProps,
+          style
+        ],
+        children
+      },
+      _nullishCoalesce(_optionalChain([position, 'optionalAccess', _2 => _2.placement]), () => ( "measuring"))
+    ) }) });
+  }
+);
+PopoverContent.displayName = "XAUI.Popover.Content";
+
+// src/components/popover/popover-description.tsx
+
+var _reactnative = require('react-native');
+
+var PopoverDescription = _react.forwardRef.call(void 0, 
+  function PopoverDescription2({ children, style, ...props }, ref) {
+    const { descriptionStyle } = usePopover();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { ref, ...rest, style: [descriptionStyle, styleProps, style], children });
+  }
+);
+PopoverDescription.displayName = "XAUI.Popover.Description";
+
+// src/components/popover/popover-overlay.tsx
+
+
+
+
+var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
+var PopoverOverlay = _react.forwardRef.call(void 0, 
+  function PopoverOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+    const context = usePopover();
+    const { overlayStyle, isOpen, close } = context;
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDDXU3OHcjs.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      AnimatedPressable,
+      {
+        ref,
+        entering: _chunkEKS3W46Mcjs.overlayEntering,
+        exiting: _chunkEKS3W46Mcjs.overlayExiting,
+        accessibilityRole: "none",
+        importantForAccessibility: "no",
+        onPress: isDismissable ? close : void 0,
+        ...rest,
+        style: [overlayStyle, styleProps, style],
+        children
+      }
+    ) }) });
+  }
+);
+PopoverOverlay.displayName = "XAUI.Popover.Overlay";
+
+// src/components/popover/popover-title.tsx
+
+
+
+var PopoverTitle = _react.forwardRef.call(void 0, 
+  function PopoverTitle2({ children, accessibilityRole = "header", style, ...props }, ref) {
+    const { titleStyle } = usePopover();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.Text,
+      {
+        ref,
+        accessibilityRole,
+        ...rest,
+        style: [titleStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+PopoverTitle.displayName = "XAUI.Popover.Title";
+
+// src/components/popover/popover-trigger.tsx
+
+
+// src/hooks/use-anchor-ref.ts
+
+function useAnchorRef({ isOpen, onAnchor, onLayout }) {
+  const node = _react.useRef.call(void 0, null);
+  const latest = _react.useRef.call(void 0, onAnchor);
+  latest.current = onAnchor;
+  const measure = _react.useCallback.call(void 0, () => {
+    _optionalChain([node, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.measureInWindow, 'call', _5 => _5((x, y, width, height) => {
+      latest.current({ x, y, width, height });
+    })]);
+  }, []);
+  const handleLayout = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onLayout, 'optionalCall', _6 => _6(event)]);
+      measure();
+    },
+    [measure, onLayout]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (isOpen) measure();
+  }, [isOpen, measure]);
+  return { node, measure, onLayout: handleLayout };
+}
+
+// src/components/popover/popover-trigger.tsx
+
+var PopoverTrigger = _react.forwardRef.call(void 0, 
+  function PopoverTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onLayout,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { triggerStyle, isOpen, isDisabled, toggle, setAnchor } = usePopover();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const anchor = useAnchorRef({ isOpen, onAnchor: setAnchor, onLayout });
+    const refs = _chunkWFEMJCXOcjs.useMergedRef.call(void 0, anchor.node, ref);
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onPress, 'optionalCall', _7 => _7(event)]);
+        anchor.measure();
+        toggle();
+      },
+      [anchor, onPress, toggle]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkTGMVEHV7cjs.PressableFeedback,
+      {
+        ref: refs,
+        isPressed,
+        isDisabled,
+        asChild,
+        accessibilityRole,
+        accessibilityState: {
+          disabled: isDisabled,
+          expanded: isOpen,
+          ...accessibilityState
+        },
+        ...rest,
+        onLayout: anchor.onLayout,
+        style: [
+          triggerStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "XAUI.Popover.Trigger";
+
+// src/components/popover/popover.tsx
+
+
+function Popover({
+  children,
+  radius,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false
+}) {
+  const theme = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const [anchor, setAnchor] = _react.useState.call(void 0, null);
+  const [isOpen, setOpen] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const styles = popoverRecipe.resolve({
+    theme,
+    selection: { radius },
+    states: { disabled: isDisabled }
+  });
+  const open = _react.useCallback.call(void 0, () => setOpen(true), [setOpen]);
+  const close = _react.useCallback.call(void 0, () => setOpen(false), [setOpen]);
+  const toggle = _react.useCallback.call(void 0, () => setOpen((current) => !current), [setOpen]);
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      triggerStyle: styles.trigger,
+      overlayStyle: styles.overlay,
+      contentStyle: styles.content,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      isOpen,
+      isDisabled,
+      open,
+      close,
+      toggle,
+      anchor,
+      setAnchor
+    }),
+    [styles, isOpen, isDisabled, open, close, toggle, anchor]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverProvider, { value: context, children });
+}
+Popover.displayName = "XAUI.Popover.Root";
+
+// src/components/popover/index.ts
+var Popover2 = Object.assign(Popover, {
+  Trigger: PopoverTrigger,
+  Overlay: PopoverOverlay,
+  Content: PopoverContent,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  Close: PopoverClose
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.usePopover = usePopover; exports.PopoverClose = PopoverClose; exports.popoverRecipe = popoverRecipe; exports.PopoverContent = PopoverContent; exports.PopoverDescription = PopoverDescription; exports.PopoverOverlay = PopoverOverlay; exports.PopoverTitle = PopoverTitle; exports.PopoverTrigger = PopoverTrigger; exports.Popover = Popover; exports.Popover2 = Popover2;

package/dist/chunk-64MXEVT3.js

@@ -0,0 +1,66 @@
+// src/system/anchored/anchored-motion.ts
+import { Easing, Keyframe } from "react-native-reanimated";
+var ENTER_MS = 200;
+var EXIT_MS = 150;
+var TRAVEL = 8;
+function anchoredEntering(placement) {
+  const [x, y] = travel(placement);
+  return new Keyframe({
+    0: {
+      opacity: 0,
+      transform: [{ translateX: x }, { translateY: y }, { scale: 0.95 }]
+    },
+    100: {
+      opacity: 1,
+      transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
+      easing: Easing.out(Easing.cubic)
+    }
+  }).duration(ENTER_MS);
+}
+function anchoredExiting(placement) {
+  const [x, y] = travel(placement);
+  return new Keyframe({
+    0: {
+      opacity: 1,
+      transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }]
+    },
+    100: {
+      opacity: 0,
+      transform: [{ translateX: x }, { translateY: y }, { scale: 0.95 }],
+      easing: Easing.in(Easing.cubic)
+    }
+  }).duration(EXIT_MS);
+}
+function travel(placement) {
+  switch (placement) {
+    case "bottom":
+      return [0, -TRAVEL];
+    case "top":
+      return [0, TRAVEL];
+    case "end":
+      return [-TRAVEL, 0];
+    case "start":
+      return [TRAVEL, 0];
+  }
+}
+var overlayEntering = new Keyframe({
+  0: { opacity: 0 },
+  100: { opacity: 1 }
+}).duration(ENTER_MS);
+var overlayExiting = new Keyframe({
+  0: { opacity: 1 },
+  100: { opacity: 0 }
+}).duration(EXIT_MS);
+
+// src/system/anchored/indicator-spring.ts
+var INDICATOR_SPRING = { damping: 140, stiffness: 1e3, mass: 4 };
+var INDICATOR_ROTATION = [0, -180];
+
+export {
+  anchoredEntering,
+  anchoredExiting,
+  overlayEntering,
+  overlayExiting,
+  INDICATOR_SPRING,
+  INDICATOR_ROTATION
+};