@lobehub/ui 5.59.0 → 5.60.0

package/es/dashboard/FilterSidebar/FilterSidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterSidebar.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterSidebar/FilterSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Drawer } from '@/base-ui/Drawer';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nfunction usePageSidebar(wide: boolean | undefined, storageKey: string | undefined) {\n  const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;\n  const [prefs, setPrefs] = useLocalStorage<{ expand?: boolean; width?: number }>(storageKey, {\n    expand: true,\n    width: fallback,\n  });\n  return {\n    expand: prefs.expand !== false,\n    onExpandChange: (expand: boolean) => setPrefs((current) => ({ ...current, expand })),\n    onSizeChange: (size: { width?: number | string }) => {\n      const next = typeof size.width === 'number' ? size.width : fallback;\n      setPrefs((current) => ({ ...current, width: clampSidebarWidth(next, fallback) }));\n    },\n    width: clampSidebarWidth(Number(prefs.width), fallback),\n  };\n}\n\nfunction FilterSidebar({\n  body,\n  children,\n  flush,\n  head,\n  header,\n  label,\n  storageKey,\n  summary,\n  wide,\n}: FilterSidebarProps) {\n  const isCompact = useIsCompact();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const sidebar = usePageSidebar(wide, storageKey);\n  const close = () => setDrawerOpen(false);\n\n  if (isCompact) {\n    return (\n      <FilterSplitProvider active={!flush}>\n        <div className={styles.layout}>\n          {header}\n          <Button block icon={Filter} onClick={() => setDrawerOpen(true)}>\n            {summary}\n          </Button>\n          <Drawer open={drawerOpen} placement=\"left\" title={label} width={300} onClose={close}>\n            <div className={styles.drawerPanel}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div className={styles.content}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        className={flush ? styles.layout : `${styles.layout} ${surfaceStyles.card}`}\n        data-flush={flush ? true : undefined}\n        data-page-layout={flush ? 'flush' : undefined}\n        data-split-card={flush ? undefined : true}\n      >\n        <DraggablePanel\n          expandable\n          showHandleWhenCollapsed\n          aria-label={label}\n          className={styles.sidebar}\n          classNames={{ content: styles.panel }}\n          collapseThreshold={sidebarWidth.collapse}\n          data-flush={flush ? true : undefined}\n          defaultSize={{ width: wide ? sidebarWidth.wide : sidebarWidth.narrow }}\n          expand={sidebar.expand}\n          maxWidth={sidebarWidth.max}\n          minWidth={sidebarWidth.min}\n          mode=\"fixed\"\n          placement=\"left\"\n          showBorder={false}\n          size={{ width: sidebar.width }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div className={styles.head}>{head(close)}</div> : null}\n          <div className={styles.body} data-flush={flush ? true : undefined}>\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div className={styles.content} data-flush={flush ? true : undefined}>\n          {header}\n          {children}\n        </div>\n      </div>\n    </FilterSplitProvider>\n  );\n}\n\nFilterSidebar.displayName = 'FilterSidebar';\n\nfunction FilterRow({ count, name }: FilterRowProps) {\n  return (\n    <span className={styles.row}>\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </span>\n  );\n}\n\nFilterRow.displayName = 'FilterRow';\n\nfunction FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps) {\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={selected}\n      className={styles.option}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n    >\n      {icon}\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </button>\n  );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":"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"}
+{"version":3,"file":"FilterSidebar.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/FilterSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Drawer } from '@/base-ui/Drawer';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nfunction usePageSidebar(wide: boolean | undefined, storageKey: string | undefined) {\n  const fallback = wide ? sidebarWidth.wide : sidebarWidth.narrow;\n  const [prefs, setPrefs] = useLocalStorage<{ expand?: boolean; width?: number }>(storageKey, {\n    expand: true,\n    width: fallback,\n  });\n  return {\n    expand: prefs.expand !== false,\n    onExpandChange: (expand: boolean) => setPrefs((current) => ({ ...current, expand })),\n    onSizeChange: (size: { width?: number | string }) => {\n      const next = typeof size.width === 'number' ? size.width : fallback;\n      setPrefs((current) => ({ ...current, width: clampSidebarWidth(next, fallback) }));\n    },\n    width: clampSidebarWidth(Number(prefs.width), fallback),\n  };\n}\n\nfunction FilterSidebar({\n  body,\n  children,\n  flush,\n  head,\n  header,\n  label,\n  storageKey,\n  summary,\n  wide,\n}: FilterSidebarProps) {\n  const cardClassName = useSurfaceCardClassName();\n  const isCompact = useIsCompact();\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const sidebar = usePageSidebar(wide, storageKey);\n  const close = () => setDrawerOpen(false);\n\n  if (isCompact) {\n    return (\n      <FilterSplitProvider active={!flush}>\n        <div className={styles.layout}>\n          {header}\n          <Button block icon={Filter} onClick={() => setDrawerOpen(true)}>\n            {summary}\n          </Button>\n          <Drawer open={drawerOpen} placement=\"left\" title={label} width={300} onClose={close}>\n            <div className={styles.drawerPanel}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div className={styles.content}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        className={flush ? styles.layout : `${styles.layout} ${cardClassName}`}\n        data-flush={flush ? true : undefined}\n        data-page-layout={flush ? 'flush' : undefined}\n        data-split-card={flush ? undefined : true}\n      >\n        <DraggablePanel\n          expandable\n          showHandleWhenCollapsed\n          aria-label={label}\n          className={styles.sidebar}\n          classNames={{ content: styles.panel }}\n          collapseThreshold={sidebarWidth.collapse}\n          data-flush={flush ? true : undefined}\n          defaultSize={{ width: wide ? sidebarWidth.wide : sidebarWidth.narrow }}\n          expand={sidebar.expand}\n          maxWidth={sidebarWidth.max}\n          minWidth={sidebarWidth.min}\n          mode=\"fixed\"\n          placement=\"left\"\n          showBorder={false}\n          size={{ width: sidebar.width }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div className={styles.head}>{head(close)}</div> : null}\n          <div className={styles.body} data-flush={flush ? true : undefined}>\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div className={styles.content} data-flush={flush ? true : undefined}>\n          {header}\n          {children}\n        </div>\n      </div>\n    </FilterSplitProvider>\n  );\n}\n\nFilterSidebar.displayName = 'FilterSidebar';\n\nfunction FilterRow({ count, name }: FilterRowProps) {\n  return (\n    <span className={styles.row}>\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </span>\n  );\n}\n\nFilterRow.displayName = 'FilterRow';\n\nfunction FilterOption({ count, icon, label, name, onClick, selected, title }: FilterOptionProps) {\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={selected}\n      className={styles.option}\n      title={title}\n      type=\"button\"\n      onClick={onClick}\n    >\n      {icon}\n      <span className={styles.name}>{name}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </button>\n  );\n}\n\nFilterOption.displayName = 'FilterOption';\n\nexport { FilterOption, FilterRow };\nexport default FilterSidebar;\n"],"mappings":"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"}

package/es/dashboard/FilterStrip/FilterStrip.mjs

@@ -1,49 +1,53 @@
 "use client";
 import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { styles } from "../Surface/style.mjs";
 import Surface from "../Surface/Surface.mjs";
-import { styles } from "./style.mjs";
+import { styles as styles$1 } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 //#region src/dashboard/FilterStrip/FilterStrip.tsx
 const countClass = {
-	danger: styles.countDanger,
-	warning: styles.countWarning
+	danger: styles$1.countDanger,
+	warning: styles$1.countWarning
 };
 const integerFormat = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
 const formatInteger = (count) => integerFormat.format(count);
 /** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */
-const FilterStrip = ({ emptyText = "--", formatCount = formatInteger, items, label, onChange, value }) => /* @__PURE__ */ jsx(Surface, { children: /* @__PURE__ */ jsx("div", {
-	"aria-label": label,
-	className: styles.frame,
-	role: "radiogroup",
+const FilterStrip = ({ emptyText = "--", formatCount = formatInteger, items, label, onChange, value }) => /* @__PURE__ */ jsx(Surface, {
+	className: styles.clip,
 	children: /* @__PURE__ */ jsx("div", {
-		className: styles.grid,
-		children: items.map((item) => {
-			const active = item.key === value;
-			const missing = item.count === void 0 || item.count === null;
-			const emphasize = item.tone && typeof item.count === "number" && item.count > 0;
-			return /* @__PURE__ */ jsxs("button", {
-				"aria-checked": active,
-				className: cx(styles.cell, active && styles.cellActive),
-				role: "radio",
-				title: item.hint,
-				type: "button",
-				onClick: () => onChange(item.key),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: cx(styles.label, active && styles.labelActive),
-					children: item.label
-				}), /* @__PURE__ */ jsx("span", {
-					className: cx(styles.count, emphasize && countClass[item.tone]),
-					children: item.loading ? /* @__PURE__ */ jsx(Skeleton, {
-						height: 22,
-						radius: 6,
-						width: 48
-					}) : missing ? emptyText : formatCount(item.count)
-				})]
-			}, item.key);
+		"aria-label": label,
+		className: styles$1.frame,
+		role: "radiogroup",
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles$1.grid,
+			children: items.map((item) => {
+				const active = item.key === value;
+				const missing = item.count === void 0 || item.count === null;
+				const emphasize = item.tone && typeof item.count === "number" && item.count > 0;
+				return /* @__PURE__ */ jsxs("button", {
+					"aria-checked": active,
+					className: cx(styles$1.cell, active && styles$1.cellActive),
+					role: "radio",
+					title: item.hint,
+					type: "button",
+					onClick: () => onChange(item.key),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cx(styles$1.label, active && styles$1.labelActive),
+						children: item.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: cx(styles$1.count, emphasize && countClass[item.tone]),
+						children: item.loading ? /* @__PURE__ */ jsx(Skeleton, {
+							height: 22,
+							radius: 6,
+							width: 48
+						}) : missing ? emptyText : formatCount(item.count)
+					})]
+				}, item.key);
+			})
 		})
 	})
-}) });
+});
 FilterStrip.displayName = "FilterStrip";
 //#endregion
 export { FilterStrip as default, formatInteger };

