@konstructio/ui 0.1.7 → 0.1.8

package/dist/components/Filter/components/FilterDropdown/FilterDropdown.js

@@ -1,29 +1,53 @@
-import { a as l, i as p, r as c, t as f } from "../../../../dist-DPLBSjtu.js";
-import { useFilterContext as h } from "../../contexts/filter.hook.js";
-import { t as g } from "../../../../utils-DnIJruo0.js";
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-var w = ({ isOpen: o, trigger: r, triggerClassName: t, position: a = "left", contentClassName: i, children: n, onOpenChange: s }) => {
-  const { theme: d } = h();
-  return /* @__PURE__ */ u(f, {
-    open: o,
-    onOpenChange: s,
-    children: [/* @__PURE__ */ e(l, {
-      className: t,
-      children: r
-    }), /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(c, {
-      "data-theme": d,
+import { a as b, i as v, r as x, t as F } from "../../../../dist-DPLBSjtu.js";
+import { useFilterContext as P } from "../../contexts/filter.hook.js";
+import { useFilterSheet as k } from "../../hooks/useFilterSheet.js";
+import { Sheet as C } from "../../../Sheet/Sheet.js";
+import { t as w } from "../../../../utils-DnIJruo0.js";
+import { Fragment as y, jsx as e, jsxs as l } from "react/jsx-runtime";
+var z = ({ isOpen: t, trigger: o, triggerClassName: n, position: m = "left", contentClassName: p, sheetTitle: u, sheetStep: c, sheetPreviousContent: f, onSheetBack: h, children: s, onOpenChange: r }) => {
+  const { theme: i } = P();
+  return k() ? /* @__PURE__ */ l(y, { children: [/* @__PURE__ */ e("button", {
+    type: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": t,
+    className: n,
+    onClick: () => r(!0),
+    children: o
+  }), /* @__PURE__ */ e(C, {
+    isOpen: t,
+    expandable: !0,
+    theme: i,
+    title: u ?? o,
+    step: c,
+    previousContent: f,
+    bodyClassName: "px-0",
+    onBack: h,
+    onClose: () => r(!1),
+    children: s
+  })] }) : /* @__PURE__ */ l(F, {
+    open: t,
+    onOpenChange: r,
+    children: [/* @__PURE__ */ e(b, {
+      className: n,
+      children: o
+    }), /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(x, {
+      "data-theme": i,
       side: "bottom",
       sideOffset: 4,
       collisionPadding: 16,
-      align: a === "right" ? "end" : "start",
-      onOpenAutoFocus: (m) => {
-        m.preventDefault();
+      align: m === "right" ? "end" : "start",
+      onOpenAutoFocus: (a) => {
+        a.preventDefault();
       },
-      className: g("bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-50", "dark:bg-metal-800", "dark:border-metal-700", i),
-      children: n
+      onCloseAutoFocus: (a) => {
+        const d = document.activeElement;
+        d && d !== document.body && a.preventDefault();
+      },
+      className: w("bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-50", "dark:bg-metal-800", "dark:border-metal-700", p),
+      children: s
     }) })]
   });
 };
 export {
-  w as FilterDropdown
+  z as FilterDropdown
 };

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.js

@@ -1,73 +1,81 @@
-import { t as y } from "../../../../chevron-down-BODx0Q7h.js";
-import { Badge as O } from "../../../Badge/Badge.js";
-import { Button as d } from "../../../Button/Button.js";
-import { t as m } from "../../../../Checkbox-DtgzySMh.js";
-import { filterButtonIconVariants as S, filterButtonVariants as w } from "../../Filter.variants.js";
-import { t as s } from "../../../../utils-DnIJruo0.js";
-import { useBadgeMultiSelect as B } from "../BadgeDropdown/hooks/useBadgeMultiSelect/useBadgeMultiSelect.js";
+import { t as S } from "../../../../chevron-down-BODx0Q7h.js";
+import { Badge as w } from "../../../Badge/Badge.js";
+import { Button as x } from "../../../Button/Button.js";
+import { t as p } from "../../../../Checkbox-DtgzySMh.js";
+import { filterButtonIconVariants as B, filterButtonVariants as F } from "../../Filter.variants.js";
+import { t as n } from "../../../../utils-DnIJruo0.js";
+import { useBadgeMultiSelect as $ } from "../BadgeDropdown/hooks/useBadgeMultiSelect/useBadgeMultiSelect.js";
 import { FilterDropdown as A } from "../FilterDropdown/FilterDropdown.js";
-import { Fragment as j, jsx as e, jsxs as t } from "react/jsx-runtime";
-var E = ({ options: r, label: o, position: p = "left", onApply: h, showSelectAll: x = !0, selectAllLabel: c = "All" }) => {
-  const { isOpen: n, isAllSelected: g, selectedOptions: f, selectedCount: i, handleOpenChange: u, handleResetOptions: b, handleApplyOptions: C, handleSelectAll: k, handleSelectOption: N } = B({
-    onApply: h,
+import { useId as j } from "react";
+import { Fragment as I, jsx as a, jsxs as t } from "react/jsx-runtime";
+var H = ({ options: r, label: s, position: h = "left", onApply: f, showSelectAll: g = !0, selectAllLabel: i = "All" }) => {
+  const { isOpen: m, isAllSelected: u, selectedOptions: b, selectedCount: c, handleOpenChange: N, handleResetOptions: C, handleApplyOptions: k, handleSelectAll: v, handleSelectOption: y } = $({
+    onApply: f,
     options: r
-  });
+  }), d = j();
   return r.length === 0 ? null : /* @__PURE__ */ t(A, {
-    isOpen: n,
-    position: p,
+    isOpen: m,
+    position: h,
     contentClassName: "border border-gray-200",
-    triggerClassName: s(w(), { "text-slate-700 dark:text-metal-50": n }),
-    trigger: /* @__PURE__ */ t(j, { children: [
-      o,
-      i.length > 0 && /* @__PURE__ */ e(O, { label: i.length.toString() }),
-      /* @__PURE__ */ e(y, { className: s(S(), { "rotate-180 text-blue-600 dark:text-aurora-500": n }) })
+    triggerClassName: n(F(), { "text-slate-700 dark:text-metal-50": m }),
+    trigger: /* @__PURE__ */ t(I, { children: [
+      s,
+      c.length > 0 && /* @__PURE__ */ a(w, { label: c.length.toString() }),
+      /* @__PURE__ */ a(S, { className: n(B(), { "rotate-180 text-blue-600 dark:text-aurora-500": m }) })
     ] }),
-    onOpenChange: u,
-    children: [/* @__PURE__ */ e("div", {
-      className: "px-6 py-4",
+    sheetTitle: s,
+    onOpenChange: N,
+    children: [/* @__PURE__ */ a("div", {
+      className: "px-6 py-4 max-md:px-4 max-md:py-0",
       children: /* @__PURE__ */ t("div", {
-        className: "flex flex-col gap-2",
-        children: [x && /* @__PURE__ */ t("div", {
-          className: "flex gap-4",
-          children: [/* @__PURE__ */ e(m, {
-            checked: g,
-            "aria-label": c,
-            onChange: (a) => k(r, a)
-          }), /* @__PURE__ */ e("span", {
-            className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
-            children: c
+        className: "flex flex-col gap-2 max-md:gap-0",
+        children: [g && /* @__PURE__ */ t("div", {
+          className: "flex items-center gap-4 max-md:min-h-12",
+          children: [/* @__PURE__ */ a(p, {
+            id: `${d}-all`,
+            checked: u,
+            "aria-label": i,
+            onChange: (e) => v(r, e)
+          }), /* @__PURE__ */ a("label", {
+            htmlFor: `${d}-all`,
+            className: "flex-1 cursor-pointer text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap max-md:text-base",
+            children: i
           })]
-        }), r.map((a) => {
-          const v = f.some((l) => l.id === a.id && !l.isRemoved);
+        }), r.map((e) => {
+          const O = b.some((l) => l.id === e.id && !l.isRemoved), o = `${d}-${e.id}`;
           return /* @__PURE__ */ t("div", {
-            className: "flex gap-4",
-            children: [/* @__PURE__ */ e(m, {
-              checked: v,
-              "aria-label": a.label,
-              "data-label": a.id,
-              onChange: (l) => N(a, l)
-            }), /* @__PURE__ */ e("span", {
-              className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap",
-              children: a.label
+            className: "flex items-center gap-4 max-md:min-h-12",
+            children: [/* @__PURE__ */ a(p, {
+              id: o,
+              checked: O,
+              "aria-label": e.label,
+              "data-label": e.id,
+              onChange: (l) => y(e, l)
+            }), /* @__PURE__ */ a("label", {
+              htmlFor: o,
+              className: "flex-1 cursor-pointer text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap max-md:text-base",
+              children: e.label
             })]
-          }, a.id);
+          }, e.id);
         })]
       })
     }), /* @__PURE__ */ t("div", {
-      className: s("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
-      children: [/* @__PURE__ */ e(d, {
+      className: n("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700", "max-md:gap-2 max-md:border-t-0 max-md:px-4 max-md:pt-4 max-md:pb-0"),
+      children: [/* @__PURE__ */ a(x, {
         variant: "secondary",
         appearance: "compact",
-        onClick: b,
+        className: "max-md:h-11! max-md:flex-1",
+        onClick: C,
         children: "Reset"
-      }), /* @__PURE__ */ e(d, {
+      }), /* @__PURE__ */ a(x, {
         appearance: "compact",
-        onClick: C,
+        className: "max-md:h-11! max-md:flex-1",
+        onClick: k,
         children: "Apply"
       })]
     })]
   });
 };
 export {
-  E as TextMultiSelect
+  H as TextMultiSelect
 };

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

@@ -1,6 +1,9 @@
 import { useFilterDropdownSync as r } from "./useFilterDropdownSync.js";
-import { useLocale as m } from "./useLocale.js";
+import { useLocale as t } from "./useLocale.js";
+import { FILTER_SHEET_QUERY as i, useFilterSheet as p } from "./useFilterSheet.js";
 export {
+  i as FILTER_SHEET_QUERY,
   r as useFilterDropdownSync,
-  m as useLocale
+  p as useFilterSheet,
+  t as useLocale
 };

package/dist/components/Filter/hooks/useFilterSheet.js

@@ -0,0 +1,6 @@
+import { useMediaQuery as e } from "../../../hooks/useMediaQuery.js";
+var r = "(max-width: 767.98px)", a = () => e(r);
+export {
+  r as FILTER_SHEET_QUERY,
+  a as useFilterSheet
+};

package/dist/components/PhoneNumberInput/components/TruncateText/TruncateText.js

@@ -1,49 +1,49 @@
 import { o as f } from "../../../../rolldown-runtime-B28h4lGi.js";
-import { a as u, o as b, r as m, t as p } from "../../../../dist-DsOk4psA.js";
+import { a as u, o as m, r as p, t as b } from "../../../../dist-DsOk4psA.js";
 import { t as h } from "../../../../debounce-DhCY9mXz.js";
-import { useCallback as T, useEffect as i, useRef as w, useState as g } from "react";
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-var v = /* @__PURE__ */ f(h(), 1), R = ({ text: r, prefix: o }) => {
-  const n = w(null), [c, d] = g(!1), t = T(() => {
+import { useCallback as g, useEffect as i, useRef as T, useState as w } from "react";
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+var v = /* @__PURE__ */ f(h(), 1), R = ({ text: r, prefix: a }) => {
+  const n = T(null), [c, d] = w(!1), t = g(() => {
     const e = n.current;
     e && d(e.scrollWidth > e.clientWidth);
   }, []);
   return i(() => {
-    const e = new AbortController(), l = (0, v.default)(t, 300);
-    return window.addEventListener("resize", l, { signal: e.signal }), () => {
-      e.abort(), l.cancel();
+    const e = new AbortController(), s = (0, v.default)(t, 300);
+    return window.addEventListener("resize", s, { signal: e.signal }), () => {
+      e.abort(), s.cancel();
     };
   }, [t]), i(() => {
     t();
-  }, [r, t]), c ? /* @__PURE__ */ s(u, {
+  }, [r, t]), c ? /* @__PURE__ */ l(u, {
     delayDuration: 0,
-    children: /* @__PURE__ */ a(p, { children: [/* @__PURE__ */ s(b, {
+    children: /* @__PURE__ */ o(b, { children: [/* @__PURE__ */ l(m, {
       asChild: !0,
-      children: /* @__PURE__ */ a("span", {
+      children: /* @__PURE__ */ o("span", {
         ref: n,
         className: "w-full truncate cursor-pointer",
         children: [
           r,
           " ",
-          o
+          a
         ]
       })
-    }), /* @__PURE__ */ a(m, {
+    }), /* @__PURE__ */ o(p, {
       side: "top",
       align: "center",
-      className: "animate-in fade-in-0 relative mb-1.5 overflow-visible bg-kubefirst-dark-blue-900 text-white px-3 py-2 rounded-lg shadow-sm after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2 after:bottom-0 after:translate-y-full after:border-l-8 after:border-l-transparent after:border-r-8 after:border-r-transparent after:border-t-8 after:border-kubefirst-dark-blue-900 z-999",
+      className: "animate-tooltip-pop origin-(--radix-tooltip-content-transform-origin) motion-reduce:animate-none relative mb-1.5 overflow-visible bg-kubefirst-dark-blue-900 text-white px-3 py-2 rounded-lg shadow-sm after:content-[''] after:absolute after:left-1/2 after:-translate-x-1/2 after:bottom-0 after:translate-y-full after:border-l-8 after:border-l-transparent after:border-r-8 after:border-r-transparent after:border-t-8 after:border-kubefirst-dark-blue-900 z-999",
       children: [
         r,
         " ",
-        o
+        a
       ]
     })] })
-  }) : /* @__PURE__ */ a("span", {
+  }) : /* @__PURE__ */ o("span", {
     ref: n,
     className: "w-full truncate",
-    children: [r, /* @__PURE__ */ s("span", {
+    children: [r, /* @__PURE__ */ l("span", {
       className: "text-slate-500",
-      children: o
+      children: a
     })]
   });
 };