@huibo-ui/react-antd 1.0.10 → 1.0.12

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/components/Affix.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbAffix } from '@huibo-ui/react';
 export function Affix(props) {
-    return _jsx(HbAffix, { top: props.offsetTop, bottom: props.offsetBottom, children: props.children });
+    return (_jsx(HbAffix, { top: props.offsetTop, bottom: props.offsetBottom, children: props.children }));
 }

package/lib/components/Alert.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbAlert } from '@huibo-ui/react';
 export function Alert(props) {
-    return _jsx(HbAlert, { type: props.type, title: typeof props.message === 'string' ? props.message : '', closable: props.closable, showIcon: props.showIcon ?? true, onHbClose: () => props.onClose?.(), style: props.style });
+    return (_jsx(HbAlert, { type: props.type, title: typeof props.message === 'string' ? props.message : '', closable: props.closable, showIcon: props.showIcon ?? true, onHbClose: () => props.onClose?.(), style: props.style }));
 }

package/lib/components/Avatar.js

@@ -2,5 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { HbAvatar } from '@huibo-ui/react';
 export function Avatar(props) {
     const sz = props.size === 'middle' ? 'default' : props.size;
-    return _jsx(HbAvatar, { size: sz, shape: props.shape, style: props.style, children: props.src ? null : props.children });
+    return (
+    // antd Avatar 默认圆形；兼容层未传 shape 时显式给 circle，
+    // 否则 undefined 会覆盖 hb-avatar 的默认值，导致 class 变 --undefined（非圆）。
+    _jsx(HbAvatar, { src: props.src, size: sz, shape: props.shape ?? 'circle', style: props.style, children: props.src ? null : props.children }));
 }

package/lib/components/BackTop.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbBacktop } from '@huibo-ui/react';
 export function BackTop(props) {
-    return _jsx(HbBacktop, { visibilityHeight: props.visibilityHeight, onHbClick: () => props.onClick?.(), children: props.children });
+    return (_jsx(HbBacktop, { visibilityHeight: props.visibilityHeight, onHbClick: () => props.onClick?.(), children: props.children }));
 }

package/lib/components/Badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbBadge } from '@huibo-ui/react';
 export function Badge(props) {
-    return _jsx(HbBadge, { value: props.count ?? 0, max: props.overflowCount ?? 99, type: props.status, dot: props.dot, showZero: props.showZero, children: props.children });
+    return (_jsx(HbBadge, { value: props.count ?? 0, max: props.overflowCount ?? 99, type: props.status, dot: props.dot, showZero: props.showZero, children: props.children }));
 }

package/lib/components/Breadcrumb.js

@@ -3,8 +3,10 @@ import React from 'react';
 import { HbBreadcrumb, HbBreadcrumbItem } from '@huibo-ui/react';
 export function Breadcrumb(props) {
     if (props.items) {
-        return _jsx(HbBreadcrumb, { separator: props.separator, children: props.items.map((item, i) => React.createElement(HbBreadcrumbItem, { key: i, href: item.href }, item.title)) });
+        return (_jsx(HbBreadcrumb, { separator: props.separator, children: props.items.map((item, i) => React.createElement(HbBreadcrumbItem, { key: i, href: item.href }, item.title)) }));
     }
     return _jsx(HbBreadcrumb, { children: props.children });
 }
-Breadcrumb.Item = function BreadcrumbItem(props) { return React.createElement(HbBreadcrumbItem, props); };
+Breadcrumb.Item = function BreadcrumbItem(props) {
+    return React.createElement(HbBreadcrumbItem, props);
+};

package/lib/components/Button.js

