@lazar-ui/kit 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.9.0] - 2026-07-14
+
+### Features
+
+- **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))
+
+## [0.8.0] - 2026-07-10
+
+### Features
+
+- **Toast**: add Toast component — notification system with `ToastProvider` and `useToast` hook. Supports auto-dismiss, max visible toasts, multiple positions, success/error/warning/info variants, and custom duration. ([d506b59](https://github.com/lazar-ui/lazar-ui/commit/d506b59))
+
 ## [0.7.0] - 2026-07-06
 
 ### Features

package/dist/Alert-BW15jsDc.mjs

@@ -0,0 +1,20 @@
+import { jsx as i } from "react/jsx-runtime";
+import s from "clsx";
+import { g as c } from "./getVariantClassName-DoCNtwBw.mjs";
+import './Alert.css';const e = "Alert", _ = "_root_1ibdz_9", v = "_variantDanger_1ibdz_18", l = "_variantInfo_1ibdz_25", m = "_variantSuccess_1ibdz_32", d = "_variantWarning_1ibdz_39", a = {
+  root: _,
+  variantDanger: v,
+  variantInfo: l,
+  variantSuccess: m,
+  variantWarning: d
+}, g = (n) => {
+  const { children: r, variant: t = "info" } = n, o = s(
+    a.root,
+    c("variant", t, a)
+  );
+  return /* @__PURE__ */ i("div", { className: o, role: "alert", children: r });
+};
+g.displayName = e;
+export {
+  g as A
+};

package/dist/Flex-DvO3gB0Z.mjs

@@ -0,0 +1,73 @@
+import { jsx as g } from "react/jsx-runtime";
+import x from "clsx";
+import j from "lodash/camelCase";
+import './Flex.css';const S = "Flex", v = "_root_1mp2w_7", C = "_directionRow_1mp2w_14", F = "_directionColumn_1mp2w_18", h = "_directionRowReverse_1mp2w_22", R = "_directionColumnReverse_1mp2w_26", E = "_alignFlexStart_1mp2w_30", B = "_alignCenter_1mp2w_34", k = "_alignFlexEnd_1mp2w_38", A = "_alignStretch_1mp2w_42", W = "_alignBaseline_1mp2w_46", $ = "_justifyFlexStart_1mp2w_50", N = "_justifyCenter_1mp2w_54", D = "_justifyFlexEnd_1mp2w_58", I = "_justifySpaceBetween_1mp2w_62", L = "_justifySpaceAround_1mp2w_66", M = "_justifySpaceEvenly_1mp2w_70", P = "_fullWidth_1mp2w_74", Y = "_wrap_1mp2w_78", b = "_grow_1mp2w_82", q = "_shrink_1mp2w_86", e = {
+  root: v,
+  directionRow: C,
+  directionColumn: F,
+  directionRowReverse: h,
+  directionColumnReverse: R,
+  alignFlexStart: E,
+  alignCenter: B,
+  alignFlexEnd: k,
+  alignStretch: A,
+  alignBaseline: W,
+  justifyFlexStart: $,
+  justifyCenter: N,
+  justifyFlexEnd: D,
+  justifySpaceBetween: I,
+  justifySpaceAround: L,
+  justifySpaceEvenly: M,
+  fullWidth: P,
+  wrap: Y,
+  grow: b,
+  shrink: q
+};
+function i(n, t) {
+  return e[j(`${n}-${t}`)];
+}
+const z = (n) => {
+  const {
+    align: t,
+    as: _ = "div",
+    children: a,
+    direction: c = "row",
+    fullWidth: p,
+    gap: o,
+    grow: u,
+    id: w,
+    justify: l,
+    px: s,
+    py: r,
+    shrink: m,
+    style: d,
+    wrap: f
+  } = n, y = x(
+    e.root,
+    i("direction", c),
+    t != null && i("align", t),
+    l != null && i("justify", l),
+    f && e.wrap,
+    p && e.fullWidth,
+    u && e.grow,
+    m && e.shrink
+  );
+  return /* @__PURE__ */ g(
+    _,
+    {
+      className: y,
+      id: w,
+      style: {
+        "--flex-gap": o != null ? `var(--lui-space-${o})` : void 0,
+        "--flex-px": s != null ? `var(--lui-space-${s})` : void 0,
+        "--flex-py": r != null ? `var(--lui-space-${r})` : void 0,
+        ...d
+      },
+      children: a
+    }
+  );
+};
+z.displayName = S;
+export {
+  z as F
+};

package/dist/Text-DQPy-DZ5.mjs

@@ -0,0 +1,46 @@
+import { jsx as h } from "react/jsx-runtime";
+import j from "react";
+import v from "clsx";
+import { g as w } from "./getDecorationStyle-BCBONKEl.mjs";
+import { g as t } from "./getVariantClassName-DoCNtwBw.mjs";
+import './Text.css';const y = "Text", z = "sm", S = "normal", u = "p", T = "_root_1vl2j_1", p = "_truncate_1vl2j_5", f = "_sizeXs_1vl2j_12", D = "_sizeSm_1vl2j_18", N = "_sizeMd_1vl2j_24", L = "_sizeLg_1vl2j_30", M = "_weightNormal_1vl2j_37", b = "_weightMedium_1vl2j_41", A = "_weightSemibold_1vl2j_45", B = "_weightBold_1vl2j_49", E = "_colorPrimary_1vl2j_54", x = "_colorSecondary_1vl2j_58", P = "_colorTertiary_1vl2j_62", C = "_colorDisabled_1vl2j_66", F = "_colorBrand_1vl2j_70", o = {
+  root: T,
+  truncate: p,
+  sizeXs: f,
+  sizeSm: D,
+  sizeMd: N,
+  sizeLg: L,
+  weightNormal: M,
+  weightMedium: b,
+  weightSemibold: A,
+  weightBold: B,
+  colorPrimary: E,
+  colorSecondary: x,
+  colorTertiary: P,
+  colorDisabled: C,
+  colorBrand: F
+}, I = j.forwardRef((r, s) => {
+  const {
+    as: l = u,
+    children: c,
+    color: e,
+    size: i = z,
+    weight: _ = S,
+    truncate: n = !1,
+    underline: a,
+    strikethrough: m
+  } = r, d = w({ strikethrough: m, underline: a }), g = v(
+    o.root,
+    t("size", i, o),
+    t("weight", _, o),
+    e && t("color", e, o),
+    {
+      [o.truncate]: n
+    }
+  );
+  return /* @__PURE__ */ h(l, { className: g, ref: s, style: d, children: c });
+});
+I.displayName = y;
+export {
+  I as T
+};

package/dist/alert.js

@@ -1,20 +1,4 @@
-import { jsx as i } from "react/jsx-runtime";
-import s from "clsx";
-import { g as c } from "./getVariantClassName-DoCNtwBw.mjs";
-import './alert.css';const e = "Alert", _ = "_root_1ibdz_9", v = "_variantDanger_1ibdz_18", l = "_variantInfo_1ibdz_25", m = "_variantSuccess_1ibdz_32", d = "_variantWarning_1ibdz_39", a = {
-  root: _,
-  variantDanger: v,
-  variantInfo: l,
-  variantSuccess: m,
-  variantWarning: d
-}, g = (n) => {
-  const { children: r, variant: t = "info" } = n, o = s(
-    a.root,
-    c("variant", t, a)
-  );
-  return /* @__PURE__ */ i("div", { className: o, role: "alert", children: r });
-};
-g.displayName = e;
+import { A as o } from "./Alert-BW15jsDc.mjs";
 export {
-  g as Alert
+  o as Alert
 };

package/dist/css/palettes/indigo.css

@@ -4,18 +4,18 @@
   --lui-palette-brand-hover: #5558e6;
   --lui-palette-brand-secondary: #eef2ff;
 
-  /* Gray scale */
-  --lui-palette-gray-25: #fcfcfd;
-  --lui-palette-gray-50: #f9fafb;
-  --lui-palette-gray-100: #f2f4f7;
-  --lui-palette-gray-200: #e4e7ec;
-  --lui-palette-gray-300: #d0d5dd;
-  --lui-palette-gray-400: #98a2b3;
-  --lui-palette-gray-500: #667085;
-  --lui-palette-gray-600: #475467;
-  --lui-palette-gray-700: #344054;
-  --lui-palette-gray-800: #1d2939;
-  --lui-palette-gray-900: #101828;
+  /* Gray scale (OKLCH: H=260.29°, uniform L, chroma ramp from original) */
+  --lui-palette-gray-25: #f7f8fa;
+  --lui-palette-gray-50: #d7dce3;
+  --lui-palette-gray-100: #b8bfcb;
+  --lui-palette-gray-200: #9aa4b5;
+  --lui-palette-gray-300: #7e899c;
+  --lui-palette-gray-400: #636f84;
+  --lui-palette-gray-500: #4b566a;
+  --lui-palette-gray-600: #333f52;
+  --lui-palette-gray-700: #1e2839;
+  --lui-palette-gray-800: #0a1323;
+  --lui-palette-gray-900: #00030e;
 
   /* Colors */
   --lui-palette-red-500: #d92d20;
@@ -39,18 +39,18 @@
   --lui-palette-brand-hover: #6366f3;
   --lui-palette-brand-secondary: #1e1b4b;
 
-  /* Gray scale */
-  --lui-palette-gray-25: #0a0a0b;
-  --lui-palette-gray-50: #141416;
-  --lui-palette-gray-100: #1c1c1f;
-  --lui-palette-gray-200: #26262b;
-  --lui-palette-gray-300: #3a3a42;
-  --lui-palette-gray-400: #5c5c66;
-  --lui-palette-gray-500: #7a7a85;
-  --lui-palette-gray-600: #9d9da8;
+  /* Gray scale (OKLCH: H=285.97°, uniform L, chroma ramp from original) */
+  --lui-palette-gray-25: #030304;
+  --lui-palette-gray-50: #131315;
+  --lui-palette-gray-100: #27272c;
+  --lui-palette-gray-200: #3d3d45;
+  --lui-palette-gray-300: #55555e;
+  --lui-palette-gray-400: #6d6d78;
+  --lui-palette-gray-500: #878792;
+  --lui-palette-gray-600: #a2a2ad;
   --lui-palette-gray-700: #bebec9;
-  --lui-palette-gray-800: #dedee6;
-  --lui-palette-gray-900: #f2f2f7;
+  --lui-palette-gray-800: #dadae3;
+  --lui-palette-gray-900: #f8f8fd;
 
   /* Colors */
   --lui-palette-red-500: #f97066;

package/dist/css/palettes/monochrome.css

@@ -4,18 +4,18 @@
   --lui-palette-brand-hover: #292524;
   --lui-palette-brand-secondary: #f5f5f4;
 
-  /* Gray scale (warm) */
-  --lui-palette-gray-25: #fcfcf9;
-  --lui-palette-gray-50: #fafaf9;
-  --lui-palette-gray-100: #f5f5f4;
-  --lui-palette-gray-200: #e7e5e4;
-  --lui-palette-gray-300: #d6d3d1;
-  --lui-palette-gray-400: #a8a29e;
-  --lui-palette-gray-500: #78716c;
-  --lui-palette-gray-600: #57534e;
-  --lui-palette-gray-700: #44403c;
-  --lui-palette-gray-800: #292524;
-  --lui-palette-gray-900: #1c1917;
+  /* Gray scale (OKLCH: H=61.94°, uniform L, chroma ramp from original) */
+  --lui-palette-gray-25: #f9f8f7;
+  --lui-palette-gray-50: #dddbd9;
+  --lui-palette-gray-100: #c2bebb;
+  --lui-palette-gray-200: #a8a29e;
+  --lui-palette-gray-300: #8d8782;
+  --lui-palette-gray-400: #746d68;
+  --lui-palette-gray-500: #5a5550;
+  --lui-palette-gray-600: #423d3a;
+  --lui-palette-gray-700: #2a2725;
+  --lui-palette-gray-800: #151311;
+  --lui-palette-gray-900: #040302;
 
   /* Colors (same as indigo) */
   --lui-palette-red-500: #d92d20;
@@ -39,18 +39,18 @@
   --lui-palette-brand-hover: #e7e5e4;
   --lui-palette-brand-secondary: #292524;
 
-  /* Gray scale (warm, inverted) */
-  --lui-palette-gray-25: #0c0a09;
-  --lui-palette-gray-50: #141211;
-  --lui-palette-gray-100: #1c1917;
-  --lui-palette-gray-200: #292524;
-  --lui-palette-gray-300: #44403c;
-  --lui-palette-gray-400: #57534e;
-  --lui-palette-gray-500: #78716c;
+  /* Gray scale (OKLCH: H=54.87°, uniform L, chroma ramp from original) */
+  --lui-palette-gray-25: #040303;
+  --lui-palette-gray-50: #151312;
+  --lui-palette-gray-100: #2b2725;
+  --lui-palette-gray-200: #423d3a;
+  --lui-palette-gray-300: #5a5451;
+  --lui-palette-gray-400: #746d69;
+  --lui-palette-gray-500: #8e8783;
   --lui-palette-gray-600: #a8a29e;
-  --lui-palette-gray-700: #d6d3d1;
-  --lui-palette-gray-800: #e7e5e4;
-  --lui-palette-gray-900: #f5f5f4;
+  --lui-palette-gray-700: #c2bebb;
+  --lui-palette-gray-800: #dddbd9;
+  --lui-palette-gray-900: #f9f8f7;
 
   /* Colors (same as indigo) */
   --lui-palette-red-500: #f97066;

package/dist/css/palettes/purple.css

@@ -0,0 +1,104 @@
+:root {
+  /* Brand */
+  --lui-palette-brand: #8900ff;
+  --lui-palette-brand-hover: #ae7cff;
+  --lui-palette-brand-secondary: #f3efff;
+
+  /* Gray scale (OKLCH: H=260.29°→220.6° cyan gradient, uniform L, chroma ramp from original) */
+  --lui-palette-gray-25: #f6f8f9;
+  --lui-palette-gray-50: #d4dde1;
+  --lui-palette-gray-100: #b3c1c8;
+  --lui-palette-gray-200: #93a7b2;
+  --lui-palette-gray-300: #778c99;
+  --lui-palette-gray-400: #5c7282;
+  --lui-palette-gray-500: #455869;
+  --lui-palette-gray-600: #2f4051;
+  --lui-palette-gray-700: #1b2939;
+  --lui-palette-gray-800: #091323;
+  --lui-palette-gray-900: #00030e;
+
+  /* Colors */
+  --lui-palette-red-500: #f22c2d;
+  --lui-palette-red-600: #d92d20;
+  --lui-palette-orange-500: #f28f29;
+  --lui-palette-orange-600: #b54708;
+  --lui-palette-green-500: #11ae5b;
+  --lui-palette-green-600: #079455;
+  --lui-palette-blue-500: #0089eb;
+  --lui-palette-blue-600: #175cd3;
+
+  /* Neutral */
+  --lui-palette-white: #fff;
+  --lui-palette-black: #000;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.4);
+}
+
+[data-theme="dark"] {
+  /* Brand */
+  --lui-palette-brand: #a262ff;
+  --lui-palette-brand-hover: #8900ff;
+  --lui-palette-brand-secondary: #361961;
+
+  /* Gray scale (OKLCH: H=261.11°→220.6° cyan gradient, uniform L, chroma ramp from original) */
+  --lui-palette-gray-25: #000211;
+  --lui-palette-gray-50: #061427;
+  --lui-palette-gray-100: #1a293b;
+  --lui-palette-gray-200: #2e4052;
+  --lui-palette-gray-300: #42586b;
+  --lui-palette-gray-400: #597285;
+  --lui-palette-gray-500: #768c9a;
+  --lui-palette-gray-600: #95a6b0;
+  --lui-palette-gray-700: #b2c2c9;
+  --lui-palette-gray-800: #c5e0ec;
+  --lui-palette-gray-900: #f4fafc;
+
+  /* Colors */
+  --lui-palette-red-500: #f97066;
+  --lui-palette-red-600: #f22c2d;
+  --lui-palette-orange-500: #fdb022;
+  --lui-palette-orange-600: #f28f29;
+  --lui-palette-green-500: #47cd89;
+  --lui-palette-green-600: #11ae5b;
+  --lui-palette-blue-500: #53b1fd;
+  --lui-palette-blue-600: #0089eb;
+
+  /* Neutral */
+  --lui-palette-white: #0f172c;
+  --lui-palette-black: #f8fafc;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.6);
+}
+
+[data-theme="contrast"] {
+  /* Brand */
+  --lui-palette-brand: #6000b3;
+  --lui-palette-brand-hover: #4d008f;
+  --lui-palette-brand-secondary: #f3efff;
+
+  /* Gray scale */
+  --lui-palette-gray-25: #fff;
+  --lui-palette-gray-50: #f0f0f0;
+  --lui-palette-gray-100: #e0e0e0;
+  --lui-palette-gray-200: #c0c0c0;
+  --lui-palette-gray-300: #808080;
+  --lui-palette-gray-400: #606060;
+  --lui-palette-gray-500: #404040;
+  --lui-palette-gray-600: #202020;
+  --lui-palette-gray-700: #101010;
+  --lui-palette-gray-800: #080808;
+  --lui-palette-gray-900: #000;
+
+  /* Colors */
+  --lui-palette-red-500: #c00;
+  --lui-palette-red-600: #900;
+  --lui-palette-orange-500: #c60;
+  --lui-palette-orange-600: #994d00;
+  --lui-palette-green-500: #060;
+  --lui-palette-green-600: #004d00;
+  --lui-palette-blue-500: #04c;
+  --lui-palette-blue-600: #039;
+
+  /* Neutral */
+  --lui-palette-white: #fff;
+  --lui-palette-black: #000;
+  --lui-palette-overlay: rgb(0, 0, 0 / 0.7);
+}

package/dist/css/semantic.css

@@ -106,8 +106,10 @@
 }
 
 [data-theme="dark"] {
-  --lui-color-border-primary: var(--lui-palette-gray-700);
-  --lui-color-border-secondary: var(--lui-palette-gray-600);
-  --lui-color-border-disabled: var(--lui-palette-gray-600);
-  --lui-color-border-disabled-subtle: var(--lui-palette-gray-500);
+  --lui-color-border-primary: var(--lui-palette-gray-300);
+  --lui-color-border-secondary: var(--lui-palette-gray-200);
+  --lui-color-border-disabled: var(--lui-palette-gray-100);
+  --lui-color-border-disabled-subtle: var(--lui-palette-gray-50);
+  --lui-color-text-on-brand: var(--lui-palette-black);
+  --lui-color-text-on-dark: var(--lui-palette-black);
 }

package/dist/dialog.css

@@ -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%}
+._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

