@lazar-ui/kit 0.2.0 → 0.2.3

package/dist/accordion.d.ts

@@ -3,18 +3,46 @@ import { default as default_2 } from 'react';
 export declare const Accordion: TAccordionCompoundComponent;
 
 /**
- * Accordion container. Renders a vertically stacked list of expandable sections.
+ * Accordion container. Supports multi-select and single-select modes.
  *
  * Uses compound component pattern via `<Accordion.Item>`.
+ * In multi-select mode (default), items without a `value` prop manage their own
+ * open/close state independently. In single-select mode, items with a `value` prop
+ * are controlled by the Accordion via `defaultValue` (uncontrolled) or
+ * `value` + `onValueChange` (controlled).
  *
  * @example
+ * // Multi-select (default, items without `value`)
  * ```tsx
  * <Accordion>
  *   <Accordion.Item title="Section 1">
  *     Content for section 1
  *   </Accordion.Item>
  *   <Accordion.Item title="Section 2" open>
- *     Content for section 2
+ *     Content for section 2 (starts open)
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ *
+ * @example
+ * // Single-select (uncontrolled with `defaultValue`)
+ * ```tsx
+ * <Accordion defaultValue="tab2">
+ *   <Accordion.Item value="tab1" title="Section 1">
+ *     Content
+ *   </Accordion.Item>
+ *   <Accordion.Item value="tab2" title="Section 2">
+ *     Content
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ *
+ * @example
+ * // Single-select (controlled with `value` + `onValueChange`)
+ * ```tsx
+ * <Accordion value={value} onValueChange={setValue}>
+ *   <Accordion.Item value="tab1" title="Section 1">
+ *     Content
  *   </Accordion.Item>
  * </Accordion>
  * ```
@@ -22,25 +50,47 @@ export declare const Accordion: TAccordionCompoundComponent;
 declare const Accordion_2: default_2.FC<IAccordionProps>;
 
 export declare interface IAccordionProps extends default_2.PropsWithChildren {
+    /** Controlled open item value. */
+    value?: string | null;
+    /** Callback when open item changes. */
+    onValueChange?: (value: string | null) => void;
+    /** Default open item value for uncontrolled mode. */
+    defaultValue?: string | null;
 }
 
 declare interface IProps extends default_2.PropsWithChildren {
-    /** Whether the item is open. */
+    /** Unique value for accordion control mode. */
+    value?: string;
+    /** Icon name displayed before the title. */
+    icon?: string;
+    /** Controlled open state. */
     open?: boolean;
-    /** Handler for  */
+    /** Callback when open state changes. */
     onOpenChange?: (isOpen: boolean) => void;
-    /** Title. */
+    /** Item title text. */
     title: string;
 }
 
 /**
- * Accordion item sub-component. Manages its own open/closed state.
- * Supports controlled mode via `open` and `onOpenChange`.
+ * Accordion item. Must be a direct child of `<Accordion>`.
+ *
+ * Can be used standalone without a `value` prop (multi-select, each item manages
+ * its own open state independently) or with a `value` prop for single-select mode
+ * controlled by the parent Accordion via `defaultValue` or `value` + `onValueChange`.
+ *
+ * @example
+ * // Standalone without `value` (multi-select)
+ * ```tsx
+ * <Accordion.Item title="Settings" icon="settings">
+ *   Settings content
+ * </Accordion.Item>
+ * ```
  *
  * @example
+ * // With `value` for single-select
  * ```tsx
- * <Accordion.Item title="Controlled" open onOpenChange={(isOpen) => console.log(isOpen)}>
- *   Content
+ * <Accordion.Item value="settings" title="Settings">
+ *   Settings content
  * </Accordion.Item>
  * ```
  */

package/dist/accordion.js

