@xeonr/platform-ui 0.3.10 → 0.3.11
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/kit/Stat.d.ts +6 -1
- package/dist/kit/Stat.d.ts.map +1 -1
- package/dist/kit/Stat.js +31 -3
- package/dist/kit/Stat.js.map +1 -1
- package/package.json +1 -1
package/dist/kit/Stat.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
|
+
import { type IconName } from "./Icon.tsx";
|
|
2
3
|
export declare const StatGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
3
4
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
4
5
|
}, {
|
|
@@ -12,11 +13,15 @@ export declare function StatValue({ label, value, sub, tone }: {
|
|
|
12
13
|
tone?: "ok" | "warn" | "crit" | "brand" | undefined;
|
|
13
14
|
}): import("react").JSX.Element;
|
|
14
15
|
/** StatTile: label over a big number, with an optional subline. */
|
|
15
|
-
export declare function StatTile({ label, value, sub, tone }: {
|
|
16
|
+
export declare function StatTile({ label, value, sub, tone, icon, to }: {
|
|
16
17
|
label: ReactNode;
|
|
17
18
|
value: ReactNode;
|
|
18
19
|
sub?: ReactNode | undefined;
|
|
19
20
|
tone?: "ok" | "warn" | "crit" | "brand" | undefined;
|
|
21
|
+
/** a brand-tinted glyph beside the label */
|
|
22
|
+
icon?: IconName | undefined;
|
|
23
|
+
/** the tile is also the way in: a router link to the section it counts */
|
|
24
|
+
to?: string | undefined;
|
|
20
25
|
}): import("react").JSX.Element;
|
|
21
26
|
/** Meter: value out of max as a bar; tone defaults from the ratio. */
|
|
22
27
|
export declare function Meter({ value, max, tone, label, width }: {
|
package/dist/kit/Stat.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../src/kit/Stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Stat.d.ts","sourceRoot":"","sources":["../../src/kit/Stat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIjD,eAAO,MAAM,QAAQ;;;WAAuB,MAAM,GAAG,SAAS;YAI7D,CAAC;AA6BF,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;IACrD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACrD,+BAQA;AAED,mEAAmE;AACnE,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IAC9D,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACpD,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzB,+BAeA;AAoCD,sEAAsE;AACtE,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,+BAQA"}
|
package/dist/kit/Stat.js
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import styled, { css } from "styled-components";
|
|
3
|
+
import { Link } from "react-router-dom";
|
|
3
4
|
import { v } from "../theme/tokens.js";
|
|
4
5
|
import { Panel } from "./Panel.js";
|
|
5
6
|
import { MicroLabel } from "./Panel.js";
|
|
7
|
+
import { Icon } from "./Icon.js";
|
|
6
8
|
// Stat tiles (overview numbers) and a utilisation meter.
|
|
7
9
|
export const StatGrid = styled.div `
|
|
8
10
|
display: grid;
|
|
9
11
|
grid-template-columns: repeat(auto-fit, minmax(${(p) => p.$min ?? 150}px, 1fr));
|
|
10
12
|
gap: 12px;
|
|
11
13
|
`;
|
|
14
|
+
const tileCss = css `
|
|
15
|
+
padding: 12px 14px;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
gap: 6px;
|
|
19
|
+
border: 1px solid ${v.line};
|
|
20
|
+
border-radius: ${v.rPanel};
|
|
21
|
+
background: ${v.surface};
|
|
22
|
+
`;
|
|
12
23
|
const Tile = styled(Panel) `
|
|
13
24
|
padding: 12px 14px;
|
|
14
25
|
display: flex;
|
|
@@ -28,9 +39,26 @@ export function StatValue({ label, value, sub, tone }) {
|
|
|
28
39
|
return (_jsxs("span", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsx(MicroLabel, { children: label }), _jsx(Value, { "$tone": tone, children: value }), sub ? _jsx(Sub, { children: sub }) : null] }));
|
|
29
40
|
}
|
|
30
41
|
/** StatTile: label over a big number, with an optional subline. */
|
|
31
|
-
export function StatTile({ label, value, sub, tone }) {
|
|
32
|
-
|
|
42
|
+
export function StatTile({ label, value, sub, tone, icon, to }) {
|
|
43
|
+
const body = (_jsxs(_Fragment, { children: [_jsxs(Head, { children: [_jsxs(MicroLabel, { children: [icon ? _jsx(Glyph, { children: _jsx(Icon, { name: icon }) }) : null, label] }), to ? _jsx(Go, { children: _jsx(Icon, { name: "arrow-right" }) }) : null] }), _jsx(Value, { "$tone": tone, children: value }), sub ? _jsx(Sub, { children: sub }) : null] }));
|
|
44
|
+
return to ? _jsx(TileLink, { to: to, children: body }) : _jsx(Tile, { children: body });
|
|
33
45
|
}
|
|
46
|
+
const Head = styled.div `
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: space-between;
|
|
50
|
+
gap: 8px;
|
|
51
|
+
${MicroLabel} { display: inline-flex; align-items: center; gap: 7px; }
|
|
52
|
+
`;
|
|
53
|
+
const Glyph = styled.span `color: ${v.brand}; display: grid;`;
|
|
54
|
+
const Go = styled.span `color: ${v.faint}; display: grid; font-size: 11px;`;
|
|
55
|
+
const TileLink = styled(Link) `
|
|
56
|
+
${tileCss}
|
|
57
|
+
text-decoration: none;
|
|
58
|
+
color: inherit;
|
|
59
|
+
transition: border-color 0.14s ease, background 0.14s ease;
|
|
60
|
+
&:hover { border-color: ${v.line2}; background: ${v.surface2}; }
|
|
61
|
+
`;
|
|
34
62
|
const Bar = styled.div `
|
|
35
63
|
${(p) => p.$w && css `width: ${p.$w}px;`}
|
|
36
64
|
height: 6px;
|
package/dist/kit/Stat.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stat.js","sourceRoot":"","sources":["../../src/kit/Stat.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Stat.js","sourceRoot":"","sources":["../../src/kit/Stat.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED