@timbal-ai/timbal-react 0.5.4 → 0.6.0

package/dist/chart-artifact-CPEpOmtV.d.cts

@@ -0,0 +1,329 @@
+import { FC, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { w as TimbalRuntimeProviderProps, q as ThreadProps, C as ChartArtifact } from './chat-CWtQWDtJ.cjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AppShellProps {
+    /** Primary navigation (e.g. StudioSidebar or custom rail). */
+    sidebar?: ReactNode;
+    /**
+     * Global top bar (login, theme, account) — spans the full shell width (not
+     * the page `max-w-6xl` column). Use `<AppShellTopbar start actions />`.
+     */
+    topbar?: ReactNode;
+    /** @deprecated Use `topbar`. */
+    header?: ReactNode;
+    /** Main routed content. */
+    children: ReactNode;
+    /**
+     * Floating copilot panel (e.g. `<AppChatPanel />`). Overlays the dashboard;
+     * does not shrink the main column.
+     */
+    chat?: ReactNode;
+    /** Floating panel width. Default: `24rem`. */
+    chatWidth?: string;
+    /**
+     * Floating panel height. Omit to stretch between vertical shell insets
+     * (full page height with `top` / `bottom` margins).
+     */
+    chatHeight?: string;
+    /** Controlled open state for the floating panel. */
+    chatOpen?: boolean;
+    /** Uncontrolled initial open state. Default: `false`. */
+    defaultChatOpen?: boolean;
+    onChatOpenChange?: (open: boolean) => void;
+    /** Show floating open/close control. Default: `true`. */
+    chatCollapsible?: boolean;
+    /** Label on the floating open trigger. Default: `Assistant`. */
+    chatTriggerLabel?: string;
+    /** Hide the built-in floating trigger (use your own + `useAppShellChat`). */
+    hideChatTrigger?: boolean;
+    className?: string;
+    mainClassName?: string;
+}
+/**
+ * App-first layout: sidebar + topbar + main, with optional **floating** copilot.
+ */
+declare const AppShell: FC<AppShellProps>;
+
+interface AppShellTopbarProps {
+    /** Leading cluster — mobile menu, product mark, org switcher. */
+    start?: ReactNode;
+    /** Trailing cluster — theme toggle, login, account menu. */
+    actions?: ReactNode;
+    /** Optional center content between start and actions. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Global app chrome row inside `AppShell` — auth, theme, and account actions.
+ * Spans the full shell width via the shell’s `topbar` slot (wider than `<Page />`).
+ */
+declare const AppShellTopbar: FC<AppShellTopbarProps>;
+
+interface AppShellChatTriggerProps {
+    className?: string;
+    label?: string;
+    /**
+     * `floating` — primary pill fixed bottom-right (matches shell default).
+     * `inline` — for topbar/actions rows; text only, no icons.
+     */
+    placement?: "floating" | "inline";
+}
+/** Opens the floating copilot. Text only — no icons. */
+declare const AppShellChatTrigger: FC<AppShellChatTriggerProps>;
+
+interface AppShellChatControls {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+    collapsible: boolean;
+}
+declare function useAppShellChat(): AppShellChatControls | null;
+
+interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare const PageHeader: FC<PageHeaderProps>;
+
+interface PageProps extends PageHeaderProps {
+    children: ReactNode;
+    /** Slot above the title (breadcrumbs). */
+    breadcrumbs?: ReactNode;
+    className?: string;
+}
+declare const Page: FC<PageProps>;
+
+interface SectionProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare const Section: FC<SectionProps>;
+
+type AppCopilotContextValue = Record<string, unknown>;
+interface AppCopilotProviderProps {
+    value: AppCopilotContextValue;
+    children: ReactNode;
+}
+/** Supplies page/dashboard context for `AppChatPanel` and agent tools. */
+declare const AppCopilotProvider: FC<AppCopilotProviderProps>;
+declare function useAppCopilotContext(): AppCopilotContextValue;
+
+interface AppChatPanelProps extends Omit<TimbalRuntimeProviderProps, "children">, Omit<ThreadProps, "variant" | "maxWidth"> {
+    className?: string;
+}
+/**
+ * Floating copilot body — `TimbalRuntimeProvider` + compact `Thread`.
+ * Render inside `AppShell` `chat`; open/close via shell trigger or `useAppShellChat`.
+ */
+declare const AppChatPanel: FC<AppChatPanelProps>;
+
+interface SurfaceCardProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const SurfaceCard: FC<SurfaceCardProps>;
+
+interface StatTileProps {
+    label: ReactNode;
+    value: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+}
+declare const StatTile: FC<StatTileProps>;
+
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+declare const EmptyState: FC<EmptyStateProps>;
+
+declare const statusBadgeToneClass: {
+    readonly default: "bg-muted text-foreground";
+    readonly primary: "bg-primary/10 text-primary";
+    readonly success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
+    readonly warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400";
+    readonly muted: "bg-muted/80 text-muted-foreground";
+};
+type StatusBadgeTone = keyof typeof statusBadgeToneClass;
+interface StatusBadgeProps {
+    children: ReactNode;
+    tone?: StatusBadgeTone;
+    className?: string;
+}
+declare const StatusBadge: FC<StatusBadgeProps>;
+
+interface AppConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    destructive?: boolean;
+    className?: string;
+}
+/**
+ * Confirm/cancel dialog for app flows (delete row, discard changes, etc.).
+ */
+declare const AppConfirmDialog: FC<AppConfirmDialogProps>;
+
+interface SubNavItem {
+    id: string;
+    label: ReactNode;
+}
+interface SubNavProps {
+    items: SubNavItem[];
+    activeId: string;
+    onChange: (id: string) => void;
+    className?: string;
+    "aria-label"?: string;
+    /** Passed to the underlying pill control for shared-layout animation. */
+    layoutId?: string;
+}
+/**
+ * Section tabs using the same pill segmented control as timbal-platform
+ * (Build/Manage, dashboard section bars).
+ */
+declare const SubNav: FC<SubNavProps>;
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+declare const Breadcrumbs: FC<BreadcrumbsProps>;
+
+interface FieldProps {
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    htmlFor?: string;
+}
+declare const Field: FC<FieldProps>;
+interface FieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    fieldClassName?: string;
+}
+declare const FieldInput: FC<FieldInputProps>;
+
+interface FieldTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label: FieldProps["label"];
+    hint?: FieldProps["hint"];
+    error?: FieldProps["error"];
+    fieldClassName?: string;
+}
+declare const FieldTextarea: FC<FieldTextareaProps>;
+
+interface FieldSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label: FieldProps["label"];
+    hint?: FieldProps["hint"];
+    error?: FieldProps["error"];
+    fieldClassName?: string;
+    children: ReactNode;
+}
+declare const FieldSelect: FC<FieldSelectProps>;
+
+interface FieldSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+declare const FieldSwitch: FC<FieldSwitchProps>;
+
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+}
+declare const SearchInput: FC<SearchInputProps>;
+
+interface FormSectionProps {
+    title?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare const FormSection: FC<FormSectionProps>;
+
+interface FilterBarProps {
+    children: ReactNode;
+    className?: string;
+}
+declare const FilterBar: FC<FilterBarProps>;
+
+type DataTableSortDirection = "asc" | "desc";
+interface DataTableSort {
+    columnId: string;
+    direction: DataTableSortDirection;
+}
+interface DataTableColumn<T> {
+    id: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    className?: string;
+    headerClassName?: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+    /** Value used when sorting; defaults to stringifying `cell(row)`. */
+    sortValue?: (row: T) => string | number | boolean | Date | null | undefined;
+}
+interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    getRowKey: (row: T) => string;
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+    /** When `inline`, keeps the table chrome and shows an in-body empty message. */
+    emptyMode?: "replace" | "inline";
+    className?: string;
+    sort?: DataTableSort | null;
+    defaultSort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    showRowCount?: boolean;
+    rowCountLabel?: (count: number) => ReactNode;
+    footer?: ReactNode;
+    onRowClick?: (row: T) => void;
+    stickyHeader?: boolean;
+    dense?: boolean;
+    caption?: string;
+}
+declare function DataTable<T>({ columns, rows, getRowKey, emptyTitle, emptyDescription, emptyMode, className, sort: sortProp, defaultSort, onSortChange, showRowCount, rowCountLabel, footer, onRowClick, stickyHeader, dense, caption, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ChartPanelProps {
+    title?: ReactNode;
+    /** Built-in SVG chart — alternative to custom `children`. */
+    artifact?: ChartArtifact;
+    children?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+/**
+ * Chrome for charts — pass `artifact` for the built-in renderer or any chart in `children`.
+ */
+declare const ChartPanel: FC<ChartPanelProps>;
+
+/**
+ * Lightweight SVG chart for the four basic chart types. We deliberately don't
+ * pull in `recharts` or similar — most artifact charts are small and these
+ * render fine at the cost of a few hundred lines of SVG. Apps that need
+ * production-grade charting can register a custom renderer that wraps their
+ * preferred lib.
+ */
+declare const ChartArtifactView: FC<{
+    artifact: ChartArtifact;
+}>;
+
+export { type StatusBadgeTone as $, AppChatPanel as A, type BreadcrumbItem as B, ChartArtifactView as C, DataTable as D, EmptyState as E, Field as F, type FieldSelectProps as G, FieldSwitch as H, type FieldSwitchProps as I, FieldTextarea as J, type FieldTextareaProps as K, FilterBar as L, type FilterBarProps as M, FormSection as N, type FormSectionProps as O, Page as P, PageHeader as Q, type PageHeaderProps as R, type PageProps as S, SearchInput as T, type SearchInputProps as U, Section as V, type SectionProps as W, StatTile as X, type StatTileProps as Y, StatusBadge as Z, type StatusBadgeProps as _, type AppChatPanelProps as a, SubNav as a0, type SubNavItem as a1, type SubNavProps as a2, SurfaceCard as a3, type SurfaceCardProps as a4, useAppCopilotContext as a5, useAppShellChat as a6, AppConfirmDialog as b, type AppConfirmDialogProps as c, type AppCopilotContextValue as d, AppCopilotProvider as e, type AppCopilotProviderProps as f, AppShell as g, type AppShellChatControls as h, AppShellChatTrigger as i, type AppShellChatTriggerProps as j, type AppShellProps as k, AppShellTopbar as l, type AppShellTopbarProps as m, Breadcrumbs as n, type BreadcrumbsProps as o, ChartPanel as p, type ChartPanelProps as q, type DataTableColumn as r, type DataTableProps as s, type DataTableSort as t, type DataTableSortDirection as u, type EmptyStateProps as v, FieldInput as w, type FieldInputProps as x, type FieldProps as y, FieldSelect as z };