@xaui/native 0.0.21 → 0.0.23

package/dist/index.cjs

@@ -1,8 +1,14 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -11,8 +17,961 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  Drawer: () => Drawer
+});
 module.exports = __toCommonJS(src_exports);
+
+// src/components/button/button.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native10 = require("react-native");
+
+// src/components/indicator/indicator.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = (0, import_react5.useMemo)(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/indicator/circular-activity-indicator.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/indicator/indicator.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  container: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%",
+    justifyContent: "center"
+  },
+  layer: {
+    ...import_react_native4.StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  track: {
+    width: "100%",
+    overflow: "hidden"
+  },
+  progress: {
+    height: "100%"
+  }
+});
+
+// src/components/indicator/circular-activity-indicator.tsx
+var import_core2 = require("@xaui/core");
+var DURATION = 1800;
+var CircularActivityIndicator = ({
+  size = 40,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  disableAnimation = false,
+  showTrack = true
+}) => {
+  const theme = useXUITheme();
+  const { current: timer } = (0, import_react6.useRef)(new import_react_native5.Animated.Value(0));
+  const rotation = (0, import_react6.useRef)(void 0);
+  const startRotation = import_react6.default.useCallback(() => {
+    if (rotation.current) {
+      timer.setValue(0);
+      import_react_native5.Animated.loop(rotation.current).start();
+    }
+  }, [timer]);
+  const stopRotation = () => {
+    if (rotation.current) rotation.current.stop();
+  };
+  (0, import_react6.useEffect)(() => {
+    if (rotation.current === void 0) {
+      rotation.current = import_react_native5.Animated.timing(timer, {
+        duration: DURATION,
+        easing: import_react_native5.Easing.linear,
+        useNativeDriver: import_react_native5.Platform.OS !== "web",
+        toValue: 1
+      });
+    }
+    if (!disableAnimation) startRotation();
+    else stopRotation();
+  }, [disableAnimation, startRotation, timer]);
+  const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const mainColor = color || colorScheme.main;
+  const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
+  const strokeWidth = size * 0.1;
+  const frames = 60 * DURATION / 1e3;
+  const easing = import_react_native5.Easing.bezier(0.4, 0, 0.7, 1);
+  const containerStyle = {
+    width: size,
+    height: size / 2,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.View, { style: [styles.container, { width: size, height: size }] }, /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native5.View,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: strokeWidth,
+        borderColor: trackColor
+      }
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native5.View,
+    {
+      style: {
+        width: size,
+        height: size,
+        position: "absolute"
+      }
+    },
+    [0, 1].map((index) => {
+      const inputRange = Array.from(
+        new Array(frames),
+        (_, frameIndex) => frameIndex / (frames - 1)
+      );
+      const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+        let progress = 2 * frameIndex / (frames - 1);
+        const rotationValue = index ? +(360 - 15) : -(180 - 15);
+        if (progress > 1) {
+          progress = 2 - progress;
+        }
+        const direction = index ? -1 : 1;
+        return `${direction * (180 - 30) * easing(progress) + rotationValue}deg`;
+      });
+      const layerStyle = {
+        width: size,
+        height: size,
+        transform: [
+          {
+            rotate: timer.interpolate({
+              inputRange: [0, 1],
+              outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`]
+            })
+          }
+        ]
+      };
+      const viewportStyle = {
+        width: size,
+        height: size,
+        transform: [
+          { translateY: index ? -size / 2 : 0 },
+          {
+            rotate: timer.interpolate({ inputRange, outputRange })
+          }
+        ]
+      };
+      const offsetStyle = index ? { top: size / 2 } : null;
+      const lineStyle = {
+        width: size,
+        height: size,
+        borderColor: mainColor,
+        borderWidth: strokeWidth,
+        borderRadius: size / 2
+      };
+      return /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { key: index, style: [styles.layer] }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: layerStyle }, /* @__PURE__ */ import_react6.default.createElement(
+        import_react_native5.Animated.View,
+        {
+          style: [containerStyle, offsetStyle],
+          collapsable: false
+        },
+        /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: viewportStyle }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: containerStyle, collapsable: false }, /* @__PURE__ */ import_react6.default.createElement(import_react_native5.Animated.View, { style: lineStyle })))
+      )));
+    })
+  ));
+};
+
+// src/components/indicator/linear-activity-indicator.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"), 1);
+
+// src/components/indicator/indicator.hook.ts
+var import_react7 = require("react");
+var import_react_native_reanimated = require("react-native-reanimated");
+var useLinearActivityIndicatorAnimation = (disableAnimation) => {
+  const primaryTranslateX = (0, import_react_native_reanimated.useSharedValue)(0);
+  const primaryScaleX = (0, import_react_native_reanimated.useSharedValue)(0.08);
+  const secondaryTranslateX = (0, import_react_native_reanimated.useSharedValue)(0);
+  const secondaryScaleX = (0, import_react_native_reanimated.useSharedValue)(0.08);
+  (0, import_react7.useEffect)(() => {
+    if (disableAnimation) {
+      (0, import_react_native_reanimated.cancelAnimation)(primaryTranslateX);
+      (0, import_react_native_reanimated.cancelAnimation)(primaryScaleX);
+      (0, import_react_native_reanimated.cancelAnimation)(secondaryTranslateX);
+      (0, import_react_native_reanimated.cancelAnimation)(secondaryScaleX);
+      return;
+    }
+    primaryTranslateX.value = (0, import_react_native_reanimated.withRepeat)(
+      (0, import_react_native_reanimated.withSequence)(
+        (0, import_react_native_reanimated.withTiming)(0, { duration: 0 }),
+        (0, import_react_native_reanimated.withTiming)(0, { duration: 400, easing: import_react_native_reanimated.Easing.linear }),
+        (0, import_react_native_reanimated.withTiming)(0.836714, {
+          duration: 783,
+          easing: import_react_native_reanimated.Easing.bezier(0.5, 0, 0.701732, 0.495819)
+        }),
+        (0, import_react_native_reanimated.withTiming)(2.00611, {
+          duration: 817,
+          easing: import_react_native_reanimated.Easing.bezier(0.302435, 0.381352, 0.55, 0.956352)
+        })
+      ),
+      -1,
+      false
+    );
+    primaryScaleX.value = (0, import_react_native_reanimated.withRepeat)(
+      (0, import_react_native_reanimated.withSequence)(
+        (0, import_react_native_reanimated.withTiming)(0.08, { duration: 0 }),
+        (0, import_react_native_reanimated.withTiming)(0.08, { duration: 733, easing: import_react_native_reanimated.Easing.linear }),
+        (0, import_react_native_reanimated.withTiming)(0.661479, {
+          duration: 650,
+          easing: import_react_native_reanimated.Easing.bezier(0.334731, 0.12482, 0.785844, 1)
+        }),
+        (0, import_react_native_reanimated.withTiming)(0.08, {
+          duration: 617,
+          easing: import_react_native_reanimated.Easing.bezier(0.06, 0.11, 0.6, 1)
+        })
+      ),
+      -1,
+      false
+    );
+    secondaryTranslateX.value = (0, import_react_native_reanimated.withRepeat)(
+      (0, import_react_native_reanimated.withSequence)(
+        (0, import_react_native_reanimated.withTiming)(0, { duration: 0 }),
+        (0, import_react_native_reanimated.withTiming)(0.376519, {
+          duration: 500,
+          easing: import_react_native_reanimated.Easing.bezier(0.15, 0, 0.515058, 0.409685)
+        }),
+        (0, import_react_native_reanimated.withTiming)(0.843862, {
+          duration: 467,
+          easing: import_react_native_reanimated.Easing.bezier(0.31033, 0.284058, 0.8, 0.733712)
+        }),
+        (0, import_react_native_reanimated.withTiming)(1.60278, {
+          duration: 1033,
+          easing: import_react_native_reanimated.Easing.bezier(0.4, 0.627035, 0.6, 0.902026)
+        })
+      ),
+      -1,
+      false
+    );
+    secondaryScaleX.value = (0, import_react_native_reanimated.withRepeat)(
+      (0, import_react_native_reanimated.withSequence)(
+        (0, import_react_native_reanimated.withTiming)(0.08, { duration: 0 }),
+        (0, import_react_native_reanimated.withTiming)(0.457104, {
+          duration: 383,
+          easing: import_react_native_reanimated.Easing.bezier(0.205028, 0.057051, 0.57661, 0.453971)
+        }),
+        (0, import_react_native_reanimated.withTiming)(0.72796, {
+          duration: 500,
+          easing: import_react_native_reanimated.Easing.bezier(0.152313, 0.196432, 0.648374, 1.00432)
+        }),
+        (0, import_react_native_reanimated.withTiming)(0.08, {
+          duration: 1117,
+          easing: import_react_native_reanimated.Easing.bezier(0.257759, -3163e-6, 0.211762, 1.38179)
+        })
+      ),
+      -1,
+      false
+    );
+    return () => {
+      (0, import_react_native_reanimated.cancelAnimation)(primaryTranslateX);
+      (0, import_react_native_reanimated.cancelAnimation)(primaryScaleX);
+      (0, import_react_native_reanimated.cancelAnimation)(secondaryTranslateX);
+      (0, import_react_native_reanimated.cancelAnimation)(secondaryScaleX);
+    };
+  }, [disableAnimation]);
+  return {
+    primaryTranslateX,
+    primaryScaleX,
+    secondaryTranslateX,
+    secondaryScaleX
+  };
+};
+
+// src/components/indicator/linear-activity-indicator.tsx
+var LinearActivityIndicator = ({
+  size = 4,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  disableAnimation = false,
+  borderRadius = 0,
+  showTrack = true
+}) => {
+  const theme = useXUITheme();
+  const { primaryTranslateX, primaryScaleX, secondaryTranslateX, secondaryScaleX } = useLinearActivityIndicatorAnimation(disableAnimation);
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color || colorScheme.main;
+  const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
+  const barStyle = {
+    ...import_react_native6.StyleSheet.absoluteFillObject,
+    backgroundColor: mainColor,
+    borderRadius
+  };
+  const primaryStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
+    transform: [
+      { translateX: `${(primaryTranslateX.value - 1.45167) * 100}%` },
+      { scaleX: primaryScaleX.value }
+    ]
+  }));
+  const secondaryStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
+    transform: [
+      { translateX: `${(secondaryTranslateX.value - 0.548889) * 100}%` },
+      { scaleX: secondaryScaleX.value }
+    ]
+  }));
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native6.View,
+    {
+      style: {
+        height: size,
+        width: "100%",
+        borderRadius,
+        backgroundColor: trackColor,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, primaryStyle] }),
+    /* @__PURE__ */ import_react8.default.createElement(import_react_native_reanimated2.default.View, { style: [barStyle, secondaryStyle] })
+  );
+};
+
+// src/components/indicator/indicator.tsx
+var ActivityIndicator = (props) => {
+  const {
+    variant = "circular",
+    themeColor = "primary",
+    color,
+    backgroundColor,
+    size,
+    disableAnimation = false,
+    borderRadius,
+    showTrack
+  } = props;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = backgroundColor ?? (showTrack ? colorScheme.background : "transparent");
+  if (variant === "circular") {
+    const circleSize = size ?? 40;
+    return /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native7.View,
+      {
+        style: [styles.container, { width: circleSize, height: circleSize }],
+        accessible: true,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: "Loading"
+      },
+      /* @__PURE__ */ import_react9.default.createElement(
+        CircularActivityIndicator,
+        {
+          size: circleSize,
+          themeColor,
+          color: mainColor,
+          backgroundColor: trackColor,
+          disableAnimation
+        }
+      )
+    );
+  }
+  const linearSize = size ?? 4;
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native7.View,
+    {
+      style: styles.container,
+      accessible: true,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: "Loading"
+    },
+    /* @__PURE__ */ import_react9.default.createElement(
+      LinearActivityIndicator,
+      {
+        size: linearSize,
+        themeColor,
+        color: mainColor,
+        backgroundColor: trackColor,
+        disableAnimation,
+        borderRadius,
+        showTrack
+      }
+    )
+  );
+};
+
+// src/components/button/button.style.ts
+var import_react_native8 = require("react-native");
+var styles2 = import_react_native8.StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  contentContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  text: {
+    fontWeight: "500",
+    textAlign: "center"
+  },
+  startContent: {
+    marginRight: 4
+  },
+  endContent: {
+    marginLeft: 4
+  },
+  spinner: {
+    marginHorizontal: 4
+  },
+  fullWidth: {
+    flexShrink: 1,
+    flexBasis: "auto",
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  disabledText: {
+    opacity: 0.7
+  }
+});
+
+// src/components/button/button.hook.ts
+var import_react10 = require("react");
+var import_core6 = require("@xaui/core");
+var useTextStyles = (themeColor, variant) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const textColor = (0, import_react10.useMemo)(() => {
+    if (variant === "solid") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  return {
+    textColor
+  };
+};
+function useSizesStyles(size) {
+  const theme = useXUITheme();
+  const sizeStyles = (0, import_react10.useMemo)(() => {
+    const sizes = {
+      xs: {
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 34,
+        fontSize: theme.fontSizes.xs
+      },
+      sm: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 38,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        minHeight: 42,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        minHeight: 50,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  const spinnerSize = (0, import_react10.useMemo)(() => {
+    const sizes = {
+      xs: 14,
+      sm: 16,
+      md: 18,
+      lg: 20
+    };
+    return sizes[size];
+  }, [size]);
+  return { sizeStyles, spinnerSize };
+}
+function useVariantSizesStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core6.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const variantStyles = (0, import_react10.useMemo)(() => {
+    const styles4 = {
+      solid: {
+        backgroundColor: colorScheme.main,
+        borderWidth: 0
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor: colorScheme.main
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: 0
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}95`,
+        borderWidth: theme.borderWidth.md,
+        borderColor: `${colorScheme.main}90`
+      }
+    };
+    const baseStyle = styles4[variant];
+    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      ...shouldApplyElevation ? shadowStyles : {},
+      ...shouldApplyElevation && elevation > 0 ? { elevation } : {}
+    };
+  }, [variant, colorScheme, theme, elevation]);
+  return variantStyles;
+}
+
+// src/components/button/button.animation.ts
+var import_react_native9 = require("react-native");
+var runPressInAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native9.Animated.parallel([
+    import_react_native9.Animated.spring(animatedScale, {
+      toValue: 0.975,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native9.Animated.timing(animatedOpacity, {
+      toValue: 0.9,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+var runPressOutAnimation = (animatedScale, animatedOpacity) => {
+  import_react_native9.Animated.parallel([
+    import_react_native9.Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 0
+    }),
+    import_react_native9.Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })
+  ]).start();
+};
+
+// src/components/button/button.tsx
+var Button = ({
+  children,
+  themeColor = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "md",
+  startContent,
+  endContent,
+  spinnerPlacement = "start",
+  fullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  elevation = 0,
+  customAppearance,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut
+}) => {
+  const animatedScale = import_react11.default.useRef(new import_react_native10.Animated.Value(1)).current;
+  const animatedOpacity = import_react11.default.useRef(new import_react_native10.Animated.Value(1)).current;
+  const { sizeStyles, spinnerSize } = useSizesStyles(size);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const variantStyles = useVariantSizesStyles(themeColor, variant, elevation);
+  const { textColor } = useTextStyles(themeColor, variant);
+  const handlePressIn = (event) => {
+    if (!isDisabled && !isLoading) {
+      runPressInAnimation(animatedScale, animatedOpacity);
+    }
+    onPressIn?.(event);
+  };
+  const handlePressOut = (event) => {
+    if (!isDisabled && !isLoading) {
+      runPressOutAnimation(animatedScale, animatedOpacity);
+    }
+    onPressOut?.(event);
+  };
+  const spinner = /* @__PURE__ */ import_react11.default.createElement(
+    ActivityIndicator,
+    {
+      variant: "circular",
+      themeColor: variant === "solid" ? void 0 : themeColor,
+      color: variant === "solid" ? textColor : void 0,
+      size: spinnerSize
+    }
+  );
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: [fullWidth && styles2.fullWidth, customAppearance?.container] }, /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native10.Pressable,
+    {
+      onPress: isDisabled || isLoading ? void 0 : onPress,
+      onLongPress: isDisabled || isLoading ? void 0 : onLongPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      disabled: isDisabled || isLoading
+    },
+    /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native10.Animated.View,
+      {
+        style: [
+          styles2.button,
+          sizeStyles,
+          radiusStyles,
+          variantStyles,
+          fullWidth && styles2.fullWidth,
+          isDisabled && styles2.disabled,
+          {
+            transform: [{ scale: animatedScale }],
+            opacity: animatedOpacity
+          },
+          customAppearance?.button
+        ]
+      },
+      /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: styles2.contentContainer }, startContent && !isLoading && spinnerPlacement !== "start" && /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: styles2.startContent }, startContent), isLoading && spinnerPlacement === "start" && /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: styles2.spinner }, spinner), /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native10.Text,
+        {
+          style: [
+            styles2.text,
+            { fontSize: sizeStyles.fontSize, color: textColor },
+            isDisabled && styles2.disabledText,
+            customAppearance?.text
+          ]
+        },
+        children
+      ), isLoading && spinnerPlacement === "end" && /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: styles2.spinner }, spinner), endContent && !isLoading && spinnerPlacement !== "end" && /* @__PURE__ */ import_react11.default.createElement(import_react_native10.View, { style: styles2.endContent }, endContent))
+    )
+  ));
+};
+
+// src/components/button/icon-button.tsx
+var import_react13 = __toESM(require("react"), 1);
+var import_react_native12 = require("react-native");
+
+// src/components/button/icon-button.style.ts
+var import_react_native11 = require("react-native");
+var iconButtonStyles = import_react_native11.StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: 1
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/button/icon-button.hook.ts
+var import_react12 = require("react");
+
+// src/components/drawer/drawer.tsx
+var import_react15 = __toESM(require("react"), 1);
+var import_react_native14 = require("react-native");
+
+// src/components/drawer/drawer.hook.ts
+var import_react14 = require("react");
+var import_core8 = require("@xaui/core");
+var useDrawerStyles = (themeColor, position, width, height) => {
+  const theme = useXUITheme();
+  return (0, import_react14.useMemo)(() => {
+    const safeThemeColor = (0, import_core8.getSafeThemeColor)(themeColor);
+    const colorScheme = theme.colors[safeThemeColor];
+    const isDefaultThemeColor = safeThemeColor === "default";
+    const defaultBackgroundColor = theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF";
+    const backgroundColor = isDefaultThemeColor ? defaultBackgroundColor : colorScheme.background;
+    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 import_react_native13 = require("react-native");
+var styles3 = import_react_native13.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] = (0, import_react15.useState)(false);
+  const [isModalVisible, setIsModalVisible] = (0, import_react15.useState)(false);
+  const isModalMountedRef = (0, import_react15.useRef)(false);
+  const animationRef = (0, import_react15.useRef)(null);
+  const size = position === "left" || position === "right" ? width : height;
+  const initialTranslateValues = (0, import_react15.useMemo)(
+    () => getTranslateValue(position, size),
+    [position, size]
+  );
+  const translateX = (0, import_react15.useRef)(new import_react_native14.Animated.Value(initialTranslateValues.x)).current;
+  const translateY = (0, import_react15.useRef)(new import_react_native14.Animated.Value(initialTranslateValues.y)).current;
+  const overlayOpacity = (0, import_react15.useRef)(new import_react_native14.Animated.Value(0)).current;
+  const containerStyle = useDrawerStyles(themeColor, position, width, height);
+  const positionStyle = position === "left" ? styles3.drawerLeft : position === "right" ? styles3.drawerRight : position === "top" ? styles3.drawerTop : styles3.drawerBottom;
+  (0, import_react15.useEffect)(() => {
+    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 = import_react_native14.Animated.parallel([
+        import_react_native14.Animated.timing(translateX, {
+          toValue: 0,
+          duration: DRAWER_ANIMATION_DURATION,
+          easing: import_react_native14.Easing.out(import_react_native14.Easing.cubic),
+          useNativeDriver: true
+        }),
+        import_react_native14.Animated.timing(translateY, {
+          toValue: 0,
+          duration: DRAWER_ANIMATION_DURATION,
+          easing: import_react_native14.Easing.out(import_react_native14.Easing.cubic),
+          useNativeDriver: true
+        }),
+        import_react_native14.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 = import_react_native14.Animated.parallel([
+      import_react_native14.Animated.timing(translateX, {
+        toValue: translateValues.x,
+        duration: DRAWER_ANIMATION_DURATION,
+        easing: import_react_native14.Easing.in(import_react_native14.Easing.cubic),
+        useNativeDriver: true
+      }),
+      import_react_native14.Animated.timing(translateY, {
+        toValue: translateValues.y,
+        duration: DRAWER_ANIMATION_DURATION,
+        easing: import_react_native14.Easing.in(import_react_native14.Easing.cubic),
+        useNativeDriver: true
+      }),
+      import_react_native14.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__ */ import_react15.default.createElement(
+    import_react_native14.Modal,
+    {
+      transparent: true,
+      visible: isModalVisible,
+      animationType: "none",
+      onRequestClose: onClose
+    },
+    /* @__PURE__ */ import_react15.default.createElement(import_react_native14.View, { style: { flex: 1 } }, showOverlay && /* @__PURE__ */ import_react15.default.createElement(import_react_native14.Pressable, { onPress: onClose, style: { flex: 1 } }, /* @__PURE__ */ import_react15.default.createElement(import_react_native14.Animated.View, { style: [styles3.overlay, { opacity: overlayOpacity }] })), /* @__PURE__ */ import_react15.default.createElement(
+      import_react_native14.Animated.View,
+      {
+        style: [
+          styles3.drawerContainer,
+          positionStyle,
+          containerStyle,
+          {
+            transform: [{ translateX }, { translateY }]
+          },
+          customStyle
+        ]
+      },
+      children
+    ))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Drawer
+});