@lobehub/ui 6.0.0-beta.5 → 6.0.0-beta.7

package/es/dashboard/Section/Section.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronRight } from "lucide-react";
+//#region src/dashboard/Section/Section.tsx
+/** A titled page section with description, extra and a "more" link, flat or as a card. */
+const Section = ({ className, variant = "default", fontSize, title, more, moreLink, icon, children, desc, extra, gap, padded, renderLink, ...rest }) => {
+	const link = useSurfaceLink(renderLink);
+	const moreNode = moreLink ? link({
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: more }), /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })] }),
+		className: stylex.props(styles.more).className,
+		href: moreLink,
+		rel: moreLink.startsWith("http") ? "noreferrer" : void 0,
+		target: moreLink.startsWith("http") ? "_blank" : void 0
+	}) : null;
+	const actions = extra || moreNode ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		gap: 8,
+		children: [extra, moreNode]
+	}) : void 0;
+	if (variant === "card") return /* @__PURE__ */ jsx(Surface, {
+		description: desc,
+		extra: actions,
+		padded: padded ?? true,
+		title: title ? /* @__PURE__ */ jsxs("span", {
+			...styleProps(styles.title, void 0, fontSize ? { fontSize } : void 0),
+			children: [icon, title]
+		}) : void 0,
+		children: /* @__PURE__ */ jsx(FlexBasic_default, {
+			className,
+			gap: gap ?? 12,
+			...rest,
+			children
+		})
+	});
+	if (!title) return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className,
+		gap,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className,
+		gap: gap ?? 16,
+		width: "100%",
+		...rest,
+		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			gap: 12,
+			justify: "space-between",
+			width: "100%",
+			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+				gap: 4,
+				children: [
+					icon,
+					/* @__PURE__ */ jsx("h2", {
+						...styleProps(styles.title, void 0, fontSize ? { fontSize } : void 0),
+						children: title
+					}),
+					desc ? /* @__PURE__ */ jsx("div", {
+						...stylex.props(styles.desc),
+						children: desc
+					}) : null
+				]
+			}), actions ?? null]
+		}), children]
+	});
+};
+Section.displayName = "Section";
+//#endregion
+export { Section as default };
+
+//# sourceMappingURL=Section.mjs.map

