kaleido-ui 0.1.7 → 0.1.9

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 +56 -77
  2. package/dist/web/index.d.cts +7 -2
  3. package/dist/web/index.d.ts +7 -2
  4. package/dist/web/index.js +56 -77
  5. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -3837,7 +3837,7 @@ function WithdrawDestinationInput({
3837
3837
  {
3838
3838
  type: "text",
3839
3839
  "data-testid": "withdraw-destination-input",
3840
- className: "w-full rounded-2xl border bg-card px-5 py-4 pr-20 font-mono text-sm text-white shadow-inner transition-all placeholder:text-white/20 focus:border-primary/50 focus:outline-none",
3840
+ className: "w-full rounded-2xl bg-card px-5 py-4 pr-20 font-mono text-sm text-white shadow-inner transition-all placeholder:text-white/20 focus:outline focus:outline-2 focus:outline-primary/50",
3841
3841
  placeholder: "Address, Invoice, or RGB Invoice",
3842
3842
  value: destination,
3843
3843
  onChange: (event) => setDestination(event.target.value)
@@ -5197,8 +5197,7 @@ function DepositGeneratedView({
5197
5197
  setAddress,
5198
5198
  setRecipientId,
5199
5199
  setAmount,
5200
- setInvoiceStatus,
5201
- handleDone
5200
+ setInvoiceStatus
5202
5201
  }) {
5203
5202
  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
5204
5203
  (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
@@ -5343,36 +5342,24 @@ function DepositGeneratedView({
5343
5342
  ]
5344
5343
  }
5345
5344
  ),
5346
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
5347
- NetworkInfoDisclosure,
5345
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
5346
+ "button",
5348
5347
  {
5349
- networks: network === "arkade" ? arkSubMode === "boarding" ? ["onchain", "arkade"] : ["arkade"] : [network]
5348
+ type: "button",
5349
+ onClick: () => {
5350
+ setAddress("");
5351
+ setRecipientId("");
5352
+ setAmount("");
5353
+ setInvoiceStatus(null);
5354
+ },
5355
+ className: "flex items-center justify-center gap-1.5 rounded-xl bg-primary/15 px-5 py-3 text-xs font-bold text-primary transition-all hover:bg-primary/25 active:scale-[0.98]",
5356
+ children: [
5357
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
5358
+ "New ",
5359
+ network === "lightning" ? "Invoice" : "Address"
5360
+ ]
5350
5361
  }
5351
- ),
5352
- /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex gap-2.5 pt-1", children: [
5353
- /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
5354
- "button",
5355
- {
5356
- type: "button",
5357
- onClick: () => {
5358
- setAddress("");
5359
- setRecipientId("");
5360
- setAmount("");
5361
- setInvoiceStatus(null);
5362
- },
5363
- className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border py-3 text-xs font-bold text-muted-foreground transition-all hover:border-border hover:bg-accent hover:text-white active:scale-[0.98]",
5364
- children: [
5365
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
5366
- "New ",
5367
- network === "lightning" ? "Invoice" : "Address"
5368
- ]
5369
- }
5370
- ),
5371
- /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Button, { variant: "cta", onClick: handleDone, children: [
5372
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "material-symbols-outlined text-icon-sm", children: "check" }),
5373
- "Done"
5374
- ] })
5375
- ] })
5362
+ ) })
5376
5363
  ] });
5377
5364
  }
5378
5365
 
@@ -5555,37 +5542,40 @@ function DepositAssetSelection({
5555
5542
  account: "RGB",
5556
5543
  title: "New RGB Asset",
5557
5544
  ticker: "RGB",
5558
- enabled: isRgbConnected
5545
+ enabled: isRgbConnected,
5546
+ idleClass: "bg-primary/10 hover:bg-primary/20",
5547
+ activeClass: "bg-primary/25",
5548
+ titleHoverClass: "group-hover:text-primary"
5559
5549
  },
5560
5550
  {
5561
5551
  account: "SPARK",
5562
5552
  title: "New Spark Asset",
5563
5553
  ticker: "SPARK",
5564
- enabled: isSparkConnected
5554
+ enabled: isSparkConnected,
5555
+ idleClass: "bg-info/10 hover:bg-info/20",
5556
+ activeClass: "bg-info/25",
5557
+ titleHoverClass: "group-hover:text-info"
5565
5558
  },
5566
5559
  {
5567
5560
  account: "ARKADE",
5568
5561
  title: "New Arkade Asset",
5569
5562
  ticker: "ARKADE",
5570
- enabled: isArkadeConnected
5563
+ enabled: isArkadeConnected,
5564
+ idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
5565
+ activeClass: "bg-network-arkade/25",
5566
+ titleHoverClass: "group-hover:text-network-arkade"
5571
5567
  }
5572
5568
  ].filter((option) => option.enabled);
