kaleido-ui 0.1.8 → 0.1.10

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 +61 -65
  2. package/dist/web/index.d.cts +3 -1
  3. package/dist/web/index.d.ts +3 -1
  4. package/dist/web/index.js +61 -65
  5. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -1141,6 +1141,22 @@ function NetworkBadge({
1141
1141
  const content = children ?? (shouldShowLabel ? label : null);
1142
1142
  const chipSize = size === "sm" ? "size-6" : "size-8";
1143
1143
  const imageSize = size === "sm" ? "size-3.5" : "size-icon-lg";
1144
+ const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1145
+ "span",
1146
+ {
1147
+ className: cn("material-symbols-outlined leading-none", color, className2),
1148
+ style: { fontSize: size === "sm" ? 12 : 16 },
1149
+ "aria-hidden": true,
1150
+ children: "link"
1151
+ }
1152
+ ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1153
+ "img",
1154
+ {
1155
+ src: icon,
1156
+ alt: network,
1157
+ className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
1158
+ }
1159
+ );
1144
1160
  if (!content) {
1145
1161
  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1146
1162
  "span",
@@ -1151,14 +1167,7 @@ function NetworkBadge({
1151
1167
  iconBg,
1152
1168
  className
1153
1169
  ),
1154
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1155
- "img",
1156
- {
1157
- src: icon,
1158
- alt: network,
1159
- className: cn(imageSize, "object-contain", defaultIconClassName, iconClassName)
1160
- }
1161
- )
1170
+ children: renderGlyph(imageSize)
1162
1171
  }
1163
1172
  );
1164
1173
  }
@@ -1173,14 +1182,7 @@ function NetworkBadge({
1173
1182
  className
1174
1183
  ),
1175
1184
  children: [
1176
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1177
- "img",
1178
- {
1179
- src: icon,
1180
- alt: network,
1181
- className: cn(size === "sm" ? "size-3" : "size-3.5", "object-contain", defaultIconClassName, iconClassName)
1182
- }
1183
- ),
1185
+ renderGlyph(size === "sm" ? "size-3" : "size-3.5"),
1184
1186
  content
1185
1187
  ]
1186
1188
  }
@@ -1359,7 +1361,7 @@ function AssetCard({
1359
1361
  children: name
1360
1362
  }
1361
1363
  ),
1362
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NetworkBadge, { network, showLabel: true, size: "sm" }, network)) })
1364
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NetworkBadge, { network, size: "sm" }, network)) })
1363
1365
  ] })
1364
1366
  ] }),
1365
1367
  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-right", children: [
