@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/dialog/index.js

@@ -1,372 +0,0 @@
-import {
-  useBorderRadiusStyles,
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/dialog/dialog.tsx
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { Modal, Pressable, Text, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-import { withOpacity } from "@xaui/core";
-import { CloseIcon } from "@xaui/icons";
-
-// src/components/dialog/dialog.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFillObject
-  },
-  backdropTransparent: {
-    backgroundColor: "transparent"
-  },
-  backdropBlurred: {
-    backgroundColor: "rgba(15, 23, 42, 0.35)"
-  },
-  backdropOpaque: {
-    backgroundColor: "rgba(15, 23, 42, 0.55)"
-  },
-  placementBase: {
-    flex: 1,
-    paddingHorizontal: 16
-  },
-  placementTop: {
-    justifyContent: "flex-start",
-    paddingTop: 44,
-    paddingBottom: 16
-  },
-  placementCenter: {
-    justifyContent: "center",
-    paddingVertical: 16
-  },
-  placementBottom: {
-    justifyContent: "flex-end",
-    paddingTop: 16,
-    paddingBottom: 28
-  },
-  dialog: {
-    width: "100%",
-    alignSelf: "center",
-    overflow: "hidden",
-    borderWidth: 1
-  },
-  sizeSm: {
-    maxWidth: 360
-  },
-  sizeMd: {
-    maxWidth: 520
-  },
-  sizeLg: {
-    maxWidth: 700
-  },
-  sizeFull: {
-    maxWidth: "100%",
-    flex: 1
-  },
-  header: {
-    paddingTop: 18,
-    paddingBottom: 12,
-    paddingHorizontal: 20,
-    flexDirection: "row",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: 12
-  },
-  headerContent: {
-    flex: 1
-  },
-  headerText: {
-    fontSize: 20,
-    lineHeight: 26,
-    fontWeight: "700"
-  },
-  body: {
-    paddingHorizontal: 20,
-    paddingVertical: 12,
-    gap: 10
-  },
-  bodyText: {
-    fontSize: 15,
-    lineHeight: 22
-  },
-  footer: {
-    paddingTop: 8,
-    paddingBottom: 18,
-    paddingHorizontal: 20,
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    gap: 8
-  },
-  closeButton: {
-    padding: 4,
-    borderRadius: 999,
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
-// src/components/dialog/dialog.tsx
-var DialogContext = createContext({});
-var sizeStyles = {
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  full: styles.sizeFull
-};
-var placementStyles = {
-  top: styles.placementTop,
-  center: styles.placementCenter,
-  bottom: styles.placementBottom
-};
-var backdropStyles = {
-  transparent: styles.backdropTransparent,
-  blurred: styles.backdropBlurred,
-  opaque: styles.backdropOpaque
-};
-var ENTER_DURATION = 240;
-var EXIT_DURATION = 180;
-function getTranslateOffset(placement, animationType) {
-  if (animationType === "slide") {
-    if (placement === "top") return -28;
-    if (placement === "bottom") return 28;
-    return 18;
-  }
-  if (placement === "top") return -18;
-  if (placement === "bottom") return 18;
-  return 10;
-}
-var resolveChildrenContent = (content, textStyle) => {
-  if (content === void 0 || content === null) return null;
-  if (typeof content === "string" || typeof content === "number") {
-    return /* @__PURE__ */ React.createElement(Text, { style: textStyle }, content);
-  }
-  return content;
-};
-var Dialog = ({
-  children,
-  isOpen,
-  onClose,
-  onOpenChange,
-  size = "md",
-  placement = "center",
-  radius = "lg",
-  backdrop = "opaque",
-  closeOnBackdropPress = true,
-  hideBackdrop = false,
-  animationType = "fade",
-  disableAnimation = false,
-  style,
-  customAppearance
-}) => {
-  const theme = useXUITheme();
-  const radiusStyles = useBorderRadiusStyles(radius);
-  const [shouldRender, setShouldRender] = useState(isOpen);
-  const openRef = useRef(isOpen);
-  const shouldAnimate = !disableAnimation && animationType !== "none";
-  const initialOffset = getTranslateOffset(placement, animationType);
-  const backdropOpacity = useSharedValue(isOpen ? 1 : 0);
-  const dialogOpacity = useSharedValue(isOpen ? 1 : 0);
-  const dialogTranslate = useSharedValue(isOpen ? 0 : initialOffset);
-  const dialogScale = useSharedValue(isOpen ? 1 : placement === "center" ? 0.98 : 1);
-  const requestClose = useCallback(() => {
-    onOpenChange?.(false);
-    onClose?.();
-  }, [onClose, onOpenChange]);
-  const handleBackdropPress = () => {
-    if (closeOnBackdropPress) {
-      requestClose();
-    }
-  };
-  const finishClosing = useCallback(() => {
-    if (!openRef.current) {
-      setShouldRender(false);
-    }
-  }, []);
-  useEffect(() => {
-    openRef.current = isOpen;
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen && !shouldRender) {
-      setShouldRender(true);
-    }
-  }, [isOpen, shouldRender]);
-  useEffect(() => {
-    if (!shouldRender) return;
-    if (!shouldAnimate) {
-      backdropOpacity.value = isOpen ? 1 : 0;
-      dialogOpacity.value = isOpen ? 1 : 0;
-      dialogTranslate.value = 0;
-      dialogScale.value = 1;
-      if (!isOpen) {
-        setShouldRender(false);
-      }
-      return;
-    }
-    const offset = getTranslateOffset(placement, animationType);
-    if (isOpen) {
-      backdropOpacity.value = 0;
-      dialogOpacity.value = 0;
-      dialogTranslate.value = offset;
-      dialogScale.value = placement === "center" ? 0.98 : 1;
-      backdropOpacity.value = withTiming(1, {
-        duration: 210,
-        easing: Easing.out(Easing.quad)
-      });
-      dialogOpacity.value = withTiming(1, {
-        duration: 220,
-        easing: Easing.out(Easing.quad)
-      });
-      dialogTranslate.value = withTiming(0, {
-        duration: ENTER_DURATION,
-        easing: Easing.out(Easing.cubic)
-      });
-      dialogScale.value = withTiming(1, {
-        duration: 220,
-        easing: Easing.out(Easing.quad)
-      });
-      return;
-    }
-    backdropOpacity.value = withTiming(0, {
-      duration: 150,
-      easing: Easing.in(Easing.quad)
-    });
-    dialogTranslate.value = withTiming(offset, {
-      duration: EXIT_DURATION,
-      easing: Easing.in(Easing.cubic)
-    });
-    dialogScale.value = withTiming(placement === "center" ? 0.98 : 1, {
-      duration: 150,
-      easing: Easing.in(Easing.quad)
-    });
-    dialogOpacity.value = withTiming(
-      0,
-      {
-        duration: EXIT_DURATION,
-        easing: Easing.in(Easing.quad)
-      },
-      (finished) => {
-        if (finished) {
-          scheduleOnRN(finishClosing);
-        }
-      }
-    );
-  }, [
-    animationType,
-    backdropOpacity,
-    dialogOpacity,
-    dialogScale,
-    dialogTranslate,
-    finishClosing,
-    isOpen,
-    placement,
-    shouldAnimate,
-    shouldRender
-  ]);
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value
-  }));
-  const dialogAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: dialogOpacity.value,
-    transform: [{ translateY: dialogTranslate.value }, { scale: dialogScale.value }]
-  }));
-  const dialogContextValue = useMemo(
-    () => ({
-      onClose: requestClose,
-      customAppearance
-    }),
-    [customAppearance, requestClose]
-  );
-  if (!shouldRender) return null;
-  return /* @__PURE__ */ React.createElement(Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: requestClose }, /* @__PURE__ */ React.createElement(View, { style: styles.root }, !hideBackdrop && /* @__PURE__ */ React.createElement(
-    AnimatedPressable,
-    {
-      style: [
-        styles.backdrop,
-        backdropStyles[backdrop],
-        backdropAnimatedStyle,
-        customAppearance?.backdrop
-      ],
-      onPress: handleBackdropPress
-    }
-  ), /* @__PURE__ */ React.createElement(View, { style: [styles.placementBase, placementStyles[placement]] }, /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: dialogContextValue }, /* @__PURE__ */ React.createElement(Pressable, { onPress: (event) => event.stopPropagation() }, /* @__PURE__ */ React.createElement(
-    Animated.View,
-    {
-      style: [
-        styles.dialog,
-        sizeStyles[size],
-        radiusStyles,
-        dialogAnimatedStyle,
-        {
-          backgroundColor: theme.colors.background,
-          borderColor: withOpacity(theme.colors.foreground, 0.14)
-        },
-        theme.shadows.lg,
-        customAppearance?.container,
-        style
-      ]
-    },
-    children
-  ))))));
-};
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var DialogHeader = ({
-  children,
-  isClosable = false,
-  closeButton,
-  onClose,
-  style
-}) => {
-  const theme = useXUITheme();
-  const { onClose: contextClose, customAppearance } = useContext(DialogContext);
-  const close = onClose ?? contextClose;
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, customAppearance?.header, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.headerContent }, resolveChildrenContent(children, [
-    styles.headerText,
-    { color: theme.colors.foreground },
-    customAppearance?.headerText
-  ])), isClosable && /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: "Close dialog",
-      onPress: close,
-      style: [styles.closeButton, customAppearance?.closeButton]
-    },
-    closeButton ?? /* @__PURE__ */ React.createElement(CloseIcon, { size: 22, color: theme.colors.foreground })
-  ));
-};
-var DialogBody = ({ children, style }) => {
-  const theme = useXUITheme();
-  const { customAppearance } = useContext(DialogContext);
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.body, customAppearance?.body, style] }, resolveChildrenContent(children, [
-    styles.bodyText,
-    { color: withOpacity(theme.colors.foreground, 0.9) },
-    customAppearance?.bodyText
-  ]));
-};
-var DialogFooter = ({ children, style }) => {
-  const { customAppearance } = useContext(DialogContext);
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, customAppearance?.footer, style] }, children);
-};
-export {
-  Dialog,
-  DialogBody,
-  DialogFooter,
-  DialogHeader
-};

