framepexls-ui-lib 2.0.0 → 2.2.0

package/dist/AssetPerformanceCard.mjs

@@ -0,0 +1,319 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import ChartCard from "./ChartCard.mjs";
+import AutoSize from "./internal/AutoSize.mjs";
+import SegmentedTabs from "./SegmentedTabs.mjs";
+import Select from "./Select.mjs";
+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 AssetBadge({
+  name,
+  symbol,
+  accent,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold text-white shadow-sm",
+        style: { background: accent },
+        children: icon != null ? icon : (symbol || name).slice(0, 3).toUpperCase()
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-[var(--foreground)]", children: name }),
+      symbol ? /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.16em] text-[var(--muted)]", children: symbol }) : null
+    ] })
+  ] });
+}
+function AssetPerformanceCard({
+  title,
+  subtitle,
+  name,
+  symbol,
+  icon,
+  accent = "var(--primary)",
+  value,
+  change,
+  changePercent,
+  data,
+  xKey,
+  yKey,
+  locale = "es-MX",
+  currency = "USD",
+  currencies,
+  selectedCurrency,
+  defaultCurrency,
+  onCurrencyChange,
+  ranges = [
+    { value: "1H", label: "1H" },
+    { value: "1D", label: "1D" },
+    { value: "1W", label: "1W" },
+    { value: "1M", label: "1M" },
+    { value: "1Y", label: "1Y" },
+    { value: "ALL", label: "All" }
+  ],
+  selectedRange,
+  defaultRange,
+  onRangeChange,
+  xTickFormatter,
+  valueFormatter,
+  yTickFormatter,
+  tooltipLabelFormatter,
+  tooltipValueFormatter,
+  className,
+  helperText,
+  emptyState
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const gradientId = React.useId();
+  const initialCurrency = (_c = (_b = selectedCurrency != null ? selectedCurrency : defaultCurrency) != null ? _b : (_a = currencies == null ? void 0 : currencies[0]) == null ? void 0 : _a.value) != null ? _c : currency;
+  const initialRange = (_f = (_e = selectedRange != null ? selectedRange : defaultRange) != null ? _e : (_d = ranges[0]) == null ? void 0 : _d.value) != null ? _f : "1D";
+  const [internalCurrency, setInternalCurrency] = React.useState(initialCurrency);
+  const [internalRange, setInternalRange] = React.useState(initialRange);
+  React.useEffect(() => {
+    if (selectedCurrency !== void 0) {
+      setInternalCurrency(selectedCurrency);
+    }
+  }, [selectedCurrency]);
+  React.useEffect(() => {
+    if (selectedRange !== void 0) {
+      setInternalRange(selectedRange);
+    }
+  }, [selectedRange]);
+  const activeCurrency = selectedCurrency != null ? selectedCurrency : internalCurrency;
+  const activeRange = selectedRange != null ? selectedRange : internalRange;
+  const positive = ((_g = changePercent != null ? changePercent : change) != null ? _g : 0) >= 0;
+  const lineColor = accent;
+  const handleCurrencyChange = (next) => {
+    if (!next) return;
+    if (selectedCurrency === void 0) {
+      setInternalCurrency(next);
+    }
+    onCurrencyChange == null ? void 0 : onCurrencyChange(next);
+  };
+  const handleRangeChange = (next) => {
+    if (selectedRange === void 0) {
+      setInternalRange(next);
+    }
+    onRangeChange == null ? void 0 : onRangeChange(next);
+  };
+  const formatValue = (amount, options) => {
+    var _a2, _b2;
+    const formatterOptions = { currency: activeCurrency || currency, locale };
+    if (valueFormatter) return valueFormatter(amount, formatterOptions);
+    return formatCurrencyValue(amount, {
+      ...formatterOptions,
+      minimumFractionDigits: (_a2 = options == null ? void 0 : options.minimumFractionDigits) != null ? _a2 : 0,
+      maximumFractionDigits: (_b2 = options == null ? void 0 : options.maximumFractionDigits) != null ? _b2 : 2
+    });
+  };
+  const yFormatter = (amount) => {
+    const formatterOptions = { currency: activeCurrency || currency, locale };
+    if (yTickFormatter) return yTickFormatter(amount, formatterOptions);
+    if (valueFormatter) return valueFormatter(amount, formatterOptions);
+    return formatCurrencyValue(amount, {
+      ...formatterOptions,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCard,
+    {
+      className,
+      title,
+      subtitle,
+      right: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+        currencies && currencies.length > 0 ? /* @__PURE__ */ jsx(
+          Select,
+          {
+            size: "sm",
+            fullWidth: false,
+            fit: true,
+            value: activeCurrency,
+            onChange: handleCurrencyChange,
+            options: currencies.map((option) => ({
+              label: option.label,
+              value: option.value
+            })),
+            className: "min-w-[88px]"
+          }
+        ) : null,
+        ranges.length > 0 ? /* @__PURE__ */ jsx(
+          SegmentedTabs,
+          {
+            size: "sm",
+            value: activeRange,
+            onChange: handleRangeChange,
+            options: ranges,
+            className: "max-w-full overflow-x-auto"
+          }
+        ) : null
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(AssetBadge, { name, symbol, accent, icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-4xl font-semibold tracking-[-0.04em] tabular-nums text-[var(--foreground)]", children: formatValue(value) }),
+            change != null || changePercent != null ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: [
+                  "mb-1 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold",
+                  positive ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
+                ].join(" "),
+                children: [
+                  positive ? /* @__PURE__ */ jsx(TrendUpIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(TrendDownIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: change != null ? formatNumericValue(change, {
+                    locale,
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                    prefix: change > 0 ? "+" : ""
+                  }) : null }),
+                  changePercent != null ? /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+                    "(",
+                    formatPercentValue(changePercent, {
+                      locale,
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2
+                    }),
+                    ")"
+                  ] }) : null
+                ]
+              }
+            ) : null
+          ] }),
+          helperText ? /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: helperText }) : null
+        ] }) }),
+        !Array.isArray(data) || data.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-[320px] items-center justify-center rounded-[1.75rem] border border-dashed border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_72%,transparent)] px-6 text-sm text-[var(--muted)]", children: emptyState != null ? emptyState : "Sin datos para el rango seleccionado." }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "min-w-0 rounded-[1.75rem] border border-[var(--border)] p-3",
+            style: {
+              background: `linear-gradient(180deg, ${alphaColor(lineColor, 0.1, "color-mix(in oklab,var(--primary) 10%,transparent)")}, transparent 22%, var(--card) 68%)`
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "h-[320px] min-h-[320px] w-full min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx(AutoSize, { className: "h-full w-full", children: ({ width, height }) => /* @__PURE__ */ jsxs(
+              AreaChart,
+              {
+                width,
+                height,
+                data,
+                margin: { top: 18, right: 12, left: 0, bottom: 8 },
+                children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: alphaColor(lineColor, 0.32, lineColor) }),
+                    /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: alphaColor(lineColor, 0.08, lineColor) }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: alphaColor(lineColor, 0.02, lineColor) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      vertical: false,
+                      stroke: "var(--grid)",
+                      strokeDasharray: "4 8"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: xKey,
+                      axisLine: false,
+                      tickLine: false,
+                      minTickGap: 28,
+                      tickMargin: 12,
+                      tick: { fontSize: 11, fill: "var(--muted)" },
+                      tickFormatter: (value2) => xTickFormatter ? xTickFormatter(value2) : String(value2 != null ? value2 : "")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      axisLine: false,
+                      tickLine: false,
+                      width: 72,
+                      tickMargin: 12,
+                      tick: { fontSize: 11, fill: "var(--muted)" },
+                      tickFormatter: (amount) => yFormatter(Number(amount))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      cursor: {
+                        stroke: alphaColor(lineColor, 0.55, lineColor),
+                        strokeWidth: 1.25,
+                        strokeDasharray: "4 6"
+                      },
+                      content: ({ active, payload, label }) => {
+                        var _a2;
+                        if (!active || !payload || payload.length === 0) return null;
+                        const raw = (_a2 = payload[0]) == null ? void 0 : _a2.value;
+                        const numeric = typeof raw === "number" ? raw : Number(raw);
+                        const formattedValue = tooltipValueFormatter ? tooltipValueFormatter(numeric, activeCurrency || currency) : formatValue(numeric, {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2
+                        });
+                        return /* @__PURE__ */ jsxs("div", { className: "min-w-[140px] rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,white)] px-3 py-2.5 shadow-xl ring-1 ring-black/5 backdrop-blur", children: [
+                          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium text-[var(--muted)]", children: tooltipLabelFormatter ? tooltipLabelFormatter(label) : String(label != null ? label : "") }),
+                          /* @__PURE__ */ jsx("div", { className: "mt-1 text-lg font-semibold tracking-[-0.03em] tabular-nums text-[var(--foreground)]", children: formattedValue })
+                        ] });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Area,
+                    {
+                      type: "monotone",
+                      dataKey: yKey,
+                      stroke: lineColor,
+                      strokeWidth: 3,
+                      fill: `url(#${gradientId})`,
+                      fillOpacity: 1,
+                      dot: false,
+                      activeDot: {
+                        r: 6,
+                        strokeWidth: 3,
+                        stroke: "#fff",
+                        fill: lineColor
+                      }
+                    }
+                  )
+                ]
+              }
+            ) }) })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  AssetPerformanceCard as default
+};

