@konstructio/ui 0.1.2-alpha.75 → 0.1.2-alpha.77

package/dist/components/LineChart/LineChart.js

@@ -3,27 +3,8 @@ import { C as _, a as z, i as j, p as D, L as E, b as F, P as H, c as N, d as O
 import { useMemo as h } from "react";
 import { Typography as M } from "../Typography/Typography.js";
 import { resolveColor as r, cn as V } from "../../utils/index.js";
-_.register(
-  z,
-  j,
-  D,
-  E,
-  F,
-  H,
-  N
-);
-const 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 = ({
+_.register(z, j, D, E, F, H, N);
+const 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: b,
@@ -40,116 +21,98 @@ const a = [
   tooltipTextColor: d = r("--color-metal-100"),
   className: L
 }) => {
-  const y = u !== void 0 ? u : t.length > 1, S = h(
-    () => ({
-      labels: b,
-      datasets: t.map((o, l) => ({
-        label: o.label,
-        data: o.data,
-        borderColor: o.color ?? r(a[l % a.length]),
-        backgroundColor: o.color ?? r(a[l % a.length]),
-        borderDash: o.borderDash,
-        borderWidth: f,
-        pointRadius: 0,
-        pointHoverRadius: 4,
-        tension: m ? 0.3 : 0,
-        fill: !1
-      }))
-    }),
-    [b, t, m, f]
-  ), R = h(
-    () => ({
-      responsive: !0,
-      maintainAspectRatio: !1,
-      onHover: (o, l) => {
-        const v = o.native?.target;
-        v && (v.style.cursor = l.length > 0 ? "pointer" : "default");
-      },
-      interaction: {
-        mode: "index",
-        intersect: !1
+  const y = u !== void 0 ? u : t.length > 1, S = h(() => ({
+    labels: b,
+    datasets: t.map((o, l) => ({
+      label: o.label,
+      data: o.data,
+      borderColor: o.color ?? r(a[l % a.length]),
+      backgroundColor: o.color ?? r(a[l % a.length]),
+      borderDash: o.borderDash,
+      borderWidth: f,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      tension: m ? 0.3 : 0,
+      fill: !1
+    }))
+  }), [b, t, m, f]), R = h(() => ({
+    responsive: !0,
+    maintainAspectRatio: !1,
+    onHover: (o, l) => {
+      const v = o.native?.target;
+      v && (v.style.cursor = l.length > 0 ? "pointer" : "default");
+    },
+    interaction: {
+      mode: "index",
+      intersect: !1
+    },
+    plugins: {
+      legend: {
+        display: y,
+        position: "top",
+        align: "end",
+        labels: {
+          color: "#9FAFBC",
+          font: {
+            size: 12,
+            weight: 500
+          },
+          usePointStyle: !0,
+          pointStyle: "line",
+          boxWidth: 24,
+          padding: 16
+        }
       },
-      plugins: {
-        legend: {
-          display: y,
-          position: "top",
-          align: "end",
-          labels: {
-            color: "#9FAFBC",
-            font: {
-              size: 12,
-              weight: 500
-            },
-            usePointStyle: !0,
-            pointStyle: "line",
-            boxWidth: 24,
-            padding: 16
-          }
+      tooltip: {
+        enabled: !0,
+        backgroundColor: r("--color-metal-700"),
+        titleColor: d,
+        bodyColor: d,
+        boxPadding: 6,
+        callbacks: {
+          labelTextColor: () => d
+        }
+      }
+    },
+    scales: {
+      x: {
+        grid: {
+          color: "transparent"
         },
-        tooltip: {
-          enabled: !0,
-          backgroundColor: r("--color-metal-700"),
-          titleColor: d,
-          bodyColor: d,
-          boxPadding: 6,
-          callbacks: {
-            labelTextColor: () => d
+        ticks: {
+          color: c,
+          font: {
+            size: 12
           }
+        },
+        border: {
+          display: s,
+          color: e
         }
       },
-      scales: {
-        x: {
-          grid: {
-            color: "transparent"
-          },
-          ticks: {
-            color: c,
-            font: {
-              size: 12
-            }
-          },
-          border: {
-            display: s,
-            color: e
-          }
+      y: {
+        grid: {
+          color: g ? e : "transparent"
         },
-        y: {
-          grid: {
-            color: g ? e : "transparent"
-          },
-          ticks: {
-            color: c,
-            font: {
-              size: 12
-            },
-            callback: i ? (o) => i(o) : void 0
+        ticks: {
+          color: c,
+          font: {
+            size: 12
           },
-          border: {
-            display: s,
-            color: e
-          }
+          callback: i ? (o) => i(o) : void 0
+        },
+        border: {
+          display: s,
+          color: e
         }
       }
-    }),
-    [
-      y,
-      i,
-      c,
-      e,
-      g,
-      s
-    ]
-  );
+    }
+  }), [y, i, c, e, g, s]);
   return /* @__PURE__ */ P("div", { className: V("w-full", L), children: [
     n && /* @__PURE__ */ p(M, { variant: "subtitle2", className: "mb-6", ...C, children: n }),
-    /* @__PURE__ */ p("div", { style: { height: k }, children: /* @__PURE__ */ p(
-      O,
-      {
-        "aria-label": n ?? "Line chart",
-        data: S,
-        options: R
-      }
-    ) })
+    /* @__PURE__ */ p("div", { style: {
+      height: k
+    }, children: /* @__PURE__ */ p(O, { "aria-label": n ?? "Line chart", data: S, options: R }) })
   ] });
 };
 export {

package/dist/components/LineChart/LineChart.types.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from '../Typography/Typography.types';
+import { Props as TypographyProps } from '../Typography/Typography.types';
 export interface LineChartDataset {
     /** Dataset label (used in legend) */
     label: string;
@@ -22,7 +22,7 @@ export interface LineChartDataset {
  * />
  * ```
  */
-export interface LineChartProps {
+export interface Props {
     /** Chart title text */
     title?: string;
     /** Props passed to the Typography component used for the title */
@@ -54,3 +54,5 @@ export interface LineChartProps {
     /** Additional className for wrapper */
     className?: string;
 }
+/** @deprecated Use Props instead */
+export type LineChartProps = Props;

package/dist/components/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LoadingProps } from './Loading.types';
+import { Props } from './Loading.types';
 /**
  * A spinning loading indicator.
  *
@@ -20,5 +20,5 @@ import { LoadingProps } from './Loading.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-loading--docs Storybook}
  */
-declare const Loading: FC<LoadingProps>;
+declare const Loading: FC<Props>;
 export { Loading };

package/dist/components/Loading/Loading.js

@@ -1,20 +1,24 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as c } from "../../utils/index.js";
-import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-CP-mMPfa.js";
-const d = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], m = t("loader-circle", d), n = ({ className: o, theme: a, ...r }) => /* @__PURE__ */ e(
-  m,
-  {
-    "data-theme": a,
-    className: c(
-      i({
-        className: o
-      })
-    ),
-    ...r
-  }
-);
-n.displayName = "Loading";
+import { jsx as l } from "react/jsx-runtime";
+import { c as m } from "../../compiler-runtime-DA41awpA.js";
+import { cn as s } from "../../utils/index.js";
+import { loadingVariants as d } from "./Loading.variants.js";
+import { c as n } from "../../createLucideIcon-CP-mMPfa.js";
+const p = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], f = n("loader-circle", p), g = (c) => {
+  const e = m.c(10);
+  let o, t, a;
+  e[0] !== c ? ({
+    className: o,
+    theme: a,
+    ...t
+  } = c, e[0] = c, e[1] = o, e[2] = t, e[3] = a) : (o = e[1], t = e[2], a = e[3]);
+  let r;
+  e[4] !== o ? (r = s(d({
+    className: o
+  })), e[4] = o, e[5] = r) : r = e[5];
+  let i;
+  return e[6] !== t || e[7] !== r || e[8] !== a ? (i = /* @__PURE__ */ l(f, { "data-theme": a, className: r, ...t }), e[6] = t, e[7] = r, e[8] = a, e[9] = i) : i = e[9], i;
+};
+g.displayName = "Loading";
 export {
-  n as Loading
+  g as Loading
 };

package/dist/components/Loading/Loading.types.d.ts

@@ -11,7 +11,9 @@ import { loadingVariants } from './Loading.variants';
  * <Loading className="w-8 h-8" />
  * ```
  */
-export type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
+export type Props = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
     /** Theme override for this component */
     theme?: Theme;
 };
+/** @deprecated Use Props instead */
+export type LoadingProps = Props;

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

@@ -1,12 +1,5 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t([
-  "h-8",
-  "w-8",
-  "animate-spin",
-  "text-inherit",
-  "kubefirst:text-kubefirst-primary",
-  "text-aurora-500"
-]);
+const a = t(["h-8", "w-8", "animate-spin", "text-inherit", "kubefirst:text-kubefirst-primary", "text-aurora-500"]);
 export {
   a as loadingVariants
 };

package/dist/components/Modal/Modal.js

@@ -1,10 +1,11 @@
 import "react/jsx-runtime";
+import "../../compiler-runtime-DA41awpA.js";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal-BTOXCb0Y.js";
+import { M as e } from "../../Modal-h5H4yxYg.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";
 export {
-  d as Modal
+  e as Modal
 };

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

@@ -1,7 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "../../../../index-BvoZGpli.js";
-import { cn as e } from "../../../../utils/index.js";
-const i = ({ children: o, asChild: t, className: m }) => /* @__PURE__ */ r(t ? n : "div", { className: e("flex-1", m), children: o });
+import { jsx as l } from "react/jsx-runtime";
+import { c as n } from "../../../../compiler-runtime-DA41awpA.js";
+import { S as p } from "../../../../index-BvoZGpli.js";
+import { cn as a } from "../../../../utils/index.js";
+const u = (c) => {
+  const o = n.c(6), {
+    children: s,
+    asChild: i,
+    className: r
+  } = c, m = i ? p : "div";
+  let t;
+  o[0] !== r ? (t = a("flex-1", r), o[0] = r, o[1] = t) : t = o[1];
+  let e;
+  return o[2] !== m || o[3] !== s || o[4] !== t ? (e = /* @__PURE__ */ l(m, { className: t, children: s }), o[2] = m, o[3] = s, o[4] = t, o[5] = e) : e = o[5], e;
+};
 export {
-  i as Body
+  u as Body
 };

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

@@ -1,13 +1,18 @@
-import { jsx as m } from "react/jsx-runtime";
-import { S as e } from "../../../../index-BvoZGpli.js";
-import { cn as n } from "../../../../utils/index.js";
-const i = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(
-  r ? e : "div",
-  {
-    className: n("border-zinc-200 dark:border-metal-700", t),
-    children: o
-  }
-);
+import { jsx as l } from "react/jsx-runtime";
+import { c as n } from "../../../../compiler-runtime-DA41awpA.js";
+import { S as a } from "../../../../index-BvoZGpli.js";
+import { cn as p } from "../../../../utils/index.js";
+const h = (c) => {
+  const o = n.c(6), {
+    children: e,
+    asChild: i,
+    className: s
+  } = c, m = i ? a : "div";
+  let r;
+  o[0] !== s ? (r = p("border-zinc-200 dark:border-metal-700", s), o[0] = s, o[1] = r) : r = o[1];
+  let t;
+  return o[2] !== m || o[3] !== e || o[4] !== r ? (t = /* @__PURE__ */ l(m, { className: r, children: e }), o[2] = m, o[3] = e, o[4] = r, o[5] = t) : t = o[5], t;
+};
 export {
-  i as Footer
+  h as Footer
 };

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

@@ -1,13 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import { S as m } from "../../../../index-BvoZGpli.js";
-import { cn as n } from "../../../../utils/index.js";
-const d = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ e(
-  r ? m : "div",
-  {
-    className: n("border-zinc-200 dark:border-metal-700", t),
-    children: o
-  }
-);
+import { jsx as l } from "react/jsx-runtime";
+import { c as n } from "../../../../compiler-runtime-DA41awpA.js";
+import { S as a } from "../../../../index-BvoZGpli.js";
+import { cn as p } from "../../../../utils/index.js";
+const h = (c) => {
+  const o = n.c(6), {
+    children: t,
+    asChild: i,
+    className: s
+  } = c, m = i ? a : "div";
+  let r;
+  o[0] !== s ? (r = p("border-zinc-200 dark:border-metal-700", s), o[0] = s, o[1] = r) : r = o[1];
+  let e;
+  return o[2] !== m || o[3] !== t || o[4] !== r ? (e = /* @__PURE__ */ l(m, { className: r, children: t }), o[2] = m, o[3] = t, o[4] = r, o[5] = e) : e = o[5], e;
+};
 export {
-  d as Header
+  h as Header
 };

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

@@ -1,12 +1,13 @@
 import "react/jsx-runtime";
+import "../../../../compiler-runtime-DA41awpA.js";
 import "../../../../index-BKjcReYh.js";
 import "react";
 import "../../../../Combination-BtmnusWq.js";
-import { W as s } from "../../../../Modal-BTOXCb0Y.js";
+import { W as x } from "../../../../Modal-h5H4yxYg.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../proxy-BvdTb_6B.js";
 import "../../../../x-Eoa9FJjA.js";
+import "../../../../proxy-BGrSEZuV.js";
 export {
-  s as Wrapper
+  x as Wrapper
 };

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

@@ -1,32 +1,5 @@
 import { c as t } from "../../../../index-D29mdTf5.js";
-const a = t([
-  "bg-white",
-  "border",
-  "border-transparent",
-  "dark:bg-metal-800",
-  "dark:border-slate-700",
-  "flex",
-  "flex-col",
-  "justify-between",
-  "min-h-112.5",
-  "min-w-125",
-  "relative",
-  "rounded-md",
-  "shadow-xs",
-  "animate-in",
-  "fade-in-0",
-  "zoom-in-95",
-  "duration-150"
-]), r = t([
-  "absolute",
-  "right-1.5",
-  "top-1.5",
-  "cursor-pointer",
-  "text-slate-500",
-  "dark:text-slate-300",
-  "hover:text-slate-700",
-  "dark:hover:text-slate-100"
-]);
+const a = t(["bg-white", "border", "border-transparent", "dark:bg-metal-800", "dark:border-slate-700", "flex", "flex-col", "justify-between", "min-h-112.5", "min-w-125", "relative", "rounded-md", "shadow-xs", "animate-in", "fade-in-0", "zoom-in-95", "duration-150"]), r = t(["absolute", "right-1.5", "top-1.5", "cursor-pointer", "text-slate-500", "dark:text-slate-300", "hover:text-slate-700", "dark:hover:text-slate-100"]);
 export {
   r as buttonCloseVariants,
   a as modalVariants

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

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-BTOXCb0Y.js";
+import { W as a } from "../../../Modal-h5H4yxYg.js";
 export {
   e as Body,
   t as Footer,

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

@@ -10,9 +10,7 @@ const n = {
     throw new Error("onClose not implemented");
   },
   setContentAndOpen: () => {
-    throw new Error(
-      "ModalContext: setContentAndOpen function must be overridden"
-    );
+    throw new Error("ModalContext: setContentAndOpen function must be overridden");
   }
 }, t = e(n);
 export {

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

@@ -1,26 +1,36 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as t, useCallback as n } from "react";
-import { ModalContext as f } from "./Modal.context.js";
-import { useToggle as h } from "../../../hooks/useToggle.js";
-const x = ({ children: s }) => {
-  const [r, l] = t(!0), [a, o] = h(!1), [u, c] = t(), e = n(() => o(!0), [o]), d = n(() => o(!1), [o]), p = (m, C = !0) => {
-    c(m), e(), l(C);
-  };
-  return /* @__PURE__ */ i(
-    f.Provider,
-    {
-      value: {
-        content: u,
-        isOpen: a,
-        shouldShowClose: r,
-        onClose: d,
-        onOpen: e,
-        setContentAndOpen: p
-      },
-      children: s
-    }
-  );
+import { jsx as O } from "react/jsx-runtime";
+import { c as w } from "../../../compiler-runtime-DA41awpA.js";
+import { useState as h } from "react";
+import { ModalContext as M } from "./Modal.context.js";
+import { useToggle as P } from "../../../hooks/useToggle.js";
+const T = (C) => {
+  const e = w.c(16), {
+    children: c
+  } = C, [f, S] = h(!0), [m, t] = P(!1), [p, g] = h();
+  let n;
+  e[0] !== t ? (n = () => t(!0), e[0] = t, e[1] = n) : n = e[1];
+  const o = n;
+  let l;
+  e[2] !== t ? (l = () => t(!1), e[2] = t, e[3] = l) : l = e[3];
+  const d = l;
+  let r;
+  e[4] !== o ? (r = (v, a) => {
+    const x = a === void 0 ? !0 : a;
+    g(v), o(), S(x);
+  }, e[4] = o, e[5] = r) : r = e[5];
+  const u = r;
+  let s;
+  e[6] !== p || e[7] !== d || e[8] !== o || e[9] !== m || e[10] !== u || e[11] !== f ? (s = {
+    content: p,
+    isOpen: m,
+    shouldShowClose: f,
+    onClose: d,
+    onOpen: o,
+    setContentAndOpen: u
+  }, e[6] = p, e[7] = d, e[8] = o, e[9] = m, e[10] = u, e[11] = f, e[12] = s) : s = e[12];
+  let i;
+  return e[13] !== c || e[14] !== s ? (i = /* @__PURE__ */ O(M.Provider, { value: s, children: c }), e[13] = c, e[14] = s, e[15] = i) : i = e[15], i;
 };
 export {
-  x as ModalProvider
+  T as ModalProvider
 };

package/dist/components/Modal/hooks/useModal.js

@@ -1,26 +1,37 @@
-import { useContext as l, useRef as u, useEffect as r } from "react";
-import { ModalContext as d } from "../contexts/Modal.context.js";
-const f = () => {
-  const o = l(d), t = u(null);
-  if (!o)
+import { c as d } from "../../../compiler-runtime-DA41awpA.js";
+import { useContext as w, useRef as p, useEffect as a } from "react";
+import { ModalContext as E } from "../contexts/Modal.context.js";
+const y = () => {
+  const e = d.c(7), t = w(E), u = p(null);
+  if (!t)
     throw new Error("useModal must be used within a ModalProvider");
-  const { onClose: n } = o;
-  return r(() => {
-    const e = document.activeElement;
-    return t.current?.focus(), () => {
-      e?.focus();
+  const {
+    onClose: o
+  } = t;
+  let n, r;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = () => {
+    const i = document.activeElement;
+    return u.current?.focus(), () => {
+      i?.focus();
     };
-  }, []), r(() => {
-    const e = new AbortController(), s = (c) => {
-      c.code === "Escape" && n();
+  }, r = [], e[0] = n, e[1] = r) : (n = e[0], r = e[1]), a(n, r);
+  let s, l;
+  e[2] !== o ? (s = () => {
+    const i = new AbortController(), f = (m) => {
+      m.code === "Escape" && o();
     };
-    return window.addEventListener("keydown", s, {
-      signal: e.signal
+    return window.addEventListener("keydown", f, {
+      signal: i.signal
     }), () => {
-      e.abort();
+      i.abort();
     };
-  }, [n]), { ...o, closeBtnRef: t };
+  }, l = [o], e[2] = o, e[3] = s, e[4] = l) : (s = e[3], l = e[4]), a(s, l);
+  let c;
+  return e[5] !== t ? (c = {
+    ...t,
+    closeBtnRef: u
+  }, e[5] = t, e[6] = c) : c = e[6], c;
 };
 export {
-  f as useModal
+  y as useModal
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MultiSelectDropdownProps } from './MultiSelectDropdown.types';
+import { Props } from './MultiSelectDropdown.types';
 /**
  * A dropdown component for selecting one or multiple options with search functionality.
  * Displays selected items as badges and supports loading states.
@@ -20,4 +20,4 @@ import { MultiSelectDropdownProps } from './MultiSelectDropdown.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-multiselectdropdown--docs Storybook}
  */
-export declare const MultiSelectDropdown: FC<MultiSelectDropdownProps>;
+export declare const MultiSelectDropdown: FC<Props>;