@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/charts/composed-chart/composed-chart.mjs

@@ -0,0 +1,153 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+import { ComposedChart as g, CartesianGrid as A, XAxis as D, YAxis as L, Tooltip as w, Legend as v, Line as S, Area as b, Bar as I } from "recharts";
+import { useChartTheme as T } from "../hooks/use-chart-theme.mjs";
+import { ChartContainer as z } from "../components/chart-container.mjs";
+import { ChartTooltip as M } from "../components/chart-tooltip.mjs";
+import { ChartEmptyState as W } from "../components/chart-empty-state.mjs";
+function X({
+  data: s,
+  series: i,
+  height: c = 300,
+  className: p,
+  xAxisKey: f = "name",
+  barRadius: d = 4,
+  showGrid: y = !0,
+  showTooltip: h = !0,
+  showLegend: u = !0,
+  animate: k = !0,
+  emptyMessage: C
+}) {
+  const a = T(), K = m(
+    () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    []
+  ), x = m(
+    () => i.filter((t) => t.type === "area").map((t, o) => {
+      const r = t.color || a.colors[o % a.colors.length];
+      return { id: `composed-gradient-${t.dataKey}`, color: r };
+    }),
+    [i, a.colors]
+  );
+  return s.length ? /* @__PURE__ */ e(
+    z,
+    {
+      height: c,
+      className: p,
+      ariaLabel: "Composed chart",
+      children: /* @__PURE__ */ l(
+        g,
+        {
+          data: s,
+          margin: { top: 8, right: 8, left: -8, bottom: 0 },
+          accessibilityLayer: !1,
+          tabIndex: -1,
+          style: { outline: "none" },
+          children: [
+            /* @__PURE__ */ e("defs", { children: x.map(({ id: t, color: o }) => /* @__PURE__ */ l("linearGradient", { id: t, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ e("stop", { offset: "5%", stopColor: o, stopOpacity: 0.4 }),
+              /* @__PURE__ */ e("stop", { offset: "95%", stopColor: o, stopOpacity: 0.02 })
+            ] }, t)) }),
+            y && /* @__PURE__ */ e(
+              A,
+              {
+                strokeDasharray: "3 3",
+                vertical: !1,
+                stroke: a.grid
+              }
+            ),
+            /* @__PURE__ */ e(
+              D,
+              {
+                dataKey: f,
+                axisLine: !1,
+                tickLine: !1,
+                tick: { fill: a.text, fontSize: 12 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              L,
+              {
+                axisLine: !1,
+                tickLine: !1,
+                tick: { fill: a.text, fontSize: 12 },
+                width: 45
+              }
+            ),
+            h && /* @__PURE__ */ e(
+              w,
+              {
+                content: /* @__PURE__ */ e(M, {}),
+                cursor: { fill: a.cursorFill }
+              }
+            ),
+            u && /* @__PURE__ */ e(
+              v,
+              {
+                verticalAlign: "bottom",
+                iconType: "circle",
+                iconSize: 8,
+                wrapperStyle: { paddingTop: 16, fontSize: 12, color: a.text }
+              }
+            ),
+            i.map((t, o) => {
+              const r = t.color || a.colors[o % a.colors.length], n = k && !K;
+              switch (t.type) {
+                case "bar":
+                  return /* @__PURE__ */ e(
+                    I,
+                    {
+                      dataKey: t.dataKey,
+                      name: t.name || t.dataKey,
+                      fill: r,
+                      radius: [d, d, 0, 0],
+                      stackId: t.stackId,
+                      isAnimationActive: n,
+                      animationDuration: 800
+                    },
+                    t.dataKey
+                  );
+                case "area":
+                  return /* @__PURE__ */ e(
+                    b,
+                    {
+                      type: "monotone",
+                      dataKey: t.dataKey,
+                      name: t.name || t.dataKey,
+                      stroke: r,
+                      strokeWidth: 2,
+                      fill: `url(#composed-gradient-${t.dataKey})`,
+                      dot: !1,
+                      stackId: t.stackId,
+                      isAnimationActive: n,
+                      animationDuration: 800
+                    },
+                    t.dataKey
+                  );
+                default:
+                  return /* @__PURE__ */ e(
+                    S,
+                    {
+                      type: "monotone",
+                      dataKey: t.dataKey,
+                      name: t.name || t.dataKey,
+                      stroke: r,
+                      strokeWidth: 2,
+                      strokeDasharray: t.strokeDasharray,
+                      dot: !1,
+                      activeDot: { r: 5, strokeWidth: 0 },
+                      isAnimationActive: n,
+                      animationDuration: 800
+                    },
+                    t.dataKey
+                  );
+              }
+            })
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(W, { message: C, height: c });
+}
+export {
+  X as ComposedChart
+};

package/components/charts/hooks/use-chart-theme.mjs

@@ -0,0 +1,99 @@
+import { useTheme as a } from "../../../themes/hooks/use-theme.mjs";
+const e = [
+  "#105eff",
+  // Blue
+  "#129961",
+  // Green
+  "#e1591b",
+  // Orange
+  "#9d6bf2",
+  // Purple
+  "#0093cb",
+  // Teal
+  "#cb51bb",
+  // Pink
+  "#596ff2",
+  // Indigo
+  "#56b340"
+  // Chartreuse
+], b = [
+  "#578bfa",
+  // Dark Blue
+  "#159962",
+  // Dark Green
+  "#e66020",
+  // Dark Orange
+  "#bc7bfb",
+  // Dark Purple
+  "#0095cd",
+  // Dark Teal
+  "#d058c1",
+  // Dark Pink
+  "#5c71ee",
+  // Dark Indigo
+  "#7bc869"
+  // Dark Chartreuse
+], c = [
+  "#007aff",
+  // System Blue
+  "#34c759",
+  // System Green
+  "#ff9500",
+  // System Orange
+  "#af52de",
+  // System Purple
+  "#5ac8fa",
+  // System Teal
+  "#ff2d55",
+  // System Pink
+  "#5856d6",
+  // System Indigo
+  "#ffcc00"
+  // System Yellow
+], t = [
+  "#0a84ff",
+  // System Blue (dark)
+  "#30d158",
+  // System Green (dark)
+  "#ff9f0a",
+  // System Orange (dark)
+  "#bf5af2",
+  // System Purple (dark)
+  "#64d2ff",
+  // System Teal (dark)
+  "#ff375f",
+  // System Pink (dark)
+  "#5e5ce6",
+  // System Indigo (dark)
+  "#ffd60a"
+  // System Yellow (dark)
+];
+function s() {
+  const { mode: r, colorScheme: o } = a(), f = r === "dark";
+  return o === "macos" ? {
+    mode: r,
+    colors: f ? t : c,
+    grid: f ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
+    text: f ? "rgba(255,255,255,0.55)" : "rgba(0,0,0,0.5)",
+    background: f ? "#1e1e1e" : "#ffffff",
+    border: f ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)",
+    tooltipBg: f ? "rgba(40,40,40,0.95)" : "rgba(255,255,255,0.95)",
+    tooltipText: f ? "#f5f5f7" : "#1d1d1f",
+    tooltipBorder: f ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)",
+    cursorFill: f ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)"
+  } : {
+    mode: r,
+    colors: f ? b : e,
+    grid: f ? "#172131" : "#e5e7eb",
+    text: f ? "#828a99" : "#4a5565",
+    background: f ? "#030712" : "#ffffff",
+    border: f ? "#172131" : "#f3f4f6",
+    tooltipBg: f ? "#0a101d" : "#ffffff",
+    tooltipText: f ? "#f9fafb" : "#030712",
+    tooltipBorder: f ? "#172131" : "#f3f4f6",
+    cursorFill: f ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)"
+  };
+}
+export {
+  s as useChartTheme
+};

package/components/charts/line-chart/line-chart.mjs

@@ -0,0 +1,111 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { LineChart as C, CartesianGrid as S, XAxis as v, YAxis as b, Tooltip as w, Legend as A, Line as K } from "recharts";
+import { useChartTheme as T } from "../hooks/use-chart-theme.mjs";
+import { ChartContainer as z } from "../components/chart-container.mjs";
+import { ChartTooltip as D } from "../components/chart-tooltip.mjs";
+import { ChartEmptyState as M } from "../components/chart-empty-state.mjs";
+function X({
+  data: i,
+  series: l,
+  height: a = 300,
+  className: s,
+  xAxisKey: c = "name",
+  curved: m = !0,
+  showDots: o,
+  strokeWidth: d = 2,
+  showGrid: f = !0,
+  showTooltip: p = !0,
+  showLegend: h = !0,
+  animate: u = !0,
+  emptyMessage: y
+}) {
+  const t = T(), L = n(
+    () => o !== void 0 ? o : i.length <= 10,
+    [o, i.length]
+  ), k = n(
+    () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    []
+  );
+  return i.length ? /* @__PURE__ */ e(
+    z,
+    {
+      height: a,
+      className: s,
+      ariaLabel: "Line chart",
+      children: /* @__PURE__ */ g(
+        C,
+        {
+          data: i,
+          margin: { top: 8, right: 8, left: -8, bottom: 0 },
+          accessibilityLayer: !1,
+          tabIndex: -1,
+          style: { outline: "none" },
+          children: [
+            f && /* @__PURE__ */ e(
+              S,
+              {
+                strokeDasharray: "3 3",
+                vertical: !1,
+                stroke: t.grid
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                dataKey: c,
+                axisLine: !1,
+                tickLine: !1,
+                tick: { fill: t.text, fontSize: 12 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              b,
+              {
+                axisLine: !1,
+                tickLine: !1,
+                tick: { fill: t.text, fontSize: 12 },
+                width: 45
+              }
+            ),
+            p && /* @__PURE__ */ e(
+              w,
+              {
+                content: /* @__PURE__ */ e(D, {}),
+                cursor: { stroke: t.cursorFill }
+              }
+            ),
+            h && /* @__PURE__ */ e(
+              A,
+              {
+                verticalAlign: "bottom",
+                iconType: "circle",
+                iconSize: 8,
+                wrapperStyle: { paddingTop: 16, fontSize: 12, color: t.text }
+              }
+            ),
+            l.map((r, x) => /* @__PURE__ */ e(
+              K,
+              {
+                type: m ? "monotone" : "linear",
+                dataKey: r.dataKey,
+                name: r.name || r.dataKey,
+                stroke: r.color || t.colors[x % t.colors.length],
+                strokeWidth: d,
+                strokeDasharray: r.strokeDasharray,
+                dot: L,
+                activeDot: { r: 5, strokeWidth: 0 },
+                isAnimationActive: u && !k,
+                animationDuration: 800
+              },
+              r.dataKey
+            ))
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(M, { message: y, height: a });
+}
+export {
+  X as LineChart
+};

package/components/charts/pie-chart/pie-chart.mjs

@@ -0,0 +1,84 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useMemo as s } from "react";
+import { PieChart as b, Pie as T, Cell as A, Tooltip as P, Legend as v } from "recharts";
+import { useChartTheme as w } from "../hooks/use-chart-theme.mjs";
+import { ChartContainer as S } from "../components/chart-container.mjs";
+import { ChartTooltip as L } from "../components/chart-tooltip.mjs";
+import { ChartEmptyState as M } from "../components/chart-empty-state.mjs";
+function D({
+  data: t,
+  height: l = 300,
+  className: d,
+  donut: r = !1,
+  showLabels: a = !0,
+  showTooltip: p = !0,
+  showLegend: f = !0,
+  animate: u = !0,
+  innerContent: c,
+  emptyMessage: h
+}) {
+  const i = w(), x = s(
+    () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    []
+  ), y = s(
+    () => t.map((n, o) => n.color || i.colors[o % i.colors.length]),
+    [t, i.colors]
+  );
+  if (!t.length)
+    return /* @__PURE__ */ e(M, { message: h, height: l });
+  const m = l * 0.35, C = r ? m * 0.6 : 0;
+  return /* @__PURE__ */ e(S, { height: l, className: d, ariaLabel: "Pie chart", children: /* @__PURE__ */ g(
+    b,
+    {
+      accessibilityLayer: !1,
+      tabIndex: -1,
+      style: { outline: "none" },
+      children: [
+        /* @__PURE__ */ e(
+          T,
+          {
+            data: t,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: C,
+            outerRadius: m,
+            paddingAngle: r ? 3 : 1,
+            dataKey: "value",
+            nameKey: "name",
+            strokeWidth: 0,
+            label: a && !r ? ({ name: n, percent: o }) => `${n} ${((o ?? 0) * 100).toFixed(0)}%` : void 0,
+            labelLine: a && !r,
+            isAnimationActive: u && !x,
+            animationDuration: 800,
+            children: t.map((n, o) => /* @__PURE__ */ e(A, { fill: y[o] }, o))
+          }
+        ),
+        p && /* @__PURE__ */ e(P, { content: /* @__PURE__ */ e(L, {}), cursor: !1 }),
+        f && /* @__PURE__ */ e(
+          v,
+          {
+            verticalAlign: "bottom",
+            iconType: "circle",
+            iconSize: 8,
+            wrapperStyle: { paddingTop: 16, fontSize: 12, color: i.text }
+          }
+        ),
+        r && c && /* @__PURE__ */ e(
+          "text",
+          {
+            x: "50%",
+            y: "50%",
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            className: "text-lg font-bold",
+            fill: i.tooltipText,
+            children: c
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  D as PieChart
+};

package/components/charts/radar-chart/radar-chart.mjs

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useMemo as y } from "react";
+import { RadarChart as x, PolarGrid as C, PolarAngleAxis as R, PolarRadiusAxis as g, Radar as A, Tooltip as S, Legend as b } from "recharts";
+import { useChartTheme as k } from "../hooks/use-chart-theme.mjs";
+import { ChartContainer as w } from "../components/chart-container.mjs";
+import { ChartTooltip as K } from "../components/chart-tooltip.mjs";
+import { ChartEmptyState as T } from "../components/chart-empty-state.mjs";
+function E({
+  data: o,
+  series: n,
+  height: a = 300,
+  className: c,
+  showTooltip: l = !0,
+  showLegend: d = !0,
+  fillOpacity: s = 0.3,
+  animate: m = !0,
+  emptyMessage: f
+}) {
+  const t = k(), p = y(
+    () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+    []
+  );
+  return o.length ? /* @__PURE__ */ e(
+    w,
+    {
+      height: a,
+      className: c,
+      ariaLabel: "Radar chart",
+      children: /* @__PURE__ */ h(
+        x,
+        {
+          cx: "50%",
+          cy: "50%",
+          outerRadius: "70%",
+          data: o,
+          accessibilityLayer: !1,
+          tabIndex: -1,
+          style: { outline: "none" },
+          children: [
+            /* @__PURE__ */ e(C, { stroke: t.grid }),
+            /* @__PURE__ */ e(
+              R,
+              {
+                dataKey: "subject",
+                tick: { fill: t.text, fontSize: 11 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              g,
+              {
+                tick: { fill: t.text, fontSize: 10 },
+                axisLine: !1
+              }
+            ),
+            n.map((r, u) => {
+              const i = r.color || t.colors[u % t.colors.length];
+              return /* @__PURE__ */ e(
+                A,
+                {
+                  name: r.name || r.dataKey,
+                  dataKey: r.dataKey,
+                  stroke: i,
+                  fill: i,
+                  fillOpacity: s,
+                  strokeWidth: 2,
+                  isAnimationActive: m && !p,
+                  animationDuration: 800
+                },
+                r.dataKey
+              );
+            }),
+            l && /* @__PURE__ */ e(S, { content: /* @__PURE__ */ e(K, {}), cursor: !1 }),
+            d && /* @__PURE__ */ e(
+              b,
+              {
+                verticalAlign: "bottom",
+                iconType: "circle",
+                iconSize: 8,
+                wrapperStyle: { paddingTop: 16, fontSize: 12, color: t.text }
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(T, { message: f, height: a });
+}
+export {
+  E as RadarChart
+};

package/components/common/avatar.mjs

@@ -0,0 +1,81 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import n from "classnames";
+import { Image as l } from "../utils/image.mjs";
+const t = {
+  xl: [
+    "h-24 w-24 sm:h-28 sm:w-28 md:h-32 md:w-32 min-[1780px]:h-40 min-[1780px]:w-40 shadow-large"
+  ],
+  lg: ["h-20 w-20 lg:h-24 lg:w-24"],
+  md: ["h-10 w-10 drop-shadow-main"],
+  sm: ["h-8 w-8 shadow-card"],
+  xs: ["h-6 w-6"]
+}, m = {
+  xl: ["border-brand border-[5px] min-[1780px]:border-8"],
+  lg: ["border-brand border-4"],
+  md: ["border-brand border-3"],
+  sm: ["border-brand border-2"],
+  xs: ["border-brand border-1"]
+}, c = {
+  rounded: ["h-16 w-16 rounded-lg bg-white/20 backdrop-blur-2xl"],
+  circle: ["rounded-full"]
+};
+function p({
+  image: d,
+  alt: o,
+  className: h,
+  size: r = "md",
+  shape: e = "circle",
+  border: a = !0
+}) {
+  return /* @__PURE__ */ i(
+    "figure",
+    {
+      className: n(
+        "relative shrink-0 overflow-hidden",
+        h,
+        c[e],
+        t[r],
+        a && m[r]
+      ),
+      children: [
+        e === "circle" && (r === "xs" || r === "sm" ? /* @__PURE__ */ s(
+          l,
+          {
+            src: d,
+            alt: o,
+            width: "100%",
+            height: "100%",
+            priority: "auto",
+            className: "rounded-full"
+          }
+        ) : /* @__PURE__ */ s(
+          l,
+          {
+            src: d,
+            alt: o,
+            width: "100%",
+            height: "100%",
+            priority: "auto",
+            placeholder: "blur",
+            className: "rounded-full"
+          }
+        )),
+        e === "rounded" && /* @__PURE__ */ s(
+          l,
+          {
+            src: d,
+            alt: o,
+            className: "",
+            width: "100%",
+            height: "100%",
+            priority: "auto"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  p as Avatar,
+  p as default
+};