@huibo-ui/react-antd 1.0.10 → 1.0.12

package/lib/components/Menu.js

@@ -2,17 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 const PRIMARY = 'var(--hb-color-primary, #ff6700)';
 export function Menu(props) {
-    const { items, mode = 'vertical', selectedKeys, openKeys, theme = 'light', inlineCollapsed, onClick, onOpenChange, onSelect, style, className, children, } = props;
+    const { items, mode = 'vertical', selectedKeys, openKeys, theme = 'light', inlineCollapsed, onClick, onOpenChange, onSelect, style, className, children } = props;
     const horizontal = mode === 'horizontal';
     const dark = theme === 'dark';
     const [internalOpen, setInternalOpen] = React.useState(openKeys ?? []);
     const openSet = openKeys !== undefined ? openKeys : internalOpen;
-    const selected = selectedKeys ?? [];
+    // 非受控选中：selectedKeys 未传时，点击菜单项应自动高亮选中（对齐 antd 默认行为）。
+    // 旧实现 selected 恒为 []（selectedKeys ?? []），点击后无选中视觉反馈。
+    const [internalSelected, setInternalSelected] = React.useState([]);
+    const selected = selectedKeys !== undefined ? selectedKeys : internalSelected;
     const collapsed = !!inlineCollapsed;
     const fireClick = (item, keyPath) => {
         if (item.disabled)
             return;
         const info = { key: item.key, keyPath: [item.key, ...keyPath], item };
+        // 非受控模式：内部更新选中态，触发高亮重渲染
+        if (selectedKeys === undefined)
+            setInternalSelected([item.key]);
         onClick?.(info);
         onSelect?.({ key: item.key, keyPath: info.keyPath });
     };
@@ -22,24 +28,26 @@ export function Menu(props) {
             setInternalOpen(next);
         onOpenChange?.(next);
     };
-    const Icon = ({ icon }) => icon ? (_jsx("span", { style: { display: 'inline-flex', alignItems: 'center', marginRight: 8, width: 16, height: 16 }, children: icon })) : null;
+    const Icon = ({ icon }) => icon ? _jsx("span", { style: { display: 'inline-flex', alignItems: 'center', marginRight: 8, width: 16, height: 16 }, children: icon }) : null;
     const textColor = dark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.88)';
     const disabledColor = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
     const renderItem = (item, keyPath) => {
         const hasChildren = !!(item.children && item.children.length > 0);
         const isSelected = selected.includes(item.key);
         const isOpen = openSet.includes(item.key);
-        const labelColor = item.disabled ? disabledColor : isSelected ? PRIMARY : textColor;
         if (hasChildren && !collapsed) {
-            return (_jsxs("li", { role: "menuitem", style: { listStyle: 'none' }, children: [_jsxs("div", { onClick: () => !item.disabled && toggleSub(item.key), style: {
+            return (_jsxs("li", { role: "menuitem", style: { listStyle: 'none' }, children: [_jsxs("div", { onClick: () => !item.disabled && toggleSub(item.key), className: `hb-menu__item-li${isSelected ? ' hb-menu__item-li--selected' : ''}`, style: {
                             display: 'flex',
                             alignItems: 'center',
                             height: 40,
                             padding: collapsed ? 0 : '0 16px',
                             cursor: item.disabled ? 'not-allowed' : 'pointer',
-                            color: labelColor,
+                            color: item.disabled ? disabledColor : undefined,
                             whiteSpace: 'nowrap',
-                        }, children: [_jsx(Icon, { icon: item.icon }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.label }), _jsx("span", { style: { display: 'inline-block', transition: 'transform .2s', transform: isOpen ? 'rotate(90deg)' : 'none', fontSize: 10, marginLeft: 8 }, children: "\u25B6" })] }), isOpen && (_jsx("ul", { role: "menu", style: { listStyle: 'none', margin: 0, padding: 0 }, children: item.children.map(c => renderItem(c, [item.key, ...keyPath])) }))] }, item.key));
+                            boxSizing: 'border-box',
+                            borderRadius: 6,
+                            margin: '2px 8px',
+                        }, children: [_jsx(Icon, { icon: item.icon }), _jsx("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.label }), _jsx("span", { style: { display: 'inline-block', transition: 'transform .2s', transform: isOpen ? 'rotate(90deg)' : 'none', fontSize: 10, marginLeft: 8 }, children: "\u25B6" })] }), _jsx("div", { className: `hb-menu__submenu${isOpen ? ' hb-menu__submenu--open' : ''}`, children: _jsx("div", { children: _jsx("ul", { role: "menu", style: { listStyle: 'none', margin: 0, padding: 0 }, children: item.children.map(c => renderItem(c, [item.key, ...keyPath])) }) }) })] }, item.key));
         }
         // 叶子项
         const baseStyle = {
@@ -48,16 +56,50 @@ export function Menu(props) {
             height: horizontal ? 56 : 40,
             padding: horizontal ? '0 20px' : collapsed ? 0 : '0 16px',
             cursor: item.disabled ? 'not-allowed' : 'pointer',
-            color: labelColor,
-            background: isSelected ? (dark ? PRIMARY : 'rgba(255,103,0,0.06)') : 'transparent',
+            // color/background 不在 inline 设：交给 .hb-menu__item-li(--selected) class 控制，
+            // 否则 inline 优先级高于 class，选中态的文字色/背景色会被覆盖。
+            color: item.disabled ? disabledColor : undefined,
             borderBottom: horizontal && isSelected ? `2px solid ${PRIMARY}` : 'none',
             whiteSpace: 'nowrap',
             listStyle: 'none',
+            boxSizing: 'border-box',
+            borderRadius: horizontal ? 0 : 6,
+            margin: horizontal ? 0 : '2px 8px',
         };
-        return (_jsxs("li", { role: "menuitem", onClick: () => fireClick(item, keyPath), style: baseStyle, children: [_jsx(Icon, { icon: item.icon }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.label })] }, item.key));
+        return (_jsxs("li", { role: "menuitem", onClick: () => fireClick(item, keyPath), className: `hb-menu__item-li${isSelected ? ' hb-menu__item-li--selected' : ''}`, style: baseStyle, children: [_jsx(Icon, { icon: item.icon }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: item.label })] }, item.key));
     };
     const list = items && items.length > 0 ? items : [];
-    return (_jsxs("ul", { role: "menu", className: className, style: {
+    // 唯一类名前缀，避免多实例样式冲突（hover/选中指示条需 CSS 伪类，inline style 做不到）。
+    const scope = React.useMemo(() => `hb-menu-${Math.random().toString(36).slice(2, 9)}`, []);
+    const selectedBg = dark ? 'rgba(255,255,255,0.08)' : 'rgba(22,119,255,0.06)';
+    const hoverBg = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)';
+    // hover/选中指示条样式：CSS 伪类（:hover / ::after）无法用 inline style 表达，
+    // 注入到 document.head（注意 <ul> 内放 <style> 会被浏览器按内容模型忽略/移位，故必须放 head）。
+    // 带scope类名隔离，组件卸载时移除。
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const styleEl = document.createElement('style');
+        styleEl.dataset.hbMenuScope = scope;
+        styleEl.textContent = `
+        .${scope} .hb-menu__item-li { position: relative; transition: background 0.2s, color 0.2s; color: ${textColor}; }
+        .${scope} .hb-menu__item-li:hover { background: ${hoverBg}; }
+        .${scope} .hb-menu__item-li--selected { background: ${selectedBg}; color: ${PRIMARY}; }
+        .${scope} .hb-menu__item-li--selected:hover { background: ${selectedBg}; }
+        .${scope}.hb-menu--inline .hb-menu__item-li--selected::after,
+        .${scope}.hb-menu--vertical .hb-menu__item-li--selected::after {
+          content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: ${PRIMARY};
+        }
+        .${scope} .hb-menu__submenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.645,0.045,0.355,1); overflow: hidden; }
+        .${scope} .hb-menu__submenu--open { grid-template-rows: 1fr; }
+        .${scope} .hb-menu__submenu > div { min-height: 0; }
+    `;
+        document.head.appendChild(styleEl);
+        return () => {
+            styleEl.remove();
+        };
+    }, [scope, dark, hoverBg, selectedBg]);
+    return (_jsxs("ul", { role: "menu", className: `${scope} hb-menu--${mode} ${className || ''}`, style: {
             listStyle: 'none',
             margin: 0,
             padding: inlineCollapsed || collapsed ? 0 : horizontal ? 0 : '8px 0',
@@ -67,6 +109,8 @@ export function Menu(props) {
             background: dark ? '#001529' : '#fff',
             color: textColor,
             borderBottom: horizontal ? `1px solid ${dark ? '#1f1f1f' : '#f0f0f0'}` : 'none',
+            // 对齐 antd：inline 菜单无右边框（旧实现可能带边框线，这里显式 none）
+            borderRight: 'none',
             minWidth: horizontal ? 0 : collapsed ? 0 : 200,
             height: horizontal ? 56 : '100%',
             boxSizing: 'border-box',

package/lib/components/Modal.d.ts

@@ -15,8 +15,11 @@ export interface ModalProps {
     footer?: React.ReactNode | null;
     children?: React.ReactNode;
     style?: React.CSSProperties;
+    className?: string;
+    centered?: boolean;
+    closable?: boolean;
 }
-export declare function Modal(props: ModalProps): React.JSX.Element;
+export declare function Modal(props: ModalProps): React.JSX.Element | null;
 export declare namespace Modal {
     var confirm: any;
     var info: any;

package/lib/components/Modal.js

@@ -1,16 +1,141 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { HbDialog } from '@huibo-ui/react';
+/**
+ * antd Modal 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbDialog>（Shadow DOM slot）：弹窗 body/footer 内容进 slot 后，<Form>/<Descriptions>
+ * 等嵌套布局会受 ::slotted 干扰，且 hb-dialog 的 footer 受限（不支持任意 ReactNode）。
+ * 纯 div 自渲染 mask + 居中容器 + header/body/footer，children 作为真实 DOM，嵌套表单布局稳定。
+ * 动画复刻 hb-dialog 的 fade+zoom（@keyframes 内联，不依赖 hb-*）。
+ *
+ * 命令式 API（confirm/info/warning/success/error）与 useModal 保留不变。
+ */
+// @keyframes 只需注入一次；用模块级标志避免重复插入。
+let motionInjected = false;
+function injectMotion() {
+    if (motionInjected || typeof document === 'undefined')
+        return;
+    motionInjected = true;
+    const style = document.createElement('style');
+    style.setAttribute('data-hb-modal-motion', '');
+    style.textContent = `
+@keyframes hb-modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hb-modal-overlay-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes hb-modal-in {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
+  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+@keyframes hb-modal-out {
+  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+}
+`;
+    document.head.appendChild(style);
+}
+const CloseIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 1024 1024", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M563.8 512l262.5-312.9c14.4-17.2.5-43.1-21.3-43.1H704.5c-7.9 0-15.4 3.5-20.5 9.5L512 417.8 339.9 165.5c-5.1-6-12.6-9.5-20.5-9.5H198.7c-21.8 0-35.7 25.9-21.3 43.1L439.9 512 177.4 824.9c-14.4 17.2-.5 43.1 21.3 43.1h120.5c7.9 0 15.4-3.5 20.5-9.5L512 606.2l172.1 252.3c5.1 6 12.6 9.5 20.5 9.5h120.5c21.8 0 35.7-25.9 21.3-43.1L563.8 512z" }) }));
 export function Modal(props) {
-    const { open, title, width, onCancel, onOk, confirmLoading, okText, cancelText, maskClosable = true, keyboard = true, destroyOnClose, footer, children } = props;
-    // 默认 footer：OK/Cancel 按钮（对齐 antd 默认行为）。footer=null 时无底部。
-    const defaultFooter = (_jsxs("div", { style: { textAlign: 'right', marginTop: 16, display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx("button", { type: "button", onClick: (e) => onCancel?.(e), style: { padding: '4px 15px', height: 32, borderRadius: 6, border: '1px solid #d9d9d9', background: '#fff', cursor: 'pointer' }, children: cancelText || '取消' }), _jsx("button", { type: "button", disabled: confirmLoading, onClick: (e) => onOk?.(e), style: { padding: '4px 15px', height: 32, borderRadius: 6, border: 'none', background: 'var(--hb-color-primary, #ff6700)', color: '#fff', cursor: 'pointer' }, children: confirmLoading ? '加载中...' : (okText || '确定') })] }));
+    const { open, title, width, onCancel, onOk, confirmLoading, okText, cancelText, maskClosable = true, keyboard = true, destroyOnClose, footer, children, style, className, centered = true, closable = true, } = props;
+    injectMotion();
+    // 离场动画：open 由 true→false 时保留 DOM 播 0.3s 出场再卸载。
+    const [leaving, setLeaving] = React.useState(false);
+    const prevOpen = React.useRef(!!open);
+    React.useEffect(() => {
+        if (open && !prevOpen.current) {
+            setLeaving(false);
+        }
+        else if (!open && prevOpen.current) {
+            setLeaving(true);
+            const t = setTimeout(() => setLeaving(false), 300);
+            return () => clearTimeout(t);
+        }
+        prevOpen.current = !!open;
+    }, [open]);
+    // Esc 关闭
+    React.useEffect(() => {
+        if (!open || !keyboard)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onCancel?.({});
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, keyboard, onCancel]);
+    // body 滚动锁定：弹层显示时锁住 body 滚动，避免关闭时页面因滚动条显隐而 reflow 闪烁。
+    // 用引用计数支持多个弹层叠加；compensate scrollbar 宽度避免横向跳动。
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const body = document.body;
+        const prevOverflow = body.style.overflow;
+        const prevPaddingRight = body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarWidth > 0)
+            body.style.paddingRight = `${scrollbarWidth}px`;
+        body.style.overflow = 'hidden';
+        return () => {
+            body.style.overflow = prevOverflow;
+            body.style.paddingRight = prevPaddingRight;
+        };
+    }, [open]);
+    // 显示条件 = open || leaving；都为 false 时完全卸载，
+    // 否则 open=false 后 modal/遮罩仍 fixed 显示，挡住下层。
+    if (!open && !leaving)
+        return null;
+    const defaultFooter = (_jsxs("div", { style: { textAlign: 'right', display: 'flex', justifyContent: 'flex-end', gap: 8 }, children: [_jsx("button", { type: "button", onClick: e => onCancel?.(e), style: { padding: '4px 15px', height: 32, borderRadius: 6, border: '1px solid #d9d9d9', background: '#fff', cursor: 'pointer', fontSize: 14 }, children: cancelText || '取消' }), _jsx("button", { type: "button", disabled: confirmLoading, onClick: e => onOk?.(e), style: { padding: '4px 15px', height: 32, borderRadius: 6, border: 'none', background: 'var(--hb-color-primary, #ff6700)', color: '#fff', cursor: 'pointer', fontSize: 14 }, children: confirmLoading ? '加载中...' : okText || '确定' })] }));
     const resolvedFooter = footer === undefined ? defaultFooter : footer;
-    // antd width 默认 520（number）；hb-dialog width 是 string，number 必须补 px 否则是非法 CSS 被忽略
-    const resolvedWidth = width == null ? undefined : typeof width === 'number' ? `${width}px` : String(width);
-    const wrapClassName = props.wrapClassName;
-    return (_jsxs(HbDialog, { modelValue: open || false, title: typeof title === 'string' ? title : '', width: resolvedWidth, closeOnClickModal: maskClosable, closeOnPressEscape: keyboard, destroyOnClose: destroyOnClose, showClose: true, style: props.style, className: [props.className, wrapClassName].filter(Boolean).join(' ') || undefined, onHbClose: () => { if (onCancel)
-            onCancel({}); }, children: [children, resolvedFooter !== null && resolvedFooter !== undefined ? resolvedFooter : null] }));
+    const resolvedWidth = width == null ? 520 : typeof width === 'number' ? `${width}px` : String(width);
+    return (_jsxs("div", { style: { position: 'fixed', inset: 0, zIndex: 1000, pointerEvents: 'none' }, children: [_jsx("div", { onClick: () => maskClosable && onCancel?.({}), style: {
+                    position: 'fixed',
+                    inset: 0,
+                    background: 'var(--hb-color-bg-mask, rgba(0,0,0,0.45))',
+                    pointerEvents: 'auto',
+                    animation: `${leaving ? 'hb-modal-overlay-out' : 'hb-modal-overlay-in'} 0.3s ease both`,
+                } }), _jsxs("div", { style: {
+                    position: 'fixed',
+                    top: centered ? '50%' : 100,
+                    left: '50%',
+                    width: resolvedWidth,
+                    maxWidth: 'calc(100vw - 32px)',
+                    background: 'var(--hb-color-bg-elevated, #fff)',
+                    borderRadius: 8,
+                    boxShadow: '0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)',
+                    pointerEvents: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxHeight: 'calc(100vh - 32px)',
+                    overflow: 'hidden',
+                    zIndex: 1050,
+                    transform: centered ? 'translate(-50%, -50%)' : 'translateX(-50%)',
+                    animation: `${leaving ? 'hb-modal-out' : 'hb-modal-in'} 0.3s cubic-bezier(0.16, 1, 0.3, 1) both`,
+                    ...style,
+                }, className: className, children: [(title !== undefined || closable) && (_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '16px 24px',
+                            borderBottom: '1px solid var(--hb-color-border-secondary, #f0f0f0)',
+                        }, children: [_jsx("div", { style: { fontSize: 16, fontWeight: 600, color: 'var(--hb-color-text, rgba(0,0,0,0.88))' }, children: title }), closable && (_jsx("button", { type: "button", onClick: e => onCancel?.(e), "aria-label": "close", style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: 22,
+                                    height: 22,
+                                    border: 'none',
+                                    background: 'none',
+                                    color: 'var(--hb-color-text-secondary, rgba(0,0,0,0.45))',
+                                    cursor: 'pointer',
+                                    borderRadius: '50%',
+                                    padding: 0,
+                                    transition: 'all 0.2s',
+                                }, onMouseEnter: e => (e.currentTarget.style.background = 'var(--hb-color-fill-tertiary, #fafafa)'), onMouseLeave: e => (e.currentTarget.style.background = 'none'), children: _jsx(CloseIcon, {}) }))] })), _jsx("div", { style: { flex: 1, padding: 24, overflowY: 'auto', color: 'var(--hb-color-text, rgba(0,0,0,0.88))', fontSize: 14 }, children: children }), resolvedFooter !== null && resolvedFooter !== undefined && (_jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            gap: 8,
+                            padding: '8px 24px',
+                            borderTop: '1px solid var(--hb-color-border-secondary, #f0f0f0)',
+                        }, children: resolvedFooter }))] })] }));
 }
 function imperative(opts) {
     const div = document.createElement('div');
@@ -21,7 +146,6 @@ function imperative(opts) {
             return;
         destroyed = true;
         if (!root) {
-            // createRoot 尚未就绪（import 未完成），直接移除容器
             div.remove();
             return;
         }
@@ -29,13 +153,12 @@ function imperative(opts) {
         setTimeout(() => {
             root.unmount();
             div.remove();
-        }, 200);
+        }, 300);
     };
     let root;