package/es/dashboard/FilterStrip/FilterStrip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterStrip.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/FilterStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { FilterStripProps } from './type';\n\nconst countClass = {\n  danger: styles.countDanger,\n  warning: styles.countWarning,\n} as const;\n\nconst integerFormat = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });\n\nexport const formatInteger = (count: number) => integerFormat.format(count);\n\n/** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */\nconst FilterStrip = ({\n  emptyText = '--',\n  formatCount = formatInteger,\n  items,\n  label,\n  onChange,\n  value,\n}: FilterStripProps) => (\n  <Surface>\n    <div aria-label={label} className={styles.frame} role=\"radiogroup\">\n      <div className={styles.grid}>\n        {items.map((item) => {\n          const active = item.key === value;\n          const missing = item.count === undefined || item.count === null;\n          const emphasize = item.tone && typeof item.count === 'number' && item.count > 0;\n\n          return (\n            <button\n              aria-checked={active}\n              className={cx(styles.cell, active && styles.cellActive)}\n              key={item.key}\n              role=\"radio\"\n              title={item.hint}\n              type=\"button\"\n              onClick={() => onChange(item.key)}\n            >\n              <span className={cx(styles.label, active && styles.labelActive)}>{item.label}</span>\n              <span className={cx(styles.count, emphasize && countClass[item.tone!])}>\n                {item.loading ? (\n                  <Skeleton height={22} radius={6} width={48} />\n                ) : missing ? (\n                  emptyText\n                ) : (\n                  formatCount(item.count!)\n                )}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  </Surface>\n);\n\nFilterStrip.displayName = 'FilterStrip';\n\nexport default FilterStrip;\n"],"mappings":";;;;;;;AAUA,MAAM,aAAa;CACjB,QAAQ,OAAO;CACf,SAAS,OAAO;AAClB;AAEA,MAAM,gBAAgB,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AAEjF,MAAa,iBAAiB,UAAkB,cAAc,OAAO,KAAK;;AAG1E,MAAM,eAAe,EACnB,YAAY,MACZ,cAAc,eACd,OACA,OACA,UACA,YAEA,oBAAC,SAAD,EAAA,UACE,oBAAC,OAAD;CAAK,cAAY;CAAO,WAAW,OAAO;CAAO,MAAK;CACpD,UAAA,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,KAAK,QAAQ;GAC5B,MAAM,UAAU,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU;GAC3D,MAAM,YAAY,KAAK,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ;GAE9E,OACE,qBAAC,UAAD;IACE,gBAAc;IACd,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,UAAU;IAEtD,MAAK;IACL,OAAO,KAAK;IACZ,MAAK;IACL,eAAe,SAAS,KAAK,GAAG;IAPlC,UAAA,CASE,oBAAC,QAAD;KAAM,WAAW,GAAG,OAAO,OAAO,UAAU,OAAO,WAAW;KAAI,UAAA,KAAK;IAAY,CAAA,GACnF,oBAAC,QAAD;KAAM,WAAW,GAAG,OAAO,OAAO,aAAa,WAAW,KAAK,KAAM;KAClE,UAAA,KAAK,UACJ,oBAAC,UAAD;MAAU,QAAQ;MAAI,QAAQ;MAAG,OAAO;KAAK,CAAA,IAC3C,UACF,YAEA,YAAY,KAAK,KAAM;IAErB,CAAA,CACA;GAhBD,GAAA,KAAK,GAgBJ;EAEZ,CAAC;CACE,CAAA;AACF,CAAA,EACE,CAAA;AAGX,YAAY,cAAc"}
+{"version":3,"file":"FilterStrip.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterStrip/FilterStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { FilterStripProps } from './type';\n\nconst countClass = {\n  danger: styles.countDanger,\n  warning: styles.countWarning,\n} as const;\n\nconst integerFormat = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });\n\nexport const formatInteger = (count: number) => integerFormat.format(count);\n\n/** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */\nconst FilterStrip = ({\n  emptyText = '--',\n  formatCount = formatInteger,\n  items,\n  label,\n  onChange,\n  value,\n}: FilterStripProps) => (\n  <Surface className={surfaceStyles.clip}>\n    <div aria-label={label} className={styles.frame} role=\"radiogroup\">\n      <div className={styles.grid}>\n        {items.map((item) => {\n          const active = item.key === value;\n          const missing = item.count === undefined || item.count === null;\n          const emphasize = item.tone && typeof item.count === 'number' && item.count > 0;\n\n          return (\n            <button\n              aria-checked={active}\n              className={cx(styles.cell, active && styles.cellActive)}\n              key={item.key}\n              role=\"radio\"\n              title={item.hint}\n              type=\"button\"\n              onClick={() => onChange(item.key)}\n            >\n              <span className={cx(styles.label, active && styles.labelActive)}>{item.label}</span>\n              <span className={cx(styles.count, emphasize && countClass[item.tone!])}>\n                {item.loading ? (\n                  <Skeleton height={22} radius={6} width={48} />\n                ) : missing ? (\n                  emptyText\n                ) : (\n                  formatCount(item.count!)\n                )}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  </Surface>\n);\n\nFilterStrip.displayName = 'FilterStrip';\n\nexport default FilterStrip;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa;CACjB,QAAQA,SAAO;CACf,SAASA,SAAO;AAClB;AAEA,MAAM,gBAAgB,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AAEjF,MAAa,iBAAiB,UAAkB,cAAc,OAAO,KAAK;;AAG1E,MAAM,eAAe,EACnB,YAAY,MACZ,cAAc,eACd,OACA,OACA,UACA,YAEA,oBAAC,SAAD;CAAS,WAAWC,OAAc;CAChC,UAAA,oBAAC,OAAD;EAAK,cAAY;EAAO,WAAWD,SAAO;EAAO,MAAK;EACpD,UAAA,oBAAC,OAAD;GAAK,WAAWA,SAAO;GACpB,UAAA,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;IAC5B,MAAM,UAAU,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU;IAC3D,MAAM,YAAY,KAAK,QAAQ,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ;IAE9E,OACE,qBAAC,UAAD;KACE,gBAAc;KACd,WAAW,GAAGA,SAAO,MAAM,UAAUA,SAAO,UAAU;KAEtD,MAAK;KACL,OAAO,KAAK;KACZ,MAAK;KACL,eAAe,SAAS,KAAK,GAAG;KAPlC,UAAA,CASE,oBAAC,QAAD;MAAM,WAAW,GAAGA,SAAO,OAAO,UAAUA,SAAO,WAAW;MAAI,UAAA,KAAK;KAAY,CAAA,GACnF,oBAAC,QAAD;MAAM,WAAW,GAAGA,SAAO,OAAO,aAAa,WAAW,KAAK,KAAM;MAClE,UAAA,KAAK,UACJ,oBAAC,UAAD;OAAU,QAAQ;OAAI,QAAQ;OAAG,OAAO;MAAK,CAAA,IAC3C,UACF,YAEA,YAAY,KAAK,KAAM;KAErB,CAAA,CACA;IAhBD,GAAA,KAAK,GAgBJ;GAEZ,CAAC;EACE,CAAA;CACF,CAAA;AACE,CAAA;AAGX,YAAY,cAAc"}

