framepexls-ui-lib 0.1.4

package/dist/Select.mjs

@@ -0,0 +1,263 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+const S = {
+  sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
+  md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
+  lg: { h: "h-11", text: "text-base", radius: "rounded-2xl", padX: "px-4", itemPad: "px-4 py-2.5" }
+};
+function ModernSelect({
+  value,
+  onChange,
+  options,
+  id,
+  label,
+  hint,
+  placeholder = "Selecciona una opci\xF3n\u2026",
+  title,
+  className,
+  fullWidth = true,
+  disabled = false,
+  error = false,
+  size = "md",
+  clearable = false,
+  closeOnSelect = false,
+  minWidthClasses,
+  fit = true
+}) {
+  var _a, _b;
+  const s = S[size];
+  const hasError = Boolean(error);
+  const autoId = React.useId();
+  const selectId = id != null ? id : autoId;
+  const hintId = hint ? `${selectId}-hint` : void 0;
+  const errorId = hasError ? `${selectId}-err` : void 0;
+  const [open, setOpen] = React.useState(false);
+  const [active, setActive] = React.useState(() => {
+    const idx = options.findIndex((o) => String(o.value) === String(value));
+    return Math.max(0, idx);
+  });
+  const btnRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const rootRef = React.useRef(null);
+  const [menuPos, setMenuPos] = React.useState({ top: 0, left: 0, width: 0 });
+  const updateMenuPosition = React.useCallback(() => {
+    const el = btnRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setMenuPos({
+      top: Math.round(r.bottom + window.scrollY + 6),
+      left: Math.round(r.left + window.scrollX),
+      width: Math.round(r.width)
+    });
+  }, []);
+  React.useEffect(() => {
+    const onDoc = (e) => {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    updateMenuPosition();
+    const onScroll = () => updateMenuPosition();
+    const onResize = () => updateMenuPosition();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, updateMenuPosition]);
+  React.useEffect(() => {
+    var _a2;
+    if (!open) return;
+    const el = (_a2 = listRef.current) == null ? void 0 : _a2.querySelector(`[data-idx="${active}"]`);
+    el == null ? void 0 : el.focus();
+  }, [open, active]);
+  const selected = (_a = options.find((o) => String(o.value) === String(value))) != null ? _a : null;
+  const setSelected = (o) => {
+    if (o.disabled) return;
+    onChange(o.value);
+    setActive(options.findIndex((x) => String(x.value) === String(o.value)));
+    if (closeOnSelect) setOpen(false);
+  };
+  const clear = () => {
+    var _a2;
+    onChange("");
+    setActive(0);
+    (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+  };
+  const onKeyBtn = (e) => {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+  const onKeyList = (e) => {
+    var _a2;
+    if (!open) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, options.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActive(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActive(options.length - 1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const o = options[active];
+      if (o) setSelected(o);
+    }
+  };
+  const widthBtn = fit ? "w-full min-w-[12rem] md:min-w-[16rem]" : `w-full ${minWidthClasses != null ? minWidthClasses : "min-w-full sm:min-w-[12rem] lg:min-w-[16rem]"}`;
+  return /* @__PURE__ */ jsxs("label", { className: fullWidth ? "block w-full" : "inline-block", ref: rootRef, children: [
+    label && /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[13px] font-semibold", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          id: selectId,
+          type: "button",
+          title: (_b = selected == null ? void 0 : selected.label) != null ? _b : title,
+          disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          "aria-controls": `${selectId}-listbox`,
+          "aria-describedby": hintId != null ? hintId : hasError ? errorId : void 0,
+          onClick: () => !disabled && setOpen((o) => !o),
+          onKeyDown: onKeyBtn,
+          className: [
+            "text-left bg-white dark:bg-[#0e0d0e] border transition shadow-sm",
+            s.radius,
+            s.h,
+            s.text,
+            s.padX,
+            "pr-12",
+            widthBtn,
+            hasError ? "border-blue-500 focus:ring-2 ring-blue-300" : "border-slate-200 dark:border-white/10 focus:ring-2 ring-blue-300",
+            disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+            "whitespace-nowrap overflow-hidden text-ellipsis",
+            className != null ? className : ""
+          ].join(" "),
+          children: /* @__PURE__ */ jsx("span", { className: selected ? "text-slate-900 dark:text-slate-100" : "text-slate-400", children: selected ? selected.label : placeholder })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: `pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 transition ${open ? "rotate-180 opacity-70" : "opacity-70"}`,
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", { d: "M5.23 7.21a.75.75 0 011.06.02L10 10.2l3.71-2.97a.75.75 0 111.04 1.08l-4.24 3.4a.75.75 0 01-.94 0L5.21 8.31a.75.75 0 01.02-1.1z" })
+        }
+      ),
+      clearable && value !== "" && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: clear,
+          className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",
+          "aria-label": "Limpiar selecci\xF3n",
+          title: "Limpiar",
+          children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M10 8.586l3.536-3.536a1 1 0 111.414 1.414L11.414 10l3.536 3.536a1 1 0 01-1.414 1.414L10 11.414l-3.536 3.536a1 1 0 01-1.414-1.414L8.586 10 5.05 6.464A1 1 0 116.464 5.05L10 8.586z",
+              clipRule: "evenodd"
+            }
+          ) })
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        id: `${selectId}-listbox`,
+        role: "listbox",
+        ref: listRef,
+        tabIndex: -1,
+        onKeyDown: onKeyList,
+        "aria-labelledby": selectId,
+        className: [
+          "fixed z-[1000] max-h-72 overflow-auto",
+          "rounded-2xl border border-slate-200/80 bg-white/90 backdrop-blur-md shadow-2xl ring-1 ring-black/5",
+          "dark:border-white/10 dark:bg-[#0f0d0e]/90 dark:ring-white/10"
+        ].join(" "),
+        style: {
+          top: menuPos.top,
+          left: menuPos.left,
+          width: menuPos.width,
+          maxWidth: "calc(100vw - 24px)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "presentation",
+              className: `${S[size].itemPad} sticky top-0 bg-white/90 dark:bg-[#0f0d0e]/90 backdrop-blur-md text-slate-400 select-none`,
+              children: placeholder
+            }
+          ),
+          options.map((o, idx) => {
+            const isSelected = String(value) === String(o.value);
+            const isDisabled = Boolean(o.disabled);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled,
+                tabIndex: -1,
+                "data-idx": idx,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => !isDisabled && setSelected(o),
+                className: [
+                  S[size].itemPad,
+                  "flex items-start justify-between gap-3",
+                  "cursor-pointer focus:outline-none",
+                  "hover:bg-slate-50 dark:hover:bg-white/5",
+                  isSelected ? "bg-slate-50/70 dark:bg-white/10" : "",
+                  isDisabled ? "opacity-50 cursor-not-allowed" : ""
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 leading-snug whitespace-normal break-words line-clamp-2", children: o.label }),
+                  isSelected && /* @__PURE__ */ jsx("svg", { className: "ml-3 h-4 w-4 shrink-0 opacity-80", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M16.707 5.293a1 1 0 010 1.414l-7.25 7.25a1 1 0 01-1.414 0l-3.25-3.25a1 1 0 111.414-1.414l2.543 2.543 6.543-6.543a1 1 0 011.414 0z",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                ]
+              },
+              String(o.value)
+            );
+          })
+        ]
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx("div", { id: errorId, className: "mt-1 text-[12px] text-blue-600", children: typeof error === "string" ? error : "Corrige este campo" }) : hint ? /* @__PURE__ */ jsx("div", { id: hintId, className: "mt-1 text-[12px] text-slate-500", children: hint }) : null
+  ] });
+}
+export {
+  ModernSelect as default
+};

