kaleido-ui 0.1.2 → 0.1.3

package/dist/web/index.js

@@ -17,28 +17,30 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:brightness-115",
+        destructive: "bg-destructive text-destructive-foreground hover:brightness-115",
+        outline: "border border-primary/50 bg-transparent text-[#31ff8b] hover:bg-primary/5 hover:border-primary hover:brightness-115",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-foreground",
+        ghost: "text-[#31ff8b] hover:brightness-115 hover:bg-transparent hover:[&_span]:brightness-115",
         link: "text-primary underline-offset-4 hover:underline",
         glow: "bg-primary text-primary-foreground shadow-md",
-        surface: "bg-card text-card-foreground border border-border hover:bg-accent",
-        cta: "w-full bg-primary hover:bg-primary/90 text-primary-foreground font-bold rounded-2xl shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
+        surface: "bg-primary/15 text-[#31ff8b] hover:bg-primary/25",
+        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",
         "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",
-        "danger-subtle": "w-full bg-red-500/10 border border-red-500/20 text-red-400 font-bold rounded-xl hover:bg-red-500/20"
+        "danger-subtle": "bg-red-500/10 border border-red-500/20 text-destructive font-bold rounded-xl hover:brightness-115",
+        hyperlink: "group text-muted-foreground underline underline-offset-2 hover:text-white hover:decoration-[#31ff8b] hover:[&_.icon]:text-[#31ff8b] bg-transparent font-normal"
       },
       size: {
         default: "h-11 px-5 py-2",
+        xs: "h-7 rounded-lg px-2 text-xs",
         sm: "h-9 rounded-lg px-3 text-xs",
         lg: "h-14 rounded-xl px-8 text-base font-bold",
         xl: "h-16 rounded-2xl px-10 text-lg font-bold",
         cta: "h-14 py-4 px-6 text-lg",
         "cta-lg": "h-[60px] py-5 px-6 text-lg",
-        icon: "h-10 w-10 rounded-full",
-        "icon-lg": "h-12 w-12 rounded-full",
-        "icon-xl": "h-14 w-14 rounded-full"
+        icon: "h-6 w-6 rounded-full",
+        "icon-lg": "h-9 w-9 rounded-full",
+        "icon-xl": "h-12 w-12 rounded-full"
       }
     },
     defaultVariants: {
@@ -71,7 +73,7 @@ var Card = React2.forwardRef(
     {
       ref,
       className: cn(
-        "rounded-2xl border border-border/50 bg-card text-card-foreground shadow-sm transition-colors",
+        "rounded-2xl bg-card text-card-foreground shadow-sm transition-colors",
         className
       ),
       ...props
@@ -117,7 +119,7 @@ var Input = React3.forwardRef(
       {
         type,
         className: cn(
-          "flex h-12 w-full rounded-xl border border-border bg-card px-4 py-3 text-base ring-offset-background transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "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-visible:outline-none focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-white/6",
           className
         ),
         ref,
@@ -251,13 +253,13 @@ var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) =
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ jsx5(Icon, { name: "close", size: "sm" }),
           /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
         ] })
@@ -299,7 +301,7 @@ var TabsList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-card p-1.5 text-muted-foreground border border-border/50",
+      "inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-card p-1.5 text-muted-foreground",
       className
     ),
     ...props
@@ -312,8 +314,8 @@ var TabsTrigger = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
     ref,
     className: cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2 text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "hover:text-foreground hover:bg-accent",
-      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+      "text-white hover:text-primary hover:bg-transparent",
+      "data-[state=active]:bg-primary/15 data-[state=active]:text-[#31ff8b] data-[state=active]:hover:bg-primary/25",
       className
     ),
     ...props
