@jinmi/ui 0.0.0-stage → 6.0.2

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';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  action: css`\r\n    flex: none;\r\n    inline-size: 96px;\r\n    block-size: 32px;\r\n\r\n    ${responsive.mobile} {\r\n      inline-size: 100%;\r\n      block-size: 44px;\r\n    }\r\n  `,\r\n  cell: css`\r\n    flex: none;\r\n    inline-size: 88px;\r\n    block-size: 14px;\r\n  `,\r\n  copy: css`\r\n    flex: 1;\r\n    min-inline-size: 0;\r\n  `,\r\n  header: css`\r\n    display: flex;\r\n    gap: 16px;\r\n    align-items: flex-start;\r\n    justify-content: space-between;\r\n\r\n    ${responsive.mobile} {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n    }\r\n  `,\r\n  headerCopy: css`\r\n    display: flex;\r\n    flex: 1;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n\r\n    min-inline-size: 0;\r\n  `,\r\n  page: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n  `,\r\n  row: css`\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: center;\r\n\r\n    min-block-size: 54px;\r\n    padding-block: 12px;\r\n    padding-inline: 16px;\r\n    border-block-end: 1px solid ${cssVar.colorBorder};\r\n\r\n    &:last-child {\r\n      border-block-end: none;\r\n    }\r\n  `,\r\n  srOnly: css`\r\n    position: absolute;\r\n\r\n    overflow: hidden;\r\n\r\n    inline-size: 1px;\r\n    block-size: 1px;\r\n\r\n    white-space: nowrap;\r\n\r\n    clip-path: inset(50%);\r\n  `,\r\n  statGrid: css`\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n    gap: 12px;\r\n  `,\r\n  stat: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding: 16px;\r\n  `,\r\n  statValue: css`\r\n    inline-size: 42%;\r\n    block-size: ${cssVar.fontSizeHeading2};\r\n    margin-block: 6px 14px;\r\n  `,\r\n  table: css`\r\n    overflow: hidden;\r\n    min-inline-size: 0;\r\n  `,\r\n  tag: css`\r\n    flex: none;\r\n    inline-size: 72px;\r\n    block-size: 22px;\r\n    border-radius: ${cssVar.borderRadiusSM};\r\n  `,\r\n  thead: css`\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: center;\r\n\r\n    min-block-size: 39px;\r\n    padding-block: 10px;\r\n    padding-inline: 16px;\r\n\r\n    background: ${cssVar.colorFillTertiary};\r\n  `,\r\n  theadCell: css`\r\n    flex: none;\r\n    block-size: 12px;\r\n  `,\r\n  title: css`\r\n    inline-size: 220px;\r\n    max-inline-size: 70%;\r\n    block-size: ${cssVar.fontSizeHeading3};\r\n  `,\r\n}));\r\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';\r\n\r\nimport Tabs from '@/base-ui/Tabs';\r\n\r\nimport { styles } from './style';\r\nimport type { PageTabsProps } from './type';\r\n\r\nfunction PageTabs<Value extends string>({ label, onChange, tabs, value }: PageTabsProps<Value>) {\r\n  return (\r\n    <div aria-label={label} className={styles.root} role=\"navigation\">\r\n      <Tabs\r\n        activeKey={value}\r\n        classNames={{ list: styles.list, panel: styles.panel, tab: styles.tab }}\r\n        items={tabs.map((tab) => ({\r\n          children: tab.content,\r\n          key: tab.value,\r\n          label: (\r\n            <>\r\n              {tab.label}\r\n              {tab.count !== undefined ? <span className={styles.count}>{tab.count}</span> : null}\r\n            </>\r\n          ),\r\n        }))}\r\n        onChange={(next) => {\r\n          const tab = tabs.find((item) => item.value === next);\r\n          if (tab) onChange(tab.value);\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nPageTabs.displayName = 'PageTabs';\r\n\r\nexport default PageTabs;\r\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';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  count: css`\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-inline-size: 1.5em;\r\n    padding-inline: ${cssVar.paddingXXS};\r\n    border-radius: ${cssVar.borderRadiusXS};\r\n\r\n    font-size: ${cssVar.fontSizeSM};\r\n    font-weight: 500;\r\n    font-variant-numeric: tabular-nums;\r\n    line-height: 1.4;\r\n    color: ${cssVar.colorTextSecondary};\r\n\r\n    background: ${cssVar.colorFillSecondary};\r\n  `,\r\n  list: css`\r\n    scrollbar-width: none;\r\n    overflow-x: auto;\r\n    flex-wrap: nowrap;\r\n    max-inline-size: 100%;\r\n\r\n    &::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n\r\n    && {\r\n      gap: ${cssVar.paddingXXS};\r\n      padding: ${cssVar.paddingXXS};\r\n    }\r\n  `,\r\n  panel: css`\r\n    padding-block-start: 16px;\r\n  `,\r\n  root: css`\r\n    min-inline-size: 0;\r\n  `,\r\n  tab: css`\r\n    flex: none;\r\n\r\n    && {\r\n      gap: ${cssVar.paddingXS};\r\n    }\r\n\r\n    ${responsive.mobile} {\r\n      min-block-size: 44px;\r\n    }\r\n  `,\r\n}));\r\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';\r\n\r\nimport { useEffect, useState } from 'react';\r\n\r\nimport { styles } from './style';\r\nimport type { RouteProgressProps } from './type';\r\n\r\nconst FADE_MS = 200;\r\nconst CREEP_MS = 120;\r\n\r\nfunction RouteProgress({ loading = false }: RouteProgressProps) {\r\n  const [progress, setProgress] = useState<number | null>(null);\r\n\r\n  useEffect(() => {\r\n    if (loading) {\r\n      const creep = window.setInterval(() => {\r\n        setProgress((value) => {\r\n          const from = value ?? 0;\r\n          return from >= 0.9 ? from : from + (0.9 - from) * 0.2;\r\n        });\r\n      }, CREEP_MS);\r\n      return () => window.clearInterval(creep);\r\n    }\r\n\r\n    const settle = window.setTimeout(() => {\r\n      setProgress((value) => (value === null ? null : 1));\r\n    }, 0);\r\n    const hide = window.setTimeout(() => setProgress(null), FADE_MS);\r\n    return () => {\r\n      window.clearTimeout(settle);\r\n      window.clearTimeout(hide);\r\n    };\r\n  }, [loading]);\r\n\r\n  if (progress === null) return null;\r\n  return (\r\n    <div\r\n      aria-hidden\r\n      className={styles.bar}\r\n      style={{\r\n        opacity: progress >= 1 ? 0 : 1,\r\n        transform: `scaleX(${progress})`,\r\n        transition: `transform ${FADE_MS}ms ease-out, opacity ${FADE_MS}ms ease-in`,\r\n      }}\r\n    />\r\n  );\r\n}\r\n\r\nRouteProgress.displayName = 'RouteProgress';\r\n\r\nexport default RouteProgress;\r\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';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  bar: css`\r\n    will-change: transform, opacity;\r\n\r\n    position: fixed;\r\n    z-index: 1000;\r\n    inset-block-start: 0;\r\n    inset-inline: 0;\r\n    transform-origin: 0 50%;\r\n\r\n    block-size: 2px;\r\n\r\n    background: ${cssVar.colorPrimary};\r\n  `,\r\n}));\r\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';\r\n\r\nimport { Minus, TrendingDown, TrendingUp } from 'lucide-react';\r\n\r\nimport Text from '@/base-ui/Text';\r\nimport Block from '@/Block';\r\nimport { Flexbox } from '@/Flex';\r\nimport Icon from '@/Icon';\r\n\r\nimport { styles as surfaceStyles } from '../Surface/style';\r\nimport { styles } from './style';\r\nimport type { StatCardProps, StatDirection } from './type';\r\n\r\nconst deltaIcon = {\r\n  down: TrendingDown,\r\n  flat: Minus,\r\n  up: TrendingUp,\r\n} satisfies Record<StatDirection, typeof Minus>;\r\n\r\nfunction StatCard({\r\n  action,\r\n  delta,\r\n  direction = 'flat',\r\n  hint,\r\n  label,\r\n  mark,\r\n  prominent = false,\r\n  value,\r\n  wash,\r\n}: StatCardProps) {\r\n  const deltaClass = {\r\n    down: styles.deltaDown,\r\n    flat: styles.deltaFlat,\r\n    up: styles.deltaUp,\r\n  }[direction];\r\n\r\n  return (\r\n    <div className={styles.lift}>\r\n      <Block\r\n        className={`${styles.root} ${surfaceStyles.card}${wash ? ` ${styles.wash} ${styles[wash]}` : ''} ${styles.frame}`}\r\n        variant=\"borderless\"\r\n      >\r\n        <Flexbox className={styles.body} gap={prominent ? 0 : 8}>\r\n          <Flexbox horizontal align=\"center\" justify=\"space-between\">\r\n            <Flexbox horizontal align=\"center\" className={styles.copy} gap={6}>\r\n              <Text ellipsis className={prominent ? styles.metricLabel : styles.label}>\r\n                {label}\r\n              </Text>\r\n              {action}\r\n            </Flexbox>\r\n            {mark ? (\r\n              <span aria-hidden className={styles.badge}>\r\n                <Icon icon={mark} size={14} />\r\n              </span>\r\n            ) : null}\r\n          </Flexbox>\r\n          <div className={prominent ? styles.metricValue : styles.value}>{value}</div>\r\n          {delta || hint ? (\r\n            <Flexbox\r\n              horizontal\r\n              align=\"center\"\r\n              className={prominent ? styles.metricFoot : undefined}\r\n              gap={8}\r\n              wrap=\"wrap\"\r\n            >\r\n              {delta ? (\r\n                <span className={`${styles.delta} ${deltaClass}`}>\r\n                  <Icon icon={deltaIcon[direction]} size={14} />\r\n                  {delta}\r\n                </span>\r\n              ) : null}\r\n              {hint ? (\r\n                <Text className={prominent ? styles.metricHint : styles.hint}>{hint}</Text>\r\n              ) : null}\r\n            </Flexbox>\r\n          ) : null}\r\n        </Flexbox>\r\n      </Block>\r\n    </div>\r\n  );\r\n}\r\n\r\nStatCard.displayName = 'StatCard';\r\n\r\nexport default StatCard;\r\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 };

package/es/dashboard/StatCard/style.mjs

@@ -0,0 +1,135 @@
+import { createStaticStyles } from "antd-style";
+//#region src/dashboard/StatCard/style.ts
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	badge: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 24px;
+    block-size: 24px;
+    border: 1px solid ${cssVar.colorFillSecondary};
+    border-radius: ${cssVar.borderRadiusSM};
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: ${cssVar.colorFillTertiary};
+  `,
+	body: css`
+    position: relative;
+    z-index: 1;
+  `,
+	copy: css`
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+  `,
+	delta: css`
+    display: inline-flex;
+    gap: 2px;
+    align-items: center;
+
+    font-size: ${cssVar.fontSizeSM};
+    font-variant-numeric: tabular-nums;
+  `,
+	deltaDown: css`
+    color: ${cssVar.colorError};
+  `,
+	deltaFlat: css`
+    color: ${cssVar.colorTextTertiary};
+  `,
+	deltaUp: css`
+    color: ${cssVar.colorSuccess};
+  `,
+	frame: css`
+    &&& {
+      border-color: ${cssVar.colorBorderSecondary};
+    }
+  `,
+	gray: css`
+    &::before {
+      background: linear-gradient(
+        to bottom,
+        ${cssVar.colorBgElevated} 0%,
+        color-mix(in srgb, ${cssVar.colorText} 4%, ${cssVar.colorBgElevated}) 100%
+      );
+    }
+  `,
+	hint: css`
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextTertiary};
+  `,
+	label: css`
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextSecondary};
+  `,
+	lift: css`
+    display: flex;
+    min-inline-size: 0;
+    border-radius: ${cssVar.borderRadiusLG};
+    box-shadow: ${cssVar.boxShadowTertiary};
+  `,
+	metricFoot: css`
+    margin-block-start: 14px;
+  `,
+	metricHint: css`
+    && {
+      font-size: ${cssVar.fontSize};
+      color: ${cssVar.colorText};
+    }
+  `,
+	metricLabel: css`
+    && {
+      font-size: ${cssVar.fontSize};
+      font-weight: 500;
+      color: ${cssVar.colorText};
+    }
+  `,
+	metricValue: css`
+    && {
+      margin-block-start: 6px;
+
+      font-size: ${cssVar.fontSizeHeading2};
+      font-weight: 700;
+      font-variant-numeric: tabular-nums;
+      line-height: 1.05;
+      color: ${cssVar.colorText};
+    }
+  `,
+	root: css`
+    position: relative;
+
+    overflow: hidden;
+    flex: 1;
+
+    min-inline-size: 0;
+    padding: 16px;
+  `,
+	value: css`
+    font-size: ${cssVar.fontSizeHeading2};
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    color: ${cssVar.colorText};
+
+    ${responsive.mobile} {
+      font-size: ${cssVar.fontSizeHeading3};
+    }
+  `,
+	wash: css`
+    isolation: isolate;
+
+    &::before {
+      pointer-events: none;
+      content: '';
+
+      position: absolute;
+      z-index: 0;
+      inset: 0;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/StatCard/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\r\n  badge: css`\r\n    display: inline-flex;\r\n    flex: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    inline-size: 24px;\r\n    block-size: 24px;\r\n    border: 1px solid ${cssVar.colorFillSecondary};\r\n    border-radius: ${cssVar.borderRadiusSM};\r\n\r\n    color: ${cssVar.colorTextTertiary};\r\n\r\n    background: ${cssVar.colorFillTertiary};\r\n  `,\r\n  body: css`\r\n    position: relative;\r\n    z-index: 1;\r\n  `,\r\n  copy: css`\r\n    flex-wrap: nowrap;\r\n    min-inline-size: 0;\r\n  `,\r\n  delta: css`\r\n    display: inline-flex;\r\n    gap: 2px;\r\n    align-items: center;\r\n\r\n    font-size: ${cssVar.fontSizeSM};\r\n    font-variant-numeric: tabular-nums;\r\n  `,\r\n  deltaDown: css`\r\n    color: ${cssVar.colorError};\r\n  `,\r\n  deltaFlat: css`\r\n    color: ${cssVar.colorTextTertiary};\r\n  `,\r\n  deltaUp: css`\r\n    color: ${cssVar.colorSuccess};\r\n  `,\r\n  frame: css`\r\n    &&& {\r\n      border-color: ${cssVar.colorBorderSecondary};\r\n    }\r\n  `,\r\n  gray: css`\r\n    &::before {\r\n      background: linear-gradient(\r\n        to bottom,\r\n        ${cssVar.colorBgElevated} 0%,\r\n        color-mix(in srgb, ${cssVar.colorText} 4%, ${cssVar.colorBgElevated}) 100%\r\n      );\r\n    }\r\n  `,\r\n  hint: css`\r\n    font-size: ${cssVar.fontSizeSM};\r\n    color: ${cssVar.colorTextTertiary};\r\n  `,\r\n  label: css`\r\n    font-size: ${cssVar.fontSizeSM};\r\n    color: ${cssVar.colorTextSecondary};\r\n  `,\r\n  lift: css`\r\n    display: flex;\r\n    min-inline-size: 0;\r\n    border-radius: ${cssVar.borderRadiusLG};\r\n    box-shadow: ${cssVar.boxShadowTertiary};\r\n  `,\r\n  metricFoot: css`\r\n    margin-block-start: 14px;\r\n  `,\r\n  metricHint: css`\r\n    && {\r\n      font-size: ${cssVar.fontSize};\r\n      color: ${cssVar.colorText};\r\n    }\r\n  `,\r\n  metricLabel: css`\r\n    && {\r\n      font-size: ${cssVar.fontSize};\r\n      font-weight: 500;\r\n      color: ${cssVar.colorText};\r\n    }\r\n  `,\r\n  metricValue: css`\r\n    && {\r\n      margin-block-start: 6px;\r\n\r\n      font-size: ${cssVar.fontSizeHeading2};\r\n      font-weight: 700;\r\n      font-variant-numeric: tabular-nums;\r\n      line-height: 1.05;\r\n      color: ${cssVar.colorText};\r\n    }\r\n  `,\r\n  root: css`\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n    flex: 1;\r\n\r\n    min-inline-size: 0;\r\n    padding: 16px;\r\n  `,\r\n  value: css`\r\n    font-size: ${cssVar.fontSizeHeading2};\r\n    font-weight: 600;\r\n    font-variant-numeric: tabular-nums;\r\n    line-height: 1.2;\r\n    color: ${cssVar.colorText};\r\n\r\n    ${responsive.mobile} {\r\n      font-size: ${cssVar.fontSizeHeading3};\r\n    }\r\n  `,\r\n  wash: css`\r\n    isolation: isolate;\r\n\r\n    &::before {\r\n      pointer-events: none;\r\n      content: '';\r\n\r\n      position: absolute;\r\n      z-index: 0;\r\n      inset: 0;\r\n    }\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;;wBAQY,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,MAAM,GAAG;;;;CAIT,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;;;iBAKK,OAAO,WAAW;;;CAGjC,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,kBAAkB;;CAEpC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,OAAO,GAAG;;sBAEU,OAAO,qBAAqB;;;CAGhD,MAAM,GAAG;;;;UAID,OAAO,gBAAgB;6BACJ,OAAO,UAAU,OAAO,OAAO,gBAAgB;;;;CAI1E,MAAM,GAAG;iBACM,OAAO,WAAW;aACtB,OAAO,kBAAkB;;CAEpC,OAAO,GAAG;iBACK,OAAO,WAAW;aACtB,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;qBAGU,OAAO,eAAe;kBACzB,OAAO,kBAAkB;;CAEzC,YAAY,GAAG;;;CAGf,YAAY,GAAG;;mBAEE,OAAO,SAAS;eACpB,OAAO,UAAU;;;CAG9B,aAAa,GAAG;;mBAEC,OAAO,SAAS;;eAEpB,OAAO,UAAU;;;CAG9B,aAAa,GAAG;;;;mBAIC,OAAO,iBAAiB;;;;eAI5B,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;;;;;;CAST,OAAO,GAAG;iBACK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;MAExB,WAAW,OAAO;mBACL,OAAO,iBAAiB;;;CAGzC,MAAM,GAAG;;;;;;;;;;;;AAYX,EAAE"}