@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

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,10 +1,10 @@
-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,
+import { t as a } from "../../utils-DHuiYnx1.js";
+import { dividerVariants as m } from "./Divider.variants.js";
+import { jsx as o } from "react/jsx-runtime";
+var d = ({ className: i, ...r }) => /* @__PURE__ */ o("div", {
+  className: a(m({ className: i })),
   ...r
-}) => /* @__PURE__ */ m("div", { className: o(a({ 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-[1px]", "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

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

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

@@ -0,0 +1,78 @@
+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"
+]), 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-DHuiYnx1.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-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 {
+  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-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 {
+  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,62 @@
+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), 10)) : (h(!1), e = setTimeout(() => g(!1), 300)), () => {
+      clearTimeout(e);
+    };
+  }, [s]), c(() => {
+    if (!s) return;
+    const e = new AbortController(), r = (A) => {
+      A.code === "Escape" && M?.();
+    };
+    return window.addEventListener("keydown", r, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [s, M]);
+  const o = D(() => {
+    document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", m.current), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }, []);
+  c(() => {
+    i.current = (e) => {
+      if (!d.current || !n) return;
+      let r;
+      t === "right" ? r = window.innerWidth - e.clientX : r = e.clientX, r = Math.max(l, Math.min(u, r)), f(r);
+    }, m.current = () => {
+      d.current = !1, o();
+    };
+  }, [
+    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";
+  }, []), 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: T,
+    width: L,
+    translateClass: v(() => a ? "translate-x-0" : t === "left" ? "-translate-x-full" : "translate-x-full", [a, t]),
+    handleMouseDown: _,
+    handleKeyDown: b
+  };
+};
+export {
+  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-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-B2XkEqPt.js";
 export {
-  I as DropdownButton
+  t as DropdownButton
 };

package/dist/components/Filter/Filter.js

@@ -1,20 +1,34 @@
-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 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 { 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 { 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 = s;
+t.DateFilterDropdown = d;
+t.DateRangeFilterDropdown = f;
+t.TimeFilterDropdown = D;
+t.ResetButton = c;
 export {
-  l as BadgeMultiSelect,
-  p as DateFilterDropdown,
-  t as Filter
+  n as BadgeMultiSelect,
+  d as DateFilterDropdown,
+  f as DateRangeFilterDropdown,
+  t as Filter,
+  s as TextMultiSelect,
+  D 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-DtEbXv47.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
 };