@xaui/native 0.0.16 → 0.0.18

package/dist/segment-button/index.cjs

@@ -0,0 +1,492 @@
+"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/segment-button/index.ts
+var segment_button_exports = {};
+__export(segment_button_exports, {
+  SegmentButton: () => SegmentButton,
+  SegmentButtonItem: () => SegmentButtonItem
+});
+module.exports = __toCommonJS(segment_button_exports);
+
+// src/components/segment-button/segment-button.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/components/segment-button/segment-button.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    overflow: "hidden",
+    alignSelf: "flex-start"
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  segment: {
+    flex: 1
+  },
+  segmentInner: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  segmentContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4
+  },
+  segmentText: {
+    fontWeight: "500",
+    textAlign: "center"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  divider: {
+    width: 1,
+    alignSelf: "stretch"
+  }
+});
+
+// src/components/segment-button/segment-button.hook.ts
+var import_react6 = require("react");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var hostStyles = import_react_native2.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useBorderRadiusStyles(radius) {
+  const theme = useXUITheme();
+  const borderRadius = (0, import_react5.useMemo)(() => {
+    const radiusMap = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: radiusMap[radius] };
+  }, [radius, theme]);
+  return borderRadius;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/segment-button/segment-button.hook.ts
+var import_core2 = require("@xaui/core");
+function useSegmentSizeStyles(size) {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const sizes = {
+      xs: {
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 32,
+        fontSize: theme.fontSizes.xs,
+        iconSize: 14
+      },
+      sm: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        minHeight: 36,
+        fontSize: theme.fontSizes.sm,
+        iconSize: 16
+      },
+      md: {
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        minHeight: 40,
+        fontSize: theme.fontSizes.md,
+        iconSize: 18
+      },
+      lg: {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        minHeight: 48,
+        fontSize: theme.fontSizes.lg,
+        iconSize: 20
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+}
+function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const selectedBackgroundColor = (0, import_core2.withPaletteNumber)(colorScheme.main, 400);
+  return (0, import_react6.useMemo)(() => {
+    const variants = {
+      outlined: {
+        containerBackground: "transparent",
+        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderColor: colorScheme.main,
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      flat: {
+        containerBackground: colorScheme.background,
+        containerBorderWidth: 0,
+        containerBorderColor: "transparent",
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      light: {
+        containerBackground: "transparent",
+        containerBorderWidth: 0,
+        containerBorderColor: "transparent",
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      },
+      faded: {
+        containerBackground: `${colorScheme.background}95`,
+        containerBorderWidth: theme.borderWidth.sm,
+        containerBorderColor: `${colorScheme.main}90`,
+        selectedBackground: selectedBackgroundColor,
+        unselectedBackground: "transparent",
+        selectedTextColor: colorScheme.foreground,
+        unselectedTextColor: colorScheme.main
+      }
+    };
+    const baseStyle = variants[variant] ?? variants.outlined;
+    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
+    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
+    return {
+      ...baseStyle,
+      containerShadow: shouldApplyElevation && elevation > 0 ? shadowStyles : baseStyle.containerShadow
+    };
+  }, [variant, colorScheme, theme, elevation]);
+}
+
+// src/components/segment-button/segment-button-context.ts
+var import_react7 = require("react");
+var SegmentButtonContext = (0, import_react7.createContext)(void 0);
+var useSegmentButtonContext = () => {
+  const context = (0, import_react7.useContext)(SegmentButtonContext);
+  if (!context) {
+    throw new Error(
+      "SegmentButtonItem must be used within a SegmentButton component"
+    );
+  }
+  return context;
+};
+
+// src/components/segment-button/segment-button.tsx
+var SegmentButton = ({
+  children,
+  selected: controlledSelected,
+  defaultSelected,
+  onSelectionChange,
+  selectionMode = "single",
+  themeColor = "primary",
+  variant = "outlined",
+  size = "md",
+  radius = "full",
+  fullWidth = false,
+  isDisabled = false,
+  showCheckmark = true,
+  elevation = 0,
+  customAppearance
+}) => {
+  const isControlled = controlledSelected !== void 0;
+  const [internalSelected, setInternalSelected] = (0, import_react8.useState)(
+    () => defaultSelected ?? ""
+  );
+  const selected = isControlled ? controlledSelected : internalSelected;
+  const selectedKeys = (0, import_react8.useMemo)(() => {
+    if (Array.isArray(selected)) return selected;
+    return selected ? [selected] : [];
+  }, [selected]);
+  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const toggleItem = (0, import_react8.useCallback)(
+    (key) => {
+      let nextSelected;
+      if (selectionMode === "single") {
+        nextSelected = key;
+      } else {
+        const isCurrentlySelected = selectedKeys.includes(key);
+        if (isCurrentlySelected && selectedKeys.length > 1) {
+          nextSelected = selectedKeys.filter((k) => k !== key);
+        } else if (!isCurrentlySelected) {
+          nextSelected = [...selectedKeys, key];
+        } else {
+          return;
+        }
+      }
+      if (!isControlled) {
+        setInternalSelected(nextSelected);
+      }
+      onSelectionChange?.(nextSelected);
+    },
+    [selectionMode, selectedKeys, onSelectionChange, isControlled]
+  );
+  const contextValue = (0, import_react8.useMemo)(
+    () => ({
+      selectedKeys,
+      toggleItem,
+      themeColor,
+      variant,
+      size,
+      elevation,
+      isDisabled,
+      showCheckmark
+    }),
+    [
+      selectedKeys,
+      toggleItem,
+      themeColor,
+      variant,
+      size,
+      elevation,
+      isDisabled,
+      showCheckmark
+    ]
+  );
+  const showDivider = variant === "outlined" || variant === "faded";
+  const childrenArray = import_react8.default.Children.toArray(children);
+  const getItemKey = (child) => {
+    if (!import_react8.default.isValidElement(child)) {
+      return void 0;
+    }
+    return child.props.itemKey;
+  };
+  return /* @__PURE__ */ import_react8.default.createElement(SegmentButtonContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react8.default.createElement(
+    import_react_native5.View,
+    {
+      style: [
+        styles.container,
+        {
+          backgroundColor: variantStyles.containerBackground,
+          borderWidth: variantStyles.containerBorderWidth,
+          borderColor: variantStyles.containerBorderColor,
+          borderRadius: radiusStyles.borderRadius,
+          ...variantStyles.containerShadow
+        },
+        fullWidth && styles.fullWidth,
+        customAppearance?.container
+      ]
+    },
+    childrenArray.map((child, index) => {
+      const isLast = index === childrenArray.length - 1;
+      const childItemKey = getItemKey(child);
+      const childKey = childItemKey ?? index;
+      const isSelected = selectedKeys.includes(String(childKey));
+      const nextChildKey = !isLast ? getItemKey(childrenArray[index + 1]) : void 0;
+      const nextSelected = nextChildKey ? selectedKeys.includes(String(nextChildKey)) : false;
+      return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, { key: childKey }, child, showDivider && !isLast && !isSelected && !nextSelected && /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native5.View,
+        {
+          style: [
+            styles.divider,
+            {
+              backgroundColor: variantStyles.containerBorderColor
+            }
+          ]
+        }
+      ));
+    })
+  ));
+};
+
+// src/components/segment-button/segment-button-item.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+var import_react_native_svg = __toESM(require("react-native-svg"), 1);
+
+// src/components/segment-button/segment-button.animation.ts
+var import_react_native6 = require("react-native");
+var runCheckmarkEnterAnimation = (animatedValue) => {
+  animatedValue.setValue(0);
+  import_react_native6.Animated.timing(animatedValue, {
+    toValue: 1,
+    duration: 200,
+    useNativeDriver: true
+  }).start();
+};
+var runCheckmarkExitAnimation = (animatedValue) => {
+  import_react_native6.Animated.timing(animatedValue, {
+    toValue: 0,
+    duration: 150,
+    useNativeDriver: true
+  }).start();
+};
+
+// src/components/segment-button/segment-button-item.tsx
+var CheckIcon = ({ size, color }) => /* @__PURE__ */ import_react9.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react9.default.createElement(
+  import_react_native_svg.Path,
+  {
+    d: "M20 6L9 17l-5-5",
+    stroke: color,
+    strokeWidth: 2.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+var SegmentButtonItem = ({
+  itemKey,
+  label,
+  startContent,
+  icon,
+  endContent,
+  checkIndicator,
+  isDisabled: itemDisabled = false,
+  customAppearance
+}) => {
+  const {
+    selectedKeys,
+    toggleItem,
+    themeColor,
+    variant,
+    size,
+    elevation,
+    isDisabled: groupDisabled,
+    showCheckmark
+  } = useSegmentButtonContext();
+  const isSelected = selectedKeys.includes(itemKey);
+  const disabled = groupDisabled || itemDisabled;
+  const checkmarkAnim = (0, import_react9.useRef)(new import_react_native7.Animated.Value(isSelected ? 1 : 0)).current;
+  const prevSelected = (0, import_react9.useRef)(isSelected);
+  (0, import_react9.useEffect)(() => {
+    if (isSelected && !prevSelected.current) {
+      runCheckmarkEnterAnimation(checkmarkAnim);
+    } else if (!isSelected && prevSelected.current) {
+      runCheckmarkExitAnimation(checkmarkAnim);
+    }
+    prevSelected.current = isSelected;
+  }, [isSelected, checkmarkAnim]);
+  const sizeStyles = useSegmentSizeStyles(size);
+  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
+  const handlePress = () => {
+    if (!disabled) {
+      toggleItem(itemKey);
+    }
+  };
+  const backgroundColor = isSelected ? variantStyles.selectedBackground : variantStyles.unselectedBackground;
+  const textColor = isSelected ? variantStyles.selectedTextColor : variantStyles.unselectedTextColor;
+  const showCheck = isSelected && showCheckmark;
+  const startNode = showCheck ? checkIndicator ?? /* @__PURE__ */ import_react9.default.createElement(CheckIcon, { size: sizeStyles.iconSize, color: textColor }) : startContent ?? icon;
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native7.Pressable,
+    {
+      style: [styles.segment, disabled && styles.disabled],
+      onPress: handlePress,
+      disabled
+    },
+    /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native7.View,
+      {
+        style: [
+          styles.segmentInner,
+          {
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            paddingVertical: sizeStyles.paddingVertical,
+            minHeight: sizeStyles.minHeight,
+            backgroundColor
+          },
+          isSelected ? customAppearance?.selectedSegment : customAppearance?.segment
+        ]
+      },
+      /* @__PURE__ */ import_react9.default.createElement(import_react_native7.View, { style: styles.segmentContent }, startNode && /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native7.Animated.View,
+        {
+          style: {
+            opacity: showCheck ? checkmarkAnim : 1,
+            transform: [{ scale: showCheck ? checkmarkAnim : 1 }]
+          }
+        },
+        startNode
+      ), /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native7.Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles.segmentText,
+            {
+              fontSize: sizeStyles.fontSize,
+              color: textColor
+            },
+            isSelected ? customAppearance?.selectedText : customAppearance?.text
+          ]
+        },
+        label
+      ), endContent)
+    )
+  );
+};
+SegmentButtonItem.displayName = "SegmentButtonItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentButton,
+  SegmentButtonItem
+});