package/es/dashboard/Section/Section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/Section/Section.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronRight } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { SectionProps } from './type';\n\n/** A titled page section with description, extra and a \"more\" link, flat or as a card. */\nconst Section = ({\n  className,\n  variant = 'default',\n  fontSize,\n  title,\n  more,\n  moreLink,\n  icon,\n  children,\n  desc,\n  extra,\n  gap,\n  padded,\n  renderLink,\n  ...rest\n}: SectionProps) => {\n  const link = useSurfaceLink(renderLink);\n  const moreNode = moreLink\n    ? link({\n        children: (\n          <>\n            <span>{more}</span>\n            <Icon icon={ChevronRight} />\n          </>\n        ),\n        className: stylex.props(styles.more).className,\n        href: moreLink,\n        rel: moreLink.startsWith('http') ? 'noreferrer' : undefined,\n        target: moreLink.startsWith('http') ? '_blank' : undefined,\n      })\n    : null;\n  const actions =\n    extra || moreNode ? (\n      <Flexbox horizontal align=\"center\" gap={8}>\n        {extra}\n        {moreNode}\n      </Flexbox>\n    ) : undefined;\n\n  if (variant === 'card') {\n    return (\n      <Surface\n        description={desc}\n        extra={actions}\n        padded={padded ?? true}\n        title={\n          title ? (\n            <span {...styleProps(styles.title, undefined, fontSize ? { fontSize } : undefined)}>\n              {icon}\n              {title}\n            </span>\n          ) : undefined\n        }\n      >\n        <Flexbox className={className} gap={gap ?? 12} {...rest}>\n          {children}\n        </Flexbox>\n      </Surface>\n    );\n  }\n\n  if (!title) {\n    return (\n      <Flexbox className={className} gap={gap} {...rest}>\n        {children}\n      </Flexbox>\n    );\n  }\n\n  return (\n    <Flexbox className={className} gap={gap ?? 16} width=\"100%\" {...rest}>\n      <Flexbox horizontal align=\"center\" gap={12} justify=\"space-between\" width=\"100%\">\n        <Flexbox gap={4}>\n          {icon}\n          <h2 {...styleProps(styles.title, undefined, fontSize ? { fontSize } : undefined)}>\n            {title}\n          </h2>\n          {desc ? <div {...stylex.props(styles.desc)}>{desc}</div> : null}\n        </Flexbox>\n        {actions ?? null}\n      </Flexbox>\n      {children}\n    </Flexbox>\n  );\n};\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,WAAW,EACf,WACA,UAAU,WACV,UACA,OACA,MACA,UACA,MACA,UACA,MACA,OACA,KACA,QACA,YACA,GAAG,WACe;CAClB,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,WAAW,WAAW,KAAK;EAC/B,UAAU,qBAAA,UAAA,EAAA,UAAA,CACF,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GAClB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA,CAC3B,EAAA,CAAA;EACR,WAAW,OAAO,MAAM,OAAO,IAAI,CAAC,CAAC;EACrC,MAAM;EACN,KAAK,SAAS,WAAW,MAAM,IAAI,eAAe,KAAA;EAClD,QAAQ,SAAS,WAAW,MAAM,IAAI,WAAW,KAAA;CACnD,CAAC,IAAI;CACL,MAAM,UAAU,SAAS,WAAW,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAM;EAAS,KAAK;EAAxC,UAAA,CAC7B,OACA,QACM;CAAI,CAAA,IAAA,KAAA;CACjB,IAAI,YAAY,QACd,OAAO,oBAAC,SAAD;EAAS,aAAa;EAAM,OAAO;EAAS,QAAQ,UAAU;EAAM,OAAO,QAAQ,qBAAC,QAAD;GAAM,GAAI,WAAW,OAAO,OAAO,KAAA,GAAW,WAAW,EACjJ,SACF,IAAI,KAAA,CAAS;GAF6E,UAAA,CAG/E,MACA,KACG;EAAI,CAAA,IAAA,KAAA;EACd,UAAA,oBAACA,mBAAD;GAAoB;GAAW,KAAK,OAAO;GAAI,GAAI;GAChD;EACM,CAAA;CACF,CAAA;CAEb,IAAI,CAAC,OACH,OAAO,oBAACA,mBAAD;EAAoB;EAAgB;EAAK,GAAI;EAC/C;CACM,CAAA;CAEb,OAAO,qBAACA,mBAAD;EAAoB;EAAW,KAAK,OAAO;EAAI,OAAM;EAAO,GAAI;EAAhE,UAAA,CACH,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAM;GAAS,KAAK;GAAI,SAAQ;GAAgB,OAAM;GAA1E,UAAA,CACE,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACG;KACD,oBAAC,MAAD;MAAI,GAAI,WAAW,OAAO,OAAO,KAAA,GAAW,WAAW,EACvD,SACF,IAAI,KAAA,CAAS;MACR,UAAA;KACC,CAAA;KACH,OAAO,oBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,OAAO,IAAI;MAAI,UAAA;KAAU,CAAA,IAAI;IACpD;GACR,CAAA,GAAA,WAAW,IACL;EACR,CAAA,GAAA,QACM;;AACb;AACA,QAAQ,cAAc"}

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

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

package/es/dashboard/Section/style.mjs

@@ -0,0 +1,31 @@
+//#region src/dashboard/Section/style.ts
+const styles = {
+	desc: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbo1l8bm",
+		kLWn49: "lbfrs9s4",
+		$$css: true
+	},
+	more: {
+		kOIVth: "lb195vfkc",
+		kybGjl: "lb1hl2dhg",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8 lb1bxu9lh",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lb4z9k3i",
+		$$css: true
+	},
+	title: {
+		kogj98: "lb1ghz6dp",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1jvydc1",
+		k63SB2: "lb1s688f",
+		kLWn49: "lb37zpob",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Section/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  desc: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 400,\n    lineHeight: 1.45,\n  },\n  more: {\n    gap: 2,\n    textDecoration: 'none',\n    alignItems: 'center',\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    display: 'inline-flex',\n    fontSize: 13,\n  },\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 15,\n    fontWeight: 600,\n    lineHeight: 1.4,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,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;AACF"}

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

@@ -0,0 +1,23 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/Section/type.d.ts
+export interface SectionProps extends Omit<FlexboxProps, 'title'> {
+  desc?: ReactNode;
+  extra?: ReactNode;
+  fontSize?: number;
+  icon?: ReactNode;
+  /** Text of the "more" link. */
+  more?: ReactNode;
+  /** Target of the "more" link. An `http` URL opens in a new tab. */
+  moreLink?: string;
+  /** Card body padding (`variant="card"`). Turn off when the children already sit on the card edge. */
+  padded?: boolean;
+  renderLink?: SurfaceRenderLink;
+  title?: ReactNode;
+  /** `default` is a titled page section; `card` wraps it in a Surface. */
+  variant?: 'default' | 'card';
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/StatCard/StatCard.d.mts

@@ -1,6 +1,7 @@
 import { StatCardProps } from "./type.mjs";
 //#region src/dashboard/StatCard/StatCard.d.ts
-declare function StatCard({ action, delta, direction, hint, label, mark, prominent, value, wash }: StatCardProps): import("react").JSX.Element;
+/** One metric in its own card: the same item as a `split` MetricStrip. */
+declare function StatCard({ action, className, delta, direction, hint, href, label, loading, mark, onClick, renderLink, value, valueTone }: StatCardProps): import("react").JSX.Element;
 declare namespace StatCard {
   var displayName: string;
 }

package/es/dashboard/StatCard/StatCard.mjs

@@ -1,98 +1,35 @@
 "use client";
-import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
-import Icon from "../../Icon/Icon.mjs";
-import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import Text from "../../Text/Text.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as stylex from "@stylexjs/stylex";
-import { Minus, TrendingDown, TrendingUp } from "lucide-react";
+import { useSurfaceCardStyles } from "../Surface/link.mjs";
+import { styles as styles$1 } from "../MetricStrip/style.mjs";
+import MetricCell from "../MetricStrip/MetricCell.mjs";
+import { jsx } from "react/jsx-runtime";
 //#region src/dashboard/StatCard/StatCard.tsx
-const deltaIcon = {
-	down: TrendingDown,
-	flat: Minus,
-	up: TrendingUp
-};
-const deltaStyles = {
-	down: styles$1.deltaDown,
-	flat: styles$1.deltaFlat,
-	up: styles$1.deltaUp
-};
-const textStyles = {
-	hint: {
-		color: cssVar.colorTextTertiary,
-		fontSize: cssVar.fontSizeSM
-	},
-	label: {
-		color: cssVar.colorTextSecondary,
-		fontSize: cssVar.fontSizeSM
-	},
-	metricHint: {
-		color: cssVar.colorText,
-		fontSize: cssVar.fontSize
-	},
-	metricLabel: {
-		color: cssVar.colorText,
-		fontSize: cssVar.fontSize,
-		fontWeight: 500
-	}
-};
-function StatCard({ action, delta, direction = "flat", hint, label, mark, prominent = false, value, wash }) {
+/** One metric in its own card: the same item as a `split` MetricStrip. */
+function StatCard({ action, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
+	const cardStyles = useSurfaceCardStyles();
 	return /* @__PURE__ */ jsx("div", {
-		...stylex.props(styles$1.lift),
-		children: /* @__PURE__ */ jsx(FlexBasic_default, {
-			...stylex.props(styles$1.root, styles.card, wash && [styles$1.wash, styles$1[wash]], styles$1.frame),
-			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
-				gap: prominent ? 0 : 8,
-				...stylex.props(styles$1.body),
-				children: [
-					/* @__PURE__ */ jsxs(FlexBasic_default, {
-						horizontal: true,
-						align: "center",
-						justify: "space-between",
-						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
-							horizontal: true,
-							align: "center",
-							gap: 6,
-							...stylex.props(styles$1.copy),
-							children: [/* @__PURE__ */ jsx(Text, {
-								ellipsis: true,
-								style: prominent ? textStyles.metricLabel : textStyles.label,
-								children: label
-							}), action]
-						}), mark ? /* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
-							...stylex.props(styles$1.badge),
-							children: /* @__PURE__ */ jsx(Icon, {
-								icon: mark,
-								size: 14
-							})
-						}) : null]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						...stylex.props(prominent ? styles$1.metricValue : styles$1.value),
-						children: value
-					}),
-					delta || hint ? /* @__PURE__ */ jsxs(FlexBasic_default, {
-						horizontal: true,
-						align: "center",
-						gap: 8,
-						wrap: "wrap",
-						...stylex.props(prominent && styles$1.metricFoot),
-						children: [delta ? /* @__PURE__ */ jsxs("span", {
-							...stylex.props(styles$1.delta, deltaStyles[direction]),
-							children: [/* @__PURE__ */ jsx(Icon, {
-								icon: deltaIcon[direction],
-								size: 14
-							}), delta]
-						}) : null, hint ? /* @__PURE__ */ jsx(Text, {
-							style: prominent ? textStyles.metricHint : textStyles.hint,
-							children: hint
-						}) : null]
-					}) : null
-				]
-			})
+		...styleProps([
+			styles$1.card,
+			cardStyles,
+			styles.clip
+		], className),
+		children: /* @__PURE__ */ jsx(MetricCell, {
+			renderLink,
+			item: {
+				action,
+				delta,
+				direction,
+				hint,
+				href,
+				label,
+				loading,
+				mark,
+				onClick,
+				value,
+				valueTone
+			}
 		})
 	});
 }

