@lazar-ui/kit 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [0.5.1] - 2026-06-09
+
+### Bug Fixes
+
+- **Build**: fix lucide-react icons leaking into dist — externalize deep imports (`lucide-react/dynamic`) plus all peerDeps in rollup config ([c64e4f2](https://github.com/lazar-ui/lazar-ui/commit/c64e4f2))
+
+## [0.5.0] - 2026-06-08
+
+### Features
+
+- **Chip**: add new Chip component with multiple variants, sizes, and deletable state
+- **Input.Date**: add Date variant for Input component with `inputMode="numeric"` and date validation
+- **Table.ActiveFilters**: add ActiveFilters sub-component for displaying and clearing active column filters
+- **Table.Toolbar**: add Toolbar sub-component for Table with action slots
+- **i18n**: restructure locale system for better extensibility and component-scoped translations
+
+### Bug Fixes
+
+- **CI**: fix vitest processes hang and excessive RAM consumption (4GB) by setting `NODE_OPTIONS="--max-old-space-size=8192"` in CI config
+
+### Chores
+
+- **CI**: run TSM once instead of per package to speed up type declaration generation
+- **styles**: apply prettier fixes across the codebase
+
 ## [0.4.0] - 2026-06-05
 
 ### ⚠ BREAKING CHANGES

package/dist/Button-BYnrV9av.mjs

@@ -0,0 +1,52 @@
+import { jsxs as z, jsx as s } from "react/jsx-runtime";
+import v from "clsx";
+import { I as y } from "./Icon-DsTlU3j3.mjs";
+import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
+import './Button.css';const g = "Button", h = "_root_1lm86_21", x = "_modeFilled_1lm86_32", S = "_variantPrimary_1lm86_32", b = "_pressed_1lm86_36", N = "_variantSecondary_1lm86_42", W = "_variantDanger_1lm86_52", C = "_disabled_1lm86_62", D = "_modeOutlined_1lm86_69", L = "_modeText_1lm86_94", M = "_fullWidth_1lm86_118", P = "_sizeSm_1lm86_121", B = "_sizeMd_1lm86_128", F = "_sizeLg_1lm86_135", I = "_icon_1lm86_143", e = {
+  root: h,
+  modeFilled: x,
+  variantPrimary: S,
+  pressed: b,
+  variantSecondary: N,
+  variantDanger: W,
+  disabled: C,
+  modeOutlined: D,
+  modeText: L,
+  fullWidth: M,
+  sizeSm: P,
+  sizeMd: B,
+  sizeLg: F,
+  icon: I
+}, O = (a) => {
+  const {
+    children: t,
+    disabled: i = !1,
+    fullWidth: l = !1,
+    icon: n,
+    mode: r = "filled",
+    onClick: d,
+    size: m = "md",
+    variant: _ = "primary",
+    pressed: c,
+    as: p = "button",
+    ...f
+  } = a, u = v(
+    e.root,
+    o("size", m, e),
+    o("variant", _, e),
+    o("mode", r, e),
+    {
+      [e.fullWidth]: l,
+      [e.pressed]: c,
+      [e.disabled]: i
+    }
+  );
+  return /* @__PURE__ */ z(p, { className: u, disabled: i, onClick: d, ...f, children: [
+    n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(y, { name: n, size: 16 }) }),
+    t && /* @__PURE__ */ s("span", { children: t })
+  ] });
+};
+O.displayName = g;
+export {
+  O as B
+};

package/dist/Chip-DLfYGIQG.mjs

