prometeo-design-system 3.1.5 → 3.1.7

package/dist/Steps.es.js

@@ -0,0 +1,214 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as j } from "./cn-B6yFEsav.js";
+import { motion as r } from "framer-motion";
+import N from "react";
+import { Check as y } from "./Icons/Check.es.js";
+const b = ({
+  index: n,
+  isHorizontal: t,
+  currentStep: u,
+  size: s
+}) => {
+  const i = n < u, x = n === u - 1, o = {
+    horizontal: {
+      sm: "w-[44px] h-[2px]",
+      md: "w-20 h-1",
+      lg: "w-20 h-1"
+    },
+    vertical: {
+      sm: "w-[2px] h-[44px]",
+      md: "w-1 h-20",
+      lg: "w-1 h-20"
+    }
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: `relative ${t ? o.horizontal[s] : o.vertical[s]}`, children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full bg-neutral-medium-default"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      r.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: t ? 0 : 1,
+          scaleY: t ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: i ? 1 : t ? 0 : 1,
+          scaleY: i || t ? 1 : 0,
+          opacity: i ? 1 : 0
+        },
+        transition: {
+          duration: 0.2,
+          ease: "easeInOut",
+          delay: n * 0.1
+        },
+        style: {
+          originX: t ? 0 : 0.5,
+          originY: t ? 0.5 : 0
+        }
+      }
+    ),
+    x && /* @__PURE__ */ e.jsx(
+      r.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: t ? 0 : 1,
+          scaleY: t ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: 1,
+          scaleY: 1,
+          opacity: [0, 0.3, 0]
+        },
+        transition: {
+          duration: 1.5,
+          repeat: 1 / 0,
+          ease: "easeInOut"
+        },
+        style: {
+          originX: t ? 0 : 0.5,
+          originY: t ? 0.5 : 0,
+          filter: "blur(4px)"
+        }
+      }
+    )
+  ] });
+}, S = ({
+  steps: n,
+  currentStep: t,
+  orientation: u = "horizontal",
+  variant: s = "default",
+  size: i = "md",
+  className: x = "",
+  onStepClick: o,
+  allowClickableSteps: p = !1
+}) => {
+  const c = u === "horizontal", m = {
+    sm: {
+      circle: "size-7 aspect-square text-xs",
+      title: "text-sm",
+      description: "text-[11px] w-16",
+      spacing: c ? "gap-2" : "gap-1",
+      connectorContainer: "px-2",
+      iconSize: 20
+    },
+    md: {
+      circle: "w-10 h-10 text-sm",
+      title: "text-base",
+      description: "text-sm w-20",
+      spacing: c ? "gap-3" : "gap-2",
+      connectorContainer: "px-2",
+      iconSize: 24
+    },
+    lg: {
+      circle: "w-12 h-12 text-base",
+      title: "text-lg",
+      description: "text-base w-28",
+      spacing: c ? "gap-4" : "gap-3",
+      connectorContainer: "px-2",
+      iconSize: 28
+    }
+  }, w = (a) => a < t ? "completed" : a === t ? "current" : "upcoming", g = (a) => {
+    const l = `${m[i].circle} rounded-full flex items-center justify-center font-medium`;
+    switch (a) {
+      case "completed":
+        return `${l} bg-primary-default-default text-neutral-strong-default shadow-lg`;
+      case "current":
+        return `${l} ring-[2px] ring-primary-default-default text-neutral-strong-default shadow-lg duration-900 `;
+      default:
+        return `${l} bg-neutral-medium-default text-neutral-medium-default`;
+    }
+  }, h = (a) => {
+    p && o && o(a);
+  }, v = c ? `flex items-center w-full justify-center ${x}` : `space-y-0 ${x}`;
+  return /* @__PURE__ */ e.jsx("div", { className: v, children: n.map((a, l) => {
+    const d = w(l), f = p && o;
+    return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "w-max flex flex-col items-center relative", children: [
+        /* @__PURE__ */ e.jsx(
+          r.div,
+          {
+            className: `${g(d)} ${f ? "cursor-pointer" : ""} relative z-10`,
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { duration: 0.3, delay: l * 0.3 },
+            whileTap: f ? { scale: 0.95 } : {},
+            onClick: () => h(l),
+            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : N.cloneElement(a.icon, { size: m[i].iconSize })
+          }
+        ),
+        s !== "minimal" && s !== "numbered-minimal" && a.description && /* @__PURE__ */ e.jsx("p", { className: j(
+          "absolute text-center w-28 -bottom-2 translate-y-full",
+          m[i].description,
+          "text-gray-400 mt-2 text-center",
+          d === "current" ? "text-neutral-strong-default font-semibold " : "text-neutral-medium-default"
+        ), children: a.description })
+      ] }),
+      l < n.length - 1 && /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `flex items-center w-max ${m[i].connectorContainer}`,
+          children: /* @__PURE__ */ e.jsx(
+            b,
+            {
+              index: l,
+              isHorizontal: c,
+              currentStep: t,
+              size: i
+            }
+          )
+        }
+      )
+    ] }) : /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col items-center w-max", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center w-full relative", children: [
+        /* @__PURE__ */ e.jsx(
+          r.div,
+          {
+            className: `${g(d)} ${f ? "cursor-pointer" : ""}`,
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { duration: 0.3, delay: l * 0.1 },
+            whileTap: f ? { scale: 0.95 } : {},
+            onClick: () => h(l),
+            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : a.icon
+          }
+        ),
+        s !== "minimal" && s !== "numbered-minimal" && /* @__PURE__ */ e.jsx(
+          r.div,
+          {
+            className: `absolute -right-4 top-1/2 -translate-y-1/2  translate-x-full ml-4  gap-3 flex flex-col w-full ${m[i].spacing} flex  h-full`,
+            initial: { opacity: 0, x: -10 },
+            animate: { opacity: 1, x: 0 },
+            transition: { duration: 0.3, delay: l * 0.1 + 0.1 },
+            children: a.description && /* @__PURE__ */ e.jsx("p", { className: j(
+              "h-full text-start flex items-center justify-start ",
+              m[i].description,
+              "text-gray-400",
+              d === "current" ? "text-neutral-strong-default font-semibold " : "text-neutral-medium-default"
+            ), children: a.description })
+          }
+        )
+      ] }),
+      l < n.length - 1 && /* @__PURE__ */ e.jsx("div", { className: "py-2", children: /* @__PURE__ */ e.jsx(
+        b,
+        {
+          index: l,
+          isHorizontal: c,
+          currentStep: t,
+          size: i
+        }
+      ) })
+    ] }) }, a.id);
+  }) });
+};
+export {
+  S as Steps,
+  S as default
+};

