@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/menubox/index.js

@@ -1,297 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/menubox/menubox.tsx
-import React, { useMemo, Children, isValidElement } from "react";
-import { View } from "react-native";
-
-// src/components/menubox/menubox-context.ts
-import { createContext, useContext } from "react";
-var MenuBoxContext = createContext(null);
-
-// src/components/menubox/menubox.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    overflow: "hidden"
-  },
-  item: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  },
-  content: {
-    flex: 1,
-    gap: 2
-  },
-  title: {
-    fontWeight: "500"
-  },
-  description: {
-    opacity: 0.6
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  divider: {
-    height: 1,
-    marginLeft: 56
-  }
-});
-
-// src/components/menubox/menubox.tsx
-var MenuBox = ({
-  children,
-  size = "md",
-  radius = "lg",
-  themeColor = "default",
-  spacing = 0,
-  style,
-  backgroundColor
-}) => {
-  const theme = useXUITheme();
-  const itemCount = Children.count(children);
-  const itemKeys = useMemo(() => {
-    const keys = [];
-    Children.forEach(children, (child) => {
-      if (isValidElement(child)) {
-        const props = child.props;
-        if (props.itemKey) {
-          keys.push(props.itemKey);
-        }
-      }
-    });
-    return keys;
-  }, [children]);
-  const getItemIndex = (itemKey) => {
-    return itemKeys.indexOf(itemKey);
-  };
-  const bgColor = backgroundColor ?? theme.colors.default.container;
-  const contextValue = useMemo(
-    () => ({
-      size,
-      radius,
-      themeColor,
-      backgroundColor: bgColor,
-      itemCount,
-      spacing,
-      getItemIndex
-    }),
-    [size, radius, themeColor, bgColor, itemCount, spacing, getItemIndex]
-  );
-  return /* @__PURE__ */ React.createElement(MenuBoxContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, children));
-};
-
-// src/components/menubox/menubox-item.tsx
-import React2, { useContext as useContext2 } from "react";
-import { Animated as Animated2, Pressable, Text, View as View2 } from "react-native";
-
-// src/components/menubox/menubox.hook.ts
-import { useMemo as useMemo2 } from "react";
-var useMenuBoxItemSizeStyles = (size) => {
-  const theme = useXUITheme();
-  return useMemo2(() => {
-    const sizes = {
-      xs: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.sm,
-        titleSize: theme.fontSizes.xs,
-        descriptionSize: theme.fontSizes.xs
-      },
-      sm: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.md,
-        titleSize: theme.fontSizes.sm,
-        descriptionSize: theme.fontSizes.xs
-      },
-      md: {
-        paddingVertical: theme.spacing.md,
-        paddingHorizontal: theme.spacing.md,
-        titleSize: theme.fontSizes.md,
-        descriptionSize: theme.fontSizes.sm
-      },
-      lg: {
-        paddingVertical: theme.spacing.lg,
-        paddingHorizontal: theme.spacing.lg,
-        titleSize: theme.fontSizes.lg,
-        descriptionSize: theme.fontSizes.md
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-};
-var useMenuBoxRadiusStyles = (radius, isFirst, isLast) => {
-  const theme = useXUITheme();
-  return useMemo2(() => {
-    const radiusMap = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.md,
-      md: theme.borderRadius.lg,
-      lg: theme.borderRadius.xl,
-      full: theme.borderRadius.full
-    };
-    const r = radiusMap[radius];
-    return {
-      borderTopLeftRadius: isFirst ? r : 0,
-      borderTopRightRadius: isFirst ? r : 0,
-      borderBottomLeftRadius: isLast ? r : 0,
-      borderBottomRightRadius: isLast ? r : 0
-    };
-  }, [radius, isFirst, isLast, theme]);
-};
-
-// src/components/menubox/menubox.animation.ts
-import { Animated } from "react-native";
-var runMenuBoxPressInAnimation = (animatedScale, animatedOpacity) => {
-  Animated.parallel([
-    Animated.spring(animatedScale, {
-      toValue: 0.99,
-      useNativeDriver: true,
-      speed: 50,
-      bounciness: 0
-    }),
-    Animated.timing(animatedOpacity, {
-      toValue: 0.8,
-      duration: 100,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-var runMenuBoxPressOutAnimation = (animatedScale, animatedOpacity) => {
-  Animated.parallel([
-    Animated.spring(animatedScale, {
-      toValue: 1,
-      useNativeDriver: true,
-      speed: 50,
-      bounciness: 0
-    }),
-    Animated.timing(animatedOpacity, {
-      toValue: 1,
-      duration: 100,
-      useNativeDriver: true
-    })
-  ]).start();
-};
-
-// src/components/menubox/menubox-item.tsx
-var MenuBoxItem = (props) => {
-  const context = useContext2(MenuBoxContext);
-  const theme = useXUITheme();
-  const animatedScale = React2.useRef(new Animated2.Value(1)).current;
-  const animatedOpacity = React2.useRef(new Animated2.Value(1)).current;
-  const {
-    itemKey,
-    title,
-    description,
-    startContent,
-    endContent,
-    isDisabled = false,
-    customAppearance,
-    onPress
-  } = props;
-  const size = context?.size ?? "md";
-  const radius = context?.radius ?? "lg";
-  const itemBackgroundColor = context?.backgroundColor ?? (theme.mode === "dark" ? theme.colors.default.container : theme.colors.background);
-  const spacing = context?.spacing ?? 0;
-  const itemCount = context?.itemCount ?? 1;
-  const index = context?.getItemIndex(itemKey) ?? 0;
-  const isFirst = index === 0;
-  const isLast = index === itemCount - 1;
-  const sizeStyles = useMenuBoxItemSizeStyles(size);
-  const radiusStyles = useMenuBoxRadiusStyles(radius, isFirst, isLast);
-  const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
-  const descriptionColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground + "99";
-  const handlePress = () => {
-    if (isDisabled) {
-      return;
-    }
-    onPress?.({});
-  };
-  const handlePressIn = () => {
-    if (!isDisabled) {
-      runMenuBoxPressInAnimation(animatedScale, animatedOpacity);
-    }
-  };
-  const handlePressOut = () => {
-    if (!isDisabled) {
-      runMenuBoxPressOutAnimation(animatedScale, animatedOpacity);
-    }
-  };
-  const renderTitle = () => {
-    if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.title,
-            { fontSize: sizeStyles.titleSize, color: titleColor },
-            customAppearance?.title
-          ],
-          numberOfLines: 1
-        },
-        title
-      );
-    }
-    return title;
-  };
-  const renderDescription = () => {
-    if (!description) return null;
-    if (typeof description === "string" || typeof description === "number") {
-      return /* @__PURE__ */ React2.createElement(
-        Text,
-        {
-          style: [
-            styles.description,
-            { fontSize: sizeStyles.descriptionSize, color: descriptionColor },
-            customAppearance?.description
-          ],
-          numberOfLines: 1
-        },
-        description
-      );
-    }
-    return description;
-  };
-  const content = /* @__PURE__ */ React2.createElement(
-    Animated2.View,
-    {
-      style: [
-        styles.item,
-        {
-          paddingVertical: sizeStyles.paddingVertical,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor: itemBackgroundColor,
-          transform: [{ scale: animatedScale }],
-          opacity: animatedOpacity
-        },
-        radiusStyles,
-        isDisabled && styles.disabled,
-        customAppearance?.container
-      ]
-    },
-    startContent && /* @__PURE__ */ React2.createElement(View2, { style: customAppearance?.content }, startContent),
-    /* @__PURE__ */ React2.createElement(View2, { style: [styles.content, customAppearance?.content] }, renderTitle(), renderDescription()),
-    endContent && /* @__PURE__ */ React2.createElement(View2, { style: customAppearance?.content }, endContent)
-  );
-  return /* @__PURE__ */ React2.createElement(
-    Pressable,
-    {
-      onPress: handlePress,
-      onPressIn: handlePressIn,
-      onPressOut: handlePressOut,
-      disabled: isDisabled,
-      style: [
-        radiusStyles,
-        { overflow: "hidden" },
-        !isLast && { marginBottom: spacing }
-      ]
-    },
-    content
-  );
-};
-export {
-  MenuBox,
-  MenuBoxItem
-};

package/dist/pager/index.cjs

@@ -1,205 +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; }// src/components/pager/pager.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/pager/pager.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    width: "100%"
-  },
-  fullscreenContainer: {
-    flex: 1
-  },
-  fullscreenScrollView: {
-    flex: 1
-  },
-  page: {
-    width: "100%"
-  },
-  fullscreenPage: {
-    flex: 1
-  },
-  indicatorContainer: {
-    marginTop: 12,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  fullscreenIndicatorContainer: {
-    position: "absolute",
-    bottom: 16,
-    left: 16,
-    right: 16,
-    marginTop: 0,
-    zIndex: 1,
-    elevation: 1
-  },
-  indicator: {
-    width: 8,
-    height: 8,
-    marginHorizontal: 3,
-    borderRadius: 999,
-    backgroundColor: "#D1D5DB"
-  },
-  activeIndicator: {
-    width: 18,
-    backgroundColor: "#111827"
-  }
-});
-
-// src/components/pager/pager-item.tsx
-var PagerItem = () => null;
-PagerItem.displayName = "PagerItem";
-
-// src/components/pager/pager.tsx
-function clampPage(page, max) {
-  return Math.max(0, Math.min(page, max));
-}
-function toPages(children) {
-  return _react2.default.Children.toArray(children).flatMap((child, index) => {
-    if (!_react2.default.isValidElement(child) || child.type !== PagerItem) {
-      return [];
-    }
-    return [
-      {
-        key: child.key != null ? String(child.key) : `page-${String(index)}`,
-        content: child.props.children
-      }
-    ];
-  });
-}
-var Pager = ({
-  isFullscreen = false,
-  isfullscreen,
-  page: controlledPage,
-  defaultPage = 0,
-  onPageChange,
-  swipeEnabled = true,
-  showIndicator = true,
-  renderIndicator,
-  children,
-  customAppearance
-}) => {
-  const isPagerFullscreen = isFullscreen || isfullscreen === true;
-  const pages = _react.useMemo.call(void 0, () => toPages(children), [children]);
-  const maxPage = Math.max(0, pages.length - 1);
-  const isControlled = controlledPage !== void 0;
-  const [internalPage, setInternalPage] = _react.useState.call(void 0, clampPage(defaultPage, maxPage));
-  const [containerWidth, setContainerWidth] = _react.useState.call(void 0, 0);
-  const scrollViewRef = _react.useRef.call(void 0, null);
-  const initialScrollAppliedRef = _react.useRef.call(void 0, false);
-  const activePage = clampPage(
-    isControlled ? _nullishCoalesce(controlledPage, () => ( 0)) : internalPage,
-    maxPage
-  );
-  _react.useEffect.call(void 0, () => {
-    if (isControlled || pages.length === 0) return;
-    setInternalPage((prev) => clampPage(prev, maxPage));
-  }, [isControlled, maxPage, pages.length]);
-  _react.useEffect.call(void 0, () => {
-    if (containerWidth <= 0) return;
-    if (pages.length <= 1) return;
-    const x = activePage * containerWidth;
-    if (!initialScrollAppliedRef.current) {
-      initialScrollAppliedRef.current = true;
-      _optionalChain([scrollViewRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.scrollTo, 'call', _4 => _4({ x, animated: false })]);
-      return;
-    }
-    _optionalChain([scrollViewRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.scrollTo, 'call', _7 => _7({ x, animated: true })]);
-  }, [activePage, containerWidth, pages.length]);
-  const handleLayout = _react.useCallback.call(void 0, (event) => {
-    setContainerWidth(event.nativeEvent.layout.width);
-  }, []);
-  const commitPageChange = _react.useCallback.call(void 0, 
-    (nextPage) => {
-      if (!isControlled) {
-        setInternalPage(nextPage);
-      }
-      _optionalChain([onPageChange, 'optionalCall', _8 => _8(nextPage)]);
-    },
-    [isControlled, onPageChange]
-  );
-  const handleMomentumScrollEnd = _react.useCallback.call(void 0, 
-    (event) => {
-      if (containerWidth <= 0 || pages.length === 0) return;
-      const rawPage = Math.round(event.nativeEvent.contentOffset.x / containerWidth);
-      const nextPage = clampPage(rawPage, maxPage);
-      if (nextPage !== activePage) {
-        commitPageChange(nextPage);
-      }
-    },
-    [activePage, commitPageChange, containerWidth, maxPage, pages.length]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      onLayout: handleLayout,
-      style: [
-        styles.container,
-        isPagerFullscreen && styles.fullscreenContainer,
-        _optionalChain([customAppearance, 'optionalAccess', _9 => _9.container])
-      ]
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.ScrollView,
-      {
-        ref: scrollViewRef,
-        horizontal: true,
-        pagingEnabled: true,
-        showsHorizontalScrollIndicator: false,
-        scrollEnabled: swipeEnabled,
-        onMomentumScrollEnd: handleMomentumScrollEnd,
-        style: [
-          isPagerFullscreen && styles.fullscreenScrollView,
-          _optionalChain([customAppearance, 'optionalAccess', _10 => _10.scrollView])
-        ]
-      },
-      pages.map((pagerPage) => /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.View,
-        {
-          key: pagerPage.key,
-          style: [
-            styles.page,
-            isPagerFullscreen && styles.fullscreenPage,
-            _optionalChain([customAppearance, 'optionalAccess', _11 => _11.page]),
-            containerWidth > 0 && { width: containerWidth }
-          ]
-        },
-        pagerPage.content
-      ))
-    ),
-    showIndicator && pages.length > 1 && /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [
-          styles.indicatorContainer,
-          _optionalChain([customAppearance, 'optionalAccess', _12 => _12.indicatorContainer]),
-          isPagerFullscreen && styles.fullscreenIndicatorContainer
-        ]
-      },
-      pages.map((_, index) => {
-        const isActive = index === activePage;
-        if (renderIndicator) {
-          return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, { key: `indicator-${String(index)}` }, renderIndicator({ index, isActive, total: pages.length }));
-        }
-        return /* @__PURE__ */ _react2.default.createElement(
-          _reactnative.View,
-          {
-            key: `indicator-${String(index)}`,
-            style: [
-              styles.indicator,
-              _optionalChain([customAppearance, 'optionalAccess', _13 => _13.indicator]),
-              isActive && styles.activeIndicator,
-              isActive && _optionalChain([customAppearance, 'optionalAccess', _14 => _14.activeIndicator])
-            ]
-          }
-        );
-      })
-    )
-  );
-};
-
-
-
-exports.Pager = Pager; exports.PagerItem = PagerItem;

