kaleido-ui 0.1.78 → 0.1.80

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 +15 -12
  2. package/dist/web/index.js +15 -12
  3. package/package.json +1 -1
package/dist/web/index.cjs CHANGED
@@ -2369,7 +2369,7 @@ function BottomNav({
2369
2369
  "nav",
2370
2370
  {
2371
2371
  className: cn(
2372
- "w-[90%] max-w-[340px] rounded-full bg-card/60 shadow-lg backdrop-blur-xl",
2372
+ "w-[90%] max-w-[21.25rem] rounded-full bg-card/60 shadow-lg backdrop-blur-xl",
2373
2373
  position === "fixed" ? "fixed bottom-6 left-1/2 z-[var(--z-nav)] -translate-x-1/2" : "relative",
2374
2374
  className
2375
2375
  ),
@@ -2382,7 +2382,7 @@ function BottomNav({
2382
2382
  onClick: () => onChange(id),
2383
2383
  "data-testid": testId ?? `bottom-nav-${id}`,
2384
2384
  className: cn(
2385
- "relative flex h-[52px] w-[64px] flex-col items-center justify-center rounded-full transition-all duration-300",
2385
+ "relative flex h-[3.25rem] w-[4rem] flex-col items-center justify-center rounded-full transition-all duration-300",
2386
2386
  isActive ? "bg-white/10 text-primary" : "text-muted-foreground hover:text-white/75 active:scale-95"
2387
2387
  ),
2388
2388
  children: [
@@ -2768,25 +2768,28 @@ function OptionSelector({
2768
2768
  options,
2769
2769
  onChange,
2770
2770
  className: cn(compact ? "w-auto shrink-0" : "w-full", className),
2771
- panelClassName: "right-0 left-auto min-w-[11rem]",
2772
- optionClassName: "px-3 py-2.5",
2771
+ panelClassName: "right-0 left-auto min-w-[11rem] rounded-xl border-0 bg-card",
2772
+ optionClassName: "px-3.5 py-2.5 hover:bg-white/6 data-[selected]:bg-transparent data-[selected]:shadow-none",
2773
2773
  onOpenPanelHeightChange,
2774
2774
  renderTrigger: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
2775
2775
  "span",
2776
2776
  {
2777
2777
  className: cn(
2778
- "flex items-center gap-1 rounded-2xl bg-white/[0.09] px-2 py-1.5 text-xs leading-none backdrop-blur-md transition-all hover:bg-white/[0.13]",
2778
+ "flex h-9 min-w-[4.5rem] items-center gap-1.5 rounded-full bg-white/8 px-3.5 text-sm font-semibold leading-none text-foreground transition-colors hover:bg-white/12",
2779
2779
  triggerAlign === "center" ? "justify-center" : "justify-between",
2780
- open && "bg-white/[0.13]",
2781
- !compact && "w-full px-3 py-3"
2780
+ open && "bg-primary/15 text-primary hover:bg-primary/15",
2781
+ !compact && "w-full"
2782
2782
  ),
2783
2783
  children: [
2784
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate font-bold text-white", children: selected?.label }),
2784
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate", children: selected?.label }),
2785
2785
  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
2786
2786
  Icon,
2787
2787
  {
2788
2788
  name: "expand_more",
2789
- className: cn("shrink-0 text-icon-xs text-white/40 transition-transform", open && "rotate-180")
2789
+ className: cn(
2790
+ "shrink-0 text-icon-xs transition-transform",
2791
+ open ? "rotate-180 text-primary" : "text-muted-foreground"
2792
+ )
2790
2793
  }
2791
2794
  )
2792
2795
  ]
@@ -2800,13 +2803,13 @@ function OptionSelector({
2800
2803
  "span",
2801
2804
  {
2802
2805
  className: cn(
2803
- "block truncate text-xs",
2804
- optionSelected ? "font-bold text-white" : "font-medium text-white/70"
2806
+ "block truncate text-sm",
2807
+ optionSelected ? "font-semibold text-primary" : "font-medium text-foreground"
2805
2808
  ),
2806
2809
  children: option.label
2807
2810
  }
2808
2811
  ),
2809
- option.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mt-0.5 block truncate text-tiny text-white/35", children: option.description })
2812
+ option.description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "mt-0.5 block truncate text-tiny text-muted-foreground", children: option.description })
2810
2813
  ] })
2811
2814
  ] }),
2812
2815
  optionSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "check", className: "text-icon-sm text-primary" })