package/dist/SwipeContainer.d.ts

@@ -0,0 +1,4 @@
+export {}
+import PrometeoDesignSystem from './exports/SwipeContainer'
+export default PrometeoDesignSystem
+export {}

package/dist/SwipeContainer.es.js

@@ -0,0 +1,185 @@
+import { j as o } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { useState as d, useRef as D, useEffect as L } from "react";
+const O = ({
+  children: x,
+  className: P,
+  showIndicators: R = !0,
+  showControls: W = !0,
+  // Por defecto mostrar controles
+  autoPlay: k = !1,
+  autoPlayInterval: $ = 3e3,
+  onSwipe: m,
+  threshold: Y = 50,
+  disabled: l = !1,
+  cardWidth: f,
+  // Ancho personalizado de tarjetas
+  visibleCards: r,
+  // Número de tarjetas visibles
+  width: p = "100%",
+  // Ancho por defecto
+  height: v = "300px",
+  // Alto por defecto
+  gap: g = 16
+  // Separación por defecto entre cards
+}) => {
+  const [n, h] = d(0), [u, N] = d(!1), [T, B] = d({ x: 0, y: 0 }), [I, w] = d({ x: 0, y: 0 }), y = D(null), c = D(null), s = x.length, C = f ? typeof f == "number" ? `${f}px` : f : r && r > 0 ? `${100 / r}%` : "100%";
+  L(() => (k && s > 1 && !u && (c.current = setInterval(() => {
+    h((e) => (e + 1) % s);
+  }, $)), () => {
+    c.current && clearInterval(c.current);
+  }), [k, $, s, u]), L(() => {
+    u && c.current && clearInterval(c.current);
+  }, [u]);
+  const S = (e, t) => {
+    l || (N(!0), B({ x: e, y: t }), w({ x: e, y: t }));
+  }, E = (e, t) => {
+    !u || l || w({ x: e, y: t });
+  }, X = () => {
+    if (!u || l) return;
+    const e = I.x - T.x;
+    if (Math.abs(e) > Y) {
+      if (e > 0 && n > 0) {
+        const a = n - 1;
+        h(a), m?.(a);
+      } else if (e < 0 && n < s - 1) {
+        const a = n + 1;
+        h(a), m?.(a);
+      }
+    }
+    N(!1), w({ x: 0, y: 0 });
+  }, U = (e) => {
+    e.preventDefault(), S(e.clientX, e.clientY);
+  }, _ = (e) => {
+    E(e.clientX, e.clientY);
+  }, b = () => {
+    X();
+  }, q = (e) => {
+    const t = e.touches[0];
+    S(t.clientX, t.clientY);
+  }, z = (e) => {
+    const t = e.touches[0];
+    E(t.clientX, t.clientY);
+  }, A = () => {
+    X();
+  }, j = (e) => {
+    l || e < 0 || e >= s || (h(e), m?.(e));
+  }, F = () => {
+    const e = I.x - T.x;
+    let t = 0;
+    if (r && r > 0) {
+      const M = y.current ? (y.current.offsetWidth - g * (r - 1)) / r : 0;
+      t = n * (M + g);
+    } else
+      t = n * 100;
+    const a = r && r > 0 ? `translateX(-${t}px)` : `translateX(-${n * 100}%)`;
+    if (u) {
+      const M = `translateX(${e}px)`;
+      return `${a} ${M}`;
+    }
+    return a;
+  };
+  return s === 0 ? null : /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      className: i("relative overflow-hidden", P),
+      style: {
+        width: typeof p == "number" ? `${p}px` : p,
+        height: typeof v == "number" ? `${v}px` : v
+      },
+      children: [
+        /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            ref: y,
+            className: i(
+              "relative flex flex-row transition-transform duration-300 ease-out",
+              l && "pointer-events-none opacity-50"
+            ),
+            style: {
+              transform: F(),
+              gap: `${g}px`
+            },
+            onMouseDown: U,
+            onMouseMove: _,
+            onMouseUp: b,
+            onMouseLeave: b,
+            onTouchStart: q,
+            onTouchMove: z,
+            onTouchEnd: A,
+            children: x.map((e, t) => /* @__PURE__ */ o.jsx(
+              "div",
+              {
+                className: "flex-shrink-0 h-full",
+                style: {
+                  width: C
+                },
+                children: e
+              },
+              t
+            ))
+          }
+        ),
+        R && s > 1 && /* @__PURE__ */ o.jsx("div", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2", children: x.map((e, t) => /* @__PURE__ */ o.jsx(
+          "button",
+          {
+            onClick: () => j(t),
+            className: i(
+              "w-2 h-2 rounded-full transition-all duration-200",
+              t === n ? "bg-primary-default-default" : "bg-neutral-medium-default hover:bg-neutral-default-default"
+            ),
+            "aria-label": `Ir al elemento ${t + 1}`
+          },
+          t
+        )) }),
+        W && s > 1 && /* @__PURE__ */ o.jsxs("div", { className: "absolute inset-0 flex items-center justify-between pointer-events-none", children: [
+          n > 0 && /* @__PURE__ */ o.jsx(
+            "button",
+            {
+              onClick: () => j(n - 1),
+              className: i(
+                "p-2 rounded-full bg-white shadow-md hover:shadow-lg transition-shadow pointer-events-auto",
+                l && "pointer-events-none opacity-50"
+              ),
+              "aria-label": "Elemento anterior",
+              children: /* @__PURE__ */ o.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4 text-neutral-default-default rotate-180",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ o.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                }
+              )
+            }
+          ),
+          n < s - 1 && /* @__PURE__ */ o.jsx(
+            "button",
+            {
+              onClick: () => j(n + 1),
+              className: i(
+                "p-2 rounded-full bg-white shadow-md hover:shadow-lg transition-shadow pointer-events-auto",
+                l && "pointer-events-none opacity-50"
+              ),
+              "aria-label": "Elemento siguiente",
+              children: /* @__PURE__ */ o.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4 text-neutral-default-default",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ o.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  O as default
+};

package/dist/Switch.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Switch'
+export {}
+import PrometeoDesignSystem from './exports/Switch'
+export default PrometeoDesignSystem
+export * from './exports/Switch'
+export {}

package/dist/Switch.es.js

@@ -0,0 +1,97 @@
+import { j as a } from "./jsx-runtime-GkKLlHH4.js";
+import { c as r } from "./cn-B6yFEsav.js";
+import { memo as w, useRef as b } from "react";
+import { motion as l } from "framer-motion";
+const c = ({ name: d, value: o, onChange: f, disabled: t = !1 }) => {
+  const n = b(null), h = (u) => {
+    if (!n.current || t) return;
+    u.preventDefault(), u.stopPropagation();
+    const g = !n.current.checked;
+    f(d, g);
+  }, i = {
+    on: {
+      default: {
+        container: "bg-primary-default-default",
+        dot: "bg-[var(--neutral-200)]"
+      },
+      disabled: {
+        container: "bg-neutral-weak-default",
+        dot: "bg-neutral-weak-focused"
+      }
+    },
+    off: {
+      default: {
+        container: "bg-neutral-weak-hover",
+        dot: "bg-neutral-medium-default"
+      },
+      disabled: {
+        container: "bg-neutral-medium-default",
+        dot: "bg-neutral-weak-default"
+      }
+    }
+  }, m = {
+    on: {
+      left: "unset",
+      right: -4
+    },
+    off: {
+      left: -4,
+      right: "unset"
+    }
+  }, p = {
+    on: {
+      width: 24,
+      height: 24
+    },
+    off: {
+      width: 16
+    }
+  }, e = o ? "on" : "off", s = t ? "disabled" : "default";
+  return /* @__PURE__ */ a.jsxs("div", { children: [
+    /* @__PURE__ */ a.jsx("input", { type: "checkbox", hidden: !0, ref: n, checked: o, disabled: t }),
+    /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        onClick: h,
+        className: r(
+          "w-14 h-8 rounded-full relative px-2 cursor-pointer",
+          t && "cursor-default",
+          i[e][s].container
+        ),
+        children: /* @__PURE__ */ a.jsx(
+          l.span,
+          {
+            animate: m[e],
+            whileHover: t ? {} : {
+              background: e === "off" ? "rgba(29, 27, 32, 0.08)" : "rgba(101, 85, 143, 0.12)"
+            },
+            className: r(
+              "absolute top-1/2 -translate-y-1/2 grid place-items-center ",
+              "size-10 aspect-square rounded-full absolute top-1/2 -translate-y-1/2"
+            ),
+            children: /* @__PURE__ */ a.jsx(
+              l.span,
+              {
+                animate: p[e],
+                whileTap: t ? {} : {
+                  width: 28,
+                  height: 28
+                },
+                className: r(
+                  "size-4 aspect-square rounded-full z-10",
+                  i[e][s].dot
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+c.displayName = "Switch";
+const y = w(c);
+export {
+  y as Switch,
+  y as default
+};

package/dist/TabLinks.d.ts

@@ -0,0 +1,4 @@
+export {}
+import PrometeoDesignSystem from './exports/TabLinks'
+export default PrometeoDesignSystem
+export {}

package/dist/TabLinks.es.js

@@ -0,0 +1,94 @@
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { motion as x } from "framer-motion";
+import { memo as N } from "react";
+import { c as r } from "./cn-B6yFEsav.js";
+function c({
+  items: t,
+  activeTab: e,
+  onTabChange: i,
+  className: l,
+  tabClassName: d,
+  activeTabClassName: o,
+  indicatorClassName: f,
+  animated: b = !0,
+  renderTab: m
+}) {
+  const h = (a) => {
+    a.disabled || i?.(a.id, a);
+  };
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      className: r(
+        "flex flex-row justify-around items-end relative border-b border-neutral-strong-default w-full md:justify-start md:px-10 md:gap-5",
+        l
+      ),
+      role: "tablist",
+      children: t?.map((a) => {
+        const s = e === a.id, u = () => h(a);
+        return m ? /* @__PURE__ */ n.jsx("div", { children: m(a, s, u) }, a.id) : /* @__PURE__ */ n.jsxs(
+          "button",
+          {
+            onClick: u,
+            disabled: a.disabled,
+            className: r(
+              "relative flex justify-center items-center h-10 px-4 font-medium focus:outline-none transition-colors",
+              !a.disabled && "hover:text-primary-default-default cursor-pointer",
+              a.disabled && "opacity-50 cursor-default",
+              d,
+              s && o
+            ),
+            tabIndex: a.disabled ? -1 : 0,
+            "aria-label": a.title,
+            role: "tab",
+            "aria-selected": s,
+            title: a.description,
+            children: [
+              s && b && /* @__PURE__ */ n.jsx(
+                x.div,
+                {
+                  layoutId: "tab-indicator",
+                  className: r(
+                    "absolute -bottom-px left-0 right-0 h-[5px] rounded-t-xl bg-primary-default-default z-0",
+                    f
+                  ),
+                  transition: {
+                    type: "spring",
+                    stiffness: 250,
+                    damping: 17
+                  },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ n.jsx(
+                "span",
+                {
+                  className: r(
+                    "relative z-10",
+                    s ? "text-primary-default-default font-semibold text-md" : "text-neutral-medium-default font-medium text-md"
+                  ),
+                  children: a.title
+                }
+              )
+            ]
+          },
+          a.id
+        );
+      })
+    }
+  );
+}
+c.displayName = "TabLinks";
+const C = N(c, (t, e) => {
+  if (t.activeTab !== e.activeTab || t.className !== e.className || t.tabClassName !== e.tabClassName || t.activeTabClassName !== e.activeTabClassName || t.indicatorClassName !== e.indicatorClassName || t.animated !== e.animated || t.onTabChange !== e.onTabChange || t.renderTab !== e.renderTab || t.items.length !== e.items.length)
+    return !1;
+  for (let i = 0; i < t.items.length; i++) {
+    const l = t.items[i], d = e.items[i];
+    if (l.id !== d.id || l.title !== d.title || l.disabled !== d.disabled || l.description !== d.description)
+      return !1;
+  }
+  return !0;
+});
+export {
+  C as default
+};

package/dist/Table.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/Table'
+export {}