@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.79

package/dist/components/DateRangePicker/utils/index.js

@@ -1,22 +1,22 @@
-import { calculatePresetRange as a } from "./presets.js";
-import { autoFormatDateInput as o, combineDateAndTime as i, formatDateToDisplayString as n, formatDateToString as m, formatTimeToString as g, getMonthName as T, isValidTimeString as p, parseDateString as D, parseDisplayDateString as S, parseTimeString as s } from "./validation.js";
-import { canNavigateToNextMonth as l, canNavigateToPrevMonth as f, createDisabledMatcher as x, isDateSelectable as N } from "./disabled-dates.js";
-import { PRESET_OPTIONS as M } from "../constants/presets.js";
+import { calculatePresetRange as e } from "./presets.js";
+import { canNavigateToNextMonth as r, canNavigateToPrevMonth as i, createDisabledMatcher as o, isDateSelectable as m } from "./disabled-dates.js";
+import { PRESET_OPTIONS as g } from "../constants/presets.js";
+import { autoFormatDateInput as T, combineDateAndTime as D, formatDateToDisplayString as S, formatDateToString as s, formatTimeToString as c, getMonthName as l, isValidTimeString as f, parseDateString as N, parseDisplayDateString as h, parseTimeString as M } from "./validation.js";
 export {
-  M as PRESET_OPTIONS,
-  o as autoFormatDateInput,
-  a as calculatePresetRange,
-  l as canNavigateToNextMonth,
-  f as canNavigateToPrevMonth,
-  i as combineDateAndTime,
-  x as createDisabledMatcher,
-  n as formatDateToDisplayString,
-  m as formatDateToString,
-  g as formatTimeToString,
-  T as getMonthName,
-  N as isDateSelectable,
-  p as isValidTimeString,
-  D as parseDateString,
-  S as parseDisplayDateString,
-  s as parseTimeString
+  g as PRESET_OPTIONS,
+  T as autoFormatDateInput,
+  e as calculatePresetRange,
+  r as canNavigateToNextMonth,
+  i as canNavigateToPrevMonth,
+  D as combineDateAndTime,
+  o as createDisabledMatcher,
+  S as formatDateToDisplayString,
+  s as formatDateToString,
+  c as formatTimeToString,
+  l as getMonthName,
+  m as isDateSelectable,
+  f as isValidTimeString,
+  N as parseDateString,
+  h as parseDisplayDateString,
+  M as parseTimeString
 };

package/dist/components/DateRangePicker/utils/presets.js

