@lobehub/ui 5.48.1 → 5.49.0

package/es/dashboard/PageSkeleton/PageSkeleton.mjs

@@ -0,0 +1,136 @@
+"use client";
+import Skeleton from "../../base-ui/Skeleton/index.mjs";
+import { styles } from "../Surface/style.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/dashboard/PageSkeleton/PageSkeleton.tsx
+const bone = {
+	height: void 0,
+	width: void 0
+};
+const lineWidths = [
+	["68%", "36%"],
+	["52%", "28%"],
+	["76%", "42%"],
+	["58%", "32%"]
+];
+function LoadingAnnouncer({ label }) {
+	return /* @__PURE__ */ jsx("output", {
+		"aria-live": "polite",
+		className: styles$1.srOnly,
+		children: label
+	});
+}
+LoadingAnnouncer.displayName = "LoadingAnnouncer";
+function PageHeaderSkeleton({ action = true }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: styles$1.header,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles$1.headerCopy,
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				className: styles$1.title,
+				style: bone
+			}), /* @__PURE__ */ jsx(Skeleton.Text, {
+				fontSize: 14,
+				width: "46%"
+			})]
+		}), action ? /* @__PURE__ */ jsx(Skeleton, {
+			className: styles$1.action,
+			style: bone
+		}) : null]
+	});
+}
+PageHeaderSkeleton.displayName = "PageHeaderSkeleton";
+function TableSkeleton({ framed = true, leading = "text", rows = 6 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: framed ? `${styles$1.table} ${styles.card}` : styles$1.table,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: styles$1.thead,
+			children: [
+				96,
+				72,
+				64,
+				48
+			].map((width, index) => /* @__PURE__ */ jsx(Skeleton, {
+				className: styles$1.theadCell,
+				style: {
+					...bone,
+					width
+				}
+			}, index))
+		}), Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", {
+			className: styles$1.row,
+			children: [
+				leading === "avatar" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
+					shape: "circle",
+					size: 24
+				}) : null,
+				leading === "icon" ? /* @__PURE__ */ jsx(Skeleton.Avatar, {
+					shape: "square",
+					size: 24
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: styles$1.copy,
+					children: /* @__PURE__ */ jsx(Skeleton.Text, {
+						fontSize: 14,
+						rows: 2,
+						width: [...lineWidths[index % lineWidths.length]]
+					})
+				}),
+				/* @__PURE__ */ jsx(Skeleton, {
+					className: styles$1.tag,
+					style: bone
+				}),
+				/* @__PURE__ */ jsx(Skeleton, {
+					className: styles$1.cell,
+					style: bone
+				})
+			]
+		}, index))]
+	});
+}
+TableSkeleton.displayName = "TableSkeleton";
+function StatCardSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: `${styles$1.stat} ${styles.card}`,
+		children: [
+			/* @__PURE__ */ jsx(Skeleton.Text, {
+				fontSize: 14,
+				width: 72
+			}),
+			/* @__PURE__ */ jsx(Skeleton, {
+				className: styles$1.statValue,
+				style: bone
+			}),
+			/* @__PURE__ */ jsx(Skeleton.Text, {
+				fontSize: 14,
+				width: "68%"
+			})
+		]
+	});
+}
+StatCardSkeleton.displayName = "StatCardSkeleton";
+function PageLoading({ header = true, label = "Loading", stats = 4 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-busy": "true",
+		className: styles$1.page,
+		children: [
+			/* @__PURE__ */ jsx(LoadingAnnouncer, { label }),
+			header ? /* @__PURE__ */ jsx(PageHeaderSkeleton, {}) : null,
+			/* @__PURE__ */ jsx("section", {
+				"aria-hidden": true,
+				className: styles$1.statGrid,
+				children: Array.from({ length: stats }, (_, index) => /* @__PURE__ */ jsx(StatCardSkeleton, {}, index))
+			}),
+			/* @__PURE__ */ jsx(TableSkeleton, {})
+		]
+	});
+}
+PageLoading.displayName = "PageLoading";
+//#endregion
+export { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton, PageLoading as default };
+
+//# sourceMappingURL=PageSkeleton.mjs.map

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

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

