@xaui/native 0.0.21 → 0.0.23

package/dist/checkbox/index.d.mts

@@ -0,0 +1,3 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps, CheckboxVariant, CheckboxLabelAlignment, } from './checkbox.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/checkbox/index.d.ts

@@ -1,73 +1,3 @@
-import React from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
-import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
-
-type CheckboxVariant = 'filled' | 'light';
-type CheckboxLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
-type CheckboxProps = {
-    /**
-     * The label to display alongside the checkbox.
-     */
-    label?: string;
-    /**
-     * Alignment of the label relative to the checkbox.
-     * @default 'right'
-     */
-    labelAlignment?: CheckboxLabelAlignment;
-    /**
-     * The theme color of the checkbox.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The variant of the checkbox.
-     * @default 'filled'
-     */
-    variant?: CheckboxVariant;
-    /**
-     * The size of the checkbox.
-     * @default 'md'
-     */
-    size?: Size;
-    /**
-     * The border radius of the checkbox.
-     * @default 'sm'
-     */
-    radius?: Radius;
-    /**
-     * Whether the checkbox should take the full width of its container.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Whether the checkbox is checked.
-     * @default false
-     */
-    isChecked?: boolean;
-    /**
-     * Whether the checkbox is in an indeterminate state.
-     * @default false
-     */
-    isIndeterminate?: boolean;
-    /**
-     * Whether the checkbox is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom style for the label text.
-     */
-    labelStyle?: TextStyle;
-    /**
-     * Custom style for the checkbox container.
-     */
-    style?: ViewStyle;
-    /**
-     * Callback fired when the checkbox value changes.
-     */
-    onValueChange?: (isChecked: boolean) => void;
-};
-
-declare const Checkbox: React.FC<CheckboxProps>;
-
-export { Checkbox, type CheckboxLabelAlignment, type CheckboxProps, type CheckboxVariant };
+export { Checkbox } from './checkbox';
+export type { CheckboxProps, CheckboxVariant, CheckboxLabelAlignment, } from './checkbox.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/chip/index.d.mts

@@ -0,0 +1,5 @@
+export { Chip } from './chip';
+export { ChipGroup } from './chip-group';
+export { ChipItem } from './chip-item';
+export type { ChipProps, ChipGroupProps, ChipItemProps, ChipVariant, ChipSize, ChipRadius, ChipSelectMode, } from './chip.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/chip/index.d.ts

