@codeplex-qwik/ui 0.0.1

package/index.mjs

@@ -0,0 +1,1055 @@
+import { jsx as e, jsxs as b, Fragment as L } from "react/jsx-runtime";
+import $, { useState as N, useRef as j, useEffect as M, useId as I } from "react";
+const V = {};
+function H() {
+  return /* @__PURE__ */ e("div", { className: V.container, children: /* @__PURE__ */ e("h1", { children: "Welcome to Ui!" }) });
+}
+const Z = $.forwardRef(
+  ({
+    variant: l = "primary",
+    size: t = "md",
+    disabled: r = !1,
+    fullWidth: s = !1,
+    loading: n = !1,
+    leftIcon: a,
+    rightIcon: o,
+    type: c = "button",
+    className: d = "",
+    children: i,
+    ...u
+  }, g) => {
+    const m = "inline-flex items-center justify-center gap-2 rounded-lg border text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors transition-shadow", h = {
+      primary: "bg-blue-600 border-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 active:bg-blue-800 dark:bg-blue-500 dark:border-blue-500 dark:hover:bg-blue-600",
+      secondary: "bg-gray-100 border-gray-200 text-gray-900 hover:bg-gray-200 hover:border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-700",
+      outline: "bg-transparent border-gray-300 text-gray-900 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-50 dark:hover:bg-gray-800",
+      ghost: "bg-transparent border-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800",
+      danger: "bg-red-600 border-red-600 text-white hover:bg-red-700 hover:border-red-700 active:bg-red-800 dark:bg-red-500 dark:border-red-500 dark:hover:bg-red-600",
+      success: "bg-emerald-600 border-emerald-600 text-white hover:bg-emerald-700 hover:border-emerald-700 active:bg-emerald-800 dark:bg-emerald-500 dark:border-emerald-500 dark:hover:bg-emerald-600"
+    }, f = {
+      xs: "px-2 py-1 text-[11px]",
+      sm: "px-3 py-1.5 text-xs",
+      md: "px-4 py-2 text-sm",
+      lg: "px-5 py-2.5 text-base"
+    }, x = s ? "w-full" : "w-full sm:w-auto", p = r || n, y = [
+      m,
+      h[l],
+      f[t],
+      x,
+      n ? "cursor-wait" : "",
+      d
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ b(
+      "button",
+      {
+        ref: g,
+        type: c,
+        className: y,
+        disabled: p,
+        "aria-busy": n ? "true" : "false",
+        ...u,
+        children: [
+          n && /* @__PURE__ */ e("span", { className: "inline-flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e("span", { className: "h-3 w-3 animate-spin rounded-full border-[2px] border-white/40 border-t-white dark:border-t-gray-100" }) }),
+          !n && a && /* @__PURE__ */ e("span", { className: "text-sm leading-none", children: a }),
+          /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center", children: i }),
+          !n && o && /* @__PURE__ */ e("span", { className: "text-sm leading-none", children: o })
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "CodeplexButton";
+const E = $.forwardRef(
+  ({
+    label: l,
+    variant: t = "neutral",
+    size: r = "md",
+    pill: s = !0,
+    iconLeft: n,
+    iconRight: a,
+    className: o = "",
+    onClick: c,
+    ...d
+  }, i) => (
+    // @ts-ignore
+    /* @__PURE__ */ b(
+      c ? "button" : "span",
+      {
+        ref: i,
+        type: c ? "button" : void 0,
+        className: `
+          inline-flex items-center gap-1 font-medium border whitespace-nowrap select-none
+          ${r === "sm" ? "text-[11px] px-2 py-0.5" : "text-xs px-2.5 py-1"}
+          ${s ? "rounded-full" : "rounded-md"}
+          ${t === "primary" ? "bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:border-blue-800" : t === "secondary" ? "bg-purple-50 text-purple-700 border-purple-100 dark:bg-purple-900/40 dark:text-purple-200 dark:border-purple-800" : t === "success" ? "bg-emerald-50 text-emerald-700 border-emerald-100 dark:bg-emerald-900/40 dark:text-emerald-200 dark:border-emerald-800" : t === "warning" ? "bg-amber-50 text-amber-700 border-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:border-amber-800" : t === "danger" ? "bg-red-50 text-red-700 border-red-100 dark:bg-red-900/40 dark:text-red-200 dark:border-red-800" : "bg-gray-100 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700"}
+          ${c ? "cursor-pointer hover:brightness-95 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1" : ""}
+          ${o}
+        `,
+        onClick: c,
+        ...d,
+        children: [
+          n && /* @__PURE__ */ e("span", { className: "text-xs", children: n }),
+          /* @__PURE__ */ e("span", { children: l }),
+          a && /* @__PURE__ */ e("span", { className: "text-xs", children: a })
+        ]
+      }
+    )
+  )
+);
+E.displayName = "CodeplexBadge";
+const W = ({
+  size: l = "md",
+  color: t = "primary",
+  type: r = "border",
+  label: s,
+  labelPosition: n = "right",
+  fullScreen: a = !1,
+  className: o = ""
+}) => {
+  const c = {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8",
+    xl: "w-12 h-12"
+  }, d = {
+    primary: "text-blue-600 dark:text-blue-500",
+    white: "text-white",
+    gray: "text-gray-400 dark:text-gray-300",
+    success: "text-emerald-600 dark:text-emerald-500",
+    danger: "text-red-600 dark:text-red-500",
+    warning: "text-yellow-500"
+  }, u = /* @__PURE__ */ b(
+    "div",
+    {
+      role: "status",
+      className: `
+        inline-flex items-center
+        ${n === "bottom" ? "flex-col gap-3" : "flex-row gap-2"}
+      `,
+      children: [
+        (() => {
+          const g = c[l], m = d[t];
+          return r === "dots" ? /* @__PURE__ */ b("div", { className: `flex items-center justify-center gap-1 ${m} ${o}`, children: [
+            /* @__PURE__ */ e("div", { className: `${l === "xl" ? "w-3 h-3" : "w-1.5 h-1.5"} bg-current rounded-full animate-bounce [animation-delay:-0.3s]` }),
+            /* @__PURE__ */ e("div", { className: `${l === "xl" ? "w-3 h-3" : "w-1.5 h-1.5"} bg-current rounded-full animate-bounce [animation-delay:-0.15s]` }),
+            /* @__PURE__ */ e("div", { className: `${l === "xl" ? "w-3 h-3" : "w-1.5 h-1.5"} bg-current rounded-full animate-bounce` })
+          ] }) : r === "ping" ? /* @__PURE__ */ b("span", { className: `relative flex ${g} ${o}`, children: [
+            /* @__PURE__ */ e("span", { className: `animate-ping absolute inline-flex h-full w-full rounded-full bg-current opacity-75 ${m}` }),
+            /* @__PURE__ */ e("span", { className: `relative inline-flex rounded-full h-full w-full bg-current ${m}` })
+          ] }) : /* @__PURE__ */ b(
+            "svg",
+            {
+              className: `animate-spin ${g} ${m} ${o}`,
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          );
+        })(),
+        s && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: s }),
+        !s && /* @__PURE__ */ e("span", { className: "sr-only", children: "Cargando..." })
+      ]
+    }
+  );
+  return a ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm transition-opacity", children: u }) : u;
+}, F = ({ keys: l, size: t = "md", className: r = "", children: s, ...n }) => {
+  const a = t === "sm" ? "text-[10px] px-1.5 py-0.5" : t === "lg" ? "text-xs px-2.5 py-1.5" : "text-[11px] px-2 py-1", o = "inline-flex items-center justify-center rounded border border-gray-300 bg-gray-50 text-gray-800 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 font-mono shadow-sm";
+  return l && l.length > 0 ? /* @__PURE__ */ e("span", { className: `inline-flex items-center gap-1 ${r}`, ...n, children: l.map((c, d) => /* @__PURE__ */ e("kbd", { className: `${o} ${a}`, children: c }, c + d)) }) : /* @__PURE__ */ e("kbd", { className: `${o} ${a} ${r}`, ...n, children: s });
+}, _ = ({
+  src: l,
+  alt: t,
+  name: r,
+  size: s = "md",
+  shape: n = "circle",
+  status: a = "none",
+  showBorder: o = !1,
+  showInitialsFallback: c = !0,
+  className: d = "",
+  ...i
+}) => {
+  const u = s === "xs" ? "w-6 h-6 text-[10px]" : s === "sm" ? "w-8 h-8 text-xs" : s === "lg" ? "w-12 h-12 text-base" : s === "xl" ? "w-16 h-16 text-lg" : "w-10 h-10 text-sm", g = n === "rounded" ? "rounded-lg" : "rounded-full", m = o ? "ring-2 ring-white dark:ring-gray-900" : "", h = a === "online" ? "bg-emerald-500" : a === "busy" ? "bg-red-500" : a === "away" ? "bg-amber-400" : a === "offline" ? "bg-gray-400 dark:bg-gray-500" : "bg-transparent", f = a !== "none", x = (r || t || "?").trim().split(" ").filter(Boolean).slice(0, 2).map((y) => y[0]?.toUpperCase()).join("") || "?", p = a === "online" ? "En línea" : a === "busy" ? "Ocupado" : a === "away" ? "Ausente" : a === "offline" ? "Desconectado" : void 0;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: `relative inline-flex ${d}`,
+      "aria-label": r,
+      ...i,
+      children: [
+        l ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: l,
+            alt: t || r || "Avatar",
+            className: `
+            ${u}
+            ${g}
+            object-cover
+            bg-gray-200 dark:bg-gray-700
+            ${m}
+          `
+          }
+        ) : c ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+            ${u}
+            ${g}
+            inline-flex items-center justify-center
+            bg-gray-200 text-gray-700
+            dark:bg-gray-700 dark:text-gray-100
+            font-medium
+            ${m}
+          `,
+            role: "img",
+            "aria-label": r,
+            children: x
+          }
+        ) : /* @__PURE__ */ e(
+          "div",
+          {
+            className: `
+            ${u}
+            ${g}
+            bg-gray-200 dark:bg-gray-700
+            ${m}
+          `,
+            role: "img",
+            "aria-label": r
+          }
+        ),
+        f && /* @__PURE__ */ b(L, { children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: `
+              absolute bottom-0 right-0
+              inline-flex items-center justify-center
+              rounded-full
+              border-2 border-white dark:border-gray-900
+              ${s === "xs" ? "w-2.5 h-2.5" : "w-3 h-3"}
+              ${h}
+            `,
+              "aria-hidden": "true"
+            }
+          ),
+          p && /* @__PURE__ */ e("span", { className: "sr-only", children: p })
+        ] })
+      ]
+    }
+  );
+}, O = ({
+  requirements: l,
+  className: t = ""
+}) => {
+  const [r, s] = N(!1), n = j(null), a = $.useId(), o = (i) => {
+    i.stopPropagation(), i.preventDefault(), s(!r);
+  }, c = () => s(!0), d = () => s(!1);
+  return M(() => {
+    const i = (u) => {
+      r && n.current && !n.current.contains(u.target) && s(!1);
+    };
+    return document.addEventListener("click", i), () => {
+      document.removeEventListener("click", i);
+    };
+  }, [r]), /* @__PURE__ */ b(
+    "div",
+    {
+      ref: n,
+      className: `relative inline-flex items-center ml-0.5 align-top ${t}`,
+      onMouseEnter: c,
+      onMouseLeave: d,
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: o,
+            "aria-expanded": r,
+            "aria-controls": a,
+            "aria-label": "Ver requisitos",
+            className: `
+          group flex items-center justify-center
+          text-red-500 dark:text-red-400
+          font-bold text-lg leading-none
+          cursor-help select-none
+          transition-transform duration-200
+          focus:outline-none focus:text-red-600 dark:focus:text-red-300
+          ${r ? "scale-110" : "hover:scale-110"}
+        `,
+            children: "*"
+          }
+        ),
+        r && /* @__PURE__ */ b(
+          "div",
+          {
+            id: a,
+            className: `
+            absolute bottom-full left-0 mb-1.5 z-[100]
+            /* Responsive Width: Fijo en desktop, limitado al viewport en móvil */
+            w-64 max-w-[85vw] sm:max-w-xs
+            bg-white dark:bg-gray-800
+            border border-gray-200 dark:border-gray-700
+            rounded-lg shadow-xl
+            animate-in fade-in zoom-in-95 slide-in-from-bottom-1 duration-150
+            origin-bottom-left
+          `,
+            onClick: (i) => i.stopPropagation(),
+            children: [
+              /* @__PURE__ */ e("div", { className: "px-3 py-2 border-b border-gray-100 dark:border-gray-700/50 bg-gray-50/80 dark:bg-gray-800/80 rounded-t-lg backdrop-blur-sm", children: /* @__PURE__ */ b("h4", { className: "text-[10px] font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                "Requisitos"
+              ] }) }),
+              /* @__PURE__ */ e("ul", { className: "p-1.5 space-y-0.5", children: l.map((i, u) => /* @__PURE__ */ b(
+                "li",
+                {
+                  className: `
+                  flex items-start gap-2 px-2 py-1.5 rounded
+                  text-xs text-gray-600 dark:text-gray-300
+                  hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors
+                `,
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "text-blue-500 dark:text-blue-400 mt-[2px]", children: "•" }),
+                    /* @__PURE__ */ e("span", { className: "leading-snug", children: i })
+                  ]
+                },
+                u
+              )) }),
+              /* @__PURE__ */ e("div", { className: "absolute -bottom-1 left-1.5 w-2 h-2 bg-white dark:bg-gray-800 border-b border-r border-gray-200 dark:border-gray-700 rotate-45" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, D = ({
+  htmlFor: l,
+  label: t,
+  required: r,
+  requirements: s,
+  className: n = "",
+  children: a,
+  ...o
+}) => /* @__PURE__ */ b("div", { className: `flex items-center gap-2 mb-1.5 ${n}`, ...o, children: [
+  /* @__PURE__ */ e(
+    "label",
+    {
+      htmlFor: l,
+      className: "text-sm font-medium text-gray-800 dark:text-gray-100 cursor-pointer select-none",
+      children: t
+    }
+  ),
+  r && // VERIFICACIÓN: Si requirements tiene datos, muestra el Popup. Si no, el asterisco simple.
+  (s && s.length > 0 ? /* @__PURE__ */ e(O, { requirements: s }) : /* @__PURE__ */ e("span", { className: "text-xs text-red-500 font-bold select-none", title: "Campo obligatorio", children: "*" })),
+  a
+] }), P = ({
+  variant: l = "default",
+  padding: t = "md",
+  hoverable: r = !1,
+  clickable: s = !1,
+  className: n = "",
+  media: a,
+  header: o,
+  footer: c,
+  children: d,
+  ...i
+}) => /* @__PURE__ */ b(
+  "article",
+  {
+    className: `
+        relative
+        rounded-xl
+        shadow-sm
+        ${l === "outline" ? "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700" : l === "soft" ? "bg-gray-50 dark:bg-gray-800/70 border border-gray-100 dark:border-gray-700/60" : "bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-800"}
+        ${t === "none" ? "p-0" : t === "sm" ? "p-3" : t === "lg" ? "p-6" : "p-4"}
+        ${r || s ? "transition-shadow transition-transform hover:shadow-md hover:-translate-y-[1px]" : "transition-shadow"}
+        ${s ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60" : ""}
+        ${n}
+      `,
+    ...i,
+    children: [
+      a,
+      o,
+      d,
+      c
+    ]
+  }
+), K = ({
+  eyebrow: l,
+  title: t,
+  subtitle: r,
+  align: s = "left",
+  primaryLabel: n,
+  secondaryLabel: a,
+  onPrimary: o,
+  onSecondary: c,
+  fullHeight: d = !1,
+  backgroundImageUrl: i,
+  darkOverlay: u = !0,
+  className: g = "",
+  children: m,
+  ...h
+}) => {
+  const f = s === "center" ? "text-center items-center" : "text-left items-start", x = !!i;
+  return /* @__PURE__ */ b(
+    "section",
+    {
+      className: `
+        relative overflow-hidden
+        border border-gray-200/80 dark:border-gray-700/80
+        rounded-2xl
+        px-6 py-10 md:px-10 md:py-14
+        shadow-sm
+        flex
+        ${d ? "min-h-[60vh]" : ""}
+        ${x ? "bg-cover bg-center" : "bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-950"}
+        ${g}
+      `,
+      style: x ? { backgroundImage: `url(${i})` } : void 0,
+      ...h,
+      children: [
+        x && u && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-[1px]" }),
+        /* @__PURE__ */ b(
+          "div",
+          {
+            className: `
+          relative z-10
+          max-w-3xl mx-auto flex flex-col gap-6
+          ${f}
+        `,
+            children: [
+              l && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/60 dark:text-blue-100", children: l }),
+              /* @__PURE__ */ b("div", { className: "space-y-3 md:space-y-4", children: [
+                /* @__PURE__ */ e(
+                  "h1",
+                  {
+                    className: `
+              text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight
+              ${x ? "text-white" : "text-gray-900 dark:text-white"}
+            `,
+                    children: t
+                  }
+                ),
+                r && /* @__PURE__ */ e(
+                  "p",
+                  {
+                    className: `
+                text-base md:text-lg max-w-2xl
+                ${x ? "text-gray-100/90" : "text-gray-600 dark:text-gray-300"}
+              `,
+                    children: r
+                  }
+                )
+              ] }),
+              (n || a) && /* @__PURE__ */ b(
+                "div",
+                {
+                  className: `
+              flex flex-wrap gap-3 mt-2
+              ${s === "center" ? "justify-center" : "justify-start"}
+            `,
+                  children: [
+                    n && o && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        className: "inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+                        onClick: o,
+                        children: n
+                      }
+                    ),
+                    a && c && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        className: `
+                  inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border
+                  ${x ? "border-white/60 text-white bg-white/5 hover:bg-white/10" : "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-700"}
+                  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
+                `,
+                        onClick: c,
+                        children: a
+                      }
+                    )
+                  ]
+                }
+              ),
+              m
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, A = {
+  info: "bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-100 dark:border-blue-800/60",
+  success: "bg-emerald-50 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-100 dark:border-emerald-800/60",
+  warning: "bg-amber-50 text-amber-800 border-amber-200 dark:bg-amber-900/30 dark:text-amber-100 dark:border-amber-800/60",
+  error: "bg-red-50 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-100 dark:border-red-800/60",
+  neutral: "bg-gray-50 text-gray-800 border-gray-200 dark:bg-gray-900/40 dark:text-gray-100 dark:border-gray-700"
+}, U = ({
+  title: l,
+  description: t,
+  variant: r = "info",
+  icon: s,
+  dismissible: n = !1,
+  open: a,
+  onClose: o,
+  fullWidth: c = !0,
+  className: d = "",
+  children: i,
+  ...u
+}) => {
+  const [g, m] = N(!0);
+  if (!(a !== void 0 ? a : g)) return null;
+  const f = A[r], x = s ?? (r === "success" ? "✅" : r === "warning" ? "⚠️" : r === "error" ? "⛔" : r === "neutral" ? "💡" : "ℹ️"), p = r === "error" || r === "warning" ? "alert" : "status", y = () => {
+    a === void 0 && m(!1), o && o();
+  };
+  return /* @__PURE__ */ e("div", { className: c ? "w-full" : "inline-flex", ...u, children: /* @__PURE__ */ b(
+    "div",
+    {
+      className: `
+          flex w-full items-start gap-3 border rounded-lg px-4 py-3
+          shadow-sm ${f} ${d}
+        `,
+      role: p,
+      children: [
+        x && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xl shrink-0", "aria-hidden": "true", children: x }),
+        /* @__PURE__ */ b("div", { className: "flex-1 min-w-0", children: [
+          l && /* @__PURE__ */ e("p", { className: "text-sm font-semibold leading-5 truncate", children: l }),
+          t && /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs sm:text-sm leading-5", children: t }),
+          i
+        ] }),
+        n && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "shrink-0 p-1.5 rounded-md hover:bg-black/5 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500",
+            onClick: y,
+            "aria-label": "Cerrar aviso",
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                className: "w-4 h-4",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: `M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 
+                1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 
+                1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 
+                10 4.293 5.707a1 1 0 010-1.414z`,
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}, q = ({
+  variant: l = "info",
+  title: t,
+  description: r,
+  icon: s,
+  dismissible: n = !1,
+  open: a,
+  onClose: o,
+  className: c = "",
+  children: d,
+  ...i
+}) => {
+  const [u, g] = N(!0);
+  if (!(a !== void 0 ? a : u)) return null;
+  const h = s ?? (l === "success" ? "✅" : l === "warning" ? "⚠️" : l === "danger" ? "⛔" : "ℹ️"), f = l === "success" ? "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-800/70 dark:bg-emerald-900/30 dark:text-emerald-50" : l === "warning" ? "border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-800/70 dark:bg-amber-900/30 dark:text-amber-50" : l === "danger" ? "border-red-200 bg-red-50 text-red-900 dark:border-red-800/70 dark:bg-red-900/30 dark:text-red-50" : "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800/70 dark:bg-blue-900/30 dark:text-blue-50", x = () => {
+    a === void 0 && g(!1), o && o();
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "alert",
+      className: `
+        w-full mb-3
+        rounded-lg border
+        px-3 py-3.5 sm:px-4 sm:py-3.5
+        ${f}
+        ${c}
+      `,
+      ...i,
+      children: /* @__PURE__ */ b("div", { className: "flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "flex-shrink-0 mt-0.5 sm:mt-0 text-lg sm:text-xl", children: h }),
+        /* @__PURE__ */ b("div", { className: "flex-1 min-w-0 text-xs sm:text-sm leading-relaxed", children: [
+          t && /* @__PURE__ */ e("p", { className: "font-semibold mb-0.5 sm:mb-1 truncate", children: t }),
+          r && /* @__PURE__ */ e("p", { className: "text-[11px] sm:text-xs md:text-sm opacity-90", children: r }),
+          d
+        ] }),
+        n && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: `
+              self-start sm:self-center
+              -mr-1 sm:ml-2
+              inline-flex h-7 w-7 items-center justify-center
+              rounded-md
+              text-xs sm:text-sm
+              hover:bg-black/5 dark:hover:bg-white/10
+              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500
+            `,
+            "aria-label": "Cerrar alerta",
+            onClick: x,
+            children: "✕"
+          }
+        )
+      ] })
+    }
+  );
+}, J = ({
+  content: l,
+  side: t = "top",
+  delayMs: r = 200,
+  arrow: s = !0,
+  disabled: n = !1,
+  className: a = "",
+  onOpenChange: o,
+  children: c
+}) => {
+  const [d, i] = N(!1), u = j(null), g = I(), m = (y) => {
+    i(y), o && o(y);
+  }, h = () => {
+    n || (u.current && (clearTimeout(u.current), u.current = null), u.current = window.setTimeout(() => {
+      m(!0);
+    }, r));
+  }, f = () => {
+    u.current && (clearTimeout(u.current), u.current = null), m(!1);
+  };
+  M(() => () => {
+    u.current && clearTimeout(u.current);
+  }, []);
+  const x = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  }, p = {
+    top: "bottom-[-4px] left-1/2 -translate-x-1/2 border-b border-r",
+    bottom: "top-[-4px] left-1/2 -translate-x-1/2 border-t border-l",
+    left: "right-[-4px] top-1/2 -translate-y-1/2 border-t border-r",
+    right: "left-[-4px] top-1/2 -translate-y-1/2 border-b border-l"
+  };
+  return /* @__PURE__ */ b(
+    "span",
+    {
+      className: `relative inline-flex ${a}`,
+      onMouseEnter: h,
+      onMouseLeave: f,
+      onFocus: h,
+      onBlur: f,
+      "aria-describedby": d ? g : void 0,
+      children: [
+        c,
+        !n && d && /* @__PURE__ */ e(
+          "div",
+          {
+            id: g,
+            role: "tooltip",
+            className: `
+            absolute z-50
+            ${x[t]}
+            animate-in fade-in zoom-in-95 duration-200
+            min-w-max
+          `,
+            children: /* @__PURE__ */ b(
+              "div",
+              {
+                className: `
+              relative
+              px-3 py-2
+              text-xs font-medium text-white
+              bg-gray-900 dark:bg-gray-700
+              rounded-md shadow-lg
+              pointer-events-none
+            `,
+                children: [
+                  l,
+                  s && /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: `
+                  absolute w-2 h-2
+                  bg-gray-900 dark:bg-gray-700
+                  rotate-45
+                  ${p[t]}
+                `
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, G = ({
+  open: l,
+  variant: t = "info",
+  title: r,
+  subtitle: s,
+  position: n = "bottom-right",
+  showIcon: a = !0,
+  dismissible: o = !0,
+  onClose: c
+}) => {
+  if (!l) return null;
+  const d = t === "success" ? "bg-emerald-50 text-emerald-900 border-emerald-200 dark:bg-emerald-900/40 dark:text-emerald-50 dark:border-emerald-700" : t === "warning" ? "bg-amber-50 text-amber-900 border-amber-200 dark:bg-amber-900/40 dark:text-amber-50 dark:border-amber-700" : t === "error" ? "bg-red-50 text-red-900 border-red-200 dark:bg-red-900/40 dark:text-red-50 dark:border-red-700" : "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-900/40 dark:text-blue-50 dark:border-blue-700", i = t === "success" ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/80 dark:text-emerald-100" : t === "warning" ? "bg-amber-100 text-amber-700 dark:bg-amber-900/80 dark:text-amber-100" : t === "error" ? "bg-red-100 text-red-700 dark:bg-red-900/80 dark:text-red-100" : "bg-blue-100 text-blue-700 dark:bg-blue-900/80 dark:text-blue-100", u = () => t === "success" ? /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm4.3 8.3-4.58 4.59a1 1 0 0 1-1.42 0L7.7 12.29a1 1 0 0 1 1.4-1.42l1.9 1.89 3.88-3.88a1 1 0 1 1 1.42 1.42Z"
+    }
+  ) }) : t === "warning" ? /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm1 13h-2v-2h2Zm0-4h-2V7h2Z"
+    }
+  ) }) : t === "error" ? /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm3.71 12.29a1 1 0 1 1-1.42 1.42L12 13.41l-2.29 2.3a1 1 0 0 1-1.42-1.42L10.59 12 8.3 9.71a1 1 0 0 1 1.42-1.42L12 10.59l2.29-2.3a1 1 0 0 1 1.42 1.42L13.41 12Z"
+    }
+  ) }) : /* @__PURE__ */ e("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm1 14h-2v-4h2Zm0-6h-2V8h2Z"
+    }
+  ) }), g = () => {
+    switch (n) {
+      case "top-left":
+        return `
+          top-4 inset-x-2
+          sm:inset-x-auto sm:top-4 sm:left-4
+          flex justify-center sm:justify-start
+        `;
+      case "top-center":
+        return `
+          top-4 inset-x-2
+          flex justify-center
+        `;
+      case "top-right":
+        return `
+          top-4 inset-x-2
+          sm:inset-x-auto sm:top-4 sm:right-4
+          flex justify-center sm:justify-end
+        `;
+      case "bottom-left":
+        return `
+          bottom-4 inset-x-2
+          sm:inset-x-auto sm:bottom-4 sm:left-4
+          flex justify-center sm:justify-start
+        `;
+      case "bottom-center":
+        return `
+          bottom-4 inset-x-2
+          flex justify-center
+        `;
+      default:
+        return `
+          bottom-4 inset-x-2
+          sm:inset-x-auto sm:bottom-4 sm:right-4
+          flex justify-center sm:justify-end
+        `;
+    }
+  }, m = t === "error" || t === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `
+        fixed z-50 pointer-events-none
+        ${g()}
+      `,
+      "aria-live": m === "alert" ? "assertive" : "polite",
+      "aria-atomic": "true",
+      children: /* @__PURE__ */ b(
+        "div",
+        {
+          className: `
+          max-w-sm w-full
+          rounded-lg border shadow-lg
+          px-4 py-3
+          flex items-start gap-3
+          ${d}
+          pointer-events-auto
+        `,
+          role: m,
+          children: [
+            a && /* @__PURE__ */ e(
+              "div",
+              {
+                className: `
+              mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center
+              rounded-full
+              ${i}
+            `,
+                children: /* @__PURE__ */ e(u, {})
+              }
+            ),
+            /* @__PURE__ */ b("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-semibold truncate", children: r }),
+              s && /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs sm:text-sm text-current/90 break-words", children: s })
+            ] }),
+            o && c && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "ml-2 inline-flex text-xs text-current/70 hover:text-current focus:outline-none focus:ring-2 focus:ring-current/40 rounded",
+                "aria-label": "Cerrar notificación",
+                onClick: c,
+                children: "✕"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, Q = ({
+  value: l = 0,
+  max: t = 100,
+  label: r,
+  showPercentage: s = !1,
+  labelInside: n = !1,
+  labelAlign: a = "left",
+  striped: o = !1,
+  animated: c = !1,
+  indeterminate: d = !1,
+  size: i = "md",
+  variant: u = "primary",
+  className: g = "",
+  ...m
+}) => {
+  const h = Math.max(0, Math.min(l, t)), f = Math.round(h / t * 100), x = {
+    xs: "h-1.5 text-[0px]",
+    sm: "h-2.5 text-[10px]",
+    md: "h-4 text-xs",
+    lg: "h-6 text-sm",
+    xl: "h-8 text-base"
+  }, p = {
+    primary: "bg-blue-600 dark:bg-blue-500",
+    success: "bg-emerald-500 dark:bg-emerald-400",
+    warning: "bg-amber-500 dark:bg-amber-400",
+    danger: "bg-red-600 dark:bg-red-500",
+    neutral: "bg-gray-600 dark:bg-gray-500",
+    gradient: "bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-400 dark:to-purple-500"
+  }, y = o || c || d ? {
+    backgroundImage: "linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)",
+    backgroundSize: "1rem 1rem"
+  } : {}, v = c || d ? "animate-[progress-stripes_1s_linear_infinite]" : "", w = () => n || !r && !s ? null : /* @__PURE__ */ b("div", { className: `flex mb-1 ${a === "center" ? "justify-center" : a === "right" ? "justify-end" : "justify-between"}`, children: [
+    r && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300 mr-2", children: r }),
+    s && /* @__PURE__ */ e("span", { className: `text-xs font-semibold text-gray-700 dark:text-gray-200 ${a === "center" || a === "right" ? "ml-2" : ""}`, children: d ? "" : `${f}%` })
+  ] });
+  return /* @__PURE__ */ b("div", { className: `w-full ${g}`, ...m, children: [
+    w(),
+    /* @__PURE__ */ e("div", { className: `w-full bg-gray-200 rounded-full dark:bg-gray-700 overflow-hidden ${x[i]}`, children: /* @__PURE__ */ b(
+      "div",
+      {
+        className: `
+            h-full rounded-full
+            relative overflow-hidden
+            flex items-center justify-center
+            text-white font-medium leading-none
+            transition-all duration-500 ease-out
+            ${p[u]}
+            ${d ? "w-full origin-left animate-pulse" : ""} 
+          `,
+        style: {
+          width: d ? "100%" : `${f}%`
+        },
+        role: "progressbar",
+        "aria-valuenow": d ? void 0 : h,
+        "aria-valuemin": 0,
+        "aria-valuemax": t,
+        "aria-label": r || "Progress bar",
+        children: [
+          (o || c || d) && /* @__PURE__ */ e(
+            "div",
+            {
+              className: `absolute inset-0 w-full h-full z-0 ${v}`,
+              style: y
+            }
+          ),
+          n && !d && i !== "xs" && /* @__PURE__ */ b("span", { className: "relative z-10 px-2 truncate drop-shadow-sm", children: [
+            r,
+            " ",
+            s ? ` ${f}%` : ""
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}, X = ({
+  value: l = 0,
+  max: t = 5,
+  readOnly: r = !1,
+  size: s = "md",
+  variant: n = "warning",
+  showValue: a = !1,
+  tooltips: o = [],
+  className: c = "",
+  onChange: d
+}) => {
+  const [i, u] = N(null), g = {
+    xs: "w-3 h-3",
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8",
+    xl: "w-10 h-10"
+  }, h = {
+    warning: "text-yellow-400",
+    primary: "text-blue-500",
+    danger: "text-red-500",
+    success: "text-emerald-500"
+  }[n], f = "text-gray-300 dark:text-gray-600", x = (C) => {
+    r || !d || d(C);
+  }, p = (C) => {
+    r || u(C);
+  }, y = () => {
+    r || u(null);
+  }, v = i ?? l, w = i && o.length >= i ? o[i - 1] : null;
+  return /* @__PURE__ */ b("div", { className: `inline-flex flex-col ${c}`, children: [
+    /* @__PURE__ */ b("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "flex items-center",
+          onMouseLeave: y,
+          role: r ? "img" : "slider",
+          "aria-label": "Rating",
+          "aria-valuemin": 1,
+          "aria-valuemax": t,
+          "aria-valuenow": v,
+          "aria-valuetext": w || `${v} de ${t}`,
+          children: Array.from({ length: t }, (C, B) => {
+            const k = B + 1, z = k <= v, R = i === k;
+            return /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                disabled: r,
+                onClick: () => x(k),
+                onMouseEnter: () => p(k),
+                "aria-label": `Calificar ${k} estrellas`,
+                className: `
+                  relative
+                  transition-transform duration-200 ease-out
+                  focus:outline-none focus-visible:scale-110
+                  ${r ? "cursor-default" : "cursor-pointer hover:scale-110"}
+                  ${g[s]}
+                  ${z ? h : f}
+                  ${R && !r ? "scale-125" : ""}
+                `,
+                children: /* @__PURE__ */ e(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    className: "w-full h-full drop-shadow-sm",
+                    children: /* @__PURE__ */ e(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                )
+              },
+              k
+            );
+          })
+        }
+      ),
+      a && /* @__PURE__ */ b("span", { className: "ml-2 text-sm font-medium text-gray-600 dark:text-gray-300", children: [
+        l,
+        "/",
+        t
+      ] })
+    ] }),
+    o.length > 0 && /* @__PURE__ */ e("div", { className: "h-5 mt-1", children: /* @__PURE__ */ e("span", { className: `
+              text-xs font-medium transition-opacity duration-300
+              ${w ? "opacity-100" : "opacity-0"}
+              ${n === "danger" ? "text-red-600" : n === "success" ? "text-emerald-600" : "text-gray-500 dark:text-gray-400"}
+           `, children: w || "Select" }) })
+  ] });
+}, Y = ({ helperText: l, error: t, value: r, maxLength: s, showCount: n }) => {
+  const a = r?.toString().length || 0, o = !!t, c = s ? a >= s * 0.9 : !1, d = s ? a >= s : !1;
+  return !l && !t && !n ? null : /* @__PURE__ */ b("div", { className: "flex items-start justify-between mt-1.5 px-1 gap-4", children: [
+    /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: o ? /* @__PURE__ */ b("p", { className: "text-xs font-medium text-red-500 flex items-center gap-1 animate-in slide-in-from-left-1 duration-200", children: [
+      /* @__PURE__ */ e("svg", { className: "w-3 h-3 flex-shrink-0", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+      t
+    ] }) : l ? /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400 leading-tight", children: l }) : null }),
+    n && s && /* @__PURE__ */ b(
+      "div",
+      {
+        className: `
+            text-[10px] font-mono font-medium transition-colors duration-300
+            ${o || d ? "text-red-500" : c ? "text-amber-500" : "text-gray-400 dark:text-gray-500"}
+          `,
+        children: [
+          a,
+          "/",
+          s
+        ]
+      }
+    )
+  ] });
+};
+export {
+  q as CodeplexAlert,
+  _ as CodeplexAvatar,
+  E as CodeplexBadge,
+  U as CodeplexBanner,
+  Z as CodeplexButton,
+  P as CodeplexCard,
+  Y as CodeplexInputHelper,
+  K as CodeplexJumbotron,
+  F as CodeplexKbd,
+  Q as CodeplexProgress,
+  X as CodeplexRating,
+  O as CodeplexRequirementsPopup,
+  D as CodeplexSmartLabel,
+  W as CodeplexSpinner,
+  G as CodeplexToast,
+  J as CodeplexTooltip,
+  H as Ui
+};