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

package/es/dashboard/Surface/style.mjs

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

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

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

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

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

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

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

package/es/dashboard/TableIconActions/TableIconActions.mjs

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

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

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

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

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

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

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

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

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

package/es/dashboard/TitleWithTips/TitleWithTips.mjs

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

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

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

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

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

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

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

package/es/dashboard/index.d.mts

@@ -1,12 +1,21 @@
-import { AuthLayoutProps } from "./AuthLayout/type.mjs";
+import { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant } from "./AuthLayout/type.mjs";
+import AuthLayoutAside from "./AuthLayout/Aside.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
 import "./AuthLayout/index.mjs";
+import { AuthLocaleOption, AuthLocaleSwitchProps, AuthThemeMode, AuthThemeSwitchProps } from "./AuthTools/type.mjs";
+import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
+import "./AuthTools/index.mjs";
 import { BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb/type.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
 import "./Breadcrumb/index.mjs";
-import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps } from "./ConsoleNav/type.mjs";
+import { ChartGridProps } from "./ChartGrid/type.mjs";
+import ChartGrid from "./ChartGrid/ChartGrid.mjs";
+import "./ChartGrid/index.mjs";
+import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps, ConsoleNavSkeletonProps } from "./ConsoleNav/type.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
 import "./ConsoleNav/index.mjs";
 import { ConsoleBrandProps, ConsoleShellProps, ConsoleShellState } from "./ConsoleShell/type.mjs";
 import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
@@ -17,6 +26,16 @@ import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import { FilterOptionProps, FilterRowProps, FilterSidebarProps } from "./FilterSidebar/type.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
 import "./FilterSidebar/index.mjs";
+import { FilterStripItem, FilterStripProps } from "./FilterStrip/type.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
+import "./FilterStrip/index.mjs";
+import { LabelWithKeyProps } from "./LabelWithKey/type.mjs";
+import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
+import "./LabelWithKey/index.mjs";
+import { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink } from "./Surface/type.mjs";
+import { MetricItem, MetricStripProps } from "./MetricStrip/type.mjs";
+import MetricStrip from "./MetricStrip/MetricStrip.mjs";
+import "./MetricStrip/index.mjs";
 import { PageHeaderProps } from "./PageHeader/type.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
 import "./PageHeader/index.mjs";
@@ -25,13 +44,28 @@ import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, Ta
 import { PageTab, PageTabsProps } from "./PageTabs/type.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
 import "./PageTabs/index.mjs";
+import { PageToolbarProps } from "./PageToolbar/type.mjs";
+import PageToolbar from "./PageToolbar/PageToolbar.mjs";
+import "./PageToolbar/index.mjs";
+import { PanelSurfaceProps } from "./PanelSurface/type.mjs";
+import PanelSurface from "./PanelSurface/PanelSurface.mjs";
+import "./PanelSurface/index.mjs";
 import { RouteProgressProps } from "./RouteProgress/type.mjs";
 import RouteProgress from "./RouteProgress/RouteProgress.mjs";
+import { SectionProps } from "./Section/type.mjs";
+import Section from "./Section/Section.mjs";
+import "./Section/index.mjs";
 import { StatCardProps, StatDirection } from "./StatCard/type.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
 import "./StatCard/index.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import { surfaceStyles } from "./Surface/style.mjs";
-import { SurfaceProps } from "./Surface/type.mjs";
 import Surface from "./Surface/Surface.mjs";
 import "./Surface/index.mjs";
-export { AuthLayout, type AuthLayoutProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ConsoleBrand, type ConsoleBrandProps, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, LoadingAnnouncer, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, RouteProgress, type RouteProgressProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceProps, TableSkeleton, resolveActiveHref, surfaceStyles, useConsoleShell, useInFilterSplit };
+import { TableIconActionProps, TableIconActionsProps } from "./TableIconActions/type.mjs";
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
+import "./TableIconActions/index.mjs";
+import { TitleWithTipsProps } from "./TitleWithTips/type.mjs";
+import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
+import "./TitleWithTips/index.mjs";
+export { AuthLayout, AuthLayoutAside, type AuthLayoutAsideProps, type AuthLayoutBackground, type AuthLayoutProps, type AuthLayoutVariant, type AuthLocaleOption, AuthLocaleSwitch, type AuthLocaleSwitchProps, type AuthThemeMode, AuthThemeSwitch, type AuthThemeSwitchProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ChartGrid, type ChartGridProps, ConsoleBrand, type ConsoleBrandProps, ConsoleFooterSkeleton, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleNavSkeleton, type ConsoleNavSkeletonProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, FilterStrip, type FilterStripItem, type FilterStripProps, LabelWithKey, type LabelWithKeyProps, LoadingAnnouncer, type MetricItem, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, PageToolbar, type PageToolbarProps, PanelSurface, type PanelSurfaceProps, RouteProgress, type RouteProgressProps, Section, type SectionProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, TableIconAction, type TableIconActionProps, TableIconActions, type TableIconActionsProps, TableSkeleton, TitleWithTips, type TitleWithTipsProps, formatInteger, resolveActiveHref, surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

package/es/dashboard/index.mjs

@@ -1,17 +1,31 @@
+import AuthLayoutAside from "./AuthLayout/Aside.mjs";
 import { surfaceStyles } from "./Surface/style.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
+import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
+import ChartGrid from "./ChartGrid/ChartGrid.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import { useConsoleShell } from "./ConsoleShell/context.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
 import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
+import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import ConsoleShell from "./ConsoleShell/ConsoleShell.mjs";
 import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
+import Surface from "./Surface/Surface.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
+import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
+import MetricStrip from "./MetricStrip/MetricStrip.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
-import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
+import PageToolbar from "./PageToolbar/PageToolbar.mjs";
+import PanelSurface from "./PanelSurface/PanelSurface.mjs";
 import RouteProgress from "./RouteProgress/RouteProgress.mjs";
+import Section from "./Section/Section.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
-import Surface from "./Surface/Surface.mjs";
-export { AuthLayout, Breadcrumb, ConsoleBrand, ConsoleNav, ConsoleShell, FilterOption, FilterRow, FilterSidebar, LoadingAnnouncer, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, RouteProgress, StatCard, StatCardSkeleton, Surface, TableSkeleton, resolveActiveHref, surfaceStyles, useConsoleShell, useInFilterSplit };
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
+import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
+export { AuthLayout, AuthLayoutAside, AuthLocaleSwitch, AuthThemeSwitch, Breadcrumb, ChartGrid, ConsoleBrand, ConsoleFooterSkeleton, ConsoleNav, ConsoleNavSkeleton, ConsoleShell, FilterOption, FilterRow, FilterSidebar, FilterStrip, LabelWithKey, LoadingAnnouncer, MetricStrip, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, PageToolbar, PanelSurface, RouteProgress, Section, StatCard, StatCardSkeleton, Surface, SurfaceLinkProvider, TableIconAction, TableIconActions, TableSkeleton, TitleWithTips, formatInteger, resolveActiveHref, surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };