@pisell/materials 1.8.24 → 1.8.26

package/es/components/PisellCards/components/TextCard/types.d.ts

@@ -0,0 +1,270 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PisellBasicCardProps } from '../../types';
+/**
+ * 样式变体类型
+ */
+export declare type TextCardVariant = 'text' | 'filled' | 'outlined' | 'light' | 'gradient' | 'dashed';
+/**
+ * 尺寸类型
+ */
+export declare type TextCardSize = 'small' | 'default' | 'large';
+/**
+ * 宽度模式
+ */
+export declare type TextCardWidthMode = 'auto' | 'fixed' | 'full';
+/**
+ * 图标配置
+ */
+export interface IconConfig {
+    /**
+     * 图标大小（单位：px）
+     */
+    size?: number;
+    /**
+     * 图标颜色
+     */
+    color?: string;
+}
+/**
+ * 标签配置
+ */
+export interface TagConfig {
+    /**
+     * 标签颜色
+     */
+    color?: string;
+    /**
+     * 标签自定义样式
+     */
+    style?: CSSProperties;
+}
+/**
+ * 角标类型
+ */
+export declare type BadgeType = 'dot' | 'number' | 'text';
+/**
+ * 角标位置
+ */
+export declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * 角标配置
+ */
+export interface BadgeConfig {
+    /**
+     * 角标类型
+     * @default 'dot'
+     */
+    type?: BadgeType;
+    /**
+     * 角标内容（数字或文本）
+     * 当 type 为 'number' 或 'text' 时有效
+     */
+    content?: ReactNode;
+    /**
+     * 角标位置
+     * @default 'top-right'
+     */
+    position?: BadgePosition;
+    /**
+     * 角标偏移量 [x, y]
+     * 正数向右/下偏移，负数向左/上偏移
+     */
+    offset?: [number, number];
+    /**
+     * 角标颜色
+     */
+    color?: string;
+    /**
+     * 角标自定义样式
+     */
+    style?: CSSProperties;
+}
+/**
+ * 文本配置
+ */
+export interface TextConfig {
+    /**
+     * 字体大小（单位：px）
+     */
+    fontSize?: number;
+    /**
+     * 字体粗细
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     */
+    color?: string;
+    /**
+     * 最大显示行数
+     * @default 1
+     */
+    maxLines?: number;
+    /**
+     * 是否显示省略号
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    flex?: string;
+}
+/**
+ * TextCard 组件 Props
+ * 基于 PisellBasicCardProps 扩展
+ * 注意：重写 onClick 为可选属性
+ */
+export interface TextCardProps extends Omit<PisellBasicCardProps, 'onClick'> {
+    /**
+     * 卡片显示的文本内容（必填）
+     */
+    text: ReactNode;
+    /**
+     * 卡片样式变体
+     * @default 'text'
+     */
+    variant?: TextCardVariant;
+    /**
+     * 卡片尺寸
+     * @default 'default'
+     */
+    size?: TextCardSize;
+    /**
+     * 是否可点击
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 前置图标
+     * 支持 ReactNode（如 antd Icon、svg 等）
+     */
+    prefixIcon?: ReactNode;
+    /**
+     * 后置图标
+     * 支持 ReactNode（如 antd Icon、svg 等）
+     */
+    suffixIcon?: ReactNode;
+    /**
+     * 图标配置
+     * 统一配置前置和后置图标的大小和颜色
+     */
+    iconConfig?: IconConfig;
+    /**
+     * 后置标签
+     * 支持 ReactNode（如 antd Tag、Badge 等）
+     */
+    tag?: ReactNode;
+    /**
+     * 标签配置
+     */
+    tagConfig?: TagConfig;
+    /**
+     * 角标配置
+     * 用于显示红点、数字或文本提示
+     */
+    badge?: BadgeConfig;
+    /**
+     * 前置插槽
+     * 用于替换前置图标，优先级高于 prefixIcon
+     */
+    prefixSlot?: ReactNode;
+    /**
+     * 后置插槽
+     * 用于替换后置图标和标签，优先级高于 suffixIcon 和 tag
+     */
+    suffixSlot?: ReactNode;
+    /**
+     * 文本配置
+     * 用于自定义文本样式和显示行为
+     */
+    textConfig?: TextConfig;
+    /**
+     * 宽度模式
+     * - auto: 内容撑满，最大宽度 maxWidth
+     * - fixed: 固定宽度 width
+     * - full: 撑满父容器，最小宽度 28px
+     * @default 'auto'
+     */
+    widthMode?: TextCardWidthMode;
+    /**
+     * 固定宽度值
+     * 当 widthMode='fixed' 时有效
+     */
+    width?: number | string;
+    /**
+     * 最大宽度
+     * 当 widthMode='auto' 时有效
+     * @default 400
+     */
+    maxWidth?: number | string;
+    /**
+     * 点击事件
+     * 当 clickable=true 且不在 disabled/loading 状态时触发
+     * 注意：PisellBasicCardProps 中的 onClick 是必填的，这里重新定义为可选
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * 自定义渲染函数
+     * 完全自定义组件的渲染内容
+     * 当提供此函数时，组件内置的渲染逻辑将被忽略
+     */
+    render?: (props: TextCardProps) => ReactNode;
+}
+/**
+ * TextContent 组件 Props
+ * 文本内容子组件
+ */
+export interface TextContentProps {
+    /**
+     * 文本内容
+     */
+    text: ReactNode;
+    /**
+     * 文本配置
+     */
+    textConfig?: TextConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    active?: PisellBasicCardProps['active'];
+}
+/**
+ * IconWrapper 组件 Props
+ * 图标包装子组件
+ */
+export interface IconWrapperProps {
+    /**
+     * 图标内容
+     */
+    icon: ReactNode;
+    /**
+     * 图标配置
+     */
+    config?: IconConfig;
+    /**
+     * 图标位置
+     */
+    position: 'prefix' | 'suffix';
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * BadgeWrapper 组件 Props
+ * 角标包装子组件
+ */
+export interface BadgeWrapperProps {
+    /**
+     * 角标配置
+     */
+    badge?: BadgeConfig;
+    /**
+     * 子元素
+     */
+    children: ReactNode;
+}

package/es/components/PisellCards/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 declare const PisellCards: {
-    TabCard: (props: any) => JSX.Element;
-    TextCard: (props: any) => JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
-    MultilevelCard: (props: any) => JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
+    TabCard: (props: any) => import("react").JSX.Element;
+    TextCard: (props: any) => import("react").JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => import("react").JSX.Element;
+    MultilevelCard: (props: any) => import("react").JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => import("react").JSX.Element;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';

package/es/components/PisellLayouts/index.d.ts

@@ -15,7 +15,7 @@
  */
 /// <reference types="react" />
 declare const PisellLayouts: {
-    BasicGrid: <T>(props: import("../PisellBasicGrid").PisellBasicGridProps<T>) => JSX.Element;
+    BasicGrid: <T>(props: import("../PisellBasicGrid").PisellBasicGridProps<T>) => import("react").JSX.Element;
     ScrollView: import("react").ForwardRefExoticComponent<Omit<import("../PisellScrollView").PisellScrollViewProps, "ref"> & import("react").RefAttributes<import("../PisellScrollView").PisellScrollViewRef>>;
     FloorMapLayout: <T_1 extends import("../pisellFloorMapLayout").FloorMapItemBase = import("../pisellFloorMapLayout").FloorMapItemBase>(props: import("../pisellFloorMapLayout").PisellFloorMapLayoutProps<T_1> & {
         ref?: import("react").Ref<import("../pisellFloorMapLayout").PisellFloorMapLayoutRef> | undefined;
@@ -26,7 +26,7 @@ declare const PisellLayouts: {
     Header: import("react").FC<import("../pisellLayout/header").PisellHeaderProps>;
     Sider: import("react").FC<import("../pisellLayout/sider").PisellSiderProps>;
     Container: <T_2 extends import("../pisellContainer").RenderType>(props: import("../pisellContainer").PisellContainerProps<T_2>) => any;
-    Row: (props: import("../pisellRow").PisellRowProps) => JSX.Element;
+    Row: (props: import("../pisellRow").PisellRowProps) => import("react").JSX.Element;
     ViewGrid: import("react").FC<import("../pisellViewGrid").PisellViewGridProps>;
 };
 export default PisellLayouts;

package/es/components/PisellMetrics/index.d.ts

@@ -16,8 +16,8 @@
 /// <reference types="react" />
 declare const PisellMetrics: {
     MetricCard: import("react").FC<import("../pisellMetricCard").PisellMetricCardProps>;
-    StatisticList: (props: import("../pisellStatisticList").PisellStatisticListProps) => JSX.Element;
-    MetricItem: (props: import("../cardMetricItem").PisellStatisticProps) => JSX.Element;
+    StatisticList: (props: import("../pisellStatisticList").PisellStatisticListProps) => import("react").JSX.Element;
+    MetricItem: (props: import("../cardMetricItem").PisellStatisticProps) => import("react").JSX.Element;
 };
 export default PisellMetrics;
 export type { PisellMetricCardProps } from '../pisellMetricCard';

package/es/components/PisellScrollView/PisellScrollView.stories.d.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellScrollView from './PisellScrollView';
+/**
+ * PisellScrollView 滚动视图组件
+ *
+ * 提供丰富的滚动功能，包括滚动方向控制、滚动条样式、滚动按钮、滚动事件监听、
+ * 视图监听、吸附滚动等功能
+ */
+declare const meta: Meta<typeof PisellScrollView>;
+export default meta;
+declare type Story = StoryObj<typeof PisellScrollView>;
+/**
+ * 基础用法 - 垂直滚动
+ */
+export declare const Default: Story;
+/**
+ * 水平滚动
+ */
+export declare const HorizontalScroll: Story;
+/**
+ * 双向滚动
+ */
+export declare const BothDirections: Story;
+/**
+ * 滚动条样式 - 细滚动条
+ */
+export declare const ThinScrollbar: Story;
+/**
+ * 滚动条样式 - 隐藏滚动条
+ */
+export declare const HiddenScrollbar: Story;
+/**
+ * 滚动按钮 - 右侧箭头
+ */
+export declare const RightArrows: Story;
+/**
+ * 滚动按钮 - 左右箭头
+ */
+export declare const LeftRightArrows: Story;
+/**
+ * 滚动按钮 - 返回顶部
+ */
+export declare const BackToTop: Story;
+/**
+ * 滚动事件监听
+ */
+export declare const ScrollEvents: Story;
+/**
+ * 吸附滚动 - 垂直方向
+ */
+export declare const SnapScrollVertical: Story;
+/**
+ * 吸附滚动 - 水平方向
+ */
+export declare const SnapScrollHorizontal: Story;
+/**
+ * 视图监听 - IntersectionObserver
+ */
+export declare const IntersectionObserver: Story;
+/**
+ * Ref 方法调用
+ */
+export declare const RefMethods: Story;
+/**
+ * 滚动到指定元素
+ */
+export declare const ScrollToElement: Story;
+/**
+ * 自定义尺寸
+ */
+export declare const CustomSize: Story;
+/**
+ * 综合示例 - 商品列表
+ */
+export declare const ProductList: Story;
+/**
+ * 综合示例 - 横向标签页
+ */
+export declare const HorizontalTabs: Story;
+/**
+ * 交互测试 - 验证组件渲染
+ */
+export declare const RenderTest: Story;
+/**
+ * 交互测试 - 滚动按钮点击
+ */
+export declare const ScrollButtonTest: Story;

package/es/components/PisellScrollView/components/Actions/index.d.ts

@@ -8,5 +8,5 @@ interface ActionsContainerProps {
     containerRef: React.RefObject<HTMLDivElement>;
     onClick: (direction: 'left' | 'right' | 'top' | 'bottom') => void;
 }
-declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => JSX.Element | null;
+declare const ActionsContainer: ({ containerRef, scrollState, overflow, scrollActionsConfig, onClick, }: ActionsContainerProps) => React.JSX.Element | null;
 export default ActionsContainer;

package/es/components/PisellScrollView/hooks/useScrollEvents.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+interface UseScrollEventsProps {
+    containerRef: RefObject<HTMLElement>;
+    onScroll?: PisellScrollViewProps['onScroll'];
+    onScrollStart?: PisellScrollViewProps['onScrollStart'];
+    onScrollEnd?: PisellScrollViewProps['onScrollEnd'];
+    onReachTop?: PisellScrollViewProps['onReachTop'];
+    onReachBottom?: PisellScrollViewProps['onReachBottom'];
+    onReachLeft?: PisellScrollViewProps['onReachLeft'];
+    onReachRight?: PisellScrollViewProps['onReachRight'];
+    reachThreshold?: number;
+    scrollEndDelay?: number;
+    updateScrollState: () => void;
+    scrollState: ScrollEventData;
+}
+export declare const useScrollEvents: ({ containerRef, onScroll, onScrollStart, onScrollEnd, onReachTop, onReachBottom, onReachLeft, onReachRight, reachThreshold, scrollEndDelay, updateScrollState, scrollState, }: UseScrollEventsProps) => {
+    handleScroll: () => void;
+};
+export {};

package/es/components/PisellScrollView/index.d.ts

@@ -0,0 +1,3 @@
+import PisellScrollView from './PisellScrollView';
+export type { PisellScrollViewProps, PisellScrollViewRef } from './types';
+export default PisellScrollView;

package/es/components/PisellSteps/PisellSteps.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './PisellSteps.less';
+import type { PisellStepsProps } from './types';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ *
+ * @author Pisell Team
+ * @version 1.0.0
+ */
+declare const PisellSteps: React.FC<PisellStepsProps>;
+export default PisellSteps;

package/es/components/PisellSteps/PisellSteps.stories.d.ts

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellSteps from './PisellSteps';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ */
+declare const meta: Meta<typeof PisellSteps>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSteps>;
+/**
+ * 基础用法 - 默认步骤条
+ */
+export declare const Default: Story;
+/**
+ * 非受控模式
+ * @description 使用 defaultCurrent 设置初始步骤
+ */
+export declare const Uncontrolled: Story;
+/**
+ * 垂直方向
+ */
+export declare const Vertical: Story;
+/**
+ * 点状步骤条
+ * @description 通过 progressDot 属性启用点状样式
+ */
+export declare const Dot: Story;
+/**
+ * 自定义点状渲染
+ * @description 使用函数自定义点状图标的渲染
+ */
+export declare const CustomProgressDot: Story;
+/**
+ * 导航步骤条
+ */
+export declare const Navigation: Story;
+/**
+ * 小尺寸
+ */
+export declare const Small: Story;
+/**
+ * 大尺寸
+ */
+export declare const Large: Story;
+/**
+ * 标签垂直布局
+ * @description 标签在图标下方显示
+ */
+export declare const LabelVertical: Story;
+/**
+ * 错误状态
+ */
+export declare const ErrorStatus: Story;
+/**
+ * 自定义步骤状态
+ * @description 每个步骤可以单独设置状态
+ */
+export declare const CustomStatus: Story;
+/**
+ * 可点击步骤
+ */
+export declare const Clickable: Story;
+/**
+ * 禁止点击已完成步骤
+ * @description 设置 allowClickFinished 为 false
+ */
+export declare const DisallowClickFinished: Story;
+/**
+ * 禁用特定步骤
+ * @description 通过 disabled 属性禁用某个步骤
+ */
+export declare const DisabledStep: Story;
+/**
+ * 自定义图标
+ */
+export declare const CustomIcon: Story;
+/**
+ * 完成图标
+ */
+export declare const FinishIcon: Story;
+/**
+ * 栅格布局
+ * @description 启用栅格布局，自定义列数
+ */
+export declare const GridLayout: Story;
+/**
+ * 自定义图标与文本间距
+ * @description 通过 itemGap 属性自定义间距
+ */
+export declare const CustomItemGap: Story;
+/**
+ * 移动端 - 完整模式
+ * @description 移动端显示完整步骤条
+ */
+export declare const MobileModeFull: Story;
+/**
+ * 移动端 - 当前步骤模式
+ * @description 只显示当前步骤信息
+ */
+export declare const MobileModeCurrent: Story;
+/**
+ * 移动端 - 自动模式
+ * @description 根据屏幕宽度自动切换显示模式
+ */
+export declare const MobileModeAuto: Story;
+/**
+ * 自定义移动端断点
+ * @description 通过 mobileBreakpoint 自定义断点宽度
+ */
+export declare const CustomMobileBreakpoint: Story;
+/**
+ * 自定义起始索引
+ * @description 通过 initial 设置起始步骤索引
+ */
+export declare const InitialIndex: Story;
+/**
+ * 隐藏特定步骤
+ * @description 通过 hidden 属性动态隐藏步骤
+ */
+export declare const HiddenStep: Story;
+/**
+ * 带子标题
+ * @description 步骤可以包含子标题
+ */
+export declare const WithSubTitle: Story;
+/**
+ * 响应式步骤条
+ * @description 开启响应式后会自动调整布局
+ */
+export declare const Responsive: Story;
+/**
+ * 完整功能演示
+ * @description 展示多种功能的组合使用
+ */
+export declare const FullFeature: Story;
+/**
+ * 多步骤流程
+ * @description 更多步骤的场景
+ */
+export declare const ManySteps: Story;
+/**
+ * 购物流程示例
+ * @description 模拟真实的购物流程
+ */
+export declare const ShoppingFlow: Story;
+/**
+ * 交互测试 - 点击步骤
+ */
+export declare const InteractionTest: Story;
+/**
+ * 交互测试 - 验证组件渲染
+ */
+export declare const RenderTest: Story;

package/es/components/PisellSuperTabs/PisellSuperTabs.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './PisellSuperTabs.less';
+import type { PisellSuperTabsProps } from './types';
+interface PisellSuperTabsRef {
+    scrollItemByRowKey: (key: string) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<PisellSuperTabsProps<unknown> & React.RefAttributes<PisellSuperTabsRef>>;
+export default _default;

package/es/components/PisellSuperTabs/hooks/useTabsState.d.ts

@@ -0,0 +1,7 @@
+import { UseTabsStateParams, UseTabsStateReturn } from '../types';
+/**
+ * Tabs 状态管理 Hook
+ * @description 处理受控/非受控模式的状态管理
+ * @template T - 数据项类型
+ */
+export declare const useTabsState: <T = any>(params: UseTabsStateParams<T>) => UseTabsStateReturn<T>;