@coinloger/dev-ui 0.0.3 → 0.0.5

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/dist/index.d.ts CHANGED
@@ -12,3 +12,4 @@ export * from './components/Typography/Heading';
12
12
  export * from './components/Typography/Text';
13
13
  export * from './components/Tabs/Tabs';
14
14
  export * from './components/Table/Table';
15
+ export * from './theme';
package/dist/index.js ADDED
@@ -0,0 +1,488 @@
1
+ import { jsx as a, jsxs as b, Fragment as A } from "react/jsx-runtime";
2
+ import y, { createContext as $, useRef as C, useEffect as v, useContext as w, useState as I, forwardRef as g, useId as _, useMemo as F } from "react";
3
+ import { createPortal as P } from "react-dom";
4
+ function T(e) {
5
+ var t, i, s = "";
6
+ if (typeof e == "string" || typeof e == "number") s += e;
7
+ else if (typeof e == "object") if (Array.isArray(e)) {
8
+ var r = e.length;
9
+ for (t = 0; t < r; t++) e[t] && (i = T(e[t])) && (s && (s += " "), s += i);
10
+ } else for (i in e) e[i] && (s && (s += " "), s += i);
11
+ return s;
12
+ }
13
+ function l() {
14
+ for (var e, t, i = 0, s = "", r = arguments.length; i < r; i++) (e = arguments[i]) && (t = T(e)) && (s && (s += " "), s += t);
15
+ return s;
16
+ }
17
+ const H = y.forwardRef(
18
+ ({ className: e, variant: t = "primary", size: i = "md", ...s }, r) => {
19
+ const n = l(
20
+ "ui-btn",
21
+ `ui-btn-${t}`,
22
+ `ui-btn-${i}`,
23
+ e
24
+ );
25
+ return /* @__PURE__ */ a("button", { ref: r, className: n, ...s });
26
+ }
27
+ );
28
+ H.displayName = "Button";
29
+ const O = y.forwardRef(
30
+ ({ className: e, label: t, error: i, helperText: s, fullWidth: r, size: n = "md", id: o, ...c }, u) => {
31
+ const d = o || y.useId();
32
+ return /* @__PURE__ */ b("div", { className: l("ui-input-wrapper", r && "ui-input-wrapper-full"), children: [
33
+ t && /* @__PURE__ */ a("label", { htmlFor: d, className: "ui-label", children: t }),
34
+ /* @__PURE__ */ a(
35
+ "input",
36
+ {
37
+ ref: u,
38
+ id: d,
39
+ className: l(
40
+ "ui-input",
41
+ `ui-input-${n}`,
42
+ i && "ui-input-error",
43
+ e
44
+ ),
45
+ ...c
46
+ }
47
+ ),
48
+ s && /* @__PURE__ */ a("span", { className: l("ui-helper-text", i && "ui-helper-text-error"), children: s })
49
+ ] });
50
+ }
51
+ );
52
+ O.displayName = "Input";
53
+ const V = y.forwardRef(
54
+ ({ className: e, title: t, footer: i, children: s, ...r }, n) => /* @__PURE__ */ b("div", { ref: n, className: l("ui-card", e), ...r, children: [
55
+ t && /* @__PURE__ */ a("div", { className: "ui-card__header", children: t }),
56
+ /* @__PURE__ */ a("div", { className: "ui-card__body", children: s }),
57
+ i && /* @__PURE__ */ a("div", { className: "ui-card__footer", children: i })
58
+ ] })
59
+ );
60
+ V.displayName = "Card";
61
+ const E = $(void 0), K = () => {
62
+ const e = w(E);
63
+ if (!e)
64
+ throw new Error("Modal compound components must be used within a Modal");
65
+ return e;
66
+ }, j = ({ children: e, className: t }) => {
67
+ const { onClose: i } = K();
68
+ return /* @__PURE__ */ b("div", { className: l("ui-modal-header", t), children: [
69
+ /* @__PURE__ */ a("h3", { className: "ui-modal-title", children: e }),
70
+ /* @__PURE__ */ a(
71
+ "button",
72
+ {
73
+ className: "ui-modal-close",
74
+ onClick: i,
75
+ "aria-label": "Close modal",
76
+ children: /* @__PURE__ */ b("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
77
+ /* @__PURE__ */ a("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
78
+ /* @__PURE__ */ a("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
79
+ ] })
80
+ }
81
+ )
82
+ ] });
83
+ }, L = ({ children: e, className: t }) => /* @__PURE__ */ a("div", { className: l("ui-modal-body", t), children: e }), R = ({ children: e, className: t }) => /* @__PURE__ */ a("div", { className: l("ui-modal-footer", t), children: e }), W = ({
84
+ isOpen: e,
85
+ onClose: t,
86
+ title: i,
87
+ children: s,
88
+ footer: r,
89
+ size: n = "md",
90
+ className: o,
91
+ closeOnBackdropClick: c = !0
92
+ }) => {
93
+ const u = C(null), [d, h] = y.useState(e);
94
+ v(() => {
95
+ e && h(!0);
96
+ }, [e]);
97
+ const m = () => {
98
+ e || h(!1);
99
+ };
100
+ if (v(() => {
101
+ const f = (x) => {
102
+ x.key === "Escape" && t();
103
+ };
104
+ return e && (document.addEventListener("keydown", f), document.body.style.overflow = "hidden"), () => {
105
+ document.removeEventListener("keydown", f), document.body.style.overflow = "";
106
+ };
107
+ }, [e, t]), !d) return null;
108
+ const N = (f) => {
109
+ c && f.target === u.current && t();
110
+ };
111
+ return P(
112
+ /* @__PURE__ */ a(E.Provider, { value: { onClose: t }, children: /* @__PURE__ */ a(
113
+ "div",
114
+ {
115
+ className: l("ui-modal-overlay", !e && "ui-modal-closing"),
116
+ ref: u,
117
+ onClick: N,
118
+ onAnimationEnd: m,
119
+ children: /* @__PURE__ */ a(
120
+ "div",
121
+ {
122
+ className: l(
123
+ "ui-modal",
124
+ `ui-modal-${n}`,
125
+ !e && "ui-modal-closing",
126
+ o
127
+ ),
128
+ role: "dialog",
129
+ "aria-modal": "true",
130
+ children: i ? /* @__PURE__ */ b(A, { children: [
131
+ /* @__PURE__ */ a(j, { children: i }),
132
+ /* @__PURE__ */ a(L, { children: s }),
133
+ r && /* @__PURE__ */ a(R, { children: r })
134
+ ] }) : s
135
+ }
136
+ )
137
+ }
138
+ ) }),
139
+ document.body
140
+ );
141
+ }, ee = Object.assign(W, {
142
+ Header: j,
143
+ Body: L,
144
+ Footer: R
145
+ }), te = ({
146
+ options: e,
147
+ value: t,
148
+ onChange: i,
149
+ placeholder: s = "Select an option",
150
+ label: r,
151
+ error: n,
152
+ helperText: o,
153
+ disabled: c,
154
+ fullWidth: u,
155
+ size: d = "md",
156
+ className: h
157
+ }) => {
158
+ const [m, N] = I(!1), f = C(null), x = e.find((p) => p.value === t), B = () => {
159
+ c || N(!m);
160
+ }, M = (p) => {
161
+ i && i(p), N(!1);
162
+ };
163
+ return v(() => {
164
+ const p = (S) => {
165
+ f.current && !f.current.contains(S.target) && N(!1);
166
+ };
167
+ return m && document.addEventListener("mousedown", p), () => {
168
+ document.removeEventListener("mousedown", p);
169
+ };
170
+ }, [m]), /* @__PURE__ */ b(
171
+ "div",
172
+ {
173
+ className: l("ui-select-wrapper", u && "ui-w-full", h),
174
+ ref: f,
175
+ style: { width: u ? "100%" : "auto" },
176
+ children: [
177
+ r && /* @__PURE__ */ a("label", { className: "ui-label", style: { marginBottom: "0.375rem", display: "block" }, children: r }),
178
+ /* @__PURE__ */ b(
179
+ "button",
180
+ {
181
+ type: "button",
182
+ className: l(
183
+ "ui-select-trigger",
184
+ `ui-select-${d}`,
185
+ n && "ui-select-error",
186
+ c && "ui-select-disabled",
187
+ m && "ui-select-open"
188
+ ),
189
+ onClick: B,
190
+ disabled: c,
191
+ "aria-haspopup": "listbox",
192
+ "aria-expanded": m,
193
+ children: [
194
+ /* @__PURE__ */ a("span", { className: l(!x && "ui-select-placeholder"), children: x ? x.label : s }),
195
+ /* @__PURE__ */ a(
196
+ "svg",
197
+ {
198
+ className: "ui-select-icon",
199
+ fill: "none",
200
+ stroke: "currentColor",
201
+ viewBox: "0 0 24 24",
202
+ children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
203
+ }
204
+ )
205
+ ]
206
+ }
207
+ ),
208
+ m && /* @__PURE__ */ b("ul", { className: "ui-select-menu", role: "listbox", children: [
209
+ e.map((p) => /* @__PURE__ */ a(
210
+ "li",
211
+ {
212
+ className: l(
213
+ "ui-select-option",
214
+ p.value === t && "ui-select-selected"
215
+ ),
216
+ onClick: () => M(p.value),
217
+ role: "option",
218
+ "aria-selected": p.value === t,
219
+ children: p.label
220
+ },
221
+ p.value
222
+ )),
223
+ e.length === 0 && /* @__PURE__ */ a("li", { className: "ui-select-option", style: { color: "var(--ui-text-muted)", cursor: "default" }, children: "No options" })
224
+ ] }),
225
+ o && /* @__PURE__ */ a("span", { className: l("ui-helper-text", n && "ui-helper-text-error"), style: { marginTop: "0.375rem", display: "block" }, children: o })
226
+ ]
227
+ }
228
+ );
229
+ }, se = g(
230
+ ({ className: e, label: t, error: i, disabled: s, size: r = "md", variant: n = "primary", ...o }, c) => /* @__PURE__ */ b(
231
+ "label",
232
+ {
233
+ className: l(
234
+ "ui-checkbox-label",
235
+ `ui-checkbox-${r}`,
236
+ `ui-checkbox-${n}`,
237
+ s && "ui-checkbox-disabled",
238
+ e
239
+ ),
240
+ children: [
241
+ /* @__PURE__ */ a(
242
+ "input",
243
+ {
244
+ type: "checkbox",
245
+ className: "ui-checkbox-input",
246
+ disabled: s,
247
+ ref: c,
248
+ ...o
249
+ }
250
+ ),
251
+ /* @__PURE__ */ a("span", { className: "ui-checkbox-custom", children: /* @__PURE__ */ a(
252
+ "svg",
253
+ {
254
+ className: "ui-checkbox-icon",
255
+ viewBox: "0 0 24 24",
256
+ fill: "none",
257
+ stroke: "currentColor",
258
+ strokeLinecap: "round",
259
+ strokeLinejoin: "round",
260
+ children: /* @__PURE__ */ a("polyline", { points: "20 6 9 17 4 12" })
261
+ }
262
+ ) }),
263
+ t && /* @__PURE__ */ a("span", { className: "ui-checkbox-text", children: t })
264
+ ]
265
+ }
266
+ )
267
+ ), ie = g(
268
+ ({ className: e, label: t, error: i, disabled: s, size: r = "md", variant: n = "primary", ...o }, c) => /* @__PURE__ */ b(
269
+ "label",
270
+ {
271
+ className: l(
272
+ "ui-radio-label",
273
+ `ui-radio-${r}`,
274
+ `ui-radio-${n}`,
275
+ s && "ui-radio-disabled",
276
+ e
277
+ ),
278
+ children: [
279
+ /* @__PURE__ */ a(
280
+ "input",
281
+ {
282
+ type: "radio",
283
+ className: "ui-radio-input",
284
+ disabled: s,
285
+ ref: c,
286
+ ...o
287
+ }
288
+ ),
289
+ /* @__PURE__ */ a("span", { className: "ui-radio-custom", children: /* @__PURE__ */ a("span", { className: "ui-radio-dot" }) }),
290
+ t && /* @__PURE__ */ a("span", { className: "ui-radio-text", children: t })
291
+ ]
292
+ }
293
+ )
294
+ ), ae = g(
295
+ ({ className: e, label: t, error: i, disabled: s, size: r = "md", variant: n = "primary", ...o }, c) => /* @__PURE__ */ b(
296
+ "label",
297
+ {
298
+ className: l(
299
+ "ui-switch-label",
300
+ `ui-switch-${r}`,
301
+ `ui-switch-${n}`,
302
+ s && "ui-switch-disabled",
303
+ e
304
+ ),
305
+ children: [
306
+ /* @__PURE__ */ a(
307
+ "input",
308
+ {
309
+ type: "checkbox",
310
+ className: "ui-switch-input",
311
+ disabled: s,
312
+ ref: c,
313
+ role: "switch",
314
+ ...o
315
+ }
316
+ ),
317
+ /* @__PURE__ */ a("span", { className: "ui-switch-track", children: /* @__PURE__ */ a("span", { className: "ui-switch-thumb" }) }),
318
+ t && /* @__PURE__ */ a("span", { className: "ui-switch-text", children: t })
319
+ ]
320
+ }
321
+ )
322
+ ), re = g(
323
+ ({ className: e, children: t, variant: i = "primary", size: s = "md", shape: r = "rounded", ...n }, o) => /* @__PURE__ */ a(
324
+ "span",
325
+ {
326
+ ref: o,
327
+ className: l(
328
+ "ui-badge",
329
+ `ui-badge-${i}`,
330
+ `ui-badge-${s}`,
331
+ `ui-badge-${r}`,
332
+ e
333
+ ),
334
+ ...n,
335
+ children: t
336
+ }
337
+ )
338
+ ), ne = g(
339
+ ({ className: e, children: t, level: i = 1, truncate: s, lines: r, style: n, ...o }, c) => {
340
+ const u = `h${i}`, d = r ? { ...n, "--ui-line-clamp": r } : n;
341
+ return /* @__PURE__ */ a(
342
+ u,
343
+ {
344
+ ref: c,
345
+ className: l(
346
+ "ui-heading",
347
+ `ui-heading-h${i}`,
348
+ s && "ui-text-truncate",
349
+ r && "ui-text-clamp",
350
+ e
351
+ ),
352
+ style: d,
353
+ ...o,
354
+ children: t
355
+ }
356
+ );
357
+ }
358
+ ), oe = g(
359
+ ({ className: e, children: t, variant: i = "body", weight: s, muted: r, truncate: n, lines: o, as: c = "p", style: u, ...d }, h) => {
360
+ const m = o ? { ...u, "--ui-line-clamp": o } : u;
361
+ return /* @__PURE__ */ a(
362
+ c,
363
+ {
364
+ ref: h,
365
+ className: l(
366
+ "ui-text",
367
+ `ui-text-${i}`,
368
+ s && `ui-text-weight-${s}`,
369
+ r && "ui-text-muted",
370
+ n && "ui-text-truncate",
371
+ o && "ui-text-clamp",
372
+ e
373
+ ),
374
+ style: m,
375
+ ...d,
376
+ children: t
377
+ }
378
+ );
379
+ }
380
+ ), k = $(null), q = ({ defaultValue: e, value: t, onValueChange: i, children: s, className: r }) => {
381
+ const [n, o] = I(e || ""), c = t !== void 0, u = c ? t : n, d = _(), h = (m) => {
382
+ c || o(m), i == null || i(m);
383
+ };
384
+ return /* @__PURE__ */ a(k.Provider, { value: { value: u, onChange: h, baseId: d }, children: /* @__PURE__ */ a("div", { className: l("ui-tabs", r), children: s }) });
385
+ }, z = ({ className: e, children: t, variant: i = "line", ...s }) => /* @__PURE__ */ a(
386
+ "div",
387
+ {
388
+ role: "tablist",
389
+ className: l("ui-tabs-list", `ui-tabs-list-${i}`, e),
390
+ ...s,
391
+ children: t
392
+ }
393
+ ), D = ({ value: e, className: t, children: i, onClick: s, ...r }) => {
394
+ const n = w(k);
395
+ if (!n) throw new Error("TabsTrigger must be used within Tabs");
396
+ const o = n.value === e, c = `${n.baseId}-trigger-${e}`, u = `${n.baseId}-content-${e}`, d = (h) => {
397
+ n.onChange(e), s == null || s(h);
398
+ };
399
+ return /* @__PURE__ */ a(
400
+ "button",
401
+ {
402
+ type: "button",
403
+ role: "tab",
404
+ "aria-selected": o,
405
+ "aria-controls": u,
406
+ id: c,
407
+ tabIndex: o ? 0 : -1,
408
+ "data-state": o ? "active" : "inactive",
409
+ className: l("ui-tabs-trigger", t),
410
+ onClick: d,
411
+ ...r,
412
+ children: i
413
+ }
414
+ );
415
+ }, G = ({ value: e, className: t, children: i, ...s }) => {
416
+ const r = w(k);
417
+ if (!r) throw new Error("TabsContent must be used within Tabs");
418
+ const n = r.value === e, o = `${r.baseId}-trigger-${e}`, c = `${r.baseId}-content-${e}`;
419
+ return n ? /* @__PURE__ */ a(
420
+ "div",
421
+ {
422
+ role: "tabpanel",
423
+ id: c,
424
+ "aria-labelledby": o,
425
+ tabIndex: 0,
426
+ className: l("ui-tabs-content", t),
427
+ ...s,
428
+ children: i
429
+ }
430
+ ) : null;
431
+ }, ce = Object.assign(q, {
432
+ List: z,
433
+ Trigger: D,
434
+ Content: G
435
+ }), J = y.forwardRef(
436
+ ({ className: e, bordered: t = !0, striped: i, hover: s, size: r = "md", children: n, ...o }, c) => {
437
+ const u = [
438
+ "ui-table",
439
+ t && "ui-table-bordered",
440
+ i && "ui-table-striped",
441
+ s && "ui-table-hover",
442
+ r === "sm" && "ui-table-sm",
443
+ e
444
+ ].filter(Boolean).join(" ");
445
+ return /* @__PURE__ */ a("div", { className: "ui-table-responsive", children: /* @__PURE__ */ a("table", { ref: c, className: u, ...o, children: n }) });
446
+ }
447
+ );
448
+ J.displayName = "Table";
449
+ function Q(e) {
450
+ return e && typeof e == "object" && !Array.isArray(e);
451
+ }
452
+ function U(e) {
453
+ const t = {}, i = (s, r) => {
454
+ Object.keys(s).forEach((n) => {
455
+ const o = s[n], c = `${r}-${n}`;
456
+ Q(o) ? i(o, c) : t[`-${c}`] = o;
457
+ });
458
+ };
459
+ return e.colors && Object.keys(e.colors).forEach((s) => {
460
+ t[`--ui-${s}`] = e.colors[s];
461
+ }), e.components && Object.keys(e.components).forEach((s) => {
462
+ const r = e.components[s];
463
+ r && i(r, `-ui-${s.toLowerCase()}`);
464
+ }), e.spacing && i(e.spacing, "-ui-spacing"), e.radius && i(e.radius, "-ui-radius"), e.shadows && i(e.shadows, "-ui-shadow"), e.typography && i(e.typography, "-ui-typography"), t;
465
+ }
466
+ const le = ({ theme: e, children: t }) => {
467
+ const i = F(() => U(e), [e]);
468
+ return /* @__PURE__ */ a("div", { style: { display: "contents", ...i }, children: t });
469
+ };
470
+ export {
471
+ re as Badge,
472
+ H as Button,
473
+ V as Card,
474
+ se as Checkbox,
475
+ ne as Heading,
476
+ O as Input,
477
+ ee as Modal,
478
+ L as ModalBody,
479
+ R as ModalFooter,
480
+ j as ModalHeader,
481
+ ie as Radio,
482
+ te as Select,
483
+ ae as Switch,
484
+ J as Table,
485
+ ce as Tabs,
486
+ oe as Text,
487
+ le as ThemeProvider
488
+ };
package/dist/theme.d.ts CHANGED
@@ -1,43 +1,6 @@
1
1
  import { default as React } from 'react';
2
+ import { ThemeConfig } from './types';
2
3
 
3
- export interface ThemeConfig {
4
- colors?: {
5
- primary?: string;
6
- secondary?: string;
7
- background?: string;
8
- text?: string;
9
- };
10
- components?: {
11
- Button?: {
12
- radius?: string;
13
- padding?: string;
14
- sizes?: {
15
- sm?: {
16
- radius?: string;
17
- padding?: string;
18
- fontSize?: string;
19
- };
20
- md?: {
21
- radius?: string;
22
- padding?: string;
23
- fontSize?: string;
24
- };
25
- lg?: {
26
- radius?: string;
27
- padding?: string;
28
- fontSize?: string;
29
- };
30
- };
31
- };
32
- Input?: {
33
- radius?: string;
34
- };
35
- Card?: {
36
- radius?: string;
37
- shadow?: string;
38
- };
39
- };
40
- }
41
4
  export declare const ThemeProvider: ({ theme, children }: {
42
5
  theme: ThemeConfig;
43
6
  children: React.ReactNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinloger/dev-ui",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",