@@ -1,8 +1,8 @@
 import { jsx as s, jsxs as _ } from "react/jsx-runtime";
-import { useRef as N, useMemo as A } from "react";
-import E from "clsx";
+import { useRef as N, useMemo as E } from "react";
+import b from "clsx";
 import { useDialog as x, useModalOverlay as M, Overlay as P, UNSAFE_PortalProvider as $ } from "react-aria";
-import { useOverlayTriggerState as b } from "react-stately";
+import { useOverlayTriggerState as j } from "react-stately";
 import { I as R } from "./Icon-DUCBChX2.mjs";
 import { u as X } from "./useLocale-CJh-krrY.mjs";
 import { g as k } from "./getComponentSlots-DwAYUFNk.mjs";
@@ -22,7 +22,7 @@ const U = "_root_jagsa_1", V = {
   return /* @__PURE__ */ s("div", { className: V.root, children: t });
 };
 u.displayName = e.CONTENT;
-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 = {
+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 = {
   underlay: B,
   modal: G,
   dialog: H,
@@ -32,44 +32,45 @@ const Y = "Dialog", q = [e.ACTIONS, e.CONTENT, e.TITLE], B = "_underlay_100vj_25
   sizeLg: Z,
   header: oo,
   close: so,
-  actions: eo
-}, T = (o) => {
-  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(
-    { isDismissable: !C, isKeyboardDismissDisabled: !1 },
+  actions: eo,
+  body: to
+}, v = (o) => {
+  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(
+    { isDismissable: !p, isKeyboardDismissDisabled: !1 },
     c,
     n
   ), {
     [e.ACTIONS]: d,
     [e.CONTENT]: m,
-    [e.TITLE]: j
-  } = A(() => k(t, q), [t]), I = (L) => {
-    L.preventDefault(), c.close();
+    [e.TITLE]: I
+  } = E(() => k(t, q), [t]), S = (A) => {
+    A.preventDefault(), c.close();
   };
-  if (!i)
+  if (!l)
     return null;
-  const S = E(a.dialog, w("size", h, a));
-  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: [
+  const L = b(a.dialog, w("size", f, a));
+  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: [
     /* @__PURE__ */ _("div", { className: a.header, children: [
-      j,
-      /* @__PURE__ */ s("button", { "aria-label": y.Dialog.close, className: a.close, onClick: I, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
+      I,
+      /* @__PURE__ */ s("button", { "aria-label": h.Dialog.close, className: a.close, onClick: S, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
     ] }),
-    m && /* @__PURE__ */ s("div", { children: m }),
+    m && /* @__PURE__ */ s("div", { className: a.body, children: m }),
     d && /* @__PURE__ */ s("div", { className: a.actions, children: d })
   ] }) }) }) }) });
 };
