@huibo-ui/react-antd 1.0.0

package/lib/components/TimePicker.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbTimePicker } from '@huibo-ui/react';
+export function TimePicker(props) {
+    return _jsx(HbTimePicker, { modelValue: props.value, format: props.format, clearable: props.allowClear, disabled: props.disabled, size: props.size === 'middle' ? 'default' : props.size, placeholder: props.placeholder, style: props.style, onHbChange: (e) => props.onChange?.(e.detail) });
+}

package/lib/components/Timeline.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function Timeline(props: {
+    items?: any[];
+    mode?: 'left' | 'right' | 'alternate';
+    reverse?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/lib/components/Timeline.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbTimeline } from '@huibo-ui/react';
+export function Timeline(props) {
+    return _jsx(HbTimeline, { items: props.items, direction: props.mode, reverse: props.reverse });
+}

package/lib/components/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function Tooltip(props: {
+    title?: React.ReactNode;
+    placement?: string;
+    children?: React.ReactNode;
+    color?: string;
+}): React.JSX.Element;

package/lib/components/Tooltip.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbTooltip } from '@huibo-ui/react';
+export function Tooltip(props) {
+    return _jsx(HbTooltip, { content: typeof props.title === 'string' ? props.title : '', position: (props.placement || 'top'), children: props.children });
+}

package/lib/components/Tour.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function Tour(props: {
+    open?: boolean;
+    steps?: any[];
+    onClose?: () => void;
+}): React.JSX.Element;

package/lib/components/Tour.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbTour } from '@huibo-ui/react';
+export function Tour(props) {
+    return _jsx(HbTour, { steps: props.steps, onHbClose: () => props.onClose?.() });
+}

package/lib/components/Tree.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface TreeProps {
+    treeData?: any[];
+    checkable?: boolean;
+    checkStrictly?: boolean;
+    showIcon?: boolean;
+    showLine?: boolean;
+    checkedKeys?: any[];
+    selectedKeys?: any[];
+    expandedKeys?: any[];
+    defaultExpandAll?: boolean;
+    fieldNames?: {
+        title?: string;
+        key?: string;
+        children?: string;
+    };
+    onCheck?: (keys: any[]) => void;
+    onSelect?: (keys: any[]) => void;
+    onExpand?: (keys: any[]) => void;
+    style?: React.CSSProperties;
+}
+export declare function Tree(props: TreeProps): React.JSX.Element;

package/lib/components/Tree.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { HbTree } from '@huibo-ui/react';
+/**
+ * 把节点 title（可能是 React 元素 / JSX）转成纯文本。
+ * Stencil hb-tree 无法直接渲染被冻结的 React 元素（会触发
+ * "Cannot add property $elm$, object is not extensible"），所以兼容层先把 title 拍平成字符串。
+ */
+const titleToText = (title) => {
+    if (title == null || typeof title === 'boolean')
+        return '';
+    if (typeof title === 'string' || typeof title === 'number')
+        return String(title);
+    if (typeof title === 'object') {
+        const child = title?.props?.children;
+        if (typeof child === 'string')
+            return child;
+        if (typeof child === 'number')
+            return String(child);
+        if (Array.isArray(child)) {
+            return child
+                .map((c) => (typeof c === 'string' || typeof c === 'number' ? String(c) : ''))
+                .join('');
+        }
+        return '';
+    }
+    return '';
+};
+export function Tree(props) {
+    const { treeData, fieldNames } = props;
+    const titleField = fieldNames?.title || 'title';
+    const keyField = fieldNames?.key || 'key';
+    const childField = fieldNames?.children || 'children';
+    // 1) 适配 fieldNames；2) 把 title（含 React 元素）统一转成字符串，避免 hb-tree 渲染冻结对象
+    const normalizedData = React.useMemo(() => {
+        const walk = (nodes) => (nodes || []).map((n) => ({
+            key: String(n[keyField]),
+            title: titleToText(n[titleField]),
+            disabled: !!n.disabled,
+            ...(n[childField] && n[childField].length > 0 ? { children: walk(n[childField]) } : {}),
+        }));
+        return walk(treeData || []);
+    }, [treeData, titleField, keyField, childField]);
+    return (_jsx(HbTree, { data: normalizedData, checkable: props.checkable, checkedKeys: props.checkedKeys || [], selectedKeys: props.selectedKeys || [], expandedKeys: props.expandedKeys || [], defaultExpandAll: props.defaultExpandAll, showLine: props.showLine, onHbCheck: (e) => props.onCheck?.(e.detail), onHbSelect: (e) => props.onSelect?.(e.detail), onHbExpand: (e) => props.onExpand?.(e.detail), style: props.style }));
+}

