@xaui/native 0.0.21 → 0.0.23

package/dist/pager/index.js

@@ -0,0 +1,205 @@
+// src/components/pager/pager.tsx
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ScrollView, View } from "react-native";
+
+// src/components/pager/pager.style.ts
+import { StyleSheet } from "react-native";
+var styles = 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 React.Children.toArray(children).flatMap((child, index) => {
+    if (!React.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 = useMemo(() => toPages(children), [children]);
+  const maxPage = Math.max(0, pages.length - 1);
+  const isControlled = controlledPage !== void 0;
+  const [internalPage, setInternalPage] = useState(clampPage(defaultPage, maxPage));
+  const [containerWidth, setContainerWidth] = useState(0);
+  const scrollViewRef = useRef(null);
+  const initialScrollAppliedRef = useRef(false);
+  const activePage = clampPage(
+    isControlled ? controlledPage ?? 0 : internalPage,
+    maxPage
+  );
+  useEffect(() => {
+    if (isControlled || pages.length === 0) return;
+    setInternalPage((prev) => clampPage(prev, maxPage));
+  }, [isControlled, maxPage, pages.length]);
+  useEffect(() => {
+    if (containerWidth <= 0) return;
+    if (pages.length <= 1) return;
+    const x = activePage * containerWidth;
+    if (!initialScrollAppliedRef.current) {
+      initialScrollAppliedRef.current = true;
+      scrollViewRef.current?.scrollTo({ x, animated: false });
+      return;
+    }
+    scrollViewRef.current?.scrollTo({ x, animated: true });
+  }, [activePage, containerWidth, pages.length]);
+  const handleLayout = useCallback((event) => {
+    setContainerWidth(event.nativeEvent.layout.width);
+  }, []);
+  const commitPageChange = useCallback(
+    (nextPage) => {
+      if (!isControlled) {
+        setInternalPage(nextPage);
+      }
+      onPageChange?.(nextPage);
+    },
+    [isControlled, onPageChange]
+  );
+  const handleMomentumScrollEnd = useCallback(
+    (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__ */ React.createElement(
+    View,
+    {
+      onLayout: handleLayout,
+      style: [
+        styles.container,
+        isPagerFullscreen && styles.fullscreenContainer,
+        customAppearance?.container
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      ScrollView,
+      {
+        ref: scrollViewRef,
+        horizontal: true,
+        pagingEnabled: true,
+        showsHorizontalScrollIndicator: false,
+        scrollEnabled: swipeEnabled,
+        onMomentumScrollEnd: handleMomentumScrollEnd,
+        style: [
+          isPagerFullscreen && styles.fullscreenScrollView,
+          customAppearance?.scrollView
+        ]
+      },
+      pages.map((pagerPage) => /* @__PURE__ */ React.createElement(
+        View,
+        {
+          key: pagerPage.key,
+          style: [
+            styles.page,
+            isPagerFullscreen && styles.fullscreenPage,
+            customAppearance?.page,
+            containerWidth > 0 && { width: containerWidth }
+          ]
+        },
+        pagerPage.content
+      ))
+    ),
+    showIndicator && pages.length > 1 && /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.indicatorContainer,
+          customAppearance?.indicatorContainer,
+          isPagerFullscreen && styles.fullscreenIndicatorContainer
+        ]
+      },
+      pages.map((_, index) => {
+        const isActive = index === activePage;
+        if (renderIndicator) {
+          return /* @__PURE__ */ React.createElement(React.Fragment, { key: `indicator-${String(index)}` }, renderIndicator({ index, isActive, total: pages.length }));
+        }
+        return /* @__PURE__ */ React.createElement(
+          View,
+          {
+            key: `indicator-${String(index)}`,
+            style: [
+              styles.indicator,
+              customAppearance?.indicator,
+              isActive && styles.activeIndicator,
+              isActive && customAppearance?.activeIndicator
+            ]
+          }
+        );
+      })
+    )
+  );
+};
+export {
+  Pager,
+  PagerItem
+};

package/dist/progress/index.d.mts

@@ -0,0 +1,3 @@
+export { Progress } from './progress';
+export type { ProgressIndicatorProps } from './progress.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/progress/index.d.ts

@@ -1,47 +1,3 @@
-import React from 'react';
-import { T as ThemeColor } from '../index-BOw6tbkc.js';
-
-type ProgressVariant = 'linear' | 'circular';
-type ProgressIndicatorProps = {
-    /**
-     * The variant of the progress indicator.
-     * @default 'linear'
-     */
-    variant?: ProgressVariant;
-    /**
-     * The size of the progress indicator (height for linear, diameter for circular).
-     * @default 4 for linear, 40 for circular
-     */
-    size?: number;
-    /**
-     * The theme color of the progress indicator.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * The custom color of the progress indicator.
-     * Overrides themeColor.
-     */
-    color?: string;
-    /**
-     * The background color of the track.
-     */
-    backgroundColor?: string;
-    /**
-     * The current value of the progress bar (0 to 1).
-     */
-    value: number;
-    /**
-     * Whether to disable the animation.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * The border radius of the indicator and track.
-     */
-    borderRadius?: number;
-};
-
-declare const Progress: React.FC<ProgressIndicatorProps>;
-
-export { Progress, type ProgressIndicatorProps };
+export { Progress } from './progress';
+export type { ProgressIndicatorProps } from './progress.type';
+//# sourceMappingURL=index.d.ts.map