@lazar-ui/kit 0.2.0 → 0.2.3

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

package/dist/drawer.css

@@ -1 +1 @@
-._root_1nnf8_1{display:flex;gap:var(--space-2)}._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.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as T } from "react/jsx-runtime";
-import H, { cloneElement as P, createContext as k, useContext as B, useRef as f, useState as A, useEffect as j, useMemo as F } from "react";
+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";
@@ -8,57 +8,58 @@ 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 { u as X } from "./useLocale-D2Z0JH0l.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 Z = "_root_1nnf8_1", ee = {
-  root: Z
+const ee = "_root_1m4yu_1", te = {
+  root: ee
 }, g = ({ children: e }) => {
-  const n = H.Children.toArray(e), l = n.map((s, c) => {
+  const r = M.Children.toArray(e), l = r.map((s, c) => {
     if (!V("Button", s))
       return s;
-    const r = s.props.variant;
-    return P(s, {
+    const n = s.props.variant;
+    return H(s, {
       key: c,
-      ...r ? {} : { variant: r ?? (c === 0 ? "primary" : "secondary") }
+      ...n ? {} : { variant: n ?? (c === 0 ? "primary" : "secondary") }
     });
   });
-  return n.length === 0 ? null : /* @__PURE__ */ t("div", { className: ee.root, children: l });
+  return r.length === 0 ? null : /* @__PURE__ */ t("div", { className: te.root, children: l });
 };
 g.displayName = o.ACTIONS;
-const te = "_root_jagsa_1", oe = {
-  root: te
-}, y = (e) => {
-  const { children: n } = e;
-  return /* @__PURE__ */ t("div", { className: oe.root, children: n });
+const oe = "_root_jagsa_1", re = {
+  root: oe
+}, w = (e) => {
+  const { children: r } = e;
+  return /* @__PURE__ */ t("div", { className: re.root, children: r });
 };
-y.displayName = o.CONTENT;
-const ne = "Drawer", re = [o.ACTIONS, o.CONTENT, o.HEADER], v = k(null), se = () => {
-  const e = B(v);
+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;
-}, ae = "_underlay_7b6q3_24", ce = "_modal_7b6q3_32", le = "_drawer_7b6q3_37", ie = "_placementLeft_7b6q3_47", me = "_entered_7b6q3_53", de = "_placementRight_7b6q3_56", fe = "_placementTop_7b6q3_65", ue = "_placementBottom_7b6q3_74", _e = "_sizeSm_7b6q3_83", pe = "_sizeMd_7b6q3_90", be = "_sizeLg_7b6q3_97", Ne = "_content_7b6q3_105", a = {
-  underlay: ae,
-  modal: ce,
-  drawer: le,
-  placementLeft: ie,
-  entered: me,
-  placementRight: de,
-  placementTop: fe,
-  placementBottom: ue,
-  sizeSm: _e,
-  sizeMd: pe,
-  sizeLg: be,
-  content: Ne
-}, Ce = 300, E = (e) => {
-  const { children: n, container: l, dismissable: s = !0, onOpenChange: c, open: r, placement: p = "right", size: x = "md" } = e, b = f(null), i = f(null), { dialogProps: O } = K(e, b), N = Q({ isOpen: r, onOpenChange: c }), { modalProps: R, underlayProps: z } = Y(
+}, 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, w] = A(r || !1), [I, $] = A(!1), m = f(C);
+  ), [C, b] = A(n || !1), [R, $] = A(!1), m = p(C);
   j(() => {
-    if (r) {
-      m.current = !0, w(!0);
+    if (n) {
+      m.current = !0, b(!0);
       const d = requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           $(!0);
@@ -69,57 +70,57 @@ const ne = "Drawer", re = [o.ACTIONS, o.CONTENT, o.HEADER], v = k(null), se = ()
     if (m.current) {
       $(!1);
       const d = setTimeout(() => {
-        m.current = !1, w(!1);
-      }, Ce);
+        m.current = !1, b(!1);
+      }, be);
       return () => clearTimeout(d);
     }
-  }, [r]);
+  }, [n]);
   const {
-    [o.ACTIONS]: S,
+    [o.ACTIONS]: z,
     [o.CONTENT]: h,
-    [o.HEADER]: L
-  } = F(() => W(n, re), [n]), M = U(
+    [o.HEADER]: S
+  } = F(() => W(r, se), [r]), L = U(
     a.drawer,
-    D("size", x, a),
-    D("placement", p, a),
-    { [a.entered]: I }
+    D("size", v, a),
+    D("placement", f, a),
+    { [a.entered]: R }
   );
-  return C ? /* @__PURE__ */ t(G, { portalContainer: l, children: /* @__PURE__ */ t("div", { className: a.underlay, ...z, children: /* @__PURE__ */ t("div", { className: a.modal, ...R, ref: i, children: /* @__PURE__ */ t(J, { getContainer: () => i.current, children: /* @__PURE__ */ t(v.Provider, { value: { close: () => N.close() }, children: /* @__PURE__ */ T(
+  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: M,
+      className: L,
       role: "dialog",
-      ...O,
-      ref: b,
+      ...x,
+      ref: y,
       children: [
-        L,
+        S,
         h && /* @__PURE__ */ t("div", { className: a.content, children: h }),
-        S
+        z
       ]
     }
   ) }) }) }) }) }) : null;
 };
-E.displayName = ne;
-const we = "_root_1fwv3_13", $e = "_title_1fwv3_21", he = "_close_1fwv3_31", u = {
-  root: we,
-  title: $e,
-  close: he
-}, q = (e) => {
-  const { children: n } = e, { close: l } = se(), s = X(), c = (r) => {
-    r.preventDefault(), l();
+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__ */ T("div", { className: u.root, children: [
-    /* @__PURE__ */ t("div", { className: u.title, children: n }),
-    /* @__PURE__ */ t("button", { "aria-label": s.dialog.close, className: u.close, onClick: c, type: "button", 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 = o.HEADER;
-const _ = E;
+E.displayName = o.HEADER;
+const _ = k;
 _.Actions = g;
-_.Content = y;
-_.Header = q;
+_.Content = w;
+_.Header = E;
 export {
   _ 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;
 }
 

package/dist/empty-state.js

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

package/dist/error-boundary.css

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