@timbal-ai/timbal-react 1.4.0 → 1.5.0

package/dist/chat.cjs

@@ -968,7 +968,7 @@ function TooltipContent({
       "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,
@@ -991,14 +991,6 @@ 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",
@@ -1034,6 +1026,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",
@@ -1050,6 +1047,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"
@@ -1058,6 +1056,7 @@ var TIMBAL_V2_BORDER = {
   primary: "",
   informative: "border border-foreground/15",
   destructive: "border border-destructive/45",
+  "destructive-solid": "",
   secondary: "border border-border",
   ghost: "",
   link: ""
@@ -1066,6 +1065,7 @@ var TIMBAL_V2_SHADOW = {
   primary: "shadow-card",
   informative: "shadow-card",
   destructive: "shadow-card",
+  "destructive-solid": "shadow-card",
   secondary: "shadow-card",
   ghost: "",
   link: ""
@@ -1311,8 +1311,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,
@@ -1346,6 +1346,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",
@@ -1368,7 +1373,7 @@ var TimbalV2Button = React2.forwardRef(function TimbalV2Button2({
   isIconOnly = false,
   isLoading = false,
   fullWidth = false,
-  shape: _shape = "pill",
+  shape = "pill",
   asChild = false,
   className,
   disabled,
@@ -1378,7 +1383,7 @@ var TimbalV2Button = React2.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",
@@ -1679,7 +1684,7 @@ function ChartContainer({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartStyle, { id: chartId, config }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RechartsPrimitive.ResponsiveContainer, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RechartsPrimitive.ResponsiveContainer, { width: "100%", height: "100%", children })
       ]
     }
   ) });
@@ -1710,6 +1715,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,
@@ -1721,6 +1756,7 @@ function ChartTooltipContent({
   labelFormatter,
   labelClassName,
   formatter,
+  valueFormatter,
   color,
   nameKey,
   labelKey
@@ -1735,12 +1771,12 @@ function ChartTooltipContent({
     const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
     if (labelFormatter) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium leading-none", labelClassName), children: labelFormatter(value, payload) });
     }
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium", labelClassName), children: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("font-medium leading-none", labelClassName), children: value });
   }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
   if (!active || !payload?.length) {
     return null;
@@ -1750,7 +1786,8 @@ function ChartTooltipContent({
     "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
       ),
@@ -1758,31 +1795,35 @@ function ChartTooltipContent({
         !nestLabel ? tooltipLabel : null,
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)(
             "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__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "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
                     }
                   }
                 ),
@@ -1790,15 +1831,15 @@ function ChartTooltipContent({
                   "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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: CHART_TOOLTIP_MUTED, children: itemConfig?.label || item.name })
                       ] }),
-                      item.value != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("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) })
                     ]
                   }
                 )
@@ -1833,7 +1874,9 @@ 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);
+        const swatchColor = resolveSwatchColor(itemConfig, configKey, item.color);
         return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
@@ -1843,7 +1886,7 @@ function ChartLegendContent({
                 "div",
                 {
                   className: "h-2 w-2 shrink-0 rounded-[2px]",
-                  style: { backgroundColor: item.color }
+                  style: { backgroundColor: swatchColor }
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
@@ -1859,13 +1902,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];
 }
 
@@ -1971,13 +2008,13 @@ function resolveChartMargin(options) {
   }
   const anyAxis = showXAxis || showYAxis;
   if (!anyAxis) {
-    return { top: 8, right: 12, bottom: 8, left: 12 };
+    return { top: 8, right: 0, bottom: 0, left: 0 };
   }
   return {
     top: 8,
-    right: 12,
-    bottom: showXAxis ? 24 : 8,
-    left: showYAxis ? 8 : 12
+    right: showYAxis ? 12 : 0,
+    bottom: showXAxis ? 24 : 0,
+    left: showYAxis ? 8 : 0
   };
 }
 function flushBarCategoryGap(flush, showCategoryAxis) {
@@ -2025,7 +2062,7 @@ var LineAreaChart = ({
   barRadius = 4,
   gridLines,
   layout = "default",
-  showGrid = true,
+  showGrid: showGridProp,
   showXAxis: showXAxisProp,
   showYAxis: showYAxisProp,
   showLegend: showLegendProp,
@@ -2041,6 +2078,7 @@ var LineAreaChart = ({
   const xKey = xKeyProp ?? inferXKey(data);
   const series = resolveSeries(seriesProp, data, xKey);
   const flush = layout === "flush";
+  const showGrid = showGridProp ?? !flush;
   const horizontal = orientation === "horizontal" && variant === "bar";
   const showXAxis = showXAxisProp ?? !flush;
   const showYAxis = showYAxisProp ?? !flush;
@@ -2081,14 +2119,7 @@ var LineAreaChart = ({
             const category = resolveTooltipCategory(label, items, xKey, data, xFmt);
             return category || null;
           },
-          formatter: (value, name, item) => {
-            const key = String(item.dataKey ?? name ?? "value");
-            const seriesLabel = config[key]?.label ?? name;
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 items-center justify-between leading-none", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: seriesLabel }),
-              value != null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: valueFmt(value) }) : null
-            ] });
-          }
+          valueFormatter: (value) => value != null ? valueFmt(value) : null
         }
       )
     }