package/dist/segment-button/index.d.cts

@@ -0,0 +1,141 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.cjs';
+
+type SegmentButtonVariant = 'outlined' | 'flat' | 'light' | 'faded';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+type SegmentButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SegmentButtonSelectionMode = 'single' | 'multiple';
+type SegmentButtonProps = {
+    /**
+     * SegmentButtonItem children
+     */
+    children: ReactNode;
+    /**
+     * The currently selected key(s) (controlled mode).
+     * Use a string for single-select, string array for multi-select.
+     */
+    selected?: string | string[];
+    /**
+     * Default selected key(s) for uncontrolled mode.
+     * Use a string for single-select, string array for multi-select.
+     */
+    defaultSelected?: string | string[];
+    /**
+     * Callback fired when selection changes.
+     * Returns a string for single-select mode, string array for multi-select.
+     */
+    onSelectionChange?: (selected: string | string[]) => void;
+    /**
+     * Selection mode: single or multiple
+     * @default 'single'
+     */
+    selectionMode?: SegmentButtonSelectionMode;
+    /**
+     * The theme color of the segment button
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the segment button
+     * @default 'outlined'
+     */
+    variant?: SegmentButtonVariant;
+    /**
+     * The size of the segment button
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * The border radius of the segment button
+     * @default 'full'
+     */
+    radius?: SegmentButtonRadius;
+    /**
+     * Whether the segment button should take the full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the entire segment button group is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a checkmark icon on selected segments
+     * @default true
+     */
+    showCheckmark?: boolean;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Custom styles for the outer container
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+
+declare const SegmentButton: React.FC<SegmentButtonProps>;
+
+type SegmentButtonItemCustomAppearance = {
+    /**
+     * Custom styles for the segment container
+     */
+    segment?: ViewStyle;
+    /**
+     * Custom styles for the selected segment
+     */
+    selectedSegment?: ViewStyle;
+    /**
+     * Custom styles for segment label text
+     */
+    text?: TextStyle;
+    /**
+     * Custom styles for selected segment label text
+     */
+    selectedText?: TextStyle;
+};
+type SegmentButtonItemProps = {
+    /**
+     * Unique key for the segment item
+     */
+    itemKey: string;
+    /**
+     * Label text for the segment
+     */
+    label: string;
+    /**
+     * Content to display at the start of the segment item
+     */
+    startContent?: ReactNode;
+    /**
+     * @deprecated Use `startContent` instead
+     */
+    icon?: ReactNode;
+    /**
+     * Content to display at the end of the segment item
+     */
+    endContent?: ReactNode;
+    /**
+     * Custom indicator shown when the segment item is selected
+     */
+    checkIndicator?: ReactNode;
+    /**
+     * Whether the segment item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom appearance styles for this segment item
+     */
+    customAppearance?: SegmentButtonItemCustomAppearance;
+};
+
+declare const SegmentButtonItem: React.FC<SegmentButtonItemProps>;
+
+export { type ElevationLevel, SegmentButton, SegmentButtonItem, type SegmentButtonItemProps, type SegmentButtonProps, type SegmentButtonRadius, type SegmentButtonSelectionMode, type SegmentButtonVariant };