@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/alert/index.js

@@ -1,340 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/alert/alert.tsx
-import React2, {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useMemo as useMemo2,
-  useState
-} from "react";
-import { Pressable, Text, View } from "react-native";
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming
-} from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
-
-// src/components/alert/alert.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%",
-    gap: 12
-  },
-  mainWrapper: {
-    flex: 1,
-    justifyContent: "center",
-    gap: 2
-  },
-  title: {
-    fontWeight: "600"
-  },
-  description: {
-    fontWeight: "400"
-  },
-  iconWrapper: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconText: {
-    fontWeight: "600"
-  },
-  closeButton: {
-    alignSelf: "flex-start",
-    padding: 4
-  },
-  extraContent: {
-    marginTop: 4
-  }
-});
-
-// src/components/alert/alert.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-var useAlertColorScheme = (themeColor) => {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  return {
-    theme,
-    colorScheme: theme.colors[safeThemeColor],
-    isDefault: safeThemeColor === "default"
-  };
-};
-var useAlertContainerStyles = (themeColor, variant) => {
-  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const containerStyles = useMemo(() => {
-    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.container : variant === "faded" ? withOpacity(colorScheme.container, 0.75) : "transparent";
-    const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
-    const borderColor = variant === "bordered" ? withOpacity(colorScheme.main, 0.75) : variant === "faded" ? withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.25) : "transparent";
-    return {
-      backgroundColor,
-      borderColor,
-      borderWidth,
-      paddingVertical: theme.spacing.sm,
-      paddingHorizontal: theme.spacing.md
-    };
-  }, [colorScheme, isDefault, theme, variant]);
-  return containerStyles;
-};
-var useAlertIconWrapperStyles = (themeColor, variant) => {
-  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const iconWrapperStyles = useMemo(() => {
-    const backgroundColor = variant === "solid" ? withOpacity(colorScheme.onMain, 0.16) : withOpacity(isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
-    const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
-    const borderColor = withOpacity(
-      isDefault ? theme.colors.foreground : colorScheme.main,
-      0.2
-    );
-    return {
-      backgroundColor,
-      borderColor,
-      borderWidth
-    };
-  }, [colorScheme, isDefault, theme, variant]);
-  return iconWrapperStyles;
-};
-var useAlertTextStyles = (themeColor, variant) => {
-  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const textStyles = useMemo(() => {
-    const baseTextColor = variant === "solid" ? colorScheme.onMain : variant === "flat" || variant === "faded" ? isDefault ? theme.colors.foreground : colorScheme.onContainer : isDefault ? theme.colors.foreground : colorScheme.main;
-    return {
-      titleStyles: {
-        color: baseTextColor,
-        fontSize: theme.fontSizes.sm,
-        fontWeight: theme.fontWeights.semibold
-      },
-      descriptionStyles: {
-        color: withOpacity(baseTextColor, 0.75),
-        fontSize: theme.fontSizes.xs,
-        fontWeight: theme.fontWeights.normal
-      },
-      iconColor: baseTextColor,
-      closeButtonColor: baseTextColor
-    };
-  }, [colorScheme, isDefault, theme, variant]);
-  return textStyles;
-};
-
-// src/components/alert/alert-icons.tsx
-import React from "react";
-import Svg, { Circle, Line, Path } from "react-native-svg";
-function InfoIcon({ color, size }) {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ React.createElement(
-    Line,
-    {
-      x1: 12,
-      y1: 10,
-      x2: 12,
-      y2: 16,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ), /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 7, r: 1, fill: color }));
-}
-function SuccessIcon({ color, size }) {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      d: "M7 12.5L10.2 15.5L17 9",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-function WarningIcon({ color, size }) {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
-    Path,
-    {
-      d: "M12 3L22 20H2L12 3Z",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Line,
-    {
-      x1: 12,
-      y1: 9,
-      x2: 12,
-      y2: 14,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ), /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 17, r: 1, fill: color }));
-}
-function DangerIcon({ color, size }) {
-  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ React.createElement(
-    Line,
-    {
-      x1: 9,
-      y1: 9,
-      x2: 15,
-      y2: 15,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Line,
-    {
-      x1: 15,
-      y1: 9,
-      x2: 9,
-      y2: 15,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ));
-}
-
-// src/components/alert/alert.tsx
-import { CloseIcon } from "@xaui/icons";
-var iconMap = {
-  default: InfoIcon,
-  primary: InfoIcon,
-  secondary: InfoIcon,
-  tertiary: InfoIcon,
-  success: SuccessIcon,
-  warning: WarningIcon,
-  danger: DangerIcon
-};
-var Alert = ({
-  title,
-  description,
-  icon,
-  themeColor = "default",
-  variant = "flat",
-  radius = 8,
-  isClosable = false,
-  hideIcon = false,
-  closeButton,
-  isVisible,
-  style,
-  titleStyle,
-  descriptionStyle,
-  children,
-  onClose,
-  onVisibleChange
-}) => {
-  const [internalVisible, setInternalVisible] = useState(isVisible ?? true);
-  const [shouldRender, setShouldRender] = useState(isVisible ?? true);
-  const isControlled = typeof isVisible === "boolean";
-  const visible = isControlled ? isVisible : internalVisible;
-  const opacity = useSharedValue(1);
-  const scale = useSharedValue(1);
-  const containerStyles = useAlertContainerStyles(themeColor, variant);
-  const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
-  const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);
-  const finishClosing = useCallback(() => {
-    setShouldRender(false);
-    if (!isControlled) {
-      setInternalVisible(false);
-    }
-    onVisibleChange?.(false);
-    onClose?.();
-  }, [isControlled, onClose, onVisibleChange]);
-  const handleClose = useCallback(() => {
-    if (!visible) return;
-    opacity.value = withTiming(0, { duration: 250 });
-    scale.value = withTiming(0.95, { duration: 250 }, (finished) => {
-      if (finished) {
-        scheduleOnRN(finishClosing);
-      }
-    });
-  }, [finishClosing, opacity, scale, visible]);
-  useEffect(() => {
-    if (visible && !shouldRender) {
-      setShouldRender(true);
-      opacity.value = 0;
-      scale.value = 0.95;
-      opacity.value = withTiming(1, { duration: 250 });
-      scale.value = withTiming(1, { duration: 250 });
-      return;
-    }
-    if (!visible && shouldRender) {
-      handleClose();
-    }
-  }, [visible, shouldRender, opacity, scale, handleClose]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ scale: scale.value }]
-  }));
-  const IconComponent = iconMap[themeColor] ?? InfoIcon;
-  const shouldShowClose = Boolean(closeButton || isClosable || onClose);
-  const renderIcon = () => {
-    if (hideIcon) return null;
-    if (icon && isValidElement(icon)) {
-      return cloneElement(icon, { color: iconColor, size: 22 });
-    }
-    if (icon) {
-      return /* @__PURE__ */ React2.createElement(Text, { style: [styles.iconText, { color: iconColor }] }, icon);
-    }
-    return /* @__PURE__ */ React2.createElement(IconComponent, { color: iconColor, size: 22 });
-  };
-  const renderContentText = (content) => {
-    if (content === null || content === void 0) return null;
-    if (typeof content === "string" || typeof content === "number") {
-      return /* @__PURE__ */ React2.createElement(Text, { style: [styles.description, descriptionStyles, descriptionStyle] }, content);
-    }
-    return content;
-  };
-  const titleNode = useMemo2(() => {
-    if (title === null || title === void 0) return null;
-    if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ React2.createElement(Text, { style: [styles.title, titleStyles, titleStyle] }, title);
-    }
-    return title;
-  }, [title, titleStyle, titleStyles]);
-  const descriptionNode = renderContentText(description);
-  const childrenNode = renderContentText(children);
-  const closeButtonNode = useMemo2(() => {
-    if (!closeButton) return null;
-    if (!isValidElement(closeButton)) return closeButton;
-    const existingOnPress = closeButton.props.onPress;
-    return cloneElement(closeButton, {
-      onPress: (event) => {
-        existingOnPress?.(event);
-        handleClose();
-      }
-    });
-  }, [closeButton, handleClose]);
-  if (!shouldRender) return null;
-  return /* @__PURE__ */ React2.createElement(
-    Animated.View,
-    {
-      accessibilityRole: "alert",
-      style: [styles.container, containerStyles, { borderRadius: radius }, style, animatedStyle]
-    },
-    !hideIcon && /* @__PURE__ */ React2.createElement(View, { style: [styles.iconWrapper, iconWrapperStyles] }, renderIcon()),
-    /* @__PURE__ */ React2.createElement(View, { style: styles.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ React2.createElement(View, { style: styles.extraContent }, childrenNode)),
-    shouldShowClose && /* @__PURE__ */ React2.createElement(View, null, closeButtonNode ?? /* @__PURE__ */ React2.createElement(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: "Close",
-        onPress: handleClose,
-        style: styles.closeButton
-      },
-      /* @__PURE__ */ React2.createElement(CloseIcon, { size: 20, color: closeButtonColor })
-    ))
-  );
-};
-export {
-  Alert
-};