@@ -1,7 +1,8 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { HbButton } from '@huibo-ui/react';
 export function Button({ type, size, danger, block, loading, disabled, icon, htmlType, children, onClick, ...rest }) {
-    const huiboType = danger ? 'danger' : type || 'default';
+    // antd danger 语义由 hb-button 的 danger prop + .hb-button--danger 样式承载
+    // （primary+danger → 红底白字；其余 → 红框红字白底，见 button.css）。
     const huiboSize = size === 'middle' ? 'default' : size || 'default';
-    return (_jsxs(HbButton, { type: huiboType, htmlType: htmlType || 'button', size: huiboSize, disabled: disabled, loading: loading, block: block, onClick: onClick, children: [icon, children] }));
+    return (_jsxs(HbButton, { type: (type || 'default'), danger: danger, htmlType: htmlType || 'button', size: huiboSize, disabled: disabled, loading: loading, block: block, onClick: onClick, children: [icon, children] }));
 }

package/lib/components/Card.d.ts

@@ -1,11 +1,24 @@
 import React from 'react';
+/**
+ * antd Card 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbCard>（Shadow DOM slot）：子内容进 slot 后，bodyStyle/hoverable/loading 等
+ * 布局相关样式无法稳定穿透 Shadow DOM，且 hb-card 的圆角/内边距与 antd 存在偏差
+ * （hb-card 6px 圆角 / 16px 内边距；antd 8px / 24px）。纯 div 可精确对齐 antd 几何，
+ * children 作为真实 DOM 参与 flex 流，嵌套 <Descriptions>/<Table> 不会错乱。
+ */
 export declare function Card(props: {
     title?: React.ReactNode;
     bordered?: boolean;
     extra?: React.ReactNode;
     children?: React.ReactNode;
     bodyStyle?: React.CSSProperties;
-    style?: React.CSSProperties;
+    headStyle?: React.CSSProperties;
     loading?: boolean;
     hoverable?: boolean;
+    cover?: React.ReactNode;
+    actions?: React.ReactNode[];
+    size?: 'default' | 'small';
+    style?: React.CSSProperties;
+    className?: string;
 }): React.JSX.Element;

package/lib/components/Card.js

