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

package/es/dashboard/FilterSidebar/FilterSidebar.mjs

@@ -3,10 +3,10 @@ import { styleProps } from "../../styles/stylex/props.mjs";
 import Button from "../../Button/Button.mjs";
 import Drawer from "../../Drawer/Drawer.mjs";
 import DraggablePanel from "../../DraggablePanel/DraggablePanel.mjs";
-import { styles } from "../Surface/style.mjs";
+import { useSurfaceCardStyles } from "../Surface/link.mjs";
 import { useIsCompact, useLocalStorage } from "../hooks.mjs";
 import { FilterSplitProvider } from "./context.mjs";
-import { styles as styles$1 } from "./style.mjs";
+import { styles } from "./style.mjs";
 import { clampSidebarWidth, sidebarWidth } from "./width.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,6 +37,7 @@ function usePageSidebar(wide, storageKey) {
 	};
 }
 function FilterSidebar({ body, children, flush, head, header, label, storageKey, summary, wide }) {
+	const cardStyles = useSurfaceCardStyles();
 	const isCompact = useIsCompact();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	const sidebar = usePageSidebar(wide, storageKey);
@@ -44,7 +45,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 	if (isCompact) return /* @__PURE__ */ jsx(FilterSplitProvider, {
 		active: !flush,
 		children: /* @__PURE__ */ jsxs("div", {
-			...stylex.props(styles$1.layout),
+			...stylex.props(styles.layout),
 			children: [
 				header,
 				/* @__PURE__ */ jsx(Button, {
@@ -60,12 +61,12 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 					width: 300,
 					onClose: close,
 					children: /* @__PURE__ */ jsxs("div", {
-						...stylex.props(styles$1.drawerPanel),
+						...stylex.props(styles.drawerPanel),
 						children: [head?.(close), body(close)]
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
-					...styleProps(styles$1.content, contentClassName),
+					...styleProps(styles.content, contentClassName),
 					children
 				})
 			]
@@ -74,7 +75,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 	return /* @__PURE__ */ jsx(FilterSplitProvider, {
 		active: !flush,
 		children: /* @__PURE__ */ jsxs("div", {
-			...stylex.props(styles$1.layout, flush ? styles$1.layoutFlush : [styles.card, styles$1.layoutSplit]),
+			...stylex.props(styles.layout, flush ? styles.layoutFlush : [cardStyles, styles.layoutSplit]),
 			"data-flush": flush ? true : void 0,
 			"data-page-layout": flush ? "flush" : void 0,
 			"data-split-card": flush ? void 0 : true,
@@ -82,7 +83,7 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 				expandable: true,
 				showHandleWhenCollapsed: true,
 				"aria-label": label,
-				className: stylex.props(styles$1.sidebar, flush && styles$1.sidebarFlush).className,
+				className: stylex.props(styles.sidebar, flush && styles.sidebarFlush).className,
 				collapseThreshold: sidebarWidth.collapse,
 				"data-flush": flush ? true : void 0,
 				defaultSize: { width: wide ? sidebarWidth.wide : sidebarWidth.narrow },
@@ -93,20 +94,20 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 				placement: "left",
 				showBorder: false,
 				size: { width: sidebar.width },
-				classNames: { content: stylex.props(styles$1.panel, !flush && styles$1.panelSplit).className },
+				classNames: { content: stylex.props(styles.panel, !flush && styles.panelSplit).className },
 				onExpandChange: sidebar.onExpandChange,
 				onSizeChange: (_delta, size) => sidebar.onSizeChange(size),
 				children: [head ? /* @__PURE__ */ jsx("div", {
-					...stylex.props(styles$1.head),
+					...stylex.props(styles.head),
 					children: head(close)
 				}) : null, /* @__PURE__ */ jsx("div", {
 					"data-flush": flush ? true : void 0,
-					...stylex.props(styles$1.body, flush && styles$1.bodyFlush),
+					...stylex.props(styles.body, flush && styles.bodyFlush),
 					children: body(close)
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-flush": flush ? true : void 0,
-				...styleProps([styles$1.content, flush ? styles$1.contentFlush : styles$1.contentSplit], contentClassName),
+				...styleProps([styles.content, flush ? styles.contentFlush : styles.contentSplit], contentClassName),
 				children: [header, children]
 			})]
 		})
@@ -115,12 +116,12 @@ function FilterSidebar({ body, children, flush, head, header, label, storageKey,
 FilterSidebar.displayName = "FilterSidebar";
 function FilterRow({ count, name }) {
 	return /* @__PURE__ */ jsxs("span", {
-		...stylex.props(styles$1.row),
+		...stylex.props(styles.row),
 		children: [/* @__PURE__ */ jsx("span", {
-			...stylex.props(styles$1.name),
+			...stylex.props(styles.name),
 			children: name
 		}), count !== void 0 ? /* @__PURE__ */ jsx("span", {
-			...stylex.props(styles$1.count),
+			...stylex.props(styles.count),
 			children: count
 		}) : null]
 	});
@@ -133,15 +134,15 @@ function FilterOption({ count, icon, label, name, onClick, selected, title }) {
 		title,
 		type: "button",
 		onClick,
-		...stylex.props(styles$1.option),
+		...stylex.props(styles.option),
 		children: [
 			icon,
 			/* @__PURE__ */ jsx("span", {
-				...stylex.props(styles$1.name),
+				...stylex.props(styles.name),
 				children: name
 			}),
 			count !== void 0 ? /* @__PURE__ */ jsx("span", {
-				...stylex.props(styles$1.count),
+				...stylex.props(styles.count),
 				children: count
 			}) : null
 		]

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 './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/Button';\nimport { DraggablePanel } from '@/DraggablePanel';\nimport { Drawer } from '@/Drawer';\nimport { styleProps } from '@/styles/stylex/props';\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\nconst contentClassName = 'lobe-filter-sidebar-content';\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 {...stylex.props(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 {...stylex.props(styles.drawerPanel)}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div {...styleProps(styles.content, contentClassName)}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        {...stylex.props(\n          styles.layout,\n          flush ? styles.layoutFlush : [surfaceStyles.card, styles.layoutSplit],\n        )}\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={stylex.props(styles.sidebar, flush && styles.sidebarFlush).className}\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          classNames={{\n            content: stylex.props(styles.panel, !flush && styles.panelSplit).className,\n          }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div {...stylex.props(styles.head)}>{head(close)}</div> : null}\n          <div\n            data-flush={flush ? true : undefined}\n            {...stylex.props(styles.body, flush && styles.bodyFlush)}\n          >\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div\n          data-flush={flush ? true : undefined}\n          {...styleProps(\n            [styles.content, flush ? styles.contentFlush : styles.contentSplit],\n            contentClassName,\n          )}\n        >\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 {...stylex.props(styles.row)}>\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(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      title={title}\n      type=\"button\"\n      onClick={onClick}\n      {...stylex.props(styles.option)}\n    >\n      {icon}\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(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 './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Filter } from 'lucide-react';\nimport { useState } from 'react';\n\nimport Button from '@/Button';\nimport { DraggablePanel } from '@/DraggablePanel';\nimport { Drawer } from '@/Drawer';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useIsCompact, useLocalStorage } from '../hooks';\nimport { useSurfaceCardStyles } from '../Surface/link';\nimport { FilterSplitProvider } from './context';\nimport { styles } from './style';\nimport type { FilterOptionProps, FilterRowProps, FilterSidebarProps } from './type';\nimport { clampSidebarWidth, sidebarWidth } from './width';\n\nconst contentClassName = 'lobe-filter-sidebar-content';\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 cardStyles = useSurfaceCardStyles();\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 {...stylex.props(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 {...stylex.props(styles.drawerPanel)}>\n              {head?.(close)}\n              {body(close)}\n            </div>\n          </Drawer>\n          <div {...styleProps(styles.content, contentClassName)}>{children}</div>\n        </div>\n      </FilterSplitProvider>\n    );\n  }\n\n  return (\n    <FilterSplitProvider active={!flush}>\n      <div\n        {...stylex.props(\n          styles.layout,\n          flush ? styles.layoutFlush : [cardStyles, styles.layoutSplit],\n        )}\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={stylex.props(styles.sidebar, flush && styles.sidebarFlush).className}\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          classNames={{\n            content: stylex.props(styles.panel, !flush && styles.panelSplit).className,\n          }}\n          onExpandChange={sidebar.onExpandChange}\n          onSizeChange={(_delta, size) => sidebar.onSizeChange(size)}\n        >\n          {head ? <div {...stylex.props(styles.head)}>{head(close)}</div> : null}\n          <div\n            data-flush={flush ? true : undefined}\n            {...stylex.props(styles.body, flush && styles.bodyFlush)}\n          >\n            {body(close)}\n          </div>\n        </DraggablePanel>\n        <div\n          data-flush={flush ? true : undefined}\n          {...styleProps(\n            [styles.content, flush ? styles.contentFlush : styles.contentSplit],\n            contentClassName,\n          )}\n        >\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 {...stylex.props(styles.row)}>\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(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      title={title}\n      type=\"button\"\n      onClick={onClick}\n      {...stylex.props(styles.option)}\n    >\n      {icon}\n      <span {...stylex.props(styles.name)}>{name}</span>\n      {count !== undefined ? <span {...stylex.props(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.d.mts

@@ -0,0 +1,11 @@
+import { FilterStripProps } from "./type.mjs";
+//#region src/dashboard/FilterStrip/FilterStrip.d.ts
+export declare const formatInteger: (count: number) => string;
+/** One surface of selectable counts. Peer filters share a seam instead of a row of equal cards. */
+declare const FilterStrip: {
+  ({ emptyText, formatCount, items, label, onChange, value }: FilterStripProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { FilterStrip as default };
+//# sourceMappingURL=FilterStrip.d.mts.map

package/es/dashboard/FilterStrip/FilterStrip.mjs

@@ -0,0 +1,55 @@
+"use client";
+import Skeleton from "../../Skeleton/index.mjs";
+import { styles } from "../Surface/style.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/FilterStrip/FilterStrip.tsx
+const countStyles = {
+	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, {
+	className: stylex.props(styles.clip).className,
+	children: /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		role: "radiogroup",
+		...stylex.props(styles$1.frame),
+		children: /* @__PURE__ */ jsx("div", {
+			...stylex.props(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,
+					role: "radio",
+					title: item.hint,
+					type: "button",
+					onClick: () => onChange(item.key),
+					...stylex.props(styles$1.cell, active && styles$1.cellActive),
+					children: [/* @__PURE__ */ jsx("span", {
+						...stylex.props(styles$1.label, active && styles$1.labelActive),
+						children: item.label
+					}), /* @__PURE__ */ jsx("span", {
+						...stylex.props(styles$1.count, emphasize && countStyles[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 };
+
+//# sourceMappingURL=FilterStrip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterStrip.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/FilterStrip/FilterStrip.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport Skeleton from '@/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 countStyles = {\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={stylex.props(surfaceStyles.clip).className}>\n    <div aria-label={label} role=\"radiogroup\" {...stylex.props(styles.frame)}>\n      <div {...stylex.props(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              key={item.key}\n              role=\"radio\"\n              title={item.hint}\n              type=\"button\"\n              onClick={() => onChange(item.key)}\n              {...stylex.props(styles.cell, active && styles.cellActive)}\n            >\n              <span {...stylex.props(styles.label, active && styles.labelActive)}>\n                {item.label}\n              </span>\n              <span {...stylex.props(styles.count, emphasize && countStyles[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":";;;;;;;;AAQA,MAAM,cAAc;CAClB,QAAQA,SAAO;CACf,SAASA,SAAO;AAClB;AACA,MAAM,gBAAgB,IAAI,KAAK,aAAa,SAAS,EACnD,uBAAuB,EACzB,CAAC;AACD,MAAa,iBAAiB,UAAkB,cAAc,OAAO,KAAK;;AAG1E,MAAM,eAAe,EACnB,YAAY,MACZ,cAAc,eACd,OACA,OACA,UACA,YACsB,oBAAC,SAAD;CAAS,WAAW,OAAO,MAAMC,OAAc,IAAI,CAAC,CAAC;CACzE,UAAA,oBAAC,OAAD;EAAK,cAAY;EAAO,MAAK;EAAa,GAAI,OAAO,MAAMD,SAAO,KAAK;EACrE,UAAA,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAMA,SAAO,IAAI;GAC9B,UAAA,MAAM,KAAI,SAAQ;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;IAC9E,OAAO,qBAAC,UAAD;KAAQ,gBAAc;KAAuB,MAAK;KAAQ,OAAO,KAAK;KAAM,MAAK;KAAS,eAAe,SAAS,KAAK,GAAG;KAAG,GAAI,OAAO,MAAMA,SAAO,MAAM,UAAUA,SAAO,UAAU;KAAtL,UAAA,CACD,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAMA,SAAO,OAAO,UAAUA,SAAO,WAAW;MAC9D,UAAA,KAAK;KACF,CAAA,GACN,oBAAC,QAAD;MAAM,GAAI,OAAO,MAAMA,SAAO,OAAO,aAAa,YAAY,KAAK,KAAM;MACtE,UAAA,KAAK,UAAU,oBAAC,UAAD;OAAU,QAAQ;OAAI,QAAQ;OAAG,OAAO;MAAK,CAAA,IAAI,UAAU,YAAY,YAAY,KAAK,KAAM;KAC1G,CAAA,CACA;IAP8B,GAAA,KAAK,GAOnC;GACd,CAAC;EACI,CAAA;CACF,CAAA;AACE,CAAA;AACX,YAAY,cAAc"}

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

@@ -0,0 +1,3 @@
+import { FilterStripItem, FilterStripProps } from "./type.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip.mjs";
+export { type FilterStripItem, type FilterStripProps, FilterStrip as default, formatInteger };

package/es/dashboard/FilterStrip/style.mjs

@@ -0,0 +1,78 @@
+//#region src/dashboard/FilterStrip/style.ts
+const styles = {
+	cell: {
+		kVVagm: "lbln7xf2",
+		kogj98: "lb1ghz6dp",
+		kMzoRj: "lbc342km",
+		kOIVth: "lb17d4w8g",
+		kg3NbH: "lb1hr3lfm",
+		kGNEyG: "lb1cy8zhl",
+		kWkggS: "lbjbqb8w lbql1cz1",
+		kGVxlE: "lb11szn1f",
+		kMwMTN: "lb1heor9g",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		k7Eaqz: "lbeuugli",
+		kGO01o: "lb1l90r2v",
+		kLKAdn: "lbyinxu5",
+		kVAEAm: "lb1n2onr6",
+		k9WMMc: "lb1yc453h",
+		kcktkL: "lbb7ltuz",
+		ks3ayO: "lbyhc2n1",
+		k4zj60: "lbar2jh8",
+		k5JduY: "lb1s928wv",
+		k8Iv0R: "lbexwc5z",
+		kwXMNM: "lb1j6awrg",
+		$$css: true
+	},
+	cellActive: {
+		kWkggS: "lbaljia1",
+		ks3ayO: "lb1qvhnq6",
+		$$css: true
+	},
+	count: {
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lb1x0ry8x",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lb1s688f",
+		kLWn49: "lb1uo3zyz",
+		$$css: true
+	},
+	countDanger: {
+		kMwMTN: "lb12ap7uz",
+		$$css: true
+	},
+	countWarning: {
+		kMwMTN: "lbgyvj36",
+		$$css: true
+	},
+	frame: {
+		"--filter-seam": "lb1osd58z",
+		kaIpWk: "lb1pjcqnp",
+		kVQacm: "lbb3r6kr",
+		$$css: true
+	},
+	grid: {
+		k1xSpc: "lbrvj5dj",
+		kumcoG: "lbwqfyl0",
+		kzqmXN: "lbjl7whj",
+		k1K539: "lb1jyxor1",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "lbc77et8",
+		kGuDYH: "lb4z9k3i",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lb37zpob",
+		$$css: true
+	},
+	labelActive: {
+		kMwMTN: "lb66ogz0",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  cell: {\n    'font': 'inherit',\n    'margin': 0,\n    'borderWidth': 0,\n    'gap': 6,\n    'paddingInline': 16,\n    'alignItems': 'flex-start',\n    'backgroundColor': { 'default': 'transparent', ':hover': cssVar.colorFillQuaternary },\n    'boxShadow': 'inset -1px 0 0 var(--filter-seam), inset 0 -1px 0 var(--filter-seam)',\n    'color': 'inherit',\n    'cursor': 'pointer',\n    'display': 'flex',\n    'flexDirection': 'column',\n    'minInlineSize': 0,\n    'paddingBlockEnd': 16,\n    'paddingBlockStart': 14,\n    'position': 'relative',\n    'textAlign': 'start',\n    '::after': {\n      insetInline: 0,\n      backgroundColor: 'transparent',\n      blockSize: 3,\n      content: '\"\"',\n      insetBlockEnd: 1,\n      position: 'absolute',\n    },\n  },\n  cellActive: {\n    'backgroundColor': cssVar.colorFillTertiary,\n    '::after': {\n      backgroundColor: cssVar.colorText,\n    },\n  },\n  count: {\n    color: cssVar.colorText,\n    fontSize: cssVar.fontSizeHeading4,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    lineHeight: 1.15,\n  },\n  countDanger: {\n    color: cssVar.colorError,\n  },\n  countWarning: {\n    color: cssVar.colorWarning,\n  },\n  frame: {\n    '--filter-seam': cssVar.colorFillSecondary,\n    'borderRadius': 'inherit',\n    'overflow': 'hidden',\n  },\n  grid: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(auto-fit, minmax(148px, 1fr))',\n    inlineSize: 'calc(100% + 1px)',\n    marginBlockEnd: -1,\n  },\n  label: {\n    color: cssVar.colorTextSecondary,\n    fontSize: 13,\n    fontWeight: 500,\n    lineHeight: 1.4,\n  },\n  labelActive: {\n    color: cssVar.colorText,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,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,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,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,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;CACA,OAAO;EACL,iBAAiB;EACjB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/dashboard/FilterStrip/type.d.ts
+export interface FilterStripItem {
+  count?: number;
+  /** Shown as the control's title. Definitions stay off the number so the row can be scanned. */
+  hint?: string;
+  key: string;
+  label: ReactNode;
+  loading?: boolean;
+  /** Colors the count only when it is greater than zero; a zero is not an incident. */
+  tone?: 'danger' | 'warning';
+}
+export interface FilterStripProps {
+  /** Shown when an item has no count. Defaults to `--`. */
+  emptyText?: ReactNode;
+  /** Formats a count. Defaults to a grouped integer, e.g. `12,345`. */
+  formatCount?: (count: number) => ReactNode;
+  items: FilterStripItem[];
+  /** Accessible name for the radio group. */
+  label: string;
+  onChange: (key: string) => void;
+  value: string;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/LabelWithKey/LabelWithKey.d.mts

@@ -0,0 +1,10 @@
+import { LabelWithKeyProps } from "./type.mjs";
+//#region src/dashboard/LabelWithKey/LabelWithKey.d.ts
+/** A human label followed by its machine key as a tag. */
+declare const LabelWithKey: {
+  ({ tag, title, ...rest }: LabelWithKeyProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { LabelWithKey as default };
+//# sourceMappingURL=LabelWithKey.d.mts.map

package/es/dashboard/LabelWithKey/LabelWithKey.mjs

@@ -0,0 +1,18 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Tag from "../../Tag/Tag.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dashboard/LabelWithKey/LabelWithKey.tsx
+/** A human label followed by its machine key as a tag. */
+const LabelWithKey = ({ tag, title, ...rest }) => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	gap: 8,
+	...rest,
+	children: [title, /* @__PURE__ */ jsx(Tag, { children: tag })]
+});
+LabelWithKey.displayName = "LabelWithKey";
+//#endregion
+export { LabelWithKey as default };
+
+//# sourceMappingURL=LabelWithKey.mjs.map

package/es/dashboard/LabelWithKey/LabelWithKey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelWithKey.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/LabelWithKey/LabelWithKey.tsx"],"sourcesContent":["'use client';\n\nimport { Flexbox } from '@/Flex';\nimport Tag from '@/Tag';\n\nimport type { LabelWithKeyProps } from './type';\n\n/** A human label followed by its machine key as a tag. */\nconst LabelWithKey = ({ tag, title, ...rest }: LabelWithKeyProps) => (\n  <Flexbox horizontal align={'center'} gap={8} {...rest}>\n    {title}\n    <Tag>{tag}</Tag>\n  </Flexbox>\n);\n\nLabelWithKey.displayName = 'LabelWithKey';\n\nexport default LabelWithKey;\n"],"mappings":";;;;;;AAQA,MAAM,gBAAgB,EAAE,KAAK,OAAO,GAAG,WACrC,qBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAU,KAAK;CAAG,GAAI;CAAjD,UAAA,CACG,OACD,oBAAC,KAAD,EAAA,UAAM,IAAS,CAAA,CACR;;AAGX,aAAa,cAAc"}

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

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

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

@@ -0,0 +1,11 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/LabelWithKey/type.d.ts
+export interface LabelWithKeyProps extends Omit<FlexboxProps, 'title'> {
+  /** The machine key shown as a tag after the label, e.g. a config or permission id. */
+  tag: ReactNode;
+  title: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/MetricStrip/MetricCell.mjs

@@ -0,0 +1,81 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Skeleton from "../../Skeleton/index.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/MetricStrip/MetricCell.tsx
+const deltaStyles = {
+	down: styles.deltaDown,
+	flat: styles.deltaFlat,
+	up: styles.deltaUp
+};
+const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.head),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...stylex.props(styles.headCopy),
+			children: [/* @__PURE__ */ jsx("div", {
+				...stylex.props(styles.label),
+				children: item.label
+			}), item.action]
+		}), item.mark ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			...stylex.props(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", {
+		...stylex.props(styles.value, item.valueTone === "danger" && styles.valueDanger, item.valueTone === "warning" && styles.valueWarning),
+		children: item.value
+	}),
+	!loading && (item.delta || item.hint) ? /* @__PURE__ */ jsxs("div", {
+		...stylex.props(styles.foot),
+		children: [item.delta ? /* @__PURE__ */ jsx("span", {
+			...stylex.props(styles.delta, deltaStyles[item.direction ?? "flat"]),
+			children: item.delta
+		}) : null, item.hint ? /* @__PURE__ */ jsx("span", {
+			...stylex.props(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 = [styles.cell, seam && styles.cellSeam];
+	if (item.href) return /* @__PURE__ */ jsx("div", {
+		...stylex.props(styles.slot),
+		children: link({
+			children: body,
+			className: stylex.props(cell, styles.link).className,
+			href: item.href
+		})
+	});
+	if (item.onClick) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: item.onClick,
+		...stylex.props(cell, styles.press),
+		children: body
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...stylex.props(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 * as stylex from '@stylexjs/stylex';\n\nimport Icon from '@/Icon';\nimport Skeleton from '@/Skeleton';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaStyles = {\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 {...stylex.props(styles.head)}>\n      <div {...stylex.props(styles.headCopy)}>\n        <div {...stylex.props(styles.label)}>{item.label}</div>\n        {item.action}\n      </div>\n      {item.mark ? (\n        <span aria-hidden {...stylex.props(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        {...stylex.props(\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 {...stylex.props(styles.foot)}>\n        {item.delta ? (\n          <span {...stylex.props(styles.delta, deltaStyles[item.direction ?? 'flat'])}>\n            {item.delta}\n          </span>\n        ) : null}\n        {item.hint ? <span {...stylex.props(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 = [styles.cell, seam && styles.cellSeam];\n\n  if (item.href) {\n    return (\n      <div {...stylex.props(styles.slot)}>\n        {link({\n          children: body,\n          className: stylex.props(cell, styles.link).className,\n          href: item.href,\n        })}\n      </div>\n    );\n  }\n  if (item.onClick) {\n    return (\n      <button type=\"button\" onClick={item.onClick} {...stylex.props(cell, styles.press)}>\n        {body}\n      </button>\n    );\n  }\n  return <div {...stylex.props(cell)}>{body}</div>;\n};\n\nexport default MetricCell;\n"],"mappings":";;;;;;;;AASA,MAAM,cAAc;CAClB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AACA,MAAM,cAAc,EAClB,MACA,cAII,qBAAA,UAAA,EAAA,UAAA;CACF,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,IAAI;EAAjC,UAAA,CACE,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;GAArC,UAAA,CACE,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI,UAAA,KAAK;GAAW,CAAA,GACrD,KAAK,MACH;EACJ,CAAA,GAAA,KAAK,OAAO,oBAAC,QAAD;GAAM,eAAA;GAAY,GAAI,OAAO,MAAM,OAAO,IAAI;GACvD,UAAA,oBAAC,MAAD;IAAM,MAAM,KAAK;IAAM,MAAM;GAAK,CAAA;EAC9B,CAAA,IAAI,IACT;;CACJ,UAAU,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAAI,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO,KAAK,cAAc,YAAY,OAAO,aAAa,KAAK,cAAc,aAAa,OAAO,YAAY;EACjM,UAAA,KAAK;CACH,CAAA;CACN,CAAC,YAAY,KAAK,SAAS,KAAK,QAAQ,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,IAAI;EAAjC,UAAA,CACpC,KAAK,QAAQ,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,OAAO,YAAY,KAAK,aAAa,OAAO;GACnF,UAAA,KAAK;EACF,CAAA,IAAI,MACX,KAAK,OAAO,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GAAI,UAAA,KAAK;EAAW,CAAA,IAAI,IACpE;CAAI,CAAA,IAAA;AACX,EAAA,CAAA;;AAUJ,MAAM,cAAc,EAClB,MACA,SACA,YACA,OAAO,YACc;CACrB,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,KAAK,WAAW;CAAU,CAAA;CACxE,MAAM,OAAO,CAAC,OAAO,MAAM,QAAQ,OAAO,QAAQ;CAClD,IAAI,KAAK,MACP,OAAO,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,IAAI;EACnC,UAAA,KAAK;GACN,UAAU;GACV,WAAW,OAAO,MAAM,MAAM,OAAO,IAAI,CAAC,CAAC;GAC3C,MAAM,KAAK;EACb,CAAC;CACI,CAAA;CAET,IAAI,KAAK,SACP,OAAO,oBAAC,UAAD;EAAQ,MAAK;EAAS,SAAS,KAAK;EAAS,GAAI,OAAO,MAAM,MAAM,OAAO,KAAK;EAClF,UAAA;CACK,CAAA;CAEZ,OAAO,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,IAAI;EAAI,UAAA;CAAU,CAAA;AACjD"}

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

@@ -0,0 +1,13 @@
+import { MetricStripProps } from "./type.mjs";
+//#region src/dashboard/MetricStrip/MetricStrip.d.ts
+/**
+ * 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, variant }: MetricStripProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { MetricStrip as default };
+//# sourceMappingURL=MetricStrip.d.mts.map

package/es/dashboard/MetricStrip/MetricStrip.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { styles } from "../Surface/style.mjs";
+import { useSurfaceCardStyles } from "../Surface/link.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import MetricCell from "./MetricCell.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/dashboard/MetricStrip/MetricStrip.tsx
+/**
+* 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 cardStyles = useSurfaceCardStyles();
+	if (variant === "split") return /* @__PURE__ */ jsx("div", {
+		...stylex.props(styles$1.split),
+		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles$1.card, cardStyles, styles.clip),
+			children: /* @__PURE__ */ jsx(MetricCell, {
+				item,
+				loading,
+				renderLink
+			})
+		}, index))
+	});
+	return /* @__PURE__ */ jsx(Surface, {
+		className: stylex.props(styles.clip).className,
+		children: /* @__PURE__ */ jsx("div", {
+			...stylex.props(styles$1.frame),
+			children: /* @__PURE__ */ jsx("div", {
+				...stylex.props(styles$1.grid),
+				children: items.map((item, index) => /* @__PURE__ */ jsx(MetricCell, {
+					seam: true,
+					item,
+					loading,
+					renderLink
+				}, index))
+			})
+		})
+	});
+};
+MetricStrip.displayName = "MetricStrip";
+//#endregion
+export { MetricStrip as default };
+
+//# sourceMappingURL=MetricStrip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricStrip.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/MetricStrip/MetricStrip.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { useSurfaceCardStyles } 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 cardStyles = useSurfaceCardStyles();\n\n  if (variant === 'split') {\n    return (\n      <div {...stylex.props(styles.split)}>\n        {items.map((item, index) => (\n          <div key={index} {...stylex.props(styles.card, cardStyles, surfaceStyles.clip)}>\n            <MetricCell item={item} loading={loading} renderLink={renderLink} />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <Surface className={stylex.props(surfaceStyles.clip).className}>\n      <div {...stylex.props(styles.frame)}>\n        <div {...stylex.props(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":";;;;;;;;;;;;;AAcA,MAAM,eAAe,EACnB,OACA,SACA,YACA,UAAU,eACY;CACtB,MAAM,aAAa,qBAAqB;CACxC,IAAI,YAAY,SACd,OAAO,oBAAC,OAAD;EAAK,GAAI,OAAO,MAAMA,SAAO,KAAK;EACpC,UAAA,MAAM,KAAK,MAAM,UAAU,oBAAC,OAAD;GAAiB,GAAI,OAAO,MAAMA,SAAO,MAAM,YAAYC,OAAc,IAAI;GACrG,UAAA,oBAAC,YAAD;IAAkB;IAAe;IAAqB;GAAa,CAAA;EAChE,GAF+B,KAE/B,CAAC;CACL,CAAA;CAET,OAAO,oBAAC,SAAD;EAAS,WAAW,OAAO,MAAMA,OAAc,IAAI,CAAC,CAAC;EACxD,UAAA,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAMD,SAAO,KAAK;GAChC,UAAA,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAMA,SAAO,IAAI;IAC9B,UAAA,MAAM,KAAK,MAAM,UAAU,oBAAC,YAAD;KAAY,MAAA;KAAW;KAA2B;KAAqB;IAAa,GAAlD,KAAkD,CAAC;GAC9G,CAAA;EACF,CAAA;CACE,CAAA;AACb;AACA,YAAY,cAAc"}

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

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