@timbal-ai/timbal-react 1.4.0 → 1.6.0

package/dist/{chunk-QU7ET55D.esm.js → chunk-MBS7XHV2.esm.js}

@@ -1,13 +1,187 @@
-// src/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+import {
+  cn
+} from "./chunk-EDEKQYSU.esm.js";
 
-// src/ui/timbal-v2-button.tsx
-import * as React from "react";
+// src/ui/button.tsx
+import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SOLID_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-solid";
+var BORDERED_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-bordered";
+var buttonVariants = cva(
+  cn(
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-all duration-300 ease-in-out outline-none border",
+    "focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:ring-offset-0",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:pointer-events-none",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+    // Overflow hidden can clip out-of-bounds shadow, so we use precise overflow management and rounded-[inherit] on pseudo overlays
+    "after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0"
+  ),
+  {
+    variants: {
+      color: {
+        primary: cn(
+          // Exact Premium Untitled UI primary BLACK / dark charcoal: gradient + borders
+          "bg-gradient-to-b from-[#344054] to-[#0F1117] text-white border-[#1A1E29]",
+          "hover:border-[#181C26]",
+          "active:border-[#0A0D14]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for beautiful animation (the gradient is static, the overlay opacity is transitioned)
+          "after:bg-white/[0.08] hover:after:opacity-100 active:after:bg-black/[0.12]",
+          // Premium Dark Mode inversion: Primary becomes white, popping out elegantly
+          "dark:bg-gradient-to-b dark:from-white dark:to-[#F9FAFB] dark:text-[#10121C] dark:border-white",
+          "dark:hover:border-[#D0D5DD] dark:hover:text-[#10121C]",
+          "dark:shadow-skeuomorphic-bordered",
+          "dark:after:bg-black/[0.04] dark:active:after:bg-black/[0.08]"
+        ),
+        secondary: cn(
+          // Exact Untitled UI secondary: premium white/gray gradient + borders
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#344054] border-[#D0D5DD]",
+          "hover:text-[#1D2939] hover:border-[#D0D5DD]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for white/gray gradient
+          "after:bg-black/[0.03] hover:after:opacity-100 active:after:bg-black/[0.08]",
+          // Premium Dark Mode inversion: Secondary becomes dark charcoal/gray, merging into the background
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#D1D5DB] dark:border-[#344054]",
+          "dark:hover:border-[#475467] dark:hover:text-white",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        ),
+        tertiary: cn(
+          "bg-transparent text-[#475467] border-transparent",
+          "hover:bg-[#F9FAFB] hover:text-[#344054]",
+          "active:bg-[#F2F4F7] active:text-[#1D2939]",
+          "after:hidden",
+          // No overlay needed for transparent surfaces
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:bg-[#1F242F] dark:hover:text-white dark:active:bg-[#11131A]"
+        ),
+        link: cn(
+          "h-auto! bg-transparent p-0! border-transparent text-[#1F242F] hover:text-[#10121C]",
+          "hover:underline",
+          "after:hidden",
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:text-white"
+        ),
+        "primary-destructive": cn(
+          // Exact Untitled UI primary destructive: premium red gradient + borders (vibrant and subtle, not too dark)
+          "bg-gradient-to-b from-[#D92D20] to-[#B42318] text-white border-[#B42318]",
+          "hover:border-[#9E1B12]",
+          "active:border-[#84140D]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Destructive red hover/active overlays
+          "after:bg-white/[0.12] hover:after:opacity-100 active:after:bg-black/[0.15]"
+        ),
+        "secondary-destructive": cn(
+          // Exact Untitled UI secondary destructive: soft red bordered
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#B42318] border-[#FDA29B]",
+          "hover:text-[#9E1B12] hover:border-[#FDA29B]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover overlay
+          "after:bg-red-500/[0.04] hover:after:opacity-100 active:after:bg-red-950/[0.08]",
+          // Dark Mode Secondary Destructive: Charcoal fill with red borders and label
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#F87171] dark:border-[#9E1B12]/50",
+          "dark:hover:border-[#F87171]/40",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        )
+      },
+      size: {
+        xs: "h-7 gap-1 rounded-md px-2 text-xs",
+        sm: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        md: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        lg: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        xl: "h-11 gap-2 rounded-lg px-4 text-base",
+        default: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        icon: "h-9 w-9 rounded-lg",
+        "icon-xs": "h-7 w-7 rounded-md",
+        "icon-sm": "h-8 w-8 rounded-md",
+        "icon-lg": "h-10 w-10 rounded-lg"
+      },
+      shape: {
+        pill: "rounded-full!",
+        rounded: ""
+        // defaults to the size variant's standard rounded-lg
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "default",
+      shape: "rounded"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  color,
+  size,
+  shape,
+  iconLeading,
+  iconTrailing,
+  isLoading = false,
+  asChild = false,
+  disabled,
+  type = "button",
+  children,
+  ...props
+}) {
+  const isDisabled = disabled || isLoading;
+  let resolvedColor = "primary";
+  if (color) {
+    resolvedColor = color;
+  } else if (variant) {
+    if (variant === "default" || variant === "informative") resolvedColor = "primary";
+    else if (variant === "secondary" || variant === "outline") resolvedColor = "secondary";
+    else if (variant === "destructive") resolvedColor = "primary-destructive";
+    else if (variant === "ghost") resolvedColor = "tertiary";
+    else if (variant === "link") resolvedColor = "link";
+  }
+  const classes = cn(
+    buttonVariants({
+      color: resolvedColor,
+      size: size ?? "default",
+      shape: shape ?? "rounded"
+    }),
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot.Root,
+      {
+        className: classes,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "button",
+        "data-variant": resolvedColor,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      "data-slot": "button",
+      "data-variant": resolvedColor,
+      className: classes,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : iconLeading,
+        children,
+        !isLoading ? iconTrailing : null
+      ]
+    }
+  );
+}
 
 // src/design/button-tokens.ts
 var TIMBAL_V2_ELEVATED_GRADIENT = "bg-gradient-to-b from-elevated-from to-elevated-to";
@@ -16,31 +190,23 @@ var TIMBAL_V2_MODAL_SURFACE = cn(
   "border border-border shadow-card-elevated"
 );
 var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
-var TIMBAL_V2_FROM_LEGACY_BUTTON = {
-  default: "primary",
-  destructive: "destructive",
-  outline: "secondary",
-  secondary: "secondary",
-  ghost: "ghost",
-  link: "link"
-};
 var TIMBAL_V2_SIZE_HEIGHT = {
-  xs: "min-h-8 h-8",
-  sm: "min-h-9 h-9",
-  md: "min-h-10 h-10",
-  lg: "min-h-11 h-11"
+  xs: "min-h-7 h-7",
+  sm: "min-h-8 h-8",
+  md: "min-h-9 h-9",
+  lg: "min-h-10 h-10"
 };
 var TIMBAL_V2_SIZE_ICON = {
-  xs: "min-h-8 min-w-8 size-8",
+  xs: "min-h-7 min-w-7 size-7",
   sm: "min-h-8 min-w-8 size-8",
-  md: "min-h-10 min-w-10 size-10",
-  lg: "min-h-11 min-w-11 size-11"
+  md: "min-h-9 min-w-9 size-9",
+  lg: "min-h-10 min-w-10 size-10"
 };
 var TIMBAL_V2_SIZE_LABEL_PX = {
-  xs: "px-3",
-  sm: "px-4",
-  md: "px-5",
-  lg: "px-6"
+  xs: "px-2.5",
+  sm: "px-3",
+  md: "px-3.5",
+  lg: "px-4.5"
 };
 var TIMBAL_V2_FILL = {
   primary: [
@@ -59,6 +225,11 @@ var TIMBAL_V2_FILL = {
     "group-hover/tbv2:from-destructive-fill-hover-from group-hover/tbv2:to-destructive-fill-hover-to",
     "group-active/tbv2:from-destructive-fill-active-from group-active/tbv2:to-destructive-fill-active-to"
   ].join(" "),
+  "destructive-solid": [
+    "bg-gradient-to-b from-destructive-solid-from to-destructive-solid-to",
+    "group-hover/tbv2:from-destructive-solid-hover-from group-hover/tbv2:to-destructive-solid-hover-to",
+    "group-active/tbv2:from-destructive-solid-active-from group-active/tbv2:to-destructive-solid-active-to"
+  ].join(" "),
   secondary: [
     TIMBAL_V2_ELEVATED_GRADIENT,
     "group-hover/tbv2:from-secondary-fill-hover-from group-hover/tbv2:to-secondary-fill-hover-to",
@@ -75,6 +246,7 @@ var TIMBAL_V2_LABEL = {
   primary: "text-primary-foreground",
   informative: "text-primary-foreground",
   destructive: "text-destructive",
+  "destructive-solid": "text-destructive-foreground",
   secondary: "text-foreground",
   ghost: "text-foreground",
   link: "text-foreground underline decoration-foreground/25 underline-offset-2 group-hover/tbv2:decoration-foreground/45"
@@ -83,6 +255,7 @@ var TIMBAL_V2_BORDER = {
   primary: "",
   informative: "border border-foreground/15",
   destructive: "border border-destructive/45",
+  "destructive-solid": "",
   secondary: "border border-border",
   ghost: "",
   link: ""
@@ -91,6 +264,7 @@ var TIMBAL_V2_SHADOW = {
   primary: "shadow-card",
   informative: "shadow-card",
   destructive: "shadow-card",
+  "destructive-solid": "shadow-card",
   secondary: "shadow-card",
   ghost: "",
   link: ""
@@ -147,8 +321,43 @@ var TIMBAL_V2_LOGO_TILE = cn(
   "shadow-[0_1px_2px_-0.5px_rgba(0,0,0,0.08)]"
 );
 
+// src/design/control-surface.ts
+var CONTROL_SIZE = {
+  sm: "h-8 px-2.5",
+  default: "h-9 px-3"
+};
+var CONTROL_SHAPE = {
+  field: "rounded-lg",
+  pill: "rounded-full"
+};
+var controlSurfaceClass = cn(
+  TIMBAL_V2_SECONDARY_CHROME,
+  "text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10",
+  "focus-within:ring-2 focus-within:ring-foreground/10",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "data-[placeholder]:text-muted-foreground"
+);
+function controlClass(options = {}, className) {
+  const { size = "default", shape = "field" } = options;
+  return cn(controlSurfaceClass, CONTROL_SIZE[size], CONTROL_SHAPE[shape], className);
+}
+var overlayAnimationClass = "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var overlaySurfaceClass = cn(
+  "z-[80] border border-border bg-popover text-popover-foreground shadow-card",
+  overlayAnimationClass
+);
+var overlayListPanelClass = cn(
+  overlaySurfaceClass,
+  "overflow-hidden rounded-lg p-0 outline-hidden"
+);
+var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
+
 // src/ui/timbal-v2-button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var TIMBAL_V2_FILL_AS_CHILD = {
   primary: [
     "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
@@ -166,6 +375,11 @@ var TIMBAL_V2_FILL_AS_CHILD = {
     "hover:from-destructive-fill-hover-from hover:to-destructive-fill-hover-to",
     "active:from-destructive-fill-active-from active:to-destructive-fill-active-to"
   ].join(" "),
+  "destructive-solid": [
+    "bg-gradient-to-b from-destructive-solid-from to-destructive-solid-to",
+    "hover:from-destructive-solid-hover-from hover:to-destructive-solid-hover-to",
+    "active:from-destructive-solid-active-from active:to-destructive-solid-active-to"
+  ].join(" "),
   secondary: [
     TIMBAL_V2_ELEVATED_GRADIENT,
     "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
@@ -188,7 +402,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   isIconOnly = false,
   isLoading = false,
   fullWidth = false,
-  shape: _shape = "pill",
+  shape = "pill",
   asChild = false,
   className,
   disabled,
@@ -198,7 +412,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
 }, ref) {
   const isDisabled = disabled || isLoading;
   const sizeClass = isIconOnly ? TIMBAL_V2_SIZE_ICON[size] : TIMBAL_V2_SIZE_HEIGHT[size];
-  const radiusClass = "rounded-full";
+  const radiusClass = shape === "rect" ? "rounded-lg" : "rounded-full";
   const sharedRootClass = cn(
     "relative box-border inline-flex items-center justify-center gap-2 whitespace-nowrap border-0 text-sm font-normal shadow-none transition duration-200 ease-in-out",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
@@ -211,8 +425,8 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
     className
   );
   if (asChild) {
-    return /* @__PURE__ */ jsx(
-      Slot.Root,
+    return /* @__PURE__ */ jsx2(
+      Slot2.Root,
       {
         ref,
         "aria-disabled": isDisabled ? true : void 0,
@@ -225,11 +439,11 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
           TIMBAL_V2_LABEL_AS_CHILD[variant]
         ),
         ...props,
-        children: isLoading ? /* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+        children: isLoading ? /* @__PURE__ */ jsx2("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       ref,
@@ -243,7 +457,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "span",
           {
             "aria-hidden": true,
@@ -253,7 +467,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "span",
           {
             className: cn(
@@ -261,7 +475,7 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
               !isIconOnly && TIMBAL_V2_SIZE_LABEL_PX[size],
               TIMBAL_V2_LABEL[variant]
             ),
-            children: isLoading ? /* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
+            children: isLoading ? /* @__PURE__ */ jsx2("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : children
           }
         )
       ]
@@ -269,111 +483,9 @@ var TimbalV2Button = React.forwardRef(function TimbalV2Button2({
   );
 });
 
-// src/ui/button.tsx
-import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var LEGACY_SIZE_TO_V2 = {
-  default: "md",
-  xs: "xs",
-  sm: "sm",
-  lg: "lg",
-  icon: "sm",
-  "icon-xs": "xs",
-  "icon-sm": "sm",
-  "icon-lg": "lg"
-};
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "",
-        destructive: "",
-        outline: "",
-        secondary: "",
-        ghost: "",
-        link: ""
-      },
-      size: {
-        default: "",
-        xs: "",
-        sm: "",
-        lg: "",
-        icon: "",
-        "icon-xs": "",
-        "icon-sm": "",
-        "icon-lg": ""
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
-  const v2Variant = TIMBAL_V2_FROM_LEGACY_BUTTON[variant ?? "default"];
-  const v2Size = LEGACY_SIZE_TO_V2[size ?? "default"];
-  const isIconOnly = typeof size === "string" && size.startsWith("icon");
-  return /* @__PURE__ */ jsx2(
-    TimbalV2Button,
-    {
-      "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      variant: v2Variant,
-      size: v2Size,
-      shape: "pill",
-      isIconOnly,
-      asChild,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-
-// src/design/control-surface.ts
-var CONTROL_SIZE = {
-  sm: "h-9 px-3",
-  default: "h-10 px-3"
-};
-var CONTROL_SHAPE = {
-  field: "rounded-lg",
-  pill: "rounded-full"
-};
-var controlSurfaceClass = cn(
-  TIMBAL_V2_SECONDARY_CHROME,
-  "text-sm text-foreground outline-none",
-  "placeholder:text-muted-foreground/70",
-  "focus-visible:ring-2 focus-visible:ring-foreground/10",
-  "focus-within:ring-2 focus-within:ring-foreground/10",
-  "disabled:cursor-not-allowed disabled:opacity-50",
-  "data-[placeholder]:text-muted-foreground"
-);
-function controlClass(options = {}, className) {
-  const { size = "default", shape = "field" } = options;
-  return cn(controlSurfaceClass, CONTROL_SIZE[size], CONTROL_SHAPE[shape], className);
-}
-var overlayAnimationClass = "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
-var overlaySurfaceClass = cn(
-  "z-[80] border border-border bg-popover text-popover-foreground shadow-card",
-  overlayAnimationClass
-);
-var overlayListPanelClass = cn(
-  overlaySurfaceClass,
-  "overflow-hidden rounded-lg p-0 outline-hidden"
-);
-var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
-
 // src/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -403,13 +515,13 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-2.5 py-1 text-xs text-balance",
         className
       ),
       ...props,
@@ -424,7 +536,7 @@ function TooltipContent({
 // src/ui/dialog.tsx
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
@@ -467,21 +579,21 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs3(DialogPortal, { "data-slot": "dialog-portal", children: [
+  return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx4(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
         className: cn(
           TIMBAL_V2_MODAL_SURFACE,
-          "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 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 duration-200 outline-none sm:max-w-lg",
+          "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 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-5 duration-200 outline-none sm:max-w-lg",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs3(
+          showCloseButton && /* @__PURE__ */ jsxs4(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
@@ -550,7 +662,7 @@ function DialogFooter({ className, ...props }) {
 // src/ui/avatar.tsx
 import * as React2 from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var AVATAR_PRIMARY_FALLBACK_CLASS = cn(
   TIMBAL_V2_SECONDARY_PILL_ROOT,
   TIMBAL_V2_LABEL.secondary,
@@ -572,9 +684,9 @@ function avatarChartVariantClass(_seed) {
   return AVATAR_PRIMARY_FALLBACK_CLASS;
 }
 var AVATAR_SIZE_CLASS = {
-  default: "size-8",
-  sm: "size-6",
-  lg: "size-10"
+  default: "size-7",
+  sm: "size-5",
+  lg: "size-9"
 };
 function Avatar({
   className,
@@ -590,7 +702,7 @@ function Avatar({
     }
   }, [rootVariant]);
   const branded = isBrandedVariant(chrome);
-  return /* @__PURE__ */ jsx5(AvatarChromeContext.Provider, { value: { chrome, setChrome }, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx5(AvatarChromeContext.Provider, { value: { chrome, setChrome }, children: /* @__PURE__ */ jsxs5(
     AvatarPrimitive.Root,
     {
       "data-slot": "avatar",
@@ -656,8 +768,8 @@ function AvatarFallback({
         branded ? cn(
           "bg-transparent font-medium",
           TIMBAL_V2_LABEL.secondary,
-          "text-sm group-data-[size=sm]/avatar:text-xs"
-        ) : "bg-muted font-normal text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
+          "text-xs group-data-[size=sm]/avatar:text-[10px]"
+        ) : "bg-muted font-normal text-muted-foreground text-xs group-data-[size=sm]/avatar:text-[10px]",
         className
       ),
       style,
@@ -670,7 +782,7 @@ function AvatarFallback({
 // src/ui/chart.tsx
 import * as React3 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
 var ChartContext = React3.createContext(null);
 function useChart() {
@@ -689,7 +801,7 @@ function ChartContainer({
 }) {
   const uniqueId = React3.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx6(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx6(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "chart",
@@ -701,7 +813,7 @@ function ChartContainer({
       ...props,
       children: [
         /* @__PURE__ */ jsx6(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ jsx6(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ jsx6(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children })
       ]
     }
   ) });
@@ -732,6 +844,36 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
+var CHART_TOOLTIP_SURFACE = "rounded-xl border px-5 py-4 text-left text-[11px] leading-snug shadow-[0_12px_40px_-10px_rgba(0,0,0,0.55)] border-white/10 bg-gradient-to-b from-neutral-800 to-neutral-950 text-white dark:border-black/10 dark:from-white dark:to-neutral-100 dark:text-neutral-900";
+var CHART_TOOLTIP_TEXT = "text-white dark:text-neutral-900";
+var CHART_TOOLTIP_MUTED = "text-neutral-300 dark:text-neutral-600";
+function isCssColor(value) {
+  return typeof value === "string" && value.length > 0 && !value.startsWith("url(");
+}
+function resolvePayloadConfigKey(payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return key;
+  }
+  const row = payload;
+  const nested = "payload" in row && typeof row.payload === "object" && row.payload !== null ? row.payload : void 0;
+  if (key in row && typeof row[key] === "string") {
+    return row[key];
+  }
+  if (nested && key in nested && typeof nested[key] === "string") {
+    return nested[key];
+  }
+  if (typeof row.value === "string") {
+    return row.value;
+  }
+  return key;
+}
+function resolveSwatchColor(itemConfig, configKey, ...candidates) {
+  for (const candidate of candidates) {
+    if (isCssColor(candidate)) return candidate;
+  }
+  if (isCssColor(itemConfig?.color)) return itemConfig.color;
+  return `var(--color-${configKey})`;
+}
 function ChartTooltipContent({
   active,
   payload,
@@ -743,6 +885,7 @@ function ChartTooltipContent({
   labelFormatter,
   labelClassName,
   formatter,
+  valueFormatter,
   color,
   nameKey,
   labelKey
@@ -757,22 +900,23 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ jsx6("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ jsx6("div", { className: cn("font-medium leading-none", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ jsx6("div", { className: cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ jsx6("div", { className: cn("font-medium leading-none", labelClassName), children: value });
   }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
   if (!active || !payload?.length) {
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5",
+        CHART_TOOLTIP_SURFACE,
         "animate-in fade-in-0 zoom-in-95 duration-150",
         className
       ),
@@ -780,47 +924,51 @@ function ChartTooltipContent({
         !nestLabel ? tooltipLabel : null,
         /* @__PURE__ */ jsx6("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
           const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const configKey = resolvePayloadConfigKey(item, key);
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload?.fill || item.color;
+          const indicatorColor = resolveSwatchColor(
+            itemConfig,
+            configKey,
+            color,
+            item.payload?.fill,
+            item.color
+          );
           return /* @__PURE__ */ jsx6(
             "div",
             {
               className: cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-neutral-500 dark:[&>svg]:text-neutral-400",
                 indicator === "dot" && "items-center"
               ),
-              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs6(Fragment, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ jsx6(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx6(
                   "div",
                   {
-                    className: cn(
-                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                      {
-                        "h-2.5 w-2.5": indicator === "dot",
-                        "w-1": indicator === "line",
-                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
-                        "my-0.5": nestLabel && indicator === "dashed"
-                      }
-                    ),
+                    className: cn("shrink-0 rounded-[2px]", {
+                      "h-2.5 w-2.5": indicator === "dot",
+                      "w-1": indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                      "my-0.5": nestLabel && indicator === "dashed"
+                    }),
                     style: {
-                      "--color-bg": indicatorColor,
-                      "--color-border": indicatorColor
+                      backgroundColor: indicator === "dashed" ? void 0 : indicatorColor,
+                      borderColor: indicatorColor
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsxs6(
                   "div",
                   {
                     className: cn(
-                      "flex flex-1 justify-between leading-none",
+                      "flex flex-1 justify-between gap-3 leading-none",
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs5("div", { className: "grid gap-1.5", children: [
+                      /* @__PURE__ */ jsxs6("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ jsx6("span", { className: CHART_TOOLTIP_MUTED, children: itemConfig?.label || item.name })
                       ] }),
-                      item.value != null && /* @__PURE__ */ jsx6("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                      item.value != null && /* @__PURE__ */ jsx6("span", { className: cn("font-medium tabular-nums", CHART_TOOLTIP_TEXT), children: valueFormatter ? valueFormatter(item.value, item) : typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
                     ]
                   }
                 )
@@ -855,8 +1003,10 @@ function ChartLegendContent({
       ),
       children: payload.filter((item) => item.type !== "none").map((item, index) => {
         const key = `${nameKey || item.dataKey || "value"}`;
+        const configKey = resolvePayloadConfigKey(item, key);
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        return /* @__PURE__ */ jsxs5(
+        const swatchColor = resolveSwatchColor(itemConfig, configKey, item.color);
+        return /* @__PURE__ */ jsxs6(
           "div",
           {
             className: "[&>svg]:text-muted-foreground flex min-w-0 max-w-[8rem] items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
@@ -865,7 +1015,7 @@ function ChartLegendContent({
                 "div",
                 {
                   className: "h-2 w-2 shrink-0 rounded-[2px]",
-                  style: { backgroundColor: item.color }
+                  style: { backgroundColor: swatchColor }
                 }
               ),
               /* @__PURE__ */ jsx6("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
@@ -881,13 +1031,7 @@ function getPayloadConfigFromPayload(config, payload, key) {
   if (typeof payload !== "object" || payload === null) {
     return void 0;
   }
-  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
-  let configLabelKey = key;
-  if (key in payload && typeof payload[key] === "string") {
-    configLabelKey = payload[key];
-  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
-    configLabelKey = payloadPayload[key];
-  }
+  const configLabelKey = resolvePayloadConfigKey(payload, key);
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 
@@ -938,7 +1082,7 @@ var ShimmerComponent = ({
 var Shimmer = memo(ShimmerComponent);
 
 export {
-  cn,
+  Button,
   TIMBAL_V2_ELEVATED_GRADIENT,
   TIMBAL_V2_MODAL_SURFACE,
   TIMBAL_V2_SWITCH_TRACK_OFF,
@@ -946,8 +1090,6 @@ export {
   TIMBAL_V2_ELEVATED_SURFACE,
   TIMBAL_V2_SECONDARY_CHROME,
   TIMBAL_V2_LOGO_TILE,
-  TimbalV2Button,
-  Button,
   CONTROL_SIZE,
   controlSurfaceClass,
   controlClass,
@@ -955,6 +1097,7 @@ export {
   overlaySurfaceClass,
   overlayListPanelClass,
   overlayItemClass,
+  TimbalV2Button,
   TooltipProvider,
   Tooltip,
   TooltipTrigger,