@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/studio.d.cts

@@ -0,0 +1,15 @@
+export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome--80i_O0p.cjs';
+import { FC } from 'react';
+import './chat-CWtQWDtJ.cjs';
+import 'react/jsx-runtime';
+import '@assistant-ui/react';
+import '@timbal-ai/timbal-sdk';
+
+interface StudioSidebarBackdropProps {
+    open: boolean;
+    onClose: () => void;
+}
+/** Mobile drawer backdrop. */
+declare const StudioSidebarBackdrop: FC<StudioSidebarBackdropProps>;
+
+export { StudioSidebarBackdrop };

package/dist/studio.d.ts

@@ -0,0 +1,15 @@
+export { M as ModeToggle, a as ModeToggleProps, b as ModeToggleTheme, S as STUDIO_NAV_MODE, c as StudioModeSwitch, d as StudioModeSwitchProps, e as StudioNavMode, f as StudioSidebar, g as StudioSidebarProps, h as StudioWelcome, i as StudioWelcomeProps, T as TimbalChatShell, j as TimbalChatShellProps, k as TimbalMark, l as TimbalMarkProps, m as TimbalStudioShell, n as TimbalStudioShellProps } from './welcome-BOizSp5h.js';
+import { FC } from 'react';
+import './chat-CWtQWDtJ.js';
+import 'react/jsx-runtime';
+import '@assistant-ui/react';
+import '@timbal-ai/timbal-sdk';
+
+interface StudioSidebarBackdropProps {
+    open: boolean;
+    onClose: () => void;
+}
+/** Mobile drawer backdrop. */
+declare const StudioSidebarBackdrop: FC<StudioSidebarBackdropProps>;
+
+export { StudioSidebarBackdrop };

package/dist/studio.esm.js

@@ -0,0 +1,27 @@
+import {
+  ModeToggle,
+  STUDIO_NAV_MODE,
+  StudioModeSwitch,
+  StudioSidebar,
+  StudioSidebarBackdrop,
+  StudioWelcome,
+  TimbalChatShell,
+  TimbalMark,
+  TimbalStudioShell
+} from "./chunk-OVHR7J3J.esm.js";
+import "./chunk-OFHLFNJH.esm.js";
+import "./chunk-WLTW56MC.esm.js";
+import "./chunk-YJQLLFKP.esm.js";
+import "./chunk-IYENDIRY.esm.js";
+import "./chunk-4TCJQSIX.esm.js";
+export {
+  ModeToggle,
+  STUDIO_NAV_MODE,
+  StudioModeSwitch,
+  StudioSidebar,
+  StudioSidebarBackdrop,
+  StudioWelcome,
+  TimbalChatShell,
+  TimbalMark,
+  TimbalStudioShell
+};

package/dist/styles.css

@@ -7,7 +7,7 @@
  *
  * The package's components are written exclusively against semantic Tailwind
  * tokens (bg-card, text-foreground, border-border, bg-elevated-from/to,
- * shadow-card, …). Every token has a complete light + dark definition here
+ * from-modal-from/to, shadow-card, …). Every token has a complete light + dark definition here
  * so a consumer's host CSS only needs:
  *
  *   @import "tailwindcss";
@@ -62,6 +62,10 @@
   --elevated-from: oklch(1 0 0);
   --elevated-to: oklch(0.985 0.002 260 / 0.7);
 
+  /* Opaque modal/dialog gradient — same hue as elevated, no alpha bleed-through. */
+  --modal-from: oklch(1 0 0);
+  --modal-to: oklch(0.975 0.002 260);
+
   /* Soft playground gradient behind the message column. */
   --playground-from: oklch(0.91 0.004 260 / 0.6);
   --playground-via: oklch(0.965 0.002 260 / 0.3);
@@ -136,6 +140,15 @@
     var(--studio-sidebar-gap) + var(--studio-sidebar-width-collapsed) +
       var(--studio-sidebar-content-gap)
   );
+
+  /* Pill segmented control (WorkshopPillSegmentedTabs / Build–Manage). */
+  --pill-segmented-track: var(--muted);
+  --pill-segmented-track-border: transparent;
+  --pill-segmented-track-shadow: none;
+  --pill-segmented-indicator-from: oklch(1 0 0);
+  --pill-segmented-indicator-to: oklch(0.985 0.002 260 / 0.7);
+  --pill-segmented-indicator-border: oklch(0.9 0.004 260 / 0.8);
+  --pill-segmented-indicator-shadow: 0 1px 2px -0.5px rgba(0, 0, 0, 0.05);
 }
 
 .dark {
@@ -171,6 +184,21 @@
   --elevated-from: oklch(1 0 0 / 0.05);
   --elevated-to: oklch(1 0 0 / 0.025);
 
+  --modal-from: oklch(0.22 0.005 260);
+  --modal-to: oklch(0.19 0.005 260);
+
+  --pill-segmented-track: linear-gradient(
+    to bottom,
+    oklch(1 0 0 / 0.05),
+    oklch(1 0 0 / 0.025)
+  );
+  --pill-segmented-track-border: oklch(1 0 0 / 0.08);
+  --pill-segmented-track-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
+  --pill-segmented-indicator-from: oklch(1 0 0 / 0.05);
+  --pill-segmented-indicator-to: oklch(1 0 0 / 0.025);
+  --pill-segmented-indicator-border: oklch(1 0 0 / 0.08);
+  --pill-segmented-indicator-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
+
   --playground-from: oklch(0.27 0.005 285);
   --playground-via: oklch(0.19 0.005 260);
   --playground-to: oklch(0.13 0.005 285);
@@ -263,6 +291,8 @@
      bg-*, border-*, text-*, from-*, via-*, to-* utilities alike. */
   --color-elevated-from: var(--elevated-from);
   --color-elevated-to: var(--elevated-to);
+  --color-modal-from: var(--modal-from);
+  --color-modal-to: var(--modal-to);
   --color-playground-from: var(--playground-from);
   --color-playground-via: var(--playground-via);
   --color-playground-to: var(--playground-to);
@@ -304,6 +334,11 @@
    from `<html>` and every utility flips together with the base tokens. */
 @custom-variant dark (&:is(.dark *));
 
+/** Pill segmented track — supports solid or gradient via `--pill-segmented-track`. */
+@utility bg-pill-segmented-track {
+  background: var(--pill-segmented-track);
+}
+
 /* =============================================================== *
  * Polish — markdown, shiki, katex, scrollbars                     *
  * =============================================================== */
@@ -456,14 +491,29 @@
   background-clip: content-box;
 }
 
