@lazar-ui/kit 0.1.0

package/dist/accordion.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--accordion-gap: var(--space-4)}._root_5n2yo_5{display:flex;flex-direction:column;gap:var(--accordion-gap);width:100%}._root_m3edb_2{border-radius:16px;cursor:pointer;display:flex;flex-direction:row;gap:24px;padding:32px;transition:background-color .3s}._root_m3edb_2:hover,._root_m3edb_2._open_m3edb_14{background:#f9fafb}._root_m3edb_2._open_m3edb_14 ._description_m3edb_17{max-height:99999px;opacity:1;transition:max-height .5s ease-in,opacity .5s ease-in}._content_m3edb_23{flex:1 1 auto}._icons_m3edb_27{flex:0 0 24px;height:24px;padding-top:2px;position:relative}._icon_m3edb_27{left:0;opacity:0;position:absolute;top:2px;transition:opacity .3s}._icon_m3edb_27._show_m3edb_41{opacity:1}._icon_m3edb_27._collapse_m3edb_44:after,._icon_m3edb_27._expand_m3edb_44:after{color:#333;display:block;font-size:24px;line-height:24px;text-align:center;width:24px}._icon_m3edb_27._collapse_m3edb_44:after{content:"—"}._icon_m3edb_27._expand_m3edb_44:after{content:"+"}._title_m3edb_59{color:#333;font-size:18px;font-weight:500;line-height:28px}._description_m3edb_17{color:#666;font-size:16px;font-weight:400;line-height:24px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease-out,opacity .5s ease-out}@media only screen and (max-width:1023px){._root_m3edb_2{gap:16px;padding:20px}}

package/dist/accordion.d.ts

@@ -0,0 +1,53 @@
+import { default as default_2 } from 'react';
+
+export declare const Accordion: TAccordionCompoundComponent;
+
+/**
+ * Accordion container. Renders a vertically stacked list of expandable sections.
+ *
+ * Uses compound component pattern via `<Accordion.Item>`.
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <Accordion.Item title="Section 1">
+ *     Content for section 1
+ *   </Accordion.Item>
+ *   <Accordion.Item title="Section 2" open>
+ *     Content for section 2
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion_2: default_2.FC<IAccordionProps>;
+
+export declare interface IAccordionProps extends default_2.PropsWithChildren {
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** Whether the item is open. */
+    open?: boolean;
+    /** Handler for  */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Title. */
+    title: string;
+}
+
+/**
+ * Accordion item sub-component. Manages its own open/closed state.
+ * Supports controlled mode via `open` and `onOpenChange`.
+ *
+ * @example
+ * ```tsx
+ * <Accordion.Item title="Controlled" open onOpenChange={(isOpen) => console.log(isOpen)}>
+ *   Content
+ * </Accordion.Item>
+ * ```
+ */
+declare const Item: default_2.FC<IProps>;
+
+declare type TAccordionCompoundComponent = typeof Accordion_2 & {
+    Item: typeof Item;
+};
+
+export { }

package/dist/accordion.js

@@ -0,0 +1,48 @@
+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) });
+};
+_.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;
+    });
+  }, 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 }) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: o.content, children: [
+      /* @__PURE__ */ e("div", { className: o.title, children: h }),
+      /* @__PURE__ */ e("div", { className: o.description, children: c })
+    ] })
+  ] });
+};
+p.displayName = `${a}.Item`;
+const P = _;
+P.Item = p;
+export {
+  P as Accordion
+};

package/dist/alert.css

@@ -0,0 +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)}

package/dist/alert.d.ts

@@ -0,0 +1,33 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Alert component. Renders a contextual notification banner.
+ *
+ * Supports four variants: info, success, warning, danger.
+ * Background and border are derived from the variant color via `color-mix()`.
+
+ * @example
+ * ```tsx
+ * <Alert>This is an info alert.</Alert>
+ * <Alert variant="success">Operation completed.</Alert>
+ * <Alert variant="warning">Check your input.</Alert>
+ * <Alert variant="danger">Something went wrong.</Alert>
+ * ```
+ */
+export declare const Alert: default_2.FC<IAlertProps>;
+
+declare enum EAlertVariant {
+    INFO = "info",
+    SUCCESS = "success",
+    WARNING = "warning",
+    DANGER = "danger"
+}
+
+export declare interface IAlertProps extends default_2.PropsWithChildren {
+    /** Visual variant. Default: 'info'. */
+    variant?: TAlertVariant;
+}
+
+export declare type TAlertVariant = `${EAlertVariant.INFO | EAlertVariant.SUCCESS | EAlertVariant.WARNING | EAlertVariant.DANGER}`;
+
+export { }

package/dist/alert.js

@@ -0,0 +1,20 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as i } 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,
+  variantSuccess: m,
+  variantWarning: g
+}, f = (n) => {
+  const { children: r, variant: t = "info" } = n, o = i(
+    a.root,
+    c("variant", t, a)
+  );
+  return /* @__PURE__ */ s("div", { className: o, role: "alert", children: r });
+};
+f.displayName = e;
+export {
+  f as Alert
+};

