@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/tabs/index.cjs

@@ -1,440 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/tabs/tabs.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-
-
-
-
-
-var _reactnative = require('react-native');
-
-// src/components/tabs/tabs.animation.ts
-
-var runTabsCursorAnimation = (translateX, width, scaleX, toX, toWidth, duration) => {
-  scaleX.setValue(0.75);
-  _reactnative.Animated.parallel([
-    _reactnative.Animated.timing(translateX, {
-      toValue: toX,
-      duration,
-      easing: _reactnative.Easing.inOut(_reactnative.Easing.quad),
-      useNativeDriver: false
-    }),
-    _reactnative.Animated.timing(width, {
-      toValue: toWidth,
-      duration,
-      easing: _reactnative.Easing.inOut(_reactnative.Easing.quad),
-      useNativeDriver: false
-    }),
-    _reactnative.Animated.timing(scaleX, {
-      toValue: 1,
-      duration,
-      easing: _reactnative.Easing.out(_reactnative.Easing.quad),
-      useNativeDriver: false
-    })
-  ]).start();
-};
-
-// src/components/tabs/tabs.hook.ts
-
-var _core = require('@xaui/core');
-function useTabsSizeStyles(size) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    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 = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeColor = _core.getSafeThemeColor.call(void 0, color);
-  const palette = theme.colors[safeColor];
-  const cursorSolidColor = _core.withPaletteNumber.call(void 0, palette.main, 400);
-  return _react.useMemo.call(void 0, () => {
-    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
-
-var styles = _reactnative.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 || _optionalChain([disabledKeys, 'optionalAccess', _ => _.includes, 'call', _2 => _2(item.key)]) === true;
-}
-function getFallbackKey(items, disabledKeys, isDisabled) {
-  if (isDisabled) return "";
-  const firstEnabled = items.find((item) => !isTabDisabled(item, disabledKeys, false));
-  return _nullishCoalesce(_optionalChain([firstEnabled, 'optionalAccess', _3 => _3.key]), () => ( ""));
-}
-var Tab = () => null;
-Tab.displayName = "Tab";
-function toTabItems(children) {
-  return _react2.default.Children.toArray(children).flatMap((child) => {
-    if (!_react2.default.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 = _react.useMemo.call(void 0, () => toTabItems(children), [children]);
-  const isControlled = controlledSelectedKey !== void 0;
-  const initialKey = _react.useMemo.call(void 0, () => {
-    if (defaultSelectedKey) return defaultSelectedKey;
-    return getFallbackKey(items, disabledKeys, isDisabled);
-  }, [defaultSelectedKey, disabledKeys, isDisabled, items]);
-  const [internalSelectedKey, setInternalSelectedKey] = _react.useState.call(void 0, initialKey);
-  const [layouts, setLayouts] = _react.useState.call(void 0, {});
-  const [listWidth, setListWidth] = _react.useState.call(void 0, 0);
-  const selectedKey = _nullishCoalesce((isControlled ? controlledSelectedKey : internalSelectedKey), () => ( ""));
-  const selectedItem = _react.useMemo.call(void 0, 
-    () => items.find((item) => item.key === selectedKey),
-    [items, selectedKey]
-  );
-  const sizeStyles = useTabsSizeStyles(size);
-  const variantStyles = useTabsVariantStyles(color, variant);
-  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
-  const cursorTranslateX = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const cursorWidth = _react.useRef.call(void 0, new _reactnative.Animated.Value(0)).current;
-  const cursorScaleX = _react.useRef.call(void 0, new _reactnative.Animated.Value(1)).current;
-  const prevCursorLayout = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    if (isControlled || selectedKey) return;
-    const nextFallback = getFallbackKey(items, disabledKeys, isDisabled);
-    if (nextFallback && nextFallback !== selectedKey) {
-      setInternalSelectedKey(nextFallback);
-    }
-  }, [disabledKeys, isControlled, isDisabled, items, selectedKey]);
-  _react.useEffect.call(void 0, () => {
-    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 = _react.useCallback.call(void 0, 
-    (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 = _optionalChain([items, 'access', _4 => _4[0], 'optionalAccess', _5 => _5.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 = _react.useCallback.call(void 0, 
-    (item) => {
-      if (isTabDisabled(item, disabledKeys, isDisabled)) return;
-      if (!isControlled) {
-        setInternalSelectedKey(item.key);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _6 => _6(item.key)]);
-    },
-    [disabledKeys, isControlled, isDisabled, onSelectionChange]
-  );
-  const shouldShowCursor = !!selectedKey && !!layouts[selectedKey] && !isDisabled && items.length > 0;
-  const resolvedContent = typeof content === "function" ? content({ selectedKey, selectedItem }) : _nullishCoalesce(content, () => ( _optionalChain([selectedItem, 'optionalAccess', _7 => _7.content])));
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.container])] }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.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" ? _nullishCoalesce(variantStyles.cursorHeight, () => ( 2)) : variantStyles.listBorderWidth,
-          paddingHorizontal: variantStyles.listPaddingHorizontal,
-          ...variant === "bordered" && { overflow: "hidden" }
-        },
-        fullWidth && styles.fullWidth,
-        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.list])
-      ]
-    },
-    shouldShowCursor && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.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
-            }
-          },
-          _optionalChain([customAppearance, 'optionalAccess', _10 => _10.cursor])
-        ]
-      }
-    ),
-    items.map((item) => {
-      const isSelected = selectedKey === item.key;
-      const disabled = isTabDisabled(item, disabledKeys, isDisabled);
-      return /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Pressable,
-        {
-          key: item.key,
-          onLayout: (event) => onTabLayout(item.key, event),
-          onPress: () => handleTabPress(item),
-          disabled,
-          style: [styles.tabPressable, disabled && styles.disabled]
-        },
-        /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.View,
-          {
-            style: [
-              styles.tab,
-              {
-                minHeight: sizeStyles.minHeight,
-                paddingHorizontal: sizeStyles.paddingHorizontal,
-                paddingVertical: sizeStyles.paddingVertical
-              },
-              _optionalChain([customAppearance, 'optionalAccess', _11 => _11.tab]),
-              isSelected && _optionalChain([customAppearance, 'optionalAccess', _12 => _12.selectedTab])
-            ]
-          },
-          renderTab ? renderTab(item, { isSelected, isDisabled: disabled }) : /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, item.startContent, /* @__PURE__ */ _react2.default.createElement(
-            _reactnative.Text,
-            {
-              numberOfLines: 1,
-              style: [
-                styles.text,
-                {
-                  color: isSelected ? variantStyles.selectedTextColor : variantStyles.textColor,
-                  fontSize: sizeStyles.fontSize
-                },
-                _optionalChain([customAppearance, 'optionalAccess', _13 => _13.text]),
-                isSelected && _optionalChain([customAppearance, 'optionalAccess', _14 => _14.selectedText])
-              ]
-            },
-            item.title
-          ), item.endContent)
-        )
-      );
-    })
-  ), resolvedContent !== void 0 && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, _optionalChain([customAppearance, 'optionalAccess', _15 => _15.content])] }, resolvedContent));
-};
-
-
-
-exports.Tab = Tab; exports.Tabs = Tabs;

package/dist/tabs/index.d.cts

@@ -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 };