@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.50

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

@@ -1,5 +1,5 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
+const i = a(["h-px", "bg-zinc-200", "w-full"], {
   variants: {
     variant: {
       default: ""

package/dist/components/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ 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";
+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++) {

package/dist/components/Filter/Filter.js

@@ -9,7 +9,7 @@ const t = ({
   theme: o = "civo",
   children: r
 }) => /* @__PURE__ */ i("div", { className: m(a({ className: e })), "data-theme": o, children: r });
-t.displayName = "Filter";
+t.displayName = "KonstructFilter";
 t.BadgeMultiSelect = l;
 t.DateFilterDropdown = p;
 t.ResetButton = s;

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

@@ -1,22 +1,23 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "gap-8", "items-center"]), n = t([
+const a = 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"
+]), n = 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,
+  n as filterButtonIconVariants,
+  r as filterButtonVariants,
   a as filterVariants
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -1,15 +1,15 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Badge as o } from "../../../Badge/Badge.js";
 import { Button as m } from "../../../Button/Button.js";
-import { Checkbox as C } from "../../../Checkbox/Checkbox.js";
-import { cn as n } from "../../../../utils/index.js";
-import { filterButtonIconVariants as y, filterButtonVariants as N } from "../../Filter.variants.js";
-import { useBadgeMultiSelect as B } from "./BadgeMultiSelect.hook.js";
-import { C as O } from "../../../../chevron-down-MZvQoT2F.js";
+import { Checkbox as k } from "../../../Checkbox/Checkbox.js";
+import { filterButtonIconVariants as C, filterButtonVariants as y } from "../../Filter.variants.js";
+import { cn as r } from "../../../../utils/index.js";
+import { useBadgeMultiSelect as N } from "./BadgeMultiSelect.hook.js";
+import { C as B } from "../../../../chevron-down-DgT-uSF9.js";
 const $ = ({
-  options: i,
+  options: n,
   label: p,
-  position: d = "left",
+  position: i = "left",
   onApply: f
 }) => {
   const {
@@ -19,72 +19,98 @@ const $ = ({
     selectedCount: c,
     handleOpen: g,
     handleResetOptions: b,
-    handleApplyOptions: v,
-    handleSelectOption: x
-  } = B({ onApply: f });
-  return i.length === 0 ? null : /* @__PURE__ */ a("div", { ref: h, className: "relative", children: [
-    /* @__PURE__ */ a(
+    handleApplyOptions: x,
+    handleSelectOption: v
+  } = N({ onApply: f });
+  return n.length === 0 ? null : /* @__PURE__ */ t("div", { ref: h, className: "relative", children: [
+    /* @__PURE__ */ t(
       "button",
       {
-        className: n(N(), {
-          "text-slate-700": l
+        className: r(y(), {
+          "text-slate-700 dark:text-metal-50": l
         }),
         onClick: g,
         children: [
           p,
           c.length > 0 && /* @__PURE__ */ e(o, { label: c.length.toString() }),
           /* @__PURE__ */ e(
-            O,
+            B,
             {
-              className: n(y(), {
-                "rotate-180": l,
-                "text-blue-600": l
+              className: r(C(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": l
               })
             }
           )
         ]
       }
     ),
-    l && /* @__PURE__ */ a(
+    l && /* @__PURE__ */ t(
       "div",
       {
-        className: n(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200",
+        className: r(
+          "absolute",
+          "top-full",
+          "mt-1",
+          "bg-white",
+          "rounded-md",
+          "shadow-md",
+          "animate-in",
+          "fade-in-0",
+          "z-10",
+          "border",
+          "border-gray-200",
+          "dark:bg-metal-800",
+          "dark:border-metal-700",
           {
-            "left-0": d === "left",
-            "right-0": d === "right"
+            "left-0": i === "left",
+            "right-0": i === "right"
           }
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: i.map((t) => {
+          /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: n.map((a) => {
             const s = !!u.find(
-              (r) => r.id === t.id
+              (d) => d.id === a.id
             );
-            return /* @__PURE__ */ a("div", { className: "flex gap-4 px-6", children: [
+            return /* @__PURE__ */ t("div", { className: "flex gap-4 px-6", children: [
               /* @__PURE__ */ e(
-                C,
+                k,
                 {
                   defaultChecked: s,
-                  "data-label": t.id,
-                  onChange: (r) => x(t, r)
+                  "data-label": a.id,
+                  onChange: (d) => v(a, d)
                 },
-                `${t.id}-${s}`
+                `${a.id}-${s}`
               ),
-              /* @__PURE__ */ e(o, { label: t.label, variant: t.variant })
-            ] }, t.id);
+              /* @__PURE__ */ e(o, { label: a.label, variant: a.variant })
+            ] }, a.id);
           }) }) }),
-          /* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-4 py-4 border-t border-gray-200", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: b,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(m, { appearance: "compact", onClick: v, children: "Apply" })
-          ] })
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: r(
+                "flex",
+                "justify-center",
+                "items-center",
+                "gap-4",
+                "py-4",
+                "border-t",
+                "border-gray-200",
+                "dark:border-metal-700"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  m,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: b,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(m, { appearance: "compact", onClick: x, children: "Apply" })
+              ]
+            }
+          )
         ]
       }
     )

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js

@@ -22,9 +22,9 @@ const R = ({
     const e = new AbortController();
     return document.addEventListener(
       f.OPEN,
-      (o) => {
+      ((o) => {
         o.detail !== t && a(!1);
-      },
+      }),
       {
         signal: e.signal
       }

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js

@@ -1,55 +1,71 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as g } from "../../../Badge/Badge.js";
+import { Badge as b } from "../../../Badge/Badge.js";
 import { Button as i } from "../../../Button/Button.js";
-import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
-import { cn as o } from "../../../../utils/index.js";
-import { filterButtonIconVariants as x, filterButtonVariants as y } from "../../Filter.variants.js";
-import { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { C as N } from "../../../../chevron-down-MZvQoT2F.js";
+import { DatePicker as g } from "../../../Datepicker/DatePicker.js";
+import { filterButtonIconVariants as x, filterButtonVariants as w } from "../../Filter.variants.js";
+import { cn as t } from "../../../../utils/index.js";
+import { useDateFilterDropdown as y } from "./DateFilterDropdown.hook.js";
+import { C as k } from "../../../../chevron-down-DgT-uSF9.js";
 const R = ({
-  label: s,
+  label: d,
   position: l = "left",
-  onApply: p
+  onApply: s
 }) => {
   const {
-    id: c,
+    id: p,
     appliedDay: n,
-    isOpen: t,
-    selectedDay: r,
-    wrapperRef: d,
-    handleApply: m,
+    isOpen: r,
+    selectedDay: o,
+    wrapperRef: m,
+    handleApply: c,
     handleOpen: f,
     handleSelect: h,
     handleReset: u
-  } = D({ onApply: p });
-  return /* @__PURE__ */ a("div", { ref: d, className: "relative", children: [
+  } = y({ onApply: s });
+  return /* @__PURE__ */ a("div", { ref: m, className: "relative", children: [
     /* @__PURE__ */ a(
       "button",
       {
-        className: o(y(), {
-          "text-slate-700": t
+        className: t(w(), {
+          "text-slate-700": r
         }),
         onClick: f,
         children: [
-          s,
-          n && /* @__PURE__ */ e(g, { label: n }),
+          d,
+          n && /* @__PURE__ */ e(b, { label: n }),
           /* @__PURE__ */ e(
-            N,
+            k,
             {
-              className: o(x(), {
-                "rotate-180": t,
-                "text-blue-600": t
+              className: t(x(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": r
               })
             }
           )
         ]
       }
     ),
-    t && /* @__PURE__ */ a(
+    r && /* @__PURE__ */ a(
       "div",
       {
-        className: o(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200 flex flex-col gap-4 py-4 px-6",
+        className: t(
+          "absolute",
+          "top-full",
+          "mt-1",
+          "bg-white",
+          "rounded-md",
+          "shadow-md",
+          "animate-in",
+          "fade-in-0",
+          "z-10",
+          "border",
+          "border-gray-200",
+          "flex",
+          "flex-col",
+          "gap-4",
+          "py-4",
+          "px-6",
+          "dark:bg-metal-800",
+          "dark:border-metal-700",
           {
             "left-0": l === "left",
             "right-0": l === "right"
@@ -57,29 +73,46 @@ const R = ({
         ),
         children: [
           /* @__PURE__ */ e(
-            w,
+            g,
             {
               className: "p-0",
               arrowClassName: "-top-1 right-0",
-              monthsClassName: "shadow-none p-0 w-auto",
-              defaultSelected: r,
-              defaultMonth: r,
+              monthsClassName: t(
+                "shadow-none",
+                "p-0",
+                "w-auto",
+                "dark:border-transparent"
+              ),
+              defaultSelected: o,
+              defaultMonth: o,
               onSelect: h
             },
-            r?.toISOString() ?? c
+            o?.toISOString() ?? p
           ),
-          /* @__PURE__ */ a("div", { className: "flex justify-end items-center gap-4 py-2", children: [
-            /* @__PURE__ */ e(
-              i,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: u,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(i, { appearance: "compact", onClick: m, children: "Apply" })
-          ] })
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: t(
+                "flex",
+                "justify-end",
+                "items-center",
+                "gap-4",
+                "py-2"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  i,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: u,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(i, { appearance: "compact", onClick: c, children: "Apply" })
+              ]
+            }
+          )
         ]
       }
     )

package/dist/components/Filter/components/ResetButton/ResetButton.js

@@ -1,29 +1,32 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { Button as m } from "../../../Button/Button.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as m } from "react";
+import { Button as i } from "../../../Button/Button.js";
+import { cn as c } from "../../../../utils/index.js";
 import { resetEvent as p } from "../../events/index.js";
-const u = ({
+const d = ({
   disabled: e,
+  className: r,
   onClick: t,
-  ...r
+  ...o
 }) => {
-  const o = a(() => {
+  const n = m(() => {
     p(), t?.();
   }, [t]);
-  return /* @__PURE__ */ n(
-    m,
+  return /* @__PURE__ */ a(
+    i,
     {
       type: "button",
-      variant: "text",
+      variant: "link",
       appearance: "compact",
       version: "alternate",
-      onClick: o,
+      onClick: n,
       disabled: e,
-      ...r,
+      className: c("hover:no-underline", r),
+      ...o,
       children: "Reset"
     }
   );
 };
 export {
-  u as ResetButton
+  d as ResetButton
 };

package/dist/components/Filter/events/index.js

@@ -1,8 +1,8 @@
-var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/Filter/event-OPEN", t.RESET = "@konstrtuctio/Filter/event-RESET", t))(e || {});
+var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t))(e || {});
 const n = (t) => document.dispatchEvent(
-  new CustomEvent("@konstrtuctio/Filter/event-OPEN", { detail: t })
+  new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", { detail: t })
 ), o = () => document.dispatchEvent(new CustomEvent(
-  "@konstrtuctio/Filter/event-RESET"
+  "@konstrtuctio/KonstructFilter/event-RESET"
   /* RESET */
 ));
 export {