@@ -2099,13 +2130,27 @@ var LineAreaChart = ({
   if (variant === "bar") {
     const dataKeys = series.map((s) => s.dataKey);
     const barDefs = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BarGradientDefs, { scopeId: gradientScopeId, dataKeys, horizontal });
-    const bars = series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    const bars = stacked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_recharts.BarStack,
+      {
+        radius: barCornerRadius(barRadius, horizontal, false),
+        stackId: "stack",
+        children: series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_recharts.Bar,
+          {
+            dataKey: s.dataKey,
+            fill: `url(#${barGradientId(gradientScopeId, s.dataKey)})`,
+            isAnimationActive: true
+          },
+          s.dataKey
+        ))
+      }
+    ) : series.map((s) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.Bar,
       {
         dataKey: s.dataKey,
         fill: `url(#${barGradientId(gradientScopeId, s.dataKey)})`,
-        radius: barCornerRadius(barRadius, horizontal, stacked),
-        stackId: stacked ? "stack" : void 0,
+        radius: barCornerRadius(barRadius, horizontal, false),
         isAnimationActive: true
       },
       s.dataKey
@@ -2178,7 +2223,7 @@ var LineAreaChart = ({
               tick: categoryTick("middle"),
               ...flushCategoryXAxisProps
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: xKey, hide: true }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: xKey, hide: true, height: 0 }),
           showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             import_recharts.YAxis,
             {
@@ -2189,7 +2234,7 @@ var LineAreaChart = ({
               tickFormatter: (v) => valueFmt(v),
               domain: yDomain
             }
-          ) : null,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.YAxis, { hide: true, width: 0, domain: yDomain }),
           tooltipEl,
           legendEl,
           bars
@@ -2225,7 +2270,7 @@ var LineAreaChart = ({
         tickFormatter: (v, i) => xFmt(v, i),
         ...flushCategoryXAxisProps
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: chartXKey, hide: true }),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.XAxis, { dataKey: chartXKey, hide: true, height: 0 }),
     showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts.YAxis,
       {
@@ -2236,7 +2281,7 @@ var LineAreaChart = ({
         tickFormatter: (v) => valueFmt(v),
         domain: yDomain
       }
-    ) : null
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts.YAxis, { hide: true, width: 0, domain: yDomain })
   ] });
   const chartA11y = flush ? {} : { accessibilityLayer: true };
   if (variant === "area") {
@@ -2415,7 +2460,7 @@ var PieChart = ({
     fill: palette[i % palette.length]
   }));
   const config = {};
-  for (const s of slices) config[s.name] = { label: s.name };
+  for (const s of slices) config[s.name] = { label: s.name, color: s.fill };
   const innerPct = innerRadius > 0 ? `${Math.round(innerRadius * 75)}%` : 0;
   const hasCenter = innerRadius > 0 && (centerValue != null || centerLabel != null);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -2535,7 +2580,7 @@ var RadialChart = ({
   }));
   const max = maxValue ?? Math.max(...rows.map((r) => r.value), 1);
   const config = {};
