@lazar-ui/kit 0.8.0 → 0.9.0

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/css/palettes/indigo.css +23 -23
  3. package/dist/css/palettes/monochrome.css +23 -23
  4. package/dist/css/palettes/purple.css +104 -0
  5. package/dist/css/semantic.css +6 -4
  6. package/dist/dialog.css +1 -1
  7. package/dist/dialog.js +30 -29
  8. package/dist/drop-zone.css +1 -0
  9. package/dist/drop-zone.d.ts +25 -0
  10. package/dist/drop-zone.js +50 -0
  11. package/dist/lazar-ui-provider.d.ts +1 -1
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.9.0] - 2026-07-14
4
+
5
+ ### Features
6
+
7
+ - **DropZone**: add generic drag-and-drop file upload component with `accept` filter, `onFileSelect` callback, drag-over visual states, and click-to-browse via hidden file input. Import: `@lazar-ui/kit/drop-zone`. ([74f8e94](https://github.com/lazar-ui/lazar-ui/commit/74f8e94))
8
+
3
9
  ## [0.8.0] - 2026-07-10
4
10
 
5
11
  ### Features
package/dist/css/palettes/indigo.css CHANGED
@@ -4,18 +4,18 @@
4
4
  --lui-palette-brand-hover: #5558e6;
5
5
  --lui-palette-brand-secondary: #eef2ff;
6
6
 
7
- /* Gray scale */
8
- --lui-palette-gray-25: #fcfcfd;
9
- --lui-palette-gray-50: #f9fafb;
10
- --lui-palette-gray-100: #f2f4f7;
11
- --lui-palette-gray-200: #e4e7ec;
12
- --lui-palette-gray-300: #d0d5dd;
13
- --lui-palette-gray-400: #98a2b3;
14
- --lui-palette-gray-500: #667085;
15
- --lui-palette-gray-600: #475467;
16
- --lui-palette-gray-700: #344054;
17
- --lui-palette-gray-800: #1d2939;
18
- --lui-palette-gray-900: #101828;
7
+ /* Gray scale (OKLCH: H=260.29°, uniform L, chroma ramp from original) */
8
+ --lui-palette-gray-25: #f7f8fa;
9
+ --lui-palette-gray-50: #d7dce3;
10
+ --lui-palette-gray-100: #b8bfcb;
11
+ --lui-palette-gray-200: #9aa4b5;
12
+ --lui-palette-gray-300: #7e899c;
13
+ --lui-palette-gray-400: #636f84;
14
+ --lui-palette-gray-500: #4b566a;
15
+ --lui-palette-gray-600: #333f52;
16
+ --lui-palette-gray-700: #1e2839;
17
+ --lui-palette-gray-800: #0a1323;
18
+ --lui-palette-gray-900: #00030e;
19
19
 
20
20
  /* Colors */
21
21
  --lui-palette-red-500: #d92d20;
@@ -39,18 +39,18 @@
39
39
  --lui-palette-brand-hover: #6366f3;
40
40
  --lui-palette-brand-secondary: #1e1b4b;
41
41
 
42
- /* Gray scale */
43
- --lui-palette-gray-25: #0a0a0b;
44
- --lui-palette-gray-50: #141416;
45
- --lui-palette-gray-100: #1c1c1f;
46
- --lui-palette-gray-200: #26262b;
47
- --lui-palette-gray-300: #3a3a42;
48
- --lui-palette-gray-400: #5c5c66;
49
- --lui-palette-gray-500: #7a7a85;
50
- --lui-palette-gray-600: #9d9da8;
42
+ /* Gray scale (OKLCH: H=285.97°, uniform L, chroma ramp from original) */
43
+ --lui-palette-gray-25: #030304;
44
+ --lui-palette-gray-50: #131315;
45
+ --lui-palette-gray-100: #27272c;
46
+ --lui-palette-gray-200: #3d3d45;
47
+ --lui-palette-gray-300: #55555e;
48
+ --lui-palette-gray-400: #6d6d78;
49
+ --lui-palette-gray-500: #878792;
50
+ --lui-palette-gray-600: #a2a2ad;
51
51
  --lui-palette-gray-700: #bebec9;
52
- --lui-palette-gray-800: #dedee6;
53
- --lui-palette-gray-900: #f2f2f7;
52
+ --lui-palette-gray-800: #dadae3;
53
+ --lui-palette-gray-900: #f8f8fd;
54
54
 
55
55
  /* Colors */
56
56
  --lui-palette-red-500: #f97066;
package/dist/css/palettes/monochrome.css CHANGED
@@ -4,18 +4,18 @@
4
4
  --lui-palette-brand-hover: #292524;
5
5
  --lui-palette-brand-secondary: #f5f5f4;
6
6
 
7
- /* Gray scale (warm) */
8
- --lui-palette-gray-25: #fcfcf9;
9
- --lui-palette-gray-50: #fafaf9;
10
- --lui-palette-gray-100: #f5f5f4;
11
- --lui-palette-gray-200: #e7e5e4;
12
- --lui-palette-gray-300: #d6d3d1;
13
- --lui-palette-gray-400: #a8a29e;
14
- --lui-palette-gray-500: #78716c;
15
- --lui-palette-gray-600: #57534e;
16
- --lui-palette-gray-700: #44403c;
17
- --lui-palette-gray-800: #292524;
18
- --lui-palette-gray-900: #1c1917;
7
+ /* Gray scale (OKLCH: H=61.94°, uniform L, chroma ramp from original) */
8
+ --lui-palette-gray-25: #f9f8f7;
9
+ --lui-palette-gray-50: #dddbd9;
10
+ --lui-palette-gray-100: #c2bebb;
11
+ --lui-palette-gray-200: #a8a29e;
12
+ --lui-palette-gray-300: #8d8782;
13
+ --lui-palette-gray-400: #746d68;
14
+ --lui-palette-gray-500: #5a5550;
15
+ --lui-palette-gray-600: #423d3a;
16
+ --lui-palette-gray-700: #2a2725;
17
+ --lui-palette-gray-800: #151311;
18
+ --lui-palette-gray-900: #040302;
19
19
 
20
20
  /* Colors (same as indigo) */
21
21
  --lui-palette-red-500: #d92d20;
@@ -39,18 +39,18 @@
39
39
  --lui-palette-brand-hover: #e7e5e4;
40
40
  --lui-palette-brand-secondary: #292524;
41
41
 
42
- /* Gray scale (warm, inverted) */
43
- --lui-palette-gray-25: #0c0a09;
44
- --lui-palette-gray-50: #141211;
45
- --lui-palette-gray-100: #1c1917;
46
- --lui-palette-gray-200: #292524;
47
- --lui-palette-gray-300: #44403c;
48
- --lui-palette-gray-400: #57534e;
49
- --lui-palette-gray-500: #78716c;
42
+ /* Gray scale (OKLCH: H=54.87°, uniform L, chroma ramp from original) */
43
+ --lui-palette-gray-25: #040303;
44
+ --lui-palette-gray-50: #151312;
45
+ --lui-palette-gray-100: #2b2725;
46
+ --lui-palette-gray-200: #423d3a;
47
+ --lui-palette-gray-300: #5a5451;
48
+ --lui-palette-gray-400: #746d69;
49
+ --lui-palette-gray-500: #8e8783;
50
50
  --lui-palette-gray-600: #a8a29e;
51
- --lui-palette-gray-700: #d6d3d1;
52
- --lui-palette-gray-800: #e7e5e4;
53
- --lui-palette-gray-900: #f5f5f4;
51
+ --lui-palette-gray-700: #c2bebb;
52
+ --lui-palette-gray-800: #dddbd9;
53
+ --lui-palette-gray-900: #f9f8f7;
54
54
 
55
55
  /* Colors (same as indigo) */
56
56
  --lui-palette-red-500: #f97066;
package/dist/css/palettes/purple.css ADDED
@@ -0,0 +1,104 @@
1
+ :root {
2
+ /* Brand */
3
+ --lui-palette-brand: #8900ff;
4
+ --lui-palette-brand-hover: #ae7cff;
5
+ --lui-palette-brand-secondary: #f3efff;
6
+
7
+ /* Gray scale (OKLCH: H=260.29°→220.6° cyan gradient, uniform L, chroma ramp from original) */
8
+ --lui-palette-gray-25: #f6f8f9;
9
+ --lui-palette-gray-50: #d4dde1;
10
+ --lui-palette-gray-100: #b3c1c8;
11
+ --lui-palette-gray-200: #93a7b2;
12
+ --lui-palette-gray-300: #778c99;
13
+ --lui-palette-gray-400: #5c7282;
14
+ --lui-palette-gray-500: #455869;
15
+ --lui-palette-gray-600: #2f4051;
16
+ --lui-palette-gray-700: #1b2939;
17
+ --lui-palette-gray-800: #091323;
18
+ --lui-palette-gray-900: #00030e;
19
+
20
+ /* Colors */
21
+ --lui-palette-red-500: #f22c2d;
22
+ --lui-palette-red-600: #d92d20;
23
+ --lui-palette-orange-500: #f28f29;
24
+ --lui-palette-orange-600: #b54708;
25
+ --lui-palette-green-500: #11ae5b;
26
+ --lui-palette-green-600: #079455;
27
+ --lui-palette-blue-500: #0089eb;
28
+ --lui-palette-blue-600: #175cd3;
29
+
30
+ /* Neutral */
31
+ --lui-palette-white: #fff;
32
+ --lui-palette-black: #000;
33
+ --lui-palette-overlay: rgb(0, 0, 0 / 0.4);
34
+ }
35
+
36
+ [data-theme="dark"] {
37
+ /* Brand */
38
+ --lui-palette-brand: #a262ff;
39
+ --lui-palette-brand-hover: #8900ff;
40
+ --lui-palette-brand-secondary: #361961;
41
+
42
+ /* Gray scale (OKLCH: H=261.11°→220.6° cyan gradient, uniform L, chroma ramp from original) */
43
+ --lui-palette-gray-25: #000211;
44
+ --lui-palette-gray-50: #061427;
45
+ --lui-palette-gray-100: #1a293b;
46
+ --lui-palette-gray-200: #2e4052;
47
+ --lui-palette-gray-300: #42586b;
48
+ --lui-palette-gray-400: #597285;
49
+ --lui-palette-gray-500: #768c9a;
50
+ --lui-palette-gray-600: #95a6b0;
51
+ --lui-palette-gray-700: #b2c2c9;
52
+ --lui-palette-gray-800: #c5e0ec;
53
+ --lui-palette-gray-900: #f4fafc;
54
+
55
+ /* Colors */
56
+ --lui-palette-red-500: #f97066;
57
+ --lui-palette-red-600: #f22c2d;
58
+ --lui-palette-orange-500: #fdb022;
59
+ --lui-palette-orange-600: #f28f29;
60
+ --lui-palette-green-500: #47cd89;
61
+ --lui-palette-green-600: #11ae5b;
62
+ --lui-palette-blue-500: #53b1fd;
63
+ --lui-palette-blue-600: #0089eb;
64
+
65
+ /* Neutral */
66
+ --lui-palette-white: #0f172c;
67
+ --lui-palette-black: #f8fafc;
68
+ --lui-palette-overlay: rgb(0, 0, 0 / 0.6);
69
+ }
70
+
71
+ [data-theme="contrast"] {
72
+ /* Brand */
73
+ --lui-palette-brand: #6000b3;
74
+ --lui-palette-brand-hover: #4d008f;
75
+ --lui-palette-brand-secondary: #f3efff;
76
+
77
+ /* Gray scale */
78
+ --lui-palette-gray-25: #fff;
79
+ --lui-palette-gray-50: #f0f0f0;
80
+ --lui-palette-gray-100: #e0e0e0;
81
+ --lui-palette-gray-200: #c0c0c0;
82
+ --lui-palette-gray-300: #808080;
83
+ --lui-palette-gray-400: #606060;
84
+ --lui-palette-gray-500: #404040;
85
+ --lui-palette-gray-600: #202020;
86
+ --lui-palette-gray-700: #101010;
87
+ --lui-palette-gray-800: #080808;
88
+ --lui-palette-gray-900: #000;
89
+
90
+ /* Colors */
91
+ --lui-palette-red-500: #c00;
92
+ --lui-palette-red-600: #900;
93
+ --lui-palette-orange-500: #c60;
94
+ --lui-palette-orange-600: #994d00;
95
+ --lui-palette-green-500: #060;
96
+ --lui-palette-green-600: #004d00;
97
+ --lui-palette-blue-500: #04c;
98
+ --lui-palette-blue-600: #039;
99
+
100
+ /* Neutral */
101
+ --lui-palette-white: #fff;
102
+ --lui-palette-black: #000;
103
+ --lui-palette-overlay: rgb(0, 0, 0 / 0.7);
104
+ }
package/dist/css/semantic.css CHANGED
@@ -106,8 +106,10 @@
106
106
  }
107
107
 
108
108
  [data-theme="dark"] {
109
- --lui-color-border-primary: var(--lui-palette-gray-700);
110
- --lui-color-border-secondary: var(--lui-palette-gray-600);
111
- --lui-color-border-disabled: var(--lui-palette-gray-600);
112
- --lui-color-border-disabled-subtle: var(--lui-palette-gray-500);
109
+ --lui-color-border-primary: var(--lui-palette-gray-300);
110
+ --lui-color-border-secondary: var(--lui-palette-gray-200);
111
+ --lui-color-border-disabled: var(--lui-palette-gray-100);
112
+ --lui-color-border-disabled-subtle: var(--lui-palette-gray-50);
113
+ --lui-color-text-on-brand: var(--lui-palette-black);
114
+ --lui-color-text-on-dark: var(--lui-palette-black);
113
115
  }
package/dist/dialog.css CHANGED
@@ -1 +1 @@
1
- ._root_1fxwu_1{display:flex;gap:var(--dialog-actions-gap)}._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--dialog-underlay: var(--lui-color-background-overlay);--dialog-bg: var(--lui-color-background-primary);--dialog-radius: var(--lui-radius-3);--dialog-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--dialog-padding: var(--lui-space-8);--dialog-gap: var(--lui-space-6);--dialog-header-gap: var(--lui-space-6);--dialog-header-min-height: calc(24px + var(--lui-space-6));--dialog-close-color: var(--lui-palette-gray-400);--dialog-close-padding: var(--lui-space-3);--dialog-actions-padding-top: var(--lui-space-10);--dialog-width-xs: 384px;--dialog-width-sm: 480px;--dialog-width-md: 560px;--dialog-width-lg: 640px;--dialog-title-font-size: var(--lui-font-size-md);--dialog-title-weight: var(--lui-font-weight-semibold);--dialog-title-color: var(--lui-color-text-primary);--dialog-title-font-family: var(--lui-font-family-body);--dialog-title-line-height: var(--line-height-md);--dialog-actions-gap: var(--lui-space-4)}._underlay_100vj_25{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--dialog-underlay);inset:0;padding:var(--lui-space-4);position:fixed;z-index:1000}._modal_100vj_34{align-items:center;display:flex;height:100%;justify-content:center}._dialog_100vj_41{background:var(--dialog-bg);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow);display:flex;flex-direction:column;gap:var(--dialog-gap);padding:var(--dialog-padding);position:relative}._dialog_100vj_41._sizeXs_100vj_51{width:var(--dialog-width-xs)}._dialog_100vj_41._sizeSm_100vj_54{width:var(--dialog-width-sm)}._dialog_100vj_41._sizeMd_100vj_57{width:var(--dialog-width-md)}._dialog_100vj_41._sizeLg_100vj_60{width:var(--dialog-width-lg)}._header_100vj_64{align-items:center;display:flex;gap:var(--dialog-header-gap);min-height:var(--dialog-header-min-height)}._close_100vj_71{color:var(--dialog-close-color);padding:var(--dialog-close-padding);position:absolute;right:var(--lui-space-4);top:var(--lui-space-4)}._actions_100vj_79{padding-top:var(--dialog-actions-padding-top)}._root_1ae0y_1{color:var(--dialog-title-color);font-family:var(--dialog-title-font-family);font-size:var(--dialog-title-font-size);font-style:normal;font-weight:var(--dialog-title-weight);line-height:var(--dialog-title-line-height);max-height:100%}
1
+ ._root_1fxwu_1{display:flex;gap:var(--dialog-actions-gap)}._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--dialog-underlay: var(--lui-color-background-overlay);--dialog-bg: var(--lui-color-background-primary);--dialog-border: var(--lui-color-border-primary);--dialog-radius: var(--lui-radius-3);--dialog-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--dialog-padding: var(--lui-space-8);--dialog-gap: var(--lui-space-6);--dialog-header-gap: var(--lui-space-6);--dialog-header-min-height: calc(24px + var(--lui-space-6));--dialog-close-color: var(--lui-palette-gray-400);--dialog-close-padding: var(--lui-space-3);--dialog-actions-padding-top: var(--lui-space-10);--dialog-width-xs: 384px;--dialog-width-sm: 480px;--dialog-width-md: 560px;--dialog-width-lg: 640px;--dialog-title-font-size: var(--lui-font-size-md);--dialog-title-weight: var(--lui-font-weight-semibold);--dialog-title-color: var(--lui-color-text-primary);--dialog-title-font-family: var(--lui-font-family-body);--dialog-title-line-height: var(--line-height-md);--dialog-actions-gap: var(--lui-space-4)}._underlay_19rv4_26{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--dialog-underlay);inset:0;padding:var(--lui-space-4);position:fixed;z-index:1000}._modal_19rv4_35{align-items:center;display:flex;height:100%;justify-content:center}._dialog_19rv4_42{background:var(--dialog-bg);border:1px solid var(--dialog-border);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow);display:flex;flex-direction:column;gap:var(--dialog-gap);max-height:100%;padding:var(--dialog-padding);position:relative}._dialog_19rv4_42._sizeXs_19rv4_54{width:var(--dialog-width-xs)}._dialog_19rv4_42._sizeSm_19rv4_57{width:var(--dialog-width-sm)}._dialog_19rv4_42._sizeMd_19rv4_60{width:var(--dialog-width-md)}._dialog_19rv4_42._sizeLg_19rv4_63{width:var(--dialog-width-lg)}._header_19rv4_67{align-items:center;display:flex;flex-shrink:0;gap:var(--dialog-header-gap);min-height:var(--dialog-header-min-height)}._close_19rv4_75{color:var(--dialog-close-color);padding:var(--dialog-close-padding);position:absolute;right:var(--lui-space-4);top:var(--lui-space-4)}._actions_19rv4_83{flex-shrink:0;padding-top:var(--dialog-actions-padding-top)}._body_19rv4_88{flex:1;min-height:0;overflow-y:auto}._root_1ae0y_1{color:var(--dialog-title-color);font-family:var(--dialog-title-font-family);font-size:var(--dialog-title-font-size);font-style:normal;font-weight:var(--dialog-title-weight);line-height:var(--dialog-title-line-height);max-height:100%}
package/dist/dialog.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsx as s, jsxs as _ } from "react/jsx-runtime";
2
- import { useRef as N, useMemo as A } from "react";
3
- import E from "clsx";
2
+ import { useRef as N, useMemo as E } from "react";
3
+ import b from "clsx";
4
4
  import { useDialog as x, useModalOverlay as M, Overlay as P, UNSAFE_PortalProvider as $ } from "react-aria";
