@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/tabs/index.d.ts

@@ -1,180 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Size, Radius } from '@xaui/core/types';
-
-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 = {
-    /**
-     * Unique identifier for the tab. Used for selection, disabled state, and content rendering.
-     */
-    tabKey: 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.
-     */
-    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

@@ -1,440 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useBorderRadiusStyles,
-  useXUITheme
-} from "../chunk-RBSA4NH4.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: theme.componentSizes.xs,
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.xs
-      },
-      sm: {
-        minHeight: theme.componentSizes.sm,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.sm
-      },
-      md: {
-        minHeight: theme.componentSizes.md,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        fontSize: theme.fontSizes.md
-      },
-      lg: {
-        minHeight: theme.componentSizes.lg,
-        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.container,
-        listBorderColor: "transparent",
-        listBorderWidth: 0,
-        listPaddingHorizontal: 4,
-        cursorColor: cursorSolidColor,
-        textColor: palette.main,
-        selectedTextColor: palette.onMain,
-        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.onMain,
-        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 [];
-    }
-    const tabKey = child.props.tabKey;
-    if (!tabKey) {
-      return [];
-    }
-    return [
-      {
-        key: tabKey,
-        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
-};