package/dist/app-bar/index.cjs

@@ -1,148 +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/app-bar/app-bar.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-var _core = require('@xaui/core');
-
-// src/components/app-bar/app-bar.hook.ts
-
-var resolveShadowStyle = (elevation, shadows) => {
-  if (elevation <= 1) {
-    return shadows.sm;
-  }
-  if (elevation <= 2) {
-    return shadows.md;
-  }
-  if (elevation <= 3) {
-    return shadows.lg;
-  }
-  return shadows.xl;
-};
-var useAppBarElevationStyles = (elevation = 0) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    if (elevation <= 0) {
-      return {};
-    }
-    return {
-      ...resolveShadowStyle(elevation, theme.shadows),
-      elevation
-    };
-  }, [elevation, theme.shadows]);
-};
-
-// src/components/app-bar/app-bar.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  },
-  floatingContainer: {
-    paddingVertical: 8
-  },
-  appBar: {
-    minHeight: 64,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 16
-  },
-  docked: {
-    width: "100%",
-    borderRadius: 0
-  },
-  floating: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    maxWidth: "97%",
-    borderRadius: 9999,
-    alignSelf: "center"
-  },
-  startContent: {
-    flexShrink: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    minWidth: 40
-  },
-  content: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 10
-  },
-  endContent: {
-    flexShrink: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: 8,
-    minWidth: 40
-  }
-});
-
-// src/components/app-bar/app-bar.tsx
-var AppBar = ({
-  variant = "docked",
-  elevation = 0,
-  themeColor = "default",
-  children,
-  style
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const elevationStyles = useAppBarElevationStyles(elevation);
-  const isFloating = variant === "floating";
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.container : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.container;
-  const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.appBar,
-        isFloating ? styles.floating : styles.docked,
-        {
-          backgroundColor,
-          borderBottomWidth: isFloating ? 0 : 1,
-          borderBottomColor
-        },
-        elevationStyles,
-        style
-      ]
-    },
-    children
-  ));
-};
-var AppBarStartContent = ({
-  children,
-  style
-}) => {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.startContent, style] }, children);
-};
-var AppBarContent = ({
-  children,
-  alignment = "center",
-  style
-}) => {
-  const alignItems = alignment === "start" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, { alignItems }, style] }, children);
-};
-var AppBarEndContent = ({
-  children,
-  style
-}) => {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.endContent, style] }, children);
-};
-
-
-
-
-
-exports.AppBar = AppBar; exports.AppBarContent = AppBarContent; exports.AppBarEndContent = AppBarEndContent; exports.AppBarStartContent = AppBarStartContent;