package/es/dashboard/FilterStrip/style.mjs

@@ -67,9 +67,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorWarning};
   `,
 	frame: css`
-    --filter-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+    --filter-seam: ${cssVar.colorFillSecondary};
 
     overflow: hidden;
+    border-radius: inherit;
   `,
 	grid: css`
     display: grid;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n    margin: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    background: transparent;\n    box-shadow:\n      inset -1px 0 0 var(--filter-seam),\n      inset 0 -1px 0 var(--filter-seam);\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-end: 1px;\n      inset-inline: 0;\n\n      block-size: 3px;\n\n      background: transparent;\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  cellActive: css`\n    background: ${cssVar.colorFillTertiary};\n\n    &::after {\n      background: ${cssVar.colorText};\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  count: css`\n    font-size: ${cssVar.fontSizeHeading4};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n  `,\n  countDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  countWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n  frame: css`\n    --filter-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n\n    overflow: hidden;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  labelActive: css`\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsCS,OAAO,oBAAoB;;;CAG7C,YAAY,GAAG;kBACC,OAAO,kBAAkB;;;oBAGvB,OAAO,UAAU;;;;oBAIjB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;iBACK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;CAE5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;CAE/B,OAAO,GAAG;wCAC4B,OAAO,UAAU;;;;CAIvD,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,aAAa,GAAG;aACL,OAAO,UAAU;;AAE9B,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n    margin: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    background: transparent;\n    box-shadow:\n      inset -1px 0 0 var(--filter-seam),\n      inset 0 -1px 0 var(--filter-seam);\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-end: 1px;\n      inset-inline: 0;\n\n      block-size: 3px;\n\n      background: transparent;\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  cellActive: css`\n    background: ${cssVar.colorFillTertiary};\n\n    &::after {\n      background: ${cssVar.colorText};\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  count: css`\n    font-size: ${cssVar.fontSizeHeading4};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n  `,\n  countDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  countWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n  frame: css`\n    --filter-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  labelActive: css`\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsCS,OAAO,oBAAoB;;;CAG7C,YAAY,GAAG;kBACC,OAAO,kBAAkB;;;oBAGvB,OAAO,UAAU;;;;oBAIjB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;iBACK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;CAE5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;CAE/B,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;CAK7C,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,aAAa,GAAG;aACL,OAAO,UAAU;;AAE9B,EAAE"}

package/es/dashboard/MetricStrip/MetricCell.mjs

@@ -0,0 +1,81 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/dashboard/MetricStrip/MetricCell.tsx
+const deltaClass = {
+	down: styles.deltaDown,
+	flat: styles.deltaFlat,
+	up: styles.deltaUp
+};
+const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsxs("div", {
+		className: styles.head,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.headCopy,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: styles.label,
+				children: item.label
+			}), item.action]
+		}), item.mark ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: styles.mark,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: item.mark,
+				size: 14
+			})
+		}) : null]
+	}),
+	loading ? /* @__PURE__ */ jsx(Skeleton, {
+		height: 28,
+		radius: 6,
+		width: 88
+	}) : /* @__PURE__ */ jsx("div", {
+		className: cx(styles.value, item.valueTone === "danger" && styles.valueDanger, item.valueTone === "warning" && styles.valueWarning),
+		children: item.value
+	}),
+	!loading && (item.delta || item.hint) ? /* @__PURE__ */ jsxs("div", {
+		className: styles.foot,
+		children: [item.delta ? /* @__PURE__ */ jsx("span", {
+			className: cx(styles.delta, deltaClass[item.direction ?? "flat"]),
+			children: item.delta
+		}) : null, item.hint ? /* @__PURE__ */ jsx("span", {
+			className: styles.hint,
+			children: item.hint
+		}) : null]
+	}) : null
+] });
+/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */
+const MetricCell = ({ item, loading, renderLink, seam = false }) => {
+	const link = useSurfaceLink(renderLink);
+	const body = /* @__PURE__ */ jsx(MetricBody, {
+		item,
+		loading: item.loading ?? loading
+	});
+	const cell = cx(styles.cell, seam && styles.cellSeam);
+	if (item.href) return /* @__PURE__ */ jsx("div", {
+		className: styles.slot,
+		children: link({
+			children: body,
+			className: cx(cell, styles.link),
+			href: item.href
+		})
+	});
+	if (item.onClick) return /* @__PURE__ */ jsx("button", {
+		className: cx(cell, styles.press),
+		type: "button",
+		onClick: item.onClick,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cell,
+		children: body
+	});
+};
+//#endregion
+export { MetricCell as default };
+
+//# sourceMappingURL=MetricCell.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCell.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricCell.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaClass = {\n  down: styles.deltaDown,\n  flat: styles.deltaFlat,\n  up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n  <>\n    <div className={styles.head}>\n      <div className={styles.headCopy}>\n        <div className={styles.label}>{item.label}</div>\n        {item.action}\n      </div>\n      {item.mark ? (\n        <span aria-hidden className={styles.mark}>\n          <Icon icon={item.mark} size={14} />\n        </span>\n      ) : null}\n    </div>\n    {loading ? (\n      <Skeleton height={28} radius={6} width={88} />\n    ) : (\n      <div\n        className={cx(\n          styles.value,\n          item.valueTone === 'danger' && styles.valueDanger,\n          item.valueTone === 'warning' && styles.valueWarning,\n        )}\n      >\n        {item.value}\n      </div>\n    )}\n    {!loading && (item.delta || item.hint) ? (\n      <div className={styles.foot}>\n        {item.delta ? (\n          <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n            {item.delta}\n          </span>\n        ) : null}\n        {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n      </div>\n    ) : null}\n  </>\n);\n\nexport interface MetricCellProps {\n  item: MetricItem;\n  loading?: boolean;\n  renderLink?: SurfaceRenderLink;\n  /** Draw the joined-strip divider on the trailing and bottom edges. */\n  seam?: boolean;\n}\n\n/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */\nconst MetricCell = ({ item, loading, renderLink, seam = false }: MetricCellProps) => {\n  const link = useSurfaceLink(renderLink);\n  const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n  const cell = cx(styles.cell, seam && styles.cellSeam);\n\n  if (item.href) {\n    return (\n      <div className={styles.slot}>\n        {link({ children: body, className: cx(cell, styles.link), href: item.href })}\n      </div>\n    );\n  }\n  if (item.onClick) {\n    return (\n      <button className={cx(cell, styles.press)} type=\"button\" onClick={item.onClick}>\n        {body}\n      </button>\n    );\n  }\n  return <div className={cell}>{body}</div>;\n};\n\nexport default MetricCell;\n"],"mappings":";;;;;;;;AAYA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA,KAAK;GAAW,CAAA,GAC9C,KAAK,MACH;EACJ,CAAA,GAAA,KAAK,OACJ,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,OAAO;GAClC,UAAA,oBAAC,MAAD;IAAM,MAAM,KAAK;IAAM,MAAM;GAAK,CAAA;EAC9B,CAAA,IACJ,IACD;;CACJ,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;AACJ,EAAA,CAAA;;AAYJ,MAAM,cAAc,EAAE,MAAM,SAAS,YAAY,OAAO,YAA6B;CACnF,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,KAAK,WAAW;CAAU,CAAA;CACxE,MAAM,OAAO,GAAG,OAAO,MAAM,QAAQ,OAAO,QAAQ;CAEpD,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,KAAK;GAAE,UAAU;GAAM,WAAW,GAAG,MAAM,OAAO,IAAI;GAAG,MAAM,KAAK;EAAK,CAAC;CACxE,CAAA;CAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,MAAM,OAAO,KAAK;EAAG,MAAK;EAAS,SAAS,KAAK;EACpE,UAAA;CACK,CAAA;CAGZ,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAO,UAAA;CAAU,CAAA;AAC1C"}

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