@@ -0,0 +1,51 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import _ from "clsx";
+import { I as p } from "./Icon-DsTlU3j3.mjs";
+import { u as g } from "./useLocale-CJh-krrY.mjs";
+import "react";
+import { g as u } from "./getVariantClassName-D7Nhpuec.mjs";
+import './Chip.css';const b = "Chip", h = "_root_1nzgz_6", f = "_disabled_1nzgz_20", C = "_content_1nzgz_25", N = "_deleteButton_1nzgz_30", x = "_sizeLg_1nzgz_56", y = "_sizeMd_1nzgz_62", L = "_sizeSm_1nzgz_68", e = {
+  root: h,
+  disabled: f,
+  content: C,
+  deleteButton: N,
+  sizeLg: x,
+  sizeMd: y,
+  sizeSm: L
+}, B = (n) => {
+  const { children: a, color: i, disabled: o = !1, onDelete: t, size: l = "md" } = n, c = g(), r = _(
+    e.root,
+    u("size", l, e),
+    {
+      [e.disabled]: o
+    }
+  ), d = (z) => {
+    z.stopPropagation(), !o && t && t();
+  };
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      className: r,
+      style: { "--chip-color": i ?? "var(--lui-color-text-secondary)" },
+      children: [
+        /* @__PURE__ */ s("span", { className: e.content, children: a }),
+        t && /* @__PURE__ */ s(
+          "button",
+          {
+            "aria-disabled": o || void 0,
+            "aria-label": c.Chip.remove,
+            className: e.deleteButton,
+            disabled: o,
+            onClick: d,
+            type: "button",
+            children: /* @__PURE__ */ s(p, { name: "x", size: 14 })
+          }
+        )
+      ]
+    }
+  );
+};
+B.displayName = b;
+export {
+  B as C
+};

package/dist/Chip.css

@@ -0,0 +1 @@
+:root{--chip-radius: var(--lui-radius-full);--chip-font-weight: var(--lui-font-weight-medium)}._root_1nzgz_6{align-items:center;background:color-mix(in sRGB,var(--chip-color) 12%,transparent);border:1px solid color-mix(in sRGB,var(--chip-color) 24%,transparent);border-radius:var(--chip-radius);color:var(--chip-color);display:inline-flex;font-weight:var(--chip-font-weight);gap:var(--lui-space-1);justify-content:center;line-height:1;white-space:nowrap;width:fit-content}._root_1nzgz_6._disabled_1nzgz_20{opacity:.5;pointer-events:none}._content_1nzgz_25{overflow:hidden;text-overflow:ellipsis}._deleteButton_1nzgz_30{align-items:center;appearance:none;background:none;border:none;border-radius:var(--lui-radius-full);color:inherit;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin-inline-end:calc(var(--lui-space-1) * -1);padding:var(--lui-space-1)}._deleteButton_1nzgz_30:hover{background:color-mix(in sRGB,var(--chip-color) 20%,transparent)}._deleteButton_1nzgz_30:focus-visible{outline:2px solid var(--chip-color);outline-offset:-2px}._deleteButton_1nzgz_30:disabled{cursor:default;pointer-events:none}._sizeLg_1nzgz_56{font-size:var(--lui-font-size-md);line-height:var(--line-height-md);padding:3px var(--lui-space-4)}._sizeMd_1nzgz_62{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm);padding:1px var(--lui-space-3)}._sizeSm_1nzgz_68{font-size:var(--lui-font-size-xs);line-height:var(--line-height-xs);padding:1px var(--lui-space-2)}

package/dist/button.js

