knight-ui 1.0.0

package/component/display/Timeline.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type TimelineMode = "left" | "alternate" | "right";
+declare class TimelineItem extends AbstractUI<TimelineItemProps, UIState> {
+    static displayName: string;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface TimelineItemProps extends UIProps {
+    time?: React.ReactNode;
+    dot?: React.ReactNode;
+    color?: string;
+    type?: "default" | "success" | "warning" | "danger";
+}
+/**
+ * 时间轴。
+ */
+export declare class Timeline extends AbstractUI<TimelineProps, UIState> {
+    static Item: typeof TimelineItem;
+    constructor(props: TimelineProps);
+    protected OnRenderContent(): React.ReactElement;
+    private extractItems;
+}
+export interface TimelineProps extends UIProps {
+    mode?: TimelineMode;
+    pending?: React.ReactNode;
+    pendingDot?: React.ReactNode;
+}
+export {};

package/component/display/Tooltip.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type TooltipPosition = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
+type TooltipTheme = "dark" | "light";
+/**
+ * 工具提示。
+ * 12 方位自动定位 + 箭头指向触发元素.
+ */
+export declare class Tooltip extends AbstractUI<TooltipProps, TooltipState> {
+    private zIndex;
+    private wrapperRef;
+    private animTimer;
+    private leaveTimer;
+    private enterTimer;
+    constructor(props: TooltipProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<TooltipProps>): void;
+    componentWillUnmount(): void;
+    private enter;
+    private exit;
+    private handleClick;
+    private cleanup;
+    protected OnRenderContent(): React.ReactElement;
+    private getArrowStyle;
+    private calcPosition;
+}
+type TooltipAnimPhase = "entering" | "entered" | "leaving" | "exited";
+export interface TooltipProps extends UIProps {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    content?: React.ReactNode;
+    title?: React.ReactNode;
+    position?: TooltipPosition;
+    trigger?: "hover" | "click" | "focus" | "custom";
+    theme?: TooltipTheme;
+    spacing?: number;
+    offset?: number;
+    showArrow?: boolean;
+    motion?: boolean;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    stopPropagation?: boolean;
+    wrapperClassName?: string;
+    getPopupContainer?: () => HTMLElement;
+    onVisibleChange?: (visible: boolean) => void;
+}
+interface TooltipState extends UIState {
+    animPhase: TooltipAnimPhase;
+}
+export {};

package/component/display/UserGuide.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+export interface GuideStep {
+    target?: string;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+}
+/**
+ * 用户引导。
+ */
+export declare class UserGuide extends AbstractUI<UserGuideProps, UserGuideState> {
+    constructor(props: UserGuideProps);
+    componentDidUpdate(prevProps: Readonly<UserGuideProps>): void;
+    private goTo;
+    private handleSkip;
+    private handleFinish;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface UserGuideProps extends UIProps {
+    steps?: GuideStep[];
+    visible?: boolean;
+    currentStep?: number;
+    onChange?: (step: number) => void;
+    onSkip?: () => void;
+    onFinish?: () => void;
+}
+interface UserGuideState extends UIState {
+    currentStep: number;
+}
+export {};

package/component/display/VChart.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type ChartType = "line" | "bar" | "pie" | "area" | "scatter";
+/**
+ * 图表。
+ * 轻量级 SVG 图表渲染器.
+ */
+export declare class VChart extends AbstractUI<VChartProps, UIState> {
+    constructor(props: VChartProps);
+    protected OnRenderContent(): React.ReactElement;
+    private renderChart;
+}
+export interface VChartProps extends UIProps {
+    type?: ChartType;
+    data?: {
+        label: string;
+        value: number;
+    }[];
+    width?: number;
+    height?: number;
+    colors?: string[];
+}
+export {};

package/component/display/index.d.ts

@@ -0,0 +1,50 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps } from "./Avatar";
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";
+export { Card } from "./Card";
+export type { CardProps } from "./Card";
+export { Collapse } from "./Collapse";
+export type { CollapseProps } from "./Collapse";
+export { Collapsible } from "./Collapsible";
+export type { CollapsibleProps } from "./Collapsible";
+export { Cropper } from "./Cropper";
+export type { CropperProps } from "./Cropper";
+export { Descriptions } from "./Descriptions";
+export type { DescriptionsProps, DescriptionsData } from "./Descriptions";
+export { Empty } from "./Empty";
+export type { EmptyProps } from "./Empty";
+export { Highlight } from "./Highlight";
+export type { HighlightProps } from "./Highlight";
+export { Image } from "./Image";
+export type { ImageProps } from "./Image";
+export { List } from "./List";
+export type { ListProps } from "./List";
+export { Tag } from "./Tag";
+export type { TagProps } from "./Tag";
+export { Calendar } from "./Calendar";
+export type { CalendarProps } from "./Calendar";
+export { Carousel } from "./Carousel";
+export type { CarouselProps } from "./Carousel";
+export { Dropdown } from "./Dropdown";
+export type { DropdownProps, DropdownItem } from "./Dropdown";
+export { Modal } from "./Modal";
+export type { ModalProps } from "./Modal";
+export { OverflowList } from "./OverflowList";
+export type { OverflowListProps } from "./OverflowList";
+export { Popover } from "./Popover";
+export type { PopoverProps } from "./Popover";
+export { ScrollList } from "./ScrollList";
+export type { ScrollListProps } from "./ScrollList";
+export { SideSheet } from "./SideSheet";
+export type { SideSheetProps } from "./SideSheet";
+export { Table } from "./Table";
+export type { TableProps, TableColumn } from "./Table";
+export { Timeline } from "./Timeline";
+export type { TimelineProps, TimelineItemProps } from "./Timeline";
+export { Tooltip } from "./Tooltip";
+export type { TooltipProps } from "./Tooltip";
+export { UserGuide } from "./UserGuide";
+export type { UserGuideProps, GuideStep } from "./UserGuide";
+export { VChart } from "./VChart";
+export type { VChartProps } from "./VChart";

package/component/feedback/Banner.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+import type { IconType } from "../basic/Icon";
+export type BannerType = "info" | "success" | "warning" | "danger";
+interface BannerState extends UIState {
+    closing: boolean;
+}
+/**
+ * 通知横幅 — 点击整个横幅触发关闭,带 fade+collapse 过渡动画。
+ */
+export declare class Banner extends AbstractUI<BannerProps, BannerState> {
+    private animTimer;
+    constructor(props: BannerProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<BannerProps>): void;
+    componentWillUnmount(): void;
+    private handleClose;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface BannerProps extends UIProps {
+    visible?: boolean;
+    type?: BannerType;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: IconType;
+    bordered?: boolean;
+    fullMode?: boolean;
+    actions?: React.ReactNode;
+    onClose?: () => void;
+}
+export {};

package/component/feedback/Feedback.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type FeedbackType = "emoji" | "text" | "radio" | "checkbox" | "custom";
+interface FeedbackOption {
+    label: string;
+    value: string;
+}
+/**
+ * 反馈组件。
+ */
+export declare class Feedback extends AbstractUI<FeedbackProps, FeedbackState> {
+    private zIndex;
+    private animTimer;
+    constructor(props: FeedbackProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<FeedbackProps>): void;
+    componentWillUnmount(): void;
+    private enter;
+    private exit;
+    private cleanup;
+    private handleClose;
+    private handleSubmit;
+    private handleValueChange;
+    private handleTextChange;
+    private renderStarRating;
+    private renderTextInput;
+    private renderRadioOptions;
+    private renderCheckboxOptions;
+    protected OnRenderContent(): React.ReactElement;
+}
+type FeedbackAnimPhase = "entering" | "entered" | "leaving" | "exited";
+export interface FeedbackProps extends UIProps {
+    type?: FeedbackType;
+    title?: React.ReactNode;
+    options?: FeedbackOption[];
+    /** 星级评分图标列表，默认 5 个 star */
+    starList?: Array<{
+        icon: React.FC<any>;
+        label: string;
+    }>;
+    placeholder?: string;
+    thankText?: string;
+    /** 受控: 是否显示 */
+    visible?: boolean;
+    /** 值变化实时回调 */
+    onValueChange?: (data: {
+        value: string;
+        text: string;
+    }) => void;
+    onOk?: (result: {
+        value: string;
+        text: string;
+    }) => void;
+    onCancel?: () => void;
+}
+interface FeedbackState extends UIState {
+    animPhase: FeedbackAnimPhase;
+    selectedValue: string;
+    feedbackText: string;
+    submitted: boolean;
+}
+export {};

package/component/feedback/Notification.d.ts

@@ -0,0 +1,38 @@
+type NotificationTheme = "light" | "normal";
+type NotificationPosition = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
+interface NotificationConfig {
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    duration?: number;
+    position?: NotificationPosition;
+    icon?: React.ReactNode;
+    theme?: NotificationTheme;
+    showClose?: boolean;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    onClick?: (e: MouseEvent) => void;
+    onClose?: () => void;
+    onCloseClick?: (id: number) => void;
+    id?: number;
+}
+/**
+ * 通知。
+ * 静态方法: Notification.info/success/warning/error/open/close/destroyAll/config
+ */
+export declare class Notification {
+    private static idCounter;
+    private static instances;
+    private static containerMap;
+    private static globalConfig;
+    static config(cfg: Partial<NotificationConfig>): void;
+    private static getContainer;
+    static open(config: NotificationConfig): number;
+    static close(id: number): void;
+    static destroyAll(): void;
+    static success(config: Omit<NotificationConfig, "icon"> | string): number;
+    static info(config: Omit<NotificationConfig, "icon"> | string): number;
+    static warning(config: Omit<NotificationConfig, "icon"> | string): number;
+    static error(config: Omit<NotificationConfig, "icon"> | string): number;
+    private static renderAll;
+}
+export {};

package/component/feedback/Popconfirm.d.ts

@@ -0,0 +1,75 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type PopconfirmPosition = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom";
+type PopconfirmTrigger = "click" | "hover" | "focus" | "custom";
+/**
+ * 气泡确认框。
+ * 使用方式: <Popconfirm><Button>删除</Button></Popconfirm>
+ */
+export declare class Popconfirm extends AbstractUI<PopconfirmProps, PopconfirmState> {
+    private zIndex;
+    private enterTimer;
+    private boundPositionUpdater;
+    private _triggerEl;
+    private _popupEl;
+    private _clickOutsideHandler;
+    constructor(props: PopconfirmProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<PopconfirmProps>): void;
+    componentWillUnmount(): void;
+    private enter;
+    private exit;
+    private cleanup;
+    private toggle;
+    private startTracking;
+    private stopTracking;
+    private getChildRect;
+    private calcPosition;
+    private handleConfirm;
+    private handleCancel;
+    private handleTriggerClick;
+    protected OnRenderContent(): React.ReactElement;
+    private arrowPosition;
+}
+type PopconfirmAnimPhase = "entering" | "entered" | "leaving" | "exited";
+export interface PopconfirmProps extends UIProps {
+    /** 受控: 是否显示 */
+    visible?: boolean;
+    /** 非受控: 默认是否显示 */
+    defaultVisible?: boolean;
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 内容 */
+    content?: React.ReactNode;
+    /** 自定义图标 */
+    icon?: React.ReactNode;
+    /** 弹出位置 */
+    position?: PopconfirmPosition;
+    /** 触发方式 */
+    trigger?: PopconfirmTrigger;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 确认按钮文本 */
+    okText?: string;
+    /** 取消按钮文本 */
+    cancelText?: string;
+    /** 确认按钮 Props */
+    okButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** 取消按钮 Props */
+    cancelButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** 弹出偏移距离 */
+    offset?: number;
+    /** z-index */
+    zIndex?: number;
+    /** 确认回调 */
+    onConfirm?: (e: React.MouseEvent) => void;
+    /** 取消回调 */
+    onCancel?: (e: React.MouseEvent) => void;
+    /** 显示/隐藏变化回调 */
+    onVisibleChange?: (visible: boolean) => void;
+}
+interface PopconfirmState extends UIState {
+    animPhase: PopconfirmAnimPhase;
+    popVisible: boolean;
+}
+export {};

package/component/feedback/Progress.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+type ProgressType = "line" | "circle";
+type ProgressStatus = "normal" | "success" | "exception";
+/**
+ * 进度条。
+ * 支持线形和圆形两种模式.
+ */
+export declare class Progress extends AbstractUI<ProgressProps, UIState> {
+    constructor(props: ProgressProps);
+    private getStatusColor;
+    private getFillBackground;
+    private renderLineSegments;
+    private renderLine;
+    private renderCircle;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface ProgressProps extends UIProps {
+    type?: ProgressType;
+    percent?: number;
+    /** 进度条颜色, Semi 命名为 stroke */
+    stroke?: string | Array<{
+        percent: number;
+        color: string;
+    }>;
+    /** strokeColor 映射到 stroke */
+    strokeColor?: string;
+    strokeWidth?: number;
+    /** Semi: 条形尺寸 */
+    size?: "small" | "default";
+    /** Semi: 圆形自定义宽度 */
+    width?: number;
+    /** 是否显示信息, Semi 默认 false */
+    showInfo?: boolean;
+    /** 自定义文本格式 */
+    format?: (percent: number) => React.ReactNode;
+    /** 轨道颜色 */
+    orbitStroke?: string;
+    /** 端点形状 */
+    strokeLinecap?: "round" | "square";
+    /** 条形方向 */
+    direction?: "horizontal" | "vertical";
+    status?: ProgressStatus;
+    /** hover 时显示值 Tooltip @default false */
+    tooltip?: boolean;
+    /** Tooltip 内容,默认显示百分比 */
+    tooltipContent?: string;
+}
+export {};

package/component/feedback/Skeleton.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 骨架屏。
+ * 包含 Skeleton, Skeleton.Avatar, Skeleton.Title, Skeleton.Paragraph, Skeleton.Button.
+ */
+declare class SkeletonAvatar extends AbstractUI<SkeletonAvatarProps, UIState> {
+    static displayName: string;
+    constructor(props: SkeletonAvatarProps);
+    protected OnRenderContent(): React.ReactElement;
+    private static getSize;
+}
+interface SkeletonAvatarProps extends UIProps {
+    size?: "extra-extra-small" | "extra-small" | "small" | "medium" | "large" | "extra-large";
+    shape?: "circle" | "square";
+}
+declare class SkeletonTitle extends AbstractUI<SkeletonTitleProps, UIState> {
+    static displayName: string;
+    constructor(props: SkeletonTitleProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+interface SkeletonTitleProps extends UIProps {
+    width?: string | number;
+}
+declare class SkeletonParagraph extends AbstractUI<SkeletonParagraphProps, UIState> {
+    static displayName: string;
+    constructor(props: SkeletonParagraphProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+interface SkeletonParagraphProps extends UIProps {
+    rows?: number;
+    width?: string | number | (string | number)[];
+}
+declare class SkeletonButton extends AbstractUI<SkeletonButtonProps, UIState> {
+    static displayName: string;
+    constructor(props: SkeletonButtonProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+interface SkeletonButtonProps extends UIProps {
+    size?: "small" | "default" | "large";
+}
+declare class SkeletonImage extends AbstractUI<SkeletonImageProps, UIState> {
+    static displayName: string;
+    constructor(props: SkeletonImageProps);
+    protected OnRenderContent(): React.ReactElement;
+    private static getSize;
+}
+interface SkeletonImageProps extends UIProps {
+    size?: "extra-small" | "small" | "medium" | "large" | "extra-large";
+}
+/**
+ * 骨架屏容器 — 包裹子内容,loading 为 true 时显示骨架.
+ */
+export declare class Skeleton extends AbstractUI<SkeletonProps, UIState> {
+    static Avatar: typeof SkeletonAvatar;
+    static Title: typeof SkeletonTitle;
+    static Paragraph: typeof SkeletonParagraph;
+    static Button: typeof SkeletonButton;
+    static Image: typeof SkeletonImage;
+    constructor(props: SkeletonProps);
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface SkeletonProps extends UIProps {
+    loading?: boolean;
+    active?: boolean;
+    placeholder?: React.ReactNode;
+}
+export {};

package/component/feedback/Spin.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { AbstractUI, type UIProps, type UIState } from "../../base";
+/**
+ * 加载器。
+ */
+export declare class Spin extends AbstractUI<SpinProps, SpinState> {
+    private _delayTimer;
+    constructor(props: SpinProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<SpinProps>): void;
+    componentWillUnmount(): void;
+    private getSpinnerSize;
+    private renderIndicator;
+    protected OnRenderContent(): React.ReactElement;
+}
+export interface SpinProps extends UIProps {
+    spinning?: boolean;
+    size?: "small" | "middle" | "large";
+    tip?: React.ReactNode;
+    indicator?: React.ReactNode;
+    /** 延迟显示加载效果的时间(ms), Semi 默认 0 */
+    delay?: number;
+    /** 包裹模式下子内容的样式 */
+    childStyle?: React.CSSProperties;
+    /** 最外层 wrapper 的 className */
+    wrapperClassName?: string;
+}
+interface SpinState extends UIState {
+    _showSpinner: boolean;
+}
+export {};

package/component/feedback/Toast.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+type ToastTheme = "light" | "normal";
+interface ToastConfig {
+    content: React.ReactNode;
+    duration?: number;
+    icon?: React.ReactNode;
+    showClose?: boolean;
+    theme?: ToastTheme;
+    /** 堆叠模式: 多个 Toast 纸摞重叠，hover 展开 */
+    stack?: boolean;
+    textMaxWidth?: number | string;
+    top?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    right?: number | string;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    onClick?: (e: MouseEvent) => void;
+    onClose?: () => void;
+    id?: number;
+}
+/**
+ * 轻量提示。
+ */
+export declare class Toast {
+    static config(cfg: Partial<ToastConfig>): void;
+    static open(config: ToastConfig): number;
+    /** 更新指定 id 的 Toast 内容 */
+    static update(id: number, config: Partial<ToastConfig>): void;
+    static close(id: number): void;
+    static destroyAll(): void;
+    static success(content: React.ReactNode, duration?: number): number;
+    static info(content: React.ReactNode, duration?: number): number;
+    static warning(content: React.ReactNode, duration?: number): number;
+    static error(content: React.ReactNode, duration?: number): number;
+    /**
+     * 消费 Context — 返回 { contextHolder, success, info, warning, error, close, open, destroyAll }.
+     * contextHolder 需插入到组件树中以获取上下文。
+     */
+    static useToast(): ToastContextValue;
+}
+export interface ToastContextValue {
+    contextHolder: React.ReactElement;
+    open: (config: ToastConfig) => number;
+    update: (id: number, config: Partial<ToastConfig>) => void;
+    close: (id: number) => void;
+    destroyAll: () => void;
+    success: (content: React.ReactNode, duration?: number) => number;
+    info: (content: React.ReactNode, duration?: number) => number;
+    warning: (content: React.ReactNode, duration?: number) => number;
+    error: (content: React.ReactNode, duration?: number) => number;
+}
+export declare class ToastFactory {
+    /**
+     * 创建自定义配置的 Toast 实例.
+     * 返回的 toast 对象拥有与 Toast 静态方法相同的 API.
+     */
+    static create(config: Partial<ToastConfig>): Omit<ToastContextValue, "contextHolder">;
+}
+export {};

package/component/feedback/index.d.ts

@@ -0,0 +1,14 @@
+export { Banner } from "./Banner";
+export type { BannerProps, BannerType } from "./Banner";
+export { Feedback } from "./Feedback";
+export type { FeedbackProps } from "./Feedback";
+export { Notification } from "./Notification";
+export { Popconfirm } from "./Popconfirm";
+export type { PopconfirmProps } from "./Popconfirm";
+export { Progress } from "./Progress";
+export type { ProgressProps } from "./Progress";
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./Skeleton";
+export { Spin } from "./Spin";
+export type { SpinProps } from "./Spin";
+export { Toast } from "./Toast";

package/component/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./basic";
+export * from "./input";
+export * from "./navigation";
+export * from "./display";
+export * from "./feedback";
+export * from "./plus";
+export * from "./ai";
+export * from "./other";