package/es/dashboard/PageSkeleton/style.mjs

@@ -0,0 +1,122 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PageSkeleton/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	action: css`
+    flex: none;
+    inline-size: 96px;
+    block-size: 32px;
+
+    ${responsive.mobile} {
+      inline-size: 100%;
+      block-size: 44px;
+    }
+  `,
+	cell: css`
+    flex: none;
+    inline-size: 88px;
+    block-size: 14px;
+  `,
+	copy: css`
+    flex: 1;
+    min-inline-size: 0;
+  `,
+	header: css`
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    ${responsive.mobile} {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  `,
+	headerCopy: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 8px;
+
+    min-inline-size: 0;
+  `,
+	page: css`
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  `,
+	row: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    min-block-size: 54px;
+    padding-block: 12px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${cssVar.colorBorder};
+
+    &:last-child {
+      border-block-end: none;
+    }
+  `,
+	srOnly: css`
+    position: absolute;
+
+    overflow: hidden;
+
+    inline-size: 1px;
+    block-size: 1px;
+
+    white-space: nowrap;
+
+    clip-path: inset(50%);
+  `,
+	statGrid: css`
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+  `,
+	stat: css`
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+  `,
+	statValue: css`
+    inline-size: 42%;
+    block-size: ${cssVar.fontSizeHeading2};
+    margin-block: 6px 14px;
+  `,
+	table: css`
+    overflow: hidden;
+    min-inline-size: 0;
+  `,
+	tag: css`
+    flex: none;
+    inline-size: 72px;
+    block-size: 22px;
+    border-radius: ${cssVar.borderRadiusSM};
+  `,
+	thead: css`
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    min-block-size: 39px;
+    padding-block: 10px;
+    padding-inline: 16px;
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	theadCell: css`
+    flex: none;
+    block-size: 12px;
+  `,
+	title: css`
+    inline-size: 220px;
+    max-inline-size: 70%;
+    block-size: ${cssVar.fontSizeHeading3};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorder};\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;kCAQwB,OAAO,YAAY;;;;;;CAMnD,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}

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

@@ -0,0 +1,22 @@
+//#region src/dashboard/PageSkeleton/type.d.ts
+interface LoadingAnnouncerProps {
+  label: string;
+}
+interface PageHeaderSkeletonProps {
+  action?: boolean;
+}
+interface TableSkeletonProps {
+  framed?: boolean;
+  /** First cell: two lines, a person, or a mark. */
+  leading?: 'text' | 'avatar' | 'icon';
+  rows?: number;
+}
+interface PageLoadingProps {
+  header?: boolean;
+  /** Announced to assistive tech. */
+  label?: string;
+  stats?: number;
+}
+//#endregion
+export { LoadingAnnouncerProps, PageHeaderSkeletonProps, PageLoadingProps, TableSkeletonProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/PageTabs/PageTabs.d.mts

@@ -0,0 +1,9 @@
+import { PageTabsProps } from "./type.mjs";
+//#region src/dashboard/PageTabs/PageTabs.d.ts
+declare function PageTabs<Value extends string>({ label, onChange, tabs, value }: PageTabsProps<Value>): import("react").JSX.Element;
+declare namespace PageTabs {
+  var displayName: string;
+}
+//#endregion
+export { PageTabs as default };
+//# sourceMappingURL=PageTabs.d.mts.map

package/es/dashboard/PageTabs/PageTabs.mjs

@@ -0,0 +1,37 @@
+"use client";
+import Tabs from "../../base-ui/Tabs/Tabs.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/dashboard/PageTabs/PageTabs.tsx
+function PageTabs({ label, onChange, tabs, value }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": label,
+		className: styles.root,
+		role: "navigation",
+		children: /* @__PURE__ */ jsx(Tabs, {
+			activeKey: value,
+			classNames: {
+				list: styles.list,
+				panel: styles.panel,
+				tab: styles.tab
+			},
+			items: tabs.map((tab) => ({
+				children: tab.content,
+				key: tab.value,
+				label: /* @__PURE__ */ jsxs(Fragment, { children: [tab.label, tab.count !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: styles.count,
+					children: tab.count
+				}) : null] })
+			})),
+			onChange: (next) => {
+				const tab = tabs.find((item) => item.value === next);
+				if (tab) onChange(tab.value);
+			}
+		})
+	});
+}
+PageTabs.displayName = "PageTabs";
+//#endregion
+export { PageTabs as default };
+
+//# sourceMappingURL=PageTabs.mjs.map