@@ -370,12 +372,12 @@ var ToastViewport = React7.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 var toastVariants = cva3(
-  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl border backdrop-blur-xl p-4 pr-10 shadow-[0_0_30px_rgba(0,0,0,0.3)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl backdrop-blur-xl p-4 shadow-[0_0_30px_rgba(0,0,0,0.3)] transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border-border bg-card/95 text-foreground",
-        destructive: "border-red-500/20 bg-red-500/10 text-red-400"
+        default: "bg-card text-foreground brightness-125",
+        destructive: "bg-red-500/20 text-red-400"
       }
     },
     defaultVariants: {
@@ -399,7 +401,7 @@ var ToastAction = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   {
     ref,
     className: cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-lg border border-primary/50 bg-transparent px-3 text-xs font-semibold text-[#31ff8b] transition-all hover:bg-primary/5 hover:border-primary hover:brightness-115 focus:outline-none disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-500/30 group-[.destructive]:text-red-400 group-[.destructive]:hover:border-red-500 group-[.destructive]:hover:bg-red-500/10",
       className
     ),
     ...props
@@ -411,7 +413,7 @@ var ToastClose = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "absolute right-2 top-2 rounded-full p-1 text-muted-foreground opacity-100 transition-all hover:text-foreground hover:bg-accent focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:hover:bg-red-500/20 group-[.destructive]:focus:ring-red-400",
+      "p-1.5 text-muted-foreground opacity-100 transition-all hover:text-white focus:opacity-100 focus:outline-none group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50",
       className
     ),
     "toast-close": "",
@@ -558,7 +560,7 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
     if (variant === "destructive") {
       return /* @__PURE__ */ jsx9(Icon, { name: "error", size: "md", className: "text-red-400" });
     }
-    return /* @__PURE__ */ jsx9(Icon, { name: "check_circle", size: "md", className: "text-foreground" });
+    return /* @__PURE__ */ jsx9(Icon, { name: "check_circle", size: "md", className: "text-primary" });
   };
   return /* @__PURE__ */ jsxs2(Toast, { ...props, variant, children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 flex-1", children: [
@@ -568,8 +570,10 @@ function ToastWithProgress({ id, title, description, action, duration = 4e3, var
         description && /* @__PURE__ */ jsx9(ToastDescription, { children: description })
       ] })
     ] }),
