@medialane/ui 0.116.0 → 0.117.0

package/dist/components/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/button.d.cts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | "premium" | "tonal" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "link" | "destructive" | "ghost" | "premium" | "tonal" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | "premium" | "tonal" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "link" | "destructive" | "ghost" | "premium" | "tonal" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/components/dual-price.cjs

@@ -37,6 +37,19 @@ function CoinChip({ symbol, size }) {
     }
   );
 }
+function FiatChip({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-bold text-foreground/70",
+      style: { width: size + 10, height: size + 10, fontSize: size * 0.7 },
+      children: "$"
+    }
+  );
+}
+function stripDollarSign(usdValue) {
+  return usdValue.replace("$", "");
+}
 const DISPLAY_FACE = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
 const DUAL_PRICE_SCALES = {
   /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room
@@ -65,7 +78,11 @@ function DualPrice({
   }
   const stable = (0, import_format.isStableCurrency)(currency);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${DISPLAY_FACE} ${s.fiat}`, children: usdValue }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FiatChip, { size: s.chip }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${DISPLAY_FACE} ${s.fiat}`, children: stripDollarSign(usdValue) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground/70", children: "USD" })
+    ] }),
     !stable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${s.divider} w-px bg-border/60 shrink-0` }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: stable ? s.stableChip : s.chip }),
@@ -102,6 +119,7 @@ function PriceChipContent({
   const t = CHIP_TONES[tone];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     usdValue,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `font-semibold ${t.text}`, children: "USD" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: t.dot, children: "\xB7" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `inline-flex items-center gap-1 font-semibold ${t.text}`, children: [
       currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: currency, size: 12 }),

package/dist/components/dual-price.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room\n   *  to spell out the currency (\"0.07 ETH\"), not just imply it via icon. */\n  hero: { fiat: \"text-4xl\", crypto: \"text-2xl\", chip: 16, stableChip: 13, divider: \"h-7\", showCurrencyLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { fiat: \"text-lg\", crypto: \"text-sm\", chip: 11, stableChip: 9, divider: \"h-4\", showCurrencyLabel: false },\n} as const;\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as peers,\n * not primary/afterthought — this platform's audience spans non-crypto\n * newcomers who read fiat and crypto-native buyers who read the token\n * amount. Both use the brand display face at a real step-down in scale so\n * the pairing reads as \"two related numbers,\" not one dominant + one\n * caption. Falls back to crypto-only when no USD rate is available. When\n * the currency is itself a USD-pegged stablecoin, the crypto amount\n * collapses to a small currency badge — showing \"$12.00\" beside \"12.00\n * USDC\" would just be the same number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n\n  if (!usdValue) {\n    return (\n      <div className={`flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`}>\n        <CoinChip symbol={currency} size={s.chip} />\n        {cryptoDisplay}\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span className={`${DISPLAY_FACE} ${s.fiat}`}>{usdValue}</span>\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      <span className=\"inline-flex items-center gap-1.5\">\n        <CoinChip symbol={currency} size={stable ? s.stableChip : s.chip} />\n        {stable ? (\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        ) : s.showCurrencyLabel ? (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n            <span className=\"text-sm font-semibold text-muted-foreground/70\">{currency}</span>\n          </span>\n        ) : (\n          <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {usdValue}\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat — a bare \"$\" prefix looked like\n *  a stray glyph next to a crypto amount that always got an icon. Giving\n *  USD the identical chip treatment makes the pairing read as two peer\n *  currencies, not one styled number and one plain one. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-bold text-foreground/70\"\n      style={{ width: size + 10, height: size + 10, fontSize: size * 0.7 }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room\n   *  to spell out the currency (\"0.07 ETH\"), not just imply it via icon. */\n  hero: { fiat: \"text-4xl\", crypto: \"text-2xl\", chip: 16, stableChip: 13, divider: \"h-7\", showCurrencyLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { fiat: \"text-lg\", crypto: \"text-sm\", chip: 11, stableChip: 9, divider: \"h-4\", showCurrencyLabel: false },\n} as const;\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as peers,\n * not primary/afterthought — this platform's audience spans non-crypto\n * newcomers who read fiat and crypto-native buyers who read the token\n * amount. Both use the brand display face at a real step-down in scale so\n * the pairing reads as \"two related numbers,\" not one dominant + one\n * caption. Falls back to crypto-only when no USD rate is available. When\n * the currency is itself a USD-pegged stablecoin, the crypto amount\n * collapses to a small currency badge — showing \"$12.00\" beside \"12.00\n * USDC\" would just be the same number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n\n  if (!usdValue) {\n    return (\n      <div className={`flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`}>\n        <CoinChip symbol={currency} size={s.chip} />\n        {cryptoDisplay}\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span className=\"inline-flex items-center gap-1.5\">\n        <FiatChip size={s.chip} />\n        <span className={`${DISPLAY_FACE} ${s.fiat}`}>{stripDollarSign(usdValue)}</span>\n        <span className=\"text-sm font-semibold text-muted-foreground/70\">USD</span>\n      </span>\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      <span className=\"inline-flex items-center gap-1.5\">\n        <CoinChip symbol={currency} size={stable ? s.stableChip : s.chip} />\n        {stable ? (\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        ) : s.showCurrencyLabel ? (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n            <span className=\"text-sm font-semibold text-muted-foreground/70\">{currency}</span>\n          </span>\n        ) : (\n          <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {usdValue}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/dual-price.js

@@ -12,6 +12,19 @@ function CoinChip({ symbol, size }) {
     }
   );
 }
+function FiatChip({ size }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-bold text-foreground/70",
+      style: { width: size + 10, height: size + 10, fontSize: size * 0.7 },
+      children: "$"
+    }
+  );
+}
+function stripDollarSign(usdValue) {
+  return usdValue.replace("$", "");
+}
 const DISPLAY_FACE = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
 const DUAL_PRICE_SCALES = {
   /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room
@@ -40,7 +53,11 @@ function DualPrice({
   }
   const stable = isStableCurrency(currency);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-    /* @__PURE__ */ jsx("span", { className: `${DISPLAY_FACE} ${s.fiat}`, children: usdValue }),
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(FiatChip, { size: s.chip }),
+      /* @__PURE__ */ jsx("span", { className: `${DISPLAY_FACE} ${s.fiat}`, children: stripDollarSign(usdValue) }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground/70", children: "USD" })
+    ] }),
     !stable && /* @__PURE__ */ jsx("span", { className: `${s.divider} w-px bg-border/60 shrink-0` }),
     /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: stable ? s.stableChip : s.chip }),
@@ -77,6 +94,7 @@ function PriceChipContent({
   const t = CHIP_TONES[tone];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     usdValue,
+    /* @__PURE__ */ jsx("span", { className: `font-semibold ${t.text}`, children: "USD" }),
     /* @__PURE__ */ jsx("span", { className: t.dot, children: "\xB7" }),
     /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 font-semibold ${t.text}`, children: [
       currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: currency, size: 12 }),

