@timbal-ai/timbal-react 0.8.0 → 0.8.1

package/dist/{chunk-YNDXBN6C.esm.js → chunk-OISVICYF.esm.js}

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

package/dist/{chunk-LSEUKTU5.esm.js → chunk-P4SN7M67.esm.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-QKO67F4V.esm.js";
+} from "./chunk-QVAUCVQA.esm.js";
 
 // src/ui/dropdown-menu.tsx
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";

package/dist/{chunk-Z27GBSOT.esm.js → chunk-QIABF4KB.esm.js}

@@ -1,3 +1,48 @@
+// src/design/tokens.ts
+var SIDEBAR_WIDTH_PX = 224;
+var SIDEBAR_WIDTH_COLLAPSED_PX = 52;
+var SIDEBAR_MOBILE_PX = 272;
+var SIDEBAR_GAP_PX = 12;
+var SIDEBAR_CONTENT_GAP_PX = 8;
+var TOPBAR_GAP_PX = 8;
+var TOPBAR_HEIGHT_PX = 48;
+var PILL_HEIGHT_PX = 40;
+var SIDEBAR_INSET_PX_EXPANDED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_PX + SIDEBAR_CONTENT_GAP_PX;
+var SIDEBAR_INSET_PX_COLLAPSED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_COLLAPSED_PX + SIDEBAR_CONTENT_GAP_PX;
+var px = (n) => `${n / 16}rem`;
+var SIDEBAR_WIDTH = px(SIDEBAR_WIDTH_PX);
+var SIDEBAR_WIDTH_COLLAPSED = px(SIDEBAR_WIDTH_COLLAPSED_PX);
+var SIDEBAR_GAP = px(SIDEBAR_GAP_PX);
+var SIDEBAR_CONTENT_GAP = px(SIDEBAR_CONTENT_GAP_PX);
+var TOPBAR_GAP = px(TOPBAR_GAP_PX);
+var TOPBAR_HEIGHT = px(TOPBAR_HEIGHT_PX);
+var PILL_HEIGHT = px(PILL_HEIGHT_PX);
+var SIDEBAR_INSET_EXPANDED = px(SIDEBAR_INSET_PX_EXPANDED);
+var SIDEBAR_INSET_COLLAPSED = px(SIDEBAR_INSET_PX_COLLAPSED);
+var studioChromeShellStyle = {
+  "--studio-topbar-gap": TOPBAR_GAP,
+  "--studio-topbar-height": TOPBAR_HEIGHT,
+  "--studio-chrome-pill-height": PILL_HEIGHT,
+  "--studio-inset-top": `calc(${TOPBAR_GAP} + ${TOPBAR_HEIGHT})`,
+  "--studio-sidebar-gap": SIDEBAR_GAP,
+  "--studio-sidebar-width": SIDEBAR_WIDTH,
+  "--studio-sidebar-width-collapsed": SIDEBAR_WIDTH_COLLAPSED,
+  "--studio-sidebar-content-gap": SIDEBAR_CONTENT_GAP,
+  "--studio-inset-left": SIDEBAR_INSET_EXPANDED,
+  "--studio-inset-left-collapsed": SIDEBAR_INSET_COLLAPSED
+};
+var STORAGE_KEYS = {
+  sidebarCollapsed: "timbal-studio-sidebar-collapsed",
+  /** Used by `ModeToggle` in uncontrolled mode (`localStorage`). */
+  theme: "timbal-theme",
+  /** Used by the theme preset picker to remember the selected brand preset. */
+  themePreset: "timbal-theme-preset"
+};
+var DOM_IDS = {
+  sidebarRuntimeAnchor: "timbal-studio-sidebar-runtime-anchor",
+  topbarBrandAnchor: "timbal-studio-topbar-brand-anchor"
+};
+
 // src/design/sidebar-motion.ts
 var STUDIO_SIDEBAR_EASE_ENTER = [0, 0, 0.2, 1];
 var STUDIO_SIDEBAR_EASE_EXIT = [0.4, 0, 1, 1];
@@ -66,49 +111,6 @@ function studioSidebarBackdropTransition(reduced) {
   return { duration: 0.16, ease: STUDIO_SIDEBAR_EASE_EXIT };
 }
 
