@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/cards/card.mjs

@@ -0,0 +1,44 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import o from "classnames";
+function h({
+  title: d,
+  description: s,
+  icon: t,
+  header: i,
+  footer: l,
+  actions: a,
+  children: n,
+  className: m,
+  onClick: c
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-tucu": "card",
+      className: o(
+        "rounded-xl border border-border bg-light-dark",
+        c && "cursor-pointer hover:border-brand/30 dark:hover:border-brand/30 transition-colors",
+        m
+      ),
+      onClick: c,
+      children: [
+        (i || d || a) && /* @__PURE__ */ e("div", { className: "flex items-start justify-between gap-3 p-4 pb-0", children: [
+          i || /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: [
+            t && /* @__PURE__ */ r("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-brand/10 text-brand", children: t }),
+            /* @__PURE__ */ e("div", { children: [
+              d && /* @__PURE__ */ r("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: d }),
+              s && /* @__PURE__ */ r("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: s })
+            ] })
+          ] }),
+          a && /* @__PURE__ */ r("div", { className: "shrink-0", children: a })
+        ] }),
+        n && /* @__PURE__ */ r("div", { className: "p-4", children: n }),
+        l && /* @__PURE__ */ r("div", { className: "border-t border-border px-4 py-3", children: l })
+      ]
+    }
+  );
+}
+export {
+  h as Card,
+  h as default
+};

package/components/cards/color-card.mjs

@@ -0,0 +1,49 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import i from "classnames";
+import { Typography as t } from "../typography/index.mjs";
+const m = {
+  blue: "bg-linear-to-br from-blue-500/10 to-cyan-500/10 text-blue-700 border-blue-200 dark:from-blue-400/20 dark:to-cyan-400/20 dark:text-blue-300 dark:border-blue-700",
+  indigo: "bg-linear-to-br from-indigo-500/10 to-blue-500/10 text-indigo-700 border-indigo-200 dark:from-indigo-400/20 dark:to-blue-400/20 dark:text-indigo-300 dark:border-indigo-700",
+  cyan: "bg-linear-to-br from-cyan-500/10 to-teal-500/10 text-cyan-700 border-cyan-200 dark:from-cyan-400/20 dark:to-teal-400/20 dark:text-cyan-300 dark:border-cyan-700",
+  purple: "bg-linear-to-br from-purple-500/10 to-pink-500/10 text-purple-700 border-purple-200 dark:from-purple-400/20 dark:to-pink-400/20 dark:text-purple-300 dark:border-purple-700",
+  emerald: "bg-linear-to-br from-emerald-500/10 to-green-500/10 text-emerald-700 border-emerald-200 dark:from-emerald-400/20 dark:to-green-400/20 dark:text-emerald-300 dark:border-emerald-700",
+  orange: "bg-linear-to-br from-orange-500/10 to-red-500/10 text-orange-700 border-orange-200 dark:from-orange-400/20 dark:to-red-400/20 dark:text-orange-300 dark:border-orange-700",
+  green: "bg-linear-to-br from-green-500/10 to-emerald-500/10 text-green-700 border-green-200 dark:from-green-400/20 dark:to-emerald-400/20 dark:text-green-300 dark:border-green-700",
+  red: "bg-linear-to-br from-red-500/10 to-rose-500/10 text-red-700 border-red-200 dark:from-red-400/20 dark:to-rose-400/20 dark:text-red-300 dark:border-red-700",
+  pink: "bg-linear-to-br from-pink-500/10 to-purple-500/10 text-pink-700 border-pink-200 dark:from-pink-400/20 dark:to-purple-400/20 dark:text-pink-300 dark:border-pink-700",
+  amber: "bg-linear-to-br from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-200 dark:from-amber-400/20 dark:to-orange-400/20 dark:text-amber-300 dark:border-amber-700",
+  teal: "bg-linear-to-br from-teal-500/10 to-cyan-500/10 text-teal-700 border-teal-200 dark:from-teal-400/20 dark:to-cyan-400/20 dark:text-teal-300 dark:border-teal-700",
+  violet: "bg-linear-to-br from-violet-500/10 to-indigo-500/10 text-violet-700 border-violet-200 dark:from-violet-400/20 dark:to-indigo-400/20 dark:text-violet-300 dark:border-violet-700",
+  rose: "bg-linear-to-br from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-200 dark:from-rose-400/20 dark:to-pink-400/20 dark:text-rose-300 dark:border-rose-700",
+  sky: "bg-linear-to-br from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-200 dark:from-sky-400/20 dark:to-blue-400/20 dark:text-sky-300 dark:border-sky-700"
+}, f = ({
+  icon: d,
+  title: n,
+  description: b,
+  color: r,
+  colorClassName: k,
+  className: l,
+  onClick: e
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: i(
+      "p-4 sm:p-6 border rounded-xl hover:shadow-lg hover:-translate-y-1 transition-all duration-300",
+      e && "cursor-pointer",
+      r ? m[r] : k,
+      l
+    ),
+    onClick: e,
+    children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-3 mb-3", children: [
+        d,
+        /* @__PURE__ */ a(t, { tag: "h5", children: n })
+      ] }),
+      /* @__PURE__ */ a(t, { tag: "caption", className: "opacity-80", children: b })
+    ]
+  }
+);
+export {
+  f as ColorCard,
+  f as default
+};

