@lazar-ui/kit 0.1.0 → 0.2.2

package/dist/empty-state.js

@@ -1,52 +1,53 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
 import T, { cloneElement as S } from "react";
-import { i as A } from "./isValidReactNode-CmYwTWCE.mjs";
+import { i as f } from "./isValidReactNode-CmYwTWCE.mjs";
 import "./camelCase-PtIYufW8.mjs";
-import { c as h } from "./clsx-OuTLNxxd.mjs";
+import { c as A } from "./clsx-OuTLNxxd.mjs";
+import { I as x } from "./Icon-flib0kme.mjs";
 import { g as u } from "./getComponentSlots-DwAYUFNk.mjs";
 import './empty-state.css';const l = "EmptyState";
 var o = ((t) => (t.ACTIONS = `${l}.Actions`, t.CONTENT = `${l}.Content`, t))(o || {});
-const E = "_actions_1pohs_1", O = {
-  actions: E
+const v = "_actions_dl9xv_1", E = {
+  actions: v
 }, p = ({ children: t }) => {
-  const s = T.Children.toArray(t), r = s.map((n, e) => {
-    if (!A("Button", n))
+  const s = T.Children.toArray(t), r = s.map((n, c) => {
+    if (!f("Button", n))
       return n;
     const i = n.props.variant;
     return S(n, {
-      key: e,
-      ...i ? {} : { variant: i ?? (e === 0 ? "primary" : "secondary") }
+      key: c,
+      ...i ? {} : { variant: i ?? (c === 0 ? "primary" : "secondary") }
     });
   });
-  return s.length === 0 ? null : /* @__PURE__ */ c("div", { className: O.actions, children: r });
+  return s.length === 0 ? null : /* @__PURE__ */ e("div", { className: E.actions, children: r });
 };
 p.displayName = o.ACTIONS;
-const v = "_content_laixm_1", f = {
-  content: v
-}, N = (t) => {
+const O = "_content_laixm_1", h = {
+  content: O
+}, d = (t) => {
   const { children: s } = t;
-  return /* @__PURE__ */ c("div", { className: f.content, children: s });
+  return /* @__PURE__ */ e("div", { className: h.content, children: s });
 };
-N.displayName = o.CONTENT;
-const I = "_root_131ay_5", $ = "_icon_131ay_14", x = "_title_131ay_20", g = "_description_131ay_28", a = {
+d.displayName = o.CONTENT;
+const I = "_root_1fqx3_5", $ = "_icon_1fqx3_14", g = "_title_1fqx3_20", q = "_description_1fqx3_28", a = {
   root: I,
   icon: $,
-  title: x,
-  description: g
-}, L = [o.ACTIONS, o.CONTENT], d = (t) => {
-  const { children: s, description: r, icon: n, title: e } = t, i = h(a.root), { [o.ACTIONS]: m, [o.CONTENT]: y } = u(s, L);
+  title: g,
+  description: q
+}, L = [o.ACTIONS, o.CONTENT], N = (t) => {
+  const { children: s, description: r, icon: n, title: c } = t, i = A(a.root), { [o.ACTIONS]: m, [o.CONTENT]: y } = u(s, L);
   return /* @__PURE__ */ C("div", { className: i, children: [
-    n && /* @__PURE__ */ c("div", { className: a.icon, children: n }),
-    e && /* @__PURE__ */ c("h3", { className: a.title, children: e }),
-    r && /* @__PURE__ */ c("p", { className: a.description, children: r }),
+    n && /* @__PURE__ */ e("div", { className: a.icon, children: /* @__PURE__ */ e(x, { name: n, size: 48 }) }),
+    c && /* @__PURE__ */ e("h3", { className: a.title, children: c }),
+    r && /* @__PURE__ */ e("p", { className: a.description, children: r }),
     y,
     m
   ] });
 };
-d.displayName = l;
-const _ = d;
+N.displayName = l;
+const _ = N;
 _.Actions = p;
-_.Content = N;
+_.Content = d;
 export {
   _ as EmptyState
 };

package/dist/error-boundary.css

@@ -1 +1 @@
-._root_1q4b8_1{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-10) var(--space-5);text-align:center}._title_1q4b8_10{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-lg);margin:0}._description_1q4b8_18{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-sm);margin:0;max-width:400px}
+._root_n01v7_1{align-items:center;display:flex;flex-direction:column;gap:var(--lui-space-2);padding:var(--lui-space-10) var(--lui-space-5);text-align:center}._title_n01v7_10{color:var(--lui-color-text-primary);font-size:var(--lui-font-size-lg);font-weight:var(--lui-font-weight-semibold);line-height:var(--line-height-lg);margin:0}._description_n01v7_18{color:var(--lui-color-text-secondary);font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm);margin:0;max-width:400px}

package/dist/error-boundary.js

@@ -1,17 +1,17 @@
 import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import i from "react";
-import './error-boundary.css';const n = "ErrorBoundary", a = "_root_1q4b8_1", c = "_title_1q4b8_10", p = "_description_1q4b8_18", e = {
+import n from "react";
+import './error-boundary.css';const i = "ErrorBoundary", a = "_root_n01v7_1", c = "_title_n01v7_10", h = "_description_n01v7_18", e = {
   root: a,
   title: c,
-  description: p
+  description: h
 };
-class u extends i.Component {
-  static displayName = n;
+class u extends n.Component {
+  static displayName = i;
   constructor(r) {
-    super(r), this.state = { hasError: !1, error: null };
+    super(r), this.state = { error: null, hasError: !1 };
   }
   static getDerivedStateFromError(r) {
-    return { hasError: !0, error: r };
+    return { error: r, hasError: !0 };
   }
   componentDidCatch(r, t) {
     this.props.onError?.(r, t);
@@ -20,13 +20,13 @@ class u extends i.Component {
     this.props.resetKey !== void 0 && this.props.resetKey !== r.resetKey && this.handleReset();
   }
   handleReset = () => {
-    this.setState({ hasError: !1, error: null });
+    this.setState({ error: null, hasError: !1 });
   };
   render() {
     if (!this.state.hasError)
       return this.props.children;
     const { fallback: r } = this.props, { error: t } = this.state;
-    return r !== void 0 ? typeof r == "function" ? r(t, this.handleReset) : r : /* @__PURE__ */ o("div", { className: e.root, children: [
+    return r !== void 0 && this.state.error !== null ? typeof r == "function" ? r(this.state.error, this.handleReset) : r : /* @__PURE__ */ o("div", { className: e.root, children: [
       /* @__PURE__ */ s("h3", { className: e.title, children: "Something went wrong" }),
       /* @__PURE__ */ s("p", { className: e.description, children: t?.message ?? "An unexpected error occurred." })
     ] });

package/dist/flex.js

@@ -36,8 +36,8 @@ const z = (n) => {
     gap: o,
     grow: u,
     id: w,
-    justify: s,
-    px: l,
+    justify: l,
+    px: s,
     py: r,
     shrink: m,
     style: d,
@@ -46,7 +46,7 @@ const z = (n) => {
     e.root,
     i("direction", a),
     t != null && i("align", t),
-    s != null && i("justify", s),
+    l != null && i("justify", l),
     f && e.wrap,
     p && e.fullWidth,
     u && e.grow,
@@ -58,9 +58,9 @@ const z = (n) => {
       className: y,
       id: w,
       style: {
-        "--flex-gap": o != null ? `var(--space-${o})` : void 0,
-        "--flex-px": l != null ? `var(--space-${l})` : void 0,
-        "--flex-py": r != null ? `var(--space-${r})` : void 0,
+        "--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: _

package/dist/form-field.css

@@ -1 +1 @@
-:root{--formfield-gap: var(--space-1)}._root_pcv8m_5{display:flex;flex-direction:column;gap:var(--space-1)}._label_pcv8m_11{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-sm)}._required_pcv8m_18{color:var(--color-text-error)}._error_pcv8m_22{color:var(--color-text-error);font-size:var(--font-size-xs);line-height:var(--line-height-xs);margin:0}
+:root{--formfield-gap: var(--lui-space-1)}._root_1vp6v_5{display:flex;flex-direction:column;gap:var(--lui-space-1)}._label_1vp6v_11{color:var(--lui-color-text-primary);font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-sm)}._required_1vp6v_18{color:var(--lui-color-text-error)}._error_1vp6v_22{color:var(--lui-color-text-error);font-size:var(--lui-font-size-xs);line-height:var(--line-height-xs);margin:0}

package/dist/form-field.js

@@ -1,22 +1,22 @@
 import { jsxs as l, jsx as s } from "react/jsx-runtime";
 import { c as n } from "./clsx-OuTLNxxd.mjs";
-import './form-field.css';const d = "FormField", m = "_root_pcv8m_5", _ = "_label_pcv8m_11", p = "_required_pcv8m_18", u = "_error_pcv8m_22", r = {
-  root: m,
-  label: _,
+import './form-field.css';const d = "FormField", _ = "_root_1vp6v_5", m = "_label_1vp6v_11", p = "_required_1vp6v_18", v = "_error_1vp6v_22", r = {
+  root: _,
+  label: m,
   required: p,
-  error: u
-}, N = (a) => {
-  const { children: c, error: e, label: o, required: t = !1 } = a, i = n(r.root);
+  error: v
+}, u = (a) => {
+  const { children: t, error: e, label: o, required: c = !1 } = a, i = n(r.root);
   return /* @__PURE__ */ l("div", { className: i, children: [
     o && /* @__PURE__ */ l("label", { className: r.label, children: [
       o,
-      t && /* @__PURE__ */ s("span", { className: r.required, "aria-hidden": "true", children: " *" })
+      c && /* @__PURE__ */ s("span", { className: r.required, "aria-hidden": "true", children: " *" })
     ] }),
-    c,
+    t,
     e && /* @__PURE__ */ s("p", { className: r.error, role: "alert", children: e })
   ] });
 };
-N.displayName = d;
+u.displayName = d;
 export {
-  N as FormField
+  u as FormField
 };

package/dist/icon.d.ts

@@ -0,0 +1,30 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Icon component. Renders a Lucide SVG icon by name.
+ * Supports sizing, coloring, and custom stroke width.
+ * Returns `null` for unknown icon names.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="search" />
+ * <Icon name="user" size={24} color="red" />
+ * <Icon name="x" ariaLabel="Close" />
+ * ```
+ */
+export declare const Icon: default_2.FC<IIconProps>;
+
+export declare interface IIconProps {
+    /** Icon name. Full list: https://lucide.dev/icons */
+    name: string;
+    /** Icon size (px). Default: 16. */
+    size?: number;
+    /** Stroke color. Default: 'currentColor'. */
+    color?: string;
+    /** Stroke width. Default: 2. */
+    strokeWidth?: number;
+    /** Semantic aria-label. Default: name. */
+    ariaLabel?: string;
+}
+
+export { }

package/dist/icon.js

@@ -0,0 +1,4 @@
+import { I } from "./Icon-flib0kme.mjs";
+export {
+  I as Icon
+};

package/dist/input.css

@@ -1 +1 @@
-:root{--input-bg: var(--color-background-primary);--input-bg-hover: var(--color-background-secondary);--input-border: var(--color-border-primary);--input-border-hover: var(--color-text-tertiary);--input-border-focus: var(--color-border-focus);--input-border-error: var(--color-border-focus-error);--input-text: var(--color-text-primary);--input-text-disabled: var(--color-text-disabled);--input-placeholder: var(--color-text-tertiary);--input-icon: var(--color-text-tertiary);--input-radius: var(--radius-1);--input-shadow: var(--shadow-xs);--input-gap: var(--space-2)}._root_p1h72_17{align-items:center;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--input-shadow);display:inline-flex;gap:var(--input-gap);position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_p1h72_17:hover{border-color:var(--input-border-hover)}._root_p1h72_17:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 1px var(--input-border-focus)}._root_p1h72_17._invalid_p1h72_36{border-color:var(--input-border-error)}._root_p1h72_17._invalid_p1h72_36:focus-within{box-shadow:0 0 0 1px var(--input-border-error)}._root_p1h72_17._disabled_p1h72_42{background:var(--color-background-disabled);border-color:var(--color-border-disabled);box-shadow:none;cursor:not-allowed}._root_p1h72_17._disabled_p1h72_42:hover{border-color:var(--color-border-disabled)}._root_p1h72_17._disabled_p1h72_42:focus-within{border-color:var(--color-border-disabled);box-shadow:none}._sizeSm_p1h72_56{padding:var(--space-1) var(--space-2)}._sizeMd_p1h72_60{padding:var(--space-2) var(--space-3)}._sizeLg_p1h72_64{padding:var(--space-3) var(--space-4)}._control_p1h72_68{background:none;border:none;color:var(--input-text);flex:1;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0;outline:none;padding:0}._control_p1h72_68::placeholder{color:var(--input-placeholder)}._control_p1h72_68:disabled{color:var(--input-text-disabled);cursor:not-allowed}._control_p1h72_68:disabled::placeholder{color:var(--input-text-disabled)}._control_p1h72_68[type=number]::-webkit-outer-spin-button,._control_p1h72_68[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}._control_p1h72_68[type=number]{appearance:textfield}._before_p1h72_99,._after_p1h72_100{align-items:center;color:var(--input-icon);display:flex;flex-shrink:0;line-height:0}._togglePassword_p1h72_108{align-items:center;background:none;border:none;color:var(--input-icon);cursor:pointer;display:flex;flex-shrink:0;line-height:0;padding:0}._togglePassword_p1h72_108:hover{color:var(--color-text-secondary)}._sizeSm_p1h72_56 ._control_p1h72_68{font-size:var(--font-size-sm);line-height:var(--line-height-sm)}._sizeSm_p1h72_56 ._before_p1h72_99,._sizeSm_p1h72_56 ._after_p1h72_100,._sizeSm_p1h72_56 ._togglePassword_p1h72_108{height:14px;width:14px}._sizeMd_p1h72_60 ._control_p1h72_68{font-size:var(--font-size-md);line-height:var(--line-height-md)}._sizeMd_p1h72_60 ._before_p1h72_99,._sizeMd_p1h72_60 ._after_p1h72_100,._sizeMd_p1h72_60 ._togglePassword_p1h72_108{height:16px;width:16px}._sizeLg_p1h72_64 ._control_p1h72_68{font-size:var(--font-size-lg);line-height:var(--line-height-lg)}._sizeLg_p1h72_64 ._before_p1h72_99,._sizeLg_p1h72_64 ._after_p1h72_100,._sizeLg_p1h72_64 ._togglePassword_p1h72_108{height:18px;width:18px}
+:root{--input-bg: var(--lui-color-background-secondary);--input-bg-hover: var(--lui-color-background-secondary);--input-border: var(--lui-color-border-primary);--input-border-hover: var(--lui-color-text-tertiary);--input-border-focus: var(--lui-color-border-focus);--input-border-error: var(--lui-color-border-focus-error);--input-text: var(--lui-color-text-primary);--input-text-disabled: var(--lui-color-text-disabled);--input-placeholder: var(--lui-color-text-tertiary);--input-icon: var(--lui-color-text-tertiary);--input-radius: var(--lui-radius-1);--input-shadow: var(--lui-shadow-xs);--input-gap: var(--lui-space-2)}._root_1k18n_17{align-items:center;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--input-shadow);display:inline-flex;gap:var(--input-gap);position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_1k18n_17:hover{border-color:var(--input-border-hover)}._root_1k18n_17:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 1px var(--input-border-focus)}._root_1k18n_17._invalid_1k18n_36{border-color:var(--input-border-error)}._root_1k18n_17._invalid_1k18n_36:focus-within{box-shadow:0 0 0 1px var(--input-border-error)}._root_1k18n_17._disabled_1k18n_42{background:var(--lui-color-background-disabled);border-color:var(--lui-color-border-disabled);box-shadow:none;cursor:not-allowed}._root_1k18n_17._disabled_1k18n_42:hover{border-color:var(--lui-color-border-disabled)}._root_1k18n_17._disabled_1k18n_42:focus-within{border-color:var(--lui-color-border-disabled);box-shadow:none}._sizeSm_1k18n_56{padding:var(--lui-space-1) var(--lui-space-2)}._sizeMd_1k18n_60{padding:var(--lui-space-2) var(--lui-space-3)}._sizeLg_1k18n_64{padding:var(--lui-space-3) var(--lui-space-4)}._control_1k18n_68{background:none;border:none;color:var(--input-text);flex:1;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0;outline:none;padding:0}._control_1k18n_68::placeholder{color:var(--input-placeholder)}._control_1k18n_68:disabled{color:var(--input-text-disabled);cursor:not-allowed}._control_1k18n_68:disabled::placeholder{color:var(--input-text-disabled)}._control_1k18n_68[type=number]::-webkit-outer-spin-button,._control_1k18n_68[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}._control_1k18n_68[type=number]{appearance:textfield}._before_1k18n_99,._after_1k18n_100{align-items:center;color:var(--input-icon);display:flex;flex-shrink:0;line-height:0}._togglePassword_1k18n_108{align-items:center;background:none;border:none;color:var(--input-icon);cursor:pointer;display:flex;flex-shrink:0;line-height:0;padding:0}._togglePassword_1k18n_108:hover{color:var(--lui-color-text-secondary)}._sizeSm_1k18n_56 ._control_1k18n_68{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeSm_1k18n_56 ._before_1k18n_99,._sizeSm_1k18n_56 ._after_1k18n_100,._sizeSm_1k18n_56 ._togglePassword_1k18n_108{height:14px;width:14px}._sizeMd_1k18n_60 ._control_1k18n_68{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}._sizeMd_1k18n_60 ._before_1k18n_99,._sizeMd_1k18n_60 ._after_1k18n_100,._sizeMd_1k18n_60 ._togglePassword_1k18n_108{height:16px;width:16px}._sizeLg_1k18n_64 ._control_1k18n_68{font-size:var(--lui-font-size-lg);line-height:var(--line-height-lg)}._sizeLg_1k18n_64 ._before_1k18n_99,._sizeLg_1k18n_64 ._after_1k18n_100,._sizeLg_1k18n_64 ._togglePassword_1k18n_108{height:18px;width:18px}

package/dist/input.js

@@ -1,146 +1,120 @@
-import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import { c as z } from "./clsx-OuTLNxxd.mjs";
-import { useState as g, useCallback as f } from "react";
-import { g as M } from "./getVariantClassName-D7Nhpuec.mjs";
-import { u as x } from "./useLocale-D2Z0JH0l.mjs";
-import './input.css';const p = {
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { c as v } from "./clsx-OuTLNxxd.mjs";
+import { useState as g, useCallback as N } from "react";
+import { g as U } from "./getVariantClassName-D7Nhpuec.mjs";
+import { I as f } from "./Icon-flib0kme.mjs";
+import { u as E } from "./useLocale-DdHNhmvT.mjs";
+import './input.css';const m = {
   INPUT: "Input",
   INPUT_EMAIL: "InputEmail",
   INPUT_NUMBER: "InputNumber",
   INPUT_PASSWORD: "InputPassword",
   INPUT_PHONE: "InputPhone"
-}, y = "_root_p1h72_17", E = "_invalid_p1h72_36", B = "_disabled_p1h72_42", U = "_sizeSm_p1h72_56", L = "_sizeMd_p1h72_60", S = "_sizeLg_p1h72_64", T = "_control_p1h72_68", A = "_before_p1h72_99", k = "_after_p1h72_100", O = "_togglePassword_p1h72_108", l = {
-  root: y,
-  invalid: E,
-  disabled: B,
-  sizeSm: U,
-  sizeMd: L,
-  sizeLg: S,
-  control: T,
+}, S = "_root_1k18n_17", C = "_invalid_1k18n_36", M = "_disabled_1k18n_42", T = "_sizeSm_1k18n_56", B = "_sizeMd_1k18n_60", L = "_sizeLg_1k18n_64", x = "_control_1k18n_68", A = "_before_1k18n_99", O = "_after_1k18n_100", $ = "_togglePassword_1k18n_108", l = {
+  root: S,
+  invalid: C,
+  disabled: M,
+  sizeSm: T,
+  sizeMd: B,
+  sizeLg: L,
+  control: x,
   before: A,
-  after: k,
-  togglePassword: O
-}, d = (o) => {
-  const { ref: s, invalid: t = !1, size: r = "md", before: a, after: n, className: i, onChange: c, onBlur: h, onFocus: m, ...u } = o, P = z(
+  after: O,
+  togglePassword: $
+}, d = (n) => {
+  const { ref: e, invalid: s = !1, size: a = "md", before: r, after: t, className: i, onChange: c, onBlur: u, onFocus: _, ...p } = n, w = v(
     l.root,
-    M("size", r, l),
+    U("size", a, l),
     {
-      [l.disabled]: u.disabled === !0,
-      [l.invalid]: t
+      [l.disabled]: p.disabled === !0,
+      [l.invalid]: s
     },
     i
-  ), b = (v) => {
-    c?.(v.target.value);
+  ), z = (k) => {
+    c?.(k.target.value);
   };
-  return /* @__PURE__ */ C("div", { className: P, children: [
-    a && /* @__PURE__ */ e("span", { className: l.before, children: a }),
-    /* @__PURE__ */ e("input", { ref: s, className: l.control, onChange: b, onBlur: h, onFocus: m, ...u }),
-    n && /* @__PURE__ */ e("span", { className: l.after, children: n })
+  return /* @__PURE__ */ y("div", { className: w, children: [
+    r && /* @__PURE__ */ o("span", { className: l.before, children: r }),
+    /* @__PURE__ */ o("input", { ref: e, className: l.control, onChange: z, onBlur: u, onFocus: _, ...p }),
+    t && /* @__PURE__ */ o("span", { className: l.after, children: t })
   ] });
 };
-d.displayName = p.INPUT;
-const V = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
-  "path",
-  {
-    d: "M2 3c0-.6.4-1 1-1h1.5a1 1 0 01.9.6l.7 1.5a1 1 0 01-.1 1.1L5 6a8.6 8.6 0 004 4l1-1a1 1 0 011.1-.2l1.5.7a1 1 0 01.6.9V13a1 1 0 01-1 1C6.5 14 2 9.5 2 3z",
-    fill: "currentColor"
-  }
-) }), $ = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
-  "path",
-  {
-    d: "M2 4a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm2 0l4 3 4-3m0 8V6.5L8 9.5 4 6.5V12",
-    fill: "currentColor"
-  }
-) }), D = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
-  "path",
-  {
-    d: "M8 3C4.5 3 1.5 5.5 0 8c1.5 2.5 4.5 5 8 5s6.5-2.5 8-5c-1.5-2.5-4.5-5-8-5zm0 8a3 3 0 110-6 3 3 0 010 6zm0-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
-    fill: "currentColor"
-  }
-) }), H = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
-  "path",
-  {
-    d: "M3.5 2L14 12.5M6.5 5.5A3 3 0 0010 9m4.5-1A9.5 9.5 0 0014 8c-1.5-2.5-4.5-5-8-5-.7 0-1.4.1-2 .3m-2.6 1.2C.8 5.2 0 8 0 8c1.5 2.5 4.5 5 8 5 1.5 0 2.9-.4 4.1-1",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    fill: "none"
-  }
-) });
-function R(o) {
-  const s = o.replace(/\D/g, "").slice(0, 11);
-  if (!s) return "";
-  let t = "+7";
-  return s.length > 1 && (t += ` (${s.slice(1, 4)}`), s.length >= 4 && (t += `) ${s.slice(4, 7)}`), s.length >= 7 && (t += `-${s.slice(7, 9)}`), s.length >= 9 && (t += `-${s.slice(9, 11)}`), t;
+d.displayName = m.INPUT;
+function D(n) {
+  const e = n.replace(/\D/g, "").slice(0, 11);
+  if (!e)
+    return "";
+  let s = "+7";
+  return e.length > 1 && (s += ` (${e.slice(1, 4)}`), e.length >= 4 && (s += `) ${e.slice(4, 7)}`), e.length >= 7 && (s += `-${e.slice(7, 9)}`), e.length >= 9 && (s += `-${e.slice(9, 11)}`), s;
 }
-function j(o) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o);
+function R(n) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(n);
 }
-const w = (o) => {
-  const { ref: s, before: t, onBlur: r, invalid: a, ...n } = o, [i, c] = g(!1), h = f(
-    (u) => {
-      c(!0), r?.(u);
+const I = (n) => {
+  const { ref: e, before: s, onBlur: a, invalid: r, ...t } = n, [i, c] = g(!1), u = N(
+    (p) => {
+      c(!0), a?.(p);
     },
-    [r]
-  ), m = a || i && n.value != null && !j(n.value);
-  return /* @__PURE__ */ e(
+    [a]
+  ), _ = r || i && t.value != null && !R(t.value);
+  return /* @__PURE__ */ o(
     d,
     {
-      ref: s,
+      ref: e,
       type: "email",
-      before: t ?? /* @__PURE__ */ e($, {}),
-      invalid: m,
-      onBlur: h,
-      ...n
+      before: s ?? /* @__PURE__ */ o(f, { name: "mail", size: 16 }),
+      invalid: _,
+      onBlur: u,
+      ...t
     }
   );
 };
-w.displayName = p.INPUT_EMAIL;
-const _ = (o) => {
-  const { ref: s, ...t } = o;
-  return /* @__PURE__ */ e(d, { ref: s, type: "number", inputMode: "numeric", ...t });
+I.displayName = m.INPUT_EMAIL;
+const P = (n) => {
+  const { ref: e, ...s } = n;
+  return /* @__PURE__ */ o(d, { ref: e, type: "number", inputMode: "numeric", ...s });
 };
-_.displayName = p.INPUT_NUMBER;
-const N = (o) => {
-  const { ref: s, after: t, ...r } = o, a = x(), [n, i] = g(!1), c = f(() => i((h) => !h), []);
-  return /* @__PURE__ */ e(
+P.displayName = m.INPUT_NUMBER;
+const b = (n) => {
+  const { ref: e, after: s, ...a } = n, r = E(), [t, i] = g(!1), c = N(() => i((u) => !u), []);
+  return /* @__PURE__ */ o(
     d,
     {
-      ref: s,
-      type: n ? "text" : "password",
-      after: t ?? /* @__PURE__ */ e(
+      ref: e,
+      type: t ? "text" : "password",
+      after: s ?? /* @__PURE__ */ o(
         "button",
         {
           type: "button",
           className: l.togglePassword,
           onClick: c,
           tabIndex: -1,
-          "aria-label": n ? a.input.passwordHide : a.input.passwordShow,
-          children: n ? /* @__PURE__ */ e(H, {}) : /* @__PURE__ */ e(D, {})
+          "aria-label": t ? r.input.passwordHide : r.input.passwordShow,
+          children: t ? /* @__PURE__ */ o(f, { name: "eyeOff", size: 16 }) : /* @__PURE__ */ o(f, { name: "eye", size: 16 })
         }
       ),
-      ...r
+      ...a
     }
   );
 };
-N.displayName = p.INPUT_PASSWORD;
-const I = (o) => {
-  const { ref: s, before: t, onChange: r, ...a } = o, n = f(
+b.displayName = m.INPUT_PASSWORD;
+const h = (n) => {
+  const { ref: e, before: s, onChange: a, ...r } = n, t = N(
     (i) => {
-      const c = R(i);
-      r?.(c);
+      const c = D(i);
+      a?.(c);
     },
-    [r]
+    [a]
   );
-  return /* @__PURE__ */ e(d, { ref: s, type: "tel", before: t ?? /* @__PURE__ */ e(V, {}), onChange: n, ...a });
+  return /* @__PURE__ */ o(d, { ref: e, type: "tel", before: s ?? /* @__PURE__ */ o(f, { name: "phone", size: 16 }), onChange: t, ...r });
 };
-I.displayName = p.INPUT_PHONE;
-const J = Object.assign(d, {
-  Email: w,
-  Number: _,
-  Password: N,
-  Phone: I
+h.displayName = m.INPUT_PHONE;
+const q = Object.assign(d, {
+  Email: I,
+  Number: P,
+  Password: b,
+  Phone: h
 });
 export {
-  J as Input
+  q as Input
 };

package/dist/{config-provider.d.ts → lazar-ui-provider.d.ts}

@@ -1,37 +1,5 @@
 import { default as default_2 } from 'react';
 
-/**
- * Root provider that sets color scheme and locale for all UI Kit components.
- *
- * @example
- * ```tsx
- * import { ConfigProvider } from '@lazar-ui/kit';
- * import '@lazar-ui/kit/css/palettes/indigo.css';
- * import '@lazar-ui/kit/css/semantic.css';
- *
- * function App() {
- *   return (
- *     <ConfigProvider theme="light" locale="en">
- *       <YourApp />
- *     </ConfigProvider>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // With custom locale and theme target
- * <ConfigProvider
- *   theme="dark"
- *   locale={{ dialog: { close: 'Закрыть' } }}
- *   themeTarget={document.getElementById('root')}
- * >
- *   <YourApp />
- * </ConfigProvider>
- * ```
- */
-export declare const ConfigProvider: default_2.FC<IProps>;
-
 export declare interface IConfigContext {
     theme: TTheme;
     locale: ILocaleMessages;
@@ -67,11 +35,43 @@ declare interface IProps extends default_2.PropsWithChildren {
     locale?: TLocale;
 }
 
+/**
+ * Root provider that sets color scheme and locale for all Lazar UI Kit components.
+ *
+ * @example
+ * ```tsx
+ * import { LazarUiProvider } from '@lazar-ui/kit';
+ * import '@lazar-ui/kit/css/palettes/indigo.css';
+ * import '@lazar-ui/kit/css/semantic.css';
+ *
+ * function App() {
+ *   return (
+ *     <LazarUiProvider theme="light" locale="en">
+ *       <YourApp />
+ *     </LazarUiProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom locale and theme target
+ * <LazarUiProvider
+ *   theme="dark"
+ *   locale={{ dialog: { close: 'Закрыть' } }}
+ *   themeTarget={document.getElementById('root')}
+ * >
+ *   <YourApp />
+ * </LazarUiProvider>
+ * ```
+ */
+export declare const LazarUiProvider: default_2.FC<IProps>;
+
 export declare type TLocale = Partial<ILocaleMessages> | 'en' | 'ru';
 
 export declare type TTheme = 'light' | 'dark' | 'contrast';
 
-export declare const useConfigContext: () => IConfigContext;
+export declare const useLazarUiContext: () => IConfigContext;
 
 export declare const useLocale: () => ILocaleMessages;
 

package/dist/lazar-ui-provider.js

@@ -0,0 +1,14 @@
+import { C as t } from "./useLocale-DdHNhmvT.mjs";
+import { L as u, u as x } from "./useLocale-DdHNhmvT.mjs";
+import { useContext as o } from "react";
+const i = () => {
+  const r = o(t);
+  if (!r)
+    throw new Error("useLazarUiContext must be used within a LazarUiProvider");
+  return r;
+};
+export {
+  u as LazarUiProvider,
+  i as useLazarUiContext,
+  x as useLocale
+};

package/dist/menu.css

@@ -1 +1 @@
-._root_rtz62_1{align-items:center;border-radius:var(--dropdown-item-radius);cursor:pointer;display:flex;font-size:var(--dropdown-item-font-size);gap:var(--dropdown-item-gap);outline:none;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);transition:background-color .1s ease;-webkit-user-select:none;user-select:none}._root_rtz62_1:hover{background:var(--color-background-secondary)}._root_rtz62_1:focus-visible{background:var(--color-background-secondary)}._root_rtz62_1._disabled_rtz62_19{color:var(--color-text-disabled);cursor:not-allowed}._root_rtz62_1._disabled_rtz62_19:hover{background:transparent}._checkbox_rtz62_27{align-items:center;border:1.5px solid var(--color-border-primary);border-radius:var(--radius-1);display:inline-flex;flex-shrink:0;height:16px;justify-content:center;transition:all .1s ease;width:16px}._checkbox_rtz62_27._checked_rtz62_38{background:var(--color-background-brand);border-color:var(--color-background-brand);color:var(--color-text-on-brand)}._label_rtz62_44{flex:1;overflow:hidden;text-overflow:ellipsis}:root{--dropdown-min-width: 160px;--dropdown-item-padding-x: var(--space-3);--dropdown-item-padding-y: var(--space-2);--dropdown-item-gap: var(--space-2);--dropdown-item-radius: var(--radius-1);--dropdown-item-font-size: var(--font-size-sm);--dropdown-item-icon-size: 16px;--dropdown-separator-margin: var(--space-1) var(--space-2);--dropdown-group-label-padding: var(--space-2) var(--space-3);--dropdown-group-label-font-size: var(--font-size-xs)}._root_mkbkc_14{min-width:var(--dropdown-min-width);padding:var(--space-1)}._root_1rvg0_1{padding-bottom:var(--space-1);padding-top:var(--space-1)}._root_1rvg0_1+._root_1rvg0_1{border-top:1px solid var(--color-border-primary)}._label_1rvg0_9{color:var(--color-text-tertiary);font-size:var(--dropdown-group-label-font-size);font-weight:var(--font-weight-medium);padding:var(--dropdown-group-label-padding);text-transform:uppercase}._root_vdz2l_1{align-items:center;border-radius:var(--dropdown-item-radius);cursor:pointer;display:flex;font-size:var(--dropdown-item-font-size);gap:var(--dropdown-item-gap);outline:none;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);transition:background-color .1s ease;-webkit-user-select:none;user-select:none}._root_vdz2l_1:hover{background:var(--color-background-secondary)}._root_vdz2l_1:focus-visible{background:var(--color-background-secondary)}._root_vdz2l_1._disabled_vdz2l_19{color:var(--color-text-disabled);cursor:not-allowed}._root_vdz2l_1._disabled_vdz2l_19:hover{background:transparent}._root_vdz2l_1._danger_vdz2l_26{color:var(--color-background-error)}._root_vdz2l_1._danger_vdz2l_26:hover{background:color-mix(in sRGB,var(--color-background-error) 8%,transparent)}._icon_vdz2l_33{align-items:center;color:var(--color-text-tertiary);display:inline-flex;flex-shrink:0;height:var(--dropdown-item-icon-size);justify-content:center;width:var(--dropdown-item-icon-size)}._label_vdz2l_43{flex:1;overflow:hidden;text-overflow:ellipsis}._root_c60j4_1{background:var(--color-border-primary);border:none;height:1px;margin:var(--dropdown-separator-margin)}
+._root_15rud_1{align-items:center;border-radius:var(--dropdown-item-radius);cursor:pointer;display:flex;font-size:var(--dropdown-item-font-size);gap:var(--dropdown-item-gap);outline:none;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);transition:background-color .1s ease;-webkit-user-select:none;user-select:none}._root_15rud_1:hover{background:var(--lui-color-background-secondary)}._root_15rud_1:focus-visible{background:var(--lui-color-background-secondary)}._root_15rud_1._disabled_15rud_19{color:var(--lui-color-text-disabled);cursor:not-allowed}._root_15rud_1._disabled_15rud_19:hover{background:transparent}._checkbox_15rud_27{align-items:center;border:1.5px solid var(--lui-color-border-primary);border-radius:var(--lui-radius-1);display:inline-flex;flex-shrink:0;height:16px;justify-content:center;transition:all .1s ease;width:16px}._checkbox_15rud_27._checked_15rud_38{background:var(--lui-color-background-brand);border-color:var(--lui-color-background-brand);color:var(--lui-color-text-on-brand)}._label_15rud_44{flex:1;overflow:hidden;text-overflow:ellipsis}:root{--dropdown-min-width: 160px;--dropdown-item-padding-x: var(--lui-space-3);--dropdown-item-padding-y: var(--lui-space-2);--dropdown-item-gap: var(--lui-space-2);--dropdown-item-radius: var(--lui-radius-1);--dropdown-item-font-size: var(--lui-font-size-sm);--dropdown-item-icon-size: 16px;--dropdown-separator-margin: var(--lui-space-1) var(--lui-space-2);--dropdown-group-label-padding: var(--lui-space-2) var(--lui-space-3);--dropdown-group-label-font-size: var(--lui-font-size-xs)}._root_1h0xj_14{min-width:var(--dropdown-min-width);padding:var(--lui-space-1)}._root_dtqrm_1{padding-bottom:var(--lui-space-1);padding-top:var(--lui-space-1)}._root_dtqrm_1+._root_dtqrm_1{border-top:1px solid var(--lui-color-border-primary)}._label_dtqrm_9{color:var(--lui-color-text-tertiary);font-size:var(--dropdown-group-label-font-size);font-weight:var(--lui-font-weight-medium);padding:var(--dropdown-group-label-padding);text-transform:uppercase}._root_5s7ps_1{align-items:center;border-radius:var(--dropdown-item-radius);cursor:pointer;display:flex;font-size:var(--dropdown-item-font-size);gap:var(--dropdown-item-gap);outline:none;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);transition:background-color .1s ease;-webkit-user-select:none;user-select:none}._root_5s7ps_1:hover{background:var(--lui-color-background-secondary)}._root_5s7ps_1:focus-visible{background:var(--lui-color-background-secondary)}._root_5s7ps_1._disabled_5s7ps_19{color:var(--lui-color-text-disabled);cursor:not-allowed}._root_5s7ps_1._disabled_5s7ps_19:hover{background:transparent}._root_5s7ps_1._danger_5s7ps_26{color:var(--lui-color-background-error)}._root_5s7ps_1._danger_5s7ps_26:hover{background:color-mix(in sRGB,var(--lui-color-background-error) 8%,transparent)}._icon_5s7ps_33{align-items:center;color:var(--lui-color-text-tertiary);display:inline-flex;flex-shrink:0;height:var(--dropdown-item-icon-size);justify-content:center;width:var(--dropdown-item-icon-size)}._label_5s7ps_43{flex:1;overflow:hidden;text-overflow:ellipsis}._root_16pgq_1{background:var(--lui-color-border-primary);border:none;height:1px;margin:var(--dropdown-separator-margin)}

package/dist/menu.d.ts

@@ -48,8 +48,8 @@ declare interface IProps_5 {
     disabled?: boolean;
     /** Whether the item is in danger state (e.g. delete action). */
     danger?: boolean;
-    /** Optional icon before the label. */
-    icon?: default_2.ReactNode;
+    /** Optional icon name before the label. */
+    icon?: string;
 }
 export { IProps_5 as IItemProps }
 export { IProps_5 as IMenuItemProps }
@@ -74,7 +74,7 @@ export declare const Menu: TMenuCompoundComponent;
  *     <Button>Actions</Button>
  *   </Menu.Trigger>
  *   <Menu.Content>
- *     <Menu.Item icon={<Icon />}>Edit</Menu.Item>
+ *     <Menu.Item icon="edit">Edit</Menu.Item>
  *     <Menu.Item danger>Delete</Menu.Item>
  *   </Menu.Content>
  * </Menu>