@xaui/native 0.0.31 → 0.0.33

package/dist/dialog/index.js

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

package/dist/index-DyU3sW3_.d.cts

@@ -0,0 +1,4 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
+export type { Radius as R, ThemeColor as T };

package/dist/index-DyU3sW3_.d.ts

@@ -0,0 +1,4 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
+export type { Radius as R, ThemeColor as T };

package/dist/input-trigger/index.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk2ANGPYCPcjs = require('../chunk-2ANGPYCP.cjs');
+require('../chunk-HSPTLUFA.cjs');
+require('../chunk-OQ2BLOOG.cjs');
+
+
+exports.InputTrigger = _chunk2ANGPYCPcjs.InputTrigger;

package/dist/input-trigger/index.d.cts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { I as InputTriggerProps } from '../input-trigger.type-BL70fHE9.cjs';
+export { e as InputTriggerCustomAppearance, a as InputTriggerEvents, d as InputTriggerLabelPlacement, c as InputTriggerSize, b as InputTriggerVariant } from '../input-trigger.type-BL70fHE9.cjs';
+import 'react-native';
+import '../index-DyU3sW3_.cjs';
+
+declare const InputTrigger: React.FC<InputTriggerProps>;
+
+export { InputTrigger, InputTriggerProps };

package/dist/input-trigger/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { I as InputTriggerProps } from '../input-trigger.type-BODYStHk.js';
+export { e as InputTriggerCustomAppearance, a as InputTriggerEvents, d as InputTriggerLabelPlacement, c as InputTriggerSize, b as InputTriggerVariant } from '../input-trigger.type-BODYStHk.js';
+import 'react-native';
+import '../index-DyU3sW3_.js';
+
+declare const InputTrigger: React.FC<InputTriggerProps>;
+
+export { InputTrigger, InputTriggerProps };

package/dist/input-trigger/index.js

@@ -0,0 +1,8 @@
+import {
+  InputTrigger
+} from "../chunk-E4DOPNVW.js";
+import "../chunk-DXXNBF5P.js";
+import "../chunk-LTKYHG5V.js";
+export {
+  InputTrigger
+};

package/dist/input-trigger.type-BL70fHE9.d.cts

@@ -0,0 +1,97 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from './index-DyU3sW3_.cjs';
+
+type InputTriggerVariant = 'flat' | 'faded' | 'bordered' | 'underlined';
+type InputTriggerSize = 'sm' | 'md' | 'lg';
+type InputTriggerLabelPlacement = 'outside' | 'inside';
+type InputTriggerCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    inputContainer?: StyleProp<ViewStyle>;
+    inputWrapper?: StyleProp<ViewStyle>;
+    label?: StyleProp<TextStyle>;
+    content?: StyleProp<TextStyle>;
+    helperText?: StyleProp<TextStyle>;
+};
+type InputTriggerProps = {
+    /**
+     * Value displayed inside the trigger (acts as placeholder when no value).
+     */
+    value?: ReactNode;
+    /**
+     * Placeholder text shown when no value is set.
+     */
+    placeholder?: string;
+    /**
+     * Label displayed above or inside the trigger.
+     */
+    label?: ReactNode;
+    /**
+     * Position of the label relative to the trigger.
+     * @default 'outside'
+     */
+    labelPlacement?: InputTriggerLabelPlacement;
+    /**
+     * Helper text displayed below the trigger.
+     */
+    description?: ReactNode;
+    /**
+     * Error message displayed when isInvalid is true.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Content rendered at the start of the trigger.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content rendered at the end of the trigger.
+     */
+    endContent?: ReactNode;
+    /**
+     * Theme color for focus and active states.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual style variant.
+     * @default 'flat'
+     */
+    variant?: InputTriggerVariant;
+    /**
+     * Size of the trigger.
+     * @default 'md'
+     */
+    size?: InputTriggerSize;
+    /**
+     * Border radius of the trigger.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the trigger is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the component takes the full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom style overrides for trigger parts.
+     */
+    customAppearance?: InputTriggerCustomAppearance;
+} & InputTriggerEvents;
+type InputTriggerEvents = {
+    /**
+     * Called when the trigger is pressed.
+     */
+    onPress?: () => void;
+};
+
+export type { InputTriggerProps as I, InputTriggerEvents as a, InputTriggerVariant as b, InputTriggerSize as c, InputTriggerLabelPlacement as d, InputTriggerCustomAppearance as e };

package/dist/input-trigger.type-BODYStHk.d.ts

@@ -0,0 +1,97 @@
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from './index-DyU3sW3_.js';
+
+type InputTriggerVariant = 'flat' | 'faded' | 'bordered' | 'underlined';
+type InputTriggerSize = 'sm' | 'md' | 'lg';
+type InputTriggerLabelPlacement = 'outside' | 'inside';
+type InputTriggerCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    inputContainer?: StyleProp<ViewStyle>;
+    inputWrapper?: StyleProp<ViewStyle>;
+    label?: StyleProp<TextStyle>;
+    content?: StyleProp<TextStyle>;
+    helperText?: StyleProp<TextStyle>;
+};
+type InputTriggerProps = {
+    /**
+     * Value displayed inside the trigger (acts as placeholder when no value).
+     */
+    value?: ReactNode;
+    /**
+     * Placeholder text shown when no value is set.
+     */
+    placeholder?: string;
+    /**
+     * Label displayed above or inside the trigger.
+     */
+    label?: ReactNode;
+    /**
+     * Position of the label relative to the trigger.
+     * @default 'outside'
+     */
+    labelPlacement?: InputTriggerLabelPlacement;
+    /**
+     * Helper text displayed below the trigger.
+     */
+    description?: ReactNode;
+    /**
+     * Error message displayed when isInvalid is true.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Content rendered at the start of the trigger.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content rendered at the end of the trigger.
+     */
+    endContent?: ReactNode;
+    /**
+     * Theme color for focus and active states.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual style variant.
+     * @default 'flat'
+     */
+    variant?: InputTriggerVariant;
+    /**
+     * Size of the trigger.
+     * @default 'md'
+     */
+    size?: InputTriggerSize;
+    /**
+     * Border radius of the trigger.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the trigger is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the component takes the full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom style overrides for trigger parts.
+     */
+    customAppearance?: InputTriggerCustomAppearance;
+} & InputTriggerEvents;
+type InputTriggerEvents = {
+    /**
+     * Called when the trigger is pressed.
+     */
+    onPress?: () => void;
+};
+
+export type { InputTriggerProps as I, InputTriggerEvents as a, InputTriggerVariant as b, InputTriggerSize as c, InputTriggerLabelPlacement as d, InputTriggerCustomAppearance as e };