package/dist/divider/index.cjs

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

package/dist/divider/index.d.cts

@@ -1,30 +0,0 @@
-import React from 'react';
-import { ThemeColor } from '@xaui/core/types';
-
-type DividerOrientation = 'horizontal' | 'vertical';
-type DividerProps = {
-    /**
-     * The size (thickness) of the divider in pixels.
-     * @default 1
-     */
-    size?: number;
-    /**
-     * The theme color of the divider.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Custom color for the divider.
-     * If provided, this will override themeColor.
-     */
-    color?: string;
-    /**
-     * The orientation of the divider.
-     * @default 'horizontal'
-     */
-    orientation?: DividerOrientation;
-};
-
-declare const Divider: React.FC<DividerProps>;
-
-export { Divider, type DividerOrientation, type DividerProps };

package/dist/divider/index.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import { ThemeColor } from '@xaui/core/types';
-
-type DividerOrientation = 'horizontal' | 'vertical';
-type DividerProps = {
-    /**
-     * The size (thickness) of the divider in pixels.
-     * @default 1
-     */
-    size?: number;
-    /**
-     * The theme color of the divider.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Custom color for the divider.
-     * If provided, this will override themeColor.
-     */
-    color?: string;
-    /**
-     * The orientation of the divider.
-     * @default 'horizontal'
-     */
-    orientation?: DividerOrientation;
-};
-
-declare const Divider: React.FC<DividerProps>;
-
-export { Divider, type DividerOrientation, type DividerProps };

