kaleido-ui 0.1.92 → 0.1.94

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 +25 -32
  2. package/dist/web/index.js +25 -32
  3. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -239,12 +239,12 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
239
239
  surface: "bg-primary/15 text-primary hover:bg-primary/25",
240
240
  cta: "w-full bg-primary text-primary-foreground font-bold rounded-2xl shadow-md hover:brightness-115 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
241
241
  "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary/80 text-primary-foreground font-extrabold rounded-2xl shadow-lg hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-accent disabled:text-muted-foreground",
242
- "danger-subtle": "bg-danger/10 border border-danger/20 text-danger font-bold rounded-xl hover:brightness-115",
242
+ "danger-subtle": "bg-danger/10 text-danger font-bold rounded-xl hover:bg-danger/15 hover:brightness-115",
243
243
  hyperlink: "group text-muted-foreground underline underline-offset-2 hover:text-white hover:decoration-primary hover:[&_.icon]:text-primary bg-transparent font-normal",
244
244
  // Hierarchy variants — primary/secondary/tertiary action emphasis.
245
245
  // Pair with size="lg" or size="cta" for full-bleed buttons.
246
246
  h1: "w-full bg-primary text-primary-foreground font-bold rounded-2xl shadow-md hover:brightness-115 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
247
- h2: "w-full bg-primary/15 text-primary font-semibold rounded-xl border border-primary/20 hover:bg-primary/25 hover:border-primary/35",
247
+ h2: "w-full bg-primary/15 text-primary font-semibold rounded-xl hover:bg-primary/25",
248
248
  h3: "text-primary font-semibold rounded-lg hover:bg-primary/10 active:bg-primary/15"
249
249
  },
250
250
  size: {
@@ -336,7 +336,7 @@ var Input = React3.forwardRef(
336
336
  {
337
337
  type,
338
338
  className: cn(
339
- "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
339
+ "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/25 focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
340
340
  className
341
341
  ),
342
342
  ref,
@@ -848,7 +848,7 @@ var NumberInput = React6.forwardRef(
848
848
  step,
849
849
  disabled,
850
850
  className: cn(
851
- "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
851
+ "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
852
852
  "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
853
853
  className
854
854
  ),
@@ -1352,47 +1352,41 @@ function StatusBadge({ status, className }) {
1352
1352
  success: {
1353
1353
  color: "text-primary",
1354
1354
  bg: "bg-primary/10",
1355
- border: "border-primary/20",
1356
1355
  icon: "check_circle",
1357
1356
  label: "Success"
1358
1357
  },
1359
1358
  completed: {
1360
1359
  color: "text-primary",
1361
1360
  bg: "bg-primary/10",
1362
- border: "border-primary/20",
1363
1361
  icon: "check_circle",
1364
1362
  label: "Completed"
1365
1363
  },
1366
1364
  pending: {
1367
1365
  color: "text-warning",
1368
1366
  bg: "bg-warning/10",
1369
- border: "border-warning/20",
1370
1367
  icon: "schedule",
1371
1368
  label: "Pending"
1372
1369
  },
1373
1370
  failed: {
1374
1371
  color: "text-danger",
1375
1372
  bg: "bg-danger/10",
1376
- border: "border-danger/20",
1377
1373
  icon: "error",
1378
1374
  label: "Failed"
1379
1375
  },
1380
1376
  error: {
1381
1377
  color: "text-danger",
1382
1378
  bg: "bg-danger/10",
1383
- border: "border-danger/20",
1384
1379
  icon: "error",
1385
1380
  label: "Error"
1386
1381
  }
1387
1382
  };
1388
- const { color, bg, border, icon, label } = config[status];
1383
+ const { color, bg, icon, label } = config[status];
1389
1384
  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
1390
1385
  "div",
1391
1386
  {
1392
1387
  className: cn(
1393
- "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full border font-medium text-xs",
1388
+ "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-xs",
1394
1389
  bg,
1395
- border,
1396
1390
  color,
1397
1391
  className
1398
1392
  ),
@@ -1890,7 +1884,7 @@ function TransactionCard({
1890
1884
  className
1891
1885
  }) {
1892
1886
  const isInbound = direction === "inbound";
1893
- const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
1887
+ const formatDate = (ts) => new Date(ts * 1e3).toLocaleString([], { dateStyle: "short", timeStyle: "short" });
1894
1888
  const statusStyle = {
1895
1889
  success: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
1896
1890
  completed: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
@@ -2654,7 +2648,7 @@ function InlineSelector({
2654
2648
  ),
2655
2649
  children: [
2656
2650
  renderPanelHeader?.(renderArgs),
2657
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
2651
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ScrollArea, { className: "max-h-72", viewportClassName: "max-h-72", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
2658
2652
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "search", size: "md", className: "opacity-40" }),
2659
2653
  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: "No results" })
2660
2654
  ] }) : options.map((option) => {
@@ -2684,7 +2678,7 @@ function InlineSelector({
2684
2678
  },
2685
2679
  option.id
2686
2680
  );
2687
- }) })
2681
+ }) }) })
2688
2682
  ]
