@lazar-ui/kit 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## [0.7.0] - 2026-07-06
+
+### Features
+
+- **Slider**: новый standalone компонент для выбора числового значения из диапазона. Поддерживает controlled/uncontrolled режимы, min/max/step, размеры (sm/md/lg), `showValue` и `disabled`. Использует нативный `<input type="range">` для accessibility.
+- **Select**: добавлен JSX composition mode — теперь можно использовать `<Select.Option>` как дочерние элементы вместо пропа `options`. Поддерживаются те же возможности: value/label, disabled, controlled/uncontrolled.
+- **Table.Row**: добавлен проп `onClick` — обработчик клика по строке таблицы.
+- **Table.Row**: добавлен проп `style` для инлайн-стилей строки.
+
+### Bug Fixes
+
+- **Tabs**: исправлен type error в тесте — использование `ETabsVariant.BUTTONS` вместо строкового литерала.
+
+### Documentation
+
+- **rules**: обновлён `.opencode/rules/ui-kit.md` (секция Build, память, тесты).
+
+## [0.6.2] - 2026-06-10
+
+### Bug Fixes
+
+- **build**: удалён depth=1 scan подкомпонентов, который создавал мусорные entry points (`context`, `item`) и дублировал `separator`
+
+### Refactoring
+
+- **Heading, Text**: перемещены в `src/components/Heading/` и `src/components/Text/` как самостоятельные компоненты (ранее лежали внутри `Typography/`)
+- **Typography**: компонент удалён
+
+### Documentation
+
+- **rules**: добавлены секции `Build` (память) и `Test Coverage Generation` в `.opencode/rules/ui-kit.md`
+
 ## [0.6.1] - 2026-06-10
 
 ### Bug Fixes

package/dist/accordion.css

@@ -1 +1 @@
-:root{--accordion-border-radius: var(--lui-radius-2)}._root_grshw_5{border:1px solid var(--lui-color-border-primary);border-radius:var(--accordion-border-radius);overflow:hidden;width:100%}
+:root{--accordion-border-radius: var(--lui-radius-2)}._root_grshw_5{border:1px solid var(--lui-color-border-primary);border-radius:var(--accordion-border-radius);overflow:hidden;width:100%}:root{--accordion-chevron-size: 8px;--accordion-transition-duration: .2s;--accordion-content-transition: .3s}._root_z83hn_7:not(:last-child){border-bottom:1px solid var(--lui-color-border-primary)}._trigger_z83hn_11{align-items:center;background:var(--lui-color-background-primary);border:none;cursor:pointer;display:flex;gap:var(--lui-space-2);justify-content:space-between;padding:var(--lui-space-6) var(--lui-space-4);transition:background-color var(--accordion-transition-duration);width:100%}._trigger_z83hn_11:hover{background:var(--lui-color-background-tertiary)}._open_z83hn_27 ._trigger_z83hn_11{background:var(--lui-color-background-brand);color:var(--lui-color-text-on-brand)}._title_z83hn_32{align-items:center;display:flex;font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-medium);gap:var(--lui-space-4);line-height:1.4}._icon_z83hn_41,._chevron_z83hn_46{align-items:center;display:flex}._chevron_z83hn_46:after{border-color:currentColor;border-style:solid;border-width:0 2px 2px 0;content:"";display:block;height:var(--accordion-chevron-size);transform:rotate(45deg);transition:transform var(--accordion-transition-duration);width:var(--accordion-chevron-size)}._open_z83hn_27 ._chevron_z83hn_46:after{transform:rotate(-135deg)}._content_z83hn_66{background:var(--lui-color-background-secondary);border-top:1px solid var(--lui-color-border-primary);font-size:var(--lui-font-size-md);line-height:1.5;max-height:0;opacity:0;overflow:hidden;padding:0 var(--lui-space-4);transition:max-height var(--accordion-content-transition) ease-out,opacity var(--accordion-content-transition) ease-out,padding var(--accordion-content-transition) ease-out}._open_z83hn_27 ._content_z83hn_66{max-height:9999px;opacity:1;padding:var(--lui-space-4)}

package/dist/accordion.js

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

package/dist/dialog.css

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

package/dist/drawer.css

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

package/dist/heading.js

@@ -1,7 +1,33 @@
-import { H as D } from "./Heading-CL47Fqe7.mjs";
-var t = /* @__PURE__ */ ((r) => (r.XS = "xs", r.SM = "sm", r.MD = "md", r.LG = "lg", r))(t || {}), R = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.SECONDARY = "secondary", r.TERTIARY = "tertiary", r.DISABLED = "disabled", r.BRAND = "brand", r))(R || {});
+import { jsx as i } from "react/jsx-runtime";
+import m from "clsx";
+import { g as s } from "./getVariantClassName-DoCNtwBw.mjs";
+import './heading.css';const d = "Heading", y = "_root_aa627_1", z = "_truncate_aa627_5", D = "_sizeXs_aa627_11", u = "_sizeSm_aa627_17", S = "_sizeMd_aa627_23", p = "_sizeLg_aa627_30", A = "_colorPrimary_aa627_37", M = "_colorSecondary_aa627_41", N = "_colorTertiary_aa627_45", L = "_colorDisabled_aa627_49", R = "_colorBrand_aa627_53", r = {
+  root: y,
+  truncate: z,
+  sizeXs: D,
+  sizeSm: u,
+  sizeMd: S,
+  sizeLg: p,
+  colorPrimary: A,
+  colorSecondary: M,
+  colorTertiary: N,
+  colorDisabled: L,
+  colorBrand: R
+}, b = (o) => {
+  const { as: t = "h2", children: c, color: a, ref: e, size: _ = "sm", truncate: n = !1 } = o, l = m(
+    r.root,
+    s("size", _, r),
+    a && s("color", a, r),
+    {
+      [r.truncate]: n
+    }
+  );
+  return /* @__PURE__ */ i(t, { className: l, ref: e, children: c });
+};
+b.displayName = d;
+var f = /* @__PURE__ */ ((o) => (o.XS = "xs", o.SM = "sm", o.MD = "md", o.LG = "lg", o))(f || {}), B = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.TERTIARY = "tertiary", o.DISABLED = "disabled", o.BRAND = "brand", o))(B || {});
 export {
-  R as EHeadingColor,
-  t as EHeadingSize,
-  D as Heading
+  B as EHeadingColor,
+  f as EHeadingSize,
+  b as Heading
 };