@lazar-ui/kit 0.1.0 → 0.2.2

package/dist/css/semantic.css

@@ -4,88 +4,88 @@
      ═══════════════════════════════════════════════════ */
 
   /* Background */
-  --color-background-brand: var(--palette-brand);
-  --color-background-brand-hover: var(--palette-brand-hover);
-  --color-background-brand-secondary: var(--palette-brand-secondary);
-  --color-background-primary: var(--palette-white);
-  --color-background-secondary: var(--palette-gray-50);
-  --color-background-tertiary: var(--palette-gray-100);
-  --color-background-disabled: var(--palette-gray-100);
-  --color-background-error: var(--palette-red-500);
-  --color-background-error-hover: var(--palette-red-600);
-  --color-background-overlay: var(--palette-overlay);
+  --lui-color-background-brand: var(--lui-palette-brand);
+  --lui-color-background-brand-hover: var(--lui-palette-brand-hover);
+  --lui-color-background-brand-secondary: var(--lui-palette-brand-secondary);
+  --lui-color-background-primary: var(--lui-palette-white);
+  --lui-color-background-secondary: var(--lui-palette-gray-50);
+  --lui-color-background-tertiary: var(--lui-palette-gray-100);
+  --lui-color-background-disabled: var(--lui-palette-gray-100);
+  --lui-color-background-error: var(--lui-palette-red-500);
+  --lui-color-background-error-hover: var(--lui-palette-red-600);
+  --lui-color-background-overlay: var(--lui-palette-overlay);
 
   /* Text */
-  --color-text-primary: var(--palette-gray-900);
-  --color-text-secondary: var(--palette-gray-600);
-  --color-text-tertiary: var(--palette-gray-500);
-  --color-text-quaternary: var(--palette-gray-300);
-  --color-text-disabled: var(--palette-gray-300);
-  --color-text-on-brand: var(--palette-white);
-  --color-text-on-dark: var(--palette-white);
-  --color-text-link: var(--palette-blue-500);
-  --color-text-link-hover: var(--palette-blue-600);
-  --color-text-error: var(--palette-red-500);
-  --color-text-error-hover: var(--palette-red-600);
-  --color-text-success: var(--palette-green-600);
-  --color-text-success-hover: var(--palette-green-600);
-  --color-text-warning: var(--palette-orange-500);
-  --color-text-warning-hover: var(--palette-orange-600);
+  --lui-color-text-primary: var(--lui-palette-gray-900);
+  --lui-color-text-secondary: var(--lui-palette-gray-600);
+  --lui-color-text-tertiary: var(--lui-palette-gray-500);
+  --lui-color-text-quaternary: var(--lui-palette-gray-300);
+  --lui-color-text-disabled: var(--lui-palette-gray-300);
+  --lui-color-text-on-brand: var(--lui-palette-white);
+  --lui-color-text-on-dark: var(--lui-palette-white);
+  --lui-color-text-link: var(--lui-palette-blue-500);
+  --lui-color-text-link-hover: var(--lui-palette-blue-600);
+  --lui-color-text-error: var(--lui-palette-red-500);
+  --lui-color-text-error-hover: var(--lui-palette-red-600);
+  --lui-color-text-success: var(--lui-palette-green-600);
+  --lui-color-text-success-hover: var(--lui-palette-green-600);
+  --lui-color-text-warning: var(--lui-palette-orange-500);
+  --lui-color-text-warning-hover: var(--lui-palette-orange-600);
 
   /* Border */
-  --color-border-primary: var(--palette-gray-200);
-  --color-border-secondary: var(--palette-gray-100);
-  --color-border-disabled: var(--palette-gray-200);
-  --color-border-disabled-subtle: var(--palette-gray-200);
-  --color-border-focus: var(--palette-brand);
-  --color-border-focus-error: var(--palette-red-500);
+  --lui-color-border-primary: var(--lui-palette-gray-200);
+  --lui-color-border-secondary: var(--lui-palette-gray-100);
+  --lui-color-border-disabled: var(--lui-palette-gray-200);
+  --lui-color-border-disabled-subtle: var(--lui-palette-gray-200);
+  --lui-color-border-focus: var(--lui-palette-brand);
+  --lui-color-border-focus-error: var(--lui-palette-red-500);
 
   /* ═══════════════════════════════════════════════════
      Space (base: 4px)
      ═══════════════════════════════════════════════════ */
 
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --space-14: 56px;
-  --space-16: 64px;
+  --lui-space-1: 4px;
+  --lui-space-2: 8px;
+  --lui-space-3: 12px;
+  --lui-space-4: 16px;
+  --lui-space-5: 20px;
+  --lui-space-6: 24px;
+  --lui-space-7: 28px;
+  --lui-space-8: 32px;
+  --lui-space-10: 40px;
+  --lui-space-12: 48px;
+  --lui-space-14: 56px;
+  --lui-space-16: 64px;
 
   /* ═══════════════════════════════════════════════════
      Radius
      ═══════════════════════════════════════════════════ */
 
-  --radius-1: 4px;
-  --radius-2: 8px;
-  --radius-3: 12px;
-  --radius-4: 16px;
-  --radius-full: 9999px;
+  --lui-radius-1: 4px;
+  --lui-radius-2: 8px;
+  --lui-radius-3: 12px;
+  --lui-radius-4: 16px;
+  --lui-radius-full: 9999px;
 
   /* ═══════════════════════════════════════════════════
      Font
      ═══════════════════════════════════════════════════ */
 