package/lib/components/TreeSelect.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare function TreeSelect(props: {
+    treeData?: any[];
+    value?: any;
+    onChange?: (value: any) => void;
+    multiple?: boolean;
+    treeCheckable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+}): React.JSX.Element;

package/lib/components/TreeSelect.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbTreeSelect } from '@huibo-ui/react';
+export function TreeSelect(props) {
+    return _jsx(HbTreeSelect, { data: props.treeData || [], modelValue: props.value, multiple: props.multiple || props.treeCheckable, checkable: props.treeCheckable, placeholder: props.placeholder, disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), style: props.style });
+}

package/lib/components/Typography.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare function Typography(props: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace Typography {
+    var Title: any;
+    var Paragraph: any;
+    var Link: any;
+    var Text: any;
+}

package/lib/components/Typography.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { HbLink } from '@huibo-ui/react';
+export function Typography(props) {
+    return _jsx(_Fragment, { children: props.children });
+}
+Typography.Title = function Title({ children, level }) {
+    const tag = level === 1 ? 'h1' : level === 2 ? 'h2' : level === 3 ? 'h3' : level === 4 ? 'h4' : 'h5';
+    return React.createElement(tag, null, children);
+};
+Typography.Paragraph = function Paragraph(props) {
+    return _jsx("p", { children: props.children });
+};
+Typography.Link = function Link(props) {
+    return _jsx(HbLink, { href: props.href, children: props.children });
+};
+Typography.Text = function Text(props) {
+    return _jsx("span", { style: { fontWeight: props.strong ? 'bold' : undefined, fontStyle: props.italic ? 'italic' : undefined, textDecoration: props.delete ? 'line-through' : props.underline ? 'underline' : undefined }, children: props.children });
+};

package/lib/components/Upload.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare function Upload(props: {
+    action?: string;
+    multiple?: boolean;
+    accept?: string;
+    maxCount?: number;
+    fileList?: any[];
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    customRequest?: (options: any) => void;
+    listType?: 'text' | 'picture' | 'picture-card';
+    disabled?: boolean;
+    onChange?: (info: any) => void;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare namespace Upload {
+    var Dragger: any;
+}

package/lib/components/Upload.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbUpload } from '@huibo-ui/react';
+export function Upload(props) {
+    return _jsx(HbUpload, { action: props.action, multiple: props.multiple, accept: props.accept, limit: props.maxCount, fileList: props.fileList || [], beforeUpload: props.beforeUpload, customRequest: props.customRequest, listType: props.listType || 'text', disabled: props.disabled, onHbChange: (e) => props.onChange?.({ fileList: e.detail }), style: props.style, children: props.children });
+}
+/**
+ * Upload.Dragger —— 拖拽上传（antd 子组件）。huibo hb-upload 无 drag 形态，
+ * 这里复用 Upload（功能可用，无拖拽视觉）。
+ */
+Upload.Dragger = function Dragger(props) {
+    return _jsx(Upload, { ...props });
+};

package/lib/components/Watermark.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare function Watermark(props: {
+    content?: string;
+    width?: number;
+    height?: number;
+    gap?: [number, number];
+    rotate?: number;
+    font?: {
+        color?: string;
+        fontSize?: number;
+    };
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/lib/components/Watermark.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HbWatermark } from '@huibo-ui/react';
+export function Watermark(props) {
+    return _jsx(HbWatermark, { content: props.content || '', width: props.width, height: props.height, gap: Array.isArray(props.gap) ? props.gap[0] : props.gap, rotate: props.rotate, fontColor: props.font?.color, fontSize: props.font?.fontSize, children: props.children });
+}

package/lib/components/message.d.ts

@@ -0,0 +1,19 @@
+export declare const message: {
+    success: (content: any, duration?: number) => {
+        close: () => void;
+    };
+    error: (content: any, duration?: number) => {
+        close: () => void;
+    };
+    warning: (content: any, duration?: number) => {
+        close: () => void;
+    };
+    info: (content: any, duration?: number) => {
+        close: () => void;
+    };
+    loading: (content: any, duration?: number) => {
+        close: () => void;
+    };
+    destroy: () => void;
+    config: (_opts: any) => void;
+};

package/lib/components/message.js

@@ -0,0 +1,32 @@
+/**
+ * antd message 命令式 API 兼容层
+ * message.success('保存成功') → 创建 hb-message 并显示
+ */
+let messageCounter = 0;
+function showMessage(type, content, duration) {
+    const id = `hb-msg-${++messageCounter}`;
+    const div = document.createElement('div');
+    div.id = id;
+    document.body.appendChild(div);
+    // 创建 hb-message 元素
+    const el = document.createElement('hb-message');
+    el.type = type;
+    el.message = typeof content === 'string' ? content : String(content);
+    el.duration = duration ?? 3000;
+    el.closable = false;
+    div.appendChild(el);
+    // 等动画结束后移除
+    setTimeout(() => { div.remove(); }, (duration ?? 3000) + 500);
+    return { close: () => div.remove() };
+}
+export const message = {
+    success: (content, duration) => showMessage('success', content, duration),
+    error: (content, duration) => showMessage('error', content, duration),
+    warning: (content, duration) => showMessage('warning', content, duration),
+    info: (content, duration) => showMessage('info', content, duration),
+    loading: (content, duration) => showMessage('info', content, duration ?? 0),
+    destroy: () => {
+        document.querySelectorAll('[id^="hb-msg-"]').forEach(el => el.remove());
+    },
+    config: (_opts) => { },
+};

package/lib/components/notification.d.ts

@@ -0,0 +1,19 @@
+export declare const notification: {
+    success: (props: any) => {
+        close: () => void;
+    };
+    error: (props: any) => {
+        close: () => void;
+    };
+    warning: (props: any) => {
+        close: () => void;
+    };
+    info: (props: any) => {
+        close: () => void;
+    };
+    open: (props: any) => {
+        close: () => void;
+    };
+    destroy: () => void;
+    config: (_opts: any) => void;
+};

package/lib/components/notification.js

@@ -0,0 +1,28 @@
+let notifCounter = 0;
+function showNotification(type, props) {
+    const id = `hb-notif-${++notifCounter}`;
+    const div = document.createElement('div');
+    div.id = id;
+    div.style.cssText = 'position:fixed;top:24px;right:24px;z-index:2000';
+    document.body.appendChild(div);
+    const el = document.createElement('hb-notification');
+    el.type = type;
+    el.title = props.message || '';
+    el.message = props.description || '';
+    el.duration = props.duration ?? 4500;
+    el.position = 'top-right';
+    div.appendChild(el);
+    setTimeout(() => { div.remove(); }, (props.duration ?? 4500) + 500);
+    return { close: () => div.remove() };
+}
+export const notification = {
+    success: (props) => showNotification('success', props),
+    error: (props) => showNotification('error', props),
+    warning: (props) => showNotification('warning', props),
+    info: (props) => showNotification('info', props),
+    open: (props) => showNotification(props.type || 'info', props),
+    destroy: () => {
+        document.querySelectorAll('[id^="hb-notif-"]').forEach(el => el.remove());
+    },
+    config: (_opts) => { },
+};

package/lib/index.d.ts

@@ -0,0 +1,219 @@
+/**
+ * @huibo-ui/react-antd — antd 兼容层
+ *
+ * 接收 antd 原生 props（value/onChange/allowClear/dataSource 等），
+ * 内部自动转换为 huibo-ui props（modelValue/hbChange/clearable/data 等）。
+ * 业务代码保持 antd 写法不变，实现「零改写」迁移。
+ *
+ * 三层结构：本层（兼容） → @huibo-ui/react（React 包装） → hb-* 自定义元素（Stencil WC）
+ *
+ * ⚠️ 消费方（应用入口）必须自行：
+ *   1. import 'huibo-ui/styles.css'           —— 注入 --hb-* 设计令牌
+ *   2. import 'huibo-ui/components/hb-xxx'     —— 注册用到的自定义元素
+ * 否则 hb-* 是 HTMLUnknownElement、令牌为空，导致白屏。
+ * （@huibo-ui/react 只造代理组件，不调用 customElements.define。）
+ *
+ * 用法：
+ *   import { Button, Input, Select, Table, Form, message } from '@huibo-ui/react-antd';
+ *   // 与 antd 完全相同的 API，无需改任何 prop
+ *
+ * 已支持的实例/静态/子 API（详见 docs/guide/migration.md 方案 B 支持矩阵）：
+ *   Form.useForm（转发 hb-form @Method）/ Form.useWatch / useWatch
+ *   Modal.useModal / Modal.confirm/info/warning/success/error
+ *   message.* / Empty.PRESENTED_IMAGE_* / DatePicker.RangePicker
+ *   Input.{TextArea,Search,Password} / Select.{Option,OptGroup}
+ *   Radio.{Group,Button} / Checkbox.Group / Descriptions.Item / Space.Compact
+ *   Upload.Dragger / Skeleton.{Input,Button} / Layout.{Header,Sider,Content}
+ *   类型：ColumnsType / TableProps / TableRowSelection / Rule / RuleObject / TreeDataNode ...
+ */
+export type SizeType = 'small' | 'middle' | 'large';
+/** antd size → huibo-ui size（middle → default） */
+export declare function mapSize(size?: SizeType): 'small' | 'default' | 'large';
+/** 通用 antd 事件 → huibo-ui 事件适配器 */
+export declare function adaptOnChange<T>(onChange?: (value: T) => void): ((e: CustomEvent) => void) | undefined;
+export { Button } from './components/Button';
+export { Input, TextArea } from './components/Input';
+export { InputNumber } from './components/InputNumber';
+export { Select } from './components/Select';
+export { Switch } from './components/Switch';
+export { Checkbox, CheckboxGroup } from './components/Checkbox';
+export { Radio, RadioGroup } from './components/Radio';
+export { Table } from './components/Table';
+export { Form, FormItem } from './components/Form';
+export { Modal } from './components/Modal';
+export { Drawer } from './components/Drawer';
+export { Menu } from './components/Menu';
+export { Tabs } from './components/Tabs';
+export { Steps } from './components/Steps';
+export { DatePicker } from './components/DatePicker';
+export { Upload } from './components/Upload';
+export { Tooltip } from './components/Tooltip';
+export { Popover } from './components/Popover';
+export { Popconfirm } from './components/Popconfirm';
+export { Dropdown } from './components/Dropdown';
+export { Tag } from './components/Tag';
+export { Badge } from './components/Badge';
+export { Avatar } from './components/Avatar';
+export { Card } from './components/Card';
+export { Alert } from './components/Alert';
+export { Divider } from './components/Divider';
+export { Empty } from './components/Empty';
+export { Spin } from './components/Spin';
+export { Space } from './components/Space';
+export { Pagination } from './components/Pagination';
+export { Progress } from './components/Progress';
+export { Descriptions } from './components/Descriptions';
+export { Collapse } from './components/Collapse';
+export { Rate } from './components/Rate';
+export { Slider } from './components/Slider';
+export { Image } from './components/Image';
+export { Tree } from './components/Tree';
+export { TreeSelect } from './components/TreeSelect';
+export { Cascader } from './components/Cascader';
+export { ConfigProvider } from './components/ConfigProvider';
+export { Layout, Row, Col } from './components/Layout';
+export { message } from './components/message';
+export { notification } from './components/notification';
+export type { ColumnType as ColumnsType, ColumnType as TableColumnsType, TableProps, ColumnType } from './components/Table';
+export type MenuProps = {
+    items?: any[];
+    mode?: 'horizontal' | 'vertical' | 'inline';
+    selectedKeys?: string[];
+    theme?: 'light' | 'dark';
+    onClick?: (info: {
+        key: string;
+        keyPath: string[];
+    }) => void;
+};
+export type TreeProps = {
+    treeData?: any[];
+    checkable?: boolean;
+    checkedKeys?: any[];
+};
+export type UploadFile = {
+    name: string;
+    size?: number;
+    type?: string;
+    url?: string;
+    status?: 'ready' | 'uploading' | 'success' | 'error';
+};
+export type AnyObject = Record<string, any>;
+export type RuleObject = {
+    required?: boolean;
+    message?: React.ReactNode;
+    type?: 'string' | 'number' | 'boolean' | 'email' | 'url' | 'date';
+    pattern?: RegExp | string;
+    min?: number;
+    max?: number;
+    len?: number;
+    enum?: Array<string | number>;
+    whitespace?: boolean;
+    validator?: (value: any, rules?: any) => void | Promise<void>;
+    transform?: (value: any) => any;
+    trigger?: string;
+};
+export type Rule = RuleObject;
+export type TreeDataNode = {
+    key?: string | number;
+    title?: React.ReactNode;
+    value?: string | number;
+    children?: TreeDataNode[];
+    disabled?: boolean;
+    selectable?: boolean;
+    [key: string]: any;
+};
+export type CollapseProps = {
+    activeKey?: string | string[];
+    defaultActiveKey?: string | string[];
+    accordion?: boolean;
+    onChange?: (key: string | string[]) => void;
+    bordered?: boolean;
+    ghost?: boolean;
+    items?: Array<{
+        key: string;
+        label?: React.ReactNode;
+        children?: React.ReactNode;
+        disabled?: boolean;
+    }>;
+};
+export type TabsProps = {
+    activeKey?: string;
+    defaultActiveKey?: string;
+    items?: Array<{
+        key: string;
+        label?: React.ReactNode;
+        children?: React.ReactNode;
+        disabled?: boolean;
+    }>;
+    onChange?: (key: string) => void;
+    type?: 'line' | 'card';
+    size?: 'large' | 'default' | 'small';
+    tabPosition?: 'top' | 'bottom' | 'left' | 'right';
+};
+export type UploadProps = {
+    action?: string;
+    multiple?: boolean;
+    accept?: string;
+    disabled?: boolean;
+    limit?: number;
+    drag?: boolean;
+    name?: string;
+    headers?: Record<string, string>;
+    data?: Record<string, any>;
+    withCredentials?: boolean;
+    beforeUpload?: (file: any, fileList: any[]) => boolean | Promise<any>;
+    fileList?: UploadFile[];
+    listType?: 'text' | 'picture' | 'picture-card';
+    customRequest?: (options: any) => void;
+    onPreview?: (file: any) => void;
+    onRemove?: (file: any) => void | Promise<any>;
+    onChange?: (info: any) => void;
+};
+export declare const zhCN: {
+    locale: string;
+};
+export type DataNode = {
+    key: string | number;
+    title?: React.ReactNode;
+    children?: DataNode[];
+    disabled?: boolean;
+};
+export type DirectoryTreeProps = TreeProps;
+export type TableRowSelection<T = any> = {
+    type?: 'checkbox' | 'radio';
+    selectedRowKeys?: React.Key[];
+    onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+    getCheckboxProps?: (record: T) => {
+        disabled?: boolean;
+    };
+};
+import React from 'react';
+export declare function useWatch(namePath: string | string[], form?: any): any;
+export { App } from './components/App';
+export type ThemeConfig = {
+    token?: Record<string, any>;
+    algorithm?: string;
+    components?: Record<string, any>;
+};
+export type TimeRangePickerProps = {
+    value?: any;
+    onChange?: (value: any) => void;
+    format?: string;
+    allowClear?: boolean;
+};
+export { Skeleton } from './components/Skeleton';
+export { Statistic } from './components/Statistic';
+export { Result } from './components/Result';
+export { Timeline } from './components/Timeline';
+export { PageHeader } from './components/PageHeader';
+export { Segmented } from './components/Segmented';
+export { FloatButton } from './components/FloatButton';
+export { Anchor } from './components/Anchor';
+export { Tour } from './components/Tour';
+export { Watermark } from './components/Watermark';
+export { Affix } from './components/Affix';
+export { BackTop } from './components/BackTop';
+export { Breadcrumb } from './components/Breadcrumb';
+export { Typography } from './components/Typography';
+export { QRCode } from './components/QRCode';
+export { TimePicker } from './components/TimePicker';