@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/dashboard/Surface/Surface.mjs

@@ -1,16 +1,98 @@
 "use client";
 import { styleProps } from "../../styles/stylex/props.mjs";
-import { styles } from "./style.mjs";
-import { jsx } from "react/jsx-runtime";
+import Spin from "../../Spin/Spin.mjs";
+import Skeleton from "../../Skeleton/index.mjs";
+import { surfaceMarker } from "./marker.stylex.mjs";
+import { styles, surfaceClassNames } from "./style.mjs";
+import { SurfaceDepthContext, useSurfaceCardStyles, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import * as stylex from "@stylexjs/stylex";
+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, style, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		...styleProps(styles.card, className, style),
-		...rest
+function Surface({ bleed = false, chart, children, className, description, extra, href, loading, padded, renderLink, style, title, ...rest }) {
+	const depth = useSurfaceDepth();
+	const link = useSurfaceLink(renderLink);
+	const cardStyles = useSurfaceCardStyles();
+	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 heading = /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.heading),
+		children: [defined(title) ? /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.title),
+			children: title
+		}) : null, defined(description) ? /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles.desc),
+			children: description
+		}) : null]
+	});
+	const body = placeholder ? /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		...stylex.props(styles.loading),
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			height: 220,
+			radius: 8
+		})
+	}) : children;
+	const trailing = refreshing || defined(extra);
+	const arrow = /* @__PURE__ */ jsx(ArrowUpRight, {
+		"aria-hidden": true,
+		size: 16,
+		...stylex.props(styles.arrow, trailing && styles.arrowInLink)
+	});
+	return /* @__PURE__ */ jsx(SurfaceDepthContext, {
+		value: depth + 1,
+		children: /* @__PURE__ */ jsxs("div", {
+			...styleProps([
+				cardStyles,
+				styles.content,
+				styles.clip,
+				Boolean(href) && [styles.cardLinked, surfaceMarker]
+			], clsx$1(surfaceClassNames.root, bleed && surfaceClassNames.bleed, className), style),
+			...rest,
+			children: [
+				hasHeader ? /* @__PURE__ */ jsxs("div", {
+					...stylex.props(styles.header),
+					children: [href ? link({
+						children: /* @__PURE__ */ jsxs(Fragment, { children: [heading, trailing ? null : arrow] }),
+						className: stylex.props(styles.headingLink).className,
+						href
+					}) : heading, trailing ? /* @__PURE__ */ jsxs("div", {
+						...stylex.props(styles.extra),
+						children: [
+							refreshing ? /* @__PURE__ */ jsx(Spin, {
+								size: "small",
+								variant: "network"
+							}) : null,
+							extra,
+							href ? link({
+								"aria-hidden": true,
+								"children": arrow,
+								"className": stylex.props(styles.arrowLink).className,
+								href,
+								"tabIndex": -1
+							}) : null
+						]
+					}) : null]
+				}) : null,
+				pad ? /* @__PURE__ */ jsx("div", {
+					...styleProps(styles.body, surfaceClassNames.tableBleed),
+					children: body
+				}) : body,
+				defined(chart) ? /* @__PURE__ */ jsx("div", {
+					...stylex.props(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 { styleProps } from '@/styles/stylex/props';\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, style, ...rest }: SurfaceProps) {\n  return <div {...styleProps(styles.card, className, style)} {...rest} />;\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAWA,SAAS,QAAQ,EAAE,WAAW,OAAO,GAAG,QAAsB;CAC5D,OAAO,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW,KAAK;EAAG,GAAI;CAAO,CAAA;AACxE;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Surface.mjs","names":["clsx"],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ArrowUpRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport Skeleton from '@/Skeleton';\nimport Spin from '@/Spin';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { SurfaceDepthContext, useSurfaceCardStyles, useSurfaceDepth, useSurfaceLink } from './link';\nimport { surfaceMarker } from './marker.stylex';\nimport { styles, surfaceClassNames } 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  style,\n  title,\n  ...rest\n}: SurfaceProps) {\n  const depth = useSurfaceDepth();\n  const link = useSurfaceLink(renderLink);\n  const cardStyles = useSurfaceCardStyles();\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\n  const heading = (\n    <div {...stylex.props(styles.heading)}>\n      {defined(title) ? <div {...stylex.props(styles.title)}>{title}</div> : null}\n      {defined(description) ? <div {...stylex.props(styles.desc)}>{description}</div> : null}\n    </div>\n  );\n\n  const body = placeholder ? (\n    <div aria-busy=\"true\" {...stylex.props(styles.loading)}>\n      <Skeleton height={220} radius={8} />\n    </div>\n  ) : (\n    children\n  );\n\n  // With header actions, the arrow sits after them as the rightmost item.\n  const trailing = refreshing || defined(extra);\n  const arrow = (\n    <ArrowUpRight\n      aria-hidden\n      size={16}\n      {...stylex.props(styles.arrow, trailing && styles.arrowInLink)}\n    />\n  );\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        {...styleProps(\n          [\n            cardStyles,\n            styles.content,\n            styles.clip,\n            Boolean(href) && [styles.cardLinked, surfaceMarker],\n          ],\n          clsx(surfaceClassNames.root, bleed && surfaceClassNames.bleed, className),\n          style,\n        )}\n        {...rest}\n      >\n        {hasHeader ? (\n          <div {...stylex.props(styles.header)}>\n            {href\n              ? link({\n                  children: (\n                    <>\n                      {heading}\n                      {trailing ? null : arrow}\n                    </>\n                  ),\n                  className: stylex.props(styles.headingLink).className,\n                  href,\n                })\n              : heading}\n            {trailing ? (\n              <div {...stylex.props(styles.extra)}>\n                {refreshing ? <Spin size=\"small\" variant=\"network\" /> : null}\n                {extra}\n                {href\n                  ? link({\n                      'aria-hidden': true,\n                      'children': arrow,\n                      'className': stylex.props(styles.arrowLink).className,\n                      href,\n                      'tabIndex': -1,\n                    } as any)\n                  : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {pad ? <div {...styleProps(styles.body, surfaceClassNames.tableBleed)}>{body}</div> : body}\n        {defined(chart) ? <div {...stylex.props(styles.chart)}>{chart}</div> : null}\n      </div>\n    </SurfaceDepthContext>\n  );\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;;;;AAcA,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,OACA,GAAG,QACY;CACf,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,aAAa,qBAAqB;CACxC,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,QAAQ,WAAW,aAAa;CACpD,MAAM,UAAU,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAApC,UAAA,CACX,QAAQ,KAAK,IAAI,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,KAAK;GAAI,UAAA;EAAW,CAAA,IAAI,MACtE,QAAQ,WAAW,IAAI,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAI,UAAA;EAAiB,CAAA,IAAI,IAC/E;;CACP,MAAM,OAAO,cAAc,oBAAC,OAAD;EAAK,aAAU;EAAO,GAAI,OAAO,MAAM,OAAO,OAAO;EAC5E,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAAI;CAGX,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,QAAQ,oBAAC,cAAD;EAAc,eAAA;EAAY,MAAM;EAAI,GAAI,OAAO,MAAM,OAAO,OAAO,YAAY,OAAO,WAAW;CAAI,CAAA;CACnH,OAAO,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EACvC,UAAA,qBAAC,OAAD;GAAK,GAAI,WAAW;IAAC;IAAY,OAAO;IAAS,OAAO;IAAM,QAAQ,IAAI,KAAK,CAAC,OAAO,YAAY,aAAa;GAAC,GAAGA,OAAK,kBAAkB,MAAM,SAAS,kBAAkB,OAAO,SAAS,GAAG,KAAK;GAAG,GAAI;GAA3M,UAAA;IACG,YAAY,qBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,MAAM;KAAnC,UAAA,CACR,OAAO,KAAK;MACf,UAAU,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,WAAW,OAAO,KACnB,EAAA,CAAA;MACZ,WAAW,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC;MAC5C;KACF,CAAC,IAAI,SACA,WAAW,qBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,KAAK;MAAlC,UAAA;OACP,aAAa,oBAAC,MAAD;QAAM,MAAK;QAAQ,SAAQ;OAAW,CAAA,IAAI;OACvD;OACA,OAAO,KAAK;QACjB,eAAe;QACf,YAAY;QACZ,aAAa,OAAO,MAAM,OAAO,SAAS,CAAC,CAAC;QAC5C;QACA,YAAY;OACd,CAAQ,IAAI;MACH;KAAI,CAAA,IAAA,IACR;IAAI,CAAA,IAAA;IACV,MAAM,oBAAC,OAAD;KAAK,GAAI,WAAW,OAAO,MAAM,kBAAkB,UAAU;KAAI,UAAA;IAAU,CAAA,IAAI;IACrF,QAAQ,KAAK,IAAI,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,KAAK;KAAI,UAAA;IAAW,CAAA,IAAI;GACpE;;CACc,CAAA;AACzB;AACA,QAAQ,cAAc"}

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

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

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

@@ -0,0 +1,16 @@
+import { SurfaceRenderLink } from "./type.mjs";
+import { ReactNode } from "react";
+import "@stylexjs/stylex";
+//#region src/dashboard/Surface/link.d.ts
+/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */
+export declare const SurfaceLinkProvider: ({ children, renderLink }: {
+  children?: ReactNode;
+  renderLink: SurfaceRenderLink;
+}) => import("react").JSX.Element;
+export declare const useSurfaceLink: (override?: SurfaceRenderLink) => SurfaceRenderLink;
+/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
+export declare const useSurfaceDepth: () => number;
+/** Class name form of `useSurfaceCardStyles`, for markup that is not styled with StyleX. */
+export declare const useSurfaceCardClassName: () => string;
+//#endregion
+//# sourceMappingURL=link.d.mts.map

package/es/dashboard/Surface/link.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { useThemeMode } from "../../styles/theme/scope.mjs";
+import { styles } from "./style.mjs";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#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);
+/**
+* StyleX styles for a dashboard card: `colorBgContainer` in light, translucent
+* `colorFillQuaternary` in dark, and no fill of its own when nested in another Surface.
+*/
+const useSurfaceCardStyles = () => {
+	const { isDarkMode } = useThemeMode();
+	const depth = useSurfaceDepth();
+	return [
+		styles.card,
+		isDarkMode && styles.cardDark,
+		depth > 0 && styles.cardNested
+	];
+};
+/** Class name form of `useSurfaceCardStyles`, for markup that is not styled with StyleX. */
+const useSurfaceCardClassName = () => stylex.props(useSurfaceCardStyles()).className ?? "";
+//#endregion
+export { SurfaceDepthContext, SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceCardStyles, 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 * as stylex from '@stylexjs/stylex';\nimport { createContext, type ReactNode, use } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } from './style';\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\n/**\n * StyleX styles for a dashboard card: `colorBgContainer` in light, translucent\n * `colorFillQuaternary` in dark, and no fill of its own when nested in another Surface.\n */\nexport const useSurfaceCardStyles = () => {\n  const { isDarkMode } = useThemeMode();\n  const depth = useSurfaceDepth();\n  return [styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested] as const;\n};\n\n/** Class name form of `useSurfaceCardStyles`, for markup that is not styled with StyleX. */\nexport const useSurfaceCardClassName = () => stylex.props(useSurfaceCardStyles()).className ?? '';\n"],"mappings":";;;;;;;AAOA,MAAM,qBAAwC,EAC5C,UACA,GAAG,WACmB,oBAAC,KAAD;CAAG,GAAI;CAAO;AAAY,CAAA;AAClD,MAAM,qBAAqB,cAAiC,iBAAiB;AAC7E,MAAM,sBAAsB,cAAc,CAAC;;AAG3C,MAAa,uBAAuB,EAClC,UACA,iBAII,oBAAC,oBAAD;CAAoB,OAAO;CAAa;AAA6B,CAAA;AAC3E,MAAa,kBAAkB,aAAiC,YAAY,IAAI,kBAAkB;;AAGlG,MAAa,wBAAwB,IAAI,mBAAmB;;;;;AAO5D,MAAa,6BAA6B;CACxC,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,QAAQ,gBAAgB;CAC9B,OAAO;EAAC,OAAO;EAAM,cAAc,OAAO;EAAU,QAAQ,KAAK,OAAO;CAAU;AACpF;;AAGA,MAAa,gCAAgC,OAAO,MAAM,qBAAqB,CAAC,CAAC,CAAC,aAAa"}

package/es/dashboard/Surface/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/dashboard/Surface/marker.stylex.ts
+const surfaceMarker = {
+	lbbfx20b: "lbbfx20b",
+	$$css: true
+};
+//#endregion
+export { surfaceMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../../src/dashboard/Surface/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const surfaceMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,gBAAgB;CAC3B,UAAU;CACV,OAAO;AACT"}

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

@@ -2,6 +2,8 @@ import "@stylexjs/stylex";
 //#region src/dashboard/Surface/style.d.ts
 export declare const surfaceStyles: {
   card: string;
+  clip: string;
+  tableBleed: string;
 };
 //#endregion
 //# sourceMappingURL=style.d.mts.map

package/es/dashboard/Surface/style.mjs

@@ -2,21 +2,163 @@
 /**
 * A content card sitting on the workspace.
 *
-* Outlined `Block` uses `colorBorderSecondary` on `colorBgContainer`.
-* The workspace is already that container, so a card inside it steps up to
-* `colorBgElevated` and `colorBorder`.
+* Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent
+* `colorFillQuaternary` (white 2%), one step below `colorFillTertiary`, for a quieter raised
+* step on the workspace.
+*
+* Borders and inner dividers (table, header and cell lines, PageSkeleton, strip seams) use
+* `--lobe-fill-border` (`colorFill` in light, `colorFillSecondary` in dark; from theme.css).
+* Hover / focus / stronger edges use `--lobe-fill-border-strong` (light: `colorFill` mixed 15%
+* toward `colorText`; dark: `colorFill`).
+*
+* Anything that must hide content scrolled beneath it (table header cells, pinned and sticky
+* cells) uses `--lobe-surface-bg-solid`: the same white 2% blended onto `--lobe-surface-canvas`
+* (default `colorBgContainer`, the ConsoleShell workspace). `color-mix` in srgb with an opaque
+* base is plain alpha compositing, so it matches the translucent card. Set
+* `--lobe-surface-canvas` when a card sits on another page color.
+*
+* A Surface inside another Surface (`useSurfaceDepth() > 0`) drops its own fill so fills do not
+* stack. Row hover backgrounds keep their own mix. Layout containers (ConsoleShell, ConsoleNav,
+* FilterSidebar split divider, AuthLayout page canvas) keep their own tokens.
+*
+* Apply the card with `useSurfaceCardStyles()` / `useSurfaceCardClassName()`; plain
+* `surfaceStyles.card` is the light look. Table rules for consumer markup live in `style.css`.
 */
-const styles = { card: {
-	kVAM5u: "lbqnr5ac",
-	kaIpWk: "lb1ndkxwp",
-	ksu8eU: "lb1y0btm7",
-	kMzoRj: "lbmkeg23",
-	kWkggS: "lb1w937bt",
-	kGVxlE: "lb1c4gvbl",
-	$$css: true
-} };
-const surfaceStyles = { card: { className: "lbqnr5ac lb1ndkxwp lb1y0btm7 lbmkeg23 lb1w937bt lb1c4gvbl" }.className ?? "" };
+const styles = {
+	arrow: {
+		kUk6DE: "lb1okw0bk",
+		kmkexE: "lb1edyq7o",
+		kMwMTN: "lb53gy9q lb1yoes0a",
+		keoZOQ: "lb1xmf6yo",
+		keTefX: "lbvc5jky",
+		k3aq6I: "lb1fdxmpd",
+		$$css: true
+	},
+	arrowInLink: {
+		keoZOQ: "lbdj266r",
+		$$css: true
+	},
+	arrowLink: {
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb1heor9g",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	body: {
+		"--surface-pad-block": "lb4vqstq",
+		"--surface-pad-inline": "lbssx8jz",
+		kmVPX3: "lb1tamke2",
+		$$css: true
+	},
+	card: {
+		"--lobe-surface-bg": "lbwvmpdu",
+		"--lobe-surface-bg-solid": "lb1hc46fh",
+		kVAM5u: "lb142uwqc",
+		kaIpWk: "lb1ndkxwp",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb1x6hv1e",
+		kGVxlE: "lb3b5rli",
+		$$css: true
+	},
+	cardDark: {
+		"--lobe-surface-bg": "lb1scici8",
+		"--lobe-surface-bg-solid": "lb1ettvn5",
+		$$css: true
+	},
+	cardLinked: {
+		kVAM5u: "lb142uwqc lb1o4wdq2 lbhqn6jm",
+		$$css: true
+	},
+	cardNested: {
+		kWkggS: "lbjbqb8w",
+		$$css: true
+	},
+	chart: {
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	clip: {
+		kVQacm: "lb7giv3",
+		$$css: true
+	},
+	content: {
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	desc: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbo1l8bm",
+		kLWn49: "lbfrs9s4",
+		keoZOQ: "lb1rdy4ex",
+		$$css: true
+	},
+	extra: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		kZKoxP: "lb10w6t97",
+		k1xSpc: "lb78zum5",
+		$$css: true
+	},
+	header: {
+		kOIVth: "lb1v2ro7d",
+		k8WAf4: "lb1vvogim",
+		kg3NbH: "lb1hr3lfm",
+		kGNEyG: "lb1cy8zhl",
+		kL6WhQ: "lb1fmh5c5",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		kB7OPa: "lb9f619",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lb1qughib",
+		kAzted: "lb1wxaq2x",
+		$$css: true
+	},
+	heading: {
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	headingLink: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb1v2ro7d",
+		kybGjl: "lb1hl2dhg",
+		kGNEyG: "lb1cy8zhl",
+		kMwMTN: "lb1heor9g lb144v4sp",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	loading: {
+		kGO01o: "lbwib8y2",
+		kLKAdn: "lb1iorvi4",
+		$$css: true
+	},
+	title: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lbif65rj",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lbcgk4ki",
+		k7Eaqz: "lbeuugli",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	}
+};
+const surfaceClassNames = {
+	bleed: "lobe-surface-bleed",
+	root: "lobe-surface",
+	tableBleed: "lobe-surface-table-bleed"
+};
+const surfaceStyles = {
+	card: { className: "lbwvmpdu lb1hc46fh lb142uwqc lb1ndkxwp lb1y0btm7 lbmkeg23 lb1x6hv1e lb3b5rli" }.className ?? "",
+	clip: { className: "lb7giv3" }.className ?? "",
+	tableBleed: surfaceClassNames.tableBleed
+};
 //#endregion
-export { styles, surfaceStyles };
+export { styles, surfaceClassNames, surfaceStyles };
 
 //# sourceMappingURL=style.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\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 = stylex.create({\n  card: {\n    borderColor: cssVar.colorBorder,\n    borderRadius: cssVar.borderRadiusLG,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: cssVar.boxShadowTertiary,\n  },\n});\n\nexport const surfaceStyles = {\n  card: stylex.props(styles.card).className ?? '',\n};\n"],"mappings":";;;;;;;;AAWA,MAAa,SAAS,EACpB,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AACA,MAAa,gBAAgB,EAC3B,MAAM,EACJ,WAAW,4DACb,EAAE,aAAa,GACjB"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Surface/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { surfaceMarker } from './marker.stylex';\n\n/**\n * A content card sitting on the workspace.\n *\n * Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent\n * `colorFillQuaternary` (white 2%), one step below `colorFillTertiary`, for a quieter raised\n * step on the workspace.\n *\n * Borders and inner dividers (table, header and cell lines, PageSkeleton, strip seams) use\n * `--lobe-fill-border` (`colorFill` in light, `colorFillSecondary` in dark; from theme.css).\n * Hover / focus / stronger edges use `--lobe-fill-border-strong` (light: `colorFill` mixed 15%\n * toward `colorText`; dark: `colorFill`).\n *\n * Anything that must hide content scrolled beneath it (table header cells, pinned and sticky\n * cells) uses `--lobe-surface-bg-solid`: the same white 2% blended onto `--lobe-surface-canvas`\n * (default `colorBgContainer`, the ConsoleShell workspace). `color-mix` in srgb with an opaque\n * base is plain alpha compositing, so it matches the translucent card. Set\n * `--lobe-surface-canvas` when a card sits on another page color.\n *\n * A Surface inside another Surface (`useSurfaceDepth() > 0`) drops its own fill so fills do not\n * stack. Row hover backgrounds keep their own mix. Layout containers (ConsoleShell, ConsoleNav,\n * FilterSidebar split divider, AuthLayout page canvas) keep their own tokens.\n *\n * Apply the card with `useSurfaceCardStyles()` / `useSurfaceCardClassName()`; plain\n * `surfaceStyles.card` is the light look. Table rules for consumer markup live in `style.css`.\n */\nexport const styles = stylex.create({\n  arrow: {\n    flex: 'none',\n    transition: 'color 150ms ease-out, transform 150ms ease-out',\n    color: {\n      default: cssVar.colorTextTertiary,\n      [stylex.when.ancestor(':hover', surfaceMarker)]: cssVar.colorText,\n    },\n    marginBlockStart: 8,\n    marginInlineStart: 'auto',\n    transform: {\n      default: null,\n      [stylex.when.ancestor(':hover', surfaceMarker)]: 'translate(1px, -1px)',\n    },\n  },\n  arrowInLink: {\n    marginBlockStart: 0,\n  },\n  arrowLink: {\n    flex: 'none',\n    alignItems: 'center',\n    color: 'inherit',\n    display: 'flex',\n  },\n  body: {\n    '--surface-pad-block': '16px',\n    '--surface-pad-inline': '16px',\n    'padding': 16,\n  },\n  card: {\n    '--lobe-surface-bg': cssVar.colorBgContainer,\n    '--lobe-surface-bg-solid': cssVar.colorBgContainer,\n    'borderColor': `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    'borderRadius': cssVar.borderRadiusLG,\n    'borderStyle': 'solid',\n    'borderWidth': 1,\n    'backgroundColor': 'var(--lobe-surface-bg)',\n    'boxShadow': 'rgb(0 0 0 / 4%) 0 1px 2px 0',\n  },\n  cardDark: {\n    '--lobe-surface-bg': cssVar.colorFillQuaternary,\n    '--lobe-surface-bg-solid': `color-mix(in srgb, #fff 2%, var(--lobe-surface-canvas, ${cssVar.colorBgContainer}))`,\n  },\n  cardLinked: {\n    borderColor: {\n      'default': `var(--lobe-fill-border, ${cssVar.colorFill})`,\n      ':focus-within': `var(--lobe-fill-border-strong, ${cssVar.colorFill})`,\n      ':hover': `var(--lobe-fill-border-strong, ${cssVar.colorFill})`,\n    },\n  },\n  cardNested: {\n    backgroundColor: 'transparent',\n  },\n  chart: {\n    minInlineSize: 0,\n  },\n  clip: {\n    overflow: 'clip',\n  },\n  content: {\n    minInlineSize: 0,\n  },\n  desc: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 400,\n    lineHeight: 1.45,\n    marginBlockStart: -4,\n  },\n  /* One fixed control row (32px, the height of a small Segmented or a default ActionIcon), so a\n     header with controls is exactly as tall as one without, and the controls sit centered with\n     8px clear above the divider. */\n  extra: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    blockSize: 32,\n    display: 'flex',\n  },\n  header: {\n    gap: 12,\n    paddingBlock: 8,\n    paddingInline: 16,\n    alignItems: 'flex-start',\n    borderBlockEndColor: `var(--lobe-fill-border, ${cssVar.colorFill})`,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    justifyContent: 'space-between',\n    minBlockSize: 48,\n  },\n  heading: {\n    minInlineSize: 0,\n  },\n  headingLink: {\n    flex: '1',\n    gap: 12,\n    textDecoration: 'none',\n    alignItems: 'flex-start',\n    color: { 'default': 'inherit', ':hover': 'inherit' },\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  loading: {\n    paddingBlockEnd: 8,\n    paddingBlockStart: 4,\n  },\n  title: {\n    overflow: 'hidden',\n    color: cssVar.colorText,\n    fontSize: 14,\n    fontWeight: 500,\n    /* The title line is the 32px control row; extra and the arrow center on it, and a\n       description adds its own line below without moving them. */\n    lineHeight: '32px',\n    minInlineSize: 0,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n\nexport const surfaceClassNames = {\n  bleed: 'lobe-surface-bleed',\n  root: 'lobe-surface',\n  tableBleed: 'lobe-surface-table-bleed',\n};\n\nexport const surfaceStyles = {\n  card: stylex.props(styles.card).className ?? '',\n  clip: stylex.props(styles.clip).className ?? '',\n  tableBleed: surfaceClassNames.tableBleed,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,SAAS;CACpB,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,uBAAuB;EACvB,wBAAwB;EACxB,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,qBAAqB;EACrB,2BAA2B;EAC3B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,qBAAqB;EACrB,2BAA2B;EAC3B,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,oBAAoB;CAC/B,OAAO;CACP,MAAM;CACN,YAAY;AACd;AACA,MAAa,gBAAgB;CAC3B,MAAM,EACJ,WAAW,+EACb,EAAE,aAAa;CACf,MAAM,EACJ,WAAW,UACb,EAAE,aAAa;CACf,YAAY,kBAAkB;AAChC"}

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

@@ -1,7 +1,35 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/Surface/type.d.ts
-export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+export 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>`. */
+export type SurfaceRenderLink = (props: SurfaceLinkProps) => ReactNode;
+export 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
 //# 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. */
+export 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. */
+export declare const TableIconAction: {
+  ({ danger, disabled, icon, label, loading, onClick }: TableIconActionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TableIconActions as default };
+//# 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 "../../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 '@/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,17 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+//#region src/dashboard/TableIconActions/type.d.ts
+export interface TableIconActionsProps {
+  children?: ReactNode;
+}
+export 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
+//# 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

package/es/dashboard/TitleWithTips/TitleWithTips.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { Tooltip } from "../../Tooltip/Tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoIcon } from "lucide-react";
+//#region src/dashboard/TitleWithTips/TitleWithTips.tsx
+/** A column or field title with an info icon that explains it on hover. */
+const TitleWithTips = ({ className, tips, title }) => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	className,
+	gap: 4,
+	children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(Tooltip, {
+		title: tips,
+		children: /* @__PURE__ */ jsx(Icon, {
+			color: cssVar.colorTextTertiary,
+			icon: InfoIcon,
+			style: { cursor: "help" }
+		})
+	})]
+});
+TitleWithTips.displayName = "TitleWithTips";
+//#endregion
+export { TitleWithTips as default };
+
+//# sourceMappingURL=TitleWithTips.mjs.map

package/es/dashboard/TitleWithTips/TitleWithTips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleWithTips.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/TitleWithTips/TitleWithTips.tsx"],"sourcesContent":["'use client';\n\nimport { InfoIcon } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\n\nimport type { TitleWithTipsProps } from './type';\n\n/** A column or field title with an info icon that explains it on hover. */\nconst TitleWithTips = ({ className, tips, title }: TitleWithTipsProps) => (\n  <Flexbox horizontal align={'center'} className={className} gap={4}>\n    <span>{title}</span>\n    <Tooltip title={tips}>\n      <Icon color={cssVar.colorTextTertiary} icon={InfoIcon} style={{ cursor: 'help' }} />\n    </Tooltip>\n  </Flexbox>\n);\n\nTitleWithTips.displayName = 'TitleWithTips';\n\nexport default TitleWithTips;\n"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,EAAE,WAAW,MAAM,YACxC,qBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAqB;CAAW,KAAK;CAAhE,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,oBAAC,MAAD;GAAM,OAAO,OAAO;GAAmB,MAAM;GAAU,OAAO,EAAE,QAAQ,OAAO;EAAI,CAAA;CAC5E,CAAA,CACF;;AAGX,cAAc,cAAc"}

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

@@ -0,0 +1,3 @@
+import { TitleWithTipsProps } from "./type.mjs";
+import TitleWithTips from "./TitleWithTips.mjs";
+export { type TitleWithTipsProps, TitleWithTips as default };

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/dashboard/TitleWithTips/type.d.ts
+export interface TitleWithTipsProps {
+  className?: string;
+  /** Tooltip shown on the info icon. */
+  tips: ReactNode;
+  title: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map