@lobehub/ui 5.58.0 → 5.59.0

package/es/dashboard/Surface/Surface.mjs

@@ -1,16 +1,76 @@
 "use client";
+import Spin from "../../base-ui/Spin/Spin.mjs";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
 import { styles } from "./style.mjs";
-import { jsx } from "react/jsx-runtime";
+import { SurfaceDepthContext, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
+import { ArrowUpRight } from "lucide-react";
 //#region src/dashboard/Surface/Surface.tsx
+const defined = (node) => node !== null && node !== void 0 && node !== false;
 /**
-* Elevated card on a workspace canvas. Use it for panels that should read
-* above the page background without inventing a new surface color.
+* Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,
+* `description` or `extra` it gets a header and a padded body that lets a
+* trailing table meet the card edges.
 */
-function Surface({ className, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles.card, className),
-		...rest
+function Surface({ bleed = false, chart, children, className, description, extra, href, loading, padded, renderLink, title, ...rest }) {
+	const depth = useSurfaceDepth();
+	const link = useSurfaceLink(renderLink);
+	const refreshing = Boolean(loading) && defined(children);
+	const placeholder = Boolean(loading) && !defined(children);
+	const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;
+	const pad = bleed ? false : padded ?? (hasHeader || placeholder);
+	const clip = hasHeader || bleed || pad || defined(chart);
+	const heading = /* @__PURE__ */ jsxs("div", {
+		className: styles.heading,
+		children: [defined(title) ? /* @__PURE__ */ jsx("div", {
+			className: styles.title,
+			children: title
+		}) : null, defined(description) ? /* @__PURE__ */ jsx("div", {
+			className: styles.desc,
+			children: description
+		}) : null]
+	});
+	const body = placeholder ? /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className: styles.loading,
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			height: 220,
+			radius: 8
+		})
+	}) : children;
+	return /* @__PURE__ */ jsx(SurfaceDepthContext, {
+		value: depth + 1,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.card, styles.content, clip && styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
+			...rest,
+			children: [
+				hasHeader ? /* @__PURE__ */ jsxs("div", {
+					className: styles.header,
+					children: [href ? link({
+						children: /* @__PURE__ */ jsxs(Fragment, { children: [heading, /* @__PURE__ */ jsx(ArrowUpRight, {
+							"aria-hidden": true,
+							"data-surface-arrow": true,
+							className: styles.arrow,
+							size: 16
+						})] }),
+						className: styles.headingLink,
+						href
+					}) : heading, refreshing || defined(extra) ? /* @__PURE__ */ jsxs("div", {
+						className: styles.extra,
+						children: [refreshing ? /* @__PURE__ */ jsx(Spin, { size: "small" }) : null, extra]
+					}) : null]
+				}) : null,
+				pad ? /* @__PURE__ */ jsx("div", {
+					className: cx(styles.body, styles.tableBleed),
+					children: body
+				}) : body,
+				defined(chart) ? /* @__PURE__ */ jsx("div", {
+					className: styles.chart,
+					children: chart
+				}) : null
+			]
+		})
 	});
 }
 Surface.displayName = "Surface";

