@konstructio/ui 0.1.2-alpha.11 → 0.1.2-alpha.111

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-B9GE4SXf.js";
+var t = a("w-fit py-4 px-6");
 export {
-  r as datePickerVariants
+  t as datePickerVariants
 };

package/dist/components/Divider/Divider.js

@@ -1,11 +1,11 @@
-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 });
-d.displayName = "Divider";
+import { t as m } from "../../utils-DnIJruo0.js";
+import { dividerVariants as e } from "./Divider.variants.js";
+import { jsx as o } from "react/jsx-runtime";
+var t = ({ className: r, component: i = "div", ...a }) => /* @__PURE__ */ o(i, {
+  className: m(e({ className: r })),
+  ...a
+});
+t.displayName = "Divider";
 export {
-  d as Divider
+  t 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-[1px]", "bg-zinc-200", "w-full"], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
+import { t as a } from "../../dist-B9GE4SXf.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

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

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

@@ -0,0 +1,78 @@
+import { t } from "../../dist-B9GE4SXf.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"
+]), o = 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 {
+  o as buttonCloseVariants,
+  a as drawerVariants,
+  e as overlayVariants,
+  i as resizeHandleVariants
+};

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

@@ -0,0 +1,15 @@
+import { t as e } from "../../../../utils-DnIJruo0.js";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+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__ */ s("div", {
+    className: e("flex-1", "overflow-y-auto", "p-4", m?.body, r),
+    children: o
+  });
+});
+p.displayName = "Drawer.Body";
+export {
+  p as Body
+};

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

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

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

@@ -0,0 +1,15 @@
+import { t } from "../../../../utils-DnIJruo0.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 {
+  i as Footer
+};

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

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

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

@@ -0,0 +1,16 @@
+import { t as d } from "../../../../utils-DnIJruo0.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 {
+  p as Header
+};

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

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

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

@@ -0,0 +1,8 @@
+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 {
+  t as Body,
+  p as Footer,
+  r as Header
+};

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

@@ -0,0 +1,9 @@
+var A = 500, _ = 400, I = 800, T = 10, D = 300, E = 20;
+export {
+  T as ANIMATION_DELAY_MS,
+  D as ANIMATION_DURATION_MS,
+  I as DEFAULT_MAX_WIDTH,
+  _ as DEFAULT_MIN_WIDTH,
+  A as DEFAULT_WIDTH,
+  E as KEYBOARD_RESIZE_STEP
+};

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+import "../constants/index.js";
+import { useCallback as b, useEffect as u, useRef as y, useState as D } from "react";
+var F = ({ canResize: o = !1, defaultWidth: g = 500, isOpen: n, maxWidth: l = 800, minWidth: a = 400, position: r = "right", onClose: w }) => {
+  const [I, h] = D(!1), [E, M] = D(!1), [T, c] = D(g), f = y(!1), i = y(() => {
+  }), d = y(() => {
+  });
+  u(() => {
+    let e;
+    return n ? (h(!0), e = setTimeout(() => M(!0), 10)) : (M(!1), e = setTimeout(() => h(!1), 300)), () => {
+      clearTimeout(e);
+    };
+  }, [n]), u(() => {
+    if (!n) return;
+    const e = new AbortController(), t = (m) => {
+      m.code === "Escape" && w?.();
+    };
+    return window.addEventListener("keydown", t, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [n, w]);
+  const s = b(() => {
+    document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", d.current), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }, []);
+  u(() => {
+    i.current = (e) => {
+      if (!f.current || !o) return;
+      let t;
+      r === "right" ? t = window.innerWidth - e.clientX : t = e.clientX, t = Math.max(a, Math.min(l, t)), c(t);
+    }, d.current = () => {
+      f.current = !1, s();
+    };
+  }, [
+    r,
+    a,
+    l,
+    o,
+    s
+  ]);
+  const L = () => {
+    f.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", d.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }, _ = (e) => {
+    if (!o) return;
+    const t = r === "right" && e.key === "ArrowLeft" || r === "left" && e.key === "ArrowRight", m = r === "right" && e.key === "ArrowRight" || r === "left" && e.key === "ArrowLeft";
+    t ? (e.preventDefault(), c((A) => Math.min(l, A + 20))) : m && (e.preventDefault(), c((A) => Math.max(a, A - 20)));
+  };
+  return u(() => s, [s]), {
+    isAnimating: E,
+    isVisible: I,
+    width: T,
+    translateClass: E ? "translate-x-0" : r === "left" ? "-translate-x-full" : "translate-x-full",
+    handleMouseDown: L,
+    handleKeyDown: _
+  };
+};
+export {
+  F 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-N2OStZoU.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-Blhkj-Oi.js";
 export {
-  I as DropdownButton
+  t as DropdownButton
 };

package/dist/components/Filter/Filter.js

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

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

@@ -1,22 +1,27 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "gap-8", "items-center"]), n = t([
+import { t } from "../../dist-B9GE4SXf.js";
+var e = t([
+  "flex",
+  "gap-8",
+  "items-center"
+]), r = t([
   "flex",
   "items-center",
   "gap-1",
   "text-slate-500",
   "cursor-pointer",
   "text-sm",
-  "w-max"
-]), r = t([
+  "w-max",
+  "dark:text-metal-300"
+]), i = t([
   "text-slate-400",
-  "h-[20px]",
-  "w-[20px]",
+  "h-5",
+  "w-5",
   "transition-all",
   "duration-150",
   "ease-in-out"
 ]);
 export {
-  r as filterButtonIconVariants,
-  n as filterButtonVariants,
-  a as filterVariants
+  i as filterButtonIconVariants,
+  r as filterButtonVariants,
+  e as filterVariants
 };