@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/components/LineChart/LineChart.js

@@ -1,127 +1,20 @@
-import { i as l, t as _ } from "../../utils-COaoD3PI.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-BHslNQd82.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);
-var a = [
-  "--color-aurora-500",
-  "--color-rose-500",
-  "--color-violet-500",
-  "--color-emerald-500",
-  "--color-sky-500",
-  "--color-teal-500",
-  "--color-amber-500",
-  "--color-fuchsia-500",
-  "--color-indigo-500",
-  "--color-cyan-500"
-], J = ({ title: n, titleProps: k, labels: u, datasets: i, yAxisFormatter: t, showLegend: b, height: C = 300, smooth: m = !0, axisColor: c = "#9F9FA9", gridColor: e = "#45556C", showGrid: g = !0, lineWidth: f = 2, showAxisBorder: s = !1, tooltipTextColor: d = l("--color-metal-100"), className: S }) => {
-  const v = b !== void 0 ? b : i.length > 1, L = h(() => ({
-    labels: u,
-    datasets: i.map((o, r) => ({
-      label: o.label,
-      data: o.data,
-      borderColor: o.color ?? l(a[r % a.length]),
-      backgroundColor: o.color ?? l(a[r % a.length]),
-      borderDash: o.borderDash,
-      borderWidth: f,
-      pointRadius: 0,
-      pointHoverRadius: 4,
-      tension: m ? 0.3 : 0,
-      fill: !1
-    }))
-  }), [
-    u,
-    i,
-    m,
-    f
-  ]), R = h(() => ({
-    responsive: !0,
-    maintainAspectRatio: !1,
-    onHover: (o, r) => {
-      const y = o.native?.target;
-      y && (y.style.cursor = r.length > 0 ? "pointer" : "default");
-    },
-    interaction: {
-      mode: "index",
-      intersect: !1
-    },
-    plugins: {
-      legend: {
-        display: v,
-        position: "top",
-        align: "end",
-        labels: {
-          color: "#9FAFBC",
-          font: {
-            size: 12,
-            weight: 500
-          },
-          usePointStyle: !0,
-          pointStyle: "line",
-          boxWidth: 24,
-          padding: 16
-        }
-      },
-      tooltip: {
-        enabled: !0,
-        backgroundColor: l("--color-metal-700"),
-        titleColor: d,
-        bodyColor: d,
-        boxPadding: 6,
-        callbacks: { labelTextColor: () => d }
-      }
-    },
-    scales: {
-      x: {
-        grid: { color: "transparent" },
-        ticks: {
-          color: c,
-          font: { size: 12 }
-        },
-        border: {
-          display: s,
-          color: e
-        }
-      },
-      y: {
-        grid: { color: g ? e : "transparent" },
-        ticks: {
-          color: c,
-          font: { size: 12 },
-          callback: t ? (o) => t(o) : void 0
-        },
-        border: {
-          display: s,
-          color: e
-        }
-      }
-    }
-  }), [
-    v,
-    t,
-    c,
-    e,
-    g,
-    s
-  ]);
-  return /* @__PURE__ */ V("div", {
-    className: _("w-full", S),
-    children: [n && /* @__PURE__ */ p(z, {
-      variant: "subtitle2",
-      className: "mb-6",
-      ...k,
-      children: n
-    }), /* @__PURE__ */ p("div", {
-      style: { height: C },
-      children: /* @__PURE__ */ p(H, {
-        "aria-label": n ?? "Line chart",
-        data: L,
-        options: R
-      })
-    })]
-  });
-};
+import { Typography as n } from "../Typography/Typography.js";
+import { t as l } from "../../utils-DnIJruo0.js";
+import { Suspense as m, lazy as o } from "react";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+var h = o(() => import("./components/LineChartContent/LineChartContent.js").then((a) => ({ default: a.LineChartContent }))), c = ({ className: a, height: e = 300, title: t, titleProps: i }) => /* @__PURE__ */ s("div", {
+  className: l("w-full", a),
+  "aria-busy": "true",
+  children: [t && /* @__PURE__ */ r(n, {
+    variant: "subtitle2",
+    className: "mb-6",
+    ...i,
+    children: t
+  }), /* @__PURE__ */ r("div", { style: { height: e } })]
+}), v = (a) => /* @__PURE__ */ r(m, {
+  fallback: /* @__PURE__ */ r(c, { ...a }),
+  children: /* @__PURE__ */ r(h, { ...a })
+});
 export {
-  J as LineChart
+  v as LineChart
 };

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

