@xaui/native 0.0.23 → 0.0.24

package/dist/fab-menu/index.d.ts

@@ -1,4 +1,125 @@
-export { FabMenu } from './fab-menu';
-export { FabMenuItem } from './fab-menu-item';
-export type { FabMenuProps, FabMenuItemProps } from './fab-menu.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+import { a as FabVariant, b as FabSize } from '../fab.type-CgIYqQlT.js';
+import { B as ButtonRadius, E as ElevationLevel } from '../button.type-j1ZdkkSl.js';
+
+type FabMenuItemProps = {
+    /**
+     * The icon to display in the menu item.
+     */
+    icon: ReactNode;
+    /**
+     * The text label for the menu item.
+     */
+    label: string;
+    /**
+     * The theme color for the menu item chip.
+     * Inherits from parent FabMenu themeColor if not specified.
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Callback fired when the menu item is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Whether the menu item is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * @internal Injected by FabMenu to close the menu on item press.
+     */
+    _onClose?: () => void;
+};
+type FabMenuCustomAppearance = {
+    /**
+     * Custom styles for the outer container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the toggle FAB
+     */
+    fab?: ViewStyle;
+    /**
+     * Custom styles for each menu item row
+     */
+    menuItem?: ViewStyle;
+    /**
+     * Custom styles for the menu items container
+     */
+    menuContainer?: ViewStyle;
+    /**
+     * Custom styles for the overlay/backdrop
+     */
+    overlay?: ViewStyle;
+};
+type FabMenuProps = {
+    /**
+     * The icon to display when the FAB menu is collapsed.
+     */
+    icon: ReactNode;
+    /**
+     * Optional text label for the toggle FAB (extended FAB).
+     */
+    label?: ReactNode;
+    /**
+     * The icon to display when the FAB menu is expanded.
+     * Defaults to a close/X appearance if not provided.
+     */
+    expandedIcon?: ReactNode;
+    /**
+     * FabMenuItem children to display when expanded.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the toggle FAB.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The visual variant of the toggle FAB.
+     * @default 'solid'
+     */
+    variant?: FabVariant;
+    /**
+     * The size of the toggle FAB.
+     * @default 'md'
+     */
+    size?: FabSize;
+    /**
+     * Custom border radius for the toggle FAB.
+     * Overrides the default size-based border radius.
+     */
+    radius?: ButtonRadius;
+    /**
+     * Android elevation level for the toggle FAB from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Whether the menu is expanded.
+     * When provided, the component becomes controlled.
+     */
+    isExpanded?: boolean;
+    /**
+     * Callback fired when the menu toggle state changes.
+     */
+    onToggle?: (expanded: boolean) => void;
+    /**
+     * Whether to show an overlay/backdrop when expanded.
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Custom appearance styles for FAB menu parts.
+     */
+    customAppearance?: FabMenuCustomAppearance;
+};
+
+declare const FabMenu: React.FC<FabMenuProps>;
+
+declare const FabMenuItem: React.FC<FabMenuItemProps>;
+
+export { FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps };

package/dist/fab-menu/index.js