package/es/dashboard/Surface/Surface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.mjs","names":[],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { SurfaceProps } from './type';\n\n/**\n * Elevated card on a workspace canvas. Use it for panels that should read\n * above the page background without inventing a new surface color.\n */\nfunction Surface({ className, ...rest }: SurfaceProps) {\n  return <div className={cx(styles.card, className)} {...rest} />;\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAWA,SAAS,QAAQ,EAAE,WAAW,GAAG,QAAsB;CACrD,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,GAAI;CAAO,CAAA;AAChE;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Surface.mjs","names":[],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ArrowUpRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { SurfaceDepthContext, useSurfaceDepth, useSurfaceLink } from './link';\nimport { styles } from './style';\nimport type { SurfaceProps } from './type';\n\nconst defined = (node: ReactNode) => node !== null && node !== undefined && node !== false;\n\n/**\n * Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,\n * `description` or `extra` it gets a header and a padded body that lets a\n * trailing table meet the card edges.\n */\nfunction Surface({\n  bleed = false,\n  chart,\n  children,\n  className,\n  description,\n  extra,\n  href,\n  loading,\n  padded,\n  renderLink,\n  title,\n  ...rest\n}: SurfaceProps) {\n  const depth = useSurfaceDepth();\n  const link = useSurfaceLink(renderLink);\n  const refreshing = Boolean(loading) && defined(children);\n  const placeholder = Boolean(loading) && !defined(children);\n  const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;\n  const pad = bleed ? false : (padded ?? (hasHeader || placeholder));\n  const clip = hasHeader || bleed || pad || defined(chart);\n\n  const heading = (\n    <div className={styles.heading}>\n      {defined(title) ? <div className={styles.title}>{title}</div> : null}\n      {defined(description) ? <div className={styles.desc}>{description}</div> : null}\n    </div>\n  );\n\n  const body = placeholder ? (\n    <div aria-busy=\"true\" className={styles.loading}>\n      <Skeleton height={220} radius={8} />\n    </div>\n  ) : (\n    children\n  );\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        className={cx(\n          styles.card,\n          styles.content,\n          clip && styles.clip,\n          href && styles.cardLinked,\n          bleed && styles.bleed,\n          className,\n        )}\n        {...rest}\n      >\n        {hasHeader ? (\n          <div className={styles.header}>\n            {href\n              ? link({\n                  children: (\n                    <>\n                      {heading}\n                      <ArrowUpRight\n                        aria-hidden\n                        data-surface-arrow\n                        className={styles.arrow}\n                        size={16}\n                      />\n                    </>\n                  ),\n                  className: styles.headingLink,\n                  href,\n                })\n              : heading}\n            {refreshing || defined(extra) ? (\n              <div className={styles.extra}>\n                {refreshing ? <Spin size=\"small\" /> : null}\n                {extra}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {pad ? <div className={cx(styles.body, styles.tableBleed)}>{body}</div> : body}\n        {defined(chart) ? <div className={styles.chart}>{chart}</div> : null}\n      </div>\n    </SurfaceDepthContext>\n  );\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAaA,MAAM,WAAW,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;;;;;;AAOrF,SAAS,QAAQ,EACf,QAAQ,OACR,OACA,UACA,WACA,aACA,OACA,MACA,SACA,QACA,YACA,OACA,GAAG,QACY;CACf,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,aAAa,QAAQ,OAAO,KAAK,QAAQ,QAAQ;CACvD,MAAM,cAAc,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;CACzD,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK;CAC9E,MAAM,MAAM,QAAQ,QAAS,WAAW,aAAa;CACrD,MAAM,OAAO,aAAa,SAAS,OAAO,QAAQ,KAAK;CAEvD,MAAM,UACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,QAAQ,KAAK,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAQ,UAAA;EAAW,CAAA,IAAI,MAC/D,QAAQ,WAAW,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAiB,CAAA,IAAI,IACxE;;CAGP,MAAM,OAAO,cACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,OAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL;CAGF,OACE,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAClC,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,OAAO,MACP,OAAO,SACP,QAAQ,OAAO,MACf,QAAQ,OAAO,YACf,SAAS,OAAO,OAChB,SACF;GACA,GAAI;GATN,UAAA;IAWG,YACC,qBAAC,OAAD;KAAK,WAAW,OAAO;KAAvB,UAAA,CACG,OACG,KAAK;MACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACD,oBAAC,cAAD;OACE,eAAA;OACA,sBAAA;OACA,WAAW,OAAO;OAClB,MAAM;MACP,CAAA,CACD,EAAA,CAAA;MAEJ,WAAW,OAAO;MAClB;KACF,CAAC,IACD,SACH,cAAc,QAAQ,KAAK,IAC1B,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA,CACG,aAAa,oBAAC,MAAD,EAAM,MAAK,QAAS,CAAA,IAAI,MACrC,KACE;KACH,CAAA,IAAA,IACD;IACH,CAAA,IAAA;IACH,MAAM,oBAAC,OAAD;KAAK,WAAW,GAAG,OAAO,MAAM,OAAO,UAAU;KAAI,UAAA;IAAU,CAAA,IAAI;IACzE,QAAQ,KAAK,IAAI,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI;GAC7D;;CACc,CAAA;AAEzB;AAEA,QAAQ,cAAc"}

package/es/dashboard/Surface/index.d.mts

@@ -1,4 +1,5 @@
+import { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink } from "./type.mjs";
+import { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
 import { styles } from "./style.mjs";
-import { SurfaceProps } from "./type.mjs";
 import Surface from "./Surface.mjs";
-export { type SurfaceProps, Surface as default, styles as surfaceStyles };
+export { type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, Surface as default, styles as surfaceStyles, useSurfaceDepth, useSurfaceLink };

package/es/dashboard/Surface/link.d.mts

@@ -0,0 +1,14 @@
+import { SurfaceRenderLink } from "./type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/Surface/link.d.ts
+/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */
+declare const SurfaceLinkProvider: ({ children, renderLink }: {
+  children?: ReactNode;
+  renderLink: SurfaceRenderLink;
+}) => import("react").JSX.Element;
+declare const useSurfaceLink: (override?: SurfaceRenderLink) => SurfaceRenderLink;
+/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
+declare const useSurfaceDepth: () => number;
+//#endregion
+export { SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink };
+//# sourceMappingURL=link.d.mts.map

package/es/dashboard/Surface/link.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dashboard/Surface/link.tsx
+const defaultRenderLink = ({ children, ...rest }) => /* @__PURE__ */ jsx("a", {
+	...rest,
+	children
+});
+const SurfaceLinkContext = createContext(defaultRenderLink);
+const SurfaceDepthContext = createContext(0);
+/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */
+const SurfaceLinkProvider = ({ children, renderLink }) => /* @__PURE__ */ jsx(SurfaceLinkContext, {
+	value: renderLink,
+	children
+});
+const useSurfaceLink = (override) => override ?? use(SurfaceLinkContext);
+/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
+const useSurfaceDepth = () => use(SurfaceDepthContext);
+//#endregion
+export { SurfaceDepthContext, SurfaceLinkProvider, useSurfaceDepth, useSurfaceLink };
+
+//# sourceMappingURL=link.mjs.map

package/es/dashboard/Surface/link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.mjs","names":[],"sources":["../../../src/dashboard/Surface/link.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type ReactNode, use } from 'react';\n\nimport type { SurfaceLinkProps, SurfaceRenderLink } from './type';\n\nconst defaultRenderLink: SurfaceRenderLink = ({ children, ...rest }: SurfaceLinkProps) => (\n  <a {...rest}>{children}</a>\n);\n\nconst SurfaceLinkContext = createContext<SurfaceRenderLink>(defaultRenderLink);\n\nconst SurfaceDepthContext = createContext(0);\n\n/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */\nexport const SurfaceLinkProvider = ({\n  children,\n  renderLink,\n}: {\n  children?: ReactNode;\n  renderLink: SurfaceRenderLink;\n}) => <SurfaceLinkContext value={renderLink}>{children}</SurfaceLinkContext>;\n\nexport const useSurfaceLink = (override?: SurfaceRenderLink) => override ?? use(SurfaceLinkContext);\n\n/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */\nexport const useSurfaceDepth = () => use(SurfaceDepthContext);\n\nexport { SurfaceDepthContext };\n"],"mappings":";;;;AAMA,MAAM,qBAAwC,EAAE,UAAU,GAAG,WAC3D,oBAAC,KAAD;CAAG,GAAI;CAAO;AAAY,CAAA;AAG5B,MAAM,qBAAqB,cAAiC,iBAAiB;AAE7E,MAAM,sBAAsB,cAAc,CAAC;;AAG3C,MAAa,uBAAuB,EAClC,UACA,iBAII,oBAAC,oBAAD;CAAoB,OAAO;CAAa;AAA6B,CAAA;AAE3E,MAAa,kBAAkB,aAAiC,YAAY,IAAI,kBAAkB;;AAGlG,MAAa,wBAAwB,IAAI,mBAAmB"}

package/es/dashboard/Surface/style.d.mts

@@ -8,6 +8,29 @@
  */
 declare const styles: {
   card: string;
+  chart: string;
+  /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */
+  clip: string;
+  loading: string;
+  arrow: string;
+  bleed: string;
+  body: string;
+  /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */
+  content: string;
+  /** Whole card answers hover when its header drills into another page. */
+  cardLinked: string;
+  desc: string;
+  extra: string;
+  header: string;
+  heading: string;
+  headingLink: string;
+  /**
+   * A table inside padded card body meets the card's left, right, and bottom
+   * edges. A table that is the only body content also meets the header.
+   * Padding amounts come from `--surface-pad-*` on the same element.
+   */
+  tableBleed: string;
+  title: string;
 };
 //#endregion
 export { styles };

package/es/dashboard/Surface/style.mjs

@@ -7,7 +7,8 @@ import { createStaticStyles } from "antd-style";
 * The workspace is already that container, so a card inside it steps up to
 * `colorBgElevated` and `colorBorder`.
 */
-const styles = createStaticStyles(({ css, cssVar }) => ({ card: css`
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	card: css`
     &&,
     &&:hover {
       border: 1px solid ${cssVar.colorBorder};
@@ -15,7 +16,287 @@ const styles = createStaticStyles(({ css, cssVar }) => ({ card: css`
       background: ${cssVar.colorBgElevated};
       box-shadow: ${cssVar.boxShadowTertiary};
     }
-  ` }));
+  `,
+	chart: css`
+    min-inline-size: 0;
+  `,
+	/** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */
+	clip: css`
+    overflow: hidden;
+  `,
+	loading: css`
+    padding-block: 4px 8px;
+  `,
+	arrow: css`
+    flex: none;
+
+    margin-block-start: 2px;
+    margin-inline-start: auto;
+
+    color: ${cssVar.colorTextTertiary};
+
+    transition:
+      color 150ms ease-out,
+      transform 150ms ease-out;
+  `,
+	bleed: css`
+    && th,
+    && td {
+      padding-inline: 16px;
+    }
+
+    && th {
+      white-space: nowrap;
+    }
+  `,
+	body: css`
+    --surface-pad-inline: 16px;
+    --surface-pad-block: 16px;
+
+    padding: 16px;
+  `,
+	/** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */
+	content: css`
+    min-inline-size: 0;
+
+    /* Table cells default to colorBgContainer, a step darker than this card.
+       Ant Design paints that color on .ant-table itself, so the body stays dark
+       even after the cells are cleared. */
+    && .ant-table,
+    && th,
+    && td {
+      background: transparent;
+    }
+
+    && .ant-table-css-var,
+    && .ant-table-wrapper {
+      --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+      --ant-table-row-hover-bg: color-mix(
+        in srgb,
+        ${cssVar.colorText} 6%,
+        ${cssVar.colorBgElevated}
+      );
+    }
+
+    && th {
+      font-weight: 500;
+      color: ${cssVar.colorTextSecondary};
+      white-space: nowrap;
+
+      background: ${cssVar.colorBgElevated};
+      box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+    }
+
+    /* Pinned body cells inherit the transparent body, so a scrolled cell paints
+       straight through them. Frost with the card color. Header pins stay the
+       same solid fill as the rest of the header — a translucent header reads
+       as a lighter strip in dark mode. */
+    && td.ant-table-cell-fix-start,
+    && td.ant-table-cell-fix-end {
+      background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);
+      backdrop-filter: blur(12px);
+    }
+
+    && td.ant-table-cell-fix-end-shadow-show::after {
+      background: linear-gradient(
+        to left,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+      backdrop-filter: blur(8px);
+    }
+
+    && td.ant-table-cell-fix-start-shadow-show::after {
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+      backdrop-filter: blur(8px);
+    }
+
+    [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+    }
+
+    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {
+      background: linear-gradient(
+        to left,
+        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),
+        transparent
+      );
+    }
+
+    && td {
+      border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+    }
+
+    && tr:hover > td,
+    && .ant-table-tbody > tr.ant-table-row:hover > td {
+      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});
+    }
+
+    /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.
+       The transparent body rule above would let scrolled text show through. */
+    && td[style*='sticky'] {
+      background: ${cssVar.colorBgElevated};
+    }
+
+    && tr:hover > td[style*='sticky'] {
+      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});
+    }
+  `,
+	/** Whole card answers hover when its header drills into another page. */
+	cardLinked: css`
+    &&:hover,
+    &&:focus-within {
+      border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);
+    }
+
+    &&:hover [data-surface-arrow] {
+      transform: translate(1px, -1px);
+      color: ${cssVar.colorText};
+    }
+  `,
+	desc: css`
+    margin-block-start: 2px;
+
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.45;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	extra: css`
+    display: flex;
+    flex: none;
+    gap: 8px;
+    align-items: center;
+  `,
+	header: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	heading: css`
+    min-inline-size: 0;
+  `,
+	headingLink: css`
+    display: flex;
+    flex: 1;
+    gap: 12px;
+    align-items: flex-start;
+
+    min-inline-size: 0;
+
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: inherit;
+    }
+  `,
+	/**
+	* A table inside padded card body meets the card's left, right, and bottom
+	* edges. A table that is the only body content also meets the header.
+	* Padding amounts come from `--surface-pad-*` on the same element.
+	*/
+	tableBleed: css`
+    /* A table nested in a cell keeps the cell's own inset. */
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {
+      width: calc(100% + 2 * var(--surface-pad-inline, 16px));
+      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));
+    }
+
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {
+      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {
+      margin-block-start: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    /* ProTable keeps its search and toolbar in the padding. The table itself
+       meets the card's left, right, and bottom edges. Lower-specificity
+       selectors stay above the :has(th/td) rules for stylelint. */
+    && .ant-table-css-var,
+    && .ant-table-wrapper {
+      --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);
+      --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);
+      --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);
+      --ant-table-header-border-radius: 0;
+    }
+
+    && .ant-table-wrapper {
+      width: calc(100% + 2 * var(--surface-pad-inline, 16px));
+      max-width: none;
+      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));
+    }
+
+    /* A plain table that is the card body meets the header and the bottom edge.
+       Its own corner radius would otherwise float inside the card padding. */
+    && > .lobe-flex:only-child > .ant-table-wrapper:only-child {
+      margin-block: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    && .ant-pro-table:last-child {
+      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));
+    }
+
+    && .ant-table-wrapper .ant-table,
+    && .ant-table-wrapper .ant-table-container,
+    && .ant-table-thead > tr > th,
+    && .ant-table-thead > tr > th:first-child,
+    && .ant-table-thead > tr > th:last-child {
+      border-radius: 0;
+    }
+
+    && .ant-table-wrapper .ant-table-cell {
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+
+    && .ant-table-wrapper .ant-pagination {
+      margin-block: 0;
+      padding-block: 12px;
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,
+    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+
+    /* The root's negative bottom margin includes this sibling. Without block
+       padding the pager sits on the card edge. Same inset as the ant pagination. */
+    &&
+      :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))
+      > :not([data-table-wrapper]) {
+      margin-block: 0;
+      padding-block: 12px;
+      padding-inline: var(--surface-pad-inline, 16px);
+    }
+  `,
+	title: css`
+    overflow: hidden;
+
+    min-inline-size: 0;
+
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `
+}));
 //#endregion
 export { styles };
 

