@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/dialog/index.cjs

@@ -1,372 +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; }
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/dialog/dialog.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');
-var _core = require('@xaui/core');
-var _icons = require('@xaui/icons');
-
-// src/components/dialog/dialog.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  backdrop: {
-    ..._reactnative.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 = _react.createContext.call(void 0, {});
-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__ */ _react2.default.createElement(_reactnative.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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
-  const [shouldRender, setShouldRender] = _react.useState.call(void 0, isOpen);
-  const openRef = _react.useRef.call(void 0, isOpen);
-  const shouldAnimate = !disableAnimation && animationType !== "none";
-  const initialOffset = getTranslateOffset(placement, animationType);
-  const backdropOpacity = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : 0);
-  const dialogOpacity = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : 0);
-  const dialogTranslate = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 0 : initialOffset);
-  const dialogScale = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : placement === "center" ? 0.98 : 1);
-  const requestClose = _react.useCallback.call(void 0, () => {
-    _optionalChain([onOpenChange, 'optionalCall', _ => _(false)]);
-    _optionalChain([onClose, 'optionalCall', _2 => _2()]);
-  }, [onClose, onOpenChange]);
-  const handleBackdropPress = () => {
-    if (closeOnBackdropPress) {
-      requestClose();
-    }
-  };
-  const finishClosing = _react.useCallback.call(void 0, () => {
-    if (!openRef.current) {
-      setShouldRender(false);
-    }
-  }, []);
-  _react.useEffect.call(void 0, () => {
-    openRef.current = isOpen;
-  }, [isOpen]);
-  _react.useEffect.call(void 0, () => {
-    if (isOpen && !shouldRender) {
-      setShouldRender(true);
-    }
-  }, [isOpen, shouldRender]);
-  _react.useEffect.call(void 0, () => {
-    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 = _reactnativereanimated.withTiming.call(void 0, 1, {
-        duration: 210,
-        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
-      });
-      dialogOpacity.value = _reactnativereanimated.withTiming.call(void 0, 1, {
-        duration: 220,
-        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
-      });
-      dialogTranslate.value = _reactnativereanimated.withTiming.call(void 0, 0, {
-        duration: ENTER_DURATION,
-        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.cubic)
-      });
-      dialogScale.value = _reactnativereanimated.withTiming.call(void 0, 1, {
-        duration: 220,
-        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
-      });
-      return;
-    }
-    backdropOpacity.value = _reactnativereanimated.withTiming.call(void 0, 0, {
-      duration: 150,
-      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
-    });
-    dialogTranslate.value = _reactnativereanimated.withTiming.call(void 0, offset, {
-      duration: EXIT_DURATION,
-      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.cubic)
-    });
-    dialogScale.value = _reactnativereanimated.withTiming.call(void 0, placement === "center" ? 0.98 : 1, {
-      duration: 150,
-      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
-    });
-    dialogOpacity.value = _reactnativereanimated.withTiming.call(void 0, 
-      0,
-      {
-        duration: EXIT_DURATION,
-        easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
-      },
-      (finished) => {
-        if (finished) {
-          _reactnativeworklets.scheduleOnRN.call(void 0, finishClosing);
-        }
-      }
-    );
-  }, [
-    animationType,
-    backdropOpacity,
-    dialogOpacity,
-    dialogScale,
-    dialogTranslate,
-    finishClosing,
-    isOpen,
-    placement,
-    shouldAnimate,
-    shouldRender
-  ]);
-  const backdropAnimatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
-    opacity: backdropOpacity.value
-  }));
-  const dialogAnimatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
-    opacity: dialogOpacity.value,
-    transform: [{ translateY: dialogTranslate.value }, { scale: dialogScale.value }]
-  }));
-  const dialogContextValue = _react.useMemo.call(void 0, 
-    () => ({
-      onClose: requestClose,
-      customAppearance
-    }),
-    [customAppearance, requestClose]
-  );
-  if (!shouldRender) return null;
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.Modal, { visible: true, transparent: true, animationType: "none", onRequestClose: requestClose }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.root }, !hideBackdrop && /* @__PURE__ */ _react2.default.createElement(
-    AnimatedPressable,
-    {
-      style: [
-        styles.backdrop,
-        backdropStyles[backdrop],
-        backdropAnimatedStyle,
-        _optionalChain([customAppearance, 'optionalAccess', _3 => _3.backdrop])
-      ],
-      onPress: handleBackdropPress
-    }
-  ), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.placementBase, placementStyles[placement]] }, /* @__PURE__ */ _react2.default.createElement(DialogContext.Provider, { value: dialogContextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (event) => event.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnativereanimated2.default.View,
-    {
-      style: [
-        styles.dialog,
-        sizeStyles[size],
-        radiusStyles,
-        dialogAnimatedStyle,
-        {
-          backgroundColor: theme.colors.background,
-          borderColor: _core.withOpacity.call(void 0, theme.colors.foreground, 0.14)
-        },
-        theme.shadows.lg,
-        _optionalChain([customAppearance, 'optionalAccess', _4 => _4.container]),
-        style
-      ]
-    },
-    children
-  ))))));
-};
-var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
-var DialogHeader = ({
-  children,
-  isClosable = false,
-  closeButton,
-  onClose,
-  style
-}) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const { onClose: contextClose, customAppearance } = _react.useContext.call(void 0, DialogContext);
-  const close = _nullishCoalesce(onClose, () => ( contextClose));
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.header, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.header]), style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.headerContent }, resolveChildrenContent(children, [
-    styles.headerText,
-    { color: theme.colors.foreground },
-    _optionalChain([customAppearance, 'optionalAccess', _6 => _6.headerText])
-  ])), isClosable && /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: "Close dialog",
-      onPress: close,
-      style: [styles.closeButton, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.closeButton])]
-    },
-    _nullishCoalesce(closeButton, () => ( /* @__PURE__ */ _react2.default.createElement(_icons.CloseIcon, { size: 22, color: theme.colors.foreground })))
-  ));
-};
-var DialogBody = ({ children, style }) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const { customAppearance } = _react.useContext.call(void 0, DialogContext);
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.body, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.body]), style] }, resolveChildrenContent(children, [
-    styles.bodyText,
-    { color: _core.withOpacity.call(void 0, theme.colors.foreground, 0.9) },
-    _optionalChain([customAppearance, 'optionalAccess', _9 => _9.bodyText])
-  ]));
-};
-var DialogFooter = ({ children, style }) => {
-  const { customAppearance } = _react.useContext.call(void 0, DialogContext);
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.footer, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.footer]), style] }, children);
-};
-
-
-
-
-
-exports.Dialog = Dialog; exports.DialogBody = DialogBody; exports.DialogFooter = DialogFooter; exports.DialogHeader = DialogHeader;