package/dist/avatar.css

@@ -0,0 +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)}

package/dist/avatar.d.ts

@@ -0,0 +1,34 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Avatar component. Renders an image with a textual fallback (children) when the image fails to load.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="https://i.pravatar.cc/80" alt="User" />
+ * <Avatar size="lg" color="var(--palette-blue-500)">JD</Avatar>
+ * ```
+ */
+export declare const Avatar: default_2.FC<IProps>;
+
+declare enum EAvatarSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** Image source URL. */
+    src?: string;
+    /** Alternative text for the image. */
+    alt?: string;
+    /** Size. */
+    size?: TAvatarSize;
+    /** CSS background colour for the fallback state. Default: `var(--color-background-tertiary)`. */
+    color?: string;
+}
+
+declare type TAvatarSize = `${EAvatarSize.SM | EAvatarSize.MD | EAvatarSize.LG | EAvatarSize.XL}`;
+
+export { }

package/dist/avatar.js

@@ -0,0 +1,41 @@
+import { jsx as a } 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,
+  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)
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: n,
+      style: {
+        "--avatar-color": t ?? "var(--color-background-tertiary)",
+        "--avatar-text-color": t ? "var(--color-text-on-brand)" : "var(--color-text-primary)"
+      },
+      children: s && !l ? /* @__PURE__ */ a(
+        "img",
+        {
+          className: r.image,
+          src: s,
+          alt: c,
+          onError: () => m(!0)
+        }
+      ) : o && /* @__PURE__ */ a("span", { className: r.fallback, children: o })
+    }
+  );
+};
+k.displayName = y;
+export {
+  k as Avatar
+};

package/dist/badge.css

@@ -0,0 +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)}

package/dist/badge.d.ts

@@ -0,0 +1,33 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Badge component. Renders a pill with text content and a derived background from the `color` prop.
+ *
+ * Background is computed via CSS `color-mix()` — pass any CSS color value as `color` and
+ * the component automatically generates a tinted background and subtle border.
+ *
+ * @example
+ * ```tsx
+ * <Badge>Default</Badge>
+ * <Badge color="var(--palette-orange-500)">Orange</Badge>
+ * <Badge color="var(--color-text-success)" size="sm">Active</Badge>
+ * ```
+ */
+export declare const Badge: default_2.FC<IProps>;
+
+declare enum EBadgeSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** CSS color value. Background is derived via `color-mix()`. Default: `var(--color-text-secondary)`. */
+    color?: string;
+    /** Size. */
+    size?: TBadgeSize;
+}
+
+declare type TBadgeSize = `${EBadgeSize.SM | EBadgeSize.MD | EBadgeSize.LG}`;
+
+export { }

package/dist/badge.js

@@ -0,0 +1,23 @@
+import { jsx as c } 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 = {
+  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(
+    "span",
+    {
+      className: r,
+      style: { "--badge-color": t ?? "var(--color-text-secondary)" },
+      children: e
+    }
+  );
+};
+g.displayName = n;
+export {
+  g as Badge
+};

package/dist/breadcrumbs.css

@@ -0,0 +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)}

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,80 @@
+import { default as default_2 } from 'react';
+
+export declare const Breadcrumbs: TBreadcrumbsCompoundComponent;
+
+/**
+ * Breadcrumbs navigation component. Renders a trail of links indicating the current page location.
+ *
+ * Supports two mutually exclusive modes:
+ * - **Array mode**: pass an `items` array prop.
+ * - **JSX mode**: pass `<Breadcrumbs.Item>` elements as children.
+ *
+ * @example
+ * ```tsx
+ * // Array mode
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Current Product', current: true },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // JSX mode
+ * <Breadcrumbs>
+ *   <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item href="/products">Products</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item current>Current Product</Breadcrumbs.Item>
+ * </Breadcrumbs>
+ * ```
+ */
+declare const Breadcrumbs_2: default_2.FC<IBreadcrumbsProps>;
+
+export declare interface IBreadcrumbsProps extends default_2.PropsWithChildren {
+    /** Array of breadcrumb items for data-driven usage. When provided, `children` are ignored. */
+    items?: TBreadcrumbItem[];
+    /** Custom separator rendered between breadcrumb items. Default: `'/'`. */
+    separator?: default_2.ReactNode;
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** Link URL. When omitted, renders a `<span>` instead of an `<a>`. */
+    href?: string;
+    /** Whether this item represents the current page. Sets `aria-current="page"`. */
+    current?: boolean;
+}
+
+/**
+ * Breadcrumbs item sub-component. Renders a single breadcrumb segment.
+ *
+ * Renders an `<a>` when `href` is provided and `current` is falsy.
+ * Renders a `<span>` with `aria-current="page"` when `current` is true.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+ * <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
+ * ```
+ */
+declare const Item: default_2.FC<IProps>;
+
+/**
+ * Descriptor for a single breadcrumb item in array mode.
+ */
+export declare type TBreadcrumbItem = {
+    /** Label text. */
+    label: string;
+    /** Link URL. When omitted or the item is the last, renders a `<span>`. */
+    href?: string;
+    /** Whether this item represents the current page. */
+    current?: boolean;
+};
+
+declare type TBreadcrumbsCompoundComponent = typeof Breadcrumbs_2 & {
+    Item: typeof Item;
+};
+
+export { }

