@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/src/ds/components/Activity/activity.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+export type ActivityStatus = 'initializing' | 'working' | 'ready';
+export declare function ActivityBelt({ status, label, className, ...props }: ComponentProps<'span'> & {
+    status: ActivityStatus;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ActivityWick({ status, label, className, ...props }: ComponentProps<'span'> & {
+    status: ActivityStatus;
+    label?: string;
+}): import("react").JSX.Element;

package/dist/src/ds/components/Activity/activity.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ActivityWick } from './activity';
+declare const meta: {
+    title: string;
+    component: typeof ActivityWick;
+    args: {
+        status: "working";
+    };
+    argTypes: {
+        status: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Wick: Story;
+export declare const Belts: Story;
+export declare const StateTransitions: Story;

package/dist/src/ds/components/Activity/index.d.ts

@@ -0,0 +1 @@
+export * from './activity';

package/dist/src/ds/components/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import { Button as BaseButton } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 import { default as React } from 'react';
 export declare const buttonVariants: (props?: ({
@@ -10,19 +11,23 @@ export type ButtonSize = NonNullable<ButtonVariantsProps['size']>;
 export type IconButtonSize = Extract<ButtonSize, `icon-${string}`>;
 export type TextButtonSize = Exclude<ButtonSize, IconButtonSize>;
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, ButtonVariantsProps {
-    as?: React.ElementType;
+    render?: BaseButton.Props['render'];
     className?: string;
-    href?: string;
-    to?: string;
-    prefetch?: boolean | null;
     children: React.ReactNode;
     /** Leading icon, always rendered on the left of the label inside `<Icon>`. Ignored in icon-mode sizes. */
     icon?: React.ReactNode;
     tooltip?: React.ReactNode;
+    /** @deprecated Pass the element through `render` instead: `render={<Link href="/x" />}`. */
+    as?: React.ElementType;
+    /** @deprecated Set it on the element passed to `render`. */
+    href?: string;
+    /** @deprecated Set it on the element passed to `render`. */
+    to?: string;
+    /** @deprecated Set it on the element passed to `render`. */
     target?: string;
-    type?: 'button' | 'submit' | 'reset';
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** @deprecated Set it on the element passed to `render`. */
+    prefetch?: boolean | null;
 }
 export declare function isIconButtonSize(size: ButtonSize | null | undefined): size is IconButtonSize;
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
 export {};

package/dist/src/ds/components/Button/CreateButton.d.ts

@@ -12,4 +12,4 @@ export interface CreateButtonProps extends Omit<ButtonProps, 'icon' | 'tooltip'>
  * its click. Mount at most one per view — several instances would compete for
  * the same shortcut.
  */
-export declare const CreateButton: React.ForwardRefExoticComponent<CreateButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const CreateButton: React.ForwardRefExoticComponent<CreateButtonProps & React.RefAttributes<HTMLElement>>;

package/dist/src/ds/components/Collapsible/collapsible.d.ts

@@ -9,6 +9,8 @@ type CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, 'classNa
 declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 type CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, 'className'> & {
     className?: string;
+    /** Stretch the content to the space its parent leaves, so a scroll area inside can fill it. */
+    fill?: boolean;
 };
 declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/src/ds/components/Collapsible/collapsible.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const DefaultOpen: Story;
 export declare const SettingsSection: Story;
 export declare const MultipleCollapsibles: Story;
+export declare const FillsConstrainedPanel: Story;

package/dist/src/ds/components/Combobox/combobox-styles.d.ts

@@ -1,9 +1,9 @@
 import { ButtonSize } from '../Button/Button';
 import { ControlTriggerVisualVariant } from '../../primitives/control-size';
 /**
- * A combobox is a form field, so it reuses the same button looks as everywhere,
- * mirroring `SelectTrigger`: `default` (the Button's filled default surface —
- * the default here too), `outline` (bordered, transparent) and `ghost`
+ * A combobox is a form field, so it reuses the Button's size/shape recipe,
+ * mirroring `SelectTrigger`: `default` (the Input's overlay surface — the
+ * default here too), `outline` (bordered, transparent) and `ghost`
  * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`
  * look is intentionally NOT offered (a field is not a call-to-action).
  */
@@ -33,10 +33,10 @@ export declare const comboboxItemClass: (props?: ({
 export declare const comboboxStyles: {
     /** Root wrapper */
     readonly root: "flex flex-col gap-1.5";
-    /** Chevron icon in trigger — inherits the variant's text color via currentColor. */
-    readonly chevron: "ml-2 h-4 w-4 shrink-0 opacity-60";
+    /** Chevron icon in trigger — decorative icon token shared by every field. */
+    readonly chevron: "ml-2 h-4 w-4 shrink-0 text-muted-foreground";
     /** Placeholder text color */
-    readonly placeholder: "text-neutral3";
+    readonly placeholder: "text-muted-foreground";
     /**
      * Popup container — shared menu popup, but the search row sits edge-to-edge
      * above the list, so padding/scrolling move to the list itself.
@@ -53,7 +53,9 @@ export declare const comboboxStyles: {
     /** Empty state */
     readonly empty: string;
     /** Options list */
-    readonly list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1 empty:p-0";
+    readonly list: "p-1 empty:p-0";
+    /** Scroll container around the List; hosts the fluid highlight so it scrolls with the rows. */
+    readonly listScroller: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden";
     /** Option item base — rounded-lg sits concentrically inside rounded-xl + p-1. */
     readonly item: string;
     /** Multi-select item — same item rhythm with a right-aligned selected check. */
@@ -69,7 +71,7 @@ export declare const comboboxStyles: {
     /** Option label */
     readonly optionLabel: "truncate";
     /** Option description */
-    readonly optionDescription: "text-ui-sm text-neutral3 truncate";
+    readonly optionDescription: "text-ui-sm text-muted-foreground truncate";
     /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
     readonly optionEnd: "ml-auto flex items-center shrink-0";
     /** Error message */

package/dist/src/ds/components/Composer/composer.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 export type ComposerProps = ComponentPropsWithoutRef<'form'>;
 export interface ComposerInputProps extends ComponentPropsWithoutRef<'textarea'> {
-    /** Maximum height of the scrolling input viewport. */
+    variant?: 'inline' | 'textarea';
     maxHeight?: string;
 }
 export declare const Composer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
@@ -9,18 +9,19 @@ export interface ComposerBoxProps extends ComponentPropsWithoutRef<'div'> {
     sendingPulseKey?: number;
 }
 export declare const ComposerBox: import('react').ForwardRefExoticComponent<ComposerBoxProps & import('react').RefAttributes<HTMLDivElement>>;
+export type ComposerTone = 'default' | 'green' | 'purple' | 'orange';
 export interface ComposerRingProps extends ComponentPropsWithoutRef<'div'> {
     busy?: boolean;
+    tone?: ComposerTone;
 }
-/**
- * Edge for the composer box it wraps: a conic arc lit under the cursor on hover,
- * spinning on its own while the agent runs, never both at once. Wraps rather
- * than decorates because the box clips its overflow and would cut the arc off.
- */
 export declare const ComposerRing: {
-    ({ busy, className, ...props }: ComposerRingProps): import("react").JSX.Element;
+    ({ busy, tone, className, style, onPointerEnter, onPointerMove, ...props }: ComposerRingProps): import("react").JSX.Element;
     displayName: string;
 };
 export declare const ComposerAttachments: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ComposerInput: import('react').ForwardRefExoticComponent<ComposerInputProps & import('react').RefAttributes<HTMLTextAreaElement>>;
 export declare const ComposerActions: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface ComposerToneLabelProps extends ComponentPropsWithoutRef<'span'> {
+    tone: ComposerTone;
+}
+export declare function ComposerToneLabel({ tone, className, ...props }: ComposerToneLabelProps): import("react").JSX.Element;

package/dist/src/ds/components/Composer/composer.stories.d.ts

@@ -6,6 +6,12 @@ type Story = StoryObj<typeof Composer>;
 export declare const Empty: Story;
 export declare const WithAttachmentsAndActions: Story;
 export declare const DisabledAndRunning: Story;
-/** Hover the box and move around: the lit arc follows the cursor. */
 export declare const RingIdle: Story;
 export declare const RingBusy: Story;
+export declare const ModeStates: Story;
+export declare const ModeStatesLight: Story;
+export declare const WithModeControls: Story;
+export declare const WithModelAndVoiceControls: Story;
+export declare const TallDraft: Story;
+export declare const Disabled: Story;
+export declare const CustomMode: Story;

package/dist/src/ds/components/Composer/index.d.ts

@@ -1,5 +1,5 @@
-export { Composer, ComposerActions, ComposerAttachments, ComposerBox, ComposerInput, ComposerRing } from './composer';
-export type { ComposerBoxProps, ComposerInputProps, ComposerProps, ComposerRingProps } from './composer';
+export { Composer, ComposerActions, ComposerAttachments, ComposerBox, ComposerInput, ComposerRing, ComposerToneLabel, } from './composer';
+export type { ComposerBoxProps, ComposerInputProps, ComposerProps, ComposerRingProps, ComposerTone, ComposerToneLabelProps, } from './composer';
 export { ComposerSuggestions } from './commands/composer-suggestions';
 export type { ComposerSuggestionItem, ComposerSuggestionsProps } from './commands/composer-suggestions';
 export { useComposerCommands } from './commands/use-composer-commands';

package/dist/src/ds/components/Composer/use-composer-pointer.d.ts

@@ -0,0 +1,9 @@
+import { PointerEvent } from 'react';
+export declare function useComposerPointer(enabled: boolean): {
+    trackPointer: (event: PointerEvent<HTMLDivElement>) => void;
+    pointerStyle: {
+        '--composer-spotlight-x': string | undefined;
+        '--composer-spotlight-y': string | undefined;
+        '--composer-ring-angle': string | undefined;
+    };
+};

package/dist/src/ds/components/DataCodeSection/data-code-section.d.ts

@@ -13,5 +13,7 @@ export interface DataCodeSectionProps {
     className?: string;
     /** Highlight lines that differ from another document. */
     diff?: DataCodeSectionDiff;
+    /** Extra controls rendered in the header, before the built-in copy/expand buttons. */
+    actions?: React.ReactNode;
 }
-export declare function DataCodeSection({ codeStr, title, dialogTitle, icon, simplified, className, diff, }: DataCodeSectionProps): import("react").JSX.Element | null;
+export declare function DataCodeSection({ codeStr, title, dialogTitle, icon, simplified, className, diff, actions, }: DataCodeSectionProps): import("react").JSX.Element | null;

package/dist/src/ds/components/DataDetailsPanel/data-details-panel-code-section.d.ts

@@ -4,5 +4,7 @@ export interface DataDetailsPanelCodeSectionProps {
     codeStr?: string;
     simplified?: boolean;
     className?: string;
+    /** Extra controls rendered in the header, before the built-in copy button. */
+    actions?: React.ReactNode;
 }
-export declare function DataDetailsPanelCodeSection({ codeStr, title, icon, simplified, className, }: DataDetailsPanelCodeSectionProps): import("react").JSX.Element | null;
+export declare function DataDetailsPanelCodeSection({ codeStr, title, icon, simplified, className, actions, }: DataDetailsPanelCodeSectionProps): import("react").JSX.Element | null;

package/dist/src/ds/components/DataPanel/data-panel-close-button.d.ts

@@ -1,6 +1,15 @@
+import { ButtonProps } from '../Button';
 export interface DataPanelCloseButtonProps {
     onClick: () => void;
     tooltip?: string;
+    /** Accessible name; override it when the arrow leads somewhere other than "closed" (e.g. back to a parent view). */
+    label?: string;
+    /**
+     * `arrow` (default) is the leading "leave this panel" control, rendered first in the header.
+     * `x` dismisses a nested column in place and belongs in `HeaderActions`, on the right.
+     */
+    icon?: 'arrow' | 'x';
     className?: string;
+    variant?: ButtonProps['variant'];
 }
-export declare function DataPanelCloseButton({ onClick, tooltip, className }: DataPanelCloseButtonProps): import("react").JSX.Element;
+export declare function DataPanelCloseButton({ onClick, tooltip, label, icon, className, variant, }: DataPanelCloseButtonProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-content.d.ts

@@ -2,5 +2,7 @@ import { ReactNode, Ref } from 'react';
 export interface DataPanelContentProps {
     children: ReactNode;
     ref?: Ref<HTMLDivElement>;
+    /** Layout overrides (e.g. padding) for the scroll container. */
+    className?: string;
 }
-export declare function DataPanelContent({ children, ref }: DataPanelContentProps): import("react").JSX.Element;
+export declare function DataPanelContent({ children, ref, className }: DataPanelContentProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-copy-id.d.ts

@@ -0,0 +1,9 @@
+export interface DataPanelCopyIdProps {
+    id: string;
+    /** Characters kept before the ellipsis. Defaults to 12. */
+    maxLength?: number;
+}
+/**
+ * Truncated identifier rendered inline in a `DataPanel.Heading`; clicking copies the full value.
+ */
+export declare function DataPanelCopyId({ id, maxLength }: DataPanelCopyIdProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-header-actions.d.ts

@@ -0,0 +1,8 @@
+export interface DataPanelHeaderActionsProps {
+    children: React.ReactNode;
+}
+/**
+ * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`
+ * (these are `size="sm"` controls, like the page header actions) and wraps when the panel is too narrow.
+ */
+export declare function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-header-content.d.ts

@@ -0,0 +1,8 @@
+export interface DataPanelHeaderContentProps {
+    children: React.ReactNode;
+}
+/**
+ * Left block of a `DataPanel.Header`: heading followed inline by optional `Metadata`, truncated when too long.
+ * A vertical separator is rendered between the heading and the metadata when both are present.
+ */
+export declare function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-metadata.d.ts

@@ -0,0 +1,18 @@
+export interface DataPanelMetadataProps {
+    children: React.ReactNode;
+}
+/** Row of `Meta` pills next to a `DataPanel.Heading`. Never wraps; overflowing pills are clipped. */
+export declare function DataPanelMetadata({ children }: DataPanelMetadataProps): import("react").JSX.Element;
+export interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {
+    /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */
+    as?: React.ElementType;
+    href?: string;
+    to?: string;
+    /** Prefix icon (bare SVG). */
+    icon?: React.ReactNode;
+    /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */
+    tooltip?: React.ReactNode;
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-next-prev-nav.d.ts

@@ -1,7 +1,10 @@
+import { ButtonProps } from '../Button';
 export interface DataPanelNextPrevNavProps {
     onPrevious?: () => void;
     onNext?: () => void;
     previousLabel?: string;
     nextLabel?: string;
+    variant?: ButtonProps['variant'];
 }
-export declare function DataPanelNextPrevNav({ onPrevious, onNext, previousLabel, nextLabel, }: DataPanelNextPrevNavProps): import("react").JSX.Element;
+/** Two independent previous/next buttons, laid out by the parent `HeaderActions` gap. */
+export declare function DataPanelNextPrevNav({ onPrevious, onNext, previousLabel, nextLabel, variant, }: DataPanelNextPrevNavProps): import("react").JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel-root.d.ts

@@ -1,6 +1,28 @@
+import * as React from 'react';
 export interface DataPanelProps {
-    collapsed?: boolean;
+    /** Whether the panel is shown. The panel is always a modal Drawer dialog. */
+    open: boolean;
+    /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */
+    onClose?: () => void;
+    /** Accessible dialog name (screen-reader only; the visible title comes from `DataPanel.Heading`). */
+    title: string;
+    /** Accessible dialog description (screen-reader only). */
+    description?: string;
+    /**
+     * Elevation level when several sibling panels are open at once (not nested in
+     * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is
+     * narrower so the one beneath peeks out on the left. Siblings stack in mount
+     * order: render the deeper panel after the shallower one.
+     */
+    depth?: 1 | 2 | 3;
+    /**
+     * Drawer width. `md` (default) is a narrow detail panel whose width shrinks
+     * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the
+     * trace panel); each `depth` level trims them by a small fixed amount so a
+     * same-size parent still peeks out beneath.
+     */
+    size?: 'md' | 'half' | 'wide' | 'full';
     children: React.ReactNode;
     className?: string;
 }
-export declare function DataPanelRoot({ collapsed, children, className }: DataPanelProps): import("react").JSX.Element;
+export declare function DataPanelRoot({ open, onClose, title, description, depth, size, children, className, }: DataPanelProps): React.JSX.Element;

package/dist/src/ds/components/DataPanel/data-panel.d.ts

@@ -1,8 +1,12 @@
 import { DataPanelCloseButton } from './data-panel-close-button';
 import { DataPanelContent } from './data-panel-content';
+import { DataPanelCopyId } from './data-panel-copy-id';
 import { DataPanelHeader } from './data-panel-header';
+import { DataPanelHeaderActions } from './data-panel-header-actions';
+import { DataPanelHeaderContent } from './data-panel-header-content';
 import { DataPanelHeading } from './data-panel-heading';
 import { DataPanelLoadingData } from './data-panel-loading-data';
+import { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';
 import { DataPanelNextPrevNav } from './data-panel-next-prev-nav';
 import { DataPanelNoData } from './data-panel-no-data';
 import { DataPanelRoot } from './data-panel-root';
@@ -10,8 +14,13 @@ import { DataPanelSectionHeading } from './data-panel-section-heading';
 import { DataCodeSection } from '../DataCodeSection';
 export declare const DataPanel: typeof DataPanelRoot & {
     Header: typeof DataPanelHeader;
+    HeaderContent: typeof DataPanelHeaderContent;
+    HeaderActions: typeof DataPanelHeaderActions;
     Heading: typeof DataPanelHeading;
+    Metadata: typeof DataPanelMetadata;
+    Meta: typeof DataPanelMeta;
     CloseButton: typeof DataPanelCloseButton;
+    CopyId: typeof DataPanelCopyId;
     NextPrevNav: typeof DataPanelNextPrevNav;
     LoadingData: typeof DataPanelLoadingData;
     NoData: typeof DataPanelNoData;

package/dist/src/ds/components/DataPanel/data-panel.stories.d.ts

@@ -6,7 +6,10 @@ export default meta;
 type Story = StoryObj<DataPanelProps>;
 export declare const Default: Story;
 export declare const WithNavigation: Story;
+export declare const WithMetadata: Story;
 export declare const NoData: Story;
 export declare const Loading: Story;
-export declare const Collapsed: Story;
+export declare const Wide: Story;
 export declare const DisabledNav: Story;
+export declare const Stacked: Story;
+export declare const SiblingsWithDepth: Story;

package/dist/src/ds/components/DataPanel/index.d.ts

@@ -1,10 +1,14 @@
 export { DataPanel } from './data-panel';
 export type { DataPanelProps } from './data-panel-root';
 export type { DataPanelHeaderProps } from './data-panel-header';
+export type { DataPanelHeaderContentProps } from './data-panel-header-content';
+export type { DataPanelHeaderActionsProps } from './data-panel-header-actions';
 export type { DataPanelHeadingProps } from './data-panel-heading';
+export type { DataPanelMetadataProps, DataPanelMetaProps } from './data-panel-metadata';
 export type { DataPanelCloseButtonProps } from './data-panel-close-button';
 export type { DataPanelNextPrevNavProps } from './data-panel-next-prev-nav';
 export type { DataPanelLoadingDataProps } from './data-panel-loading-data';
 export type { DataPanelNoDataProps } from './data-panel-no-data';
 export type { DataPanelContentProps } from './data-panel-content';
 export type { DataPanelSectionHeadingProps } from './data-panel-section-heading';
+export type { DataPanelCopyIdProps } from './data-panel-copy-id';

package/dist/src/ds/components/DateTimeRangePicker/date-time-range-picker.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { ButtonProps } from '../Button/Button';
 export type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
 export interface DateTimeRangePickerProps {
@@ -6,10 +7,23 @@ export interface DateTimeRangePickerProps {
     dateFrom?: Date;
     dateTo?: Date;
     onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;
+    /**
+     * Called once with both ends when a custom range is applied. When provided it replaces
+     * the two `onDateChange` calls for that step, so consumers can write the range atomically.
+     */
+    onDateRangeChange?: (from: Date | undefined, to: Date | undefined) => void;
     disabled?: boolean;
     /** Subset of presets to show. If omitted, all presets are shown. */
     presets?: readonly DateRangePreset[];
     /** Size passed through to the trigger Button. Defaults to 'md'. */
     size?: ButtonProps['size'];
+    /**
+     * Replace the default Button trigger. Receives the current label (preset name or
+     * custom range) and must return an element the menu/popover can attach to.
+     */
+    renderTrigger?: (props: {
+        label: string;
+        disabled?: boolean;
+    }) => ReactElement;
 }
-export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, disabled, presets, size, }: DateTimeRangePickerProps): import("react").JSX.Element;
+export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, presets, size, renderTrigger, }: DateTimeRangePickerProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/default-operators.d.ts

@@ -0,0 +1,3 @@
+import { FilterBarOperator } from './types';
+/** Opt-in starter set. Pure data: the component attaches no semantics to ids. */
+export declare const DEFAULT_FILTER_OPERATORS: FilterBarOperator[];

package/dist/src/ds/components/FilterBar/filter-bar-chip.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { FilterBarField, FilterBarItem, FilterBarValue } from './types';
+export declare const segmentClass: string;
+export declare const editableSegmentClass: string;
+/** Field label with its optional leading icon — used by chips, the draft chip and field option lists. */
+export declare function FilterBarFieldLabel({ field, label }: {
+    field: FilterBarField | undefined;
+    label?: string;
+}): import("react").JSX.Element;
+/** Inline style carrying a field's accent onto its field segment (text + icon). */
+export declare const fieldSegmentAccentStyle: (field: FilterBarField | undefined) => {
+    color: string;
+} | undefined;
+export declare const formatValue: (value: FilterBarValue, field: FilterBarField | undefined) => string;
+export type FilterBarChipProps = {
+    item: FilterBarItem;
+    /** Locked chip: plain labels, no editors, no remove button. */
+    readOnly?: boolean;
+    /** `false` keeps the chip editable but drops the remove button and ignores Backspace/Delete. */
+    removable?: boolean;
+    className?: string;
+    /** Custom segment composition; defaults to Field · Operator · Value · Remove. */
+    children?: ReactNode;
+};
+export declare function FilterBarChip({ item, readOnly, removable, className, children }: FilterBarChipProps): import("react").JSX.Element;
+export declare namespace FilterBarChip {
+    var Field: typeof FilterBarChipField;
+    var Operator: typeof FilterBarChipOperator;
+    var Value: typeof FilterBarChipValue;
+    var Remove: typeof FilterBarChipRemove;
+}
+export declare function FilterBarChipField(): import("react").JSX.Element;
+export declare function FilterBarChipOperator(): import("react").JSX.Element | null;
+export declare function FilterBarChipValue(): import("react").JSX.Element | null;
+export declare function FilterBarChipRemove(): import("react").JSX.Element | null;

package/dist/src/ds/components/FilterBar/filter-bar-clear.d.ts

@@ -0,0 +1,4 @@
+/** Removes every removable filter. Rendered by FilterBar at its trailing edge; hidden while nothing can be removed. */
+export declare function FilterBarClear({ label }: {
+    label: string;
+}): import("react").JSX.Element | null;

package/dist/src/ds/components/FilterBar/filter-bar-context.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSegment } from './types';
+export type FilterBarContextValue = {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
+    items: FilterBarItem[];
+    addItem: (item: Omit<FilterBarItem, 'id'>) => void;
+    updateItem: (id: string, patch: Partial<Omit<FilterBarItem, 'id'>>) => void;
+    removeItem: (id: string) => void;
+    /** Removes every removable item (chips rendered with `removable={false}` stay). */
+    clear: () => void;
+    /** Whether at least one item can be removed, i.e. whether Clear has anything to do. */
+    hasRemovableItems: boolean;
+    /** Called by chips so `clear` and the Clear button know which items are pinned. */
+    registerNonRemovable: (itemId: string, nonRemovable: boolean) => void;
+    getField: (fieldId: string) => FilterBarField | undefined;
+    getOperator: (operatorId: string) => FilterBarOperator | undefined;
+    /** Operators allowed for a field (`field.operators` or every root operator). */
+    getFieldOperators: (field: FilterBarField) => FilterBarOperator[];
+    registerSegment: (itemId: string, segment: FilterBarSegment, el: HTMLElement | null) => void;
+    registerInput: (el: HTMLInputElement | null) => void;
+    /**
+     * Focus a segment of the nearest editable chip starting at `fromIndex` and
+     * walking in `direction` (read-only chips register no segments and are skipped).
+     * Returns false if nothing was focused.
+     */
+    focusChip: (fromIndex: number, direction: -1 | 1, segment: FilterBarSegment) => boolean;
+    focusInput: () => void;
+    /** Called by chips to move focus after a removal. */
+    focusAfterRemove: (removedIndex: number) => void;
+    announce: (message: string) => void;
+    announcement: string;
+    ariaLabel: string;
+};
+export declare function useFilterBarContext(): FilterBarContextValue;
+export declare function createFilterId(): string;
+export declare function emptyValueFor(operator: FilterBarOperator | undefined): string | string[];
+export type FilterBarProviderProps = {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
+    value: FilterBarItem[];
+    onValueChange: (items: FilterBarItem[]) => void;
+    ariaLabel: string;
+    children: ReactNode;
+};
+export declare function FilterBarProvider({ fields, operators, value, onValueChange, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar-draft-chip.d.ts

@@ -0,0 +1,11 @@
+import { FilterBarField, FilterBarOperator } from './types';
+export type FilterBarDraftChipProps = {
+    field: FilterBarField | undefined;
+    operator: FilterBarOperator | undefined;
+};
+/**
+ * The in-progress filter, accumulated inline next to the input as its segments
+ * get picked (`Status` → `Status · is`). Purely presentational: the input owns
+ * the draft and handles stepping back (Escape / Backspace).
+ */
+export declare function FilterBarDraftChip({ field, operator }: FilterBarDraftChipProps): import("react").JSX.Element | null;

package/dist/src/ds/components/FilterBar/filter-bar-input.d.ts

@@ -0,0 +1,10 @@
+export type FilterBarInputProps = {
+    placeholder?: string;
+    className?: string;
+    'aria-label'?: string;
+};
+/**
+ * Typeahead entry point: type to pick a field, then an operator, then a value.
+ * Focus never leaves the input; the popup is driven with the arrow keys.
+ */
+export declare function FilterBarInput({ placeholder, className, 'aria-label': ariaLabel, }: FilterBarInputProps): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar-option-list.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export type FilterBarOptionListProps<T> = {
+    getKey: (option: T) => string;
+    renderOption: (option: T) => ReactNode;
+    /** Explicit check mark, used where Base UI's selection state is not the source of truth (multi-value step). */
+    isSelected?: (option: T) => boolean;
+    isLoading?: boolean;
+    error?: unknown;
+    emptyText?: string;
+    'aria-label': string;
+    'aria-multiselectable'?: boolean;
+};
+/**
+ * List/status/empty rows for a `ComboboxPrimitive.Root`, laid out like the DS
+ * `Combobox` popup (fluid hover highlight, scroller around the list). Items come
+ * from the root's `items`; highlight and keyboard navigation are owned by Base UI.
+ */
+export declare function FilterBarOptionList<T>({ getKey, renderOption, isSelected, isLoading, error, emptyText, 'aria-label': ariaLabel, 'aria-multiselectable': multiselectable, }: FilterBarOptionListProps<T>): import("react").JSX.Element;

package/dist/src/ds/components/FilterBar/filter-bar.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { FilterBarChip } from './filter-bar-chip';
+import { FilterBarInput } from './filter-bar-input';
+import { FilterBarField, FilterBarItem, FilterBarOperator } from './types';
+export type FilterBarProps = {
+    fields: FilterBarField[];
+    operators: FilterBarOperator[];
+    value: FilterBarItem[];
+    onValueChange: (items: FilterBarItem[]) => void;
+    'aria-label'?: string;
+    /** Accessible label of the trailing "remove every filter" button. */
+    clearLabel?: string;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Braintrust-style filter bar: `field → operator → value` filters built from a
+ * single typeahead input, rendered as inline editable chips. Domain-agnostic —
+ * fields, operators and values are plain strings supplied by the consumer.
+ *
+ * @example
+ * <FilterBar value={items} onValueChange={setItems} fields={fields} operators={DEFAULT_FILTER_OPERATORS}>
+ *   <FilterBar.Chips />
+ *   <FilterBar.Input />
+ * </FilterBar>
+ */
+export declare function FilterBar({ fields, operators, value, onValueChange, 'aria-label': ariaLabel, clearLabel, className, children, }: FilterBarProps): import("react").JSX.Element;
+export declare namespace FilterBar {
+    var Chips: typeof FilterBarChips;
+    var Chip: typeof FilterBarChip;
+    var Input: typeof FilterBarInput;
+}
+/** Default layout: one editable chip per item, in order. */
+export declare function FilterBarChips(): import("react").JSX.Element;