@timbal-ai/timbal-react 1.1.0 → 1.3.0

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

@@ -95,6 +95,33 @@ var TIMBAL_V2_SHADOW = {
   ghost: "",
   link: ""
 };
+var TIMBAL_V2_PRIMARY_SURFACE = cn(
+  TIMBAL_V2_PRIMARY_GRADIENT,
+  TIMBAL_V2_SHADOW.primary,
+  TIMBAL_V2_BORDER.primary
+);
+var TIMBAL_V2_PRIMARY_PILL_ROOT = cn(
+  "relative box-border inline-flex items-center justify-center overflow-hidden rounded-full border-0 bg-transparent p-0 font-normal shadow-none transition duration-200 ease-in-out",
+  TIMBAL_V2_SHADOW.primary,
+  TIMBAL_V2_BORDER.primary
+);
+var TIMBAL_V2_PRIMARY_PILL_FILL_LAYER = cn(
+  "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+  "bg-gradient-to-b from-primary-fill-from to-primary-fill-to",
+  "group-hover/avatar:from-primary-fill-hover-from group-hover/avatar:to-primary-fill-hover-to",
+  "group-active/avatar:from-primary-fill-active-from group-active/avatar:to-primary-fill-active-to"
+);
+var TIMBAL_V2_SECONDARY_PILL_ROOT = cn(
+  "relative box-border inline-flex items-center justify-center overflow-hidden rounded-full bg-transparent p-0 font-normal shadow-none transition duration-200 ease-in-out",
+  TIMBAL_V2_SHADOW.secondary,
+  TIMBAL_V2_BORDER.secondary
+);
+var TIMBAL_V2_SECONDARY_PILL_FILL_LAYER = cn(
+  "pointer-events-none absolute inset-0 transition duration-200 ease-in-out",
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "group-hover/avatar:from-secondary-fill-hover-from group-hover/avatar:to-secondary-fill-hover-to",
+  "group-active/avatar:from-secondary-fill-active-from group-active/avatar:to-secondary-fill-active-to"
+);
 var TIMBAL_V2_SWITCH_TRACK_OFF = cn(
   TIMBAL_V2_ELEVATED_GRADIENT,
   "border border-border shadow-card"
@@ -521,25 +548,74 @@ function DialogFooter({ className, ...props }) {
 }
 
 // src/ui/avatar.tsx
+import * as React2 from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var AVATAR_PRIMARY_FALLBACK_CLASS = cn(
+  TIMBAL_V2_SECONDARY_PILL_ROOT,
+  TIMBAL_V2_LABEL.secondary,
+  "font-medium"
+);
+var AVATAR_SECONDARY_FILL_STYLE = {
+  backgroundImage: "linear-gradient(to bottom, var(--elevated-from), var(--elevated-to))"
+};
+var AvatarChromeContext = React2.createContext(
+  null
+);
+function useAvatarChrome() {
+  return React2.useContext(AvatarChromeContext);
+}
+function isBrandedVariant(variant) {
+  return variant === "secondary" || variant === "primary" || variant === "chart";
+}
+function avatarChartVariantClass(_seed) {
+  return AVATAR_PRIMARY_FALLBACK_CLASS;
+}
+var AVATAR_SIZE_CLASS = {
+  default: "size-8",
+  sm: "size-6",
+  lg: "size-10"
+};
 function Avatar({
   className,
   size = "default",
+  variant: rootVariant,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  const [chrome, setChrome] = React2.useState(rootVariant ?? "muted");
+  React2.useLayoutEffect(() => {
+    if (rootVariant !== void 0) {
+      setChrome(rootVariant);
+    }
+  }, [rootVariant]);
+  const branded = isBrandedVariant(chrome);
+  return /* @__PURE__ */ jsx5(AvatarChromeContext.Provider, { value: { chrome, setChrome }, children: /* @__PURE__ */ jsxs4(
     AvatarPrimitive.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
+      "data-variant": branded ? "secondary" : chrome,
       className: cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        "group/avatar relative shrink-0 select-none",
+        AVATAR_SIZE_CLASS[size],
+        branded ? TIMBAL_V2_SECONDARY_PILL_ROOT : "flex overflow-hidden rounded-full",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        branded ? /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-hidden": true,
+            className: TIMBAL_V2_SECONDARY_PILL_FILL_LAYER,
+            style: AVATAR_SECONDARY_FILL_STYLE
+          }
+        ) : null,
+        children
+      ]
     }
-  );
+  ) });
 }
 function AvatarImage({
   className,
@@ -549,36 +625,56 @@ function AvatarImage({
     AvatarPrimitive.Image,
     {
       "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
+      className: cn(
+        "relative z-10 aspect-square size-full rounded-full object-cover",
+        className
+      ),
       ...props
     }
   );
 }
 function AvatarFallback({
   className,
+  variant = "muted",
+  seed: _seed,
+  children,
+  style,
   ...props
 }) {
+  const chromeCtx = useAvatarChrome();
+  React2.useLayoutEffect(() => {
+    chromeCtx?.setChrome(variant);
+  }, [chromeCtx, variant]);
+  const branded = isBrandedVariant(variant);
   return /* @__PURE__ */ jsx5(
     AvatarPrimitive.Fallback,
     {
       "data-slot": "avatar-fallback",
+      "data-variant": branded ? "secondary" : variant,
       className: cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "relative z-10 flex size-full items-center justify-center rounded-full",
+        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",
         className
       ),
-      ...props
+      style,
+      ...props,
+      children
     }
   );
 }
 
 // src/ui/chart.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React2.createContext(null);
+var ChartContext = React3.createContext(null);
 function useChart() {
-  const context = React2.useContext(ChartContext);
+  const context = React3.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -591,9 +687,9 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React2.useId();
+  const uniqueId = React3.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx6(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx6(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       "data-slot": "chart",
@@ -652,7 +748,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React2.useMemo(() => {
+  const tooltipLabel = React3.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -672,7 +768,7 @@ function ChartTooltipContent({
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(
@@ -693,7 +789,7 @@ function ChartTooltipContent({
                 "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                 indicator === "dot" && "items-center"
               ),
-              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs5(Fragment, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ jsx6(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx6(
                   "div",
                   {
@@ -712,7 +808,7 @@ function ChartTooltipContent({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs4(
+                /* @__PURE__ */ jsxs5(
                   "div",
                   {
                     className: cn(
@@ -720,7 +816,7 @@ function ChartTooltipContent({
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs4("div", { className: "grid gap-1.5", children: [
+                      /* @__PURE__ */ jsxs5("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
                         /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
                       ] }),
@@ -760,10 +856,10 @@ function ChartLegendContent({
       children: payload.filter((item) => item.type !== "none").map((item, index) => {
         const key = `${nameKey || item.dataKey || "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        return /* @__PURE__ */ jsxs4(
+        return /* @__PURE__ */ jsxs5(
           "div",
           {
-            className: "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            className: "[&>svg]:text-muted-foreground flex min-w-0 max-w-[8rem] items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
             children: [
               itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx6(itemConfig.icon, {}) : /* @__PURE__ */ jsx6(
                 "div",
@@ -772,7 +868,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              /* @__PURE__ */ jsx6("span", { className: "min-w-0 truncate", children: itemConfig?.label ?? (item.value != null ? String(item.value) : null) })
             ]
           },
           `${item.value ?? index}`
@@ -851,7 +947,6 @@ export {
   TIMBAL_V2_SECONDARY_CHROME,
   TIMBAL_V2_LOGO_TILE,
   TimbalV2Button,
-  buttonVariants,
   Button,
   CONTROL_SIZE,
   controlSurfaceClass,
@@ -874,6 +969,8 @@ export {
   DialogDescription,
   DialogHeader,
   DialogFooter,
+  AVATAR_PRIMARY_FALLBACK_CLASS,
+  avatarChartVariantClass,
   Avatar,
   AvatarImage,
   AvatarFallback,

package/dist/{chunk-FRZOEYBO.esm.js → chunk-THBA27QY.esm.js}

@@ -20,7 +20,7 @@ import {
 } from "./chunk-QIABF4KB.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-XCM3V6RK.esm.js";
+} from "./chunk-OFWC4MIY.esm.js";
 import {
   Composer,
   TimbalChat,
@@ -43,10 +43,10 @@ import {
   studioTopbarIconPillClass,
   studioTopbarPillHeightClass,
   useTimbalRuntime
-} from "./chunk-YXZ22OJN.esm.js";
+} from "./chunk-GQBYZRD7.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-P3KDAYX6.esm.js";
+} from "./chunk-VXMM2HX7.esm.js";
 import {
   Avatar,
   AvatarFallback,
@@ -56,7 +56,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn
-} from "./chunk-4AKJ6FKE.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/hooks/use-workforces.ts
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-JEAUF54A.esm.js → chunk-UCGVL7ZY.esm.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-4AKJ6FKE.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/ui/checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "radix-ui";

package/dist/{chunk-P3KDAYX6.esm.js → chunk-VXMM2HX7.esm.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-4AKJ6FKE.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/ui/pill-segmented-tabs.tsx
 import {