@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/stepper/index.d.ts

@@ -1,137 +0,0 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Size } from '@xaui/core/types';
-
-type StepperDirection = 'horizontal' | 'vertical';
-type StepperLineDisplayMode = 'progress' | 'all';
-type StepperSize = Exclude<Size, 'xs'>;
-type StepperItemIndicatorState = {
-    index: number;
-    isActive: boolean;
-    isCompleted: boolean;
-    isLocked: boolean;
-    isDisabled: boolean;
-};
-type StepperCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    itemContainer?: StyleProp<ViewStyle>;
-    line?: StyleProp<ViewStyle>;
-    activeLine?: StyleProp<ViewStyle>;
-};
-type StepperItemCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    indicator?: StyleProp<ViewStyle>;
-    activeIndicator?: StyleProp<ViewStyle>;
-    completedIndicator?: StyleProp<ViewStyle>;
-    lockedIndicator?: StyleProp<ViewStyle>;
-    title?: StyleProp<TextStyle>;
-    description?: StyleProp<TextStyle>;
-};
-type StepperProps = {
-    /**
-     * StepperItem children.
-     */
-    children: ReactNode;
-    /**
-     * Direction of the stepper layout.
-     * @default 'horizontal'
-     */
-    direction?: StepperDirection;
-    /**
-     * Whether connector lines between steps are shown.
-     * @default true
-     */
-    showLines?: boolean;
-    /**
-     * Controls connector line visibility.
-     * - `progress`: only progress to current step is shown.
-     * - `all`: all connectors are shown with progress highlight.
-     * @default 'progress'
-     */
-    lineDisplayMode?: StepperLineDisplayMode;
-    /**
-     * Controlled active step key.
-     */
-    activeKey?: string;
-    /**
-     * Uncontrolled default active step key.
-     */
-    defaultActiveKey?: string;
-    /**
-     * Callback fired when active step changes.
-     */
-    onStepChange?: (key: string) => void;
-    /**
-     * Shared theme color.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Shared stepper size.
-     * @default 'md'
-     */
-    size?: StepperSize;
-    /**
-     * Whether all steps are disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Stepper container style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom appearance styles.
-     */
-    customAppearance?: StepperCustomAppearance;
-};
-type StepperItemProps = {
-    /**
-     * Unique key for this step.
-     */
-    itemKey: string;
-    /**
-     * Main title/label.
-     */
-    title?: ReactNode;
-    /**
-     * Optional secondary description.
-     */
-    description?: ReactNode;
-    /**
-     * Custom indicator content or indicator render function.
-     */
-    indicator?: ReactNode | ((state: StepperItemIndicatorState) => ReactNode);
-    /**
-     * Locks this step from interaction.
-     * @default false
-     */
-    isLocked?: boolean;
-    /**
-     * Disables this step from interaction.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Additional content rendered below title/description.
-     */
-    children?: ReactNode;
-    /**
-     * Callback fired when this item is pressed.
-     */
-    onPress?: (itemKey: string) => void;
-    /**
-     * Custom style for this item.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Custom appearance styles.
-     */
-    customAppearance?: StepperItemCustomAppearance;
-};
-
-declare const Stepper: React.FC<StepperProps>;
-
-declare const StepperItem: React.FC<StepperItemProps>;
-
-export { Stepper, type StepperDirection, StepperItem, type StepperItemIndicatorState, type StepperItemProps, type StepperLineDisplayMode, type StepperProps, type StepperSize };

package/dist/stepper/index.js