package/es/dashboard/Surface/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.\n * The workspace is already that container, so a card inside it steps up to\n * `colorBgElevated` and `colorBorder`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorBorder};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: ${cssVar.colorBgElevated};\n      box-shadow: ${cssVar.boxShadowTertiary};\n    }\n  `,\n}));\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc,EAC7D,MAAM,GAAG;;;0BAGe,OAAO,YAAY;uBACtB,OAAO,eAAe;oBACzB,OAAO,gBAAgB;oBACvB,OAAO,kBAAkB;;IAG7C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/**\n * A content card sitting on the workspace.\n *\n * Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.\n * The workspace is already that container, so a card inside it steps up to\n * `colorBgElevated` and `colorBorder`.\n */\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  card: css`\n    &&,\n    &&:hover {\n      border: 1px solid ${cssVar.colorBorder};\n      border-radius: ${cssVar.borderRadiusLG};\n      background: ${cssVar.colorBgElevated};\n      box-shadow: ${cssVar.boxShadowTertiary};\n    }\n  `,\n  chart: css`\n    min-inline-size: 0;\n  `,\n  /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */\n  clip: css`\n    overflow: hidden;\n  `,\n  loading: css`\n    padding-block: 4px 8px;\n  `,\n  arrow: css`\n    flex: none;\n\n    margin-block-start: 2px;\n    margin-inline-start: auto;\n\n    color: ${cssVar.colorTextTertiary};\n\n    transition:\n      color 150ms ease-out,\n      transform 150ms ease-out;\n  `,\n  bleed: css`\n    && th,\n    && td {\n      padding-inline: 16px;\n    }\n\n    && th {\n      white-space: nowrap;\n    }\n  `,\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  /** Table and header rules for the rich card. Kept off `card` so the shared class stays a plain frame. */\n  content: css`\n    min-inline-size: 0;\n\n    /* Table cells default to colorBgContainer, a step darker than this card.\n       Ant Design paints that color on .ant-table itself, so the body stays dark\n       even after the cells are cleared. */\n    && .ant-table,\n    && th,\n    && td {\n      background: transparent;\n    }\n\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-border-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n      --ant-table-row-hover-bg: color-mix(\n        in srgb,\n        ${cssVar.colorText} 6%,\n        ${cssVar.colorBgElevated}\n      );\n    }\n\n    && th {\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      white-space: nowrap;\n\n      background: ${cssVar.colorBgElevated};\n      box-shadow: inset 0 -1px 0 color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n    }\n\n    /* Pinned body cells inherit the transparent body, so a scrolled cell paints\n       straight through them. Frost with the card color. Header pins stay the\n       same solid fill as the rest of the header — a translucent header reads\n       as a lighter strip in dark mode. */\n    && td.ant-table-cell-fix-start,\n    && td.ant-table-cell-fix-end {\n      background: color-mix(in srgb, ${cssVar.colorBgElevated} 82%, transparent);\n      backdrop-filter: blur(12px);\n    }\n\n    && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n      backdrop-filter: blur(8px);\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-end-shadow-show::after {\n      background: linear-gradient(\n        to right,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n    }\n\n    [dir='rtl'] && td.ant-table-cell-fix-start-shadow-show::after {\n      background: linear-gradient(\n        to left,\n        color-mix(in srgb, ${cssVar.colorBgElevated} 72%, transparent),\n        transparent\n      );\n    }\n\n    && td {\n      border-block-end-color: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n    }\n\n    && tr:hover > td,\n    && .ant-table-tbody > tr.ant-table-row:hover > td {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n\n    /* base-ui Table pins with inline position:sticky, not .ant-table-cell-fix-*.\n       The transparent body rule above would let scrolled text show through. */\n    && td[style*='sticky'] {\n      background: ${cssVar.colorBgElevated};\n    }\n\n    && tr:hover > td[style*='sticky'] {\n      background: color-mix(in srgb, ${cssVar.colorText} 6%, ${cssVar.colorBgElevated});\n    }\n  `,\n  /** Whole card answers hover when its header drills into another page. */\n  cardLinked: css`\n    &&:hover,\n    &&:focus-within {\n      border-color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);\n    }\n\n    &&:hover [data-surface-arrow] {\n      transform: translate(1px, -1px);\n      color: ${cssVar.colorText};\n    }\n  `,\n  desc: css`\n    margin-block-start: 2px;\n\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  extra: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  heading: css`\n    min-inline-size: 0;\n  `,\n  headingLink: css`\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      color: inherit;\n    }\n  `,\n  /**\n   * A table inside padded card body meets the card's left, right, and bottom\n   * edges. A table that is the only body content also meets the header.\n   * Padding amounts come from `--surface-pad-*` on the same element.\n   */\n  tableBleed: css`\n    /* A table nested in a cell keeps the cell's own inset. */\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])):first-child:last-child {\n      margin-block-start: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    /* ProTable keeps its search and toolbar in the padding. The table itself\n       meets the card's left, right, and bottom edges. Lower-specificity\n       selectors stay above the :has(th/td) rules for stylelint. */\n    && .ant-table-css-var,\n    && .ant-table-wrapper {\n      --ant-table-cell-padding-inline: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-md: var(--surface-pad-inline, 16px);\n      --ant-table-cell-padding-inline-sm: var(--surface-pad-inline, 16px);\n      --ant-table-header-border-radius: 0;\n    }\n\n    && .ant-table-wrapper {\n      width: calc(100% + 2 * var(--surface-pad-inline, 16px));\n      max-width: none;\n      margin-inline: calc(-1 * var(--surface-pad-inline, 16px));\n    }\n\n    /* A plain table that is the card body meets the header and the bottom edge.\n       Its own corner radius would otherwise float inside the card padding. */\n    && > .lobe-flex:only-child > .ant-table-wrapper:only-child {\n      margin-block: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-pro-table:last-child {\n      margin-block-end: calc(-1 * var(--surface-pad-block, 16px));\n    }\n\n    && .ant-table-wrapper .ant-table,\n    && .ant-table-wrapper .ant-table-container,\n    && .ant-table-thead > tr > th,\n    && .ant-table-thead > tr > th:first-child,\n    && .ant-table-thead > tr > th:last-child {\n      border-radius: 0;\n    }\n\n    && .ant-table-wrapper .ant-table-cell {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && .ant-table-wrapper .ant-pagination {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) th,\n    && :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper])) td {\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n\n    /* The root's negative bottom margin includes this sibling. Without block\n       padding the pager sits on the card edge. Same inset as the ant pagination. */\n    &&\n      :has(> [data-table-wrapper]):not(td :has(> [data-table-wrapper]))\n      > :not([data-table-wrapper]) {\n      margin-block: 0;\n      padding-block: 12px;\n      padding-inline: var(--surface-pad-inline, 16px);\n    }\n  `,\n  title: css`\n    overflow: hidden;\n\n    min-inline-size: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n"],"mappings":";;;;;;;;;AASA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;0BAGe,OAAO,YAAY;uBACtB,OAAO,eAAe;oBACzB,OAAO,gBAAgB;oBACvB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;CAIV,MAAM,GAAG;;;CAGT,SAAS,GAAG;;;CAGZ,OAAO,GAAG;;;;;;aAMC,OAAO,kBAAkB;;;;;;CAMpC,OAAO,GAAG;;;;;;;;;;CAUV,MAAM,GAAG;;;;;;;CAOT,SAAS,GAAG;;;;;;;;;;;;;;qDAcuC,OAAO,UAAU;;;UAG5D,OAAO,UAAU;UACjB,OAAO,gBAAgB;;;;;;eAMlB,OAAO,mBAAmB;;;oBAGrB,OAAO,gBAAgB;sDACW,OAAO,UAAU;;;;;;;;;uCAShC,OAAO,gBAAgB;;;;;;;6BAOjC,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;;6BASvB,OAAO,gBAAgB;;;;;;;;6BAQvB,OAAO,gBAAgB;;;;;;mDAMD,OAAO,UAAU;;;;;uCAK7B,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;;;oBAMlE,OAAO,gBAAgB;;;;uCAIJ,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAIpF,YAAY,GAAG;;;yCAGwB,OAAO,UAAU;;;;;eAK3C,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;;;CAMV,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,SAAS,GAAG;;;CAGZ,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;CAoBhB,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ef,OAAO,GAAG;;;;;;;;aAQC,OAAO,UAAU;;;;AAI9B,EAAE"}

package/es/dashboard/Surface/type.d.mts

@@ -1,8 +1,36 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/Surface/type.d.ts
-interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+interface SurfaceLinkProps {
+  children: ReactNode;
+  className?: string;
+  href: string;
+  rel?: string;
+  target?: string;
+}
+/** Renders a link with the app's router. Defaults to a plain `<a>`. */
+type SurfaceRenderLink = (props: SurfaceLinkProps) => ReactNode;
+interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Drop body padding and widen table cells so a table sits on the card edges. */
+  bleed?: boolean;
+  /** Full-width slot under the body, for a chart that meets the card edges. */
+  chart?: ReactNode;
   children?: ReactNode;
+  description?: ReactNode;
+  extra?: ReactNode;
+  /** Makes the heading a link to the page this card summarises. */
+  href?: string;
+  /**
+   * First load: with no children the body is a placeholder block.
+   * A refresh with children keeps them and shows a small spinner in the header.
+   */
+  loading?: boolean;
+  /** Pad the body. Defaults to on for a card with a header and off for a bare card. */
+  padded?: boolean;
+  /** Overrides the link renderer from `SurfaceLinkProvider`. */
+  renderLink?: SurfaceRenderLink;
+  /** Visible heading. */
+  title?: ReactNode;
 }
 //#endregion
-export { SurfaceProps };
+export { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink };
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/TableIconActions/TableIconActions.d.mts

@@ -0,0 +1,17 @@
+import { TableIconActionProps, TableIconActionsProps } from "./type.mjs";
+//#region src/dashboard/TableIconActions/TableIconActions.d.ts
+/** Column width for a row of `count` small filled action icons. */
+declare const tableActionColumnWidth: (count: number) => number;
+/** Right-aligned row of icon actions for a table's last column. */
+declare const TableIconActions: {
+  ({ children }: TableIconActionsProps): import("react").JSX.Element;
+  displayName: string;
+};
+/** One row action: a small filled icon button whose label is its name and tooltip. */
+declare const TableIconAction: {
+  ({ danger, disabled, icon, label, loading, onClick }: TableIconActionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TableIconAction, TableIconActions as default, tableActionColumnWidth };
+//# sourceMappingURL=TableIconActions.d.mts.map

package/es/dashboard/TableIconActions/TableIconActions.mjs

@@ -0,0 +1,39 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/dashboard/TableIconActions/TableIconActions.tsx
+/** `ActionIcon` `size="small"` is 24px. */
+const ACTION_ICON_SIZE = 24;
+const ACTION_ICON_GAP = 4;
+/** Table cell horizontal padding, so the icons are not clipped by the column. */
+const ACTION_CELL_PADDING = 32;
+/** Column width for a row of `count` small filled action icons. */
+const tableActionColumnWidth = (count) => count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;
+/** Right-aligned row of icon actions for a table's last column. */
+const TableIconActions = ({ children }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	gap: ACTION_ICON_GAP,
+	justify: "flex-end",
+	width: "100%",
+	children
+});
+TableIconActions.displayName = "TableIconActions";
+/** One row action: a small filled icon button whose label is its name and tooltip. */
+const TableIconAction = ({ danger, disabled, icon, label, loading, onClick }) => /* @__PURE__ */ jsx(ActionIcon, {
+	"aria-label": label,
+	danger,
+	disabled,
+	icon,
+	loading,
+	size: "small",
+	title: label,
+	variant: "filled",
+	onClick
+});
+TableIconAction.displayName = "TableIconAction";
+//#endregion
+export { TableIconAction, TableIconActions as default, tableActionColumnWidth };
+
+//# sourceMappingURL=TableIconActions.mjs.map

package/es/dashboard/TableIconActions/TableIconActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableIconActions.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/TableIconActions/TableIconActions.tsx"],"sourcesContent":["'use client';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { TableIconActionProps, TableIconActionsProps } from './type';\n\n/** `ActionIcon` `size=\"small\"` is 24px. */\nconst ACTION_ICON_SIZE = 24;\nconst ACTION_ICON_GAP = 4;\n/** Table cell horizontal padding, so the icons are not clipped by the column. */\nconst ACTION_CELL_PADDING = 32;\n\n/** Column width for a row of `count` small filled action icons. */\nexport const tableActionColumnWidth = (count: number) =>\n  count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;\n\n/** Right-aligned row of icon actions for a table's last column. */\nconst TableIconActions = ({ children }: TableIconActionsProps) => (\n  <Flexbox horizontal align={'center'} gap={ACTION_ICON_GAP} justify={'flex-end'} width={'100%'}>\n    {children}\n  </Flexbox>\n);\n\nTableIconActions.displayName = 'TableIconActions';\n\n/** One row action: a small filled icon button whose label is its name and tooltip. */\nexport const TableIconAction = ({\n  danger,\n  disabled,\n  icon,\n  label,\n  loading,\n  onClick,\n}: TableIconActionProps) => (\n  <ActionIcon\n    aria-label={label}\n    danger={danger}\n    disabled={disabled}\n    icon={icon}\n    loading={loading}\n    size={'small'}\n    title={label}\n    variant={'filled'}\n    onClick={onClick}\n  />\n);\n\nTableIconAction.displayName = 'TableIconAction';\n\nexport default TableIconActions;\n"],"mappings":";;;;;;AAQA,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;;AAExB,MAAM,sBAAsB;;AAG5B,MAAa,0BAA0B,UACrC,QAAQ,mBAAmB,KAAK,IAAI,GAAG,QAAQ,CAAC,IAAI,kBAAkB;;AAGxE,MAAM,oBAAoB,EAAE,eAC1B,oBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAU,KAAK;CAAiB,SAAS;CAAY,OAAO;CACpF;AACM,CAAA;AAGX,iBAAiB,cAAc;;AAG/B,MAAa,mBAAmB,EAC9B,QACA,UACA,MACA,OACA,SACA,cAEA,oBAAC,YAAD;CACE,cAAY;CACJ;CACE;CACJ;CACG;CACT,MAAM;CACN,OAAO;CACP,SAAS;CACA;AACV,CAAA;AAGH,gBAAgB,cAAc"}

