framepexls-ui-lib 2.1.0 → 2.2.1

package/dist/AssetTickerRow.mjs

@@ -0,0 +1,225 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { TrendDownIcon, TrendUpIcon } from "./iconos/index.mjs";
+import { formatCurrencyValue, formatNumericValue, formatPercentValue } from "./Numeric.mjs";
+function alphaColor(color, alpha, fallback) {
+  if (!color) return fallback;
+  if (color.startsWith("#")) {
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length === 6) {
+      const r = Number.parseInt(hex.slice(0, 2), 16);
+      const g = Number.parseInt(hex.slice(2, 4), 16);
+      const b = Number.parseInt(hex.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+  }
+  return `color-mix(in oklab, ${color} ${Math.round(alpha * 100)}%, transparent)`;
+}
+function Sparkline({
+  data,
+  color,
+  width = 128,
+  height = 56
+}) {
+  var _a;
+  const gradientId = React.useId();
+  if (!Array.isArray(data) || data.length < 2) {
+    return /* @__PURE__ */ jsx("div", { className: "h-8 w-20 rounded-full bg-[color-mix(in_oklab,var(--surface)_80%,transparent)]" });
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const step = width / Math.max(1, data.length - 1);
+  const points = data.map((value, index) => {
+    const x = index * step;
+    const y = height - (value - min) / range * height;
+    return `${x},${y}`;
+  }).join(" ");
+  const areaPoints = `0,${height} ${points} ${width},${height}`;
+  const last = (_a = data[data.length - 1]) != null ? _a : 0;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: "h-14 w-32 overflow-visible",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${gradientId}-line`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: alphaColor(color, 0.24, color) }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${gradientId}-fill`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: alphaColor(color, 0.4, color) }),
+            /* @__PURE__ */ jsx("stop", { offset: "58%", stopColor: alphaColor(color, 0.18, color) }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: alphaColor(color, 0.02, color) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: areaPoints,
+            fill: `url(#${gradientId}-fill)`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            fill: "none",
+            stroke: `url(#${gradientId}-line)`,
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            points
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: width,
+            cy: height - (last - min) / range * height,
+            r: "2.75",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+function AssetAvatar({ symbol, accent, icon }) {
+  if (icon) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-white shadow-sm",
+        style: { background: accent != null ? accent : "var(--primary)" },
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold text-white shadow-sm",
+      style: { background: accent != null ? accent : "var(--primary)" },
+      children: symbol.slice(0, 3).toUpperCase()
+    }
+  );
+}
+function AssetTickerRow({
+  items,
+  locale = "es-MX",
+  className,
+  selectedId,
+  onSelect,
+  priceFormatter
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "grid gap-3 sm:grid-cols-2 xl:grid-cols-3",
+        className != null ? className : ""
+      ].join(" "),
+      children: items.map((item) => {
+        var _a, _b, _c, _d, _e;
+        const positive = ((_b = (_a = item.changePercent) != null ? _a : item.change) != null ? _b : 0) >= 0;
+        const accent = (_c = item.accent) != null ? _c : "var(--primary)";
+        const selected = selectedId === item.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect == null ? void 0 : onSelect(item),
+            className: [
+              "group relative flex w-full items-center gap-4 overflow-hidden rounded-[1.6rem] border px-4 py-3 text-left shadow-sm transition",
+              "bg-[linear-gradient(180deg,color-mix(in_oklab,var(--card)_96%,white),var(--card))]",
+              "hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--ring)_35%,transparent)]",
+              selected ? "border-[color-mix(in_oklab,var(--ring)_40%,transparent)] ring-1 ring-[color-mix(in_oklab,var(--ring)_22%,transparent)]" : "border-[var(--border)]"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 sm:block",
+                  style: {
+                    background: `linear-gradient(90deg, transparent 0%, ${alphaColor(accent, 0.08, accent)} 32%, ${alphaColor(accent, 0.18, accent)} 100%)`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-x-4 bottom-0 h-px",
+                  style: { background: `linear-gradient(90deg, transparent, ${alphaColor(accent, 0.42, accent)}, transparent)` }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 shrink-0", children: /* @__PURE__ */ jsx(AssetAvatar, { symbol: item.symbol, accent, icon: item.icon }) }),
+              /* @__PURE__ */ jsxs("div", { className: "relative z-10 min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-[15px] font-semibold text-[var(--foreground)]", children: item.name }),
+                  /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[color-mix(in_oklab,var(--surface)_82%,transparent)] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--muted)]", children: item.symbol })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tabular-nums text-[var(--foreground)]", children: priceFormatter ? priceFormatter(item.price, item, locale) : formatCurrencyValue(item.price, {
+                    currency: (_d = item.priceCurrency) != null ? _d : "USD",
+                    locale,
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                  }) }),
+                  item.changePercent != null ? /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: [
+                        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold",
+                        positive ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
+                      ].join(" "),
+                      children: [
+                        positive ? /* @__PURE__ */ jsx(TrendUpIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(TrendDownIcon, { className: "h-3.5 w-3.5" }),
+                        formatPercentValue(item.changePercent, {
+                          locale,
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2
+                        })
+                      ]
+                    }
+                  ) : item.change != null ? /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: [
+                        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold",
+                        positive ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
+                      ].join(" "),
+                      children: [
+                        positive ? /* @__PURE__ */ jsx(TrendUpIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(TrendDownIcon, { className: "h-3.5 w-3.5" }),
+                        formatNumericValue(item.change, {
+                          locale,
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                          prefix: item.change > 0 ? "+" : ""
+                        })
+                      ]
+                    }
+                  ) : null
+                ] }),
+                item.meta ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--muted)]", children: item.meta }) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 hidden shrink-0 sm:block", children: /* @__PURE__ */ jsx(Sparkline, { data: (_e = item.sparkline) != null ? _e : [], color: accent }) })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+export {
+  AssetTickerRow as default
+};

