@lobehub/ui 5.58.0 → 5.59.0

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

@@ -0,0 +1,10 @@
+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. */
+declare const MetricStrip: {
+  ({ items, loading, renderLink }: 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,76 @@
+"use client";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } 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,
+		children: /* @__PURE__ */ jsx("div", {
+			className: styles.grid,
+			children: items.map((item, index) => {
+				const body = /* @__PURE__ */ jsx(MetricBody, {
+					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);
+			})
+		})
+	}) });
+};
+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":[],"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"}

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 };

package/es/dashboard/MetricStrip/style.mjs

@@ -0,0 +1,116 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/MetricStrip/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	cell: css`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    min-inline-size: 0;
+    padding-block: 16px;
+    padding-inline: 20px;
+
+    background: ${cssVar.colorBgElevated};
+    box-shadow:
+      inset -1px 0 0 var(--metric-seam),
+      inset 0 -1px 0 var(--metric-seam);
+  `,
+	delta: css`
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+  `,
+	deltaDown: css`
+    color: ${cssVar.colorError};
+  `,
+	deltaFlat: css`
+    color: ${cssVar.colorTextSecondary};
+  `,
+	deltaUp: css`
+    color: ${cssVar.colorSuccess};
+  `,
+	foot: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: baseline;
+  `,
+	/**
+	* Clips the seam that would otherwise sit on the card's trailing and bottom
+	* edges. A short last row used to show the seam color across the empty
+	* track, which reads louder than the cells.
+	*/
+	frame: css`
+    --metric-seam: color-mix(in srgb, ${cssVar.colorText} 10%, transparent);
+
+    overflow: hidden;
+    background: ${cssVar.colorBgElevated};
+  `,
+	grid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+
+    inline-size: calc(100% + 1px);
+    margin-block-end: -1px;
+
+    background: ${cssVar.colorBgElevated};
+  `,
+	hint: css`
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	label: css`
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	link: css`
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	press: css`
+    cursor: pointer;
+
+    border: none;
+
+    font: inherit;
+    color: inherit;
+    text-align: start;
+
+    &:hover {
+      background: ${cssVar.colorFillQuaternary};
+    }
+  `,
+	/** Grid cell around a rendered link, so the link fills it. */
+	slot: css`
+    display: grid;
+    min-inline-size: 0;
+  `,
+	value: css`
+    overflow: hidden;
+
+    font-size: ${cssVar.fontSizeHeading3};
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.15;
+    color: ${cssVar.colorText};
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	valueDanger: css`
+    color: ${cssVar.colorError};
+  `,
+	valueWarning: css`
+    color: ${cssVar.colorWarning};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { 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"}

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

@@ -0,0 +1,25 @@
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/MetricStrip/type.d.ts
+interface MetricItem {
+  delta?: ReactNode;
+  direction?: 'up' | 'down' | 'flat';
+  hint?: ReactNode;
+  href?: string;
+  label: ReactNode;
+  /** This cell only. Cells fed by different queries arrive at different times. */
+  loading?: boolean;
+  onClick?: () => void;
+  value: ReactNode;
+  /** Color the figure when the number itself is the thing to act on. */
+  valueTone?: 'danger' | 'warning';
+}
+interface MetricStripProps {
+  items: MetricItem[];
+  /** First load only: values become placeholders, labels stay. */
+  loading?: boolean;
+  renderLink?: SurfaceRenderLink;
+}
+//#endregion
+export { MetricItem, MetricStripProps };
+//# sourceMappingURL=type.d.mts.map

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

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

package/es/dashboard/PageToolbar/PageToolbar.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageToolbar.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/PageToolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport { styles } from './style';\nimport type { PageToolbarProps } from './type';\n\n/** Filters start at the left edge; actions hold the right edge, also after wrapping. */\nconst PageToolbar = ({ actions, children, className }: PageToolbarProps) => (\n  <div className={cx(styles.root, className)}>\n    {children ? <div className={styles.filters}>{children}</div> : null}\n    {actions ? <div className={styles.actions}>{actions}</div> : null}\n  </div>\n);\n\nPageToolbar.displayName = 'PageToolbar';\n\nexport default PageToolbar;\n"],"mappings":";;;;;;AAQA,MAAM,eAAe,EAAE,SAAS,UAAU,gBACxC,qBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,MAAM,SAAS;CAAzC,UAAA,CACG,WAAW,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU;CAAc,CAAA,IAAI,MAC9D,UAAU,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAU,UAAA;CAAa,CAAA,IAAI,IAC1D;;AAGP,YAAY,cAAc"}

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

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

package/es/dashboard/PageToolbar/style.mjs

@@ -0,0 +1,34 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PageToolbar/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	actions: css`
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    margin-inline-start: auto;
+  `,
+	filters: css`
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `,
+	root: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: center;
+
+    min-inline-size: 0;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageToolbar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  actions: css`\n    display: flex;\n    flex: none;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    margin-inline-start: auto;\n  `,\n  filters: css`\n    display: flex;\n    flex: 0 1 auto;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  root: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px 12px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,SAAS,GAAG;;;;;;;;;CASZ,SAAS,GAAG;;;;;;;;;CASZ,MAAM,GAAG;;;;;;;;AAQX,EAAE"}

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

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

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

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

