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

package/es/dashboard/MetricStrip/style.mjs

@@ -0,0 +1,156 @@
+//#region src/dashboard/MetricStrip/style.ts
+const styles = {
+	card: {
+		k1xSpc: "lbrvj5dj",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	cell: {
+		kOIVth: "lb17d4w8g",
+		k8WAf4: "lb1xn8qrt",
+		kg3NbH: "lb17qtykl",
+		kWkggS: "lbjbqb8w",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	cellSeam: {
+		kGVxlE: "lb4uk749",
+		$$css: true
+	},
+	delta: {
+		kGuDYH: "lb4z9k3i",
+		kcqcaj: "lbss6m8b",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	deltaDown: {
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	deltaFlat: {
+		kMwMTN: "lbc77et8",
+		$$css: true
+	},
+	deltaUp: {
+		kMwMTN: "lbs9y9h1",
+		$$css: true
+	},
+	foot: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb1pha0wt",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		$$css: true
+	},
+	frame: {
+		"--metric-seam": "lbgo1hwp",
+		kaIpWk: "lb1pjcqnp",
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lbjbqb8w",
+		$$css: true
+	},
+	grid: {
+		kWkggS: "lbjbqb8w",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lb1rfa8br",
+		kzqmXN: "lbjl7whj",
+		k1K539: "lb1jyxor1",
+		$$css: true
+	},
+	head: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		kZKoxP: "lb10w6t97",
+		kB7OPa: "lb9f619",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lb1qughib",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	headCopy: {
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	hint: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	link: {
+		kybGjl: "lb1hl2dhg",
+		kWkggS: "lbjbqb8w lbql1cz1",
+		kMwMTN: "lb1heor9g",
+		$$css: true
+	},
+	mark: {
+		kVAM5u: "lb6d5vuu",
+		kaIpWk: "lb1vihcfj",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kUk6DE: "lb1okw0bk",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbaljia1",
+		kZKoxP: "lbxk0z11",
+		kMwMTN: "lb53gy9q",
+		k1xSpc: "lb3nfvp2",
+		kzqmXN: "lbvy4d1p",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	press: {
+		kVVagm: "lbln7xf2",
+		ksu8eU: "lbng3xce",
+		kWkggS: "lbjbqb8w lbql1cz1",
+		kMwMTN: "lb1heor9g",
+		kkrTdU: "lb1ypdohk",
+		k9WMMc: "lb1yc453h",
+		$$css: true
+	},
+	slot: {
+		k1xSpc: "lbrvj5dj",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	split: {
+		kOIVth: "lb1v2ro7d",
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lb1rfa8br",
+		$$css: true
+	},
+	value: {
+		kVQacm: "lbb3r6kr",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb4zirph",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lb1s688f",
+		kLWn49: "lb1uo3zyz",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	valueDanger: {
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	valueWarning: {
+		kMwMTN: "lbgyvj36",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  /** Split strip and StatCard: one card per item. */\n  card: {\n    display: 'grid',\n    minInlineSize: 0,\n  },\n  cell: {\n    gap: 6,\n    paddingBlock: 16,\n    paddingInline: 20,\n    backgroundColor: 'transparent',\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n  },\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: {\n    boxShadow: 'inset -1px 0 0 var(--metric-seam), inset 0 -1px 0 var(--metric-seam)',\n  },\n  delta: {\n    fontSize: 13,\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: 1.4,\n  },\n  deltaDown: {\n    color: cssVar.colorError,\n  },\n  deltaFlat: {\n    color: cssVar.colorTextSecondary,\n  },\n  deltaUp: {\n    color: cssVar.colorSuccess,\n  },\n  foot: {\n    gap: 8,\n    alignItems: 'baseline',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: {\n    '--metric-seam': cssVar.colorFillSecondary,\n    'borderRadius': 'inherit',\n    'overflow': 'hidden',\n    'backgroundColor': 'transparent',\n  },\n  grid: {\n    backgroundColor: 'transparent',\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n    inlineSize: 'calc(100% + 1px)',\n    marginBlockEnd: -1,\n  },\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must\n     not push the value down, so cells with and without header controls line up across a split\n     strip or a row of StatCards. */\n  head: {\n    gap: 8,\n    alignItems: 'center',\n    blockSize: 32,\n    boxSizing: 'border-box',\n    display: 'flex',\n    justifyContent: 'space-between',\n    minInlineSize: 0,\n  },\n  headCopy: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    minInlineSize: 0,\n  },\n  hint: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    lineHeight: 1.4,\n  },\n  label: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 500,\n    lineHeight: 1.4,\n  },\n  link: {\n    textDecoration: 'none',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillQuaternary },\n    color: 'inherit',\n  },\n  mark: {\n    borderColor: cssVar.colorFillSecondary,\n    borderRadius: cssVar.borderRadiusSM,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: cssVar.colorFillTertiary,\n    blockSize: 24,\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n    inlineSize: 24,\n    justifyContent: 'center',\n  },\n  press: {\n    font: 'inherit',\n    borderStyle: 'none',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillQuaternary },\n    color: 'inherit',\n    cursor: 'pointer',\n    textAlign: 'start',\n  },\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: {\n    display: 'grid',\n    minInlineSize: 0,\n  },\n  split: {\n    gap: 12,\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n  },\n  value: {\n    overflow: 'hidden',\n    color: cssVar.colorText,\n    fontSize: cssVar.fontSizeHeading3,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    lineHeight: 1.15,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  valueDanger: {\n    color: cssVar.colorError,\n  },\n  valueWarning: {\n    color: cssVar.colorWarning,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,iBAAiB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,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,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,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,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,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;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,36 @@
+import { IconProps } from "../../Icon/type.mjs";
+import "../../Icon/index.mjs";
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/MetricStrip/type.d.ts
+export interface MetricItem {
+  /** Control on the label row, such as a menu. */
+  action?: ReactNode;
+  delta?: ReactNode;
+  direction?: 'up' | 'down' | 'flat';
+  hint?: ReactNode;
+  href?: string;
+  label: ReactNode;
+  /** This cell only. Cells fed by different queries arrive at different times. */
+  loading?: boolean;
+  /** Corner glyph. Hidden from assistive tech so it does not repeat the label. */
+  mark?: IconProps['icon'];
+  onClick?: () => void;
+  value: ReactNode;
+  /** Color the figure when the number itself is the thing to act on. */
+  valueTone?: 'danger' | 'warning';
+}
+export interface MetricStripProps {
+  items: MetricItem[];
+  /** First load only: values become placeholders, labels stay. */
+  loading?: boolean;
+  renderLink?: SurfaceRenderLink;
+  /**
+   * `joined`: one card divided into cells. `split`: every item is its own card (the StatCard look)
+   * on a responsive grid with a gap.
+   * @default 'joined'
+   */
+  variant?: 'joined' | 'split';
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageSkeleton/PageSkeleton.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
 import Skeleton from "../../Skeleton/index.mjs";
-import { styles } from "../Surface/style.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { useSurfaceCardStyles } from "../Surface/link.mjs";
+import { styles } from "./style.mjs";
 import { createElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
@@ -24,7 +24,7 @@ const lineWidths = [
 function LoadingAnnouncer({ label }) {
 	return /* @__PURE__ */ jsx("output", {
 		"aria-live": "polite",
-		...stylex.props(styles$1.srOnly),
+		...stylex.props(styles.srOnly),
 		children: label
 	});
 }
@@ -32,24 +32,25 @@ LoadingAnnouncer.displayName = "LoadingAnnouncer";
 function PageHeaderSkeleton({ action = true }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		...stylex.props(styles$1.header),
+		...stylex.props(styles.header),
 		children: [/* @__PURE__ */ jsxs("div", {
-			...stylex.props(styles$1.headerCopy),
+			...stylex.props(styles.headerCopy),
 			children: [/* @__PURE__ */ jsx(Skeleton, {
-				className: stylex.props(styles$1.title).className,
+				className: stylex.props(styles.title).className,
 				style: bone
 			}), /* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				width: "46%"
 			})]
 		}), action ? /* @__PURE__ */ jsx(Skeleton, {
-			className: stylex.props(styles$1.action).className,
+			className: stylex.props(styles.action).className,
 			style: bone
 		}) : null]
 	});
 }
 PageHeaderSkeleton.displayName = "PageHeaderSkeleton";
 function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
+	const cardStyles = useSurfaceCardStyles();
 	const head = [
 		96,
 		72,
@@ -58,18 +59,18 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 	];
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		...stylex.props(styles$1.table, framed && styles.card),
+		...stylex.props(styles.table, framed && cardStyles),
 		children: [/* @__PURE__ */ jsx("div", {
-			...stylex.props(styles$1.thead),
+			...stylex.props(styles.thead),
 			children: head.map((width, index) => /* @__PURE__ */ jsx(Skeleton, {
-				className: stylex.props(styles$1.theadCell).className,
+				className: stylex.props(styles.theadCell).className,
 				style: {
 					...bone,
 					width
 				}
 			}, index))
 		}), Array.from({ length: rows }, (_, index) => /* @__PURE__ */ createElement("div", {
-			...stylex.props(styles$1.row),
+			...stylex.props(styles.row),
 			key: index
 		}, leading === "avatar" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
 			shape: "circle",
@@ -78,33 +79,34 @@ function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
 			shape: "square",
 			size: 24
 		}) : null, /* @__PURE__ */ jsx("div", {
-			...stylex.props(styles$1.copy),
+			...stylex.props(styles.copy),
 			children: /* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				rows: 2,
 				width: [...lineWidths[index % lineWidths.length]]
 			})
 		}), /* @__PURE__ */ jsx(Skeleton, {
-			className: stylex.props(styles$1.tag).className,
+			className: stylex.props(styles.tag).className,
 			style: tagBone
 		}), /* @__PURE__ */ jsx(Skeleton, {
-			className: stylex.props(styles$1.cell).className,
+			className: stylex.props(styles.cell).className,
 			style: bone
 		})))]
 	});
 }
 TableSkeleton.displayName = "TableSkeleton";
 function StatCardSkeleton() {
+	const cardStyles = useSurfaceCardStyles();
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-hidden": true,
-		...stylex.props(styles$1.stat, styles.card),
+		...stylex.props(styles.stat, cardStyles),
 		children: [
 			/* @__PURE__ */ jsx(Skeleton.Text, {
 				fontSize: 14,
 				width: 72
 			}),
 			/* @__PURE__ */ jsx(Skeleton, {
-				className: stylex.props(styles$1.statValue).className,
+				className: stylex.props(styles.statValue).className,
 				style: bone
 			}),
 			/* @__PURE__ */ jsx(Skeleton.Text, {
@@ -118,13 +120,13 @@ StatCardSkeleton.displayName = "StatCardSkeleton";
 function PageLoading({ header = true, label = "Loading", stats = 4 }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-busy": "true",
-		...stylex.props(styles$1.page),
+		...stylex.props(styles.page),
 		children: [
 			/* @__PURE__ */ jsx(LoadingAnnouncer, { label }),
 			header ? /* @__PURE__ */ jsx(PageHeaderSkeleton, {}) : null,
 			/* @__PURE__ */ jsx("section", {
 				"aria-hidden": true,
-				...stylex.props(styles$1.statGrid),
+				...stylex.props(styles.statGrid),
 				children: Array.from({ length: stats }, (_, index) => /* @__PURE__ */ jsx(StatCardSkeleton, {}, index))
 			}),
 			/* @__PURE__ */ jsx(TableSkeleton, {})

package/es/dashboard/PageSkeleton/PageSkeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PageSkeleton.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type {\n  LoadingAnnouncerProps,\n  PageHeaderSkeletonProps,\n  PageLoadingProps,\n  TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst tagBone = { ...bone, borderRadius: cssVar.borderRadiusSM };\nconst lineWidths = [\n  ['68%', '36%'],\n  ['52%', '28%'],\n  ['76%', '42%'],\n  ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n  return (\n    <output aria-live=\"polite\" {...stylex.props(styles.srOnly)}>\n      {label}\n    </output>\n  );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n  return (\n    <div aria-hidden {...stylex.props(styles.header)}>\n      <div {...stylex.props(styles.headerCopy)}>\n        <Skeleton className={stylex.props(styles.title).className} style={bone} />\n        <Skeleton.Text fontSize={14} width=\"46%\" />\n      </div>\n      {action ? <Skeleton className={stylex.props(styles.action).className} style={bone} /> : null}\n    </div>\n  );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n  const head = [96, 72, 64, 48];\n  return (\n    <div aria-hidden {...stylex.props(styles.table, framed && surfaceStyles.card)}>\n      <div {...stylex.props(styles.thead)}>\n        {head.map((width, index) => (\n          <Skeleton\n            className={stylex.props(styles.theadCell).className}\n            key={index}\n            style={{ ...bone, width }}\n          />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, index) => (\n        <div {...stylex.props(styles.row)} key={index}>\n          {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n          {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n          <div {...stylex.props(styles.copy)}>\n            <Skeleton.Text\n              fontSize={14}\n              rows={2}\n              width={[...lineWidths[index % lineWidths.length]]}\n            />\n          </div>\n          <Skeleton className={stylex.props(styles.tag).className} style={tagBone} />\n          <Skeleton className={stylex.props(styles.cell).className} style={bone} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n  return (\n    <div aria-hidden {...stylex.props(styles.stat, surfaceStyles.card)}>\n      <Skeleton.Text fontSize={14} width={72} />\n      <Skeleton className={stylex.props(styles.statValue).className} style={bone} />\n      <Skeleton.Text fontSize={14} width=\"68%\" />\n    </div>\n  );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n  return (\n    <div aria-busy=\"true\" {...stylex.props(styles.page)}>\n      <LoadingAnnouncer label={label} />\n      {header ? <PageHeaderSkeleton /> : null}\n      <section aria-hidden {...stylex.props(styles.statGrid)}>\n        {Array.from({ length: stats }, (_, index) => (\n          <StatCardSkeleton key={index} />\n        ))}\n      </section>\n      <TableSkeleton />\n    </div>\n  );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":"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"}
+{"version":3,"file":"PageSkeleton.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/PageSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/Skeleton';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { useSurfaceCardStyles } from '../Surface/link';\nimport { styles } from './style';\nimport type {\n  LoadingAnnouncerProps,\n  PageHeaderSkeletonProps,\n  PageLoadingProps,\n  TableSkeletonProps,\n} from './type';\n\nconst bone = { height: undefined, width: undefined };\nconst tagBone = { ...bone, borderRadius: cssVar.borderRadiusSM };\nconst lineWidths = [\n  ['68%', '36%'],\n  ['52%', '28%'],\n  ['76%', '42%'],\n  ['58%', '32%'],\n] as const;\n\nfunction LoadingAnnouncer({ label }: LoadingAnnouncerProps) {\n  return (\n    <output aria-live=\"polite\" {...stylex.props(styles.srOnly)}>\n      {label}\n    </output>\n  );\n}\n\nLoadingAnnouncer.displayName = 'LoadingAnnouncer';\n\nfunction PageHeaderSkeleton({ action = true }: PageHeaderSkeletonProps) {\n  return (\n    <div aria-hidden {...stylex.props(styles.header)}>\n      <div {...stylex.props(styles.headerCopy)}>\n        <Skeleton className={stylex.props(styles.title).className} style={bone} />\n        <Skeleton.Text fontSize={14} width=\"46%\" />\n      </div>\n      {action ? <Skeleton className={stylex.props(styles.action).className} style={bone} /> : null}\n    </div>\n  );\n}\n\nPageHeaderSkeleton.displayName = 'PageHeaderSkeleton';\n\nfunction TableSkeleton({ framed = true, leading = 'text', rows = 6 }: TableSkeletonProps) {\n  const cardStyles = useSurfaceCardStyles();\n  const head = [96, 72, 64, 48];\n  return (\n    <div aria-hidden {...stylex.props(styles.table, framed && cardStyles)}>\n      <div {...stylex.props(styles.thead)}>\n        {head.map((width, index) => (\n          <Skeleton\n            className={stylex.props(styles.theadCell).className}\n            key={index}\n            style={{ ...bone, width }}\n          />\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, index) => (\n        <div {...stylex.props(styles.row)} key={index}>\n          {leading === 'avatar' ? <Skeleton.Avatar shape=\"circle\" size={24} /> : null}\n          {leading === 'icon' ? <Skeleton.Avatar shape=\"square\" size={24} /> : null}\n          <div {...stylex.props(styles.copy)}>\n            <Skeleton.Text\n              fontSize={14}\n              rows={2}\n              width={[...lineWidths[index % lineWidths.length]]}\n            />\n          </div>\n          <Skeleton className={stylex.props(styles.tag).className} style={tagBone} />\n          <Skeleton className={stylex.props(styles.cell).className} style={bone} />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTableSkeleton.displayName = 'TableSkeleton';\n\nfunction StatCardSkeleton() {\n  const cardStyles = useSurfaceCardStyles();\n  return (\n    <div aria-hidden {...stylex.props(styles.stat, cardStyles)}>\n      <Skeleton.Text fontSize={14} width={72} />\n      <Skeleton className={stylex.props(styles.statValue).className} style={bone} />\n      <Skeleton.Text fontSize={14} width=\"68%\" />\n    </div>\n  );\n}\n\nStatCardSkeleton.displayName = 'StatCardSkeleton';\n\nfunction PageLoading({ header = true, label = 'Loading', stats = 4 }: PageLoadingProps) {\n  return (\n    <div aria-busy=\"true\" {...stylex.props(styles.page)}>\n      <LoadingAnnouncer label={label} />\n      {header ? <PageHeaderSkeleton /> : null}\n      <section aria-hidden {...stylex.props(styles.statGrid)}>\n        {Array.from({ length: stats }, (_, index) => (\n          <StatCardSkeleton key={index} />\n        ))}\n      </section>\n      <TableSkeleton />\n    </div>\n  );\n}\n\nPageLoading.displayName = 'PageLoading';\n\nexport { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton };\nexport default PageLoading;\n"],"mappings":"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"}

package/es/dashboard/PageSkeleton/style.mjs

@@ -44,7 +44,7 @@ const styles = {
 		k8WAf4: "lb10dr8xq",
 		kg3NbH: "lb1hr3lfm",
 		kGNEyG: "lb6s0dn4",
-		kL6WhQ: "lbsyjar lb1wdpdt8",
+		kL6WhQ: "lb1ak05nl lb1wdpdt8",
 		kfdmCh: "lb1q0q8m5 lb14tvv71",
 		kt9PQ7: "lbso031l lb4vq4ti",
 		k1xSpc: "lb78zum5",

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  action: {\n    flex: 'none',\n    blockSize: { default: 32, [media.mobile]: 44 },\n    inlineSize: { default: 96, [media.mobile]: '100%' },\n  },\n  cell: {\n    flex: 'none',\n    blockSize: 14,\n    inlineSize: 88,\n  },\n  copy: {\n    flex: '1',\n    minInlineSize: 0,\n  },\n  header: {\n    gap: 16,\n    alignItems: { default: 'flex-start', [media.mobile]: 'stretch' },\n    display: 'flex',\n    flexDirection: { default: null, [media.mobile]: 'column' },\n    justifyContent: 'space-between',\n  },\n  headerCopy: {\n    flex: '1',\n    gap: 8,\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n  },\n  page: {\n    gap: 20,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  row: {\n    gap: 12,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockEndColor: { 'default': cssVar.colorBorder, ':last-child': 'currentcolor' },\n    borderBlockEndStyle: { 'default': 'solid', ':last-child': 'none' },\n    borderBlockEndWidth: { 'default': 1, ':last-child': 'medium' },\n    display: 'flex',\n    minBlockSize: 54,\n  },\n  srOnly: {\n    overflow: 'hidden',\n    blockSize: 1,\n    clipPath: 'inset(50%)',\n    inlineSize: 1,\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n  },\n  stat: {\n    padding: 16,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  statGrid: {\n    gap: 12,\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n  },\n  statValue: {\n    blockSize: cssVar.fontSizeHeading2,\n    inlineSize: '42%',\n    marginBlockEnd: '14px',\n    marginBlockStart: '6px',\n  },\n  table: {\n    overflow: 'hidden',\n    minInlineSize: 0,\n  },\n  tag: {\n    flex: 'none',\n    blockSize: 22,\n    inlineSize: 72,\n  },\n  thead: {\n    gap: 12,\n    paddingBlock: 10,\n    paddingInline: 16,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorFillTertiary,\n    display: 'flex',\n    minBlockSize: 39,\n  },\n  theadCell: {\n    flex: 'none',\n    blockSize: 12,\n  },\n  title: {\n    blockSize: cssVar.fontSizeHeading3,\n    inlineSize: 220,\n    maxInlineSize: '70%',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,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,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nexport const styles = stylex.create({\n  action: {\n    flex: 'none',\n    blockSize: { default: 32, [media.mobile]: 44 },\n    inlineSize: { default: 96, [media.mobile]: '100%' },\n  },\n  cell: {\n    flex: 'none',\n    blockSize: 14,\n    inlineSize: 88,\n  },\n  copy: {\n    flex: '1',\n    minInlineSize: 0,\n  },\n  header: {\n    gap: 16,\n    alignItems: { default: 'flex-start', [media.mobile]: 'stretch' },\n    display: 'flex',\n    flexDirection: { default: null, [media.mobile]: 'column' },\n    justifyContent: 'space-between',\n  },\n  headerCopy: {\n    flex: '1',\n    gap: 8,\n    display: 'flex',\n    flexDirection: 'column',\n    minInlineSize: 0,\n  },\n  page: {\n    gap: 20,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  row: {\n    gap: 12,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockEndColor: { 'default': cssVar.colorFillSecondary, ':last-child': 'currentcolor' },\n    borderBlockEndStyle: { 'default': 'solid', ':last-child': 'none' },\n    borderBlockEndWidth: { 'default': 1, ':last-child': 'medium' },\n    display: 'flex',\n    minBlockSize: 54,\n  },\n  srOnly: {\n    overflow: 'hidden',\n    blockSize: 1,\n    clipPath: 'inset(50%)',\n    inlineSize: 1,\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n  },\n  stat: {\n    padding: 16,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  statGrid: {\n    gap: 12,\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n  },\n  statValue: {\n    blockSize: cssVar.fontSizeHeading2,\n    inlineSize: '42%',\n    marginBlockEnd: '14px',\n    marginBlockStart: '6px',\n  },\n  table: {\n    overflow: 'hidden',\n    minInlineSize: 0,\n  },\n  tag: {\n    flex: 'none',\n    blockSize: 22,\n    inlineSize: 72,\n  },\n  thead: {\n    gap: 12,\n    paddingBlock: 10,\n    paddingInline: 16,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorFillTertiary,\n    display: 'flex',\n    minBlockSize: 39,\n  },\n  theadCell: {\n    flex: 'none',\n    blockSize: 12,\n  },\n  title: {\n    blockSize: cssVar.fontSizeHeading3,\n    inlineSize: 220,\n    maxInlineSize: '70%',\n  },\n});\n"],"mappings":";AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,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,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/dashboard/PageToolbar/PageToolbar.d.mts

@@ -0,0 +1,10 @@
+import { PageToolbarProps } from "./type.mjs";
+//#region src/dashboard/PageToolbar/PageToolbar.d.ts
+/** Filters start at the left edge; actions hold the right edge, also after wrapping. */
+declare const PageToolbar: {
+  ({ actions, children, className }: PageToolbarProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PageToolbar as default };
+//# sourceMappingURL=PageToolbar.d.mts.map

package/es/dashboard/PageToolbar/PageToolbar.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/PageToolbar/PageToolbar.tsx
+/** Filters start at the left edge; actions hold the right edge, also after wrapping. */
+const PageToolbar = ({ actions, children, className }) => /* @__PURE__ */ jsxs("div", {
+	...styleProps(styles.root, className),
+	children: [children ? /* @__PURE__ */ jsx("div", {
+		...stylex.props(styles.filters),
+		children
+	}) : null, actions ? /* @__PURE__ */ jsx("div", {
+		...stylex.props(styles.actions),
+		children: actions
+	}) : null]
+});
+PageToolbar.displayName = "PageToolbar";
+//#endregion
+export { PageToolbar as default };
+
+//# sourceMappingURL=PageToolbar.mjs.map

package/es/dashboard/PageToolbar/PageToolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageToolbar.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/PageToolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { PageToolbarProps } from './type';\n\n/** Filters start at the left edge; actions hold the right edge, also after wrapping. */\nconst PageToolbar = ({ actions, children, className }: PageToolbarProps) => (\n  <div {...styleProps(styles.root, className)}>\n    {children ? <div {...stylex.props(styles.filters)}>{children}</div> : null}\n    {actions ? <div {...stylex.props(styles.actions)}>{actions}</div> : null}\n  </div>\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nexport default PageToolbar;\n"],"mappings":";;;;;;;AAQA,MAAM,eAAe,EACnB,SACA,UACA,gBACsB,qBAAC,OAAD;CAAK,GAAI,WAAW,OAAO,MAAM,SAAS;CAA1C,UAAA,CACnB,WAAW,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAAI;CAAc,CAAA,IAAI,MACrE,UAAU,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAAI,UAAA;CAAa,CAAA,IAAI,IACjE;;AACP,YAAY,cAAc"}

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

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

package/es/dashboard/PageToolbar/style.mjs

@@ -0,0 +1,36 @@
+//#region src/dashboard/PageToolbar/style.ts
+const styles = {
+	actions: {
+		kUk6DE: "lb1okw0bk",
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		keTefX: "lbvc5jky",
+		$$css: true
+	},
+	filters: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kCS8Yb: "lbdl72j9",
+		kzQI83: "lb1c4vz4f",
+		kmuXW: "lbs83m0k",
+		kwnvtZ: "lb1a02dak",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	root: {
+		kGNEyG: "lb6s0dn4",
+		k1C7PZ: "lbtqikln",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		k7Eaqz: "lbeuugli",
+		khm7nJ: "lb3pnbk8",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n    marginInlineStart: 'auto',\n  },\n  filters: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'flex',\n    flexBasis: 'auto',\n    flexGrow: '0',\n    flexShrink: '1',\n    flexWrap: 'wrap',\n    minInlineSize: 0,\n  },\n  root: {\n    alignItems: 'center',\n    columnGap: '12px',\n    display: 'flex',\n    flexWrap: 'wrap',\n    minInlineSize: 0,\n    rowGap: '8px',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+//#region src/dashboard/PageToolbar/type.d.ts
+export interface PageToolbarProps {
+  /** Right side: refresh, export, the page's own buttons. */
+  actions?: ReactNode;
+  /** Left side: range, scope, search, whatever narrows the page. */
+  children?: ReactNode;
+  className?: string;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PanelSurface/PanelSurface.d.mts

@@ -0,0 +1,10 @@
+import { PanelSurfaceProps } from "./type.mjs";
+//#region src/dashboard/PanelSurface/PanelSurface.d.ts
+/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */
+declare const PanelSurface: {
+  ({ title, description, extra, href, loading, renderLink, size, className, style, children }: PanelSurfaceProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { PanelSurface as default };
+//# sourceMappingURL=PanelSurface.d.mts.map

package/es/dashboard/PanelSurface/PanelSurface.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import Spin from "../../Spin/Spin.mjs";
+import Skeleton from "../../Skeleton/index.mjs";
+import { surfaceClassNames } from "../Surface/style.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/PanelSurface/PanelSurface.tsx
+/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */
+const PanelSurface = ({ title, description, extra, href, loading, renderLink, size = "default", className, style, children }) => /* @__PURE__ */ jsx(Surface, {
+	className,
+	description,
+	extra: loading && children ? /* @__PURE__ */ jsx(Spin, {
+		size: "small",
+		variant: "network"
+	}) : extra,
+	href,
+	padded: false,
+	renderLink,
+	style,
+	title,
+	children: loading && !children ? /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		...stylex.props(styles.loadingBody),
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			height: 220,
+			radius: 8
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		...styleProps(size === "small" ? styles.bodySmall : styles.body, surfaceClassNames.tableBleed),
+		children
+	})
+});
+PanelSurface.displayName = "PanelSurface";
+//#endregion
+export { PanelSurface as default };
+
+//# sourceMappingURL=PanelSurface.mjs.map

package/es/dashboard/PanelSurface/PanelSurface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSurface.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/Skeleton';\nimport Spin from '@/Spin';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { surfaceClassNames } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" variant=\"network\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" {...stylex.props(styles.loadingBody)}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        {...styleProps(\n          size === 'small' ? styles.bodySmall : styles.body,\n          surfaceClassNames.tableBleed,\n        )}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eACuB,oBAAC,SAAD;CAAoB;CAAwB;CAAa,OAAO,WAAW,WAAW,oBAAC,MAAD;EAAM,MAAK;EAAQ,SAAQ;CAAW,CAAA,IAAI;CAAa;CAAM,QAAQ;CAAmB;CAAmB;CAAc;CACnO,UAAA,WAAW,CAAC,WAAW,oBAAC,OAAD;EAAK,aAAU;EAAO,GAAI,OAAO,MAAM,OAAO,WAAW;EAC7E,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAAI,oBAAC,OAAD;EAAK,GAAI,WAAW,SAAS,UAAU,OAAO,YAAY,OAAO,MAAM,kBAAkB,UAAU;EACzG;CACE,CAAA;AACA,CAAA;AACX,aAAa,cAAc"}

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

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

package/es/dashboard/PanelSurface/style.mjs

@@ -0,0 +1,25 @@
+//#region src/dashboard/PanelSurface/style.ts
+const styles = {
+	body: {
+		"--surface-pad-block": "lb4vqstq",
+		"--surface-pad-inline": "lbssx8jz",
+		kmVPX3: "lb1tamke2",
+		$$css: true
+	},
+	bodySmall: {
+		"--surface-pad-block": "lbo35jsc",
+		"--surface-pad-inline": "lbssx8jz",
+		k8WAf4: "lb10dr8xq",
+		kg3NbH: "lb1hr3lfm",
+		$$css: true
+	},
+	loadingBody: {
+		kGO01o: "lbwib8y2",
+		kLKAdn: "lb1iorvi4",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  body: {\n    '--surface-pad-block': '16px',\n    '--surface-pad-inline': '16px',\n    'padding': 16,\n  },\n  bodySmall: {\n    '--surface-pad-block': '12px',\n    '--surface-pad-inline': '16px',\n    'paddingBlock': 12,\n    'paddingInline': 16,\n  },\n  loadingBody: {\n    paddingBlockEnd: 8,\n    paddingBlockStart: 4,\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,MAAM;EACJ,uBAAuB;EACvB,wBAAwB;EACxB,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,uBAAuB;EACvB,wBAAwB;EACxB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,17 @@
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { CSSProperties, ReactNode } from "react";
+//#region src/dashboard/PanelSurface/type.d.ts
+export interface PanelSurfaceProps {
+  children?: ReactNode;
+  className?: string;
+  description?: ReactNode;
+  extra?: ReactNode;
+  href?: string;
+  loading?: boolean;
+  renderLink?: SurfaceRenderLink;
+  size?: 'default' | 'small';
+  style?: CSSProperties;
+  title?: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,10 @@
+import { SectionProps } from "./type.mjs";
+//#region src/dashboard/Section/Section.d.ts
+/** A titled page section with description, extra and a "more" link, flat or as a card. */
+declare const Section: {
+  ({ className, variant, fontSize, title, more, moreLink, icon, children, desc, extra, gap, padded, renderLink, ...rest }: SectionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Section as default };
+//# sourceMappingURL=Section.d.mts.map