@lazar-ui/kit 0.2.0 → 0.2.2

package/dist/tabs.js

@@ -1,79 +1,79 @@
-import { jsx as l, jsxs as y } from "react/jsx-runtime";
+import { jsx as l, jsxs as z } from "react/jsx-runtime";
 import { c as C } from "./clsx-OuTLNxxd.mjs";
-import m, { createContext as D, useContext as E, useState as L, useId as U } from "react";
+import m, { createContext as D, useContext as E, useState as L, useId as y } from "react";
 import { g as I } from "./getVariantClassName-D7Nhpuec.mjs";
-import { i as k } from "./isValidReactNode-CmYwTWCE.mjs";
-import './tabs.css';const x = D(null), A = () => {
-  const t = E(x);
+import { i as U } from "./isValidReactNode-CmYwTWCE.mjs";
+import './tabs.css';const g = D(null), x = () => {
+  const t = E(g);
   if (!t)
     throw new Error("useTabsContext should be used inside Tabs component");
   return t;
-}, f = (t, e, s) => `${t}-${s}-${e}`, S = (t) => {
-  const { defaultActiveIndex: e = 0, children: s, onTabChange: n, variant: o } = t, [i, d] = L(e), r = U(), u = (a) => {
-    a !== i && (d(a), n && n(a));
-  }, c = (a) => f(r, a, "panel"), v = (a) => f(r, a, "tab");
-  return /* @__PURE__ */ l(x.Provider, { value: { activeIndex: i, baseId: r, getPanelId: c, getTabId: v, setActiveTab: u, variant: o }, children: s });
+}, p = (t, n, s) => `${t}-${s}-${n}`, k = (t) => {
+  const { defaultActiveIndex: n = 0, children: s, onTabChange: a, variant: o } = t, [r, d] = L(n), i = y(), u = (e) => {
+    e !== r && (d(e), a && a(e));
+  }, c = (e) => p(i, e, "panel"), v = (e) => p(i, e, "tab");
+  return /* @__PURE__ */ l(g.Provider, { value: { activeIndex: r, baseId: i, getPanelId: c, getTabId: v, setActiveTab: u, variant: o }, children: s });
 }, h = "Tabs";
-var p = ((t) => (t.PANEL = `${h}.Panel`, t.TAB = `${h}.Tab`, t))(p || {}), N = /* @__PURE__ */ ((t) => (t.BUTTONS = "buttons", t.DEFAULT = "default", t))(N || {});
-const w = "_root_9eoad_1", O = "_disabled_9eoad_5", j = "_variantDefault_9eoad_9", F = "_active_9eoad_22", M = "_variantButtons_9eoad_26", _ = {
-  root: w,
-  disabled: O,
-  variantDefault: j,
-  active: F,
-  variantButtons: M
-}, P = (t) => {
-  const { disabled: e = !1, label: s, index: n = 0, tabIndex: o = 0 } = t, { activeIndex: i, getPanelId: d, getTabId: r, setActiveTab: u, variant: c } = A(), v = d(n), a = r(n), T = i === n, B = C(_.root, I("variant", c, _), {
+var f = ((t) => (t.PANEL = `${h}.Panel`, t.TAB = `${h}.Tab`, t))(f || {}), A = /* @__PURE__ */ ((t) => (t.BUTTONS = "buttons", t.DEFAULT = "default", t))(A || {});
+const S = "_root_11zii_1", w = "_disabled_11zii_5", O = "_variantDefault_11zii_9", j = "_active_11zii_22", F = "_variantButtons_11zii_26", _ = {
+  root: S,
+  disabled: w,
+  variantDefault: O,
+  active: j,
+  variantButtons: F
+}, N = (t) => {
+  const { disabled: n = !1, label: s, index: a = 0, tabIndex: o = 0 } = t, { activeIndex: r, getPanelId: d, getTabId: i, setActiveTab: u, variant: c } = x(), v = d(a), e = i(a), T = r === a, B = C(_.root, I("variant", c, _), {
     [_.active]: T,
-    [_.disabled]: e
+    [_.disabled]: n
   });
   return /* @__PURE__ */ l(
     "button",
     {
       "aria-selected": T,
       "aria-controls": v,
-      "aria-disabled": e,
+      "aria-disabled": n,
       className: B,
-      disabled: e,
-      id: a,
+      disabled: n,
+      id: e,
       onClick: () => {
-        e || u(n);
+        n || u(a);
       },
       role: "tab",
-      tabIndex: e ? -1 : o,
+      tabIndex: n ? -1 : o,
       children: s
     }
   );
 };
-P.displayName = `${p.TAB}`;
-const $ = (t) => {
-  const { panels: e } = t, { activeIndex: s, getPanelId: n } = A(), o = n(s);
-  return /* @__PURE__ */ l("div", { id: o, children: e[s] });
+N.displayName = `${f.TAB}`;
+const P = (t) => {
+  const { panels: n } = t, { activeIndex: s, getPanelId: a } = x(), o = a(s);
+  return /* @__PURE__ */ l("div", { id: o, children: n[s] });
 };
-$.displayName = `${p.PANEL}`;
-const R = "_root_1piy6_20", V = "_variantDefault_1piy6_23", Y = "_list_1piy6_23", q = "_variantButtons_1piy6_32", z = "_panel_1piy6_45", b = {
-  root: R,
-  variantDefault: V,
-  list: Y,
-  variantButtons: q,
-  panel: z
-}, G = [p.TAB], g = (t) => {
-  const { defaultActiveIndex: e = 0, children: s, onChange: n, variant: o = N.DEFAULT } = t, i = [], d = C(b.root, I("variant", o, b));
-  let r = !1;
+P.displayName = `${f.PANEL}`;
+const M = "_root_ndfzg_20", R = "_variantDefault_ndfzg_23", V = "_list_ndfzg_23", Y = "_variantButtons_ndfzg_32", q = "_panel_ndfzg_45", b = {
+  root: M,
+  variantDefault: R,
+  list: V,
+  variantButtons: Y,
+  panel: q
+}, G = [f.TAB], $ = (t) => {
+  const { defaultActiveIndex: n = 0, children: s, onChange: a, variant: o = A.DEFAULT } = t, r = [], d = C(b.root, I("variant", o, b));
+  let i = !1;
   const u = (c, v) => {
-    if (!k(G, c))
+    if (!U(G, c))
       return null;
-    const { children: a = null } = c.props;
-    return i.push(a), a && (r = !0), m.cloneElement(c, { index: v });
+    const { children: e = null } = c.props;
+    return r.push(e), e && (i = !0), m.cloneElement(c, { index: v });
   };
-  return /* @__PURE__ */ l(S, { defaultActiveIndex: e, onTabChange: n, variant: o, children: /* @__PURE__ */ y("div", { className: d, children: [
+  return /* @__PURE__ */ l(k, { defaultActiveIndex: n, onTabChange: a, variant: o, children: /* @__PURE__ */ z("div", { className: d, children: [
     /* @__PURE__ */ l("div", { className: b.list, children: m.Children.map(s, u) }),
-    r && /* @__PURE__ */ l("div", { className: b.panel, children: /* @__PURE__ */ l($, { panels: i }) })
+    i && /* @__PURE__ */ l("div", { className: b.panel, children: /* @__PURE__ */ l(P, { panels: r }) })
   ] }) });
 };
-g.displayName = "Tabs";
-const H = g;
-H.Tab = P;
+$.displayName = "Tabs";
+const H = $;
+H.Tab = N;
 export {
-  N as ETabsVariant,
+  A as ETabsVariant,
   H as Tabs
 };

package/dist/textarea.css

@@ -1 +1 @@
-:root{--textarea-bg: var(--color-background-primary);--textarea-border: var(--color-border-primary);--textarea-border-hover: var(--color-text-tertiary);--textarea-border-focus: var(--color-border-focus);--textarea-border-error: var(--color-border-focus-error);--textarea-text: var(--color-text-primary);--textarea-text-disabled: var(--color-text-disabled);--textarea-placeholder: var(--color-text-tertiary);--textarea-radius: var(--radius-1);--textarea-shadow: var(--shadow-xs)}._root_1ntao_14{background:var(--textarea-bg);border:1px solid var(--textarea-border);border-radius:var(--textarea-radius);box-shadow:var(--textarea-shadow);color:var(--textarea-text);display:block;font-family:inherit;min-height:80px;outline:none;position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_1ntao_14::placeholder{color:var(--textarea-placeholder)}._root_1ntao_14:hover{border-color:var(--textarea-border-hover)}._root_1ntao_14:focus{border-color:var(--textarea-border-focus);box-shadow:0 0 0 1px var(--textarea-border-focus)}._root_1ntao_14:disabled{background:var(--color-background-disabled);border-color:var(--color-border-disabled);box-shadow:none;color:var(--textarea-text-disabled);cursor:not-allowed}._root_1ntao_14:disabled::placeholder{color:var(--textarea-text-disabled)}._root_1ntao_14:disabled:hover{border-color:var(--color-border-disabled)}._root_1ntao_14:disabled:focus{border-color:var(--color-border-disabled);box-shadow:none}._root_1ntao_14._invalid_1ntao_55{border-color:var(--textarea-border-error)}._root_1ntao_14._invalid_1ntao_55:focus{box-shadow:0 0 0 1px var(--textarea-border-error)}._sizeSm_1ntao_63{font-size:var(--font-size-sm);line-height:var(--line-height-sm);padding:var(--space-1) var(--space-2)}._sizeMd_1ntao_69{font-size:var(--font-size-md);line-height:var(--line-height-md);padding:var(--space-2) var(--space-3)}._sizeLg_1ntao_75{font-size:var(--font-size-lg);line-height:var(--line-height-lg);padding:var(--space-3) var(--space-4)}._resizeNone_1ntao_82{resize:none}._resizeVertical_1ntao_86{resize:vertical}._resizeBoth_1ntao_90{resize:both}
+:root{--textarea-bg: var(--lui-color-background-primary);--textarea-border: var(--lui-color-border-primary);--textarea-border-hover: var(--lui-color-text-tertiary);--textarea-border-focus: var(--lui-color-border-focus);--textarea-border-error: var(--lui-color-border-focus-error);--textarea-text: var(--lui-color-text-primary);--textarea-text-disabled: var(--lui-color-text-disabled);--textarea-placeholder: var(--lui-color-text-tertiary);--textarea-radius: var(--lui-radius-1);--textarea-shadow: var(--lui-shadow-xs)}._root_n07z1_14{background:var(--textarea-bg);border:1px solid var(--textarea-border);border-radius:var(--textarea-radius);box-shadow:var(--textarea-shadow);color:var(--textarea-text);display:block;font-family:inherit;min-height:80px;outline:none;position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_n07z1_14::placeholder{color:var(--textarea-placeholder)}._root_n07z1_14:hover{border-color:var(--textarea-border-hover)}._root_n07z1_14:focus{border-color:var(--textarea-border-focus);box-shadow:0 0 0 1px var(--textarea-border-focus)}._root_n07z1_14:disabled{background:var(--lui-color-background-disabled);border-color:var(--lui-color-border-disabled);box-shadow:none;color:var(--textarea-text-disabled);cursor:not-allowed}._root_n07z1_14:disabled::placeholder{color:var(--textarea-text-disabled)}._root_n07z1_14:disabled:hover{border-color:var(--lui-color-border-disabled)}._root_n07z1_14:disabled:focus{border-color:var(--lui-color-border-disabled);box-shadow:none}._root_n07z1_14._invalid_n07z1_55{border-color:var(--textarea-border-error)}._root_n07z1_14._invalid_n07z1_55:focus{box-shadow:0 0 0 1px var(--textarea-border-error)}._sizeSm_n07z1_63{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm);padding:var(--lui-space-1) var(--lui-space-2)}._sizeMd_n07z1_69{font-size:var(--lui-font-size-md);line-height:var(--line-height-md);padding:var(--lui-space-2) var(--lui-space-3)}._sizeLg_n07z1_75{font-size:var(--lui-font-size-lg);line-height:var(--line-height-lg);padding:var(--lui-space-3) var(--lui-space-4)}._resizeNone_n07z1_82{resize:none}._resizeVertical_n07z1_86{resize:vertical}._resizeBoth_n07z1_90{resize:both}

package/dist/textarea.js

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
 import { c as g } from "./clsx-OuTLNxxd.mjs";
 import { g as s } from "./getVariantClassName-D7Nhpuec.mjs";
-import './textarea.css';const h = "Textarea", N = "_root_1ntao_14", v = "_invalid_1ntao_55", x = "_sizeSm_1ntao_63", C = "_sizeMd_1ntao_69", p = "_sizeLg_1ntao_75", f = "_resizeNone_1ntao_82", u = "_resizeVertical_1ntao_86", B = "_resizeBoth_1ntao_90", e = {
+import './textarea.css';const h = "Textarea", N = "_root_n07z1_14", v = "_invalid_n07z1_55", x = "_sizeSm_n07z1_63", C = "_sizeMd_n07z1_69", p = "_sizeLg_n07z1_75", f = "_resizeNone_n07z1_82", u = "_resizeVertical_n07z1_86", B = "_resizeBoth_n07z1_90", e = {
   root: N,
   invalid: v,
   sizeSm: x,
@@ -12,31 +12,31 @@ import './textarea.css';const h = "Textarea", N = "_root_1ntao_14", v = "_invali
   resizeBoth: B
 }, L = (o) => {
   const {
-    invalid: t = !1,
-    resize: a = "vertical",
-    rows: n = 3,
-    size: i = "md",
-    onChange: r,
-    onBlur: _,
-    onFocus: c,
-    ...z
+    invalid: n = !1,
+    resize: i = "vertical",
+    rows: t = 3,
+    size: r = "md",
+    onChange: a,
+    onBlur: z,
+    onFocus: _,
+    ...c
   } = o, l = g(
     e.root,
-    s("size", i, e),
-    s("resize", a, e),
-    t && e.invalid
+    s("size", r, e),
+    s("resize", i, e),
+    n && e.invalid
   );
   return /* @__PURE__ */ d(
     "textarea",
     {
-      ...z,
+      ...c,
       className: l,
       onChange: (m) => {
-        r?.(m.target.value);
+        a?.(m.target.value);
       },
-      onBlur: _,
-      onFocus: c,
-      rows: n
+      onBlur: z,
+      onFocus: _,
+      rows: t
     }
   );
 };

package/dist/tooltip.css

@@ -1 +1 @@
-:root{--tooltip-bg: var(--palette-gray-900);--tooltip-text: var(--palette-white);--tooltip-radius: var(--radius-1);--tooltip-shadow: var(--shadow-sm);--tooltip-padding: var(--space-1) var(--space-2);--tooltip-font-size: var(--font-size-xs);--tooltip-z-index: 1100}._content_w5bk0_11{background:var(--tooltip-bg);border-radius:var(--tooltip-radius);box-shadow:var(--tooltip-shadow);color:var(--tooltip-text);font-size:var(--tooltip-font-size);outline:none;padding:var(--tooltip-padding);position:relative;z-index:var(--tooltip-z-index)}._content_w5bk0_11[data-placement*=bottom],._content_w5bk0_11[data-placement*=top],._content_w5bk0_11[data-placement*=left],._content_w5bk0_11[data-placement*=right]{animation:_tooltip-enter_w5bk0_1 .15s ease-out}._arrow_w5bk0_26{height:0;position:absolute;width:0}._content_w5bk0_11[data-placement*=bottom] ._arrow_w5bk0_26{border-bottom:6px solid var(--tooltip-bg);border-left:6px solid transparent;border-right:6px solid transparent;margin-left:-6px;top:-6px}._content_w5bk0_11[data-placement*=top] ._arrow_w5bk0_26{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--tooltip-bg);bottom:-6px;margin-left:-6px}._content_w5bk0_11[data-placement*=left] ._arrow_w5bk0_26{border-bottom:6px solid transparent;border-left:6px solid var(--tooltip-bg);border-top:6px solid transparent;margin-top:-6px;right:-6px}._content_w5bk0_11[data-placement*=right] ._arrow_w5bk0_26{border-bottom:6px solid transparent;border-right:6px solid var(--tooltip-bg);border-top:6px solid transparent;left:-6px;margin-top:-6px}@keyframes _tooltip-enter_w5bk0_1{0%{opacity:0}to{opacity:1}}
+:root{--tooltip-bg: var(--lui-palette-gray-900);--tooltip-text: var(--lui-palette-white);--tooltip-radius: var(--lui-radius-1);--tooltip-shadow: var(--lui-shadow-sm);--tooltip-padding: var(--lui-space-1) var(--lui-space-2);--tooltip-font-size: var(--lui-font-size-xs);--tooltip-z-index: 1100}._content_16k4n_11{background:var(--tooltip-bg);border-radius:var(--tooltip-radius);box-shadow:var(--tooltip-shadow);color:var(--tooltip-text);font-size:var(--tooltip-font-size);outline:none;padding:var(--tooltip-padding);position:relative;z-index:var(--tooltip-z-index)}._content_16k4n_11[data-placement*=bottom],._content_16k4n_11[data-placement*=top],._content_16k4n_11[data-placement*=left],._content_16k4n_11[data-placement*=right]{animation:_tooltip-enter_16k4n_1 .15s ease-out}._arrow_16k4n_26{height:0;position:absolute;width:0}._content_16k4n_11[data-placement*=bottom] ._arrow_16k4n_26{border-bottom:6px solid var(--tooltip-bg);border-left:6px solid transparent;border-right:6px solid transparent;margin-left:-6px;top:-6px}._content_16k4n_11[data-placement*=top] ._arrow_16k4n_26{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--tooltip-bg);bottom:-6px;margin-left:-6px}._content_16k4n_11[data-placement*=left] ._arrow_16k4n_26{border-bottom:6px solid transparent;border-left:6px solid var(--tooltip-bg);border-top:6px solid transparent;margin-top:-6px;right:-6px}._content_16k4n_11[data-placement*=right] ._arrow_16k4n_26{border-bottom:6px solid transparent;border-right:6px solid var(--tooltip-bg);border-top:6px solid transparent;left:-6px;margin-top:-6px}@keyframes _tooltip-enter_16k4n_1{0%{opacity:0}to{opacity:1}}

package/dist/tooltip.js

@@ -2,18 +2,18 @@ import { jsx as m, jsxs as O } from "react/jsx-runtime";
 import { createContext as $, useContext as D, useRef as p, useId as L, useState as P, useCallback as l, useEffect as A } from "react";
 import { s as F } from "./Overlay-OYo7gW8m.mjs";
 import { $ as M } from "./useOverlayPosition-CK3oEqVS.mjs";
-import './tooltip.css';const b = $(null), G = b.Provider, I = () => {
-  const e = D(b);
+import './tooltip.css';const w = $(null), G = w.Provider, E = () => {
+  const e = D(w);
   if (!e)
     throw new Error("Sub-component must be used within a Tooltip");
   return e;
 }, T = "Tooltip", S = 500, k = 150, Y = 6;
 var v = ((e) => (e.TRIGGER = `${T}.Trigger`, e.CONTENT = `${T}.Content`, e))(v || {});
-const j = "_content_w5bk0_11", H = "_arrow_w5bk0_26", w = {
+const j = "_content_16k4n_11", H = "_arrow_16k4n_26", I = {
   content: j,
   arrow: H
-}, E = (e) => {
-  const { children: a } = e, { cancelClose: u, close: r, contentId: s, isOpen: c, placement: d, triggerRef: n } = I(), o = p(null), {
+}, b = (e) => {
+  const { children: a } = e, { cancelClose: u, close: r, contentId: s, isOpen: c, placement: d, triggerRef: n } = E(), o = p(null), {
     arrowProps: f,
     overlayProps: i,
     placement: t
@@ -28,7 +28,7 @@ const j = "_content_w5bk0_11", H = "_arrow_w5bk0_26", w = {
   return c ? /* @__PURE__ */ m(F, { children: /* @__PURE__ */ O(
     "div",
     {
-      className: w.content,
+      className: I.content,
       "data-placement": t,
       id: s,
       onMouseEnter: u,
@@ -37,13 +37,13 @@ const j = "_content_w5bk0_11", H = "_arrow_w5bk0_26", w = {
       role: "tooltip",
       ...i,
       children: [
-        /* @__PURE__ */ m("div", { className: w.arrow, ...f }),
+        /* @__PURE__ */ m("div", { className: I.arrow, ...f }),
         a
       ]
     }
   ) }) : null;
 };
-E.displayName = v.CONTENT;
+b.displayName = v.CONTENT;
 const g = (e) => {
   const { children: a, placement: u = "top", showDelay: r = S, hideDelay: s = k } = e, c = p(null), d = L(), n = p(void 0), o = p(void 0), [f, i] = P(!1), t = l(() => {
     n.current !== void 0 && (clearTimeout(n.current), n.current = void 0), o.current !== void 0 && (clearTimeout(o.current), o.current = void 0);
@@ -76,7 +76,7 @@ const g = (e) => {
 };
 g.displayName = T;
 const C = (e) => {
-  const { children: a } = e, { close: u, contentId: r, open: s, openImmediate: c, closeImmediate: d, triggerRef: n } = I();
+  const { children: a } = e, { close: u, contentId: r, open: s, openImmediate: c, closeImmediate: d, triggerRef: n } = E();
   return /* @__PURE__ */ m(
     "span",
     {
@@ -94,7 +94,7 @@ const C = (e) => {
 C.displayName = v.TRIGGER;
 const R = g;
 R.Trigger = C;
-R.Content = E;
+R.Content = b;
 export {
   R as Tooltip
 };

package/dist/typography.css

@@ -0,0 +1 @@
+:root{--typography-headline-lg-size: 18px}._root_wamht_5{font-family:var(--lui-font-family-body);margin:0}._root_wamht_5._truncate_wamht_9{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._variantHeadline_wamht_15._sizeLg_wamht_15{font-size:var(--typography-headline-lg-size);font-weight:var(--lui-font-weight-semibold);letter-spacing:normal;line-height:var(--line-height-lg)}._variantHeadline_wamht_15._sizeXl_wamht_21{font-size:var(--lui-font-size-xl);font-weight:var(--lui-font-weight-semibold);letter-spacing:-.01em;line-height:var(--line-height-xl)}._variantHeadline_wamht_15._sizeXxl_wamht_27{font-size:var(--lui-font-size-2xl);font-weight:var(--lui-font-weight-bold);letter-spacing:-.02em;line-height:var(--line-height-2xl)}._variantBody_wamht_34._sizeXs_wamht_34{font-size:var(--lui-font-size-xs);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-xs)}._variantBody_wamht_34._sizeSm_wamht_40{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-sm)}._variantBody_wamht_34._sizeMd_wamht_46{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-md)}._variantBody_wamht_34._sizeLg_wamht_15{font-size:var(--lui-font-size-lg);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-lg)}._variantLabel_wamht_59._sizeXs_wamht_34{font-size:var(--lui-font-size-xs);font-weight:var(--lui-font-weight-medium);letter-spacing:.02em;line-height:var(--line-height-xs)}._variantLabel_wamht_59._sizeSm_wamht_40{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-medium);letter-spacing:normal;line-height:var(--line-height-sm)}._variantLabel_wamht_59._sizeMd_wamht_46{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-medium);letter-spacing:normal;line-height:var(--line-height-md)}._colorPrimary_wamht_78{color:var(--lui-color-text-primary)}._colorSecondary_wamht_82{color:var(--lui-color-text-secondary)}._colorTertiary_wamht_86{color:var(--lui-color-text-tertiary)}._colorDisabled_wamht_90{color:var(--lui-color-text-disabled)}._colorBrand_wamht_94{color:var(--lui-color-text-link)}

package/dist/typography.d.ts

@@ -0,0 +1,76 @@
+import { default as default_2 } from 'react';
+
+declare enum ETypographyColor {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    DISABLED = "disabled",
+    BRAND = "brand"
+}
+
+declare enum ETypographySize {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
+
+declare enum ETypographyVariant {
+    HEADLINE = "headline",
+    BODY = "body",
+    LABEL = "label"
+}
+
+export declare interface ITypographyProps extends default_2.PropsWithChildren {
+    /** HTML tag to render. Defaults: `h2` for headline, `p` for body, `span` for label. */
+    as?: TTypographyTag;
+    /** Color token variant. */
+    color?: TTypographyColor;
+    /** Ref to the root element. */
+    ref?: default_2.Ref<HTMLElement>;
+    /** Typography variant (stylistic group): `headline`, `body`, `label`. */
+    variant?: TTypographyVariant;
+    /** Typography size. */
+    size?: TTypographySize;
+    /** Truncate text with ellipsis (single-line). */
+    truncate?: boolean;
+}
+
+declare type TTypographyColor = `${ETypographyColor}`;
+
+declare type TTypographySize = `${ETypographySize}`;
+
+declare type TTypographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
+
+declare type TTypographyVariant = `${ETypographyVariant}`;
+
+/**
+ * Typography component. Renders text with preset combinations of font-size, font-weight, line-height, and letter-spacing.
+ *
+ * Supports three stylistic groups (`headline`, `body`, `label`) with various sizes.
+ * Each combination maps to predefined CSS tokens for consistent typography across the UI.
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="headline" size="xl">Headline XL</Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="body" size="md" color="secondary">
+ *   Body secondary text
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="label" size="sm" as="span">
+ *   Small label
+ * </Typography>
+ * ```
+ */
+export declare const Typography: default_2.FC<ITypographyProps>;
+
+export { }

package/dist/typography.js

@@ -0,0 +1,40 @@
+import d from "react";
+import { c as h } from "./clsx-OuTLNxxd.mjs";
+import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
+import './typography.css';const y = "Typography", z = "_root_wamht_5", w = "_truncate_wamht_9", p = "_variantHeadline_wamht_15", v = "_sizeLg_wamht_15", b = "_sizeXl_wamht_21", g = "_sizeXxl_wamht_27", X = "_variantBody_wamht_34", L = "_sizeXs_wamht_34", S = "_sizeSm_wamht_40", u = "_sizeMd_wamht_46", B = "_variantLabel_wamht_59", M = "_colorPrimary_wamht_78", T = "_colorSecondary_wamht_82", f = "_colorTertiary_wamht_86", x = "_colorDisabled_wamht_90", N = "_colorBrand_wamht_94", a = {
+  root: z,
+  truncate: w,
+  variantHeadline: p,
+  sizeLg: v,
+  sizeXl: b,
+  sizeXxl: g,
+  variantBody: X,
+  sizeXs: L,
+  sizeSm: S,
+  sizeMd: u,
+  variantLabel: B,
+  colorPrimary: M,
+  colorSecondary: T,
+  colorTertiary: f,
+  colorDisabled: x,
+  colorBrand: N
+}, D = (s) => {
+  const { as: e, children: n, color: t, ref: c, size: i = "sm", truncate: _ = !1, variant: r = "body" } = s, l = e || {
+    body: "p",
+    headline: "h2",
+    label: "span"
+  }[r] || "p", m = h(
+    a.root,
+    o("variant", r, a),
+    o("size", i, a),
+    t && o("color", t, a),
+    {
+      [a.truncate]: _
+    }
+  );
+  return d.createElement(l, { className: m, ref: c }, n);
+};
+D.displayName = y;
+export {
+  D as Typography
+};

package/dist/{useLocale-D2Z0JH0l.mjs → useLocale-DdHNhmvT.mjs}

@@ -1,6 +1,6 @@
-import { jsx as d } from "react/jsx-runtime";
-import { createContext as l, useMemo as i, useEffect as u, useContext as f } from "react";
-const c = l(null), r = {
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as g, useMemo as i, useEffect as u, useContext as m } from "react";
+const c = g(null), n = {
   dialog: {
     close: "Close"
   },
@@ -19,7 +19,7 @@ const c = l(null), r = {
     noOptions: "No options",
     placeholder: "Select..."
   }
-}, m = {
+}, f = {
   dialog: {
     close: "Закрыть"
   },
@@ -38,33 +38,33 @@ const c = l(null), r = {
     noOptions: "Нет вариантов",
     placeholder: "Выберите..."
   }
-}, h = { en: r, ru: m }, x = (e) => i(() => {
+}, h = { en: n, ru: f }, x = (e) => i(() => {
   if (!e)
-    return r;
+    return n;
   if (typeof e == "string")
-    return h[e] ?? r;
-  const n = { ...r };
-  for (const o of Object.keys(e)) {
-    const t = e[o];
-    t && typeof t == "object" && !Array.isArray(t) && (n[o] = {
-      ...n[o],
-      ...t
+    return h[e] ?? n;
+  const r = { ...n };
+  for (const t of Object.keys(e)) {
+    const o = e[t];
+    o && typeof o == "object" && !Array.isArray(o) && (r[t] = {
+      ...r[t],
+      ...o
     });
   }
-  return n;
-}, [e]), C = (e) => {
-  const { children: n, theme: o = "light", locale: t, themeTarget: s } = e, a = x(t);
+  return r;
+}, [e]), w = (e) => {
+  const { children: r, theme: t = "light", locale: o, themeTarget: s } = e, a = x(o);
   u(() => {
-    const g = s ?? document.documentElement;
-    g.dataset.theme = o;
-  }, [o, s]);
-  const p = i(() => ({ locale: a, theme: o }), [o, a]);
-  return /* @__PURE__ */ d(c.Provider, { value: p, children: n });
+    const d = s ?? document.documentElement;
+    d.dataset.theme = t;
+  }, [t, s]);
+  const p = i(() => ({ locale: a, theme: t }), [t, a]);
+  return /* @__PURE__ */ l(c.Provider, { value: p, children: r });
 };
-C.displayName = "ConfigProvider";
-const y = () => f(c)?.locale ?? r;
+w.displayName = "LazarUiProvider";
+const y = () => m(c)?.locale ?? n;
 export {
   c as C,
-  C as a,
+  w as L,
   y as u
 };

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@lazar-ui/kit",
-  "version": "0.2.0",
+  "version": "0.2.2",
+  "license": "MIT",
+  "description": "A component library for building admin panels, dashboards, and internal tools.",
+  "homepage": "https://lazar-ui.github.io/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anomalyco/lazar-ui.git",
+    "directory": "packages/kit"
+  },
+  "bugs": {
+    "url": "https://github.com/anomalyco/lazar-ui/issues"
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
@@ -57,7 +68,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.39.1",
     "jsdom": "^26.1.0",
-    "lodash.kebabcase": "4.1.1",
+    "lucide-react": "^1.17.0",
     "sass": "1.83.4",
     "typed-scss-modules": "^8.1.1",
     "typescript": "5.9.2",
@@ -69,6 +80,7 @@
   "peerDependencies": {
     "clsx": "2.1.1",
     "lodash": "4.17.21",
+    "lucide-react": "^1.17.0",
     "react": "^19.2.0",
     "react-aria": "^3.44.0",
     "react-dom": "^19.2.0",

package/dist/config-provider.js

@@ -1,14 +0,0 @@
-import { C as t } from "./useLocale-D2Z0JH0l.mjs";
-import { a as f, u } from "./useLocale-D2Z0JH0l.mjs";
-import { useContext as e } from "react";
-const i = () => {
-  const o = e(t);
-  if (!o)
-    throw new Error("useConfigContext must be used within a ConfigProvider");
-  return o;
-};
-export {
-  f as ConfigProvider,
-  i as useConfigContext,
-  u as useLocale
-};