@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/carousel/carousel-component.mjs

@@ -0,0 +1,186 @@
+import { jsxs as H, jsx as a } from "react/jsx-runtime";
+import { forwardRef as I, useRef as M, useImperativeHandle as P, useMemo as $ } from "react";
+import { Swiper as L, SwiperSlide as O } from "swiper/react";
+import { Scrollbar as T, A11y as q, EffectCards as D, EffectCube as G, EffectFlip as J, EffectFade as K, EffectCoverflow as Q, EffectCreative as U, Mousewheel as V, Navigation as W, Pagination as X, Autoplay as Y } from "swiper/modules";
+import { ChevronLeft as Z, ChevronRight as _ } from "lucide-react";
+import l from "classnames";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/scrollbar";
+import "swiper/css/effect-fade";
+import "swiper/css/effect-coverflow";
+/* empty css                     */
+import { Button as d } from "../buttons/button/index.mjs";
+const ee = I(
+  ({
+    children: m,
+    slidesPerView: h = 1,
+    spaceBetween: v = 0,
+    direction: i = "horizontal",
+    effect: e = "slide",
+    showNavigation: o = !1,
+    showPagination: n = !1,
+    mousewheel: p = !0,
+    paginationType: f = "bullets",
+    autoplay: u = !1,
+    breakpoints: b,
+    loop: x = !1,
+    centeredSlides: w = !1,
+    grabCursor: y = !0,
+    freeMode: g = !1,
+    className: C,
+    slideClassName: E,
+    onSlideChange: N,
+    onSwiper: S,
+    "aria-label": z,
+    ...k
+  }, j) => {
+    const s = M(null), B = (t) => {
+      s.current = t, S?.(t);
+    };
+    P(j, () => ({
+      swiper: s.current,
+      slideNext: () => s.current?.slideNext(),
+      slidePrev: () => s.current?.slidePrev(),
+      slideTo: (t) => s.current?.slideTo(t)
+    }));
+    const r = [T, q];
+    e === "cards" && r.push(D), e === "cube" && r.push(G), e === "flip" && r.push(J), e === "fade" && r.push(K), e === "coverflow" && r.push(Q), e === "creative" && r.push(U), p && r.push(V), o && r.push(W), n && r.push(X), u && r.push(Y);
+    const R = u === !0 ? { delay: 3e3 } : u, A = $(() => {
+      if (!n) return !1;
+      switch (f) {
+        case "bullets":
+          return {
+            type: "bullets",
+            clickable: !0,
+            dynamicBullets: !0
+          };
+        case "fraction":
+          return {
+            type: "fraction",
+            clickable: !0
+          };
+        case "progressbar":
+          return {
+            type: "progressbar",
+            clickable: !0
+          };
+        case "custom":
+          return {
+            clickable: !0,
+            renderBullet: function(t, c) {
+              return `<span style="width: 20px; height: 20px; background-color: transparent; font-size: 12px; font-weight: 500; border: 1px solid var(--color-neutral-200);" class="${c}">${t + 1}</span>`;
+            }
+          };
+        default:
+          return !1;
+      }
+    }, [n, f]), F = o ? {
+      nextEl: ".swiper-button-next-custom",
+      prevEl: ".swiper-button-prev-custom"
+    } : !1;
+    return /* @__PURE__ */ H(
+      "div",
+      {
+        className: l(
+          "relative flex items-center justify-center z-0",
+          i === "vertical" && " h-full",
+          i === "horizontal" && "h-auto",
+          C
+        ),
+        "aria-label": z,
+        role: "group",
+        "aria-roledescription": "carousel",
+        children: [
+          o && /* @__PURE__ */ a(
+            d,
+            {
+              variant: "transparent",
+              size: "mini",
+              shape: "circle",
+              className: l("swiper-button-prev-custom mr-1"),
+              "aria-label": "Previous slide",
+              children: /* @__PURE__ */ a(Z, { className: "w-6 h-6" })
+            }
+          ),
+          /* @__PURE__ */ a(
+            L,
+            {
+              modules: r,
+              spaceBetween: v,
+              slidesPerView: h,
+              direction: i,
+              cubeEffect: e === "cube" ? {
+                slideShadows: !0,
+                shadow: !0,
+                shadowOffset: 20,
+                shadowScale: 0.94
+              } : void 0,
+              flipEffect: e === "flip" ? {
+                slideShadows: !0
+              } : void 0,
+              creativeEffect: e === "creative" ? {
+                prev: {
+                  shadow: !0,
+                  translate: [0, 0, -400]
+                },
+                next: {
+                  translate: ["100%", 0, 0]
+                }
+              } : void 0,
+              effect: e,
+              loop: x,
+              centeredSlides: w,
+              grabCursor: y,
+              freeMode: g,
+              mousewheel: p,
+              autoplay: R,
+              pagination: A,
+              navigation: F,
+              breakpoints: b,
+              onSlideChange: N,
+              onSwiper: B,
+              style: e === "cube" ? { maxHeight: "400px", height: "-webkit-fill-available" } : void 0,
+              className: l(
+                "flex items-center justify-center",
+                i === "vertical" && "flex-col",
+                i === "horizontal" && "flex-row"
+              ),
+              ...k,
+              children: m.map((t, c) => /* @__PURE__ */ a(
+                O,
+                {
+                  className: l(
+                    "!flex !items-center !justify-center z-10",
+                    e === "fade" && "opacity-0 transition-opacity duration-300",
+                    e !== "fade" && "transition-opacity duration-300",
+                    E
+                  ),
+                  children: t
+                },
+                c
+              ))
+            }
+          ),
+          o && /* @__PURE__ */ a(
+            d,
+            {
+              variant: "transparent",
+              size: "mini",
+              shape: "circle",
+              className: l("swiper-button-next-custom ml-1"),
+              "aria-label": "Next slide",
+              children: /* @__PURE__ */ a(_, { className: "w-6 h-6" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ee.displayName = "Carousel";
+export {
+  ee as Carousel,
+  ee as default
+};

package/components/carousel/carousel-image.mjs

@@ -0,0 +1,48 @@
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import o from "classnames";
+import { Carousel as p } from "./carousel-component.mjs";
+const v = ({
+  images: a,
+  imageClassName: c,
+  showTitles: n = !1,
+  imageFit: e = "cover",
+  aspectRatio: d = "aspect-video",
+  lazy: i = !0,
+  className: f,
+  ...b
+}) => /* @__PURE__ */ l(p, { className: o("w-full", f), ...b, children: a.map((t, r) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: o(
+      "relative overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800",
+      d
+    ),
+    children: [
+      /* @__PURE__ */ l(
+        "img",
+        {
+          src: t.src,
+          alt: t.alt || `Slide ${r + 1}`,
+          className: o(
+            "w-full h-full object-cover transition-transform duration-300 hover:scale-105",
+            e === "contain" && "object-contain",
+            e === "fill" && "object-fill",
+            e === "none" && "object-none",
+            e === "scale-down" && "object-scale-down",
+            c
+          ),
+          loading: i ? "lazy" : "eager"
+        }
+      ),
+      n && (t.title || t.description) && /* @__PURE__ */ s("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white", children: [
+        t.title && /* @__PURE__ */ l("h3", { className: "text-lg font-semibold mb-1", children: t.title }),
+        t.description && /* @__PURE__ */ l("p", { className: "text-sm opacity-90", children: t.description })
+      ] })
+    ]
+  },
+  r
+)) });
+export {
+  v as CarouselImage,
+  v as default
+};

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as n } from "react/jsx-runtime";
+import { ResponsiveContainer as e } from "recharts";
+import a from "classnames";
+function c({
+  children: r,
+  height: i = 300,
+  className: o,
+  ariaLabel: t
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-tucu": "chart",
+      className: a(
+        "w-full outline-none ring-0 [&_*]:outline-none [&_*]:ring-0",
+        o
+      ),
+      role: "img",
+      "aria-label": t,
+      children: /* @__PURE__ */ n(e, { width: "100%", height: i, children: r })
+    }
+  );
+}
+export {
+  c as ChartContainer
+};

package/components/charts/components/chart-empty-state.mjs

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useChartTheme as a } from "../hooks/use-chart-theme.mjs";
+function s({
+  message: r = "No data available",
+  height: o = 300
+}) {
+  const e = a();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-tucu": "chart-empty",
+      className: "flex items-center justify-center rounded-lg border border-dashed",
+      style: {
+        height: o,
+        borderColor: e.border,
+        color: e.text
+      },
+      children: /* @__PURE__ */ t("p", { className: "text-sm", children: r })
+    }
+  );
+}
+export {
+  s as ChartEmptyState
+};

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

@@ -0,0 +1,48 @@
+import { jsxs as t, jsx as l } from "react/jsx-runtime";
+import { useChartTheme as i } from "../hooks/use-chart-theme.mjs";
+function d({
+  active: a,
+  payload: r,
+  label: s
+}) {
+  const o = i();
+  return !a || !r?.length ? null : /* @__PURE__ */ t(
+    "div",
+    {
+      "data-tucu": "chart-tooltip",
+      className: "rounded-lg px-3 py-2 shadow-lg border text-xs",
+      style: {
+        backgroundColor: o.tooltipBg,
+        borderColor: o.tooltipBorder,
+        color: o.tooltipText
+      },
+      children: [
+        s && /* @__PURE__ */ l(
+          "p",
+          {
+            className: "mb-1 font-medium text-[11px]",
+            style: { color: o.text },
+            children: s
+          }
+        ),
+        r.map((e, c) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: "inline-block h-2 w-2 rounded-full shrink-0",
+              style: { backgroundColor: e.color }
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "text-[11px]", style: { color: o.text }, children: [
+            e.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ l("span", { className: "font-semibold", style: { color: o.tooltipText }, children: typeof e.value == "number" ? e.value.toLocaleString() : e.value })
+        ] }, c))
+      ]
+    }
+  );
+}
+export {
+  d as ChartTooltip
+};