klun-ui 0.2.0 → 0.2.2
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/CHANGELOG.md +50 -0
- package/README.md +2 -2
- package/dist/styles.css +19 -19
- package/dist/templates/index.cjs +2498 -9
- package/dist/templates/index.cjs.map +1 -1
- package/dist/templates/index.d.cts +142 -1
- package/dist/templates/index.d.ts +142 -1
- package/dist/templates/index.js +2480 -13
- package/dist/templates/index.js.map +1 -1
- package/package.json +3 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
|
|
3
4
|
interface SidebarUser {
|
|
4
5
|
name: string;
|
|
@@ -42,4 +43,144 @@ declare function PricingTemplate(): react.JSX.Element;
|
|
|
42
43
|
/** Account settings starting point — tabbed sections, profile form, notifications, integrations. */
|
|
43
44
|
declare function SettingsTemplate(): react.JSX.Element;
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
interface MetronicNavChild {
|
|
47
|
+
key: string;
|
|
48
|
+
label: string;
|
|
49
|
+
}
|
|
50
|
+
interface MetronicNavItem {
|
|
51
|
+
key: string;
|
|
52
|
+
label: string;
|
|
53
|
+
/** Remix Icon class, e.g. `ri-dashboard-line`. */
|
|
54
|
+
icon: string;
|
|
55
|
+
badge?: string;
|
|
56
|
+
children?: MetronicNavChild[];
|
|
57
|
+
}
|
|
58
|
+
interface MetronicSidebarProps {
|
|
59
|
+
/** Active item key. */
|
|
60
|
+
active: string;
|
|
61
|
+
onNavigate: (key: string) => void;
|
|
62
|
+
}
|
|
63
|
+
declare function MetronicSidebar({ active, onNavigate }: MetronicSidebarProps): react.JSX.Element;
|
|
64
|
+
|
|
65
|
+
declare function MetronicTopBar(): react.JSX.Element;
|
|
66
|
+
|
|
67
|
+
declare function DashboardScreen(): react.JSX.Element;
|
|
68
|
+
|
|
69
|
+
declare function OrdersScreen(): react.JSX.Element;
|
|
70
|
+
|
|
71
|
+
declare function ProductsScreen(): react.JSX.Element;
|
|
72
|
+
|
|
73
|
+
type ProductStatus = "Active" | "Low stock" | "Out of stock";
|
|
74
|
+
interface Product {
|
|
75
|
+
id: string;
|
|
76
|
+
name: string;
|
|
77
|
+
sku: string;
|
|
78
|
+
category: string;
|
|
79
|
+
price: number;
|
|
80
|
+
stock: number;
|
|
81
|
+
capacity: number;
|
|
82
|
+
status: ProductStatus;
|
|
83
|
+
description?: string;
|
|
84
|
+
}
|
|
85
|
+
/** Everything an editor form edits (id is assigned on create). */
|
|
86
|
+
type ProductDraft = Omit<Product, "id">;
|
|
87
|
+
declare const CATEGORIES: readonly ["Peripherals", "Displays", "Accessories", "Audio", "Office", "Video"];
|
|
88
|
+
declare const STATUS_COLOR: {
|
|
89
|
+
readonly Active: "green";
|
|
90
|
+
readonly "Low stock": "yellow";
|
|
91
|
+
readonly "Out of stock": "gray";
|
|
92
|
+
};
|
|
93
|
+
/** Status follows stock level — editors never set it directly. */
|
|
94
|
+
declare const deriveStatus: (stock: number, capacity: number) => ProductStatus;
|
|
95
|
+
declare function emptyDraft(): ProductDraft;
|
|
96
|
+
|
|
97
|
+
interface ProductWizardPageProps {
|
|
98
|
+
mode: "create" | "edit";
|
|
99
|
+
initial: ProductDraft;
|
|
100
|
+
onCancel: () => void;
|
|
101
|
+
onSave: (draft: ProductDraft) => void;
|
|
102
|
+
}
|
|
103
|
+
declare function ProductWizardPage({ mode, initial, onCancel, onSave }: ProductWizardPageProps): react.JSX.Element;
|
|
104
|
+
|
|
105
|
+
declare function CustomersScreen(): react.JSX.Element;
|
|
106
|
+
|
|
107
|
+
declare function UsersScreen(): react.JSX.Element;
|
|
108
|
+
|
|
109
|
+
declare function RolesScreen(): react.JSX.Element;
|
|
110
|
+
|
|
111
|
+
type ReportsView = "sales" | "traffic";
|
|
112
|
+
declare function ReportsScreen({ view }: {
|
|
113
|
+
view?: ReportsView;
|
|
114
|
+
}): react.JSX.Element;
|
|
115
|
+
|
|
116
|
+
/** Semantic tone → chart color. */
|
|
117
|
+
type ChartTone = "primary" | "success" | "danger" | "info" | "warning" | "feature";
|
|
118
|
+
interface SparklineProps {
|
|
119
|
+
data: number[];
|
|
120
|
+
tone?: ChartTone;
|
|
121
|
+
width?: number;
|
|
122
|
+
height?: number;
|
|
123
|
+
}
|
|
124
|
+
/** KPI sparkline — a soft area line for stat cards. */
|
|
125
|
+
declare function Sparkline({ data, tone, width, height }: SparklineProps): react.JSX.Element;
|
|
126
|
+
interface BarChartProps {
|
|
127
|
+
data: Array<{
|
|
128
|
+
label: string;
|
|
129
|
+
value: number;
|
|
130
|
+
}>;
|
|
131
|
+
tone?: ChartTone;
|
|
132
|
+
height?: number;
|
|
133
|
+
showValues?: boolean;
|
|
134
|
+
}
|
|
135
|
+
/** Column chart with optional value labels. */
|
|
136
|
+
declare function BarChart({ data, tone, height, showValues }: BarChartProps): react.JSX.Element;
|
|
137
|
+
interface DonutChartProps {
|
|
138
|
+
data: Array<{
|
|
139
|
+
label: string;
|
|
140
|
+
value: number;
|
|
141
|
+
}>;
|
|
142
|
+
centerValue?: string;
|
|
143
|
+
centerLabel?: string;
|
|
144
|
+
size?: number;
|
|
145
|
+
thickness?: number;
|
|
146
|
+
}
|
|
147
|
+
/** Ring chart with a center metric and a legend. */
|
|
148
|
+
declare function DonutChart({ data, centerValue, centerLabel, size, thickness, }: DonutChartProps): react.JSX.Element;
|
|
149
|
+
interface AreaChartProps {
|
|
150
|
+
data: number[];
|
|
151
|
+
/** Optional x-axis labels rendered under the plot. */
|
|
152
|
+
labels?: string[];
|
|
153
|
+
tone?: ChartTone;
|
|
154
|
+
height?: number;
|
|
155
|
+
/** Format the y-axis ticks; defaults to a compact 12k style. */
|
|
156
|
+
formatValue?: (v: number) => string;
|
|
157
|
+
}
|
|
158
|
+
/** Full-width area chart with grid lines and y/x labels. */
|
|
159
|
+
declare function AreaChart({ data, labels, tone, height, formatValue }: AreaChartProps): react.JSX.Element;
|
|
160
|
+
|
|
161
|
+
interface KpiProps {
|
|
162
|
+
label: string;
|
|
163
|
+
value: string;
|
|
164
|
+
delta: string;
|
|
165
|
+
trend?: "up" | "down";
|
|
166
|
+
tone?: ChartTone;
|
|
167
|
+
icon: ReactNode;
|
|
168
|
+
spark: number[];
|
|
169
|
+
}
|
|
170
|
+
/** KPI tile with an icon, a trend delta and a sparkline. */
|
|
171
|
+
declare function Kpi({ label, value, delta, trend, tone, icon, spark }: KpiProps): react.JSX.Element;
|
|
172
|
+
interface MiniStatProps {
|
|
173
|
+
label: string;
|
|
174
|
+
value: ReactNode;
|
|
175
|
+
hint?: ReactNode;
|
|
176
|
+
/** Tints the optional hint line. */
|
|
177
|
+
tone?: ChartTone;
|
|
178
|
+
}
|
|
179
|
+
/** Compact stat tile — label, value and an optional tinted hint. */
|
|
180
|
+
declare function MiniStat({ label, value, hint, tone }: MiniStatProps): react.JSX.Element;
|
|
181
|
+
|
|
182
|
+
declare function MetronicDashboardTemplate(): react.JSX.Element;
|
|
183
|
+
|
|
184
|
+
declare function MetronicSettingsTemplate(): react.JSX.Element;
|
|
185
|
+
|
|
186
|
+
export { AIAssistantTemplate, AgentChatTemplate, AreaChart, type AreaChartProps, BarChart, type BarChartProps, CATEGORIES, CalendarTemplate, type ChartTone, CryptoTemplate, CustomersScreen, DashboardScreen, DashboardTemplate, DonutChart, type DonutChartProps, Kpi, type KpiProps, MarketingTemplate, MetronicDashboardTemplate, type MetronicNavChild, type MetronicNavItem, MetronicSettingsTemplate, MetronicSidebar, type MetronicSidebarProps, MetronicTopBar, MiniStat, type MiniStatProps, OrdersScreen, OverviewScreen, PricingTemplate, type Product, type ProductDraft, type ProductStatus, ProductWizardPage, type ProductWizardPageProps, ProductsScreen, ReportsScreen, type ReportsView, RolesScreen, STATUS_COLOR, SettingsScreen, SettingsTemplate, Sidebar, type SidebarProps, type SidebarUser, Sparkline, type SparklineProps, TopBar, type TopBarProps, UsersScreen, deriveStatus, emptyDraft };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
|
|
3
4
|
interface SidebarUser {
|
|
4
5
|
name: string;
|
|
@@ -42,4 +43,144 @@ declare function PricingTemplate(): react.JSX.Element;
|
|
|
42
43
|
/** Account settings starting point — tabbed sections, profile form, notifications, integrations. */
|
|
43
44
|
declare function SettingsTemplate(): react.JSX.Element;
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
interface MetronicNavChild {
|
|
47
|
+
key: string;
|
|
48
|
+
label: string;
|
|
49
|
+
}
|
|
50
|
+
interface MetronicNavItem {
|
|
51
|
+
key: string;
|
|
52
|
+
label: string;
|
|
53
|
+
/** Remix Icon class, e.g. `ri-dashboard-line`. */
|
|
54
|
+
icon: string;
|
|
55
|
+
badge?: string;
|
|
56
|
+
children?: MetronicNavChild[];
|
|
57
|
+
}
|
|
58
|
+
interface MetronicSidebarProps {
|
|
59
|
+
/** Active item key. */
|
|
60
|
+
active: string;
|
|
61
|
+
onNavigate: (key: string) => void;
|
|
62
|
+
}
|
|
63
|
+
declare function MetronicSidebar({ active, onNavigate }: MetronicSidebarProps): react.JSX.Element;
|
|
64
|
+
|
|
65
|
+
declare function MetronicTopBar(): react.JSX.Element;
|
|
66
|
+
|
|
67
|
+
declare function DashboardScreen(): react.JSX.Element;
|
|
68
|
+
|
|
69
|
+
declare function OrdersScreen(): react.JSX.Element;
|
|
70
|
+
|
|
71
|
+
declare function ProductsScreen(): react.JSX.Element;
|
|
72
|
+
|
|
73
|
+
type ProductStatus = "Active" | "Low stock" | "Out of stock";
|
|
74
|
+
interface Product {
|
|
75
|
+
id: string;
|
|
76
|
+
name: string;
|
|
77
|
+
sku: string;
|
|
78
|
+
category: string;
|
|
79
|
+
price: number;
|
|
80
|
+
stock: number;
|
|
81
|
+
capacity: number;
|
|
82
|
+
status: ProductStatus;
|
|
83
|
+
description?: string;
|
|
84
|
+
}
|
|
85
|
+
/** Everything an editor form edits (id is assigned on create). */
|
|
86
|
+
type ProductDraft = Omit<Product, "id">;
|
|
87
|
+
declare const CATEGORIES: readonly ["Peripherals", "Displays", "Accessories", "Audio", "Office", "Video"];
|
|
88
|
+
declare const STATUS_COLOR: {
|
|
89
|
+
readonly Active: "green";
|
|
90
|
+
readonly "Low stock": "yellow";
|
|
91
|
+
readonly "Out of stock": "gray";
|
|
92
|
+
};
|
|
93
|
+
/** Status follows stock level — editors never set it directly. */
|
|
94
|
+
declare const deriveStatus: (stock: number, capacity: number) => ProductStatus;
|
|
95
|
+
declare function emptyDraft(): ProductDraft;
|
|
96
|
+
|
|
97
|
+
interface ProductWizardPageProps {
|
|
98
|
+
mode: "create" | "edit";
|
|
99
|
+
initial: ProductDraft;
|
|
100
|
+
onCancel: () => void;
|
|
101
|
+
onSave: (draft: ProductDraft) => void;
|
|
102
|
+
}
|
|
103
|
+
declare function ProductWizardPage({ mode, initial, onCancel, onSave }: ProductWizardPageProps): react.JSX.Element;
|
|
104
|
+
|
|
105
|
+
declare function CustomersScreen(): react.JSX.Element;
|
|
106
|
+
|
|
107
|
+
declare function UsersScreen(): react.JSX.Element;
|
|
108
|
+
|
|
109
|
+
declare function RolesScreen(): react.JSX.Element;
|
|
110
|
+
|
|
111
|
+
type ReportsView = "sales" | "traffic";
|
|
112
|
+
declare function ReportsScreen({ view }: {
|
|
113
|
+
view?: ReportsView;
|
|
114
|
+
}): react.JSX.Element;
|
|
115
|
+
|
|
116
|
+
/** Semantic tone → chart color. */
|
|
117
|
+
type ChartTone = "primary" | "success" | "danger" | "info" | "warning" | "feature";
|
|
118
|
+
interface SparklineProps {
|
|
119
|
+
data: number[];
|
|
120
|
+
tone?: ChartTone;
|
|
121
|
+
width?: number;
|
|
122
|
+
height?: number;
|
|
123
|
+
}
|
|
124
|
+
/** KPI sparkline — a soft area line for stat cards. */
|
|
125
|
+
declare function Sparkline({ data, tone, width, height }: SparklineProps): react.JSX.Element;
|
|
126
|
+
interface BarChartProps {
|
|
127
|
+
data: Array<{
|
|
128
|
+
label: string;
|
|
129
|
+
value: number;
|
|
130
|
+
}>;
|
|
131
|
+
tone?: ChartTone;
|
|
132
|
+
height?: number;
|
|
133
|
+
showValues?: boolean;
|
|
134
|
+
}
|
|
135
|
+
/** Column chart with optional value labels. */
|
|
136
|
+
declare function BarChart({ data, tone, height, showValues }: BarChartProps): react.JSX.Element;
|
|
137
|
+
interface DonutChartProps {
|
|
138
|
+
data: Array<{
|
|
139
|
+
label: string;
|
|
140
|
+
value: number;
|
|
141
|
+
}>;
|
|
142
|
+
centerValue?: string;
|
|
143
|
+
centerLabel?: string;
|
|
144
|
+
size?: number;
|
|
145
|
+
thickness?: number;
|
|
146
|
+
}
|
|
147
|
+
/** Ring chart with a center metric and a legend. */
|
|
148
|
+
declare function DonutChart({ data, centerValue, centerLabel, size, thickness, }: DonutChartProps): react.JSX.Element;
|
|
149
|
+
interface AreaChartProps {
|
|
150
|
+
data: number[];
|
|
151
|
+
/** Optional x-axis labels rendered under the plot. */
|
|
152
|
+
labels?: string[];
|
|
153
|
+
tone?: ChartTone;
|
|
154
|
+
height?: number;
|
|
155
|
+
/** Format the y-axis ticks; defaults to a compact 12k style. */
|
|
156
|
+
formatValue?: (v: number) => string;
|
|
157
|
+
}
|
|
158
|
+
/** Full-width area chart with grid lines and y/x labels. */
|
|
159
|
+
declare function AreaChart({ data, labels, tone, height, formatValue }: AreaChartProps): react.JSX.Element;
|
|
160
|
+
|
|
161
|
+
interface KpiProps {
|
|
162
|
+
label: string;
|
|
163
|
+
value: string;
|
|
164
|
+
delta: string;
|
|
165
|
+
trend?: "up" | "down";
|
|
166
|
+
tone?: ChartTone;
|
|
167
|
+
icon: ReactNode;
|
|
168
|
+
spark: number[];
|
|
169
|
+
}
|
|
170
|
+
/** KPI tile with an icon, a trend delta and a sparkline. */
|
|
171
|
+
declare function Kpi({ label, value, delta, trend, tone, icon, spark }: KpiProps): react.JSX.Element;
|
|
172
|
+
interface MiniStatProps {
|
|
173
|
+
label: string;
|
|
174
|
+
value: ReactNode;
|
|
175
|
+
hint?: ReactNode;
|
|
176
|
+
/** Tints the optional hint line. */
|
|
177
|
+
tone?: ChartTone;
|
|
178
|
+
}
|
|
179
|
+
/** Compact stat tile — label, value and an optional tinted hint. */
|
|
180
|
+
declare function MiniStat({ label, value, hint, tone }: MiniStatProps): react.JSX.Element;
|
|
181
|
+
|
|
182
|
+
declare function MetronicDashboardTemplate(): react.JSX.Element;
|
|
183
|
+
|
|
184
|
+
declare function MetronicSettingsTemplate(): react.JSX.Element;
|
|
185
|
+
|
|
186
|
+
export { AIAssistantTemplate, AgentChatTemplate, AreaChart, type AreaChartProps, BarChart, type BarChartProps, CATEGORIES, CalendarTemplate, type ChartTone, CryptoTemplate, CustomersScreen, DashboardScreen, DashboardTemplate, DonutChart, type DonutChartProps, Kpi, type KpiProps, MarketingTemplate, MetronicDashboardTemplate, type MetronicNavChild, type MetronicNavItem, MetronicSettingsTemplate, MetronicSidebar, type MetronicSidebarProps, MetronicTopBar, MiniStat, type MiniStatProps, OrdersScreen, OverviewScreen, PricingTemplate, type Product, type ProductDraft, type ProductStatus, ProductWizardPage, type ProductWizardPageProps, ProductsScreen, ReportsScreen, type ReportsView, RolesScreen, STATUS_COLOR, SettingsScreen, SettingsTemplate, Sidebar, type SidebarProps, type SidebarUser, Sparkline, type SparklineProps, TopBar, type TopBarProps, UsersScreen, deriveStatus, emptyDraft };
|