-  --font-family-body: "Inter", "Arial", "Helvetica", sans-serif;
+  --lui-font-family-body: "Inter", "Arial", "Helvetica", sans-serif;
 
   /* Font Sizes. */
-  --font-size-xs: 12px;
-  --font-size-sm: 13px;
-  --font-size-md: 14px;
-  --font-size-lg: 16px;
-  --font-size-xl: 20px;
-  --font-size-2xl: 24px;
+  --lui-font-size-xs: 12px;
+  --lui-font-size-sm: 13px;
+  --lui-font-size-md: 14px;
+  --lui-font-size-lg: 16px;
+  --lui-font-size-xl: 20px;
+  --lui-font-size-2xl: 24px;
 
   /* Font Weights. */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
+  --lui-font-weight-normal: 400;
+  --lui-font-weight-medium: 500;
+  --lui-font-weight-semibold: 600;
+  --lui-font-weight-bold: 700;
 
   /* Line-height на сетке 4px */
   --line-height-xs: 16px;
@@ -99,15 +99,15 @@
      Shadow
      ═══════════════════════════════════════════════════ */
 
-  --shadow-xs: 0 1px 2px 0 rgb(0, 0, 0 / 0.05);
-  --shadow-sm: 0 1px 3px 0 rgb(0, 0, 0 / 0.1), 0 1px 2px -1px rgb(0, 0, 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0, 0, 0 / 0.1), 0 2px 4px -2px rgb(0, 0, 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0, 0, 0 / 0.1), 0 4px 6px -4px rgb(0, 0, 0 / 0.1);
+  --lui-shadow-xs: 0 1px 2px 0 rgb(0, 0, 0 / 0.05);
+  --lui-shadow-sm: 0 1px 3px 0 rgb(0, 0, 0 / 0.1), 0 1px 2px -1px rgb(0, 0, 0 / 0.1);
+  --lui-shadow-md: 0 4px 6px -1px rgb(0, 0, 0 / 0.1), 0 2px 4px -2px rgb(0, 0, 0 / 0.1);
+  --lui-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0 / 0.1), 0 4px 6px -4px rgb(0, 0, 0 / 0.1);
 }
 
 [data-theme="dark"] {
-  --color-border-primary: var(--palette-gray-700);
-  --color-border-secondary: var(--palette-gray-600);
-  --color-border-disabled: var(--palette-gray-600);
-  --color-border-disabled-subtle: var(--palette-gray-500);
+  --lui-color-border-primary: var(--lui-palette-gray-700);
+  --lui-color-border-secondary: var(--lui-palette-gray-600);
+  --lui-color-border-disabled: var(--lui-palette-gray-600);
+  --lui-color-border-disabled-subtle: var(--lui-palette-gray-500);
 }

package/dist/dialog.css

@@ -1 +1 @@
-._root_1fxwu_1{display:flex;gap:var(--dialog-actions-gap)}._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--dialog-underlay: var(--color-background-overlay);--dialog-bg: var(--color-background-primary);--dialog-radius: var(--radius-3);--dialog-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--dialog-padding: var(--space-8);--dialog-gap: var(--space-6);--dialog-header-gap: var(--space-6);--dialog-header-min-height: calc(24px + var(--space-6));--dialog-close-color: var(--palette-gray-400);--dialog-close-padding: var(--space-3);--dialog-actions-padding-top: var(--space-10);--dialog-width-xs: 384px;--dialog-width-sm: 480px;--dialog-width-md: 560px;--dialog-width-lg: 640px;--dialog-title-font-size: var(--font-size-md);--dialog-title-weight: var(--font-weight-semibold);--dialog-title-color: var(--color-text-primary);--dialog-title-font-family: var(--font-family-body);--dialog-title-line-height: var(--line-height-md);--dialog-actions-gap: var(--space-4)}._underlay_8hbwf_25{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--dialog-underlay);inset:0;padding:var(--space-4);position:fixed;z-index:1000}._modal_8hbwf_34{align-items:center;display:flex;height:100%;justify-content:center}._dialog_8hbwf_41{background:var(--dialog-bg);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow);display:flex;flex-direction:column;gap:var(--dialog-gap);padding:var(--dialog-padding);position:relative}._dialog_8hbwf_41._sizeXs_8hbwf_51{width:var(--dialog-width-xs)}._dialog_8hbwf_41._sizeSm_8hbwf_54{width:var(--dialog-width-sm)}._dialog_8hbwf_41._sizeMd_8hbwf_57{width:var(--dialog-width-md)}._dialog_8hbwf_41._sizeLg_8hbwf_60{width:var(--dialog-width-lg)}._header_8hbwf_64{align-items:center;display:flex;gap:var(--dialog-header-gap);min-height:var(--dialog-header-min-height)}._close_8hbwf_71{color:var(--dialog-close-color);padding:var(--dialog-close-padding);position:absolute;right:var(--space-4);top:var(--space-4)}._actions_8hbwf_79{padding-top:var(--dialog-actions-padding-top)}._root_1ae0y_1{color:var(--dialog-title-color);font-family:var(--dialog-title-font-family);font-size:var(--dialog-title-font-size);font-style:normal;font-weight:var(--dialog-title-weight);line-height:var(--dialog-title-line-height);max-height:100%}
+._root_1fxwu_1{display:flex;gap:var(--dialog-actions-gap)}._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--dialog-underlay: var(--lui-color-background-overlay);--dialog-bg: var(--lui-color-background-primary);--dialog-radius: var(--lui-radius-3);--dialog-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--dialog-padding: var(--lui-space-8);--dialog-gap: var(--lui-space-6);--dialog-header-gap: var(--lui-space-6);--dialog-header-min-height: calc(24px + var(--lui-space-6));--dialog-close-color: var(--lui-palette-gray-400);--dialog-close-padding: var(--lui-space-3);--dialog-actions-padding-top: var(--lui-space-10);--dialog-width-xs: 384px;--dialog-width-sm: 480px;--dialog-width-md: 560px;--dialog-width-lg: 640px;--dialog-title-font-size: var(--lui-font-size-md);--dialog-title-weight: var(--lui-font-weight-semibold);--dialog-title-color: var(--lui-color-text-primary);--dialog-title-font-family: var(--lui-font-family-body);--dialog-title-line-height: var(--line-height-md);--dialog-actions-gap: var(--lui-space-4)}._underlay_100vj_25{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--dialog-underlay);inset:0;padding:var(--lui-space-4);position:fixed;z-index:1000}._modal_100vj_34{align-items:center;display:flex;height:100%;justify-content:center}._dialog_100vj_41{background:var(--dialog-bg);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow);display:flex;flex-direction:column;gap:var(--dialog-gap);padding:var(--dialog-padding);position:relative}._dialog_100vj_41._sizeXs_100vj_51{width:var(--dialog-width-xs)}._dialog_100vj_41._sizeSm_100vj_54{width:var(--dialog-width-sm)}._dialog_100vj_41._sizeMd_100vj_57{width:var(--dialog-width-md)}._dialog_100vj_41._sizeLg_100vj_60{width:var(--dialog-width-lg)}._header_100vj_64{align-items:center;display:flex;gap:var(--dialog-header-gap);min-height:var(--dialog-header-min-height)}._close_100vj_71{color:var(--dialog-close-color);padding:var(--dialog-close-padding);position:absolute;right:var(--lui-space-4);top:var(--lui-space-4)}._actions_100vj_79{padding-top:var(--dialog-actions-padding-top)}._root_1ae0y_1{color:var(--dialog-title-color);font-family:var(--dialog-title-font-family);font-size:var(--dialog-title-font-size);font-style:normal;font-weight:var(--dialog-title-weight);line-height:var(--dialog-title-line-height);max-height:100%}

