@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/feature-discovery/index.js

@@ -1,464 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.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.onMain },
-          { 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.onMain }] }, "\u2715")
-        )),
-        description ? renderContent(description, [
-          styles.description,
-          { color: withOpacity2(colorScheme.onMain, 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.onMain },
-            customAppearance?.actionText
-          ])
-        ) : null
-      )
-    )
-  );
-};
-export {
-  FeatureDiscovery
-};

package/dist/indicator/index.cjs

@@ -1,8 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunkYIEUN3G5cjs = require('../chunk-YIEUN3G5.cjs');
-require('../chunk-56RPWZD2.cjs');
-require('../chunk-7UFBLUMV.cjs');
-
-
-exports.ActivityIndicator = _chunkYIEUN3G5cjs.ActivityIndicator;

package/dist/indicator/index.d.cts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ThemeColor } from '@xaui/core/types';
-
-type ActivityIndicatorVariant = 'linear' | 'circular';
-type ActivityIndicatorProps = {
-    /**
-     * The variant of activity indicator.
-     * @default 'circular'
-     */
-    variant?: ActivityIndicatorVariant;
-    /**
-     * The size of the activity indicator (height for linear, diameter for circular).
-     * @default 4 for linear, 40 for circular
-     */
-    size?: number;
-    /**
-     * The theme color of the activity indicator.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The custom color of the activity indicator.
-     * Overrides themeColor.
-     */
-    color?: string;
-    /**
-     * The background color of the track.
-     */
-    backgroundColor?: string;
-    /**
-     * Whether to disable the animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * The border radius of the indicator and track.
-     */
-    borderRadius?: number;
-    /**
-     * Show track for the activity indicator.
-     */
-    showTrack?: boolean;
-};
-
-declare const ActivityIndicator: React.FC<ActivityIndicatorProps>;
-
-export { ActivityIndicator, type ActivityIndicatorProps };

package/dist/indicator/index.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ThemeColor } from '@xaui/core/types';
-
-type ActivityIndicatorVariant = 'linear' | 'circular';
-type ActivityIndicatorProps = {
-    /**
-     * The variant of activity indicator.
-     * @default 'circular'
-     */
-    variant?: ActivityIndicatorVariant;
-    /**
-     * The size of the activity indicator (height for linear, diameter for circular).
-     * @default 4 for linear, 40 for circular
-     */
-    size?: number;
-    /**
-     * The theme color of the activity indicator.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The custom color of the activity indicator.
-     * Overrides themeColor.
-     */
-    color?: string;
-    /**
-     * The background color of the track.
-     */
-    backgroundColor?: string;
-    /**
-     * Whether to disable the animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * The border radius of the indicator and track.
-     */
-    borderRadius?: number;
-    /**
-     * Show track for the activity indicator.
-     */
-    showTrack?: boolean;
-};
-
-declare const ActivityIndicator: React.FC<ActivityIndicatorProps>;
-
-export { ActivityIndicator, type ActivityIndicatorProps };

package/dist/indicator/index.js

@@ -1,8 +0,0 @@
-import {
-  ActivityIndicator
-} from "../chunk-VSZEXOUN.js";
-import "../chunk-SHBDANQN.js";
-import "../chunk-RBSA4NH4.js";
-export {
-  ActivityIndicator
-};