+/* =============================================================== *
+ * App kit — layout shells use .aui-app-* class hooks in components *
+ * =============================================================== */
+
 /* =============================================================== *
  * Component fixes — baked in so consumers don't need overrides    *
  * =============================================================== */
 
-/* Sticky footer stacks above scrolling messages; composer shell is opaque. */
+/* Sticky footer stacks above scrolling messages. */
 .aui-thread-viewport-footer {
   isolation: isolate;
   z-index: 10;
+  background-color: var(--background);
+}
+
+.aui-thread-root[data-thread-variant="panel"] .aui-thread-viewport-footer {
+  background-color: var(--card);
+}
+
+/* Clip inner textarea/toolbar fills to the rounded shell (also in Tailwind class). */
+.aui-composer-shell {
+  border-radius: var(--radius-2xl, 1rem);
+  overflow: hidden;
 }
 
 /* Scrolled assistant action bars must not show through the composer shell. */

package/dist/timbal-v2-button-F4-z7m33.d.cts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+/**
+ * Timbal V2 button design tokens.
+ *
+ * Mirrors the `timbal-platform` design language (`TimbalV2Button`) so chat
+ * surfaces built with the SDK feel identical to the Timbal Studio. Each record
+ * is keyed by variant or size and ships only Tailwind utility classes — no
+ * runtime JS — so consumers can compose them with `cn(...)` and add their own
+ * overrides without ejecting.
+ *
+ * Every colour is resolved through semantic CSS variables defined in
+ * `styles.css`. There are NO hardcoded palette literals — light/dark mode
+ * flips by swapping the variable values, not by toggling Tailwind classes.
+ */
+type TimbalV2Variant = "primary" | "secondary" | "ghost" | "informative" | "destructive" | "link";
+type TimbalV2Size = "xs" | "sm" | "md" | "lg";
+
+interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
+    variant?: TimbalV2Variant;
+    size?: TimbalV2Size;
+    isIconOnly?: boolean;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    /** `pill` (default) — full rounding; `rect` — `rounded-md` for shadcn-style buttons. */
+    shape?: "pill" | "rect";
+    /**
+     * When true, merges props onto the single child element (Radix Slot).
+     * Uses a flat surface (no layered fill spans) — required for `asChild` to work.
+     */
+    asChild?: boolean;
+}
+/**
+ * Canonical Timbal pill button — layered absolute-fill span + relative label
+ * row scoped to `group/tbv2`. Mirrors `timbal-platform` `TimbalV2Button` so
+ * chat UIs built with the SDK feel identical to the Studio.
+ */
+declare const TimbalV2Button: React.ForwardRefExoticComponent<Omit<TimbalV2ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { type TimbalV2ButtonProps as T, TimbalV2Button as a };

package/dist/timbal-v2-button-F4-z7m33.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+/**
+ * Timbal V2 button design tokens.
+ *
+ * Mirrors the `timbal-platform` design language (`TimbalV2Button`) so chat
+ * surfaces built with the SDK feel identical to the Timbal Studio. Each record
+ * is keyed by variant or size and ships only Tailwind utility classes — no
+ * runtime JS — so consumers can compose them with `cn(...)` and add their own
+ * overrides without ejecting.
+ *
+ * Every colour is resolved through semantic CSS variables defined in
+ * `styles.css`. There are NO hardcoded palette literals — light/dark mode
+ * flips by swapping the variable values, not by toggling Tailwind classes.
+ */
+type TimbalV2Variant = "primary" | "secondary" | "ghost" | "informative" | "destructive" | "link";
+type TimbalV2Size = "xs" | "sm" | "md" | "lg";
+
+interface TimbalV2ButtonProps extends React.ComponentProps<"button"> {
+    variant?: TimbalV2Variant;
+    size?: TimbalV2Size;
+    isIconOnly?: boolean;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+    /** `pill` (default) — full rounding; `rect` — `rounded-md` for shadcn-style buttons. */
+    shape?: "pill" | "rect";
+    /**
+     * When true, merges props onto the single child element (Radix Slot).
+     * Uses a flat surface (no layered fill spans) — required for `asChild` to work.
+     */
+    asChild?: boolean;
+}
+/**
+ * Canonical Timbal pill button — layered absolute-fill span + relative label
+ * row scoped to `group/tbv2`. Mirrors `timbal-platform` `TimbalV2Button` so
+ * chat UIs built with the SDK feel identical to the Studio.
+ */
+declare const TimbalV2Button: React.ForwardRefExoticComponent<Omit<TimbalV2ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { type TimbalV2ButtonProps as T, TimbalV2Button as a };