package/dist/pager/index.d.cts

@@ -1,93 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-
-type PagerIndicatorRenderState = {
-    index: number;
-    isActive: boolean;
-    total: number;
-};
-type PagerCustomAppearance = {
-    /**
-     * Custom styles for the outer wrapper.
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the internal scroll view.
-     */
-    scrollView?: ViewStyle;
-    /**
-     * Custom styles applied to each page wrapper.
-     */
-    page?: ViewStyle;
-    /**
-     * Custom styles for the indicator row.
-     */
-    indicatorContainer?: ViewStyle;
-    /**
-     * Custom styles for each indicator item.
-     */
-    indicator?: ViewStyle;
-    /**
-     * Custom styles for the active indicator item.
-     */
-    activeIndicator?: ViewStyle;
-};
-type PagerProps = {
-    /**
-     * Whether the pager should fill its parent and render indicators inside.
-     * @default false
-     */
-    isFullscreen?: boolean;
-    /**
-     * Alias of `isFullscreen`.
-     * @default false
-     */
-    isfullscreen?: boolean;
-    /**
-     * Controlled active page index.
-     */
-    page?: number;
-    /**
-     * Default active page index (uncontrolled mode).
-     * @default 0
-     */
-    defaultPage?: number;
-    /**
-     * Callback fired when active page changes.
-     */
-    onPageChange?: (page: number) => void;
-    /**
-     * Whether swipe gesture is enabled.
-     * @default true
-     */
-    swipeEnabled?: boolean;
-    /**
-     * Whether to render indicators.
-     * @default true
-     */
-    showIndicator?: boolean;
-    /**
-     * Optional custom indicator renderer.
-     */
-    renderIndicator?: (state: PagerIndicatorRenderState) => ReactNode;
-    /**
-     * Pager pages. Prefer using `PagerItem`.
-     */
-    children: ReactNode;
-    /**
-     * Appearance overrides.
-     */
-    customAppearance?: PagerCustomAppearance;
-};
-type PagerItemProps = {
-    /**
-     * Page content.
-     */
-    children?: ReactNode;
-};
-
-declare const Pager: React.FC<PagerProps>;
-
-declare const PagerItem: React.FC<PagerItemProps>;
-
-export { Pager, type PagerIndicatorRenderState, PagerItem, type PagerItemProps, type PagerProps };