@@ -1,12 +1,11 @@
 import {
   Fab
-} from "../chunk-JEGEPGVU.js";
-import "../chunk-F7WH4DMG.js";
-import "../chunk-DXXNBF5P.js";
+} from "../chunk-3XSXTM3G.js";
+import "../chunk-CZFDZPAS.js";
 import {
   Portal,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-I4V5Y5GD.js";
 
 // src/components/fab-menu/fab-menu.tsx
 import React from "react";

package/dist/{components/fab/fab.type.d.mts → fab.type-CgIYqQlT.d.ts}

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import type { ViewStyle, GestureResponderEvent } from 'react-native';
-import type { ThemeColor } from '../../types';
-import type { ButtonRadius, ElevationLevel } from '../button/button.type';
-export type FabVariant = 'solid' | 'flat' | 'outlined';
-export type FabSize = 'sm' | 'md' | 'lg';
+import { ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from './index-BOw6tbkc.js';
+import { B as ButtonRadius, E as ElevationLevel } from './button.type-j1ZdkkSl.js';
+
+type FabVariant = 'solid' | 'flat' | 'outlined';
+type FabSize = 'sm' | 'md' | 'lg';
 type FabCustomAppearance = {
     /**
      * Custom styles for the outer container
@@ -14,7 +15,7 @@ type FabCustomAppearance = {
      */
     fab?: ViewStyle;
 };
-export type FabProps = {
+type FabProps = {
     /**
      * The icon to display in the FAB.
      */
@@ -81,5 +82,5 @@ export type FabProps = {
      */
     onPressOut?: (event: GestureResponderEvent) => void;
 };
-export {};
-//# sourceMappingURL=fab.type.d.ts.map
+
+export type { FabProps as F, FabVariant as a, FabSize as b };

package/dist/{components/fab/fab.type.d.ts → fab.type-l2vjG8-p.d.cts}

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import type { ViewStyle, GestureResponderEvent } from 'react-native';
-import type { ThemeColor } from '../../types';
-import type { ButtonRadius, ElevationLevel } from '../button/button.type';
-export type FabVariant = 'solid' | 'flat' | 'outlined';
-export type FabSize = 'sm' | 'md' | 'lg';
+import { ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from './index-BOw6tbkc.cjs';
+import { B as ButtonRadius, E as ElevationLevel } from './button.type-j1ZdkkSl.cjs';
+
+type FabVariant = 'solid' | 'flat' | 'outlined';
+type FabSize = 'sm' | 'md' | 'lg';
 type FabCustomAppearance = {
     /**
      * Custom styles for the outer container
@@ -14,7 +15,7 @@ type FabCustomAppearance = {
      */
     fab?: ViewStyle;
 };
-export type FabProps = {
+type FabProps = {
     /**
      * The icon to display in the FAB.
      */
@@ -81,5 +82,5 @@ export type FabProps = {
      */
     onPressOut?: (event: GestureResponderEvent) => void;
 };
-export {};
-//# sourceMappingURL=fab.type.d.ts.map
+
+export type { FabProps as F, FabVariant as a, FabSize as b };

package/dist/feature-discovery/index.cjs

@@ -340,13 +340,7 @@ var FeatureDiscovery = ({
     startAnimations,
     resetAnimations
   } = useFeatureDiscoveryAnimations();
-  const {
-    target,
-    measureTarget,
-    setTargetLayout,
-    viewportWidth,
-    viewportHeight
-  } = useFeatureDiscoveryLayout(targetRef);
+  const { target, measureTarget, setTargetLayout, viewportWidth, viewportHeight } = useFeatureDiscoveryLayout(targetRef);
   const {
     targetCenterX,
     targetCenterY,
@@ -398,127 +392,137 @@ var FeatureDiscovery = ({
       statusBarTranslucent: true,
       onRequestClose: onDismiss
     },
-    /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: [styles.root, customAppearance?.root, customAppearance?.container] }, /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native6.Pressable,
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.View,
       {
-        style: styles.absoluteFill,
-        onPress: dismissOnBackdropPress ? onDismiss : void 0
+        style: [styles.root, customAppearance?.root, customAppearance?.container]
       },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native6.Pressable,
+        {
+          style: styles.absoluteFill,
+          onPress: dismissOnBackdropPress ? onDismiss : void 0
+        },
+        /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native6.Animated.View,
+          {
+            style: [
+              styles.absoluteFill,
+              {
+                backgroundColor: resolvedOverlayColor,
+                opacity: backdropOpacity
+              }
+            ]
+          }
+        )
+      ),
       /* @__PURE__ */ import_react7.default.createElement(
         import_react_native6.Animated.View,
         {
           style: [
-            styles.absoluteFill,
+            styles.circle,
             {
-              backgroundColor: resolvedOverlayColor,
-              opacity: backdropOpacity
+              width: circleDiameter,
+              height: circleDiameter,
+              borderRadius: circleDiameter / 2,
+              left: targetCenterX - circleDiameter / 2,
+              top: targetCenterY - circleDiameter / 2,
+              backgroundColor: colorScheme.main,
+              opacity: contentOpacity,
+              transform: [{ scale: circleAnimScale }]
             }
           ]
         }
-      )
-    ), /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native6.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__ */ import_react7.default.createElement(
-      import_react_native6.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__ */ import_react7.default.createElement(
-      import_react_native6.Animated.View,
-      {
-        style: [
-          styles.highlightContainer,
-          {
-            left: highlightX,
-            top: highlightY,
-            width: target.width,
-            height: target.height,
-            opacity: contentOpacity
-          },
-          customAppearance?.highlightContainer
-        ],
-        pointerEvents: "none"
-      },
-      highlightContent
-    ), /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native6.Animated.View,
-      {
-        style: [
-          styles.messageContainer,
-          {
-            top: messageTop,
-            left: msgLeft,
-            right: msgRight,
-            maxHeight: msgMaxHeight,
-            opacity: contentOpacity
-          },
-          customAppearance?.messageContainer
-        ],
-        pointerEvents: "box-none"
-      },
-      /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles.messageHeader }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles.messageTitleWrapper }, renderContent(title, [
-        styles.title,
-        { color: colorScheme.foreground },
-        { textAlign: isTargetOnLeft ? "left" : "right" },
-        customAppearance?.title
-      ])), /* @__PURE__ */ import_react7.default.createElement(
-        import_react_native6.Pressable,
+      ),
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native6.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__ */ import_react7.default.createElement(
+        import_react_native6.Animated.View,
         {
-          onPress: onDismiss,
-          style: styles.closeButton,
-          accessibilityRole: "button"
+          style: [
+            styles.highlightContainer,
+            {
+              left: highlightX,
+              top: highlightY,
+              width: target.width,
+              height: target.height,
+              opacity: contentOpacity
+            },
+            customAppearance?.highlightContainer
+          ],
+          pointerEvents: "none"
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: [styles.closeIcon, { color: colorScheme.foreground }] }, "\u2715")
-      )),
-      description ? renderContent(description, [
-        styles.description,
-        { color: (0, import_core3.withOpacity)(colorScheme.foreground, 0.9) },
-        { textAlign: isTargetOnLeft ? "left" : "right" },
-        customAppearance?.description
-      ]) : null,
-      actionText ? /* @__PURE__ */ import_react7.default.createElement(
-        import_react_native6.Pressable,
+        highlightContent
+      ),
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native6.Animated.View,
         {
-          onPress: onActionPress,
           style: [
-            styles.actionPressable,
-            { alignSelf: isTargetOnLeft ? "flex-start" : "flex-end" }
+            styles.messageContainer,
+            {
+              top: messageTop,
+              left: msgLeft,
+              right: msgRight,
+              maxHeight: msgMaxHeight,
+              opacity: contentOpacity
+            },
+            customAppearance?.messageContainer
           ],
-          accessibilityRole: "button"
+          pointerEvents: "box-none"
         },
-        renderContent(actionText, [
-          styles.actionText,
+        /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles.messageHeader }, /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: styles.messageTitleWrapper }, renderContent(title, [
+          styles.title,
           { color: colorScheme.foreground },
-          customAppearance?.actionText
-        ])
-      ) : null
-    ))
+          { textAlign: isTargetOnLeft ? "left" : "right" },
+          customAppearance?.title
+        ])), /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native6.Pressable,
+          {
+            onPress: onDismiss,
+            style: styles.closeButton,
+            accessibilityRole: "button"
+          },
+          /* @__PURE__ */ import_react7.default.createElement(import_react_native6.Text, { style: [styles.closeIcon, { color: colorScheme.foreground }] }, "\u2715")
+        )),
+        description ? renderContent(description, [
+          styles.description,
+          { color: (0, import_core3.withOpacity)(colorScheme.foreground, 0.9) },
+          { textAlign: isTargetOnLeft ? "left" : "right" },
+          customAppearance?.description
+        ]) : null,
+        actionText ? /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native6.Pressable,
+          {
+            onPress: onActionPress,
+            style: [
+              styles.actionPressable,
+              { alignSelf: isTargetOnLeft ? "flex-start" : "flex-end" }
+            ],
+            accessibilityRole: "button"
+          },
+          renderContent(actionText, [
+            styles.actionText,
+            { color: colorScheme.foreground },
+            customAppearance?.actionText
+          ])
+        ) : null
+      )
+    )
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/{components/feature-discovery/feature-discovery.type.d.mts → feature-discovery/index.d.cts}

