@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/alert/index.cjs

@@ -1,340 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/alert/alert.tsx
-
-
-
-
-
-
-
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-
-
-
-var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
-var _reactnativeworklets = require('react-native-worklets');
-
-// src/components/alert/alert.style.ts
-
-var styles = _reactnative.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
-
-var _core = require('@xaui/core');
-var useAlertColorScheme = (themeColor) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  return {
-    theme,
-    colorScheme: theme.colors[safeThemeColor],
-    isDefault: safeThemeColor === "default"
-  };
-};
-var useAlertContainerStyles = (themeColor, variant) => {
-  const { theme, colorScheme, isDefault } = useAlertColorScheme(themeColor);
-  const containerStyles = _react.useMemo.call(void 0, () => {
-    const backgroundColor = variant === "solid" ? colorScheme.main : variant === "flat" ? colorScheme.container : variant === "faded" ? _core.withOpacity.call(void 0, colorScheme.container, 0.75) : "transparent";
-    const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.md : 0;
-    const borderColor = variant === "bordered" ? _core.withOpacity.call(void 0, colorScheme.main, 0.75) : variant === "faded" ? _core.withOpacity.call(void 0, 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 = _react.useMemo.call(void 0, () => {
-    const backgroundColor = variant === "solid" ? _core.withOpacity.call(void 0, colorScheme.onMain, 0.16) : _core.withOpacity.call(void 0, isDefault ? theme.colors.foreground : colorScheme.main, 0.12);
-    const borderWidth = variant === "bordered" || variant === "faded" ? theme.borderWidth.xs : 0;
-    const borderColor = _core.withOpacity.call(void 0, 
-      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 = _react.useMemo.call(void 0, () => {
-    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: _core.withOpacity.call(void 0, 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
-
-var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
-function InfoIcon({ color, size }) {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(_reactnativesvg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Line,
-    {
-      x1: 12,
-      y1: 10,
-      x2: 12,
-      y2: 16,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ), /* @__PURE__ */ _react2.default.createElement(_reactnativesvg.Circle, { cx: 12, cy: 7, r: 1, fill: color }));
-}
-function SuccessIcon({ color, size }) {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(_reactnativesvg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Path,
-    {
-      d: "M7 12.5L10.2 15.5L17 9",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-function WarningIcon({ color, size }) {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Path,
-    {
-      d: "M12 3L22 20H2L12 3Z",
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Line,
-    {
-      x1: 12,
-      y1: 9,
-      x2: 12,
-      y2: 14,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ), /* @__PURE__ */ _react2.default.createElement(_reactnativesvg.Circle, { cx: 12, cy: 17, r: 1, fill: color }));
-}
-function DangerIcon({ color, size }) {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(_reactnativesvg.Circle, { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }), /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Line,
-    {
-      x1: 9,
-      y1: 9,
-      x2: 15,
-      y2: 15,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ), /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Line,
-    {
-      x1: 15,
-      y1: 9,
-      x2: 9,
-      y2: 15,
-      stroke: color,
-      strokeWidth: 2,
-      strokeLinecap: "round"
-    }
-  ));
-}
-
-// src/components/alert/alert.tsx
-var _icons = require('@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] = _react.useState.call(void 0, _nullishCoalesce(isVisible, () => ( true)));
-  const [shouldRender, setShouldRender] = _react.useState.call(void 0, _nullishCoalesce(isVisible, () => ( true)));
-  const isControlled = typeof isVisible === "boolean";
-  const visible = isControlled ? isVisible : internalVisible;
-  const opacity = _reactnativereanimated.useSharedValue.call(void 0, 1);
-  const scale = _reactnativereanimated.useSharedValue.call(void 0, 1);
-  const containerStyles = useAlertContainerStyles(themeColor, variant);
-  const iconWrapperStyles = useAlertIconWrapperStyles(themeColor, variant);
-  const { titleStyles, descriptionStyles, iconColor, closeButtonColor } = useAlertTextStyles(themeColor, variant);
-  const finishClosing = _react.useCallback.call(void 0, () => {
-    setShouldRender(false);
-    if (!isControlled) {
-      setInternalVisible(false);
-    }
-    _optionalChain([onVisibleChange, 'optionalCall', _ => _(false)]);
-    _optionalChain([onClose, 'optionalCall', _2 => _2()]);
-  }, [isControlled, onClose, onVisibleChange]);
-  const handleClose = _react.useCallback.call(void 0, () => {
-    if (!visible) return;
-    opacity.value = _reactnativereanimated.withTiming.call(void 0, 0, { duration: 250 });
-    scale.value = _reactnativereanimated.withTiming.call(void 0, 0.95, { duration: 250 }, (finished) => {
-      if (finished) {
-        _reactnativeworklets.scheduleOnRN.call(void 0, finishClosing);
-      }
-    });
-  }, [finishClosing, opacity, scale, visible]);
-  _react.useEffect.call(void 0, () => {
-    if (visible && !shouldRender) {
-      setShouldRender(true);
-      opacity.value = 0;
-      scale.value = 0.95;
-      opacity.value = _reactnativereanimated.withTiming.call(void 0, 1, { duration: 250 });
-      scale.value = _reactnativereanimated.withTiming.call(void 0, 1, { duration: 250 });
-      return;
-    }
-    if (!visible && shouldRender) {
-      handleClose();
-    }
-  }, [visible, shouldRender, opacity, scale, handleClose]);
-  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
-    opacity: opacity.value,
-    transform: [{ scale: scale.value }]
-  }));
-  const IconComponent = _nullishCoalesce(iconMap[themeColor], () => ( InfoIcon));
-  const shouldShowClose = Boolean(closeButton || isClosable || onClose);
-  const renderIcon = () => {
-    if (hideIcon) return null;
-    if (icon && _react.isValidElement.call(void 0, icon)) {
-      return _react.cloneElement.call(void 0, icon, { color: iconColor, size: 22 });
-    }
-    if (icon) {
-      return /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.iconText, { color: iconColor }] }, icon);
-    }
-    return /* @__PURE__ */ _react2.default.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.default.createElement(_reactnative.Text, { style: [styles.description, descriptionStyles, descriptionStyle] }, content);
-    }
-    return content;
-  };
-  const titleNode = _react.useMemo.call(void 0, () => {
-    if (title === null || title === void 0) return null;
-    if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: [styles.title, titleStyles, titleStyle] }, title);
-    }
-    return title;
-  }, [title, titleStyle, titleStyles]);
-  const descriptionNode = renderContentText(description);
-  const childrenNode = renderContentText(children);
-  const closeButtonNode = _react.useMemo.call(void 0, () => {
-    if (!closeButton) return null;
-    if (!_react.isValidElement.call(void 0, closeButton)) return closeButton;
-    const existingOnPress = closeButton.props.onPress;
-    return _react.cloneElement.call(void 0, closeButton, {
-      onPress: (event) => {
-        _optionalChain([existingOnPress, 'optionalCall', _3 => _3(event)]);
-        handleClose();
-      }
-    });
-  }, [closeButton, handleClose]);
-  if (!shouldRender) return null;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnativereanimated2.default.View,
-    {
-      accessibilityRole: "alert",
-      style: [styles.container, containerStyles, { borderRadius: radius }, style, animatedStyle]
-    },
-    !hideIcon && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.iconWrapper, iconWrapperStyles] }, renderIcon()),
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.mainWrapper }, titleNode, descriptionNode, childrenNode && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.extraContent }, childrenNode)),
-    shouldShowClose && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, null, _nullishCoalesce(closeButtonNode, () => ( /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: "Close",
-        onPress: handleClose,
-        style: styles.closeButton
-      },
-      /* @__PURE__ */ _react2.default.createElement(_icons.CloseIcon, { size: 20, color: closeButtonColor })
-    ))))
-  );
-};
-
-
-exports.Alert = Alert;