package/dist/app-bar/index.d.cts

@@ -1,59 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type AppBarVariant = 'docked' | 'floating';
-type AppBarProps = {
-    /**
-     * AppBar layout variant.
-     * - docked: full-width app bar
-     * - floating: rounded app bar that does not span full screen width
-     * @default 'docked'
-     */
-    variant?: AppBarVariant;
-    /**
-     * Elevation intensity.
-     * @default 0
-     */
-    elevation?: number;
-    /**
-     * Theme color used for the app bar surface.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * AppBar content.
-     */
-    children?: ReactNode;
-    /**
-     * Custom style for the app bar surface.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-type AppBarSlotProps = {
-    /**
-     * Slot content.
-     */
-    children?: ReactNode;
-    /**
-     * Custom style for this slot.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-type AppBarSlotContentAlignment = 'start' | 'center' | 'end';
-type AppBarStartContentProps = AppBarSlotProps;
-type AppBarContentProps = AppBarSlotProps & {
-    /**
-     * Horizontal alignment for content slot content.
-     * @default 'center'
-     */
-    alignment?: AppBarSlotContentAlignment;
-};
-type AppBarEndContentProps = AppBarSlotProps;
-
-declare const AppBar: React.FC<AppBarProps>;
-declare const AppBarStartContent: React.FC<AppBarStartContentProps>;
-declare const AppBarContent: React.FC<AppBarContentProps>;
-declare const AppBarEndContent: React.FC<AppBarEndContentProps>;
-
-export { AppBar, AppBarContent, type AppBarContentProps, AppBarEndContent, type AppBarEndContentProps, type AppBarProps, type AppBarSlotProps, AppBarStartContent, type AppBarStartContentProps, type AppBarVariant };

package/dist/app-bar/index.d.ts

@@ -1,59 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-type AppBarVariant = 'docked' | 'floating';
-type AppBarProps = {
-    /**
-     * AppBar layout variant.
-     * - docked: full-width app bar
-     * - floating: rounded app bar that does not span full screen width
-     * @default 'docked'
-     */
-    variant?: AppBarVariant;
-    /**
-     * Elevation intensity.
-     * @default 0
-     */
-    elevation?: number;
-    /**
-     * Theme color used for the app bar surface.
-     * @default 'default'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * AppBar content.
-     */
-    children?: ReactNode;
-    /**
-     * Custom style for the app bar surface.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-type AppBarSlotProps = {
-    /**
-     * Slot content.
-     */
-    children?: ReactNode;
-    /**
-     * Custom style for this slot.
-     */
-    style?: StyleProp<ViewStyle>;
-};
-type AppBarSlotContentAlignment = 'start' | 'center' | 'end';
-type AppBarStartContentProps = AppBarSlotProps;
-type AppBarContentProps = AppBarSlotProps & {
-    /**
-     * Horizontal alignment for content slot content.
-     * @default 'center'
-     */
-    alignment?: AppBarSlotContentAlignment;
-};
-type AppBarEndContentProps = AppBarSlotProps;
-
-declare const AppBar: React.FC<AppBarProps>;
-declare const AppBarStartContent: React.FC<AppBarStartContentProps>;
-declare const AppBarContent: React.FC<AppBarContentProps>;
-declare const AppBarEndContent: React.FC<AppBarEndContentProps>;
-
-export { AppBar, AppBarContent, type AppBarContentProps, AppBarEndContent, type AppBarEndContentProps, type AppBarProps, type AppBarSlotProps, AppBarStartContent, type AppBarStartContentProps, type AppBarVariant };