5573
5569
  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5574
5570
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PageHeader, { title: "Deposit", onBack: () => setCurrentView("dashboard") }),
5575
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-shrink-0 space-y-2 px-5 pb-3 pt-4", children: [
5576
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
5577
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
5578
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex size-6 items-center justify-center rounded-full bg-primary shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-tiny font-black text-background", children: "1" }) }),
5579
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-bold tracking-wide text-primary", children: "Select Asset" })
5580
- ] }),
5581
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mx-1 h-px flex-1 bg-white/10" }),
5582
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
5583
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex size-6 items-center justify-center rounded-full border border-white/20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-tiny font-black text-white/30", children: "2" }) }),
5584
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-bold tracking-wide text-white/30", children: "Receive" })
5585
- ] })
5586
- ] }),
5587
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "h-0.5 w-full overflow-hidden rounded-full bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "h-full w-1/2 rounded-full bg-primary transition-all duration-500" }) })
5588
- ] }),
5571
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5572
+ DotPagination,
5573
+ {
5574
+ count: 2,
5575
+ index: 0,
5576
+ ariaLabel: "Deposit step 1 of 2: select asset"
5577
+ }
5578
+ ) }),
5589
5579
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
5590
5580
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5591
5581
  Icon2,
@@ -5701,14 +5691,14 @@ function DepositAssetSelection({
5701
5691
  {
5702
5692
  type: "button",
5703
5693
  onClick: () => setCurrentView("bridge"),
5704
- className: "group flex w-full items-center gap-3 rounded-2xl border border-info/20 bg-gradient-to-r from-info/10 to-network-arkade/10 p-3 transition-all hover:border-info/40",
5694
+ className: "group flex w-full items-center gap-3 rounded-2xl bg-gradient-to-r from-primary/10 to-primary/5 p-3 transition-all hover:from-primary/20 hover:to-primary/10",
5705
5695
  children: [
5706
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-info/20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined text-lg text-info", children: "swap_calls" }) }),
5696
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined text-lg text-primary", children: "swap_calls" }) }),
5707
5697
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-1 text-left", children: [
5708
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-info", children: "Bridge from another chain" }),
5698
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Bridge from another chain" }),
5709
5699
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
5710
5700
  ] }),
5711
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-info", children: "arrow_forward" })
5701
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
5712
5702
  ]
5713
5703
  }
5714
5704
  ) }),
@@ -5729,37 +5719,26 @@ function DepositAssetSelection({
5729
5719
  type: "button",
5730
5720
  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
5731
5721
  className: cn(
5732
- "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl border px-3 py-3.5 text-center text-sm transition-all",
5733
- active ? "border-network-arkade/30 bg-network-arkade/10" : "border-white/8 bg-white/3 hover:border-network-arkade/30 hover:bg-network-arkade/5"
5722
+ "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
5723
+ active ? option.activeClass : option.idleClass
5734
5724
  ),
5735
5725
  onClick: () => handleAddNewAsset(option.account),
5736
5726
  children: [
5737
5727
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
5738
5728
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: option.ticker, size: 40 }),
5739
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5740
- "div",
5741
- {
5742
- className: cn(
5743
- "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border",
5744
- active ? "border-network-arkade/40 bg-network-arkade" : "border-border bg-card"
5745
- ),
5746
- children: active ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "check", size: "xs", className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-muted-foreground" })
5747
- }
5748
- )
5729
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: active ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "check", size: "xs", className: "text-background" }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5749
5730
  ] }),
5750
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mt-2 min-w-0", children: [
5751
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5752
- "div",
5753
- {
5754
- className: cn(
5755
- "text-xs font-bold tracking-wide",
5756
- active ? "text-network-arkade" : "text-muted-foreground group-hover:text-white"
5757
- ),
5758
- children: option.account
5759
- }
5760
- ),
5761
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-1 text-xxs leading-tight text-white/40", children: option.title })
5762
- ] })
5731
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5732
+ "div",
5733
+ {
5734
+ className: cn(
5735
+ "text-sm font-bold tracking-wide",
5736
+ active ? "text-white" : "text-white group-hover:opacity-90",
5737
+ !active && option.titleHoverClass
5738
+ ),
5739
+ children: option.title
5740
+ }
5741
+ ) })
5763
5742
  ]