-    // 动态拿到 createRoot
     import('react-dom/client').then(({ createRoot }) => {
         root = createRoot(div);
-        const showCancel = opts.okCancel !== false; // 默认 confirm 两按钮，其余单按钮
+        const showCancel = opts.okCancel !== false;
         root.render(React.createElement(Modal, {
             open: true,
             title: opts.title,
@@ -53,7 +176,7 @@ function imperative(opts) {
                     destroy();
                 }
             },
-            footer: null, // hb-dialog footer 受限，交由 content 自行渲染按钮或使用默认
+            footer: null,
         }, opts.content));
     });
     return { destroy };
@@ -63,11 +186,6 @@ Modal.info = ((p) => imperative({ ...p, type: 'info', okCancel: false }));
 Modal.warning = ((p) => imperative({ ...p, type: 'warning', okCancel: false }));
 Modal.success = ((p) => imperative({ ...p, type: 'success', okCancel: false }));
 Modal.error = ((p) => imperative({ ...p, type: 'error', okCancel: false }));
-/**
- * useModal —— 返回 [modal, contextHolder]。
- * contextHolder 需渲染在组件树里（占位用，当前实现命令式调用走 body 挂载，holder 可不渲染内容）。
- * modal 实例提供 confirm/info/warning/success/error，与静态方法同义。
- */
 Modal.useModal = function useModal() {
     const api = React.useMemo(() => ({
         confirm: (p) => imperative({ ...p, type: 'confirm', okCancel: true }),
@@ -76,7 +194,6 @@ Modal.useModal = function useModal() {
         success: (p) => imperative({ ...p, type: 'success', okCancel: false }),
         error: (p) => imperative({ ...p, type: 'error', okCancel: false }),
     }), []);
-    // holder：命令式调用自己挂 body，这里返回空占位以满足 antd 的解构用法
     const holder = React.createElement(React.Fragment, null);
     return [api, holder];
 };

package/lib/components/PageHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbPageHeader } from '@huibo-ui/react';
 export function PageHeader(props) {
-    return _jsx(HbPageHeader, { title: typeof props.title === 'string' ? props.title : '', subtitle: typeof props.subTitle === 'string' ? props.subTitle : '', extra: props.extra, showBack: !!props.onBack });
+    return (_jsx(HbPageHeader, { title: typeof props.title === 'string' ? props.title : '', subtitle: typeof props.subTitle === 'string' ? props.subTitle : '', extra: props.extra, showBack: !!props.onBack }));
 }