2689
2683
  }
2690
2684
  )
@@ -3064,15 +3058,13 @@ function AccountSettingsShell({
3064
3058
  onBack
3065
3059
  }) {
3066
3060
  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
3067
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex h-14 shrink-0 items-center px-2", children: onBack && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "arrow_back", size: "xl" }) }) }),
3061
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("header", { className: "flex h-14 shrink-0 items-center gap-2 px-2", children: [
3062
+ onBack && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "arrow_back", size: "xl" }) }),
3063
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccountHeaderIcons, { accountId }),
3064
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-lg font-bold text-foreground", children: title })
3065
+ ] }),
3068
3066
  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("main", { className: "flex-1 space-y-6 overflow-y-auto px-5 pb-28 pt-2", children: [
3069
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { className: "space-y-3", children: [
3070
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AccountHeaderIcons, { accountId }),
3071
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
3072
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-xl font-bold text-foreground", children: title }),
3073
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
3074
- ] })
3075
- ] }),
3067
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm text-muted-foreground", children: subtitle }),
3076
3068
  children
3077
3069
  ] })
3078
3070
  ] });
@@ -3868,7 +3860,7 @@ function AssetSelector({
3868
3860
  }
3869
3861
  ) }),
3870
3862
  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
3871
- optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
3863
+ optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
3872
3864
  "span",
3873
3865
  {
3874
3866
  className: cn(
@@ -3983,7 +3975,7 @@ function AssetSelector({
3983
3975
  value: search,
3984
3976
  onChange: (event) => setSearch(event.target.value),
3985
3977
  placeholder: "Search...",
3986
- className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
3978
+ className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
3987
3979
  }
3988
3980
  )
3989
3981
  ] }),
@@ -4043,7 +4035,7 @@ function AssetSelector({
4043
4035
  },
4044
4036
  className: cn(
4045
4037
  "group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition-all duration-200",
4046
- optionSelected ? "border-primary/30 bg-primary/[0.12]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
4038
+ optionSelected ? "border-transparent bg-primary/[0.14]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
4047
4039
  ),
4048
4040
  children: renderAssetOption(option, optionSelected, optionDisabled)
4049
4041
  },
@@ -4134,7 +4126,7 @@ function AssetSelector({
4134
4126
  value: search,
4135
4127
  onChange: (event) => setSearch(event.target.value),
4136
4128
  placeholder: "Search...",
4137
- className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
4129
+ className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
4138
4130
  }
4139
4131
  )
4140
4132
  ] }),