-    action,
-    /* @__PURE__ */ jsx9(ToastClose, {}),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 shrink-0", children: [
+      action,
+      /* @__PURE__ */ jsx9(ToastClose, {})
+    ] }),
     /* @__PURE__ */ jsx9("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-white/10 overflow-hidden", children: /* @__PURE__ */ jsx9(
       "div",
       {
@@ -645,7 +649,7 @@ function StatusBadge({ status, className }) {
     "div",
     {
       className: cn(
-        "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border font-medium text-xs",
+        "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full border font-medium text-xs",
         bg,
         border,
         color,
@@ -670,65 +674,65 @@ var networkConfig = {
     iconSuffix: "bitcoin/bitcoin-logo.svg"
   },
   LN: {
-    color: "text-purple-400",
-    bg: "bg-purple-500/10 backdrop-blur-md",
-    border: "border-purple-500/20",
+    color: "text-network-lightning",
+    bg: "bg-network-lightning/10 backdrop-blur-md",
+    border: "border-network-lightning/20",
     label: "LN",
     iconSuffix: "lightning/lightning.svg"
   },
   RGB20: {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   RGB21: {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB21",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   "RGB-L1": {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB L1",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   "RGB-LN": {
-    color: "text-network-rgb",
-    bg: "bg-network-rgb/10 backdrop-blur-md",
-    border: "border-network-rgb/20",
+    color: "text-destructive",
+    bg: "bg-red-500/20 backdrop-blur-md",
+    border: "border-red-500/20",
     label: "RGB LN",
     iconSuffix: "rgb/rgb-logo.svg"
   },
   Spark: {
-    color: "text-network-spark",
-    bg: "bg-network-spark/10 backdrop-blur-md",
-    border: "border-network-spark/20",
+    color: "text-black dark:text-white",
+    bg: "bg-black/10 dark:bg-white/10 backdrop-blur-md",
+    border: "border-black/20 dark:border-white/20",
     label: "Spark",
     iconSuffix: "spark/Asterisk/Spark Asterisk White.svg"
   },
   Arkade: {
-    color: "text-network-arkade",
-    bg: "bg-network-arkade/10 backdrop-blur-md",
-    border: "border-network-arkade/20",
+    color: "text-violet-400",
+    bg: "bg-violet-500/15 backdrop-blur-md",
+    border: "border-violet-500/20",
     label: "Arkade",
     iconSuffix: "arkade/arkade-icon.svg"
   }
 };
-function NetworkBadge({ network, iconBasePath = "/icons", className }) {
-  const { color, bg, border, label, iconSuffix } = networkConfig[network];
+function NetworkBadge({ network, iconBasePath = "/icons", iconOnly = false, className }) {
+  const { color, bg, label, iconSuffix } = networkConfig[network];
   const icon = `${iconBasePath}/${iconSuffix}`;
   return /* @__PURE__ */ jsxs4(
     "span",
     {
       className: cn(
-        "text-xxs px-2 py-0.5 rounded-full font-bold border shadow-inner flex items-center justify-center gap-1 w-max transition-all",
+        "text-xs rounded-full font-bold flex items-center justify-center w-max",
+        iconOnly ? "p-1.5" : "px-2.5 py-1 gap-1",
         bg,
-        border,
         color,
         className
       ),
@@ -738,10 +742,10 @@ function NetworkBadge({ network, iconBasePath = "/icons", className }) {
           {
             src: icon,
             alt: network,
-            className: cn("size-3 object-contain", network === "Spark" && "opacity-80")
+            className: cn(iconOnly ? "size-4" : "size-3.5", "object-contain", network === "Spark" && "brightness-0 dark:brightness-0 dark:invert")
           }
         ),
-        label
+        !iconOnly && label
       ]
     }
   );
@@ -866,6 +870,7 @@ function AssetIcon({ ticker, logoUri, cdnBaseUrl, size = 40, className }) {
 }
 
 // src/web/components/asset-card.tsx
+import { useState as useState5 } from "react";
 import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function AssetCard({
   ticker,
@@ -874,19 +879,26 @@ function AssetCard({
   networks = [],
   logoUri,
   balanceVisible = true,
+  accentColor,
   onClick,
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
+  const [hovered, setHovered] = useState5(false);
+  const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
+        "p-4 rounded-card backdrop-blur-xl transition-all shadow-sm relative overflow-hidden group",
+        !accentColor && "bg-card",
+        onClick && "cursor-pointer hover:brightness-110 active:scale-[0.98]",
         className
       ),
+      style: gradientStyle,
       onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       children: [
         /* @__PURE__ */ jsx13("div", { className: "absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" }),
         /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between relative z-10", children: [
@@ -906,7 +918,7 @@ function AssetCard({
                 {
                   className: cn(
                     "font-bold text-base leading-tight tracking-wide text-foreground",
-                    onClick && "group-hover:text-primary transition-colors"
+                    onClick && "transition-colors"
                   ),
                   children: name
                 }
@@ -915,7 +927,7 @@ function AssetCard({
             ] })
           ] }),
           /* @__PURE__ */ jsxs5("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsx13("p", { className: "font-bold text-base tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
+            /* @__PURE__ */ jsx13("p", { className: "font-bold text-lg tracking-tight text-foreground group-hover:opacity-90 transition-colors", children: shown }),
             /* @__PURE__ */ jsx13("p", { className: "text-tiny text-muted-foreground font-medium tracking-wide uppercase mt-0.5", children: ticker })
           ] })
         ] })
@@ -937,12 +949,34 @@ function TransactionCard({
 }) {
   const isInbound = direction === "inbound";
   const formatDate = (ts) => new Date(ts * 1e3).toLocaleDateString();
+  const statusStyle = {
+    success: { base: "bg-primary/5", hover: "hover:bg-primary/10" },
+    completed: { base: "bg-primary/5", hover: "hover:bg-primary/10" },
+    pending: { base: "bg-yellow-500/10", hover: "hover:bg-yellow-500/15" },
+    failed: { base: "bg-red-500/10", hover: "hover:bg-red-500/15" },
+    error: { base: "bg-red-500/10", hover: "hover:bg-red-500/15" }
+  }[status] ?? { base: "bg-background/40", hover: "hover:bg-white/5" };
+  const iconStyle = {
+    success: "bg-primary/20 text-primary",
+    completed: "bg-primary/20 text-primary",
+    pending: "bg-yellow-500/20 text-yellow-500",
+    failed: "bg-red-500/20 text-red-500",
+    error: "bg-red-500/20 text-red-500"
+  }[status] ?? "bg-accent text-muted-foreground";
+  const textColor = {
+    success: "text-primary",
+    completed: "text-primary",
+    pending: "text-yellow-500",
+    failed: "text-red-500",
+    error: "text-red-500"
+  }[status] ?? "text-foreground";
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
-        "p-4 rounded-card bg-background/40 backdrop-blur-xl border border-border flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
-        onClick && "cursor-pointer hover:border-primary/40 active:scale-[0.98]",
+        "p-4 rounded-card backdrop-blur-xl flex items-center justify-between transition-all shadow-sm relative overflow-hidden group",
+        statusStyle.base,
+        onClick && `cursor-pointer active:scale-[0.98] ${statusStyle.hover}`,
         className
       ),
       onClick,
@@ -954,24 +988,15 @@ function TransactionCard({
             {
               className: cn(
                 "size-11 rounded-full flex items-center justify-center shadow-inner group-hover:scale-105 transition-transform",
-                isInbound ? "bg-primary/20 text-primary border border-primary/20" : "bg-accent text-muted-foreground border border-border"
+                iconStyle
               ),
               children: /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined text-[20px]", children: isInbound ? "arrow_downward" : "arrow_outward" })
             }
           ),
           /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx14(
-              "span",
-              {
-                className: cn(
-                  "font-bold text-sm text-foreground tracking-wide",
-                  onClick && "group-hover:text-primary transition-colors"
-                ),
-                children: isInbound ? "Received" : "Sent"
-              }
-            ),
+            /* @__PURE__ */ jsx14("span", { className: "font-bold text-sm tracking-wide text-foreground", children: isInbound ? "Received" : "Sent" }),
             /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 mt-1", children: [
-              /* @__PURE__ */ jsx14(StatusBadge, { status, className: "text-xxs px-1.5 py-0.5" }),
+              /* @__PURE__ */ jsx14(StatusBadge, { status }),
               /* @__PURE__ */ jsx14("span", { className: "text-tiny text-muted-foreground font-medium tracking-wide", children: formatDate(timestamp) })
             ] })
           ] })