package/lib/components/Pagination.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbPagination } from '@huibo-ui/react';
 export function Pagination(props) {
-    return _jsx(HbPagination, { "current-page": props.current ?? 1, "page-size": props.pageSize ?? 10, total: props.total ?? 0, "show-page-size": props.showSizeChanger, "page-sizes": props.pageSizeOptions?.map(Number), onHbCurrentChange: (e) => props.onChange?.(e.detail, props.pageSize ?? 10), style: props.style });
+    return (_jsx(HbPagination, { "current-page": props.current ?? 1, "page-size": props.pageSize ?? 10, total: props.total ?? 0, "show-page-size": props.showSizeChanger, "page-sizes": props.pageSizeOptions?.map(Number), onHbCurrentChange: (e) => props.onChange?.(e.detail, props.pageSize ?? 10), style: props.style }));
 }

package/lib/components/Popconfirm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbPopconfirm } from '@huibo-ui/react';
 export function Popconfirm(props) {
-    return _jsx(HbPopconfirm, { title: typeof props.title === 'string' ? props.title : '', confirmText: props.okText, cancelText: props.cancelText, position: (props.placement || 'top'), onHbConfirm: () => props.onConfirm?.(), onHbCancel: () => props.onCancel?.(), children: props.children });
+    return (_jsx(HbPopconfirm, { title: typeof props.title === 'string' ? props.title : '', confirmText: props.okText, cancelText: props.cancelText, position: (props.placement || 'top'), onHbConfirm: () => props.onConfirm?.(), onHbCancel: () => props.onCancel?.(), children: props.children }));
 }