package/es/dashboard/PanelSurface/PanelSurface.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSurface.mjs","names":["styles","surfaceStyles"],"sources":["../../../src/dashboard/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { PanelSurfaceProps } from './type';\n\n/** Titled console panel. Body padding stays inside so a trailing table can bleed to the edges. */\nconst PanelSurface = ({\n  title,\n  description,\n  extra,\n  href,\n  loading,\n  renderLink,\n  size = 'default',\n  className,\n  style,\n  children,\n}: PanelSurfaceProps) => (\n  <Surface\n    className={className}\n    description={description}\n    extra={loading && children ? <Spin size=\"small\" /> : extra}\n    href={href}\n    padded={false}\n    renderLink={renderLink}\n    style={style}\n    title={title}\n  >\n    {loading && !children ? (\n      <div aria-busy=\"true\" className={styles.loadingBody}>\n        <Skeleton height={220} radius={8} />\n      </div>\n    ) : (\n      <div\n        className={cx(size === 'small' ? styles.bodySmall : styles.body, surfaceStyles.tableBleed)}\n      >\n        {children}\n      </div>\n    )}\n  </Surface>\n);\n\nPanelSurface.displayName = 'PanelSurface';\n\nexport default PanelSurface;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,OACA,aACA,OACA,MACA,SACA,YACA,OAAO,WACP,WACA,OACA,eAEA,oBAAC,SAAD;CACa;CACE;CACb,OAAO,WAAW,WAAW,oBAAC,MAAD,EAAM,MAAK,QAAS,CAAA,IAAI;CAC/C;CACN,QAAQ;CACI;CACL;CACA;CAEN,UAAA,WAAW,CAAC,WACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAWA,SAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL,oBAAC,OAAD;EACE,WAAW,GAAG,SAAS,UAAUA,SAAO,YAAYA,SAAO,MAAMC,OAAc,UAAU;EAExF;CACE,CAAA;AAEA,CAAA;AAGX,aAAa,cAAc"}

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

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

package/es/dashboard/PanelSurface/style.mjs

@@ -0,0 +1,24 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PanelSurface/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	body: css`
+    --surface-pad-inline: 16px;
+    --surface-pad-block: 16px;
+
+    padding: 16px;
+  `,
+	bodySmall: css`
+    --surface-pad-inline: 16px;
+    --surface-pad-block: 12px;
+
+    padding-block: 12px;
+    padding-inline: 16px;
+  `,
+	loadingBody: css`
+    padding-block: 4px 8px;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PanelSurface/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  body: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 16px;\n\n    padding: 16px;\n  `,\n  bodySmall: css`\n    --surface-pad-inline: 16px;\n    --surface-pad-block: 12px;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n  loadingBody: css`\n    padding-block: 4px 8px;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;;;CAOd,aAAa,GAAG;;;AAGlB,EAAE"}

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

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

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

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

package/es/dashboard/Section/Section.mjs

@@ -0,0 +1,81 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import { useSurfaceLink } from "../Surface/link.mjs";
+import Surface from "../Surface/Surface.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/dashboard/Section/Section.tsx
+/** A titled page section with description, extra and a "more" link, flat or as a card. */
+const Section = ({ className, variant = "default", fontSize, title, more, moreLink, icon, children, desc, extra, gap, padded, renderLink, ...rest }) => {
+	const link = useSurfaceLink(renderLink);
+	const moreNode = moreLink ? link({
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: more }), /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })] }),
+		className: styles.more,
+		href: moreLink,
+		rel: moreLink.startsWith("http") ? "noreferrer" : void 0,
+		target: moreLink.startsWith("http") ? "_blank" : void 0
+	}) : null;
+	const actions = extra || moreNode ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		gap: 8,
+		children: [extra, moreNode]
+	}) : void 0;
+	if (variant === "card") return /* @__PURE__ */ jsx(Surface, {
+		description: desc,
+		extra: actions,
+		padded: padded ?? true,
+		title: title ? /* @__PURE__ */ jsxs("span", {
+			className: styles.title,
+			style: fontSize ? { fontSize } : void 0,
+			children: [icon, title]
+		}) : void 0,
+		children: /* @__PURE__ */ jsx(FlexBasic_default, {
+			className,
+			gap: gap ?? 12,
+			...rest,
+			children
+		})
+	});
+	if (!title) return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className,
+		gap,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className,
+		gap: gap ?? 16,
+		width: "100%",
+		...rest,
+		children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			align: "center",
+			gap: 12,
+			justify: "space-between",
+			width: "100%",
+			children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+				gap: 4,
+				children: [
+					icon,
+					/* @__PURE__ */ jsx("h2", {
+						className: styles.title,
+						style: fontSize ? { fontSize } : void 0,
+						children: title
+					}),
+					desc ? /* @__PURE__ */ jsx("div", {
+						className: styles.desc,
+						children: desc
+					}) : null
+				]
+			}), actions ?? null]
+		}), children]
+	});
+};
+Section.displayName = "Section";
+//#endregion
+export { Section as default };
+
+//# sourceMappingURL=Section.mjs.map