@@ -0,0 +1,127 @@
+import { a as _, c as z, d as P, i as j, l as D, n as E, o as F, s as H, u as N } from "../../../../dist-BCqfbYE9.js";
+import { Typography as O } from "../../../Typography/Typography.js";
+import { a as l, t as M } from "../../../../utils-DnIJruo0.js";
+import { useMemo as h } from "react";
+import { jsx as p, jsxs as V } from "react/jsx-runtime";
+_.register(j, D, N, H, F, z, P);
+var a = [
+  "--color-aurora-500",
+  "--color-rose-500",
+  "--color-violet-500",
+  "--color-emerald-500",
+  "--color-sky-500",
+  "--color-teal-500",
+  "--color-amber-500",
+  "--color-fuchsia-500",
+  "--color-indigo-500",
+  "--color-cyan-500"
+], J = ({ title: n, titleProps: C, labels: u, datasets: t, yAxisFormatter: i, showLegend: b, height: k = 300, smooth: m = !0, axisColor: c = "#9F9FA9", gridColor: e = "#45556C", showGrid: g = !0, lineWidth: f = 2, showAxisBorder: s = !1, tooltipTextColor: d = l("--color-metal-100"), className: S }) => {
+  const v = b !== void 0 ? b : t.length > 1, L = h(() => ({
+    labels: u,
+    datasets: t.map((o, r) => ({
+      label: o.label,
+      data: o.data,
+      borderColor: o.color ?? l(a[r % a.length]),
+      backgroundColor: o.color ?? l(a[r % a.length]),
+      borderDash: o.borderDash,
+      borderWidth: f,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      tension: m ? 0.3 : 0,
+      fill: !1
+    }))
+  }), [
+    u,
+    t,
+    m,
+    f
+  ]), R = h(() => ({
+    responsive: !0,
+    maintainAspectRatio: !1,
+    onHover: (o, r) => {
+      const y = o.native?.target;
+      y && (y.style.cursor = r.length > 0 ? "pointer" : "default");
+    },
+    interaction: {
+      mode: "index",
+      intersect: !1
+    },
+    plugins: {
+      legend: {
+        display: v,
+        position: "top",
+        align: "end",
+        labels: {
+          color: "#9FAFBC",
+          font: {
+            size: 12,
+            weight: 500
+          },
+          usePointStyle: !0,
+          pointStyle: "line",
+          boxWidth: 24,
+          padding: 16
+        }
+      },
+      tooltip: {
+        enabled: !0,
+        backgroundColor: l("--color-metal-700"),
+        titleColor: d,
+        bodyColor: d,
+        boxPadding: 6,
+        callbacks: { labelTextColor: () => d }
+      }
+    },
+    scales: {
+      x: {
+        grid: { color: "transparent" },
+        ticks: {
+          color: c,
+          font: { size: 12 }
+        },
+        border: {
+          display: s,
+          color: e
+        }
+      },
+      y: {
+        grid: { color: g ? e : "transparent" },
+        ticks: {
+          color: c,
+          font: { size: 12 },
+          callback: i ? (o) => i(o) : void 0
+        },
+        border: {
+          display: s,
+          color: e
+        }
+      }
+    }
+  }), [
+    v,
+    i,
+    c,
+    e,
+    g,
+    s
+  ]);
+  return /* @__PURE__ */ V("div", {
+    className: M("w-full", S),
+    children: [n && /* @__PURE__ */ p(O, {
+      variant: "subtitle2",
+      className: "mb-6",
+      ...C,
+      children: n
+    }), /* @__PURE__ */ p("div", {
+      style: { height: k },
+      children: /* @__PURE__ */ p(E, {
+        "aria-label": n ?? "Line chart",
+        data: L,
+        options: R
+      })
+    })]
+  });
+};
+export {
+  J as LineChartContent
+};

package/dist/components/Loading/Loading.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../Loading-DNlO4qxs.js";
+import { t as r } from "../../Loading-DuhcrPrf.js";
 export {
   r as Loading
 };

package/dist/components/Loading/Loading.variants.js

