@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/dashboard/StatCard/StatCard.mjs

@@ -1,16 +1,20 @@
 "use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
 import { styles } from "../Surface/style.mjs";
-import { useSurfaceCardClassName } from "../Surface/link.mjs";
+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";
-import { cx } from "antd-style";
 //#region src/dashboard/StatCard/StatCard.tsx
 /** One metric in its own card: the same item as a `split` MetricStrip. */
 function StatCard({ action, chart, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
-	const cardClassName = useSurfaceCardClassName();
+	const cardStyles = useSurfaceCardStyles();
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(styles$1.card, cardClassName, styles.clip, className),
+		...styleProps([
+			styles$1.card,
+			cardStyles,
+			styles.clip
+		], className),
 		children: /* @__PURE__ */ jsx(MetricCell, {
 			renderLink,
 			item: {

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

@@ -1 +1 @@
-{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardClassName } 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  chart,\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 cardClassName = useSurfaceCardClassName();\n\n  return (\n    <div className={cx(metricStyles.card, cardClassName, surfaceStyles.clip, className)}>\n      <MetricCell\n        renderLink={renderLink}\n        item={{\n          action,\n          chart,\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,OACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,SAAa,MAAM,eAAeC,OAAc,MAAM,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,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  chart,\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          chart,\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,OACA,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;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

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

@@ -3,10 +3,10 @@ import "../../Icon/index.mjs";
 import { SurfaceRenderLink } from "../Surface/type.mjs";
 import { ReactNode } from "react";
 //#region src/dashboard/StatCard/type.d.ts
-type StatDirection = 'up' | 'down' | 'flat';
+export type StatDirection = 'up' | 'down' | 'flat';
 /** @deprecated StatCard renders as a MetricStrip item and no longer draws a wash. */
-type StatWash = 'gray';
-interface StatCardProps {
+export type StatWash = 'gray';
+export interface StatCardProps {
   /** Control rendered on the label row, such as a menu. */
   action?: ReactNode;
   /** Full-width chart (sparkline, area) under the delta and hint. */
@@ -35,5 +35,4 @@ interface StatCardProps {
   wash?: StatWash;
 }
 //#endregion
-export { StatCardProps, StatDirection, StatWash };
 //# sourceMappingURL=type.d.mts.map

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

@@ -5,7 +5,7 @@ import { SurfaceProps } from "./type.mjs";
  * `description` or `extra` it gets a header and a padded body that lets a
  * trailing table meet the card edges.
  */
-declare function Surface({ bleed, chart, children, className, description, extra, href, loading, padded, renderLink, title, ...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,10 +1,13 @@
 "use client";
-import Spin from "../../base-ui/Spin/Spin.mjs";
-import Skeleton from "../../base-ui/Skeleton/index.mjs";
-import { styles } from "./style.mjs";
-import { SurfaceDepthContext, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
+import { styleProps } from "../../styles/stylex/props.mjs";
+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 { cx } from "antd-style";
+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;
@@ -13,27 +16,27 @@ const defined = (node) => node !== null && node !== void 0 && node !== false;
 * `description` or `extra` it gets a header and a padded body that lets a
 * trailing table meet the card edges.
 */
-function Surface({ bleed = false, chart, children, className, description, extra, href, loading, padded, renderLink, title, ...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 cardClassName = useSurfaceCardClassName();
+	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", {
-		className: styles.heading,
+		...stylex.props(styles.heading),
 		children: [defined(title) ? /* @__PURE__ */ jsx("div", {
-			className: styles.title,
+			...stylex.props(styles.title),
 			children: title
 		}) : null, defined(description) ? /* @__PURE__ */ jsx("div", {
-			className: styles.desc,
+			...stylex.props(styles.desc),
 			children: description
 		}) : null]
 	});
 	const body = placeholder ? /* @__PURE__ */ jsx("div", {
 		"aria-busy": "true",
-		className: styles.loading,
+		...stylex.props(styles.loading),
 		children: /* @__PURE__ */ jsx(Skeleton, {
 			height: 220,
 			radius: 8
@@ -42,24 +45,28 @@ function Surface({ bleed = false, chart, children, className, description, extra
 	const trailing = refreshing || defined(extra);
 	const arrow = /* @__PURE__ */ jsx(ArrowUpRight, {
 		"aria-hidden": true,
-		"data-surface-arrow": true,
-		className: styles.arrow,
-		size: 16
+		size: 16,
+		...stylex.props(styles.arrow, trailing && styles.arrowInLink)
 	});
 	return /* @__PURE__ */ jsx(SurfaceDepthContext, {
 		value: depth + 1,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cx(cardClassName, styles.content, styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
+			...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", {
-					className: styles.header,
+					...stylex.props(styles.header),
 					children: [href ? link({
 						children: /* @__PURE__ */ jsxs(Fragment, { children: [heading, trailing ? null : arrow] }),
-						className: styles.headingLink,
+						className: stylex.props(styles.headingLink).className,
 						href
 					}) : heading, trailing ? /* @__PURE__ */ jsxs("div", {
-						className: styles.extra,
+						...stylex.props(styles.extra),
 						children: [
 							refreshing ? /* @__PURE__ */ jsx(Spin, {
 								size: "small",
@@ -69,7 +76,7 @@ function Surface({ bleed = false, chart, children, className, description, extra
 							href ? link({
 								"aria-hidden": true,
 								"children": arrow,
-								"className": styles.arrowLink,
+								"className": stylex.props(styles.arrowLink).className,
 								href,
 								"tabIndex": -1
 							}) : null
@@ -77,11 +84,11 @@ function Surface({ bleed = false, chart, children, className, description, extra
 					}) : null]
 				}) : null,
 				pad ? /* @__PURE__ */ jsx("div", {
-					className: cx(styles.body, styles.tableBleed),
+					...styleProps(styles.body, surfaceClassNames.tableBleed),
 					children: body
 				}) : body,
 				defined(chart) ? /* @__PURE__ */ jsx("div", {
-					className: styles.chart,
+					...stylex.props(styles.chart),
 					children: chart
 				}) : null
 			]

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';\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 {\n  SurfaceDepthContext,\n  useSurfaceCardClassName,\n  useSurfaceDepth,\n  useSurfaceLink,\n} 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 cardClassName = useSurfaceCardClassName();\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 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  // With header actions, the arrow sits after them as the rightmost item.\n  const trailing = refreshing || defined(extra);\n  const arrow = <ArrowUpRight aria-hidden data-surface-arrow className={styles.arrow} size={16} />;\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        className={cx(\n          cardClassName,\n          styles.content,\n          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                      {trailing ? null : arrow}\n                    </>\n                  ),\n                  className: styles.headingLink,\n                  href,\n                })\n              : heading}\n            {trailing ? (\n              <div className={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': styles.arrowLink,\n                      href,\n                      'tabIndex': -1,\n                    } as any)\n                  : null}\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":";;;;;;;;;AAkBA,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,gBAAgB,wBAAwB;CAC9C,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;CAErD,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;CAIF,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,QAAQ,oBAAC,cAAD;EAAc,eAAA;EAAY,sBAAA;EAAmB,WAAW,OAAO;EAAO,MAAM;CAAK,CAAA;CAE/F,OACE,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAClC,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,eACA,OAAO,SACP,OAAO,MACP,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,SACA,WAAW,OAAO,KACnB,EAAA,CAAA;MAEJ,WAAW,OAAO;MAClB;KACF,CAAC,IACD,SACH,WACC,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA;OACG,aAAa,oBAAC,MAAD;QAAM,MAAK;QAAQ,SAAQ;OAAW,CAAA,IAAI;OACvD;OACA,OACG,KAAK;QACH,eAAe;QACf,YAAY;QACZ,aAAa,OAAO;QACpB;QACA,YAAY;OACd,CAAQ,IACR;MACD;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"}
+{"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,5 +1,5 @@
 import { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink } from "./type.mjs";
 import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./link.mjs";
-import { styles } from "./style.mjs";
+import { surfaceStyles } from "./style.mjs";
 import Surface from "./Surface.mjs";
-export { type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, Surface as default, styles as surfaceStyles, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };
+export { type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, Surface as default, surfaceStyles, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

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

@@ -1,19 +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). */
-declare const SurfaceLinkProvider: ({ children, renderLink }: {
+export declare const SurfaceLinkProvider: ({ children, renderLink }: {
   children?: ReactNode;
   renderLink: SurfaceRenderLink;
 }) => import("react").JSX.Element;
-declare const useSurfaceLink: (override?: SurfaceRenderLink) => SurfaceRenderLink;
+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. */
-declare const useSurfaceDepth: () => number;
-/**
- * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillQuaternary` in
- * dark, and no fill of its own when nested in another Surface.
- */
-declare const useSurfaceCardClassName: () => string;
+export declare const useSurfaceDepth: () => number;
+/** Class name form of `useSurfaceCardStyles`, for markup that is not styled with StyleX. */
+export declare const useSurfaceCardClassName: () => string;
 //#endregion
-export { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };
 //# sourceMappingURL=link.d.mts.map

package/es/dashboard/Surface/link.mjs

@@ -1,8 +1,9 @@
 "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 { cx, useThemeMode } from "antd-style";
+import * as stylex from "@stylexjs/stylex";
 //#region src/dashboard/Surface/link.tsx
 const defaultRenderLink = ({ children, ...rest }) => /* @__PURE__ */ jsx("a", {
 	...rest,
@@ -19,15 +20,21 @@ 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);
 /**
-* Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillQuaternary` in
-* dark, and no fill of its own when nested in another Surface.
+* 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 useSurfaceCardClassName = () => {
+const useSurfaceCardStyles = () => {
 	const { isDarkMode } = useThemeMode();
 	const depth = useSurfaceDepth();
-	return cx(styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested);
+	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, useSurfaceDepth, useSurfaceLink };
+export { SurfaceDepthContext, SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceCardStyles, useSurfaceDepth, useSurfaceLink };
 
 //# sourceMappingURL=link.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"link.mjs","names":[],"sources":["../../../src/dashboard/Surface/link.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { createContext, type ReactNode, use } from 'react';\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 * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillQuaternary` in\n * dark, and no fill of its own when nested in another Surface.\n */\nexport const useSurfaceCardClassName = () => {\n  const { isDarkMode } = useThemeMode();\n  const depth = useSurfaceDepth();\n  return cx(styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested);\n};\n"],"mappings":";;;;;;AAQA,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;;;;;AAQ5D,MAAa,gCAAgC;CAC3C,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,QAAQ,gBAAgB;CAC9B,OAAO,GAAG,OAAO,MAAM,cAAc,OAAO,UAAU,QAAQ,KAAK,OAAO,UAAU;AACtF"}
+{"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

@@ -1,63 +1,9 @@
+import "@stylexjs/stylex";
 //#region src/dashboard/Surface/style.d.ts
-/**
- * A content card sitting on the workspace.
- *
- * 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) all use
- * `--lobe-fill-border` (`colorFill` in light, `colorFillSecondary` in dark; set on `:root` by
- * ThemeProvider). Hover / focus / stronger edges use `--lobe-fill-border-strong` (light:
- * `colorFill` mixed 15% toward `colorText`; dark: `colorFill`). Light is Block `outlined`
- * (`colorBgContainer` + border); dark uses translucent `colorFillQuaternary` with the same
- * border var.
- *
- * Anything that must hide content scrolled beneath it (table header cells, pinned and sticky
- * cells, their scroll shadows) 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 `useSurfaceCardClassName()`; plain `surfaceStyles.card` is the light look.
- */
-declare const styles: {
+export declare const surfaceStyles: {
   card: string;
-  cardDark: string;
-  cardNested: string;
-  chart: string;
-  /**
-   * Rounded corners clip whatever reaches the edge: a bled table, header rule, chart, or a
-   * tab / segmented indicator. \`clip\` (not \`hidden\`) creates no scroll container, so sticky
-   * table headers keep sticking to the page scroller; popups are portaled and unaffected.
-   */
   clip: string;
-  loading: string;
-  arrow: string;
-  arrowLink: 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 };
 //# sourceMappingURL=style.d.mts.map