@@ -1,18 +1,16 @@
-const s = (o) => {
+var o = (n) => {
   const e = /* @__PURE__ */ new Date(), a = new Date(e.getFullYear(), e.getMonth(), e.getDate());
-  switch (o) {
+  switch (n) {
     case "today":
       return {
         from: a,
         to: a
       };
-    case "current-month": {
-      const t = new Date(e.getFullYear(), e.getMonth(), 1), n = new Date(e.getFullYear(), e.getMonth() + 1, 0);
+    case "current-month":
       return {
-        from: t,
-        to: n
+        from: new Date(e.getFullYear(), e.getMonth(), 1),
+        to: new Date(e.getFullYear(), e.getMonth() + 1, 0)
       };
-    }
     case "last-7-days": {
       const t = new Date(a);
       return t.setDate(t.getDate() - 6), {
@@ -32,5 +30,5 @@ const s = (o) => {
   }
 };
 export {
-  s as calculatePresetRange
+  o as calculatePresetRange
 };

package/dist/components/DateRangePicker/utils/validation.js

@@ -1,64 +1,67 @@
-const d = (r, n) => {
-  if (!r) return "";
-  const e = new Date(r);
+var p = (t, n) => {
+  if (!t) return "";
+  const e = new Date(t);
   return n && e.setHours(n.getHours(), n.getMinutes(), n.getSeconds()), e.toISOString();
-}, l = (r, n) => {
-  const e = r.length < n.length;
-  let t = r.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
-  return t = t.slice(0, 10), e || (/^\d{2}$/.test(t) || /^\d{2}\/\d{2}$/.test(t)) && (t = t + "/"), t;
-}, c = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], f = (r, n = "24") => {
-  if (!r) return !0;
-  const [e, t] = r.split(":").map(Number);
-  return isNaN(e) || isNaN(t) ? !1 : n === "24" ? e >= 0 && e <= 23 && t >= 0 && t <= 59 : e >= 1 && e <= 12 && t >= 0 && t <= 59;
-}, p = (r, n = "24", e) => {
-  if (!r || !f(r, n))
-    return;
-  const [t, s] = r.split(":").map(Number), o = /* @__PURE__ */ new Date();
-  let i = t;
-  return n === "12" && e && (e === "PM" && t !== 12 ? i = t + 12 : e === "AM" && t === 12 && (i = 0)), o.setHours(i, s, 0, 0), o;
-}, S = (r, n = "24") => {
-  if (!r) return "";
-  const e = r.getHours(), t = r.getMinutes();
-  if (n === "24")
-    return `${e.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
-  const s = e >= 12 ? "PM" : "AM";
-  return `${(e % 12 || 12).toString().padStart(2, "0")}:${t.toString().padStart(2, "0")} ${s}`;
-}, m = (r) => {
-  if (!r) return "";
-  const n = r.getDate(), e = c[r.getMonth()], t = r.getFullYear();
-  return `${n} ${e} ${t}`;
-}, N = (r) => {
-  if (!r) return "";
-  const n = (r.getMonth() + 1).toString().padStart(2, "0"), e = r.getDate().toString().padStart(2, "0"), t = r.getFullYear();
-  return `${n}/${e}/${t}`;
-}, h = (r) => {
-  if (!r) return;
-  const n = r.trim().split(" ");
+}, c = (t, n) => {
+  const e = t.length < n.length;
+  let r = t.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
+  return r = r.slice(0, 10), e || (/^\d{2}$/.test(r) || /^\d{2}\/\d{2}$/.test(r)) && (r = r + "/"), r;
+}, g = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], l = (t, n = "24") => {
+  if (!t) return !0;
+  const [e, r] = t.split(":").map(Number);
+  return isNaN(e) || isNaN(r) ? !1 : n === "24" ? e >= 0 && e <= 23 && r >= 0 && r <= 59 : e >= 1 && e <= 12 && r >= 0 && r <= 59;
+}, v = (t, n = "24", e) => {
+  if (!t || !l(t, n)) return;
+  const [r, i] = t.split(":").map(Number), a = /* @__PURE__ */ new Date();
+  let o = r;
+  return n === "12" && e && (e === "PM" && r !== 12 ? o = r + 12 : e === "AM" && r === 12 && (o = 0)), a.setHours(o, i, 0, 0), a;
+}, d = (t, n = "24") => {
+  if (!t) return "";
+  const e = t.getHours(), r = t.getMinutes();
+  if (n === "24") return `${e.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+  const i = e >= 12 ? "PM" : "AM";
+  return `${(e % 12 || 12).toString().padStart(2, "0")}:${r.toString().padStart(2, "0")} ${i}`;
+}, S = (t) => t ? `${t.getDate()} ${g[t.getMonth()]} ${t.getFullYear()}` : "", N = (t) => t ? `${(t.getMonth() + 1).toString().padStart(2, "0")}/${t.getDate().toString().padStart(2, "0")}/${t.getFullYear()}` : "", m = (t) => {
+  if (!t) return;
+  const n = t.trim().split(" ");
   if (n.length !== 3) return;
-  const [e, t, s] = n, o = parseInt(e, 10), i = parseInt(s, 10), u = c.findIndex((g) => g.toLowerCase() === t.toLowerCase());
-  if (isNaN(o) || isNaN(i) || u === -1 || o < 1 || o > 31 || i < 1900 || i > 2100) return;
-  const a = new Date(i, u, o);
-  if (!(a.getMonth() !== u || a.getDate() !== o || a.getFullYear() !== i))
-    return a;
-}, D = (r) => {
-  if (!r) return;
-  const n = r.split("/");
+  const [e, r, i] = n, a = parseInt(e, 10), o = parseInt(i, 10), u = g.findIndex((f) => f.toLowerCase() === r.toLowerCase());
+  if (isNaN(a) || isNaN(o) || u === -1 || a < 1 || a > 31 || o < 1900 || o > 2100) return;
+  const s = new Date(o, u, a);
+  if (!(s.getMonth() !== u || s.getDate() !== a || s.getFullYear() !== o))
+    return s;
+}, D = (t) => {
+  if (!t) return;
+  const n = t.split("/");
   if (n.length !== 3) return;
-  const [e, t, s] = n.map(Number);
-  if (isNaN(e) || isNaN(t) || isNaN(s) || e < 1 || e > 12 || t < 1 || t > 31 || s < 1900 || s > 2100) return;
-  const o = new Date(s, e - 1, t);
-  if (!(o.getMonth() !== e - 1 || o.getDate() !== t || o.getFullYear() !== s))
-    return o;
-}, v = (r) => c[r] || "";
+  const [e, r, i] = n.map(Number);
+  if (isNaN(e) || isNaN(r) || isNaN(i) || e < 1 || e > 12 || r < 1 || r > 31 || i < 1900 || i > 2100) return;
+  const a = new Date(i, e - 1, r);
+  if (!(a.getMonth() !== e - 1 || a.getDate() !== r || a.getFullYear() !== i))
+    return a;
+}, h = (t) => g[t] || "";
 export {
-  l as autoFormatDateInput,
-  d as combineDateAndTime,
-  m as formatDateToDisplayString,
+  c as autoFormatDateInput,
+  p as combineDateAndTime,
+  S as formatDateToDisplayString,
   N as formatDateToString,
-  S as formatTimeToString,
-  v as getMonthName,
-  f as isValidTimeString,
+  d as formatTimeToString,
+  h as getMonthName,
+  l as isValidTimeString,
   D as parseDateString,
-  h as parseDisplayDateString,
-  p as parseTimeString
+  m as parseDisplayDateString,
+  v as parseTimeString
 };

package/dist/components/Datepicker/DatePicker.js

@@ -1,85 +1,52 @@
-import { jsx as O } from "react/jsx-runtime";
-import { c as E } from "../../compiler-runtime-DA41awpA.js";
-import { useState as K } from "react";
-import { cn as t } from "../../utils/index.js";
-import { datePickerVariants as L } from "./DatePicker.variants.js";
+import { t } from "../../utils-DHuiYnx1.js";
+import { t as h } from "../../chevron-left-DRJXef9g.js";
+import { t as f } from "../../chevron-right-BooB_b7g.js";
+import { t as p } from "../../DayPicker-CNWQ1Oyd.js";
+import { datePickerVariants as k } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
-import { D as V } from "../../DayPicker-CaeUXRCF.js";
-import { C as $ } from "../../chevron-left-BHBf-gQY.js";
-import { C as q } from "../../chevron-right-DvXGOiS_.js";
-const z = (f) => {
-  const e = E.c(37);
-  let r, a, l, o, s, n, u, h;
-  e[0] !== f ? ({
-    className: a,
-    showOutsideDays: u,
-    animate: h,
-    arrowClassName: r,
-    monthsClassName: s,
-    defaultSelected: l,
-    onSelect: n,
-    ...o
-  } = f, e[0] = f, e[1] = r, e[2] = a, e[3] = l, e[4] = o, e[5] = s, e[6] = n, e[7] = u, e[8] = h) : (r = e[1], a = e[2], l = e[3], o = e[4], s = e[5], n = e[6], u = e[7], h = e[8]);
-  const N = u === void 0 ? !0 : u, C = h === void 0 ? !0 : h;
-  let p;
-  e[9] !== l ? (p = () => l, e[9] = l, e[10] = p) : p = e[10];
-  const [D, R] = K(p);
-  let b;
-  e[11] !== n ? (b = (j) => {
-    j && (R(j), n?.(j));
-  }, e[11] = n, e[12] = b) : b = e[12];
-  const P = b;
-  let i;
-  e[13] !== a ? (i = t(L({
-    className: a
-  })), e[13] = a, e[14] = i) : i = e[14];
-  let x, k;
-  e[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (x = t("cursor-pointer", "text-slate-500", "w-5", "h-5", "text-slate-500", "w-4", "h-4", "dark:text-metal-200"), k = t("h-[30px]", "aria-selected:opacity-100", "font-semibold", "hover:rounded-full", "cursor-pointer", "rounded-full", "w-[30px]"), e[15] = x, e[16] = k) : (x = e[15], k = e[16]);
-  let y;
-  e[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (y = t("text-slate-700", "font-semibold", "text-sm", "pl-1", "h-8", "flex", "items-center", "dark:text-white"), e[17] = y) : y = e[17];
-  let m;
-  e[18] !== s ? (m = t("flex", "flex-col", "relative", "px-5", "py-4", "rounded-lg", "shadow-md", "px-6", "py-4", "w-[307px]", "justify-center", "items-center", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", s), e[18] = s, e[19] = m) : m = e[19];
-  let c;
-  e[20] !== r ? (c = t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", r), e[20] = r, e[21] = c) : c = e[21];
-  let _;
-  e[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "[&>button]:transition-all", "[&>button]:duration-300", "[&>button]:rounded-full", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900"), e[22] = _) : _ = e[22];
-  let g;
-  e[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = t("text-slate-700", "[&>tr>td]:border-transparent", "[&>tr>td]:border-r-[8px]", "[&>tr>td]:last:border-r-0", "dark:text-white"), e[23] = g) : g = e[23];
-  let w;
-  e[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = t("[&>thead]:table-header-group", "[&>thead]:relative", "[&>thead]:after:block", '[&>thead]:after:content-[" "]', "[&>thead]:after:h-4"), e[24] = w) : w = e[24];
-  let d;
-  e[25] !== c || e[26] !== m ? (d = {
-    chevron: x,
-    day_button: k,
-    day: "text-center text-sm leading-5",
-    month_caption: y,
-    months: m,
-    month: "flex flex-col gap-4",
-    nav: c,
-    outside: "text-slate-400 dark:text-metal-500",
-    selected: _,
-    table: "w-full",
-    weekdays: "text-slate-500 dark:text-metal-300",
-    weeks: g,
-    weekday: "font-semibold text-sm uppercase text-sm",
-    today: "text-blue-600 dark:text-aurora-500 data-[selected=true]:text-white",
-    month_grid: w
-  }, e[25] = c, e[26] = m, e[27] = d) : d = e[27];
-  let v;
-  e[28] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = {
-    Chevron: A
-  }, e[28] = v) : v = e[28];
-  let S;
-  return e[29] !== C || e[30] !== o || e[31] !== P || e[32] !== D || e[33] !== N || e[34] !== d || e[35] !== i ? (S = /* @__PURE__ */ O(V, { className: i, animate: C, mode: "single", selected: D, onSelect: P, showOutsideDays: N, role: "dialog", "aria-label": "Datepicker", classNames: d, components: v, ...o }), e[29] = C, e[30] = o, e[31] = P, e[32] = D, e[33] = N, e[34] = d, e[35] = i, e[36] = S) : S = e[36], S;
+import { useCallback as g, useState as w } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var y = ({ className: l, showOutsideDays: n = !0, animate: d = !0, arrowClassName: s, monthsClassName: i, defaultSelected: m, onSelect: o, ...u }) => {
+  const [c, x] = w(() => m), b = g((e) => {
+    e && (x(e), o?.(e));
+  }, [o]);
+  return /* @__PURE__ */ a(p, {
+    className: t(k({ className: l })),
+    animate: d,
+    mode: "single",
+    selected: c,
+    onSelect: b,
+    showOutsideDays: n,
+    role: "dialog",
+    "aria-label": "Datepicker",
+    classNames: {
+      chevron: t("cursor-pointer", "text-slate-500", "w-5", "h-5", "text-slate-500", "w-4", "h-4", "dark:text-metal-200"),
+      day_button: t("h-[30px]", "aria-selected:opacity-100", "font-semibold", "hover:rounded-full", "cursor-pointer", "rounded-full", "w-[30px]"),
+      day: "text-center text-sm leading-5",
+      month_caption: t("text-slate-700", "font-semibold", "text-sm", "pl-1", "h-8", "flex", "items-center", "dark:text-white"),
+      months: t("flex", "flex-col", "relative", "px-5", "py-4", "rounded-lg", "shadow-md", "px-6", "py-4", "w-[307px]", "justify-center", "items-center", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", i),
+      month: "flex flex-col gap-4",
+      nav: t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", s),
+      outside: "text-slate-400 dark:text-metal-500",
+      selected: t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "[&>button]:transition-all", "[&>button]:duration-300", "[&>button]:rounded-full", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900"),
+      table: "w-full",
+      weekdays: "text-slate-500 dark:text-metal-300",
+      weeks: t("text-slate-700", "[&>tr>td]:border-transparent", "[&>tr>td]:border-r-[8px]", "[&>tr>td]:last:border-r-0", "dark:text-white"),
+      weekday: "font-semibold text-sm uppercase text-sm",
+      today: "text-blue-600 dark:text-aurora-500 data-[selected=true]:text-white",
+      month_grid: t("[&>thead]:table-header-group", "[&>thead]:relative", "[&>thead]:after:block", '[&>thead]:after:content-[" "]', "[&>thead]:after:h-4")
+    },
+    components: { Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(h, {
+      className: t(e),
+      ...r
+    }) : /* @__PURE__ */ a(f, {
+      className: t(e),
+      ...r
+    }) },
+    ...u
+  });
 };
-z.displayName = "KonstructDatePicker";
-function A(f) {
-  const {
-    className: e,
-    ...r
-  } = f;
-  return r.orientation === "left" ? /* @__PURE__ */ O($, { className: t(e), ...r }) : /* @__PURE__ */ O(q, { className: t(e), ...r });
-}
+y.displayName = "KonstructDatePicker";
 export {
-  z as DatePicker
+  y as DatePicker
 };

package/dist/components/Datepicker/DatePicker.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t("w-fit py-4 px-6");
+import { t as a } from "../../dist-DtEbXv47.js";
+var t = a("w-fit py-4 px-6");
 export {
-  r as datePickerVariants
+  t as datePickerVariants
 };

package/dist/components/Divider/Divider.js

@@ -1,21 +1,10 @@
+import { t as a } from "../../utils-DHuiYnx1.js";
+import { dividerVariants as m } from "./Divider.variants.js";
 import { jsx as o } from "react/jsx-runtime";
-import { c as l } from "../../compiler-runtime-DA41awpA.js";
-import { cn as a } from "../../utils/index.js";
-import { dividerVariants as c } from "./Divider.variants.js";
-const d = (m) => {
-  const e = l.c(8);
-  let i, r;
-  e[0] !== m ? ({
-    className: i,
-    ...r
-  } = m, e[0] = m, e[1] = i, e[2] = r) : (i = e[1], r = e[2]);
-  let t;
-  e[3] !== i ? (t = a(c({
-    className: i
-  })), e[3] = i, e[4] = t) : t = e[4];
-  let s;
-  return e[5] !== r || e[6] !== t ? (s = /* @__PURE__ */ o("div", { className: t, ...r }), e[5] = r, e[6] = t, e[7] = s) : s = e[7], s;
-};
+var d = ({ className: i, ...r }) => /* @__PURE__ */ o("div", {
+  className: a(m({ className: i })),
+  ...r
+});
 d.displayName = "Divider";
 export {
   d as Divider

package/dist/components/Divider/Divider.variants.js

@@ -1,14 +1,12 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const i = a(["h-px", "bg-zinc-200", "w-full"], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
+import { t as a } from "../../dist-DtEbXv47.js";
+var r = a([
+  "h-px",
+  "bg-zinc-200",
+  "w-full"
+], {
+  variants: { variant: { default: "" } },
+  defaultVariants: { variant: "default" }
 });
 export {
-  i as dividerVariants
+  r as dividerVariants
 };

package/dist/components/Drawer/Drawer.js

@@ -1,112 +1,76 @@
-import { jsx as r, jsxs as T } from "react/jsx-runtime";
-import { c as J } from "../../compiler-runtime-DA41awpA.js";
-import { R as Q } from "../../index-BKjcReYh.js";
-import { useId as Y } from "react";
-import { createPortal as Z } from "react-dom";
-import { R as ee } from "../../Combination-BtmnusWq.js";
-import { cn as y } from "../../utils/index.js";
-import { overlayVariants as te, drawerVariants as oe, resizeHandleVariants as le, buttonCloseVariants as ie } from "./Drawer.variants.js";
-import { DEFAULT_WIDTH as X } from "./constants/index.js";
-import { useDrawer as re } from "./hooks/useDrawer.js";
-import { X as se } from "../../x-Eoa9FJjA.js";
-import { DrawerContext as ae } from "./contexts/Drawer.context.js";
-import { Header as ne } from "./components/Header/Header.js";
-import { Body as ce } from "./components/Body/Body.js";
-import { Footer as de } from "./components/Footer/Footer.js";
-const L = (_) => {
-  const e = J.c(58), {
-    canResize: O,
-    children: R,
-    className: N,
-    classNames: t,
-    container: $,
-    isOpen: B,
-    maxWidth: H,
-    minWidth: V,
-    position: S,
-    showCloseButton: U,
-    theme: W,
-    onClose: o
-  } = _, i = O === void 0 ? !1 : O, l = S === void 0 ? "right" : S, g = U === void 0 ? !0 : U, s = Y();
-  let x;
-  e[0] !== i || e[1] !== B || e[2] !== H || e[3] !== V || e[4] !== o || e[5] !== l ? (x = {
-    canResize: i,
-    defaultWidth: X,
-    isOpen: B,
-    maxWidth: H,
-    minWidth: V,
-    position: l,
-    onClose: o
-  }, e[0] = i, e[1] = B, e[2] = H, e[3] = V, e[4] = o, e[5] = l, e[6] = x) : x = e[6];
-  const {
-    handleKeyDown: F,
-    handleMouseDown: I,
-    isAnimating: b,
-    isVisible: q,
-    translateClass: j,
-    width: G
-  } = re(x);
-  let D;
-  e[7] !== t || e[8] !== s ? (D = {
-    classNames: t,
-    headerId: s
-  }, e[7] = t, e[8] = s, e[9] = D) : D = e[9];
-  const k = D;
-  if (!q)
-    return null;
-  const A = t?.root;
-  let a;
-  e[10] !== A ? (a = y("fixed inset-0 z-40", A), e[10] = A, e[11] = a) : a = e[11];
-  let n;
-  e[12] !== t?.overlay || e[13] !== b ? (n = y(te(), {
-    "opacity-50": b,
-    "opacity-0": !b
-  }, t?.overlay), e[12] = t?.overlay, e[13] = b, e[14] = n) : n = e[14];
-  let c;
-  e[15] !== o || e[16] !== n ? (c = /* @__PURE__ */ r("div", { className: n, "aria-hidden": "true", onClick: o, role: "presentation" }), e[15] = o, e[16] = n, e[17] = c) : c = e[17];
-  let d;
-  e[18] !== N || e[19] !== t?.panel || e[20] !== l || e[21] !== j ? (d = y(oe({
-    position: l
-  }), j, t?.panel, N), e[18] = N, e[19] = t?.panel, e[20] = l, e[21] = j, e[22] = d) : d = e[22];
-  const E = i ? G : X;
-  let m;
-  e[23] !== E ? (m = {
-    width: E
-  }, e[23] = E, e[24] = m) : m = e[24];
-  let f;
-  e[25] !== i || e[26] !== t?.resizeHandle || e[27] !== F || e[28] !== I || e[29] !== l ? (f = i && /* @__PURE__ */ r("button", { type: "button", "aria-label": "Resize drawer", className: y(le({
-    position: l
-  }), t?.resizeHandle), onMouseDown: I, onKeyDown: F }), e[25] = i, e[26] = t?.resizeHandle, e[27] = F, e[28] = I, e[29] = l, e[30] = f) : f = e[30];
-  let p;
-  e[31] !== t?.closeButton || e[32] !== o || e[33] !== g ? (p = g && /* @__PURE__ */ T("button", { className: y(ie(), t?.closeButton), onClick: o, type: "button", children: [
-    /* @__PURE__ */ r(se, { size: 20 }),
-    /* @__PURE__ */ r(Q, { children: "Dismiss drawer" })
-  ] }), e[31] = t?.closeButton, e[32] = o, e[33] = g, e[34] = p) : p = e[34];
-  const K = t?.content;
-  let u;
-  e[35] !== K ? (u = y("flex flex-1 flex-col h-full overflow-hidden", K), e[35] = K, e[36] = u) : u = e[36];
-  let h;
-  e[37] !== R || e[38] !== u ? (h = /* @__PURE__ */ r("div", { className: u, children: R }), e[37] = R, e[38] = u, e[39] = h) : h = e[39];
-  let w;
-  e[40] !== s || e[41] !== d || e[42] !== m || e[43] !== f || e[44] !== p || e[45] !== h ? (w = /* @__PURE__ */ T("div", { className: d, style: m, role: "dialog", "aria-modal": "true", "aria-labelledby": s, children: [
-    f,
-    p,
-    h
-  ] }), e[40] = s, e[41] = d, e[42] = m, e[43] = f, e[44] = p, e[45] = h, e[46] = w) : w = e[46];
-  let v;
-  e[47] !== w || e[48] !== a || e[49] !== c || e[50] !== W ? (v = /* @__PURE__ */ r(ee, { children: /* @__PURE__ */ T("div", { className: a, "data-theme": W, children: [
-    c,
-    w
-  ] }) }), e[47] = w, e[48] = a, e[49] = c, e[50] = W, e[51] = v) : v = e[51];
-  let z;
-  e[52] !== k || e[53] !== v ? (z = /* @__PURE__ */ r(ae.Provider, { value: k, children: v }), e[52] = k, e[53] = v, e[54] = z) : z = e[54];
-  const M = z, P = $ || document.body;
-  let C;
-  return e[55] !== M || e[56] !== P ? (C = Z(M, P), e[55] = M, e[56] = P, e[57] = C) : C = e[57], C;
+"use client";
+import { t as g } from "../../x-BwIi6Wii.js";
+import { t as z } from "../../dist-CBnErrr1.js";
+import { t as o } from "../../utils-DHuiYnx1.js";
+import { t as B } from "../../Combination-DUTBK_qM.js";
+import { DrawerContext as C } from "./contexts/Drawer.context.js";
+import { Header as F } from "./components/Header/Header.js";
+import { Body as I } from "./components/Body/Body.js";
+import { Footer as M } from "./components/Footer/Footer.js";
+import { buttonCloseVariants as j, drawerVariants as k, overlayVariants as A, resizeHandleVariants as K } from "./Drawer.variants.js";
+import "./constants/index.js";
+import { useDrawer as P } from "./hooks/useDrawer.js";
+import { useId as R, useMemo as T } from "react";
+import { createPortal as W } from "react-dom";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+var d = ({ canResize: t = !1, children: s, className: f, classNames: r, container: u, isOpen: c, maxWidth: p, minWidth: h, position: i = "right", showCloseButton: w = !0, theme: y, onClose: a }) => {
+  const l = R(), { handleKeyDown: v, handleMouseDown: b, isAnimating: m, isVisible: D, translateClass: x, width: V } = P({
+    canResize: t,
+    defaultWidth: 500,
+    isOpen: c,
+    maxWidth: p,
+    minWidth: h,
+    position: i,
+    onClose: a
+  }), H = T(() => ({
+    classNames: r,
+    headerId: l
+  }), [r, l]);
+  return D ? W(/* @__PURE__ */ e(C.Provider, {
+    value: H,
+    children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ n("div", {
+      className: o("fixed inset-0 z-40", r?.root),
+      "data-theme": y,
+      children: [/* @__PURE__ */ e("div", {
+        className: o(A(), {
+          "opacity-50": m,
+          "opacity-0": !m
+        }, r?.overlay),
+        "aria-hidden": "true",
+        onClick: a,
+        role: "presentation"
+      }), /* @__PURE__ */ n("div", {
+        className: o(k({ position: i }), x, r?.panel, f),
+        style: { width: t ? V : 500 },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": l,
+        children: [
+          t && /* @__PURE__ */ e("button", {
+            type: "button",
+            "aria-label": "Resize drawer",
+            className: o(K({ position: i }), r?.resizeHandle),
+            onMouseDown: b,
+            onKeyDown: v
+          }),
+          w && /* @__PURE__ */ n("button", {
+            className: o(j(), r?.closeButton),
+            onClick: a,
+            type: "button",
+            children: [/* @__PURE__ */ e(g, { size: 20 }), /* @__PURE__ */ e(z, { children: "Dismiss drawer" })]
+          }),
+          /* @__PURE__ */ e("div", {
+            className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
+            children: s
+          })
+        ]
+      })]
+    }) })
+  }), u || document.body) : null;
 };
-L.Header = ne;
-L.Body = ce;
-L.Footer = de;
+d.Header = F;
+d.Body = I;
+d.Footer = M;
 export {
-  L as Drawer
+  d as Drawer
 };