-// src/design/tokens.ts
-var SIDEBAR_WIDTH_PX = 224;
-var SIDEBAR_WIDTH_COLLAPSED_PX = 52;
-var SIDEBAR_MOBILE_PX = 272;
-var SIDEBAR_GAP_PX = 12;
-var SIDEBAR_CONTENT_GAP_PX = 8;
-var TOPBAR_GAP_PX = 8;
-var TOPBAR_HEIGHT_PX = 48;
-var PILL_HEIGHT_PX = 40;
-var SIDEBAR_INSET_PX_EXPANDED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_PX + SIDEBAR_CONTENT_GAP_PX;
-var SIDEBAR_INSET_PX_COLLAPSED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_COLLAPSED_PX + SIDEBAR_CONTENT_GAP_PX;
-var px = (n) => `${n / 16}rem`;
-var SIDEBAR_WIDTH = px(SIDEBAR_WIDTH_PX);
-var SIDEBAR_WIDTH_COLLAPSED = px(SIDEBAR_WIDTH_COLLAPSED_PX);
-var SIDEBAR_GAP = px(SIDEBAR_GAP_PX);
-var SIDEBAR_CONTENT_GAP = px(SIDEBAR_CONTENT_GAP_PX);
-var TOPBAR_GAP = px(TOPBAR_GAP_PX);
-var TOPBAR_HEIGHT = px(TOPBAR_HEIGHT_PX);
-var PILL_HEIGHT = px(PILL_HEIGHT_PX);
-var SIDEBAR_INSET_EXPANDED = px(SIDEBAR_INSET_PX_EXPANDED);
-var SIDEBAR_INSET_COLLAPSED = px(SIDEBAR_INSET_PX_COLLAPSED);
-var studioChromeShellStyle = {
-  "--studio-topbar-gap": TOPBAR_GAP,
-  "--studio-topbar-height": TOPBAR_HEIGHT,
-  "--studio-chrome-pill-height": PILL_HEIGHT,
-  "--studio-inset-top": `calc(${TOPBAR_GAP} + ${TOPBAR_HEIGHT})`,
-  "--studio-sidebar-gap": SIDEBAR_GAP,
-  "--studio-sidebar-width": SIDEBAR_WIDTH,
-  "--studio-sidebar-width-collapsed": SIDEBAR_WIDTH_COLLAPSED,
-  "--studio-sidebar-content-gap": SIDEBAR_CONTENT_GAP,
-  "--studio-inset-left": SIDEBAR_INSET_EXPANDED,
-  "--studio-inset-left-collapsed": SIDEBAR_INSET_COLLAPSED
-};
-var STORAGE_KEYS = {
-  sidebarCollapsed: "timbal-studio-sidebar-collapsed",
-  /** Used by `ModeToggle` in uncontrolled mode (`localStorage`). */
-  theme: "timbal-theme"
-};
-var DOM_IDS = {
-  sidebarRuntimeAnchor: "timbal-studio-sidebar-runtime-anchor",
-  topbarBrandAnchor: "timbal-studio-topbar-brand-anchor"
-};
-
 // src/layout/shell-inset-context.tsx
 import { createContext, useContext } from "react";
 var ShellInsetContext = createContext(null);
@@ -118,6 +120,14 @@ function useShellInsetReporter() {
 }
 
 export {
+  SIDEBAR_WIDTH_PX,
+  SIDEBAR_WIDTH_COLLAPSED_PX,
+  SIDEBAR_MOBILE_PX,
+  SIDEBAR_INSET_PX_EXPANDED,
+  SIDEBAR_INSET_PX_COLLAPSED,
+  studioChromeShellStyle,
+  STORAGE_KEYS,
+  DOM_IDS,
   STUDIO_SIDEBAR_ENTRIES_OUT_S,
   STUDIO_SIDEBAR_WIDTH_S,
   STUDIO_SIDEBAR_EXPAND_REVEAL_FRAC,
@@ -127,14 +137,6 @@ export {
   studioSidebarWidthTransition,
   studioSidebarDrawerTransition,
   studioSidebarBackdropTransition,
-  SIDEBAR_WIDTH_PX,
-  SIDEBAR_WIDTH_COLLAPSED_PX,
-  SIDEBAR_MOBILE_PX,
-  SIDEBAR_INSET_PX_EXPANDED,
-  SIDEBAR_INSET_PX_COLLAPSED,
-  studioChromeShellStyle,
-  STORAGE_KEYS,
-  DOM_IDS,
   ShellInsetProvider,
   useShellInsetReporter
 };

package/dist/{chunk-QKO67F4V.esm.js → chunk-QVAUCVQA.esm.js}

@@ -242,14 +242,83 @@ 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/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -261,12 +330,12 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -274,7 +343,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -286,7 +355,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx2(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        /* @__PURE__ */ jsx3(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
       ]
     }
   ) });
