kaleido-ui 0.1.8 → 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 (3) hide show
  1. package/dist/web/index.cjs +39 -47
  2. package/dist/web/index.js +39 -47
  3. 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)
@@ -5542,37 +5542,40 @@ function DepositAssetSelection({
5542
5542
  account: "RGB",
5543
5543
  title: "New RGB Asset",
5544
5544
  ticker: "RGB",
5545
- 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"
5546
5549
  },
5547
5550
  {
5548
5551
  account: "SPARK",
5549
5552
  title: "New Spark Asset",
5550
5553
  ticker: "SPARK",
5551
- 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"
5552
5558
  },
5553
5559
  {
5554
5560
  account: "ARKADE",
5555
5561
  title: "New Arkade Asset",
5556
5562
  ticker: "ARKADE",
5557
- 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"
5558
5567
  }
5559
5568
  ].filter((option) => option.enabled);
5560
5569
  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5561
5570
  /* @__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
- ] }),
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
+ ) }),
5576
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: [
5577
5580
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
5578
5581
  Icon2,
@@ -5688,14 +5691,14 @@ function DepositAssetSelection({
5688
5691
  {
5689
5692
  type: "button",
5690
5693
  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",
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",
5692
5695
  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" }) }),
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" }) }),
5694
5697
  /* @__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" }),
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" }),
5696
5699
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
5697
5700
  ] }),
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" })
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" })
5699
5702
  ]
5700
5703
  }
5701
5704
  ) }),
@@ -5716,37 +5719,26 @@ function DepositAssetSelection({
5716
5719
  type: "button",
5717
5720
  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
5718
5721
  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"
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
5721
5724
  ),
5722
5725
  onClick: () => handleAddNewAsset(option.account),
5723
5726
  children: [
5724
5727
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative", children: [
5725
5728
  /* @__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
- )
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" }) })
5736
5730
  ] }),
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
- ] })
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
+ ) })
5750
5742
  ]
5751
5743
  },
5752
5744
  option.account
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)
@@ -5387,37 +5387,40 @@ function DepositAssetSelection({
5387
5387
  account: "RGB",
5388
5388
  title: "New RGB Asset",
5389
5389
  ticker: "RGB",
5390
- 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"
5391
5394
  },
5392
5395
  {
5393
5396
  account: "SPARK",
5394
5397
  title: "New Spark Asset",
5395
5398
  ticker: "SPARK",
5396
- 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"
5397
5403
  },
5398
5404
  {
5399
5405
  account: "ARKADE",
5400
5406
  title: "New Arkade Asset",
5401
5407
  ticker: "ARKADE",
5402
- 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"
5403
5412
  }
5404
5413
  ].filter((option) => option.enabled);
5405
5414
  return /* @__PURE__ */ jsxs45("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
5406
5415
  /* @__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
- ] }),
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
+ ) }),
5421
5424
  /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 px-5 pb-3", children: /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5422
5425
  /* @__PURE__ */ jsx58(
5423
5426
  Icon2,
@@ -5533,14 +5536,14 @@ function DepositAssetSelection({
5533
5536
  {
5534
5537
  type: "button",
5535
5538
  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",
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",
5537
5540
  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" }) }),
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" }) }),
5539
5542
  /* @__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" }),
5543
+ /* @__PURE__ */ jsx58("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Bridge from another chain" }),
5541
5544
  /* @__PURE__ */ jsx58("p", { className: "text-xxs leading-tight text-white/40", children: "USDC, USDT, ETH, SOL via Flashnet" })
5542
5545
  ] }),
5543
- /* @__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" })
5544
5547
  ]
5545
5548
  }
5546
5549
  ) }),
@@ -5561,37 +5564,26 @@ function DepositAssetSelection({
5561
5564
  type: "button",
5562
5565
  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
5563
5566
  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"
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
5566
5569
  ),
5567
5570
  onClick: () => handleAddNewAsset(option.account),
5568
5571
  children: [
5569
5572
  /* @__PURE__ */ jsxs45("div", { className: "relative", children: [
5570
5573
  /* @__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
- )
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" }) })
5581
5575
  ] }),
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
- ] })
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
+ ) })
5595
5587
  ]
5596
5588
  },
5597
5589
  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.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",