package/dist/divider/index.js

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

package/dist/drawer/index.cjs

@@ -1,237 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/drawer/drawer.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/drawer/drawer.hook.ts
-
-var _core = require('@xaui/core');
-var useDrawerStyles = (themeColor, position, width, height) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-    const colorScheme = theme.colors[safeThemeColor];
-    const isDefaultThemeColor = safeThemeColor === "default";
-    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.container : "#FFFFFF";
-    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.container;
-    const sizeStyle = position === "left" || position === "right" ? { width } : { height };
-    return {
-      backgroundColor,
-      ...sizeStyle
-    };
-  }, [height, position, theme, themeColor, width]);
-};
-var getTranslateValue = (position, size) => {
-  switch (position) {
-    case "left":
-      return { x: -size, y: 0 };
-    case "right":
-      return { x: size, y: 0 };
-    case "top":
-      return { x: 0, y: -size };
-    case "bottom":
-      return { x: 0, y: size };
-    default:
-      return { x: -size, y: 0 };
-  }
-};
-
-// src/components/drawer/drawer.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
-  },
-  drawerContainer: {
-    position: "absolute",
-    backgroundColor: "#ffffff"
-  },
-  drawerLeft: {
-    top: 0,
-    left: 0,
-    bottom: 0
-  },
-  drawerRight: {
-    top: 0,
-    right: 0,
-    bottom: 0
-  },
-  drawerTop: {
-    top: 0,
-    left: 0,
-    right: 0
-  },
-  drawerBottom: {
-    bottom: 0,
-    left: 0,
-    right: 0
-  }
-});
-
-// src/components/drawer/drawer.tsx
-var Drawer = ({
-  children,
-  isOpen,
-  position = "left",
-  themeColor = "default",
-  width = 280,
-  height = 280,
-  showOverlay = true,
-  onClose,
-  customStyle,
-  disableAnimation = false
-}) => {
-  const DRAWER_ANIMATION_DURATION = 250;
-  const [isModalMounted, setIsModalMounted] = _react.useState.call(void 0, false);
-  const [isModalVisible, setIsModalVisible] = _react.useState.call(void 0, false);
-  const isModalMountedRef = _react.useRef.call(void 0, false);
-  const animationRef = _react.useRef.call(void 0, null);
-  const size = position === "left" || position === "right" ? width : height;
-  const initialTranslateValues = _react.useMemo.call(void 0, 
-    () => getTranslateValue(position, size),
-    [position, size]
-  );
-  const translateX = _react.useRef.call(void 0, new _reactnative.Animated.Value(initialTranslateValues.x)).current;
-  const translateY = _react.useRef.call(void 0, new _reactnative.Animated.Value(initialTranslateValues.y)).current;
-  const overlayOpacity = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const containerStyle = useDrawerStyles(themeColor, position, width, height);
-  const positionStyle = position === "left" ? styles.drawerLeft : position === "right" ? styles.drawerRight : position === "top" ? styles.drawerTop : styles.drawerBottom;
-  _react.useEffect.call(void 0, () => {
-    const translateValues = getTranslateValue(position, size);
-    if (animationRef.current) {
-      animationRef.current.stop();
-      animationRef.current = null;
-    }
-    if (isOpen) {
-      if (!isModalMountedRef.current) {
-        translateX.setValue(translateValues.x);
-        translateY.setValue(translateValues.y);
-        overlayOpacity.setValue(0);
-        isModalMountedRef.current = true;
-        setIsModalMounted(true);
-        setIsModalVisible(true);
-      }
-      if (disableAnimation) {
-        translateX.setValue(0);
-        translateY.setValue(0);
-        overlayOpacity.setValue(1);
-        return;
-      }
-      const animation2 = _reactnative.Animated.parallel([
-        _reactnative.Animated.timing(translateX, {
-          toValue: 0,
-          duration: DRAWER_ANIMATION_DURATION,
-          easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
-          useNativeDriver: true
-        }),
-        _reactnative.Animated.timing(translateY, {
-          toValue: 0,
-          duration: DRAWER_ANIMATION_DURATION,
-          easing: _reactnative.Easing.out(_reactnative.Easing.cubic),
-          useNativeDriver: true
-        }),
-        _reactnative.Animated.timing(overlayOpacity, {
-          toValue: 1,
-          duration: DRAWER_ANIMATION_DURATION,
-          useNativeDriver: true
-        })
-      ]);
-      animationRef.current = animation2;
-      animation2.start(() => {
-        if (animationRef.current === animation2) {
-          animationRef.current = null;
-        }
-      });
-      return;
-    }
-    if (!isModalMountedRef.current) {
-      return;
-    }
-    if (disableAnimation) {
-      translateX.setValue(translateValues.x);
-      translateY.setValue(translateValues.y);
-      overlayOpacity.setValue(0);
-      isModalMountedRef.current = false;
-      setIsModalVisible(false);
-      setIsModalMounted(false);
-      return;
-    }
-    const animation = _reactnative.Animated.parallel([
-      _reactnative.Animated.timing(translateX, {
-        toValue: translateValues.x,
-        duration: DRAWER_ANIMATION_DURATION,
-        easing: _reactnative.Easing.in(_reactnative.Easing.cubic),
-        useNativeDriver: true
-      }),
-      _reactnative.Animated.timing(translateY, {
-        toValue: translateValues.y,
-        duration: DRAWER_ANIMATION_DURATION,
-        easing: _reactnative.Easing.in(_reactnative.Easing.cubic),
-        useNativeDriver: true
-      }),
-      _reactnative.Animated.timing(overlayOpacity, {
-        toValue: 0,
-        duration: DRAWER_ANIMATION_DURATION,
-        useNativeDriver: true
-      })
-    ]);
-    animationRef.current = animation;
-    animation.start(({ finished }) => {
-      if (animationRef.current === animation) {
-        animationRef.current = null;
-      }
-      if (finished) {
-        isModalMountedRef.current = false;
-        setIsModalVisible(false);
-        setIsModalMounted(false);
-      }
-    });
-  }, [
-    isOpen,
-    position,
-    size,
-    disableAnimation,
-    translateX,
-    translateY,
-    overlayOpacity
-  ]);
-  if (!isModalMounted) {
-    return null;
-  }
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Modal,
-    {
-      transparent: true,
-      visible: isModalVisible,
-      animationType: "none",
-      onRequestClose: onClose
-    },
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: { flex: 1 } }, showOverlay && /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: onClose, style: { flex: 1 } }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Animated.View, { style: [styles.overlay, { opacity: overlayOpacity }] })), /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Animated.View,
-      {
-        style: [
-          styles.drawerContainer,
-          positionStyle,
-          containerStyle,
-          {
-            transform: [{ translateX }, { translateY }]
-          },
-          customStyle
-        ]
-      },
-      children
-    ))
-  );
-};
-
-
-exports.Drawer = Drawer;