@xaui/native 0.0.21 → 0.0.24

package/dist/tabs/index.cjs

@@ -0,0 +1,523 @@
+"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/tabs/index.ts
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tab: () => Tab,
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(tabs_exports);
+
+// src/components/tabs/tabs.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = 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_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+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/components/tabs/tabs.animation.ts
+var import_react_native4 = require("react-native");
+var runTabsCursorAnimation = (translateX, width, scaleX, toX, toWidth, duration) => {
+  scaleX.setValue(0.75);
+  import_react_native4.Animated.parallel([
+    import_react_native4.Animated.timing(translateX, {
+      toValue: toX,
+      duration,
+      easing: import_react_native4.Easing.inOut(import_react_native4.Easing.quad),
+      useNativeDriver: false
+    }),
+    import_react_native4.Animated.timing(width, {
+      toValue: toWidth,
+      duration,
+      easing: import_react_native4.Easing.inOut(import_react_native4.Easing.quad),
+      useNativeDriver: false
+    }),
+    import_react_native4.Animated.timing(scaleX, {
+      toValue: 1,
+      duration,
+      easing: import_react_native4.Easing.out(import_react_native4.Easing.quad),
+      useNativeDriver: false
+    })
+  ]).start();
+};
+
+// src/components/tabs/tabs.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/tabs/tabs.hook.ts
+function useTabsSizeStyles(size) {
+  const theme = useXUITheme();
+  return (0, import_react6.useMemo)(() => {
+    const sizes = {
+      xs: {
+        minHeight: 32,
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.xs
+      },
+      sm: {
+        minHeight: 36,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.sm
+      },
+      md: {
+        minHeight: 42,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        fontSize: theme.fontSizes.md
+      },
+      lg: {
+        minHeight: 50,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md,
+        fontSize: theme.fontSizes.lg
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+}
+function useTabsVariantStyles(color, variant) {
+  const theme = useXUITheme();
+  const safeColor = (0, import_core.getSafeThemeColor)(color);
+  const palette = theme.colors[safeColor];
+  const cursorSolidColor = (0, import_core.withPaletteNumber)(palette.main, 400);
+  return (0, import_react6.useMemo)(() => {
+    const variants = {
+      solid: {
+        listBackgroundColor: palette.background,
+        listBorderColor: "transparent",
+        listBorderWidth: 0,
+        listPaddingHorizontal: 4,
+        cursorColor: cursorSolidColor,
+        textColor: palette.main,
+        selectedTextColor: palette.foreground,
+        cursorHeight: void 0,
+        cursorTop: 4,
+        cursorBottom: 4,
+        cursorShadow: true
+      },
+      bordered: {
+        listBackgroundColor: "transparent",
+        listBorderColor: `${palette.main}30`,
+        listBorderWidth: theme.borderWidth.md,
+        listPaddingHorizontal: 0,
+        cursorColor: cursorSolidColor,
+        textColor: palette.main,
+        selectedTextColor: palette.foreground,
+        cursorHeight: void 0,
+        cursorTop: 0,
+        cursorBottom: 0,
+        cursorShadow: false
+      },
+      light: {
+        listBackgroundColor: "transparent",
+        listBorderColor: "transparent",
+        listBorderWidth: 0,
+        listPaddingHorizontal: 0,
+        cursorColor: `${cursorSolidColor}25`,
+        textColor: palette.main,
+        selectedTextColor: palette.main,
+        cursorHeight: void 0,
+        cursorTop: 0,
+        cursorBottom: 0,
+        cursorShadow: false
+      },
+      underlined: {
+        listBackgroundColor: "transparent",
+        listBorderColor: `${palette.main}45`,
+        listBorderWidth: 0,
+        listPaddingHorizontal: 0,
+        cursorColor: cursorSolidColor,
+        textColor: `${palette.main}B0`,
+        selectedTextColor: palette.main,
+        cursorHeight: 2,
+        cursorTop: void 0,
+        cursorBottom: -2,
+        cursorShadow: false
+      }
+    };
+    return variants[variant];
+  }, [cursorSolidColor, palette, theme.borderWidth.md, variant]);
+}
+
+// src/components/tabs/tabs.style.ts
+var import_react_native5 = require("react-native");
+var styles = import_react_native5.StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  list: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "stretch",
+    alignSelf: "flex-start"
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  tabPressable: {
+    flex: 1,
+    zIndex: 1
+  },
+  tab: {
+    minWidth: 64,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: 6
+  },
+  text: {
+    textAlign: "center",
+    fontWeight: "500"
+  },
+  cursor: {
+    position: "absolute",
+    left: 0
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  content: {
+    marginTop: 12
+  }
+});
+
+// src/components/tabs/tabs.tsx
+function isTabDisabled(item, disabledKeys, isDisabled) {
+  return isDisabled || item.isDisabled === true || disabledKeys?.includes(item.key) === true;
+}
+function getFallbackKey(items, disabledKeys, isDisabled) {
+  if (isDisabled) return "";
+  const firstEnabled = items.find((item) => !isTabDisabled(item, disabledKeys, false));
+  return firstEnabled?.key ?? "";
+}
+var Tab = () => null;
+Tab.displayName = "Tab";
+function toTabItems(children) {
+  return import_react7.default.Children.toArray(children).flatMap((child) => {
+    if (!import_react7.default.isValidElement(child) || child.type !== Tab) {
+      return [];
+    }
+    if (child.key == null) {
+      return [];
+    }
+    return [
+      {
+        key: String(child.key),
+        title: child.props.title,
+        startContent: child.props.startContent,
+        endContent: child.props.endContent,
+        isDisabled: child.props.isDisabled,
+        content: child.props.children
+      }
+    ];
+  });
+}
+var Tabs = ({
+  selectedKey: controlledSelectedKey,
+  defaultSelectedKey,
+  onSelectionChange,
+  disabledKeys,
+  color = "primary",
+  variant = "solid",
+  size = "md",
+  radius = "full",
+  fullWidth = false,
+  isDisabled = false,
+  disableAnimation = false,
+  animationDuration = 220,
+  renderTab,
+  children,
+  content,
+  customAppearance
+}) => {
+  const items = (0, import_react7.useMemo)(() => toTabItems(children), [children]);
+  const isControlled = controlledSelectedKey !== void 0;
+  const initialKey = (0, import_react7.useMemo)(() => {
+    if (defaultSelectedKey) return defaultSelectedKey;
+    return getFallbackKey(items, disabledKeys, isDisabled);
+  }, [defaultSelectedKey, disabledKeys, isDisabled, items]);
+  const [internalSelectedKey, setInternalSelectedKey] = (0, import_react7.useState)(initialKey);
+  const [layouts, setLayouts] = (0, import_react7.useState)({});
+  const [listWidth, setListWidth] = (0, import_react7.useState)(0);
+  const selectedKey = (isControlled ? controlledSelectedKey : internalSelectedKey) ?? "";
+  const selectedItem = (0, import_react7.useMemo)(
+    () => items.find((item) => item.key === selectedKey),
+    [items, selectedKey]
+  );
+  const sizeStyles = useTabsSizeStyles(size);
+  const variantStyles = useTabsVariantStyles(color, variant);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const cursorTranslateX = (0, import_react7.useRef)(new import_react_native6.Animated.Value(0)).current;
+  const cursorWidth = (0, import_react7.useRef)(new import_react_native6.Animated.Value(0)).current;
+  const cursorScaleX = (0, import_react7.useRef)(new import_react_native6.Animated.Value(1)).current;
+  const prevCursorLayout = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (isControlled || selectedKey) return;
+    const nextFallback = getFallbackKey(items, disabledKeys, isDisabled);
+    if (nextFallback && nextFallback !== selectedKey) {
+      setInternalSelectedKey(nextFallback);
+    }
+  }, [disabledKeys, isControlled, isDisabled, items, selectedKey]);
+  (0, import_react7.useEffect)(() => {
+    if (!selectedKey) return;
+    const selectedLayout = layouts[selectedKey];
+    if (!selectedLayout) return;
+    const from = prevCursorLayout.current;
+    prevCursorLayout.current = selectedLayout;
+    if (disableAnimation || !from) {
+      cursorTranslateX.setValue(selectedLayout.x);
+      cursorWidth.setValue(selectedLayout.width);
+      cursorScaleX.setValue(1);
+      return;
+    }
+    runTabsCursorAnimation(
+      cursorTranslateX,
+      cursorWidth,
+      cursorScaleX,
+      selectedLayout.x,
+      selectedLayout.width,
+      animationDuration
+    );
+  }, [
+    animationDuration,
+    cursorTranslateX,
+    cursorWidth,
+    cursorScaleX,
+    disableAnimation,
+    layouts,
+    selectedKey
+  ]);
+  const onTabLayout = (0, import_react7.useCallback)(
+    (key, event) => {
+      const nextLayout = event.nativeEvent.layout;
+      setLayouts((prev) => {
+        const current = prev[key];
+        if (current && current.x === nextLayout.x && current.width === nextLayout.width) {
+          return prev;
+        }
+        const isBordered = variant === "bordered";
+        const isFirstTab = items[0]?.key === key;
+        let cursorWidth2 = nextLayout.width;
+        let cursorX = nextLayout.x;
+        if (isBordered) {
+          cursorWidth2 = nextLayout.width;
+          cursorX = nextLayout.x;
+          if (isFirstTab) {
+            cursorWidth2 = nextLayout.width + variantStyles.listBorderWidth;
+            cursorX = Math.max(0, nextLayout.x - variantStyles.listBorderWidth);
+          }
+          if (listWidth > 0) {
+            const maxWidth = Math.max(0, listWidth - cursorX);
+            cursorWidth2 = Math.min(cursorWidth2, maxWidth);
+          }
+        }
+        return {
+          ...prev,
+          [key]: { x: cursorX, width: cursorWidth2 }
+        };
+      });
+    },
+    [items, listWidth, setLayouts, variant, variantStyles.listBorderWidth]
+  );
+  const handleTabPress = (0, import_react7.useCallback)(
+    (item) => {
+      if (isTabDisabled(item, disabledKeys, isDisabled)) return;
+      if (!isControlled) {
+        setInternalSelectedKey(item.key);
+      }
+      onSelectionChange?.(item.key);
+    },
+    [disabledKeys, isControlled, isDisabled, onSelectionChange]
+  );
+  const shouldShowCursor = !!selectedKey && !!layouts[selectedKey] && !isDisabled && items.length > 0;
+  const resolvedContent = typeof content === "function" ? content({ selectedKey, selectedItem }) : content ?? selectedItem?.content;
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: [styles.container, customAppearance?.container] }, /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native6.View,
+    {
+      onLayout: (event) => setListWidth(event.nativeEvent.layout.width),
+      style: [
+        styles.list,
+        {
+          borderRadius: variant === "underlined" ? 0 : radiusStyles.borderRadius,
+          backgroundColor: variantStyles.listBackgroundColor,
+          borderColor: variantStyles.listBorderColor,
+          borderWidth: variantStyles.listBorderWidth,
+          borderBottomWidth: variant === "underlined" ? variantStyles.cursorHeight ?? 2 : variantStyles.listBorderWidth,
+          paddingHorizontal: variantStyles.listPaddingHorizontal,
+          ...variant === "bordered" && { overflow: "hidden" }
+        },
+        fullWidth && styles.fullWidth,
+        customAppearance?.list
+      ]
+    },
+    shouldShowCursor && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native6.Animated.View,
+      {
+        pointerEvents: "none",
+        style: [
+          styles.cursor,
+          {
+            bottom: variantStyles.cursorBottom,
+            borderRadius: variant === "underlined" ? 0 : Math.max(
+              0,
+              radiusStyles.borderRadius - variantStyles.listBorderWidth
+            ),
+            width: cursorWidth,
+            backgroundColor: variantStyles.cursorColor,
+            transform: [
+              { translateX: cursorTranslateX },
+              { scaleX: cursorScaleX }
+            ],
+            ...variantStyles.cursorTop !== void 0 && {
+              top: variantStyles.cursorTop
+            },
+            ...variantStyles.cursorHeight !== void 0 && {
+              height: variantStyles.cursorHeight
+            },
+            ...variantStyles.cursorShadow && {
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 1 },
+              shadowOpacity: 0.15,
+              shadowRadius: 3,
+              elevation: 2
+            }
+          },
+          customAppearance?.cursor
+        ]
+      }
+    ),
+    items.map((item) => {
+      const isSelected = selectedKey === item.key;
+      const disabled = isTabDisabled(item, disabledKeys, isDisabled);
+      return /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native6.Pressable,
+        {
+          key: item.key,
+          onLayout: (event) => onTabLayout(item.key, event),
+          onPress: () => handleTabPress(item),
+          disabled,
+          style: [styles.tabPressable, disabled && styles.disabled]
+        },
+        /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native6.View,
+          {
+            style: [
+              styles.tab,
+              {
+                minHeight: sizeStyles.minHeight,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                paddingVertical: sizeStyles.paddingVertical
+              },
+              customAppearance?.tab,
+              isSelected && customAppearance?.selectedTab
+            ]
+          },
+          renderTab ? renderTab(item, { isSelected, isDisabled: disabled }) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, item.startContent, /* @__PURE__ */ import_react7.default.createElement(
+            import_react_native6.Text,
+            {
+              numberOfLines: 1,
+              style: [
+                styles.text,
+                {
+                  color: isSelected ? variantStyles.selectedTextColor : variantStyles.textColor,
+                  fontSize: sizeStyles.fontSize
+                },
+                customAppearance?.text,
+                isSelected && customAppearance?.selectedText
+              ]
+            },
+            item.title
+          ), item.endContent)
+        )
+      );
+    })
+  ), resolvedContent !== void 0 && /* @__PURE__ */ import_react7.default.createElement(import_react_native6.View, { style: [styles.content, customAppearance?.content] }, resolvedContent));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab,
+  Tabs
+});