package/components/cards/feature-card.mjs

@@ -0,0 +1,137 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import t from "classnames";
+import { CardContainer as p } from "./card-container.mjs";
+import { Typography as i } from "../typography/index.mjs";
+import { Badge as s } from "../common/badge.mjs";
+const w = ({
+  icon: n,
+  title: o,
+  badge: a,
+  description: d,
+  iconBgClassName: c = "from-blue-500 to-cyan-500",
+  className: h,
+  onClick: l,
+  layout: u = "vertical",
+  tags: m
+}) => u === "showcase" ? /* @__PURE__ */ e(
+  p,
+  {
+    className: t(
+      "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      l && "cursor-pointer",
+      h
+    ),
+    onClick: l,
+    children: /* @__PURE__ */ r("div", { className: "w-full space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: t(
+              "p-3 rounded-xl bg-linear-to-br shadow-lg group-hover:scale-110 transition-all duration-300",
+              c
+            ),
+            children: /* @__PURE__ */ e("span", { className: "text-white", children: n })
+          }
+        ),
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e(i, { tag: "h4", children: o }),
+          a && /* @__PURE__ */ e(s, { variant: "outline", size: "small", children: a })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          tag: "caption",
+          className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+          children: d
+        }
+      ),
+      m && m.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((g) => /* @__PURE__ */ e(s, { variant: "soft", size: "small", children: g }, g)) })
+    ] })
+  }
+) : u === "horizontal" ? /* @__PURE__ */ e(
+  p,
+  {
+    className: t(
+      "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      l && "cursor-pointer",
+      h
+    ),
+    onClick: l,
+    children: /* @__PURE__ */ r("div", { className: "w-full space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: t(
+              "p-3 rounded-xl bg-linear-to-br shadow-lg group-hover:scale-110 transition-all duration-300 hover:shadow-xl",
+              c
+            ),
+            children: /* @__PURE__ */ e("span", { className: "text-white", children: n })
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(
+            i,
+            {
+              tag: "h5",
+              className: "group-hover:text-primary transition-colors duration-300",
+              children: o
+            }
+          ),
+          a && /* @__PURE__ */ e(s, { variant: "outline", size: "small", children: a })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          tag: "caption",
+          className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+          children: d
+        }
+      )
+    ] })
+  }
+) : /* @__PURE__ */ e(
+  p,
+  {
+    className: t(
+      "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      l && "cursor-pointer",
+      h
+    ),
+    onClick: l,
+    children: /* @__PURE__ */ r("div", { className: "w-full space-y-4 text-center", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: t(
+            "w-16 h-16 mx-auto rounded-xl flex items-center justify-center",
+            "bg-linear-to-br shadow-lg group-hover:scale-110 transition-transform duration-200",
+            c
+          ),
+          children: /* @__PURE__ */ e("span", { className: "text-white", children: n })
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ e(i, { tag: "h4", children: o }),
+          a && /* @__PURE__ */ e(s, { variant: "outline", size: "small", children: a })
+        ] }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            tag: "caption",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: d
+          }
+        )
+      ] })
+    ] })
+  }
+);
+export {
+  w as FeatureCard,
+  w as default
+};

package/components/cards/info-card.mjs

