@medialane/ui 0.328.0 → 0.329.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/components/account/input-otp.d.cts +2 -2
  2. package/dist/components/account/input-otp.d.ts +2 -2
  3. package/dist/components/asset-card.cjs +4 -4
  4. package/dist/components/asset-card.cjs.map +1 -1
  5. package/dist/components/asset-card.js +4 -4
  6. package/dist/components/asset-card.js.map +1 -1
  7. package/dist/components/asset-marketplace-panel.cjs +23 -26
  8. package/dist/components/asset-marketplace-panel.cjs.map +1 -1
  9. package/dist/components/asset-marketplace-panel.js +23 -26
  10. package/dist/components/asset-marketplace-panel.js.map +1 -1
  11. package/dist/components/badge.d.cts +1 -1
  12. package/dist/components/badge.d.ts +1 -1
  13. package/dist/components/button.d.cts +2 -2
  14. package/dist/components/button.d.ts +2 -2
  15. package/dist/components/coin-row.cjs +3 -3
  16. package/dist/components/coin-row.cjs.map +1 -1
  17. package/dist/components/coin-row.js +3 -3
  18. package/dist/components/coin-row.js.map +1 -1
  19. package/dist/components/fast-mint/fast-mint.d.cts +2 -2
  20. package/dist/components/fast-mint/fast-mint.d.ts +2 -2
  21. package/dist/components/listing-card.cjs +2 -14
  22. package/dist/components/listing-card.cjs.map +1 -1
  23. package/dist/components/listing-card.js +2 -14
  24. package/dist/components/listing-card.js.map +1 -1
  25. package/dist/components/price-display.cjs +115 -0
  26. package/dist/components/price-display.cjs.map +1 -0
  27. package/dist/components/price-display.d.cts +44 -0
  28. package/dist/components/price-display.d.ts +44 -0
  29. package/dist/components/price-display.js +91 -0
  30. package/dist/components/price-display.js.map +1 -0
  31. package/dist/components/sheet.d.cts +1 -1
  32. package/dist/components/sheet.d.ts +1 -1
  33. package/dist/components/token-card.cjs +4 -4
  34. package/dist/components/token-card.cjs.map +1 -1
  35. package/dist/components/token-card.js +4 -4
  36. package/dist/components/token-card.js.map +1 -1
  37. package/dist/utils/format.cjs +9 -0
  38. package/dist/utils/format.cjs.map +1 -1
  39. package/dist/utils/format.d.cts +2 -1
  40. package/dist/utils/format.d.ts +2 -1
  41. package/dist/utils/format.js +8 -0
  42. package/dist/utils/format.js.map +1 -1
  43. package/dist/utils/media-wallet/use-erc20-balance.d.cts +1 -1
  44. package/dist/utils/media-wallet/use-erc20-balance.d.ts +1 -1
  45. package/package.json +1 -1
  46. package/dist/components/dual-price.cjs +0 -164
  47. package/dist/components/dual-price.cjs.map +0 -1
  48. package/dist/components/dual-price.d.cts +0 -53
  49. package/dist/components/dual-price.d.ts +0 -53
  50. package/dist/components/dual-price.js +0 -138
  51. package/dist/components/dual-price.js.map +0 -1