@@ -2371,7 +2373,8 @@ function AccountSettingsShell({
2371
2373
  accountId,
2372
2374
  title,
2373
2375
  subtitle,
2374
- children
2376
+ children,
2377
+ onBack
2375
2378
  }) {
2376
2379
  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "min-h-screen bg-background pb-28 font-display text-foreground", children: [
2377
2380
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -2381,6 +2384,7 @@ function AccountSettingsShell({
2381
2384
  subtitle,
2382
2385
  titleAlign: "start",
2383
2386
  left: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccountHeaderIcons, { accountId }),
2387
+ onBack,
2384
2388
  className: "px-5 py-4"
2385
2389
  }
2386
2390
  ),
@@ -3837,7 +3841,7 @@ function WithdrawDestinationInput({
3837
3841
  {
3838
3842
  type: "text",
3839
3843
  "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",
3844
+ 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
3845
  placeholder: "Address, Invoice, or RGB Invoice",
3842
3846
  value: destination,
3843
3847
  onChange: (event) => setDestination(event.target.value)
@@ -5542,37 +5546,40 @@ function DepositAssetSelection({
5542
5546
  account: "RGB",
5543
5547
  title: "New RGB Asset",
5544
5548
  ticker: "RGB",
5545
- enabled: isRgbConnected
5549
+ enabled: isRgbConnected,
5550
+ idleClass: "bg-primary/10 hover:bg-primary/20",
5551
+ activeClass: "bg-primary/25",
5552
+ titleHoverClass: "group-hover:text-primary"
5546
5553
  },
5547
5554
  {
5548
5555
  account: "SPARK",
5549
5556
  title: "New Spark Asset",
5550
5557
  ticker: "SPARK",
5551
- enabled: isSparkConnected
5558
+ enabled: isSparkConnected,
5559
+ idleClass: "bg-info/10 hover:bg-info/20",
5560
+ activeClass: "bg-info/25",
5561
+ titleHoverClass: "group-hover:text-info"
5552
5562
  },
5553
5563
  {
5554
5564
  account: "ARKADE",
5555
5565
  title: "New Arkade Asset",
5556
5566
  ticker: "ARKADE",
5557
- enabled: isArkadeConnected
5567
+ enabled: isArkadeConnected,
5568
+ idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
5569
+ activeClass: "bg-network-arkade/25",
5570
+ titleHoverClass: "group-hover:text-network-arkade"
5558
5571
  }
5559
5572
  ].filter((option) => option.enabled);
5560
5573
  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5561
5574
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PageHeader, { title: "Deposit", onBack: () => setCurrentView("dashboard") }),
5562
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-shrink-0 space-y-2 px-5 pb-3 pt-4", children: [
5563
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
5564
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
5565
- /* @__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" }) }),
5566
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-bold tracking-wide text-primary", children: "Select Asset" })
5567
- ] }),
5568
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mx-1 h-px flex-1 bg-white/10" }),
5569
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-2", children: [
5570
- /* @__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" }) }),
5571
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-bold tracking-wide text-white/30", children: "Receive" })
5572
- ] })
5573
- ] }),
5574
- /* @__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" }) })
5575
- ] }),
5575
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5576
+ DotPagination,
5577
+ {
5578
+ count: 2,
5579
+ index: 0,
5580
+ ariaLabel: "Deposit step 1 of 2: select asset"
5581
+ }
5582
+ ) }),
5576
5583
  /* @__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: [
5577
5584
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5578
5585
  Icon2,
@@ -5688,14 +5695,14 @@ function DepositAssetSelection({
5688
5695
  {
5689
5696
  type: "button",
5690
5697
  onClick: () => setCurrentView("bridge"),
5691
- 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",
5698
+ 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",
5692
5699
  children: [
5693
- /* @__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" }) }),
5700
+ /* @__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" }) }),
5694
5701
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-1 text-left", children: [
5695
- /* @__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" }),
5702
+ /* @__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" }),
5696
5703
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
5697
5704
  ] }),
5698
- /* @__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" })
5705
+ /* @__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" })
5699
5706
  ]
5700
5707
  }
5701
5708
  ) }),
@@ -5716,37 +5723,26 @@ function DepositAssetSelection({
5716
5723
  type: "button",
5717
5724
  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
5718
5725
  className: cn(
5719
- "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",
5720
- 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"
5726
+ "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
5727
+ active ? option.activeClass : option.idleClass
5721
5728
  ),
5722
5729
  onClick: () => handleAddNewAsset(option.account),
5723
5730
  children: [
5724
5731
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
5725
5732
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AssetIcon, { ticker: option.ticker, size: 40 }),
5726
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5727
- "div",
5728
- {
5729
- className: cn(
5730
- "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border",
5731
- active ? "border-network-arkade/40 bg-network-arkade" : "border-border bg-card"
5732
- ),
5733
- 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" })
5734
- }
5735
- )
5733
+ /* @__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: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5736
5734
  ] }),
5737
- /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mt-2 min-w-0", children: [
5738
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5739
- "div",
5740
- {
5741
- className: cn(
5742
- "text-xs font-bold tracking-wide",
5743
- active ? "text-network-arkade" : "text-muted-foreground group-hover:text-white"
5744
- ),
5745
- children: option.account
5746
- }
5747
- ),
5748
- /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-1 text-xxs leading-tight text-white/40", children: option.title })
5749
- ] })
5735
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5736
+ "div",
5737
+ {
5738
+ className: cn(
5739
+ "text-sm font-bold tracking-wide",
5740
+ active ? "text-white" : "text-white group-hover:opacity-90",
5741
+ !active && option.titleHoverClass
5742
+ ),
5743
+ children: option.title
5744
+ }
5745
+ ) })
5750
5746
  ]
5751
5747
  },
5752
5748
  option.account
package/dist/web/index.d.cts CHANGED
@@ -426,11 +426,13 @@ declare function AccountNetworkPicker({ accountId, current, onSave, }: {
426
426
  current: AccountSettingsNetwork;
427
427
  onSave: (network: AccountSettingsNetwork) => Promise<unknown>;
428
428
  }): react_jsx_runtime.JSX.Element;
429
- declare function AccountSettingsShell({ accountId, title, subtitle, children, }: {
429
+ declare function AccountSettingsShell({ accountId, title, subtitle, children, onBack, }: {
430
430
  accountId: AccountSettingsProtocol;
431
431
  title: string;
432
432
  subtitle: string;
433
433
  children: ReactNode;
434
+ /** Optional back callback — if provided, renders a back button inline with the title. */
435
+ onBack?: () => void;
434
436
  }): react_jsx_runtime.JSX.Element;
435
437
  declare function AccountInfoGrid({ items }: {
436
438
  items: Array<{
package/dist/web/index.d.ts CHANGED
@@ -426,11 +426,13 @@ declare function AccountNetworkPicker({ accountId, current, onSave, }: {
426
426
  current: AccountSettingsNetwork;
427
427
  onSave: (network: AccountSettingsNetwork) => Promise<unknown>;
428
428
  }): react_jsx_runtime.JSX.Element;
429
- declare function AccountSettingsShell({ accountId, title, subtitle, children, }: {
429
+ declare function AccountSettingsShell({ accountId, title, subtitle, children, onBack, }: {
430
430
  accountId: AccountSettingsProtocol;
431
431
  title: string;
432
432
  subtitle: string;
433
433
  children: ReactNode;
434
+ /** Optional back callback — if provided, renders a back button inline with the title. */
435
+ onBack?: () => void;
434
436
  }): react_jsx_runtime.JSX.Element;
435
437
  declare function AccountInfoGrid({ items }: {
436
438
  items: Array<{
package/dist/web/index.js CHANGED
@@ -980,6 +980,22 @@ function NetworkBadge({
980
980
  const content = children ?? (shouldShowLabel ? label : null);
981
981
  const chipSize = size === "sm" ? "size-6" : "size-8";
982
982
  const imageSize = size === "sm" ? "size-3.5" : "size-icon-lg";
983
+ const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsx15(
984
+ "span",
985
+ {
986
+ className: cn("material-symbols-outlined leading-none", color, className2),
987
+ style: { fontSize: size === "sm" ? 12 : 16 },
988
+ "aria-hidden": true,
989
+ children: "link"
990
+ }
991
+ ) : /* @__PURE__ */ jsx15(
992
+ "img",
993
+ {
994
+ src: icon,
995
+ alt: network,
996
+ className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
997
+ }
998
+ );
983
999
  if (!content) {
984
1000
  return /* @__PURE__ */ jsx15(
985
1001
  "span",
@@ -990,14 +1006,7 @@ function NetworkBadge({
990
1006
  iconBg,
991
1007
  className
992
1008
  ),
993
- children: /* @__PURE__ */ jsx15(
994
- "img",
995
- {
996
- src: icon,
997
- alt: network,
998
- className: cn(imageSize, "object-contain", defaultIconClassName, iconClassName)
999
- }
1000
- )
1009
+ children: renderGlyph(imageSize)
1001
1010
  }
1002
1011
  );
1003
1012
  }
@@ -1012,14 +1021,7 @@ function NetworkBadge({
1012
1021
  className
1013
1022
  ),
1014
1023
  children: [
1015
- /* @__PURE__ */ jsx15(
1016
- "img",
1017
- {
1018
- src: icon,
1019
- alt: network,
1020
- className: cn(size === "sm" ? "size-3" : "size-3.5", "object-contain", defaultIconClassName, iconClassName)
1021
- }
1022
- ),
1024
+ renderGlyph(size === "sm" ? "size-3" : "size-3.5"),
1023
1025
  content
1024
1026
  ]
1025
1027
  }
@@ -1198,7 +1200,7 @@ function AssetCard({
1198
1200
  children: name
1199
1201
  }
1200
1202
  ),
1201
- /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx17(NetworkBadge, { network, showLabel: true, size: "sm" }, network)) })
1203
+ /* @__PURE__ */ jsx17("div", { className: "flex flex-nowrap gap-1 mt-1", children: networks.map((network) => /* @__PURE__ */ jsx17(NetworkBadge, { network, size: "sm" }, network)) })
1202
1204
  ] })
1203
1205
  ] }),
1204
1206
  /* @__PURE__ */ jsxs7("div", { className: "text-right", children: [
@@ -2216,7 +2218,8 @@ function AccountSettingsShell({
2216
2218
  accountId,
2217
2219
  title,
2218
2220
  subtitle,
2219
- children
2221
+ children,
2222
+ onBack
2220
2223
  }) {
2221
2224
  return /* @__PURE__ */ jsxs18("div", { className: "min-h-screen bg-background pb-28 font-display text-foreground", children: [
2222
2225
  /* @__PURE__ */ jsx30(
@@ -2226,6 +2229,7 @@ function AccountSettingsShell({
2226
2229
  subtitle,
2227
2230
  titleAlign: "start",
2228
2231
  left: /* @__PURE__ */ jsx30(AccountHeaderIcons, { accountId }),
2232
+ onBack,
2229
2233
  className: "px-5 py-4"
2230
2234
  }
2231
2235
  ),
@@ -3682,7 +3686,7 @@ function WithdrawDestinationInput({
3682
3686
  {
3683
3687
  type: "text",
3684
3688
  "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",
3689
+ 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
3690
  placeholder: "Address, Invoice, or RGB Invoice",
3687
3691
  value: destination,
3688
3692
  onChange: (event) => setDestination(event.target.value)
@@ -5387,37 +5391,40 @@ function DepositAssetSelection({
5387
5391
  account: "RGB",
5388
5392
  title: "New RGB Asset",
5389
5393
  ticker: "RGB",
5390
- enabled: isRgbConnected
5394
+ enabled: isRgbConnected,
5395
+ idleClass: "bg-primary/10 hover:bg-primary/20",
5396
+ activeClass: "bg-primary/25",
5397
+ titleHoverClass: "group-hover:text-primary"
5391
5398
  },
5392
5399
  {
5393
5400
  account: "SPARK",
5394
5401
  title: "New Spark Asset",
5395
5402
  ticker: "SPARK",
5396
- enabled: isSparkConnected
5403
+ enabled: isSparkConnected,
5404
+ idleClass: "bg-info/10 hover:bg-info/20",
5405
+ activeClass: "bg-info/25",
5406
+ titleHoverClass: "group-hover:text-info"
5397
5407
  },
5398
5408
  {
5399
5409
  account: "ARKADE",
5400
5410
  title: "New Arkade Asset",
5401
5411
  ticker: "ARKADE",
5402
- enabled: isArkadeConnected
5412
+ enabled: isArkadeConnected,
5413
+ idleClass: "bg-network-arkade/10 hover:bg-network-arkade/20",
5414
+ activeClass: "bg-network-arkade/25",
5415
+ titleHoverClass: "group-hover:text-network-arkade"
5403
5416
  }
5404
5417
  ].filter((option) => option.enabled);
5405
5418
  return /* @__PURE__ */ jsxs45("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5406
5419
  /* @__PURE__ */ jsx58(PageHeader, { title: "Deposit", onBack: () => setCurrentView("dashboard") }),
5407
- /* @__PURE__ */ jsxs45("div", { className: "flex-shrink-0 space-y-2 px-5 pb-3 pt-4", children: [
5408
- /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
5409
- /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
5410
- /* @__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" }) }),
5411
- /* @__PURE__ */ jsx58("span", { className: "text-xs font-bold tracking-wide text-primary", children: "Select Asset" })
5412
- ] }),
5413
- /* @__PURE__ */ jsx58("div", { className: "mx-1 h-px flex-1 bg-white/10" }),
5414
- /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
5415
- /* @__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" }) }),
5416
- /* @__PURE__ */ jsx58("span", { className: "text-xs font-bold tracking-wide text-white/30", children: "Receive" })
5417
- ] })
5418
- ] }),
5419
- /* @__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" }) })
5420
- ] }),
5420
+ /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 px-5 pb-3 pt-4", children: /* @__PURE__ */ jsx58(
5421
+ DotPagination,
5422
+ {
5423
+ count: 2,
5424
+ index: 0,
5425
+ ariaLabel: "Deposit step 1 of 2: select asset"
5426
+ }
5427
+ ) }),
5421
5428
  /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5422
5429
  /* @__PURE__ */ jsx58(
5423
5430
  Icon2,
@@ -5533,14 +5540,14 @@ function DepositAssetSelection({
5533
5540
  {
5534
5541
  type: "button",
5535
5542
  onClick: () => setCurrentView("bridge"),
5536
- 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",
5543
+ 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",
5537
5544
  children: [
5538
- /* @__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" }) }),
5545
+ /* @__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" }) }),
5539
5546
  /* @__PURE__ */ jsxs45("div", { className: "flex-1 text-left", children: [
5540
- /* @__PURE__ */ jsx58("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-info", children: "Bridge from another chain" }),
5547
+ /* @__PURE__ */ jsx58("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Bridge from another chain" }),
5541
5548
  /* @__PURE__ */ jsx58("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
5542
5549
  ] }),
5543
- /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-info", children: "arrow_forward" })
5550
+ /* @__PURE__ */ jsx58("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
5544
5551
  ]
5545
5552
  }
5546
5553
  ) }),
@@ -5561,37 +5568,26 @@ function DepositAssetSelection({
5561
5568
  type: "button",
5562
5569
  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
5563
5570
  className: cn(
5564
- "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",
5565
- 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"
5571
+ "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
5572
+ active ? option.activeClass : option.idleClass
5566
5573
  ),
5567
5574
  onClick: () => handleAddNewAsset(option.account),
5568
5575
  children: [
5569
5576
  /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5570
5577
  /* @__PURE__ */ jsx58(AssetIcon, { ticker: option.ticker, size: 40 }),
5571
- /* @__PURE__ */ jsx58(
5572
- "div",
5573
- {
5574
- className: cn(
5575
- "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full border",
5576
- active ? "border-network-arkade/40 bg-network-arkade" : "border-border bg-card"
5577
- ),
5578
- children: active ? /* @__PURE__ */ jsx58(Icon2, { name: "check", size: "xs", className: "text-white" }) : /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-muted-foreground" })
5579
- }
5580
- )
5578
+ /* @__PURE__ */ jsx58("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx58(Icon2, { name: "add", size: "xs", className: "text-background" }) })
5581
5579
  ] }),
5582
- /* @__PURE__ */ jsxs45("div", { className: "mt-2 min-w-0", children: [
5583
- /* @__PURE__ */ jsx58(
5584
- "div",
5585
- {
5586
- className: cn(
5587
- "text-xs font-bold tracking-wide",
5588
- active ? "text-network-arkade" : "text-muted-foreground group-hover:text-white"
5589
- ),
5590
- children: option.account
5591
- }
5592
- ),
5593
- /* @__PURE__ */ jsx58("div", { className: "mt-1 text-xxs leading-tight text-white/40", children: option.title })
5594
- ] })
5580
+ /* @__PURE__ */ jsx58("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx58(
5581
+ "div",
5582
+ {
5583
+ className: cn(
5584
+ "text-sm font-bold tracking-wide",
5585
+ active ? "text-white" : "text-white group-hover:opacity-90",
5586
+ !active && option.titleHoverClass
5587
+ ),
5588
+ children: option.title
5589
+ }
5590
+ ) })
5595
5591
  ]
5596
5592
  },
5597
5593
  option.account
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.8",
3
+ "version": "0.1.10",
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",