@steez-ui/ui 0.1.5 → 0.1.6
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/README.md +3 -3
- package/dist/components/QuickInfoCard.d.ts +20 -0
- package/dist/components/QuickInfoCard.d.ts.map +1 -0
- package/dist/components/QuickInfoCard.js +38 -0
- package/dist/components/QuickInfoCard.js.map +1 -0
- package/dist/components/QuickInfoCard.module.css +138 -0
- package/dist/components/Section.d.ts +9 -0
- package/dist/components/Section.d.ts.map +1 -0
- package/dist/components/Section.js +7 -0
- package/dist/components/Section.js.map +1 -0
- package/dist/components/Section.module.css +20 -0
- package/dist/components/SectionHeader.d.ts +10 -0
- package/dist/components/SectionHeader.d.ts.map +1 -0
- package/dist/components/SectionHeader.js +7 -0
- package/dist/components/SectionHeader.js.map +1 -0
- package/dist/components/SectionHeader.module.css +54 -0
- package/dist/components/StatCard.d.ts +11 -0
- package/dist/components/StatCard.d.ts.map +1 -0
- package/dist/components/StatCard.js +14 -0
- package/dist/components/StatCard.js.map +1 -0
- package/dist/components/StatCard.module.css +41 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -101,9 +101,9 @@ GitHub Actions mirror the same CI, npm publish, and Cloudflare Pages deploy path
|
|
|
101
101
|
|
|
102
102
|
## Current Packages
|
|
103
103
|
|
|
104
|
-
- `@steez-ui/theme@0.1.
|
|
105
|
-
- `@steez-ui/icons@0.1.
|
|
106
|
-
- `@steez-ui/ui@0.1.
|
|
104
|
+
- `@steez-ui/theme@0.1.6`
|
|
105
|
+
- `@steez-ui/icons@0.1.6`
|
|
106
|
+
- `@steez-ui/ui@0.1.6`
|
|
107
107
|
|
|
108
108
|
## External Setup
|
|
109
109
|
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface QuickInfoItem {
|
|
3
|
+
icon?: React.ReactNode;
|
|
4
|
+
label: string;
|
|
5
|
+
value: string | number;
|
|
6
|
+
valueColor?: "default" | "success" | "warning" | "danger";
|
|
7
|
+
mono?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface StorageProgress {
|
|
10
|
+
used: number;
|
|
11
|
+
limit: number;
|
|
12
|
+
}
|
|
13
|
+
export interface QuickInfoCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
14
|
+
items: QuickInfoItem[];
|
|
15
|
+
storageProgress?: StorageProgress;
|
|
16
|
+
showCornerBrackets?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare function QuickInfoCard({ items, storageProgress, className, showCornerBrackets, ...props }: QuickInfoCardProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default QuickInfoCard;
|
|
20
|
+
//# sourceMappingURL=QuickInfoCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuickInfoCard.d.ts","sourceRoot":"","sources":["../../src/components/QuickInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAeD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,eAAe,EACf,SAAc,EACd,kBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAiEpB;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from "./QuickInfoCard.module.css";
|
|
3
|
+
function formatFileSize(bytes) {
|
|
4
|
+
if (bytes === 0) {
|
|
5
|
+
return "0 Bytes";
|
|
6
|
+
}
|
|
7
|
+
const base = 1024;
|
|
8
|
+
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
9
|
+
const unitIndex = Math.floor(Math.log(bytes) / Math.log(base));
|
|
10
|
+
return `${parseFloat((bytes / Math.pow(base, unitIndex)).toFixed(2))} ${sizes[unitIndex]}`;
|
|
11
|
+
}
|
|
12
|
+
export function QuickInfoCard({ items, storageProgress, className = "", showCornerBrackets = true, ...props }) {
|
|
13
|
+
const storageRatio = storageProgress
|
|
14
|
+
? storageProgress.used / Math.max(storageProgress.limit, 1)
|
|
15
|
+
: 0;
|
|
16
|
+
const storageToneClass = storageRatio > 0.9
|
|
17
|
+
? styles.storageDanger
|
|
18
|
+
: storageRatio > 0.7
|
|
19
|
+
? styles.storageWarning
|
|
20
|
+
: "";
|
|
21
|
+
const getValueToneClass = (color) => {
|
|
22
|
+
switch (color) {
|
|
23
|
+
case "success":
|
|
24
|
+
return styles.valueSuccess;
|
|
25
|
+
case "warning":
|
|
26
|
+
return styles.valueWarning;
|
|
27
|
+
case "danger":
|
|
28
|
+
return styles.valueDanger;
|
|
29
|
+
default:
|
|
30
|
+
return "";
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
return (_jsxs("div", { className: `${styles.card} ${showCornerBrackets ? styles.cardWithBrackets : ""} ${className}`.trim(), ...props, children: [items.map((item, index) => (_jsxs("div", { className: styles.item, children: [item.icon ? _jsx("div", { className: styles.icon, children: item.icon }) : null, _jsxs("div", { className: styles.info, children: [_jsx("span", { className: styles.label, children: item.label }), _jsx("span", { className: `${styles.value} ${item.mono ? styles.valueMono : ""} ${getValueToneClass(item.valueColor)}`.trim(), children: item.value })] })] }, `${item.label}-${index}`))), storageProgress ? (_jsxs("div", { className: styles.storageProgress, children: [_jsxs("div", { className: styles.storageProgressLabel, children: [_jsx("span", { children: "Storage" }), _jsxs("span", { className: styles.storageProgressValue, children: [formatFileSize(storageProgress.used), " /", " ", formatFileSize(storageProgress.limit)] })] }), _jsx("div", { className: styles.storageProgressBar, children: _jsx("div", { className: `${styles.storageProgressFill} ${storageToneClass}`.trim(), style: {
|
|
34
|
+
"--storage-progress-width": `${Math.min(storageRatio * 100, 100)}%`,
|
|
35
|
+
} }) })] })) : null] }));
|
|
36
|
+
}
|
|
37
|
+
export default QuickInfoCard;
|
|
38
|
+
//# sourceMappingURL=QuickInfoCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuickInfoCard.js","sourceRoot":"","sources":["../../src/components/QuickInfoCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport styles from \"./QuickInfoCard.module.css\";\n\nexport interface QuickInfoItem {\n icon?: React.ReactNode;\n label: string;\n value: string | number;\n valueColor?: \"default\" | \"success\" | \"warning\" | \"danger\";\n mono?: boolean;\n}\n\nexport interface StorageProgress {\n used: number;\n limit: number;\n}\n\nexport interface QuickInfoCardProps extends React.HTMLAttributes<HTMLDivElement> {\n items: QuickInfoItem[];\n storageProgress?: StorageProgress;\n showCornerBrackets?: boolean;\n}\n\nfunction formatFileSize(bytes: number) {\n if (bytes === 0) {\n return \"0 Bytes\";\n }\n\n const base = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n const unitIndex = Math.floor(Math.log(bytes) / Math.log(base));\n return `${parseFloat((bytes / Math.pow(base, unitIndex)).toFixed(2))} ${\n sizes[unitIndex]\n }`;\n}\n\nexport function QuickInfoCard({\n items,\n storageProgress,\n className = \"\",\n showCornerBrackets = true,\n ...props\n}: QuickInfoCardProps) {\n const storageRatio = storageProgress\n ? storageProgress.used / Math.max(storageProgress.limit, 1)\n : 0;\n const storageToneClass =\n storageRatio > 0.9\n ? styles.storageDanger\n : storageRatio > 0.7\n ? styles.storageWarning\n : \"\";\n\n const getValueToneClass = (color?: QuickInfoItem[\"valueColor\"]) => {\n switch (color) {\n case \"success\":\n return styles.valueSuccess;\n case \"warning\":\n return styles.valueWarning;\n case \"danger\":\n return styles.valueDanger;\n default:\n return \"\";\n }\n };\n\n return (\n <div\n className={`${styles.card} ${showCornerBrackets ? styles.cardWithBrackets : \"\"} ${className}`.trim()}\n {...props}\n >\n {items.map((item, index) => (\n <div key={`${item.label}-${index}`} className={styles.item}>\n {item.icon ? <div className={styles.icon}>{item.icon}</div> : null}\n <div className={styles.info}>\n <span className={styles.label}>{item.label}</span>\n <span\n className={`${styles.value} ${item.mono ? styles.valueMono : \"\"} ${getValueToneClass(item.valueColor)}`.trim()}\n >\n {item.value}\n </span>\n </div>\n </div>\n ))}\n {storageProgress ? (\n <div className={styles.storageProgress}>\n <div className={styles.storageProgressLabel}>\n <span>Storage</span>\n <span className={styles.storageProgressValue}>\n {formatFileSize(storageProgress.used)} /{\" \"}\n {formatFileSize(storageProgress.limit)}\n </span>\n </div>\n <div className={styles.storageProgressBar}>\n <div\n className={`${styles.storageProgressFill} ${storageToneClass}`.trim()}\n style={\n {\n \"--storage-progress-width\": `${Math.min(storageRatio * 100, 100)}%`,\n } as React.CSSProperties\n }\n />\n </div>\n </div>\n ) : null}\n </div>\n );\n}\n\nexport default QuickInfoCard;\n"]}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
.card {
|
|
2
|
+
display: flex;
|
|
3
|
+
gap: 1.5rem;
|
|
4
|
+
padding: 1rem 1.5rem;
|
|
5
|
+
margin: 0.75rem;
|
|
6
|
+
background: var(--bg-secondary);
|
|
7
|
+
border: 1px solid var(--border-color);
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
position: relative;
|
|
10
|
+
overflow: visible;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cardWithBrackets::before {
|
|
14
|
+
content: "";
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: -0.5rem;
|
|
17
|
+
left: -0.5rem;
|
|
18
|
+
width: 0.5rem;
|
|
19
|
+
height: 0.5rem;
|
|
20
|
+
border-top: 1px solid var(--border-color);
|
|
21
|
+
border-left: 1px solid var(--border-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.cardWithBrackets::after {
|
|
25
|
+
content: "";
|
|
26
|
+
position: absolute;
|
|
27
|
+
bottom: -0.5rem;
|
|
28
|
+
right: -0.5rem;
|
|
29
|
+
width: 0.5rem;
|
|
30
|
+
height: 0.5rem;
|
|
31
|
+
border-bottom: 1px solid var(--border-color);
|
|
32
|
+
border-right: 1px solid var(--border-color);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.item {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
gap: 0.75rem;
|
|
39
|
+
flex: 1;
|
|
40
|
+
min-width: 150px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.icon {
|
|
44
|
+
display: grid;
|
|
45
|
+
place-items: center;
|
|
46
|
+
flex-shrink: 0;
|
|
47
|
+
color: var(--accent-primary);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.icon :global(svg) {
|
|
51
|
+
width: 1.25rem;
|
|
52
|
+
height: 1.25rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.info {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
gap: 0.125rem;
|
|
59
|
+
flex: 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.label {
|
|
63
|
+
color: var(--text-secondary);
|
|
64
|
+
font-size: 0.6875rem;
|
|
65
|
+
font-weight: 500;
|
|
66
|
+
text-transform: uppercase;
|
|
67
|
+
letter-spacing: 0.05em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.value {
|
|
71
|
+
color: var(--text-primary);
|
|
72
|
+
font-size: 1rem;
|
|
73
|
+
font-weight: 600;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.valueMono {
|
|
77
|
+
font-family: var(--font-mono);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.valueSuccess {
|
|
81
|
+
color: var(--color-success, #10b981);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.valueWarning {
|
|
85
|
+
color: var(--color-warning, #f59e0b);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.valueDanger {
|
|
89
|
+
color: var(--color-error, #ef4444);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.storageProgress {
|
|
93
|
+
flex: 1;
|
|
94
|
+
min-width: 200px;
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
gap: 0.375rem;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.storageProgressLabel {
|
|
101
|
+
display: flex;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
color: var(--text-secondary);
|
|
104
|
+
font-size: 0.6875rem;
|
|
105
|
+
font-weight: 500;
|
|
106
|
+
text-transform: uppercase;
|
|
107
|
+
letter-spacing: 0.05em;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.storageProgressValue {
|
|
111
|
+
color: var(--text-primary);
|
|
112
|
+
font-family: var(--font-mono);
|
|
113
|
+
font-weight: 600;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.storageProgressBar {
|
|
117
|
+
height: 8px;
|
|
118
|
+
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
|
119
|
+
border-radius: 4px;
|
|
120
|
+
overflow: hidden;
|
|
121
|
+
border: 1px solid var(--border-color);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.storageProgressFill {
|
|
125
|
+
height: 100%;
|
|
126
|
+
width: var(--storage-progress-width, 0%);
|
|
127
|
+
background: var(--accent-primary);
|
|
128
|
+
border-radius: 3px;
|
|
129
|
+
transition: width 220ms ease;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.storageWarning {
|
|
133
|
+
background: var(--color-warning, #f59e0b);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.storageDanger {
|
|
137
|
+
background: var(--color-error, #ef4444);
|
|
138
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
|
|
3
|
+
title?: React.ReactNode;
|
|
4
|
+
titleClassName?: string;
|
|
5
|
+
contentClassName?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function Section({ title, children, className, titleClassName, contentClassName, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default Section;
|
|
9
|
+
//# sourceMappingURL=Section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,SAAc,EACd,cAAmB,EACnB,gBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,2CAWd;AAED,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from "./Section.module.css";
|
|
3
|
+
export function Section({ title, children, className = "", titleClassName = "", contentClassName = "", ...props }) {
|
|
4
|
+
return (_jsxs("section", { className: `${styles.section} ${className}`.trim(), ...props, children: [title ? (_jsx("h3", { className: `${styles.title} ${titleClassName}`.trim(), children: title })) : null, _jsx("div", { className: `${styles.content} ${contentClassName}`.trim(), children: children })] }));
|
|
5
|
+
}
|
|
6
|
+
export default Section;
|
|
7
|
+
//# sourceMappingURL=Section.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAS1C,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,gBAAgB,GAAG,EAAE,EACrB,GAAG,KAAK,EACK;IACb,OAAO,CACL,mBAAS,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,KAAM,KAAK,aACnE,KAAK,CAAC,CAAC,CAAC,CACP,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,YAAG,KAAK,GAAM,CACxE,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,YAC3D,QAAQ,GACL,IACE,CACX,CAAC;AACJ,CAAC;AAED,eAAe,OAAO,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./Section.module.css\";\n\nexport interface SectionProps\n extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n title?: React.ReactNode;\n titleClassName?: string;\n contentClassName?: string;\n}\n\nexport function Section({\n title,\n children,\n className = \"\",\n titleClassName = \"\",\n contentClassName = \"\",\n ...props\n}: SectionProps) {\n return (\n <section className={`${styles.section} ${className}`.trim()} {...props}>\n {title ? (\n <h3 className={`${styles.title} ${titleClassName}`.trim()}>{title}</h3>\n ) : null}\n <div className={`${styles.content} ${contentClassName}`.trim()}>\n {children}\n </div>\n </section>\n );\n}\n\nexport default Section;\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.section {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 0.85rem;
|
|
5
|
+
margin-bottom: 1.5rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.title {
|
|
9
|
+
margin: 0;
|
|
10
|
+
color: var(--text-primary);
|
|
11
|
+
font-family: var(--font-mono);
|
|
12
|
+
font-size: 0.9rem;
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
letter-spacing: 0.08em;
|
|
15
|
+
text-transform: uppercase;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.content {
|
|
19
|
+
min-width: 0;
|
|
20
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface SectionHeaderProps {
|
|
3
|
+
title: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
actions?: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare function SectionHeader({ title, description, actions, className, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default SectionHeader;
|
|
10
|
+
//# sourceMappingURL=SectionHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SectionHeader.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAc,GACf,EAAE,kBAAkB,2CAcpB;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from "./SectionHeader.module.css";
|
|
3
|
+
export function SectionHeader({ title, description, actions, className = "", }) {
|
|
4
|
+
return (_jsx("div", { className: `${styles.sectionHeader} ${className}`.trim(), children: _jsxs("div", { className: styles.headerContent, children: [_jsxs("div", { className: styles.textContent, children: [_jsx("h2", { className: styles.title, children: title }), description ? (_jsx("p", { className: styles.description, children: description })) : null] }), actions ? _jsx("div", { className: styles.actions, children: actions }) : null] }) }));
|
|
5
|
+
}
|
|
6
|
+
export default SectionHeader;
|
|
7
|
+
//# sourceMappingURL=SectionHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SectionHeader.js","sourceRoot":"","sources":["../../src/components/SectionHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAShD,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,GAAG,EAAE,GACK;IACnB,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,YAC3D,eAAK,SAAS,EAAE,MAAM,CAAC,aAAa,aAClC,eAAK,SAAS,EAAE,MAAM,CAAC,WAAW,aAChC,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EACxC,WAAW,CAAC,CAAC,CAAC,CACb,YAAG,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,WAAW,GAAK,CACpD,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IAC7D,GACF,CACP,CAAC;AACJ,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./SectionHeader.module.css\";\n\nexport interface SectionHeaderProps {\n title: string;\n description?: string;\n actions?: React.ReactNode;\n className?: string;\n}\n\nexport function SectionHeader({\n title,\n description,\n actions,\n className = \"\",\n}: SectionHeaderProps) {\n return (\n <div className={`${styles.sectionHeader} ${className}`.trim()}>\n <div className={styles.headerContent}>\n <div className={styles.textContent}>\n <h2 className={styles.title}>{title}</h2>\n {description ? (\n <p className={styles.description}>{description}</p>\n ) : null}\n </div>\n {actions ? <div className={styles.actions}>{actions}</div> : null}\n </div>\n </div>\n );\n}\n\nexport default SectionHeader;\n"]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
.sectionHeader {
|
|
2
|
+
background: var(--bg-secondary);
|
|
3
|
+
border: 1px solid var(--border-color);
|
|
4
|
+
border-radius: 8px;
|
|
5
|
+
padding: 1rem 1.25rem;
|
|
6
|
+
margin-bottom: 1.25rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.headerContent {
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: space-between;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: 1rem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.textContent {
|
|
17
|
+
flex: 1;
|
|
18
|
+
min-width: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.title {
|
|
22
|
+
margin: 0 0 0.25rem;
|
|
23
|
+
color: var(--text-primary);
|
|
24
|
+
font-family: var(--font-mono);
|
|
25
|
+
font-size: 1rem;
|
|
26
|
+
font-weight: 600;
|
|
27
|
+
letter-spacing: 0.06em;
|
|
28
|
+
text-transform: uppercase;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.description {
|
|
32
|
+
margin: 0;
|
|
33
|
+
color: var(--text-secondary);
|
|
34
|
+
font-size: 0.8125rem;
|
|
35
|
+
line-height: 1.5;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.actions {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 0.5rem;
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@media (max-width: 640px) {
|
|
46
|
+
.headerContent {
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
align-items: stretch;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.actions {
|
|
52
|
+
justify-content: flex-end;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string | number;
|
|
5
|
+
subvalue?: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
color?: "default" | "success" | "danger" | "warning";
|
|
8
|
+
}
|
|
9
|
+
export declare function StatCard({ label, value, subvalue, onClick, color, className, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default StatCard;
|
|
11
|
+
//# sourceMappingURL=StatCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../src/components/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;CACtD;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAiB,EACjB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,aAAa,2CAqBf;AAED,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from "./StatCard.module.css";
|
|
3
|
+
export function StatCard({ label, value, subvalue, onClick, color = "default", className = "", ...props }) {
|
|
4
|
+
const valueToneClass = color === "success"
|
|
5
|
+
? styles.valueSuccess
|
|
6
|
+
: color === "danger"
|
|
7
|
+
? styles.valueDanger
|
|
8
|
+
: color === "warning"
|
|
9
|
+
? styles.valueWarning
|
|
10
|
+
: "";
|
|
11
|
+
return (_jsxs("div", { className: `${styles.root} ${onClick ? styles.interactive : ""} ${className}`.trim(), onClick: onClick, ...props, children: [_jsx("div", { className: styles.label, children: label }), _jsx("div", { className: `${styles.value} ${valueToneClass}`.trim(), children: value }), subvalue ? _jsx("div", { className: styles.subvalue, children: subvalue }) : null] }));
|
|
12
|
+
}
|
|
13
|
+
export default StatCard;
|
|
14
|
+
//# sourceMappingURL=StatCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatCard.js","sourceRoot":"","sources":["../../src/components/StatCard.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAU3C,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACM;IACd,MAAM,cAAc,GAClB,KAAK,KAAK,SAAS;QACjB,CAAC,CAAC,MAAM,CAAC,YAAY;QACrB,CAAC,CAAC,KAAK,KAAK,QAAQ;YAClB,CAAC,CAAC,MAAM,CAAC,WAAW;YACpB,CAAC,CAAC,KAAK,KAAK,SAAS;gBACnB,CAAC,CAAC,MAAM,CAAC,YAAY;gBACrB,CAAC,CAAC,EAAE,CAAC;IAEb,OAAO,CACL,eACE,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EACpF,OAAO,EAAE,OAAO,KACZ,KAAK,aAET,cAAK,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAO,EAC3C,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,YAAG,KAAK,GAAO,EACxE,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,IAChE,CACP,CAAC;AACJ,CAAC;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./StatCard.module.css\";\n\nexport interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {\n label: string;\n value: string | number;\n subvalue?: string;\n onClick?: () => void;\n color?: \"default\" | \"success\" | \"danger\" | \"warning\";\n}\n\nexport function StatCard({\n label,\n value,\n subvalue,\n onClick,\n color = \"default\",\n className = \"\",\n ...props\n}: StatCardProps) {\n const valueToneClass =\n color === \"success\"\n ? styles.valueSuccess\n : color === \"danger\"\n ? styles.valueDanger\n : color === \"warning\"\n ? styles.valueWarning\n : \"\";\n\n return (\n <div\n className={`${styles.root} ${onClick ? styles.interactive : \"\"} ${className}`.trim()}\n onClick={onClick}\n {...props}\n >\n <div className={styles.label}>{label}</div>\n <div className={`${styles.value} ${valueToneClass}`.trim()}>{value}</div>\n {subvalue ? <div className={styles.subvalue}>{subvalue}</div> : null}\n </div>\n );\n}\n\nexport default StatCard;\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
cursor: default;
|
|
3
|
+
transition: color 220ms ease;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.interactive {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.label {
|
|
11
|
+
margin-bottom: 0.25rem;
|
|
12
|
+
color: var(--text-secondary);
|
|
13
|
+
font-size: 0.6875rem;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
letter-spacing: 0.06em;
|
|
16
|
+
text-transform: uppercase;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.value {
|
|
20
|
+
color: var(--text-primary);
|
|
21
|
+
font-size: 1.5rem;
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.valueSuccess {
|
|
26
|
+
color: var(--color-success, #10b981);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.valueDanger {
|
|
30
|
+
color: var(--color-error, #ef4444);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.valueWarning {
|
|
34
|
+
color: var(--color-warning, #f59e0b);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.subvalue {
|
|
38
|
+
margin-top: 0.125rem;
|
|
39
|
+
color: var(--text-secondary);
|
|
40
|
+
font-size: 0.75rem;
|
|
41
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -17,8 +17,12 @@ export { LOADING_PROGRESS_SEGMENT_COUNT, LoadingProgressBar, type LoadingProgres
|
|
|
17
17
|
export { MarqueeStrip, type MarqueeStripProps } from "./components/MarqueeStrip.js";
|
|
18
18
|
export { PageHeader, type PageHeaderProps } from "./components/PageHeader.js";
|
|
19
19
|
export { PageTemplate, type PageTemplateProps } from "./components/PageTemplate.js";
|
|
20
|
+
export { QuickInfoCard, type QuickInfoCardProps, type QuickInfoItem, type StorageProgress, } from "./components/QuickInfoCard.js";
|
|
20
21
|
export { RuntimeOrbitDiagram, type RuntimeOrbitDiagramProps, type RuntimeOrbitNode, } from "./components/RuntimeOrbitDiagram.js";
|
|
22
|
+
export { Section, type SectionProps } from "./components/Section.js";
|
|
23
|
+
export { SectionHeader, type SectionHeaderProps, } from "./components/SectionHeader.js";
|
|
21
24
|
export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, } from "./components/SegmentedControl.js";
|
|
25
|
+
export { StatCard, type StatCardProps } from "./components/StatCard.js";
|
|
22
26
|
export { StatusMessage, type StatusMessageProps } from "./components/StatusMessage.js";
|
|
23
27
|
export { StrokedText, type StrokedTextProps } from "./components/StrokedText.js";
|
|
24
28
|
export { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from "./components/TabbedPanel.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,gBAAgB,EAChB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -17,8 +17,12 @@ export { LOADING_PROGRESS_SEGMENT_COUNT, LoadingProgressBar, } from "./component
|
|
|
17
17
|
export { MarqueeStrip } from "./components/MarqueeStrip.js";
|
|
18
18
|
export { PageHeader } from "./components/PageHeader.js";
|
|
19
19
|
export { PageTemplate } from "./components/PageTemplate.js";
|
|
20
|
+
export { QuickInfoCard, } from "./components/QuickInfoCard.js";
|
|
20
21
|
export { RuntimeOrbitDiagram, } from "./components/RuntimeOrbitDiagram.js";
|
|
22
|
+
export { Section } from "./components/Section.js";
|
|
23
|
+
export { SectionHeader, } from "./components/SectionHeader.js";
|
|
21
24
|
export { SegmentedControl, } from "./components/SegmentedControl.js";
|
|
25
|
+
export { StatCard } from "./components/StatCard.js";
|
|
22
26
|
export { StatusMessage } from "./components/StatusMessage.js";
|
|
23
27
|
export { StrokedText } from "./components/StrokedText.js";
|
|
24
28
|
export { TabbedPanel } from "./components/TabbedPanel.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,GAGpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,GAGhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,GAGf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,GAEnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,mBAAmB,GAGpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,gBAAgB,GAGjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAA8C,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC","sourcesContent":["export { AvatarStage, type AvatarStageProps } from \"./components/AvatarStage.js\";\nexport { BlinkText, type BlinkTextProps } from \"./components/BlinkText.js\";\nexport { Button, type ButtonProps } from \"./components/Button.js\";\nexport { CopyButton, type CopyButtonProps } from \"./components/CopyButton.js\";\nexport { CyberpunkCheckbox, type CyberpunkCheckboxProps } from \"./components/CyberpunkCheckbox.js\";\nexport {\n CyberpunkInput,\n type CyberpunkInputProps,\n} from \"./components/CyberpunkInput.js\";\nexport {\n CyberpunkRadio,\n CyberpunkRadioGroup,\n type CyberpunkRadioGroupProps,\n type CyberpunkRadioProps,\n} from \"./components/CyberpunkRadio.js\";\nexport {\n CyberpunkSelect,\n type CyberpunkSelectOption,\n type CyberpunkSelectProps,\n} from \"./components/CyberpunkSelect.js\";\nexport {\n CyberpunkSlider,\n type CyberpunkSliderProps,\n} from \"./components/CyberpunkSlider.js\";\nexport {\n CyberpunkTextarea,\n type CyberpunkTextareaProps,\n} from \"./components/CyberpunkTextarea.js\";\nexport { CyberpunkTile, type CyberpunkTileProps } from \"./components/CyberpunkTile.js\";\nexport { CornerBracketCard, type CornerBracketCardProps } from \"./components/CornerBracketCard.js\";\nexport { ErrorMessage, type ErrorMessageProps } from \"./components/ErrorMessage.js\";\nexport {\n HeartbeatIndicator,\n HeartbeatPulse,\n type HeartbeatIndicatorProps,\n type HeartbeatPulseProps,\n} from \"./components/HeartbeatPulse.js\";\nexport { HexagonGrid, type HexagonGridProps } from \"./components/HexagonGrid.js\";\nexport {\n LOADING_PROGRESS_SEGMENT_COUNT,\n LoadingProgressBar,\n type LoadingProgressBarProps,\n} from \"./components/LoadingProgressBar.js\";\nexport { MarqueeStrip, type MarqueeStripProps } from \"./components/MarqueeStrip.js\";\nexport { PageHeader, type PageHeaderProps } from \"./components/PageHeader.js\";\nexport { PageTemplate, type PageTemplateProps } from \"./components/PageTemplate.js\";\nexport {\n RuntimeOrbitDiagram,\n type RuntimeOrbitDiagramProps,\n type RuntimeOrbitNode,\n} from \"./components/RuntimeOrbitDiagram.js\";\nexport {\n SegmentedControl,\n type SegmentedControlOption,\n type SegmentedControlProps,\n} from \"./components/SegmentedControl.js\";\nexport { StatusMessage, type StatusMessageProps } from \"./components/StatusMessage.js\";\nexport { StrokedText, type StrokedTextProps } from \"./components/StrokedText.js\";\nexport { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from \"./components/TabbedPanel.js\";\nexport { ThemedCard, type ThemedCardProps } from \"./components/ThemedCard.js\";\nexport { ThemeToggle, type ThemeToggleProps } from \"./components/ThemeToggle.js\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,GAGpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,GAGhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,GAGf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,GAEnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,aAAa,GAId,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,mBAAmB,GAGpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,aAAa,GAEd,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,GAGjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAA8C,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC","sourcesContent":["export { AvatarStage, type AvatarStageProps } from \"./components/AvatarStage.js\";\nexport { BlinkText, type BlinkTextProps } from \"./components/BlinkText.js\";\nexport { Button, type ButtonProps } from \"./components/Button.js\";\nexport { CopyButton, type CopyButtonProps } from \"./components/CopyButton.js\";\nexport { CyberpunkCheckbox, type CyberpunkCheckboxProps } from \"./components/CyberpunkCheckbox.js\";\nexport {\n CyberpunkInput,\n type CyberpunkInputProps,\n} from \"./components/CyberpunkInput.js\";\nexport {\n CyberpunkRadio,\n CyberpunkRadioGroup,\n type CyberpunkRadioGroupProps,\n type CyberpunkRadioProps,\n} from \"./components/CyberpunkRadio.js\";\nexport {\n CyberpunkSelect,\n type CyberpunkSelectOption,\n type CyberpunkSelectProps,\n} from \"./components/CyberpunkSelect.js\";\nexport {\n CyberpunkSlider,\n type CyberpunkSliderProps,\n} from \"./components/CyberpunkSlider.js\";\nexport {\n CyberpunkTextarea,\n type CyberpunkTextareaProps,\n} from \"./components/CyberpunkTextarea.js\";\nexport { CyberpunkTile, type CyberpunkTileProps } from \"./components/CyberpunkTile.js\";\nexport { CornerBracketCard, type CornerBracketCardProps } from \"./components/CornerBracketCard.js\";\nexport { ErrorMessage, type ErrorMessageProps } from \"./components/ErrorMessage.js\";\nexport {\n HeartbeatIndicator,\n HeartbeatPulse,\n type HeartbeatIndicatorProps,\n type HeartbeatPulseProps,\n} from \"./components/HeartbeatPulse.js\";\nexport { HexagonGrid, type HexagonGridProps } from \"./components/HexagonGrid.js\";\nexport {\n LOADING_PROGRESS_SEGMENT_COUNT,\n LoadingProgressBar,\n type LoadingProgressBarProps,\n} from \"./components/LoadingProgressBar.js\";\nexport { MarqueeStrip, type MarqueeStripProps } from \"./components/MarqueeStrip.js\";\nexport { PageHeader, type PageHeaderProps } from \"./components/PageHeader.js\";\nexport { PageTemplate, type PageTemplateProps } from \"./components/PageTemplate.js\";\nexport {\n QuickInfoCard,\n type QuickInfoCardProps,\n type QuickInfoItem,\n type StorageProgress,\n} from \"./components/QuickInfoCard.js\";\nexport {\n RuntimeOrbitDiagram,\n type RuntimeOrbitDiagramProps,\n type RuntimeOrbitNode,\n} from \"./components/RuntimeOrbitDiagram.js\";\nexport { Section, type SectionProps } from \"./components/Section.js\";\nexport {\n SectionHeader,\n type SectionHeaderProps,\n} from \"./components/SectionHeader.js\";\nexport {\n SegmentedControl,\n type SegmentedControlOption,\n type SegmentedControlProps,\n} from \"./components/SegmentedControl.js\";\nexport { StatCard, type StatCardProps } from \"./components/StatCard.js\";\nexport { StatusMessage, type StatusMessageProps } from \"./components/StatusMessage.js\";\nexport { StrokedText, type StrokedTextProps } from \"./components/StrokedText.js\";\nexport { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from \"./components/TabbedPanel.js\";\nexport { ThemedCard, type ThemedCardProps } from \"./components/ThemedCard.js\";\nexport { ThemeToggle, type ThemeToggleProps } from \"./components/ThemeToggle.js\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@steez-ui/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "React primitives authored with CSS modules for Steez UI.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"react-dom": ">=18"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@steez-ui/icons": "^0.1.
|
|
16
|
-
"@steez-ui/theme": "^0.1.
|
|
15
|
+
"@steez-ui/icons": "^0.1.6",
|
|
16
|
+
"@steez-ui/theme": "^0.1.6"
|
|
17
17
|
},
|
|
18
18
|
"exports": {
|
|
19
19
|
".": {
|