@@ -1,550 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/stepper/stepper.tsx
-import React, { useMemo, useState } from "react";
-import { View } from "react-native";
-
-// src/components/stepper/stepper-context.ts
-import { createContext, useContext } from "react";
-var StepperContext = createContext(
-  void 0
-);
-var useStepperContext = () => useContext(StepperContext);
-
-// src/components/stepper/stepper.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    width: "100%"
-  },
-  horizontalContainer: {
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  verticalContainer: {
-    flexDirection: "column"
-  },
-  horizontalItem: {
-    flex: 1,
-    alignItems: "center",
-    minWidth: 0
-  },
-  verticalItem: {
-    width: "100%"
-  },
-  horizontalTopRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    width: "100%"
-  },
-  verticalRow: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    width: "100%"
-  },
-  line: {
-    flex: 1,
-    borderRadius: 99,
-    overflow: "hidden"
-  },
-  lineProgressWrap: {
-    width: "100%",
-    height: "100%",
-    overflow: "hidden"
-  },
-  lineProgressHorizontal: {
-    alignItems: "flex-start"
-  },
-  lineProgressVertical: {
-    justifyContent: "flex-start"
-  },
-  lineProgress: {
-    width: "100%",
-    height: "100%",
-    borderRadius: 99
-  },
-  verticalLineWrap: {
-    alignItems: "center",
-    width: "100%",
-    flex: 1
-  },
-  indicator: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  locked: {
-    opacity: 0.75
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  horizontalContent: {
-    alignItems: "center",
-    width: "100%"
-  },
-  verticalContent: {
-    flex: 1
-  },
-  title: {
-    textAlign: "center",
-    fontWeight: "600"
-  },
-  titleVertical: {
-    textAlign: "left"
-  },
-  description: {
-    textAlign: "center",
-    fontWeight: "400"
-  },
-  descriptionVertical: {
-    textAlign: "left"
-  }
-});
-
-// src/components/stepper/stepper.tsx
-var Stepper = ({
-  children,
-  direction = "horizontal",
-  showLines = true,
-  lineDisplayMode = "progress",
-  activeKey,
-  defaultActiveKey,
-  onStepChange,
-  themeColor = "primary",
-  size = "md",
-  isDisabled = false,
-  style,
-  customAppearance
-}) => {
-  const items = React.Children.toArray(children);
-  const keys = useMemo(
-    () => items.map((child) => {
-      if (!React.isValidElement(child)) return void 0;
-      return child.props.itemKey;
-    }).filter((key) => typeof key === "string"),
-    [items]
-  );
-  const [internalActiveKey, setInternalActiveKey] = useState(
-    defaultActiveKey ?? keys[0]
-  );
-  const isControlled = typeof activeKey === "string";
-  const resolvedActiveKey = isControlled ? activeKey : internalActiveKey;
-  const activeIndex = resolvedActiveKey === void 0 ? -1 : keys.indexOf(resolvedActiveKey);
-  const handleStepChange = (key) => {
-    if (!isControlled) {
-      setInternalActiveKey(key);
-    }
-    onStepChange?.(key);
-  };
-  const contextValue = useMemo(
-    () => ({
-      activeKey: resolvedActiveKey,
-      activeIndex,
-      keys,
-      direction,
-      showLines,
-      lineDisplayMode,
-      isDisabled,
-      themeColor,
-      size,
-      customAppearance,
-      onStepChange: handleStepChange
-    }),
-    [
-      resolvedActiveKey,
-      activeIndex,
-      keys,
-      direction,
-      showLines,
-      lineDisplayMode,
-      isDisabled,
-      themeColor,
-      size,
-      customAppearance
-    ]
-  );
-  return /* @__PURE__ */ React.createElement(StepperContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.container,
-        direction === "horizontal" ? styles.horizontalContainer : styles.verticalContainer,
-        style,
-        customAppearance?.container
-      ]
-    },
-    children
-  ));
-};
-
-// src/components/stepper/stepper-item.tsx
-import React2, { useEffect, useMemo as useMemo3, useRef } from "react";
-import { Animated, Pressable, Text, View as View2 } from "react-native";
-import { CheckmarkIcon, LockClosedIcon } from "@xaui/icons";
-
-// src/components/stepper/stepper.hook.ts
-import { useMemo as useMemo2 } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-var sizeMap = {
-  sm: {
-    indicatorSize: 22,
-    indicatorBorderWidth: 1.5,
-    titleFontSize: 13,
-    descriptionFontSize: 11,
-    horizontalSpacing: 8,
-    verticalSpacing: 6,
-    verticalGap: 16,
-    lineThickness: 2
-  },
-  md: {
-    indicatorSize: 26,
-    indicatorBorderWidth: 2,
-    titleFontSize: 14,
-    descriptionFontSize: 12,
-    horizontalSpacing: 10,
-    verticalSpacing: 8,
-    verticalGap: 18,
-    lineThickness: 2
-  },
-  lg: {
-    indicatorSize: 30,
-    indicatorBorderWidth: 2,
-    titleFontSize: 15,
-    descriptionFontSize: 13,
-    horizontalSpacing: 12,
-    verticalSpacing: 10,
-    verticalGap: 20,
-    lineThickness: 3
-  }
-};
-var useStepperSizeStyles = (size) => {
-  return useMemo2(() => sizeMap[size], [size]);
-};
-var useStepperColors = (themeColor) => {
-  const theme = useXUITheme();
-  const scheme = theme.colors[getSafeThemeColor(themeColor)];
-  return useMemo2(
-    () => ({
-      activeIndicatorBackground: scheme.main,
-      activeIndicatorBorder: scheme.main,
-      activeIndicatorText: scheme.onMain,
-      completedIndicatorBackground: withOpacity(scheme.main, 0.2),
-      completedIndicatorBorder: scheme.main,
-      completedIndicatorText: scheme.main,
-      lockedIndicatorBackground: withOpacity(theme.colors.foreground, 0.08),
-      lockedIndicatorBorder: withOpacity(theme.colors.foreground, 0.22),
-      lockedIndicatorText: withOpacity(theme.colors.foreground, 0.42),
-      inactiveIndicatorBackground: theme.colors.background,
-      inactiveIndicatorBorder: withOpacity(theme.colors.foreground, 0.22),
-      inactiveIndicatorText: withOpacity(theme.colors.foreground, 0.72),
-      title: theme.colors.foreground,
-      description: withOpacity(theme.colors.foreground, 0.72),
-      line: withOpacity(theme.colors.foreground, 0.16),
-      activeLine: scheme.main
-    }),
-    [scheme, theme.colors.background, theme.colors.foreground]
-  );
-};
-
-// src/components/stepper/stepper-item.tsx
-var isStringOrNumber = (value) => typeof value === "string" || typeof value === "number";
-var StepperItem = ({
-  itemKey,
-  title,
-  description,
-  indicator,
-  isLocked = false,
-  isDisabled = false,
-  children,
-  onPress,
-  style,
-  customAppearance
-}) => {
-  const context = useStepperContext();
-  const direction = context?.direction ?? "horizontal";
-  const showLines = context?.showLines ?? true;
-  const lineDisplayMode = context?.lineDisplayMode ?? "progress";
-  const groupDisabled = context?.isDisabled ?? false;
-  const size = context?.size ?? "md";
-  const themeColor = context?.themeColor ?? "primary";
-  const sizeStyles = useStepperSizeStyles(size);
-  const colors = useStepperColors(themeColor);
-  const index = context?.keys.indexOf(itemKey) ?? -1;
-  const isActive = context?.activeKey === itemKey;
-  const hasActiveStep = (context?.activeIndex ?? -1) >= 0;
-  const isCompleted = hasActiveStep && index >= 0 && index < (context?.activeIndex ?? -1);
-  const isLast = index === (context?.keys.length ?? 0) - 1;
-  const lineTargetProgress = isCompleted ? 1 : 0;
-  const lineProgress = useRef(new Animated.Value(lineTargetProgress)).current;
-  const disabled = groupDisabled || isDisabled;
-  const blocked = disabled || isLocked;
-  const indicatorState = {
-    index: Math.max(index, 0),
-    isActive,
-    isCompleted,
-    isLocked,
-    isDisabled: disabled
-  };
-  const indicatorNode = useMemo3(() => {
-    if (typeof indicator === "function") {
-      return indicator(indicatorState);
-    }
-    if (indicator !== void 0) {
-      return indicator;
-    }
-    const iconSize = Math.max(12, Math.floor(sizeStyles.indicatorSize * 0.54));
-    if (isLocked) {
-      return /* @__PURE__ */ React2.createElement(
-        LockClosedIcon,
-        {
-          key: `lock-${itemKey}-${isLocked ? "on" : "off"}`,
-          size: iconSize,
-          color: colors.lockedIndicatorText,
-          isAnimated: true
-        }
-      );
-    }
-    if (isCompleted) {
-      return /* @__PURE__ */ React2.createElement(
-        CheckmarkIcon,
-        {
-          key: `done-${itemKey}-${isCompleted ? "on" : "off"}`,
-          size: iconSize,
-          color: colors.completedIndicatorText,
-          isAnimated: true
-        }
-      );
-    }
-    return String(indicatorState.index + 1);
-  }, [
-    indicator,
-    indicatorState,
-    sizeStyles.indicatorSize,
-    isLocked,
-    isCompleted,
-    itemKey,
-    colors
-  ]);
-  useEffect(() => {
-    Animated.timing(lineProgress, {
-      toValue: lineTargetProgress,
-      duration: 240,
-      useNativeDriver: true
-    }).start();
-  }, [lineProgress, lineTargetProgress]);
-  const indicatorText = isStringOrNumber(indicatorNode) ? /* @__PURE__ */ React2.createElement(
-    Text,
-    {
-      style: {
-        color: isLocked ? colors.lockedIndicatorText : isActive ? colors.activeIndicatorText : isCompleted ? colors.completedIndicatorText : colors.inactiveIndicatorText,
-        fontSize: sizeStyles.titleFontSize,
-        fontWeight: "700"
-      }
-    },
-    indicatorNode
-  ) : indicatorNode;
-  const lineStyle = [
-    styles.line,
-    direction === "horizontal" ? {
-      height: sizeStyles.lineThickness,
-      marginHorizontal: sizeStyles.horizontalSpacing
-    } : {
-      width: sizeStyles.lineThickness,
-      marginVertical: sizeStyles.verticalSpacing,
-      minHeight: sizeStyles.verticalGap
-    },
-    {
-      backgroundColor: lineDisplayMode === "all" ? colors.line : "transparent"
-    },
-    context?.customAppearance?.line
-  ];
-  return /* @__PURE__ */ React2.createElement(
-    Pressable,
-    {
-      onPress: () => {
-        if (blocked) return;
-        context?.onStepChange?.(itemKey);
-        onPress?.(itemKey);
-      },
-      disabled: blocked,
-      accessibilityRole: "tab",
-      accessibilityState: { selected: !!isActive, disabled: blocked },
-      style: [
-        direction === "horizontal" ? styles.horizontalItem : styles.verticalItem,
-        blocked && (isLocked ? styles.locked : styles.disabled),
-        style,
-        customAppearance?.container,
-        context?.customAppearance?.itemContainer
-      ]
-    },
-    direction === "horizontal" ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(View2, { style: styles.horizontalTopRow }, /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.indicator,
-          {
-            width: sizeStyles.indicatorSize,
-            height: sizeStyles.indicatorSize,
-            borderRadius: sizeStyles.indicatorSize / 2,
-            borderWidth: sizeStyles.indicatorBorderWidth,
-            borderColor: isLocked ? colors.lockedIndicatorBorder : isActive ? colors.activeIndicatorBorder : isCompleted ? colors.completedIndicatorBorder : colors.inactiveIndicatorBorder,
-            backgroundColor: isLocked ? colors.lockedIndicatorBackground : isActive ? colors.activeIndicatorBackground : isCompleted ? colors.completedIndicatorBackground : colors.inactiveIndicatorBackground
-          },
-          customAppearance?.indicator,
-          isActive && customAppearance?.activeIndicator,
-          isCompleted && customAppearance?.completedIndicator,
-          isLocked && customAppearance?.lockedIndicator
-        ]
-      },
-      indicatorText
-    ), showLines && !isLast ? /* @__PURE__ */ React2.createElement(View2, { style: lineStyle }, /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.lineProgressWrap,
-          direction === "horizontal" ? styles.lineProgressHorizontal : styles.lineProgressVertical
-        ]
-      },
-      /* @__PURE__ */ React2.createElement(
-        Animated.View,
-        {
-          style: [
-            styles.lineProgress,
-            {
-              backgroundColor: colors.activeLine,
-              transform: [
-                direction === "horizontal" ? { scaleX: lineProgress } : { scaleY: lineProgress }
-              ]
-            },
-            context?.customAppearance?.activeLine
-          ]
-        }
-      )
-    )) : null), /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.horizontalContent,
-          { marginTop: sizeStyles.verticalSpacing }
-        ]
-      },
-      title ? /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.title,
-            {
-              fontSize: sizeStyles.titleFontSize,
-              color: colors.title
-            },
-            customAppearance?.title
-          ]
-        },
-        title
-      ) : null,
-      description ? /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.description,
-            {
-              fontSize: sizeStyles.descriptionFontSize,
-              color: colors.description,
-              marginTop: 2
-            },
-            customAppearance?.description
-          ]
-        },
-        description
-      ) : null,
-      children
-    )) : /* @__PURE__ */ React2.createElement(View2, { style: styles.verticalRow }, /* @__PURE__ */ React2.createElement(View2, { style: { alignItems: "center" } }, /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.indicator,
-          {
-            width: sizeStyles.indicatorSize,
-            height: sizeStyles.indicatorSize,
-            borderRadius: sizeStyles.indicatorSize / 2,
-            borderWidth: sizeStyles.indicatorBorderWidth,
-            borderColor: isLocked ? colors.lockedIndicatorBorder : isActive ? colors.activeIndicatorBorder : isCompleted ? colors.completedIndicatorBorder : colors.inactiveIndicatorBorder,
-            backgroundColor: isLocked ? colors.lockedIndicatorBackground : isActive ? colors.activeIndicatorBackground : isCompleted ? colors.completedIndicatorBackground : colors.inactiveIndicatorBackground
-          },
-          customAppearance?.indicator,
-          isActive && customAppearance?.activeIndicator,
-          isCompleted && customAppearance?.completedIndicator,
-          isLocked && customAppearance?.lockedIndicator
-        ]
-      },
-      indicatorText
-    ), showLines && !isLast ? /* @__PURE__ */ React2.createElement(View2, { style: styles.verticalLineWrap }, /* @__PURE__ */ React2.createElement(View2, { style: lineStyle }, /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [styles.lineProgressWrap, styles.lineProgressVertical]
-      },
-      /* @__PURE__ */ React2.createElement(
-        Animated.View,
-        {
-          style: [
-            styles.lineProgress,
-            {
-              backgroundColor: colors.activeLine,
-              transform: [{ scaleY: lineProgress }]
-            },
-            context?.customAppearance?.activeLine
-          ]
-        }
-      )
-    ))) : null), /* @__PURE__ */ React2.createElement(
-      View2,
-      {
-        style: [
-          styles.verticalContent,
-          { paddingBottom: sizeStyles.verticalGap },
-          { marginLeft: sizeStyles.horizontalSpacing }
-        ]
-      },
-      title ? /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.title,
-            styles.titleVertical,
-            {
-              fontSize: sizeStyles.titleFontSize,
-              color: colors.title
-            },
-            customAppearance?.title
-          ]
-        },
-        title
-      ) : null,
-      description ? /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.description,
-            styles.descriptionVertical,
-            {
-              fontSize: sizeStyles.descriptionFontSize,
-              color: colors.description,
-              marginTop: 2
-            },
-            customAppearance?.description
-          ]
-        },
-        description
-      ) : null,
-      children
-    ))
-  );
-};
-StepperItem.displayName = "StepperItem";
-export {
-  Stepper,
-  StepperItem
-};