package/dist/AuthTopbar.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { ChatUser, ChatThread, ChatMessage, ChatPresenceUser } from './ChatCenter.mjs';
 import { LanguageOption } from './LanguageSwitcher.mjs';
@@ -61,6 +60,7 @@ type AuthTopbarBrowserNotifications = {
 type AuthTopbarProps = {
     title: string;
     subtitle?: string;
+    contentClassName?: string;
     user?: SidebarUser;
     loading?: boolean;
     loadingMinDurationMs?: number;
@@ -117,6 +117,6 @@ type AuthTopbarProps = {
         }) => void | Promise<void>;
     };
 };
-declare function AuthTopbar({ title, subtitle, user, loading, loadingMinDurationMs, onLogout, onNavigate, passwordHref, invitesHref, pendingInvites, accountMenuEntries, settingsMenuEntries, showSearchButton, appearance, omniSearch, tour, browserNotifications, impersonation, notifications, chat, }: AuthTopbarProps): react_jsx_runtime.JSX.Element;
+declare function AuthTopbar({ title, subtitle, contentClassName, user, loading, loadingMinDurationMs, onLogout, onNavigate, passwordHref, invitesHref, pendingInvites, accountMenuEntries, settingsMenuEntries, showSearchButton, appearance, omniSearch, tour, browserNotifications, impersonation, notifications, chat, }: AuthTopbarProps): React__default.JSX.Element;
 
 export { type AuthTopbarAccountMenuEntry, type AuthTopbarAccountMenuItem, type AuthTopbarBrowserNotifications, type AuthTopbarProps, type AuthTopbarSettingsMenuEntry, type AuthTopbarSettingsMenuItem, AuthTopbar as default };

package/dist/AuthTopbar.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { ChatUser, ChatThread, ChatMessage, ChatPresenceUser } from './ChatCenter.js';
 import { LanguageOption } from './LanguageSwitcher.js';
