dishui 0.0.81 → 0.0.83

package/dist/components/Resizable/useResize.js

@@ -1,60 +1,61 @@
-import { useEffect as e, useLayoutEffect as t, useRef as n, useState as r } from "react";
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
 //#region src/components/Resizable/useResize.ts
-function i(i) {
-	let a = n(i);
-	t(() => {
-		a.current = i;
+function a(a) {
+	let o = r(a);
+	n(() => {
+		o.current = a;
 	});
-	let o = n(null), s = n(!1), [c, l] = r(!1);
-	e(() => () => o.current?.(), []), e(() => {
-		i.disabled && o.current?.();
-	}, [i.disabled]);
-	let u = (e) => Math.max(a.current.min ?? 0, Math.min(a.current.max ?? 100, e));
+	let s = r(null), c = r(!1), [l, u] = i(!1), d = e(() => s.current?.(), []);
+	t(() => () => s.current?.(), []), t(() => {
+		a.disabled && s.current?.();
+	}, [a.disabled]);
+	let f = (e) => Math.max(o.current.min ?? 0, Math.min(o.current.max ?? 100, e));
 	return {
-		dragging: c,
+		dragging: l,
+		cancel: d,
 		onPointerDown: (e) => {
-			if (a.current.disabled || e.button !== 0 || !e.isPrimary || o.current) return;
+			if (o.current.disabled || e.button !== 0 || !e.isPrimary || s.current) return;
 			e.stopPropagation();
 			let t = e.currentTarget;
 			t.focus();
-			let n = e.pointerId, { orientation: r = "horizontal", value: i, getScale: c, threshold: d = 3 } = a.current, f = r === "horizontal" ? e.clientX : e.clientY, p = c?.() ?? 1;
+			let n = e.pointerId, { orientation: r = "horizontal", getScale: i, threshold: a = 3 } = o.current, l = o.current.getValue?.() ?? o.current.value, d = r === "horizontal" ? e.clientX : e.clientY, p = i?.() ?? 1;
 			if (!Number.isFinite(p) || p === 0) return;
-			let m = !1, h = i;
-			s.current = !1;
+			let m = !1, h = l;
+			c.current = !1;
 			let g = (e = !1) => {
-				t.removeEventListener("pointermove", _), t.removeEventListener("pointerup", v), t.removeEventListener("pointercancel", y), t.removeEventListener("lostpointercapture", y), t.ownerDocument.defaultView?.removeEventListener("blur", y), o.current = null, t.hasPointerCapture(n) && t.releasePointerCapture(n), l(!1), e && m && a.current.onCommit?.(h);
+				t.removeEventListener("pointermove", _), t.removeEventListener("pointerup", v), t.removeEventListener("pointercancel", y), t.removeEventListener("lostpointercapture", y), t.ownerDocument.defaultView?.removeEventListener("blur", y), s.current = null, t.hasPointerCapture(n) && t.releasePointerCapture(n), u(!1), e && m && o.current.onCommit?.(h);
 			}, _ = (e) => {
 				if (e.pointerId !== n) return;
-				let t = (r === "horizontal" ? e.clientX : e.clientY) - f;
-				!m && Math.abs(t) <= d || (m = !0, s.current = !0, l(!0), e.preventDefault(), h = u(i + t * p), a.current.onChange(h));
+				let t = (r === "horizontal" ? e.clientX : e.clientY) - d;
+				!m && Math.abs(t) <= a || (m = !0, c.current = !0, u(!0), e.preventDefault(), h = f(l + t * p), o.current.onChange(h));
 			}, v = (e) => {
 				e.pointerId === n && g(!0);
 			}, y = (e) => {
-				e && "pointerId" in e && e.pointerId !== n || (s.current = !0, g());
+				e && "pointerId" in e && e.pointerId !== n || (c.current = !0, g());
 			};
 			try {
 				t.setPointerCapture(n);
 			} catch {
 				return;
 			}
-			t.addEventListener("pointermove", _), t.addEventListener("pointerup", v), t.addEventListener("pointercancel", y), t.addEventListener("lostpointercapture", y), t.ownerDocument.defaultView?.addEventListener("blur", y), o.current = y;
+			t.addEventListener("pointermove", _), t.addEventListener("pointerup", v), t.addEventListener("pointercancel", y), t.addEventListener("lostpointercapture", y), t.ownerDocument.defaultView?.addEventListener("blur", y), s.current = y;
 		},
 		onKeyDown: (e) => {
-			let { disabled: t, orientation: n = "horizontal", value: r, min: i = 0, max: o = 100, step: s = 1 } = a.current;
+			let { disabled: t, orientation: n = "horizontal", min: r = 0, max: i = 100, step: a = 1, keyboardDirection: s = 1, shiftMultiplier: c = 10 } = o.current;
 			if (t) return;
-			let c = n === "horizontal" ? "ArrowLeft" : "ArrowUp", l = n === "horizontal" ? "ArrowRight" : "ArrowDown", d;
-			if (e.key === "Home") d = i;
-			else if (e.key === "End") d = o;
-			else if (e.key === c || e.key === l) d = r + (e.key === c ? -1 : 1) * s * (e.shiftKey ? 10 : 1);
+			let l = o.current.getValue?.() ?? o.current.value, u = n === "horizontal" ? "ArrowLeft" : "ArrowUp", d = n === "horizontal" ? "ArrowRight" : "ArrowDown", p;
+			if (e.key === "Home") p = r;
+			else if (e.key === "End") p = i;
+			else if (e.key === u || e.key === d) p = l + (e.key === u ? -1 : 1) * s * a * (e.shiftKey ? c : 1);
 			else return;
-			e.preventDefault(), e.stopPropagation(), d = u(d), a.current.onChange(d), a.current.onCommit?.(d);
+			e.preventDefault(), e.stopPropagation(), p = f(p), o.current.onChange(p), o.current.onCommit?.(p);
 		},
 		onClickCapture: (e) => {
-			s.current && e.detail !== 0 && (e.preventDefault(), e.stopPropagation(), s.current = !1);
+			c.current && e.detail !== 0 && (e.preventDefault(), e.stopPropagation(), c.current = !1);
 		}
 	};
 }
 //#endregion
-export { i as useResize };
+export { a as useResize };
 
 //# sourceMappingURL=useResize.js.map

package/dist/components/Resizable/useResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResize.js","names":[],"sources":["../../../src/components/Resizable/useResize.ts"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nexport interface UseResizeOptions {\n  orientation?: 'horizontal' | 'vertical';\n  value: number;\n  min?: number;\n  max?: number;\n  disabled?: boolean;\n  step?: number;\n  /** Value units per CSS pixel; evaluated at pointer down. */\n  getScale?: () => number;\n  threshold?: number;\n  onChange: (value: number) => void;\n  onCommit?: (value: number) => void;\n}\n\n/** Shared pointer/keyboard engine. Does not mutate document/body styles. */\nexport function useResize(options: UseResizeOptions) {\n  const latest = useRef(options);\n  useLayoutEffect(() => { latest.current = options; });\n  const cleanup = useRef<(() => void) | null>(null);\n  const suppressClick = useRef(false);\n  const [dragging, setDragging] = useState(false);\n  useEffect(() => () => cleanup.current?.(), []);\n  useEffect(() => { if (options.disabled) cleanup.current?.(); }, [options.disabled]);\n  const clamp = (v: number) => Math.max(latest.current.min ?? 0, Math.min(latest.current.max ?? 100, v));\n  const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    if (latest.current.disabled || event.button !== 0 || !event.isPrimary || cleanup.current) return;\n    event.stopPropagation();\n    const el = event.currentTarget;\n    el.focus();\n    const id = event.pointerId;\n    const { orientation = 'horizontal', value, getScale, threshold = 3 } = latest.current;\n    const start = orientation === 'horizontal' ? event.clientX : event.clientY;\n    const scale = getScale?.() ?? 1;\n    if (!Number.isFinite(scale) || scale === 0) return;\n    let moved = false;\n    let last = value;\n    suppressClick.current = false;\n    const finish = (commit = false) => {\n      el.removeEventListener('pointermove', move);\n      el.removeEventListener('pointerup', up);\n      el.removeEventListener('pointercancel', cancel);\n      el.removeEventListener('lostpointercapture', cancel);\n      el.ownerDocument.defaultView?.removeEventListener('blur', cancel);\n      cleanup.current = null;\n      if (el.hasPointerCapture(id)) el.releasePointerCapture(id);\n      setDragging(false);\n      if (commit && moved) latest.current.onCommit?.(last);\n    };\n    const move = (e: PointerEvent) => {\n      if (e.pointerId !== id) return;\n      const delta = (orientation === 'horizontal' ? e.clientX : e.clientY) - start;\n      if (!moved && Math.abs(delta) <= threshold) return;\n      moved = true;\n      suppressClick.current = true;\n      setDragging(true);\n      e.preventDefault();\n      last = clamp(value + delta * scale);\n      latest.current.onChange(last);\n    };\n    const up = (e: PointerEvent) => { if (e.pointerId === id) finish(true); };\n    const cancel = (cancelEvent?: Event) => {\n      if (cancelEvent && 'pointerId' in cancelEvent && (cancelEvent as PointerEvent).pointerId !== id) return;\n      suppressClick.current = true;\n      finish();\n    };\n    try { el.setPointerCapture(id); } catch { return; }\n    el.addEventListener('pointermove', move);\n    el.addEventListener('pointerup', up);\n    el.addEventListener('pointercancel', cancel);\n    el.addEventListener('lostpointercapture', cancel);\n    el.ownerDocument.defaultView?.addEventListener('blur', cancel);\n    cleanup.current = cancel;\n  };\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const { disabled, orientation = 'horizontal', value, min = 0, max = 100, step = 1 } = latest.current;\n    if (disabled) return;\n    const negative = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n    const positive = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n    let next: number;\n    if (event.key === 'Home') next = min;\n    else if (event.key === 'End') next = max;\n    else if (event.key === negative || event.key === positive) next = value + (event.key === negative ? -1 : 1) * step * (event.shiftKey ? 10 : 1);\n    else return;\n    event.preventDefault();\n    event.stopPropagation();\n    next = clamp(next);\n    latest.current.onChange(next);\n    latest.current.onCommit?.(next);\n  };\n  const onClickCapture = (event: React.MouseEvent<HTMLElement>) => {\n    if (suppressClick.current && event.detail !== 0) {\n      event.preventDefault();\n      event.stopPropagation();\n      suppressClick.current = false;\n    }\n  };\n  return { dragging, onPointerDown, onKeyDown, onClickCapture };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useResize.js","names":[],"sources":["../../../src/components/Resizable/useResize.ts"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nexport interface UseResizeOptions {\n  orientation?: 'horizontal' | 'vertical';\n  value: number;\n  min?: number;\n  max?: number;\n  disabled?: boolean;\n  step?: number;\n  /** Arrow-key direction; independent of pointer scaling. Defaults to 1. */\n  keyboardDirection?: 1 | -1;\n  shiftMultiplier?: number;\n  /** Read the actual size at pointer down / key down (e.g. CSS-sized edges). */\n  getValue?: () => number;\n  /** Value units per CSS pixel; evaluated at pointer down. */\n  getScale?: () => number;\n  threshold?: number;\n  onChange: (value: number) => void;\n  onCommit?: (value: number) => void;\n}\n\n/** Shared pointer/keyboard engine. Does not mutate document/body styles. */\nexport function useResize(options: UseResizeOptions) {\n  const latest = useRef(options);\n  useLayoutEffect(() => { latest.current = options; });\n  const cleanup = useRef<(() => void) | null>(null);\n  const suppressClick = useRef(false);\n  const [dragging, setDragging] = useState(false);\n  const cancel = useCallback(() => cleanup.current?.(), []);\n  useEffect(() => () => cleanup.current?.(), []);\n  useEffect(() => { if (options.disabled) cleanup.current?.(); }, [options.disabled]);\n  const clamp = (v: number) => Math.max(latest.current.min ?? 0, Math.min(latest.current.max ?? 100, v));\n  const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    if (latest.current.disabled || event.button !== 0 || !event.isPrimary || cleanup.current) return;\n    event.stopPropagation();\n    const el = event.currentTarget;\n    el.focus();\n    const id = event.pointerId;\n    const { orientation = 'horizontal', getScale, threshold = 3 } = latest.current;\n    const value = latest.current.getValue?.() ?? latest.current.value;\n    const start = orientation === 'horizontal' ? event.clientX : event.clientY;\n    const scale = getScale?.() ?? 1;\n    if (!Number.isFinite(scale) || scale === 0) return;\n    let moved = false;\n    let last = value;\n    suppressClick.current = false;\n    const finish = (commit = false) => {\n      el.removeEventListener('pointermove', move);\n      el.removeEventListener('pointerup', up);\n      el.removeEventListener('pointercancel', cancel);\n      el.removeEventListener('lostpointercapture', cancel);\n      el.ownerDocument.defaultView?.removeEventListener('blur', cancel);\n      cleanup.current = null;\n      if (el.hasPointerCapture(id)) el.releasePointerCapture(id);\n      setDragging(false);\n      if (commit && moved) latest.current.onCommit?.(last);\n    };\n    const move = (e: PointerEvent) => {\n      if (e.pointerId !== id) return;\n      const delta = (orientation === 'horizontal' ? e.clientX : e.clientY) - start;\n      if (!moved && Math.abs(delta) <= threshold) return;\n      moved = true;\n      suppressClick.current = true;\n      setDragging(true);\n      e.preventDefault();\n      last = clamp(value + delta * scale);\n      latest.current.onChange(last);\n    };\n    const up = (e: PointerEvent) => { if (e.pointerId === id) finish(true); };\n    const cancel = (cancelEvent?: Event) => {\n      if (cancelEvent && 'pointerId' in cancelEvent && (cancelEvent as PointerEvent).pointerId !== id) return;\n      suppressClick.current = true;\n      finish();\n    };\n    try { el.setPointerCapture(id); } catch { return; }\n    el.addEventListener('pointermove', move);\n    el.addEventListener('pointerup', up);\n    el.addEventListener('pointercancel', cancel);\n    el.addEventListener('lostpointercapture', cancel);\n    el.ownerDocument.defaultView?.addEventListener('blur', cancel);\n    cleanup.current = cancel;\n  };\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const { disabled, orientation = 'horizontal', min = 0, max = 100, step = 1, keyboardDirection = 1, shiftMultiplier = 10 } = latest.current;\n    if (disabled) return;\n    const value = latest.current.getValue?.() ?? latest.current.value;\n    const negative = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n    const positive = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n    let next: number;\n    if (event.key === 'Home') next = min;\n    else if (event.key === 'End') next = max;\n    else if (event.key === negative || event.key === positive) next = value + (event.key === negative ? -1 : 1) * keyboardDirection * step * (event.shiftKey ? shiftMultiplier : 1);\n    else return;\n    event.preventDefault();\n    event.stopPropagation();\n    next = clamp(next);\n    latest.current.onChange(next);\n    latest.current.onCommit?.(next);\n  };\n  const onClickCapture = (event: React.MouseEvent<HTMLElement>) => {\n    if (suppressClick.current && event.detail !== 0) {\n      event.preventDefault();\n      event.stopPropagation();\n      suppressClick.current = false;\n    }\n  };\n  return { dragging, cancel, onPointerDown, onKeyDown, onClickCapture };\n}\n"],"mappings":";;AAsBA,SAAgB,EAAU,GAA2B;CACnD,IAAM,IAAS,EAAO,CAAO;CAC7B,QAAsB;EAAE,EAAO,UAAU;CAAS,CAAC;CACnD,IAAM,IAAU,EAA4B,IAAI,GAC1C,IAAgB,EAAO,EAAK,GAC5B,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,IAAS,QAAkB,EAAQ,UAAU,GAAG,CAAC,CAAC;CAExD,AADA,cAAsB,EAAQ,UAAU,GAAG,CAAC,CAAC,GAC7C,QAAgB;EAAE,AAAI,EAAQ,YAAU,EAAQ,UAAU;CAAG,GAAG,CAAC,EAAQ,QAAQ,CAAC;CAClF,IAAM,KAAS,MAAc,KAAK,IAAI,EAAO,QAAQ,OAAO,GAAG,KAAK,IAAI,EAAO,QAAQ,OAAO,KAAK,CAAC,CAAC;CA2ErG,OAAO;EAAE;EAAU;EAAQ,gBA1EJ,MAA2C;GAChE,IAAI,EAAO,QAAQ,YAAY,EAAM,WAAW,KAAK,CAAC,EAAM,aAAa,EAAQ,SAAS;GAC1F,EAAM,gBAAgB;GACtB,IAAM,IAAK,EAAM;GACjB,EAAG,MAAM;GACT,IAAM,IAAK,EAAM,WACX,EAAE,iBAAc,cAAc,aAAU,eAAY,MAAM,EAAO,SACjE,IAAQ,EAAO,QAAQ,WAAW,KAAK,EAAO,QAAQ,OACtD,IAAQ,MAAgB,eAAe,EAAM,UAAU,EAAM,SAC7D,IAAQ,IAAW,KAAK;GAC9B,IAAI,CAAC,OAAO,SAAS,CAAK,KAAK,MAAU,GAAG;GAC5C,IAAI,IAAQ,IACR,IAAO;GACX,EAAc,UAAU;GACxB,IAAM,KAAU,IAAS,OAAU;IASjC,AARA,EAAG,oBAAoB,eAAe,CAAI,GAC1C,EAAG,oBAAoB,aAAa,CAAE,GACtC,EAAG,oBAAoB,iBAAiB,CAAM,GAC9C,EAAG,oBAAoB,sBAAsB,CAAM,GACnD,EAAG,cAAc,aAAa,oBAAoB,QAAQ,CAAM,GAChE,EAAQ,UAAU,MACd,EAAG,kBAAkB,CAAE,KAAG,EAAG,sBAAsB,CAAE,GACzD,EAAY,EAAK,GACb,KAAU,KAAO,EAAO,QAAQ,WAAW,CAAI;GACrD,GACM,KAAQ,MAAoB;IAChC,IAAI,EAAE,cAAc,GAAI;IACxB,IAAM,KAAS,MAAgB,eAAe,EAAE,UAAU,EAAE,WAAW;IACnE,CAAC,KAAS,KAAK,IAAI,CAAK,KAAK,MACjC,IAAQ,IACR,EAAc,UAAU,IACxB,EAAY,EAAI,GAChB,EAAE,eAAe,GACjB,IAAO,EAAM,IAAQ,IAAQ,CAAK,GAClC,EAAO,QAAQ,SAAS,CAAI;GAC9B,GACM,KAAM,MAAoB;IAAE,AAAI,EAAE,cAAc,KAAI,EAAO,EAAI;GAAG,GAClE,KAAU,MAAwB;IAClC,KAAe,eAAe,KAAgB,EAA6B,cAAc,MAC7F,EAAc,UAAU,IACxB,EAAO;GACT;GACA,IAAI;IAAE,EAAG,kBAAkB,CAAE;GAAG,QAAQ;IAAE;GAAQ;GAMlD,AALA,EAAG,iBAAiB,eAAe,CAAI,GACvC,EAAG,iBAAiB,aAAa,CAAE,GACnC,EAAG,iBAAiB,iBAAiB,CAAM,GAC3C,EAAG,iBAAiB,sBAAsB,CAAM,GAChD,EAAG,cAAc,aAAa,iBAAiB,QAAQ,CAAM,GAC7D,EAAQ,UAAU;EACpB;EAyB0C,YAxBvB,MAA4C;GAC7D,IAAM,EAAE,aAAU,iBAAc,cAAc,SAAM,GAAG,SAAM,KAAK,UAAO,GAAG,uBAAoB,GAAG,qBAAkB,OAAO,EAAO;GACnI,IAAI,GAAU;GACd,IAAM,IAAQ,EAAO,QAAQ,WAAW,KAAK,EAAO,QAAQ,OACtD,IAAW,MAAgB,eAAe,cAAc,WACxD,IAAW,MAAgB,eAAe,eAAe,aAC3D;GACJ,IAAI,EAAM,QAAQ,QAAQ,IAAO;QAC5B,IAAI,EAAM,QAAQ,OAAO,IAAO;QAChC,IAAI,EAAM,QAAQ,KAAY,EAAM,QAAQ,GAAU,IAAO,KAAS,EAAM,QAAQ,IAAW,KAAK,KAAK,IAAoB,KAAQ,EAAM,WAAW,IAAkB;QACxK;GAKL,AAJA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,IAAO,EAAM,CAAI,GACjB,EAAO,QAAQ,SAAS,CAAI,GAC5B,EAAO,QAAQ,WAAW,CAAI;EAChC;EAQqD,iBAP7B,MAAyC;GAC/D,AAAI,EAAc,WAAW,EAAM,WAAW,MAC5C,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAc,UAAU;EAE5B;CACoE;AACtE"}

package/dist/components/SidebarToggleButton/index.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface SidebarToggleButtonProps {
     /** 侧边栏是否折叠 */
     isCollapsed: boolean;
+    /** 侧栏位置；手柄始终放在靠近主内容的内侧边缘。 */
+    side?: 'left' | 'right';
     /** 切换侧边栏的回调 */
     onToggle: () => void;
     /** 当前侧边栏宽度 */
@@ -15,16 +17,16 @@ interface SidebarToggleButtonProps {
     /** 拖拽时的最大宽度（px） */
     maxWidth?: number;
     /**
-     * 侧边栏容器元素的引用（用于拖拽时获取左边缘，使宽度计算与内嵌位置无关）。
+     * 侧边栏容器引用，用实际渲染宽度作为调宽起点（包括 rem / 百分比宽度）。
      */
     anchorRef?: React.RefObject<HTMLElement | null>;
 }
 /**
- * 桌面端侧边栏切换控件（与右侧纵向边界线一体）
+ * 桌面端侧边栏切换控件（与靠近主内容的纵向边界线一体）
  * - 点击：折叠 / 展开侧边栏
  * - 拖拽：任意调节侧边栏宽度（需传入 onWidthChange）
  *
- * 采用 `absolute` 定位内嵌在侧边栏（relative 容器）右边缘，随侧边栏布局自然移动——
+ * 采用 `absolute` 定位内嵌在侧边栏（relative 容器）内侧边缘，随侧边栏布局自然移动——
  * 无需测量/追赶，无延迟，也不受其它可变宽度组件影响。
  */
 export declare const DesktopSidebarToggleButton: React.FC<SidebarToggleButtonProps>;

package/dist/components/SidebarToggleButton/index.js

@@ -3,42 +3,45 @@ import { useResize as e } from "../Resizable/useResize.js";
 import "react";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/SidebarToggleButton/index.tsx
-var i = ({ isCollapsed: t, onToggle: i, sidebarWidth: a, onWidthChange: o, minWidth: s = 160, maxWidth: c = 400 }) => {
-	let l = typeof o == "function", u = e({
-		value: a,
-		min: s,
-		max: c,
+var i = ({ isCollapsed: t, side: i = "left", onToggle: a, sidebarWidth: o, onWidthChange: s, minWidth: c = 160, maxWidth: l = 400, anchorRef: u }) => {
+	let d = typeof s == "function", f = e({
+		value: o,
+		min: c,
+		max: l,
 		step: 10,
-		disabled: !l || t,
+		disabled: !d || t,
 		threshold: 4,
-		onChange: (e) => o?.(e)
+		getValue: () => u?.current?.getBoundingClientRect().width ?? o,
+		getScale: () => i === "right" ? -1 : 1,
+		keyboardDirection: i === "right" ? -1 : 1,
+		onChange: (e) => s?.(e)
 	});
 	return /* @__PURE__ */ r("div", {
-		className: "dishui-sidebar-resize absolute inset-y-0 right-0 z-40 hidden w-3 translate-x-1/2 md:block lg:block",
+		className: `dishui-sidebar-resize absolute inset-y-0 z-40 hidden w-3 md:block ${i === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"}`,
 		style: {
-			cursor: l && !t ? "ew-resize" : "pointer",
+			cursor: d && !t ? "ew-resize" : "pointer",
 			touchAction: "none",
 			userSelect: "none"
 		},
 		onPointerDown: (e) => {
-			(e.target === e.currentTarget || !e.target.closest("button")) && u.onPointerDown(e);
+			(e.target === e.currentTarget || !e.target.closest("button")) && f.onPointerDown(e);
 		},
-		onClickCapture: u.onClickCapture,
-		onClick: i,
+		onClickCapture: f.onClickCapture,
+		onClick: a,
 		children: [/* @__PURE__ */ n("div", {
-			className: "pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-base-300",
+			className: "pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-hairline",
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ n("button", {
 			type: "button",
 			tabIndex: 0,
-			onPointerDown: u.onPointerDown,
-			onKeyDown: u.onKeyDown,
-			className: "group absolute top-1/2 left-1/2 flex h-10 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-base-300 bg-base-100 text-base-content/40 shadow-md transition-[width,color] duration-200 ease-in-out hover:w-5 hover:text-base-content focus:outline-none focus:ring-2 focus:ring-primary/40",
-			style: { cursor: l ? "ew-resize" : "pointer" },
-			"aria-label": t ? "展开侧边栏" : l ? "拖拽调整侧边栏宽度，点击收起" : "收起侧边栏",
+			onPointerDown: f.onPointerDown,
+			onKeyDown: f.onKeyDown,
+			className: "group absolute top-1/2 left-1/2 flex h-10 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-hairline bg-page text-tertiary shadow-none transition-[width,color] duration-200 ease-in-out hover:w-5 hover:text-primary focus-visible:outline-2 focus-visible:outline-ring",
+			style: { cursor: d && !t ? "ew-resize" : "pointer" },
+			"aria-label": t ? "展开侧边栏" : d ? "拖拽调整侧边栏宽度，点击收起" : "收起侧边栏",
 			"aria-expanded": !t,
-			"aria-description": l && !t ? `宽度 ${Math.round(a)}px；左右方向键调整，Home/End 到达最小/最大宽度，Enter/空格折叠` : void 0,
-			title: l && !t ? "拖拽调节宽度 · 点击折叠" : void 0,
+			"aria-description": d && !t ? `宽度 ${Math.round(o)}px；左右方向键调整，Home/End 到达最小/最大宽度，Enter/空格折叠` : void 0,
+			title: d && !t ? "拖拽调节宽度 · 点击折叠" : void 0,
 			children: t ? /* @__PURE__ */ n("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				width: "10",
@@ -51,7 +54,7 @@ var i = ({ isCollapsed: t, onToggle: i, sidebarWidth: a, onWidthChange: o, minWi
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: "2.5",
-					d: "M9 5l7 7-7 7"
+					d: i === "right" ? "M15 5l-7 7 7 7" : "M9 5l7 7-7 7"
 				})
 			}) : /* @__PURE__ */ r("svg", {
 				width: "6",

package/dist/components/SidebarToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SidebarToggleButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useResize } from '../Resizable/useResize';\nimport '../Resizable/Resizable.css';\n\ninterface SidebarToggleButtonProps {\n  /** 侧边栏是否折叠 */\n  isCollapsed: boolean;\n  /** 切换侧边栏的回调 */\n  onToggle: () => void;\n  /** 当前侧边栏宽度 */\n  sidebarWidth: number;\n  /** 折叠时的宽度 */\n  collapsedWidth?: number;\n  /** 拖拽调节宽度的回调（传入时支持拖拽缩放） */\n  onWidthChange?: (width: number) => void;\n  /** 拖拽时的最小宽度（px） */\n  minWidth?: number;\n  /** 拖拽时的最大宽度（px） */\n  maxWidth?: number;\n  /**\n   * 侧边栏容器元素的引用（用于拖拽时获取左边缘，使宽度计算与内嵌位置无关）。\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n}\n\n\n\n/**\n * 桌面端侧边栏切换控件（与右侧纵向边界线一体）\n * - 点击：折叠 / 展开侧边栏\n * - 拖拽：任意调节侧边栏宽度（需传入 onWidthChange）\n *\n * 采用 `absolute` 定位内嵌在侧边栏（relative 容器）右边缘，随侧边栏布局自然移动——\n * 无需测量/追赶，无延迟，也不受其它可变宽度组件影响。\n */\nexport const DesktopSidebarToggleButton: React.FC<SidebarToggleButtonProps> = ({\n  isCollapsed,\n  onToggle,\n  sidebarWidth,\n  onWidthChange,\n  minWidth = 160,\n  maxWidth = 400,\n}) => {\n  const draggable = typeof onWidthChange === 'function';\n\n  const resize = useResize({\n    value: sidebarWidth, min: minWidth, max: maxWidth, step: 10,\n    disabled: !draggable || isCollapsed, threshold: 4,\n    onChange: width => onWidthChange?.(width),\n  });\n\n  return (\n    // 与右侧边界线一体：定位在侧边栏右边缘（right:0）的全高约束区，\n    // 内嵌纵向边界线 + 坐落在线上的 pill。w-3 作为拖拽热区。\n    <div\n      className=\"dishui-sidebar-resize absolute inset-y-0 right-0 z-40 hidden w-3 translate-x-1/2 md:block lg:block\"\n      style={{ cursor: draggable && !isCollapsed ? 'ew-resize' : 'pointer', touchAction: 'none', userSelect: 'none' }}\n      onPointerDown={event => { if (event.target === event.currentTarget || !(event.target as HTMLElement).closest('button')) resize.onPointerDown(event); }}\n      onClickCapture={resize.onClickCapture}\n      onClick={onToggle}\n    >\n      {/* 纵向边界线（居中于热区 = 侧边栏右边缘） */}\n      <div className=\"pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-base-300\" aria-hidden=\"true\" />\n      {/* pill 手柄（坐落在线上，与之一体） */}\n      <button\n        type=\"button\"\n        tabIndex={0}\n        onPointerDown={resize.onPointerDown}\n                onKeyDown={resize.onKeyDown}\n        className=\"group absolute top-1/2 left-1/2 flex h-10 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-base-300 bg-base-100 text-base-content/40 shadow-md transition-[width,color] duration-200 ease-in-out hover:w-5 hover:text-base-content focus:outline-none focus:ring-2 focus:ring-primary/40\"\n        style={{ cursor: draggable ? 'ew-resize' : 'pointer' }}\n        aria-label={isCollapsed ? '展开侧边栏' : (draggable ? '拖拽调整侧边栏宽度，点击收起' : '收起侧边栏')}\n        aria-expanded={!isCollapsed}\n                aria-description={draggable && !isCollapsed ? `宽度 ${Math.round(sidebarWidth)}px；左右方向键调整，Home/End 到达最小/最大宽度，Enter/空格折叠` : undefined}\n        title={draggable && !isCollapsed ? '拖拽调节宽度 · 点击折叠' : undefined}\n      >\n        {isCollapsed ? (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" className=\"pointer-events-none\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.5\" d=\"M9 5l7 7-7 7\" />\n          </svg>\n        ) : (\n          <svg width=\"6\" height=\"18\" viewBox=\"0 0 6 18\" fill=\"currentColor\" aria-hidden=\"true\" className=\"pointer-events-none\">\n            <circle cx=\"1.5\" cy=\"3\" r=\"1\" /><circle cx=\"4.5\" cy=\"3\" r=\"1\" />\n            <circle cx=\"1.5\" cy=\"9\" r=\"1\" /><circle cx=\"4.5\" cy=\"9\" r=\"1\" />\n            <circle cx=\"1.5\" cy=\"15\" r=\"1\" /><circle cx=\"4.5\" cy=\"15\" r=\"1\" />\n          </svg>\n        )}\n      </button>\n    </div>\n  );\n};\n\n/**\n * 移动端悬浮侧边栏切换按钮\n */\nexport const MobileSidebarToggleButton: React.FC<Pick<SidebarToggleButtonProps, 'isCollapsed' | 'onToggle'>> = ({\n  isCollapsed,\n  onToggle,\n}) => {\n  return (\n    <button\n      onClick={onToggle}\n      className=\"fixed bottom-6 right-6 z-50 bg-primary bg-opacity-30 hover:bg-opacity-50 text-primary-content rounded-full p-3 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-105 md:hidden\"\n      style={{\n        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',\n      }}\n      aria-label={isCollapsed ? '展开侧边栏' : '收起侧边栏'}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        className=\"w-5 h-5\"\n      >\n        {isCollapsed ? (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n        ) : (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n        )}\n      </svg>\n    </button>\n  );\n};\n\n/**\n * 组合的侧边栏切换按钮（包含桌面端和移动端）\n */\nexport const SidebarToggleButtons: React.FC<SidebarToggleButtonProps> = (props) => {\n  return (\n    <>\n      <DesktopSidebarToggleButton {...props} />\n      <MobileSidebarToggleButton isCollapsed={props.isCollapsed} onToggle={props.onToggle} />\n    </>\n  );\n};\n\nexport default SidebarToggleButtons;\n"],"mappings":";;;;;AAmCA,IAAa,KAAkE,EAC7E,gBACA,aACA,iBACA,kBACA,cAAW,KACX,cAAW,UACP;CACJ,IAAM,IAAY,OAAO,KAAkB,YAErC,IAAS,EAAU;EACvB,OAAO;EAAc,KAAK;EAAU,KAAK;EAAU,MAAM;EACzD,UAAU,CAAC,KAAa;EAAa,WAAW;EAChD,WAAU,MAAS,IAAgB,CAAK;CAC1C,CAAC;CAED,OAGE,kBAAC,OAAD;EACE,WAAU;EACV,OAAO;GAAE,QAAQ,KAAa,CAAC,IAAc,cAAc;GAAW,aAAa;GAAQ,YAAY;EAAO;EAC9G,gBAAe,MAAS;GAAE,CAAI,EAAM,WAAW,EAAM,iBAAiB,CAAE,EAAM,OAAuB,QAAQ,QAAQ,MAAG,EAAO,cAAc,CAAK;EAAG;EACrJ,gBAAgB,EAAO;EACvB,SAAS;EALX,UAAA,CAQE,kBAAC,OAAD;GAAK,WAAU;GAAoF,eAAY;EAAQ,CAAA,GAEvH,kBAAC,UAAD;GACE,MAAK;GACL,UAAU;GACV,eAAe,EAAO;GACd,WAAW,EAAO;GAC1B,WAAU;GACV,OAAO,EAAE,QAAQ,IAAY,cAAc,UAAU;GACrD,cAAY,IAAc,UAAW,IAAY,mBAAmB;GACpE,iBAAe,CAAC;GACR,oBAAkB,KAAa,CAAC,IAAc,MAAM,KAAK,MAAM,CAAY,EAAE,4CAA4C,KAAA;GACjI,OAAO,KAAa,CAAC,IAAc,kBAAkB,KAAA;GAEpD,UAAA,IACC,kBAAC,OAAD;IAAK,OAAM;IAA6B,OAAM;IAAK,QAAO;IAAK,MAAK;IAAO,SAAQ;IAAY,QAAO;IAAe,WAAU;IAC7H,UAAA,kBAAC,QAAD;KAAM,eAAc;KAAQ,gBAAe;KAAQ,aAAY;KAAM,GAAE;IAAgB,CAAA;GACpF,CAAA,IAEL,kBAAC,OAAD;IAAK,OAAM;IAAI,QAAO;IAAK,SAAQ;IAAW,MAAK;IAAe,eAAY;IAAO,WAAU;IAA/F,UAAA;KACE,kBAAC,UAAD;MAAQ,IAAG;MAAM,IAAG;MAAI,GAAE;KAAK,CAAA;KAAC,kBAAC,UAAD;MAAQ,IAAG;MAAM,IAAG;MAAI,GAAE;KAAK,CAAA;KAC/D,kBAAC,UAAD;MAAQ,IAAG;MAAM,IAAG;MAAI,GAAE;KAAK,CAAA;KAAC,kBAAC,UAAD;MAAQ,IAAG;MAAM,IAAG;MAAI,GAAE;KAAK,CAAA;KAC/D,kBAAC,UAAD;MAAQ,IAAG;MAAM,IAAG;MAAK,GAAE;KAAK,CAAA;KAAC,kBAAC,UAAD;MAAQ,IAAG;MAAM,IAAG;MAAK,GAAE;KAAK,CAAA;IAC9D;;EAED,CAAA,CACL;;AAET,GAKa,KAAmG,EAC9G,gBACA,kBAGE,kBAAC,UAAD;CACE,SAAS;CACT,WAAU;CACV,OAAO,EACL,WAAW,iCACb;CACA,cAAY,IAAc,UAAU;CAEpC,UAAA,kBAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,SAAQ;EACR,QAAO;EACP,WAAU;EAET,UAAA,IACC,kBAAC,QAAD;GAAM,eAAc;GAAQ,gBAAe;GAAQ,aAAY;GAAI,GAAE;EAA2B,CAAA,IAEhG,kBAAC,QAAD;GAAM,eAAc;GAAQ,gBAAe;GAAQ,aAAY;GAAI,GAAE;EAAwB,CAAA;CAE5F,CAAA;AACC,CAAA,GAOC,KAA4D,MAErE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAA4B,GAAI,EAAQ,CAAA,GACxC,kBAAC,GAAD;CAA2B,aAAa,EAAM;CAAa,UAAU,EAAM;AAAW,CAAA,CACtF,EAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SidebarToggleButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useResize } from '../Resizable/useResize';\nimport '../Resizable/Resizable.css';\n\ninterface SidebarToggleButtonProps {\n  /** 侧边栏是否折叠 */\n  isCollapsed: boolean;\n  /** 侧栏位置；手柄始终放在靠近主内容的内侧边缘。 */\n  side?: 'left' | 'right';\n  /** 切换侧边栏的回调 */\n  onToggle: () => void;\n  /** 当前侧边栏宽度 */\n  sidebarWidth: number;\n  /** 折叠时的宽度 */\n  collapsedWidth?: number;\n  /** 拖拽调节宽度的回调（传入时支持拖拽缩放） */\n  onWidthChange?: (width: number) => void;\n  /** 拖拽时的最小宽度（px） */\n  minWidth?: number;\n  /** 拖拽时的最大宽度（px） */\n  maxWidth?: number;\n  /**\n   * 侧边栏容器引用，用实际渲染宽度作为调宽起点（包括 rem / 百分比宽度）。\n   */\n  anchorRef?: React.RefObject<HTMLElement | null>;\n}\n\n\n\n/**\n * 桌面端侧边栏切换控件（与靠近主内容的纵向边界线一体）\n * - 点击：折叠 / 展开侧边栏\n * - 拖拽：任意调节侧边栏宽度（需传入 onWidthChange）\n *\n * 采用 `absolute` 定位内嵌在侧边栏（relative 容器）内侧边缘，随侧边栏布局自然移动——\n * 无需测量/追赶，无延迟，也不受其它可变宽度组件影响。\n */\nexport const DesktopSidebarToggleButton: React.FC<SidebarToggleButtonProps> = ({\n  isCollapsed,\n  side = 'left',\n  onToggle,\n  sidebarWidth,\n  onWidthChange,\n  minWidth = 160,\n  maxWidth = 400,\n  anchorRef,\n}) => {\n  const draggable = typeof onWidthChange === 'function';\n\n  const resize = useResize({\n    value: sidebarWidth, min: minWidth, max: maxWidth, step: 10,\n    disabled: !draggable || isCollapsed, threshold: 4,\n    getValue: () => anchorRef?.current?.getBoundingClientRect().width ?? sidebarWidth,\n    getScale: () => side === 'right' ? -1 : 1,\n    keyboardDirection: side === 'right' ? -1 : 1,\n    onChange: width => onWidthChange?.(width),\n  });\n\n  return (\n    // 热区透明覆盖相邻区域；只有分隔线和 pill 绘制背景，不占据布局宽度。\n    <div\n      className={`dishui-sidebar-resize absolute inset-y-0 z-40 hidden w-3 md:block ${side === 'right' ? 'left-0 -translate-x-1/2' : 'right-0 translate-x-1/2'}`}\n      style={{ cursor: draggable && !isCollapsed ? 'ew-resize' : 'pointer', touchAction: 'none', userSelect: 'none' }}\n      onPointerDown={event => { if (event.target === event.currentTarget || !(event.target as HTMLElement).closest('button')) resize.onPointerDown(event); }}\n      onClickCapture={resize.onClickCapture}\n      onClick={onToggle}\n    >\n      {/* 纵向边界线与 pill 共用区域交界处的中心轴。 */}\n      <div className=\"pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-hairline\" aria-hidden=\"true\" />\n      {/* pill 手柄（坐落在线上，与之一体） */}\n      <button\n        type=\"button\"\n        tabIndex={0}\n        onPointerDown={resize.onPointerDown}\n        onKeyDown={resize.onKeyDown}\n        className=\"group absolute top-1/2 left-1/2 flex h-10 w-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-hairline bg-page text-tertiary shadow-none transition-[width,color] duration-200 ease-in-out hover:w-5 hover:text-primary focus-visible:outline-2 focus-visible:outline-ring\"\n        style={{ cursor: draggable && !isCollapsed ? 'ew-resize' : 'pointer' }}\n        aria-label={isCollapsed ? '展开侧边栏' : (draggable ? '拖拽调整侧边栏宽度，点击收起' : '收起侧边栏')}\n        aria-expanded={!isCollapsed}\n        aria-description={draggable && !isCollapsed ? `宽度 ${Math.round(sidebarWidth)}px；左右方向键调整，Home/End 到达最小/最大宽度，Enter/空格折叠` : undefined}\n        title={draggable && !isCollapsed ? '拖拽调节宽度 · 点击折叠' : undefined}\n      >\n        {isCollapsed ? (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" className=\"pointer-events-none\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2.5\" d={side === 'right' ? 'M15 5l-7 7 7 7' : 'M9 5l7 7-7 7'} />\n          </svg>\n        ) : (\n          <svg width=\"6\" height=\"18\" viewBox=\"0 0 6 18\" fill=\"currentColor\" aria-hidden=\"true\" className=\"pointer-events-none\">\n            <circle cx=\"1.5\" cy=\"3\" r=\"1\" /><circle cx=\"4.5\" cy=\"3\" r=\"1\" />\n            <circle cx=\"1.5\" cy=\"9\" r=\"1\" /><circle cx=\"4.5\" cy=\"9\" r=\"1\" />\n            <circle cx=\"1.5\" cy=\"15\" r=\"1\" /><circle cx=\"4.5\" cy=\"15\" r=\"1\" />\n          </svg>\n        )}\n      </button>\n    </div>\n  );\n};\n\n/**\n * 移动端悬浮侧边栏切换按钮\n */\nexport const MobileSidebarToggleButton: React.FC<Pick<SidebarToggleButtonProps, 'isCollapsed' | 'onToggle'>> = ({\n  isCollapsed,\n  onToggle,\n}) => {\n  return (\n    <button\n      onClick={onToggle}\n      className=\"fixed bottom-6 right-6 z-50 bg-primary bg-opacity-30 hover:bg-opacity-50 text-primary-content rounded-full p-3 shadow-lg transition-all duration-300 ease-in-out backdrop-blur-sm hover:scale-105 md:hidden\"\n      style={{\n        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',\n      }}\n      aria-label={isCollapsed ? '展开侧边栏' : '收起侧边栏'}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        className=\"w-5 h-5\"\n      >\n        {isCollapsed ? (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n        ) : (\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n        )}\n      </svg>\n    </button>\n  );\n};\n\n/**\n * 组合的侧边栏切换按钮（包含桌面端和移动端）\n */\nexport const SidebarToggleButtons: React.FC<SidebarToggleButtonProps> = (props) => {\n  return (\n    <>\n      <DesktopSidebarToggleButton {...props} />\n      <MobileSidebarToggleButton isCollapsed={props.isCollapsed} onToggle={props.onToggle} />\n    </>\n  );\n};\n\nexport default SidebarToggleButtons;\n"],"mappings":"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"}

package/dist/components/Table/index.d.ts

@@ -5,15 +5,9 @@ export type TableProps = {
     onClick?: (e: React.MouseEvent) => void;
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
-};
-export type TableHeadProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-export type TableBodyProps = {
-    children: React.ReactNode;
-    className?: string;
-};
+} & React.TableHTMLAttributes<HTMLTableElement>;
+export type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;
+export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 export type TableRowProps = {
     children: React.ReactNode;
     className?: string;
@@ -24,7 +18,7 @@ export type TableRowProps = {
     onMouseLeave?: (e: React.MouseEvent) => void;
 } & Omit<React.HTMLAttributes<HTMLTableRowElement>, 'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'>;
 export type TableCellProps = {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     colSpan?: number;
@@ -32,7 +26,7 @@ export type TableCellProps = {
     onDoubleClick?: (e: React.MouseEvent) => void;
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
-};
+} & React.TdHTMLAttributes<HTMLTableCellElement>;
 export type TableHeaderCellProps = {
     children: React.ReactNode;
     className?: string;
@@ -45,8 +39,12 @@ export type TableHeaderCellProps = {
     onDrop?: (e: React.DragEvent) => void;
     onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
-};
+} & React.ThHTMLAttributes<HTMLTableCellElement>;
+export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
+export type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;
 interface TableCompound extends React.FC<TableProps> {
+    Caption: React.FC<TableCaptionProps>;
+    Footer: React.FC<TableFooterProps>;
     Head: React.FC<TableHeadProps>;
     Body: React.FC<TableBodyProps>;
     Row: React.FC<TableRowProps>;

package/dist/components/Table/index.js

@@ -2,25 +2,28 @@ import { cn as e } from "../../utils/cn.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Table/index.tsx
-var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseLeave: o }) => {
-	let s = e("table", r);
+var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseLeave: o, ...s }) => {
+	let c = e("table", r);
 	return /* @__PURE__ */ t("table", {
-		className: s,
+		...s,
+		className: c,
 		onClick: i,
 		onMouseEnter: a,
 		onMouseLeave: o,
 		children: n
 	});
-}, i = ({ children: n, className: r = "" }) => {
-	let i = e("table-header-group", r);
+}, i = ({ children: n, className: r = "", ...i }) => {
+	let a = e("table-header-group", r);
 	return /* @__PURE__ */ t("thead", {
-		className: i,
+		...i,
+		className: a,
 		children: n
 	});
-}, a = ({ children: n, className: r = "" }) => {
-	let i = e("table-row-group", r);
+}, a = ({ children: n, className: r = "", ...i }) => {
+	let a = e("table-row-group", r);
 	return /* @__PURE__ */ t("tbody", {
-		className: i,
+		...i,
+		className: a,
 		children: n
 	});
 }, o = ({ children: n, className: r = "", selected: i = !1, onClick: a, onDoubleClick: o, onMouseEnter: s, onMouseLeave: c, ...l }) => {
@@ -34,10 +37,11 @@ var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseL
 		...l,
 		children: n
 	});
-}, s = ({ children: n, className: r = "", onClick: i, colSpan: a, style: o, onDoubleClick: s, onMouseEnter: c, onMouseLeave: l }) => {
-	let u = e("table-cell", r);
+}, s = ({ children: n, className: r = "", onClick: i, colSpan: a, style: o, onDoubleClick: s, onMouseEnter: c, onMouseLeave: l, ...u }) => {
+	let d = e("table-cell", r);
 	return /* @__PURE__ */ t("td", {
-		className: u,
+		...u,
+		className: d,
 		onClick: i,
 		colSpan: a,
 		style: o,
@@ -46,10 +50,11 @@ var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseL
 		onMouseLeave: l,
 		children: n
 	});
-}, c = ({ children: r, className: i = "", onClick: a, sortable: o = !1, sortDirection: s = null, draggable: c, onDragStart: l, onDragOver: u, onDrop: d, onMouseEnter: f, onMouseLeave: p }) => {
-	let m = e("table-cell font-medium", o && "cursor-pointer", i);
+}, c = ({ children: r, className: i = "", onClick: a, sortable: o = !1, sortDirection: s = null, draggable: c, onDragStart: l, onDragOver: u, onDrop: d, onMouseEnter: f, onMouseLeave: p, ...m }) => {
+	let h = e("table-cell font-medium", o && "cursor-pointer", i);
 	return /* @__PURE__ */ t("th", {
-		className: m,
+		...m,
+		className: h,
 		onClick: a,
 		draggable: c,
 		onDragStart: l,
@@ -57,7 +62,7 @@ var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseL
 		onDrop: d,
 		onMouseEnter: f,
 		onMouseLeave: p,
-		children: /* @__PURE__ */ n("div", {
+		children: o ? /* @__PURE__ */ n("div", {
 			className: "flex items-center gap-2",
 			children: [r, o && /* @__PURE__ */ t("div", {
 				className: "flex flex-col",
@@ -102,11 +107,11 @@ var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseL
 					})
 				})
 			})]
-		})
+		}) : r
 	});
-}, l = r;
-l.Head = i, l.Body = a, l.Row = o, l.Cell = s, l.HeaderCell = c;
+}, l = (e) => /* @__PURE__ */ t("caption", { ...e }), u = (e) => /* @__PURE__ */ t("tfoot", { ...e }), d = r;
+d.Caption = l, d.Footer = u, d.Head = i, d.Body = a, d.Row = o, d.Cell = s, d.HeaderCell = c;
 //#endregion
-export { l as default };
+export { d as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TableProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n};\n\nconst Table = ({\n  children,\n  className = '',\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, className);\n\n  return (\n    <table \n      className={tableClasses}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </table>\n  );\n};\n\n// Table.Head 组件\nexport type TableHeadProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst TableHead = ({\n  children,\n  className = '',\n}: TableHeadProps) => {\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead className={headClasses}>\n      {children}\n    </thead>\n  );\n};\n\n// Table.Body 组件\nexport type TableBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst TableBody = ({\n  children,\n  className = '',\n}: TableBodyProps) => {\n  const baseClass = 'table-row-group';\n  \n  const bodyClasses = cn(baseClass, className);\n\n  return (\n    <tbody className={bodyClasses}>\n      {children}\n    </tbody>\n  );\n};\n\n// Table.Row 组件\nexport type TableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  selected?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & Omit<\n  React.HTMLAttributes<HTMLTableRowElement>,\n  'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'\n>;\n\nconst TableRow = ({\n  children,\n  className = '',\n  selected = false,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    className\n  );\n\n  return (\n    <tr \n      className={rowClasses}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n};\n\n// Table.Cell 组件\nexport type TableCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  colSpan?: number;\n  style?: React.CSSProperties;\n  \n  // 添加鼠标事件\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n};\n\nconst TableCell = ({\n  children,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n}: TableCellProps) => {\n  const baseClass = 'table-cell';\n  \n  const cellClasses = cn(baseClass, className);\n\n  return (\n    <td \n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </td>\n  );\n};\n\n// Table.HeaderCell 组件\nexport type TableHeaderCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  sortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | null;\n  \n  // 拖拽相关属性\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  \n  // 鼠标事件\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n};\n\nconst TableHeaderCell = ({\n  children,\n  className = '',\n  onClick,\n  sortable = false,\n  sortDirection = null,\n  \n  // 拖拽相关属性\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  \n  // 鼠标事件\n  onMouseEnter,\n  onMouseLeave,\n}: TableHeaderCellProps) => {\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    className\n  );\n\n  return (\n    <th \n      className={headerCellClasses}\n      onClick={onClick}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div className=\"flex items-center gap-2\">\n        {children}\n        {sortable && (\n          <div className=\"flex flex-col\">\n            {sortDirection === 'asc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M5 15l7-7 7 7\" />\n              </svg>\n            ) : sortDirection === 'desc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n              </svg>\n            ) : (\n              <div className=\"h-4 w-4 opacity-30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </th>\n  );\n};\n\n// 扩展Table组件，添加子组件\ninterface TableCompound extends React.FC<TableProps> {\n  Head: React.FC<TableHeadProps>;\n  Body: React.FC<TableBodyProps>;\n  Row: React.FC<TableRowProps>;\n  Cell: React.FC<TableCellProps>;\n  HeaderCell: React.FC<TableHeaderCellProps>;\n}\n\nconst TableWithCompounds = Table as TableCompound;\nTableWithCompounds.Head = TableHead;\nTableWithCompounds.Body = TableBody;\nTableWithCompounds.Row = TableRow;\nTableWithCompounds.Cell = TableCell;\nTableWithCompounds.HeaderCell = TableHeaderCell;\n\nexport default TableWithCompounds; "],"mappings":";;;;AAWA,IAAM,KAAS,EACb,aACA,eAAY,IACZ,YACA,iBACA,sBACgB;CAGhB,IAAM,IAAe,EAAG,SAAW,CAAS;CAE5C,OACE,kBAAC,SAAD;EACE,WAAW;EACF;EACK;EACA;EAEb;CACI,CAAA;AAEX,GAQM,KAAa,EACjB,aACA,eAAY,SACQ;CAGpB,IAAM,IAAc,EAAG,sBAAW,CAAS;CAE3C,OACE,kBAAC,SAAD;EAAO,WAAW;EACf;CACI,CAAA;AAEX,GAQM,KAAa,EACjB,aACA,eAAY,SACQ;CAGpB,IAAM,IAAc,EAAG,mBAAW,CAAS;CAE3C,OACE,kBAAC,SAAD;EAAO,WAAW;EACf;CACI,CAAA;AAEX,GAgBM,KAAY,EAChB,aACA,eAAY,IACZ,cAAW,IACX,YACA,kBACA,iBACA,iBACA,GAAG,QACgB;CAGnB,IAAM,IAAa,EACjB,aACA,KAAY,eACZ,qBACA,CACF;CAEA,OACE,kBAAC,MAAD;EACE,WAAW;EACF;EACM;EACD;EACA;EACd,GAAI;EAEH;CACC,CAAA;AAER,GAgBM,KAAa,EACjB,aACA,eAAY,IACZ,YACA,YACA,UACA,kBACA,iBACA,sBACoB;CAGpB,IAAM,IAAc,EAAG,cAAW,CAAS;CAE3C,OACE,kBAAC,MAAD;EACE,WAAW;EACF;EACA;EACF;EACQ;EACD;EACA;EAEb;CACC,CAAA;AAER,GAqBM,KAAmB,EACvB,aACA,eAAY,IACZ,YACA,cAAW,IACX,mBAAgB,MAGhB,cACA,gBACA,eACA,WAGA,iBACA,sBAC0B;CAG1B,IAAM,IAAoB,EACxB,0BACA,KAAY,kBACZ,CACF;CAEA,OACE,kBAAC,MAAD;EACE,WAAW;EACF;EACE;EACE;EACD;EACJ;EACM;EACA;EAEd,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,GACA,KACC,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAkB,QACjB,kBAAC,OAAD;KAAK,OAAM;KAA6B,WAAU;KAAU,MAAK;KAAO,SAAQ;KAAY,QAAO;KACjG,UAAA,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAY;MAAI,GAAE;KAAiB,CAAA;IACnF,CAAA,IACH,MAAkB,SACpB,kBAAC,OAAD;KAAK,OAAM;KAA6B,WAAU;KAAU,MAAK;KAAO,SAAQ;KAAY,QAAO;KACjG,UAAA,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAY;MAAI,GAAE;KAAkB,CAAA;IACpF,CAAA,IAEL,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA,kBAAC,OAAD;MAAK,OAAM;MAA6B,WAAU;MAAU,MAAK;MAAO,SAAQ;MAAY,QAAO;MACjG,UAAA,kBAAC,QAAD;OAAM,eAAc;OAAQ,gBAAe;OAAQ,aAAY;OAAI,GAAE;MAAoD,CAAA;KACtH,CAAA;IACF,CAAA;GAEJ,CAAA,CAEJ;;CACH,CAAA;AAER,GAWM,IAAqB;AAC3B,EAAmB,OAAO,GAC1B,EAAmB,OAAO,GAC1B,EAAmB,MAAM,GACzB,EAAmB,OAAO,GAC1B,EAAmB,aAAa"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TableProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TableHTMLAttributes<HTMLTableElement>;\n\nconst Table = ({\n  children,\n  className = '',\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, className);\n\n  return (\n    <table \n      {...rest}\n      className={tableClasses}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </table>\n  );\n};\n\n// Table.Head 组件\nexport type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableHead = ({\n  children,\n  className = '',\n  ...rest\n}: TableHeadProps) => {\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead {...rest} className={headClasses}>\n      {children}\n    </thead>\n  );\n};\n\n// Table.Body 组件\nexport type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableBody = ({\n  children,\n  className = '',\n  ...rest\n}: TableBodyProps) => {\n  const baseClass = 'table-row-group';\n  \n  const bodyClasses = cn(baseClass, className);\n\n  return (\n    <tbody {...rest} className={bodyClasses}>\n      {children}\n    </tbody>\n  );\n};\n\n// Table.Row 组件\nexport type TableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  selected?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & Omit<\n  React.HTMLAttributes<HTMLTableRowElement>,\n  'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'\n>;\n\nconst TableRow = ({\n  children,\n  className = '',\n  selected = false,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    className\n  );\n\n  return (\n    <tr \n      className={rowClasses}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n};\n\n// Table.Cell 组件\nexport type TableCellProps = {\n  children?: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  colSpan?: number;\n  style?: React.CSSProperties;\n  \n  // 添加鼠标事件\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst TableCell = ({\n  children,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableCellProps) => {\n  const baseClass = 'table-cell';\n  \n  const cellClasses = cn(baseClass, className);\n\n  return (\n    <td\n      {...rest}\n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {children}\n    </td>\n  );\n};\n\n// Table.HeaderCell 组件\nexport type TableHeaderCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  sortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | null;\n  \n  // 拖拽相关属性\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  \n  // 鼠标事件\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.ThHTMLAttributes<HTMLTableCellElement>;\n\nconst TableHeaderCell = ({\n  children,\n  className = '',\n  onClick,\n  sortable = false,\n  sortDirection = null,\n  \n  // 拖拽相关属性\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  \n  // 鼠标事件\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableHeaderCellProps) => {\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    className\n  );\n\n  return (\n    <th\n      {...rest}\n      className={headerCellClasses}\n      onClick={onClick}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {sortable ? <div className=\"flex items-center gap-2\">\n        {children}\n        {sortable && (\n          <div className=\"flex flex-col\">\n            {sortDirection === 'asc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M5 15l7-7 7 7\" />\n              </svg>\n            ) : sortDirection === 'desc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n              </svg>\n            ) : (\n              <div className=\"h-4 w-4 opacity-30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        )}\n      </div> : children}\n    </th>\n  );\n};\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\nconst TableCaption = (props: TableCaptionProps) => <caption {...props} />;\nconst TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\n// 扩展Table组件，添加子组件\ninterface TableCompound extends React.FC<TableProps> {\n  Caption: React.FC<TableCaptionProps>;\n  Footer: React.FC<TableFooterProps>;\n  Head: React.FC<TableHeadProps>;\n  Body: React.FC<TableBodyProps>;\n  Row: React.FC<TableRowProps>;\n  Cell: React.FC<TableCellProps>;\n  HeaderCell: React.FC<TableHeaderCellProps>;\n}\n\nconst TableWithCompounds = Table as TableCompound;\nTableWithCompounds.Caption = TableCaption;\nTableWithCompounds.Footer = TableFooter;\nTableWithCompounds.Head = TableHead;\nTableWithCompounds.Body = TableBody;\nTableWithCompounds.Row = TableRow;\nTableWithCompounds.Cell = TableCell;\nTableWithCompounds.HeaderCell = TableHeaderCell;\n\nexport default TableWithCompounds; "],"mappings":";;;;AAWA,IAAM,KAAS,EACb,aACA,eAAY,IACZ,YACA,iBACA,iBACA,GAAG,QACa;CAGhB,IAAM,IAAe,EAAG,SAAW,CAAS;CAE5C,OACE,kBAAC,SAAD;EACE,GAAI;EACJ,WAAW;EACF;EACK;EACA;EAEb;CACI,CAAA;AAEX,GAKM,KAAa,EACjB,aACA,eAAY,IACZ,GAAG,QACiB;CAGpB,IAAM,IAAc,EAAG,sBAAW,CAAS;CAE3C,OACE,kBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EACzB;CACI,CAAA;AAEX,GAKM,KAAa,EACjB,aACA,eAAY,IACZ,GAAG,QACiB;CAGpB,IAAM,IAAc,EAAG,mBAAW,CAAS;CAE3C,OACE,kBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EACzB;CACI,CAAA;AAEX,GAgBM,KAAY,EAChB,aACA,eAAY,IACZ,cAAW,IACX,YACA,kBACA,iBACA,iBACA,GAAG,QACgB;CAGnB,IAAM,IAAa,EACjB,aACA,KAAY,eACZ,qBACA,CACF;CAEA,OACE,kBAAC,MAAD;EACE,WAAW;EACF;EACM;EACD;EACA;EACd,GAAI;EAEH;CACC,CAAA;AAER,GAgBM,KAAa,EACjB,aACA,eAAY,IACZ,YACA,YACA,UACA,kBACA,iBACA,iBACA,GAAG,QACiB;CAGpB,IAAM,IAAc,EAAG,cAAW,CAAS;CAE3C,OACE,kBAAC,MAAD;EACE,GAAI;EACJ,WAAW;EACF;EACA;EACF;EACQ;EACD;EACA;EAEb;CACC,CAAA;AAER,GAqBM,KAAmB,EACvB,aACA,eAAY,IACZ,YACA,cAAW,IACX,mBAAgB,MAGhB,cACA,gBACA,eACA,WAGA,iBACA,iBACA,GAAG,QACuB;CAG1B,IAAM,IAAoB,EACxB,0BACA,KAAY,kBACZ,CACF;CAEA,OACE,kBAAC,MAAD;EACE,GAAI;EACJ,WAAW;EACF;EACE;EACE;EACD;EACJ;EACM;EACA;EAEb,UAAA,IAAW,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACT,GACA,KACC,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAkB,QACjB,kBAAC,OAAD;KAAK,OAAM;KAA6B,WAAU;KAAU,MAAK;KAAO,SAAQ;KAAY,QAAO;KACjG,UAAA,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAY;MAAI,GAAE;KAAiB,CAAA;IACnF,CAAA,IACH,MAAkB,SACpB,kBAAC,OAAD;KAAK,OAAM;KAA6B,WAAU;KAAU,MAAK;KAAO,SAAQ;KAAY,QAAO;KACjG,UAAA,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAY;MAAI,GAAE;KAAkB,CAAA;IACpF,CAAA,IAEL,kBAAC,OAAD;KAAK,WAAU;KACb,UAAA,kBAAC,OAAD;MAAK,OAAM;MAA6B,WAAU;MAAU,MAAK;MAAO,SAAQ;MAAY,QAAO;MACjG,UAAA,kBAAC,QAAD;OAAM,eAAc;OAAQ,gBAAe;OAAQ,aAAY;OAAI,GAAE;MAAoD,CAAA;KACtH,CAAA;IACF,CAAA;GAEJ,CAAA,CAEJ;EAAI,CAAA,IAAA;CACP,CAAA;AAER,GAIM,KAAgB,MAA6B,kBAAC,WAAD,EAAS,GAAI,EAAQ,CAAA,GAClE,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAI,EAAQ,CAAA,GAa9D,IAAqB;AAC3B,EAAmB,UAAU,GAC7B,EAAmB,SAAS,GAC5B,EAAmB,OAAO,GAC1B,EAAmB,OAAO,GAC1B,EAAmB,MAAM,GACzB,EAAmB,OAAO,GAC1B,EAAmB,aAAa"}

package/dist/components/Text/index.d.ts

@@ -4,7 +4,7 @@ export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl
 export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
 export type TextColor = 'default' | 'muted' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'inherit';
 export type TextAlign = 'left' | 'center' | 'right' | 'justify';
-export type TextProps = {
+export type TextProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'> & {
     children?: React.ReactNode;
     /** Rendered HTML element. */
     as?: TextElement;

package/dist/components/Text/index.js

@@ -32,17 +32,18 @@ var n = {
 	center: "text-center",
 	right: "text-right",
 	justify: "text-justify"
-}, o = ({ children: o, as: s = "span", size: c = "base", weight: l = "normal", color: u = "default", align: d, truncate: f = !1, clamp: p, italic: m = !1, underline: h = !1, uppercase: g = !1, mono: _ = !1, className: v = "", style: y, onClick: b }) => {
-	let x = s, S = e(n[c], r[l], i[u], d && a[d], f && "truncate", m && "italic", h && "underline", g && "uppercase tracking-wider", _ && "font-mono", !f && p && p > 0 && "overflow-hidden", v);
-	return /* @__PURE__ */ t(x, {
-		className: S,
+}, o = ({ children: o, as: s = "span", size: c = "base", weight: l = "normal", color: u = "default", align: d, truncate: f = !1, clamp: p, italic: m = !1, underline: h = !1, uppercase: g = !1, mono: _ = !1, className: v = "", style: y, onClick: b, ...x }) => {
+	let S = s, C = e(n[c], r[l], i[u], d && a[d], f && "truncate", m && "italic", h && "underline", g && "uppercase tracking-wider", _ && "font-mono", !f && p && p > 0 && "overflow-hidden", v), w = !f && p && p > 0 ? {
+		display: "-webkit-box",
+		WebkitLineClamp: p,
+		WebkitBoxOrient: "vertical",
+		overflow: "hidden"
+	} : {};
+	return /* @__PURE__ */ t(S, {
+		...x,
+		className: C,
 		style: {
-			...!f && p && p > 0 ? {
-				display: "-webkit-box",
-				WebkitLineClamp: p,
-				WebkitBoxOrient: "vertical",
-				overflow: "hidden"
-			} : {},
+			...w,
 			...y
 		},
 		onClick: b,

package/dist/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Text/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TextElement =\n  | 'span'\n  | 'p'\n  | 'div'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'strong'\n  | 'em'\n  | 'small'\n  | 'code';\n\nexport type TextSize =\n  | 'xs'\n  | 'sm'\n  | 'base'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl';\n\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';\n\nexport type TextColor =\n  | 'default'\n  | 'muted'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'inherit';\n\nexport type TextAlign = 'left' | 'center' | 'right' | 'justify';\n\nexport type TextProps = {\n  children?: React.ReactNode;\n  /** Rendered HTML element. */\n  as?: TextElement;\n  /** Font size preset. */\n  size?: TextSize;\n  /** Font weight. */\n  weight?: TextWeight;\n  /** Semantic color. */\n  color?: TextColor;\n  /** Text alignment. */\n  align?: TextAlign;\n  /** Single-line ellipsis. */\n  truncate?: boolean;\n  /** Multi-line clamp (number of lines). */\n  clamp?: number;\n  /** Italic style. */\n  italic?: boolean;\n  /** Underline decoration. */\n  underline?: boolean;\n  /** Uppercase + letter-spacing (overline style). */\n  uppercase?: boolean;\n  /** Monospace font. */\n  mono?: boolean;\n  /** Extra class names. */\n  className?: string;\n  /** Inline styles. */\n  style?: React.CSSProperties;\n  /** Click handler. */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n};\n\nconst SIZE_CLASS: Record<TextSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  base: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl',\n  '2xl': 'text-2xl',\n  '3xl': 'text-3xl',\n  '4xl': 'text-4xl',\n};\n\nconst WEIGHT_CLASS: Record<TextWeight, string> = {\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\nconst COLOR_CLASS: Record<TextColor, string> = {\n  default: 'text-base-content',\n  muted: 'text-base-content/60',\n  primary: 'text-primary',\n  secondary: 'text-secondary',\n  accent: 'text-accent',\n  info: 'text-info',\n  success: 'text-success',\n  warning: 'text-warning',\n  error: 'text-error',\n  inherit: '',\n};\n\nconst ALIGN_CLASS: Record<TextAlign, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n  justify: 'text-justify',\n};\n\n/**\n * Text —— A2UI 展示组件：文本排版原语。\n * 统一字号 / 字重 / 语义色 / 对齐与截断，替代散落各处的裸 `text-*` 组合。\n */\nconst Text: React.FC<TextProps> = ({\n  children,\n  as = 'span',\n  size = 'base',\n  weight = 'normal',\n  color = 'default',\n  align,\n  truncate = false,\n  clamp,\n  italic = false,\n  underline = false,\n  uppercase = false,\n  mono = false,\n  className = '',\n  style,\n  onClick,\n}) => {\n  const Tag = as as React.ElementType;\n\n  const classes = cn(\n    SIZE_CLASS[size],\n    WEIGHT_CLASS[weight],\n    COLOR_CLASS[color],\n    align && ALIGN_CLASS[align],\n    truncate && 'truncate',\n    italic && 'italic',\n    underline && 'underline',\n    uppercase && 'uppercase tracking-wider',\n    mono && 'font-mono',\n    !truncate && clamp && clamp > 0 && 'overflow-hidden',\n    className,\n  );\n\n  const clampStyle: React.CSSProperties =\n    !truncate && clamp && clamp > 0\n      ? {\n          display: '-webkit-box',\n          WebkitLineClamp: clamp,\n          WebkitBoxOrient: 'vertical',\n          overflow: 'hidden',\n        }\n      : {};\n\n  return (\n    <Tag className={classes} style={{ ...clampStyle, ...style }} onClick={onClick}>\n      {children}\n    </Tag>\n  );\n};\n\nexport default Text;\n"],"mappings":";;;;AA4EA,IAAM,IAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT,GAEM,IAA2C;CAC/C,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,MAAM;AACR,GAEM,IAAyC;CAC7C,SAAS;CACT,OAAO;CACP,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX,GAEM,IAAyC;CAC7C,MAAM;CACN,QAAQ;CACR,OAAO;CACP,SAAS;AACX,GAMM,KAA6B,EACjC,aACA,QAAK,QACL,UAAO,QACP,YAAS,UACT,WAAQ,WACR,UACA,cAAW,IACX,UACA,YAAS,IACT,eAAY,IACZ,eAAY,IACZ,UAAO,IACP,eAAY,IACZ,UACA,iBACI;CACJ,IAAM,IAAM,GAEN,IAAU,EACd,EAAW,IACX,EAAa,IACb,EAAY,IACZ,KAAS,EAAY,IACrB,KAAY,YACZ,KAAU,UACV,KAAa,aACb,KAAa,4BACb,KAAQ,aACR,CAAC,KAAY,KAAS,IAAQ,KAAK,mBACnC,CACF;CAYA,OACE,kBAAC,GAAD;EAAK,WAAW;EAAS,OAAO;GAAE,GAVlC,CAAC,KAAY,KAAS,IAAQ,IAC1B;IACE,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,UAAU;GACZ,IACA,CAAC;GAG4C,GAAG;EAAM;EAAY;EACnE;CACE,CAAA;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Text/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TextElement =\n  | 'span'\n  | 'p'\n  | 'div'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'strong'\n  | 'em'\n  | 'small'\n  | 'code';\n\nexport type TextSize =\n  | 'xs'\n  | 'sm'\n  | 'base'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | '4xl';\n\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';\n\nexport type TextColor =\n  | 'default'\n  | 'muted'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'inherit';\n\nexport type TextAlign = 'left' | 'center' | 'right' | 'justify';\n\nexport type TextProps = Omit<React.HTMLAttributes<HTMLElement>, 'color'> & {\n  children?: React.ReactNode;\n  /** Rendered HTML element. */\n  as?: TextElement;\n  /** Font size preset. */\n  size?: TextSize;\n  /** Font weight. */\n  weight?: TextWeight;\n  /** Semantic color. */\n  color?: TextColor;\n  /** Text alignment. */\n  align?: TextAlign;\n  /** Single-line ellipsis. */\n  truncate?: boolean;\n  /** Multi-line clamp (number of lines). */\n  clamp?: number;\n  /** Italic style. */\n  italic?: boolean;\n  /** Underline decoration. */\n  underline?: boolean;\n  /** Uppercase + letter-spacing (overline style). */\n  uppercase?: boolean;\n  /** Monospace font. */\n  mono?: boolean;\n  /** Extra class names. */\n  className?: string;\n  /** Inline styles. */\n  style?: React.CSSProperties;\n  /** Click handler. */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n};\n\nconst SIZE_CLASS: Record<TextSize, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  base: 'text-base',\n  lg: 'text-lg',\n  xl: 'text-xl',\n  '2xl': 'text-2xl',\n  '3xl': 'text-3xl',\n  '4xl': 'text-4xl',\n};\n\nconst WEIGHT_CLASS: Record<TextWeight, string> = {\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\nconst COLOR_CLASS: Record<TextColor, string> = {\n  default: 'text-base-content',\n  muted: 'text-base-content/60',\n  primary: 'text-primary',\n  secondary: 'text-secondary',\n  accent: 'text-accent',\n  info: 'text-info',\n  success: 'text-success',\n  warning: 'text-warning',\n  error: 'text-error',\n  inherit: '',\n};\n\nconst ALIGN_CLASS: Record<TextAlign, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n  justify: 'text-justify',\n};\n\n/**\n * Text —— A2UI 展示组件：文本排版原语。\n * 统一字号 / 字重 / 语义色 / 对齐与截断，替代散落各处的裸 `text-*` 组合。\n */\nconst Text: React.FC<TextProps> = ({\n  children,\n  as = 'span',\n  size = 'base',\n  weight = 'normal',\n  color = 'default',\n  align,\n  truncate = false,\n  clamp,\n  italic = false,\n  underline = false,\n  uppercase = false,\n  mono = false,\n  className = '',\n  style,\n  onClick,\n  ...attributes\n}) => {\n  const Tag = as as React.ElementType;\n\n  const classes = cn(\n    SIZE_CLASS[size],\n    WEIGHT_CLASS[weight],\n    COLOR_CLASS[color],\n    align && ALIGN_CLASS[align],\n    truncate && 'truncate',\n    italic && 'italic',\n    underline && 'underline',\n    uppercase && 'uppercase tracking-wider',\n    mono && 'font-mono',\n    !truncate && clamp && clamp > 0 && 'overflow-hidden',\n    className,\n  );\n\n  const clampStyle: React.CSSProperties =\n    !truncate && clamp && clamp > 0\n      ? {\n          display: '-webkit-box',\n          WebkitLineClamp: clamp,\n          WebkitBoxOrient: 'vertical',\n          overflow: 'hidden',\n        }\n      : {};\n\n  return (\n    <Tag {...attributes} className={classes} style={{ ...clampStyle, ...style }} onClick={onClick}>\n      {children}\n    </Tag>\n  );\n};\n\nexport default Text;\n"],"mappings":";;;;AA4EA,IAAM,IAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT,GAEM,IAA2C;CAC/C,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,MAAM;AACR,GAEM,IAAyC;CAC7C,SAAS;CACT,OAAO;CACP,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX,GAEM,IAAyC;CAC7C,MAAM;CACN,QAAQ;CACR,OAAO;CACP,SAAS;AACX,GAMM,KAA6B,EACjC,aACA,QAAK,QACL,UAAO,QACP,YAAS,UACT,WAAQ,WACR,UACA,cAAW,IACX,UACA,YAAS,IACT,eAAY,IACZ,eAAY,IACZ,UAAO,IACP,eAAY,IACZ,UACA,YACA,GAAG,QACC;CACJ,IAAM,IAAM,GAEN,IAAU,EACd,EAAW,IACX,EAAa,IACb,EAAY,IACZ,KAAS,EAAY,IACrB,KAAY,YACZ,KAAU,UACV,KAAa,aACb,KAAa,4BACb,KAAQ,aACR,CAAC,KAAY,KAAS,IAAQ,KAAK,mBACnC,CACF,GAEM,IACJ,CAAC,KAAY,KAAS,IAAQ,IAC1B;EACE,SAAS;EACT,iBAAiB;EACjB,iBAAiB;EACjB,UAAU;CACZ,IACA,CAAC;CAEP,OACE,kBAAC,GAAD;EAAK,GAAI;EAAY,WAAW;EAAS,OAAO;GAAE,GAAG;GAAY,GAAG;EAAM;EAAY;EACnF;CACE,CAAA;AAET"}

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    wrapperClassName?: string;
+};
+declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    wrapperClassName?: string;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/components/Textarea/index.js

@@ -0,0 +1,44 @@
+/* empty css         */
+import { forwardRef as e, useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Textarea/index.tsx
+var i = (e) => e != null && typeof e != "boolean" && e !== "", a = e(function({ label: e, description: a, error: o, wrapperClassName: s = "", className: c = "", id: l, "aria-describedby": u, "aria-invalid": d, ...f }, p) {
+	let m = t(), h = l ?? m, g = `${m}-description`, _ = `${m}-error`, v = i(a), y = i(o), b = [
+		u,
+		v ? g : void 0,
+		y ? _ : void 0
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ r("div", {
+		className: `w-full space-y-2 ${s}`.trim(),
+		children: [
+			i(e) && /* @__PURE__ */ n("label", {
+				htmlFor: h,
+				className: "block text-sm font-medium",
+				children: e
+			}),
+			/* @__PURE__ */ n("textarea", {
+				...f,
+				ref: p,
+				id: h,
+				"aria-describedby": b,
+				"aria-invalid": y ? !0 : d,
+				className: `textarea dishui-textarea w-full resize-y rounded-md border-strong bg-page p-3 text-sm text-primary placeholder:text-tertiary ${c}`.trim()
+			}),
+			v && /* @__PURE__ */ n("div", {
+				id: g,
+				className: "text-xs leading-5 text-secondary",
+				children: a
+			}),
+			y && /* @__PURE__ */ n("div", {
+				id: _,
+				role: "alert",
+				className: "text-xs leading-5 text-error",
+				children: o
+			})
+		]
+	});
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=index.js.map