@xaui/native 0.0.23 → 0.0.24

package/dist/timepicker/index.js

@@ -1,10 +1,7 @@
 import {
-  BottomSheet
-} from "../chunk-HC2SSHNU.js";
-import "../chunk-DXXNBF5P.js";
-import {
+  Portal,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-4KSZLONZ.js";
 
 // src/components/timepicker/timepicker.tsx
 import React, { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
@@ -171,7 +168,12 @@ var useTimePickerColors = (themeColor) => {
       clockFace: withOpacity(colorScheme.main, 0.08),
       selectedDigit: withOpacity(colorScheme.main, 0.12)
     };
-  }, [colorScheme.main, colorScheme.foreground, theme.colors.background, theme.colors.foreground]);
+  }, [
+    colorScheme.main,
+    colorScheme.foreground,
+    theme.colors.background,
+    theme.colors.foreground
+  ]);
 };
 
 // src/components/timepicker/timepicker.style.ts
@@ -383,12 +385,19 @@ var TimePicker = ({
     setMode
   } = useTimePickerState(value, is24Hour, onChange);
   const colors = useTimePickerColors(themeColor);
-  const hourAngle = useMemo2(() => getHourAngle(displayHours, is24Hour), [displayHours, is24Hour]);
+  const hourAngle = useMemo2(
+    () => getHourAngle(displayHours, is24Hour),
+    [displayHours, is24Hour]
+  );
   const minuteAngle = useMemo2(() => getMinuteAngle(time.minutes), [time.minutes]);
   const currentAngle = mode === "hour" ? hourAngle : minuteAngle;
   const handRotation = useSharedValue(currentAngle);
-  const [hourInput, setHourInput] = useState2(displayHours.toString().padStart(2, "0"));
-  const [minuteInput, setMinuteInput] = useState2(time.minutes.toString().padStart(2, "0"));
+  const [hourInput, setHourInput] = useState2(
+    displayHours.toString().padStart(2, "0")
+  );
+  const [minuteInput, setMinuteInput] = useState2(
+    time.minutes.toString().padStart(2, "0")
+  );
   useEffect(() => {
     handRotation.value = withTiming(currentAngle - 180, {
       duration: 120,
@@ -537,10 +546,7 @@ var TimePicker = ({
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.headerTitle, { color: colors.textSecondary }] }, "Select time"), /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [
-        styles.timeDisplay,
-        !is24Hour && styles.timeDisplayWithPeriod
-      ]
+      style: [styles.timeDisplay, !is24Hour && styles.timeDisplayWithPeriod]
     },
     /* @__PURE__ */ React.createElement(View, { style: styles.timeSection }, /* @__PURE__ */ React.createElement(
       TextInput,
@@ -677,8 +683,370 @@ var TimePicker = ({
 };
 
 // src/components/timepicker/timepicker-dialog.tsx
-import React2, { useState as useState3 } from "react";
-import { View as View2, Text as Text2, Pressable as Pressable2 } from "react-native";
+import React3, { useState as useState4 } from "react";
+import { View as View3, Text as Text2, Pressable as Pressable3 } from "react-native";
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+import React2 from "react";
+import { Animated as Animated4, Pressable as Pressable2, View as View2 } from "react-native";
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+import { useCallback, useEffect as useEffect2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+import { Animated as Animated3, Dimensions, PanResponder } from "react-native";
+import { getSafeThemeColor as getSafeThemeColor2 } from "@xaui/core";
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+import { Animated as Animated2, Easing as Easing2 } from "react-native";
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: Easing2.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = Animated2.parallel([
+    Animated2.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    Animated2.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = Animated2.parallel([
+    Animated2.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    Animated2.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = Animated2.spring(translateY, {
+    ...SPRING_CONFIG,
+    toValue: targetTranslateY
+  });
+  animation.start();
+  return animation;
+};
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var DISMISS_VELOCITY_THRESHOLD = 0.5;
+var DISMISS_DISTANCE_FRACTION = 0.3;
+var SCREEN_HEIGHT = Dimensions.get("window").height;
+var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
+var useBottomSheetAnimation = ({
+  isOpen,
+  snapPoints,
+  initialSnapIndex,
+  enableSwipeToDismiss,
+  disableAnimation,
+  onClose,
+  onSnapChange
+}) => {
+  const [shouldRender, setShouldRender] = useState3(false);
+  const currentSnapIndex = useRef(initialSnapIndex);
+  const animationRef = useRef(null);
+  const translateY = useRef(new Animated3.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = useRef(new Animated3.Value(0)).current;
+  const sortedSnapPoints = useMemo3(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = useMemo3(
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = useCallback(() => {
+    setShouldRender(true);
+    const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
+    currentSnapIndex.current = targetIndex;
+    if (disableAnimation) {
+      translateY.setValue(snapTranslateValues[targetIndex]);
+      backdropOpacity.setValue(1);
+      return;
+    }
+    translateY.setValue(SCREEN_HEIGHT);
+    backdropOpacity.setValue(0);
+    animationRef.current?.stop();
+    animationRef.current = runOpenAnimation(
+      translateY,
+      backdropOpacity,
+      snapTranslateValues[targetIndex]
+    );
+  }, [
+    initialSnapIndex,
+    sortedSnapPoints,
+    snapTranslateValues,
+    disableAnimation,
+    translateY,
+    backdropOpacity
+  ]);
+  const close = useCallback(() => {
+    if (disableAnimation) {
+      translateY.setValue(SCREEN_HEIGHT);
+      backdropOpacity.setValue(0);
+      setShouldRender(false);
+      onClose?.();
+      return;
+    }
+    animationRef.current?.stop();
+    animationRef.current = runCloseAnimation(
+      translateY,
+      backdropOpacity,
+      SCREEN_HEIGHT,
+      () => {
+        setShouldRender(false);
+        onClose?.();
+      }
+    );
+  }, [disableAnimation, translateY, backdropOpacity, onClose]);
+  const snapTo = useCallback(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
+      currentSnapIndex.current = clampedIndex;
+      onSnapChange?.(clampedIndex);
+      if (disableAnimation) {
+        translateY.setValue(snapTranslateValues[clampedIndex]);
+        return;
+      }
+      animationRef.current?.stop();
+      animationRef.current = runSnapAnimation(
+        translateY,
+        snapTranslateValues[clampedIndex]
+      );
+    },
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
+  );
+  useEffect2(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = useMemo3(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
+      onPanResponderMove: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const newTranslateY = currentTranslate + gestureState.dy;
+        const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
+        const clamped = Math.max(maxExpanded, newTranslateY);
+        translateY.setValue(clamped);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const finalPosition = currentTranslate + gestureState.dy;
+        if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
+          close();
+          return;
+        }
+        if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
+          const nextIndex = Math.min(
+            currentSnapIndex.current + 1,
+            sortedSnapPoints.length - 1
+          );
+          snapTo(nextIndex);
+          return;
+        }
+        if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
+          const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
+          if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
+            close();
+            return;
+          }
+          snapTo(prevIndex);
+          return;
+        }
+        let closestIndex = 0;
+        let minDistance = Infinity;
+        snapTranslateValues.forEach((snapVal, index) => {
+          const distance = Math.abs(finalPosition - snapVal);
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = index;
+          }
+        });
+        snapTo(closestIndex);
+      }
+    }),
+    [
+      snapTranslateValues,
+      sortedSnapPoints,
+      enableSwipeToDismiss,
+      translateY,
+      close,
+      snapTo
+    ]
+  );
+  return {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    snapTo,
+    screenHeight: SCREEN_HEIGHT
+  };
+};
+var useBottomSheetStyles = (themeColor, radius) => {
+  const theme = useXUITheme();
+  const safeThemeColor = getSafeThemeColor2(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = useMemo3(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = useMemo3(
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+import { StyleSheet as StyleSheet2 } from "react-native";
+var styles2 = StyleSheet2.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  sheet: {
+    overflow: "hidden"
+  },
+  handle: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10
+  },
+  handleIndicator: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var BottomSheet = ({
+  children,
+  isOpen,
+  snapPoints = [0.4, 0.9],
+  initialSnapIndex = 0,
+  themeColor = "default",
+  radius = "lg",
+  showBackdrop = true,
+  closeOnBackdropPress = true,
+  enableSwipeToDismiss = true,
+  showHandle = true,
+  disableAnimation = false,
+  style,
+  handleContent,
+  onClose,
+  onSnapChange
+}) => {
+  const {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    screenHeight
+  } = useBottomSheetAnimation({
+    isOpen,
+    snapPoints,
+    initialSnapIndex,
+    enableSwipeToDismiss,
+    disableAnimation,
+    onClose,
+    onSnapChange
+  });
+  const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
+    themeColor,
+    radius
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React2.createElement(Animated4.View, { style: [styles2.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ React2.createElement(Pressable2, { style: styles2.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ React2.createElement(
+    Animated4.View,
+    {
+      style: [
+        styles2.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ React2.createElement(
+      View2,
+      {
+        style: [styles2.sheet, { height: screenHeight }, sheetStyles, style],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ React2.createElement(View2, { style: styles2.handle }, handleContent ?? /* @__PURE__ */ React2.createElement(
+        View2,
+        {
+          style: [
+            styles2.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ React2.createElement(View2, { style: styles2.content }, children)
+    )
+  ));
+};
+
+// src/components/timepicker/timepicker-dialog.tsx
 var TimePickerDialog = ({
   isOpen,
   onClose,
@@ -691,7 +1059,7 @@ var TimePickerDialog = ({
   onConfirm,
   onCancel
 }) => {
-  const [tempValue, setTempValue] = useState3(value);
+  const [tempValue, setTempValue] = useState4(value);
   const colors = useTimePickerColors(themeColor);
   const handleChange = (time) => {
     setTempValue(time);
@@ -707,7 +1075,7 @@ var TimePickerDialog = ({
     onCancel?.();
     onClose();
   };
-  return /* @__PURE__ */ React2.createElement(BottomSheet, { isOpen, onClose, snapPoints: [0.7] }, /* @__PURE__ */ React2.createElement(View2, null, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React3.createElement(BottomSheet, { isOpen, onClose, snapPoints: [0.7] }, /* @__PURE__ */ React3.createElement(View3, null, /* @__PURE__ */ React3.createElement(
     TimePicker,
     {
       value: tempValue,
@@ -715,26 +1083,26 @@ var TimePickerDialog = ({
       is24Hour,
       themeColor
     }
-  ), /* @__PURE__ */ React2.createElement(View2, { style: styles.actions }, /* @__PURE__ */ React2.createElement(
-    Pressable2,
+  ), /* @__PURE__ */ React3.createElement(View3, { style: styles.actions }, /* @__PURE__ */ React3.createElement(
+    Pressable3,
     {
       onPress: handleCancel,
       style: [styles.actionButton, { backgroundColor: "transparent" }]
     },
-    /* @__PURE__ */ React2.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, cancelText)
-  ), /* @__PURE__ */ React2.createElement(
-    Pressable2,
+    /* @__PURE__ */ React3.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, cancelText)
+  ), /* @__PURE__ */ React3.createElement(
+    Pressable3,
     {
       onPress: handleConfirm,
       style: [styles.actionButton, { backgroundColor: "transparent" }]
     },
-    /* @__PURE__ */ React2.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, confirmText)
+    /* @__PURE__ */ React3.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, confirmText)
   ))));
 };
 
 // src/components/timepicker/timepicker-trigger.tsx
-import React3, { useMemo as useMemo3 } from "react";
-import { Pressable as Pressable3, Text as Text3, TouchableOpacity, View as View3 } from "react-native";
+import React4, { useMemo as useMemo4 } from "react";
+import { Pressable as Pressable4, Text as Text3, TouchableOpacity, View as View4 } from "react-native";
 import { CloseIcon, TimeIcon } from "@xaui/icons";
 var TimePickerTrigger = ({
   value,
@@ -753,7 +1121,7 @@ var TimePickerTrigger = ({
   const theme = useXUITheme();
   const colors = useTimePickerColors(themeColor);
   const hasValue = Boolean(value);
-  const displayValue = useMemo3(() => {
+  const displayValue = useMemo4(() => {
     if (!value) return placeholder;
     return formatTimeValue(value, is24Hour);
   }, [value, placeholder, is24Hour]);
@@ -765,8 +1133,8 @@ var TimePickerTrigger = ({
     color: hasValue ? theme.colors.foreground : colors.textSecondary
   };
   const isBlocked = isDisabled || isReadOnly;
-  return /* @__PURE__ */ React3.createElement(
-    Pressable3,
+  return /* @__PURE__ */ React4.createElement(
+    Pressable4,
     {
       onPress: isBlocked ? void 0 : onPress,
       disabled: isBlocked,
@@ -774,7 +1142,7 @@ var TimePickerTrigger = ({
       accessibilityRole: "button",
       accessibilityState: { disabled: isBlocked }
     },
-    /* @__PURE__ */ React3.createElement(View3, { style: styles.triggerContent }, /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React4.createElement(View4, { style: styles.triggerContent }, /* @__PURE__ */ React4.createElement(
       Text3,
       {
         style: [styles.triggerText, triggerTextStyle, textStyle],
@@ -783,15 +1151,15 @@ var TimePickerTrigger = ({
       },
       displayValue
     )),
-    isClearable && hasValue && !isBlocked ? /* @__PURE__ */ React3.createElement(
+    isClearable && hasValue && !isBlocked ? /* @__PURE__ */ React4.createElement(
       TouchableOpacity,
       {
         onPress: onClear,
         style: styles.clearButton,
         hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
       },
-      /* @__PURE__ */ React3.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
-    ) : icon ?? /* @__PURE__ */ React3.createElement(TimeIcon, { color: theme.colors.foreground, size: 20 })
+      /* @__PURE__ */ React4.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : icon ?? /* @__PURE__ */ React4.createElement(TimeIcon, { color: theme.colors.foreground, size: 20 })
   );
 };
 export {

package/dist/toolbar/index.cjs

@@ -240,7 +240,9 @@ var Toolbar = ({
 }) => {
   const variantStyles = useToolbarVariantStyles(variant, position);
   const colors2 = useToolbarColors(themeColor);
-  const translateValue = (0, import_react_native_reanimated.useSharedValue)(isVisible ? 0 : getInitialTranslate(position));
+  const translateValue = (0, import_react_native_reanimated.useSharedValue)(
+    isVisible ? 0 : getInitialTranslate(position)
+  );
   const opacityValue = (0, import_react_native_reanimated.useSharedValue)(isVisible ? 1 : 0);
   (0, import_react8.useEffect)(() => {
     if (isVisible) {

package/dist/{components/toolbar/toolbar.type.d.mts → toolbar/index.d.cts}

@@ -1,13 +1,14 @@
-import type { ReactNode } from 'react';
-import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
-import type { ThemeColor } from '../../types';
-export type ToolbarVariant = 'floating' | 'docked' | 'vertical';
-export type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right';
-export type ToolbarActionRenderParams = {
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type ToolbarVariant = 'floating' | 'docked' | 'vertical';
+type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right';
+type ToolbarActionRenderParams = {
     color: string;
     size: number;
 };
-export type ToolbarActionProps = {
+type ToolbarActionProps = {
     /**
      * Icon element or icon render function.
      */
@@ -38,12 +39,12 @@ export type ToolbarActionProps = {
      */
     testID?: string;
 };
-export type ToolbarCustomAppearance = {
+type ToolbarCustomAppearance = {
     container?: StyleProp<ViewStyle>;
     topRow?: StyleProp<ViewStyle>;
     actionsContainer?: StyleProp<ViewStyle>;
 };
-export type ToolbarProps = {
+type ToolbarProps = {
     /**
      * Toolbar variant.
      * - floating: rounded floating bar
@@ -91,4 +92,9 @@ export type ToolbarProps = {
      */
     customAppearance?: ToolbarCustomAppearance;
 };
-//# sourceMappingURL=toolbar.type.d.ts.map
+
+declare const Toolbar: React.FC<ToolbarProps>;
+
+declare const ToolbarAction: React.FC<ToolbarActionProps>;
+
+export { Toolbar, ToolbarAction, type ToolbarActionProps, type ToolbarActionRenderParams, type ToolbarCustomAppearance, type ToolbarPosition, type ToolbarProps, type ToolbarVariant };

package/dist/toolbar/index.d.ts

@@ -1,4 +1,100 @@
-export { Toolbar } from './toolbar';
-export { ToolbarAction } from './toolbar-action';
-export type { ToolbarProps, ToolbarVariant, ToolbarPosition, ToolbarActionProps, ToolbarActionRenderParams, ToolbarCustomAppearance, } from './toolbar.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type ToolbarVariant = 'floating' | 'docked' | 'vertical';
+type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right';
+type ToolbarActionRenderParams = {
+    color: string;
+    size: number;
+};
+type ToolbarActionProps = {
+    /**
+     * Icon element or icon render function.
+     */
+    icon: ReactNode | ((params: ToolbarActionRenderParams) => ReactNode);
+    /**
+     * Whether action is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom action style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Callback fired when action is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Callback fired when action is long-pressed.
+     */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Accessibility label for action.
+     */
+    accessibilityLabel?: string;
+    /**
+     * testID for e2e tests.
+     */
+    testID?: string;
+};
+type ToolbarCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    topRow?: StyleProp<ViewStyle>;
+    actionsContainer?: StyleProp<ViewStyle>;
+};
+type ToolbarProps = {
+    /**
+     * Toolbar variant.
+     * - floating: rounded floating bar
+     * - docked: fixed bar without rounding
+     * - vertical: vertical bar (always centered)
+     * @default 'docked'
+     */
+    variant?: ToolbarVariant;
+    /**
+     * Toolbar position.
+     * - For floating/docked: 'top' | 'bottom'
+     * - For vertical: 'left' | 'right'
+     * @default 'top'
+     */
+    position?: ToolbarPosition;
+    /**
+     * Whether toolbar is visible (with animation).
+     * @default true
+     */
+    isVisible?: boolean;
+    /**
+     * Theme color used for accent and icon tint.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Whether to render a divider.
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Whether to show elevation shadow. If not provided, uses variant default.
+     */
+    isElevated?: boolean;
+    /**
+     * Toolbar action items.
+     */
+    children?: ReactNode;
+    /**
+     * Custom container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Optional custom appearance styles.
+     */
+    customAppearance?: ToolbarCustomAppearance;
+};
+
+declare const Toolbar: React.FC<ToolbarProps>;
+
+declare const ToolbarAction: React.FC<ToolbarActionProps>;
+
+export { Toolbar, ToolbarAction, type ToolbarActionProps, type ToolbarActionRenderParams, type ToolbarCustomAppearance, type ToolbarPosition, type ToolbarProps, type ToolbarVariant };