package/es/dashboard/TableIconActions/index.d.mts

@@ -0,0 +1,3 @@
+import { TableIconActionProps, TableIconActionsProps } from "./type.mjs";
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions.mjs";
+export { TableIconAction, type TableIconActionProps, type TableIconActionsProps, TableIconActions as default, tableActionColumnWidth };

package/es/dashboard/TableIconActions/type.d.mts

@@ -0,0 +1,18 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+//#region src/dashboard/TableIconActions/type.d.ts
+interface TableIconActionsProps {
+  children?: ReactNode;
+}
+interface TableIconActionProps {
+  danger?: boolean;
+  disabled?: boolean;
+  icon: LucideIcon;
+  /** Accessible name and tooltip. Required: the button has no visible text. */
+  label: string;
+  loading?: boolean;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}
+//#endregion
+export { TableIconActionProps, TableIconActionsProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/TitleWithTips/TitleWithTips.d.mts

@@ -0,0 +1,10 @@
+import { TitleWithTipsProps } from "./type.mjs";
+//#region src/dashboard/TitleWithTips/TitleWithTips.d.ts
+/** A column or field title with an info icon that explains it on hover. */
+declare const TitleWithTips: {
+  ({ className, tips, title }: TitleWithTipsProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TitleWithTips as default };
+//# sourceMappingURL=TitleWithTips.d.mts.map