@@ -61,6 +60,7 @@ type AuthTopbarBrowserNotifications = {
 type AuthTopbarProps = {
     title: string;
     subtitle?: string;
+    contentClassName?: string;
     user?: SidebarUser;
     loading?: boolean;
     loadingMinDurationMs?: number;
@@ -117,6 +117,6 @@ type AuthTopbarProps = {
         }) => void | Promise<void>;
     };
 };
-declare function AuthTopbar({ title, subtitle, user, loading, loadingMinDurationMs, onLogout, onNavigate, passwordHref, invitesHref, pendingInvites, accountMenuEntries, settingsMenuEntries, showSearchButton, appearance, omniSearch, tour, browserNotifications, impersonation, notifications, chat, }: AuthTopbarProps): react_jsx_runtime.JSX.Element;
+declare function AuthTopbar({ title, subtitle, contentClassName, user, loading, loadingMinDurationMs, onLogout, onNavigate, passwordHref, invitesHref, pendingInvites, accountMenuEntries, settingsMenuEntries, showSearchButton, appearance, omniSearch, tour, browserNotifications, impersonation, notifications, chat, }: AuthTopbarProps): React__default.JSX.Element;
 
 export { type AuthTopbarAccountMenuEntry, type AuthTopbarAccountMenuItem, type AuthTopbarBrowserNotifications, type AuthTopbarProps, type AuthTopbarSettingsMenuEntry, type AuthTopbarSettingsMenuItem, AuthTopbar as default };

package/dist/AuthTopbar.js

