@konstructio/ui 0.1.2-alpha.119 → 0.1.2-alpha.120

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

@@ -1,5 +1,5 @@
-import { t } from "../../dist-B9GE4SXf.js";
-var a = t([
+import { t as r } from "../../dist-B9GE4SXf.js";
+var e = r([
   "bg-white",
   "dark:bg-metal-900",
   "duration-300",
@@ -14,30 +14,48 @@ var a = t([
   "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([
+  variants: {
+    fullScreenOnMobile: {
+      true: ["max-md:w-full!", "max-md:border-0"],
+      false: ""
+    },
+    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",
+    fullScreenOnMobile: !0
+  }
+}), a = r([
   "fixed",
   "inset-0",
   "z-40",
   "bg-black",
   "transition-opacity",
   "duration-300"
-]), o = t([
+]), o = r([
   "absolute",
+  "rounded",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
+  "flex",
+  "items-center",
+  "justify-center",
+  "pointer-coarse:min-h-11",
+  "pointer-coarse:min-w-11",
   "right-3",
   "top-3",
   "cursor-pointer",
@@ -47,7 +65,7 @@ var a = t([
   "dark:hover:text-metal-300",
   "transition-colors",
   "z-10"
-]), i = t([
+]), i = r([
   "absolute",
   "bg-slate-200",
   "dark:bg-metal-700",
@@ -72,7 +90,7 @@ var a = t([
 });
 export {
   o as buttonCloseVariants,
-  a as drawerVariants,
-  e as overlayVariants,
+  e as drawerVariants,
+  a as overlayVariants,
   i as resizeHandleVariants
 };

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

@@ -1,11 +1,11 @@
 import { t } from "../../../../utils-DnIJruo0.js";
-import { useDrawerContext as m } from "../../contexts/Drawer.context.js";
-import { memo as a } from "react";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+import { memo as m } from "react";
 import { jsx as s } from "react/jsx-runtime";
-var i = a(({ children: r, className: o }) => {
-  const { classNames: e } = m();
+var i = m(({ children: r, className: e }) => {
+  const { classNames: o } = a();
   return /* @__PURE__ */ s("div", {
-    className: t("flex-shrink-0", "border-t", "border-slate-200", "dark:border-metal-700", "p-4", e?.footer, o),
+    className: t("flex-shrink-0", "border-t", "border-slate-200", "dark:border-metal-700", "p-4", "max-md:pb-[calc(1rem+env(safe-area-inset-bottom))]", o?.footer, e),
     children: r
   });
 });

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

@@ -1,9 +1,10 @@
-var A = 500, _ = 400, I = 800, T = 10, D = 300, E = 20;
+var _ = 500, A = 400, I = 800, T = 10, D = 300, E = 20, r = 60;
 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
+  A as DEFAULT_MIN_WIDTH,
+  _ as DEFAULT_WIDTH,
+  E as KEYBOARD_RESIZE_STEP,
+  r as SWIPE_THRESHOLD
 };

package/dist/components/DropdownButton/DropdownButton.js

@@ -1,4 +1,4 @@
-import { t } from "../../DropdownButton-JilCRLJY.js";
+import { t } from "../../DropdownButton-BWfWN4fg.js";
 export {
   t as DropdownButton
 };

package/dist/components/DropdownButton/components/ActionSheet/ActionSheet.js

@@ -0,0 +1,34 @@
+import { t as o } from "../../../../utils-DnIJruo0.js";
+import { Sheet as x } from "../../../Sheet/Sheet.js";
+import { Fragment as h } from "react";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+var g = ({ isOpen: r, onClose: t, title: d, options: i, itemClassName: m, position: b = "bottom", theme: n }) => /* @__PURE__ */ a(x, {
+  isOpen: r,
+  onClose: t,
+  title: d,
+  position: b,
+  theme: n,
+  className: "px-4",
+  bodyClassName: "overflow-visible",
+  children: /* @__PURE__ */ a("div", {
+    className: "flex flex-col",
+    children: i.map((e, c) => {
+      const s = e.disabled || !!e.disabledReason;
+      return /* @__PURE__ */ l(h, { children: [e.separator && /* @__PURE__ */ a("hr", { className: "-mx-4 my-2 border-slate-200 dark:border-metal-700" }), /* @__PURE__ */ l("button", {
+        type: "button",
+        disabled: s,
+        className: o("flex min-h-11 w-full items-center justify-between gap-4 rounded px-2 text-left text-base", "hover:bg-slate-50 focus-visible:bg-slate-50 dark:hover:bg-metal-700 dark:focus-visible:bg-metal-700", "outline-none disabled:cursor-not-allowed disabled:hover:bg-transparent", e.destructive && "text-red-600 dark:text-red-400", s && "text-slate-400 dark:text-metal-400", m),
+        onClick: () => {
+          e.onClick?.(), t();
+        },
+        children: [/* @__PURE__ */ a("span", { children: e.label }), e.disabledReason && /* @__PURE__ */ a("span", {
+          className: "shrink-0 text-xs text-slate-400 dark:text-metal-400",
+          children: e.disabledReason
+        })]
+      })] }, c);
+    })
+  })
+});
+export {
+  g as ActionSheet
+};

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

@@ -1,4 +1,4 @@
-import { t as o } from "../../../../Checkbox-DRdyrKjk.js";
+import { t as o } from "../../../../Checkbox-DrounE52.js";
 import { t as c } from "../../../../utils-DnIJruo0.js";
 import { Button as m } from "../../../Button/Button.js";
 import { t as O } from "../../../../chevron-down-BODx0Q7h.js";

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

@@ -1,4 +1,4 @@
-import { t as d } from "../../../../Checkbox-DRdyrKjk.js";
+import { t as d } from "../../../../Checkbox-DrounE52.js";
 import { t as s } from "../../../../utils-DnIJruo0.js";
 import { Button as m } from "../../../Button/Button.js";
 import { t as y } from "../../../../chevron-down-BODx0Q7h.js";

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

@@ -1,5 +1,5 @@
-import { o as t } from "../../../rolldown-runtime-Dw9YIBcH.js";
-var l = "en-US", r, e, p = () => (e || (e = import("../../../country-locale-map-DbrJ3bEE.js").then((a) => /* @__PURE__ */ t(a.default, 1)).then((a) => {
+import { o as t } from "../../../rolldown-runtime-B28h4lGi.js";
+var l = "en-US", r, e, p = () => (e || (e = import("../../../country-locale-map-BQYYErun.js").then((a) => /* @__PURE__ */ t(a.default, 1)).then((a) => {
   r = a.default;
 })), e), u = (a = "US") => r?.getCountryByAlpha2(a)?.default_locale?.replace("_", "-") ?? l;
 export {

package/dist/components/Input/Input.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../Input-2M2I_H60.js";
+import { t as o } from "../../Input-O2bqyJKW.js";
 export {
   o as Input
 };

package/dist/components/Input/Input.variants.js

@@ -16,6 +16,7 @@ var r = e([
   "rounded",
   "text-slate-800",
   "text-sm",
+  "max-md:text-base",
   "transition-all",
   "w-full",
   "disabled:bg-gray-50",

package/dist/components/LineChart/components/LineChartContent/LineChartContent.js

@@ -1,6 +1,6 @@
 import { a as l, t as _ } from "../../../../utils-DnIJruo0.js";
 import { Typography as z } from "../../../Typography/Typography.js";
-import { a as P, c as j, d as D, i as E, l as F, n as H, o as N, s as O, u as M } from "../../../../dist-Dg3vyTx9.js";
+import { a as P, c as j, d as D, i as E, l as F, n as H, o as N, s as O, u as M } from "../../../../dist-BCqfbYE9.js";
 import { useMemo as h } from "react";
 import { jsx as p, jsxs as V } from "react/jsx-runtime";
 P.register(E, F, M, O, N, j, D);

package/dist/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../../Modal-0Wp5szX4.js";
+import { t } from "../../Modal-B-l4ii6w.js";
 export {
   t as Modal
 };

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../Modal-0Wp5szX4.js";
+import { n as p } from "../../../../Modal-B-l4ii6w.js";
 export {
   p as Wrapper
 };

package/dist/components/Modal/components/Wrapper/Wrapper.variants.js

@@ -1,5 +1,5 @@
-import { t } from "../../../../dist-B9GE4SXf.js";
-var a = t([
+import { t as e } from "../../../../dist-B9GE4SXf.js";
+var r = e([
   "bg-white",
   "border",
   "border-transparent",
@@ -9,7 +9,8 @@ var a = t([
   "flex-col",
   "justify-between",
   "min-h-112.5",
-  "min-w-125",
+  "min-w-[min(31.25rem,100%)]",
+  "max-w-full",
   "relative",
   "rounded-md",
   "shadow-xs",
@@ -17,8 +18,13 @@ var a = t([
   "fade-in-0",
   "zoom-in-95",
   "duration-150"
-]), r = t([
+]), a = e([
   "absolute",
+  "flex",
+  "items-center",
+  "justify-center",
+  "pointer-coarse:min-h-11",
+  "pointer-coarse:min-w-11",
   "right-1.5",
   "top-1.5",
   "cursor-pointer",
@@ -28,6 +34,6 @@ var a = t([
   "dark:hover:text-slate-100"
 ]);
 export {
-  r as buttonCloseVariants,
-  a as modalVariants
+  a as buttonCloseVariants,
+  r as modalVariants
 };

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as o } from "./Body/Body.js";
 import { Footer as p } from "./Footer/Footer.js";
 import { Header as e } from "./Header/Header.js";
-import { n as i } from "../../../Modal-0Wp5szX4.js";
+import { n as i } from "../../../Modal-B-l4ii6w.js";
 export {
   o as Body,
   p as Footer,

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,4 +1,4 @@
-import { t } from "../../components-B_SWqhCL.js";
+import { t } from "../../components-Bq71eyUH.js";
 export {
   t as MultiSelectDropdown
 };

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -1,4 +1,4 @@
-import { r as o } from "../../../../components-B_SWqhCL.js";
+import { r as o } from "../../../../components-Bq71eyUH.js";
 export {
   o as List
 };

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../components-B_SWqhCL.js";
+import { n as p } from "../../../../components-Bq71eyUH.js";
 export {
   p as Wrapper
 };

package/dist/components/MultiSelectDropdown/components/index.js

@@ -1,5 +1,5 @@
 import { Item as m } from "./Item/Item.js";
-import { n as p, r as t } from "../../../components-B_SWqhCL.js";
+import { n as p, r as t } from "../../../components-Bq71eyUH.js";
 export {
   m as Item,
   t as List,

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js

@@ -1,4 +1,4 @@
-import { t as i } from "../../../../Input-2M2I_H60.js";
+import { t as i } from "../../../../Input-O2bqyJKW.js";
 import { t as c } from "../../../../utils-DnIJruo0.js";
 import { usePhoneNumberContext as d } from "../../contexts/phone-number.hook.js";
 import { t as p } from "../../../../FlagSelectorList-iZ3gUVpf.js";

package/dist/components/PhoneNumberInput/components/PhoneNumberInputContent.js

@@ -1,5 +1,5 @@
-import { t as m } from "../../../phone-number.provider-DnuL-yYF.js";
-import { t as n } from "../../../Wrapper-ThpRi_Gg.js";
+import { t as m } from "../../../phone-number.provider-CJeivoDY.js";
+import { t as n } from "../../../Wrapper-CZCSSCLm.js";
 import { forwardRef as p } from "react";
 import { jsx as r } from "react/jsx-runtime";
 var a = p(({ defaultCountryCode: o = "US", ...e }, t) => /* @__PURE__ */ r(m, {

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

@@ -1,6 +1,6 @@
-import { o as f } from "../../../../rolldown-runtime-Dw9YIBcH.js";
+import { o as f } from "../../../../rolldown-runtime-B28h4lGi.js";
 import { a as u, o as b, r as m, t as p } from "../../../../dist-vUCyiTQy.js";
-import { t as h } from "../../../../debounce-dMRJxNsT.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 }) => {

package/dist/components/PhoneNumberInput/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../Wrapper-ThpRi_Gg.js";
+import { t as p } from "../../../Wrapper-CZCSSCLm.js";
 export {
   p as Wrapper
 };

package/dist/components/PhoneNumberInput/components/index.js

@@ -1,5 +1,5 @@
 import { t } from "../../../FlagSelectorList-iZ3gUVpf.js";
-import { t as p } from "../../../Wrapper-ThpRi_Gg.js";
+import { t as p } from "../../../Wrapper-CZCSSCLm.js";
 export {
   t as FlagSelectorList,
   p as Wrapper

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

@@ -1,4 +1,4 @@
-import { t as r } from "../../../phone-number.provider-DnuL-yYF.js";
+import { t as r } from "../../../phone-number.provider-CJeivoDY.js";
 import { PhoneNumberContext as m } from "./phone-number.context.js";
 import { usePhoneNumberContext as n } from "./phone-number.hook.js";
 export {

package/dist/components/PhoneNumberInput/contexts/phone-number.provider.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../phone-number.provider-DnuL-yYF.js";
+import { t as o } from "../../../phone-number.provider-CJeivoDY.js";
 export {
   o as PhoneNumberProvider
 };

package/dist/components/PhoneNumberInput/utils/index.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../../libphonenumber-DtibHRPP.js";
+import { t as m } from "../../../libphonenumber-BIeQOhzl.js";
 var n = m(), e = n.PhoneNumberUtil.getInstance(), p = (t) => {
   const r = t.code, o = e.getExampleNumber(r);
   if (!o) return;

package/dist/components/PieChart/components/PieChartContent/PieChartContent.js

@@ -1,5 +1,5 @@
 import { a as e } from "../../../../utils-DnIJruo0.js";
-import { a as j, r as A, t as B } from "../../../../dist-Dg3vyTx9.js";
+import { a as j, r as A, t as B } from "../../../../dist-BCqfbYE9.js";
 import { useMemo as i } from "react";
 import { jsx as T } from "react/jsx-runtime";
 j.register(A);

package/dist/components/Select/Select.variants.js

@@ -56,6 +56,7 @@ var a = e([
   "outline-none",
   "text-metal-700",
   "text-sm",
+  "max-md:text-base",
   "capitalize",
   "placeholder:text-sm",
   "placeholder:normal-case",
@@ -65,6 +66,7 @@ var a = e([
 ]), d = e([
   "cursor-pointer",
   "text-sm",
+  "max-md:text-base",
   "leading-5",
   "tracking-[0.1px]",
   "dark:text-metal-50"

package/dist/components/Select/components/List/List.js

@@ -1,10 +1,10 @@
-import { o as $ } from "../../../../rolldown-runtime-Dw9YIBcH.js";
+import { o as $ } from "../../../../rolldown-runtime-B28h4lGi.js";
 import { t as n } from "../../../../utils-DnIJruo0.js";
 import { t as R } from "../../../../Loading-u8hXrFJR.js";
 import { useSelectContext as ee } from "../../contexts/select.hook.js";
 import { n as te, t as re } from "../../../../AdditionalOptions-ClcR_Kf7.js";
 import { listGroupLabelVariants as oe, listVariants as ae } from "./List.variants.js";
-import { t as ne } from "../../../../debounce-dMRJxNsT.js";
+import { t as ne } from "../../../../debounce-DhCY9mXz.js";
 import "../../constants/pagination.js";
 import "../../constants/list.js";
 import { useNavigationUlList as se } from "../../hooks/useNavigationList.js";

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,130 @@
+"use client";
+import { t as m } from "../../utils-DnIJruo0.js";
+import { a as H, o as _, r as j, s as L, t as $ } from "../../dist-BqDJX7m1.js";
+import { useCallback as q, useRef as f, useState as h } from "react";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { AnimatePresence as R, motion as s, useReducedMotion as B } from "motion/react";
+var N = {
+  duration: 0.2,
+  ease: "easeOut"
+}, S = {
+  duration: 0.6,
+  ease: [
+    0.4,
+    0,
+    0.2,
+    1
+  ]
+}, l = "100%", K = {
+  enter: (a) => ({
+    opacity: 0,
+    x: a > 0 ? l : `-${l}`
+  }),
+  center: {
+    opacity: 1,
+    x: 0
+  },
+  exit: (a) => ({
+    opacity: 0,
+    x: a > 0 ? `-${l}` : l
+  })
+}, V = ({ isOpen: a, onClose: T, title: k, hideTitle: A = !1, leading: I, position: c = "bottom", step: n = 0, className: O, bodyClassName: w, theme: C, children: D }) => {
+  const i = B(), p = f(null), r = f(null), o = f(null), [F, d] = h("auto"), [E, v] = h(!1), [u, M] = h({
+    step: n,
+    direction: 1
+  });
+  u.step !== n && M({
+    step: n,
+    direction: n > u.step ? 1 : -1
+  });
+  const { direction: g } = u, b = c === "bottom" ? "100%" : "-100%", P = i ? {
+    initial: !1,
+    animate: { y: 0 },
+    exit: { y: 0 }
+  } : {
+    initial: { y: b },
+    animate: { y: 0 },
+    exit: { y: b }
+  }, z = q((t) => {
+    if (r.current?.disconnect(), r.current = null, o.current !== null && (cancelAnimationFrame(o.current), o.current = null), !t) {
+      v(!1), d("auto");
+      return;
+    }
+    d(t.getBoundingClientRect().height), typeof ResizeObserver < "u" && (r.current = new ResizeObserver(([y]) => {
+      y && d(y.contentRect.height);
+    }), r.current.observe(t)), o.current = requestAnimationFrame(() => {
+      v(!0);
+    });
+  }, []);
+  return /* @__PURE__ */ e($, {
+    open: a,
+    onOpenChange: (t) => !t && T(),
+    children: /* @__PURE__ */ e(R, { children: a && /* @__PURE__ */ e(_, {
+      forceMount: !0,
+      children: /* @__PURE__ */ x("div", {
+        "data-theme": C,
+        className: "contents",
+        children: [/* @__PURE__ */ e(H, {
+          asChild: !0,
+          forceMount: !0,
+          children: /* @__PURE__ */ e(s.div, {
+            className: "fixed inset-0 z-50 bg-black/55",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: N
+          })
+        }), /* @__PURE__ */ e(j, {
+          asChild: !0,
+          forceMount: !0,
+          onOpenAutoFocus: (t) => {
+            t.preventDefault(), p.current?.focus();
+          },
+          children: /* @__PURE__ */ x(s.div, {
+            ref: p,
+            tabIndex: -1,
+            className: m("konstruct-sheet fixed inset-x-0 z-50 flex max-h-[calc(100dvh-4rem)] flex-col", "bg-white text-slate-800 shadow-xl outline-none", "dark:bg-metal-800 dark:text-metal-50", c === "bottom" ? "bottom-0 rounded-t-lg pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))]" : "top-0 rounded-b-lg pb-4 pt-[calc(1rem+env(safe-area-inset-top))]", O),
+            "data-position": c,
+            "data-step": n,
+            transition: N,
+            ...P,
+            children: [/* @__PURE__ */ x("div", {
+              className: m("flex min-h-9 shrink-0 items-center gap-2 px-6 pb-2", A && "sr-only"),
+              children: [I, /* @__PURE__ */ e(L, {
+                className: "text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-metal-400",
+                children: k
+              })]
+            }), /* @__PURE__ */ e(s.div, {
+              className: m("flex min-h-0 flex-col overflow-y-auto overflow-x-hidden", w),
+              animate: { height: F },
+              transition: i || !E ? { duration: 0 } : S,
+              children: /* @__PURE__ */ e("div", {
+                ref: z,
+                className: "relative",
+                children: /* @__PURE__ */ e(R, {
+                  mode: "popLayout",
+                  initial: !1,
+                  custom: g,
+                  children: /* @__PURE__ */ e(s.div, {
+                    custom: g,
+                    className: "flex w-full flex-col",
+                    variants: i ? void 0 : K,
+                    initial: i ? !1 : "enter",
+                    animate: "center",
+                    exit: i ? void 0 : "exit",
+                    transition: S,
+                    children: D
+                  }, n)
+                })
+              })
+            })]
+          })
+        })]
+      })
+    }) })
+  });
+};
+V.displayName = "KonstructSheet";
+export {
+  V as Sheet
+};

package/dist/components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../HamburgerTrigger-BgeS_nBA.js";
+import { t as e } from "../../../../HamburgerTrigger-CfrAnhmG.js";
 export {
   e as HamburgerTrigger
 };