5
- import { useOverlayTriggerState as b } from "react-stately";
5
+ import { useOverlayTriggerState as j } from "react-stately";
6
6
  import { I as R } from "./Icon-DUCBChX2.mjs";
7
7
  import { u as X } from "./useLocale-CJh-krrY.mjs";
8
8
  import { g as k } from "./getComponentSlots-DwAYUFNk.mjs";
@@ -22,7 +22,7 @@ const U = "_root_jagsa_1", V = {
22
22
  return /* @__PURE__ */ s("div", { className: V.root, children: t });
23
23
  };
24
24
  u.displayName = e.CONTENT;
25
- const Y = "Dialog", q = [e.ACTIONS, e.CONTENT, e.TITLE], B = "_underlay_100vj_25", G = "_modal_100vj_34", H = "_dialog_100vj_41", J = "_sizeXs_100vj_51", Q = "_sizeSm_100vj_54", W = "_sizeMd_100vj_57", Z = "_sizeLg_100vj_60", oo = "_header_100vj_64", so = "_close_100vj_71", eo = "_actions_100vj_79", a = {
25
+ const Y = "Dialog", q = [e.ACTIONS, e.CONTENT, e.TITLE], B = "_underlay_19rv4_26", G = "_modal_19rv4_35", H = "_dialog_19rv4_42", J = "_sizeXs_19rv4_54", Q = "_sizeSm_19rv4_57", W = "_sizeMd_19rv4_60", Z = "_sizeLg_19rv4_63", oo = "_header_19rv4_67", so = "_close_19rv4_75", eo = "_actions_19rv4_83", to = "_body_19rv4_88", a = {
26
26
  underlay: B,
27
27
  modal: G,
28
28
  dialog: H,
@@ -32,44 +32,45 @@ const Y = "Dialog", q = [e.ACTIONS, e.CONTENT, e.TITLE], B = "_underlay_100vj_25
32
32
  sizeLg: Z,
33
33
  header: oo,
34
34
  close: so,
35
- actions: eo
36
- }, T = (o) => {
37
- const { children: t, container: p, open: i, modal: C = !0, onOpenChange: f, size: h = "md" } = o, y = X(), r = N(null), n = N(null), { dialogProps: z } = x(o, r), c = b({ isOpen: i, onOpenChange: f }), { modalProps: D, underlayProps: O } = M(
38
- { isDismissable: !C, isKeyboardDismissDisabled: !1 },
35
+ actions: eo,
36
+ body: to
37
+ }, v = (o) => {
38
+ const { children: t, container: y, open: l, modal: p = !0, onOpenChange: C, size: f = "md" } = o, h = X(), i = N(null), n = N(null), { dialogProps: z } = x(o, i), c = j({ isOpen: l, onOpenChange: C }), { modalProps: D, underlayProps: O } = M(
39
+ { isDismissable: !p, isKeyboardDismissDisabled: !1 },
39
40
  c,
40
41
  n
41
42
  ), {
42
43
  [e.ACTIONS]: d,
43
44
  [e.CONTENT]: m,
44
- [e.TITLE]: j
45
- } = A(() => k(t, q), [t]), I = (L) => {
46
- L.preventDefault(), c.close();
45
+ [e.TITLE]: I
46
+ } = E(() => k(t, q), [t]), S = (A) => {
47
+ A.preventDefault(), c.close();
47
48
  };
48
- if (!i)
49
+ if (!l)
49
50
  return null;
50
- const S = E(a.dialog, w("size", h, a));
51
- return /* @__PURE__ */ s(P, { portalContainer: p, children: /* @__PURE__ */ s("div", { className: a.underlay, ...O, children: /* @__PURE__ */ s("div", { className: a.modal, ...D, ref: n, children: /* @__PURE__ */ s($, { getContainer: () => n.current, children: /* @__PURE__ */ _("div", { className: S, ...z, ref: r, children: [
51
+ const L = b(a.dialog, w("size", f, a));
52
+ return /* @__PURE__ */ s(P, { portalContainer: y, children: /* @__PURE__ */ s("div", { className: a.underlay, ...O, children: /* @__PURE__ */ s("div", { className: a.modal, ...D, ref: n, children: /* @__PURE__ */ s($, { getContainer: () => n.current, children: /* @__PURE__ */ _("div", { className: L, ...z, ref: i, children: [
52
53
  /* @__PURE__ */ _("div", { className: a.header, children: [
53
- j,
54
- /* @__PURE__ */ s("button", { "aria-label": y.Dialog.close, className: a.close, onClick: I, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
54
+ I,
55
+ /* @__PURE__ */ s("button", { "aria-label": h.Dialog.close, className: a.close, onClick: S, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
55
56
  ] }),
56
- m && /* @__PURE__ */ s("div", { children: m }),
57
+ m && /* @__PURE__ */ s("div", { className: a.body, children: m }),
57
58
  d && /* @__PURE__ */ s("div", { className: a.actions, children: d })
58
59
  ] }) }) }) }) });
59
60
  };
60
- T.displayName = Y;
61
- const to = "_root_1ae0y_1", ao = {
62
- root: to
63
- }, v = (o) => {
61
+ v.displayName = Y;
62
+ const ao = "_root_1ae0y_1", no = {
63
+ root: ao
64
+ }, T = (o) => {
64
65
  const { children: t } = o;
65
- return /* @__PURE__ */ s("div", { className: ao.root, children: t });
66
+ return /* @__PURE__ */ s("div", { className: no.root, children: t });
66
67
  };
67
- v.displayName = e.TITLE;
68
- const l = T;
69
- l.Actions = g;
70
- l.Content = u;
71
- l.Title = v;
68
+ T.displayName = e.TITLE;
69
+ const r = v;
70
+ r.Actions = g;
71
+ r.Content = u;
72
+ r.Title = T;
72
73
  export {
73
- l as Dialog,
74
- l as default
74
+ r as Dialog,
75
+ r as default
75
76
  };
package/dist/drop-zone.css ADDED
@@ -0,0 +1 @@
1
+ ._root_p2dbb_2{align-items:center;border:2px dashed var(--lui-color-border-primary);border-radius:var(--lui-radius-2);color:var(--lui-color-text-secondary);cursor:pointer;display:flex;flex-direction:column;font-family:var(--lui-font-family-body);font-size:var(--lui-font-size-sm);gap:var(--lui-space-2);justify-content:center;letter-spacing:normal;line-height:var(--line-height-sm);padding:var(--lui-space-6);transition:border-color .15s,background-color .15s}._root_p2dbb_2:hover{border-color:var(--lui-color-border-focus)}._dragOver_p2dbb_25{background-color:var(--lui-color-bg-secondary);border-color:var(--lui-color-border-focus)}._hiddenInput_p2dbb_31{display:none}
package/dist/drop-zone.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { default as default_2 } from 'react';
2
+
3
+ /**
4
+ * DropZone component. Renders a drag-and-drop area for file uploads.
5
+ * Supports both drag-and-drop and click-to-browse via hidden file input.
6
+ *
7
+ * @example
8
+ * ```tsx
9
+ * <DropZone accept=".json" onFileSelect={handleFile}>
10
+ * Drop JSON file here or click to browse
11
+ * </DropZone>
12
+ * ```
13
+ */
14
+ export declare const DropZone: default_2.FC<IDropZoneProps>;
15
+
16
+ export declare interface IDropZoneProps {
17
+ /** Accepted file types (e.g. ".json,application/json"). */
18
+ accept?: string;
19
+ /** Content rendered inside the drop zone. */
20
+ children?: default_2.ReactNode;
21
+ /** Called when a file is selected via drop or click. */
22
+ onFileSelect: (file: File) => void;
23
+ }
24
+
25
+ export { }
package/dist/drop-zone.js ADDED
@@ -0,0 +1,50 @@
1
+ import { jsxs as h, jsx as m } from "react/jsx-runtime";
2
+ import { useState as _, useRef as b, useCallback as n } from "react";
3
+ import I from "clsx";
4
+ import './drop-zone.css';const O = "DropZone", C = "_root_p2dbb_2", x = "_dragOver_p2dbb_25", N = "_hiddenInput_p2dbb_31", s = {
5
+ root: C,
6
+ dragOver: x,
7
+ hiddenInput: N
8
+ }, k = (l) => {
9
+ const { accept: c, children: p, onFileSelect: r } = l, [i, a] = _(!1), o = b(null), d = n((e) => {
10
+ e.preventDefault(), e.stopPropagation(), a(!0);
11
+ }, []), u = n((e) => {
12
+ e.preventDefault(), e.stopPropagation(), a(!1);
13
+ }, []), f = n(
14
+ (e) => {
15
+ e.preventDefault(), e.stopPropagation(), a(!1);
16
+ const t = e.dataTransfer.files[0];
17
+ t && r(t);
18
+ },
19
+ [r]
20
+ ), g = n(() => {
21
+ o.current?.click();
22
+ }, []), v = n(
23
+ (e) => {
24
+ const t = e.target.files?.[0];
25
+ t && (r(t), o.current && (o.current.value = ""));
26
+ },
27
+ [r]
28
+ ), D = I(s.root, { [s.dragOver]: i });
29
+ return /* @__PURE__ */ h(
30
+ "div",
31
+ {
32
+ className: D,
33
+ "data-testid": "drop-zone",
34
+ onClick: g,
35
+ onDragLeave: u,
36
+ onDragOver: d,
37
+ onDrop: f,
38
+ role: "button",
39
+ tabIndex: 0,
40
+ children: [
41
+ p,
42
+ /* @__PURE__ */ m("input", { accept: c, className: s.hiddenInput, onChange: v, ref: o, type: "file" })
43
+ ]
44
+ }
45
+ );
46
+ };
47
+ k.displayName = O;
48
+ export {
49
+ k as DropZone
50
+ };
package/dist/lazar-ui-provider.d.ts CHANGED
@@ -61,7 +61,7 @@ declare interface IProps extends default_2.PropsWithChildren {
61
61
  * @example
62
62
  * ```tsx
63
63
  * import { LazarUiProvider } from '@lazar-ui/kit';
64
- * import '@lazar-ui/kit/css/palettes/indigo.css';
64
+ * import '@lazar-ui/kit/css/palettes/purple.css';
65
65
  * import '@lazar-ui/kit/css/semantic.css';
66
66
  *
67
67
  * function App() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lazar-ui/kit",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "license": "MIT",
5
5
  "description": "A component library for building admin panels, dashboards, and internal tools.",
6
6
  "homepage": "https://lazar-ui.github.io/docs",