dishui 0.0.84 → 0.0.91

package/dist/components/Table/index.js

@@ -1,117 +1,169 @@
 import { cn as e } from "../../utils/cn.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+/* empty css      */
+import t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Table/index.tsx
-var r = ({ children: n, className: r = "", onClick: i, onMouseEnter: a, onMouseLeave: o, ...s }) => {
-	let c = e("table", r);
-	return /* @__PURE__ */ t("table", {
-		...s,
-		className: c,
-		onClick: i,
-		onMouseEnter: a,
-		onMouseLeave: o,
-		children: n
+var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children: t, className: r = "", card: s = !1, cardOptions: c = o, onClick: l, onMouseEnter: u, onMouseLeave: d, ...f }) => {
+	let p = e("table", s && "blade-table-card", r);
+	return /* @__PURE__ */ n(i.Provider, {
+		value: s ? c : null,
+		children: /* @__PURE__ */ n(a.Provider, {
+			value: !1,
+			children: /* @__PURE__ */ n("table", {
+				role: s ? "table" : void 0,
+				...f,
+				className: p,
+				onClick: l,
+				onMouseEnter: u,
+				onMouseLeave: d,
+				children: t
+			})
+		})
 	});
-}, i = ({ children: n, className: r = "", ...i }) => {
-	let a = e("table-header-group", r);
-	return /* @__PURE__ */ t("thead", {
-		...i,
-		className: a,
-		children: n
-	});
-}, a = ({ children: n, className: r = "", ...i }) => {
-	let a = e("table-row-group", r);
-	return /* @__PURE__ */ t("tbody", {
-		...i,
-		className: a,
-		children: n
-	});
-}, o = ({ children: n, className: r = "", selected: i = !1, onClick: a, onDoubleClick: o, onMouseEnter: s, onMouseLeave: c, ...l }) => {
-	let u = e("table-row", i && "bg-base-200", "hover:bg-base-100", r);
-	return /* @__PURE__ */ t("tr", {
-		className: u,
-		onClick: a,
-		onDoubleClick: o,
-		onMouseEnter: s,
-		onMouseLeave: c,
-		...l,
-		children: n
-	});
-}, 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", {
-		...u,
-		className: d,
-		onClick: i,
-		colSpan: a,
-		style: o,
-		onDoubleClick: s,
-		onMouseEnter: c,
-		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, ...m }) => {
-	let h = e("table-cell font-medium", o && "cursor-pointer", i);
-	return /* @__PURE__ */ t("th", {
-		...m,
-		className: h,
-		onClick: a,
-		draggable: c,
-		onDragStart: l,
-		onDragOver: u,
-		onDrop: d,
-		onMouseEnter: f,
-		onMouseLeave: p,
-		children: o ? /* @__PURE__ */ n("div", {
-			className: "flex items-center gap-2",
-			children: [r, o && /* @__PURE__ */ t("div", {
-				className: "flex flex-col",
-				children: s === "asc" ? /* @__PURE__ */ t("svg", {
-					xmlns: "http://www.w3.org/2000/svg",
-					className: "h-4 w-4",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					stroke: "currentColor",
-					children: /* @__PURE__ */ t("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: "2",
-						d: "M5 15l7-7 7 7"
-					})
-				}) : s === "desc" ? /* @__PURE__ */ t("svg", {
-					xmlns: "http://www.w3.org/2000/svg",
-					className: "h-4 w-4",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					stroke: "currentColor",
-					children: /* @__PURE__ */ t("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: "2",
-						d: "M19 9l-7 7-7-7"
-					})
-				}) : /* @__PURE__ */ t("div", {
-					className: "h-4 w-4 opacity-30",
-					children: /* @__PURE__ */ t("svg", {
+}, c = {
+	Caption: (e) => /* @__PURE__ */ n("caption", { ...e }),
+	Footer: (e) => {
+		let r = t.useContext(i);
+		return /* @__PURE__ */ n("tfoot", {
+			role: r ? "rowgroup" : void 0,
+			...e
+		});
+	},
+	Head: ({ children: r, className: a = "", ...o }) => {
+		let s = t.useContext(i), c = e("table-header-group", a);
+		return /* @__PURE__ */ n("thead", {
+			role: s ? "rowgroup" : void 0,
+			...o,
+			className: c,
+			children: r
+		});
+	},
+	Body: ({ children: r, className: o = "", style: s, ...c }) => {
+		let l = t.useContext(i), u = e("table-row-group", l && "blade-table-card__grid", l?.gridClassName, o);
+		return /* @__PURE__ */ n(a.Provider, {
+			value: !0,
+			children: /* @__PURE__ */ n("tbody", {
+				role: l ? "rowgroup" : void 0,
+				...c,
+				className: u,
+				style: l ? {
+					...l.gridStyle,
+					...s
+				} : s,
+				children: r
+			})
+		});
+	},
+	Row: ({ children: r, className: o = "", selected: s = !1, style: c, onClick: l, onDoubleClick: u, onMouseEnter: d, onMouseLeave: f, ...p }) => {
+		let m = t.useContext(i), h = t.useContext(a) ? m : null, g = e("table-row", s && "bg-base-200", "hover:bg-base-100", h && "blade-table-card__row", h?.className, o);
+		return /* @__PURE__ */ n("tr", {
+			role: m ? "row" : void 0,
+			"data-card-selected": h && s ? "true" : void 0,
+			style: h ? {
+				...h.style,
+				...c
+			} : c,
+			className: g,
+			onClick: l,
+			onDoubleClick: u,
+			onMouseEnter: d,
+			onMouseLeave: f,
+			...p,
+			children: r
+		});
+	},
+	Cell: ({ children: o, label: s, className: c = "", onClick: l, colSpan: u, style: d, onDoubleClick: f, onMouseEnter: p, onMouseLeave: m, ...h }) => {
+		let g = t.useContext(i), _ = t.useContext(a) ? g : null, v = e("table-cell", _ && "blade-table-card__field", _?.fieldClassName, c);
+		return /* @__PURE__ */ r("td", {
+			role: g ? "cell" : void 0,
+			...h,
+			className: v,
+			onClick: l,
+			colSpan: u,
+			style: _ ? {
+				..._.fieldStyle,
+				...d
+			} : d,
+			onDoubleClick: f,
+			onMouseEnter: p,
+			onMouseLeave: m,
+			children: [_ && s != null ? /* @__PURE__ */ n("div", {
+				className: e("blade-table-card__label", _.labelClassName),
+				style: _.labelStyle,
+				children: s
+			}) : null, o]
+		});
+	},
+	HeaderCell: ({ children: o, className: s = "", style: c, onClick: l, sortable: u = !1, sortDirection: d = null, draggable: f, onDragStart: p, onDragOver: m, onDrop: h, onMouseEnter: g, onMouseLeave: _, ...v }) => {
+		let y = t.useContext(i), b = t.useContext(a), x = b ? y : null, S = e("table-cell font-medium", u && "cursor-pointer", x && "blade-table-card__field", x?.fieldClassName, s);
+		return /* @__PURE__ */ n("th", {
+			role: y ? v.scope === "row" || v.scope === "rowgroup" || b && !v.scope ? "rowheader" : "columnheader" : void 0,
+			...v,
+			style: x ? {
+				...x.fieldStyle,
+				...c
+			} : c,
+			className: S,
+			onClick: l,
+			draggable: f,
+			onDragStart: p,
+			onDragOver: m,
+			onDrop: h,
+			onMouseEnter: g,
+			onMouseLeave: _,
+			children: u ? /* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2",
+				children: [o, u && /* @__PURE__ */ n("div", {
+					className: "flex flex-col",
+					children: d === "asc" ? /* @__PURE__ */ n("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						className: "h-4 w-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ t("path", {
+						children: /* @__PURE__ */ n("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: "2",
-							d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+							d: "M5 15l7-7 7 7"
+						})
+					}) : d === "desc" ? /* @__PURE__ */ n("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						className: "h-4 w-4",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ n("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: "2",
+							d: "M19 9l-7 7-7-7"
+						})
+					}) : /* @__PURE__ */ n("div", {
+						className: "h-4 w-4 opacity-30",
+						children: /* @__PURE__ */ n("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							className: "h-4 w-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ n("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: "2",
+								d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
+							})
 						})
 					})
-				})
-			})]
-		}) : r
-	});
-}, 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;
+				})]
+			}) : o
+		});
+	}
+}, l = Object.assign(s, c, { Card: Object.assign((e) => /* @__PURE__ */ n(s, {
+	...e,
+	card: !0
+}), c) });
 //#endregion
