kaleido-ui 0.1.82 → 0.1.83

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 (5) hide show
  1. package/dist/web/index.cjs +23 -17
  2. package/dist/web/index.d.cts +5 -1
  3. package/dist/web/index.d.ts +5 -1
  4. package/dist/web/index.js +23 -17
  5. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -907,7 +907,11 @@ var DialogContent = React7.forwardRef(({ className, children, ...props }, ref) =
907
907
  {
908
908
  ref,
909
909
  className: cn(
910
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
910
+ // Entrance/exit is a simple fast fade + 0.98→1 scale (150ms ease-out).
911
+ // The slide-from/to values sit at exactly -50%/-50% so the keyframe
912
+ // keeps the centering transform — zero positional slide, no zoom/slide
913
+ // combo. (BottomSheet owns its own slide-up; it does not use this.)
914
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-lg duration-150 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 rounded-2xl",
911
915
  className
912
916
  ),
913
917
  ...props,
@@ -1911,7 +1915,7 @@ function TransactionCard({
1911
1915
  "p",
1912
1916
  {
1913
1917
  className: cn(
1914
- "font-bold text-lg tracking-tight group-hover:opacity-90 transition-opacity",
1918
+ "font-bold text-lg tracking-tight tabular-nums group-hover:opacity-90 transition-opacity",
1915
1919
  textColor
1916
1920
  ),
1917
1921
  children: [
@@ -2210,7 +2214,7 @@ function ActionTile({
2210
2214
  ),
2211
2215
  children: [
2212
2216
  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex shrink-0 items-center justify-center text-current leading-none [&_.material-symbols-outlined]:text-icon-lg [&_.material-symbols-outlined]:leading-none", children: icon }),
2213
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate text-tiny font-semibold tracking-wide", children: label })
2217
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate text-sm font-semibold tracking-wide", children: label })
2214
2218
  ]
2215
2219
  }
2216
2220
  );
@@ -2409,7 +2413,7 @@ function BottomNav({
2409
2413
  }
2410
2414
  )
2411
2415
  ] }) : icon ?? null,
2412
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mt-0.5 text-xxs font-semibold transition-colors duration-300", children: label })
2416
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mt-0.5 max-w-full truncate text-xxs font-semibold leading-none transition-colors duration-300", children: label })
2413
2417
  ]
2414
2418
  },
2415
2419
  id
@@ -2476,7 +2480,7 @@ function AccountStatusTabs({
2476
2480
  {
2477
2481
  open: selectedAccountId !== null,
2478
2482
  onOpenChange: (open) => !open && setSelectedAccountId(null),
2479
- children: selectedAccount && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogContent, { className: "max-w-md bg-popover p-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "p-6", children: [
2483
+ children: selectedAccount && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogContent, { className: "bg-popover p-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "p-6", children: [
2480
2484
  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogHeader, { className: "text-left", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-start gap-3", children: [
2481
2485
  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn("rounded-2xl p-3", selectedAccount.accentBg), children: selectedAccount.icon }),
2482
2486
  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "min-w-0", children: [
@@ -3397,7 +3401,7 @@ function BalanceBreakdown({
3397
3401
  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
3398
3402
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
3399
3403
  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1.5 gap-y-1", children: [
3400
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3404
+ /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-display font-black leading-[1.1] tracking-tighter tabular-nums text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3401
3405
  unit !== "fiat" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-block rounded-md bg-white/8 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
3402
3406
  isPartial && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
3403
3407
  "span",
@@ -3408,8 +3412,8 @@ function BalanceBreakdown({
3408
3412
  }
3409
3413
  )
3410
3414
  ] }),
3411
- balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: fiatTotal }),
3412
- balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: [
3415
+ balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-1 text-xs font-medium tabular-nums text-white/45", children: fiatTotal }),
3416
+ balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "mt-1 text-xs font-medium tabular-nums text-white/45", children: [
3413
3417
  (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
3414
3418
  "\xA0BTC"
3415
3419
  ] })
@@ -3552,7 +3556,7 @@ function BalanceBreakdown({
3552
3556
  ] }),
3553
3557
  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col items-end", children: [
3554
3558
  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "tabular-nums text-xs font-bold text-white", children: balanceVisible ? format(tokenValueSats) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3555
- balanceVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-0.5 font-mono text-xxs text-white/35", children: formatFiatValue(tokenValueSats) })
3559
+ balanceVisible && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-0.5 text-xxs tabular-nums text-white/35", children: formatFiatValue(tokenValueSats) })
3556
3560
  ] })
