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

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

@@ -1,49 +1,42 @@
-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"
-    }
-  }
-), a = t([
+import { t } from "../../dist-DtEbXv47.js";
+var a = 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" }
+}), e = t([
   "fixed",
   "inset-0",
   "z-40",
   "bg-black",
   "transition-opacity",
   "duration-300"
-]), e = t([
+]), o = t([
   "absolute",
   "right-3",
   "top-3",
@@ -54,39 +47,32 @@ const o = t(
   "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"
-    }
-  }
-);
+]), 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,
-  a as overlayVariants,
+  o as buttonCloseVariants,
+  a as drawerVariants,
+  e as overlayVariants,
   i as resizeHandleVariants
 };

package/dist/components/Drawer/components/Body/Body.js

@@ -1,22 +1,13 @@
-import { jsx as e } from "react/jsx-runtime";
-import { memo as t } from "react";
-import { cn as s } from "../../../../utils/index.js";
+import { t as e } from "../../../../utils-DHuiYnx1.js";
 import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
-const p = t(({ children: o, className: r }) => {
+import { memo as t } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var p = t(({ children: o, className: r }) => {
   const { classNames: m } = a();
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: s(
-        "flex-1",
-        "overflow-y-auto",
-        "p-4",
-        m?.body,
-        r
-      ),
-      children: o
-    }
-  );
+  return /* @__PURE__ */ s("div", {
+    className: e("flex-1", "overflow-y-auto", "p-4", m?.body, r),
+    children: o
+  });
 });
 p.displayName = "Drawer.Body";
 export {

package/dist/components/Drawer/components/Body/index.js

@@ -1,4 +1,4 @@
-import { Body as d } from "./Body.js";
+import { Body as r } from "./Body.js";
 export {
-  d as Body
+  r as Body
 };

package/dist/components/Drawer/components/Footer/Footer.js

@@ -1,24 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
-import { memo as m } from "react";
-import { cn as s } from "../../../../utils/index.js";
-import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
-const i = m(({ children: r, className: o }) => {
-  const { classNames: e } = a();
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: s(
-        "flex-shrink-0",
-        "border-t",
-        "border-slate-200",
-        "dark:border-metal-700",
-        "p-4",
-        e?.footer,
-        o
-      ),
-      children: r
-    }
-  );
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { useDrawerContext as m } from "../../contexts/Drawer.context.js";
+import { memo as a } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var i = a(({ children: r, className: o }) => {
+  const { classNames: e } = m();
+  return /* @__PURE__ */ s("div", {
+    className: t("flex-shrink-0", "border-t", "border-slate-200", "dark:border-metal-700", "p-4", e?.footer, o),
+    children: r
+  });
 });
 i.displayName = "Drawer.Footer";
 export {

package/dist/components/Drawer/components/Footer/index.js

@@ -1,4 +1,4 @@
-import { Footer as e } from "./Footer.js";
+import { Footer as r } from "./Footer.js";
 export {
-  e as Footer
+  r as Footer
 };

package/dist/components/Drawer/components/Header/Header.js

@@ -1,25 +1,14 @@
-import { jsx as d } from "react/jsx-runtime";
-import { memo as s } from "react";
-import { cn as t } from "../../../../utils/index.js";
-import { useDrawerContext as i } from "../../contexts/Drawer.context.js";
-const p = s(({ children: r, className: e, id: o }) => {
-  const { classNames: a, headerId: m } = i();
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      id: o ?? m,
-      className: t(
-        "flex-shrink-0",
-        "border-b",
-        "border-slate-200",
-        "dark:border-metal-700",
-        "p-4",
-        a?.header,
-        e
-      ),
-      children: r
-    }
-  );
+import { t as d } from "../../../../utils-DHuiYnx1.js";
+import { useDrawerContext as s } from "../../contexts/Drawer.context.js";
+import { memo as t } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var p = t(({ children: r, className: e, id: a }) => {
+  const { classNames: o, headerId: m } = s();
+  return /* @__PURE__ */ i("div", {
+    id: a ?? m,
+    className: d("flex-shrink-0", "border-b", "border-slate-200", "dark:border-metal-700", "p-4", o?.header, e),
+    children: r
+  });
 });
 p.displayName = "Drawer.Header";
 export {

package/dist/components/Drawer/components/Header/index.js

@@ -1,4 +1,4 @@
-import { Header as o } from "./Header.js";
+import { Header as e } from "./Header.js";
 export {
-  o as Header
+  e as Header
 };

package/dist/components/Drawer/components/index.js

@@ -1,8 +1,8 @@
-import { Body as e } from "./Body/Body.js";
-import { Footer as f } from "./Footer/Footer.js";
-import { Header as p } from "./Header/Header.js";
+import { Header as r } from "./Header/Header.js";
+import { Body as t } from "./Body/Body.js";
+import { Footer as p } from "./Footer/Footer.js";
 export {
-  e as Body,
-  f as Footer,
-  p as Header
+  t as Body,
+  p as Footer,
+  r as Header
 };

package/dist/components/Drawer/constants/index.js

@@ -1,4 +1,4 @@
-const A = 500, _ = 400, I = 800, T = 10, D = 300, E = 20;
+var A = 500, _ = 400, I = 800, T = 10, D = 300, E = 20;
 export {
   T as ANIMATION_DELAY_MS,
   D as ANIMATION_DURATION_MS,

package/dist/components/Drawer/contexts/Drawer.context.js

@@ -1,6 +1,6 @@
-import { createContext as t, useContext as e } from "react";
-const o = t({}), n = () => e(o);
+import { createContext as e, useContext as t } from "react";
+var r = e({}), a = () => t(r);
 export {
-  o as DrawerContext,
-  n as useDrawerContext
+  r as DrawerContext,
+  a as useDrawerContext
 };

package/dist/components/Drawer/contexts/index.js

@@ -1,5 +1,5 @@
-import { DrawerContext as t, useDrawerContext as o } from "./Drawer.context.js";
+import { DrawerContext as e, useDrawerContext as t } from "./Drawer.context.js";
 export {
-  t as DrawerContext,
-  o as useDrawerContext
+  e as DrawerContext,
+  t as useDrawerContext
 };

package/dist/components/Drawer/hooks/index.js

@@ -1,4 +1,4 @@
-import { useDrawer as o } from "./useDrawer.js";
+import { useDrawer as e } from "./useDrawer.js";
 export {
-  o as useDrawer
+  e as useDrawer
 };

package/dist/components/Drawer/hooks/useDrawer.js

@@ -1,20 +1,12 @@
-import { useState as D, useRef as w, useEffect as c, useCallback as E, useMemo as S } from "react";
-import { DEFAULT_WIDTH as k, ANIMATION_DELAY_MS as N, ANIMATION_DURATION_MS as K, DEFAULT_MIN_WIDTH as U, DEFAULT_MAX_WIDTH as x, KEYBOARD_RESIZE_STEP as I } from "../constants/index.js";
-const X = ({
-  canResize: n = !1,
-  defaultWidth: T = k,
-  isOpen: s,
-  maxWidth: u = x,
-  minWidth: l = U,
-  position: t = "right",
-  onClose: M
-}) => {
-  const [L, g] = D(!1), [a, h] = D(!1), [_, f] = D(T), d = w(!1), i = w(() => {
+import "../constants/index.js";
+import { useCallback as D, useEffect as c, useMemo as v, useRef as w, useState as E } from "react";
+var H = ({ canResize: n = !1, defaultWidth: I = 500, isOpen: s, maxWidth: u = 800, minWidth: l = 400, position: t = "right", onClose: M }) => {
+  const [T, g] = E(!1), [a, h] = E(!1), [L, f] = E(I), d = w(!1), i = w(() => {
   }), m = w(() => {
   });
   c(() => {
     let e;
-    return s ? (g(!0), e = setTimeout(() => h(!0), N)) : (h(!1), e = setTimeout(() => g(!1), K)), () => {
+    return s ? (g(!0), e = setTimeout(() => h(!0), 10)) : (h(!1), e = setTimeout(() => g(!1), 300)), () => {
       clearTimeout(e);
     };
   }, [s]), c(() => {
@@ -22,13 +14,11 @@ const X = ({
     const e = new AbortController(), r = (A) => {
       A.code === "Escape" && M?.();
     };
-    return window.addEventListener("keydown", r, {
-      signal: e.signal
-    }), () => {
+    return window.addEventListener("keydown", r, { signal: e.signal }), () => {
       e.abort();
     };
   }, [s, M]);
-  const o = E(() => {
+  const o = D(() => {
     document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", m.current), document.body.style.cursor = "", document.body.style.userSelect = "";
   }, []);
   c(() => {
@@ -39,28 +29,34 @@ const X = ({
     }, m.current = () => {
       d.current = !1, o();
     };
-  }, [t, l, u, n, o]);
-  const b = E(() => {
+  }, [
+    t,
+    l,
+    u,
+    n,
+    o
+  ]);
+  const _ = D(() => {
     d.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", m.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
-  }, []), v = E(
-    (e) => {
-      if (!n) return;
-      const r = t === "right" && e.key === "ArrowLeft" || t === "left" && e.key === "ArrowRight", A = t === "right" && e.key === "ArrowRight" || t === "left" && e.key === "ArrowLeft";
-      r ? (e.preventDefault(), f((y) => Math.min(u, y + I))) : A && (e.preventDefault(), f((y) => Math.max(l, y - I)));
-    },
-    [n, t, u, l]
-  );
-  c(() => o, [o]);
-  const R = S(() => a ? "translate-x-0" : t === "left" ? "-translate-x-full" : "translate-x-full", [a, t]);
-  return {
+  }, []), b = D((e) => {
+    if (!n) return;
+    const r = t === "right" && e.key === "ArrowLeft" || t === "left" && e.key === "ArrowRight", A = t === "right" && e.key === "ArrowRight" || t === "left" && e.key === "ArrowLeft";
+    r ? (e.preventDefault(), f((y) => Math.min(u, y + 20))) : A && (e.preventDefault(), f((y) => Math.max(l, y - 20)));
+  }, [
+    n,
+    t,
+    u,
+    l
+  ]);
+  return c(() => o, [o]), {
     isAnimating: a,
-    isVisible: L,
-    width: _,
-    translateClass: R,
-    handleMouseDown: b,
-    handleKeyDown: v
+    isVisible: T,
+    width: L,
+    translateClass: v(() => a ? "translate-x-0" : t === "left" ? "-translate-x-full" : "translate-x-full", [a, t]),
+    handleMouseDown: _,
+    handleKeyDown: b
   };
 };
 export {
-  X as useDrawer
+  H as useDrawer
 };

package/dist/components/DropdownButton/DropdownButton.js

@@ -1,135 +1,4 @@
-import { jsxs as h, jsx as p } from "react/jsx-runtime";
-import v, { forwardRef as x, useState as C, useRef as w, useCallback as b, useEffect as E } from "react";
-import { cn as l } from "../../utils/index.js";
-import { Button as P } from "../Button/Button.js";
-import { P as c } from "../../index-BOE_3f_Z.js";
-function m() {
-  return m = Object.assign || function(e) {
-    for (var i = 1; i < arguments.length; i++) {
-      var n = arguments[i];
-      for (var t in n)
-        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
-    }
-    return e;
-  }, m.apply(this, arguments);
-}
-function z(e, i) {
-  if (e == null) return {};
-  var n = L(e, i), t, r;
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < o.length; r++)
-      t = o[r], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
-  }
-  return n;
-}
-function L(e, i) {
-  if (e == null) return {};
-  var n = {}, t = Object.keys(e), r, o;
-  for (o = 0; o < t.length; o++)
-    r = t[o], !(i.indexOf(r) >= 0) && (n[r] = e[r]);
-  return n;
-}
-var g = x(function(e, i) {
-  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, o = r === void 0 ? 24 : r, s = z(e, ["color", "size"]);
-  return /* @__PURE__ */ v.createElement("svg", m({
-    ref: i,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: t,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ v.createElement("polyline", {
-    points: "6 9 12 15 18 9"
-  }));
-});
-g.propTypes = {
-  color: c.string,
-  size: c.oneOfType([c.string, c.number])
-};
-g.displayName = "ChevronDown";
-const I = ({
-  buttonClassName: e,
-  className: i,
-  itemClassName: n,
-  listClassName: t,
-  options: r
-}) => {
-  const [o, s] = C(!1), y = w(null), f = w(null), O = b(() => s((a) => !a), []), k = b((a) => {
-    s(!1), a?.();
-  }, []);
-  return E(() => {
-    const a = new AbortController(), u = (d) => {
-      d.key === "Escape" && s(!1);
-    }, j = (d) => {
-      f.current?.contains(d.target) || s(!1);
-    };
-    return document.addEventListener("keydown", u, {
-      signal: a.signal
-    }), document.addEventListener("mousedown", j, {
-      signal: a.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && s(!1);
-      },
-      {
-        signal: a.signal
-      }
-    ), () => {
-      a.abort();
-    };
-  }, [f]), /* @__PURE__ */ h("div", { ref: f, className: l("relative w-full", i), children: [
-    /* @__PURE__ */ h(
-      P,
-      {
-        ref: y,
-        className: l(
-          "flex gap-2 items-center justify-between w-full",
-          e
-        ),
-        onClick: O,
-        children: [
-          "Download Invoice as",
-          /* @__PURE__ */ p(
-            g,
-            {
-              className: l({
-                "transform rotate-180": o,
-                "transition-transform duration-200": !0
-              })
-            }
-          )
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ p(
-      "ul",
-      {
-        className: l(
-          "absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded shadow-xs animate-in fade-in-0 py-2",
-          t
-        ),
-        children: r.map((a, u) => /* @__PURE__ */ p(
-          "li",
-          {
-            className: l(
-              "hover:bg-gray-50 px-6 py-1.5 hover:cursor-pointer",
-              n
-            ),
-            onClick: () => k(a.onClick),
-            children: a.label
-          },
-          u
-        ))
-      }
-    )
-  ] });
-};
+import { t } from "../../DropdownButton-B2XkEqPt.js";
 export {
-  I as DropdownButton
+  t as DropdownButton
 };

package/dist/components/Filter/Filter.js

@@ -1,31 +1,34 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as l } from "../../utils/index.js";
-import { filterVariants as p } from "./Filter.variants.js";
+"use client";
+import { t as l } from "../../utils-DHuiYnx1.js";
 import { FilterProvider as a } from "./contexts/filter.provider.js";
+import { filterVariants as p } from "./Filter.variants.js";
 import { BadgeMultiSelect as n } from "./components/BadgeDropdown/BadgeMultiSelect.js";
-import { TextMultiSelect as d } from "./components/TextMultiSelect/TextMultiSelect.js";
-import { DateFilterDropdown as f } from "./components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as c } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { DateFilterDropdown as d } from "./components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as f } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as c } from "./components/ResetButton/ResetButton.js";
+import { TextMultiSelect as s } from "./components/TextMultiSelect/TextMultiSelect.js";
 import { TimeFilterDropdown as D } from "./components/TimeFilterDropdown/TimeFilterDropdown.js";
-import { ResetButton as s } from "./components/ResetButton/ResetButton.js";
-const t = ({
-  className: e,
-  theme: o = "civo",
-  children: i,
-  closeOnApply: m = !0
-}) => /* @__PURE__ */ r(a, { closeOnApply: m, children: /* @__PURE__ */ r("div", { className: l(p({ className: e })), "data-theme": o, children: i }) });
+import { jsx as e } from "react/jsx-runtime";
+var t = ({ className: r, theme: o = "civo", children: i, closeOnApply: m = !0 }) => /* @__PURE__ */ e(a, {
+  closeOnApply: m,
+  children: /* @__PURE__ */ e("div", {
+    className: l(p({ className: r })),
+    "data-theme": o,
+    children: i
+  })
+});
 t.displayName = "KonstructFilter";
 t.BadgeMultiSelect = n;
-t.TextMultiSelect = d;
-t.DateFilterDropdown = f;
-t.DateRangeFilterDropdown = c;
+t.TextMultiSelect = s;
+t.DateFilterDropdown = d;
+t.DateRangeFilterDropdown = f;
 t.TimeFilterDropdown = D;
-t.ResetButton = s;
+t.ResetButton = c;
 export {
   n as BadgeMultiSelect,
-  f as DateFilterDropdown,
-  c as DateRangeFilterDropdown,
+  d as DateFilterDropdown,
+  f as DateRangeFilterDropdown,
   t as Filter,
-  d as TextMultiSelect,
+  s as TextMultiSelect,
   D as TimeFilterDropdown
 };

package/dist/components/Filter/Filter.variants.js

@@ -1,5 +1,9 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "gap-8", "items-center"]), r = t([
+import { t } from "../../dist-DtEbXv47.js";
+var e = t([
+  "flex",
+  "gap-8",
+  "items-center"
+]), r = t([
   "flex",
   "items-center",
   "gap-1",
@@ -8,7 +12,7 @@ const a = t(["flex", "gap-8", "items-center"]), r = t([
   "text-sm",
   "w-max",
   "dark:text-metal-300"
-]), n = t([
+]), i = t([
   "text-slate-400",
   "h-5",
   "w-5",
@@ -17,7 +21,7 @@ const a = t(["flex", "gap-8", "items-center"]), r = t([
   "ease-in-out"
 ]);
 export {
-  n as filterButtonIconVariants,
+  i as filterButtonIconVariants,
   r as filterButtonVariants,
-  a as filterVariants
+  e as filterVariants
 };