5764
5743
  },
5765
5744
  option.account
package/dist/web/index.d.cts CHANGED
@@ -1130,9 +1130,14 @@ interface DepositGeneratedViewProps {
1130
1130
  setRecipientId: (value: string) => void;
1131
1131
  setAmount: (value: string) => void;
1132
1132
  setInvoiceStatus: (value: string | null) => void;
1133
- handleDone: () => void;
1133
+ /**
1134
+ * @deprecated Done button removed in v0.1.8 per the v1.0.0 wallet redesign;
1135
+ * users navigate away via the standard back button. Prop kept for source
1136
+ * compatibility — it is no longer invoked.
1137
+ */
1138
+ handleDone?: () => void;
1134
1139
  }
1135
- declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, handleDone, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1140
+ declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1136
1141
 
1137
1142
  interface DepositPreGenerationAsset {
1138
1143
  ticker?: string;
package/dist/web/index.d.ts CHANGED
@@ -1130,9 +1130,14 @@ interface DepositGeneratedViewProps {
1130
1130
  setRecipientId: (value: string) => void;
1131
1131
  setAmount: (value: string) => void;
1132
1132
  setInvoiceStatus: (value: string | null) => void;
1133
- handleDone: () => void;
1133
+ /**
1134
+ * @deprecated Done button removed in v0.1.8 per the v1.0.0 wallet redesign;
1135
+ * users navigate away via the standard back button. Prop kept for source
1136
+ * compatibility — it is no longer invoked.
1137
+ */
1138
+ handleDone?: () => void;
1134
1139
  }
1135
- declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, handleDone, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1140
+ declare function DepositGeneratedView({ network, net, isBtc, address, addressLabel, recipientId, arkSubMode, invoiceStatus, isInvoicePending, isInvoicePaid, isInvoiceFailedOrExpired, amount, handleAmountChange, loading, copied, copyToClipboard, getUnitLabel, selectedAsset, maxDepositAmount, setAddress, setRecipientId, setAmount, setInvoiceStatus, }: DepositGeneratedViewProps): react_jsx_runtime.JSX.Element;
1136
1141
 
1137
1142
  interface DepositPreGenerationAsset {
1138
1143
  ticker?: string;
package/dist/web/index.js CHANGED
@@ -3682,7 +3682,7 @@ function WithdrawDestinationInput({
3682
3682
  {
3683
3683
  type: "text",
3684
3684
  "data-testid": "withdraw-destination-input",
3685
- className: "w-full rounded-2xl border bg-card px-5 py-4 pr-20 font-mono text-sm text-white shadow-inner transition-all placeholder:text-white/20 focus:border-primary/50 focus:outline-none",
3685
+ className: "w-full rounded-2xl bg-card px-5 py-4 pr-20 font-mono text-sm text-white shadow-inner transition-all placeholder:text-white/20 focus:outline focus:outline-2 focus:outline-primary/50",
3686
3686
  placeholder: "Address, Invoice, or RGB Invoice",
3687
3687
  value: destination,
3688
3688
  onChange: (event) => setDestination(event.target.value)
@@ -5042,8 +5042,7 @@ function DepositGeneratedView({
5042
5042
  setAddress,
5043
5043
  setRecipientId,
5044
5044
  setAmount,
5045
- setInvoiceStatus,
5046
- handleDone
5045
+ setInvoiceStatus
5047
5046
  }) {
5048
5047
  return /* @__PURE__ */ jsxs43("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
5049
5048
  (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-1.5 rounded-xl border border-white/8 bg-white/3 p-2.5", children: [
@@ -5188,36 +5187,24 @@ function DepositGeneratedView({
5188
5187
  ]
5189
5188
  }
5190
5189
  ),
5191
- /* @__PURE__ */ jsx56(
5192
- NetworkInfoDisclosure,
5190
+ /* @__PURE__ */ jsx56("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsxs43(
5191
+ "button",
5193
5192
  {
5194
- networks: network === "arkade" ? arkSubMode === "boarding" ? ["onchain", "arkade"] : ["arkade"] : [network]
5193
+ type: "button",
5194
+ onClick: () => {
5195
+ setAddress("");
5196
+ setRecipientId("");
5197
+ setAmount("");
5198
+ setInvoiceStatus(null);
5199
+ },
5200
+ className: "flex items-center justify-center gap-1.5 rounded-xl bg-primary/15 px-5 py-3 text-xs font-bold text-primary transition-all hover:bg-primary/25 active:scale-[0.98]",
5201
+ children: [
5202
+ /* @__PURE__ */ jsx56("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
5203
+ "New ",
5204
+ network === "lightning" ? "Invoice" : "Address"
5205
+ ]
5195
5206
  }
5196
- ),
5197
- /* @__PURE__ */ jsxs43("div", { className: "flex gap-2.5 pt-1", children: [
5198
- /* @__PURE__ */ jsxs43(
5199
- "button",
5200
- {
5201
- type: "button",
5202
- onClick: () => {
5203
- setAddress("");
5204
- setRecipientId("");
5205
- setAmount("");
5206
- setInvoiceStatus(null);
5207
- },
5208
- className: "flex flex-1 items-center justify-center gap-1.5 rounded-xl border py-3 text-xs font-bold text-muted-foreground transition-all hover:border-border hover:bg-accent hover:text-white active:scale-[0.98]",
5209
- children: [
5210
- /* @__PURE__ */ jsx56("span", { className: "material-symbols-outlined text-icon-sm", children: "refresh" }),
5211
- "New ",
5212
- network === "lightning" ? "Invoice" : "Address"
5213
- ]
5214
- }
5215
- ),
5216
- /* @__PURE__ */ jsxs43(Button, { variant: "cta", onClick: handleDone, children: [
5217
- /* @__PURE__ */ jsx56("span", { className: "material-symbols-outlined text-icon-sm", children: "check" }),
5218
- "Done"
5219
- ] })
5220
- ] })
5207
+ ) })
5221
5208
  ] });
5222
5209
  }
5223
5210
 
@@ -5400,37 +5387,40 @@ function DepositAssetSelection({
5400
5387
  account: "RGB",
5401
5388
  title: "New RGB Asset",
5402
5389
  ticker: "RGB",
5403
- enabled: isRgbConnected
5390
+ enabled: isRgbConnected,
5391
+ idleClass: "bg-primary/10 hover:bg-primary/20",
5392
+ activeClass: "bg-primary/25",
5393
+ titleHoverClass: "group-hover:text-primary"
5404
5394
  },
5405
5395
  {
5406
5396
  account: "SPARK",
5407
5397
  title: "New Spark Asset",
5408
5398
  ticker: "SPARK",
5409
- enabled: isSparkConnected
5399
+ enabled: isSparkConnected,
5400
+ idleClass: "bg-info/10 hover:bg-info/20",
5401
+ activeClass: "bg-info/25",
5402
+ titleHoverClass: "group-hover:text-info"
5410
5403
  },
5411
5404
  {
5412
5405
  account: "ARKADE",
5413
5406
  title: "New Arkade Asset",
5414
5407
  ticker: "ARKADE",
5415
- enabled: isArkadeConnected
5408
+ enabled: isArkadeConnected,
5409
+ idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
5410
+ activeClass: "bg-network-arkade/25",
5411
+ titleHoverClass: "group-hover:text-network-arkade"
5416
5412
  }
5417
5413
  ].filter((option) => option.enabled);
5418
5414
  return /* @__PURE__ */ jsxs45("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5419
5415
  /* @__PURE__ */ jsx58(PageHeader, { title: "Deposit", onBack: () => setCurrentView("dashboard") }),
5420
- /* @__PURE__ */ jsxs45("div", { className: "flex-shrink-0 space-y-2 px-5 pb-3 pt-4", children: [
5421
- /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
5422
- /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
5423
- /* @__PURE__ */ jsx58("div", { className: "flex size-6 items-center justify-center rounded-full bg-primary shadow-sm", children: /* @__PURE__ */ jsx58("span", { className: "text-tiny font-black text-background", children: "1" }) }),
5424
- /* @__PURE__ */ jsx58("span", { className: "text-xs font-bold tracking-wide text-primary", children: "Select Asset" })
5425
- ] }),
5426
- /* @__PURE__ */ jsx58("div", { className: "mx-1 h-px flex-1 bg-white/10" }),
5427
- /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
5428
- /* @__PURE__ */ jsx58("div", { className: "flex size-6 items-center justify-center rounded-full border border-white/20", children: /* @__PURE__ */ jsx58("span", { className: "text-tiny font-black text-white/30", children: "2" }) }),
5429
- /* @__PURE__ */ jsx58("span", { className: "text-xs font-bold tracking-wide text-white/30", children: "Receive" })
5430
- ] })
5431
- ] }),
5432
- /* @__PURE__ */ jsx58("div", { className: "h-0.5 w-full overflow-hidden rounded-full bg-white/5", children: /* @__PURE__ */ jsx58("div", { className: "h-full w-1/2 rounded-full bg-primary transition-all duration-500" }) })
5433
- ] }),
5416
+ /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ jsx58(
5417
+ DotPagination,
5418
+ {
5419
+ count: 2,
5420
+ index: 0,
5421
+ ariaLabel: "Deposit step 1 of 2: select asset"
5422
+ }
5423
+ ) }),
5434
5424
  /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5435