3557
3561
  ] })
3558
3562
  ] }),
@@ -3702,7 +3706,7 @@ function NetworkRow({
3702
3706
  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex size-3 items-center justify-center rounded-full bg-white/[0.06]", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "size-1.5 animate-spin rounded-full border border-primary/30 border-t-primary" }) })
3703
3707
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
3704
3708
  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "tabular-nums text-xs font-bold text-white", children: visible ? format(amount) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3705
- fiat && visible && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-0.5 font-mono text-xxs text-white/35", children: fiat })
3709
+ fiat && visible && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-0.5 text-xxs tabular-nums text-white/35", children: fiat })
3706
3710
  ] }) })
3707
3711
  ]
3708
3712
  }
@@ -4092,6 +4096,8 @@ function SwapInputCard({
4092
4096
  maxText,
4093
4097
  selectedPercentage = null,
4094
4098
  percentageDisabled = false,
4099
+ hidePercentages = false,
4100
+ oneWay = false,
4095
4101
  fromUnitLabel,
4096
4102
  fromDisplayUnit,
4097
4103
  fromUnitIsToggle = false,
@@ -4133,7 +4139,7 @@ function SwapInputCard({
4133
4139
  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "p-3.5 pb-4", children: [
4134
4140
  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
4135
4141
  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }),
4136
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
4142
+ !hidePercentages && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
4137
4143
  "button",
4138
4144
  {
4139
4145
  type: "button",
@@ -4273,7 +4279,7 @@ function SwapInputCard({
4273
4279
  "span",
4274
4280
  {
4275
4281
  className: cn(
4276
- "font-mono tabular-nums",
4282
+ "tabular-nums",
4277
4283
  quoteExpiresUrgent ? "font-semibold text-warning" : "text-white/40"
4278
4284
  ),
4279
4285
  children: quoteExpiresText
@@ -4807,7 +4813,7 @@ function WithdrawAmountInput({
4807
4813
  {
4808
4814
  type: "text",
4809
4815
  inputMode: "decimal",
4810
- className: "w-full bg-transparent text-2xl font-bold text-white outline-none placeholder:text-white/15",
4816
+ className: "w-full bg-transparent text-2xl font-bold tabular-nums text-white outline-none placeholder:text-white/15",
4811
4817
  placeholder: "0",
4812
4818
  value: amount,
4813
4819
  onChange: handleAmountChange
@@ -5093,7 +5099,7 @@ function RouteChoiceCard({
5093
5099
  recommended && !disabled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
5094
5100
  disabled && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "rounded-full bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
5095
5101
  ] }),
5096
- balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-0.5 font-mono text-xs text-white/55", children: balanceLabel })
5102
+ balanceLabel && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mt-0.5 text-xs tabular-nums text-white/55", children: balanceLabel })
5097
5103
  ] })
5098
5104
  ] }),
5099
5105
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-white/40", children: route.feeHint })
@@ -5958,7 +5964,7 @@ function MetricCard({
5958
5964
  icon && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: cn("flex size-5 items-center justify-center rounded-md", toneClasses2[tone]), children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { name: icon, className: "text-icon-xs" }) : icon }),
5959
5965
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-xxs font-bold uppercase tracking-widest text-white/45", children: label })
5960
5966
  ] }),
5961
- /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "font-mono text-sm font-bold text-foreground", children: value }),
5967
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-sm font-bold tabular-nums text-foreground", children: value }),
5962
5968
  description && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "text-xxs text-white/45", children: description })
5963
5969
  ] });
5964
5970
  }