-T.displayName = Y;
-const to = "_root_1ae0y_1", ao = {
-  root: to
-}, v = (o) => {
+v.displayName = Y;
+const ao = "_root_1ae0y_1", no = {
+  root: ao
+}, T = (o) => {
   const { children: t } = o;
-  return /* @__PURE__ */ s("div", { className: ao.root, children: t });
+  return /* @__PURE__ */ s("div", { className: no.root, children: t });
 };
-v.displayName = e.TITLE;
-const l = T;
-l.Actions = g;
-l.Content = u;
-l.Title = v;
+T.displayName = e.TITLE;
+const r = v;
+r.Actions = g;
+r.Content = u;
+r.Title = T;
 export {
-  l as Dialog,
-  l as default
+  r as Dialog,
+  r as default
 };

package/dist/drop-zone.css

@@ -0,0 +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

@@ -0,0 +1,25 @@
+import { default as default_2 } from 'react';
+
+/**
+ * DropZone component. Renders a drag-and-drop area for file uploads.
+ * Supports both drag-and-drop and click-to-browse via hidden file input.
+ *
+ * @example
+ * ```tsx
+ * <DropZone accept=".json" onFileSelect={handleFile}>
+ *   Drop JSON file here or click to browse
+ * </DropZone>
+ * ```
+ */
+export declare const DropZone: default_2.FC<IDropZoneProps>;
+
+export declare interface IDropZoneProps {
+    /** Accepted file types (e.g. ".json,application/json"). */
+    accept?: string;
+    /** Content rendered inside the drop zone. */
+    children?: default_2.ReactNode;
+    /** Called when a file is selected via drop or click. */
+    onFileSelect: (file: File) => void;
+}
+
+export { }

package/dist/drop-zone.js

@@ -0,0 +1,50 @@
+import { jsxs as h, jsx as m } from "react/jsx-runtime";
+import { useState as _, useRef as b, useCallback as n } from "react";
+import I from "clsx";
+import './drop-zone.css';const O = "DropZone", C = "_root_p2dbb_2", x = "_dragOver_p2dbb_25", N = "_hiddenInput_p2dbb_31", s = {
+  root: C,
+  dragOver: x,
+  hiddenInput: N
+}, k = (l) => {
+  const { accept: c, children: p, onFileSelect: r } = l, [i, a] = _(!1), o = b(null), d = n((e) => {
+    e.preventDefault(), e.stopPropagation(), a(!0);
+  }, []), u = n((e) => {
+    e.preventDefault(), e.stopPropagation(), a(!1);
+  }, []), f = n(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), a(!1);
+      const t = e.dataTransfer.files[0];
+      t && r(t);
+    },
+    [r]
+  ), g = n(() => {
+    o.current?.click();
+  }, []), v = n(
+    (e) => {
+      const t = e.target.files?.[0];
+      t && (r(t), o.current && (o.current.value = ""));
+    },
+    [r]
+  ), D = I(s.root, { [s.dragOver]: i });
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: D,
+      "data-testid": "drop-zone",
+      onClick: g,
+      onDragLeave: u,
+      onDragOver: d,
+      onDrop: f,
+      role: "button",
+      tabIndex: 0,
+      children: [
+        p,
+        /* @__PURE__ */ m("input", { accept: c, className: s.hiddenInput, onChange: v, ref: o, type: "file" })
+      ]
+    }
+  );
+};
+k.displayName = O;
+export {
+  k as DropZone
+};