package/dist/components/dual-price.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room\n   *  to spell out the currency (\"0.07 ETH\"), not just imply it via icon. */\n  hero: { fiat: \"text-4xl\", crypto: \"text-2xl\", chip: 16, stableChip: 13, divider: \"h-7\", showCurrencyLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { fiat: \"text-lg\", crypto: \"text-sm\", chip: 11, stableChip: 9, divider: \"h-4\", showCurrencyLabel: false },\n} as const;\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as peers,\n * not primary/afterthought — this platform's audience spans non-crypto\n * newcomers who read fiat and crypto-native buyers who read the token\n * amount. Both use the brand display face at a real step-down in scale so\n * the pairing reads as \"two related numbers,\" not one dominant + one\n * caption. Falls back to crypto-only when no USD rate is available. When\n * the currency is itself a USD-pegged stablecoin, the crypto amount\n * collapses to a small currency badge — showing \"$12.00\" beside \"12.00\n * USDC\" would just be the same number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n\n  if (!usdValue) {\n    return (\n      <div className={`flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`}>\n        <CoinChip symbol={currency} size={s.chip} />\n        {cryptoDisplay}\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span className={`${DISPLAY_FACE} ${s.fiat}`}>{usdValue}</span>\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      <span className=\"inline-flex items-center gap-1.5\">\n        <CoinChip symbol={currency} size={stable ? s.stableChip : s.chip} />\n        {stable ? (\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        ) : s.showCurrencyLabel ? (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n            <span className=\"text-sm font-semibold text-muted-foreground/70\">{currency}</span>\n          </span>\n        ) : (\n          <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {usdValue}\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat — a bare \"$\" prefix looked like\n *  a stray glyph next to a crypto amount that always got an icon. Giving\n *  USD the identical chip treatment makes the pairing read as two peer\n *  currencies, not one styled number and one plain one. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-bold text-foreground/70\"\n      style={{ width: size + 10, height: size + 10, fontSize: size * 0.7 }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room\n   *  to spell out the currency (\"0.07 ETH\"), not just imply it via icon. */\n  hero: { fiat: \"text-4xl\", crypto: \"text-2xl\", chip: 16, stableChip: 13, divider: \"h-7\", showCurrencyLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { fiat: \"text-lg\", crypto: \"text-sm\", chip: 11, stableChip: 9, divider: \"h-4\", showCurrencyLabel: false },\n} as const;\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as peers,\n * not primary/afterthought — this platform's audience spans non-crypto\n * newcomers who read fiat and crypto-native buyers who read the token\n * amount. Both use the brand display face at a real step-down in scale so\n * the pairing reads as \"two related numbers,\" not one dominant + one\n * caption. Falls back to crypto-only when no USD rate is available. When\n * the currency is itself a USD-pegged stablecoin, the crypto amount\n * collapses to a small currency badge — showing \"$12.00\" beside \"12.00\n * USDC\" would just be the same number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n\n  if (!usdValue) {\n    return (\n      <div className={`flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`}>\n        <CoinChip symbol={currency} size={s.chip} />\n        {cryptoDisplay}\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span className=\"inline-flex items-center gap-1.5\">\n        <FiatChip size={s.chip} />\n        <span className={`${DISPLAY_FACE} ${s.fiat}`}>{stripDollarSign(usdValue)}</span>\n        <span className=\"text-sm font-semibold text-muted-foreground/70\">USD</span>\n      </span>\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      <span className=\"inline-flex items-center gap-1.5\">\n        <CoinChip symbol={currency} size={stable ? s.stableChip : s.chip} />\n        {stable ? (\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        ) : s.showCurrencyLabel ? (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n            <span className=\"text-sm font-semibold text-muted-foreground/70\">{currency}</span>\n          </span>\n        ) : (\n          <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {usdValue}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":";AAcM,SAsIA,UAtIA,KAmEA,YAnEA;AAXN,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB,wBAAwB;AAI9C,SAAS,SAAS,EAAE,QAAQ,KAAK,GAAwD;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,OAAO,IAAI,QAAQ,OAAO,GAAG;AAAA,MAE7C,8BAAC,gBAAa,QAAQ,UAAU,IAAI,MAAY;AAAA;AAAA,EAClD;AAEJ;AAMA,SAAS,SAAS,EAAE,KAAK,GAAqB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,OAAO,IAAI,QAAQ,OAAO,IAAI,UAAU,OAAO,IAAI;AAAA,MACpE;AAAA;AAAA,EAED;AAEJ;AAIA,SAAS,gBAAgB,UAA0B;AACjD,SAAO,SAAS,QAAQ,KAAK,EAAE;AACjC;AAEA,MAAM,eAAe;AAErB,MAAM,oBAAoB;AAAA;AAAA;AAAA,EAGxB,MAAM,EAAE,MAAM,YAAY,QAAQ,YAAY,MAAM,IAAI,YAAY,IAAI,SAAS,OAAO,mBAAmB,KAAK;AAAA;AAAA;AAAA,EAGhH,MAAM,EAAE,MAAM,WAAW,QAAQ,WAAW,MAAM,IAAI,YAAY,GAAG,SAAS,OAAO,mBAAmB,MAAM;AAChH;AAaO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,QAAM,IAAI,kBAAkB,KAAK;AACjC,QAAM,gBAAgB,mBAAmB,eAAe;AAExD,MAAI,CAAC,UAAU;AACb,WACE,qBAAC,SAAI,WAAW,6BAA6B,YAAY,IAAI,EAAE,IAAI,IACjE;AAAA,0BAAC,YAAS,QAAQ,UAAU,MAAM,EAAE,MAAM;AAAA,MACzC;AAAA,MACA,YAAY,oBAAC,UAAK,WAAU,UAAU,oBAAS;AAAA,OAClD;AAAA,EAEJ;AAEA,QAAM,SAAS,iBAAiB,QAAQ;AACxC,SACE,qBAAC,SAAI,WAAU,6BACb;AAAA,yBAAC,UAAK,WAAU,oCACd;AAAA,0BAAC,YAAS,MAAM,EAAE,MAAM;AAAA,MACxB,oBAAC,UAAK,WAAW,GAAG,YAAY,IAAI,EAAE,IAAI,IAAK,0BAAgB,QAAQ,GAAE;AAAA,MACzE,oBAAC,UAAK,WAAU,kDAAiD,iBAAG;AAAA,OACtE;AAAA,IACC,CAAC,UAAU,oBAAC,UAAK,WAAW,GAAG,EAAE,OAAO,+BAA+B;AAAA,IACxE,qBAAC,UAAK,WAAU,oCACd;AAAA,0BAAC,YAAS,QAAQ,UAAU,MAAM,SAAS,EAAE,aAAa,EAAE,MAAM;AAAA,MACjE,SACC,oBAAC,UAAK,WAAU,+CAA+C,oBAAS,IACtE,EAAE,oBACJ,qBAAC,UAAK,WAAU,+BACd;AAAA,4BAAC,UAAK,WAAW,GAAG,YAAY,IAAI,EAAE,MAAM,uBAAwB,yBAAc;AAAA,QAClF,oBAAC,UAAK,WAAU,kDAAkD,oBAAS;AAAA,SAC7E,IAEA,oBAAC,UAAK,WAAW,GAAG,YAAY,IAAI,EAAE,MAAM,uBAAwB,yBAAc;AAAA,OAEtF;AAAA,IACC,YAAY,oBAAC,UAAK,WAAU,UAAU,oBAAS;AAAA,KAClD;AAEJ;AAEA,MAAM,aAAa;AAAA;AAAA;AAAA,EAGjB,gBAAgB,EAAE,KAAK,iBAAiB,MAAM,gBAAgB;AAAA;AAAA,EAE9D,MAAM,EAAE,KAAK,4BAA4B,MAAM,wBAAwB;AACzE;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,QAAM,gBAAgB,mBAAmB,eAAe;AACxD,QAAM,SAAS,iBAAiB,QAAQ;AAExC,MAAI,CAAC,UAAU;AACb,WACE,iCACG;AAAA,kBAAY,oBAAC,gBAAa,QAAQ,UAAU,MAAM,IAAI;AAAA,MACtD;AAAA,OACH;AAAA,EAEJ;AAEA,QAAM,IAAI,WAAW,IAAI;AACzB,SACE,iCACG;AAAA;AAAA,IACD,oBAAC,UAAK,WAAW,iBAAiB,EAAE,IAAI,IAAI,iBAAG;AAAA,IAC/C,oBAAC,UAAK,WAAW,EAAE,KAAK,kBAAC;AAAA,IACzB,qBAAC,UAAK,WAAW,gDAAgD,EAAE,IAAI,IACpE;AAAA,kBAAY,oBAAC,gBAAa,QAAQ,UAAU,MAAM,IAAI;AAAA,MACtD,SAAS,WAAW;AAAA,OACvB;AAAA,KACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.116.0",
+  "version": "0.117.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,