package/dist/AssetTickerRow.d.mts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+type AssetTickerItem = {
+    id: string;
+    name: string;
+    symbol: string;
+    price: number | null | undefined;
+    priceCurrency?: string;
+    change?: number | null;
+    changePercent?: number | null;
+    sparkline?: number[];
+    icon?: React__default.ReactNode;
+    accent?: string;
+    meta?: React__default.ReactNode;
+};
+type AssetTickerRowProps = {
+    items: AssetTickerItem[];
+    locale?: string;
+    className?: string;
+    selectedId?: string;
+    onSelect?: (item: AssetTickerItem) => void;
+    priceFormatter?: (price: number | null | undefined, item: AssetTickerItem, locale: string) => React__default.ReactNode;
+};
+declare function AssetTickerRow({ items, locale, className, selectedId, onSelect, priceFormatter, }: AssetTickerRowProps): React__default.JSX.Element;
+
+export { type AssetTickerItem, type AssetTickerRowProps, AssetTickerRow as default };

package/dist/AssetTickerRow.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+type AssetTickerItem = {
+    id: string;
+    name: string;
+    symbol: string;
+    price: number | null | undefined;
+    priceCurrency?: string;
+    change?: number | null;
+    changePercent?: number | null;
+    sparkline?: number[];
+    icon?: React__default.ReactNode;
+    accent?: string;
+    meta?: React__default.ReactNode;
+};
+type AssetTickerRowProps = {
+    items: AssetTickerItem[];
+    locale?: string;
+    className?: string;
+    selectedId?: string;
+    onSelect?: (item: AssetTickerItem) => void;
+    priceFormatter?: (price: number | null | undefined, item: AssetTickerItem, locale: string) => React__default.ReactNode;
+};
+declare function AssetTickerRow({ items, locale, className, selectedId, onSelect, priceFormatter, }: AssetTickerRowProps): React__default.JSX.Element;
+
+export { type AssetTickerItem, type AssetTickerRowProps, AssetTickerRow as default };

