@xaui/native 0.0.21 → 0.0.24

package/dist/feature-discovery/index.js

@@ -0,0 +1,464 @@
+import "../chunk-CZFDZPAS.js";
+import {
+  useXUITheme
+} from "../chunk-I4V5Y5GD.js";
+
+// src/components/feature-discovery/feature-discovery.tsx
+import React, { useEffect } from "react";
+import {
+  Animated as Animated2,
+  Modal,
+  Pressable,
+  Text,
+  View
+} from "react-native";
+import { withOpacity as withOpacity2 } from "@xaui/core";
+
+// src/components/feature-discovery/feature-discovery.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  absoluteFill: {
+    ...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
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Animated, useWindowDimensions } from "react-native";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+var useFeatureDiscoveryAnimations = () => {
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const circleAnimScale = useRef(new Animated.Value(0.2)).current;
+  const contentOpacity = useRef(new Animated.Value(0)).current;
+  const haloScale = useRef(new Animated.Value(0.8)).current;
+  const startAnimations = useCallback(() => {
+    Animated.parallel([
+      Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 220,
+        useNativeDriver: true
+      }),
+      Animated.spring(circleAnimScale, {
+        toValue: 1,
+        friction: 8,
+        tension: 80,
+        useNativeDriver: true
+      }),
+      Animated.timing(contentOpacity, {
+        toValue: 1,
+        duration: 260,
+        useNativeDriver: true
+      }),
+      Animated.spring(haloScale, {
+        toValue: 1,
+        friction: 8,
+        tension: 80,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [backdropOpacity, circleAnimScale, contentOpacity, haloScale]);
+  const resetAnimations = useCallback(() => {
+    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 } = useWindowDimensions();
+  const [targetLayout, setTargetLayout] = useState(null);
+  const measureTarget = useCallback(() => {
+    targetRef.current?.measureInWindow((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 = useMemo(
+    () => ({
+      x: viewportWidth / 2 - 28,
+      y: viewportHeight / 2 - 28,
+      width: 56,
+      height: 56
+    }),
+    [viewportWidth, viewportHeight]
+  );
+  const target = 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 = useMemo(() => {
+    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 = useXUITheme();
+  const colorScheme = theme.colors[getSafeThemeColor(themeColor)];
+  const resolvedOverlayColor = useMemo(
+    () => overlayColor ?? withOpacity(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
+  );
+  useEffect(() => {
+    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__ */ React.createElement(Text, { style: textStyle }, content);
+    }
+    return content;
+  };
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      visible: isVisible,
+      transparent: true,
+      animationType: "none",
+      statusBarTranslucent: true,
+      onRequestClose: onDismiss
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [styles.root, customAppearance?.root, customAppearance?.container]
+      },
+      /* @__PURE__ */ React.createElement(
+        Pressable,
+        {
+          style: styles.absoluteFill,
+          onPress: dismissOnBackdropPress ? onDismiss : void 0
+        },
+        /* @__PURE__ */ React.createElement(
+          Animated2.View,
+          {
+            style: [
+              styles.absoluteFill,
+              {
+                backgroundColor: resolvedOverlayColor,
+                opacity: backdropOpacity
+              }
+            ]
+          }
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        Animated2.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__ */ React.createElement(
+        Animated2.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__ */ React.createElement(
+        Animated2.View,
+        {
+          style: [
+            styles.highlightContainer,
+            {
+              left: highlightX,
+              top: highlightY,
+              width: target.width,
+              height: target.height,
+              opacity: contentOpacity
+            },
+            customAppearance?.highlightContainer
+          ],
+          pointerEvents: "none"
+        },
+        highlightContent
+      ),
+      /* @__PURE__ */ React.createElement(
+        Animated2.View,
+        {
+          style: [
+            styles.messageContainer,
+            {
+              top: messageTop,
+              left: msgLeft,
+              right: msgRight,
+              maxHeight: msgMaxHeight,
+              opacity: contentOpacity
+            },
+            customAppearance?.messageContainer
+          ],
+          pointerEvents: "box-none"
+        },
+        /* @__PURE__ */ React.createElement(View, { style: styles.messageHeader }, /* @__PURE__ */ React.createElement(View, { style: styles.messageTitleWrapper }, renderContent(title, [
+          styles.title,
+          { color: colorScheme.foreground },
+          { textAlign: isTargetOnLeft ? "left" : "right" },
+          customAppearance?.title
+        ])), /* @__PURE__ */ React.createElement(
+          Pressable,
+          {
+            onPress: onDismiss,
+            style: styles.closeButton,
+            accessibilityRole: "button"
+          },
+          /* @__PURE__ */ React.createElement(Text, { style: [styles.closeIcon, { color: colorScheme.foreground }] }, "\u2715")
+        )),
+        description ? renderContent(description, [
+          styles.description,
+          { color: withOpacity2(colorScheme.foreground, 0.9) },
+          { textAlign: isTargetOnLeft ? "left" : "right" },
+          customAppearance?.description
+        ]) : null,
+        actionText ? /* @__PURE__ */ React.createElement(
+          Pressable,
+          {
+            onPress: onActionPress,
+            style: [
+              styles.actionPressable,
+              { alignSelf: isTargetOnLeft ? "flex-start" : "flex-end" }
+            ],
+            accessibilityRole: "button"
+          },
+          renderContent(actionText, [
+            styles.actionText,
+            { color: colorScheme.foreground },
+            customAppearance?.actionText
+          ])
+        ) : null
+      )
+    )
+  );
+};
+export {
+  FeatureDiscovery
+};

package/dist/indicator/index.js

@@ -1,8 +1,7 @@
 import {
   ActivityIndicator
-} from "../chunk-F7WH4DMG.js";
-import "../chunk-DXXNBF5P.js";
-import "../chunk-LTKYHG5V.js";
+} from "../chunk-UI5L26KD.js";
+import "../chunk-GHCVNQET.js";
 export {
   ActivityIndicator
 };