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

package/dist/components/Datepicker/DatePicker.js

@@ -1,140 +1,85 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useState as h, useCallback as f } from "react";
+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 p } from "./DatePicker.variants.js";
+import { datePickerVariants as L } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
-import { D as k } from "../../DayPicker-CaeUXRCF.js";
-import { C as g } from "../../chevron-left-BHBf-gQY.js";
-import { C as w } from "../../chevron-right-DvXGOiS_.js";
-const y = ({
-  className: l,
-  showOutsideDays: n = !0,
-  animate: d = !0,
-  arrowClassName: s,
-  monthsClassName: i,
-  defaultSelected: m,
-  onSelect: o,
-  ...u
-}) => {
-  const [c, x] = h(
-    () => m
-  ), b = f(
-    (e) => {
-      e && (x(e), o?.(e));
-    },
-    [o]
-  );
-  return /* @__PURE__ */ a(
-    k,
-    {
-      className: t(p({ 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(g, { className: t(e), ...r }) : /* @__PURE__ */ a(w, { className: t(e), ...r })
-      },
-      ...u
-    }
-  );
+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;
 };
-y.displayName = "KonstructDatePicker";
+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 });
+}
 export {
-  y as DatePicker
+  z as DatePicker
 };

package/dist/components/Datepicker/DatePicker.types.d.ts

