@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/feature-discovery/index.cjs

@@ -1,464 +0,0 @@
-"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; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/feature-discovery/feature-discovery.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-
-
-
-
-
-
-var _reactnative = require('react-native');
-var _core = require('@xaui/core');
-
-// src/components/feature-discovery/feature-discovery.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  absoluteFill: {
-    ..._reactnative.StyleSheet.absoluteFillObject
-  },
-  circle: {
-    position: "absolute"
-  },
-  spotlightHalo: {
-    position: "absolute",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.35)"
-  },
-  highlightContainer: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  messageContainer: {
-    position: "absolute",
-    gap: 10,
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    borderRadius: 12
-  },
-  messageHeader: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  messageTitleWrapper: {
-    flex: 1
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "700"
-  },
-  closeButton: {
-    padding: 4
-  },
-  closeIcon: {
-    fontSize: 18,
-    fontWeight: "600"
-  },
-  description: {
-    fontSize: 16,
-    fontWeight: "400",
-    opacity: 0.86,
-    lineHeight: 22
-  },
-  actionPressable: {
-    alignSelf: "flex-start"
-  },
-  actionText: {
-    fontSize: 14,
-    fontWeight: "600",
-    textDecorationLine: "underline"
-  }
-});
-
-// src/components/feature-discovery/feature-discovery.hook.ts
-
-
-
-var useFeatureDiscoveryAnimations = () => {
-  const backdropOpacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const circleAnimScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(0.2)).current;
-  const contentOpacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const haloScale = _react.useRef.call(void 0, new _reactnative.Animated.Value(0.8)).current;
-  const startAnimations = _react.useCallback.call(void 0, () => {
-    _reactnative.Animated.parallel([
-      _reactnative.Animated.timing(backdropOpacity, {
-        toValue: 1,
-        duration: 220,
-        useNativeDriver: true
-      }),
-      _reactnative.Animated.spring(circleAnimScale, {
-        toValue: 1,
-        friction: 8,
-        tension: 80,
-        useNativeDriver: true
-      }),
-      _reactnative.Animated.timing(contentOpacity, {
-        toValue: 1,
-        duration: 260,
-        useNativeDriver: true
-      }),
-      _reactnative.Animated.spring(haloScale, {
-        toValue: 1,
-        friction: 8,
-        tension: 80,
-        useNativeDriver: true
-      })
-    ]).start();
-  }, [backdropOpacity, circleAnimScale, contentOpacity, haloScale]);
-  const resetAnimations = _react.useCallback.call(void 0, () => {
-    backdropOpacity.setValue(0);
-    circleAnimScale.setValue(0.2);
-    contentOpacity.setValue(0);
-    haloScale.setValue(0.8);
-  }, [backdropOpacity, circleAnimScale, contentOpacity, haloScale]);
-  return {
-    backdropOpacity,
-    circleAnimScale,
-    contentOpacity,
-    haloScale,
-    startAnimations,
-    resetAnimations
-  };
-};
-var useFeatureDiscoveryLayout = (targetRef) => {
-  const { width: viewportWidth, height: viewportHeight } = _reactnative.useWindowDimensions.call(void 0, );
-  const [targetLayout, setTargetLayout] = _react.useState.call(void 0, null);
-  const measureTarget = _react.useCallback.call(void 0, () => {
-    _optionalChain([targetRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.measureInWindow, 'call', _3 => _3((x, y, width, height) => {
-      if (!width && !height) {
-        setTargetLayout({
-          x: viewportWidth / 2 - 28,
-          y: viewportHeight / 2 - 28,
-          width: 56,
-          height: 56
-        });
-        return;
-      }
-      setTargetLayout({ x, y, width, height });
-    })]);
-  }, [targetRef, viewportHeight, viewportWidth]);
-  const fallbackTarget = _react.useMemo.call(void 0, 
-    () => ({
-      x: viewportWidth / 2 - 28,
-      y: viewportHeight / 2 - 28,
-      width: 56,
-      height: 56
-    }),
-    [viewportWidth, viewportHeight]
-  );
-  const target = _nullishCoalesce(targetLayout, () => ( fallbackTarget));
-  return {
-    targetLayout,
-    target,
-    measureTarget,
-    setTargetLayout,
-    viewportWidth,
-    viewportHeight
-  };
-};
-var useFeatureDiscoveryGeometry = (target, viewportWidth, viewportHeight, spotlightPadding, circleScale) => {
-  const HIGHLIGHT_EDGE_INSET = 16;
-  const maxTargetX = Math.max(
-    HIGHLIGHT_EDGE_INSET,
-    viewportWidth - target.width - HIGHLIGHT_EDGE_INSET
-  );
-  const maxTargetY = Math.max(
-    HIGHLIGHT_EDGE_INSET,
-    viewportHeight - target.height - HIGHLIGHT_EDGE_INSET
-  );
-  const clampedTargetX = Math.min(
-    Math.max(target.x, HIGHLIGHT_EDGE_INSET),
-    maxTargetX
-  );
-  const clampedTargetY = Math.min(
-    Math.max(target.y, HIGHLIGHT_EDGE_INSET),
-    maxTargetY
-  );
-  const targetCenterX = clampedTargetX + target.width / 2;
-  const targetCenterY = clampedTargetY + target.height / 2;
-  const spotlightSize = Math.max(target.width, target.height) + spotlightPadding * 2;
-  const circleDiameter = _react.useMemo.call(void 0, () => {
-    return viewportWidth * circleScale;
-  }, [circleScale, viewportWidth]);
-  const circleRadius = circleDiameter / 2;
-  const TEXT_PADDING = 24;
-  const TARGET_GAP = 30;
-  const MIN_MESSAGE_HEIGHT = 140;
-  const MIN_MESSAGE_WIDTH = 280;
-  const MESSAGE_VERTICAL_OFFSET = 14;
-  const isTargetInTopHalf = targetCenterY < viewportHeight * 0.55;
-  const baseMessageTop = isTargetInTopHalf ? Math.min(viewportHeight - 200, clampedTargetY + target.height + TARGET_GAP) : Math.max(TEXT_PADDING, clampedTargetY - 150);
-  const messageTop = Math.max(TEXT_PADDING, baseMessageTop - MESSAGE_VERTICAL_OFFSET);
-  const textDy = messageTop - targetCenterY;
-  const textHalfChord = Math.abs(textDy) < circleRadius ? Math.sqrt(circleRadius ** 2 - textDy ** 2) : 0;
-  const baseMsgLeft = Math.max(
-    TEXT_PADDING,
-    targetCenterX - textHalfChord + TEXT_PADDING
-  );
-  const baseMsgRight = Math.max(
-    TEXT_PADDING,
-    viewportWidth - (targetCenterX + textHalfChord - TEXT_PADDING)
-  );
-  const baseMsgWidth = viewportWidth - baseMsgLeft - baseMsgRight;
-  const clampedMinMessageWidth = Math.min(
-    MIN_MESSAGE_WIDTH,
-    viewportWidth - TEXT_PADDING * 2
-  );
-  const isTargetOnLeft = targetCenterX < viewportWidth / 2;
-  const shouldUseSideAnchoredLayout = baseMsgWidth < clampedMinMessageWidth;
-  const msgLeft = shouldUseSideAnchoredLayout ? isTargetOnLeft ? TEXT_PADDING : viewportWidth - TEXT_PADDING - clampedMinMessageWidth : baseMsgLeft;
-  const msgRight = shouldUseSideAnchoredLayout ? isTargetOnLeft ? viewportWidth - TEXT_PADDING - clampedMinMessageWidth : TEXT_PADDING : baseMsgRight;
-  const circleBottomY = targetCenterY + circleRadius - TEXT_PADDING;
-  const msgMaxHeight = Math.max(MIN_MESSAGE_HEIGHT, circleBottomY - messageTop);
-  return {
-    targetCenterX,
-    targetCenterY,
-    spotlightSize,
-    circleDiameter,
-    circleRadius,
-    messageTop,
-    msgLeft,
-    msgRight,
-    msgMaxHeight,
-    isTargetOnLeft,
-    highlightX: clampedTargetX,
-    highlightY: clampedTargetY
-  };
-};
-var useFeatureDiscoveryTheme = (themeColor, overlayColor) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
-  const resolvedOverlayColor = _react.useMemo.call(void 0, 
-    () => _nullishCoalesce(overlayColor, () => ( _core.withOpacity.call(void 0, theme.colors.foreground, 0.42))),
-    [overlayColor, theme.colors.foreground]
-  );
-  return {
-    colorScheme,
-    resolvedOverlayColor
-  };
-};
-
-// src/components/feature-discovery/feature-discovery.tsx
-var DEFAULT_SPOTLIGHT_PADDING = 14;
-var DEFAULT_CIRCLE_SCALE = 1.65;
-var FeatureDiscovery = ({
-  isVisible,
-  targetRef,
-  title,
-  description,
-  actionText,
-  onActionPress,
-  onDismiss,
-  dismissOnBackdropPress = true,
-  themeColor = "primary",
-  overlayColor,
-  spotlightPadding = DEFAULT_SPOTLIGHT_PADDING,
-  circleScale = DEFAULT_CIRCLE_SCALE,
-  highlightContent,
-  customAppearance
-}) => {
-  const {
-    backdropOpacity,
-    circleAnimScale,
-    contentOpacity,
-    haloScale,
-    startAnimations,
-    resetAnimations
-  } = useFeatureDiscoveryAnimations();
-  const { target, measureTarget, setTargetLayout, viewportWidth, viewportHeight } = useFeatureDiscoveryLayout(targetRef);
-  const {
-    targetCenterX,
-    targetCenterY,
-    spotlightSize,
-    circleDiameter,
-    messageTop,
-    msgLeft,
-    msgRight,
-    msgMaxHeight,
-    isTargetOnLeft,
-    highlightX,
-    highlightY
-  } = useFeatureDiscoveryGeometry(
-    target,
-    viewportWidth,
-    viewportHeight,
-    spotlightPadding,
-    circleScale
-  );
-  const { colorScheme, resolvedOverlayColor } = useFeatureDiscoveryTheme(
-    themeColor,
-    overlayColor
-  );
-  _react.useEffect.call(void 0, () => {
-    if (!isVisible) {
-      setTargetLayout(null);
-      return;
-    }
-    resetAnimations();
-    const timer = setTimeout(() => {
-      measureTarget();
-      startAnimations();
-    }, 0);
-    return () => clearTimeout(timer);
-  }, [isVisible, measureTarget, resetAnimations, setTargetLayout, startAnimations]);
-  if (!isVisible) return null;
-  const renderContent = (content, textStyle) => {
-    if (typeof content === "string" || typeof content === "number") {
-      return /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: textStyle }, content);
-    }
-    return content;
-  };
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Modal,
-    {
-      visible: isVisible,
-      transparent: true,
-      animationType: "none",
-      statusBarTranslucent: true,
-      onRequestClose: onDismiss
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [styles.root, _optionalChain([customAppearance, 'optionalAccess', _4 => _4.root]), _optionalChain([customAppearance, 'optionalAccess', _5 => _5.container])]
-      },
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Pressable,
-        {
-          style: styles.absoluteFill,
-          onPress: dismissOnBackdropPress ? onDismiss : void 0
-        },
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Animated.View,
-          {
-            style: [
-              styles.absoluteFill,
-              {
-                backgroundColor: resolvedOverlayColor,
-                opacity: backdropOpacity
-              }
-            ]
-          }
-        )
-      ),
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.circle,
-            {
-              width: circleDiameter,
-              height: circleDiameter,
-              borderRadius: circleDiameter / 2,
-              left: targetCenterX - circleDiameter / 2,
-              top: targetCenterY - circleDiameter / 2,
-              backgroundColor: colorScheme.main,
-              opacity: contentOpacity,
-              transform: [{ scale: circleAnimScale }]
-            }
-          ]
-        }
-      ),
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.spotlightHalo,
-            {
-              width: spotlightSize,
-              height: spotlightSize,
-              borderRadius: spotlightSize / 2,
-              left: targetCenterX - spotlightSize / 2,
-              top: targetCenterY - spotlightSize / 2,
-              opacity: contentOpacity,
-              transform: [{ scale: haloScale }]
-            }
-          ]
-        }
-      ),
-      highlightContent && /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.highlightContainer,
-            {
-              left: highlightX,
-              top: highlightY,
-              width: target.width,
-              height: target.height,
-              opacity: contentOpacity
-            },
-            _optionalChain([customAppearance, 'optionalAccess', _6 => _6.highlightContainer])
-          ],
-          pointerEvents: "none"
-        },
-        highlightContent
-      ),
-      /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: [
-            styles.messageContainer,
-            {
-              top: messageTop,
-              left: msgLeft,
-              right: msgRight,
-              maxHeight: msgMaxHeight,
-              opacity: contentOpacity
-            },
-            _optionalChain([customAppearance, 'optionalAccess', _7 => _7.messageContainer])
-          ],
-          pointerEvents: "box-none"
-        },
-        /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.messageHeader }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.messageTitleWrapper }, renderContent(title, [
-          styles.title,
-          { color: colorScheme.onMain },
-          { textAlign: isTargetOnLeft ? "left" : "right" },
-          _optionalChain([customAppearance, 'optionalAccess', _8 => _8.title])
-        ])), /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Pressable,
-          {
-            onPress: onDismiss,
-            style: styles.closeButton,
-            accessibilityRole: "button"
-          },
-          /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.closeIcon, { color: colorScheme.onMain }] }, "\u2715")
-        )),
-        description ? renderContent(description, [
-          styles.description,
-          { color: _core.withOpacity.call(void 0, colorScheme.onMain, 0.9) },
-          { textAlign: isTargetOnLeft ? "left" : "right" },
-          _optionalChain([customAppearance, 'optionalAccess', _9 => _9.description])
-        ]) : null,
-        actionText ? /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.Pressable,
-          {
-            onPress: onActionPress,
-            style: [
-              styles.actionPressable,
-              { alignSelf: isTargetOnLeft ? "flex-start" : "flex-end" }
-            ],
-            accessibilityRole: "button"
-          },
-          renderContent(actionText, [
-            styles.actionText,
-            { color: colorScheme.onMain },
-            _optionalChain([customAppearance, 'optionalAccess', _10 => _10.actionText])
-          ])
-        ) : null
-      )
-    )
-  );
-};
-
-
-exports.FeatureDiscovery = FeatureDiscovery;