@@ -1,195 +1,5 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { T as ThemeColor } from '../index-BOw6tbkc.js';
-
-type ChipVariant = 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'dot';
-type ChipSize = 'sm' | 'md' | 'lg';
-type ChipRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
-type ChipSelectMode = 'single' | 'multiple';
-type ChipCustomAppearance = {
-    /**
-     * Custom styles for the chip container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the chip text
-     */
-    text?: TextStyle;
-    /**
-     * Custom styles for the close button
-     */
-    closeButton?: ViewStyle;
-    /**
-     * Custom styles for the dot indicator
-     */
-    dot?: ViewStyle;
-};
-type ChipProps = {
-    /**
-     * The content to display inside the chip.
-     */
-    children: ReactNode;
-    /**
-     * The visual variant of the chip.
-     * @default 'solid'
-     */
-    variant?: ChipVariant;
-    /**
-     * The theme color of the chip.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The size of the chip.
-     * @default 'md'
-     */
-    size?: ChipSize;
-    /**
-     * The border radius of the chip.
-     * @default 'full'
-     */
-    radius?: ChipRadius;
-    /**
-     * Avatar or image to display at the start.
-     */
-    avatar?: ReactNode;
-    /**
-     * Content to display at the start of the chip.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the chip.
-     */
-    endContent?: ReactNode;
-    /**
-     * Whether the chip is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom appearance styles for chip parts.
-     */
-    customAppearance?: ChipCustomAppearance;
-    /**
-     * Callback fired when the close button is pressed.
-     * When provided, a close button is rendered.
-     */
-    onClose?: () => void;
-    /**
-     * Callback fired when the chip is pressed.
-     */
-    onPress?: () => void;
-};
-type ChipItemProps = {
-    /**
-     * Unique key for the chip item within a group.
-     */
-    value: string;
-    /**
-     * The content to display inside the chip item.
-     */
-    children: ReactNode;
-    /**
-     * The visual variant of the chip item.
-     * Overrides the group variant if set.
-     */
-    variant?: ChipVariant;
-    /**
-     * The theme color of the chip item.
-     * Overrides the group color if set.
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Avatar or image to display at the start.
-     */
-    avatar?: ReactNode;
-    /**
-     * Content to display at the start of the chip.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content to display at the end of the chip.
-     */
-    endContent?: ReactNode;
-    /**
-     * Whether the chip item is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom appearance styles for chip parts.
-     */
-    customAppearance?: ChipCustomAppearance;
-};
-type ChipGroupProps = {
-    /**
-     * ChipItem children.
-     */
-    children: ReactNode;
-    /**
-     * Whether chips in the group are selectable.
-     * @default false
-     */
-    isSelectable?: boolean;
-    /**
-     * Selection mode when isSelectable is true.
-     * @default 'single'
-     */
-    selectMode?: ChipSelectMode;
-    /**
-     * The visual variant applied to all chips.
-     * @default 'solid'
-     */
-    variant?: ChipVariant;
-    /**
-     * The theme color applied to all chips.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The size applied to all chips.
-     * @default 'md'
-     */
-    size?: ChipSize;
-    /**
-     * The border radius applied to all chips.
-     * @default 'full'
-     */
-    radius?: ChipRadius;
-    /**
-     * Whether all chips in the group are disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Controlled selected values.
-     */
-    selectedValues?: string[];
-    /**
-     * Default selected values for uncontrolled mode.
-     */
-    defaultSelectedValues?: string[];
-    /**
-     * Callback fired when the selection changes.
-     */
-    onSelectionChange?: (values: string[]) => void;
-    /**
-     * Spacing between chips.
-     * @default 8
-     */
-    spacing?: number;
-    /**
-     * Custom appearance styles for the group container.
-     */
-    customAppearance?: {
-        container?: ViewStyle;
-    };
-};
-
-declare const Chip: React.FC<ChipProps>;
-
-declare const ChipGroup: React.FC<ChipGroupProps>;
-
-declare const ChipItem: React.FC<ChipItemProps>;
-
-export { Chip, ChipGroup, type ChipGroupProps, ChipItem, type ChipItemProps, type ChipProps, type ChipRadius, type ChipSelectMode, type ChipSize, type ChipVariant };
+export { Chip } from './chip';
+export { ChipGroup } from './chip-group';
+export { ChipItem } from './chip-item';
+export type { ChipProps, ChipGroupProps, ChipItemProps, ChipVariant, ChipSize, ChipRadius, ChipSelectMode, } from './chip.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/chunk-HC2SSHNU.js

@@ -0,0 +1,368 @@
+import {
+  Portal,
+  useXUITheme
+} from "./chunk-LTKYHG5V.js";
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+import React from "react";
+import { Animated as Animated3, Pressable, View } from "react-native";
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated as Animated2, Dimensions, PanResponder } from "react-native";
+import { getSafeThemeColor } from "@xaui/core";
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+import { Animated, Easing } from "react-native";
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: Easing.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = Animated.parallel([
+    Animated.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = Animated.parallel([
+    Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = Animated.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] = useState(false);
+  const currentSnapIndex = useRef(initialSnapIndex);
+  const animationRef = useRef(null);
+  const translateY = useRef(new Animated2.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = useRef(new Animated2.Value(0)).current;
+  const sortedSnapPoints = useMemo(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = useMemo(
+    () => 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
+    ]
+  );
+  useEffect(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = useMemo(
+    () => 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 = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = useMemo(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = useMemo(
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+import { StyleSheet } from "react-native";
+var styles = StyleSheet.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__ */ React.createElement(Portal, null, showBackdrop && /* @__PURE__ */ React.createElement(Animated3.View, { style: [styles.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ React.createElement(
+    Animated3.View,
+    {
+      style: [
+        styles.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [styles.sheet, { height: screenHeight }, sheetStyles, style],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ React.createElement(View, { style: styles.handle }, handleContent ?? /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: [
+            styles.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ React.createElement(View, { style: styles.content }, children)
+    )
+  ));
+};
+
+export {
+  BottomSheet
+};