@@ -1,8 +1,11 @@
 import { MetricStripProps } from "./type.mjs";
 //#region src/dashboard/MetricStrip/MetricStrip.d.ts
-/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */
+/**
+ * Peer metrics. `joined` shares one card divided into cells; `split` gives each item its own card,
+ * identical to StatCard.
+ */
 declare const MetricStrip: {
-  ({ items, loading, renderLink }: MetricStripProps): import("react").JSX.Element;
+  ({ items, loading, renderLink, variant }: MetricStripProps): import("react").JSX.Element;
   displayName: string;
 };
 //#endregion

package/es/dashboard/MetricStrip/MetricStrip.mjs

@@ -1,73 +1,44 @@
 "use client";
-import Skeleton from "../../base-ui/Skeleton/index.mjs";
-import { useSurfaceLink } from "../Surface/link.mjs";
+import { styles } from "../Surface/style.mjs";
+import { useSurfaceCardClassName } from "../Surface/link.mjs";
 import Surface from "../Surface/Surface.mjs";
-import { styles } from "./style.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { styles as styles$1 } from "./style.mjs";
+import MetricCell from "./MetricCell.mjs";
+import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 //#region src/dashboard/MetricStrip/MetricStrip.tsx
-const deltaClass = {
-	down: styles.deltaDown,
-	flat: styles.deltaFlat,
-	up: styles.deltaUp
-};
-const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-	/* @__PURE__ */ jsx("div", {
-		className: styles.label,
-		children: item.label
-	}),
-	loading ? /* @__PURE__ */ jsx(Skeleton, {
-		height: 28,
-		radius: 6,
-		width: 88
-	}) : /* @__PURE__ */ jsx("div", {
-		className: cx(styles.value, item.valueTone === "danger" && styles.valueDanger, item.valueTone === "warning" && styles.valueWarning),
-		children: item.value
-	}),
-	!loading && (item.delta || item.hint) ? /* @__PURE__ */ jsxs("div", {
-		className: styles.foot,
-		children: [item.delta ? /* @__PURE__ */ jsx("span", {
-			className: cx(styles.delta, deltaClass[item.direction ?? "flat"]),
-			children: item.delta
-		}) : null, item.hint ? /* @__PURE__ */ jsx("span", {
-			className: styles.hint,
-			children: item.hint
-		}) : null]
-	}) : null
-] });
-/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */
-const MetricStrip = ({ items, loading, renderLink }) => {
-	const link = useSurfaceLink(renderLink);
-	return /* @__PURE__ */ jsx(Surface, { children: /* @__PURE__ */ jsx("div", {
-		className: styles.frame,
+/**
+* Peer metrics. `joined` shares one card divided into cells; `split` gives each item its own card,
+* identical to StatCard.
+*/
+const MetricStrip = ({ items, loading, renderLink, variant = "joined" }) => {
+	const cardClassName = useSurfaceCardClassName();
+	if (variant === "split") return /* @__PURE__ */ jsx("div", {
+		className: styles$1.split,
+		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+			className: cx(styles$1.card, cardClassName, styles.clip),
+			children: /* @__PURE__ */ jsx(MetricCell, {
+				item,
+				loading,
+				renderLink
+			})
+		}, index))
+	});
+	return /* @__PURE__ */ jsx(Surface, {
+		className: styles.clip,
 		children: /* @__PURE__ */ jsx("div", {
-			className: styles.grid,
-			children: items.map((item, index) => {
-				const body = /* @__PURE__ */ jsx(MetricBody, {
+			className: styles$1.frame,
+			children: /* @__PURE__ */ jsx("div", {
+				className: styles$1.grid,
+				children: items.map((item, index) => /* @__PURE__ */ jsx(MetricCell, {
+					seam: true,
 					item,
-					loading: item.loading ?? loading
-				});
-				if (item.href) return /* @__PURE__ */ jsx("div", {
-					className: styles.slot,
-					children: link({
-						children: body,
-						className: cx(styles.cell, styles.link),
-						href: item.href
-					})
-				}, `${index}:${item.href}`);
-				if (item.onClick) return /* @__PURE__ */ jsx("button", {
-					className: cx(styles.cell, styles.press),
-					type: "button",
-					onClick: item.onClick,
-					children: body
-				}, index);
-				return /* @__PURE__ */ jsx("div", {
-					className: styles.cell,
-					children: body
-				}, index);
+					loading,
+					renderLink
+				}, index))
 			})
 		})
-	}) });
+	});
 };
 MetricStrip.displayName = "MetricStrip";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"MetricStrip.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { MetricItem, MetricStripProps } from './type';\n\nconst deltaClass = {\n  down: styles.deltaDown,\n  flat: styles.deltaFlat,\n  up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n  <>\n    <div className={styles.label}>{item.label}</div>\n    {loading ? (\n      <Skeleton height={28} radius={6} width={88} />\n    ) : (\n      <div\n        className={cx(\n          styles.value,\n          item.valueTone === 'danger' && styles.valueDanger,\n          item.valueTone === 'warning' && styles.valueWarning,\n        )}\n      >\n        {item.value}\n      </div>\n    )}\n    {!loading && (item.delta || item.hint) ? (\n      <div className={styles.foot}>\n        {item.delta ? (\n          <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n            {item.delta}\n          </span>\n        ) : null}\n        {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n      </div>\n    ) : null}\n  </>\n);\n\n/** One card, divided into metrics. Peer numbers share a surface instead of a row of equal cards. */\nconst MetricStrip = ({ items, loading, renderLink }: MetricStripProps) => {\n  const link = useSurfaceLink(renderLink);\n\n  return (\n    <Surface>\n      <div className={styles.frame}>\n        <div className={styles.grid}>\n          {items.map((item, index) => {\n            const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n            if (item.href) {\n              return (\n                <div className={styles.slot} key={`${index}:${item.href}`}>\n                  {link({\n                    children: body,\n                    className: cx(styles.cell, styles.link),\n                    href: item.href,\n                  })}\n                </div>\n              );\n            }\n            if (item.onClick) {\n              return (\n                <button\n                  className={cx(styles.cell, styles.press)}\n                  key={index}\n                  type=\"button\"\n                  onClick={item.onClick}\n                >\n                  {body}\n                </button>\n              );\n            }\n            return (\n              <div className={styles.cell} key={index}>\n                {body}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </Surface>\n  );\n};\n\nMetricStrip.displayName = 'MetricStrip';\n\nexport default MetricStrip;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAQ,UAAA,KAAK;CAAW,CAAA;CAC9C,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;AACJ,EAAA,CAAA;;AAIJ,MAAM,eAAe,EAAE,OAAO,SAAS,iBAAmC;CACxE,MAAM,OAAO,eAAe,UAAU;CAEtC,OACE,oBAAC,SAAD,EAAA,UACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAW,OAAO;GACpB,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,OAAO,oBAAC,YAAD;KAAkB;KAAM,SAAS,KAAK,WAAW;IAAU,CAAA;IACxE,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA,KAAK;MACJ,UAAU;MACV,WAAW,GAAG,OAAO,MAAM,OAAO,IAAI;MACtC,MAAM,KAAK;KACb,CAAC;IACE,GAN6B,GAAG,MAAM,GAAG,KAAK,MAM9C;IAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;KACE,WAAW,GAAG,OAAO,MAAM,OAAO,KAAK;KAEvC,MAAK;KACL,SAAS,KAAK;KAEb,UAAA;IACK,GALD,KAKC;IAGZ,OACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KACpB,UAAA;IACE,GAF6B,KAE7B;GAET,CAAC;EACE,CAAA;CACF,CAAA,EACE,CAAA;AAEb;AAEA,YAAY,cAAc"}