@@ -981,8 +1006,8 @@ function TransactionCard({
             "p",
             {
               className: cn(
-                "font-bold text-base tracking-tight group-hover:opacity-90 transition-opacity",
-                isInbound ? "text-primary" : "text-foreground"
+                "font-bold text-lg tracking-tight group-hover:opacity-90 transition-opacity",
+                textColor
               ),
               children: [
                 isInbound ? "+" : "-",
@@ -1025,15 +1050,15 @@ function SettingItem({
   onClick,
   showChevron = true,
   className,
-  iconColor = "text-primary"
+  iconColor = "text-[#31ff8b]"
 }) {
   const isClickable = !!onClick;
   return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn(
-        "p-5 rounded-2xl bg-card border border-border transition-all duration-200",
-        isClickable && "cursor-pointer hover:bg-accent active:scale-[0.98]",
+        "p-5 rounded-2xl bg-card transition-all duration-200 group",
+        isClickable && "cursor-pointer active:scale-[0.98]",
         className
       ),
       onClick,
@@ -1043,7 +1068,7 @@ function SettingItem({
             "div",
             {
               className: cn(
-                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-muted border border-border",
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-primary/15 group-hover:bg-primary/25 group-hover:scale-105 transition-all",
                 iconColor
               ),
               children: iconSrc ? /* @__PURE__ */ jsx16("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[20px]", children: icon })
@@ -1056,7 +1081,7 @@ function SettingItem({
         ] }),
         /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
           value && /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground font-mono", children: value }),
-          showChevron && isClickable && /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px] text-muted-foreground", children: "chevron_right" })
+          showChevron && isClickable && /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined text-[16px] text-muted-foreground group-hover:scale-110 group-hover:text-white transition-all", children: "chevron_right" })
         ] })
       ] })
     }