-export { d as default };
+export { l 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} & 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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport './Table.css';\n\nexport type TableCardOptions = {\n  /** Applied to each Table.Body grid. */\n  gridClassName?: string;\n  gridStyle?: React.CSSProperties;\n  /** Applied to each body row card. */\n  className?: string;\n  style?: React.CSSProperties;\n  fieldClassName?: string;\n  fieldStyle?: React.CSSProperties;\n  labelClassName?: string;\n  labelStyle?: React.CSSProperties;\n};\n\nconst CardContext = React.createContext<TableCardOptions | null>(null);\nconst BodyContext = React.createContext(false);\nconst defaultCardOptions: TableCardOptions = {};\n\nexport type TableProps = {\n  children: React.ReactNode;\n  card?: boolean;\n  cardOptions?: TableCardOptions;\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  card = false,\n  cardOptions = defaultCardOptions,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, card && 'blade-table-card', className);\n\n  return (\n    <CardContext.Provider value={card ? cardOptions : null}>\n      <BodyContext.Provider value={false}>\n        <table\n          role={card ? 'table' : undefined}\n          {...rest}\n          className={tableClasses}\n          onClick={onClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </table>\n      </BodyContext.Provider>\n    </CardContext.Provider>\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 options = React.useContext(CardContext);\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead role={options ? 'rowgroup' : undefined} {...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  style,\n  ...rest\n}: TableBodyProps) => {\n  const options = React.useContext(CardContext);\n  const bodyClasses = cn('table-row-group', options && 'blade-table-card__grid', options?.gridClassName, className);\n\n  return (\n    <BodyContext.Provider value={true}>\n      <tbody\n        role={options ? 'rowgroup' : undefined}\n        {...rest}\n        className={bodyClasses}\n        style={options ? { ...options.gridStyle, ...style } : style}\n      >\n        {children}\n      </tbody>\n    </BodyContext.Provider>\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  style,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    options && 'blade-table-card__row',\n    options?.className,\n    className\n  );\n\n  return (\n    <tr\n      role={cardOptions ? 'row' : undefined}\n      data-card-selected={options && selected ? 'true' : undefined}\n      style={options ? { ...options.style, ...style } : style}\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  /** Visible field label in card body cells only. */\n  label?: 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  label,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const cellClasses = cn('table-cell', options && 'blade-table-card__field', options?.fieldClassName, className);\n\n  return (\n    <td\n      role={cardOptions ? 'cell' : undefined}\n      {...rest}\n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {/* Keep children in a fixed slot so mode/label changes preserve local state. */}\n      {options && label !== null && label !== undefined ? <div className={cn('blade-table-card__label', options.labelClassName)} style={options.labelStyle}>{label}</div> : null}\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  style,\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 cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    options && 'blade-table-card__field',\n    options?.fieldClassName,\n    className\n  );\n\n  return (\n    <th\n      role={cardOptions ? (rest.scope === 'row' || rest.scope === 'rowgroup' || (inBody && !rest.scope) ? 'rowheader' : 'columnheader') : undefined}\n      {...rest}\n      style={options ? { ...options.fieldStyle, ...style } : style}\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) => {\n  const options = React.useContext(CardContext);\n  return <tfoot role={options ? 'rowgroup' : undefined} {...props} />;\n};\n\n// 扩展Table组件，添加子组件\nexport type TableCardProps = Omit<TableProps, 'card'>;\n\ninterface TableSubcomponents {\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 subcomponents: TableSubcomponents = {\n  Caption: TableCaption,\n  Footer: TableFooter,\n  Head: TableHead,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  HeaderCell: TableHeaderCell,\n};\n\nconst TableCard = (props: TableCardProps) => <Table {...props} card />;\nconst TableWithCompounds = Object.assign(Table, subcomponents, {\n  Card: Object.assign(TableCard, subcomponents),\n});\n\nexport default TableWithCompounds; "],"mappings":"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"}

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

@@ -6,6 +6,10 @@ export type TabItem<T extends string = string> = {
     icon?: React.ReactNode;
     /** 禁用该标签 */
     disabled?: boolean;
+    /** Stable tab ID; use as the external panel's aria-labelledby. Generated when omitted. */
+    id?: string;
+    /** ID of a caller-rendered role="tabpanel". Omit when used only as a filter. */
+    panelId?: string;
 };
 export type TabsProps<T extends string = string> = {
     items: readonly TabItem<T>[];
@@ -25,11 +29,18 @@ export type TabsProps<T extends string = string> = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** 占满可用宽度，各标签平分 */
     block?: boolean;
+    /** Tablist ID and prefix for generated tab IDs. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    orientation?: 'horizontal' | 'vertical';
+    /** Manual (default): arrows move focus; Enter/Space activate. Automatic: arrows also activate. */
+    activationMode?: 'manual' | 'automatic';
     className?: string;
 };
 /**
  * 标签页切换条。基于 daisyUI 5 的 `tabs` 系列修饰类，
  * 支持 box / border / lift / pill 四种外观、五档尺寸与等宽（block）模式。
  */
-declare function Tabs<T extends string = string>({ items, value, onChange, variant, size, block, className, }: TabsProps<T>): React.JSX.Element;
+declare function Tabs<T extends string = string>({ items, value, onChange, variant, size, block, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, orientation, activationMode, className, }: TabsProps<T>): React.JSX.Element;
 export default Tabs;

package/dist/components/Tabs/index.js

@@ -1,34 +1,59 @@
 import { cn as e } from "../../utils/cn.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/Tabs/index.tsx
-var r = {
+var o = {
 	xs: "tabs-xs",
 	sm: "tabs-sm",
 	md: "tabs-md",
 	lg: "tabs-lg",
 	xl: "tabs-xl"
 };
-function i({ items: i, value: a, onChange: o, variant: s = "box", size: c = "sm", block: l = !1, className: u = "" }) {
-	let d = s === "border" ? "tabs-border" : s === "lift" ? "tabs-lift" : s === "pill" ? "tabs-box dishui-tabs-pill" : "tabs-box";
-	return /* @__PURE__ */ t("div", {
+function s({ items: s, value: c, onChange: l, variant: u = "box", size: d = "sm", block: f = !1, id: p, "aria-label": m, "aria-labelledby": h, orientation: g = "horizontal", activationMode: _ = "manual", className: v = "" }) {
+	let y = t(), b = p ?? `tabs-${y}`, x = n(/* @__PURE__ */ new Map()), [S, C] = r(null), w = s.filter((e) => !e.disabled), T = w.find((e) => e.key === S)?.key ?? w.find((e) => e.key === c)?.key ?? w[0]?.key, E = (e, t) => {
+		if (e.target !== e.currentTarget || e.defaultPrevented || e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
+		let n = g === "vertical" ? "ArrowUp" : "ArrowLeft", r = g === "vertical" ? "ArrowDown" : "ArrowRight", i = w.findIndex((e) => e.key === t), a;
+		if (e.key === "Home") a = w[0];
+		else if (e.key === "End") a = w[w.length - 1];
+		else if (e.key === n || e.key === r) {
+			let t = e.key === r ? 1 : -1;
+			a = w[(i + t + w.length) % w.length];
+		} else return;
+		e.preventDefault(), e.stopPropagation(), a && (x.current.get(a.key)?.focus(), _ === "automatic" && a.key !== c && l(a.key));
+	}, D = u === "border" ? "tabs-border" : u === "lift" ? "tabs-lift" : u === "pill" ? "tabs-box dishui-tabs-pill" : "tabs-box";
+	return /* @__PURE__ */ i("div", {
+		id: b,
 		role: "tablist",
-		className: e("tabs h-auto min-h-0", r[c], d, l && "w-full", u),
-		children: i.map((r) => /* @__PURE__ */ n("button", {
+		"aria-label": m,
+		"aria-labelledby": h,
+		"aria-orientation": g,
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || C(null);
+		},
+		className: e("tabs h-auto min-h-0", o[d], D, f && "w-full", g === "vertical" && "flex flex-col", v),
+		children: s.map((t) => /* @__PURE__ */ a("button", {
+			ref: (e) => {
+				e ? x.current.set(t.key, e) : x.current.delete(t.key);
+			},
+			id: t.id ?? `${b}-tab-${encodeURIComponent(t.key)}`,
 			role: "tab",
 			type: "button",
-			"aria-selected": a === r.key,
-			disabled: r.disabled,
-			onClick: () => o(r.key),
-			className: e("tab min-h-0 gap-1.5", l && "flex-1", a === r.key && "tab-active", r.disabled && "tab-disabled"),
-			children: [r.icon && /* @__PURE__ */ t("span", {
+			"aria-selected": c === t.key,
+			"aria-controls": t.panelId,
+			tabIndex: !t.disabled && t.key === T ? 0 : -1,
+			disabled: t.disabled,
+			onFocus: () => C(t.key),
+			onKeyDown: (e) => E(e, t.key),
+			onClick: () => l(t.key),
+			className: e("tab min-h-0 gap-1.5", f && "flex-1", c === t.key && "tab-active", t.disabled && "tab-disabled"),
+			children: [t.icon && /* @__PURE__ */ i("span", {
 				className: "[&>svg]:h-[1.1em] [&>svg]:w-[1.1em]",
-				children: r.icon
-			}), r.label]
-		}, r.key))
+				children: t.icon
+			}), t.label]
+		}, t.key))
 	});
 }
 //#endregion
-export { i as default };
+export { s as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TabItem<T extends string = string> = {\n    key: T;\n    label: React.ReactNode;\n    /** 可选：标签前的图标 */\n    icon?: React.ReactNode;\n    /** 禁用该标签 */\n    disabled?: boolean;\n};\n\nexport type TabsProps<T extends string = string> = {\n    items: readonly TabItem<T>[];\n    /** 当前激活的 tab key */\n    value: T;\n    /** 切换回调 */\n    onChange: (key: T) => void;\n    /**\n     * 外观（基于 daisyUI 5 的 tabs 修饰类）：\n     * - `box`   实心分段（tabs-box）\n     * - `border` 底部下划线（tabs-border）\n     * - `lift`  抬升的文件夹页签（tabs-lift）\n     * - `pill`  胶囊/圆角实心（DishUI 扩展）\n     */\n    variant?: 'box' | 'border' | 'lift' | 'pill';\n    /** 尺寸：xs / sm / md / lg / xl */\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    /** 占满可用宽度，各标签平分 */\n    block?: boolean;\n    className?: string;\n};\n\nconst SIZE_CLASS: Record<NonNullable<TabsProps['size']>, string> = {\n    xs: 'tabs-xs',\n    sm: 'tabs-sm',\n    md: 'tabs-md',\n    lg: 'tabs-lg',\n    xl: 'tabs-xl',\n};\n\n/**\n * 标签页切换条。基于 daisyUI 5 的 `tabs` 系列修饰类，\n * 支持 box / border / lift / pill 四种外观、五档尺寸与等宽（block）模式。\n */\nfunction Tabs<T extends string = string>({\n    items,\n    value,\n    onChange,\n    variant = 'box',\n    size = 'sm',\n    block = false,\n    className = '',\n}: TabsProps<T>) {\n    // pill 是 DishUI 扩展：在 tabs-box 基础上追加胶囊圆角类（见 components.css）\n    const variantClass =\n        variant === 'border' ? 'tabs-border'\n        : variant === 'lift' ? 'tabs-lift'\n        : variant === 'pill' ? 'tabs-box dishui-tabs-pill'\n        : 'tabs-box';\n\n    return (\n        <div\n            role=\"tablist\"\n            className={cn(\n                'tabs h-auto min-h-0',\n                SIZE_CLASS[size],\n                variantClass,\n                block && 'w-full',\n                className,\n            )}\n        >\n            {items.map((item) => (\n                <button\n                    key={item.key}\n                    role=\"tab\"\n                    type=\"button\"\n                    aria-selected={value === item.key}\n                    disabled={item.disabled}\n                    onClick={() => onChange(item.key)}\n                    className={cn(\n                        'tab min-h-0 gap-1.5',\n                        block && 'flex-1',\n                        value === item.key && 'tab-active',\n                        item.disabled && 'tab-disabled',\n                    )}\n                >\n                    {item.icon && <span className=\"[&>svg]:h-[1.1em] [&>svg]:w-[1.1em]\">{item.icon}</span>}\n                    {item.label}\n                </button>\n            ))}\n        </div>\n    );\n}\n\nexport default Tabs;\n"],"mappings":";;;;AAiCA,IAAM,IAA6D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACR;AAMA,SAAS,EAAgC,EACrC,UACA,UACA,aACA,aAAU,OACV,UAAO,MACP,WAAQ,IACR,eAAY,MACC;CAEb,IAAM,IACF,MAAY,WAAW,gBACrB,MAAY,SAAS,cACrB,MAAY,SAAS,8BACrB;CAEN,OACI,kBAAC,OAAD;EACI,MAAK;EACL,WAAW,EACP,uBACA,EAAW,IACX,GACA,KAAS,UACT,CACJ;EAEC,UAAA,EAAM,KAAK,MACR,kBAAC,UAAD;GAEI,MAAK;GACL,MAAK;GACL,iBAAe,MAAU,EAAK;GAC9B,UAAU,EAAK;GACf,eAAe,EAAS,EAAK,GAAG;GAChC,WAAW,EACP,uBACA,KAAS,UACT,MAAU,EAAK,OAAO,cACtB,EAAK,YAAY,cACrB;GAZJ,UAAA,CAcK,EAAK,QAAQ,kBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA,EAAK;GAAW,CAAA,GACpF,EAAK,KACF;EAfC,GAAA,EAAK,GAeN,CACX;CACA,CAAA;AAEb"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type TabItem<T extends string = string> = {\n    key: T;\n    label: React.ReactNode;\n    /** 可选：标签前的图标 */\n    icon?: React.ReactNode;\n    /** 禁用该标签 */\n    disabled?: boolean;\n    /** Stable tab ID; use as the external panel's aria-labelledby. Generated when omitted. */\n    id?: string;\n    /** ID of a caller-rendered role=\"tabpanel\". Omit when used only as a filter. */\n    panelId?: string;\n};\n\nexport type TabsProps<T extends string = string> = {\n    items: readonly TabItem<T>[];\n    /** 当前激活的 tab key */\n    value: T;\n    /** 切换回调 */\n    onChange: (key: T) => void;\n    /**\n     * 外观（基于 daisyUI 5 的 tabs 修饰类）：\n     * - `box`   实心分段（tabs-box）\n     * - `border` 底部下划线（tabs-border）\n     * - `lift`  抬升的文件夹页签（tabs-lift）\n     * - `pill`  胶囊/圆角实心（DishUI 扩展）\n     */\n    variant?: 'box' | 'border' | 'lift' | 'pill';\n    /** 尺寸：xs / sm / md / lg / xl */\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    /** 占满可用宽度，各标签平分 */\n    block?: boolean;\n    /** Tablist ID and prefix for generated tab IDs. */\n    id?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    orientation?: 'horizontal' | 'vertical';\n    /** Manual (default): arrows move focus; Enter/Space activate. Automatic: arrows also activate. */\n    activationMode?: 'manual' | 'automatic';\n    className?: string;\n};\n\nconst SIZE_CLASS: Record<NonNullable<TabsProps['size']>, string> = {\n    xs: 'tabs-xs',\n    sm: 'tabs-sm',\n    md: 'tabs-md',\n    lg: 'tabs-lg',\n    xl: 'tabs-xl',\n};\n\n/**\n * 标签页切换条。基于 daisyUI 5 的 `tabs` 系列修饰类，\n * 支持 box / border / lift / pill 四种外观、五档尺寸与等宽（block）模式。\n */\nfunction Tabs<T extends string = string>({\n    items,\n    value,\n    onChange,\n    variant = 'box',\n    size = 'sm',\n    block = false,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    orientation = 'horizontal',\n    activationMode = 'manual',\n    className = '',\n}: TabsProps<T>) {\n    const generatedId = useId();\n    const listId = id ?? `tabs-${generatedId}`;\n    const buttons = useRef(new Map<T, HTMLButtonElement>());\n    const [focusedKey, setFocusedKey] = useState<T | null>(null);\n    const enabledItems = items.filter(item => !item.disabled);\n    const tabStop = enabledItems.find(item => item.key === focusedKey)?.key\n        ?? enabledItems.find(item => item.key === value)?.key\n        ?? enabledItems[0]?.key;\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, key: T) => {\n        if (event.target !== event.currentTarget || event.defaultPrevented || event.nativeEvent.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;\n        const previous = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n        const next = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n        const index = enabledItems.findIndex(item => item.key === key);\n        let target: TabItem<T> | undefined;\n        if (event.key === 'Home') target = enabledItems[0];\n        else if (event.key === 'End') target = enabledItems[enabledItems.length - 1];\n        else if (event.key === previous || event.key === next) {\n            const step = event.key === next ? 1 : -1;\n            target = enabledItems[(index + step + enabledItems.length) % enabledItems.length];\n        } else return; // Native button Enter/Space activation goes through onClick once.\n        event.preventDefault();\n        event.stopPropagation();\n        if (!target) return;\n        buttons.current.get(target.key)?.focus();\n        if (activationMode === 'automatic' && target.key !== value) onChange(target.key);\n    };\n    // pill 是 DishUI 扩展：在 tabs-box 基础上追加胶囊圆角类（见 components.css）\n    const variantClass =\n        variant === 'border' ? 'tabs-border'\n        : variant === 'lift' ? 'tabs-lift'\n        : variant === 'pill' ? 'tabs-box dishui-tabs-pill'\n        : 'tabs-box';\n\n    return (\n        <div\n            id={listId}\n            role=\"tablist\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-orientation={orientation}\n            onBlur={event => {\n                if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocusedKey(null);\n            }}\n            className={cn(\n                'tabs h-auto min-h-0',\n                SIZE_CLASS[size],\n                variantClass,\n                block && 'w-full',\n                orientation === 'vertical' && 'flex flex-col',\n                className,\n            )}\n        >\n            {items.map((item) => (\n                <button\n                    key={item.key}\n                    ref={element => {\n                        if (element) buttons.current.set(item.key, element);\n                        else buttons.current.delete(item.key);\n                    }}\n                    id={item.id ?? `${listId}-tab-${encodeURIComponent(item.key)}`}\n                    role=\"tab\"\n                    type=\"button\"\n                    aria-selected={value === item.key}\n                    aria-controls={item.panelId}\n                    tabIndex={!item.disabled && item.key === tabStop ? 0 : -1}\n                    disabled={item.disabled}\n                    onFocus={() => setFocusedKey(item.key)}\n                    onKeyDown={event => handleKeyDown(event, item.key)}\n                    onClick={() => onChange(item.key)}\n                    className={cn(\n                        'tab min-h-0 gap-1.5',\n                        block && 'flex-1',\n                        value === item.key && 'tab-active',\n                        item.disabled && 'tab-disabled',\n                    )}\n                >\n                    {item.icon && <span className=\"[&>svg]:h-[1.1em] [&>svg]:w-[1.1em]\">{item.icon}</span>}\n                    {item.label}\n                </button>\n            ))}\n        </div>\n    );\n}\n\nexport default Tabs;\n"],"mappings":";;;;AA4CA,IAAM,IAA6D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACR;AAMA,SAAS,EAAgC,EACrC,UACA,UACA,aACA,aAAU,OACV,UAAO,MACP,WAAQ,IACR,OACA,cAAc,GACd,mBAAmB,GACnB,iBAAc,cACd,oBAAiB,UACjB,eAAY,MACC;CACb,IAAM,IAAc,EAAM,GACpB,IAAS,KAAM,QAAQ,KACvB,IAAU,kBAAO,IAAI,IAA0B,CAAC,GAChD,CAAC,GAAY,KAAiB,EAAmB,IAAI,GACrD,IAAe,EAAM,QAAO,MAAQ,CAAC,EAAK,QAAQ,GAClD,IAAU,EAAa,MAAK,MAAQ,EAAK,QAAQ,CAAU,CAAC,EAAE,OAC7D,EAAa,MAAK,MAAQ,EAAK,QAAQ,CAAK,CAAC,EAAE,OAC/C,EAAa,EAAE,EAAE,KAElB,KAAiB,GAA+C,MAAW;EAC7E,IAAI,EAAM,WAAW,EAAM,iBAAiB,EAAM,oBAAoB,EAAM,YAAY,eAAe,EAAM,UAAU,EAAM,WAAW,EAAM,SAAS;EACvJ,IAAM,IAAW,MAAgB,aAAa,YAAY,aACpD,IAAO,MAAgB,aAAa,cAAc,cAClD,IAAQ,EAAa,WAAU,MAAQ,EAAK,QAAQ,CAAG,GACzD;EACJ,IAAI,EAAM,QAAQ,QAAQ,IAAS,EAAa;OAC3C,IAAI,EAAM,QAAQ,OAAO,IAAS,EAAa,EAAa,SAAS;OACrE,IAAI,EAAM,QAAQ,KAAY,EAAM,QAAQ,GAAM;GACnD,IAAM,IAAO,EAAM,QAAQ,IAAO,IAAI;GACtC,IAAS,GAAc,IAAQ,IAAO,EAAa,UAAU,EAAa;EAC9E,OAAO;EACP,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACjB,MACL,EAAQ,QAAQ,IAAI,EAAO,GAAG,CAAC,EAAE,MAAM,GACnC,MAAmB,eAAe,EAAO,QAAQ,KAAO,EAAS,EAAO,GAAG;CACnF,GAEM,IACF,MAAY,WAAW,gBACrB,MAAY,SAAS,cACrB,MAAY,SAAS,8BACrB;CAEN,OACI,kBAAC,OAAD;EACI,IAAI;EACJ,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,oBAAkB;EAClB,SAAQ,MAAS;GACb,AAAK,EAAM,cAAc,SAAS,EAAM,aAA4B,KAAG,EAAc,IAAI;EAC7F;EACA,WAAW,EACP,uBACA,EAAW,IACX,GACA,KAAS,UACT,MAAgB,cAAc,iBAC9B,CACJ;EAEC,UAAA,EAAM,KAAK,MACR,kBAAC,UAAD;GAEI,MAAK,MAAW;IACZ,AAAI,IAAS,EAAQ,QAAQ,IAAI,EAAK,KAAK,CAAO,IAC7C,EAAQ,QAAQ,OAAO,EAAK,GAAG;GACxC;GACA,IAAI,EAAK,MAAM,GAAG,EAAO,OAAO,mBAAmB,EAAK,GAAG;GAC3D,MAAK;GACL,MAAK;GACL,iBAAe,MAAU,EAAK;GAC9B,iBAAe,EAAK;GACpB,UAAU,CAAC,EAAK,YAAY,EAAK,QAAQ,IAAU,IAAI;GACvD,UAAU,EAAK;GACf,eAAe,EAAc,EAAK,GAAG;GACrC,YAAW,MAAS,EAAc,GAAO,EAAK,GAAG;GACjD,eAAe,EAAS,EAAK,GAAG;GAChC,WAAW,EACP,uBACA,KAAS,UACT,MAAU,EAAK,OAAO,cACtB,EAAK,YAAY,cACrB;GArBJ,UAAA,CAuBK,EAAK,QAAQ,kBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA,EAAK;GAAW,CAAA,GACpF,EAAK,KACF;EAxBC,GAAA,EAAK,GAwBN,CACX;CACA,CAAA;AAEb"}

package/dist/components/pro/ArticleContextMenu/index.js

@@ -1,6 +1,6 @@
-import { useClickOutside as e } from "../../../hooks/useClickOutside.js";
-import { useContainerElement as t } from "../../../hooks/useContainerElement.js";
-import { getMarkdownContent as n, getSelectionInfo as r } from "../../../utils/selection.js";
+import { useContainerElement as e } from "../../../hooks/useContainerElement.js";
+import { getMarkdownContent as t, getSelectionInfo as n } from "../../../utils/selection.js";
+import { useClickOutside as r } from "../../../hooks/useClickOutside.js";
 import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/pro/ArticleContextMenu/index.tsx
@@ -8,8 +8,8 @@ var u = ({ targetId: u, targetRef: d, menuItems: f, className: p = "", enabled:
 	let [h, g] = s(!1), [_, v] = s({
 		x: 0,
 		y: 0
-	}), [y, b] = s(!1), x = o(null), S = t(u, d);
-	e(x, i(() => g(!1), []), h);
+	}), [y, b] = s(!1), x = o(null), S = e(u, d);
+	r(x, i(() => g(!1), []), h);
 	let C = i((e) => {
 		if (!m || !S) return;
 		let t = e.target, n = !1;
@@ -31,8 +31,8 @@ var u = ({ targetId: u, targetRef: d, menuItems: f, className: p = "", enabled:
 		}), g(!0);
 	}, [m, S]), w = i((e) => {
 		if (e.disabled) return;
-		let t = n(S), i = r(S);
-		e.action(t, i), g(!1);
+		let r = t(S), i = n(S);
+		e.action(r, i), g(!1);
 	}, [S]);
 	return a(() => {
 		if (!h) return;