package/dist/tabs/index.d.cts

@@ -0,0 +1,176 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.cjs';
+
+type TabsVariant = 'solid' | 'bordered' | 'light' | 'underlined';
+type TabsItem = {
+    /**
+     * Unique key for the tab.
+     */
+    key: string;
+    /**
+     * Label content for the tab trigger.
+     */
+    title: ReactNode;
+    /**
+     * Optional content displayed before the title.
+     */
+    startContent?: ReactNode;
+    /**
+     * Optional content displayed after the title.
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether this tab is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional content rendered when this tab is selected.
+     */
+    content?: ReactNode;
+};
+type TabProps = {
+    /**
+     * Label content for the tab trigger.
+     */
+    title: ReactNode;
+    /**
+     * Optional content displayed before the title.
+     */
+    startContent?: ReactNode;
+    /**
+     * Optional content displayed after the title.
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether this tab is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional content rendered when this tab is selected.
+     */
+    children?: ReactNode;
+};
+type TabsCustomAppearance = {
+    /**
+     * Custom styles for the outer container.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the tabs list wrapper.
+     */
+    list?: ViewStyle;
+    /**
+     * Custom styles for each tab trigger.
+     */
+    tab?: ViewStyle;
+    /**
+     * Custom styles for the selected tab trigger.
+     */
+    selectedTab?: ViewStyle;
+    /**
+     * Custom styles for tab title text.
+     */
+    text?: TextStyle;
+    /**
+     * Custom styles for selected tab title text.
+     */
+    selectedText?: TextStyle;
+    /**
+     * Custom styles for the animated cursor.
+     */
+    cursor?: ViewStyle;
+    /**
+     * Custom styles for optional content area.
+     */
+    content?: ViewStyle;
+};
+type RenderTabState = {
+    isSelected: boolean;
+    isDisabled: boolean;
+};
+type RenderChildrenState = {
+    selectedKey: string;
+    selectedItem?: TabsItem;
+};
+type TabsProps = {
+    /**
+     * Controlled selected key.
+     */
+    selectedKey?: string;
+    /**
+     * Default selected key in uncontrolled mode.
+     */
+    defaultSelectedKey?: string;
+    /**
+     * Callback fired when selection changes.
+     */
+    onSelectionChange?: (key: string) => void;
+    /**
+     * Keys that should be disabled.
+     */
+    disabledKeys?: string[];
+    /**
+     * Theme color of tabs.
+     * @default 'primary'
+     */
+    color?: ThemeColor;
+    /**
+     * Visual variant.
+     * @default 'solid'
+     */
+    variant?: TabsVariant;
+    /**
+     * Size of tab triggers.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Border radius for list and cursor.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Whether tabs should stretch to full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether all tabs are disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Disable cursor animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Animation duration in milliseconds.
+     * @default 220
+     */
+    animationDuration?: number;
+    /**
+     * Optional custom tab renderer.
+     */
+    renderTab?: (item: TabsItem, state: RenderTabState) => ReactNode;
+    /**
+     * Tab items as children.
+     */
+    children: ReactNode;
+    /**
+     * Optional content area rendered below the tabs.
+     */
+    content?: ReactNode | ((state: RenderChildrenState) => ReactNode);
+    /**
+     * Custom appearance overrides.
+     */
+    customAppearance?: TabsCustomAppearance;
+};
+
+declare const Tab: React.FC<TabProps>;
+declare const Tabs: React.FC<TabsProps>;
+
+export { Tab, type TabProps, Tabs, type TabsItem, type TabsProps, type TabsVariant };