package/dist/StatCard.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Spark = {
+    values: number[];
+    color?: string;
+};
+declare function StatCard({ title, value, hint, spark }: {
+    title: string;
+    value: React__default.ReactNode;
+    hint?: string;
+    spark?: Spark;
+}): react_jsx_runtime.JSX.Element;
+
+export { StatCard as default };

package/dist/StatCard.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Spark = {
+    values: number[];
+    color?: string;
+};
+declare function StatCard({ title, value, hint, spark }: {
+    title: string;
+    value: React__default.ReactNode;
+    hint?: string;
+    spark?: Spark;
+}): react_jsx_runtime.JSX.Element;
+
+export { StatCard as default };

package/dist/StatCard.js

@@ -0,0 +1,47 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StatCard_exports = {};
+__export(StatCard_exports, {
+  default: () => StatCard
+});
+module.exports = __toCommonJS(StatCard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+var import_recharts = require("recharts");
+function StatCard({ title, value, hint, spark }) {
+  var _a;
+  const gid = (0, import_react.useId)();
+  const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-white/5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs font-medium text-slate-500", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: value }),
+      hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-slate-400", children: hint })
+    ] }),
+    spark && spark.values.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.AreaChart, { data: spark.values.map((v, i) => ({ i, v })), margin: { top: 8, bottom: 0, left: 0, right: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${gid}-sg`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Area, { type: "monotone", dataKey: "v", stroke: color, strokeWidth: 2, fill: `url(#${gid}-sg)`, isAnimationActive: true, animationDuration: 600, animationEasing: "ease-out" })
+    ] }) }) })
+  ] }) });
+}