@@ -8247,7 +8253,7 @@ function DepositPreGeneration({
8247
8253
  ),
8248
8254
  children: [
8249
8255
  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-medium", children: "Available colorable UTXOs" }),
8250
- /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-mono font-bold", children: colorableUtxoCount })
8256
+ /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "font-bold tabular-nums", children: colorableUtxoCount })
8251
8257
  ]
8252
8258
  }
8253
8259
  ),
@@ -8493,7 +8499,7 @@ function DepositAssetSelection({
8493
8499
  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
8494
8500
  ] }),
8495
8501
  balance > 0 && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-shrink-0 text-right", children: [
8496
- /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
8502
+ /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-xs font-bold tabular-nums text-white", children: formatAssetBalance(asset) }),
8497
8503
  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
8498
8504
  ] }),
8499
8505
  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
package/dist/web/index.d.cts CHANGED
@@ -725,6 +725,10 @@ interface SwapInputCardProps {
725
725
  maxText?: string;
726
726
  selectedPercentage?: number | null;
727
727
  percentageDisabled?: boolean;
728
+ /** Hide the 25/50/75/Max shortcuts entirely (e.g. bridge: no local balance). */
729
+ hidePercentages?: boolean;
730
+ /** One-way flow: replace the flip button with a static down-arrow indicator. */
731
+ oneWay?: boolean;
728
732
  fromUnitLabel: string;
729
733
  fromDisplayUnit?: AmountDisplayUnit;
730
734
  fromUnitIsToggle?: boolean;
@@ -754,7 +758,7 @@ interface SwapInputCardProps {
754
758
  onFlip: () => void;
755
759
  onSubmit: () => void;
756
760
  }
757
- declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
761
+ declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, hidePercentages, oneWay, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
758
762
 
759
763
  interface ActivityListItem<TData = unknown> {
760
764
  id: string;
package/dist/web/index.d.ts CHANGED
@@ -725,6 +725,10 @@ interface SwapInputCardProps {
725
725
  maxText?: string;
726
726
  selectedPercentage?: number | null;
727
727
  percentageDisabled?: boolean;
728
+ /** Hide the 25/50/75/Max shortcuts entirely (e.g. bridge: no local balance). */
729
+ hidePercentages?: boolean;
730
+ /** One-way flow: replace the flip button with a static down-arrow indicator. */
731
+ oneWay?: boolean;
728
732
  fromUnitLabel: string;
729
733
  fromDisplayUnit?: AmountDisplayUnit;
730
734
  fromUnitIsToggle?: boolean;
@@ -754,7 +758,7 @@ interface SwapInputCardProps {
754
758
  onFlip: () => void;
755
759
  onSubmit: () => void;
756
760
  }
757
- declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
761
+ declare function SwapInputCard({ fromTicker, toTicker, fromSelectedId, toSelectedId, fromInput, fromOptions, toOptions, categories, defaultActiveCategories, availableText, showMaxText, maxText, selectedPercentage, percentageDisabled, hidePercentages, oneWay, fromUnitLabel, fromDisplayUnit, fromUnitIsToggle, receiveAmount, receiveUnitLabel, receiveDisplayUnit, isLoadingQuote, quoteError, quoteRateText, quoteVenueText, quoteVenueTone, quoteFeeText, quoteExpiresText, quoteExpiresUrgent, warning, submitLabel, submitIcon, submitVariant, submitDisabled, onFromTickerChange, onToTickerChange, onFromInputChange, onPercentageClick, onToggleFromUnit, onFlip, onSubmit, }: SwapInputCardProps): react_jsx_runtime.JSX.Element;
758
762
 
759
763
  interface ActivityListItem<TData = unknown> {
760
764
  id: string;
package/dist/web/index.js CHANGED
@@ -721,7 +721,11 @@ var DialogContent = React7.forwardRef(({ className, children, ...props }, ref) =
721
721
  {
722
722
  ref,
723
723
  className: cn(
724
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
724
+ // Entrance/exit is a simple fast fade + 0.98→1 scale (150ms ease-out).
725
+ // The slide-from/to values sit at exactly -50%/-50% so the keyframe
726
+ // keeps the centering transform — zero positional slide, no zoom/slide
727
+ // combo. (BottomSheet owns its own slide-up; it does not use this.)
728
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-lg duration-150 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 rounded-2xl",
725
729
  className
726
730
  ),
727
731
  ...props,
@@ -1725,7 +1729,7 @@ function TransactionCard({
1725
1729
  "p",
1726
1730
  {
1727
1731
  className: cn(
1728
- "font-bold text-lg tracking-tight group-hover:opacity-90 transition-opacity",
1732
+ "font-bold text-lg tracking-tight tabular-nums group-hover:opacity-90 transition-opacity",
1729
1733
  textColor
1730
1734
  ),
1731
1735
  children: [
@@ -2030,7 +2034,7 @@ function ActionTile({
2030
2034
  ),
2031
2035
  children: [
2032
2036
  /* @__PURE__ */ jsx25("span", { className: "flex shrink-0 items-center justify-center text-current leading-none [&_.material-symbols-outlined]:text-icon-lg [&_.material-symbols-outlined]:leading-none", children: icon }),
2033
- /* @__PURE__ */ jsx25("span", { className: "truncate text-tiny font-semibold tracking-wide", children: label })
2037
+ /* @__PURE__ */ jsx25("span", { className: "truncate text-sm font-semibold tracking-wide", children: label })
2034
2038
  ]
2035
2039
  }
2036
2040
  );
@@ -2229,7 +2233,7 @@ function BottomNav({
2229
2233
  }
2230
2234
  )
2231
2235
  ] }) : icon ?? null,
2232
- /* @__PURE__ */ jsx27("span", { className: "mt-0.5 text-xxs font-semibold transition-colors duration-300", children: label })
2236
+ /* @__PURE__ */ jsx27("span", { className: "mt-0.5 max-w-full truncate text-xxs font-semibold leading-none transition-colors duration-300", children: label })
2233
2237
  ]
2234
2238
  },
2235
2239
  id
@@ -2296,7 +2300,7 @@ function AccountStatusTabs({
2296
2300
  {
2297
2301
  open: selectedAccountId !== null,
2298
2302
  onOpenChange: (open) => !open && setSelectedAccountId(null),
2299
- children: selectedAccount && /* @__PURE__ */ jsx28(DialogContent, { className: "max-w-md bg-popover p-0 text-white", children: /* @__PURE__ */ jsxs15("div", { className: "p-6", children: [
2303
+ children: selectedAccount && /* @__PURE__ */ jsx28(DialogContent, { className: "bg-popover p-0 text-white", children: /* @__PURE__ */ jsxs15("div", { className: "p-6", children: [
2300
2304
  /* @__PURE__ */ jsx28(DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3", children: [
2301
2305
  /* @__PURE__ */ jsx28("div", { className: cn("rounded-2xl p-3", selectedAccount.accentBg), children: selectedAccount.icon }),
2302
2306
  /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
@@ -3217,7 +3221,7 @@ function BalanceBreakdown({
3217
3221
  /* @__PURE__ */ jsx36("div", { className: "h-3 w-20 animate-pulse rounded bg-white/5" })
3218
3222
  ] }) : /* @__PURE__ */ jsxs23(Fragment5, { children: [
3219
3223
  /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1.5 gap-y-1", children: [
3220
- /* @__PURE__ */ jsx36("span", { className: "text-display font-black leading-[1.1] tracking-tighter text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3224
+ /* @__PURE__ */ jsx36("span", { className: "text-display font-black leading-[1.1] tracking-tighter tabular-nums text-white drop-shadow-sm transition-all duration-300 group-active:scale-95 group-active:text-primary", children: balanceVisible ? numberOnly(format(totalBTC)) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3221
3225
  unit !== "fiat" && /* @__PURE__ */ jsx36("span", { className: "inline-block rounded-md bg-white/8 px-2 py-0.5 text-tiny font-bold uppercase tracking-widest text-white/45", children: label }),
3222
3226
  isPartial && /* @__PURE__ */ jsx36(
3223
3227
  "span",
@@ -3228,8 +3232,8 @@ function BalanceBreakdown({
3228
3232
  }
3229
3233
  )
3230
3234
  ] }),
3231
- balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ jsx36("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: fiatTotal }),
3232
- balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ jsxs23("span", { className: "mt-1 font-mono text-xs font-medium text-white/45", children: [
3235
+ balanceVisible && unit !== "fiat" && fiatTotal && /* @__PURE__ */ jsx36("span", { className: "mt-1 text-xs font-medium tabular-nums text-white/45", children: fiatTotal }),
3236
+ balanceVisible && unit === "fiat" && totalBTC > 0 && /* @__PURE__ */ jsxs23("span", { className: "mt-1 text-xs font-medium tabular-nums text-white/45", children: [
3233
3237
  (totalBTC / 1e8).toFixed(8).replace(/\.?0+$/, ""),
3234
3238
  "\xA0BTC"
3235
3239
  ] })
@@ -3372,7 +3376,7 @@ function BalanceBreakdown({
3372
3376
  ] }),
3373
3377
  /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-end", children: [
3374
3378
  /* @__PURE__ */ jsx36("span", { className: "tabular-nums text-xs font-bold text-white", children: balanceVisible ? format(tokenValueSats) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3375
- balanceVisible && /* @__PURE__ */ jsx36("span", { className: "mt-0.5 font-mono text-xxs text-white/35", children: formatFiatValue(tokenValueSats) })
3379
+ balanceVisible && /* @__PURE__ */ jsx36("span", { className: "mt-0.5 text-xxs tabular-nums text-white/35", children: formatFiatValue(tokenValueSats) })
3376
3380
  ] })
3377
3381
  ] })
3378
3382
  ] }),
@@ -3522,7 +3526,7 @@ function NetworkRow({
3522
3526
  /* @__PURE__ */ jsx36("span", { className: "inline-flex size-3 items-center justify-center rounded-full bg-white/[0.06]", children: /* @__PURE__ */ jsx36("span", { className: "size-1.5 animate-spin rounded-full border border-primary/30 border-t-primary" }) })
3523
3527
  ] }) : /* @__PURE__ */ jsxs23(Fragment5, { children: [
3524
3528
  /* @__PURE__ */ jsx36("span", { className: "tabular-nums text-xs font-bold text-white", children: visible ? format(amount) : "\u2022\u2022\u2022\u2022\u2022\u2022" }),
3525
- fiat && visible && !isEmpty && /* @__PURE__ */ jsx36("span", { className: "mt-0.5 font-mono text-xxs text-white/35", children: fiat })
3529
+ fiat && visible && !isEmpty && /* @__PURE__ */ jsx36("span", { className: "mt-0.5 text-xxs tabular-nums text-white/35", children: fiat })
3526
3530
  ] }) })
3527
3531
  ]
3528
3532
  }
@@ -3912,6 +3916,8 @@ function SwapInputCard({
3912
3916
  maxText,
3913
3917
  selectedPercentage = null,
3914
3918
  percentageDisabled = false,
3919
+ hidePercentages = false,
3920
+ oneWay = false,
3915
3921
  fromUnitLabel,
3916
3922
  fromDisplayUnit,
3917
3923
  fromUnitIsToggle = false,
@@ -3953,7 +3959,7 @@ function SwapInputCard({
3953
3959
  /* @__PURE__ */ jsxs25("div", { className: "p-3.5 pb-4", children: [
3954
3960
  /* @__PURE__ */ jsxs25("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
3955
3961
  /* @__PURE__ */ jsx38("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }),
3956
- /* @__PURE__ */ jsx38("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ jsxs25(
3962
+ !hidePercentages && /* @__PURE__ */ jsx38("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ jsxs25(
3957
3963
  "button",
3958
3964
  {
3959
3965
  type: "button",
@@ -4093,7 +4099,7 @@ function SwapInputCard({
4093
4099
  "span",
4094
4100
  {
4095
4101
  className: cn(
4096
- "font-mono tabular-nums",
4102
+ "tabular-nums",
4097
4103
  quoteExpiresUrgent ? "font-semibold text-warning" : "text-white/40"
4098
4104
  ),
4099
4105
  children: quoteExpiresText
@@ -4627,7 +4633,7 @@ function WithdrawAmountInput({
4627
4633
  {
4628
4634
  type: "text",
4629
4635
  inputMode: "decimal",
4630
- className: "w-full bg-transparent text-2xl font-bold text-white outline-none placeholder:text-white/15",
4636
+ className: "w-full bg-transparent text-2xl font-bold tabular-nums text-white outline-none placeholder:text-white/15",
4631
4637
  placeholder: "0",
4632
4638
  value: amount,
4633
4639
  onChange: handleAmountChange
@@ -4913,7 +4919,7 @@ function RouteChoiceCard({
4913
4919
  recommended && !disabled && /* @__PURE__ */ jsx48("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-primary", children: "Recommended" }),
4914
4920
  disabled && /* @__PURE__ */ jsx48("span", { className: "rounded-full bg-danger/10 px-2 py-0.5 text-xxs font-bold uppercase tracking-wider text-danger", children: "Insufficient" })
4915
4921
  ] }),
4916
- balanceLabel && /* @__PURE__ */ jsx48("p", { className: "mt-0.5 font-mono text-xs text-white/55", children: balanceLabel })
4922
+ balanceLabel && /* @__PURE__ */ jsx48("p", { className: "mt-0.5 text-xs tabular-nums text-white/55", children: balanceLabel })
4917
4923
  ] })
4918
4924
  ] }),
4919
4925
  /* @__PURE__ */ jsx48("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-white/40", children: route.feeHint })
@@ -5778,7 +5784,7 @@ function MetricCard({
5778
5784
  icon && /* @__PURE__ */ jsx65("span", { className: cn("flex size-5 items-center justify-center rounded-md", toneClasses2[tone]), children: typeof icon === "string" ? /* @__PURE__ */ jsx65(Icon, { name: icon, className: "text-icon-xs" }) : icon }),
5779
5785
  /* @__PURE__ */ jsx65("span", { className: "text-xxs font-bold uppercase tracking-widest text-white/45", children: label })
5780
5786
  ] }),
5781
- /* @__PURE__ */ jsx65("p", { className: "font-mono text-sm font-bold text-foreground", children: value }),
5787
+ /* @__PURE__ */ jsx65("p", { className: "text-sm font-bold tabular-nums text-foreground", children: value }),
5782
5788
  description && /* @__PURE__ */ jsx65("p", { className: "text-xxs text-white/45", children: description })
5783
5789
  ] });
5784
5790
  }
@@ -8067,7 +8073,7 @@ function DepositPreGeneration({
8067
8073
  ),
8068
8074
  children: [
8069
8075
  /* @__PURE__ */ jsx79("span", { className: "font-medium", children: "Available colorable UTXOs" }),
8070
- /* @__PURE__ */ jsx79("span", { className: "font-mono font-bold", children: colorableUtxoCount })
8076
+ /* @__PURE__ */ jsx79("span", { className: "font-bold tabular-nums", children: colorableUtxoCount })
8071
8077
  ]
8072
8078
  }
8073
8079
  ),
@@ -8313,7 +8319,7 @@ function DepositAssetSelection({
8313
8319
  /* @__PURE__ */ jsx80("div", { className: "mt-0.5 truncate text-xs text-white/40", children: asset.name ?? "Asset" })
8314
8320
  ] }),
8315
8321
  balance > 0 && /* @__PURE__ */ jsxs66("div", { className: "flex-shrink-0 text-right", children: [
8316
- /* @__PURE__ */ jsx80("div", { className: "font-mono text-xs font-bold text-white", children: formatAssetBalance(asset) }),
8322
+ /* @__PURE__ */ jsx80("div", { className: "text-xs font-bold tabular-nums text-white", children: formatAssetBalance(asset) }),
8317
8323
  /* @__PURE__ */ jsx80("div", { className: "mt-0.5 text-tiny uppercase tracking-wider text-white/35", children: asset.ticker })
8318
8324
  ] }),
8319
8325
  /* @__PURE__ */ jsx80("span", { className: "material-symbols-outlined flex-shrink-0 text-icon-sm text-white/20 transition-colors group-hover:text-white/50", children: "arrow_forward" })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.82",
3
+ "version": "0.1.83",
4
4
  "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
5
5
  "license": "MIT",
6
6
  "type": "module",