@powered-by-array/ui 1.83.0 → 1.84.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/KeyStatsCard/KeyStatsCard.d.ts.map +1 -1
- package/dist/components/KeyStatsCard/KeyStatsCard.js +2 -1
- package/dist/components/KeyStatsCard/KeyStatsCard.js.map +1 -1
- package/dist/components/KeyStatsCard/KeyStatsCard.types.d.ts +4 -2
- package/dist/components/KeyStatsCard/KeyStatsCard.types.d.ts.map +1 -1
- package/dist/components/StatCard/StatCard.js +1 -1
- package/dist/components/StatCard/StatCard.js.map +1 -1
- package/dist/components/StatCard/StatCard.skeleton.d.ts +10 -1
- package/dist/components/StatCard/StatCard.skeleton.d.ts.map +1 -1
- package/dist/components/StatCard/StatCard.skeleton.js +4 -2
- package/dist/components/StatCard/StatCard.skeleton.js.map +1 -1
- package/dist/components/StatCard/StatCard.types.d.ts +5 -2
- package/dist/components/StatCard/StatCard.types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyStatsCard.d.ts","sourceRoot":"","sources":["../../../src/components/KeyStatsCard/KeyStatsCard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"KeyStatsCard.d.ts","sourceRoot":"","sources":["../../../src/components/KeyStatsCard/KeyStatsCard.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOjE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA+GpD"}
|
|
@@ -3,6 +3,7 @@ import * as React from "react";
|
|
|
3
3
|
import { cn } from "../../lib/cn.js";
|
|
4
4
|
import { Badge } from "../Badge/index.js";
|
|
5
5
|
import { CardContainer } from "../CardContainer/index.js";
|
|
6
|
+
import { Skeleton } from "../Skeleton/index.js";
|
|
6
7
|
import { KeyStatsCardSkeleton } from "./KeyStatsCard.skeleton.js";
|
|
7
8
|
import { getStatStripClass, keyStatsCardStatToneClass, keyStatsCardVariants, } from "./KeyStatsCard.variants.js";
|
|
8
9
|
export function KeyStatsCard(props) {
|
|
@@ -12,7 +13,7 @@ export function KeyStatsCard(props) {
|
|
|
12
13
|
const { title, subtitle, status, stats, footerItems, onClick, ref, className, } = props;
|
|
13
14
|
return (_jsx(CardContainer, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", "data-slot": "key-stats-card", className: cn(keyStatsCardVariants.root, className), onClick: onClick, children: [_jsxs("div", { "data-slot": "key-stats-card-title-block", className: cn(keyStatsCardVariants.titleBlock), children: [_jsxs("div", { className: cn(keyStatsCardVariants.titleGroup), children: [_jsxs("div", { "data-slot": "key-stats-card-primary-row", className: cn(keyStatsCardVariants.primaryRow), children: [_jsx("span", { "data-slot": "key-stats-card-title", className: cn(keyStatsCardVariants.title), children: title }), status ? _jsx(Badge, { variant: status }) : null] }), subtitle ? (_jsx("span", { "data-slot": "key-stats-card-subtitle", className: cn(keyStatsCardVariants.subtitle), children: subtitle })) : null] }), _jsx("div", { "data-slot": "key-stats-card-stat-strip", className: cn(getStatStripClass(stats.length)), children: stats.map((stat, i) => {
|
|
14
15
|
const slotKey = stat.slot ?? stat.label;
|
|
15
|
-
return (_jsx("div", { "data-slot": "key-stats-card-stat", "data-stat": slotKey, className: cn(keyStatsCardVariants.stat), children: _jsxs("div", { className: cn(keyStatsCardVariants.statInner), children: [_jsx("span", { "data-slot": "key-stats-card-stat-label", className: cn(keyStatsCardVariants.statLabel), children: stat.label }), _jsx("span", { "data-slot": "key-stats-card-stat-value", className: cn(keyStatsCardVariants.statValue, keyStatsCardStatToneClass[stat.tone ?? "neutral"]), children: stat.value })] }) }, slotKey + i));
|
|
16
|
+
return (_jsx("div", { "data-slot": "key-stats-card-stat", "data-stat": slotKey, className: cn(keyStatsCardVariants.stat), children: _jsxs("div", { className: cn(keyStatsCardVariants.statInner), children: [_jsx("span", { "data-slot": "key-stats-card-stat-label", className: cn(keyStatsCardVariants.statLabel), children: stat.label }), stat.loading ? (_jsx(Skeleton, { className: cn(keyStatsCardVariants.skeleton.statValue), "aria-hidden": "true" })) : (_jsx("span", { "data-slot": "key-stats-card-stat-value", className: cn(keyStatsCardVariants.statValue, keyStatsCardStatToneClass[stat.tone ?? "neutral"]), children: stat.value }))] }) }, slotKey + i));
|
|
16
17
|
}) })] }), footerItems && footerItems.length > 0 ? (_jsx("div", { "data-slot": "key-stats-card-context-strip", className: cn(keyStatsCardVariants.contextStrip), children: footerItems.map((item, i) => (_jsxs(React.Fragment, { children: [i > 0 ? _jsx("span", { "aria-hidden": "true", children: "\u2022" }) : null, _jsx("span", { children: item })] }, i))) })) : null] }) }));
|
|
17
18
|
}
|
|
18
19
|
//# sourceMappingURL=KeyStatsCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyStatsCard.js","sourceRoot":"","sources":["../../../src/components/KeyStatsCard/KeyStatsCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EACL,iBAAiB,EACjB,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAC,oBAAoB,IAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,GAAI,CAAC;IACvE,CAAC;IAED,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,GAAG,EACH,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,aAAa,IAAC,OAAO,kBACpB,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,eACH,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,IAAI,EAAE,SAAS,CAAC,EACnD,OAAO,EAAE,OAAO,aAEhB,4BACY,4BAA4B,EACtC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,aAE9C,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,aACjD,4BACY,4BAA4B,EACtC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,aAE9C,4BACY,sBAAsB,EAChC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,YAExC,KAAK,GACD,EACN,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,IACvC,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,4BACY,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,QAAQ,CAAC,YAE3C,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,EAEN,2BACY,2BAA2B,EACrC,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,YAE7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gCACrB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC;gCACxC,OAAO,CACL,2BAEY,qBAAqB,eACpB,OAAO,EAClB,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAExC,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,aAChD,4BACY,2BAA2B,EACrC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,YAE5C,IAAI,CAAC,KAAK,GACN,
|
|
1
|
+
{"version":3,"file":"KeyStatsCard.js","sourceRoot":"","sources":["../../../src/components/KeyStatsCard/KeyStatsCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EACL,iBAAiB,EACjB,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAC,oBAAoB,IAAC,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,GAAI,CAAC;IACvE,CAAC;IAED,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,GAAG,EACH,SAAS,GACV,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,aAAa,IAAC,OAAO,kBACpB,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,eACH,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,IAAI,EAAE,SAAS,CAAC,EACnD,OAAO,EAAE,OAAO,aAEhB,4BACY,4BAA4B,EACtC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,aAE9C,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,aACjD,4BACY,4BAA4B,EACtC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,UAAU,CAAC,aAE9C,4BACY,sBAAsB,EAChC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,YAExC,KAAK,GACD,EACN,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,OAAO,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,IACvC,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,4BACY,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,QAAQ,CAAC,YAE3C,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,EAEN,2BACY,2BAA2B,EACrC,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,YAE7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gCACrB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC;gCACxC,OAAO,CACL,2BAEY,qBAAqB,eACpB,OAAO,EAClB,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAExC,eAAK,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,aAChD,4BACY,2BAA2B,EACrC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,SAAS,CAAC,YAE5C,IAAI,CAAC,KAAK,GACN,EACN,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,KAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,QAAQ,CAAC,SAAS,CAAC,iBAC1C,MAAM,GAClB,CACH,CAAC,CAAC,CAAC,CACF,4BACY,2BAA2B,EACrC,SAAS,EAAE,EAAE,CACX,oBAAoB,CAAC,SAAS,EAC9B,yBAAyB,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAClD,YAEA,IAAI,CAAC,KAAK,GACN,CACR,IACG,IA5BD,OAAO,GAAG,CAAC,CA6BZ,CACP,CAAC;4BACJ,CAAC,CAAC,GACE,IACF,EAEL,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACvC,2BACY,8BAA8B,EACxC,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,YAAY,CAAC,YAE/C,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,MAAC,KAAK,CAAC,QAAQ,eACZ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,8BAAkB,MAAM,uBAAS,CAAC,CAAC,CAAC,IAAI,EACjD,yBAAO,IAAI,GAAQ,KAFA,CAAC,CAGL,CAClB,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,IACD,GACK,CACjB,CAAC;AACJ,CAAC"}
|
|
@@ -7,12 +7,14 @@ export type KeyStatsCardStatus = "active" | "paused";
|
|
|
7
7
|
export type KeyStatItem = {
|
|
8
8
|
/** Short label rendered above the value in uppercase. */
|
|
9
9
|
label: string;
|
|
10
|
-
/** The value to display — accepts strings or rich React nodes. */
|
|
11
|
-
value
|
|
10
|
+
/** The value to display — accepts strings or rich React nodes. Omit when `loading` is true. */
|
|
11
|
+
value?: React.ReactNode;
|
|
12
12
|
/** Color tone applied to the value. Defaults to `"neutral"`. */
|
|
13
13
|
tone?: KeyStatsCardStatTone;
|
|
14
14
|
/** Optional key used as `data-stat` on the tile element. Falls back to the label. */
|
|
15
15
|
slot?: string;
|
|
16
|
+
/** When true, renders a skeleton shimmer in place of the value while data loads. */
|
|
17
|
+
loading?: boolean;
|
|
16
18
|
};
|
|
17
19
|
type KeyStatsCardData = {
|
|
18
20
|
title: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyStatsCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/KeyStatsCard/KeyStatsCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErD,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd
|
|
1
|
+
{"version":3,"file":"KeyStatsCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/KeyStatsCard/KeyStatsCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErD,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG;IACxB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,gEAAgE;IAChE,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,kFAAkF;IAClF,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GACzB,CAAC;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACxC,CAAC;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC"}
|
|
@@ -12,7 +12,7 @@ const TrendIcon = {
|
|
|
12
12
|
};
|
|
13
13
|
export function StatCard(props) {
|
|
14
14
|
if (props.loading) {
|
|
15
|
-
return _jsx(StatCardSkeleton, {});
|
|
15
|
+
return _jsx(StatCardSkeleton, { title: props.title });
|
|
16
16
|
}
|
|
17
17
|
const { title, value, lookbackWindow, trend, change } = props;
|
|
18
18
|
const hasTrend = trend != null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAGxF,MAAM,SAAS,GAA6C;IAC1D,EAAE,EAAE,UAAU;IACd,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAGxF,MAAM,SAAS,GAA6C;IAC1D,EAAE,EAAE,UAAU;IACd,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC;IAClD,CAAC;IAED,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,CAAC;IAC/B,MAAM,SAAS,GAAG,cAAc,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,IAAI,IAAI,CAAC,CAAC;IAEzE,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAChD,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEzE,OAAO,CACL,KAAC,aAAa,iBAAW,WAAW,YAClC,eAAK,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aACxB,yBAAa,iBAAiB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAClD,KAAK,GACJ,EAEJ,4BAAe,qBAAqB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,aAC5D,4BAAgB,iBAAiB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YACrD,KAAK,GACD,EACN,IAAI,IAAI,IAAI,IAAI,CACf,KAAC,IAAI,iBACO,iBAAiB,iBACf,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,GACtC,CACH,IACG,EAEL,SAAS,IAAI,CACZ,4BAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,aACtD,cAAc,IAAI,IAAI,IAAI,CACzB,4BAAgB,oBAAoB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,YAC3D,cAAc,GACV,CACR,EACA,QAAQ,IAAI,MAAM,IAAI,IAAI,IAAI,CAC7B,4BAAgB,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,UAAU,CAAC,YACnE,MAAM,GACF,CACR,IACG,CACP,IACG,GACQ,CACjB,CAAC;AACJ,CAAC"}
|
|
@@ -1,7 +1,16 @@
|
|
|
1
|
+
type StatCardSkeletonProps = {
|
|
2
|
+
/**
|
|
3
|
+
* When provided, the title renders normally and only the value row and footer
|
|
4
|
+
* shimmer — partial loading while async metric data is fetched.
|
|
5
|
+
*/
|
|
6
|
+
title?: string;
|
|
7
|
+
};
|
|
1
8
|
/**
|
|
2
9
|
* Loading placeholder for {@link StatCard}. Reuses the card's `CardContainer`
|
|
3
10
|
* surface and layout slots, replacing each piece of content with a `Skeleton`
|
|
4
11
|
* block so the placeholder matches the card's footprint with no layout shift.
|
|
12
|
+
* Pass `title` for partial loading (label visible, value/footer skeleton).
|
|
5
13
|
*/
|
|
6
|
-
export declare function StatCardSkeleton(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function StatCardSkeleton({ title }?: StatCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export {};
|
|
7
16
|
//# sourceMappingURL=StatCard.skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCard.skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.skeleton.tsx"],"names":[],"mappings":"AAKA
|
|
1
|
+
{"version":3,"file":"StatCard.skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.skeleton.tsx"],"names":[],"mappings":"AAKA,KAAK,qBAAqB,GAAG;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,GAAE,qBAA0B,2CAgCrE"}
|
|
@@ -7,8 +7,10 @@ import { statCardVariants as s } from "./StatCard.variants.js";
|
|
|
7
7
|
* Loading placeholder for {@link StatCard}. Reuses the card's `CardContainer`
|
|
8
8
|
* surface and layout slots, replacing each piece of content with a `Skeleton`
|
|
9
9
|
* block so the placeholder matches the card's footprint with no layout shift.
|
|
10
|
+
* Pass `title` for partial loading (label visible, value/footer skeleton).
|
|
10
11
|
*/
|
|
11
|
-
export function StatCardSkeleton() {
|
|
12
|
-
|
|
12
|
+
export function StatCardSkeleton({ title } = {}) {
|
|
13
|
+
const isPartial = title != null;
|
|
14
|
+
return (_jsx(CardContainer, { "data-slot": isPartial ? "stat-card" : "stat-card-skeleton", children: _jsxs("div", { className: cn(s.root), "aria-busy": "true", "aria-live": "polite", children: [_jsx("span", { className: "sr-only", children: "Loading stat" }), isPartial ? (_jsx("p", { "data-slot": "stat-card-title", className: cn(s.title), children: title })) : (_jsx(Skeleton, { className: cn(s.skeleton.title), "aria-hidden": "true" })), _jsxs("div", { "data-slot": "stat-card-value-row", className: cn(s.valueRow), "aria-hidden": "true", children: [_jsx(Skeleton, { className: cn(s.skeleton.value) }), _jsx(Skeleton, { className: cn(s.skeleton.trendIcon) })] }), _jsxs("div", { "data-slot": "stat-card-footer", className: cn(s.footer), "aria-hidden": "true", children: [_jsx(Skeleton, { className: cn(s.skeleton.lookback) }), _jsx(Skeleton, { className: cn(s.skeleton.change) })] })] }) }));
|
|
13
15
|
}
|
|
14
16
|
//# sourceMappingURL=StatCard.skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCard.skeleton.js","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,gBAAgB,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"StatCard.skeleton.js","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,gBAAgB,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAU/D;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,KAA4B,EAAE;IACpE,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,CAAC;IAEhC,OAAO,CACL,KAAC,aAAa,iBAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,YACtE,eAAK,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAY,MAAM,eAAW,QAAQ,aAC7D,eAAM,SAAS,EAAC,SAAS,6BAAoB,EAE5C,SAAS,CAAC,CAAC,CAAC,CACX,yBAAa,iBAAiB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAClD,KAAK,GACJ,CACL,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,iBAAc,MAAM,GAAG,CACjE,EAED,4BACY,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,iBACb,MAAM,aAElB,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAI,EAC7C,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAI,IAC7C,EAEN,4BAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAc,MAAM,aAC3E,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAI,EAChD,KAAC,QAAQ,IAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAI,IAC1C,IACF,GACQ,CACjB,CAAC;AACJ,CAAC"}
|
|
@@ -22,8 +22,11 @@ type StatCardData = {
|
|
|
22
22
|
change?: string;
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
|
-
* Either a fully populated stat card, or a loading placeholder. When `loading`
|
|
26
|
-
* true the card renders its own skeleton and data props are not required.
|
|
25
|
+
* Either a fully populated stat card, or a loading placeholder. When `loading`
|
|
26
|
+
* is true the card renders its own skeleton and data props are not required.
|
|
27
|
+
* If `title` is provided alongside `loading`, the title stays visible while
|
|
28
|
+
* the value row and footer shimmer — useful when the label is known before
|
|
29
|
+
* async metric data arrives.
|
|
27
30
|
*/
|
|
28
31
|
export type StatCardProps = ({
|
|
29
32
|
loading?: false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"StatCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/StatCard/StatCard.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,KAAK,YAAY,GAAG;IAClB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GACrB,CAAC;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,YAAY,CAAC,GACpC,CAAC;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC"}
|