5425
  /* @__PURE__ */ jsx58(
5436
5426
  Icon2,
@@ -5546,14 +5536,14 @@ function DepositAssetSelection({
5546
5536
  {
5547
5537
  type: "button",
5548
5538
  onClick: () => setCurrentView("bridge"),
5549
- className: "group flex w-full items-center gap-3 rounded-2xl border border-info/20 bg-gradient-to-r from-info/10 to-network-arkade/10 p-3 transition-all hover:border-info/40",
5539
+ className: "group flex w-full items-center gap-3 rounded-2xl bg-gradient-to-r from-primary/10 to-primary/5 p-3 transition-all hover:from-primary/20 hover:to-primary/10",
5550
5540
  children: [
5551
- /* @__PURE__ */ jsx58("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-info/20", children: /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-lg text-info", children: "swap_calls" }) }),
5541
+ /* @__PURE__ */ jsx58("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/20", children: /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-lg text-primary", children: "swap_calls" }) }),
5552
5542
  /* @__PURE__ */ jsxs45("div", { className: "flex-1 text-left", children: [
5553
- /* @__PURE__ */ jsx58("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-info", children: "Bridge from another chain" }),
5543
+ /* @__PURE__ */ jsx58("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Bridge from another chain" }),
5554
5544
  /* @__PURE__ */ jsx58("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
5555
5545
  ] }),
5556
- /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-info", children: "arrow_forward" })
5546
+ /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
5557
5547
  ]
5558
5548
  }
5559
5549
  ) }),
@@ -5574,37 +5564,26 @@ function DepositAssetSelection({
5574
5564
  type: "button",
5575
5565
  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
5576
5566
  className: cn(
5577
- "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl border px-3 py-3.5 text-center text-sm transition-all",
5578
- active ? "border-network-arkade/30 bg-network-arkade/10" : "border-white/8 bg-white/3 hover:border-network-arkade/30 hover:bg-network-arkade/5"
5567
+ "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
5568
+ active ? option.activeClass : option.idleClass
5579
5569
  ),
5580
5570
  onClick: () => handleAddNewAsset(option.account),
5581
5571
  children: [
5582
5572
  /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5583
5573
  /* @__PURE__ */ jsx58(AssetIcon, { ticker: option.ticker, size: 40 }),
5584
- /* @__PURE__ */ jsx58(
5585
- "div",
5586
- {
5587
- className: cn(
5588
- "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border",
5589
- active ? "border-network-arkade/40 bg-network-arkade" : "border-border bg-card"
5590
- ),
5591
- children: active ? /* @__PURE__ */ jsx58(Icon2, { name: "check", size: "xs", className: "text-white" }) : /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-muted-foreground" })
5592
- }
5593
- )
5574
+ /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: active ? /* @__PURE__ */ jsx58(Icon2, { name: "check", size: "xs", className: "text-background" }) : /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5594
5575
  ] }),
5595
- /* @__PURE__ */ jsxs45("div", { className: "mt-2 min-w-0", children: [
5596
- /* @__PURE__ */ jsx58(
5597
- "div",
5598
- {
5599
- className: cn(
5600
- "text-xs font-bold tracking-wide",
5601
- active ? "text-network-arkade" : "text-muted-foreground group-hover:text-white"
5602
- ),
5603
- children: option.account
5604
- }
5605
- ),
5606
- /* @__PURE__ */ jsx58("div", { className: "mt-1 text-xxs leading-tight text-white/40", children: option.title })
5607
- ] })
5576
+ /* @__PURE__ */ jsx58("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx58(
5577
+ "div",
5578
+ {
5579
+ className: cn(
5580
+ "text-sm font-bold tracking-wide",
5581
+ active ? "text-white" : "text-white group-hover:opacity-90",
5582
+ !active && option.titleHoverClass
5583
+ ),
5584
+ children: option.title
5585
+ }
5586
+ ) })
5608
5587
  ]
5609
5588
  },
5610
5589
  option.account
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
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",