package/lib/components/Popover.js

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

package/lib/components/Progress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbProgress } from '@huibo-ui/react';
 export function Progress(props) {
-    return _jsx(HbProgress, { percentage: props.percent ?? 0, type: props.type, status: props.status, showText: props.showInfo ?? true, strokeColor: props.strokeColor, strokeWidth: props.strokeWidth, style: props.style });
+    return (_jsx(HbProgress, { percentage: props.percent ?? 0, type: props.type, status: props.status, showText: props.showInfo ?? true, strokeColor: props.strokeColor, strokeWidth: props.strokeWidth, style: props.style }));
 }

package/lib/components/Radio.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 export declare function Radio(props: {
     value?: any;
     checked?: boolean;
-    onChange?: (e: any) => void;
     disabled?: boolean;
     children?: React.ReactNode;
+    onChange?: (e: any) => void;
+    style?: React.CSSProperties;
 }): React.JSX.Element;
 export declare namespace Radio {
     var Group: any;
@@ -12,12 +13,13 @@ export declare namespace Radio {
 }
 export declare function RadioGroup(props: {
     value?: any;
+    defaultValue?: any;
     onChange?: (value: any) => void;
-    options?: {
+    options?: Array<{
         value: any;
         label: React.ReactNode;
         disabled?: boolean;
-    }[];
+    }>;
     disabled?: boolean;
     children?: React.ReactNode;
     style?: React.CSSProperties;

package/lib/components/Radio.js

@@ -1,23 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { HbRadio } from '@huibo-ui/react';
+const GroupContext = React.createContext(null);
 export function Radio(props) {
-    return _jsx(HbRadio, { value: props.value, checked: props.checked, disabled: props.disabled, label: props.children, onHbChange: (e) => props.onChange?.({ target: { value: e.detail } }), children: props.children });
+    const ctx = React.useContext(GroupContext);
+    const isChecked = ctx ? ctx.value === props.value : props.checked;
+    const disabled = ctx?.disabled || props.disabled;
+    return (_jsx(HbRadio, { value: props.value, checked: isChecked ?? false, disabled: disabled, label: props.children, onHbChange: () => {
+            if (ctx)
+                ctx.onChange(props.value);
+            props.onChange?.({ target: { value: props.value, checked: true } });
+        }, style: props.style, children: props.children }));
 }
-// RadioGroup：huibo-ui 无独立 hb-radio-group 组件，用 div + 多个 hb-radio 实现
 export function RadioGroup(props) {
-    const { value, onChange, options, disabled } = props;
-    if (options) {
-        return (_jsx("div", { style: props.style, children: options.map((opt, i) => (_jsx(HbRadio, { value: opt.value, checked: value === opt.value, disabled: disabled || opt.disabled, label: opt.label, onHbChange: (e) => onChange?.(e.detail) }, i))) }));
-    }
-    // children 模式：透传（用户自己用 <Radio> 子元素）
-    return _jsx("div", { style: props.style, "data-value": value, children: props.children });
+    const { value: ctrlValue, defaultValue, onChange, options, disabled, children, style } = props;
+    const isControlled = ctrlValue !== undefined;
+    const [inner, setInner] = React.useState(defaultValue);
+    const selected = isControlled ? ctrlValue : inner;
+    const handleChange = React.useCallback((val) => {
+        if (!isControlled)
+            setInner(val);
+        onChange?.(val);
+    }, [isControlled, onChange]);
+    const ctx = React.useMemo(() => ({ value: selected, disabled, onChange: handleChange }), [selected, disabled, handleChange]);
+    return (_jsx(GroupContext.Provider, { value: ctx, children: _jsx("div", { style: style, children: options
+                ? options.map((opt, i) => (_jsx(HbRadio, { value: opt.value, checked: selected === opt.value, disabled: disabled || opt.disabled, label: opt.label, onHbChange: () => handleChange(opt.value) }, i)))
+                : children }) }));
 }
-// 挂上 antd 静态子组件（Radio.Group / Radio.Button）
 Radio.Group = RadioGroup;
-/**
- * Radio.Button —— 样式变体，huibo hb-radio 无 button 形态；
- * 这里复用 Radio 渲染（功能可用，视觉非按钮）。
- */
+/** Radio.Button —— 按钮形态变体。hb-radio 无 button 形态，复用 Radio（功能可用）。 */
 Radio.Button = function RadioButton(props) {
     return _jsx(Radio, { ...props });
 };

package/lib/components/Rate.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbRate } from '@huibo-ui/react';
 export function Rate(props) {
-    return _jsx(HbRate, { modelValue: props.value ?? 0, max: props.count ?? 5, allowHalf: props.allowHalf, disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), style: props.style });
+    return (_jsx(HbRate, { modelValue: props.value ?? 0, max: props.count ?? 5, allowHalf: props.allowHalf, disabled: props.disabled, onHbChange: (e) => props.onChange?.(e.detail), style: props.style }));
 }

package/lib/components/Result.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { HbResult } from '@huibo-ui/react';
 export function Result(props) {
-    return _jsxs(HbResult, { status: props.status, title: typeof props.title === 'string' ? props.title : '', subTitle: typeof props.subTitle === 'string' ? props.subTitle : '', children: [props.extra, props.children] });
+    return (_jsxs(HbResult, { status: props.status, title: typeof props.title === 'string' ? props.title : '', subTitle: typeof props.subTitle === 'string' ? props.subTitle : '', children: [props.extra, props.children] }));
 }

package/lib/components/Segmented.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 export declare function Segmented(props: {
-    options?: {
+    options?: Array<string | {
         value: string;
-        label: React.ReactNode;
-    }[];
+        label?: React.ReactNode;
+        disabled?: boolean;
+    }>;
     value?: string;
+    defaultValue?: string;
     onChange?: (value: string) => void;
     block?: boolean;
     size?: 'small' | 'middle' | 'large';

package/lib/components/Segmented.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbSegmented } from '@huibo-ui/react';
 export function Segmented(props) {
-    return _jsx(HbSegmented, { options: props.options, modelValue: props.value, block: props.block, size: props.size === 'middle' ? 'default' : props.size, onHbChange: (e) => props.onChange?.(e.detail) });
+    // antd 允许 options 为字符串数组（['每日','每周']）或对象数组；hb-segmented 只认 {value,label}。
+    // 规范化：字符串 → { value: s, label: s }，对象保持（label 缺省时用 value 兜底）。
+    const normalized = props.options?.map(o => typeof o === 'string' ? { value: o, label: o } : { value: String(o?.value), label: (o?.label ?? String(o?.value)), disabled: o?.disabled });
+    return (_jsx(HbSegmented, { options: normalized, modelValue: props.value ?? props.defaultValue, block: props.block, size: props.size === 'middle' ? 'default' : props.size, onHbChange: (e) => props.onChange?.(e.detail) }));
 }

package/lib/components/Select.js

@@ -27,7 +27,7 @@ function SelectOptionComponent(_props) {
     return null;
 }
 export function Select(props) {
-    const { value, onChange, options, mode, placeholder, disabled, size, allowClear, showSearch, virtual, style, children, } = props;
+    const { value, onChange, options, mode, placeholder, disabled, size, allowClear, showSearch, virtual, style, children } = props;
     // antd maxTagCount：多选时折叠超出数量的 tag。映射到 hb-select 的 collapseTags + maxCollapseTags
     const maxTagCount = props.maxTagCount;
     // antd fieldNames：自定义 option 字段名（如 {label:'nickName', value:'id'}）。

package/lib/components/Slider.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
+/**
+ * antd Slider 兼容层。
+ * 修复：旧实现 modelValue={props.value ?? 0} 没处理 defaultValue，导致 demo 的
+ * defaultValue={30} 不生效、滑块初始永远在 0。同时补上 range 双滑块支持。
+ */
 export declare function Slider(props: {
-    value?: number;
-    onChange?: (value: number) => void;
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onChange?: (value: number | number[]) => void;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
+    range?: boolean;
     vertical?: boolean;
     style?: React.CSSProperties;
 }): React.JSX.Element;

package/lib/components/Slider.js

@@ -1,5 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { HbSlider } from '@huibo-ui/react';
+/**
+ * antd Slider 兼容层。
+ * 修复：旧实现 modelValue={props.value ?? 0} 没处理 defaultValue，导致 demo 的
+ * defaultValue={30} 不生效、滑块初始永远在 0。同时补上 range 双滑块支持。
+ */
 export function Slider(props) {
-    return _jsx(HbSlider, { modelValue: props.value ?? 0, min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, disabled: props.disabled, vertical: props.vertical, onHbChange: (e) => props.onChange?.(e.detail), style: props.style });
+    const isRange = props.range || Array.isArray(props.value) || Array.isArray(props.defaultValue);
+    const modelValue = props.value ?? props.defaultValue ?? (isRange ? [0, 100] : 0);
+    return (_jsx(HbSlider, { modelValue: modelValue, min: props.min ?? 0, max: props.max ?? 100, step: props.step ?? 1, disabled: props.disabled, range: isRange, vertical: props.vertical, onHbChange: (e) => props.onChange?.(e.detail), style: props.style }));
 }

package/lib/components/Space.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 export declare function Space(props: {
-    size?: 'small' | 'middle' | 'large' | number;
+    size?: 'small' | 'middle' | 'large' | number | [number, number];
     direction?: 'horizontal' | 'vertical';
     align?: 'start' | 'center' | 'end';
     wrap?: boolean;
     children?: React.ReactNode;
     style?: React.CSSProperties;
+    className?: string;
 }): React.JSX.Element;
 export declare namespace Space {
     var Compact: any;

package/lib/components/Space.js

@@ -1,12 +1,55 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { HbSpace } from '@huibo-ui/react';
+/**
+ * antd Space 兼容层（纯 div 实现）。
+ *
+ * 不再走 <HbSpace>（Shadow DOM slot）：hb-space 的 ::slotted(*) 会把所有子元素强制
+ * display:inline-block + flex-shrink:0，导致塞进来的 <Select>/<DatePicker>/<Input>
+ * 宽度锁死、搜索栏等 flex 容器布局错乱。纯 div + flex + gap 是 antd 的真实做法，
+ * 子元素作为真实 DOM 参与 flex 流，宽度/伸缩行为与 antd 一致。
+ *
+ * size 映射 antd：small=8px / middle=16px / large=24px / number=自定义。
+ */
+const SIZE_MAP = {
+    small: 8,
+    middle: 16,
+    large: 24,
+};
 export function Space(props) {
-    return _jsx(HbSpace, { size: props.size === 'middle' ? 'default' : props.size, direction: props.direction, align: props.align, wrap: props.wrap, style: props.style, children: props.children });
+    const { size = 'small', direction = 'horizontal', align, wrap, children, style, className } = props;
+    // antd gutter 支持 [horizontal, vertical] 数组；单值时两向同值。
+    let rowGap;
+    let columnGap;
+    if (Array.isArray(size)) {
+        rowGap = size[0];
+        columnGap = size[1];
+    }
+    else if (typeof size === 'number') {
+        rowGap = size;
+        columnGap = size;
+    }
+    else {
+        const v = SIZE_MAP[size] ?? 8;
+        rowGap = v;
+        columnGap = v;
+    }
+    const isHorizontal = direction === 'horizontal';
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: isHorizontal ? 'row' : 'column',
+            flexWrap: wrap ? 'wrap' : 'nowrap',
+            rowGap,
+            columnGap,
+            alignItems: align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : align === 'center' ? 'center' : undefined,
+            ...style,
+        }, className: className, children: children }));
 }
 /**
  * Space.Compact —— 紧凑布局（antd 子组件）。huibo 无对应形态，
- * 这里直接透传 children（间距为 0）。
+ * 直接 inline-flex 透传 children，子元素间无 gap（紧凑）。
  */
 Space.Compact = function Compact(props) {
-    return _jsx("div", { style: { display: 'inline-flex', ...props.style }, children: props.children });
+    return (_jsx("div", { style: {
+            display: props.block ? 'flex' : 'inline-flex',
+            ...props.style,
+        }, className: props.className, children: props.children }));
 };