package/dist/dialog/index.d.cts

@@ -1,151 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ModalProps, ViewStyle, TextStyle } from 'react-native';
-import { Radius } from '@xaui/core/types';
-
-type DialogSize = 'sm' | 'md' | 'lg' | 'full';
-type DialogPlacement = 'top' | 'center' | 'bottom';
-type DialogBackdrop = 'transparent' | 'blurred' | 'opaque';
-type DialogCustomAppearance = {
-    /**
-     * Custom style for the overlay backdrop.
-     */
-    backdrop?: ViewStyle;
-    /**
-     * Custom style for the dialog container.
-     */
-    container?: ViewStyle;
-    /**
-     * Custom style for the dialog header section.
-     */
-    header?: ViewStyle;
-    /**
-     * Custom style for the dialog body section.
-     */
-    body?: ViewStyle;
-    /**
-     * Custom style for the dialog footer section.
-     */
-    footer?: ViewStyle;
-    /**
-     * Custom style for the close button.
-     */
-    closeButton?: ViewStyle;
-    /**
-     * Custom style for default title text rendered in DialogHeader.
-     */
-    headerText?: TextStyle;
-    /**
-     * Custom style for default body text rendered in DialogBody.
-     */
-    bodyText?: TextStyle;
-};
-type DialogEvents = {
-    /**
-     * Called when the dialog requests to close.
-     */
-    onClose?: () => void;
-    /**
-     * Called whenever open state changes.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-};
-type DialogProps = {
-    /**
-     * Dialog content.
-     */
-    children: ReactNode;
-    /**
-     * Controls visibility.
-     * @default false
-     */
-    isOpen: boolean;
-    /**
-     * Dialog size preset.
-     * @default 'md'
-     */
-    size?: DialogSize;
-    /**
-     * Dialog placement on screen.
-     * @default 'center'
-     */
-    placement?: DialogPlacement;
-    /**
-     * Border radius of the dialog container.
-     * @default 'lg'
-     */
-    radius?: Radius;
-    /**
-     * Controls backdrop intensity.
-     * @default 'opaque'
-     */
-    backdrop?: DialogBackdrop;
-    /**
-     * If true, backdrop press closes the dialog.
-     * @default true
-     */
-    closeOnBackdropPress?: boolean;
-    /**
-     * Whether to hide the backdrop layer.
-     * @default false
-     */
-    hideBackdrop?: boolean;
-    /**
-     * Modal animation type.
-     * @default 'fade'
-     */
-    animationType?: ModalProps['animationType'];
-    /**
-     * Disable animation by forcing `animationType="none"`.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * Extra style for the dialog container.
-     */
-    style?: ViewStyle;
-    /**
-     * Custom styles per section.
-     */
-    customAppearance?: DialogCustomAppearance;
-} & DialogEvents;
-type DialogHeaderProps = {
-    children?: ReactNode;
-    /**
-     * Whether to show a close button in header.
-     * @default false
-     */
-    isClosable?: boolean;
-    /**
-     * Custom close button element.
-     */
-    closeButton?: ReactNode;
-    /**
-     * Optional close callback override for this header.
-     */
-    onClose?: () => void;
-    /**
-     * Custom style for header container.
-     */
-    style?: ViewStyle;
-};
-type DialogBodyProps = {
-    children?: ReactNode;
-    /**
-     * Custom style for body container.
-     */
-    style?: ViewStyle;
-};
-type DialogFooterProps = {
-    children?: ReactNode;
-    /**
-     * Custom style for footer container.
-     */
-    style?: ViewStyle;
-};
-
-declare const Dialog: React.FC<DialogProps>;
-declare const DialogHeader: React.FC<DialogHeaderProps>;
-declare const DialogBody: React.FC<DialogBodyProps>;
-declare const DialogFooter: React.FC<DialogFooterProps>;
-
-export { Dialog, type DialogBackdrop, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogPlacement, type DialogProps, type DialogSize };

