@kvell-group/ui 1.6.6 → 1.6.8

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.
@@ -0,0 +1,4 @@
1
+ import { Button as r } from "./Button.js";
2
+ export {
3
+ r as Button
4
+ };
@@ -0,0 +1,424 @@
1
+ import { jsx as v, jsxs as I } from "react/jsx-runtime";
2
+ import { u as E, a as j, k as d, e as M, g as p, p as z, b as f, r as D, d as R, D as B, c as G, M as U, f as q } from "../../MantineThemeProvider-CyD9KzqB.js";
3
+ import { useLayoutEffect as J, useEffect as k, useRef as K, useState as Q, useCallback as S } from "react";
4
+ function X(r) {
5
+ var o;
6
+ return typeof r != "string" || !r.includes("var(--mantine-scale)") ? r : (o = r.match(/^calc\((.*?)\)$/)) == null ? void 0 : o[1].split("*")[0].trim();
7
+ }
8
+ function Y(r) {
9
+ const o = X(r);
10
+ return typeof o == "number" ? o : typeof o == "string" ? o.includes("calc") || o.includes("var") ? o : o.includes("px") ? Number(o.replace("px", "")) : o.includes("rem") ? Number(o.replace("rem", "")) * 16 : o.includes("em") ? Number(o.replace("em", "")) * 16 : Number(o) : NaN;
11
+ }
12
+ const L = typeof document < "u" ? J : k;
13
+ function x(r) {
14
+ return r === "auto" || r === "dark" || r === "light";
15
+ }
16
+ function Z({
17
+ key: r = "mantine-color-scheme-value"
18
+ } = {}) {
19
+ let o;
20
+ return {
21
+ get: (a) => {
22
+ if (typeof window > "u")
23
+ return a;
24
+ try {
25
+ const n = window.localStorage.getItem(r);
26
+ return x(n) ? n : a;
27
+ } catch {
28
+ return a;
29
+ }
30
+ },
31
+ set: (a) => {
32
+ try {
33
+ window.localStorage.setItem(r, a);
34
+ } catch (n) {
35
+ console.warn(
36
+ "[@mantine/core] Local storage color scheme manager was unable to save color scheme.",
37
+ n
38
+ );
39
+ }
40
+ },
41
+ subscribe: (a) => {
42
+ o = (n) => {
43
+ n.storageArea === window.localStorage && n.key === r && x(n.newValue) && a(n.newValue);
44
+ }, window.addEventListener("storage", o);
45
+ },
46
+ unsubscribe: () => {
47
+ window.removeEventListener("storage", o);
48
+ },
49
+ clear: () => {
50
+ window.localStorage.removeItem(r);
51
+ }
52
+ };
53
+ }
54
+ function rr() {
55
+ const r = E(), o = j(), a = d(r.breakpoints).reduce((n, t) => {
56
+ const i = r.breakpoints[t].includes("px"), e = Y(r.breakpoints[t]), l = i ? `${e - 0.1}px` : M(e - 0.1), c = i ? `${e}px` : M(e);
57
+ return `${n}@media (max-width: ${l}) {.mantine-visible-from-${t} {display: none !important;}}@media (min-width: ${c}) {.mantine-hidden-from-${t} {display: none !important;}}`;
58
+ }, "");
59
+ return /* @__PURE__ */ v(
60
+ "style",
61
+ {
62
+ "data-mantine-styles": "classes",
63
+ nonce: o == null ? void 0 : o(),
64
+ dangerouslySetInnerHTML: { __html: a }
65
+ }
66
+ );
67
+ }
68
+ function w(r) {
69
+ return Object.entries(r).map(([o, a]) => `${o}: ${a};`).join("");
70
+ }
71
+ function h(r, o) {
72
+ return (Array.isArray(r) ? r : [r]).reduce((n, t) => `${t}{${n}}`, o);
73
+ }
74
+ function or(r, o) {
75
+ const a = w(r.variables), n = a ? h(o, a) : "", t = w(r.dark), i = w(r.light), e = t ? h(o === ":host" ? `${o}([data-mantine-color-scheme="dark"])` : `${o}[data-mantine-color-scheme="dark"]`, t) : "", l = i ? h(o === ":host" ? `${o}([data-mantine-color-scheme="light"])` : `${o}[data-mantine-color-scheme="light"]`, i) : "";
76
+ return `${n}${e}${l}`;
77
+ }
78
+ function nr({ color: r, theme: o, autoContrast: a }) {
79
+ return o.autoContrast && z({ color: r || o.primaryColor, theme: o }).isLight ? "var(--mantine-color-black)" : "var(--mantine-color-white)";
80
+ }
81
+ function V(r, o) {
82
+ return nr({
83
+ color: r.colors[r.primaryColor][p(r, o)],
84
+ theme: r,
85
+ autoContrast: null
86
+ });
87
+ }
88
+ function b({
89
+ theme: r,
90
+ color: o,
91
+ colorScheme: a,
92
+ name: n = o,
93
+ withColorValues: t = !0
94
+ }) {
95
+ if (!r.colors[o])
96
+ return {};
97
+ if (a === "light") {
98
+ const l = p(r, "light"), c = {
99
+ [`--mantine-color-${n}-text`]: `var(--mantine-color-${n}-filled)`,
100
+ [`--mantine-color-${n}-filled`]: `var(--mantine-color-${n}-${l})`,
101
+ [`--mantine-color-${n}-filled-hover`]: `var(--mantine-color-${n}-${l === 9 ? 8 : l + 1})`,
102
+ [`--mantine-color-${n}-light`]: f(r.colors[o][l], 0.1),
103
+ [`--mantine-color-${n}-light-hover`]: f(r.colors[o][l], 0.12),
104
+ [`--mantine-color-${n}-light-color`]: `var(--mantine-color-${n}-${l})`,
105
+ [`--mantine-color-${n}-outline`]: `var(--mantine-color-${n}-${l})`,
106
+ [`--mantine-color-${n}-outline-hover`]: f(r.colors[o][l], 0.05)
107
+ };
108
+ return t ? {
109
+ [`--mantine-color-${n}-0`]: r.colors[o][0],
110
+ [`--mantine-color-${n}-1`]: r.colors[o][1],
111
+ [`--mantine-color-${n}-2`]: r.colors[o][2],
112
+ [`--mantine-color-${n}-3`]: r.colors[o][3],
113
+ [`--mantine-color-${n}-4`]: r.colors[o][4],
114
+ [`--mantine-color-${n}-5`]: r.colors[o][5],
115
+ [`--mantine-color-${n}-6`]: r.colors[o][6],
116
+ [`--mantine-color-${n}-7`]: r.colors[o][7],
117
+ [`--mantine-color-${n}-8`]: r.colors[o][8],
118
+ [`--mantine-color-${n}-9`]: r.colors[o][9],
119
+ ...c
120
+ } : c;
121
+ }
122
+ const i = p(r, "dark"), e = {
123
+ [`--mantine-color-${n}-text`]: `var(--mantine-color-${n}-4)`,
124
+ [`--mantine-color-${n}-filled`]: `var(--mantine-color-${n}-${i})`,
125
+ [`--mantine-color-${n}-filled-hover`]: `var(--mantine-color-${n}-${i === 9 ? 8 : i + 1})`,
126
+ [`--mantine-color-${n}-light`]: f(
127
+ r.colors[o][Math.max(0, i - 2)],
128
+ 0.15
129
+ ),
130
+ [`--mantine-color-${n}-light-hover`]: f(
131
+ r.colors[o][Math.max(0, i - 2)],
132
+ 0.2
133
+ ),
134
+ [`--mantine-color-${n}-light-color`]: `var(--mantine-color-${n}-${Math.max(i - 5, 0)})`,
135
+ [`--mantine-color-${n}-outline`]: `var(--mantine-color-${n}-${Math.max(i - 4, 0)})`,
136
+ [`--mantine-color-${n}-outline-hover`]: f(
137
+ r.colors[o][Math.max(i - 4, 0)],
138
+ 0.05
139
+ )
140
+ };
141
+ return t ? {
142
+ [`--mantine-color-${n}-0`]: r.colors[o][0],
143
+ [`--mantine-color-${n}-1`]: r.colors[o][1],
144
+ [`--mantine-color-${n}-2`]: r.colors[o][2],
145
+ [`--mantine-color-${n}-3`]: r.colors[o][3],
146
+ [`--mantine-color-${n}-4`]: r.colors[o][4],
147
+ [`--mantine-color-${n}-5`]: r.colors[o][5],
148
+ [`--mantine-color-${n}-6`]: r.colors[o][6],
149
+ [`--mantine-color-${n}-7`]: r.colors[o][7],
150
+ [`--mantine-color-${n}-8`]: r.colors[o][8],
151
+ [`--mantine-color-${n}-9`]: r.colors[o][9],
152
+ ...e
153
+ } : e;
154
+ }
155
+ function ar(r) {
156
+ return !!r && typeof r == "object" && "mantine-virtual-color" in r;
157
+ }
158
+ function $(r, o, a) {
159
+ d(o).forEach(
160
+ (n) => Object.assign(r, { [`--mantine-${a}-${n}`]: o[n] })
161
+ );
162
+ }
163
+ const N = (r) => {
164
+ const o = p(r, "light"), a = r.defaultRadius in r.radius ? r.radius[r.defaultRadius] : D(r.defaultRadius), n = {
165
+ variables: {
166
+ "--mantine-scale": r.scale.toString(),
167
+ "--mantine-cursor-type": r.cursorType,
168
+ "--mantine-color-scheme": "light dark",
169
+ "--mantine-webkit-font-smoothing": r.fontSmoothing ? "antialiased" : "unset",
170
+ "--mantine-moz-font-smoothing": r.fontSmoothing ? "grayscale" : "unset",
171
+ "--mantine-color-white": r.white,
172
+ "--mantine-color-black": r.black,
173
+ "--mantine-line-height": r.lineHeights.md,
174
+ "--mantine-font-family": r.fontFamily,
175
+ "--mantine-font-family-monospace": r.fontFamilyMonospace,
176
+ "--mantine-font-family-headings": r.headings.fontFamily,
177
+ "--mantine-heading-font-weight": r.headings.fontWeight,
178
+ "--mantine-heading-text-wrap": r.headings.textWrap,
179
+ "--mantine-radius-default": a,
180
+ // Primary colors
181
+ "--mantine-primary-color-filled": `var(--mantine-color-${r.primaryColor}-filled)`,
182
+ "--mantine-primary-color-filled-hover": `var(--mantine-color-${r.primaryColor}-filled-hover)`,
183
+ "--mantine-primary-color-light": `var(--mantine-color-${r.primaryColor}-light)`,
184
+ "--mantine-primary-color-light-hover": `var(--mantine-color-${r.primaryColor}-light-hover)`,
185
+ "--mantine-primary-color-light-color": `var(--mantine-color-${r.primaryColor}-light-color)`
186
+ },
187
+ light: {
188
+ "--mantine-primary-color-contrast": V(r, "light"),
189
+ "--mantine-color-bright": "var(--mantine-color-black)",
190
+ "--mantine-color-text": r.black,
191
+ "--mantine-color-body": r.white,
192
+ "--mantine-color-error": "var(--mantine-color-red-6)",
193
+ "--mantine-color-placeholder": "var(--mantine-color-gray-5)",
194
+ "--mantine-color-anchor": `var(--mantine-color-${r.primaryColor}-${o})`,
195
+ "--mantine-color-default": "var(--mantine-color-white)",
196
+ "--mantine-color-default-hover": "var(--mantine-color-gray-0)",
197
+ "--mantine-color-default-color": "var(--mantine-color-black)",
198
+ "--mantine-color-default-border": "var(--mantine-color-gray-4)",
199
+ "--mantine-color-dimmed": "var(--mantine-color-gray-6)"
200
+ },
201
+ dark: {
202
+ "--mantine-primary-color-contrast": V(r, "dark"),
203
+ "--mantine-color-bright": "var(--mantine-color-white)",
204
+ "--mantine-color-text": "var(--mantine-color-dark-0)",
205
+ "--mantine-color-body": "var(--mantine-color-dark-7)",
206
+ "--mantine-color-error": "var(--mantine-color-red-8)",
207
+ "--mantine-color-placeholder": "var(--mantine-color-dark-3)",
208
+ "--mantine-color-anchor": `var(--mantine-color-${r.primaryColor}-4)`,
209
+ "--mantine-color-default": "var(--mantine-color-dark-6)",
210
+ "--mantine-color-default-hover": "var(--mantine-color-dark-5)",
211
+ "--mantine-color-default-color": "var(--mantine-color-white)",
212
+ "--mantine-color-default-border": "var(--mantine-color-dark-4)",
213
+ "--mantine-color-dimmed": "var(--mantine-color-dark-2)"
214
+ }
215
+ };
216
+ $(n.variables, r.breakpoints, "breakpoint"), $(n.variables, r.spacing, "spacing"), $(n.variables, r.fontSizes, "font-size"), $(n.variables, r.lineHeights, "line-height"), $(n.variables, r.shadows, "shadow"), $(n.variables, r.radius, "radius"), r.colors[r.primaryColor].forEach((i, e) => {
217
+ n.variables[`--mantine-primary-color-${e}`] = `var(--mantine-color-${r.primaryColor}-${e})`;
218
+ }), d(r.colors).forEach((i) => {
219
+ const e = r.colors[i];
220
+ if (ar(e)) {
221
+ Object.assign(
222
+ n.light,
223
+ b({
224
+ theme: r,
225
+ name: e.name,
226
+ color: e.light,
227
+ colorScheme: "light",
228
+ withColorValues: !0
229
+ })
230
+ ), Object.assign(
231
+ n.dark,
232
+ b({
233
+ theme: r,
234
+ name: e.name,
235
+ color: e.dark,
236
+ colorScheme: "dark",
237
+ withColorValues: !0
238
+ })
239
+ );
240
+ return;
241
+ }
242
+ e.forEach((l, c) => {
243
+ n.variables[`--mantine-color-${i}-${c}`] = l;
244
+ }), Object.assign(
245
+ n.light,
246
+ b({
247
+ theme: r,
248
+ color: i,
249
+ colorScheme: "light",
250
+ withColorValues: !1
251
+ })
252
+ ), Object.assign(
253
+ n.dark,
254
+ b({
255
+ theme: r,
256
+ color: i,
257
+ colorScheme: "dark",
258
+ withColorValues: !1
259
+ })
260
+ );
261
+ });
262
+ const t = r.headings.sizes;
263
+ return d(t).forEach((i) => {
264
+ n.variables[`--mantine-${i}-font-size`] = t[i].fontSize, n.variables[`--mantine-${i}-line-height`] = t[i].lineHeight, n.variables[`--mantine-${i}-font-weight`] = t[i].fontWeight || r.headings.fontWeight;
265
+ }), n;
266
+ };
267
+ function ir({ theme: r, generator: o }) {
268
+ const a = N(r), n = o == null ? void 0 : o(r);
269
+ return n ? R(a, n) : a;
270
+ }
271
+ const C = N(B);
272
+ function tr(r) {
273
+ const o = {
274
+ variables: {},
275
+ light: {},
276
+ dark: {}
277
+ };
278
+ return d(r.variables).forEach((a) => {
279
+ C.variables[a] !== r.variables[a] && (o.variables[a] = r.variables[a]);
280
+ }), d(r.light).forEach((a) => {
281
+ C.light[a] !== r.light[a] && (o.light[a] = r.light[a]);
282
+ }), d(r.dark).forEach((a) => {
283
+ C.dark[a] !== r.dark[a] && (o.dark[a] = r.dark[a]);
284
+ }), o;
285
+ }
286
+ function er(r) {
287
+ return `
288
+ ${r}[data-mantine-color-scheme="dark"] { --mantine-color-scheme: dark; }
289
+ ${r}[data-mantine-color-scheme="light"] { --mantine-color-scheme: light; }
290
+ `;
291
+ }
292
+ function P({
293
+ cssVariablesSelector: r,
294
+ deduplicateCssVariables: o
295
+ }) {
296
+ const a = E(), n = j(), t = G(), i = ir({ theme: a, generator: t }), e = r === ":root" && o, l = e ? tr(i) : i, c = or(l, r);
297
+ return c ? /* @__PURE__ */ v(
298
+ "style",
299
+ {
300
+ "data-mantine-styles": !0,
301
+ nonce: n == null ? void 0 : n(),
302
+ dangerouslySetInnerHTML: {
303
+ __html: `${c}${e ? "" : er(r)}`
304
+ }
305
+ }
306
+ ) : null;
307
+ }
308
+ P.displayName = "@mantine/CssVariables";
309
+ function lr() {
310
+ const r = console.error;
311
+ console.error = (...o) => {
312
+ o.length > 1 && typeof o[0] == "string" && o[0].toLowerCase().includes("extra attributes from the server") && typeof o[1] == "string" && o[1].toLowerCase().includes("data-mantine-color-scheme") || r(...o);
313
+ };
314
+ }
315
+ function g(r, o) {
316
+ var t, i;
317
+ const a = typeof window < "u" && "matchMedia" in window && ((t = window.matchMedia("(prefers-color-scheme: dark)")) == null ? void 0 : t.matches), n = r !== "auto" ? r : a ? "dark" : "light";
318
+ (i = o()) == null || i.setAttribute("data-mantine-color-scheme", n);
319
+ }
320
+ function cr({
321
+ manager: r,
322
+ defaultColorScheme: o,
323
+ getRootElement: a,
324
+ forceColorScheme: n
325
+ }) {
326
+ const t = K(null), [i, e] = Q(() => r.get(o)), l = n || i, c = S(
327
+ (s) => {
328
+ n || (g(s, a), e(s), r.set(s));
329
+ },
330
+ [r.set, l, n]
331
+ ), y = S(() => {
332
+ e(o), g(o, a), r.clear();
333
+ }, [r.clear, o]);
334
+ return k(() => (r.subscribe(c), r.unsubscribe), [r.subscribe, r.unsubscribe]), L(() => {
335
+ g(r.get(o), a);
336
+ }, []), k(() => {
337
+ var u;
338
+ if (n)
339
+ return g(n, a), () => {
340
+ };
341
+ n === void 0 && g(i, a), typeof window < "u" && "matchMedia" in window && (t.current = window.matchMedia("(prefers-color-scheme: dark)"));
342
+ const s = (m) => {
343
+ i === "auto" && g(m.matches ? "dark" : "light", a);
344
+ };
345
+ return (u = t.current) == null || u.addEventListener("change", s), () => {
346
+ var m;
347
+ return (m = t.current) == null ? void 0 : m.removeEventListener("change", s);
348
+ };
349
+ }, [i, n]), { colorScheme: l, setColorScheme: c, clearColorScheme: y };
350
+ }
351
+ function sr({
352
+ respectReducedMotion: r,
353
+ getRootElement: o
354
+ }) {
355
+ L(() => {
356
+ var a;
357
+ r && ((a = o()) == null || a.setAttribute("data-respect-reduced-motion", "true"));
358
+ }, [r]);
359
+ }
360
+ lr();
361
+ function T({
362
+ theme: r,
363
+ children: o,
364
+ getStyleNonce: a,
365
+ withStaticClasses: n = !0,
366
+ withGlobalClasses: t = !0,
367
+ deduplicateCssVariables: i = !0,
368
+ withCssVariables: e = !0,
369
+ cssVariablesSelector: l = ":root",
370
+ classNamesPrefix: c = "mantine",
371
+ colorSchemeManager: y = Z(),
372
+ defaultColorScheme: s = "light",
373
+ getRootElement: u = () => document.documentElement,
374
+ cssVariablesResolver: m,
375
+ forceColorScheme: _,
376
+ stylesTransform: W,
377
+ env: A
378
+ }) {
379
+ const { colorScheme: O, setColorScheme: F, clearColorScheme: H } = cr({
380
+ defaultColorScheme: s,
381
+ forceColorScheme: _,
382
+ manager: y,
383
+ getRootElement: u
384
+ });
385
+ return sr({
386
+ respectReducedMotion: (r == null ? void 0 : r.respectReducedMotion) || !1,
387
+ getRootElement: u
388
+ }), /* @__PURE__ */ v(
389
+ U.Provider,
390
+ {
391
+ value: {
392
+ colorScheme: O,
393
+ setColorScheme: F,
394
+ clearColorScheme: H,
395
+ getRootElement: u,
396
+ classNamesPrefix: c,
397
+ getStyleNonce: a,
398
+ cssVariablesResolver: m,
399
+ cssVariablesSelector: l,
400
+ withStaticClasses: n,
401
+ stylesTransform: W,
402
+ env: A
403
+ },
404
+ children: /* @__PURE__ */ I(q, { theme: r, children: [
405
+ e && /* @__PURE__ */ v(
406
+ P,
407
+ {
408
+ cssVariablesSelector: l,
409
+ deduplicateCssVariables: i
410
+ }
411
+ ),
412
+ t && /* @__PURE__ */ v(rr, {}),
413
+ o
414
+ ] })
415
+ }
416
+ );
417
+ }
418
+ T.displayName = "@mantine/core/MantineProvider";
419
+ function fr({ children: r, theme: o }) {
420
+ return /* @__PURE__ */ v(T, { theme: o, children: r });
421
+ }
422
+ export {
423
+ fr as MantineProvider
424
+ };
@@ -0,0 +1,4 @@
1
+ import { MantineProvider as o } from "./MantineProvider.js";
2
+ export {
3
+ o as MantineProvider
4
+ };
@@ -0,0 +1,21 @@
1
+ function o(r) {
2
+ return Array.isArray(r) ? r : Array(10).fill(r);
3
+ }
4
+ const e = {
5
+ colors: {
6
+ primary: o("#14151A")
7
+ }
8
+ /* shadows: {
9
+ md: '1px 1px 3px rgba(0, 0, 0, .25)',
10
+ xl: '5px 5px 3px rgba(0, 0, 0, .25)',
11
+ }, */
12
+ /* headings: {
13
+ fontFamily: 'Roboto, sans-serif',
14
+ sizes: {
15
+ h1: { fontSize: rem(36) },
16
+ },
17
+ }, */
18
+ };
19
+ export {
20
+ e as theme
21
+ };