klun-ui 0.1.2 → 0.1.4
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 +16 -0
- package/dist/{chunk-OPAZ7GAU.cjs → chunk-54YNPINO.cjs} +5 -4
- package/dist/chunk-54YNPINO.cjs.map +1 -0
- package/dist/{chunk-RRE3PQLX.js → chunk-OZ5MAWZC.js} +5 -4
- package/dist/chunk-OZ5MAWZC.js.map +1 -0
- package/dist/index.cjs +144 -144
- package/dist/index.js +1 -1
- package/dist/styles.css +8 -0
- package/dist/templates/index.cjs +82 -82
- package/dist/templates/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-OPAZ7GAU.cjs.map +0 -1
- package/dist/chunk-RRE3PQLX.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner, Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW } from './chunk-
|
|
1
|
+
export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner, Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW } from './chunk-OZ5MAWZC.js';
|
|
2
2
|
export { cx } from './chunk-T225J6LV.js';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
package/dist/styles.css
CHANGED
|
@@ -7524,6 +7524,10 @@ body {
|
|
|
7524
7524
|
left: auto;
|
|
7525
7525
|
right: 0;
|
|
7526
7526
|
}
|
|
7527
|
+
.klun-select-listbox--up {
|
|
7528
|
+
top: auto;
|
|
7529
|
+
bottom: calc(100% + 6px);
|
|
7530
|
+
}
|
|
7527
7531
|
@keyframes klun-select-listbox-in {
|
|
7528
7532
|
from {
|
|
7529
7533
|
opacity: 0;
|
|
@@ -9033,6 +9037,10 @@ body {
|
|
|
9033
9037
|
padding: 16px 20px 20px;
|
|
9034
9038
|
border-top: 1px solid var(--klun-stroke-soft-200);
|
|
9035
9039
|
}
|
|
9040
|
+
.klun-modal__footer--flush {
|
|
9041
|
+
border-top: none;
|
|
9042
|
+
padding-top: 20px;
|
|
9043
|
+
}
|
|
9036
9044
|
|
|
9037
9045
|
/* src/components/overlays/Popconfirm.css */
|
|
9038
9046
|
.klun-popconfirm {
|
package/dist/templates/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk54YNPINO_cjs = require('../chunk-54YNPINO.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(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-calendar-line" }) }),
|
|
81
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_cjs.SegmentedControl, { value: range, onChange: setRange, items: [{ value: "week", label: "Week" }, { value: "month", label: "Month" }, { value: "year", label: "Year" }] }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Switch, { checked: m, onChange: setM }),
|
|
207
207
|
" Marketing updates"
|
|
208
208
|
] })
|
|
209
209
|
] }) })
|
|
210
210
|
] }),
|
|
211
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
211
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
|
|
214
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "ghost", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-share-line" }) }),
|
|
463
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { iconOnly: true, variant: "neutral", appearance: "stroke", icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-notification-3-line" }) }),
|
|
643
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { variant: "primary", size: "large", trailingIcon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-line" }), children: "Start building free" }),
|
|
702
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { kind: "fancy", fullWidth: true, children: plan.cta }) : /* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_cjs.Button, { fullWidth: true, variant: "neutral", appearance: "stroke", children: plan.cta }),
|
|
987
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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
|
+
chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Input, { defaultValue: "Arthur", placeholder: "First name" }),
|
|
1047
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Button, { variant: "neutral", appearance: "stroke", children: "Cancel" }),
|
|
1062
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_cjs.Switch, { checked: s[it.k], onChange: () => set(it.k) }) }) }, it.k)),
|
|
1079
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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(chunk54YNPINO_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-OZ5MAWZC.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