@konstructio/ui 0.1.2-alpha.70 → 0.1.2-alpha.72

package/dist/components/LineChart/LineChart.js

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

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

@@ -0,0 +1,54 @@
+import { TypographyProps } from '../Typography/Typography.types';
+export interface LineChartDataset {
+    /** Dataset label (used in legend) */
+    label: string;
+    /** Array of numeric values */
+    data: number[];
+    /** Line/point color (defaults to palette color) */
+    color?: string;
+    /** Dashed line pattern (e.g. [5, 5]) */
+    borderDash?: number[];
+}
+/**
+ * Props for the LineChart component.
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   title="Disk Usage %"
+ *   labels={['11:20', '11:25', '11:30']}
+ *   datasets={[{ label: 'Usage', data: [6, 3, 8, 5] }]}
+ *   yAxisFormatter={(v) => `${v}%`}
+ * />
+ * ```
+ */
+export interface LineChartProps {
+    /** Chart title text */
+    title?: string;
+    /** Props passed to the Typography component used for the title */
+    titleProps?: Partial<Omit<TypographyProps, 'children' | 'ref'>>;
+    /** X-axis labels (e.g. time values) */
+    labels: string[];
+    /** One or more datasets (lines) */
+    datasets: LineChartDataset[];
+    /** Y-axis tick formatter (e.g. value => `${value}%`) */
+    yAxisFormatter?: (value: number) => string;
+    /** Show legend (auto-shown when datasets > 1) */
+    showLegend?: boolean;
+    /** Chart height in px (default: 300) */
+    height?: number;
+    /** Smooth lines (default: true). Set to false for straight/rigid lines */
+    smooth?: boolean;
+    /** Color for axis tick labels (default: '#9F9FA9') */
+    axisColor?: string;
+    /** Color for grid lines (default: '#45556C') */
+    gridColor?: string;
+    /** Show horizontal grid lines (default: true) */
+    showGrid?: boolean;
+    /** Line thickness in px (default: 2) */
+    lineWidth?: number;
+    /** Show axis border lines (default: false) */
+    showAxisBorder?: boolean;
+    /** Additional className for wrapper */
+    className?: string;
+}

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal-BGcucTHv.js";
+import { M as d } from "../../Modal-CXRo8f-h.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

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

@@ -2,10 +2,10 @@ import "react/jsx-runtime";
 import "../../../../index-BKjcReYh.js";
 import "react";
 import "../../../../Combination-BtmnusWq.js";
-import { W as s } from "../../../../Modal-BGcucTHv.js";
+import { W as s } from "../../../../Modal-CXRo8f-h.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../proxy-CngVm5qA.js";
+import "../../../../proxy-0sbyKj-k.js";
 import "../../../../x-Eoa9FJjA.js";
 export {
   s as Wrapper

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-BGcucTHv.js";
+import { W as a } from "../../../Modal-CXRo8f-h.js";
 export {
   e as Body,
   t as Footer,

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

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { P as f, R as u, T as b, C as m } from "../../../../index-DPcwqB8q.js";
+import { P as f, R as u, T as b, C as m } from "../../../../index-B7-5g1Sm.js";
 import { d as h } from "../../../../debounce-DJveWHr_.js";
 import { useRef as p, useState as w, useCallback as g, useEffect as i } from "react";
 const C = ({ text: r, prefix: n }) => {