@@ -1,10 +1,11 @@
-import type { ReactNode, RefObject } from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import type { ThemeColor } from '../../types';
+import React, { RefObject, ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
 type MeasurableNode = {
     measureInWindow: (callback: (x: number, y: number, width: number, height: number) => void) => void;
 };
-export type FeatureDiscoveryCustomAppearance = {
+type FeatureDiscoveryCustomAppearance = {
     root?: ViewStyle;
     container?: ViewStyle;
     title?: TextStyle;
@@ -13,7 +14,7 @@ export type FeatureDiscoveryCustomAppearance = {
     highlightContainer?: ViewStyle;
     messageContainer?: ViewStyle;
 };
-export type FeatureDiscoveryProps = {
+type FeatureDiscoveryProps = {
     /**
      * Whether the discovery overlay is visible.
      */
@@ -75,5 +76,7 @@ export type FeatureDiscoveryProps = {
      */
     customAppearance?: FeatureDiscoveryCustomAppearance;
 };
-export {};
-//# sourceMappingURL=feature-discovery.type.d.ts.map
+
+declare const FeatureDiscovery: React.FC<FeatureDiscoveryProps>;
+
+export { FeatureDiscovery, type FeatureDiscoveryCustomAppearance, type FeatureDiscoveryProps };

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

@@ -1,3 +1,82 @@
-export { FeatureDiscovery } from './feature-discovery';
-export type { FeatureDiscoveryProps, FeatureDiscoveryCustomAppearance, } from './feature-discovery.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { RefObject, ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+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 };