package/dist/web/index.js CHANGED
@@ -2189,7 +2189,7 @@ function BottomNav({
2189
2189
  "nav",
2190
2190
  {
2191
2191
  className: cn(
2192
- "w-[90%] max-w-[340px] rounded-full bg-card/60 shadow-lg backdrop-blur-xl",
2192
+ "w-[90%] max-w-[21.25rem] rounded-full bg-card/60 shadow-lg backdrop-blur-xl",
2193
2193
  position === "fixed" ? "fixed bottom-6 left-1/2 z-[var(--z-nav)] -translate-x-1/2" : "relative",
2194
2194
  className
2195
2195
  ),
@@ -2202,7 +2202,7 @@ function BottomNav({
2202
2202
  onClick: () => onChange(id),
2203
2203
  "data-testid": testId ?? `bottom-nav-${id}`,
2204
2204
  className: cn(
2205
- "relative flex h-[52px] w-[64px] flex-col items-center justify-center rounded-full transition-all duration-300",
2205
+ "relative flex h-[3.25rem] w-[4rem] flex-col items-center justify-center rounded-full transition-all duration-300",
2206
2206
  isActive ? "bg-white/10 text-primary" : "text-muted-foreground hover:text-white/75 active:scale-95"
2207
2207
  ),
2208
2208
  children: [
@@ -2588,25 +2588,28 @@ function OptionSelector({
2588
2588
  options,
2589
2589
  onChange,
2590
2590
  className: cn(compact ? "w-auto shrink-0" : "w-full", className),
2591
- panelClassName: "right-0 left-auto min-w-[11rem]",
2592
- optionClassName: "px-3 py-2.5",
2591
+ panelClassName: "right-0 left-auto min-w-[11rem] rounded-xl border-0 bg-card",
2592
+ optionClassName: "px-3.5 py-2.5 hover:bg-white/6 data-[selected]:bg-transparent data-[selected]:shadow-none",
2593
2593
  onOpenPanelHeightChange,
2594
2594
  renderTrigger: ({ open }) => /* @__PURE__ */ jsxs18(
2595
2595
  "span",
2596
2596
  {
2597
2597
  className: cn(
2598
- "flex items-center gap-1 rounded-2xl bg-white/[0.09] px-2 py-1.5 text-xs leading-none backdrop-blur-md transition-all hover:bg-white/[0.13]",
2598
+ "flex h-9 min-w-[4.5rem] items-center gap-1.5 rounded-full bg-white/8 px-3.5 text-sm font-semibold leading-none text-foreground transition-colors hover:bg-white/12",
2599
2599
  triggerAlign === "center" ? "justify-center" : "justify-between",
2600
- open && "bg-white/[0.13]",
2601
- !compact && "w-full px-3 py-3"
2600
+ open && "bg-primary/15 text-primary hover:bg-primary/15",
2601
+ !compact && "w-full"
2602
2602
  ),
2603
2603
  children: [
2604
- /* @__PURE__ */ jsx31("span", { className: "truncate font-bold text-white", children: selected?.label }),
2604
+ /* @__PURE__ */ jsx31("span", { className: "truncate", children: selected?.label }),
2605
2605
  /* @__PURE__ */ jsx31(
2606
2606
  Icon,
2607
2607
  {
2608
2608
  name: "expand_more",
2609
- className: cn("shrink-0 text-icon-xs text-white/40 transition-transform", open && "rotate-180")
2609
+ className: cn(
2610
+ "shrink-0 text-icon-xs transition-transform",
2611
+ open ? "rotate-180 text-primary" : "text-muted-foreground"
2612
+ )
2610
2613
  }
2611
2614
  )
2612
2615
  ]
@@ -2620,13 +2623,13 @@ function OptionSelector({
2620
2623
  "span",
2621
2624
  {
2622
2625
  className: cn(
2623
- "block truncate text-xs",
2624
- optionSelected ? "font-bold text-white" : "font-medium text-white/70"
2626
+ "block truncate text-sm",
2627
+ optionSelected ? "font-semibold text-primary" : "font-medium text-foreground"
2625
2628
  ),
2626
2629
  children: option.label
2627
2630
  }
2628
2631
  ),
2629
- option.description && /* @__PURE__ */ jsx31("span", { className: "mt-0.5 block truncate text-tiny text-white/35", children: option.description })
2632
+ option.description && /* @__PURE__ */ jsx31("span", { className: "mt-0.5 block truncate text-tiny text-muted-foreground", children: option.description })
2630
2633
  ] })
2631
2634
  ] }),
2632
2635
  optionSelected && /* @__PURE__ */ jsx31(Icon, { name: "check", className: "text-icon-sm text-primary" })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kaleido-ui",
3
- "version": "0.1.78",
3
+ "version": "0.1.80",
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",