@xaui/native 0.0.21 → 0.0.24

package/dist/stepper/index.cjs

@@ -0,0 +1,624 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/stepper/index.ts
+var stepper_exports = {};
+__export(stepper_exports, {
+  Stepper: () => Stepper,
+  StepperItem: () => StepperItem
+});
+module.exports = __toCommonJS(stepper_exports);
+
+// src/components/stepper/stepper.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+
+// src/components/stepper/stepper-context.ts
+var import_react = require("react");
+var StepperContext = (0, import_react.createContext)(
+  void 0
+);
+var useStepperContext = () => (0, import_react.useContext)(StepperContext);
+
+// src/components/stepper/stepper.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.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 = import_react2.default.Children.toArray(children);
+  const keys = (0, import_react2.useMemo)(
+    () => items.map((child) => {
+      if (!import_react2.default.isValidElement(child)) return void 0;
+      return child.props.itemKey;
+    }).filter((key) => typeof key === "string"),
+    [items]
+  );
+  const [internalActiveKey, setInternalActiveKey] = (0, import_react2.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 = (0, import_react2.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__ */ import_react2.default.createElement(StepperContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react2.default.createElement(
+    import_react_native2.View,
+    {
+      style: [
+        styles.container,
+        direction === "horizontal" ? styles.horizontalContainer : styles.verticalContainer,
+        style,
+        customAppearance?.container
+      ]
+    },
+    children
+  ));
+};
+
+// src/components/stepper/stepper-item.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+var import_icons = require("@xaui/icons");
+
+// src/components/stepper/stepper.hook.ts
+var import_react8 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_native4 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react4 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react3 = require("react");
+var PortalContext = (0, import_react3.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var hostStyles = import_react_native3.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react6.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react7 = require("react");
+var import_react_native5 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react7.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/stepper/stepper.hook.ts
+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 (0, import_react8.useMemo)(() => sizeMap[size], [size]);
+};
+var useStepperColors = (themeColor) => {
+  const theme = useXUITheme();
+  const scheme = theme.colors[(0, import_core.getSafeThemeColor)(themeColor)];
+  return (0, import_react8.useMemo)(
+    () => ({
+      activeIndicatorBackground: scheme.main,
+      activeIndicatorBorder: scheme.main,
+      activeIndicatorText: scheme.foreground,
+      completedIndicatorBackground: (0, import_core.withOpacity)(scheme.main, 0.2),
+      completedIndicatorBorder: scheme.main,
+      completedIndicatorText: scheme.main,
+      lockedIndicatorBackground: (0, import_core.withOpacity)(theme.colors.foreground, 0.08),
+      lockedIndicatorBorder: (0, import_core.withOpacity)(theme.colors.foreground, 0.22),
+      lockedIndicatorText: (0, import_core.withOpacity)(theme.colors.foreground, 0.42),
+      inactiveIndicatorBackground: theme.colors.background,
+      inactiveIndicatorBorder: (0, import_core.withOpacity)(theme.colors.foreground, 0.22),
+      inactiveIndicatorText: (0, import_core.withOpacity)(theme.colors.foreground, 0.72),
+      title: theme.colors.foreground,
+      description: (0, import_core.withOpacity)(theme.colors.foreground, 0.72),
+      line: (0, import_core.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 colors2 = 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 = (0, import_react9.useRef)(new import_react_native6.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 = (0, import_react9.useMemo)(() => {
+    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__ */ import_react9.default.createElement(
+        import_icons.LockClosedIcon,
+        {
+          key: `lock-${itemKey}-${isLocked ? "on" : "off"}`,
+          size: iconSize,
+          color: colors2.lockedIndicatorText,
+          isAnimated: true
+        }
+      );
+    }
+    if (isCompleted) {
+      return /* @__PURE__ */ import_react9.default.createElement(
+        import_icons.CheckmarkIcon,
+        {
+          key: `done-${itemKey}-${isCompleted ? "on" : "off"}`,
+          size: iconSize,
+          color: colors2.completedIndicatorText,
+          isAnimated: true
+        }
+      );
+    }
+    return String(indicatorState.index + 1);
+  }, [
+    indicator,
+    indicatorState,
+    sizeStyles.indicatorSize,
+    isLocked,
+    isCompleted,
+    itemKey,
+    colors2
+  ]);
+  (0, import_react9.useEffect)(() => {
+    import_react_native6.Animated.timing(lineProgress, {
+      toValue: lineTargetProgress,
+      duration: 240,
+      useNativeDriver: true
+    }).start();
+  }, [lineProgress, lineTargetProgress]);
+  const indicatorText = isStringOrNumber(indicatorNode) ? /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native6.Text,
+    {
+      style: {
+        color: isLocked ? colors2.lockedIndicatorText : isActive ? colors2.activeIndicatorText : isCompleted ? colors2.completedIndicatorText : colors2.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" ? colors2.line : "transparent"
+    },
+    context?.customAppearance?.line
+  ];
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native6.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__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.horizontalTopRow }, /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [
+          styles.indicator,
+          {
+            width: sizeStyles.indicatorSize,
+            height: sizeStyles.indicatorSize,
+            borderRadius: sizeStyles.indicatorSize / 2,
+            borderWidth: sizeStyles.indicatorBorderWidth,
+            borderColor: isLocked ? colors2.lockedIndicatorBorder : isActive ? colors2.activeIndicatorBorder : isCompleted ? colors2.completedIndicatorBorder : colors2.inactiveIndicatorBorder,
+            backgroundColor: isLocked ? colors2.lockedIndicatorBackground : isActive ? colors2.activeIndicatorBackground : isCompleted ? colors2.completedIndicatorBackground : colors2.inactiveIndicatorBackground
+          },
+          customAppearance?.indicator,
+          isActive && customAppearance?.activeIndicator,
+          isCompleted && customAppearance?.completedIndicator,
+          isLocked && customAppearance?.lockedIndicator
+        ]
+      },
+      indicatorText
+    ), showLines && !isLast ? /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: lineStyle }, /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [
+          styles.lineProgressWrap,
+          direction === "horizontal" ? styles.lineProgressHorizontal : styles.lineProgressVertical
+        ]
+      },
+      /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Animated.View,
+        {
+          style: [
+            styles.lineProgress,
+            {
+              backgroundColor: colors2.activeLine,
+              transform: [
+                direction === "horizontal" ? { scaleX: lineProgress } : { scaleY: lineProgress }
+              ]
+            },
+            context?.customAppearance?.activeLine
+          ]
+        }
+      )
+    )) : null), /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [
+          styles.horizontalContent,
+          { marginTop: sizeStyles.verticalSpacing }
+        ]
+      },
+      title ? /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Text,
+        {
+          style: [
+            styles.title,
+            {
+              fontSize: sizeStyles.titleFontSize,
+              color: colors2.title
+            },
+            customAppearance?.title
+          ]
+        },
+        title
+      ) : null,
+      description ? /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Text,
+        {
+          style: [
+            styles.description,
+            {
+              fontSize: sizeStyles.descriptionFontSize,
+              color: colors2.description,
+              marginTop: 2
+            },
+            customAppearance?.description
+          ]
+        },
+        description
+      ) : null,
+      children
+    )) : /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.verticalRow }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: { alignItems: "center" } }, /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [
+          styles.indicator,
+          {
+            width: sizeStyles.indicatorSize,
+            height: sizeStyles.indicatorSize,
+            borderRadius: sizeStyles.indicatorSize / 2,
+            borderWidth: sizeStyles.indicatorBorderWidth,
+            borderColor: isLocked ? colors2.lockedIndicatorBorder : isActive ? colors2.activeIndicatorBorder : isCompleted ? colors2.completedIndicatorBorder : colors2.inactiveIndicatorBorder,
+            backgroundColor: isLocked ? colors2.lockedIndicatorBackground : isActive ? colors2.activeIndicatorBackground : isCompleted ? colors2.completedIndicatorBackground : colors2.inactiveIndicatorBackground
+          },
+          customAppearance?.indicator,
+          isActive && customAppearance?.activeIndicator,
+          isCompleted && customAppearance?.completedIndicator,
+          isLocked && customAppearance?.lockedIndicator
+        ]
+      },
+      indicatorText
+    ), showLines && !isLast ? /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles.verticalLineWrap }, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: lineStyle }, /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [styles.lineProgressWrap, styles.lineProgressVertical]
+      },
+      /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Animated.View,
+        {
+          style: [
+            styles.lineProgress,
+            {
+              backgroundColor: colors2.activeLine,
+              transform: [{ scaleY: lineProgress }]
+            },
+            context?.customAppearance?.activeLine
+          ]
+        }
+      )
+    ))) : null), /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native6.View,
+      {
+        style: [
+          styles.verticalContent,
+          { paddingBottom: sizeStyles.verticalGap },
+          { marginLeft: sizeStyles.horizontalSpacing }
+        ]
+      },
+      title ? /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Text,
+        {
+          style: [
+            styles.title,
+            styles.titleVertical,
+            {
+              fontSize: sizeStyles.titleFontSize,
+              color: colors2.title
+            },
+            customAppearance?.title
+          ]
+        },
+        title
+      ) : null,
+      description ? /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native6.Text,
+        {
+          style: [
+            styles.description,
+            styles.descriptionVertical,
+            {
+              fontSize: sizeStyles.descriptionFontSize,
+              color: colors2.description,
+              marginTop: 2
+            },
+            customAppearance?.description
+          ]
+        },
+        description
+      ) : null,
+      children
+    ))
+  );
+};
+StepperItem.displayName = "StepperItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stepper,
+  StepperItem
+});