klun-ui 0.1.0 → 0.1.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 +45 -0
- package/dist/{chunk-FTYQRXS5.cjs → chunk-OPAZ7GAU.cjs} +587 -524
- package/dist/chunk-OPAZ7GAU.cjs.map +1 -0
- package/dist/{chunk-XDAR7UMF.js → chunk-RRE3PQLX.js} +587 -525
- package/dist/chunk-RRE3PQLX.js.map +1 -0
- package/dist/index.cjs +147 -143
- package/dist/index.d.cts +50 -3
- package/dist/index.d.ts +50 -3
- package/dist/index.js +1 -1
- package/dist/styles.css +49 -0
- package/dist/templates/index.cjs +82 -82
- package/dist/templates/index.js +1 -1
- package/package.json +3 -2
- package/dist/chunk-FTYQRXS5.cjs.map +0 -1
- package/dist/chunk-XDAR7UMF.js.map +0 -1
package/dist/templates/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkOPAZ7GAU_cjs = require('../chunk-OPAZ7GAU.cjs');
|
|
4
4
|
require('../chunk-TPGAXYFU.cjs');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -72,13 +72,13 @@ function TopBar({ title, subtitle }) {
|
|
|
72
72
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
|
|
73
73
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
74
74
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: title }),
|
|
75
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
75
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "gray", size: "small", children: "Live" })
|
|
76
76
|
] }),
|
|
77
77
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "2px 0 0", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: subtitle })
|
|
78
78
|
] }),
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }) }),
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New transfer" })
|
|
82
82
|
] });
|
|
83
83
|
}
|
|
84
84
|
function OverviewScreen() {
|
|
@@ -104,24 +104,24 @@ function OverviewScreen() {
|
|
|
104
104
|
];
|
|
105
105
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32, display: "flex", flexDirection: "column", gap: 24 }, children: [
|
|
106
106
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
107
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
108
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }), children: "Export" })
|
|
109
109
|
] }),
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: stats.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
110
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }, children: stats.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 18, children: [
|
|
111
111
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
|
|
112
112
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", background: `var(--klun-state-${s.tint}-lighter)`, color: `var(--klun-state-${s.tint}-base)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: s.icon }) }),
|
|
113
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: s.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: s.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: s.delta })
|
|
114
114
|
] }),
|
|
115
115
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 16, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: s.label }),
|
|
116
116
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: s.value })
|
|
117
117
|
] }, s.label)) }),
|
|
118
118
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 16, alignItems: "start" }, children: [
|
|
119
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
119
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 0, children: [
|
|
120
120
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", borderBottom: "1px solid var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
121
121
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Recent transactions" }),
|
|
122
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
122
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "ghost", size: "xsmall", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }), children: "View all" })
|
|
123
123
|
] }),
|
|
124
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Tabs, { value: tab, onChange: setTab, items: [{ value: "all", label: "All" }, { value: "income", label: "Income" }, { value: "expense", label: "Expenses" }] }) }),
|
|
125
125
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: tx.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderTop: i ? "1px solid var(--klun-stroke-soft-200)" : "none" }, children: [
|
|
126
126
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 38, height: 38, borderRadius: "var(--klun-radius-lg)", background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: t.icon }) }),
|
|
127
127
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
@@ -132,12 +132,12 @@ function OverviewScreen() {
|
|
|
132
132
|
t.date
|
|
133
133
|
] })
|
|
134
134
|
] }),
|
|
135
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: t.color, variant: "light", size: "small", children: t.status }),
|
|
136
136
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 92, textAlign: "right", font: "var(--klun-text-label-sm)", color: t.amt[0] === "+" ? "var(--klun-state-success-base)" : "var(--klun-text-strong-950)" }, children: t.amt })
|
|
137
137
|
] }, i)) })
|
|
138
138
|
] }),
|
|
139
139
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
|
|
140
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
140
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "shadow", padding: 20, style: { background: "var(--klun-bg-strong-950)" }, children: [
|
|
141
141
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--klun-static-static-white)" }, children: [
|
|
142
142
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", opacity: 0.7 }, children: "Virtual card" }),
|
|
143
143
|
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-visa-line", style: { fontSize: 24 } })
|
|
@@ -148,12 +148,12 @@ function OverviewScreen() {
|
|
|
148
148
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "09 / 28" })
|
|
149
149
|
] })
|
|
150
150
|
] }),
|
|
151
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
151
|
+
/* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 20, children: [
|
|
152
152
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
153
153
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Monthly budget" }),
|
|
154
154
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "$11,240 / $16,000" })
|
|
155
155
|
] }),
|
|
156
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
156
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.ProgressBar, { value: 70 }) }),
|
|
157
157
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }, children: budget.map(([l, p, c]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
|
|
158
158
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-state-${c}-base)` } }),
|
|
159
159
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: l }),
|
|
@@ -172,46 +172,46 @@ function SettingsScreen() {
|
|
|
172
172
|
const [m, setM] = react.useState(false);
|
|
173
173
|
const Field = ({ label, children, hint, required }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "220px 1fr", gap: 24, padding: "20px 0", borderTop: "1px solid var(--klun-stroke-soft-200)" }, children: [
|
|
174
174
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
175
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
175
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Label, { required, children: label }),
|
|
176
176
|
hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 2, font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: hint }) : null
|
|
177
177
|
] }),
|
|
178
178
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 420 }, children })
|
|
179
179
|
] });
|
|
180
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
180
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 32, maxWidth: 920 }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 24, children: [
|
|
181
181
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
|
|
182
182
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 64, height: 64, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-state-feature-lighter)", color: "var(--klun-state-feature-base)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--klun-text-title-h5)" }, children: "AT" }),
|
|
183
183
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
|
|
184
184
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
185
185
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Arthur Taylor" }),
|
|
186
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
186
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Verified" })
|
|
187
187
|
] }),
|
|
188
188
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "arthur@alignui.com" })
|
|
189
189
|
] }),
|
|
190
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
190
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "stroke", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-upload-2-line" }), children: "Change photo" })
|
|
191
191
|
] }),
|
|
192
192
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [
|
|
193
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
194
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Email address", required: true, hint: "Used for sign-in and receipts.", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
195
|
-
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
193
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Full name", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Input, { defaultValue: "Arthur Taylor" }) }),
|
|
194
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Email address", required: true, hint: "Used for sign-in and receipts.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Input, { type: "email", defaultValue: "arthur@alignui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
|
|
195
|
+
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Select, { defaultValue: "finance", children: [
|
|
196
196
|
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "finance", children: "Finance lead" }),
|
|
197
197
|
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "admin", children: "Administrator" }),
|
|
198
198
|
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "member", children: "Member" })
|
|
199
199
|
] }) }),
|
|
200
200
|
/* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Notifications", hint: "How we reach you.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
|
|
201
201
|
/* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
|
|
202
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
202
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Switch, { checked: n, onChange: setN }),
|
|
203
203
|
" Email notifications"
|
|
204
204
|
] }),
|
|
205
205
|
/* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: [
|
|
206
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
206
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Switch, { checked: m, onChange: setM }),
|
|
207
207
|
" Marketing updates"
|
|
208
208
|
] })
|
|
209
209
|
] }) })
|
|
210
210
|
] }),
|
|
211
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
211
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Divider, { style: { margin: "8px 0 20px" } }),
|
|
212
212
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
|
|
213
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
214
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
213
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
|
|
214
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "primary", children: "Save changes" })
|
|
215
215
|
] })
|
|
216
216
|
] }) });
|
|
217
217
|
}
|
|
@@ -338,7 +338,7 @@ function AIChatView({ messages, busy, userInitials, onSuggest }) {
|
|
|
338
338
|
Bubble,
|
|
339
339
|
{
|
|
340
340
|
from: m.from,
|
|
341
|
-
avatar: m.from === "me" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
341
|
+
avatar: m.from === "me" ? /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Avatar, { size: "32", initials: userInitials, color: "purple" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 32, height: 32, borderRadius: "var(--klun-radius-pill)", background: "var(--klun-bg-strong-950)", color: "var(--klun-text-white-0)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }) }),
|
|
342
342
|
children: m.text
|
|
343
343
|
},
|
|
344
344
|
i
|
|
@@ -457,10 +457,10 @@ function AIAssistantTemplate() {
|
|
|
457
457
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
|
|
458
458
|
/* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 24px", borderBottom: "1px solid var(--klun-stroke-soft-200)" }, children: [
|
|
459
459
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "New chat" }),
|
|
460
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
460
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "purple", variant: "lighter", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-flashlight-fill" }), children: "Klun-4o" }),
|
|
461
461
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
|
|
462
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
463
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
462
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
|
|
463
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-more-2-fill" }) })
|
|
464
464
|
] }),
|
|
465
465
|
/* @__PURE__ */ jsxRuntime.jsx(AIChatView, { messages, busy, userInitials: user.initials, onSuggest: ask }),
|
|
466
466
|
/* @__PURE__ */ jsxRuntime.jsx(AIComposer, { onSend: ask, busy })
|
|
@@ -520,7 +520,7 @@ function CryptoSidebar({ active, onNavigate }) {
|
|
|
520
520
|
}
|
|
521
521
|
function Stat({ label, value, delta, trend = "up", tint = "feature", icon }) {
|
|
522
522
|
const dc = trend === "up" ? "success" : "error";
|
|
523
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
523
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 18, children: [
|
|
524
524
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
|
|
525
525
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, background: `var(--klun-state-${tint}-lighter)`, color: `var(--klun-state-${tint}-base)` }, children: icon }),
|
|
526
526
|
delta != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, height: 20, padding: "0 6px", borderRadius: "var(--klun-radius-capsule)", font: "var(--klun-text-label-xs)", background: `var(--klun-state-${dc}-lighter)`, color: `var(--klun-state-${dc}-base)` }, children: [
|
|
@@ -575,7 +575,7 @@ function MarketsScreen() {
|
|
|
575
575
|
] }) },
|
|
576
576
|
{ key: "price", header: "Price", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)" }, children: r.price }) },
|
|
577
577
|
{ key: "amount", header: "Holdings", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--klun-text-sub-600)" }, children: r.amount }) },
|
|
578
|
-
{ key: "chg", header: "24h", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
578
|
+
{ key: "chg", header: "24h", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: r.up ? "green" : "red", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: r.up ? "ri-arrow-up-line" : "ri-arrow-down-line" }), children: r.chg }) },
|
|
579
579
|
{ key: "value", header: "Value", align: "right", render: (r) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.value }) },
|
|
580
580
|
{ key: "spark", header: "", width: 110, align: "right", render: (r) => /* @__PURE__ */ jsxRuntime.jsx(Spark, { up: r.up }) }
|
|
581
581
|
];
|
|
@@ -592,21 +592,21 @@ function MarketsScreen() {
|
|
|
592
592
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
593
593
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
594
594
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "$64,210.40" }),
|
|
595
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
595
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "green", variant: "light", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-up-line" }), children: "2.4%" })
|
|
596
596
|
] }),
|
|
597
597
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Bitcoin \xB7 BTC/USD" })
|
|
598
598
|
] })
|
|
599
599
|
] }),
|
|
600
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
600
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "1d", label: "1D" }, { value: "1w", label: "1W" }, { value: "1m", label: "1M" }, { value: "1y", label: "1Y" }] })
|
|
601
601
|
] }),
|
|
602
602
|
/* @__PURE__ */ jsxRuntime.jsx(AreaChart, {})
|
|
603
603
|
] }),
|
|
604
604
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { background: "var(--klun-bg-white-0)", borderRadius: "var(--klun-radius-2xl)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", overflow: "hidden" }, children: [
|
|
605
605
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
606
606
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: "Your holdings" }),
|
|
607
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
607
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "primary", size: "small", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "Buy crypto" })
|
|
608
608
|
] }),
|
|
609
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
609
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Table, { columns, rows: holdings, getRowId: (r) => r.sym, style: { borderRadius: 0, boxShadow: "none", borderTop: "1px solid var(--klun-stroke-soft-200)" } })
|
|
610
610
|
] })
|
|
611
611
|
] });
|
|
612
612
|
}
|
|
@@ -633,14 +633,14 @@ function CryptoTemplate() {
|
|
|
633
633
|
/* @__PURE__ */ jsxRuntime.jsxs("header", { style: { display: "flex", alignItems: "center", gap: 16, padding: "16px 28px", borderBottom: "1px solid var(--klun-stroke-soft-200)", background: "var(--klun-bg-white-0)" }, children: [
|
|
634
634
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
635
635
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)" }, children: "Portfolio" }),
|
|
636
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
636
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "green", variant: "light", size: "small", dot: true, children: "Markets open" })
|
|
637
637
|
] }) }),
|
|
638
638
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
|
|
639
639
|
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-search-line", style: { position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 18, color: "var(--klun-icon-soft-400)" } }),
|
|
640
640
|
/* @__PURE__ */ jsxRuntime.jsx("input", { placeholder: "Search assets", style: { width: 220, boxSizing: "border-box", height: 36, padding: "0 12px 0 36px", borderRadius: "var(--klun-radius-lg)", border: "none", background: "var(--klun-bg-weak-50)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)", font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-strong-950)", outline: "none" } })
|
|
641
641
|
] }),
|
|
642
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
643
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
642
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
|
|
643
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "primary", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-right-line" }), children: "Trade" })
|
|
644
644
|
] }),
|
|
645
645
|
/* @__PURE__ */ jsxRuntime.jsx("main", { style: { flex: 1, overflow: "auto", background: "var(--klun-bg-weak-50)" }, children: /* @__PURE__ */ jsxRuntime.jsx(MarketsScreen, {}) })
|
|
646
646
|
] })
|
|
@@ -655,12 +655,12 @@ function MarketingNav() {
|
|
|
655
655
|
] }),
|
|
656
656
|
/* @__PURE__ */ jsxRuntime.jsx("nav", { style: { display: "flex", gap: 4, flex: 1 }, children: links.map((l) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: { padding: "6px 12px", borderRadius: "var(--klun-radius-md)", font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: l }, l)) }),
|
|
657
657
|
/* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-sub-600)", textDecoration: "none" }, children: "Sign in" }),
|
|
658
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
658
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", size: "small", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start free" })
|
|
659
659
|
] }) });
|
|
660
660
|
}
|
|
661
661
|
function Stat2({ label, value, delta, trend = "up", tint = "feature", icon }) {
|
|
662
662
|
const dc = trend === "up" ? "success" : "error";
|
|
663
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
663
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 18, children: [
|
|
664
664
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
|
|
665
665
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, background: `var(--klun-state-${tint}-lighter)`, color: `var(--klun-state-${tint}-base)` }, children: icon }),
|
|
666
666
|
delta != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 2, height: 20, padding: "0 6px", borderRadius: "var(--klun-radius-capsule)", font: "var(--klun-text-label-xs)", background: `var(--klun-state-${dc}-lighter)`, color: `var(--klun-state-${dc}-base)` }, children: [
|
|
@@ -694,12 +694,12 @@ function MarketingSections() {
|
|
|
694
694
|
];
|
|
695
695
|
return /* @__PURE__ */ jsxRuntime.jsxs("main", { children: [
|
|
696
696
|
/* @__PURE__ */ jsxRuntime.jsxs("section", { style: { ...wrap, textAlign: "center", padding: "80px 24px 64px" }, children: [
|
|
697
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", marginBottom: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
697
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", marginBottom: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "purple", variant: "lighter", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-sparkling-2-fill" }), children: "Klun UI 2.0 is here" }) }),
|
|
698
698
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: "0 auto", maxWidth: 760, font: "var(--klun-text-title-h1)", letterSpacing: "var(--klun-title-h1-tracking)", color: "var(--klun-text-strong-950)" }, children: "The design system that ships with you" }),
|
|
699
699
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "20px auto 0", maxWidth: 560, font: "var(--klun-text-paragraph-lg)", color: "var(--klun-text-sub-600)" }, children: "Tokens, components and full product templates \u2014 themeable, dark-mode ready, and built to move from Figma to production without the redraw." }),
|
|
700
700
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "center", marginTop: 28 }, children: [
|
|
701
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
702
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
701
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
|
|
702
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "stroke", size: "large", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-github-fill" }), children: "View on GitHub" })
|
|
703
703
|
] }),
|
|
704
704
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 40, height: 280, borderRadius: "var(--klun-radius-3xl)", background: "linear-gradient(180deg, var(--klun-bg-weak-50), var(--klun-bg-white-0))", boxShadow: "var(--klun-shadow-lg), inset 0 0 0 1px var(--klun-stroke-soft-200)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--klun-text-disabled-300)" }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-layout-masonry-line", style: { fontSize: 56 } }) })
|
|
705
705
|
] }),
|
|
@@ -718,7 +718,7 @@ function MarketingSections() {
|
|
|
718
718
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Everything you need to design fast" }),
|
|
719
719
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "12px 0 0", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)" }, children: "One coherent system from the smallest token to the full screen." })
|
|
720
720
|
] }),
|
|
721
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: features.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
721
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }, children: features.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "stroke", padding: 24, children: [
|
|
722
722
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 40, height: 40, borderRadius: "var(--klun-radius-lg)", background: "var(--klun-primary-lighter)", color: "var(--klun-primary-base)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22, marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: f.icon }) }),
|
|
723
723
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)", marginBottom: 6 }, children: f.t }),
|
|
724
724
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: f.d })
|
|
@@ -735,7 +735,7 @@ function MarketingSections() {
|
|
|
735
735
|
}, children: [
|
|
736
736
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
737
737
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)" }, children: p.name }),
|
|
738
|
-
p.featured ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
738
|
+
p.featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "purple", variant: "filled", size: "small", children: "Popular" }) : null
|
|
739
739
|
] }),
|
|
740
740
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16, display: "flex", alignItems: "baseline", gap: 6 }, children: [
|
|
741
741
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-title-h2)", letterSpacing: "var(--klun-title-h2-tracking)" }, children: p.price }),
|
|
@@ -757,11 +757,11 @@ function MarketingSections() {
|
|
|
757
757
|
}, children: p.cta })
|
|
758
758
|
] }, p.name)) })
|
|
759
759
|
] }),
|
|
760
|
-
/* @__PURE__ */ jsxRuntime.jsx("section", { style: { ...wrap, padding: "56px 24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
760
|
+
/* @__PURE__ */ jsxRuntime.jsx("section", { style: { ...wrap, padding: "56px 24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkOPAZ7GAU_cjs.Card, { variant: "flat", padding: 40, style: { textAlign: "center", borderRadius: "var(--klun-radius-4xl)" }, children: [
|
|
761
761
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", gap: 4, color: "var(--klun-state-away-base)", marginBottom: 16 }, children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-star-fill", style: { fontSize: 20 } }, i)) }),
|
|
762
762
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 auto", maxWidth: 680, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", fontFamily: "var(--klun-font-display)" }, children: "\u201CWe replaced three internal libraries with Klun UI and shipped our dashboard a month early. The token system alone paid for itself.\u201D" }),
|
|
763
763
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginTop: 24 }, children: [
|
|
764
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
764
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Avatar, { size: "48", initials: "SW", color: "purple" }),
|
|
765
765
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "left" }, children: [
|
|
766
766
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-md)", color: "var(--klun-text-strong-950)" }, children: "Sophia Williams" }),
|
|
767
767
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-soft-400)" }, children: "Head of Design, Northwind" })
|
|
@@ -770,7 +770,7 @@ function MarketingSections() {
|
|
|
770
770
|
] }) }),
|
|
771
771
|
/* @__PURE__ */ jsxRuntime.jsxs("section", { style: { maxWidth: 720, margin: "0 auto", padding: "56px 24px" }, children: [
|
|
772
772
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 28px", textAlign: "center", font: "var(--klun-text-title-h3)", letterSpacing: "var(--klun-title-h3-tracking)", color: "var(--klun-text-strong-950)" }, children: "Frequently asked" }),
|
|
773
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
773
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Accordion, { defaultOpen: "a", items: [
|
|
774
774
|
{ id: "a", title: "Is Klun UI free to use?", content: "The Starter tier with core tokens and 30 components is free forever. Pro unlocks the full component set, templates and themes." },
|
|
775
775
|
{ id: "b", title: "Does it work with my framework?", content: "Components ship as framework-agnostic patterns driven by CSS custom properties \u2014 drop the tokens into React, Vue, Svelte or plain HTML." },
|
|
776
776
|
{ id: "c", title: "Can I customize the theme?", content: "Yes. Swap the accent (blue/purple/orange/green) and neutral ramp (gray/slate) with a single data attribute, or override any token." },
|
|
@@ -873,7 +873,7 @@ function CalendarTemplate() {
|
|
|
873
873
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Calendar" }),
|
|
874
874
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "March 2026 \xB7 11 events this month" })
|
|
875
875
|
] }),
|
|
876
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
876
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-add-line" }), children: "New event" }) })
|
|
877
877
|
] }),
|
|
878
878
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", margin: "24px 0 16px" }, children: [
|
|
879
879
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
@@ -889,14 +889,14 @@ function CalendarTemplate() {
|
|
|
889
889
|
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next period", onClick: () => {
|
|
890
890
|
}, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, border: "none", background: "transparent", color: "var(--klun-icon-sub-600)", cursor: "pointer", fontSize: 18, borderRadius: "var(--klun-radius-sm)" }, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }) })
|
|
891
891
|
] }),
|
|
892
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
892
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "ghost", size: "small", children: "Today" })
|
|
893
893
|
] }),
|
|
894
894
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
|
|
895
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
896
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
895
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.AvatarGroup, { variant: "stroke", size: "24", avatars: [{ initials: "AT", color: "blue" }, { initials: "MB", color: "green" }, { initials: "JK", color: "orange" }, { initials: "RP" }] }),
|
|
896
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.SegmentedControl, { value: view, onChange: setView, items: [{ value: "month", label: "Month" }, { value: "week", label: "Week" }, { value: "day", label: "Day" }] })
|
|
897
897
|
] })
|
|
898
898
|
] }),
|
|
899
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
899
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.HorizontalFilter, { value: filter, onChange: setFilter, items: [
|
|
900
900
|
{ value: "all", label: "All", count: 11 },
|
|
901
901
|
{ value: "meeting", label: "Meetings", count: 5, icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-group-line" }) },
|
|
902
902
|
{ value: "focus", label: "Focus", count: 3 },
|
|
@@ -908,14 +908,14 @@ function CalendarTemplate() {
|
|
|
908
908
|
cells.map((day, i) => day == null ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 116, background: "var(--klun-bg-weak-50)", boxShadow: "inset -1px -1px 0 var(--klun-stroke-soft-200)" } }, i) : /* @__PURE__ */ jsxRuntime.jsx(DayCell, { day, today: day === 12 }, i))
|
|
909
909
|
] }) }),
|
|
910
910
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 28 }, children: [
|
|
911
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
911
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.ContentLabel, { icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-event-line" }), children: "Up next \xB7 today" }),
|
|
912
912
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }, children: AGENDA.map((e, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 14, padding: "12px 16px", borderRadius: "var(--klun-radius-xl)", background: "var(--klun-bg-white-0)", boxShadow: "inset 0 0 0 1px var(--klun-stroke-soft-200)" }, children: [
|
|
913
913
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 4, height: 36, borderRadius: "var(--klun-radius-pill)", background: `var(--klun-${CAT[e.c].color}-500)`, flex: "none" } }),
|
|
914
914
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
915
915
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: e.t }),
|
|
916
916
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)" }, children: e.time })
|
|
917
917
|
] }),
|
|
918
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
918
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Chip, { color: CAT[e.c].color, dot: true, children: CAT[e.c].label })
|
|
919
919
|
] }, i)) })
|
|
920
920
|
] })
|
|
921
921
|
] });
|
|
@@ -979,12 +979,12 @@ function PlanCard({ plan, cycle }) {
|
|
|
979
979
|
}, children: [
|
|
980
980
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
981
981
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-lg)", color: "var(--klun-text-strong-950)" }, children: plan.name }),
|
|
982
|
-
featured ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
982
|
+
featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "blue", variant: "lighter", children: "Most popular" }) : null
|
|
983
983
|
] }),
|
|
984
984
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)", minHeight: 40, textWrap: "pretty" }, children: plan.tagline }),
|
|
985
985
|
/* @__PURE__ */ jsxRuntime.jsx(Price, { plan, cycle }),
|
|
986
|
-
featured ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
987
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
986
|
+
featured ? /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { kind: "fancy", fullWidth: true, children: plan.cta }) : /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { fullWidth: true, variant: "neutral", appearance: "stroke", children: plan.cta }),
|
|
987
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Divider, {}),
|
|
988
988
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: plan.features.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: [
|
|
989
989
|
/* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line", style: { fontSize: 18, color: "var(--klun-state-success-base)" } }),
|
|
990
990
|
f
|
|
@@ -1001,34 +1001,34 @@ function PricingTemplate() {
|
|
|
1001
1001
|
const [cycle, setCycle] = react.useState("monthly");
|
|
1002
1002
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: 1080, margin: "0 auto", padding: "72px 32px 96px" }, children: [
|
|
1003
1003
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16, textAlign: "center", marginBottom: 40 }, children: [
|
|
1004
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1004
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.ContentLabel, { color: "blue", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-price-tag-3-line" }), children: "Pricing" }),
|
|
1005
1005
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h1)", color: "var(--klun-text-strong-950)", letterSpacing: "-.03em", maxWidth: 640, textWrap: "balance" }, children: "Simple pricing that scales with you" }),
|
|
1006
1006
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-lg)", color: "var(--klun-text-sub-600)", maxWidth: 520, textWrap: "pretty" }, children: "Start free, then pick a plan when your team is ready. No hidden fees." }),
|
|
1007
1007
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: 10, marginTop: 8 }, children: [
|
|
1008
1008
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1009
|
-
|
|
1009
|
+
chunkOPAZ7GAU_cjs.SegmentedControl,
|
|
1010
1010
|
{
|
|
1011
1011
|
value: cycle,
|
|
1012
1012
|
onChange: (v) => setCycle(v),
|
|
1013
1013
|
items: [{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly" }]
|
|
1014
1014
|
}
|
|
1015
1015
|
),
|
|
1016
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1016
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "green", variant: "lighter", children: "Save 20%" })
|
|
1017
1017
|
] })
|
|
1018
1018
|
] }),
|
|
1019
1019
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 20, alignItems: "stretch", flexWrap: "wrap" }, children: PLANS.map((p) => /* @__PURE__ */ jsxRuntime.jsx(PlanCard, { plan: p, cycle }, p.id)) }),
|
|
1020
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1020
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Alert, { status: "information", title: "Education & nonprofits", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-lightbulb-line" }), style: { marginTop: 24 }, children: "Qualifying teams get 50% off any paid plan \u2014 reach out to sales to verify eligibility." }),
|
|
1021
1021
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 72 }, children: [
|
|
1022
1022
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: "0 0 8px", font: "var(--klun-text-title-h4)", color: "var(--klun-text-strong-950)", letterSpacing: "-.02em", textAlign: "center" }, children: "Frequently asked questions" }),
|
|
1023
1023
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 28px", font: "var(--klun-text-paragraph-md)", color: "var(--klun-text-sub-600)", textAlign: "center" }, children: "Everything you need to know about plans and billing." }),
|
|
1024
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1024
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 720, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Accordion, { items: FAQ }) })
|
|
1025
1025
|
] })
|
|
1026
1026
|
] });
|
|
1027
1027
|
}
|
|
1028
1028
|
function Row({ label, hint, children, top }) {
|
|
1029
1029
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "240px 1fr", gap: 24, padding: "20px 0", alignItems: top ? "flex-start" : "center", boxShadow: "inset 0 -1px 0 var(--klun-stroke-soft-200)" }, children: [
|
|
1030
1030
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
|
|
1031
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1031
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Label, { children: label }),
|
|
1032
1032
|
hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-soft-400)", textWrap: "pretty" }, children: hint }) : null
|
|
1033
1033
|
] }),
|
|
1034
1034
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: 0 }, children })
|
|
@@ -1040,26 +1040,26 @@ function Panel({ children }) {
|
|
|
1040
1040
|
function ProfileTab() {
|
|
1041
1041
|
const [bio, setBio] = react.useState("Product designer focused on systems and tooling.");
|
|
1042
1042
|
return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
|
|
1043
|
-
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Photo", hint: "PNG or JPG, up to 5MB.", top: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1043
|
+
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Photo", hint: "PNG or JPG, up to 5MB.", top: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.ImageUpload, { label: "Upload new photo", hint: "Recommended 400\xD7400px", onRemove: () => {
|
|
1044
1044
|
}, src: "" }) }),
|
|
1045
1045
|
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Full name", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
|
|
1046
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1047
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1046
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Input, { defaultValue: "Arthur", placeholder: "First name" }),
|
|
1047
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Input, { defaultValue: "Taylor", placeholder: "Last name" })
|
|
1048
1048
|
] }) }),
|
|
1049
|
-
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Email address", hint: "Used for sign-in and notifications.", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1050
|
-
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1049
|
+
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Email address", hint: "Used for sign-in and notifications.", children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Input, { type: "email", defaultValue: "arthur@klunui.com", leadingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-mail-line" }) }) }),
|
|
1050
|
+
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Role", children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.SelectMenu, { value: "design", onChange: () => {
|
|
1051
1051
|
}, options: [
|
|
1052
1052
|
{ value: "design", label: "Designer", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-pencil-ruler-2-line" }) },
|
|
1053
1053
|
{ value: "eng", label: "Engineer", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-code-s-slash-line" }) },
|
|
1054
1054
|
{ value: "pm", label: "Product manager", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-compass-3-line" }) }
|
|
1055
1055
|
] }) }),
|
|
1056
1056
|
/* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Bio", hint: "A short description for your profile.", top: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
|
|
1057
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1058
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1057
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Textarea, { value: bio, onChange: (e) => setBio(e.target.value), rows: 3, maxLength: 160 }),
|
|
1058
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.CharacterCounter, { value: bio.length, max: 160 }) })
|
|
1059
1059
|
] }) }),
|
|
1060
1060
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10, paddingTop: 20 }, children: [
|
|
1061
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1062
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1061
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
|
|
1062
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Button, { children: "Save changes" })
|
|
1063
1063
|
] })
|
|
1064
1064
|
] });
|
|
1065
1065
|
}
|
|
@@ -1074,9 +1074,9 @@ function NotificationsTab() {
|
|
|
1074
1074
|
{ k: "marketing", label: "Marketing emails", hint: "Tips, offers and news." }
|
|
1075
1075
|
];
|
|
1076
1076
|
return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
|
|
1077
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1078
|
-
items.map((it) => /* @__PURE__ */ jsxRuntime.jsx(Row, { label: it.label, hint: it.hint, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1079
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1077
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.ContentLabel, { style: { paddingTop: 20, display: "block" }, children: "Email" }),
|
|
1078
|
+
items.map((it) => /* @__PURE__ */ jsxRuntime.jsx(Row, { label: it.label, hint: it.hint, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Switch, { checked: s[it.k], onChange: () => set(it.k) }) }) }, it.k)),
|
|
1079
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Alert, { status: "information", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-information-2-line" }), style: { marginTop: 20 }, children: "Security alerts can't be turned off \u2014 they protect your account." })
|
|
1080
1080
|
] });
|
|
1081
1081
|
}
|
|
1082
1082
|
function IntegrationsTab() {
|
|
@@ -1094,7 +1094,7 @@ function IntegrationsTab() {
|
|
|
1094
1094
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-label-sm)", color: "var(--klun-text-strong-950)" }, children: r.name }),
|
|
1095
1095
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { font: "var(--klun-text-paragraph-xs)", color: "var(--klun-text-sub-600)" }, children: r.desc })
|
|
1096
1096
|
] }),
|
|
1097
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1097
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Switch, { checked: c[r.k], onChange: () => set(r.k) })
|
|
1098
1098
|
] }, r.k)) });
|
|
1099
1099
|
}
|
|
1100
1100
|
var TABS = [
|
|
@@ -1110,9 +1110,9 @@ function SettingsTemplate() {
|
|
|
1110
1110
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: 0, font: "var(--klun-text-title-h5)", color: "var(--klun-text-strong-950)", letterSpacing: "-0.01em" }, children: "Settings" }),
|
|
1111
1111
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, font: "var(--klun-text-paragraph-sm)", color: "var(--klun-text-sub-600)" }, children: "Manage your profile, notifications and connected apps." })
|
|
1112
1112
|
] }),
|
|
1113
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1113
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Badge, { color: "green", variant: "lighter", dot: true, children: "All changes saved" }) })
|
|
1114
1114
|
] }),
|
|
1115
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1115
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0 28px" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunkOPAZ7GAU_cjs.Tabs, { items: TABS, value: tab, onChange: setTab }) }),
|
|
1116
1116
|
tab === "profile" ? /* @__PURE__ */ jsxRuntime.jsx(ProfileTab, {}) : tab === "notifications" ? /* @__PURE__ */ jsxRuntime.jsx(NotificationsTab, {}) : /* @__PURE__ */ jsxRuntime.jsx(IntegrationsTab, {})
|
|
1117
1117
|
] });
|
|
1118
1118
|
}
|
package/dist/templates/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Badge, Button, SegmentedControl, Card, Tabs, ProgressBar, Input, Select, Switch, Divider, AvatarGroup, HorizontalFilter, ContentLabel, Chip, Alert, Accordion, Label, Avatar, Table, ImageUpload, SelectMenu, Textarea, CharacterCounter } from '../chunk-
|
|
1
|
+
import { Badge, Button, SegmentedControl, Card, Tabs, ProgressBar, Input, Select, Switch, Divider, AvatarGroup, HorizontalFilter, ContentLabel, Chip, Alert, Accordion, Label, Avatar, Table, ImageUpload, SelectMenu, Textarea, CharacterCounter } from '../chunk-RRE3PQLX.js';
|
|
2
2
|
import '../chunk-T225J6LV.js';
|
|
3
3
|
import { useState, useRef, useEffect } from 'react';
|
|
4
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "klun-ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Klun UI — a themeable React + TypeScript component library and design system (light/dark,
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "Klun UI — a themeable React + TypeScript component library and design system (light/dark, 6 accent themes, global radius axis).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"sideEffects": [
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"files": [
|
|
33
33
|
"dist",
|
|
34
34
|
"README.md",
|
|
35
|
+
"CHANGELOG.md",
|
|
35
36
|
"LICENSE"
|
|
36
37
|
],
|
|
37
38
|
"peerDependencies": {
|