@@ -0,0 +1,133 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import l from "classnames";
+import { Tooltip as N } from "../common/tooltip.mjs";
+const v = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6"
+};
+function j({
+  title: t,
+  subtitle: i,
+  icon: c,
+  headerRight: x,
+  columns: s,
+  gridCols: b,
+  children: p,
+  footerTags: g,
+  footerLabel: o,
+  footer: m,
+  className: h
+}) {
+  const f = b ?? s?.length ?? 4;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(
+        "rounded-xl border border-border bg-light-dark overflow-hidden flex flex-col",
+        h
+      ),
+      children: [
+        (t || c || x) && /* @__PURE__ */ r("div", { className: "flex items-center gap-3 px-5 py-3.5 border-b border-border bg-brand/10", children: [
+          c && /* @__PURE__ */ a("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-brand/10 border border-brand/20", children: c }),
+          (t || i) && /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
+            t && /* @__PURE__ */ a("span", { className: "text-xs font-bold uppercase tracking-wide text-gray-800 dark:text-gray-200", children: t }),
+            i && /* @__PURE__ */ a("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 leading-tight", children: i })
+          ] }),
+          x && /* @__PURE__ */ a("div", { className: "ml-auto", children: x })
+        ] }),
+        s && s?.length > 0 && /* @__PURE__ */ a(
+          "div",
+          {
+            className: l(
+              "grid sm:grid-cols-2 divide-y sm:divide-y-0 sm:divide-x divide-border",
+              v[f]
+            ),
+            children: s?.map((e) => /* @__PURE__ */ r("div", { className: "p-4 flex flex-col gap-3", children: [
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: l(
+                      "h-4 w-0.5 rounded-full opacity-70",
+                      e.accent ?? "bg-brand"
+                    )
+                  }
+                ),
+                e.icon && /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: l("h-3 w-3", e.accentText ?? "text-brand"),
+                    children: e.icon
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: l(
+                      "text-[10px] font-bold uppercase tracking-wider",
+                      e.accentText ?? "text-brand"
+                    ),
+                    children: e.label
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a("div", { className: "space-y-2.5", children: e && e?.items && e.items.map((d, n) => /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "flex items-start justify-between gap-3",
+                  children: [
+                    /* @__PURE__ */ a("span", { className: "text-[11px] text-gray-500 dark:text-gray-400 shrink-0 leading-tight", children: d.label }),
+                    /* @__PURE__ */ a(
+                      "span",
+                      {
+                        className: l(
+                          "text-[11px] font-semibold text-right font-mono leading-tight",
+                          d.color ?? "text-gray-900 dark:text-gray-100"
+                        ),
+                        children: d.value
+                      }
+                    )
+                  ]
+                },
+                `${d.label}-${n}`
+              )) })
+            ] }, e.key))
+          }
+        ),
+        p && /* @__PURE__ */ a("div", { className: "px-5 py-4", children: p }),
+        /* @__PURE__ */ a("div", { className: "mt-auto", children: m || g && g?.length > 0 && /* @__PURE__ */ r("div", { className: "px-5 py-3 border-t border-border bg-gray-100 dark:bg-gray-800/20 flex flex-wrap gap-2 items-center", children: [
+          o && /* @__PURE__ */ a("span", { className: "text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 font-bold mr-1", children: o }),
+          g?.map((e, d) => {
+            const n = l(
+              "flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px]",
+              e.className ?? "bg-gray-100 dark:bg-gray-800 border border-border text-gray-600 dark:text-gray-400"
+            ), y = /* @__PURE__ */ r("span", { className: n, children: [
+              e.icon,
+              e.label
+            ] });
+            return e.tooltip ? /* @__PURE__ */ a(
+              N,
+              {
+                content: e.tooltip,
+                placement: "top",
+                children: y
+              },
+              `tag-${d}`
+            ) : /* @__PURE__ */ r("span", { className: n, children: [
+              e.icon,
+              e.label
+            ] }, `tag-${d}`);
+          })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  j as InfoCard,
+  j as default
+};

package/components/cards/panel-action-card.mjs

@@ -0,0 +1,50 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Scrollbar as s } from "../common/scrollbar.mjs";
+import { Button as t } from "../buttons/button/index.mjs";
+const b = ({
+  title: a,
+  children: d,
+  actions: l,
+  className: o
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: `w-full max-w-md border border-border rounded-lg shadow-md overflow-hidden ${o}`,
+    children: [
+      /* @__PURE__ */ e("div", { className: "p-4 bg-white dark:bg-gray-800", children: /* @__PURE__ */ e("h3", { className: "text-lg font-medium", children: a }) }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          className: "h-[250px]",
+          autoHide: "leave",
+          direction: "vertical",
+          scrollbarStyle: {
+            track: {
+              backgroundColor: "transparent"
+            },
+            thumb: {
+              borderRadius: "8px",
+              width: "6px"
+            }
+          },
+          children: /* @__PURE__ */ e("div", { className: "p-4", children: d })
+        }
+      ),
+      l && /* @__PURE__ */ e("div", { className: "flex gap-2 h-auto justify-end items-center flex-wrap p-4 bg-white dark:bg-gray-800 border-t border-border", children: l?.map((r) => /* @__PURE__ */ e(
+        t,
+        {
+          variant: r.variant || "solid",
+          size: r.size || "small",
+          color: r.color || "primary",
+          onClick: r.onClick,
+          children: r.label
+        },
+        r.label
+      )) })
+    ]
+  }
+);
+export {
+  b as PanelActionCard,
+  b as default
+};

package/components/cards/panel-card.mjs

@@ -0,0 +1,37 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Scrollbar as l } from "../common/scrollbar.mjs";
+const c = ({
+  title: e,
+  children: a,
+  className: d
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: `border border-border rounded-lg overflow-hidden ${d}`,
+    children: [
+      /* @__PURE__ */ r("div", { className: "p-3 bg-gray-100 dark:bg-gray-800 border-b border-border", children: /* @__PURE__ */ r("h3", { className: "font-medium", children: e }) }),
+      /* @__PURE__ */ r(
+        l,
+        {
+          className: "h-[300px]",
+          autoHide: "leave",
+          direction: "vertical",
+          scrollbarStyle: {
+            track: {
+              backgroundColor: "transparent"
+            },
+            thumb: {
+              borderRadius: "8px",
+              width: "6px"
+            }
+          },
+          children: /* @__PURE__ */ r("div", { className: "p-3", children: a })
+        }
+      )
+    ]
+  }
+);
+export {
+  c as PanelCard,
+  c as default
+};

package/components/carousel/carousel-cards.mjs

@@ -0,0 +1,66 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import o from "classnames";
+import { Carousel as g } from "./carousel-component.mjs";
+import { CardContainer as c } from "../cards/card-container.mjs";
+const f = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10"
+}, h = {
+  default: "bg-white dark:bg-gray-800 border border-border",
+  elevated: "bg-white dark:bg-gray-800 shadow-lg border border-border",
+  outlined: "bg-transparent border-2 border-border",
+  filled: "bg-gray-100 dark:bg-gray-800 border border-border dark:border-border"
+}, N = ({
+  cards: l,
+  cardClassName: s,
+  cardSize: i = "md",
+  variant: a = "default",
+  showCardTitles: d = !0,
+  className: n,
+  ...m
+}) => /* @__PURE__ */ r(
+  g,
+  {
+    className: o("w-full", n),
+    slidesPerView: 1,
+    spaceBetween: 16,
+    breakpoints: {
+      640: { slidesPerView: 2 },
+      1024: { slidesPerView: 3 },
+      1280: { slidesPerView: 4 }
+    },
+    ...m,
+    children: l.map((e, t) => /* @__PURE__ */ b(
+      c,
+      {
+        className: o(
+          "flex flex-col h-full transition-transform duration-300 hover:scale-98",
+          f[i],
+          h[a],
+          s
+        ),
+        children: [
+          (e.image || e.icon) && /* @__PURE__ */ r("div", { className: "shrink-0 mb-4", children: e.image ? /* @__PURE__ */ r(
+            "img",
+            {
+              src: e.image,
+              alt: e.title || `Card ${t + 1}`,
+              className: "w-full h-32 object-cover rounded-lg"
+            }
+          ) : e.icon && /* @__PURE__ */ r("div", { className: "flex items-center justify-center w-12 h-12 bg-brand/10 rounded-lg", children: e.icon }) }),
+          d && e.title && /* @__PURE__ */ r("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: e.title }),
+          e.description && /* @__PURE__ */ r("p", { className: "text-sm text-gray-600 dark:text-gray-400 flex-grow mb-4", children: e.description }),
+          e.content && /* @__PURE__ */ r("div", { className: "flex-grow mb-4", children: e.content }),
+          e.footer && /* @__PURE__ */ r("div", { className: "mt-auto pt-4 border-t border-border", children: e.footer })
+        ]
+      },
+      t
+    ))
+  }
+);
+export {
+  N as CarouselCards,
+  N as default
+};