package/es/dashboard/PageTabs/PageTabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTabs.mjs","names":[],"sources":["../../../src/dashboard/PageTabs/PageTabs.tsx"],"sourcesContent":["'use client';\n\nimport Tabs from '@/base-ui/Tabs';\n\nimport { styles } from './style';\nimport type { PageTabsProps } from './type';\n\nfunction PageTabs<Value extends string>({ label, onChange, tabs, value }: PageTabsProps<Value>) {\n  return (\n    <div aria-label={label} className={styles.root} role=\"navigation\">\n      <Tabs\n        activeKey={value}\n        classNames={{ list: styles.list, panel: styles.panel, tab: styles.tab }}\n        items={tabs.map((tab) => ({\n          children: tab.content,\n          key: tab.value,\n          label: (\n            <>\n              {tab.label}\n              {tab.count !== undefined ? <span className={styles.count}>{tab.count}</span> : null}\n            </>\n          ),\n        }))}\n        onChange={(next) => {\n          const tab = tabs.find((item) => item.value === next);\n          if (tab) onChange(tab.value);\n        }}\n      />\n    </div>\n  );\n}\n\nPageTabs.displayName = 'PageTabs';\n\nexport default PageTabs;\n"],"mappings":";;;;;AAOA,SAAS,SAA+B,EAAE,OAAO,UAAU,MAAM,SAA+B;CAC9F,OACE,oBAAC,OAAD;EAAK,cAAY;EAAO,WAAW,OAAO;EAAM,MAAK;EACnD,UAAA,oBAAC,MAAD;GACE,WAAW;GACX,YAAY;IAAE,MAAM,OAAO;IAAM,OAAO,OAAO;IAAO,KAAK,OAAO;GAAI;GACtE,OAAO,KAAK,KAAK,SAAS;IACxB,UAAU,IAAI;IACd,KAAK,IAAI;IACT,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,IAAI,OACJ,IAAI,UAAU,KAAA,IAAY,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAQ,UAAA,IAAI;IAAY,CAAA,IAAI,IAC/E,EAAA,CAAA;GAEN,EAAE;GACF,WAAW,SAAS;IAClB,MAAM,MAAM,KAAK,MAAM,SAAS,KAAK,UAAU,IAAI;IACnD,IAAI,KAAK,SAAS,IAAI,KAAK;GAC7B;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}

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

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

package/es/dashboard/PageTabs/style.mjs

@@ -0,0 +1,57 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/PageTabs/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	count: css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-inline-size: 1.5em;
+    padding-inline: ${cssVar.paddingXXS};
+    border-radius: ${cssVar.borderRadiusXS};
+
+    font-size: ${cssVar.fontSizeSM};
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+
+    background: ${cssVar.colorFillSecondary};
+  `,
+	list: css`
+    scrollbar-width: none;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    max-inline-size: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    && {
+      gap: ${cssVar.paddingXXS};
+      padding: ${cssVar.paddingXXS};
+    }
+  `,
+	panel: css`
+    padding-block-start: 16px;
+  `,
+	root: css`
+    min-inline-size: 0;
+  `,
+	tab: css`
+    flex: none;
+
+    && {
+      gap: ${cssVar.paddingXS};
+    }
+
+    ${responsive.mobile} {
+      min-block-size: 44px;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageTabs/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  count: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-inline-size: 1.5em;\n    padding-inline: ${cssVar.paddingXXS};\n    border-radius: ${cssVar.borderRadiusXS};\n\n    font-size: ${cssVar.fontSizeSM};\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorFillSecondary};\n  `,\n  list: css`\n    scrollbar-width: none;\n    overflow-x: auto;\n    flex-wrap: nowrap;\n    max-inline-size: 100%;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    && {\n      gap: ${cssVar.paddingXXS};\n      padding: ${cssVar.paddingXXS};\n    }\n  `,\n  panel: css`\n    padding-block-start: 16px;\n  `,\n  root: css`\n    min-inline-size: 0;\n  `,\n  tab: css`\n    flex: none;\n\n    && {\n      gap: ${cssVar.paddingXS};\n    }\n\n    ${responsive.mobile} {\n      min-block-size: 44px;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;sBAMU,OAAO,WAAW;qBACnB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;;;aAItB,OAAO,mBAAmB;;kBAErB,OAAO,mBAAmB;;CAE1C,MAAM,GAAG;;;;;;;;;;;aAWE,OAAO,WAAW;iBACd,OAAO,WAAW;;;CAGjC,OAAO,GAAG;;;CAGV,MAAM,GAAG;;;CAGT,KAAK,GAAG;;;;aAIG,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;AAIxB,EAAE"}

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

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+//#region src/dashboard/PageTabs/type.d.ts
+interface PageTab<Value extends string> {
+  content: ReactNode;
+  count?: ReactNode;
+  label: string;
+  value: Value;
+}
+interface PageTabsProps<Value extends string> {
+  label: string;
+  onChange: (value: Value) => void;
+  tabs: PageTab<Value>[];
+  value: Value;
+}
+//#endregion
+export { PageTab, PageTabsProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/RouteProgress/RouteProgress.d.mts

@@ -0,0 +1,9 @@
+import { RouteProgressProps } from "./type.mjs";
+//#region src/dashboard/RouteProgress/RouteProgress.d.ts
+declare function RouteProgress({ loading }: RouteProgressProps): import("react").JSX.Element | null;
+declare namespace RouteProgress {
+  var displayName: string;
+}
+//#endregion
+export { RouteProgress as default };
+//# sourceMappingURL=RouteProgress.d.mts.map

package/es/dashboard/RouteProgress/RouteProgress.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { styles } from "./style.mjs";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/dashboard/RouteProgress/RouteProgress.tsx
+const FADE_MS = 200;
+const CREEP_MS = 120;
+function RouteProgress({ loading = false }) {
+	const [progress, setProgress] = useState(null);
+	useEffect(() => {
+		if (loading) {
+			const creep = window.setInterval(() => {
+				setProgress((value) => {
+					const from = value ?? 0;
+					return from >= .9 ? from : from + (.9 - from) * .2;
+				});
+			}, CREEP_MS);
+			return () => window.clearInterval(creep);
+		}
+		const settle = window.setTimeout(() => {
+			setProgress((value) => value === null ? null : 1);
+		}, 0);
+		const hide = window.setTimeout(() => setProgress(null), FADE_MS);
+		return () => {
+			window.clearTimeout(settle);
+			window.clearTimeout(hide);
+		};
+	}, [loading]);
+	if (progress === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: styles.bar,
+		style: {
+			opacity: progress >= 1 ? 0 : 1,
+			transform: `scaleX(${progress})`,
+			transition: `transform ${FADE_MS}ms ease-out, opacity ${FADE_MS}ms ease-in`
+		}
+	});
+}
+RouteProgress.displayName = "RouteProgress";
+//#endregion
+export { RouteProgress as default };
+
+//# sourceMappingURL=RouteProgress.mjs.map

package/es/dashboard/RouteProgress/RouteProgress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteProgress.mjs","names":[],"sources":["../../../src/dashboard/RouteProgress/RouteProgress.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { styles } from './style';\nimport type { RouteProgressProps } from './type';\n\nconst FADE_MS = 200;\nconst CREEP_MS = 120;\n\nfunction RouteProgress({ loading = false }: RouteProgressProps) {\n  const [progress, setProgress] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (loading) {\n      const creep = window.setInterval(() => {\n        setProgress((value) => {\n          const from = value ?? 0;\n          return from >= 0.9 ? from : from + (0.9 - from) * 0.2;\n        });\n      }, CREEP_MS);\n      return () => window.clearInterval(creep);\n    }\n\n    const settle = window.setTimeout(() => {\n      setProgress((value) => (value === null ? null : 1));\n    }, 0);\n    const hide = window.setTimeout(() => setProgress(null), FADE_MS);\n    return () => {\n      window.clearTimeout(settle);\n      window.clearTimeout(hide);\n    };\n  }, [loading]);\n\n  if (progress === null) return null;\n  return (\n    <div\n      aria-hidden\n      className={styles.bar}\n      style={{\n        opacity: progress >= 1 ? 0 : 1,\n        transform: `scaleX(${progress})`,\n        transition: `transform ${FADE_MS}ms ease-out, opacity ${FADE_MS}ms ease-in`,\n      }}\n    />\n  );\n}\n\nRouteProgress.displayName = 'RouteProgress';\n\nexport default RouteProgress;\n"],"mappings":";;;;;AAOA,MAAM,UAAU;AAChB,MAAM,WAAW;AAEjB,SAAS,cAAc,EAAE,UAAU,SAA6B;CAC9D,MAAM,CAAC,UAAU,eAAe,SAAwB,IAAI;CAE5D,gBAAgB;EACd,IAAI,SAAS;GACX,MAAM,QAAQ,OAAO,kBAAkB;IACrC,aAAa,UAAU;KACrB,MAAM,OAAO,SAAS;KACtB,OAAO,QAAQ,KAAM,OAAO,QAAQ,KAAM,QAAQ;IACpD,CAAC;GACH,GAAG,QAAQ;GACX,aAAa,OAAO,cAAc,KAAK;EACzC;EAEA,MAAM,SAAS,OAAO,iBAAiB;GACrC,aAAa,UAAW,UAAU,OAAO,OAAO,CAAE;EACpD,GAAG,CAAC;EACJ,MAAM,OAAO,OAAO,iBAAiB,YAAY,IAAI,GAAG,OAAO;EAC/D,aAAa;GACX,OAAO,aAAa,MAAM;GAC1B,OAAO,aAAa,IAAI;EAC1B;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,aAAa,MAAM,OAAO;CAC9B,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,OAAO;EAClB,OAAO;GACL,SAAS,YAAY,IAAI,IAAI;GAC7B,WAAW,UAAU,SAAS;GAC9B,YAAY,aAAa,QAAQ,uBAAuB,QAAQ;EAClE;CACD,CAAA;AAEL;AAEA,cAAc,cAAc"}