@@ -4795,8 +4787,9 @@ function ActivityDetailRow({
4795
4787
  onCopy,
4796
4788
  isCopied
4797
4789
  }) {
4798
- return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center justify-between py-1 last:pb-0", children: [
4799
- /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
4790
+ return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center gap-3 py-1 last:pb-0", children: [
4791
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
4792
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
4800
4793
  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex max-w-[65%] items-center gap-2", children: [
4801
4794
  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
4802
4795
  onCopy && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -5002,7 +4995,7 @@ function WithdrawAmountInput({
5002
4995
  setFeeRateMode?.(mode);
5003
4996
  if (mode !== "custom") setFeeRate(mode);
5004
4997
  },
5005
- className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-primary/40 bg-primary/10" : "border-transparent bg-card/70 hover:border-primary/40"}`,
4998
+ className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-transparent bg-primary/[0.14]" : "border-transparent bg-card/70 hover:bg-card"}`,
5006
4999
  children: [
5007
5000
  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
5008
5001
  "span",
@@ -6366,7 +6359,7 @@ function SelectableCard({
6366
6359
  ] });
6367
6360
  const cardClassName = cn(
6368
6361
  "w-full rounded-2xl border p-4 text-left transition-all duration-200",
6369
- selected ? "border-primary/40 bg-primary/10 shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
6362
+ selected ? "border-transparent bg-primary/[0.14] shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
6370
6363
  className
6371
6364
  );
6372
6365
  if (onClick) {
@@ -8604,7 +8597,7 @@ function DepositAssetSelection({
8604
8597
  {
8605
8598
  autoFocus: true,
8606
8599
  "data-testid": "deposit-asset-search",
8607
- className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
8600
+ className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8",
8608
8601
  onChange: (event) => setSearchQuery(event.target.value),
8609
8602
  placeholder: "Search assets...",
8610
8603
  type: "text",
package/dist/web/index.js CHANGED
@@ -51,12 +51,12 @@ var buttonVariants = cva(
51
51
  surface: "bg-primary/15 text-primary hover:bg-primary/25",
52
52
  cta: "w-full bg-primary text-primary-foreground font-bold rounded-2xl shadow-md hover:brightness-115 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
53
53
  "cta-gradient": "w-full bg-gradient-to-r from-primary to-primary/80 text-primary-foreground font-extrabold rounded-2xl shadow-lg hover:opacity-90 hover:-translate-y-0.5 active:translate-y-0 active:opacity-100 disabled:opacity-40 disabled:shadow-none disabled:cursor-not-allowed disabled:bg-accent disabled:text-muted-foreground",
54
- "danger-subtle": "bg-danger/10 border border-danger/20 text-danger font-bold rounded-xl hover:brightness-115",
54
+ "danger-subtle": "bg-danger/10 text-danger font-bold rounded-xl hover:bg-danger/15 hover:brightness-115",
55
55
  hyperlink: "group text-muted-foreground underline underline-offset-2 hover:text-white hover:decoration-primary hover:[&_.icon]:text-primary bg-transparent font-normal",
56
56
  // Hierarchy variants — primary/secondary/tertiary action emphasis.
57
57
  // Pair with size="lg" or size="cta" for full-bleed buttons.
58
58
  h1: "w-full bg-primary text-primary-foreground font-bold rounded-2xl shadow-md hover:brightness-115 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
59
- h2: "w-full bg-primary/15 text-primary font-semibold rounded-xl border border-primary/20 hover:bg-primary/25 hover:border-primary/35",
59
+ h2: "w-full bg-primary/15 text-primary font-semibold rounded-xl hover:bg-primary/25",
60
60
  h3: "text-primary font-semibold rounded-lg hover:bg-primary/10 active:bg-primary/15"
61
61
  },
62
62
  size: {
@@ -148,7 +148,7 @@ var Input = React3.forwardRef(
148
148
  {
149
149
  type,
150
150
  className: cn(
151
- "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/50 focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
151
+ "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 text-base transition-all border border-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary/25 focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
152
152
  className
153
153
  ),
154
154
  ref,
@@ -660,7 +660,7 @@ var NumberInput = React6.forwardRef(
660
660
  step,
661
661
  disabled,
662
662
  className: cn(
663
- "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
663
+ "flex h-12 w-full rounded-xl bg-white/8 px-4 py-3 pr-10 text-base transition-all border border-transparent placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary/25 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/4",
664
664
  "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
665
665
  className
666
666
  ),
@@ -1164,47 +1164,41 @@ function StatusBadge({ status, className }) {
1164
1164
  success: {
1165
1165
  color: "text-primary",
1166
1166
  bg: "bg-primary/10",
1167
- border: "border-primary/20",
1168
1167
  icon: "check_circle",
1169
1168
  label: "Success"
1170
1169
  },
1171
1170
  completed: {
1172
1171
  color: "text-primary",
1173
1172
  bg: "bg-primary/10",
1174
- border: "border-primary/20",
1175
1173
  icon: "check_circle",
1176
1174
  label: "Completed"
1177
1175
  },
1178
1176
  pending: {
1179
1177
  color: "text-warning",
1180
1178
  bg: "bg-warning/10",
1181
- border: "border-warning/20",
1182
1179
  icon: "schedule",
1183
1180
  label: "Pending"
1184
1181
  },
1185
1182
  failed: {
1186
1183
  color: "text-danger",
1187
1184
  bg: "bg-danger/10",
1188
- border: "border-danger/20",
1189
1185
  icon: "error",
1190
1186
  label: "Failed"
1191
1187
  },
1192
1188
  error: {
1193
1189
  color: "text-danger",
1194
1190
  bg: "bg-danger/10",
1195
- border: "border-danger/20",
1196
1191
  icon: "error",
1197
1192
  label: "Error"
1198
1193
  }
1199
1194
  };
1200
- const { color, bg, border, icon, label } = config[status];
1195
+ const { color, bg, icon, label } = config[status];
1201
1196
  return /* @__PURE__ */ jsxs6(
1202
1197
  "div",
1203
1198
  {
1204
1199
  className: cn(
1205
- "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full border font-medium text-xs",
1200
+ "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-xs",
1206
1201
  bg,
1207
- border,
1208
1202
  color,
1209
1203
  className
1210
1204
  ),
@@ -1702,7 +1696,7 @@ function TransactionCard({
1702
1696
  className
1703
1697
  }) {
1704
1698
  const isInbound = direction === "inbound";
1705
- const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
1699
+ const formatDate = (ts) => new Date(ts * 1e3).toLocaleString([], { dateStyle: "short", timeStyle: "short" });
1706
1700
  const statusStyle = {
1707
1701
  success: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
1708
1702
  completed: { base: "bg-primary/10", hover: "hover:bg-primary/15" },
@@ -2472,7 +2466,7 @@ function InlineSelector({
2472
2466
  ),
2473
2467
  children: [
2474
2468
  renderPanelHeader?.(renderArgs),
2475
- /* @__PURE__ */ jsx30("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
2469
+ /* @__PURE__ */ jsx30(ScrollArea, { className: "max-h-72", viewportClassName: "max-h-72", children: /* @__PURE__ */ jsx30("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-sm text-white/30", children: [
2476
2470
  /* @__PURE__ */ jsx30(Icon, { name: "search", size: "md", className: "opacity-40" }),
2477
2471
  /* @__PURE__ */ jsx30("span", { children: "No results" })
2478
2472
  ] }) : options.map((option) => {
@@ -2502,7 +2496,7 @@ function InlineSelector({
2502
2496
  },
2503
2497
  option.id
2504
2498
  );
2505
- }) })
2499
+ }) }) })
2506
2500
  ]
2507
2501
  }
2508
2502
  )
@@ -2882,15 +2876,13 @@ function AccountSettingsShell({
2882
2876
  onBack
2883
2877
  }) {
2884
2878
  return /* @__PURE__ */ jsxs21("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
2885
- /* @__PURE__ */ jsx34("div", { className: "flex h-14 shrink-0 items-center px-2", children: onBack && /* @__PURE__ */ jsx34(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ jsx34(Icon, { name: "arrow_back", size: "xl" }) }) }),
2879
+ /* @__PURE__ */ jsxs21("header", { className: "flex h-14 shrink-0 items-center gap-2 px-2", children: [
2880
+ onBack && /* @__PURE__ */ jsx34(Button, { type: "button", variant: "ghost", size: "icon-xl", onClick: onBack, "aria-label": "Go back", children: /* @__PURE__ */ jsx34(Icon, { name: "arrow_back", size: "xl" }) }),
2881
+ /* @__PURE__ */ jsx34(AccountHeaderIcons, { accountId }),
2882
+ /* @__PURE__ */ jsx34("h1", { className: "text-lg font-bold text-foreground", children: title })
2883
+ ] }),
2886
2884
  /* @__PURE__ */ jsxs21("main", { className: "flex-1 space-y-6 overflow-y-auto px-5 pb-28 pt-2", children: [
2887
- /* @__PURE__ */ jsxs21("section", { className: "space-y-3", children: [
2888
- /* @__PURE__ */ jsx34(AccountHeaderIcons, { accountId }),
2889
- /* @__PURE__ */ jsxs21("div", { children: [
2890
- /* @__PURE__ */ jsx34("h1", { className: "text-xl font-bold text-foreground", children: title }),
2891
- /* @__PURE__ */ jsx34("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
2892
- ] })
2893
- ] }),
2885
+ subtitle && /* @__PURE__ */ jsx34("p", { className: "text-sm text-muted-foreground", children: subtitle }),
2894
2886
  children
2895
2887
  ] })
2896
2888
  ] });
@@ -3686,7 +3678,7 @@ function AssetSelector({
3686
3678
  }
3687
3679
  ) }),
3688
3680
  /* @__PURE__ */ jsxs25("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
3689
- optionSelected ? /* @__PURE__ */ jsx38("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ jsx38(
3681
+ optionSelected ? /* @__PURE__ */ jsx38("span", { className: "rounded-full bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ jsx38(
3690
3682
  "span",
3691
3683
  {
3692
3684
  className: cn(
@@ -3801,7 +3793,7 @@ function AssetSelector({
3801
3793
  value: search,
3802
3794
  onChange: (event) => setSearch(event.target.value),
3803
3795
  placeholder: "Search...",
3804
- className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
3796
+ className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
3805
3797
  }
3806
3798
  )
3807
3799
  ] }),
@@ -3861,7 +3853,7 @@ function AssetSelector({
3861
3853
  },
3862
3854
  className: cn(
3863
3855
  "group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-sm transition-all duration-200",
3864
- optionSelected ? "border-primary/30 bg-primary/[0.12]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
3856
+ optionSelected ? "border-transparent bg-primary/[0.14]" : optionDisabled ? "cursor-not-allowed border-transparent bg-white/[0.015] opacity-45" : "border-transparent bg-transparent hover:bg-accent"
3865
3857
  ),
3866
3858
  children: renderAssetOption(option, optionSelected, optionDisabled)
3867
3859
  },
@@ -3952,7 +3944,7 @@ function AssetSelector({
3952
3944
  value: search,
3953
3945
  onChange: (event) => setSearch(event.target.value),
3954
3946
  placeholder: "Search...",
3955
- className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/50 focus:outline-none"
3947
+ className: "h-11 w-full rounded-2xl border border-transparent bg-black/20 pl-10 pr-3 text-sm text-white placeholder:text-white/25 focus:border-primary/25 focus:outline-none"
3956
3948
  }
3957
3949
  )
3958
3950
  ] }),
@@ -4613,8 +4605,9 @@ function ActivityDetailRow({
4613
4605
  onCopy,
4614
4606
  isCopied
4615
4607
  }) {
4616
- return /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between py-1 last:pb-0", children: [
4617
- /* @__PURE__ */ jsx45("span", { className: "text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
4608
+ return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-3 py-1 last:pb-0", children: [
4609
+ /* @__PURE__ */ jsx45("span", { className: "shrink-0 text-xxs font-bold uppercase tracking-wider text-muted-foreground", children: label }),
4610
+ /* @__PURE__ */ jsx45("span", { "aria-hidden": true, className: "min-w-4 flex-1 self-center border-b border-dotted border-white/15" }),
4618
4611
  /* @__PURE__ */ jsxs32("div", { className: "flex max-w-[65%] items-center gap-2", children: [
4619
4612
  /* @__PURE__ */ jsx45("span", { className: "truncate font-mono text-xs font-medium text-white/90", children: value }),
4620
4613
  onCopy && /* @__PURE__ */ jsx45(
@@ -4820,7 +4813,7 @@ function WithdrawAmountInput({
4820
4813
  setFeeRateMode?.(mode);
4821
4814
  if (mode !== "custom") setFeeRate(mode);
4822
4815
  },
4823
- className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-primary/40 bg-primary/10" : "border-transparent bg-card/70 hover:border-primary/40"}`,
4816
+ className: `group relative overflow-hidden rounded-xl border px-2 py-3 shadow-sm transition-all active:scale-[0.98] ${selected ? "border-transparent bg-primary/[0.14]" : "border-transparent bg-card/70 hover:bg-card"}`,
4824
4817
  children: [
4825
4818
  /* @__PURE__ */ jsx47(
4826
4819
  "span",
@@ -6184,7 +6177,7 @@ function SelectableCard({
6184
6177
  ] });
6185
6178
  const cardClassName = cn(
6186
6179
  "w-full rounded-2xl border p-4 text-left transition-all duration-200",
6187
- selected ? "border-primary/40 bg-primary/10 shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
6180
+ selected ? "border-transparent bg-primary/[0.14] shadow-sm" : "border-transparent bg-card/70 hover:bg-card",
6188
6181
  className
6189
6182
  );
6190
6183
  if (onClick) {
@@ -8422,7 +8415,7 @@ function DepositAssetSelection({
8422
8415
  {
8423
8416
  autoFocus: true,
8424
8417
  "data-testid": "deposit-asset-search",
8425
- className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/40 focus:bg-white/8",
8418
+ className: "w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-4 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8",
8426
8419
  onChange: (event) => setSearchQuery(event.target.value),
8427
8420
  placeholder: "Search assets...",
8428
8421
  type: "text",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.92",
3
+ "version": "0.1.94",
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",