package/dist/flex.js

@@ -1,73 +1,4 @@
-import { jsx as g } from "react/jsx-runtime";
-import x from "clsx";
-import j from "lodash/camelCase";
-import './flex.css';const S = "Flex", v = "_root_1mp2w_7", C = "_directionRow_1mp2w_14", F = "_directionColumn_1mp2w_18", h = "_directionRowReverse_1mp2w_22", R = "_directionColumnReverse_1mp2w_26", E = "_alignFlexStart_1mp2w_30", B = "_alignCenter_1mp2w_34", k = "_alignFlexEnd_1mp2w_38", A = "_alignStretch_1mp2w_42", W = "_alignBaseline_1mp2w_46", $ = "_justifyFlexStart_1mp2w_50", N = "_justifyCenter_1mp2w_54", D = "_justifyFlexEnd_1mp2w_58", I = "_justifySpaceBetween_1mp2w_62", L = "_justifySpaceAround_1mp2w_66", M = "_justifySpaceEvenly_1mp2w_70", P = "_fullWidth_1mp2w_74", Y = "_wrap_1mp2w_78", b = "_grow_1mp2w_82", q = "_shrink_1mp2w_86", e = {
-  root: v,
-  directionRow: C,
-  directionColumn: F,
-  directionRowReverse: h,
-  directionColumnReverse: R,
-  alignFlexStart: E,
-  alignCenter: B,
-  alignFlexEnd: k,
-  alignStretch: A,
-  alignBaseline: W,
-  justifyFlexStart: $,
-  justifyCenter: N,
-  justifyFlexEnd: D,
-  justifySpaceBetween: I,
-  justifySpaceAround: L,
-  justifySpaceEvenly: M,
-  fullWidth: P,
-  wrap: Y,
-  grow: b,
-  shrink: q
-};
-function i(n, t) {
-  return e[j(`${n}-${t}`)];
-}
-const z = (n) => {
-  const {
-    align: t,
-    as: _ = "div",
-    children: c,
-    direction: a = "row",
-    fullWidth: p,
-    gap: o,
-    grow: u,
-    id: w,
-    justify: l,
-    px: s,
-    py: r,
-    shrink: m,
-    style: d,
-    wrap: f
-  } = n, y = x(
-    e.root,
-    i("direction", a),
-    t != null && i("align", t),
-    l != null && i("justify", l),
-    f && e.wrap,
-    p && e.fullWidth,
-    u && e.grow,
-    m && e.shrink
-  );
-  return /* @__PURE__ */ g(
-    _,
-    {
-      className: y,
-      id: w,
-      style: {
-        "--flex-gap": o != null ? `var(--lui-space-${o})` : void 0,
-        "--flex-px": s != null ? `var(--lui-space-${s})` : void 0,
-        "--flex-py": r != null ? `var(--lui-space-${r})` : void 0,
-        ...d
-      },
-      children: c
-    }
-  );
-};
-z.displayName = S;
+import { F as r } from "./Flex-DvO3gB0Z.mjs";
 export {
-  z as Flex
+  r as Flex
 };