package/dist/dialog/index.d.ts

@@ -1,151 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ModalProps, ViewStyle, TextStyle } from 'react-native';
-import { Radius } from '@xaui/core/types';
-
-type DialogSize = 'sm' | 'md' | 'lg' | 'full';
-type DialogPlacement = 'top' | 'center' | 'bottom';
-type DialogBackdrop = 'transparent' | 'blurred' | 'opaque';
-type DialogCustomAppearance = {
-    /**
-     * Custom style for the overlay backdrop.
-     */
-    backdrop?: ViewStyle;
-    /**
-     * Custom style for the dialog container.
-     */
-    container?: ViewStyle;
-    /**
-     * Custom style for the dialog header section.
-     */
-    header?: ViewStyle;
-    /**
-     * Custom style for the dialog body section.
-     */
-    body?: ViewStyle;
-    /**
-     * Custom style for the dialog footer section.
-     */
-    footer?: ViewStyle;
-    /**
-     * Custom style for the close button.
-     */
-    closeButton?: ViewStyle;
-    /**
-     * Custom style for default title text rendered in DialogHeader.
-     */
-    headerText?: TextStyle;
-    /**
-     * Custom style for default body text rendered in DialogBody.
-     */
-    bodyText?: TextStyle;
-};
-type DialogEvents = {
-    /**
-     * Called when the dialog requests to close.
-     */
-    onClose?: () => void;
-    /**
-     * Called whenever open state changes.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-};
-type DialogProps = {
-    /**
-     * Dialog content.
-     */
-    children: ReactNode;
-    /**
-     * Controls visibility.
-     * @default false
-     */
-    isOpen: boolean;
-    /**
-     * Dialog size preset.
-     * @default 'md'
-     */
-    size?: DialogSize;
-    /**
-     * Dialog placement on screen.
-     * @default 'center'
-     */
-    placement?: DialogPlacement;
-    /**
-     * Border radius of the dialog container.
-     * @default 'lg'
-     */
-    radius?: Radius;
-    /**
-     * Controls backdrop intensity.
-     * @default 'opaque'
-     */
-    backdrop?: DialogBackdrop;
-    /**
-     * If true, backdrop press closes the dialog.
-     * @default true
-     */
-    closeOnBackdropPress?: boolean;
-    /**
-     * Whether to hide the backdrop layer.
-     * @default false
-     */
-    hideBackdrop?: boolean;
-    /**
-     * Modal animation type.
-     * @default 'fade'
-     */
-    animationType?: ModalProps['animationType'];
-    /**
-     * Disable animation by forcing `animationType="none"`.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * Extra style for the dialog container.
-     */
-    style?: ViewStyle;
-    /**
-     * Custom styles per section.
-     */
-    customAppearance?: DialogCustomAppearance;
-} & DialogEvents;
-type DialogHeaderProps = {
-    children?: ReactNode;
-    /**
-     * Whether to show a close button in header.
-     * @default false
-     */
-    isClosable?: boolean;
-    /**
-     * Custom close button element.
-     */
-    closeButton?: ReactNode;
-    /**
-     * Optional close callback override for this header.
-     */
-    onClose?: () => void;
-    /**
-     * Custom style for header container.
-     */
-    style?: ViewStyle;
-};
-type DialogBodyProps = {
-    children?: ReactNode;
-    /**
-     * Custom style for body container.
-     */
-    style?: ViewStyle;
-};
-type DialogFooterProps = {
-    children?: ReactNode;
-    /**
-     * Custom style for footer container.
-     */
-    style?: ViewStyle;
-};
-
-declare const Dialog: React.FC<DialogProps>;
-declare const DialogHeader: React.FC<DialogHeaderProps>;
-declare const DialogBody: React.FC<DialogBodyProps>;
-declare const DialogFooter: React.FC<DialogFooterProps>;
-
-export { Dialog, type DialogBackdrop, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogPlacement, type DialogProps, type DialogSize };