package/dist/AssetTickerRow.js

@@ -0,0 +1,255 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AssetTickerRow_exports = {};
+__export(AssetTickerRow_exports, {
+  default: () => AssetTickerRow
+});
+module.exports = __toCommonJS(AssetTickerRow_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_iconos = require("./iconos");
+var import_Numeric = require("./Numeric");
+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 = import_react.default.useId();
+  if (!Array.isArray(data) || data.length < 2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: "h-14 w-32 overflow-visible",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${gradientId}-line`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: alphaColor(color, 0.24, color) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: color })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: `${gradientId}-fill`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: alphaColor(color, 0.4, color) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "58%", stopColor: alphaColor(color, 0.18, color) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: alphaColor(color, 0.02, color) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "polygon",
+          {
+            points: areaPoints,
+            fill: `url(#${gradientId}-fill)`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "polyline",
+          {
+            fill: "none",
+            stroke: `url(#${gradientId}-line)`,
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            points
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            cx: width,
+            cy: height - (last - min) / range * height,
+            r: "2.75",
+            fill: color
+          }
+        )
+      ]
+    }
+  );
+}
+function AssetAvatar({ symbol, accent, icon }) {
+  if (icon) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative z-10 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssetAvatar, { symbol: item.symbol, accent, icon: item.icon }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10 min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "truncate text-[15px] font-semibold text-[var(--foreground)]", children: item.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold tabular-nums text-[var(--foreground)]", children: priceFormatter ? priceFormatter(item.price, item, locale) : (0, import_Numeric.formatCurrencyValue)(item.price, {
+                    currency: (_d = item.priceCurrency) != null ? _d : "USD",
+                    locale,
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                  }) }),
+                  item.changePercent != null ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrendUpIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrendDownIcon, { className: "h-3.5 w-3.5" }),
+                        (0, import_Numeric.formatPercentValue)(item.changePercent, {
+                          locale,
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2
+                        })
+                      ]
+                    }
+                  ) : item.change != null ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrendUpIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TrendDownIcon, { className: "h-3.5 w-3.5" }),
+                        (0, import_Numeric.formatNumericValue)(item.change, {
+                          locale,
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                          prefix: item.change > 0 ? "+" : ""
+                        })
+                      ]
+                    }
+                  ) : null
+                ] }),
+                item.meta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-xs text-[var(--muted)]", children: item.meta }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative z-10 hidden shrink-0 sm:block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkline, { data: (_e = item.sparkline) != null ? _e : [], color: accent }) })
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}