@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

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

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 import { FilterBarField, FilterBarItem, FilterBarValue } from './types';
+import { ControlSize } from '../../primitives/control-size';
 export declare const segmentClass: string;
+export declare const FILTER_BAR_CONTROL_SIZE: ControlSize;
+export declare const chipClass: 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 }: {
@@ -18,11 +21,17 @@ export type FilterBarChipProps = {
     readOnly?: boolean;
     /** `false` keeps the chip editable but drops the remove button and ignores Backspace/Delete. */
     removable?: boolean;
+    /**
+     * Render the filter being built in the input (see `FilterBarContextValue.draft`): only
+     * the picked segments show, as inert labels. Keyed by the draft id, the same element
+     * carries on as the editable chip once the value is committed.
+     */
+    draft?: 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 function FilterBarChip({ item, readOnly, removable, draft, className, children, }: FilterBarChipProps): import("react").JSX.Element;
 export declare namespace FilterBarChip {
     var Field: typeof FilterBarChipField;
     var Operator: typeof FilterBarChipOperator;

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

@@ -1,12 +1,24 @@
 import { ReactNode } from 'react';
-import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSegment } from './types';
+import { FilterBarCommit, FilterBarDraft, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarSegment, FilterBarValue } from './types';
 export type FilterBarContextValue = {
     fields: FilterBarField[];
     operators: FilterBarOperator[];
     items: FilterBarItem[];
-    addItem: (item: Omit<FilterBarItem, 'id'>) => void;
+    /** Filter under construction in the input, once a field is picked; `null` otherwise. */
+    draft: FilterBarDraft | null;
+    /** Progress or reset the draft. Its id is assigned on first field pick and kept afterwards. */
+    setDraft: (next: Omit<FilterBarDraft, 'id' | 'from'> | null) => void;
+    /** Append an item for the draft, reusing its id so the draft chip becomes the item's chip. */
+    commitDraft: (next: Required<Omit<FilterBarDraft, 'id' | 'from'>>, value: FilterBarValue) => void;
+    /** The draft that just became an item, until its chip has glinted or the bar moves on. */
+    lastCommit: FilterBarCommit | null;
+    settleCommit: () => void;
     updateItem: (id: string, patch: Partial<Omit<FilterBarItem, 'id'>>) => void;
     removeItem: (id: string) => void;
+    /** Ids of removed items still rendered while their chip plays its exit animation. */
+    leaving: ReadonlySet<string>;
+    /** Called by a leaving chip once its exit animation has finished (or when nothing animates). */
+    settleRemove: (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. */
@@ -40,7 +52,8 @@ export type FilterBarProviderProps = {
     operators: FilterBarOperator[];
     value: FilterBarItem[];
     onValueChange: (items: FilterBarItem[]) => void;
+    createItemId?: (fieldId: string) => string;
     ariaLabel: string;
     children: ReactNode;
 };
-export declare function FilterBarProvider({ fields, operators, value, onValueChange, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;
+export declare function FilterBarProvider({ fields, operators, value, onValueChange, createItemId, ariaLabel, children, }: FilterBarProviderProps): import("react").JSX.Element;

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

@@ -7,6 +7,12 @@ export type FilterBarProps = {
     operators: FilterBarOperator[];
     value: FilterBarItem[];
     onValueChange: (items: FilterBarItem[]) => void;
+    /**
+     * Id given to a newly added item. Defaults to a random id. Consumers that rebuild `value` from
+     * their own store (URL, query params…) should return the id they will rebuild it with, so the
+     * draft chip and the committed chip are the same element.
+     */
+    createItemId?: (fieldId: string) => string;
     'aria-label'?: string;
     /** Accessible label of the trailing "remove every filter" button. */
     clearLabel?: string;
@@ -24,11 +30,21 @@ export type FilterBarProps = {
  *   <FilterBar.Input />
  * </FilterBar>
  */
-export declare function FilterBar({ fields, operators, value, onValueChange, 'aria-label': ariaLabel, clearLabel, className, children, }: FilterBarProps): import("react").JSX.Element;
+export declare function FilterBar({ fields, operators, value, onValueChange, createItemId, '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;
+/**
+ * Default layout: one editable chip per item, in order, then the chip of the filter
+ * being built in the input (which becomes the last item's chip once committed).
+ */
+export declare function FilterBarChips({ renderChip }: FilterBarChipsProps): import("react").JSX.Element;
+export type FilterBarChipsProps = {
+    /**
+     * Chip for an item; return `null` to render none (e.g. an item only held in the
+     * value for scoping). Defaults to a plain editable `FilterBar.Chip`.
+     */
+    renderChip?: (item: FilterBarItem) => ReactNode;
+};

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

@@ -1,8 +1,8 @@
 export { FilterBar, FilterBarChips } from './filter-bar';
-export type { FilterBarProps } from './filter-bar';
+export type { FilterBarChipsProps, FilterBarProps } from './filter-bar';
 export { FilterBarChip, FilterBarChipField, FilterBarChipOperator, FilterBarChipValue, FilterBarChipRemove, } from './filter-bar-chip';
 export type { FilterBarChipProps } from './filter-bar-chip';
 export { FilterBarInput } from './filter-bar-input';
 export type { FilterBarInputProps } from './filter-bar-input';
 export { DEFAULT_FILTER_OPERATORS } from './default-operators';
-export type { FilterBarArity, FilterBarField, FilterBarFieldType, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar, FilterBarSegment, FilterBarSuggestionsContext, FilterBarSuggestionsResolver, FilterBarValue, } from './types';
+export type { FilterBarArity, FilterBarDraft, FilterBarField, FilterBarFieldType, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar, FilterBarSegment, FilterBarSuggestionsContext, FilterBarSuggestionsResolver, FilterBarValue, } from './types';

package/dist/src/ds/components/FilterBar/types.d.ts

@@ -56,4 +56,26 @@ export type FilterBarItem = {
     operatorId: string;
     value: FilterBarValue;
 };
+/**
+ * The filter being built in the typeahead input. Its `id` is kept when it becomes an
+ * item, so the chip rendered for the draft is the very node the committed chip lands on.
+ */
+export type FilterBarDraft = {
+    id: string;
+    fieldId: string;
+    operatorId?: string;
+    /** What the draft chip showed before this step, so only the new segments animate in. */
+    from: DraftStage;
+};
+/** How far a draft had progressed: nothing yet, its field, or its field and operator. */
+export type DraftStage = 'none' | 'field' | 'operator';
+/**
+ * The draft that just became an item. The provider keeps showing it until the consumer's
+ * `value` includes it (URL-backed consumers update a tick later); the chip glints once, then settles.
+ */
+export type FilterBarCommit = {
+    item: FilterBarItem;
+    from: DraftStage;
+    glint: boolean;
+};
 export type FilterBarSegment = 'field' | 'operator' | 'value' | 'remove';

package/dist/src/ds/components/FormFieldBlocks/block/field-block-label.d.ts

@@ -1,8 +1,10 @@
 export type FieldBlockLabelProps = {
     children: React.ReactNode;
     name: string;
+    htmlFor?: string;
     required?: boolean;
+    disabled?: boolean;
     size?: 'default' | 'bigger';
     className?: string;
 };
-export declare function FieldBlockLabel({ children, name, required, size, className }: FieldBlockLabelProps): import("react").JSX.Element;
+export declare function FieldBlockLabel({ children, name, htmlFor, required, disabled, size, className, }: FieldBlockLabelProps): import("react").JSX.Element;

package/dist/src/ds/components/FormFieldBlocks/block/field-block-message.d.ts

@@ -0,0 +1,6 @@
+export type FieldBlockMessageProps = {
+    name: string;
+    helpText?: React.ReactNode;
+    errorMsg?: React.ReactNode;
+};
+export declare function FieldBlockMessage({ name, helpText, errorMsg }: FieldBlockMessageProps): import("react").JSX.Element;

package/dist/src/ds/components/FormFieldBlocks/block/field-block.d.ts

@@ -3,10 +3,12 @@ import { FieldBlockErrorMsg } from './field-block-error-msg';
 import { FieldBlockHelpText } from './field-block-help-text';
 import { FieldBlockLabel } from './field-block-label';
 import { FieldBlockLayout } from './field-block-layout';
+import { FieldBlockMessage } from './field-block-message';
 export declare const FieldBlock: {
     Layout: typeof FieldBlockLayout;
     Column: typeof FieldBlockColumn;
     Label: typeof FieldBlockLabel;
     HelpText: typeof FieldBlockHelpText;
     ErrorMsg: typeof FieldBlockErrorMsg;
+    Message: typeof FieldBlockMessage;
 };

package/dist/src/ds/components/FormFieldBlocks/fields/search-field-block.d.ts

@@ -17,10 +17,9 @@ export type SearchFieldBlockProps = {
     layout?: 'horizontal' | 'vertical';
     className?: string;
     size?: InputProps['size'];
-    variant?: InputProps['variant'];
     isMinimized?: boolean;
     onMinimizedChange?: (minimized: boolean) => void;
     /** Gives the caller access to the underlying input, e.g. to focus it from a keyboard shortcut. */
     inputRef?: RefObject<HTMLInputElement | null>;
 };
-export declare function SearchFieldBlock({ name, helpText, error, errorMsg, required, disabled, value, label, labelIsHidden, layout, placeholder, onChange, onReset, className, size, variant, isMinimized, onMinimizedChange, inputRef: externalInputRef, }: SearchFieldBlockProps): import("react").JSX.Element;
+export declare function SearchFieldBlock({ name, helpText, error, errorMsg, required, disabled, value, label, labelIsHidden, layout, placeholder, onChange, onReset, className, size, isMinimized, onMinimizedChange, inputRef: externalInputRef, }: SearchFieldBlockProps): import("react").JSX.Element;

package/dist/src/ds/components/FormFieldBlocks/fields/textarea-field-block.d.ts

@@ -0,0 +1,15 @@
+import { TextareaProps } from '../../Textarea';
+import { FieldBlockErrorMsgProps } from '../block/field-block-error-msg';
+import { FieldBlockHelpTextProps } from '../block/field-block-help-text';
+import { FieldBlockLabelProps } from '../block/field-block-label';
+import { FieldBlockLayoutProps } from '../block/field-block-layout';
+export type TextareaFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelColumnWidth'> & Omit<TextareaProps, 'name' | 'size'> & {
+    name: string;
+    labelIsHidden?: boolean;
+    label?: FieldBlockLabelProps['children'];
+    labelSize?: FieldBlockLabelProps['size'];
+    helpText?: FieldBlockHelpTextProps['children'];
+    errorMsg?: FieldBlockErrorMsgProps['children'];
+    size?: TextareaProps['size'];
+};
+export declare function TextareaFieldBlock({ name, label, labelIsHidden, labelColumnWidth, helpText, error, errorMsg, required, disabled, labelSize, layout, size, testId, className, 'aria-describedby': ariaDescribedBy, ...props }: TextareaFieldBlockProps): import("react").JSX.Element;

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

@@ -2,5 +2,6 @@ export { FieldBlock } from './block/field-block';
 export { fieldErrorId } from './block/field-error-id';
 export { FieldBlocksLayout } from './layout/field-blocks-layout';
 export { TextFieldBlock, type TextFieldBlockProps } from './fields/text-field-block';
+export { TextareaFieldBlock, type TextareaFieldBlockProps } from './fields/textarea-field-block';
 export { SearchFieldBlock, type SearchFieldBlockProps } from './fields/search-field-block';
 export { SelectFieldBlock, type SelectFieldBlockProps } from './fields/select-field-block';

package/dist/src/ds/components/HoverCard/hover-card.d.ts

@@ -1,36 +1,15 @@
 import { PreviewCard as PreviewCardPrimitive, PreviewCardPopupProps, PreviewCardPositionerProps } from '@base-ui/react/preview-card';
 import * as React from 'react';
-/**
- * HoverCard — a floating card that reveals extra content when its trigger is
- * hovered or focused. Built on Base UI's `PreviewCard`
- * (`@base-ui/react/preview-card`); the `HoverCard` name matches the Radix
- * component this replaced and the common term for the pattern.
- *
- * Compose it as `HoverCard` > (`HoverCardTrigger` + `HoverCardContent`).
- */
 declare const HoverCard: <Payload>(props: PreviewCardPrimitive.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
 export type HoverCardTriggerProps = Omit<PreviewCardPrimitive.Trigger.Props, 'className'> & {
     className?: string;
 };
-/**
- * The element that opens the card on hover/focus. Renders an `<a>` by default;
- * pass `render` to project the behavior onto an existing element.
- *
- * `delay` defaults to 250ms to preserve the previous Radix `openDelay`
- * behavior — Base UI's own default is 600ms.
- */
 declare const HoverCardTrigger: React.ForwardRefExoticComponent<Omit<HoverCardTriggerProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 type HoverCardContentPositionerProps = Omit<PreviewCardPositionerProps, keyof PreviewCardPopupProps>;
 export type HoverCardContentProps = Omit<PreviewCardPopupProps, 'className'> & HoverCardContentPositionerProps & {
     className?: string;
-    /** Optional portal container, forwarded to `PreviewCard.Portal`. */
     container?: HTMLElement | null;
-    /** Whether to render the small arrow pointing at the trigger. */
     showArrow?: boolean;
 };
-/**
- * The floating card body. Wraps Base UI's `Portal` / `Positioner` / `Popup`
- * (and an optional `Arrow`) so consumers only deal with a single element.
- */
 declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/src/ds/components/HoverCard/hover-card.stories.d.ts

@@ -4,5 +4,6 @@ declare const meta: Meta<typeof HoverCard>;
 export default meta;
 type Story = StoryObj<typeof HoverCard>;
 export declare const Default: Story;
+export declare const WithButtonTrigger: Story;
 export declare const WithRichContent: Story;
 export declare const BottomNoArrow: Story;

package/dist/src/ds/components/Input/input.d.ts

@@ -2,8 +2,8 @@ import { VariantProps } from 'class-variance-authority';
 import { DeprecatedFilledVariant } from '../../primitives/form-element';
 import * as React from 'react';
 declare const inputVariants: (props?: ({
-    variant?: "default" | "outline" | "unstyled" | null | undefined;
-    size?: "lg" | "sm" | "xs" | "md" | null | undefined;
+    variant?: "default" | "unstyled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & Omit<VariantProps<typeof inputVariants>, 'variant'> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
@@ -12,8 +12,8 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     error?: boolean;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<VariantProps<(props?: ({
-    variant?: "default" | "outline" | "unstyled" | null | undefined;
-    size?: "lg" | "sm" | "xs" | "md" | null | undefined;
+    variant?: "default" | "unstyled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "variant"> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
     variant?: VariantProps<typeof inputVariants>["variant"] | DeprecatedFilledVariant;

package/dist/src/ds/components/Input/input.stories.d.ts

@@ -6,7 +6,6 @@ type Story = StoryObj<typeof Input>;
 export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
-export declare const Outline: Story;
 export declare const Disabled: Story;
 export declare const WithValue: Story;
 export declare const Email: Story;

package/dist/src/ds/components/InputGroup/input-group.d.ts

@@ -1,23 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
 import { ButtonProps } from '../Button/Button';
 import { ControlSize } from '../../primitives/control-size';
-import { DeprecatedFilledVariant } from '../../primitives/form-element';
 import * as React from 'react';
-declare const inputGroupVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {
     size?: ControlSize;
-    /** `filled` is a deprecated alias for `default`; both render the filled surface. */
-    variant?: VariantProps<typeof inputGroupVariants>['variant'] | DeprecatedFilledVariant;
-} & Omit<VariantProps<typeof inputGroupVariants>, 'variant'>;
+};
 declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     size?: ControlSize;
-    /** `filled` is a deprecated alias for `default`; both render the filled surface. */
-    variant?: VariantProps<typeof inputGroupVariants>["variant"] | DeprecatedFilledVariant;
-} & Omit<VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "variant"> & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/ds/components/InputGroup/input-group.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: Meta<typeof InputGroup>;
 export default meta;
 type Story = StoryObj<typeof InputGroup>;
 export declare const Default: Story;
-export declare const Variants: Story;
+export declare const WithTextarea: Story;
 export declare const WithInlineStartIcon: Story;
 export declare const WithInlineEndButton: Story;
 export declare const WithLeadingAndTrailing: Story;

package/dist/src/ds/components/Kbd/kbd.d.ts

@@ -1,7 +1,6 @@
 export type KbdProps = {
     children: React.ReactNode;
-    theme?: 'light' | 'dark';
     size?: 'default' | 'sm' | 'xs';
     className?: string;
 };
-export declare const Kbd: ({ children, theme, size, className }: KbdProps) => import("react").JSX.Element;
+export declare const Kbd: ({ children, size, className }: KbdProps) => import("react").JSX.Element;

package/dist/src/ds/components/Kbd/kbd.stories.d.ts

@@ -4,8 +4,7 @@ declare const meta: Meta<typeof Kbd>;
 export default meta;
 type Story = StoryObj<typeof Kbd>;
 export declare const Default: Story;
-export declare const Light: Story;
-export declare const Dark: Story;
+export declare const Sizes: Story;
 export declare const ModifierKey: Story;
 export declare const KeyCombination: Story;
 export declare const CommonShortcuts: Story;

package/dist/src/ds/components/ListSearch/list-search.d.ts

@@ -11,11 +11,10 @@ export type ListSearchProps = {
      * (e.g. from a Reset button). If omitted, ListSearch manages its own state.
      */
     value?: string;
-    variant?: InputProps['variant'];
     /**
      * Opts out of the Cmd/Ctrl+Shift+F focus shortcut. Pass this on secondary
      * instances so two search fields on the same page don't fight over focus.
      */
     shortcutDisabled?: boolean;
 };
-export declare const ListSearch: ({ onSearch, label, placeholder, debounceMs, size, value: controlledValue, variant, shortcutDisabled, }: ListSearchProps) => import("react").JSX.Element;
+export declare const ListSearch: ({ onSearch, label, placeholder, debounceMs, size, value: controlledValue, shortcutDisabled, }: ListSearchProps) => import("react").JSX.Element;

package/dist/src/ds/components/LogsDataList/logs-data-list.d.ts

@@ -2,6 +2,7 @@ import { DataListDateCell, DataListTimeCell } from '../DataList/data-list-cells'
 import { DataListNextPageLoading } from '../DataList/data-list-next-page-loading';
 import { DataListNoMatch } from '../DataList/data-list-no-match';
 import { DataListRoot } from '../DataList/data-list-root';
+import { DataListSortableTopCell } from '../DataList/data-list-sortable-top-cell';
 import { DataListSpacer } from '../DataList/data-list-spacer';
 import { DataListTop } from '../DataList/data-list-top';
 import { DataListTopCellWithTooltip, DataListTopCellSmart } from '../DataList/data-list-top-cell';
@@ -14,6 +15,7 @@ export declare const LogsDataList: typeof DataListRoot & {
         as?: import('react').ElementType;
         sticky?: import('../DataList/shared').DataListSticky;
     } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "className" | "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    SortableTopCell: typeof DataListSortableTopCell;
     TopCellWithTooltip: typeof DataListTopCellWithTooltip;
     TopCellSmart: typeof DataListTopCellSmart;
     RowWrapper: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/dist/src/ds/components/MainHeader/main-header-title.d.ts

@@ -1,6 +1,5 @@
 export type MainHeaderTitleProps = {
     children?: React.ReactNode;
     isLoading?: boolean;
-    size?: 'default' | 'smaller';
 };
-export declare function MainHeaderTitle({ children, isLoading, size }: MainHeaderTitleProps): import("react").JSX.Element;
+export declare function MainHeaderTitle({ children, isLoading }: MainHeaderTitleProps): import("react").JSX.Element;

package/dist/src/ds/components/MainSidebar/main-sidebar-nav-item-classes.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 declare const navItemVariants: (props?: ({
-    size?: "default" | "lg" | "sm" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type NavItemVariantProps = VariantProps<typeof navItemVariants>;
 export type MainSidebarNavItemSize = NonNullable<NavItemVariantProps['size']>;

package/dist/src/ds/components/MainSidebar/main-sidebar-nav-link.d.ts

@@ -37,6 +37,7 @@ export type MainSidebarNavLinkProps = Omit<ComponentProps<'li'>, 'children'> & {
 };
 type SlottedNavChildProps = {
     className?: string;
+    'aria-current'?: 'page';
 };
 export declare function MainSidebarNavLink({ link, state: stateProp, children, isActive, size, render, action, className, LinkComponent: LinkProp, level: levelProp, subItems, asChild, ...props }: MainSidebarNavLinkProps): React.JSX.Element;
 export {};

package/dist/src/ds/components/Tabs/tabs-list.d.ts

@@ -1,15 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 declare const tabListVariants: (props?: ({
-    variant?: "line" | "pill" | "pill-ghost" | null | undefined;
+    variant?: "pill" | "pill-ghost" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TabListVariantsProps = VariantProps<typeof tabListVariants>;
-type TabListVariantValue = NonNullable<TabListVariantsProps['variant']>;
-/**
- * @deprecated `line` remains the omitted fallback for backward compatibility.
- * Pass `variant="pill"` or `variant="pill-ghost"` for new tabs.
- */
-export type DeprecatedLineTabListVariant = Extract<TabListVariantValue, 'line'>;
-export type TabListVariant = DeprecatedLineTabListVariant | Exclude<TabListVariantValue, DeprecatedLineTabListVariant>;
+export type TabListVariant = NonNullable<TabListVariantsProps['variant']>;
 export type TabListSize = 'sm' | 'md';
 export type TabListProps = Omit<TabListVariantsProps, 'variant'> & {
     children: React.ReactNode;
@@ -17,12 +11,7 @@ export type TabListProps = Omit<TabListVariantsProps, 'variant'> & {
     sticky?: boolean;
     /** Control height of each tab; `sm` lines up with `size="sm"` buttons (e.g. inside a `DataPanel.Header`). */
     size?: TabListSize;
-    /**
-     * Visual treatment for the tab list.
-     *
-     * Defaults to `line` only for backward compatibility. New tabs should pass
-     * `variant="pill"` or `variant="pill-ghost"` explicitly.
-     */
+    /** `pill` sits the selected tab on a track; `pill-ghost` drops the track. */
     variant?: TabListVariant | null;
     /**
      * Optional inline styles applied to the underlying tab list element.

package/dist/src/ds/components/Textarea/textarea.d.ts

@@ -2,8 +2,8 @@ import { VariantProps } from 'class-variance-authority';
 import { DeprecatedFilledVariant } from '../../primitives/form-element';
 import * as React from 'react';
 declare const textareaVariants: (props?: ({
-    variant?: "default" | "outline" | "unstyled" | null | undefined;
-    size?: "lg" | "sm" | "xs" | "md" | null | undefined;
+    variant?: "default" | "unstyled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & Omit<VariantProps<typeof textareaVariants>, 'variant'> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
@@ -12,8 +12,8 @@ export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElemen
     error?: boolean;
 };
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & Omit<VariantProps<(props?: ({
-    variant?: "default" | "outline" | "unstyled" | null | undefined;
-    size?: "lg" | "sm" | "xs" | "md" | null | undefined;
+    variant?: "default" | "unstyled" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "variant"> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
     variant?: VariantProps<typeof textareaVariants>["variant"] | DeprecatedFilledVariant;

package/dist/src/ds/components/ThemeToggle/theme-toggle.d.ts

@@ -18,14 +18,14 @@ declare const SIZE_CONFIG: {
         readonly itemWidth: 20;
         readonly root: "gap-px p-px";
         readonly indicator: "inset-y-px left-px";
-        readonly item: "h-4 [&_svg]:h-icon-sm [&_svg]:w-icon-sm";
+        readonly item: "h-4 [&_svg]:size-icon-xs";
     };
     readonly sm: {
         readonly itemGap: 1;
         readonly itemWidth: 24;
         readonly root: "gap-px p-px";
         readonly indicator: "inset-y-px left-px";
-        readonly item: "h-5 [&_svg]:h-icon-sm [&_svg]:w-icon-sm";
+        readonly item: "h-5 [&_svg]:size-icon-xs";
     };
 };
 type RadioRootProps = Omit<RadioGroupPrimitive.Props, 'value' | 'onChange' | 'onValueChange' | 'defaultValue' | 'className'> & {

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

@@ -1,27 +1,20 @@
 import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { TextRole } from '../../tokens';
 export interface TxtProps extends HTMLAttributes<HTMLDivElement | HTMLLabelElement> {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div';
     ref?: Ref<HTMLElement>;
-    variant?: keyof typeof variants;
+    variant?: TextRole;
+    tone?: keyof typeof tones;
     font?: 'mono';
     htmlFor?: string;
     className?: string;
     title?: string;
     children?: ReactNode;
 }
-declare const variants: {
-    'ui-xs': string;
-    'ui-sm': string;
-    'ui-smd': string;
-    'ui-md': string;
-    'ui-lg': string;
-    'header-xs': string;
-    'header-sm': string;
-    'header-md': string;
-    'header-lg': string;
-    'header-xl': string;
-    title: string;
-    caption: string;
+declare const tones: {
+    ink: string;
+    muted: string;
+    faint: string;
 };
-export declare const Txt: ({ as: Root, className, variant, font, ref, ...props }: TxtProps) => import("react").JSX.Element;
+export declare const Txt: ({ as: Root, className, variant, tone, font, ref, ...props }: TxtProps) => import("react").JSX.Element;
 export {};

package/dist/src/ds/components/Txt/txt.stories.d.ts

@@ -4,22 +4,11 @@ declare const meta: Meta<typeof Txt>;
 export default meta;
 type Story = StoryObj<typeof Txt>;
 export declare const Default: Story;
-export declare const HeaderMd: Story;
-export declare const UiLg: Story;
-export declare const UiMd: Story;
-export declare const UiSm: Story;
-export declare const UiXs: Story;
-export declare const Title: Story;
-export declare const Caption: Story;
-export declare const Monospace: Story;
-export declare const AsHeading: Story;
-export declare const AsLabel: Story;
-export declare const AllVariants: Story;
 /**
- * Reference hierarchy used across Studio. Pick the variant by role, not by
- * eyeballing size: page title → header-md, onboarding hero → header-xl,
- * section → header-sm, panel subtitle → ui-md medium, body → ui-md,
- * secondary → ui-sm, meta/badges → ui-xs. Never use ui-xs/ui-sm for headings.
+ * One class per role: the weight and line height are part of the role, so two
+ * components asking for the same role cannot disagree about how it looks.
  */
-export declare const Hierarchy: Story;
-export declare const MonospaceVariants: Story;
+export declare const Roles: Story;
+export declare const Tones: Story;
+export declare const Monospace: Story;
+export declare const AsLabel: Story;

package/dist/src/ds/components/Workflow/cards/workflow-clock.d.ts

@@ -2,6 +2,7 @@ interface WorkflowClockProps {
     startedAt: number;
     endedAt?: number;
     isRunning?: boolean;
+    spansSuspension?: boolean;
 }
-export declare const WorkflowClock: ({ startedAt, endedAt, isRunning }: WorkflowClockProps) => import("react").JSX.Element;
+export declare const WorkflowClock: ({ startedAt, endedAt, isRunning, spansSuspension }: WorkflowClockProps) => import("react").JSX.Element;
 export {};

package/dist/src/ds/components/Workflow/types.d.ts

@@ -48,6 +48,7 @@ export interface WorkflowStepCardViewProps {
     stepGraph?: SerializedStepFlowEntry[];
     startedAt?: number;
     endedAt?: number;
+    spansSuspension?: boolean;
     actionBar?: ReactNode;
 }
 export interface WorkflowConditionCardViewProps {

package/dist/src/ds/icons/Icon.d.ts

@@ -1,7 +1,9 @@
 import { HTMLAttributes, ReactNode } from 'react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
     className?: string;
-    size?: 'default' | 'lg' | 'sm' | 'smd';
+    size?: IconSize;
 }
+export declare const iconSizeClasses: Record<IconSize, string>;
 export declare const Icon: ({ children, className, size, ...props }: IconProps) => import("react").JSX.Element;

package/dist/src/ds/new/layout/page-header/page-header-title.d.ts

@@ -1,7 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-export type PageHeaderTitleSize = 'sm' | 'md' | 'lg' | 'xl' | 'smaller' | 'default';
 export interface PageHeaderTitleProps extends ComponentPropsWithoutRef<'h1'> {
     isLoading?: boolean;
-    size?: PageHeaderTitleSize;
 }
-export declare function PageHeaderTitle({ children, className, isLoading, size, ...props }: PageHeaderTitleProps): import("react").JSX.Element;
+export declare function PageHeaderTitle({ children, className, isLoading, ...props }: PageHeaderTitleProps): import("react").JSX.Element;

package/dist/src/ds/new/layout/page-header/page-header.d.ts

@@ -9,7 +9,7 @@ export type { PageHeaderDescriptionProps } from './page-header-description';
 export type { PageHeaderIconProps } from './page-header-icon';
 export type { PageHeaderMetaProps } from './page-header-meta';
 export type { PageHeaderRootProps } from './page-header-root';
-export type { PageHeaderTitleProps, PageHeaderTitleSize } from './page-header-title';
+export type { PageHeaderTitleProps } from './page-header-title';
 export declare const PageHeader: typeof PageHeaderRoot & {
     Icon: typeof PageHeaderIcon;
     Title: typeof PageHeaderTitle;