@konstructio/ui 0.1.0-alpha.8 → 0.1.0-alpha.9

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

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

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

@@ -1,41 +1,42 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { Badge as u } from "../../../Badge/Badge.js";
-import { Button as n } from "../../../Button/Button.js";
+import { Badge as g } from "../../../Badge/Badge.js";
+import { Button as i } from "../../../Button/Button.js";
 import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
-import { cn as l } from "../../../../utils/index.js";
+import { cn as o } from "../../../../utils/index.js";
 import { filterButtonIconVariants as x, filterButtonVariants as N } from "../../Filter.variants.js";
 import { useDateFilterDropdown as b } from "./DateFilterDropdown.hook.js";
-import { C as g } from "../../../../chevron-down-UW8ts6wI.js";
-const O = ({
-  label: i,
-  onApply: p
+import { C as y } from "../../../../chevron-down-UW8ts6wI.js";
+const R = ({
+  label: p,
+  position: l = "left",
+  onApply: s
 }) => {
   const {
-    id: s,
-    appliedDay: o,
+    id: m,
+    appliedDay: n,
     isOpen: a,
     selectedDay: e,
-    wrapperRef: m,
-    handleApply: c,
-    handleOpen: d,
-    handleSelect: f,
-    handleReset: h
-  } = b({ onApply: p });
-  return /* @__PURE__ */ r("div", { ref: m, className: "relative", children: [
+    wrapperRef: c,
+    handleApply: d,
+    handleOpen: f,
+    handleSelect: h,
+    handleReset: u
+  } = b({ onApply: s });
+  return /* @__PURE__ */ r("div", { ref: c, className: "relative", children: [
     /* @__PURE__ */ r(
       "button",
       {
-        className: l(N(), {
+        className: o(N(), {
           "text-slate-700": a
         }),
-        onClick: d,
+        onClick: f,
         children: [
-          i,
-          o && /* @__PURE__ */ t(u, { label: o }),
+          p,
+          n && /* @__PURE__ */ t(g, { label: n }),
           /* @__PURE__ */ t(
-            g,
+            y,
             {
-              className: l(x(), {
+              className: o(x(), {
                 "rotate-180": a,
                 "text-blue-600": a
               })
@@ -44,34 +45,46 @@ const O = ({
         ]
       }
     ),
-    a && /* @__PURE__ */ r("div", { className: "absolute top-full mt-1 left-0 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", children: [
-      /* @__PURE__ */ t(
-        w,
-        {
-          className: "p-0",
-          arrowClassName: "-top-1 right-0",
-          monthsClassName: "shadow-none p-0 w-auto",
-          defaultSelected: e,
-          defaultMonth: e,
-          onSelect: f
-        },
-        (e == null ? void 0 : e.toISOString()) ?? s
-      ),
-      /* @__PURE__ */ r("div", { className: "flex justify-end items-center gap-4 py-2", children: [
-        /* @__PURE__ */ t(
-          n,
+    a && /* @__PURE__ */ r(
+      "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",
           {
-            variant: "secondary",
-            appearance: "compact",
-            onClick: h,
-            children: "Reset"
+            "left-0": l === "left",
+            "right-0": l === "right"
           }
         ),
-        /* @__PURE__ */ t(n, { appearance: "compact", onClick: c, children: "Apply" })
-      ] })
-    ] })
+        children: [
+          /* @__PURE__ */ t(
+            w,
+            {
+              className: "p-0",
+              arrowClassName: "-top-1 right-0",
+              monthsClassName: "shadow-none p-0 w-auto",
+              defaultSelected: e,
+              defaultMonth: e,
+              onSelect: h
+            },
+            (e == null ? void 0 : e.toISOString()) ?? m
+          ),
+          /* @__PURE__ */ r("div", { className: "flex justify-end items-center gap-4 py-2", children: [
+            /* @__PURE__ */ t(
+              i,
+              {
+                variant: "secondary",
+                appearance: "compact",
+                onClick: u,
+                children: "Reset"
+              }
+            ),
+            /* @__PURE__ */ t(i, { appearance: "compact", onClick: d, children: "Apply" })
+          ] })
+        ]
+      }
+    )
   ] });
 };
 export {
-  O as DateFilterDropdown
+  R as DateFilterDropdown
 };

package/dist/index.d.ts

@@ -74,6 +74,7 @@ export declare const BadgeMultiSelect: FC<BadgeMultiSelectProps>;
 declare type BadgeMultiSelectProps = {
     label: string;
     options: Option_4[];
+    position?: 'left' | 'right';
     onApply?: (selectedOptions: Option_4[]) => void;
 };
 
@@ -170,6 +171,7 @@ export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
 
 declare type DateFilterDropdownProps = {
     label: string;
+    position?: 'left' | 'right';
     onApply?: (date?: Date) => void;
 };
 

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.8",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",