@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

package/dist/components/DateRangePicker/utils/validation.js

@@ -1,12 +1,12 @@
-const d = (r, n) => {
-  if (!r) return "";
-  const e = new Date(r);
+var p = (t, n) => {
+  if (!t) return "";
+  const e = new Date(t);
   return n && e.setHours(n.getHours(), n.getMinutes(), n.getSeconds()), e.toISOString();
-}, l = (r, n) => {
-  const e = r.length < n.length;
-  let t = r.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
-  return t = t.slice(0, 10), e || (/^\d{2}$/.test(t) || /^\d{2}\/\d{2}$/.test(t)) && (t = t + "/"), t;
-}, c = [
+}, c = (t, n) => {
+  const e = t.length < n.length;
+  let r = t.replace(/[^0-9/]/g, "").replace(/\/+/g, "/");
+  return r = r.slice(0, 10), e || (/^\d{2}$/.test(r) || /^\d{2}\/\d{2}$/.test(r)) && (r = r + "/"), r;
+}, g = [
   "January",
   "February",
   "March",
@@ -19,61 +19,49 @@ const d = (r, n) => {
   "October",
   "November",
   "December"
-], f = (r, n = "24") => {
-  if (!r) return !0;
-  const [e, t] = r.split(":").map(Number);
-  return isNaN(e) || isNaN(t) ? !1 : n === "24" ? e >= 0 && e <= 23 && t >= 0 && t <= 59 : e >= 1 && e <= 12 && t >= 0 && t <= 59;
-}, p = (r, n = "24", e) => {
-  if (!r || !f(r, n))
-    return;
-  const [t, s] = r.split(":").map(Number), o = /* @__PURE__ */ new Date();
-  let i = t;
-  return n === "12" && e && (e === "PM" && t !== 12 ? i = t + 12 : e === "AM" && t === 12 && (i = 0)), o.setHours(i, s, 0, 0), o;
-}, S = (r, n = "24") => {
-  if (!r) return "";
-  const e = r.getHours(), t = r.getMinutes();
-  if (n === "24")
-    return `${e.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
-  const s = e >= 12 ? "PM" : "AM";
-  return `${(e % 12 || 12).toString().padStart(2, "0")}:${t.toString().padStart(2, "0")} ${s}`;
-}, m = (r) => {
-  if (!r) return "";
-  const n = r.getDate(), e = c[r.getMonth()], t = r.getFullYear();
-  return `${n} ${e} ${t}`;
-}, N = (r) => {
-  if (!r) return "";
-  const n = (r.getMonth() + 1).toString().padStart(2, "0"), e = r.getDate().toString().padStart(2, "0"), t = r.getFullYear();
-  return `${n}/${e}/${t}`;
-}, h = (r) => {
-  if (!r) return;
-  const n = r.trim().split(" ");
+], l = (t, n = "24") => {
+  if (!t) return !0;
+  const [e, r] = t.split(":").map(Number);
+  return isNaN(e) || isNaN(r) ? !1 : n === "24" ? e >= 0 && e <= 23 && r >= 0 && r <= 59 : e >= 1 && e <= 12 && r >= 0 && r <= 59;
+}, v = (t, n = "24", e) => {
+  if (!t || !l(t, n)) return;
+  const [r, i] = t.split(":").map(Number), a = /* @__PURE__ */ new Date();
+  let o = r;
+  return n === "12" && e && (e === "PM" && r !== 12 ? o = r + 12 : e === "AM" && r === 12 && (o = 0)), a.setHours(o, i, 0, 0), a;
+}, d = (t, n = "24") => {
+  if (!t) return "";
+  const e = t.getHours(), r = t.getMinutes();
+  if (n === "24") return `${e.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+  const i = e >= 12 ? "PM" : "AM";
+  return `${(e % 12 || 12).toString().padStart(2, "0")}:${r.toString().padStart(2, "0")} ${i}`;
+}, S = (t) => t ? `${t.getDate()} ${g[t.getMonth()]} ${t.getFullYear()}` : "", N = (t) => t ? `${(t.getMonth() + 1).toString().padStart(2, "0")}/${t.getDate().toString().padStart(2, "0")}/${t.getFullYear()}` : "", m = (t) => {
+  if (!t) return;
+  const n = t.trim().split(" ");
   if (n.length !== 3) return;
-  const [e, t, s] = n, o = parseInt(e, 10), i = parseInt(s, 10), u = c.findIndex(
-    (g) => g.toLowerCase() === t.toLowerCase()
-  );
-  if (isNaN(o) || isNaN(i) || u === -1 || o < 1 || o > 31 || i < 1900 || i > 2100) return;
-  const a = new Date(i, u, o);
-  if (!(a.getMonth() !== u || a.getDate() !== o || a.getFullYear() !== i))
-    return a;
-}, D = (r) => {
-  if (!r) return;
-  const n = r.split("/");
+  const [e, r, i] = n, a = parseInt(e, 10), o = parseInt(i, 10), u = g.findIndex((f) => f.toLowerCase() === r.toLowerCase());
+  if (isNaN(a) || isNaN(o) || u === -1 || a < 1 || a > 31 || o < 1900 || o > 2100) return;
+  const s = new Date(o, u, a);
+  if (!(s.getMonth() !== u || s.getDate() !== a || s.getFullYear() !== o))
+    return s;
+}, D = (t) => {
+  if (!t) return;
+  const n = t.split("/");
   if (n.length !== 3) return;
-  const [e, t, s] = n.map(Number);
-  if (isNaN(e) || isNaN(t) || isNaN(s) || e < 1 || e > 12 || t < 1 || t > 31 || s < 1900 || s > 2100) return;
-  const o = new Date(s, e - 1, t);
-  if (!(o.getMonth() !== e - 1 || o.getDate() !== t || o.getFullYear() !== s))
-    return o;
-}, v = (r) => c[r] || "";
+  const [e, r, i] = n.map(Number);
+  if (isNaN(e) || isNaN(r) || isNaN(i) || e < 1 || e > 12 || r < 1 || r > 31 || i < 1900 || i > 2100) return;
+  const a = new Date(i, e - 1, r);
+  if (!(a.getMonth() !== e - 1 || a.getDate() !== r || a.getFullYear() !== i))
+    return a;
+}, h = (t) => g[t] || "";
 export {
-  l as autoFormatDateInput,
-  d as combineDateAndTime,
-  m as formatDateToDisplayString,
+  c as autoFormatDateInput,
+  p as combineDateAndTime,
+  S as formatDateToDisplayString,
   N as formatDateToString,
-  S as formatTimeToString,
-  v as getMonthName,
-  f as isValidTimeString,
+  d as formatTimeToString,
+  h as getMonthName,
+  l as isValidTimeString,
   D as parseDateString,
-  h as parseDisplayDateString,
-  p as parseTimeString
+  m as parseDisplayDateString,
+  v as parseTimeString
 };

package/dist/components/Datepicker/DatePicker.js

@@ -1,138 +1,50 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useState as h, useCallback as f } from "react";
-import { cn as t } from "../../utils/index.js";
-import { datePickerVariants as p } from "./DatePicker.variants.js";
+import { t } from "../../utils-DHuiYnx1.js";
+import { t as h } from "../../chevron-left-DRJXef9g.js";
+import { t as f } from "../../chevron-right-BooB_b7g.js";
+import { t as p } from "../../DayPicker-CNWQ1Oyd.js";
+import { datePickerVariants as k } from "./DatePicker.variants.js";
 import '../../style.css';/* empty css                   */
-import { D as k } from "../../DayPicker-CaeUXRCF.js";
-import { C as g } from "../../chevron-left-BHBf-gQY.js";
-import { C as w } from "../../chevron-right-DvXGOiS_.js";
-const y = ({
-  className: l,
-  showOutsideDays: n = !0,
-  animate: d = !0,
-  arrowClassName: s,
-  monthsClassName: i,
-  defaultSelected: m,
-  onSelect: o,
-  ...u
-}) => {
-  const [c, x] = h(
-    () => m
-  ), b = f(
-    (e) => {
-      e && (x(e), o?.(e));
+import { useCallback as g, useState as w } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var y = ({ className: l, showOutsideDays: n = !0, animate: d = !0, arrowClassName: s, monthsClassName: i, defaultSelected: m, onSelect: o, ...u }) => {
+  const [c, x] = w(() => m), b = g((e) => {
+    e && (x(e), o?.(e));
+  }, [o]);
+  return /* @__PURE__ */ a(p, {
+    className: t(k({ className: l })),
+    animate: d,
+    mode: "single",
+    selected: c,
+    onSelect: b,
+    showOutsideDays: n,
+    role: "dialog",
+    "aria-label": "Datepicker",
+    classNames: {
+      chevron: t("cursor-pointer", "text-slate-500", "w-5", "h-5", "text-slate-500", "w-4", "h-4", "dark:text-metal-200"),
+      day_button: t("h-[30px]", "aria-selected:opacity-100", "font-semibold", "hover:rounded-full", "cursor-pointer", "rounded-full", "w-[30px]"),
+      day: "text-center text-sm leading-5",
+      month_caption: t("text-slate-700", "font-semibold", "text-sm", "pl-1", "h-8", "flex", "items-center", "dark:text-white"),
+      months: t("flex", "flex-col", "relative", "px-5", "py-4", "rounded-lg", "shadow-md", "px-6", "py-4", "w-[307px]", "justify-center", "items-center", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", i),
+      month: "flex flex-col gap-4",
+      nav: t("absolute", "right-4", "top-3.5", "flex", "justify-center", "items-center", "gap-1", s),
+      outside: "text-slate-400 dark:text-metal-500",
+      selected: t("[&>button]:bg-blue-600", "[&>button]:text-white", "[&>button]:hover:bg-blue-700", "[&>button]:transition-all", "[&>button]:duration-300", "[&>button]:rounded-full", "dark:[&>button]:bg-aurora-500", "dark:[&>button]:hover:bg-aurora-500", "dark:[&>button]:text-metal-900"),
+      table: "w-full",
+      weekdays: "text-slate-500 dark:text-metal-300",
+      weeks: t("text-slate-700", "[&>tr>td]:border-transparent", "[&>tr>td]:border-r-[8px]", "[&>tr>td]:last:border-r-0", "dark:text-white"),
+      weekday: "font-semibold text-sm uppercase text-sm",
+      today: "text-blue-600 dark:text-aurora-500 data-[selected=true]:text-white",
+      month_grid: t("[&>thead]:table-header-group", "[&>thead]:relative", "[&>thead]:after:block", '[&>thead]:after:content-[" "]', "[&>thead]:after:h-4")
     },
-    [o]
-  );
-  return /* @__PURE__ */ a(
-    k,
-    {
-      className: t(p({ className: l })),
-      animate: d,
-      mode: "single",
-      selected: c,
-      onSelect: b,
-      showOutsideDays: n,
-      role: "dialog",
-      "aria-label": "Datepicker",
-      classNames: {
-        chevron: t(
-          "cursor-pointer",
-          "text-slate-500",
-          "w-5",
-          "h-5",
-          "text-slate-500",
-          "w-4",
-          "h-4",
-          "dark:text-metal-200"
-        ),
-        day_button: t(
-          "h-[30px]",
-          "aria-selected:opacity-100",
-          "font-semibold",
-          "hover:rounded-full",
-          "cursor-pointer",
-          "rounded-full",
-          "w-[30px]"
-        ),
-        day: "text-center text-sm leading-5",
-        month_caption: t(
-          "text-slate-700",
-          "font-semibold",
-          "text-sm",
-          "pl-1",
-          "h-8",
-          "flex",
-          "items-center",
-          "dark:text-white"
-        ),
-        months: t(
-          "flex",
-          "flex-col",
-          "relative",
-          "px-5",
-          "py-4",
-          "rounded-lg",
-          "shadow-md",
-          "px-6",
-          "py-4",
-          "w-[307px]",
-          "justify-center",
-          "items-center",
-          "border",
-          "border-transparent",
-          "dark:bg-metal-800",
-          "dark:border-metal-700",
-          i
-        ),
-        month: "flex flex-col gap-4",
-        nav: t(
-          "absolute",
-          "right-4",
-          "top-3.5",
-          "flex",
-          "justify-center",
-          "items-center",
-          "gap-1",
-          s
-        ),
-        outside: "text-slate-400 dark:text-metal-500",
-        selected: t(
-          "[&>button]:bg-blue-600",
-          "[&>button]:text-white",
-          "[&>button]:hover:bg-blue-700",
-          "[&>button]:transition-all",
-          "[&>button]:duration-300",
-          "[&>button]:rounded-full",
-          "dark:[&>button]:bg-aurora-500",
-          "dark:[&>button]:hover:bg-aurora-500",
-          "dark:[&>button]:text-metal-900"
-        ),
-        table: "w-full",
-        weekdays: "text-slate-500 dark:text-metal-300",
-        weeks: t(
-          "text-slate-700",
-          "[&>tr>td]:border-transparent",
-          "[&>tr>td]:border-r-[8px]",
-          "[&>tr>td]:last:border-r-0",
-          "dark:text-white"
-        ),
-        weekday: "font-semibold text-sm uppercase text-sm",
-        today: "text-blue-600 dark:text-aurora-500 data-[selected=true]:text-white",
-        month_grid: t(
-          "[&>thead]:table-header-group",
-          "[&>thead]:relative",
-          "[&>thead]:after:block",
-          '[&>thead]:after:content-[" "]',
-          "[&>thead]:after:h-4"
-        )
-      },
-      components: {
-        Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(g, { className: t(e), ...r }) : /* @__PURE__ */ a(w, { className: t(e), ...r })
-      },
-      ...u
-    }
-  );
+    components: { Chevron: ({ className: e, ...r }) => r.orientation === "left" ? /* @__PURE__ */ a(h, {
+      className: t(e),
+      ...r
+    }) : /* @__PURE__ */ a(f, {
+      className: t(e),
+      ...r
+    }) },
+    ...u
+  });
 };
 y.displayName = "KonstructDatePicker";
 export {

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-px", "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

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