package/dist/dialog.js

@@ -1,75 +1,76 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { useRef as _, useMemo as I } from "react";
-import { c as S } from "./clsx-OuTLNxxd.mjs";
-import { $ as x, a as A } from "./useModalOverlay-D5Bs9FCB.mjs";
-import { r as E } from "./Overlay-RmiBtqDR.mjs";
-import { a as M } from "./useOverlayTriggerState-BIo1Jcba.mjs";
-import { u as P } from "./useLocale-D2Z0JH0l.mjs";
-import { g as X } from "./getComponentSlots-DwAYUFNk.mjs";
-import { g as j } from "./getVariantClassName-D7Nhpuec.mjs";
-import './dialog.css';var s = /* @__PURE__ */ ((o) => (o.ACTIONS = "Dialog.Actions", o.CONTENT = "Dialog.Content", o.TITLE = "Dialog.Title", o))(s || {});
-const R = "_root_1fxwu_1", k = {
-  root: R
-}, h = (o) => {
-  const { children: t } = o;
-  return /* @__PURE__ */ e("div", { className: k.root, children: t });
-};
-h.displayName = s.ACTIONS;
-const K = "_root_jagsa_1", V = {
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import { useRef as f, useMemo as L } from "react";
+import { c as O } from "./clsx-OuTLNxxd.mjs";
+import { $ as S, a as A } from "./useModalOverlay-B93fkWbb.mjs";
+import { s as E, i as M } from "./Overlay-OYo7gW8m.mjs";
+import { a as P } from "./useOverlayTriggerState-DK8Xy6Kr.mjs";
+import { I as R } from "./Icon-flib0kme.mjs";
+import { u as X } from "./useLocale-DdHNhmvT.mjs";
+import { g as k } from "./getComponentSlots-DwAYUFNk.mjs";
+import { g as w } from "./getVariantClassName-D7Nhpuec.mjs";
+import './dialog.css';var e = /* @__PURE__ */ ((o) => (o.ACTIONS = "Dialog.Actions", o.CONTENT = "Dialog.Content", o.TITLE = "Dialog.Title", o))(e || {});
+const K = "_root_1fxwu_1", V = {
   root: K
 }, N = (o) => {
   const { children: t } = o;
-  return /* @__PURE__ */ e("div", { className: V.root, children: t });
+  return /* @__PURE__ */ s("div", { className: V.root, children: t });
+};
+N.displayName = e.ACTIONS;
+const Y = "_root_jagsa_1", q = {
+  root: Y
+}, p = (o) => {
+  const { children: t } = o;
+  return /* @__PURE__ */ s("div", { className: q.root, children: t });
 };
-N.displayName = s.CONTENT;
-const Y = "Dialog", q = [s.ACTIONS, s.CONTENT, s.TITLE], B = "_underlay_8hbwf_25", F = "_modal_8hbwf_34", G = "_dialog_8hbwf_41", H = "_sizeXs_8hbwf_51", J = "_sizeSm_8hbwf_54", Q = "_sizeMd_8hbwf_57", U = "_sizeLg_8hbwf_60", W = "_header_8hbwf_64", Z = "_close_8hbwf_71", oo = "_actions_8hbwf_79", a = {
-  underlay: B,
-  modal: F,
-  dialog: G,
-  sizeXs: H,
-  sizeSm: J,
-  sizeMd: Q,
-  sizeLg: U,
-  header: W,
-  close: Z,
-  actions: oo
-}, b = (o) => {
-  const { children: t, container: T, open: l, modal: g = !0, onOpenChange: u, size: C = "md" } = o, $ = P(), i = _(null), c = _(null), { dialogProps: y } = x(o, i), r = M({ isOpen: l, onOpenChange: u }), { modalProps: z, underlayProps: D } = A(
-    { isDismissable: !g, isKeyboardDismissDisabled: !1 },
+p.displayName = e.CONTENT;
+const B = "Dialog", F = [e.ACTIONS, e.CONTENT, e.TITLE], G = "_underlay_100vj_25", H = "_modal_100vj_34", J = "_dialog_100vj_41", Q = "_sizeXs_100vj_51", U = "_sizeSm_100vj_54", W = "_sizeMd_100vj_57", Z = "_sizeLg_100vj_60", oo = "_header_100vj_64", so = "_close_100vj_71", eo = "_actions_100vj_79", a = {
+  underlay: G,
+  modal: H,
+  dialog: J,
+  sizeXs: Q,
+  sizeSm: U,
+  sizeMd: W,
+  sizeLg: Z,
+  header: oo,
+  close: so,
+  actions: eo
+}, g = (o) => {
+  const { children: t, container: u, open: l, modal: v = !0, onOpenChange: $, size: C = "md" } = o, h = X(), c = f(null), n = f(null), { dialogProps: b } = S(o, c), r = P({ isOpen: l, onOpenChange: $ }), { modalProps: y, underlayProps: z } = A(
+    { isDismissable: !v, isKeyboardDismissDisabled: !1 },
     r,
-    c
+    n
   ), {
-    [s.ACTIONS]: d,
-    [s.CONTENT]: m,
-    [s.TITLE]: v
-  } = I(() => X(t, q), [t]), w = (O) => {
-    O.preventDefault(), r.close();
+    [e.ACTIONS]: d,
+    [e.CONTENT]: m,
+    [e.TITLE]: j
+  } = L(() => k(t, F), [t]), D = (x) => {
+    x.preventDefault(), r.close();
   };
   if (!l)
     return null;
-  const L = S(a.dialog, j("size", C, a));
-  return /* @__PURE__ */ e(E, { portalContainer: T, children: /* @__PURE__ */ e("div", { className: a.underlay, ...D, children: /* @__PURE__ */ e("div", { className: a.modal, ...z, ref: c, children: /* @__PURE__ */ f("div", { className: L, ...y, ref: i, children: [
-    /* @__PURE__ */ f("div", { className: a.header, children: [
-      v,
-      /* @__PURE__ */ e("button", { "aria-label": $.dialog.close, className: a.close, onClick: w, children: "X" })
+  const I = O(a.dialog, w("size", C, a));
+  return /* @__PURE__ */ s(E, { portalContainer: u, children: /* @__PURE__ */ s("div", { className: a.underlay, ...z, children: /* @__PURE__ */ s("div", { className: a.modal, ...y, ref: n, children: /* @__PURE__ */ s(M, { getContainer: () => n.current, children: /* @__PURE__ */ _("div", { className: I, ...b, ref: c, children: [
+    /* @__PURE__ */ _("div", { className: a.header, children: [
+      j,
+      /* @__PURE__ */ s("button", { "aria-label": h.dialog.close, className: a.close, onClick: D, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
     ] }),
-    m && /* @__PURE__ */ e("div", { children: m }),
-    d && /* @__PURE__ */ e("div", { className: a.actions, children: d })
-  ] }) }) }) });
+    m && /* @__PURE__ */ s("div", { children: m }),
+    d && /* @__PURE__ */ s("div", { className: a.actions, children: d })
+  ] }) }) }) }) });
 };
-b.displayName = Y;
-const so = "_root_1ae0y_1", eo = {
-  root: so
-}, p = (o) => {
+g.displayName = B;
+const to = "_root_1ae0y_1", ao = {
+  root: to
+}, T = (o) => {
   const { children: t } = o;
-  return /* @__PURE__ */ e("div", { className: eo.root, children: t });
+  return /* @__PURE__ */ s("div", { className: ao.root, children: t });
 };
-p.displayName = s.TITLE;
-const n = b;
-n.Actions = h;
-n.Content = N;
-n.Title = p;
+T.displayName = e.TITLE;
+const i = g;
+i.Actions = N;
+i.Content = p;
+i.Title = T;
 export {
-  n as Dialog,
-  n as default
+  i as Dialog,
+  i as default
 };

package/dist/drawer.css

@@ -1 +1 @@
-._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--drawer-underlay: var(--color-background-overlay);--drawer-bg: var(--color-background-primary);--drawer-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--drawer-padding: var(--space-8);--drawer-gap: var(--space-6);--drawer-header-gap: var(--space-6);--drawer-header-min-height: calc(24px + var(--space-6));--drawer-close-color: var(--palette-gray-400);--drawer-close-padding: var(--space-3);--drawer-width-sm: 384px;--drawer-width-md: 480px;--drawer-width-lg: 640px;--drawer-height-sm: 320px;--drawer-height-md: 480px;--drawer-height-lg: 640px;--drawer-title-font-size: var(--font-size-md);--drawer-title-weight: var(--font-weight-semibold);--drawer-title-color: var(--color-text-primary);--drawer-title-font-family: var(--font-family-body);--drawer-title-line-height: var(--line-height-md)}._underlay_7b6q3_24{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--drawer-underlay);inset:0;position:fixed;z-index:1000}._modal_7b6q3_32{display:flex;height:100%}._drawer_7b6q3_37{background:var(--drawer-bg);box-shadow:var(--drawer-shadow);display:flex;flex-direction:column;gap:var(--drawer-gap);padding:var(--drawer-padding);position:fixed;transition:transform .3s ease}._drawer_7b6q3_37._placementLeft_7b6q3_47{bottom:0;left:0;top:0;transform:translate(-100%)}._drawer_7b6q3_37._placementLeft_7b6q3_47._entered_7b6q3_53{transform:translate(0)}._drawer_7b6q3_37._placementRight_7b6q3_56{bottom:0;right:0;top:0;transform:translate(100%)}._drawer_7b6q3_37._placementRight_7b6q3_56._entered_7b6q3_53{transform:translate(0)}._drawer_7b6q3_37._placementTop_7b6q3_65{left:0;right:0;top:0;transform:translateY(-100%)}._drawer_7b6q3_37._placementTop_7b6q3_65._entered_7b6q3_53{transform:translateY(0)}._drawer_7b6q3_37._placementBottom_7b6q3_74{bottom:0;left:0;right:0;transform:translateY(100%)}._drawer_7b6q3_37._placementBottom_7b6q3_74._entered_7b6q3_53{transform:translateY(0)}._drawer_7b6q3_37._sizeSm_7b6q3_83{width:var(--drawer-width-sm)}._drawer_7b6q3_37._sizeSm_7b6q3_83._placementTop_7b6q3_65,._drawer_7b6q3_37._sizeSm_7b6q3_83._placementBottom_7b6q3_74{height:var(--drawer-height-sm);width:100%}._drawer_7b6q3_37._sizeMd_7b6q3_90{width:var(--drawer-width-md)}._drawer_7b6q3_37._sizeMd_7b6q3_90._placementTop_7b6q3_65,._drawer_7b6q3_37._sizeMd_7b6q3_90._placementBottom_7b6q3_74{height:var(--drawer-height-md);width:100%}._drawer_7b6q3_37._sizeLg_7b6q3_97{width:var(--drawer-width-lg)}._drawer_7b6q3_37._sizeLg_7b6q3_97._placementTop_7b6q3_65,._drawer_7b6q3_37._sizeLg_7b6q3_97._placementBottom_7b6q3_74{height:var(--drawer-height-lg);width:100%}._content_7b6q3_105{flex:1;overflow-y:auto}:root{--drawer-header-gap: var(--space-6);--drawer-header-min-height: calc(24px + var(--space-6));--drawer-close-color: var(--palette-gray-400);--drawer-close-padding: var(--space-3);--drawer-title-font-size: var(--font-size-md);--drawer-title-weight: var(--font-weight-semibold);--drawer-title-color: var(--color-text-primary);--drawer-title-font-family: var(--font-family-body);--drawer-title-line-height: var(--line-height-md)}._root_1fwv3_13{align-items:center;display:flex;gap:var(--drawer-header-gap);min-height:var(--drawer-header-min-height);position:relative}._title_1fwv3_21{color:var(--drawer-title-color);flex:1;font-family:var(--drawer-title-font-family);font-size:var(--drawer-title-font-size);font-style:normal;font-weight:var(--drawer-title-weight);line-height:var(--drawer-title-line-height)}._close_1fwv3_31{color:var(--drawer-close-color);padding:var(--drawer-close-padding);position:absolute;right:0;top:50%;transform:translateY(-50%)}
+._root_1m4yu_1{display:flex;gap:var(--lui-space-2)}._root_jagsa_1{max-height:100%;overflow-y:auto}:root{--drawer-underlay: var(--lui-color-background-overlay);--drawer-bg: var(--lui-color-background-primary);--drawer-shadow: 0 20px 24px -4px rgb(16 24 40 / .08), 0 8px 8px -4px rgb(16 24 40 / .03);--drawer-padding: var(--lui-space-8);--drawer-gap: var(--lui-space-6);--drawer-header-gap: var(--lui-space-6);--drawer-header-min-height: calc(24px + var(--lui-space-6));--drawer-close-color: var(--lui-palette-gray-400);--drawer-close-padding: var(--lui-space-3);--drawer-width-sm: 384px;--drawer-width-md: 480px;--drawer-width-lg: 640px;--drawer-height-sm: 320px;--drawer-height-md: 480px;--drawer-height-lg: 640px;--drawer-title-font-size: var(--lui-font-size-md);--drawer-title-weight: var(--lui-font-weight-semibold);--drawer-title-color: var(--lui-color-text-primary);--drawer-title-font-family: var(--lui-font-family-body);--drawer-title-line-height: var(--line-height-md)}._underlay_qcy0k_24{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--drawer-underlay);inset:0;position:fixed;z-index:1000}._modal_qcy0k_32{display:flex;height:100%}._drawer_qcy0k_37{background:var(--drawer-bg);box-shadow:var(--drawer-shadow);display:flex;flex-direction:column;gap:var(--drawer-gap);padding:var(--drawer-padding);position:fixed;transition:transform .3s ease}._drawer_qcy0k_37._placementLeft_qcy0k_47{bottom:0;left:0;top:0;transform:translate(-100%)}._drawer_qcy0k_37._placementLeft_qcy0k_47._entered_qcy0k_53{transform:translate(0)}._drawer_qcy0k_37._placementRight_qcy0k_56{bottom:0;right:0;top:0;transform:translate(100%)}._drawer_qcy0k_37._placementRight_qcy0k_56._entered_qcy0k_53{transform:translate(0)}._drawer_qcy0k_37._placementTop_qcy0k_65{left:0;right:0;top:0;transform:translateY(-100%)}._drawer_qcy0k_37._placementTop_qcy0k_65._entered_qcy0k_53{transform:translateY(0)}._drawer_qcy0k_37._placementBottom_qcy0k_74{bottom:0;left:0;right:0;transform:translateY(100%)}._drawer_qcy0k_37._placementBottom_qcy0k_74._entered_qcy0k_53{transform:translateY(0)}._drawer_qcy0k_37._sizeSm_qcy0k_83{width:var(--drawer-width-sm)}._drawer_qcy0k_37._sizeSm_qcy0k_83._placementTop_qcy0k_65,._drawer_qcy0k_37._sizeSm_qcy0k_83._placementBottom_qcy0k_74{height:var(--drawer-height-sm);width:100%}._drawer_qcy0k_37._sizeMd_qcy0k_90{width:var(--drawer-width-md)}._drawer_qcy0k_37._sizeMd_qcy0k_90._placementTop_qcy0k_65,._drawer_qcy0k_37._sizeMd_qcy0k_90._placementBottom_qcy0k_74{height:var(--drawer-height-md);width:100%}._drawer_qcy0k_37._sizeLg_qcy0k_97{width:var(--drawer-width-lg)}._drawer_qcy0k_37._sizeLg_qcy0k_97._placementTop_qcy0k_65,._drawer_qcy0k_37._sizeLg_qcy0k_97._placementBottom_qcy0k_74{height:var(--drawer-height-lg);width:100%}._content_qcy0k_105{flex:1;overflow-y:auto}:root{--drawer-header-gap: var(--lui-space-6);--drawer-header-min-height: calc(24px + var(--lui-space-6));--drawer-close-color: var(--lui-palette-gray-400);--drawer-close-padding: var(--lui-space-3);--drawer-title-font-size: var(--lui-font-size-md);--drawer-title-weight: var(--lui-font-weight-semibold);--drawer-title-color: var(--lui-color-text-primary);--drawer-title-font-family: var(--lui-font-family-body);--drawer-title-line-height: var(--line-height-md)}._root_1mypq_13{align-items:center;display:flex;gap:var(--drawer-header-gap);min-height:var(--drawer-header-min-height);position:relative}._title_1mypq_21{color:var(--drawer-title-color);flex:1;font-family:var(--drawer-title-font-family);font-size:var(--drawer-title-font-size);font-style:normal;font-weight:var(--drawer-title-weight);line-height:var(--drawer-title-line-height)}._close_1mypq_31{color:var(--drawer-close-color);padding:var(--drawer-close-padding);position:absolute;right:0;top:50%;transform:translateY(-50%)}

package/dist/drawer.d.ts

@@ -1,6 +1,16 @@
 import { AriaDialogProps } from 'react-aria';
 import { default as default_2 } from 'react';
 
+/**
+ * Wrapper for action buttons inside Drawer.
+ * Accepts only `<Button>` components as children.
+ * Auto-assigns variant based on position:
+ * - first child → `primary`
+ * - subsequent children → `secondary`
+ * unless the Button already has an explicit `variant` prop.
+ */
+declare const Actions: default_2.FC<default_2.PropsWithChildren>;
+
 /**
  * Drawer Content sub-component.
  *
@@ -111,6 +121,7 @@ export declare interface IHeaderProps extends default_2.PropsWithChildren {
 }
 
 declare type TDrawerCompoundComponent = typeof Drawer_2 & {
+    Actions: typeof Actions;
     Content: typeof Content;
     Header: typeof Header;
 };

package/dist/drawer.js

@@ -1,106 +1,127 @@
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
-import { createContext as S, useContext as H, useRef as d, useState as h, useEffect as I, useMemo as P } from "react";
-import { c as j } from "./clsx-OuTLNxxd.mjs";
-import { $ as B, a as F } from "./useModalOverlay-D5Bs9FCB.mjs";
-import { r as k } from "./Overlay-RmiBtqDR.mjs";
-import { a as K } from "./useOverlayTriggerState-BIo1Jcba.mjs";
-import { g as U } from "./getComponentSlots-DwAYUFNk.mjs";
-import { g as C } from "./getVariantClassName-D7Nhpuec.mjs";
-import { u as V } from "./useLocale-D2Z0JH0l.mjs";
-import './drawer.css';var s = /* @__PURE__ */ ((e) => (e.CONTENT = "Drawer.Content", e.HEADER = "Drawer.Header", e))(s || {});
-const X = "_root_jagsa_1", Y = {
-  root: X
-}, T = (e) => {
-  const { children: n } = e;
-  return /* @__PURE__ */ t("div", { className: Y.root, children: n });
+import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import M, { cloneElement as H, createContext as P, useContext as B, useRef as p, useState as A, useEffect as j, useMemo as F } from "react";
+import { i as V } from "./isValidReactNode-CmYwTWCE.mjs";
+import "./camelCase-PtIYufW8.mjs";
+import { c as U } from "./clsx-OuTLNxxd.mjs";
+import { $ as K, a as Y } from "./useModalOverlay-B93fkWbb.mjs";
+import { s as G, i as J } from "./Overlay-OYo7gW8m.mjs";
+import { a as Q } from "./useOverlayTriggerState-DK8Xy6Kr.mjs";
+import { g as W } from "./getComponentSlots-DwAYUFNk.mjs";
+import { g as D } from "./getVariantClassName-D7Nhpuec.mjs";
+import { I as X } from "./Icon-flib0kme.mjs";
+import { u as Z } from "./useLocale-DdHNhmvT.mjs";
+import './drawer.css';var o = /* @__PURE__ */ ((e) => (e.ACTIONS = "Drawer.Actions", e.CONTENT = "Drawer.Content", e.HEADER = "Drawer.Header", e))(o || {});
+const ee = "_root_1m4yu_1", te = {
+  root: ee
+}, g = ({ children: e }) => {
+  const r = M.Children.toArray(e), l = r.map((s, c) => {
+    if (!V("Button", s))
+      return s;
+    const n = s.props.variant;
+    return H(s, {
+      key: c,
+      ...n ? {} : { variant: n ?? (c === 0 ? "primary" : "secondary") }
+    });
+  });
+  return r.length === 0 ? null : /* @__PURE__ */ t("div", { className: te.root, children: l });
 };
-T.displayName = s.CONTENT;
-const G = "Drawer", J = [s.CONTENT, s.HEADER], E = S(null), Q = () => {
-  const e = H(E);
+g.displayName = o.ACTIONS;
+const oe = "_root_jagsa_1", re = {
+  root: oe
+}, w = (e) => {
+  const { children: r } = e;
+  return /* @__PURE__ */ t("div", { className: re.root, children: r });
+};
+w.displayName = o.CONTENT;
+const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = () => {
+  const e = B(q);
   if (!e)
     throw new Error("Drawer sub-components must be used within a Drawer component.");
   return e;
-}, W = "_underlay_7b6q3_24", Z = "_modal_7b6q3_32", ee = "_drawer_7b6q3_37", te = "_placementLeft_7b6q3_47", oe = "_entered_7b6q3_53", se = "_placementRight_7b6q3_56", ne = "_placementTop_7b6q3_65", re = "_placementBottom_7b6q3_74", ae = "_sizeSm_7b6q3_83", ce = "_sizeMd_7b6q3_90", le = "_sizeLg_7b6q3_97", ie = "_content_7b6q3_105", o = {
-  underlay: W,
-  modal: Z,
-  drawer: ee,
-  placementLeft: te,
-  entered: oe,
-  placementRight: se,
-  placementTop: ne,
-  placementBottom: re,
-  sizeSm: ae,
-  sizeMd: ce,
-  sizeLg: le,
-  content: ie
-}, me = 300, $ = (e) => {
-  const { children: n, container: a, dismissable: c = !0, onOpenChange: l, open: r, placement: x = "right", size: y = "md" } = e, f = d(null), u = d(null), { dialogProps: A } = B(e, f), p = K({ isOpen: r, onOpenChange: l }), { modalProps: R, underlayProps: z } = F(
-    { isDismissable: c, isKeyboardDismissDisabled: !1 },
-    p,
-    u
-  ), [b, N] = h(r || !1), [L, w] = h(!1), i = d(b);
-  I(() => {
-    if (r) {
-      i.current = !0, N(!0);
-      const m = requestAnimationFrame(() => {
+}, ce = "_underlay_qcy0k_24", le = "_modal_qcy0k_32", ie = "_drawer_qcy0k_37", me = "_placementLeft_qcy0k_47", de = "_entered_qcy0k_53", pe = "_placementRight_qcy0k_56", ue = "_placementTop_qcy0k_65", _e = "_placementBottom_qcy0k_74", fe = "_sizeSm_qcy0k_83", ye = "_sizeMd_qcy0k_90", Ne = "_sizeLg_qcy0k_97", Ce = "_content_qcy0k_105", a = {
+  underlay: ce,
+  modal: le,
+  drawer: ie,
+  placementLeft: me,
+  entered: de,
+  placementRight: pe,
+  placementTop: ue,
+  placementBottom: _e,
+  sizeSm: fe,
+  sizeMd: ye,
+  sizeLg: Ne,
+  content: Ce
+}, be = 300, k = (e) => {
+  const { children: r, container: l, dismissable: s = !0, onOpenChange: c, open: n, placement: f = "right", size: v = "md" } = e, y = p(null), i = p(null), { dialogProps: x } = K(e, y), N = Q({ isOpen: n, onOpenChange: c }), { modalProps: I, underlayProps: O } = Y(
+    { isDismissable: s, isKeyboardDismissDisabled: !1 },
+    N,
+    i
+  ), [C, b] = A(n || !1), [R, $] = A(!1), m = p(C);
+  j(() => {
+    if (n) {
+      m.current = !0, b(!0);
+      const d = requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          w(!0);
+          $(!0);
         });
       });
-      return () => cancelAnimationFrame(m);
+      return () => cancelAnimationFrame(d);
     }
-    if (i.current) {
-      w(!1);
-      const m = setTimeout(() => {
-        i.current = !1, N(!1);
-      }, me);
-      return () => clearTimeout(m);
+    if (m.current) {
+      $(!1);
+      const d = setTimeout(() => {
+        m.current = !1, b(!1);
+      }, be);
+      return () => clearTimeout(d);
     }
-  }, [r]);
+  }, [n]);
   const {
-    [s.CONTENT]: D,
-    [s.HEADER]: M
-  } = P(() => U(n, J), [n]), O = j(
-    o.drawer,
-    C("size", y, o),
-    C("placement", x, o),
-    { [o.entered]: L }
+    [o.ACTIONS]: z,
+    [o.CONTENT]: h,
+    [o.HEADER]: S
+  } = F(() => W(r, se), [r]), L = U(
+    a.drawer,
+    D("size", v, a),
+    D("placement", f, a),
+    { [a.entered]: R }
   );
-  return b ? /* @__PURE__ */ t(k, { portalContainer: a, children: /* @__PURE__ */ t("div", { className: o.underlay, ...z, children: /* @__PURE__ */ t("div", { className: o.modal, ...R, ref: u, children: /* @__PURE__ */ t(E.Provider, { value: { close: () => p.close() }, children: /* @__PURE__ */ g(
+  return C ? /* @__PURE__ */ t(G, { portalContainer: l, children: /* @__PURE__ */ t("div", { className: a.underlay, ...O, children: /* @__PURE__ */ t("div", { className: a.modal, ...I, ref: i, children: /* @__PURE__ */ t(J, { getContainer: () => i.current, children: /* @__PURE__ */ t(q.Provider, { value: { close: () => N.close() }, children: /* @__PURE__ */ T(
     "div",
     {
       "aria-label": "Drawer",
       "aria-modal": "true",
-      className: O,
+      className: L,
       role: "dialog",
-      ...A,
-      ref: f,
+      ...x,
+      ref: y,
       children: [
-        M,
-        D && /* @__PURE__ */ t("div", { className: o.content, children: D })
+        S,
+        h && /* @__PURE__ */ t("div", { className: a.content, children: h }),
+        z
       ]
     }
-  ) }) }) }) }) : null;
+  ) }) }) }) }) }) : null;
 };
-$.displayName = G;
-const de = "_root_1fwv3_13", _e = "_title_1fwv3_21", fe = "_close_1fwv3_31", _ = {
-  root: de,
-  title: _e,
-  close: fe
-}, q = (e) => {
-  const { children: n } = e, { close: a } = Q(), c = V(), l = (r) => {
-    r.preventDefault(), a();
+k.displayName = ne;
+const $e = "_root_1mypq_13", he = "_title_1mypq_21", Ae = "_close_1mypq_31", u = {
+  root: $e,
+  title: he,
+  close: Ae
+}, E = (e) => {
+  const { children: r } = e, { close: l } = ae(), s = Z(), c = (n) => {
+    n.preventDefault(), l();
   };
-  return /* @__PURE__ */ g("div", { className: _.root, children: [
-    /* @__PURE__ */ t("div", { className: _.title, children: n }),
-    /* @__PURE__ */ t("button", { "aria-label": c.dialog.close, className: _.close, onClick: l, type: "button", children: "X" })
+  return /* @__PURE__ */ T("div", { className: u.root, children: [
+    /* @__PURE__ */ t("div", { className: u.title, children: r }),
+    /* @__PURE__ */ t("button", { "aria-label": s.dialog.close, className: u.close, onClick: c, type: "button", children: /* @__PURE__ */ t(X, { name: "x", size: 16 }) })
   ] });
 };
-q.displayName = s.HEADER;
-const v = $;
-v.Content = T;
-v.Header = q;
+E.displayName = o.HEADER;
+const _ = k;
+_.Actions = g;
+_.Content = w;
+_.Header = E;
 export {
-  v as Drawer,
-  v as default
+  _ as Drawer,
+  _ as default
 };

package/dist/empty-state.css

@@ -1 +1 @@
-._actions_1pohs_1{align-items:center;display:flex;gap:var(--space-2);margin-top:var(--space-2)}._content_laixm_1{width:100%}:root{--empty-state-icon-size: 48px}._root_131ay_5{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-10) var(--space-5);text-align:center}._icon_131ay_14{font-size:var(--empty-state-icon-size);line-height:1;margin-bottom:var(--space-2)}._title_131ay_20{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:var(--line-height-lg);margin:0}._description_131ay_28{color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:var(--line-height-sm);margin:0;max-width:400px}
+._actions_dl9xv_1{align-items:center;display:flex;gap:var(--lui-space-2);margin-top:var(--lui-space-2)}._content_laixm_1{width:100%}:root{--empty-state-icon-size: 48px}._root_1fqx3_5{align-items:center;display:flex;flex-direction:column;gap:var(--lui-space-2);padding:var(--lui-space-10) var(--lui-space-5);text-align:center}._icon_1fqx3_14{font-size:var(--empty-state-icon-size);line-height:1;margin-bottom:var(--lui-space-2)}._title_1fqx3_20{color:var(--lui-color-text-primary);font-size:var(--lui-font-size-lg);font-weight:var(--lui-font-weight-semibold);line-height:var(--line-height-lg);margin:0}._description_1fqx3_28{color:var(--lui-color-text-secondary);font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm);margin:0;max-width:400px}

package/dist/empty-state.d.ts

@@ -18,7 +18,7 @@ declare const EmptyState_2: default_2.FC<IEmptyStateProps>;
 
 export declare interface IEmptyStateProps extends default_2.PropsWithChildren {
     description?: string;
-    icon?: default_2.ReactNode;
+    icon?: string;
     title?: string;
 }