package/dist/pager/index.d.ts

@@ -1,93 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-
-type PagerIndicatorRenderState = {
-    index: number;
-    isActive: boolean;
-    total: number;
-};
-type PagerCustomAppearance = {
-    /**
-     * Custom styles for the outer wrapper.
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the internal scroll view.
-     */
-    scrollView?: ViewStyle;
-    /**
-     * Custom styles applied to each page wrapper.
-     */
-    page?: ViewStyle;
-    /**
-     * Custom styles for the indicator row.
-     */
-    indicatorContainer?: ViewStyle;
-    /**
-     * Custom styles for each indicator item.
-     */
-    indicator?: ViewStyle;
-    /**
-     * Custom styles for the active indicator item.
-     */
-    activeIndicator?: ViewStyle;
-};
-type PagerProps = {
-    /**
-     * Whether the pager should fill its parent and render indicators inside.
-     * @default false
-     */
-    isFullscreen?: boolean;
-    /**
-     * Alias of `isFullscreen`.
-     * @default false
-     */
-    isfullscreen?: boolean;
-    /**
-     * Controlled active page index.
-     */
-    page?: number;
-    /**
-     * Default active page index (uncontrolled mode).
-     * @default 0
-     */
-    defaultPage?: number;
-    /**
-     * Callback fired when active page changes.
-     */
-    onPageChange?: (page: number) => void;
-    /**
-     * Whether swipe gesture is enabled.
-     * @default true
-     */
-    swipeEnabled?: boolean;
-    /**
-     * Whether to render indicators.
-     * @default true
-     */
-    showIndicator?: boolean;
-    /**
-     * Optional custom indicator renderer.
-     */
-    renderIndicator?: (state: PagerIndicatorRenderState) => ReactNode;
-    /**
-     * Pager pages. Prefer using `PagerItem`.
-     */
-    children: ReactNode;
-    /**
-     * Appearance overrides.
-     */
-    customAppearance?: PagerCustomAppearance;
-};
-type PagerItemProps = {
-    /**
-     * Page content.
-     */
-    children?: ReactNode;
-};
-
-declare const Pager: React.FC<PagerProps>;
-
-declare const PagerItem: React.FC<PagerItemProps>;
-
-export { Pager, type PagerIndicatorRenderState, PagerItem, type PagerItemProps, type PagerProps };