+{"version":3,"file":"MetricStrip.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/MetricStrip/MetricStrip.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport MetricCell from './MetricCell';\nimport { styles } from './style';\nimport type { MetricStripProps } from './type';\n\n/**\n * Peer metrics. `joined` shares one card divided into cells; `split` gives each item its own card,\n * identical to StatCard.\n */\nconst MetricStrip = ({ items, loading, renderLink, variant = 'joined' }: MetricStripProps) => {\n  const cardClassName = useSurfaceCardClassName();\n\n  if (variant === 'split') {\n    return (\n      <div className={styles.split}>\n        {items.map((item, index) => (\n          <div className={cx(styles.card, cardClassName, surfaceStyles.clip)} key={index}>\n            <MetricCell item={item} loading={loading} renderLink={renderLink} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <Surface className={surfaceStyles.clip}>\n      <div className={styles.frame}>\n        <div className={styles.grid}>\n          {items.map((item, index) => (\n            <MetricCell seam item={item} key={index} loading={loading} renderLink={renderLink} />\n          ))}\n        </div>\n      </div>\n    </Surface>\n  );\n};\n\nMetricStrip.displayName = 'MetricStrip';\n\nexport default MetricStrip;\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,eAAe,EAAE,OAAO,SAAS,YAAY,UAAU,eAAiC;CAC5F,MAAM,gBAAgB,wBAAwB;CAE9C,IAAI,YAAY,SACd,OACE,oBAAC,OAAD;EAAK,WAAWA,SAAO;EACpB,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,OAAD;GAAK,WAAW,GAAGA,SAAO,MAAM,eAAeC,OAAc,IAAI;GAC/D,UAAA,oBAAC,YAAD;IAAkB;IAAe;IAAqB;GAAa,CAAA;EAChE,GAFoE,KAEpE,CACN;CACE,CAAA;CAIT,OACE,oBAAC,SAAD;EAAS,WAAWA,OAAc;EAChC,UAAA,oBAAC,OAAD;GAAK,WAAWD,SAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAWA,SAAO;IACpB,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,YAAD;KAAY,MAAA;KAAW;KAA2B;KAAqB;IAAa,GAAlD,KAAkD,CACrF;GACE,CAAA;EACF,CAAA;CACE,CAAA;AAEb;AAEA,YAAY,cAAc"}