@@ -1,5 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HbCard } from '@huibo-ui/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * antd Card 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbCard>（Shadow DOM slot）：子内容进 slot 后，bodyStyle/hoverable/loading 等
+ * 布局相关样式无法稳定穿透 Shadow DOM，且 hb-card 的圆角/内边距与 antd 存在偏差
+ * （hb-card 6px 圆角 / 16px 内边距；antd 8px / 24px）。纯 div 可精确对齐 antd 几何，
+ * children 作为真实 DOM 参与 flex 流，嵌套 <Descriptions>/<Table> 不会错乱。
+ */
 export function Card(props) {
-    return _jsx(HbCard, { header: typeof props.title === 'string' ? props.title : '', border: props.bordered ?? true, bodyStyle: props.bodyStyle, style: props.style, children: props.children });
+    const { title, bordered = true, extra, children, bodyStyle, headStyle, loading, hoverable, cover, actions, size = 'default', style, className } = props;
+    const hasHead = title !== undefined || extra !== undefined;
+    const bodyPadding = size === 'small' ? 12 : 24;
+    const headPadding = size === 'small' ? '8px 12px' : undefined;
+    return (_jsxs("div", { style: {
+            borderRadius: 8,
+            border: bordered ? '1px solid var(--hb-color-border-secondary, #f0f0f0)' : undefined,
+            background: 'var(--hb-color-bg-container, #fff)',
+            overflow: 'hidden',
+            transition: hoverable ? 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)' : undefined,
+            boxShadow: hoverable ? '0 1px 2px -2px rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.12), 0 5px 12px 4px rgba(0,0,0,0.09)' : undefined,
+            ...style,
+        }, className: className, children: [cover, hasHead && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: headPadding ?? 'var(--hb-spacing-sm, 8px) var(--hb-spacing-lg, 24px)',
+                    minHeight: 56,
+                    borderBottom: '1px solid var(--hb-color-border-secondary, #f0f0f0)',
+                    ...headStyle,
+                }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', fontSize: 16, fontWeight: 500, color: 'var(--hb-color-text, rgba(0,0,0,0.88))' }, children: title }), extra !== undefined && _jsx("div", { children: extra })] })), _jsx("div", { style: { padding: bodyPadding, ...bodyStyle }, children: loading ? _jsx("div", { style: { color: 'var(--hb-color-text-secondary, rgba(0,0,0,0.45))' }, children: "\u52A0\u8F7D\u4E2D..." }) : children }), actions && actions.length > 0 && (_jsx("div", { style: { display: 'flex', borderTop: '1px solid var(--hb-color-border-secondary, #f0f0f0)' }, children: actions.map((a, i) => (_jsx("div", { style: { flex: 1, textAlign: 'center', padding: '12px 0', borderRight: i < actions.length - 1 ? '1px solid var(--hb-color-border-secondary, #f0f0f0)' : undefined }, children: a }, i))) }))] }));
 }

package/lib/components/Checkbox.d.ts

@@ -5,12 +5,14 @@ export declare function Checkbox(props: {
     disabled?: boolean;
     children?: React.ReactNode;
     indeterminate?: boolean;
+    value?: any;
 }): React.JSX.Element;
 export declare namespace Checkbox {
     var Group: any;
 }
 export declare function CheckboxGroup(props: {
     value?: any[];
+    defaultValue?: any[];
     onChange?: (value: any[]) => void;
     options?: any[];
     disabled?: boolean;

package/lib/components/Checkbox.js

@@ -1,10 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbCheckbox, HbCheckboxGroup } from '@huibo-ui/react';
 export function Checkbox(props) {
-    return _jsx(HbCheckbox, { checked: props.checked ?? false, disabled: props.disabled, label: props.children, onHbChange: (e) => props.onChange?.({ target: { checked: e.detail } }), children: props.children });
+    return (_jsx(HbCheckbox, { checked: props.checked ?? false, indeterminate: props.indeterminate, disabled: props.disabled, label: props.children, onHbChange: (e) => props.onChange?.({ target: { checked: e.detail } }), children: props.children }));
 }
 export function CheckboxGroup(props) {
-    return _jsx(HbCheckboxGroup, { modelValue: props.value ?? [], options: props.options || [], disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), children: props.children });
+    // hb-checkbox-group 没有 options prop（只渲染 slot 子元素）。故 options 模式下，
+    // 兼容层自己把 options 渲染成 <HbCheckbox> 子元素传入，对齐 antd <Checkbox.Group options>。
+    // children 模式（<Checkbox.Group><Checkbox/></Checkbox.Group>）则直接透传。
+    const options = props.options;
+    return (_jsx(HbCheckboxGroup, { modelValue: props.value ?? props.defaultValue ?? [], disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), children: options && options.length > 0
+            ? options.map((o, i) => {
+                const isObj = typeof o !== 'string';
+                const label = isObj ? o.label : o;
+                const val = isObj ? o.value : o;
+                const dis = isObj ? o.disabled : false;
+                return _jsx(HbCheckbox, { label: label, value: val, disabled: dis || props.disabled }, i);
+            })
+            : props.children }));
 }
 // antd 静态子组件：Checkbox.Group
 Checkbox.Group = CheckboxGroup;

package/lib/components/Collapse.d.ts

@@ -1,11 +1,41 @@
 import React from 'react';
-export declare function Collapse(props: {
-    activeKey?: string[] | string;
-    onChange?: (key: any) => void;
+/**
+ * antd Collapse 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbCollapse>（Shadow DOM slot）：面板内容进 slot 后，嵌套 <Table>/<Form>
+ * 的布局会受 ::slotted 干扰。纯 div 自渲染折叠头/体，children 作为真实 DOM，
+ * 嵌套复杂内容（表格、表单、描述列表）布局稳定。
+ *
+ * 支持两种 antd 写法：
+ *   1) items 数组：items={[{key,label,children,disabled}]}
+ *   2) <Collapse.Panel key="x" header="..">子内容</Collapse.Panel>
+ *
+ * 注意：React 会吞掉 key prop（不进 props），故 Panel 自己渲染并通过 React key
+ * 标识（Collapse 用 child.key 作为面板 key），与 antd 的 `<Panel key>` 语义一致。
+ */
+export interface CollapseProps {
+    activeKey?: string[] | string | number;
+    defaultActiveKey?: string[] | string;
     accordion?: boolean;
+    onChange?: (key: string[]) => void;
+    bordered?: boolean;
+    ghost?: boolean;
+    items?: Array<{
+        key?: string | number;
+        label?: React.ReactNode;
+        children?: React.ReactNode;
+        disabled?: boolean;
+        forceRender?: boolean;
+        showArrow?: boolean;
+    }>;
     children?: React.ReactNode;
     style?: React.CSSProperties;
-}): React.JSX.Element;
+    className?: string;
+    expandIcon?: (p: {
+        isActive?: boolean;
+    }) => React.ReactNode;
+}
+export declare function Collapse(props: CollapseProps): React.JSX.Element;
 export declare namespace Collapse {
     var Panel: any;
 }

package/lib/components/Collapse.js

@@ -1,7 +1,125 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { HbCollapse, HbCollapseItem } from '@huibo-ui/react';
+function toArray(val) {
+    if (val === undefined || val === null)
+        return [];
+    if (Array.isArray(val))
+        return val.map(String);
+    return [String(val)];
+}
+const CollapseContext = React.createContext({ activeKeys: [], toggle: () => { } });
+/**
+ * 折叠体：对齐 antd Collapse 的展开/收起高度动画（修复 #16-17）。
+ *
+ * 修复前 body 用 display:none/block 硬切，无动画。这里测量真实 scrollHeight，
+ * 对 height + opacity 做过渡：展开时 height:0→scrollHeight，收起时反向，
+ * 动画结束后释放 height（变 auto）以适应内容自适应高度。
+ *
+ * 实现要点（rc-motion 思路的轻量版）：
+ * - 展开：mount body（display:block, height:0），下一帧测 scrollHeight 设为该值触发过渡，
+ *   过渡结束清 height:auto。
+ * - 收起：从当前 scrollHeight 过渡到 0，结束后若该面板已彻底不用可卸载（这里保持挂载、display:none）。
+ * - forceRender：非 active 也挂载（display:none + height:0），保证首次展开有可测高度。
+ */
+/**
+ * 折叠体：对齐 antd Collapse 的展开/收起高度动画（修复 #16-17）。
+ *
+ * 用 CSS grid-template-rows 0fr→1fr 技巧动画到「内容自适应高度」，
+ * 无需 JS 测量 scrollHeight、可逆：
+ * - 外层 display:grid + grid-template-rows（active 时 1fr，否则 0fr）+ transition；
+ * - 内层 overflow:hidden + min-height:0（grid 子项默认 min-height:auto 会撑开，需显式 0）。
+ * 兼容性：grid-template-rows 过渡在现代浏览器（Chrome 107+/Safari 16+/Firefox 66+）支持。
+ *
+ * 为保证「展开」时也有动画，PanelBody 在收起态也保持挂载（grid 0fr + overflow:hidden 隐藏内容），
+ * 这样 active 由 false→true 时 grid-template-rows 从 0fr 过渡到 1fr。代价是收起态内容仍在 DOM 中
+ * （对齐 antd keep-alive / forceRender 行为，对 Collapse 面板内容可接受）。
+ */
+function PanelBody({ active, children }) {
+    return (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateRows: active ? '1fr' : '0fr',
+            opacity: active ? 1 : 0,
+            transition: 'grid-template-rows 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s',
+        }, children: _jsx("div", { style: { overflow: 'hidden', minHeight: 0 }, children: _jsx("div", { style: { padding: 16 }, children: children }) }) }));
+}
+function DefaultArrow() {
+    return (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 1024 1024", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M765.7 486.8L314.9 134.7c-5.3-4.1-13-.3-13 6.4v75.5c0 4.9 2.3 9.6 6.2 12.6l361 280.5-361 280.5c-3.9 3-6.2 7.7-6.2 12.6V883c0 6.7 7.7 10.5 13 6.4l450.8-352.1c5-3.9 5-11.4 0-15.3z" }) }));
+}
+function PanelRender({ panelKey, isFirst }) {
+    // 读取自身由 cloneElement 注入的 header/children/disabled 等其余 props
+    return _jsx(PanelInner, { panelKey: panelKey, isFirst: isFirst });
+}
+/** 把单个面板渲染为折叠头 + 展开体。 */
+function PanelInner({ panelKey, isFirst, header, children, disabled, forceRender, showArrow = true }) {
+    const ctx = React.useContext(CollapseContext);
+    const isActive = ctx.activeKeys.includes(panelKey);
+    return (_jsxs("div", { style: {
+            // antd 每个 panel 项白底，靠 border 分隔（外层 Collapse 是浅灰底）。
+            background: '#fff',
+            borderBottom: '1px solid var(--hb-color-border-secondary, #f0f0f0)',
+            borderTop: isFirst ? '1px solid var(--hb-color-border-secondary, #f0f0f0)' : undefined,
+        }, children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => ctx.toggle(panelKey, disabled), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '100%',
+                    padding: '12px 16px',
+                    border: 'none',
+                    background: 'none',
+                    textAlign: 'left',
+                    cursor: disabled ? 'not-allowed' : 'pointer',
+                    color: 'var(--hb-color-text, rgba(0,0,0,0.88))',
+                    fontSize: 14,
+                    fontWeight: 500,
+                    opacity: disabled ? 0.5 : 1,
+                }, children: [showArrow && (_jsx("span", { style: { display: 'inline-flex', marginRight: 12, transition: 'transform 0.2s', transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)' }, children: ctx.expandIcon ? ctx.expandIcon({ isActive }) : _jsx(DefaultArrow, {}) })), _jsx("span", { style: { flex: 1 }, children: header })] }), _jsx(PanelBody, { active: isActive, children: children })] }));
+}
 export function Collapse(props) {
-    return _jsx(HbCollapse, { modelValue: Array.isArray(props.activeKey) ? props.activeKey : props.activeKey ? [props.activeKey] : [], accordion: props.accordion, style: props.style, children: props.children });
+    const { activeKey, defaultActiveKey, accordion, onChange, bordered = true, ghost, items, children, style, className, expandIcon } = props;
+    const isControlled = activeKey !== undefined;
+    const [internal, setInternal] = React.useState(() => toArray(defaultActiveKey ?? (isControlled ? undefined : [])));
+    const activeKeys = isControlled ? toArray(activeKey) : internal;
+    const toggle = (key, disabled) => {
+        if (disabled)
+            return;
+        let next;
+        if (accordion) {
+            next = activeKeys.includes(key) ? [] : [key];
+        }
+        else {
+            next = activeKeys.includes(key) ? activeKeys.filter(k => k !== key) : [...activeKeys, key];
+        }
+        if (!isControlled)
+            setInternal(next);
+        onChange?.(next);
+    };
+    const ctxValue = React.useMemo(() => ({ activeKeys, toggle, expandIcon }), [activeKeys, accordion, expandIcon]);
+    // children 模式：遍历 <Collapse.Panel>，用 React key + cloneElement 把 panelKey/isFirst 注入并就地渲染。
+    let panelChildren = null;
+    if (!items) {
+        const childArr = React.Children.toArray(children).filter(c => React.isValidElement(c) && c.type && c.type.__isCollapsePanel);
+        panelChildren = childArr.map((child, i) => {
+            const c = child;
+            const key = String((c.key ?? i));
+            return _jsx(PanelInner, { panelKey: key, isFirst: i === 0, ...c.props }, key);
+        });
+    }
+    return (_jsx(CollapseContext.Provider, { value: ctxValue, children: _jsx("div", { style: {
+                // antd Collapse 默认背景 rgba(0,0,0,0.02)（极浅灰），边框 #d9d9d9，圆角 8。
+                background: ghost ? 'transparent' : 'rgba(0, 0, 0, 0.02)',
+                border: ghost || !bordered ? undefined : '1px solid var(--hb-color-border, #d9d9d9)',
+                borderRadius: ghost || !bordered ? undefined : 8,
+                overflow: 'hidden',
+                ...style,
+            }, className: className, children: items
+                ? items.map((it, i) => (_jsx(PanelInner, { panelKey: String(it.key ?? i), isFirst: i === 0, header: it.label, disabled: it.disabled, forceRender: it.forceRender, showArrow: it.showArrow, children: it.children }, String(it.key ?? i))))
+                : panelChildren }) }));
 }
-Collapse.Panel = function Panel(props) { return React.createElement(HbCollapseItem, { header: props.header, name: props.key }, props.children); };
+/**
+ * <Collapse.Panel key="x" header="标题">子内容</Collapse.Panel>
+ * 由父 Collapse 遍历并 cloneElement 就地渲染；panel 用 React key 标识（与 antd 语义一致）。
+ * 自身 render 仅返回 null（占位），真实渲染交给 Collapse 内的 PanelInner。
+ */
+Collapse.Panel = function Panel(_props) {
+    return null;
+};
+Collapse.Panel.__isCollapsePanel = true;

package/lib/components/Descriptions.js

@@ -19,10 +19,8 @@ function itemsFromChildren(children) {
     return out;
 }
 export function Descriptions(props) {
-    const { title, bordered = false, column = 3, colon = true, items, contentStyle, labelStyle, children, style, className, } = props;
-    const resolved = items && items.length > 0
-        ? items.map(it => ({ label: it.label, value: it.children, span: SPAN(it.span) }))
-        : itemsFromChildren(children);
+    const { title, bordered = false, column = 3, colon = true, items, contentStyle, labelStyle, children, style, className } = props;
+    const resolved = items && items.length > 0 ? items.map(it => ({ label: it.label, value: it.children, span: SPAN(it.span) })) : itemsFromChildren(children);
     const cols = column > 0 ? Math.floor(column) : 3;
     // 按列数把 items 切成行（span 累计超过列数则换行），用于 bordered 表格渲染
     const rows = [];
@@ -44,7 +42,7 @@ export function Descriptions(props) {
     const LABEL_COLOR = 'rgba(0,0,0,0.88)';
     const VALUE_COLOR = 'rgba(0,0,0,0.88)';
     const PAD = 16;
-    const titleNode = title != null ? (_jsx("div", { style: { fontSize: 16, fontWeight: 500, color: LABEL_COLOR, marginBottom: 12 }, children: title })) : null;
+    const titleNode = title != null ? _jsx("div", { style: { fontSize: 16, fontWeight: 500, color: LABEL_COLOR, marginBottom: 12 }, children: title }) : null;
     let body;
     if (bordered) {
         body = (_jsx("table", { style: { borderCollapse: 'collapse', width: '100%', tableLayout: 'fixed', fontSize: 14 }, children: _jsx("tbody", { children: rows.map((row, ri) => (_jsx("tr", { children: row.flatMap((it, ci) => [

package/lib/components/Divider.d.ts

@@ -1,8 +1,16 @@
 import React from 'react';
+/**
+ * antd Divider 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbDivider>（Shadow DOM slot）：带文字的分隔线，文字位置/contentPosition
+ * 受 slot 样式影响，纯 div + flex 可精确复刻 antd 的「文字左/中/右 + 两侧线条」布局。
+ */
 export declare function Divider(props: {
     type?: 'horizontal' | 'vertical';
     orientation?: 'left' | 'center' | 'right';
     dashed?: boolean;
+    plain?: boolean;
     children?: React.ReactNode;
     style?: React.CSSProperties;
+    className?: string;
 }): React.JSX.Element;

package/lib/components/Divider.js

@@ -1,5 +1,40 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { HbDivider } from '@huibo-ui/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * antd Divider 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbDivider>（Shadow DOM slot）：带文字的分隔线，文字位置/contentPosition
+ * 受 slot 样式影响，纯 div + flex 可精确复刻 antd 的「文字左/中/右 + 两侧线条」布局。
+ */
 export function Divider(props) {
-    return _jsx(HbDivider, { direction: props.type, contentPosition: props.orientation, dashed: props.dashed, style: props.style, children: props.children });
+    const { type = 'horizontal', orientation = 'center', dashed, plain, children, style, className } = props;
+    const borderStyle = dashed ? 'dashed' : 'solid';
+    // antd 分割线色 rgba(5,5,5,0.06) 偏浅，在白底 + flex 段里几乎不可见，用更明确的边框色兜底。
+    const lineColor = 'var(--hb-color-border, #d9d9d9)';
+    if (type === 'vertical') {
+        // 垂直分隔线：行内，固定高度，左右 margin，由父行高决定。
+        return (_jsx("span", { role: "separator", "aria-orientation": "vertical", style: {
+                display: 'inline-block',
+                width: 0,
+                height: '0.9em',
+                margin: '0 8px',
+                verticalAlign: 'middle',
+                borderLeft: `1px ${borderStyle} ${lineColor}`,
+                ...style,
+            }, className: className }));
+    }
+    // 水平分隔线：若无文字，就是一条线；若有文字，文字两侧各一条 flex 线。
+    const hasText = children !== undefined && children !== null;
+    if (!hasText) {
+        return _jsx("div", { role: "separator", style: { width: '100%', minWidth: '100%', borderTop: `1px ${borderStyle} ${lineColor}`, margin: '24px 0', ...style }, className: className });
+    }
+    // 有文字：flex 三段。orientation 决定文字占比。
+    const flexMap = { left: '0 auto 1fr', center: '1fr auto 1fr', right: '1fr auto 0' };
+    const [leftFlex, , rightFlex] = (flexMap[orientation] || flexMap.center).split(' ');
+    return (_jsxs("div", { role: "separator", style: {
+            display: 'flex',
+            alignItems: 'center',
+            margin: '24px 0',
+            color: plain ? 'var(--hb-color-text-secondary, rgba(0,0,0,0.45))' : 'var(--hb-color-text, rgba(0,0,0,0.88))',
+            ...style,
+        }, className: className, children: [_jsx("span", { style: { flex: leftFlex, borderTop: `1px ${borderStyle} ${lineColor}` } }), _jsx("span", { style: { padding: '0 1em', whiteSpace: 'nowrap', fontSize: plain ? 14 : 16, fontWeight: plain ? 400 : 500 }, children: children }), _jsx("span", { style: { flex: rightFlex, borderTop: `1px ${borderStyle} ${lineColor}` } })] }));
 }

package/lib/components/Drawer.d.ts

@@ -4,8 +4,14 @@ export declare function Drawer(props: {
     title?: React.ReactNode;
     placement?: 'top' | 'right' | 'bottom' | 'left';
     width?: string | number;
+    height?: string | number;
     onClose?: () => void;
     maskClosable?: boolean;
+    keyboard?: boolean;
+    destroyOnClose?: boolean;
     children?: React.ReactNode;
+    footer?: React.ReactNode | null;
     style?: React.CSSProperties;
-}): React.JSX.Element;
+    className?: string;
+    closable?: boolean;
+}): React.JSX.Element | null;