@@ -295,32 +364,32 @@ function TooltipContent({
 // src/ui/dialog.tsx
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx4(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -339,7 +408,7 @@ function DialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs3(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx3(DialogOverlay, {}),
+    /* @__PURE__ */ jsx4(DialogOverlay, {}),
     /* @__PURE__ */ jsxs3(
       DialogPrimitive.Content,
       {
@@ -358,8 +427,8 @@ function DialogContent({
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ jsx3(XIcon, {}),
-                /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx4(XIcon, {}),
+                /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -372,7 +441,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -385,7 +454,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -395,7 +464,7 @@ function DialogDescription({
   );
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "dialog-header",
@@ -405,7 +474,7 @@ function DialogHeader({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -420,13 +489,13 @@ function DialogFooter({ className, ...props }) {
 
 // src/ui/avatar.tsx
 import { Avatar as AvatarPrimitive } from "radix-ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Avatar({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     AvatarPrimitive.Root,
     {
       "data-slot": "avatar",
@@ -443,7 +512,7 @@ function AvatarImage({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     AvatarPrimitive.Image,
     {
       "data-slot": "avatar-image",
@@ -456,7 +525,7 @@ function AvatarFallback({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     AvatarPrimitive.Fallback,
     {
       "data-slot": "avatar-fallback",
@@ -469,75 +538,6 @@ function AvatarFallback({
   );
 }
 
-// src/ui/button.tsx
-import { cva } from "class-variance-authority";
-import { jsx as jsx5 } 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__ */ jsx5(
-    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/ui/shimmer.tsx
 import { motion } from "motion/react";
 import {
@@ -593,6 +593,7 @@ export {
   TIMBAL_V2_SECONDARY_CHROME,
   TIMBAL_V2_LOGO_TILE,
   TimbalV2Button,
+  Button,
   TooltipProvider,
   Tooltip,
   TooltipTrigger,
@@ -610,6 +611,5 @@ export {
   Avatar,
   AvatarImage,
   AvatarFallback,
-  Button,
   Shimmer
 };

package/dist/{chunk-4AO3HCAR.esm.js → chunk-VWHHKAHN.esm.js}

@@ -17,10 +17,10 @@ import {
   studioSidebarEntryItemVariants,
   studioSidebarWidthTransition,
   useShellInsetReporter
-} from "./chunk-Z27GBSOT.esm.js";
+} from "./chunk-QIABF4KB.esm.js";
 import {
   WorkforceSelector
-} from "./chunk-ZG5NBHOS.esm.js";
+} from "./chunk-CFU3YDTV.esm.js";
 import {
   Composer,
   TimbalChat,
@@ -43,10 +43,10 @@ import {
   studioTopbarIconPillClass,
   studioTopbarPillHeightClass,
   useTimbalRuntime
-} from "./chunk-VVTTLIGT.esm.js";
+} from "./chunk-5ZKLPWVN.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-YNDXBN6C.esm.js";
+} from "./chunk-OISVICYF.esm.js";
 import {
   Avatar,
   AvatarFallback,
@@ -56,7 +56,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   cn
-} from "./chunk-QKO67F4V.esm.js";
+} from "./chunk-QVAUCVQA.esm.js";
 
 // src/hooks/use-workforces.ts
 import { useEffect, useMemo, useRef, useState } from "react";