package/dist/alert/index.d.cts

@@ -1,46 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-/** Visual style of the alert container. */
-type AlertVariant = 'solid' | 'bordered' | 'flat' | 'faded' | 'glass';
-type AlertEvents = {
-    /** Called when the alert finishes closing. */
-    onClose?: () => void;
-    /** Called whenever the visibility state changes. */
-    onVisibleChange?: (isVisible: boolean) => void;
-};
-type AlertProps = {
-    /** Main heading displayed inside the alert. */
-    title?: ReactNode;
-    /** Supporting text below the title. */
-    description?: ReactNode;
-    /** Custom icon element — overrides the default theme icon. */
-    icon?: ReactNode;
-    /** Color scheme applied to the alert. Defaults to `'default'`. */
-    themeColor?: ThemeColor;
-    /** Visual style variant. Defaults to `'flat'`. */
-    variant?: AlertVariant;
-    /** Border radius in pixels. Defaults to `8`. */
-    radius?: number;
-    /** Whether to display a close button. */
-    isClosable?: boolean;
-    /** Hide the leading icon. */
-    hideIcon?: boolean;
-    /** Custom element rendered as the close button. */
-    closeButton?: ReactNode;
-    /** Controls visibility externally (controlled mode). */
-    isVisible?: boolean;
-    /** Override styles for the container. */
-    style?: ViewStyle;
-    /** Override styles for the title text. */
-    titleStyle?: TextStyle;
-    /** Override styles for the description text. */
-    descriptionStyle?: TextStyle;
-    /** Additional content rendered below the description. */
-    children?: ReactNode;
-} & AlertEvents;
-
-declare const Alert: React.FC<AlertProps>;
-
-export { Alert, type AlertProps, type AlertVariant };

package/dist/alert/index.d.ts

@@ -1,46 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor } from '@xaui/core/types';
-
-/** Visual style of the alert container. */
-type AlertVariant = 'solid' | 'bordered' | 'flat' | 'faded' | 'glass';
-type AlertEvents = {
-    /** Called when the alert finishes closing. */
-    onClose?: () => void;
-    /** Called whenever the visibility state changes. */
-    onVisibleChange?: (isVisible: boolean) => void;
-};
-type AlertProps = {
-    /** Main heading displayed inside the alert. */
-    title?: ReactNode;
-    /** Supporting text below the title. */
-    description?: ReactNode;
-    /** Custom icon element — overrides the default theme icon. */
-    icon?: ReactNode;
-    /** Color scheme applied to the alert. Defaults to `'default'`. */
-    themeColor?: ThemeColor;
-    /** Visual style variant. Defaults to `'flat'`. */
-    variant?: AlertVariant;
-    /** Border radius in pixels. Defaults to `8`. */
-    radius?: number;
-    /** Whether to display a close button. */
-    isClosable?: boolean;
-    /** Hide the leading icon. */
-    hideIcon?: boolean;
-    /** Custom element rendered as the close button. */
-    closeButton?: ReactNode;
-    /** Controls visibility externally (controlled mode). */
-    isVisible?: boolean;
-    /** Override styles for the container. */
-    style?: ViewStyle;
-    /** Override styles for the title text. */
-    titleStyle?: TextStyle;
-    /** Override styles for the description text. */
-    descriptionStyle?: TextStyle;
-    /** Additional content rendered below the description. */
-    children?: ReactNode;
-} & AlertEvents;
-
-declare const Alert: React.FC<AlertProps>;
-
-export { Alert, type AlertProps, type AlertVariant };