@lazar-ui/kit 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [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/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/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.8.0",
   "license": "MIT",
   "description": "A component library for building admin panels, dashboards, and internal tools.",
   "homepage": "https://lazar-ui.github.io/docs",