@xaui/native 0.0.21 → 0.0.24

package/dist/tabs/index.d.ts

@@ -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.js';
+
+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 };

package/dist/tabs/index.js

@@ -0,0 +1,438 @@
+import {
+  useBorderRadiusStyles,
+  useXUITheme
+} from "../chunk-4KSZLONZ.js";
+
+// src/components/tabs/tabs.tsx
+import React, { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import {
+  Animated as Animated2,
+  Pressable,
+  Text,
+  View
+} from "react-native";
+
+// src/components/tabs/tabs.animation.ts
+import { Animated, Easing } from "react-native";
+var runTabsCursorAnimation = (translateX, width, scaleX, toX, toWidth, duration) => {
+  scaleX.setValue(0.75);
+  Animated.parallel([
+    Animated.timing(translateX, {
+      toValue: toX,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: false
+    }),
+    Animated.timing(width, {
+      toValue: toWidth,
+      duration,
+      easing: Easing.inOut(Easing.quad),
+      useNativeDriver: false
+    }),
+    Animated.timing(scaleX, {
+      toValue: 1,
+      duration,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: false
+    })
+  ]).start();
+};
+
+// src/components/tabs/tabs.hook.ts
+import { useMemo } from "react";
+import { getSafeThemeColor, withPaletteNumber } from "@xaui/core";
+function useTabsSizeStyles(size) {
+  const theme = useXUITheme();
+  return 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 = getSafeThemeColor(color);
+  const palette = theme.colors[safeColor];
+  const cursorSolidColor = withPaletteNumber(palette.main, 400);
+  return 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
+import { StyleSheet } from "react-native";
+var styles = 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 React.Children.toArray(children).flatMap((child) => {
+    if (!React.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 = useMemo2(() => toTabItems(children), [children]);
+  const isControlled = controlledSelectedKey !== void 0;
+  const initialKey = useMemo2(() => {
+    if (defaultSelectedKey) return defaultSelectedKey;
+    return getFallbackKey(items, disabledKeys, isDisabled);
+  }, [defaultSelectedKey, disabledKeys, isDisabled, items]);
+  const [internalSelectedKey, setInternalSelectedKey] = useState(initialKey);
+  const [layouts, setLayouts] = useState({});
+  const [listWidth, setListWidth] = useState(0);
+  const selectedKey = (isControlled ? controlledSelectedKey : internalSelectedKey) ?? "";
+  const selectedItem = useMemo2(
+    () => items.find((item) => item.key === selectedKey),
+    [items, selectedKey]
+  );
+  const sizeStyles = useTabsSizeStyles(size);
+  const variantStyles = useTabsVariantStyles(color, variant);
+  const radiusStyles = useBorderRadiusStyles(radius);
+  const cursorTranslateX = useRef(new Animated2.Value(0)).current;
+  const cursorWidth = useRef(new Animated2.Value(0)).current;
+  const cursorScaleX = useRef(new Animated2.Value(1)).current;
+  const prevCursorLayout = useRef(null);
+  useEffect(() => {
+    if (isControlled || selectedKey) return;
+    const nextFallback = getFallbackKey(items, disabledKeys, isDisabled);
+    if (nextFallback && nextFallback !== selectedKey) {
+      setInternalSelectedKey(nextFallback);
+    }
+  }, [disabledKeys, isControlled, isDisabled, items, selectedKey]);
+  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 = 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 = 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__ */ React.createElement(View, { style: [styles.container, customAppearance?.container] }, /* @__PURE__ */ React.createElement(
+    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__ */ React.createElement(
+      Animated2.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__ */ React.createElement(
+        Pressable,
+        {
+          key: item.key,
+          onLayout: (event) => onTabLayout(item.key, event),
+          onPress: () => handleTabPress(item),
+          disabled,
+          style: [styles.tabPressable, disabled && styles.disabled]
+        },
+        /* @__PURE__ */ React.createElement(
+          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__ */ React.createElement(React.Fragment, null, item.startContent, /* @__PURE__ */ React.createElement(
+            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__ */ React.createElement(View, { style: [styles.content, customAppearance?.content] }, resolvedContent));
+};
+export {
+  Tab,
+  Tabs
+};