package/dist/StatCard.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useId } from "react";
+import { Area, AreaChart, ResponsiveContainer } from "recharts";
+function StatCard({ title, value, hint, spark }) {
+  var _a;
+  const gid = useId();
+  const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
+  return /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ jsxs("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-white/5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-slate-500", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: value }),
+      hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-slate-400", children: hint })
+    ] }),
+    spark && spark.values.length > 1 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-90", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data: spark.values.map((v, i) => ({ i, v })), margin: { top: 8, bottom: 0, left: 0, right: 0 }, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${gid}-sg`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+      ] }) }),
+      /* @__PURE__ */ jsx(Area, { type: "monotone", dataKey: "v", stroke: color, strokeWidth: 2, fill: `url(#${gid}-sg)`, isAnimationActive: true, animationDuration: 600, animationEasing: "ease-out" })
+    ] }) }) })
+  ] }) });
+}
+export {
+  StatCard as default
+};

package/dist/Steps.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type StepDef = {
+    key: string;
+    label: string;
+    description?: string;
+    /** Si quieres bloquear saltos hacia adelante */
+    disabled?: boolean;
+};
+type StepsProps = {
+    steps: StepDef[];
+    current: number;
+    onChange?: (nextIndex: number) => void;
+    className?: string;
+    clickable?: boolean;
+    compact?: boolean;
+};
+declare function Steps({ steps, current, onChange, className, clickable, compact, }: StepsProps): react_jsx_runtime.JSX.Element;
+/** Footer de navegación opcional (siguiente/anterior) */
+declare function StepsNav({ current, total, onPrev, onNext, nextLabel, finishLabel, disableNext, formId, }: {
+    current: number;
+    total: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+    nextLabel?: string;
+    finishLabel?: string;
+    disableNext?: boolean;
+    formId?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { type StepDef, StepsNav, Steps as default };

package/dist/Steps.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type StepDef = {
+    key: string;
+    label: string;
+    description?: string;
+    /** Si quieres bloquear saltos hacia adelante */
+    disabled?: boolean;
+};
+type StepsProps = {
+    steps: StepDef[];
+    current: number;
+    onChange?: (nextIndex: number) => void;
+    className?: string;
+    clickable?: boolean;
+    compact?: boolean;
+};
+declare function Steps({ steps, current, onChange, className, clickable, compact, }: StepsProps): react_jsx_runtime.JSX.Element;
+/** Footer de navegación opcional (siguiente/anterior) */
+declare function StepsNav({ current, total, onPrev, onNext, nextLabel, finishLabel, disableNext, formId, }: {
+    current: number;
+    total: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+    nextLabel?: string;
+    finishLabel?: string;
+    disableNext?: boolean;
+    formId?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { type StepDef, StepsNav, Steps as default };

package/dist/Steps.js

@@ -0,0 +1,123 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Steps_exports = {};
+__export(Steps_exports, {
+  StepsNav: () => StepsNav,
+  default: () => Steps
+});
+module.exports = __toCommonJS(Steps_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const cx = (...a) => a.filter(Boolean).join(" ");
+function Steps({
+  steps,
+  current,
+  onChange,
+  className,
+  clickable = true,
+  compact = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      "aria-label": "Progreso",
+      className: cx(
+        "w-full rounded-2xl border border-slate-200/80 bg-white/50 p-3 dark:border-white/10 dark:bg-white/[0.04]",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
+        const state = i < current ? "done" : i === current ? "current" : "upcoming";
+        const canClick = clickable && i <= current && !s.disabled && onChange;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            disabled: !canClick,
+            onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
+            className: cx(
+              "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
+              state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
+              state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
+              state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
+            ),
+            "aria-current": state === "current" ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: cx(
+                    "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
+                    state === "current" && "bg-blue-600 text-white ring-black/0",
+                    state === "done" && "bg-emerald-600 text-white ring-black/0",
+                    state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                  ),
+                  children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
+                !compact && s.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
+              ] })
+            ]
+          }
+        ) }, s.key);
+      }) })
+    }
+  );
+}
+function StepsNav({
+  current,
+  total,
+  onPrev,
+  onNext,
+  nextLabel = "Siguiente",
+  finishLabel = "Finalizar",
+  disableNext,
+  formId
+  // <- NUEVO
+}) {
+  const last = current === total - 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        disabled: current === 0,
+        onClick: onPrev,
+        className: "inline-flex h-9 items-center rounded-xl border border-slate-200 bg-white px-3 text-sm hover:bg-slate-50 disabled:opacity-50 dark:border-white/10 dark:bg-white/5",
+        children: "Atr\xE1s"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "submit",
+        form: formId,
+        disabled: disableNext,
+        className: "inline-flex h-9 items-center rounded-xl bg-blue-600 px-3 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50",
+        onClick: onNext,
+        children: last ? finishLabel : nextLabel
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StepsNav
+});