@@ -1078,32 +1103,16 @@ function SectionLabel({ children, className }) {
 // src/web/components/alert-banner.tsx
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var variantStyles = {
-  error: {
-    container: "bg-red-500/10 border-red-500/20",
-    icon: "text-red-400",
-    iconName: "error"
-  },
-  warning: {
-    container: "bg-amber-500/10 border-amber-500/20",
-    icon: "text-amber-400",
-    iconName: "warning"
-  },
-  info: {
-    container: "bg-blue-500/10 border-blue-500/20",
-    icon: "text-blue-400",
-    iconName: "info"
-  },
-  success: {
-    container: "bg-primary/10 border-primary/20",
-    icon: "text-primary",
-    iconName: "check_circle"
-  }
+  error: { container: "bg-red-900/40", icon: "text-red-500", iconName: "error" },
+  warning: { container: "bg-yellow-900/40", icon: "text-yellow-400", iconName: "warning" },
+  info: { container: "bg-blue-900/40", icon: "text-blue-300", iconName: "info" },
+  success: { container: "bg-primary/8", icon: "text-primary/90", iconName: "check_circle" }
 };
 function AlertBanner({ variant = "info", icon, children, className }) {
   const styles = variantStyles[variant];
-  return /* @__PURE__ */ jsxs9("div", { className: cn("rounded-xl border p-3 flex items-start gap-2", styles.container, className), children: [
-    /* @__PURE__ */ jsx18(Icon, { name: icon ?? styles.iconName, size: "md", className: cn("shrink-0 mt-0.5", styles.icon) }),
-    /* @__PURE__ */ jsx18("div", { className: "text-sm", children })
+  return /* @__PURE__ */ jsxs9("div", { className: cn("rounded-xl p-3 flex items-center gap-2", styles.container, className), children: [
+    /* @__PURE__ */ jsx18(Icon, { name: icon ?? styles.iconName, size: "md", className: cn("shrink-0", styles.icon) }),
+    /* @__PURE__ */ jsx18("div", { className: cn("text-sm", styles.icon), children })
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",
@@ -23,24 +23,19 @@
       "import": "./dist/native/index.js",
       "require": "./dist/native/index.cjs"
     },
-    "./tailwind": {
-      "types": "./dist/tailwind/index.d.ts",
-      "import": "./dist/tailwind/index.js",
-      "require": "./dist/tailwind/index.cjs"
-    },
     "./css": "./dist/css/kaleido-ui.css"
   },
   "files": [
     "dist",
     "native",
-    "tokens",
-    "tailwind"
+    "tokens"
   ],
   "scripts": {
-    "build": "tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css",
+    "generate:css": "node node_modules/tsx/dist/cli.mjs scripts/generate-css.ts",
+    "build": "npm run generate:css && tsup && mkdir -p dist/css && cp src/css/kaleido-ui.css dist/css/kaleido-ui.css",
     "dev": "tsup --watch",
     "showcase": "vite --config showcase/vite.config.ts",
-    "showcase:build": "vite build --config showcase/vite.config.ts",
+    "showcase:build": "npm run generate:css && vite build --config showcase/vite.config.ts",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist"
   },
@@ -112,6 +107,7 @@
     "tailwind-merge": "^2.6.1",
     "tailwindcss": "^4.2.4",
     "tsup": "^8.0.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.0",
     "vite": "^5.4.11"
   },