@@ -1,164 +0,0 @@
1
- "use strict";
2
- "use client";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
- var dual_price_exports = {};
21
- __export(dual_price_exports, {
22
- CoinChip: () => CoinChip,
23
- DualPrice: () => DualPrice,
24
- PriceChipContent: () => PriceChipContent
25
- });
26
- module.exports = __toCommonJS(dual_price_exports);
27
- var import_jsx_runtime = require("react/jsx-runtime");
28
- var import_currency_icon = require("./currency-icon.js");
29
- var import_format = require("../utils/format.js");
30
- function CoinChip({ symbol, size }) {
31
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
32
- "span",
33
- {
34
- className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]",
35
- style: { width: size + 10, height: size + 10 },
36
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: symbol ?? "", size })
37
- }
38
- );
39
- }
40
- function FiatChip({ size }) {
41
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
42
- "span",
43
- {
44
- className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80",
45
- style: { width: size + 10, height: size + 10, fontSize: size },
46
- children: "$"
47
- }
48
- );
49
- }
50
- function stripDollarSign(usdValue) {
51
- return usdValue.replace("$", "");
52
- }
53
- const DISPLAY_FACE = "font-extrabold tracking-tight tabular-nums";
54
- const DUAL_PRICE_SCALES = {
55
- hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },
56
- card: { amount: "text-base", chip: 13, stableChip: 10, divider: "h-4", showLabel: false }
57
- };
58
- function PriceUnit({
59
- chip,
60
- amount,
61
- label,
62
- amountClassName
63
- }) {
64
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
65
- chip,
66
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-baseline gap-1.5", children: [
67
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: amountClassName, children: amount }),
68
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground/70", children: label })
69
- ] })
70
- ] });
71
- }
72
- function DualPrice({
73
- amountFormatted,
74
- currency,
75
- usdValue,
76
- scale,
77
- trailing,
78
- secondaryClassName
79
- }) {
80
- if (!amountFormatted) return null;
81
- const s = DUAL_PRICE_SCALES[scale];
82
- const cryptoDisplay = (0, import_format.formatDisplayPrice)(amountFormatted);
83
- const amountClass = `${DISPLAY_FACE} ${s.amount}`;
84
- if (!usdValue) {
85
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
86
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
87
- PriceUnit,
88
- {
89
- chip: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.chip }),
90
- amount: cryptoDisplay,
91
- label: s.showLabel ? currency ?? void 0 : void 0,
92
- amountClassName: amountClass
93
- }
94
- ),
95
- trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-0.5", children: trailing })
96
- ] });
97
- }
98
- const stable = (0, import_format.isStableCurrency)(currency);
99
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
100
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
101
- PriceUnit,
102
- {
103
- chip: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FiatChip, { size: s.chip }),
104
- amount: stripDollarSign(usdValue),
105
- label: s.showLabel ? "USD" : void 0,
106
- amountClassName: amountClass
107
- }
108
- ),
109
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `items-center gap-2.5 ${secondaryClassName ?? "flex"}`, children: [
110
- !stable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${s.divider} w-px bg-border/60 shrink-0` }),
111
- stable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
112
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.stableChip }),
113
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground", children: currency })
114
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
- PriceUnit,
116
- {
117
- chip: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.chip }),
118
- amount: cryptoDisplay,
119
- label: s.showLabel ? currency ?? void 0 : void 0,
120
- amountClassName: amountClass
121
- }
122
- )
123
- ] }),
124
- trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-0.5", children: trailing })
125
- ] });
126
- }
127
- const CHIP_TONES = {
128
- "overlay-dark": { dot: "text-white/30", text: "text-white/65" },
129
- card: { dot: "text-muted-foreground/50", text: "text-muted-foreground" },
130
- solid: { dot: "text-foreground/40", text: "text-foreground" }
131
- };
132
- function PriceChipContent({
133
- amountFormatted,
134
- currency,
135
- usdValue,
136
- tone
137
- }) {
138
- if (!amountFormatted) return null;
139
- const cryptoDisplay = (0, import_format.formatDisplayPrice)(amountFormatted);
140
- const stable = (0, import_format.isStableCurrency)(currency);
141
- if (!usdValue) {
142
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
143
- currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: currency, size: 13 }),
144
- cryptoDisplay
145
- ] });
146
- }
147
- const t = CHIP_TONES[tone];
148
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
149
- stripDollarSign(usdValue),
150
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: t.text, children: "USD" }),
151
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: t.dot, children: "\xB7" }),
152
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `inline-flex items-center gap-1 ${t.text}`, children: [
153
- currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: currency, size: 12 }),
154
- stable ? currency : cryptoDisplay
155
- ] })
156
- ] });
157
- }
158
- // Annotate the CommonJS export names for ESM import in node:
159
- 0 && (module.exports = {
160
- CoinChip,
161
- DualPrice,
162
- PriceChipContent
163
- });
164
- //# sourceMappingURL=dual-price.cjs.map
@@ -1 +0,0 @@
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\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\nfunction FiatChip({ size }: { size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n style={{ width: size + 10, height: size + 10, fontSize: size }}\n >\n $\n </span>\n );\n}\n\nfunction stripDollarSign(usdValue: string): string {\n return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n\n hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n\n card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\nfunction PriceUnit({\n chip,\n amount,\n label,\n amountClassName,\n}: {\n chip: ReactNode;\n amount: string;\n label?: string;\n amountClassName: string;\n}) {\n return (\n <span className=\"inline-flex items-center gap-1.5\">\n {chip}\n <span className=\"flex items-baseline gap-1.5\">\n <span className={amountClassName}>{amount}</span>\n {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n </span>\n </span>\n );\n}\n\nexport function DualPrice({\n amountFormatted,\n currency,\n usdValue,\n scale,\n trailing,\n secondaryClassName,\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 secondaryClassName?: string;\n}) {\n if (!amountFormatted) return null;\n const s = DUAL_PRICE_SCALES[scale];\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n if (!usdValue) {\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\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 <PriceUnit\n chip={<FiatChip size={s.chip} />}\n amount={stripDollarSign(usdValue)}\n label={s.showLabel ? \"USD\" : undefined}\n amountClassName={amountClass}\n />\n <span className={`items-center gap-2.5 ${secondaryClassName ?? \"flex\"}`}>\n {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n {stable ? (\n <span className=\"inline-flex items-center gap-1.5\">\n <CoinChip symbol={currency} size={s.stableChip} />\n <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n </span>\n ) : (\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n )}\n </span>\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n}\n\nconst CHIP_TONES = {\n\n \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n\n card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n\n solid: { dot: \"text-foreground/40\", text: \"text-foreground\" },\n} as const;\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 {stripDollarSign(usdValue)}\n <span className={t.text}>USD</span>\n <span className={t.dot}>·</span>\n <span className={`inline-flex items-center gap-1 ${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":[]}
@@ -1,53 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ReactNode } from 'react';
3
-
4
- declare function CoinChip({ symbol, size }: {
5
- symbol: string | null | undefined;
6
- size: number;
7
- }): react_jsx_runtime.JSX.Element;
8
- declare const DUAL_PRICE_SCALES: {
9
- readonly hero: {
10
- readonly amount: "text-3xl";
11
- readonly chip: 18;
12
- readonly stableChip: 14;
13
- readonly divider: "h-7";
14
- readonly showLabel: true;
15
- };
16
- readonly card: {
17
- readonly amount: "text-base";
18
- readonly chip: 13;
19
- readonly stableChip: 10;
20
- readonly divider: "h-4";
21
- readonly showLabel: false;
22
- };
23
- };
24
- declare function DualPrice({ amountFormatted, currency, usdValue, scale, trailing, secondaryClassName, }: {
25
- amountFormatted: string | null | undefined;
26
- currency: string | null | undefined;
27
- usdValue?: string | null;
28
- scale: keyof typeof DUAL_PRICE_SCALES;
29
- trailing?: ReactNode;
30
- secondaryClassName?: string;
31
- }): react_jsx_runtime.JSX.Element | null;
32
- declare const CHIP_TONES: {
33
- readonly "overlay-dark": {
34
- readonly dot: "text-white/30";
35
- readonly text: "text-white/65";
36
- };
37
- readonly card: {
38
- readonly dot: "text-muted-foreground/50";
39
- readonly text: "text-muted-foreground";
40
- };
41
- readonly solid: {
42
- readonly dot: "text-foreground/40";
43
- readonly text: "text-foreground";
44
- };
45
- };
46
- declare function PriceChipContent({ amountFormatted, currency, usdValue, tone, }: {
47
- amountFormatted: string | null | undefined;
48
- currency: string | null | undefined;
49
- usdValue?: string | null;
50
- tone: keyof typeof CHIP_TONES;
51
- }): react_jsx_runtime.JSX.Element | null;
52
-
53
- export { CoinChip, DualPrice, PriceChipContent };
@@ -1,53 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ReactNode } from 'react';
3
-
4
- declare function CoinChip({ symbol, size }: {
5
- symbol: string | null | undefined;
6
- size: number;
7
- }): react_jsx_runtime.JSX.Element;
8
- declare const DUAL_PRICE_SCALES: {
9
- readonly hero: {
10
- readonly amount: "text-3xl";
11
- readonly chip: 18;
12
- readonly stableChip: 14;
13
- readonly divider: "h-7";
14
- readonly showLabel: true;
15
- };
16
- readonly card: {
17
- readonly amount: "text-base";
18
- readonly chip: 13;
19
- readonly stableChip: 10;
20
- readonly divider: "h-4";
21
- readonly showLabel: false;
22
- };
23
- };
24
- declare function DualPrice({ amountFormatted, currency, usdValue, scale, trailing, secondaryClassName, }: {
25
- amountFormatted: string | null | undefined;
26
- currency: string | null | undefined;
27
- usdValue?: string | null;
28
- scale: keyof typeof DUAL_PRICE_SCALES;
29
- trailing?: ReactNode;
30
- secondaryClassName?: string;
31
- }): react_jsx_runtime.JSX.Element | null;
32
- declare const CHIP_TONES: {
33
- readonly "overlay-dark": {
34
- readonly dot: "text-white/30";
35
- readonly text: "text-white/65";
36
- };
37
- readonly card: {
38
- readonly dot: "text-muted-foreground/50";
39
- readonly text: "text-muted-foreground";
40
- };
41
- readonly solid: {
42
- readonly dot: "text-foreground/40";
43
- readonly text: "text-foreground";
44
- };
45
- };
46
- declare function PriceChipContent({ amountFormatted, currency, usdValue, tone, }: {
47
- amountFormatted: string | null | undefined;
48
- currency: string | null | undefined;
49
- usdValue?: string | null;
50
- tone: keyof typeof CHIP_TONES;
51
- }): react_jsx_runtime.JSX.Element | null;
52
-
53
- export { CoinChip, DualPrice, PriceChipContent };
@@ -1,138 +0,0 @@
1
- "use client";
2
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
- import { CurrencyIcon } from "./currency-icon.js";
4
- import { formatDisplayPrice, isStableCurrency } from "../utils/format.js";
5
- function CoinChip({ symbol, size }) {
6
- return /* @__PURE__ */ jsx(
7
- "span",
8
- {
9
- className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]",
10
- style: { width: size + 10, height: size + 10 },
11
- children: /* @__PURE__ */ jsx(CurrencyIcon, { symbol: symbol ?? "", size })
12
- }
13
- );
14
- }
15
- function FiatChip({ size }) {
16
- return /* @__PURE__ */ jsx(
17
- "span",
18
- {
19
- className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80",
20
- style: { width: size + 10, height: size + 10, fontSize: size },
21
- children: "$"
22
- }
23
- );
24
- }
25
- function stripDollarSign(usdValue) {
26
- return usdValue.replace("$", "");
27
- }
28
- const DISPLAY_FACE = "font-extrabold tracking-tight tabular-nums";
29
- const DUAL_PRICE_SCALES = {
30
- hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },
31
- card: { amount: "text-base", chip: 13, stableChip: 10, divider: "h-4", showLabel: false }
32
- };
33
- function PriceUnit({
34
- chip,
35
- amount,
36
- label,
37
- amountClassName
38
- }) {
39
- return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
40
- chip,
41
- /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
42
- /* @__PURE__ */ jsx("span", { className: amountClassName, children: amount }),
43
- label && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground/70", children: label })
44
- ] })
45
- ] });
46
- }
47
- function DualPrice({
48
- amountFormatted,
49
- currency,
50
- usdValue,
51
- scale,
52
- trailing,
53
- secondaryClassName
54
- }) {
55
- if (!amountFormatted) return null;
56
- const s = DUAL_PRICE_SCALES[scale];
57
- const cryptoDisplay = formatDisplayPrice(amountFormatted);
58
- const amountClass = `${DISPLAY_FACE} ${s.amount}`;
59
- if (!usdValue) {
60
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
61
- /* @__PURE__ */ jsx(
62
- PriceUnit,
63
- {
64
- chip: /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.chip }),
65
- amount: cryptoDisplay,
66
- label: s.showLabel ? currency ?? void 0 : void 0,
67
- amountClassName: amountClass
68
- }
69
- ),
70
- trailing && /* @__PURE__ */ jsx("span", { className: "ml-0.5", children: trailing })
71
- ] });
72
- }
73
- const stable = isStableCurrency(currency);
74
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
75
- /* @__PURE__ */ jsx(
76
- PriceUnit,
77
- {
78
- chip: /* @__PURE__ */ jsx(FiatChip, { size: s.chip }),
79
- amount: stripDollarSign(usdValue),
80
- label: s.showLabel ? "USD" : void 0,
81
- amountClassName: amountClass
82
- }
83
- ),
84
- /* @__PURE__ */ jsxs("span", { className: `items-center gap-2.5 ${secondaryClassName ?? "flex"}`, children: [
85
- !stable && /* @__PURE__ */ jsx("span", { className: `${s.divider} w-px bg-border/60 shrink-0` }),
86
- stable ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
87
- /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.stableChip }),
88
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground", children: currency })
89
- ] }) : /* @__PURE__ */ jsx(
90
- PriceUnit,
91
- {
92
- chip: /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.chip }),
93
- amount: cryptoDisplay,
94
- label: s.showLabel ? currency ?? void 0 : void 0,
95
- amountClassName: amountClass
96
- }
97
- )
98
- ] }),
99
- trailing && /* @__PURE__ */ jsx("span", { className: "ml-0.5", children: trailing })
100
- ] });
101
- }
102
- const CHIP_TONES = {
103
- "overlay-dark": { dot: "text-white/30", text: "text-white/65" },
104
- card: { dot: "text-muted-foreground/50", text: "text-muted-foreground" },
105
- solid: { dot: "text-foreground/40", text: "text-foreground" }
106
- };
107
- function PriceChipContent({
108
- amountFormatted,
109
- currency,
110
- usdValue,
111
- tone
112
- }) {
113
- if (!amountFormatted) return null;
114
- const cryptoDisplay = formatDisplayPrice(amountFormatted);
115
- const stable = isStableCurrency(currency);
116
- if (!usdValue) {
117
- return /* @__PURE__ */ jsxs(Fragment, { children: [
118
- currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: currency, size: 13 }),
119
- cryptoDisplay
120
- ] });
121
- }
122
- const t = CHIP_TONES[tone];
123
- return /* @__PURE__ */ jsxs(Fragment, { children: [
124
- stripDollarSign(usdValue),
125
- /* @__PURE__ */ jsx("span", { className: t.text, children: "USD" }),
126
- /* @__PURE__ */ jsx("span", { className: t.dot, children: "\xB7" }),
127
- /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 ${t.text}`, children: [
128
- currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: currency, size: 12 }),
129
- stable ? currency : cryptoDisplay
130
- ] })
131
- ] });
132
- }
133
- export {
134
- CoinChip,
135
- DualPrice,
136
- PriceChipContent
137
- };
138
- //# sourceMappingURL=dual-price.js.map
@@ -1 +0,0 @@
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\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\nfunction FiatChip({ size }: { size: number }) {\n return (\n <span\n className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n style={{ width: size + 10, height: size + 10, fontSize: size }}\n >\n $\n </span>\n );\n}\n\nfunction stripDollarSign(usdValue: string): string {\n return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n\n hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n\n card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\nfunction PriceUnit({\n chip,\n amount,\n label,\n amountClassName,\n}: {\n chip: ReactNode;\n amount: string;\n label?: string;\n amountClassName: string;\n}) {\n return (\n <span className=\"inline-flex items-center gap-1.5\">\n {chip}\n <span className=\"flex items-baseline gap-1.5\">\n <span className={amountClassName}>{amount}</span>\n {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n </span>\n </span>\n );\n}\n\nexport function DualPrice({\n amountFormatted,\n currency,\n usdValue,\n scale,\n trailing,\n secondaryClassName,\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 secondaryClassName?: string;\n}) {\n if (!amountFormatted) return null;\n const s = DUAL_PRICE_SCALES[scale];\n const cryptoDisplay = formatDisplayPrice(amountFormatted);\n const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n if (!usdValue) {\n return (\n <div className=\"flex items-center gap-2.5\">\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\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 <PriceUnit\n chip={<FiatChip size={s.chip} />}\n amount={stripDollarSign(usdValue)}\n label={s.showLabel ? \"USD\" : undefined}\n amountClassName={amountClass}\n />\n <span className={`items-center gap-2.5 ${secondaryClassName ?? \"flex\"}`}>\n {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n {stable ? (\n <span className=\"inline-flex items-center gap-1.5\">\n <CoinChip symbol={currency} size={s.stableChip} />\n <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n </span>\n ) : (\n <PriceUnit\n chip={<CoinChip symbol={currency} size={s.chip} />}\n amount={cryptoDisplay}\n label={s.showLabel ? (currency ?? undefined) : undefined}\n amountClassName={amountClass}\n />\n )}\n </span>\n {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n </div>\n );\n}\n\nconst CHIP_TONES = {\n\n \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n\n card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n\n solid: { dot: \"text-foreground/40\", text: \"text-foreground\" },\n} as const;\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 {stripDollarSign(usdValue)}\n <span className={t.text}>USD</span>\n <span className={t.dot}>·</span>\n <span className={`inline-flex items-center gap-1 ${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":[]}