@@ -1,52 +1,4 @@
-import { jsxs as z, jsx as s } from "react/jsx-runtime";
-import v from "clsx";
-import { I as y } from "./Icon-DsTlU3j3.mjs";
-import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
-import './button.css';const g = "Button", h = "_root_1lm86_21", x = "_modeFilled_1lm86_32", S = "_variantPrimary_1lm86_32", b = "_pressed_1lm86_36", N = "_variantSecondary_1lm86_42", W = "_variantDanger_1lm86_52", C = "_disabled_1lm86_62", D = "_modeOutlined_1lm86_69", L = "_modeText_1lm86_94", M = "_fullWidth_1lm86_118", P = "_sizeSm_1lm86_121", F = "_sizeMd_1lm86_128", I = "_sizeLg_1lm86_135", O = "_icon_1lm86_143", e = {
-  root: h,
-  modeFilled: x,
-  variantPrimary: S,
-  pressed: b,
-  variantSecondary: N,
-  variantDanger: W,
-  disabled: C,
-  modeOutlined: D,
-  modeText: L,
-  fullWidth: M,
-  sizeSm: P,
-  sizeMd: F,
-  sizeLg: I,
-  icon: O
-}, T = (a) => {
-  const {
-    children: t,
-    disabled: i = !1,
-    fullWidth: l = !1,
-    icon: n,
-    mode: r = "filled",
-    onClick: d,
-    size: m = "md",
-    variant: _ = "primary",
-    pressed: c,
-    as: p = "button",
-    ...f
-  } = a, u = v(
-    e.root,
-    o("size", m, e),
-    o("variant", _, e),
-    o("mode", r, e),
-    {
-      [e.fullWidth]: l,
-      [e.pressed]: c,
-      [e.disabled]: i
-    }
-  );
-  return /* @__PURE__ */ z(p, { className: u, disabled: i, onClick: d, ...f, children: [
-    n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(y, { name: n, size: 16 }) }),
-    t && /* @__PURE__ */ s("span", { children: t })
-  ] });
-};
-T.displayName = g;
+import { B as r } from "./Button-BYnrV9av.mjs";
 export {
-  T as Button
+  r as Button
 };

package/dist/chip.d.ts

@@ -0,0 +1,37 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Chip component. A small interactive element that displays content and optionally can be removed.
+ *
+ * Background is computed via CSS `color-mix()` — pass any CSS color value as `color` and
+ * the component automatically generates a tinted background and subtle border.
+ *
+ * @example
+ * ```tsx
+ * <Chip>Readonly chip</Chip>
+ * <Chip onDelete={() => {}}>Status: Active</Chip>
+ * <Chip size="sm" color="var(--lui-palette-orange-500)" onDelete={fn}>Tag</Chip>
+ * ```
+ */
+export declare const Chip: default_2.FC<IProps>;
+
+declare enum EChipSize {
+    LG = "lg",
+    MD = "md",
+    SM = "sm"
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** CSS color value. Background is derived via `color-mix()`. Default: `var(--lui-color-text-secondary)`. */
+    color?: string;
+    /** Disable the chip. */
+    disabled?: boolean;
+    /** When provided, renders a delete ("×") icon button. */
+    onDelete?: () => void;
+    /** Size. Default: `'md'`. */
+    size?: TChipSize;
+}
+
+declare type TChipSize = `${EChipSize.LG | EChipSize.MD | EChipSize.SM}`;
+
+export { }

package/dist/chip.js

@@ -0,0 +1,4 @@
+import { C as r } from "./Chip-DLfYGIQG.mjs";
+export {
+  r as Chip
+};

package/dist/dialog.js

@@ -5,7 +5,7 @@ import { $ as S, a as A } from "./useModalOverlay-C311Y5HK.mjs";
 import { s as E, i as M } from "./Overlay-OYo7gW8m.mjs";
 import { a as P } from "./useOverlayTriggerState-DK8Xy6Kr.mjs";
 import { I as R } from "./Icon-DsTlU3j3.mjs";
-import { u as X } from "./useLocale-DdHNhmvT.mjs";
+import { u as X } from "./useLocale-CJh-krrY.mjs";
 import { g as k } from "./getComponentSlots-DwAYUFNk.mjs";
 import { g as w } from "./getVariantClassName-D7Nhpuec.mjs";
 import './dialog.css';var e = /* @__PURE__ */ ((o) => (o.ACTIONS = "Dialog.Actions", o.CONTENT = "Dialog.Content", o.TITLE = "Dialog.Title", o))(e || {});