package/es/dashboard/RouteProgress/style.mjs

@@ -0,0 +1,19 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/RouteProgress/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({ bar: css`
+    will-change: transform, opacity;
+
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: 0;
+    inset-inline: 0;
+    transform-origin: 0 50%;
+
+    block-size: 2px;
+
+    background: ${cssVar.colorPrimary};
+  ` }));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/RouteProgress/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  bar: css`\n    will-change: transform, opacity;\n\n    position: fixed;\n    z-index: 1000;\n    inset-block-start: 0;\n    inset-inline: 0;\n    transform-origin: 0 50%;\n\n    block-size: 2px;\n\n    background: ${cssVar.colorPrimary};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc,EAC7D,KAAK,GAAG;;;;;;;;;;;kBAWQ,OAAO,aAAa;IAEtC,EAAE"}

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

@@ -0,0 +1,8 @@
+//#region src/dashboard/RouteProgress/type.d.ts
+interface RouteProgressProps {
+  /** While true, the bar creeps toward the end. When it becomes false, the bar finishes and fades. */
+  loading?: boolean;
+}
+//#endregion
+export { RouteProgressProps };
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/StatCard/StatCard.d.mts

@@ -0,0 +1,9 @@
+import { StatCardProps } from "./type.mjs";
+//#region src/dashboard/StatCard/StatCard.d.ts
+declare function StatCard({ action, delta, direction, hint, label, mark, prominent, value, wash }: StatCardProps): import("react").JSX.Element;
+declare namespace StatCard {
+  var displayName: string;
+}
+//#endregion
+export { StatCard as default };
+//# sourceMappingURL=StatCard.d.mts.map

package/es/dashboard/StatCard/StatCard.mjs

@@ -0,0 +1,84 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Block from "../../Block/Block.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import Text from "../../base-ui/Text/Text.mjs";
+import { styles } from "../Surface/style.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Minus, TrendingDown, TrendingUp } from "lucide-react";
+//#region src/dashboard/StatCard/StatCard.tsx
+const deltaIcon = {
+	down: TrendingDown,
+	flat: Minus,
+	up: TrendingUp
+};
+function StatCard({ action, delta, direction = "flat", hint, label, mark, prominent = false, value, wash }) {
+	const deltaClass = {
+		down: styles$1.deltaDown,
+		flat: styles$1.deltaFlat,
+		up: styles$1.deltaUp
+	}[direction];
+	return /* @__PURE__ */ jsx("div", {
+		className: styles$1.lift,
+		children: /* @__PURE__ */ jsx(Block, {
+			className: `${styles$1.root} ${styles.card}${wash ? ` ${styles$1.wash} ${styles$1[wash]}` : ""} ${styles$1.frame}`,
+			variant: "borderless",
+			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+				className: styles$1.body,
+				gap: prominent ? 0 : 8,
+				children: [
+					/* @__PURE__ */ jsxs(FlexBasic_default, {
+						horizontal: true,
+						align: "center",
+						justify: "space-between",
+						children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+							horizontal: true,
+							align: "center",
+							className: styles$1.copy,
+							gap: 6,
+							children: [/* @__PURE__ */ jsx(Text, {
+								ellipsis: true,
+								className: prominent ? styles$1.metricLabel : styles$1.label,
+								children: label
+							}), action]
+						}), mark ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: styles$1.badge,
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: mark,
+								size: 14
+							})
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: prominent ? styles$1.metricValue : styles$1.value,
+						children: value
+					}),
+					delta || hint ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+						horizontal: true,
+						align: "center",
+						className: prominent ? styles$1.metricFoot : void 0,
+						gap: 8,
+						wrap: "wrap",
+						children: [delta ? /* @__PURE__ */ jsxs("span", {
+							className: `${styles$1.delta} ${deltaClass}`,
+							children: [/* @__PURE__ */ jsx(Icon, {
+								icon: deltaIcon[direction],
+								size: 14
+							}), delta]
+						}) : null, hint ? /* @__PURE__ */ jsx(Text, {
+							className: prominent ? styles$1.metricHint : styles$1.hint,
+							children: hint
+						}) : null]
+					}) : null
+				]
+			})
+		})
+	});
+}
+StatCard.displayName = "StatCard";
+//#endregion
+export { StatCard as default };
+
+//# sourceMappingURL=StatCard.mjs.map

package/es/dashboard/StatCard/StatCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.mjs","names":["styles","surfaceStyles","Flexbox"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { Minus, TrendingDown, TrendingUp } from 'lucide-react';\n\nimport Text from '@/base-ui/Text';\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles as surfaceStyles } from '../Surface/style';\nimport { styles } from './style';\nimport type { StatCardProps, StatDirection } from './type';\n\nconst deltaIcon = {\n  down: TrendingDown,\n  flat: Minus,\n  up: TrendingUp,\n} satisfies Record<StatDirection, typeof Minus>;\n\nfunction StatCard({\n  action,\n  delta,\n  direction = 'flat',\n  hint,\n  label,\n  mark,\n  prominent = false,\n  value,\n  wash,\n}: StatCardProps) {\n  const deltaClass = {\n    down: styles.deltaDown,\n    flat: styles.deltaFlat,\n    up: styles.deltaUp,\n  }[direction];\n\n  return (\n    <div className={styles.lift}>\n      <Block\n        className={`${styles.root} ${surfaceStyles.card}${wash ? ` ${styles.wash} ${styles[wash]}` : ''} ${styles.frame}`}\n        variant=\"borderless\"\n      >\n        <Flexbox className={styles.body} gap={prominent ? 0 : 8}>\n          <Flexbox horizontal align=\"center\" justify=\"space-between\">\n            <Flexbox horizontal align=\"center\" className={styles.copy} gap={6}>\n              <Text ellipsis className={prominent ? styles.metricLabel : styles.label}>\n                {label}\n              </Text>\n              {action}\n            </Flexbox>\n            {mark ? (\n              <span aria-hidden className={styles.badge}>\n                <Icon icon={mark} size={14} />\n              </span>\n            ) : null}\n          </Flexbox>\n          <div className={prominent ? styles.metricValue : styles.value}>{value}</div>\n          {delta || hint ? (\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className={prominent ? styles.metricFoot : undefined}\n              gap={8}\n              wrap=\"wrap\"\n            >\n              {delta ? (\n                <span className={`${styles.delta} ${deltaClass}`}>\n                  <Icon icon={deltaIcon[direction]} size={14} />\n                  {delta}\n                </span>\n              ) : null}\n              {hint ? (\n                <Text className={prominent ? styles.metricHint : styles.hint}>{hint}</Text>\n              ) : null}\n            </Flexbox>\n          ) : null}\n        </Flexbox>\n      </Block>\n    </div>\n  );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY;CAChB,MAAM;CACN,MAAM;CACN,IAAI;AACN;AAEA,SAAS,SAAS,EAChB,QACA,OACA,YAAY,QACZ,MACA,OACA,MACA,YAAY,OACZ,OACA,QACgB;CAChB,MAAM,aAAa;EACjB,MAAMA,SAAO;EACb,MAAMA,SAAO;EACb,IAAIA,SAAO;CACb,EAAE;CAEF,OACE,oBAAC,OAAD;EAAK,WAAWA,SAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAW,GAAGA,SAAO,KAAK,GAAGC,OAAc,OAAO,OAAO,IAAID,SAAO,KAAK,GAAGA,SAAO,UAAU,GAAG,GAAGA,SAAO;GAC1G,SAAQ;GAER,UAAA,qBAACE,mBAAD;IAAS,WAAWF,SAAO;IAAM,KAAK,YAAY,IAAI;IAAtD,UAAA;KACE,qBAACE,mBAAD;MAAS,YAAA;MAAW,OAAM;MAAS,SAAQ;MAA3C,UAAA,CACE,qBAACA,mBAAD;OAAS,YAAA;OAAW,OAAM;OAAS,WAAWF,SAAO;OAAM,KAAK;OAAhE,UAAA,CACE,oBAAC,MAAD;QAAM,UAAA;QAAS,WAAW,YAAYA,SAAO,cAAcA,SAAO;QAC/D,UAAA;OACG,CAAA,GACL,MACM;MACR,CAAA,GAAA,OACC,oBAAC,QAAD;OAAM,eAAA;OAAY,WAAWA,SAAO;OAClC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAM,MAAM;OAAK,CAAA;MACzB,CAAA,IACJ,IACG;;KACT,oBAAC,OAAD;MAAK,WAAW,YAAYA,SAAO,cAAcA,SAAO;MAAQ,UAAA;KAAW,CAAA;KAC1E,SAAS,OACR,qBAACE,mBAAD;MACE,YAAA;MACA,OAAM;MACN,WAAW,YAAYF,SAAO,aAAa,KAAA;MAC3C,KAAK;MACL,MAAK;MALP,UAAA,CAOG,QACC,qBAAC,QAAD;OAAM,WAAW,GAAGA,SAAO,MAAM,GAAG;OAApC,UAAA,CACE,oBAAC,MAAD;QAAM,MAAM,UAAU;QAAY,MAAM;OAAK,CAAA,GAC5C,KACG;MACJ,CAAA,IAAA,MACH,OACC,oBAAC,MAAD;OAAM,WAAW,YAAYA,SAAO,aAAaA,SAAO;OAAO,UAAA;MAAW,CAAA,IACxE,IACG;KACP,CAAA,IAAA;IACG;;EACJ,CAAA;CACJ,CAAA;AAET;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,3 @@
+import { StatCardProps, StatDirection, StatWash } from "./type.mjs";
+import StatCard from "./StatCard.mjs";
+export { type StatCardProps, type StatDirection, StatCard as default };