package/dist/lazar-ui-provider.d.ts

@@ -61,7 +61,7 @@ declare interface IProps extends default_2.PropsWithChildren {
  * @example
  * ```tsx
  * import { LazarUiProvider } from '@lazar-ui/kit';
- * import '@lazar-ui/kit/css/palettes/indigo.css';
+ * import '@lazar-ui/kit/css/palettes/purple.css';
  * import '@lazar-ui/kit/css/semantic.css';
  *
  * function App() {

package/dist/text.js

@@ -1,50 +1,8 @@
-import { jsx as v } from "react/jsx-runtime";
-import y from "react";
-import j from "clsx";
-import { g as D } from "./getDecorationStyle-BCBONKEl.mjs";
-import { g as t } from "./getVariantClassName-DoCNtwBw.mjs";
-import './text.css';const u = "Text", w = "sm", S = "normal", h = "p", M = "_root_1vl2j_1", A = "_truncate_1vl2j_5", L = "_sizeXs_1vl2j_12", z = "_sizeSm_1vl2j_18", N = "_sizeMd_1vl2j_24", b = "_sizeLg_1vl2j_30", p = "_weightNormal_1vl2j_37", B = "_weightMedium_1vl2j_41", R = "_weightSemibold_1vl2j_45", f = "_weightBold_1vl2j_49", I = "_colorPrimary_1vl2j_54", P = "_colorSecondary_1vl2j_58", O = "_colorTertiary_1vl2j_62", U = "_colorDisabled_1vl2j_66", X = "_colorBrand_1vl2j_70", r = {
-  root: M,
-  truncate: A,
-  sizeXs: L,
-  sizeSm: z,
-  sizeMd: N,
-  sizeLg: b,
-  weightNormal: p,
-  weightMedium: B,
-  weightSemibold: R,
-  weightBold: f,
-  colorPrimary: I,
-  colorSecondary: P,
-  colorTertiary: O,
-  colorDisabled: U,
-  colorBrand: X
-}, Y = y.forwardRef((o, e) => {
-  const {
-    as: l = h,
-    children: c,
-    color: s,
-    size: i = w,
-    weight: a = S,
-    truncate: n = !1,
-    underline: _,
-    strikethrough: m
-  } = o, d = D({ strikethrough: m, underline: _ }), g = j(
-    r.root,
-    t("size", i, r),
-    t("weight", a, r),
-    s && t("color", s, r),
-    {
-      [r.truncate]: n
-    }
-  );
-  return /* @__PURE__ */ v(l, { className: g, ref: e, style: d, children: c });
-});
-Y.displayName = u;
-var F = /* @__PURE__ */ ((o) => (o.XS = "xs", o.SM = "sm", o.MD = "md", o.LG = "lg", o))(F || {}), G = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.TERTIARY = "tertiary", o.DISABLED = "disabled", o.BRAND = "brand", o))(G || {}), T = /* @__PURE__ */ ((o) => (o.NORMAL = "normal", o.MEDIUM = "medium", o.SEMIBOLD = "semibold", o.BOLD = "bold", o))(T || {});
+import { T as R } from "./Text-DQPy-DZ5.mjs";
+var a = /* @__PURE__ */ ((r) => (r.XS = "xs", r.SM = "sm", r.MD = "md", r.LG = "lg", r))(a || {}), d = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.SECONDARY = "secondary", r.TERTIARY = "tertiary", r.DISABLED = "disabled", r.BRAND = "brand", r))(d || {}), m = /* @__PURE__ */ ((r) => (r.NORMAL = "normal", r.MEDIUM = "medium", r.SEMIBOLD = "semibold", r.BOLD = "bold", r))(m || {});
 export {
-  G as ETextColor,
-  F as ETextSize,
-  T as ETextWeight,
-  Y as Text
+  d as ETextColor,
+  a as ETextSize,
+  m as ETextWeight,
+  R as Text
 };

package/dist/toast.css

@@ -0,0 +1 @@
+:root{--toast-gap: var(--lui-space-2);--toast-max-width: 400px;--toast-offset: var(--lui-space-4);--toast-z-index: 9999}._root_1eefh_8{display:flex;flex-direction:column;gap:var(--toast-gap);max-width:var(--toast-max-width);position:fixed;z-index:var(--toast-z-index)}._positionBottomLeft_1eefh_17{bottom:var(--toast-offset);left:var(--toast-offset)}._positionBottomRight_1eefh_22{bottom:var(--toast-offset);right:var(--toast-offset)}._positionTopLeft_1eefh_27{left:var(--toast-offset);top:var(--toast-offset)}._positionTopRight_1eefh_32{right:var(--toast-offset);top:var(--toast-offset)}

package/dist/toast.d.ts

@@ -0,0 +1,86 @@
+import { default as default_2 } from 'react';
+
+declare enum EToastPosition {
+    BOTTOM_LEFT = "bottomLeft",
+    BOTTOM_RIGHT = "bottomRight",
+    TOP_LEFT = "topLeft",
+    TOP_RIGHT = "topRight"
+}
+
+declare enum EToastType {
+    ERROR = "error",
+    INFO = "info",
+    SUCCESS = "success"
+}
+
+export declare interface IToast {
+    id: string;
+    message: string;
+    type: TToastType;
+}
+
+export declare interface IToastContext {
+    addToast: (message: string, type: TToastType) => void;
+}
+
+export declare interface IToastProps extends default_2.PropsWithChildren {
+    /** Auto-dismiss timeout in milliseconds. Set to 0 to disable. Default: 4000. */
+    autoDismissMs?: number;
+    /** Maximum number of visible toasts. Oldest are removed first. */
+    maxToasts?: number;
+    /** Position of the toast container on the screen. Default: 'bottomRight'. */
+    position?: TToastPosition;
+}
+
+/**
+ * ToastProvider — context provider and fixed-position container for toast notifications.
+ *
+ * Wraps the application and renders a container that displays toast messages
+ * triggered via the `useToast` hook. Supports configurable position, auto-dismiss
+ * timeout, and maximum number of visible toasts.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider position="bottomRight" autoDismissMs={4000}>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disable auto-dismiss and limit to 3 toasts
+ * <ToastProvider autoDismissMs={0} maxToasts={3}>
+ *   <App />
+ * </ToastProvider>
+ * ```
+ */
+export declare const ToastProvider: default_2.FC<IToastProps>;
+
+export declare type TToastPosition = `${EToastPosition.BOTTOM_LEFT | EToastPosition.BOTTOM_RIGHT | EToastPosition.TOP_LEFT | EToastPosition.TOP_RIGHT}`;
+
+export declare type TToastType = `${EToastType.ERROR | EToastType.INFO | EToastType.SUCCESS}`;
+
+/**
+ * Hook to show toast notifications.
+ *
+ * Must be used within a `ToastProvider`. Returns an object with a `toast` property
+ * containing `success`, `error`, and `info` methods.
+ *
+ * @example
+ * ```tsx
+ * const { toast } = useToast();
+ *
+ * toast.success('Saved successfully');
+ * toast.error('Operation failed');
+ * toast.info('Processing...');
+ * ```
+ */
+export declare function useToast(): {
+    toast: {
+        error: (message: string) => void;
+        info: (message: string) => void;
+        success: (message: string) => void;
+    };
+};
+
+export { }

package/dist/toast.js

@@ -0,0 +1,86 @@
+import { jsxs as h, jsx as m } from "react/jsx-runtime";
+import { createContext as v, useState as C, useRef as E, useCallback as p, useEffect as N, useContext as B, useMemo as M } from "react";
+import y from "clsx";
+import { A as P } from "./Alert-BW15jsDc.mjs";
+import { B as b } from "./Button-BN85EtaZ.mjs";
+import { F as w } from "./Flex-DvO3gB0Z.mjs";
+import { T as F } from "./Text-DQPy-DZ5.mjs";
+import { g as O } from "./getVariantClassName-DoCNtwBw.mjs";
+import './toast.css';const U = 4e3, j = "bottomRight", g = "Toast", k = 36, z = 11, V = 2, X = {
+  error: "danger",
+  info: "info",
+  success: "success"
+}, Y = "_root_1eefh_8", $ = "_positionBottomLeft_1eefh_17", q = "_positionBottomRight_1eefh_22", G = "_positionTopLeft_1eefh_27", H = "_positionTopRight_1eefh_32", _ = {
+  root: Y,
+  positionBottomLeft: $,
+  positionBottomRight: q,
+  positionTopLeft: G,
+  positionTopRight: H
+}, x = v(null), I = ({ toast: e, onDismiss: o }) => {
+  const l = X[e.type], t = p(() => {
+    o(e.id);
+  }, [o, e.id]);
+  return /* @__PURE__ */ m(P, { variant: l, children: /* @__PURE__ */ h(w, { align: "center", gap: 3, children: [
+    /* @__PURE__ */ m(F, { as: "span", color: "primary", size: "sm", children: e.message }),
+    /* @__PURE__ */ m(b, { "aria-label": "Dismiss", icon: "x", mode: "text", size: "sm", variant: "secondary", onClick: t })
+  ] }) });
+};
+I.displayName = `${g}.Item`;
+const J = (e) => {
+  const { autoDismissMs: o = U, children: l, maxToasts: t, position: A = j } = e, [D, u] = C([]), i = E(/* @__PURE__ */ new Map()), f = p((s) => {
+    const r = i.current.get(s);
+    r && (clearTimeout(r), i.current.delete(s)), u((n) => n.filter((c) => c.id !== s));
+  }, []), R = p(
+    (s, r) => {
+      const n = Math.random().toString(k).slice(V, z);
+      if (u((c) => {
+        const a = [...c, { id: n, message: s, type: r }];
+        if (t != null && a.length > t) {
+          const L = a.slice(0, a.length - t);
+          for (const T of L) {
+            const d = i.current.get(T.id);
+            d && (clearTimeout(d), i.current.delete(T.id));
+          }
+          return a.slice(-t);
+        }
+        return a;
+      }), o > 0) {
+        const c = setTimeout(() => {
+          f(n);
+        }, o);
+        i.current.set(n, c);
+      }
+    },
+    [o, t, f]
+  );
+  N(() => {
+    const s = i.current;
+    return () => {
+      s.forEach((r) => clearTimeout(r)), s.clear();
+    };
+  }, []);
+  const S = y(_.root, O("position", A, _));
+  return /* @__PURE__ */ h(x.Provider, { value: { addToast: R }, children: [
+    l,
+    /* @__PURE__ */ m("div", { className: S, children: D.map((s) => /* @__PURE__ */ m(I, { onDismiss: f, toast: s }, s.id)) })
+  ] });
+};
+J.displayName = g;
+function it() {
+  const e = B(x);
+  if (!e)
+    throw new Error("useToast must be used within a ToastProvider");
+  const { addToast: o } = e;
+  return { toast: M(
+    () => ({
+      error: (t) => o(t, "error"),
+      info: (t) => o(t, "info"),
+      success: (t) => o(t, "success")
+    }),
+    [o]
+  ) };
+}
+export {
+  J as ToastProvider,
+  it as useToast
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazar-ui/kit",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "MIT",
   "description": "A component library for building admin panels, dashboards, and internal tools.",
   "homepage": "https://lazar-ui.github.io/docs",