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

package/dist/components/ImageUpload/ImageUpload.js

@@ -1,121 +1,4 @@
-import { jsxs as l, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { useId as te, useRef as D, useState as g, useEffect as ae } from "react";
-import { Button as F } from "../Button/Button.js";
-import { cn as c } from "../../utils/index.js";
-import { labelVariants as re, inputFieldVariants as le, inputContainerVariants as ie, helperTextVariants as se, imageUploadVariants as ne } from "./ImageUpload.variants.js";
-import { LoaderIcon as ce } from "../../assets/icons/components/Loader.js";
-import { PhotoLibraryIcon as oe } from "../../assets/icons/components/PhotoLibrary.js";
-import { WarningIcon as de } from "../../assets/icons/components/Warning.js";
-import { X as P } from "../../x-B9bYxG31.js";
-var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
-const me = ({
-  className: s,
-  error: b,
-  fileName: T,
-  fileSize: z,
-  fileUrl: E,
-  helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.",
-  isRequired: S = !1,
-  label: p = "Item logo",
-  labelClassName: L,
-  labelWrapperClassName: A,
-  name: H,
-  onChange: N,
-  onRemove: J,
-  status: k = t.Default,
-  theme: u,
-  uploadButtonText: K = "Upload logo",
-  accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
-  maxSize: W = 5 * 1024 * 1024
-}) => {
-  const U = te(), f = D(null), n = D(null), [$, o] = g(k), [X, B] = g(E), [q, C] = g(T), [O, G] = g(z);
-  ae(() => () => {
-    n.current && clearTimeout(n.current);
-  }, []);
-  const a = k !== t.Default ? k : $, v = E ?? X, d = T ?? q, h = z ?? O, x = !!b || a === t.Error, Q = (i) => {
-    const r = i.target.files?.[0];
-    if (!r) return;
-    if (!M.split(",").map((m) => m.trim()).some((m) => {
-      if (m.includes("*")) {
-        const ee = m.split("/")[0];
-        return r.type.startsWith(ee);
-      }
-      return r.type === m;
-    })) {
-      o(t.Error), N?.(i);
-      return;
-    }
-    if (r.size > W) {
-      o(t.Error), N?.(i);
-      return;
-    }
-    o(t.Uploading), C(r.name), G(Z(r.size));
-    const y = new FileReader();
-    y.onloadend = () => {
-      B(y.result), n.current = setTimeout(() => {
-        o(t.Complete);
-      }, 500);
-    }, y.readAsDataURL(r), N?.(i);
-  }, I = () => {
-    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), o(t.Default), f.current && (f.current.value = ""), J?.();
-  }, Y = () => {
-    f.current?.click();
-  }, Z = (i) => {
-    if (i === 0) return "0 Bytes";
-    const r = 1024, V = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
-    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${V[w]}`;
-  }, _ = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
-  return /* @__PURE__ */ l("div", { className: c(ne({
-    status: a,
-    className: s
-  })), "data-theme": u, children: [
-    p && /* @__PURE__ */ e("div", { className: c(A), children: /* @__PURE__ */ l("label", { htmlFor: U, className: c(re({
-      className: L
-    }), "cursor-pointer"), children: [
-      p,
-      S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
-    ] }) }),
-    /* @__PURE__ */ l("div", { className: c(ie({
-      status: a
-    })), children: [
-      /* @__PURE__ */ l("div", { className: c(le({
-        status: a
-      }), {
-        "justify-between": x,
-        "justify-start": !x
-      }), children: [
-        a === t.Uploading && /* @__PURE__ */ l(j, { children: [
-          /* @__PURE__ */ e(ce, { size: 20, className: "shrink-0 animate-spin text-metal-400" }),
-          d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-            /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: d }),
-            h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
-          ] })
-        ] }),
-        a === t.Complete && v && /* @__PURE__ */ l(j, { children: [
-          /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e("img", { src: v, alt: d || "Uploaded image", className: "w-full h-full object-contain" }) }),
-          d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-            /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: d }),
-            h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
-          ] })
-        ] }),
-        (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
-        x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(de, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
-      ] }),
-      (a === t.Default || a === t.Error) && /* @__PURE__ */ e(F, { variant: "secondary", onClick: Y, theme: u, className: "h-10 px-4 py-2 shrink-0", children: K }),
-      a === t.Uploading && /* @__PURE__ */ e(F, { variant: "secondary", shape: "circle", size: "medium", onClick: I, theme: u, className: "shrink-0", "aria-label": "Cancel upload", children: /* @__PURE__ */ e(P, { className: "w-6 h-6" }) }),
-      a === t.Complete && /* @__PURE__ */ e(F, { variant: "secondary", shape: "circle", size: "medium", onClick: I, theme: u, className: "shrink-0", "aria-label": "Remove file", children: /* @__PURE__ */ e(P, { className: "w-6 h-6" }) })
-    ] }),
-    /* @__PURE__ */ l("div", { className: "flex w-full gap-2", children: [
-      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e("p", { className: c(se({
-        status: a
-      })), children: _ }) }),
-      (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
-      a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
-    ] }),
-    /* @__PURE__ */ e("input", { ref: f, id: U, type: "file", name: H, accept: M, onChange: Q, className: "hidden", "aria-label": typeof p == "string" ? p : "File upload" })
-  ] });
-};
-me.displayName = "KonstructImageUpload";
+import { t as a } from "../../ImageUpload-BzXjGZ2w.js";
 export {
-  me as ImageUpload
+  a as ImageUpload
 };

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -1,57 +1,92 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "flex-col", "gap-2", "w-full"], {
-  variants: {
-    status: {
-      default: "",
-      uploading: "",
-      complete: "",
-      error: ""
-    }
-  },
-  defaultVariants: {
-    status: "default"
-  }
-}), r = t(["flex", "gap-2", "h-15", "items-center", "w-full"], {
-  variants: {
-    status: {
-      default: "",
-      uploading: "",
-      complete: "",
-      error: ""
-    }
-  },
-  defaultVariants: {
-    status: "default"
-  }
-}), s = t(["flex", "gap-4", "grow", "h-full", "items-center", "px-4", "py-2", "rounded", "border", "bg-white", "border-gray-300", "dark:bg-metal-800", "dark:border-metal-700", "kubefirst-dark:bg-slate-800", "kubefirst-dark:border-slate-600"], {
-  variants: {
-    status: {
-      default: "",
-      uploading: "",
-      complete: "",
-      error: ["border-red-600", "dark:border-red-500", "kubefirst-dark:border-red-500"]
-    }
-  },
-  defaultVariants: {
-    status: "default"
-  }
-}), l = t(["flex", "gap-1", "items-center", "text-sm", "font-medium", "leading-5", "text-slate-500", "dark:text-slate-50", "kubefirst-dark:text-slate-50"]), d = t(["text-xs", "leading-5", "text-slate-600", "dark:text-slate-200", "kubefirst-dark:text-slate-200"], {
-  variants: {
-    status: {
-      default: "",
-      uploading: "",
-      complete: "",
-      error: ["text-red-700", "dark:text-red-400", "kubefirst-dark:text-red-500"]
-    }
-  },
-  defaultVariants: {
-    status: "default"
-  }
+import { t } from "../../dist-DtEbXv47.js";
+var a = t([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: ""
+  } },
+  defaultVariants: { status: "default" }
+}), r = t([
+  "flex",
+  "gap-2",
+  "h-15",
+  "items-center",
+  "w-full"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: ""
+  } },
+  defaultVariants: { status: "default" }
+}), l = t([
+  "flex",
+  "gap-4",
+  "grow",
+  "h-full",
+  "items-center",
+  "px-4",
+  "py-2",
+  "rounded",
+  "border",
+  "bg-white",
+  "border-gray-300",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "kubefirst-dark:bg-slate-800",
+  "kubefirst-dark:border-slate-600"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: [
+      "border-red-600",
+      "dark:border-red-500",
+      "kubefirst-dark:border-red-500"
+    ]
+  } },
+  defaultVariants: { status: "default" }
+}), s = t([
+  "flex",
+  "gap-1",
+  "items-center",
+  "text-sm",
+  "font-medium",
+  "leading-5",
+  "text-slate-500",
+  "dark:text-slate-50",
+  "kubefirst-dark:text-slate-50"
+]), d = t([
+  "text-xs",
+  "leading-5",
+  "text-slate-600",
+  "dark:text-slate-200",
+  "kubefirst-dark:text-slate-200"
+], {
+  variants: { status: {
+    default: "",
+    uploading: "",
+    complete: "",
+    error: [
+      "text-red-700",
+      "dark:text-red-400",
+      "kubefirst-dark:text-red-500"
+    ]
+  } },
+  defaultVariants: { status: "default" }
 });
 export {
   d as helperTextVariants,
   a as imageUploadVariants,
   r as inputContainerVariants,
-  s as inputFieldVariants,
-  l as labelVariants
+  l as inputFieldVariants,
+  s as labelVariants
 };

package/dist/components/Input/Input.js

@@ -1,163 +1,4 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import p, { forwardRef as y, useId as W, useRef as $, useState as T } from "react";
-import { cn as i } from "../../utils/index.js";
-import { inputVariants as S } from "./Input.variants.js";
-import { Typography as d } from "../Typography/Typography.js";
-import { SearchIcon as C } from "../../assets/icons/components/Search.js";
-import { WarningIcon as M } from "../../assets/icons/components/Warning.js";
-import { P as l } from "../../index-BOE_3f_Z.js";
-function g() {
-  return g = Object.assign || function(t) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var e in n)
-        Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
-    }
-    return t;
-  }, g.apply(this, arguments);
-}
-function R(t, r) {
-  if (t == null) return {};
-  var n = A(t, r), e, o;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(t);
-    for (o = 0; o < a.length; o++)
-      e = a[o], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
-  }
-  return n;
-}
-function A(t, r) {
-  if (t == null) return {};
-  var n = {}, e = Object.keys(t), o, a;
-  for (a = 0; a < e.length; a++)
-    o = e[a], !(r.indexOf(o) >= 0) && (n[o] = t[o]);
-  return n;
-}
-var x = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = R(t, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", g({
-    ref: r,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: e,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ p.createElement("path", {
-    d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-  }), /* @__PURE__ */ p.createElement("line", {
-    x1: "1",
-    y1: "1",
-    x2: "23",
-    y2: "23"
-  }));
-});
-x.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
-};
-x.displayName = "EyeOff";
-function v() {
-  return v = Object.assign || function(t) {
-    for (var r = 1; r < arguments.length; r++) {
-      var n = arguments[r];
-      for (var e in n)
-        Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
-    }
-    return t;
-  }, v.apply(this, arguments);
-}
-function B(t, r) {
-  if (t == null) return {};
-  var n = D(t, r), e, o;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(t);
-    for (o = 0; o < a.length; o++)
-      e = a[o], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
-  }
-  return n;
-}
-function D(t, r) {
-  if (t == null) return {};
-  var n = {}, e = Object.keys(t), o, a;
-  for (a = 0; a < e.length; a++)
-    o = e[a], !(r.indexOf(o) >= 0) && (n[o] = t[o]);
-  return n;
-}
-var w = y(function(t, r) {
-  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = B(t, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", v({
-    ref: r,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: e,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ p.createElement("path", {
-    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-  }), /* @__PURE__ */ p.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3"
-  }));
-});
-w.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
-};
-w.displayName = "Eye";
-const F = y(({
-  className: t,
-  error: r,
-  helperText: n,
-  helperTextClassName: e,
-  isRequired: o = !1,
-  isSearch: a = !1,
-  label: c,
-  labelAction: O,
-  labelClassName: j,
-  labelWrapperClassName: k,
-  name: N,
-  theme: P,
-  type: f = "text",
-  ...E
-}, z) => {
-  const b = W(), I = $(f === "password"), [h, _] = T(() => f !== "password"), m = typeof r == "string" && r.length >= 0, L = h ? w : x;
-  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": P, children: [
-    c ? /* @__PURE__ */ u("div", { className: i("flex items-center justify-between", k), children: [
-      /* @__PURE__ */ u(d, { component: "label", variant: "labelLarge", htmlFor: b, className: i("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", j), children: [
-        c,
-        " ",
-        o && /* @__PURE__ */ s(d, { component: "span", className: i("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"), children: "*" })
-      ] }),
-      O
-    ] }) : null,
-    /* @__PURE__ */ u("div", { className: "relative", children: [
-      a ? /* @__PURE__ */ s("i", { className: i("absolute", "left-2.5", "top-1/2", "-translate-y-[50%]", "text-slate-400", "dark:text-metal-400", {
-        "text-red-700": m
-      }), children: /* @__PURE__ */ s(C, { className: "w-5 h-5" }) }) : null,
-      /* @__PURE__ */ s("input", { id: c ? b : void 0, ref: z, name: N, type: h ? I.current ? "text" : f : "password", "data-error": m, className: i(S({
-        className: t,
-        variant: m ? "error" : "default"
-      }), {
-        "pr-10": f === "password" || m,
-        "pl-8": a
-      }), ...E }),
-      m ? /* @__PURE__ */ s("i", { className: i("-translate-y-[50%]", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"), children: /* @__PURE__ */ s(M, { className: "w-5 h-5" }) }) : null,
-      f === "password" && !r ? /* @__PURE__ */ s("i", { className: i("-translate-y-[50%]", "absolute", "right-3", "text-slate-400", "top-1/2"), children: /* @__PURE__ */ s(L, { className: "w-5 h-5 cursor-pointer", onClick: () => _(!h) }) }) : null
-    ] }),
-    r ? /* @__PURE__ */ s(d, { component: "span", className: i("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"), children: r }) : null,
-    !r && n ? /* @__PURE__ */ s(d, { component: "span", variant: "body1", className: i("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", e), children: n }) : null
-  ] });
-});
-F.displayName = "KonstructInput";
+import { t as o } from "../../Input-GBMxM3Z7.js";
 export {
-  F as Input
+  o as Input
 };

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

@@ -1,14 +1,49 @@
-import { c as e } from "../../index-D29mdTf5.js";
-const r = e(["bg-white", "border", "border-gray-300", "caret-text-slate-800", "disabled:cursor-not-allowed", "disabled:text-slate-500", "flex", "focus-visible:border-transparent", "focus-visible:outline-none", "focus-visible:ring-1", "h-10", "px-2.5", "py-2", "rounded", "text-slate-800", "text-sm", "transition-all", "w-full", "disabled:bg-gray-50", "placeholder:text-slate-400", "data-[error=false]:dark:focus:ring-aurora-500", "data-[error=false]:focus:ring-aurora-500", "dark:bg-metal-800", "dark:border-metal-700", "dark:caret-text-metal-50", "dark:disabled:bg-metal-900", "dark:disabled:placeholder:text-metal-400", "dark:disabled:text-metal-400", "dark:disabled:text-slate-400", "dark:placeholder:text-metal-300", "dark:text-slate-50", "dark:text-white"], {
-  variants: {
-    variant: {
-      default: "",
-      error: ["pr-8", "border-red-600", "focus-visible:border-red-600", "focus-visible:ring-transparent", "dark:border-red-500"]
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
+import { t as e } from "../../dist-DtEbXv47.js";
+var r = e([
+  "bg-white",
+  "border",
+  "border-gray-300",
+  "caret-text-slate-800",
+  "disabled:cursor-not-allowed",
+  "disabled:text-slate-500",
+  "flex",
+  "focus-visible:border-transparent",
+  "focus-visible:outline-none",
+  "focus-visible:ring-1",
+  "h-10",
+  "px-2.5",
+  "py-2",
+  "rounded",
+  "text-slate-800",
+  "text-sm",
+  "transition-all",
+  "w-full",
+  "disabled:bg-gray-50",
+  "placeholder:text-slate-400",
+  "data-[error=false]:dark:focus:ring-aurora-500",
+  "data-[error=false]:focus:ring-aurora-500",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:caret-text-metal-50",
+  "dark:disabled:bg-metal-900",
+  "dark:disabled:placeholder:text-metal-400",
+  "dark:disabled:text-metal-400",
+  "dark:disabled:text-slate-400",
+  "dark:placeholder:text-metal-300",
+  "dark:text-slate-50",
+  "dark:text-white"
+], {
+  variants: { variant: {
+    default: "",
+    error: [
+      "pr-8",
+      "border-red-600",
+      "focus-visible:border-red-600",
+      "focus-visible:ring-transparent",
+      "dark:border-red-500"
+    ]
+  } },
+  defaultVariants: { variant: "default" }
 });
 export {
   r as inputVariants

package/dist/components/LineChart/LineChart.js

@@ -1,33 +1,28 @@
-import { jsxs as P, jsx as p } from "react/jsx-runtime";
-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 } from "../../index-qDQP8rW4.js";
+import { i as l, t as _ } from "../../utils-DHuiYnx1.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-DRmqW28Z2.js";
 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 = ({
-  title: n,
-  titleProps: C,
-  labels: b,
-  datasets: t,
-  yAxisFormatter: i,
-  showLegend: u,
-  height: k = 300,
-  smooth: m = !0,
-  axisColor: c = "#9F9FA9",
-  gridColor: e = "#45556C",
-  showGrid: g = !0,
-  lineWidth: f = 2,
-  showAxisBorder: s = !1,
-  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) => ({
+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 ?? r(a[l % a.length]),
-      backgroundColor: o.color ?? r(a[l % a.length]),
+      borderColor: o.color ?? l(a[r % a.length]),
+      backgroundColor: o.color ?? l(a[r % a.length]),
       borderDash: o.borderDash,
       borderWidth: f,
       pointRadius: 0,
@@ -35,12 +30,17 @@ const a = ["--color-aurora-500", "--color-rose-500", "--color-violet-500", "--co
       tension: m ? 0.3 : 0,
       fill: !1
     }))
-  }), [b, t, m, f]), R = h(() => ({
+  }), [
+    u,
+    i,
+    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");
+    onHover: (o, r) => {
+      const y = o.native?.target;
+      y && (y.style.cursor = r.length > 0 ? "pointer" : "default");
     },
     interaction: {
       mode: "index",
@@ -48,7 +48,7 @@ const a = ["--color-aurora-500", "--color-rose-500", "--color-violet-500", "--co
     },
     plugins: {
       legend: {
-        display: y,
+        display: v,
         position: "top",
         align: "end",
         labels: {
@@ -65,25 +65,19 @@ const a = ["--color-aurora-500", "--color-rose-500", "--color-violet-500", "--co
       },
       tooltip: {
         enabled: !0,
-        backgroundColor: r("--color-metal-700"),
+        backgroundColor: l("--color-metal-700"),
         titleColor: d,
         bodyColor: d,
         boxPadding: 6,
-        callbacks: {
-          labelTextColor: () => d
-        }
+        callbacks: { labelTextColor: () => d }
       }
     },
     scales: {
       x: {
-        grid: {
-          color: "transparent"
-        },
+        grid: { color: "transparent" },
         ticks: {
           color: c,
-          font: {
-            size: 12
-          }
+          font: { size: 12 }
         },
         border: {
           display: s,
@@ -91,15 +85,11 @@ const a = ["--color-aurora-500", "--color-rose-500", "--color-violet-500", "--co
         }
       },
       y: {
-        grid: {
-          color: g ? e : "transparent"
-        },
+        grid: { color: g ? e : "transparent" },
         ticks: {
           color: c,
-          font: {
-            size: 12
-          },
-          callback: i ? (o) => i(o) : void 0
+          font: { size: 12 },
+          callback: t ? (o) => t(o) : void 0
         },
         border: {
           display: s,
@@ -107,13 +97,30 @@ const a = ["--color-aurora-500", "--color-rose-500", "--color-violet-500", "--co
         }
       }
     }
-  }), [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 }) })
-  ] });
+  }), [
+    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
+      })
+    })]
+  });
 };
 export {
   J as LineChart