package/es/dashboard/Section/Section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/Section/Section.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport Surface from '../Surface/Surface';\nimport { styles } from './style';\nimport type { SectionProps } from './type';\n\n/** A titled page section with description, extra and a \"more\" link, flat or as a card. */\nconst Section = ({\n  className,\n  variant = 'default',\n  fontSize,\n  title,\n  more,\n  moreLink,\n  icon,\n  children,\n  desc,\n  extra,\n  gap,\n  padded,\n  renderLink,\n  ...rest\n}: SectionProps) => {\n  const link = useSurfaceLink(renderLink);\n  const moreNode = moreLink\n    ? link({\n        children: (\n          <>\n            <span>{more}</span>\n            <Icon icon={ChevronRight} />\n          </>\n        ),\n        className: styles.more,\n        href: moreLink,\n        rel: moreLink.startsWith('http') ? 'noreferrer' : undefined,\n        target: moreLink.startsWith('http') ? '_blank' : undefined,\n      })\n    : null;\n  const actions =\n    extra || moreNode ? (\n      <Flexbox horizontal align=\"center\" gap={8}>\n        {extra}\n        {moreNode}\n      </Flexbox>\n    ) : undefined;\n\n  if (variant === 'card') {\n    return (\n      <Surface\n        description={desc}\n        extra={actions}\n        padded={padded ?? true}\n        title={\n          title ? (\n            <span className={styles.title} style={fontSize ? { fontSize } : undefined}>\n              {icon}\n              {title}\n            </span>\n          ) : undefined\n        }\n      >\n        <Flexbox className={className} gap={gap ?? 12} {...rest}>\n          {children}\n        </Flexbox>\n      </Surface>\n    );\n  }\n\n  if (!title) {\n    return (\n      <Flexbox className={className} gap={gap} {...rest}>\n        {children}\n      </Flexbox>\n    );\n  }\n\n  return (\n    <Flexbox className={className} gap={gap ?? 16} width=\"100%\" {...rest}>\n      <Flexbox horizontal align=\"center\" gap={12} justify=\"space-between\" width=\"100%\">\n        <Flexbox gap={4}>\n          {icon}\n          <h2 className={styles.title} style={fontSize ? { fontSize } : undefined}>\n            {title}\n          </h2>\n          {desc ? <div className={styles.desc}>{desc}</div> : null}\n        </Flexbox>\n        {actions ?? null}\n      </Flexbox>\n      {children}\n    </Flexbox>\n  );\n};\n\nSection.displayName = 'Section';\n\nexport default Section;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,WAAW,EACf,WACA,UAAU,WACV,UACA,OACA,MACA,UACA,MACA,UACA,MACA,OACA,KACA,QACA,YACA,GAAG,WACe;CAClB,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,WAAW,WACb,KAAK;EACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,GAClB,oBAAC,MAAD,EAAM,MAAM,aAAe,CAAA,CAC3B,EAAA,CAAA;EAEJ,WAAW,OAAO;EAClB,MAAM;EACN,KAAK,SAAS,WAAW,MAAM,IAAI,eAAe,KAAA;EAClD,QAAQ,SAAS,WAAW,MAAM,IAAI,WAAW,KAAA;CACnD,CAAC,IACD;CACJ,MAAM,UACJ,SAAS,WACP,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAM;EAAS,KAAK;EAAxC,UAAA,CACG,OACA,QACM;CACP,CAAA,IAAA,KAAA;CAEN,IAAI,YAAY,QACd,OACE,oBAAC,SAAD;EACE,aAAa;EACb,OAAO;EACP,QAAQ,UAAU;EAClB,OACE,QACE,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,OAAO,WAAW,EAAE,SAAS,IAAI,KAAA;GAAhE,UAAA,CACG,MACA,KACG;EACJ,CAAA,IAAA,KAAA;EAGN,UAAA,oBAACA,mBAAD;GAAoB;GAAW,KAAK,OAAO;GAAI,GAAI;GAChD;EACM,CAAA;CACF,CAAA;CAIb,IAAI,CAAC,OACH,OACE,oBAACA,mBAAD;EAAoB;EAAgB;EAAK,GAAI;EAC1C;CACM,CAAA;CAIb,OACE,qBAACA,mBAAD;EAAoB;EAAW,KAAK,OAAO;EAAI,OAAM;EAAO,GAAI;EAAhE,UAAA,CACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAM;GAAS,KAAK;GAAI,SAAQ;GAAgB,OAAM;GAA1E,UAAA,CACE,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACG;KACD,oBAAC,MAAD;MAAI,WAAW,OAAO;MAAO,OAAO,WAAW,EAAE,SAAS,IAAI,KAAA;MAC3D,UAAA;KACC,CAAA;KACH,OAAO,oBAAC,OAAD;MAAK,WAAW,OAAO;MAAO,UAAA;KAAU,CAAA,IAAI;IAC7C;GACR,CAAA,GAAA,WAAW,IACL;EACR,CAAA,GAAA,QACM;;AAEb;AAEA,QAAQ,cAAc"}

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

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

package/es/dashboard/Section/style.mjs

@@ -0,0 +1,35 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/Section/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	desc: css`
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.45;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	more: css`
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+    text-decoration: none;
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	title: css`
+    margin: 0;
+
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: ${cssVar.colorText};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/Section/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  desc: css`\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 1.45;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  more: css`\n    display: inline-flex;\n    gap: 2px;\n    align-items: center;\n\n    font-size: 13px;\n    color: ${cssVar.colorTextSecondary};\n    text-decoration: none;\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n  title: css`\n    margin: 0;\n\n    font-size: 15px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;aAIE,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;;aAME,OAAO,mBAAmB;;;;eAIxB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;AAE9B,EAAE"}

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

@@ -0,0 +1,24 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { SurfaceRenderLink } from "../Surface/type.mjs";
+import { ReactNode } from "react";
+//#region src/dashboard/Section/type.d.ts
+interface SectionProps extends Omit<FlexboxProps, 'title'> {
+  desc?: ReactNode;
+  extra?: ReactNode;
+  fontSize?: number;
+  icon?: ReactNode;
+  /** Text of the "more" link. */
+  more?: ReactNode;
+  /** Target of the "more" link. An `http` URL opens in a new tab. */
+  moreLink?: string;
+  /** Card body padding (`variant="card"`). Turn off when the children already sit on the card edge. */
+  padded?: boolean;
+  renderLink?: SurfaceRenderLink;
+  title?: ReactNode;
+  /** `default` is a titled page section; `card` wraps it in a Surface. */
+  variant?: 'default' | 'card';
+}
+//#endregion
+export { SectionProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -1,10 +1,11 @@
 import { SurfaceProps } from "./type.mjs";
 //#region src/dashboard/Surface/Surface.d.ts
 /**
- * Elevated card on a workspace canvas. Use it for panels that should read
- * above the page background without inventing a new surface color.
+ * Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,
+ * `description` or `extra` it gets a header and a padded body that lets a
+ * trailing table meet the card edges.
  */
-declare function Surface({ className, ...rest }: SurfaceProps): import("react").JSX.Element;
+declare function Surface({ bleed, chart, children, className, description, extra, href, loading, padded, renderLink, title, ...rest }: SurfaceProps): import("react").JSX.Element;
 declare namespace Surface {
   var displayName: string;
 }