package/dist/Steps.mjs

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+const cx = (...a) => a.filter(Boolean).join(" ");
+function Steps({
+  steps,
+  current,
+  onChange,
+  className,
+  clickable = true,
+  compact = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Progreso",
+      className: cx(
+        "w-full rounded-2xl border border-slate-200/80 bg-white/50 p-3 dark:border-white/10 dark:bg-white/[0.04]",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("ol", { className: "grid grid-cols-1 gap-3 sm:grid-cols-4", children: steps.map((s, i) => {
+        const state = i < current ? "done" : i === current ? "current" : "upcoming";
+        const canClick = clickable && i <= current && !s.disabled && onChange;
+        return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: !canClick,
+            onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
+            className: cx(
+              "group flex w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition",
+              state === "current" && "border-blue-300/70 bg-blue-50/50 text-blue-900 dark:border-blue-300/20 dark:bg-blue-300/5 dark:text-blue-100",
+              state === "done" && "border-emerald-300/50 bg-emerald-50/40 text-emerald-900 hover:bg-emerald-50 dark:border-emerald-300/20 dark:bg-emerald-300/5 dark:text-emerald-100",
+              state === "upcoming" && "border-slate-200/80 bg-white hover:bg-slate-50 dark:border-white/10 dark:bg-white/5"
+            ),
+            "aria-current": state === "current" ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cx(
+                    "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-semibold ring-1",
+                    state === "current" && "bg-blue-600 text-white ring-black/0",
+                    state === "done" && "bg-emerald-600 text-white ring-black/0",
+                    state === "upcoming" && "bg-slate-100 text-slate-700 ring-black/5 dark:bg-white/10 dark:text-slate-200"
+                  ),
+                  children: state === "done" ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) }) : i + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: s.label }),
+                !compact && s.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] text-slate-500", children: s.description })
+              ] })
+            ]
+          }
+        ) }, s.key);
+      }) })
+    }
+  );
+}
+function StepsNav({
+  current,
+  total,
+  onPrev,
+  onNext,
+  nextLabel = "Siguiente",
+  finishLabel = "Finalizar",
+  disableNext,
+  formId
+  // <- NUEVO
+}) {
+  const last = current === total - 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: current === 0,
+        onClick: onPrev,
+        className: "inline-flex h-9 items-center rounded-xl border border-slate-200 bg-white px-3 text-sm hover:bg-slate-50 disabled:opacity-50 dark:border-white/10 dark:bg-white/5",
+        children: "Atr\xE1s"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        form: formId,
+        disabled: disableNext,
+        className: "inline-flex h-9 items-center rounded-xl bg-blue-600 px-3 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50",
+        onClick: onNext,
+        children: last ? finishLabel : nextLabel
+      }
+    )
+  ] });
+}
+export {
+  StepsNav,
+  Steps as default
+};