@@ -1,48 +1,66 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import u, { useState as v } from "react";
-import { i as x } from "./isValidReactNode-CmYwTWCE.mjs";
-import { c as d } from "./clsx-OuTLNxxd.mjs";
-import './accordion.css';const a = "Accordion";
-var m = /* @__PURE__ */ ((n) => (n.ITEM = "Accordion.Item", n))(m || {});
-const A = "_root_5n2yo_5", I = {
-  root: A
-}, f = [m.ITEM], _ = (n) => {
-  const { children: c } = n, t = (s) => x(f, s) ? s : null;
-  return /* @__PURE__ */ e("div", { className: I.root, children: u.Children.map(c, t) });
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import T, { createContext as O, useContext as E, useState as g, useCallback as v } from "react";
+import { i as y } from "./isValidReactNode-CmYwTWCE.mjs";
+import { c as $ } from "./clsx-OuTLNxxd.mjs";
+import { I as M } from "./Icon-flib0kme.mjs";
+import './accordion.css';const f = O(null), P = () => E(f), N = "Accordion";
+var I = /* @__PURE__ */ ((r) => (r.ITEM = "Accordion.Item", r))(I || {});
+const S = "_root_grshw_5", b = {
+  root: S
+}, k = [I.ITEM], x = (r) => {
+  const { children: m, defaultValue: u = null, onValueChange: s, value: o } = r, d = o !== void 0, [t, l] = g(u);
+  let e;
+  d ? e = o ?? null : e = t;
+  const p = v(
+    (n) => {
+      let i;
+      e === n ? i = null : i = n, d || l(i), s?.(i);
+    },
+    [e, d, s]
+  ), _ = (n) => y(k, n) ? n : null;
+  return /* @__PURE__ */ a(f.Provider, { value: { onItemToggle: p, openValue: e }, children: /* @__PURE__ */ a("div", { className: b.root, children: T.Children.map(m, _) }) });
 };
-_.displayName = a;
-const T = "_root_m3edb_2", E = "_open_m3edb_14", g = "_description_m3edb_17", w = "_content_m3edb_23", y = "_icons_m3edb_27", O = "_icon_m3edb_27", $ = "_show_m3edb_41", k = "_collapse_m3edb_44", M = "_expand_m3edb_44", S = "_title_m3edb_59", o = {
-  root: T,
-  open: E,
-  description: g,
-  content: w,
-  icons: y,
-  icon: O,
-  show: $,
-  collapse: k,
-  expand: M,
-  title: S
-}, p = (n) => {
-  const { children: c, onOpenChange: t, open: s = !1, title: h } = n, [i, N] = v(s), C = d(o.root, { [o.open]: i });
-  return /* @__PURE__ */ r("div", { className: C, onClick: () => {
-    N((b) => {
-      const l = !b;
-      return t && t(l), l;
+x.displayName = N;
+const j = "_root_z83hn_7", B = "_trigger_z83hn_11", L = "_open_z83hn_27", U = "_title_z83hn_32", w = "_icon_z83hn_41", D = "_chevron_z83hn_46", R = "_content_z83hn_66", c = {
+  root: j,
+  trigger: B,
+  open: L,
+  title: U,
+  icon: w,
+  chevron: D,
+  content: R
+}, A = (r) => {
+  const { children: m, icon: u, onOpenChange: s, open: o, title: d, value: t } = r, l = P(), e = l && t !== void 0, [p, _] = g(!1);
+  let n;
+  e ? n = l.openValue === t : o !== void 0 ? n = o : n = p;
+  const i = v(() => {
+    if (e && t !== void 0) {
+      l.onItemToggle(t);
+      return;
+    }
+    if (o !== void 0) {
+      s?.(!o);
+      return;
+    }
+    _((z) => {
+      const C = !z;
+      return s?.(C), C;
     });
-  }, children: [
-    /* @__PURE__ */ r("div", { className: o.icons, children: [
-      /* @__PURE__ */ e("div", { className: d(o.icon, o.collapse, { [o.show]: i }) }),
-      /* @__PURE__ */ e("div", { className: d(o.icon, o.expand, { [o.show]: !i }) })
+  }, [e, l, t, o, s]), V = $(c.root, { [c.open]: n });
+  return /* @__PURE__ */ h("div", { className: V, children: [
+    /* @__PURE__ */ h("button", { className: c.trigger, onClick: i, type: "button", children: [
+      /* @__PURE__ */ h("span", { className: c.title, children: [
+        u && /* @__PURE__ */ a("span", { className: c.icon, children: /* @__PURE__ */ a(M, { name: u, size: 16 }) }),
+        d
+      ] }),
+      /* @__PURE__ */ a("span", { className: c.chevron })
     ] }),
-    /* @__PURE__ */ r("div", { className: o.content, children: [
-      /* @__PURE__ */ e("div", { className: o.title, children: h }),
-      /* @__PURE__ */ e("div", { className: o.description, children: c })
-    ] })
+    /* @__PURE__ */ a("div", { className: c.content, children: m })
   ] });
 };
-p.displayName = `${a}.Item`;
-const P = _;
-P.Item = p;
+A.displayName = `${N}.Item`;
+const Y = x;
+Y.Item = A;
 export {
-  P as Accordion
+  Y as Accordion
 };

package/dist/alert.css

@@ -1 +1 @@
-:root{--alert-font-size: var(--font-size-sm);--alert-line-height: var(--line-height-sm);--alert-padding-x: var(--space-4);--alert-padding-y: var(--space-3);--alert-radius: var(--radius-2)}._root_1l2y4_9{border-radius:var(--alert-radius);border-style:solid;border-width:1px;font-size:var(--alert-font-size);line-height:var(--alert-line-height);padding:var(--alert-padding-y) var(--alert-padding-x)}._variantDanger_1l2y4_18{--alert-color: var(--palette-red-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}._variantInfo_1l2y4_25{--alert-color: var(--palette-blue-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}._variantSuccess_1l2y4_32{--alert-color: var(--palette-green-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}._variantWarning_1l2y4_39{--alert-color: var(--palette-orange-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}
+:root{--alert-font-size: var(--lui-font-size-sm);--alert-line-height: var(--line-height-sm);--alert-padding-x: var(--lui-space-4);--alert-padding-y: var(--lui-space-3);--alert-radius: var(--lui-radius-2)}._root_1ibdz_9{border-radius:var(--alert-radius);border-style:solid;border-width:1px;font-size:var(--alert-font-size);line-height:var(--alert-line-height);padding:var(--alert-padding-y) var(--alert-padding-x)}._variantDanger_1ibdz_18{--alert-color: var(--lui-palette-red-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}._variantInfo_1ibdz_25{--alert-color: var(--lui-palette-blue-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}._variantSuccess_1ibdz_32{--alert-color: var(--lui-palette-green-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}._variantWarning_1ibdz_39{--alert-color: var(--lui-palette-orange-500);background:color-mix(in sRGB,var(--alert-color) 12%,transparent);border-color:color-mix(in sRGB,var(--alert-color) 24%,transparent);color:var(--alert-color)}

package/dist/alert.js

@@ -1,20 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as i } from "./clsx-OuTLNxxd.mjs";
+import { jsx as i } from "react/jsx-runtime";
+import { c as s } from "./clsx-OuTLNxxd.mjs";
 import { g as c } from "./getVariantClassName-D7Nhpuec.mjs";
-import './alert.css';const e = "Alert", l = "_root_1l2y4_9", _ = "_variantDanger_1l2y4_18", v = "_variantInfo_1l2y4_25", m = "_variantSuccess_1l2y4_32", g = "_variantWarning_1l2y4_39", a = {
-  root: l,
-  variantDanger: _,
-  variantInfo: v,
+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: g
-}, f = (n) => {
-  const { children: r, variant: t = "info" } = n, o = i(
+  variantWarning: d
+}, g = (n) => {
+  const { children: r, variant: t = "info" } = n, o = s(
     a.root,
     c("variant", t, a)
   );
-  return /* @__PURE__ */ s("div", { className: o, role: "alert", children: r });
+  return /* @__PURE__ */ i("div", { className: o, role: "alert", children: r });
 };
-f.displayName = e;
+g.displayName = e;
 export {
-  f as Alert
+  g as Alert
 };

package/dist/avatar.css

@@ -1 +1 @@
-:root{--avatar-radius: var(--radius-full);--avatar-font-weight: var(--font-weight-semibold);--avatar-font-size: var(--font-size-sm)}._root_1rc9y_7{align-items:center;background:var(--avatar-color);border-radius:var(--avatar-radius);color:var(--avatar-text-color);display:inline-flex;font-weight:var(--avatar-font-weight);justify-content:center;line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;vertical-align:middle}._image_1rc9y_21{height:100%;object-fit:cover;width:100%}._fallback_1rc9y_27{align-items:center;display:flex;font-size:var(--avatar-font-size);justify-content:center;line-height:1}._sizeSm_1rc9y_35{font-size:var(--font-size-xs);height:24px;width:24px}._sizeSm_1rc9y_35 ._fallback_1rc9y_27{font-size:var(--font-size-xs)}._sizeMd_1rc9y_44{height:32px;width:32px}._sizeMd_1rc9y_44 ._fallback_1rc9y_27{font-size:var(--font-size-sm)}._sizeLg_1rc9y_52{height:40px;width:40px}._sizeLg_1rc9y_52 ._fallback_1rc9y_27{font-size:var(--font-size-md)}._sizeXl_1rc9y_60{height:56px;width:56px}._sizeXl_1rc9y_60 ._fallback_1rc9y_27{font-size:var(--font-size-lg)}
+:root{--avatar-radius: var(--lui-radius-full);--avatar-font-weight: var(--lui-font-weight-semibold);--avatar-font-size: var(--lui-font-size-sm)}._root_1t32a_7{align-items:center;background:var(--avatar-color);border-radius:var(--avatar-radius);color:var(--avatar-text-color);display:inline-flex;font-weight:var(--avatar-font-weight);justify-content:center;line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;vertical-align:middle}._image_1t32a_21{height:100%;object-fit:cover;width:100%}._fallback_1t32a_27{align-items:center;display:flex;font-size:var(--avatar-font-size);justify-content:center;line-height:1}._sizeSm_1t32a_35{font-size:var(--lui-font-size-xs);height:24px;width:24px}._sizeSm_1t32a_35 ._fallback_1t32a_27{font-size:var(--lui-font-size-xs)}._sizeMd_1t32a_44{height:32px;width:32px}._sizeMd_1t32a_44 ._fallback_1t32a_27{font-size:var(--lui-font-size-sm)}._sizeLg_1t32a_52{height:40px;width:40px}._sizeLg_1t32a_52 ._fallback_1t32a_27{font-size:var(--lui-font-size-md)}._sizeXl_1t32a_60{height:56px;width:56px}._sizeXl_1t32a_60 ._fallback_1t32a_27{font-size:var(--lui-font-size-lg)}

package/dist/avatar.d.ts

@@ -6,7 +6,7 @@ import { default as default_2 } from 'react';
  * @example
  * ```tsx
  * <Avatar src="https://i.pravatar.cc/80" alt="User" />
- * <Avatar size="lg" color="var(--palette-blue-500)">JD</Avatar>
+ * <Avatar size="lg" color="var(--lui-palette-blue-500)">JD</Avatar>
  * ```
  */
 export declare const Avatar: default_2.FC<IProps>;
@@ -25,7 +25,7 @@ declare interface IProps extends default_2.PropsWithChildren {
     alt?: string;
     /** Size. */
     size?: TAvatarSize;
-    /** CSS background colour for the fallback state. Default: `var(--color-background-tertiary)`. */
+    /** CSS background colour for the fallback state. Default: `var(--lui-color-background-tertiary)`. */
     color?: string;
 }
 

package/dist/avatar.js

@@ -1,41 +1,41 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { useState as _ } from "react";
 import { c as g } from "./clsx-OuTLNxxd.mjs";
 import { g as z } from "./getVariantClassName-D7Nhpuec.mjs";
-import './avatar.css';const y = "Avatar", d = "_root_1rc9y_7", f = "_image_1rc9y_21", p = "_fallback_1rc9y_27", v = "_sizeSm_1rc9y_35", N = "_sizeMd_1rc9y_44", b = "_sizeLg_1rc9y_52", x = "_sizeXl_1rc9y_60", r = {
-  root: d,
-  image: f,
-  fallback: p,
-  sizeSm: v,
+import './avatar.css';const d = "Avatar", f = "_root_1t32a_7", p = "_image_1t32a_21", v = "_fallback_1t32a_27", u = "_sizeSm_1t32a_35", N = "_sizeMd_1t32a_44", b = "_sizeLg_1t32a_52", x = "_sizeXl_1t32a_60", a = {
+  root: f,
+  image: p,
+  fallback: v,
+  sizeSm: u,
   sizeMd: N,
   sizeLg: b,
   sizeXl: x
 }, k = (e) => {
-  const { src: s, alt: c = "", children: o, size: i = "md", color: t } = e, [l, m] = _(!1), n = g(
-    r.root,
-    z("size", i, r)
+  const { src: t, alt: i = "", children: o, size: c = "md", color: r } = e, [l, m] = _(!1), n = g(
+    a.root,
+    z("size", c, a)
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(
     "div",
     {
       className: n,
       style: {
-        "--avatar-color": t ?? "var(--color-background-tertiary)",
-        "--avatar-text-color": t ? "var(--color-text-on-brand)" : "var(--color-text-primary)"
+        "--avatar-color": r ?? "var(--lui-color-background-tertiary)",
+        "--avatar-text-color": r ? "var(--lui-color-text-on-brand)" : "var(--lui-color-text-primary)"
       },
-      children: s && !l ? /* @__PURE__ */ a(
+      children: t && !l ? /* @__PURE__ */ s(
         "img",
         {
-          className: r.image,
-          src: s,
-          alt: c,
+          className: a.image,
+          src: t,
+          alt: i,
           onError: () => m(!0)
         }
-      ) : o && /* @__PURE__ */ a("span", { className: r.fallback, children: o })
+      ) : o && /* @__PURE__ */ s("span", { className: a.fallback, children: o })
     }
   );
 };
-k.displayName = y;
+k.displayName = d;
 export {
   k as Avatar
 };

package/dist/badge.css

@@ -1 +1 @@
-:root{--badge-radius: var(--radius-full);--badge-font-weight: var(--font-weight-medium)}._root_9ayss_6{align-items:center;background:color-mix(in sRGB,var(--badge-color) 12%,transparent);border:1px solid color-mix(in sRGB,var(--badge-color) 24%,transparent);border-radius:var(--badge-radius);color:var(--badge-color);display:inline-flex;font-weight:var(--badge-font-weight);gap:var(--space-1);justify-content:center;line-height:1;white-space:nowrap;width:fit-content}._sizeSm_9ayss_21{font-size:var(--font-size-xs);line-height:var(--line-height-xs);padding:1px var(--space-2)}._sizeMd_9ayss_27{font-size:var(--font-size-sm);line-height:var(--line-height-sm);padding:1px var(--space-3)}._sizeLg_9ayss_33{font-size:var(--font-size-md);line-height:var(--line-height-md);padding:3px var(--space-4)}
+:root{--badge-radius: var(--lui-radius-full);--badge-font-weight: var(--lui-font-weight-medium)}._root_2cn5a_6{align-items:center;background:color-mix(in sRGB,var(--badge-color) 12%,transparent);border:1px solid color-mix(in sRGB,var(--badge-color) 24%,transparent);border-radius:var(--badge-radius);color:var(--badge-color);display:inline-flex;font-weight:var(--badge-font-weight);gap:var(--lui-space-1);justify-content:center;line-height:1;white-space:nowrap;width:fit-content}._sizeSm_2cn5a_21{font-size:var(--lui-font-size-xs);line-height:var(--line-height-xs);padding:1px var(--lui-space-2)}._sizeMd_2cn5a_27{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm);padding:1px var(--lui-space-3)}._sizeLg_2cn5a_33{font-size:var(--lui-font-size-md);line-height:var(--line-height-md);padding:3px var(--lui-space-4)}

package/dist/badge.d.ts

@@ -9,8 +9,8 @@ import { default as default_2 } from 'react';
  * @example
  * ```tsx
  * <Badge>Default</Badge>
- * <Badge color="var(--palette-orange-500)">Orange</Badge>
- * <Badge color="var(--color-text-success)" size="sm">Active</Badge>
+ * <Badge color="var(--lui-palette-orange-500)">Orange</Badge>
+ * <Badge color="var(--lui-color-text-success)" size="sm">Active</Badge>
  * ```
  */
 export declare const Badge: default_2.FC<IProps>;
@@ -22,7 +22,7 @@ declare enum EBadgeSize {
 }
 
 declare interface IProps extends default_2.PropsWithChildren {
-    /** CSS color value. Background is derived via `color-mix()`. Default: `var(--color-text-secondary)`. */
+    /** CSS color value. Background is derived via `color-mix()`. Default: `var(--lui-color-text-secondary)`. */
     color?: string;
     /** Size. */
     size?: TBadgeSize;

package/dist/badge.js

@@ -1,23 +1,23 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { c as i } from "./clsx-OuTLNxxd.mjs";
-import { g as m } from "./getVariantClassName-D7Nhpuec.mjs";
-import './badge.css';const n = "Badge", _ = "_root_9ayss_6", l = "_sizeSm_9ayss_21", z = "_sizeMd_9ayss_27", d = "_sizeLg_9ayss_33", s = {
+import { g as n } from "./getVariantClassName-D7Nhpuec.mjs";
+import './badge.css';const m = "Badge", _ = "_root_2cn5a_6", l = "_sizeSm_2cn5a_21", z = "_sizeMd_2cn5a_27", d = "_sizeLg_2cn5a_33", s = {
   root: _,
   sizeSm: l,
   sizeMd: z,
   sizeLg: d
 }, g = (o) => {
-  const { children: e, color: t, size: a = "md" } = o, r = i(s.root, m("size", a, s));
-  return /* @__PURE__ */ c(
+  const { children: e, color: t, size: a = "md" } = o, c = i(s.root, n("size", a, s));
+  return /* @__PURE__ */ r(
     "span",
     {
-      className: r,
-      style: { "--badge-color": t ?? "var(--color-text-secondary)" },
+      className: c,
+      style: { "--badge-color": t ?? "var(--lui-color-text-secondary)" },
       children: e
     }
   );
 };
-g.displayName = n;
+g.displayName = m;
 export {
   g as Badge
 };

package/dist/breadcrumbs.css

@@ -1 +1 @@
-:root{--breadcrumbs-font-size: var(--font-size-sm);--breadcrumbs-line-height: var(--line-height-sm);--breadcrumbs-gap: var(--space-1);--breadcrumbs-color-link: var(--color-text-secondary);--breadcrumbs-color-link-hover: var(--color-text-link-hover);--breadcrumbs-color-current: var(--color-text-primary);--breadcrumbs-color-separator: var(--color-text-quaternary);--breadcrumbs-font-weight-current: var(--font-weight-medium)}._root_b6jtc_12{display:flex}._list_b6jtc_16{align-items:center;display:flex;flex-wrap:wrap;gap:var(--breadcrumbs-gap);list-style:none;margin:0;padding:0}._item_b6jtc_26{align-items:center;display:inline-flex;gap:var(--breadcrumbs-gap)}._link_b6jtc_32{color:var(--breadcrumbs-color-link);font-size:var(--breadcrumbs-font-size);line-height:var(--breadcrumbs-line-height);text-decoration:none}._link_b6jtc_32:hover{color:var(--breadcrumbs-color-link-hover);text-decoration:underline}._label_b6jtc_43{color:var(--breadcrumbs-color-link);font-size:var(--breadcrumbs-font-size);line-height:var(--breadcrumbs-line-height)}._current_b6jtc_49{color:var(--breadcrumbs-color-current);font-weight:var(--breadcrumbs-font-weight-current)}._separator_b6jtc_54{color:var(--breadcrumbs-color-separator);font-size:var(--breadcrumbs-font-size);line-height:var(--breadcrumbs-line-height);-webkit-user-select:none;user-select:none}:root{--breadcrumbs-item-font-size: var(--font-size-sm);--breadcrumbs-item-line-height: var(--line-height-sm);--breadcrumbs-item-color-link: var(--color-text-secondary);--breadcrumbs-item-color-link-hover: var(--color-text-link-hover);--breadcrumbs-item-color-current: var(--color-text-primary);--breadcrumbs-item-font-weight-current: var(--font-weight-medium)}._link_1n28p_10{color:var(--breadcrumbs-item-color-link);font-size:var(--breadcrumbs-item-font-size);line-height:var(--breadcrumbs-item-line-height);text-decoration:none}._link_1n28p_10:hover{color:var(--breadcrumbs-item-color-link-hover);text-decoration:underline}._label_1n28p_21{color:var(--breadcrumbs-item-color-link);font-size:var(--breadcrumbs-item-font-size);line-height:var(--breadcrumbs-item-line-height)}._current_1n28p_27{color:var(--breadcrumbs-item-color-current);font-weight:var(--breadcrumbs-item-font-weight-current)}
+:root{--breadcrumbs-font-size: var(--lui-font-size-sm);--breadcrumbs-line-height: var(--line-height-sm);--breadcrumbs-gap: var(--lui-space-1);--breadcrumbs-color-link: var(--lui-color-text-secondary);--breadcrumbs-color-link-hover: var(--lui-color-text-link-hover);--breadcrumbs-color-current: var(--lui-color-text-primary);--breadcrumbs-color-separator: var(--lui-color-text-quaternary);--breadcrumbs-font-weight-current: var(--lui-font-weight-medium)}._root_w4o54_12{display:flex}._list_w4o54_16{align-items:center;display:flex;flex-wrap:wrap;gap:var(--breadcrumbs-gap);list-style:none;margin:0;padding:0}._item_w4o54_26{align-items:center;display:inline-flex;gap:var(--breadcrumbs-gap)}._link_w4o54_32{color:var(--breadcrumbs-color-link);font-size:var(--breadcrumbs-font-size);line-height:var(--breadcrumbs-line-height);text-decoration:none}._link_w4o54_32:hover{color:var(--breadcrumbs-color-link-hover);text-decoration:underline}._label_w4o54_43{color:var(--breadcrumbs-color-link);font-size:var(--breadcrumbs-font-size);line-height:var(--breadcrumbs-line-height)}._current_w4o54_49{color:var(--breadcrumbs-color-current);font-weight:var(--breadcrumbs-font-weight-current)}._separator_w4o54_54{color:var(--breadcrumbs-color-separator);font-size:var(--breadcrumbs-font-size);line-height:var(--breadcrumbs-line-height);-webkit-user-select:none;user-select:none}:root{--breadcrumbs-item-font-size: var(--lui-font-size-sm);--breadcrumbs-item-line-height: var(--line-height-sm);--breadcrumbs-item-color-link: var(--lui-color-text-secondary);--breadcrumbs-item-color-link-hover: var(--lui-color-text-link-hover);--breadcrumbs-item-color-current: var(--lui-color-text-primary);--breadcrumbs-item-font-weight-current: var(--lui-font-weight-medium)}._link_a6eyw_10{color:var(--breadcrumbs-item-color-link);font-size:var(--breadcrumbs-item-font-size);line-height:var(--breadcrumbs-item-line-height);text-decoration:none}._link_a6eyw_10:hover{color:var(--breadcrumbs-item-color-link-hover);text-decoration:underline}._label_a6eyw_21{color:var(--breadcrumbs-item-color-link);font-size:var(--breadcrumbs-item-font-size);line-height:var(--breadcrumbs-item-line-height)}._current_a6eyw_27{color:var(--breadcrumbs-item-color-current);font-weight:var(--breadcrumbs-item-font-weight-current)}

package/dist/breadcrumbs.js

@@ -1,63 +1,63 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { c as h } from "./clsx-OuTLNxxd.mjs";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { c as b } from "./clsx-OuTLNxxd.mjs";
 import k from "react";
 import { i as E } from "./isValidReactNode-CmYwTWCE.mjs";
 import "./camelCase-PtIYufW8.mjs";
 import './breadcrumbs.css';const _ = "Breadcrumbs", I = "/";
-var N = ((s) => (s.ITEM = `${_}.Item`, s))(N || {});
-const $ = "_root_b6jtc_12", A = "_list_b6jtc_16", C = "_item_b6jtc_26", T = "_link_b6jtc_32", g = "_label_b6jtc_43", B = "_current_b6jtc_49", L = "_separator_b6jtc_54", r = {
+var N = ((l) => (l.ITEM = `${_}.Item`, l))(N || {});
+const $ = "_root_w4o54_12", y = "_list_w4o54_16", A = "_item_w4o54_26", C = "_link_w4o54_32", T = "_label_w4o54_43", g = "_current_w4o54_49", B = "_separator_w4o54_54", r = {
   root: $,
-  list: A,
-  item: C,
-  link: T,
-  label: g,
-  current: B,
-  separator: L
-}, v = [N.ITEM], f = (s) => {
-  const { children: c, items: t, separator: o = I } = s;
-  if (t) {
-    if (t.length === 0)
+  list: y,
+  item: A,
+  link: C,
+  label: T,
+  current: g,
+  separator: B
+}, L = [N.ITEM], f = (l) => {
+  const { children: c, items: s, separator: o = I } = l;
+  if (s) {
+    if (s.length === 0)
       return null;
-    const n = (a, l) => {
-      const b = l === t.length - 1, p = a.current || b;
+    const t = (a, n) => {
+      const d = n === s.length - 1, p = a.current || d;
       let m;
       return a.href && !p ? m = /* @__PURE__ */ e("a", { className: r.link, href: a.href, children: a.label }) : p ? m = /* @__PURE__ */ e(
         "span",
         {
           "aria-current": "page",
-          className: h(r.label, r.current),
+          className: b(r.label, r.current),
           children: a.label
         }
-      ) : m = /* @__PURE__ */ e("span", { className: r.label, children: a.label }), /* @__PURE__ */ d("li", { className: r.item, children: [
+      ) : m = /* @__PURE__ */ e("span", { className: r.label, children: a.label }), /* @__PURE__ */ h("li", { className: r.item, children: [
         m,
-        !b && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r.separator, children: o })
-      ] }, l);
+        !d && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r.separator, children: o })
+      ] }, n);
     };
-    return /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", className: r.root, children: /* @__PURE__ */ e("ol", { className: r.list, children: t.map((a, l) => n(a, l)) }) });
+    return /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", className: r.root, children: /* @__PURE__ */ e("ol", { className: r.list, children: s.map((a, n) => t(a, n)) }) });
   }
   const i = [];
-  return k.Children.forEach(c, (n) => {
-    E(v, n) && i.push(n);
-  }), i.length === 0 ? null : /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", className: r.root, children: /* @__PURE__ */ e("ol", { className: r.list, children: i.map((n, a) => {
-    const l = a === i.length - 1;
-    return /* @__PURE__ */ d("li", { className: r.item, children: [
-      n,
-      !l && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r.separator, children: o })
+  return k.Children.forEach(c, (t) => {
+    E(L, t) && i.push(t);
+  }), i.length === 0 ? null : /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", className: r.root, children: /* @__PURE__ */ e("ol", { className: r.list, children: i.map((t, a) => {
+    const n = a === i.length - 1;
+    return /* @__PURE__ */ h("li", { className: r.item, children: [
+      t,
+      !n && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r.separator, children: o })
     ] }, a);
   }) }) });
 };
 f.displayName = _;
-const y = "_link_1n28p_10", M = "_label_1n28p_21", P = "_current_1n28p_27", u = {
-  link: y,
+const v = "_link_a6eyw_10", M = "_label_a6eyw_21", P = "_current_a6eyw_27", u = {
+  link: v,
   label: M,
   current: P
-}, j = (s) => {
-  const { children: c, href: t, current: o = !1 } = s;
-  return t && !o ? /* @__PURE__ */ e("a", { className: u.link, href: t, children: c }) : o ? /* @__PURE__ */ e("span", { "aria-current": "page", className: h(u.label, u.current), children: c }) : /* @__PURE__ */ e("span", { className: u.label, children: c });
+}, w = (l) => {
+  const { children: c, href: s, current: o = !1 } = l;
+  return s && !o ? /* @__PURE__ */ e("a", { className: u.link, href: s, children: c }) : o ? /* @__PURE__ */ e("span", { "aria-current": "page", className: b(u.label, u.current), children: c }) : /* @__PURE__ */ e("span", { className: u.label, children: c });
 };
-j.displayName = `${_}.Item`;
+w.displayName = `${_}.Item`;
 const S = f;
-S.Item = j;
+S.Item = w;
 export {
   S as Breadcrumbs
 };

package/dist/button.css

@@ -1 +1 @@
-:root{--button-bg: var(--color-background-brand);--button-bg-hover: var(--color-background-brand-hover);--button-text: var(--color-text-on-brand);--button-bg-secondary: var(--color-background-primary);--button-text-secondary: var(--color-text-secondary);--button-bg-secondary-hover: var(--color-background-secondary);--button-bg-danger: var(--color-background-error);--button-text-danger: var(--color-text-on-brand);--button-bg-danger-hover: var(--color-background-error-hover);--button-bg-disabled: var(--color-background-disabled);--button-text-disabled: var(--color-text-disabled);--button-border-disabled: var(--color-border-disabled);--button-focus-ring: var(--color-border-focus);--button-focus-ring-error: var(--color-border-focus-error);--button-radius: var(--radius-2);--button-border: var(--color-border-primary);--button-shadow: var(--shadow-xs)}._root_yed10_21{align-items:center;border:1px solid var(--button-border);border-radius:var(--button-radius);box-shadow:var(--button-shadow);display:flex;flex-direction:row;justify-content:center;outline-offset:2px;transition:background-color .2s,color .2s}._root_yed10_21._modeFilled_yed10_32._variantPrimary_yed10_32{background:var(--button-bg);color:var(--button-text)}._root_yed10_21._modeFilled_yed10_32._variantPrimary_yed10_32._pressed_yed10_36,._root_yed10_21._modeFilled_yed10_32._variantPrimary_yed10_32:active,._root_yed10_21._modeFilled_yed10_32._variantPrimary_yed10_32:hover{background:var(--button-bg-hover)}._root_yed10_21._modeFilled_yed10_32._variantPrimary_yed10_32:focus-visible{outline:2px solid var(--button-focus-ring)}._root_yed10_21._modeFilled_yed10_32._variantSecondary_yed10_42{background:var(--button-bg-secondary);color:var(--button-text-secondary)}._root_yed10_21._modeFilled_yed10_32._variantSecondary_yed10_42:active,._root_yed10_21._modeFilled_yed10_32._variantSecondary_yed10_42._pressed_yed10_36,._root_yed10_21._modeFilled_yed10_32._variantSecondary_yed10_42:hover{background:var(--button-bg-secondary-hover)}._root_yed10_21._modeFilled_yed10_32._variantSecondary_yed10_42:focus-visible{outline:2px solid var(--button-focus-ring)}._root_yed10_21._modeFilled_yed10_32._variantDanger_yed10_52{background:var(--button-bg-danger);color:var(--button-text-danger)}._root_yed10_21._modeFilled_yed10_32._variantDanger_yed10_52:active,._root_yed10_21._modeFilled_yed10_32._variantDanger_yed10_52._pressed_yed10_36,._root_yed10_21._modeFilled_yed10_32._variantDanger_yed10_52:hover{background:var(--button-bg-danger-hover)}._root_yed10_21._modeFilled_yed10_32._variantDanger_yed10_52:focus-visible{outline:2px solid var(--button-focus-ring-error)}._root_yed10_21._modeFilled_yed10_32:disabled,._root_yed10_21._modeFilled_yed10_32._disabled_yed10_62{background:var(--button-bg-disabled);border-color:var(--button-border-disabled);color:var(--button-text-disabled);cursor:not-allowed;pointer-events:none}._root_yed10_21._modeOutlined_yed10_69{background:transparent;box-shadow:none}._root_yed10_21._modeOutlined_yed10_69._variantPrimary_yed10_32{border-color:var(--color-background-brand);color:var(--color-background-brand)}._root_yed10_21._modeOutlined_yed10_69._variantPrimary_yed10_32:hover{background:var(--color-background-brand-secondary)}._root_yed10_21._modeOutlined_yed10_69._variantSecondary_yed10_42{color:var(--color-text-secondary)}._root_yed10_21._modeOutlined_yed10_69._variantSecondary_yed10_42:hover{background:var(--color-background-secondary)}._root_yed10_21._modeOutlined_yed10_69._variantDanger_yed10_52{border-color:var(--color-background-error);color:var(--color-background-error)}._root_yed10_21._modeOutlined_yed10_69._variantDanger_yed10_52:hover{background:var(--color-background-error);color:var(--color-text-on-brand)}._root_yed10_21._modeText_yed10_94{background:transparent;border-color:transparent;box-shadow:none}._root_yed10_21._modeText_yed10_94._variantPrimary_yed10_32{color:var(--color-background-brand)}._root_yed10_21._modeText_yed10_94._variantPrimary_yed10_32:hover{background:var(--color-background-brand-secondary)}._root_yed10_21._modeText_yed10_94._variantSecondary_yed10_42{color:var(--color-text-secondary)}._root_yed10_21._modeText_yed10_94._variantSecondary_yed10_42:hover{background:var(--color-background-secondary)}._root_yed10_21._modeText_yed10_94._variantDanger_yed10_52{color:var(--color-background-error)}._root_yed10_21._modeText_yed10_94._variantDanger_yed10_52:hover{background:var(--color-background-error);color:var(--color-text-on-brand)}._root_yed10_21._fullWidth_yed10_118{width:100%}._root_yed10_21._sizeSm_yed10_121{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-1);line-height:var(--line-height-sm);padding:var(--space-1) var(--space-3)}._root_yed10_21._sizeMd_yed10_128{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--space-1);line-height:var(--line-height-sm);padding:var(--space-2) var(--space-4)}._root_yed10_21._sizeLg_yed10_135{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);gap:var(--space-2);line-height:var(--line-height-md);padding:var(--space-3) var(--space-4)}
+:root{--button-bg: var(--lui-color-background-brand);--button-bg-hover: var(--lui-color-background-brand-hover);--button-text: var(--lui-color-text-on-brand);--button-bg-secondary: var(--lui-color-background-primary);--button-text-secondary: var(--lui-color-text-secondary);--button-bg-secondary-hover: var(--lui-color-background-secondary);--button-bg-danger: var(--lui-color-background-error);--button-text-danger: var(--lui-color-text-on-brand);--button-bg-danger-hover: var(--lui-color-background-error-hover);--button-bg-disabled: var(--lui-color-background-disabled);--button-text-disabled: var(--lui-color-text-disabled);--button-border-disabled: var(--lui-color-border-disabled);--button-focus-ring: var(--lui-color-border-focus);--button-focus-ring-error: var(--lui-color-border-focus-error);--button-radius: var(--lui-radius-2);--button-border: var(--lui-color-border-primary);--button-shadow: var(--lui-shadow-xs)}._root_26zpg_21{align-items:center;border:1px solid var(--button-border);border-radius:var(--button-radius);box-shadow:var(--button-shadow);display:flex;flex-direction:row;justify-content:center;outline-offset:2px;transition:background-color .2s,color .2s}._root_26zpg_21._modeFilled_26zpg_32._variantPrimary_26zpg_32{background:var(--button-bg);color:var(--button-text)}._root_26zpg_21._modeFilled_26zpg_32._variantPrimary_26zpg_32._pressed_26zpg_36,._root_26zpg_21._modeFilled_26zpg_32._variantPrimary_26zpg_32:active,._root_26zpg_21._modeFilled_26zpg_32._variantPrimary_26zpg_32:hover{background:var(--button-bg-hover)}._root_26zpg_21._modeFilled_26zpg_32._variantPrimary_26zpg_32:focus-visible{outline:2px solid var(--button-focus-ring)}._root_26zpg_21._modeFilled_26zpg_32._variantSecondary_26zpg_42{background:var(--button-bg-secondary);color:var(--button-text-secondary)}._root_26zpg_21._modeFilled_26zpg_32._variantSecondary_26zpg_42:active,._root_26zpg_21._modeFilled_26zpg_32._variantSecondary_26zpg_42._pressed_26zpg_36,._root_26zpg_21._modeFilled_26zpg_32._variantSecondary_26zpg_42:hover{background:var(--button-bg-secondary-hover)}._root_26zpg_21._modeFilled_26zpg_32._variantSecondary_26zpg_42:focus-visible{outline:2px solid var(--button-focus-ring)}._root_26zpg_21._modeFilled_26zpg_32._variantDanger_26zpg_52{background:var(--button-bg-danger);color:var(--button-text-danger)}._root_26zpg_21._modeFilled_26zpg_32._variantDanger_26zpg_52:active,._root_26zpg_21._modeFilled_26zpg_32._variantDanger_26zpg_52._pressed_26zpg_36,._root_26zpg_21._modeFilled_26zpg_32._variantDanger_26zpg_52:hover{background:var(--button-bg-danger-hover)}._root_26zpg_21._modeFilled_26zpg_32._variantDanger_26zpg_52:focus-visible{outline:2px solid var(--button-focus-ring-error)}._root_26zpg_21._modeFilled_26zpg_32:disabled,._root_26zpg_21._modeFilled_26zpg_32._disabled_26zpg_62{background:var(--button-bg-disabled);border-color:var(--button-border-disabled);color:var(--button-text-disabled);cursor:not-allowed;pointer-events:none}._root_26zpg_21._modeOutlined_26zpg_69{background:transparent;box-shadow:none}._root_26zpg_21._modeOutlined_26zpg_69._variantPrimary_26zpg_32{border-color:var(--lui-color-background-brand);color:var(--lui-color-background-brand)}._root_26zpg_21._modeOutlined_26zpg_69._variantPrimary_26zpg_32:hover{background:var(--lui-color-background-brand-secondary)}._root_26zpg_21._modeOutlined_26zpg_69._variantSecondary_26zpg_42{color:var(--lui-color-text-secondary)}._root_26zpg_21._modeOutlined_26zpg_69._variantSecondary_26zpg_42:hover{background:var(--lui-color-background-secondary)}._root_26zpg_21._modeOutlined_26zpg_69._variantDanger_26zpg_52{border-color:var(--lui-color-background-error);color:var(--lui-color-background-error)}._root_26zpg_21._modeOutlined_26zpg_69._variantDanger_26zpg_52:hover{background:var(--lui-color-background-error);color:var(--lui-color-text-on-brand)}._root_26zpg_21._modeText_26zpg_94{background:transparent;border-color:transparent;box-shadow:none}._root_26zpg_21._modeText_26zpg_94._variantPrimary_26zpg_32{color:var(--lui-color-background-brand)}._root_26zpg_21._modeText_26zpg_94._variantPrimary_26zpg_32:hover{background:var(--lui-color-background-brand-secondary)}._root_26zpg_21._modeText_26zpg_94._variantSecondary_26zpg_42{color:var(--lui-color-text-secondary)}._root_26zpg_21._modeText_26zpg_94._variantSecondary_26zpg_42:hover{background:var(--lui-color-background-secondary)}._root_26zpg_21._modeText_26zpg_94._variantDanger_26zpg_52{color:var(--lui-color-background-error)}._root_26zpg_21._modeText_26zpg_94._variantDanger_26zpg_52:hover{background:var(--lui-color-background-error);color:var(--lui-color-text-on-brand)}._root_26zpg_21._fullWidth_26zpg_118{width:100%}._root_26zpg_21._sizeSm_26zpg_121{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-semibold);gap:var(--lui-space-1);line-height:var(--line-height-sm);padding:var(--lui-space-1) var(--lui-space-3)}._root_26zpg_21._sizeMd_26zpg_128{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-semibold);gap:var(--lui-space-1);line-height:var(--line-height-sm);padding:var(--lui-space-2) var(--lui-space-4)}._root_26zpg_21._sizeLg_26zpg_135{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-semibold);gap:var(--lui-space-2);line-height:var(--line-height-md);padding:var(--lui-space-3) var(--lui-space-4)}._icon_26zpg_143{align-items:center;display:flex;flex:0 0 20px;height:20px;justify-content:center;width:20px}

package/dist/button.d.ts

@@ -53,6 +53,8 @@ export declare interface IButtonProps extends default_2.PropsWithChildren {
     target?: string;
     /** Tag name. */
     as?: 'a' | 'button';
+    /** Icon name. */
+    icon?: string;
     /** HTML button type. */
     type?: 'button' | 'submit' | 'reset';
 }