package/es/dashboard/MetricStrip/style.mjs

@@ -10,10 +10,54 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     padding-block: 16px;
     padding-inline: 20px;
 
-    background: ${cssVar.colorBgElevated};
+    background: transparent;
+  `,
+	/** Joined strip only: the divider on the cell's trailing and bottom edges. */
+	cellSeam: css`
     box-shadow:
       inset -1px 0 0 var(--metric-seam),
       inset 0 -1px 0 var(--metric-seam);
+  `,
+	/** Split strip and StatCard: one card per item. */
+	card: css`
+    display: grid;
+    min-inline-size: 0;
+  `,
+	head: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: space-between;
+
+    box-sizing: border-box;
+    min-inline-size: 0;
+    block-size: 32px;
+  `,
+	headCopy: css`
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    min-inline-size: 0;
+  `,
+	mark: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 24px;
+    block-size: 24px;
+    border: 1px solid ${cssVar.colorFillSecondary};
+    border-radius: ${cssVar.borderRadiusSM};
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	split: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
   `,
 	delta: css`
     font-size: 13px;
@@ -41,10 +85,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	* track, which reads louder than the cells.
 	*/
 	frame: css`
-    --metric-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+    --metric-seam: ${cssVar.colorFillSecondary};
 
     overflow: hidden;
-    background: ${cssVar.colorBgElevated};
+    border-radius: inherit;
+    background: transparent;
   `,
 	grid: css`
     display: grid;
@@ -53,7 +98,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     inline-size: calc(100% + 1px);
     margin-block-end: -1px;
 
-    background: ${cssVar.colorBgElevated};
+    background: transparent;
   `,
 	hint: css`
     font-size: 13px;

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\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: css`\n    --metric-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);\n\n    overflow: hidden;\n    background: ${cssVar.colorBgElevated};\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;kBASO,OAAO,gBAAgB;;;;;CAKvC,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;wCAC4B,OAAO,UAAU;;;kBAGvC,OAAO,gBAAgB;;CAEvC,MAAM,GAAG;;;;;;;kBAOO,OAAO,gBAAgB;;CAEvC,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    min-inline-size: 0;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\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: css`\n    --metric-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;;CAM7C,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}

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

@@ -1,7 +1,11 @@
+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
 interface MetricItem {
+  /** Control on the label row, such as a menu. */
+  action?: ReactNode;
   delta?: ReactNode;
   direction?: 'up' | 'down' | 'flat';
   hint?: ReactNode;
@@ -9,6 +13,8 @@ interface MetricItem {
   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. */
@@ -19,6 +25,12 @@ interface MetricStripProps {
   /** 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
 export { MetricItem, MetricStripProps };