-  for (const r of rows) config[r.name] = { label: r.name };
+  for (const r of rows) config[r.name] = { label: r.name, color: r.fill };
   const hasCenter = centerValue != null || centerLabel != null;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex w-full flex-col items-center gap-3", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3209,69 +3254,181 @@ var import_react16 = require("@assistant-ui/react");
 
 // src/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui5 = require("radix-ui");
 var import_jsx_runtime24 = require("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 SOLID_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-solid";
+var BORDERED_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-bordered";
 var buttonVariants = (0, import_class_variance_authority.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",
+  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: {
-      variant: {
-        default: "",
-        destructive: "",
-        outline: "",
-        secondary: "",
-        ghost: "",
-        link: ""
+      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: {
-        default: "",
-        xs: "",
-        sm: "",
-        lg: "",
-        icon: "",
-        "icon-xs": "",
-        "icon-sm": "",
-        "icon-lg": ""
+        xs: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        lg: "h-11 gap-2 rounded-lg px-4 text-base",
+        xl: "h-12 gap-2 rounded-lg px-5 text-base",
+        default: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        icon: "h-10 w-10 rounded-lg",
+        "icon-xs": "h-8 w-8 rounded-md",
+        "icon-sm": "h-9 w-9 rounded-lg",
+        "icon-lg": "h-11 w-11 rounded-lg"
+      },
+      shape: {
+        pill: "rounded-full!",
+        rounded: ""
+        // defaults to the size variant's standard rounded-lg
       }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default"
+      color: "primary",
+      size: "default",
+      shape: "rounded"
     }
   }
 );
 function Button({
   className,
-  variant = "default",
-  size = "default",
+  variant,
+  color,
+  size,
+  shape,
+  iconLeading,
+  iconTrailing,
+  isLoading = false,
   asChild = false,
+  disabled,
+  type = "button",
+  children,
   ...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__ */ (0, import_jsx_runtime24.jsx)(
-    TimbalV2Button,
+  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__ */ (0, import_jsx_runtime24.jsx)(
+      import_radix_ui5.Slot.Root,
+      {
+        className: classes,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "button",
+        "data-variant": resolvedColor,
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "button",
     {
+      type,
+      disabled: isDisabled,
       "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      variant: v2Variant,
-      size: v2Size,
-      shape: "pill",
-      isIconOnly,
-      asChild,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      "data-variant": resolvedColor,
+      className: classes,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : iconLeading,
+        children,
+        !isLoading ? iconTrailing : null
+      ]
     }
   );
 }

package/dist/chat.d.cts

@@ -1,10 +1,10 @@
 export { d as ChatAttachment, e as ChatMessage, f as Composer, g as ComposerProps, h as ContentPart, S as SendOptions, i as Suggestions, j as SuggestionsComponent, k as SuggestionsSlotProps, l as SuggestionsSource, m as TextContentPart, n as ThinkingContentPart, o as Thread, p as ThreadArtifactsConfig, q as ThreadComponents, r as ThreadProps, s as ThreadSuggestion, t as ThreadSuggestionsProps, T as ThreadVariant, u as ThreadWelcomeConfig, v as ThreadWelcomeProps, b as TimbalChat, c as TimbalChatProps, w as TimbalRuntimeProvider, x as TimbalRuntimeProviderProps, y as TimbalStreamApi, z as ToolCallContentPart, U as UseTimbalStreamOptions, A as useResolvedSuggestions, B as useTimbalRuntime, D as useTimbalStream } from './chat-ClmzWzCX.cjs';
-export { M as MarkdownText, T as THREAD_DEFAULT_MAX_WIDTH, a as ToolFallback, b as TooltipIconButton, c as TooltipIconButtonProps, W as WorkforceSelector, d as WorkforceSelectorProps, e as assistantMessageContentClass, f as assistantMessageRootClass, t as threadMessageColumnClass, u as useToolRunning, g as userMessageRootClass } from './layout-C2G-FcER.cjs';
+export { M as MarkdownText, T as THREAD_DEFAULT_MAX_WIDTH, a as ToolFallback, b as TooltipIconButton, c as TooltipIconButtonProps, W as WorkforceSelector, d as WorkforceSelectorProps, e as assistantMessageContentClass, f as assistantMessageRootClass, t as threadMessageColumnClass, u as useToolRunning, g as userMessageRootClass } from './layout-Cu7Ijn04.cjs';
 import { FC } from 'react';
 import 'react/jsx-runtime';
 import '@assistant-ui/react';
 import '@timbal-ai/timbal-sdk';
-import './timbal-v2-button-CNfdwGq4.cjs';
+import './timbal-v2-button-B7vPs7gg.cjs';
 
 declare const UserMessageAttachments: FC;
 declare const ComposerAttachments: FC;