@@ -1,4 +1,4 @@
-import { t } from "../../dist-Bcn6lMQe.js";
+import { t } from "../../dist-B9GE4SXf.js";
 var a = t([
   "h-8",
   "w-8",

package/dist/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../../Modal-IyDr5vIx.js";
+import { t } from "../../Modal-Bwq7Gc0A.js";
 export {
   t as Modal
 };

package/dist/components/Modal/components/Body/Body.js

@@ -1,5 +1,5 @@
-import { t as m } from "../../../../dist-CMPkuWNy.js";
-import { t as a } from "../../../../utils-COaoD3PI.js";
+import { t as m } from "../../../../dist-CK8FUUUn.js";
+import { t as a } from "../../../../utils-DnIJruo0.js";
 import { jsx as s } from "react/jsx-runtime";
 var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ s(o ? m : "div", {
   className: a("flex-1", t),

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,5 +1,5 @@
-import { t as m } from "../../../../dist-CMPkuWNy.js";
-import { t as a } from "../../../../utils-COaoD3PI.js";
+import { t as m } from "../../../../dist-CK8FUUUn.js";
+import { t as a } from "../../../../utils-DnIJruo0.js";
 import { jsx as e } from "react/jsx-runtime";
 var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ e(o ? m : "div", {
   className: a("border-zinc-200 dark:border-metal-700", t),

package/dist/components/Modal/components/Header/Header.js

@@ -1,5 +1,5 @@
-import { t as a } from "../../../../dist-CMPkuWNy.js";
-import { t as e } from "../../../../utils-COaoD3PI.js";
+import { t as a } from "../../../../dist-CK8FUUUn.js";
+import { t as e } from "../../../../utils-DnIJruo0.js";
 import { jsx as m } from "react/jsx-runtime";
 var p = ({ children: r, asChild: o, className: t }) => /* @__PURE__ */ m(o ? a : "div", {
   className: e("border-zinc-200 dark:border-metal-700", t),

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

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../Modal-IyDr5vIx.js";
+import { n as p } from "../../../../Modal-Bwq7Gc0A.js";
 export {
   p as Wrapper
 };

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

@@ -1,5 +1,5 @@
-import { t } from "../../../../dist-Bcn6lMQe.js";
-var a = t([
+import { t as e } from "../../../../dist-B9GE4SXf.js";
+var t = 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,17 +18,26 @@ 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",
+  "rounded",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
   "text-slate-500",
   "dark:text-slate-300",
   "hover:text-slate-700",
   "dark:hover:text-slate-100"
 ]);
 export {
-  r as buttonCloseVariants,
-  a as modalVariants
+  a as buttonCloseVariants,
+  t 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-IyDr5vIx.js";
+import { n as i } from "../../../Modal-Bwq7Gc0A.js";
 export {
   o as Body,
   p as Footer,

package/dist/components/Modal/contexts/Modal.provider.js

@@ -1,23 +1,30 @@
-import { useToggle as i } from "../../../hooks/useToggle.js";
-import { ModalContext as f } from "./Modal.context.js";
-import { useCallback as t, useState as n } from "react";
-import { jsx as h } from "react/jsx-runtime";
-var x = ({ children: s }) => {
-  const [r, l] = n(!0), [a, o] = i(!1), [u, d] = n(), e = t(() => o(!0), [o]), p = t(() => o(!1), [o]), c = (m, C = !0) => {
-    d(m), e(), l(C);
-  };
-  return /* @__PURE__ */ h(f.Provider, {
-    value: {
-      content: u,
-      isOpen: a,
-      shouldShowClose: r,
-      onClose: p,
-      onOpen: e,
-      setContentAndOpen: c
-    },
-    children: s
+import { useToggle as f } from "../../../hooks/useToggle.js";
+import { ModalContext as h } from "./Modal.context.js";
+import { useCallback as t, useMemo as S, useState as u } from "react";
+import { jsx as g } from "react/jsx-runtime";
+var w = ({ children: c }) => {
+  const [n, d] = u(!0), [s, o] = f(!1), [r, m] = u(), e = t(() => o(!0), [o]), l = t(() => o(!1), [o]), a = t((C, i = !0) => {
+    m(C), e(), d(i);
+  }, [e]), p = S(() => ({
+    content: r,
+    isOpen: s,
+    shouldShowClose: n,
+    onClose: l,
+    onOpen: e,
+    setContentAndOpen: a
+  }), [
+    r,
+    s,
+    n,
+    l,
+    e,
+    a
+  ]);
+  return /* @__PURE__ */ g(h.Provider, {
+    value: p,
+    children: c
   });
 };
 export {
-  x as ModalProvider
+  w as ModalProvider
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

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

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.variants.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../dist-Bcn6lMQe.js";
+import { t as r } from "../../dist-B9GE4SXf.js";
 var a = r([
   "flex",
   "flex-col",
@@ -6,7 +6,7 @@ var a = r([
   "w-full",
   "relative",
   "cursor-pointer"
-]), t = r(["cursor-pointer", "select-none"]), o = r([
+]), t = r(["cursor-pointer", "select-none"]), l = r([
   "min-h-9",
   "border",
   "cursor-pointer",
@@ -23,9 +23,28 @@ var a = r([
   "border-gray-200",
   "dark:border-metal-700",
   "dark:bg-metal-800"
-]);
+], {
+  variants: {
+    hasError: {
+      true: ["border-red-600", "dark:border-red-500"],
+      false: []
+    },
+    disabled: {
+      true: [
+        "cursor-default",
+        "bg-gray-100",
+        "dark:bg-metal-700/80"
+      ],
+      false: []
+    }
+  },
+  defaultVariants: {
+    hasError: !1,
+    disabled: !1
+  }
+});
 export {
   t as labelVariants,
-  o as multiSelectDropdownVariants,
+  l as multiSelectDropdownVariants,
   a as wrapperVariants
 };

package/dist/components/MultiSelectDropdown/components/Item/Item.js

@@ -1,6 +1,6 @@
-import { t as i } from "../../../../utils-COaoD3PI.js";
-import { Badge as l } from "../../../Badge/Badge.js";
-import { Typography as n } from "../../../Typography/Typography.js";
+import { Badge as i } from "../../../Badge/Badge.js";
+import { Typography as l } from "../../../Typography/Typography.js";
+import { t as n } from "../../../../utils-DnIJruo0.js";
 import { useMultiSelectDropdown as p } from "../../contexts/MultiSelectDropdown.hook.js";
 import { itemVariants as s } from "./Item.variants.js";
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
@@ -9,12 +9,12 @@ var x = ({ option: r, theme: o, isSelected: t, className: a }) => {
   return /* @__PURE__ */ c("li", {
     role: "option",
     "data-theme": o,
-    className: i(s({ isSelected: t }), a),
+    className: n(s({ isSelected: t }), a),
     onClick: () => m(r),
-    children: [/* @__PURE__ */ e(n, {
+    children: [/* @__PURE__ */ e(l, {
       variant: "body2",
       children: r.label
-    }), r.badge && /* @__PURE__ */ e(l, { label: r.badge })]
+    }), r.badge && /* @__PURE__ */ e(i, { label: r.badge })]
   });
 };
 export {

package/dist/components/MultiSelectDropdown/components/Item/Item.variants.js

@@ -1,6 +1,7 @@
-import { t as e } from "../../../../dist-Bcn6lMQe.js";
-var t = e([
+import { t as a } from "../../../../dist-B9GE4SXf.js";
+var t = a([
   "cursor-pointer",
+  "tap-target",
   "py-1.5",
   "px-2",
   "last:pb-2",
@@ -10,8 +11,10 @@ var t = e([
   "items-center",
   "gap-2",
   "hover:bg-gray-50",
+  "active:bg-gray-50",
   "focus:bg-gray-50",
   "dark:hover:bg-metal-700",
+  "dark:active:bg-metal-700",
   "dark:focus:bg-metal-700"
 ], {
   variants: { isSelected: {

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

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

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

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-Bcn6lMQe.js";
+import { t as a } from "../../../../dist-B9GE4SXf.js";
 var e = a([
   "absolute",
   "bg-white",

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

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../components-C_LekSz_.js";
+import { n as p } from "../../../../components-DE5uBcFF.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-C_LekSz_.js";
+import { n as p, r as t } from "../../../components-DE5uBcFF.js";
 export {
   m as Item,
   t as List,

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.js

@@ -14,8 +14,9 @@ var n = {
     throw new Error("Function not implemented.");
   },
   isLoading: !1,
-  noOptionsText: void 0
-}, o = e(n);
+  noOptionsText: void 0,
+  loadingText: void 0
+}, t = e(n);
 export {
-  o as MultiSelectDropdownContext
+  t as MultiSelectDropdownContext
 };