package/es/dashboard/StatCard/StatCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatCard.mjs","names":["styles","Flexbox","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Minus, TrendingDown, TrendingUp } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Text from '@/Text';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { StatCardProps, StatDirection } from './type';\n\nconst deltaIcon = {\n  down: TrendingDown,\n  flat: Minus,\n  up: TrendingUp,\n} satisfies Record<StatDirection, typeof Minus>;\n\nconst deltaStyles = {\n  down: styles.deltaDown,\n  flat: styles.deltaFlat,\n  up: styles.deltaUp,\n};\n\nconst textStyles = {\n  hint: { color: cssVar.colorTextTertiary, fontSize: cssVar.fontSizeSM },\n  label: { color: cssVar.colorTextSecondary, fontSize: cssVar.fontSizeSM },\n  metricHint: { color: cssVar.colorText, fontSize: cssVar.fontSize },\n  metricLabel: { color: cssVar.colorText, fontSize: cssVar.fontSize, fontWeight: 500 },\n};\n\nfunction StatCard({\n  action,\n  delta,\n  direction = 'flat',\n  hint,\n  label,\n  mark,\n  prominent = false,\n  value,\n  wash,\n}: StatCardProps) {\n  return (\n    <div {...stylex.props(styles.lift)}>\n      <Flexbox\n        {...stylex.props(\n          styles.root,\n          surfaceStyles.card,\n          wash && [styles.wash, styles[wash]],\n          styles.frame,\n        )}\n      >\n        <Flexbox gap={prominent ? 0 : 8} {...stylex.props(styles.body)}>\n          <Flexbox horizontal align=\"center\" justify=\"space-between\">\n            <Flexbox horizontal align=\"center\" gap={6} {...stylex.props(styles.copy)}>\n              <Text ellipsis style={prominent ? textStyles.metricLabel : textStyles.label}>\n                {label}\n              </Text>\n              {action}\n            </Flexbox>\n            {mark ? (\n              <span aria-hidden {...stylex.props(styles.badge)}>\n                <Icon icon={mark} size={14} />\n              </span>\n            ) : null}\n          </Flexbox>\n          <div {...stylex.props(prominent ? styles.metricValue : styles.value)}>{value}</div>\n          {delta || hint ? (\n            <Flexbox\n              horizontal\n              align=\"center\"\n              gap={8}\n              wrap=\"wrap\"\n              {...stylex.props(prominent && styles.metricFoot)}\n            >\n              {delta ? (\n                <span {...stylex.props(styles.delta, deltaStyles[direction])}>\n                  <Icon icon={deltaIcon[direction]} size={14} />\n                  {delta}\n                </span>\n              ) : null}\n              {hint ? (\n                <Text style={prominent ? textStyles.metricHint : textStyles.hint}>{hint}</Text>\n              ) : null}\n            </Flexbox>\n          ) : null}\n        </Flexbox>\n      </Flexbox>\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAY;CAChB,MAAM;CACN,MAAM;CACN,IAAI;AACN;AACA,MAAM,cAAc;CAClB,MAAMA,SAAO;CACb,MAAMA,SAAO;CACb,IAAIA,SAAO;AACb;AACA,MAAM,aAAa;CACjB,MAAM;EACJ,OAAO,OAAO;EACd,UAAU,OAAO;CACnB;CACA,OAAO;EACL,OAAO,OAAO;EACd,UAAU,OAAO;CACnB;CACA,YAAY;EACV,OAAO,OAAO;EACd,UAAU,OAAO;CACnB;CACA,aAAa;EACX,OAAO,OAAO;EACd,UAAU,OAAO;EACjB,YAAY;CACd;AACF;AACA,SAAS,SAAS,EAChB,QACA,OACA,YAAY,QACZ,MACA,OACA,MACA,YAAY,OACZ,OACA,QACgB;CAChB,OAAO,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAMA,SAAO,IAAI;EACpC,UAAA,oBAACC,mBAAD;GAAS,GAAI,OAAO,MAAMD,SAAO,MAAME,OAAc,MAAM,QAAQ,CAACF,SAAO,MAAMA,SAAO,KAAK,GAAGA,SAAO,KAAK;GAC1G,UAAA,qBAACC,mBAAD;IAAS,KAAK,YAAY,IAAI;IAAG,GAAI,OAAO,MAAMD,SAAO,IAAI;IAA7D,UAAA;KACE,qBAACC,mBAAD;MAAS,YAAA;MAAW,OAAM;MAAS,SAAQ;MAA3C,UAAA,CACE,qBAACA,mBAAD;OAAS,YAAA;OAAW,OAAM;OAAS,KAAK;OAAG,GAAI,OAAO,MAAMD,SAAO,IAAI;OAAvE,UAAA,CACE,oBAAC,MAAD;QAAM,UAAA;QAAS,OAAO,YAAY,WAAW,cAAc,WAAW;QACnE,UAAA;OACG,CAAA,GACL,MACM;MACR,CAAA,GAAA,OAAO,oBAAC,QAAD;OAAM,eAAA;OAAY,GAAI,OAAO,MAAMA,SAAO,KAAK;OACnD,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAM,MAAM;OAAK,CAAA;MACzB,CAAA,IAAI,IACL;;KACT,oBAAC,OAAD;MAAK,GAAI,OAAO,MAAM,YAAYA,SAAO,cAAcA,SAAO,KAAK;MAAI,UAAA;KAAW,CAAA;KACjF,SAAS,OAAO,qBAACC,mBAAD;MAAS,YAAA;MAAW,OAAM;MAAS,KAAK;MAAG,MAAK;MAAO,GAAI,OAAO,MAAM,aAAaD,SAAO,UAAU;MAAtG,UAAA,CACZ,QAAQ,qBAAC,QAAD;OAAM,GAAI,OAAO,MAAMA,SAAO,OAAO,YAAY,UAAU;OAA3D,UAAA,CACL,oBAAC,MAAD;QAAM,MAAM,UAAU;QAAY,MAAM;OAAK,CAAA,GAC5C,KACG;MAAI,CAAA,IAAA,MACX,OAAO,oBAAC,MAAD;OAAM,OAAO,YAAY,WAAW,aAAa,WAAW;OAAO,UAAA;MAAW,CAAA,IAAI,IACnF;KAAI,CAAA,IAAA;IACR;;EACF,CAAA;CACN,CAAA;AACT;AACA,SAAS,cAAc"}
+{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardStyles } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport type { StatCardProps } from './type';\n\n/** One metric in its own card: the same item as a `split` MetricStrip. */\nfunction StatCard({\n  action,\n  className,\n  delta,\n  direction = 'flat',\n  hint,\n  href,\n  label,\n  loading,\n  mark,\n  onClick,\n  renderLink,\n  value,\n  valueTone,\n}: StatCardProps) {\n  const cardStyles = useSurfaceCardStyles();\n\n  return (\n    <div {...styleProps([metricStyles.card, cardStyles, surfaceStyles.clip], className)}>\n      <MetricCell\n        renderLink={renderLink}\n        item={{\n          action,\n          delta,\n          direction,\n          hint,\n          href,\n          label,\n          loading,\n          mark,\n          onClick,\n          value,\n          valueTone,\n        }}\n      />\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,EAChB,QACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,aAAa,qBAAqB;CAExC,OACE,oBAAC,OAAD;EAAK,GAAI,WAAW;GAACA,SAAa;GAAM;GAAYC,OAAc;EAAI,GAAG,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

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

@@ -1,24 +1,35 @@
 import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
+import { SurfaceRenderLink } from "../Surface/type.mjs";
 import { ReactNode } from "react";
 //#region src/dashboard/StatCard/type.d.ts
 export type StatDirection = 'up' | 'down' | 'flat';
-/** Top-to-bottom gray wash. Decorative color fields stay in the app. */
+/** @deprecated StatCard renders as a MetricStrip item and no longer draws a wash. */
 export type StatWash = 'gray';
 export interface StatCardProps {
   /** Control rendered on the label row, such as a menu. */
   action?: ReactNode;
+  className?: string;
   /** Change amount, colored by `direction`. */
-  delta?: string;
+  delta?: ReactNode;
   direction?: StatDirection;
-  /** Line under the figure. */
-  hint?: string;
+  /** Line after the delta. */
+  hint?: ReactNode;
+  /** Makes the card a link (through `renderLink` / `SurfaceLinkProvider`). */
+  href?: string;
   label: ReactNode;
+  /** Value placeholder while loading; the label stays. */
+  loading?: boolean;
   /** Corner glyph. Hidden from assistive tech so it does not repeat the label. */
   mark?: IconProps['icon'];
-  /** Overview scale: label, then a large figure, then the note. */
+  onClick?: () => void;
+  /** @deprecated Ignored. StatCard always uses the MetricStrip item scale. */
   prominent?: boolean;
+  renderLink?: SurfaceRenderLink;
   value: ReactNode;
+  /** Color the figure when the number itself is the thing to act on. */
+  valueTone?: 'danger' | 'warning';
+  /** @deprecated Ignored. StatCard renders as a MetricStrip item without a wash. */
   wash?: StatWash;
 }
 //#endregion

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

@@ -1,10 +1,11 @@
 import { SurfaceProps } from "./type.mjs";
 //#region src/dashboard/Surface/Surface.d.ts
 /**
- * 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.
  */
-declare function Surface({ className, style, ...rest }: SurfaceProps): import("react").JSX.Element;
+declare function Surface({ bleed, chart, children, className, description, extra, href, loading, padded, renderLink, style, title, ...rest }: SurfaceProps): import("react").JSX.Element;
 declare namespace Surface {
   var displayName: string;
 }

package/es/dashboard/Surface/Surface.mjs

@@ -1,16 +1,99 @@
 "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 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 clip = hasHeader || bleed || pad || defined(chart);
+	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,
+				clip && styles.clip,
+				Boolean(href) && [styles.cardLinked, surfaceMarker]
+			], clsx(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":[],"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  const clip = hasHeader || bleed || pad || defined(chart);\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            clip && 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,OAAO,aAAa,SAAS,OAAO,QAAQ,KAAK;CACvD,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,QAAQ,OAAO;IAAM,QAAQ,IAAI,KAAK,CAAC,OAAO,YAAY,aAAa;GAAC,GAAG,KAAK,kBAAkB,MAAM,SAAS,kBAAkB,OAAO,SAAS,GAAG,KAAK;GAAG,GAAI;GAAnN,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
+* `colorFillTertiary` 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 * `colorFillTertiary` 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