@@ -53,6 +53,7 @@ var import_skeleton = require("./internal/skeleton");
 function AuthTopbar({
   title,
   subtitle,
+  contentClassName,
   user,
   loading,
   loadingMinDurationMs = import_skeleton.DEFAULT_SKELETON_MIN_DURATION_MS,
@@ -331,7 +332,7 @@ function AuthTopbar({
       className: ["sticky top-14 xl:top-0 z-30 border-b border-[var(--border)] bg-[var(--card)] shadow-sm"].join(" "),
       "aria-busy": showLoading ? "true" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-3 px-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: contentClassName != null ? contentClassName : "mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-3 px-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-w-0", children: showLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: "10rem", height: 12, borderRadius: 10 } }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fx-skeleton", style: { width: "14rem", height: 10, borderRadius: 10, opacity: 0.9 } })

package/dist/AuthTopbar.mjs

@@ -32,6 +32,7 @@ import { DEFAULT_SKELETON_MIN_DURATION_MS, useMinVisible } from "./internal/skel
 function AuthTopbar({
   title,
   subtitle,
+  contentClassName,
   user,
   loading,
   loadingMinDurationMs = DEFAULT_SKELETON_MIN_DURATION_MS,
@@ -310,7 +311,7 @@ function AuthTopbar({
       className: ["sticky top-14 xl:top-0 z-30 border-b border-[var(--border)] bg-[var(--card)] shadow-sm"].join(" "),
       "aria-busy": showLoading ? "true" : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-3 px-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: contentClassName != null ? contentClassName : "mx-auto flex h-14 w-full max-w-7xl items-center justify-between gap-3 px-4", children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0", children: showLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: "10rem", height: 12, borderRadius: 10 } }),
             /* @__PURE__ */ jsx("div", { className: "fx-skeleton", style: { width: "14rem", height: 10, borderRadius: 10, opacity: 0.9 } })

package/dist/AvatarGroup.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type Props = {
     sources?: Array<string | null | undefined>;
@@ -11,6 +11,6 @@ type Props = {
     className?: string;
     showCounter?: boolean;
 };
-declare function AvatarGroup({ sources, images, labels, max, size, overlap, radiusClass, className, showCounter, }: Props): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup({ sources, images, labels, max, size, overlap, radiusClass, className, showCounter, }: Props): React.JSX.Element;
 
 export { AvatarGroup as default };

package/dist/AvatarGroup.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type Props = {
     sources?: Array<string | null | undefined>;
@@ -11,6 +11,6 @@ type Props = {
     className?: string;
     showCounter?: boolean;
 };
-declare function AvatarGroup({ sources, images, labels, max, size, overlap, radiusClass, className, showCounter, }: Props): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup({ sources, images, labels, max, size, overlap, radiusClass, className, showCounter, }: Props): React.JSX.Element;
 
 export { AvatarGroup as default };

package/dist/AvatarSquare.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type Props = {
     size?: number;
@@ -10,6 +10,6 @@ type Props = {
     radiusClass?: string;
     color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function AvatarSquare({ size, src, alt, initials, imageFit, className, radiusClass, color, }: Props): react_jsx_runtime.JSX.Element;
+declare function AvatarSquare({ size, src, alt, initials, imageFit, className, radiusClass, color, }: Props): React__default.JSX.Element;
 
 export { AvatarSquare as default };

package/dist/AvatarSquare.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type Props = {
     size?: number;
@@ -10,6 +10,6 @@ type Props = {
     radiusClass?: string;
     color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function AvatarSquare({ size, src, alt, initials, imageFit, className, radiusClass, color, }: Props): react_jsx_runtime.JSX.Element;
+declare function AvatarSquare({ size, src, alt, initials, imageFit, className, radiusClass, color, }: Props): React__default.JSX.Element;
 
 export { AvatarSquare as default };

package/dist/AvatarSquare.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(AvatarSquare_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_image = __toESM(require("next/image"));
+var import_iconos = require("./iconos");
 function AvatarSquare({
   size = 32,
   src,
@@ -73,31 +74,32 @@ function AvatarSquare({
     pink: "ring-pink-300/40 dark:ring-pink-300/20",
     rose: "ring-rose-300/40 dark:ring-rose-300/20"
   };
-  const GRADIENT = {
-    accent: "bg-gradient-to-br from-[color-mix(in_oklab,var(--primary)_14%,white)] to-[color-mix(in_oklab,var(--primary)_28%,white)] dark:from-[color-mix(in_oklab,var(--primary)_16%,black)] dark:to-[color-mix(in_oklab,var(--primary)_30%,black)]",
-    slate: "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900/20 dark:to-slate-800/20",
-    gray: "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900/20 dark:to-gray-800/20",
-    zinc: "bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900/20 dark:to-zinc-800/20",
-    neutral: "bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-900/20 dark:to-neutral-800/20",
-    stone: "bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900/20 dark:to-stone-800/20",
-    red: "bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900/20 dark:to-red-800/20",
-    orange: "bg-gradient-to-br from-orange-100 to-orange-200 dark:from-orange-900/20 dark:to-orange-800/20",
-    amber: "bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-900/20 dark:to-amber-800/20",
-    yellow: "bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900/20 dark:to-yellow-800/20",
-    lime: "bg-gradient-to-br from-lime-100 to-lime-200 dark:from-lime-900/20 dark:to-lime-800/20",
-    green: "bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/20 dark:to-green-800/20",
-    emerald: "bg-gradient-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/20 dark:to-emerald-800/20",
-    teal: "bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-900/20 dark:to-teal-800/20",
-    cyan: "bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900/20 dark:to-cyan-800/20",
-    sky: "bg-gradient-to-br from-sky-100 to-sky-200 dark:from-sky-900/20 dark:to-sky-800/20",
-    blue: "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20",
-    indigo: "bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900/20 dark:to-indigo-800/20",
-    violet: "bg-gradient-to-br from-violet-100 to-violet-200 dark:from-violet-900/20 dark:to-violet-800/20",
-    purple: "bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/20 dark:to-purple-800/20",
-    fuchsia: "bg-gradient-to-br from-fuchsia-100 to-fuchsia-200 dark:from-fuchsia-900/20 dark:to-fuchsia-800/20",
-    pink: "bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/20 dark:to-pink-800/20",
-    rose: "bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900/20 dark:to-rose-800/20"
+  const FALLBACK_STYLE = {
+    accent: "bg-[color-mix(in_oklab,var(--primary)_12%,var(--card))] text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] dark:bg-[color-mix(in_oklab,var(--primary)_18%,var(--card))] dark:text-[color-mix(in_oklab,var(--primary)_54%,var(--foreground))]",
+    slate: "bg-slate-100 text-slate-700 dark:bg-slate-800/55 dark:text-slate-200",
+    gray: "bg-gray-100 text-gray-700 dark:bg-gray-800/55 dark:text-gray-200",
+    zinc: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800/55 dark:text-zinc-200",
+    neutral: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800/55 dark:text-neutral-200",
+    stone: "bg-stone-100 text-stone-700 dark:bg-stone-800/55 dark:text-stone-200",
+    red: "bg-red-50 text-red-700 dark:bg-red-500/16 dark:text-red-200",
+    orange: "bg-orange-50 text-orange-700 dark:bg-orange-500/16 dark:text-orange-200",
+    amber: "bg-amber-50 text-amber-700 dark:bg-amber-500/16 dark:text-amber-200",
+    yellow: "bg-yellow-50 text-yellow-700 dark:bg-yellow-500/16 dark:text-yellow-200",
+    lime: "bg-lime-50 text-lime-700 dark:bg-lime-500/16 dark:text-lime-200",
+    green: "bg-green-50 text-green-700 dark:bg-green-500/16 dark:text-green-200",
+    emerald: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/16 dark:text-emerald-200",
+    teal: "bg-teal-50 text-teal-700 dark:bg-teal-500/16 dark:text-teal-200",
+    cyan: "bg-cyan-50 text-cyan-700 dark:bg-cyan-500/16 dark:text-cyan-200",
+    sky: "bg-sky-50 text-sky-700 dark:bg-sky-500/16 dark:text-sky-200",
+    blue: "bg-blue-50 text-blue-700 dark:bg-blue-500/16 dark:text-blue-200",
+    indigo: "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/16 dark:text-indigo-200",
+    violet: "bg-violet-50 text-violet-700 dark:bg-violet-500/16 dark:text-violet-200",
+    purple: "bg-purple-50 text-purple-700 dark:bg-purple-500/16 dark:text-purple-200",
+    fuchsia: "bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-500/16 dark:text-fuchsia-200",
+    pink: "bg-pink-50 text-pink-700 dark:bg-pink-500/16 dark:text-pink-200",
+    rose: "bg-rose-50 text-rose-700 dark:bg-rose-500/16 dark:text-rose-200"
   };
+  const fallbackText = typeof initials === "string" && initials.trim() ? initials.trim() : alt ? alt.split(/\s+/).slice(0, 2).map((s) => s[0]).join("") : "";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -124,14 +126,14 @@ function AvatarSquare({
         "div",
         {
           className: [
-            "grid place-items-center h-full w-full text-[0.6875rem] font-semibold uppercase tracking-wide text-[var(--foreground)]",
+            "grid place-items-center h-full w-full text-[0.6875rem] font-semibold uppercase tracking-wide",
             "drop-shadow-[0_1px_0_rgba(0,0,0,0.10)] dark:drop-shadow-none",
             radiusClass,
-            GRADIENT[color]
+            FALLBACK_STYLE[color]
           ].join(" "),
           "aria-label": alt || initials || "avatar",
           title: alt || initials || void 0,
-          children: typeof initials === "string" && initials.trim() ? initials.trim() : alt ? alt.split(/\s+/).slice(0, 2).map((s) => s[0]).join("") : ""
+          children: fallbackText ? fallbackText : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ImageIcon, { className: "h-[52%] w-[52%]" })
         }
       )
     }

package/dist/AvatarSquare.mjs

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import Image from "next/image";
+import { ImageIcon } from "./iconos/index.mjs";
 function AvatarSquare({
   size = 32,
   src,
@@ -40,31 +41,32 @@ function AvatarSquare({
     pink: "ring-pink-300/40 dark:ring-pink-300/20",
     rose: "ring-rose-300/40 dark:ring-rose-300/20"
   };
-  const GRADIENT = {
-    accent: "bg-gradient-to-br from-[color-mix(in_oklab,var(--primary)_14%,white)] to-[color-mix(in_oklab,var(--primary)_28%,white)] dark:from-[color-mix(in_oklab,var(--primary)_16%,black)] dark:to-[color-mix(in_oklab,var(--primary)_30%,black)]",
-    slate: "bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900/20 dark:to-slate-800/20",
-    gray: "bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900/20 dark:to-gray-800/20",
-    zinc: "bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-900/20 dark:to-zinc-800/20",
-    neutral: "bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-900/20 dark:to-neutral-800/20",
-    stone: "bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900/20 dark:to-stone-800/20",
-    red: "bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900/20 dark:to-red-800/20",
-    orange: "bg-gradient-to-br from-orange-100 to-orange-200 dark:from-orange-900/20 dark:to-orange-800/20",
-    amber: "bg-gradient-to-br from-amber-100 to-amber-200 dark:from-amber-900/20 dark:to-amber-800/20",
-    yellow: "bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900/20 dark:to-yellow-800/20",
-    lime: "bg-gradient-to-br from-lime-100 to-lime-200 dark:from-lime-900/20 dark:to-lime-800/20",
-    green: "bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/20 dark:to-green-800/20",
-    emerald: "bg-gradient-to-br from-emerald-100 to-emerald-200 dark:from-emerald-900/20 dark:to-emerald-800/20",
-    teal: "bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-900/20 dark:to-teal-800/20",
-    cyan: "bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900/20 dark:to-cyan-800/20",
-    sky: "bg-gradient-to-br from-sky-100 to-sky-200 dark:from-sky-900/20 dark:to-sky-800/20",
-    blue: "bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/20 dark:to-blue-800/20",
-    indigo: "bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900/20 dark:to-indigo-800/20",
-    violet: "bg-gradient-to-br from-violet-100 to-violet-200 dark:from-violet-900/20 dark:to-violet-800/20",
-    purple: "bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/20 dark:to-purple-800/20",
-    fuchsia: "bg-gradient-to-br from-fuchsia-100 to-fuchsia-200 dark:from-fuchsia-900/20 dark:to-fuchsia-800/20",
-    pink: "bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/20 dark:to-pink-800/20",
-    rose: "bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900/20 dark:to-rose-800/20"
+  const FALLBACK_STYLE = {
+    accent: "bg-[color-mix(in_oklab,var(--primary)_12%,var(--card))] text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] dark:bg-[color-mix(in_oklab,var(--primary)_18%,var(--card))] dark:text-[color-mix(in_oklab,var(--primary)_54%,var(--foreground))]",
+    slate: "bg-slate-100 text-slate-700 dark:bg-slate-800/55 dark:text-slate-200",
+    gray: "bg-gray-100 text-gray-700 dark:bg-gray-800/55 dark:text-gray-200",
+    zinc: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800/55 dark:text-zinc-200",
+    neutral: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800/55 dark:text-neutral-200",
+    stone: "bg-stone-100 text-stone-700 dark:bg-stone-800/55 dark:text-stone-200",
+    red: "bg-red-50 text-red-700 dark:bg-red-500/16 dark:text-red-200",
+    orange: "bg-orange-50 text-orange-700 dark:bg-orange-500/16 dark:text-orange-200",
+    amber: "bg-amber-50 text-amber-700 dark:bg-amber-500/16 dark:text-amber-200",
+    yellow: "bg-yellow-50 text-yellow-700 dark:bg-yellow-500/16 dark:text-yellow-200",
+    lime: "bg-lime-50 text-lime-700 dark:bg-lime-500/16 dark:text-lime-200",
+    green: "bg-green-50 text-green-700 dark:bg-green-500/16 dark:text-green-200",
+    emerald: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/16 dark:text-emerald-200",
+    teal: "bg-teal-50 text-teal-700 dark:bg-teal-500/16 dark:text-teal-200",
+    cyan: "bg-cyan-50 text-cyan-700 dark:bg-cyan-500/16 dark:text-cyan-200",
+    sky: "bg-sky-50 text-sky-700 dark:bg-sky-500/16 dark:text-sky-200",
+    blue: "bg-blue-50 text-blue-700 dark:bg-blue-500/16 dark:text-blue-200",
+    indigo: "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/16 dark:text-indigo-200",
+    violet: "bg-violet-50 text-violet-700 dark:bg-violet-500/16 dark:text-violet-200",
+    purple: "bg-purple-50 text-purple-700 dark:bg-purple-500/16 dark:text-purple-200",
+    fuchsia: "bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-500/16 dark:text-fuchsia-200",
+    pink: "bg-pink-50 text-pink-700 dark:bg-pink-500/16 dark:text-pink-200",
+    rose: "bg-rose-50 text-rose-700 dark:bg-rose-500/16 dark:text-rose-200"
   };
+  const fallbackText = typeof initials === "string" && initials.trim() ? initials.trim() : alt ? alt.split(/\s+/).slice(0, 2).map((s) => s[0]).join("") : "";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -91,14 +93,14 @@ function AvatarSquare({
         "div",
         {
           className: [
-            "grid place-items-center h-full w-full text-[0.6875rem] font-semibold uppercase tracking-wide text-[var(--foreground)]",
+            "grid place-items-center h-full w-full text-[0.6875rem] font-semibold uppercase tracking-wide",
             "drop-shadow-[0_1px_0_rgba(0,0,0,0.10)] dark:drop-shadow-none",
             radiusClass,
-            GRADIENT[color]
+            FALLBACK_STYLE[color]
           ].join(" "),
           "aria-label": alt || initials || "avatar",
           title: alt || initials || void 0,
-          children: typeof initials === "string" && initials.trim() ? initials.trim() : alt ? alt.split(/\s+/).slice(0, 2).map((s) => s[0]).join("") : ""
+          children: fallbackText ? fallbackText : /* @__PURE__ */ jsx(ImageIcon, { className: "h-[52%] w-[52%]" })
         }
       )
     }

package/dist/Badge.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type Tone = "accent" | "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
@@ -11,6 +10,6 @@ declare function Badge({ tone, color, size, children, onClick, title, className,
     onClick?: (e: React__default.MouseEvent) => void;
     title?: string;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { type Tone, Badge as default };

package/dist/Badge.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type Tone = "accent" | "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
@@ -11,6 +10,6 @@ declare function Badge({ tone, color, size, children, onClick, title, className,
     onClick?: (e: React__default.MouseEvent) => void;
     title?: string;
     className?: string;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { type Tone, Badge as default };

package/dist/BadgeCluster.d.mts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { Tone } from './Badge.mjs';
-import 'react';
 
 type Item = {
     label: string;
@@ -12,6 +11,6 @@ declare function BadgeCluster({ items, max, align, className, usePortal, }: {
     align?: "left" | "right";
     className?: string;
     usePortal?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}): React.JSX.Element;
 
 export { BadgeCluster as default };

package/dist/BadgeCluster.d.ts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { Tone } from './Badge.js';
-import 'react';
 
 type Item = {
     label: string;
@@ -12,6 +11,6 @@ declare function BadgeCluster({ items, max, align, className, usePortal, }: {
     align?: "left" | "right";
     className?: string;
     usePortal?: boolean;
-}): react_jsx_runtime.JSX.Element;
+}): React.JSX.Element;
 
 export { BadgeCluster as default };

package/dist/Breadcrumb.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type BreadcrumbItem = {
@@ -15,6 +14,6 @@ type BreadcrumbProps = {
     loadingMinDurationMs?: number;
     className?: string;
 };
-declare function Breadcrumb({ items, maxItems, loading, loadingMinDurationMs, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function Breadcrumb({ items, maxItems, loading, loadingMinDurationMs, className, }: BreadcrumbProps): React__default.JSX.Element;
 
 export { type BreadcrumbItem, type BreadcrumbProps, Breadcrumb as default };