@svton/taro-ui 1.0.0 → 1.0.1

package/dist/index.d.mts

@@ -0,0 +1,246 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface TabBarItem<T = string> {
+    /** Tab 的唯一标识 */
+    key: T;
+    /** 显示文本 */
+    label: string;
+    /** 自定义渲染内容 */
+    render?: () => ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+interface TabBarProps<T = string> {
+    /** Tab 项列表 */
+    items: TabBarItem<T>[];
+    /** 当前激活的Tab（受控） */
+    activeKey?: T;
+    /** 默认激活的Tab（非受控） */
+    defaultActiveKey?: T;
+    /** Tab 切换回调 */
+    onChange?: (key: T) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 下划线宽度 */
+    indicatorWidth?: number;
+    /** 是否显示下划线 */
+    showIndicator?: boolean;
+    /** 是否粘性定位 */
+    sticky?: boolean;
+}
+declare function TabBar<T extends string = string>(props: TabBarProps<T>): react_jsx_runtime.JSX.Element;
+
+type ButtonType = 'primary' | 'default' | 'danger' | 'text';
+type ButtonSize = 'large' | 'medium' | 'small';
+interface ButtonProps {
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 按钮尺寸 */
+    size?: ButtonSize;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为块级按钮（宽度100%） */
+    block?: boolean;
+    /** 按钮文本 */
+    children?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 点击事件 */
+    onClick?: () => void;
+}
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ListProps<T = any> {
+    /** 列表数据 */
+    data: T[];
+    /** 自定义渲染列表项 */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** 唯一键提取函数 */
+    keyExtractor?: (item: T, index: number) => string | number;
+    /** 是否正在加载 */
+    loading?: boolean;
+    /** 是否还有更多数据 */
+    hasMore?: boolean;
+    /** 下拉刷新回调 */
+    onRefresh?: () => Promise<void> | void;
+    /** 上拉加载更多回调 */
+    onLoadMore?: () => Promise<void> | void;
+    /** 空状态渲染 */
+    renderEmpty?: () => ReactNode;
+    /** 空状态提示文本 */
+    emptyText?: string;
+    /** 加载更多提示文本 */
+    loadingText?: string;
+    /** 没有更多数据提示文本 */
+    noMoreText?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 是否启用下拉刷新 */
+    enableRefresh?: boolean;
+    /** 是否启用上拉加载 */
+    enableLoadMore?: boolean;
+    /** 头部内容 */
+    header?: ReactNode;
+    /** 底部内容 */
+    footer?: ReactNode;
+}
+declare function List<T = any>(props: ListProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CustomNavBarProps {
+    title?: string;
+    showBack?: boolean;
+    showClose?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    onBack?: () => void;
+    onClose?: () => void;
+    rightContent?: React.ReactNode;
+    fixed?: boolean;
+    /**
+     * 滚动透明度 (0-1)
+     * 0: 完全透明, 1: 完全不透明
+     * 用于实现滚动时导航栏逐渐显示的效果
+     */
+    scrollOpacity?: number;
+}
+/**
+ * 自定义导航栏组件
+ * 自动适配刘海屏和胶囊按钮
+ */
+declare function CustomNavBar({ title, showBack, showClose, backgroundColor, textColor, onBack, onClose, rightContent, fixed, scrollOpacity, }: CustomNavBarProps): react_jsx_runtime.JSX.Element;
+
+interface StatusBarProps {
+    backgroundColor?: string;
+    className?: string;
+}
+/**
+ * 状态栏占位组件
+ * 用于在自定义导航栏或沉浸式设计中占位状态栏高度
+ */
+declare function StatusBar({ backgroundColor, className }: StatusBarProps): react_jsx_runtime.JSX.Element;
+
+interface ImageUploaderProps {
+    value?: string[];
+    onChange?: (images: string[]) => void;
+    maxCount?: number;
+    uploadUrl?: string;
+}
+declare function ImageUploader({ value, onChange, maxCount, uploadUrl, }: ImageUploaderProps): react_jsx_runtime.JSX.Element;
+
+interface ImageGridProps {
+    images: string[];
+    maxCount?: number;
+    onImageClick?: (index: number) => void;
+}
+declare function ImageGrid({ images, maxCount, onImageClick }: ImageGridProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    key: string;
+    label: string;
+    count?: number;
+}
+interface TabsProps {
+    /**
+     * 当前激活的 tab key
+     */
+    activeKey: string;
+    /**
+     * tab 列表
+     */
+    items: TabItem[];
+    /**
+     * tab 切换回调
+     * @param key - 被点击的 tab key
+     */
+    onChange: (key: string) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+declare function Tabs({ activeKey, items, onChange, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface ContentActionBarProps {
+    /** 评论回调 */
+    onComment?: (content: string) => void | Promise<void>;
+    /** 点赞回调 */
+    onLike?: () => void;
+    /** 收藏回调 */
+    onFavorite?: () => void;
+    /** 分享回调 */
+    onShare?: () => void;
+    /** 是否已点赞 */
+    liked?: boolean;
+    /** 是否已收藏 */
+    favorited?: boolean;
+    /** 输入框占位文字 */
+    placeholder?: string;
+    /** 最大字符数 */
+    maxLength?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/**
+ * 内容操作栏组件
+ * 整合评论输入框和操作按钮（点赞/收藏/分享）
+ *
+ * 特点：
+ * - 收起状态：[说点什么...] [❤️] [⭐] [📤]
+ * - 展开状态：[多行输入框] [发送按钮]
+ * - 参考小红书交互设计
+ */
+declare function ContentActionBar({ onComment, onLike, onFavorite, onShare, liked, favorited, placeholder, maxLength, disabled, }: ContentActionBarProps): react_jsx_runtime.JSX.Element;
+
+interface SystemInfo {
+    statusBarHeight: number;
+    safeAreaInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    menuButton?: {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    navBarHeight: number;
+    windowWidth: number;
+    windowHeight: number;
+}
+declare class SystemInfoManager {
+    private info;
+    init(): Promise<SystemInfo>;
+    private setCSSVariables;
+    getInfo(): SystemInfo | null;
+    getStatusBarHeight(): number;
+    getNavBarHeight(): number;
+    getSafeAreaInsets(): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+declare const systemInfoManager: SystemInfoManager;
+
+/**
+ * 计算滚动透明度的 Hook
+ * @param threshold 达到完全透明的滚动距离（像素），默认 200
+ * @returns [scrollOpacity, handleScroll]
+ */
+declare function useScrollOpacity(threshold?: number): readonly [number, (scrollTop: number) => void];
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonType, ContentActionBar, type ContentActionBarProps, ImageGrid, ImageUploader, List, type ListProps, CustomNavBar as NavBar, StatusBar, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, Tabs as TabsDefault, type TabsProps, systemInfoManager, useScrollOpacity };

package/dist/index.d.ts

@@ -0,0 +1,246 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface TabBarItem<T = string> {
+    /** Tab 的唯一标识 */
+    key: T;
+    /** 显示文本 */
+    label: string;
+    /** 自定义渲染内容 */
+    render?: () => ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+interface TabBarProps<T = string> {
+    /** Tab 项列表 */
+    items: TabBarItem<T>[];
+    /** 当前激活的Tab（受控） */
+    activeKey?: T;
+    /** 默认激活的Tab（非受控） */
+    defaultActiveKey?: T;
+    /** Tab 切换回调 */
+    onChange?: (key: T) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 下划线宽度 */
+    indicatorWidth?: number;
+    /** 是否显示下划线 */
+    showIndicator?: boolean;
+    /** 是否粘性定位 */
+    sticky?: boolean;
+}
+declare function TabBar<T extends string = string>(props: TabBarProps<T>): react_jsx_runtime.JSX.Element;
+
+type ButtonType = 'primary' | 'default' | 'danger' | 'text';
+type ButtonSize = 'large' | 'medium' | 'small';
+interface ButtonProps {
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 按钮尺寸 */
+    size?: ButtonSize;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为块级按钮（宽度100%） */
+    block?: boolean;
+    /** 按钮文本 */
+    children?: ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 点击事件 */
+    onClick?: () => void;
+}
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ListProps<T = any> {
+    /** 列表数据 */
+    data: T[];
+    /** 自定义渲染列表项 */
+    renderItem: (item: T, index: number) => ReactNode;
+    /** 唯一键提取函数 */
+    keyExtractor?: (item: T, index: number) => string | number;
+    /** 是否正在加载 */
+    loading?: boolean;
+    /** 是否还有更多数据 */
+    hasMore?: boolean;
+    /** 下拉刷新回调 */
+    onRefresh?: () => Promise<void> | void;
+    /** 上拉加载更多回调 */
+    onLoadMore?: () => Promise<void> | void;
+    /** 空状态渲染 */
+    renderEmpty?: () => ReactNode;
+    /** 空状态提示文本 */
+    emptyText?: string;
+    /** 加载更多提示文本 */
+    loadingText?: string;
+    /** 没有更多数据提示文本 */
+    noMoreText?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 是否启用下拉刷新 */
+    enableRefresh?: boolean;
+    /** 是否启用上拉加载 */
+    enableLoadMore?: boolean;
+    /** 头部内容 */
+    header?: ReactNode;
+    /** 底部内容 */
+    footer?: ReactNode;
+}
+declare function List<T = any>(props: ListProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CustomNavBarProps {
+    title?: string;
+    showBack?: boolean;
+    showClose?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    onBack?: () => void;
+    onClose?: () => void;
+    rightContent?: React.ReactNode;
+    fixed?: boolean;
+    /**
+     * 滚动透明度 (0-1)
+     * 0: 完全透明, 1: 完全不透明
+     * 用于实现滚动时导航栏逐渐显示的效果
+     */
+    scrollOpacity?: number;
+}
+/**
+ * 自定义导航栏组件
+ * 自动适配刘海屏和胶囊按钮
+ */
+declare function CustomNavBar({ title, showBack, showClose, backgroundColor, textColor, onBack, onClose, rightContent, fixed, scrollOpacity, }: CustomNavBarProps): react_jsx_runtime.JSX.Element;
+
+interface StatusBarProps {
+    backgroundColor?: string;
+    className?: string;
+}
+/**
+ * 状态栏占位组件
+ * 用于在自定义导航栏或沉浸式设计中占位状态栏高度
+ */
+declare function StatusBar({ backgroundColor, className }: StatusBarProps): react_jsx_runtime.JSX.Element;
+
+interface ImageUploaderProps {
+    value?: string[];
+    onChange?: (images: string[]) => void;
+    maxCount?: number;
+    uploadUrl?: string;
+}
+declare function ImageUploader({ value, onChange, maxCount, uploadUrl, }: ImageUploaderProps): react_jsx_runtime.JSX.Element;
+
+interface ImageGridProps {
+    images: string[];
+    maxCount?: number;
+    onImageClick?: (index: number) => void;
+}
+declare function ImageGrid({ images, maxCount, onImageClick }: ImageGridProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    key: string;
+    label: string;
+    count?: number;
+}
+interface TabsProps {
+    /**
+     * 当前激活的 tab key
+     */
+    activeKey: string;
+    /**
+     * tab 列表
+     */
+    items: TabItem[];
+    /**
+     * tab 切换回调
+     * @param key - 被点击的 tab key
+     */
+    onChange: (key: string) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+declare function Tabs({ activeKey, items, onChange, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface ContentActionBarProps {
+    /** 评论回调 */
+    onComment?: (content: string) => void | Promise<void>;
+    /** 点赞回调 */
+    onLike?: () => void;
+    /** 收藏回调 */
+    onFavorite?: () => void;
+    /** 分享回调 */
+    onShare?: () => void;
+    /** 是否已点赞 */
+    liked?: boolean;
+    /** 是否已收藏 */
+    favorited?: boolean;
+    /** 输入框占位文字 */
+    placeholder?: string;
+    /** 最大字符数 */
+    maxLength?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/**
+ * 内容操作栏组件
+ * 整合评论输入框和操作按钮（点赞/收藏/分享）
+ *
+ * 特点：
+ * - 收起状态：[说点什么...] [❤️] [⭐] [📤]
+ * - 展开状态：[多行输入框] [发送按钮]
+ * - 参考小红书交互设计
+ */
+declare function ContentActionBar({ onComment, onLike, onFavorite, onShare, liked, favorited, placeholder, maxLength, disabled, }: ContentActionBarProps): react_jsx_runtime.JSX.Element;
+
+interface SystemInfo {
+    statusBarHeight: number;
+    safeAreaInsets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    menuButton?: {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    navBarHeight: number;
+    windowWidth: number;
+    windowHeight: number;
+}
+declare class SystemInfoManager {
+    private info;
+    init(): Promise<SystemInfo>;
+    private setCSSVariables;
+    getInfo(): SystemInfo | null;
+    getStatusBarHeight(): number;
+    getNavBarHeight(): number;
+    getSafeAreaInsets(): {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+declare const systemInfoManager: SystemInfoManager;
+
+/**
+ * 计算滚动透明度的 Hook
+ * @param threshold 达到完全透明的滚动距离（像素），默认 200
+ * @returns [scrollOpacity, handleScroll]
+ */
+declare function useScrollOpacity(threshold?: number): readonly [number, (scrollTop: number) => void];
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonType, ContentActionBar, type ContentActionBarProps, ImageGrid, ImageUploader, List, type ListProps, CustomNavBar as NavBar, StatusBar, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, Tabs as TabsDefault, type TabsProps, systemInfoManager, useScrollOpacity };