@@ -14,7 +14,7 @@ type TimeZone = keyof ReturnType<typeof getAllTimezones>;
  * />
  * ```
  */
-export type DatePickerProps = Omit<DayPickerPrimitiveProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+export type Props = Omit<DayPickerPrimitiveProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
     /** CSS classes for the navigation arrows */
     arrowClassName?: string;
     /** CSS classes for the months container */
@@ -26,4 +26,6 @@ export type DatePickerProps = Omit<DayPickerPrimitiveProps, 'mode'> & VariantPro
     /** Callback when a date is selected */
     onSelect?: (date: Date) => void;
 };
+/** @deprecated Use Props instead */
+export type DatePickerProps = Props;
 export {};

package/dist/components/Divider/Divider.js

@@ -1,10 +1,21 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as o } from "../../utils/index.js";
-import { dividerVariants as a } from "./Divider.variants.js";
-const d = ({
-  className: i,
-  ...r
-}) => /* @__PURE__ */ m("div", { className: o(a({ className: i })), ...r });
+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;
+};
 d.displayName = "Divider";
 export {
   d as Divider

package/dist/components/Drawer/Drawer.js

@@ -1,134 +1,112 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { R as g } from "../../index-BKjcReYh.js";
-import { useId as z, useMemo as B } from "react";
-import { createPortal as F } from "react-dom";
-import { R as I } from "../../Combination-BtmnusWq.js";
-import { cn as o } from "../../utils/index.js";
-import { overlayVariants as M, resizeHandleVariants as j, buttonCloseVariants as k, drawerVariants as A } from "./Drawer.variants.js";
-import { DEFAULT_WIDTH as f } from "./constants/index.js";
-import { useDrawer as K } from "./hooks/useDrawer.js";
-import { DrawerContext as P } from "./contexts/Drawer.context.js";
-import { X as T } from "../../x-Eoa9FJjA.js";
-import { Header as W } from "./components/Header/Header.js";
-import { Body as E } from "./components/Body/Body.js";
-import { Footer as L } from "./components/Footer/Footer.js";
-const d = ({
-  canResize: t = !1,
-  children: s,
-  className: u,
-  classNames: r,
-  container: c,
-  isOpen: p,
-  maxWidth: h,
-  minWidth: w,
-  position: i = "right",
-  showCloseButton: y = !0,
-  theme: b,
-  onClose: a
-}) => {
-  const n = z(), {
-    handleKeyDown: v,
-    handleMouseDown: D,
-    isAnimating: m,
-    isVisible: x,
-    translateClass: V,
-    width: H
-  } = K({
-    canResize: t,
-    defaultWidth: f,
-    isOpen: p,
-    maxWidth: h,
-    minWidth: w,
-    position: i,
-    onClose: a
-  }), C = B(
-    () => ({ classNames: r, headerId: n }),
-    [r, n]
-  );
-  if (!x)
+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 R = /* @__PURE__ */ e(P.Provider, { value: C, children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ l(
-    "div",
-    {
-      className: o("fixed inset-0 z-40", r?.root),
-      "data-theme": b,
-      children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: o(
-              M(),
-              {
-                "opacity-50": m,
-                "opacity-0": !m
-              },
-              r?.overlay
-            ),
-            "aria-hidden": "true",
-            onClick: a,
-            role: "presentation"
-          }
-        ),
-        /* @__PURE__ */ l(
-          "div",
-          {
-            className: o(
-              A({ position: i }),
-              V,
-              r?.panel,
-              u
-            ),
-            style: { width: t ? H : f },
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": n,
-            children: [
-              t && /* @__PURE__ */ e(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Resize drawer",
-                  className: o(
-                    j({ position: i }),
-                    r?.resizeHandle
-                  ),
-                  onMouseDown: D,
-                  onKeyDown: v
-                }
-              ),
-              y && /* @__PURE__ */ l(
-                "button",
-                {
-                  className: o(k(), r?.closeButton),
-                  onClick: a,
-                  type: "button",
-                  children: [
-                    /* @__PURE__ */ e(T, { size: 20 }),
-                    /* @__PURE__ */ e(g, { children: "Dismiss drawer" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  className: o(
-                    "flex flex-1 flex-col h-full overflow-hidden",
-                    r?.content
-                  ),
-                  children: s
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) }) });
-  return F(R, c || document.body);
+  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;
 };
-d.Header = W;
-d.Body = E;
-d.Footer = L;
+L.Header = ne;
+L.Body = ce;
+L.Footer = de;
 export {
-  d as Drawer
+  L as Drawer
 };

package/dist/components/Drawer/Drawer.variants.js

@@ -1,89 +1,25 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const o = t(
-  [
-    "bg-white",
-    "dark:bg-metal-900",
-    "duration-300",
-    "ease-in-out",
-    "fixed",
-    "flex",
-    "flex-col",
-    "group/drawer",
-    "inset-y-0",
-    "shadow-xl",
-    "transform",
-    "transition-transform",
-    "z-50"
-  ],
-  {
-    variants: {
-      position: {
-        left: [
-          "left-0",
-          "border-r",
-          "border-slate-200",
-          "dark:border-metal-700"
-        ],
-        right: [
-          "right-0",
-          "border-l",
-          "border-slate-200",
-          "dark:border-metal-700"
-        ]
-      }
-    },
-    defaultVariants: {
-      position: "right"
+const o = t(["bg-white", "dark:bg-metal-900", "duration-300", "ease-in-out", "fixed", "flex", "flex-col", "group/drawer", "inset-y-0", "shadow-xl", "transform", "transition-transform", "z-50"], {
+  variants: {
+    position: {
+      left: ["left-0", "border-r", "border-slate-200", "dark:border-metal-700"],
+      right: ["right-0", "border-l", "border-slate-200", "dark:border-metal-700"]
     }
+  },
+  defaultVariants: {
+    position: "right"
   }
-), a = t([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-black",
-  "transition-opacity",
-  "duration-300"
-]), e = t([
-  "absolute",
-  "right-3",
-  "top-3",
-  "cursor-pointer",
-  "text-slate-500",
-  "hover:text-slate-700",
-  "dark:text-metal-400",
-  "dark:hover:text-metal-300",
-  "transition-colors",
-  "z-10"
-]), i = t(
-  [
-    "absolute",
-    "bg-slate-200",
-    "dark:bg-metal-700",
-    "border-none",
-    "cursor-col-resize",
-    "h-full",
-    "opacity-0",
-    "p-0",
-    "top-0",
-    "transition-opacity",
-    "w-1",
-    "z-50",
-    "group-hover/drawer:opacity-100",
-    "hover:opacity-100!",
-    "focus:outline-none"
-  ],
-  {
-    variants: {
-      position: {
-        left: ["right-0"],
-        right: ["left-0"]
-      }
-    },
-    defaultVariants: {
-      position: "right"
+}), a = t(["fixed", "inset-0", "z-40", "bg-black", "transition-opacity", "duration-300"]), e = t(["absolute", "right-3", "top-3", "cursor-pointer", "text-slate-500", "hover:text-slate-700", "dark:text-metal-400", "dark:hover:text-metal-300", "transition-colors", "z-10"]), i = t(["absolute", "bg-slate-200", "dark:bg-metal-700", "border-none", "cursor-col-resize", "h-full", "opacity-0", "p-0", "top-0", "transition-opacity", "w-1", "z-50", "group-hover/drawer:opacity-100", "hover:opacity-100!", "focus:outline-none"], {
+  variants: {
+    position: {
+      left: ["right-0"],
+      right: ["left-0"]
     }
+  },
+  defaultVariants: {
+    position: "right"
   }
-);
+});
 export {
   e as buttonCloseVariants,
   o as drawerVariants,