@@ -52,7 +52,7 @@ const B = "Dialog", F = [e.ACTIONS, e.CONTENT, e.TITLE], G = "_underlay_100vj_25
   return /* @__PURE__ */ s(E, { portalContainer: u, children: /* @__PURE__ */ s("div", { className: a.underlay, ...z, children: /* @__PURE__ */ s("div", { className: a.modal, ...y, ref: n, children: /* @__PURE__ */ s(M, { getContainer: () => n.current, children: /* @__PURE__ */ _("div", { className: I, ...b, ref: c, children: [
     /* @__PURE__ */ _("div", { className: a.header, children: [
       j,
-      /* @__PURE__ */ s("button", { "aria-label": h.dialog.close, className: a.close, onClick: D, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
+      /* @__PURE__ */ s("button", { "aria-label": h.Dialog.close, className: a.close, onClick: D, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
     ] }),
     m && /* @__PURE__ */ s("div", { children: m }),
     d && /* @__PURE__ */ s("div", { className: a.actions, children: d })

package/dist/drawer.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as T } from "react/jsx-runtime";
-import M, { cloneElement as H, createContext as P, useContext as B, useRef as p, useState as A, useEffect as j, useMemo as F } from "react";
+import M, { cloneElement as H, createContext as P, useContext as B, useRef as p, useState as h, useEffect as j, useMemo as F } from "react";
 import { i as V } from "./isValidReactNode-CmYwTWCE.mjs";
 import "./camelCase-PtIYufW8.mjs";
 import U from "clsx";
@@ -7,13 +7,13 @@ import { $ as K, a as Y } from "./useModalOverlay-C311Y5HK.mjs";
 import { s as G, i as J } from "./Overlay-OYo7gW8m.mjs";
 import { a as Q } from "./useOverlayTriggerState-DK8Xy6Kr.mjs";
 import { g as W } from "./getComponentSlots-DwAYUFNk.mjs";
-import { g as D } from "./getVariantClassName-D7Nhpuec.mjs";
+import { g as A } from "./getVariantClassName-D7Nhpuec.mjs";
 import { I as X } from "./Icon-DsTlU3j3.mjs";
-import { u as Z } from "./useLocale-DdHNhmvT.mjs";
+import { u as Z } from "./useLocale-CJh-krrY.mjs";
 import './drawer.css';var o = /* @__PURE__ */ ((e) => (e.ACTIONS = "Drawer.Actions", e.CONTENT = "Drawer.Content", e.HEADER = "Drawer.Header", e))(o || {});
 const ee = "_root_1m4yu_1", te = {
   root: ee
-}, g = ({ children: e }) => {
+}, w = ({ children: e }) => {
   const r = M.Children.toArray(e), l = r.map((s, c) => {
     if (!V("Button", s))
       return s;
@@ -25,14 +25,14 @@ const ee = "_root_1m4yu_1", te = {
   });
   return r.length === 0 ? null : /* @__PURE__ */ t("div", { className: te.root, children: l });
 };
-g.displayName = o.ACTIONS;
+w.displayName = o.ACTIONS;
 const oe = "_root_jagsa_1", re = {
   root: oe
-}, w = (e) => {
+}, g = (e) => {
   const { children: r } = e;
   return /* @__PURE__ */ t("div", { className: re.root, children: r });
 };
-w.displayName = o.CONTENT;
+g.displayName = o.CONTENT;
 const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = () => {
   const e = B(q);
   if (!e)
@@ -56,19 +56,19 @@ const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = ()
     { isDismissable: s, isKeyboardDismissDisabled: !1 },
     N,
     i
-  ), [C, b] = A(n || !1), [R, $] = A(!1), m = p(C);
+  ), [C, b] = h(n || !1), [R, D] = h(!1), m = p(C);
   j(() => {
     if (n) {
       m.current = !0, b(!0);
       const d = requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          $(!0);
+          D(!0);
         });
       });
       return () => cancelAnimationFrame(d);
     }
     if (m.current) {
-      $(!1);
+      D(!1);
       const d = setTimeout(() => {
         m.current = !1, b(!1);
       }, be);
@@ -77,12 +77,12 @@ const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = ()
   }, [n]);
   const {
     [o.ACTIONS]: z,
-    [o.CONTENT]: h,
+    [o.CONTENT]: $,
     [o.HEADER]: S
   } = F(() => W(r, se), [r]), L = U(
     a.drawer,
-    D("size", v, a),
-    D("placement", f, a),
+    A("size", v, a),
+    A("placement", f, a),
     { [a.entered]: R }
   );
   return C ? /* @__PURE__ */ t(G, { portalContainer: l, children: /* @__PURE__ */ t("div", { className: a.underlay, ...O, children: /* @__PURE__ */ t("div", { className: a.modal, ...I, ref: i, children: /* @__PURE__ */ t(J, { getContainer: () => i.current, children: /* @__PURE__ */ t(q.Provider, { value: { close: () => N.close() }, children: /* @__PURE__ */ T(
@@ -96,30 +96,30 @@ const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = ()
       ref: y,
       children: [
         S,
-        h && /* @__PURE__ */ t("div", { className: a.content, children: h }),
+        $ && /* @__PURE__ */ t("div", { className: a.content, children: $ }),
         z
       ]
     }
   ) }) }) }) }) }) : null;
 };
 k.displayName = ne;
-const $e = "_root_1mypq_13", he = "_title_1mypq_21", Ae = "_close_1mypq_31", u = {
-  root: $e,
-  title: he,
-  close: Ae
+const De = "_root_1mypq_13", $e = "_title_1mypq_21", he = "_close_1mypq_31", u = {
+  root: De,
+  title: $e,
+  close: he
 }, E = (e) => {
   const { children: r } = e, { close: l } = ae(), s = Z(), c = (n) => {
     n.preventDefault(), l();
   };
   return /* @__PURE__ */ T("div", { className: u.root, children: [
     /* @__PURE__ */ t("div", { className: u.title, children: r }),
-    /* @__PURE__ */ t("button", { "aria-label": s.dialog.close, className: u.close, onClick: c, type: "button", children: /* @__PURE__ */ t(X, { name: "x", size: 16 }) })
+    /* @__PURE__ */ t("button", { "aria-label": s.Drawer.Header.close, className: u.close, onClick: c, type: "button", children: /* @__PURE__ */ t(X, { name: "x", size: 16 }) })
   ] });
 };
 E.displayName = o.HEADER;
 const _ = k;
-_.Actions = g;
-_.Content = w;
+_.Actions = w;
+_.Content = g;
 _.Header = E;
 export {
   _ as Drawer,

package/dist/input.d.ts

@@ -1,6 +1,19 @@
 import { default as default_2 } from 'react';
 import { FC } from 'react';
 
+declare enum EDateFormat {
+    DD_MM_YYYY = "DD/MM/YYYY",
+    DD_MM_YYYY_DOT = "DD.MM.YYYY",
+    MM_DD_YYYY = "MM/DD/YYYY",
+    MM_DD_YYYY_DOT = "MM.DD.YYYY",
+    YYYY_MM_DD = "YYYY-MM-DD"
+}
+
+export declare interface IInputDateProps extends Omit<IInputProps, 'type'> {
+    /** Date format pattern that determines separator and digit order. */
+    format: TDateFormat;
+}
+
 export declare interface IInputEmailProps extends Omit<IInputProps, 'type'> {
 }
 
@@ -28,12 +41,15 @@ export declare interface IInputProps extends Omit<default_2.InputHTMLAttributes<
 }
 
 export declare const Input: FC<IInputProps> & {
+    Date: FC<IInputDateProps>;
     Email: FC<IInputEmailProps>;
     Number: FC<IInputNumberProps>;
     Password: FC<IInputPasswordProps>;
     Phone: FC<IInputPhoneProps>;
 };
 
+declare type TDateFormat = `${EDateFormat.DD_MM_YYYY}` | `${EDateFormat.DD_MM_YYYY_DOT}` | `${EDateFormat.MM_DD_YYYY}` | `${EDateFormat.MM_DD_YYYY_DOT}` | `${EDateFormat.YYYY_MM_DD}`;
+
 declare type TInputSize = 'sm' | 'md' | 'lg';
 
 export { }