package/dist/feature-discovery/index.d.cts

@@ -1,82 +0,0 @@
-import React, { RefObject, ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type MeasurableNode = {
-    measureInWindow: (callback: (x: number, y: number, width: number, height: number) => void) => void;
-};
-type FeatureDiscoveryCustomAppearance = {
-    root?: ViewStyle;
-    container?: ViewStyle;
-    title?: TextStyle;
-    description?: TextStyle;
-    actionText?: TextStyle;
-    highlightContainer?: ViewStyle;
-    messageContainer?: ViewStyle;
-};
-type FeatureDiscoveryProps = {
-    /**
-     * Whether the discovery overlay is visible.
-     */
-    isVisible: boolean;
-    /**
-     * Ref to the target element to highlight.
-     */
-    targetRef: RefObject<MeasurableNode | null>;
-    /**
-     * Discovery title.
-     */
-    title: ReactNode;
-    /**
-     * Optional discovery description.
-     */
-    description?: ReactNode;
-    /**
-     * Optional action label displayed under the text.
-     */
-    actionText?: ReactNode;
-    /**
-     * Called when action text is pressed.
-     */
-    onActionPress?: () => void;
-    /**
-     * Called when overlay should close.
-     */
-    onDismiss?: () => void;
-    /**
-     * Whether tapping outside dismisses the overlay.
-     * @default true
-     */
-    dismissOnBackdropPress?: boolean;
-    /**
-     * Accent color for the discovery circle.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Backdrop color.
-     */
-    overlayColor?: string;
-    /**
-     * Extra spacing around target highlight.
-     * @default 14
-     */
-    spotlightPadding?: number;
-    /**
-     * Scale multiplier for discovery circle diameter.
-     * @default 1.65
-     */
-    circleScale?: number;
-    /**
-     * Optional custom content rendered over the highlighted target.
-     */
-    highlightContent?: ReactNode;
-    /**
-     * Optional style overrides.
-     */
-    customAppearance?: FeatureDiscoveryCustomAppearance;
-};
-
-declare const FeatureDiscovery: React.FC<FeatureDiscoveryProps>;
-
-export { FeatureDiscovery, type FeatureDiscoveryCustomAppearance, type FeatureDiscoveryProps };

package/dist/feature-discovery/index.d.ts

@@ -1,82 +0,0 @@
-import React, { RefObject, ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type MeasurableNode = {
-    measureInWindow: (callback: (x: number, y: number, width: number, height: number) => void) => void;
-};
-type FeatureDiscoveryCustomAppearance = {
-    root?: ViewStyle;
-    container?: ViewStyle;
-    title?: TextStyle;
-    description?: TextStyle;
-    actionText?: TextStyle;
-    highlightContainer?: ViewStyle;
-    messageContainer?: ViewStyle;
-};
-type FeatureDiscoveryProps = {
-    /**
-     * Whether the discovery overlay is visible.
-     */
-    isVisible: boolean;
-    /**
-     * Ref to the target element to highlight.
-     */
-    targetRef: RefObject<MeasurableNode | null>;
-    /**
-     * Discovery title.
-     */
-    title: ReactNode;
-    /**
-     * Optional discovery description.
-     */
-    description?: ReactNode;
-    /**
-     * Optional action label displayed under the text.
-     */
-    actionText?: ReactNode;
-    /**
-     * Called when action text is pressed.
-     */
-    onActionPress?: () => void;
-    /**
-     * Called when overlay should close.
-     */
-    onDismiss?: () => void;
-    /**
-     * Whether tapping outside dismisses the overlay.
-     * @default true
-     */
-    dismissOnBackdropPress?: boolean;
-    /**
-     * Accent color for the discovery circle.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Backdrop color.
-     */
-    overlayColor?: string;
-    /**
-     * Extra spacing around target highlight.
-     * @default 14
-     */
-    spotlightPadding?: number;
-    /**
-     * Scale multiplier for discovery circle diameter.
-     * @default 1.65
-     */
-    circleScale?: number;
-    /**
-     * Optional custom content rendered over the highlighted target.
-     */
-    highlightContent?: ReactNode;
-    /**
-     * Optional style overrides.
-     */
-    customAppearance?: FeatureDiscoveryCustomAppearance;
-};
-
-declare const FeatureDiscovery: React.FC<FeatureDiscoveryProps>;
-
-export { FeatureDiscovery, type FeatureDiscoveryCustomAppearance, type FeatureDiscoveryProps };