package/dist/breadcrumbs.js

@@ -0,0 +1,63 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { c as h } 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 = {
+  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)
+      return null;
+    const n = (a, l) => {
+      const b = l === t.length - 1, p = a.current || b;
+      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),
+          children: a.label
+        }
+      ) : m = /* @__PURE__ */ e("span", { className: r.label, children: a.label }), /* @__PURE__ */ d("li", { className: r.item, children: [
+        m,
+        !b && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r.separator, children: o })
+      ] }, l);
+    };
+    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)) }) });
+  }
+  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 })
+    ] }, a);
+  }) }) });
+};
+f.displayName = _;
+const y = "_link_1n28p_10", M = "_label_1n28p_21", P = "_current_1n28p_27", u = {
+  link: y,
+  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 });
+};
+j.displayName = `${_}.Item`;
+const S = f;
+S.Item = j;
+export {
+  S as Breadcrumbs
+};

package/dist/button.css

@@ -0,0 +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)}

package/dist/button.d.ts

@@ -0,0 +1,66 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Button component. Renders a `<button>` or `<a>` element with support for size, variant, mode, and link behaviour.
+ *
+ * @example
+ * ```tsx
+ * <Button size="md" variant="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Outlined danger button as a link
+ * <Button as="a" href="/delete" variant="danger" mode="outlined">
+ *   Delete
+ * </Button>
+ * ```
+ */
+export declare const Button: default_2.FC<IButtonProps>;
+
+declare enum EButtonMode {
+    FILLED = "filled",
+    OUTLINED = "outlined",
+    TEXT = "text"
+}
+
+declare enum EButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    DANGER = "danger"
+}
+
+export declare interface IButtonProps extends default_2.PropsWithChildren {
+    /** Disable button. */
+    disabled?: boolean;
+    /** Stretch the component to the full width of the parent container. */
+    fullWidth?: boolean;
+    /** Visual mode: `'filled'` (default) — solid background, `'outlined'` — border only, `'text'` — no border or background. */
+    mode?: TButtonMode;
+    /** Event handler for click event. */
+    onClick?: () => void;
+    /** Size. */
+    size?: TButtonSize;
+    /** Variant. */
+    variant?: TButtonVariant;
+    /** Pressed. */
+    pressed?: boolean;
+    /** Link */
+    href?: string;
+    /** Link target */
+    target?: string;
+    /** Tag name. */
+    as?: 'a' | 'button';
+    /** HTML button type. */
+    type?: 'button' | 'submit' | 'reset';
+}
+
+declare type TButtonMode = `${EButtonMode.FILLED | EButtonMode.OUTLINED | EButtonMode.TEXT}`;
+
+declare type TButtonSize = 'sm' | 'md' | 'lg';
+
+declare type TButtonVariant = `${EButtonVariant.PRIMARY | EButtonVariant.SECONDARY | EButtonVariant.DANGER}`;
+
+export { }

package/dist/button.js

@@ -0,0 +1,46 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as u } from "./clsx-OuTLNxxd.mjs";
+import { g as s } from "./getVariantClassName-D7Nhpuec.mjs";
+import './button.css';const f = "Button", v = "_root_yed10_21", z = "_modeFilled_yed10_32", g = "_variantPrimary_yed10_32", h = "_pressed_yed10_36", S = "_variantSecondary_yed10_42", b = "_variantDanger_yed10_52", x = "_disabled_yed10_62", N = "_modeOutlined_yed10_69", W = "_modeText_yed10_94", C = "_fullWidth_yed10_118", D = "_sizeSm_yed10_121", L = "_sizeMd_yed10_128", M = "_sizeLg_yed10_135", e = {
+  root: v,
+  modeFilled: z,
+  variantPrimary: g,
+  pressed: h,
+  variantSecondary: S,
+  variantDanger: b,
+  disabled: x,
+  modeOutlined: N,
+  modeText: W,
+  fullWidth: C,
+  sizeSm: D,
+  sizeMd: L,
+  sizeLg: M
+}, P = (a) => {
+  const {
+    children: d,
+    disabled: t = !1,
+    fullWidth: i = !1,
+    mode: n = "filled",
+    onClick: r,
+    size: _ = "md",
+    variant: l = "primary",
+    pressed: m,
+    as: c = "button",
+    ...y
+  } = a, p = u(
+    e.root,
+    s("size", _, e),
+    s("variant", l, e),
+    s("mode", n, e),
+    {
+      [e.fullWidth]: i,
+      [e.pressed]: m,
+      [e.disabled]: t
+    }
+  );
+  return /* @__PURE__ */ o(c, { className: p, disabled: t, onClick: r, ...y, children: d && /* @__PURE__ */ o("span", { children: d }) });
+};
+P.displayName = f;
+export {
+  P as Button
+};