@mastra/playground-ui 60.1.0 → 60.2.0-alpha.0

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

@@ -1,6 +1,2 @@
-/**
- * Id of the error message for a field, so a control can point at its message with
- * `aria-describedby`. Lives apart from the component file: exporting it alongside a
- * component breaks fast refresh.
- */
+/** @deprecated Wrap the control in a `Field`: `FieldError` links itself to the control. */
 export declare const fieldErrorId: (name: string) => string;

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

@@ -22,4 +22,5 @@ export type SearchFieldBlockProps = {
     /** Gives the caller access to the underlying input, e.g. to focus it from a keyboard shortcut. */
     inputRef?: RefObject<HTMLInputElement | null>;
 };
+/** @deprecated Use `SearchInput`. */
 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/select-field-block.d.ts

@@ -22,4 +22,5 @@ export type SelectFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labe
     className?: string;
     size?: SelectTriggerProps['size'];
 };
+/** @deprecated Use `Field` + `FieldLabel` + `Select`. */
 export declare function SelectFieldBlock({ name, helpText, errorMsg, required, disabled, size, value, label, labelIsHidden, layout, labelColumnWidth, options, placeholder, onValueChange, className, }: SelectFieldBlockProps): import("react").JSX.Element;

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

@@ -12,4 +12,5 @@ export type TextFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'labelC
     errorMsg?: FieldBlockErrorMsgProps['children'];
     size?: InputProps['size'];
 };
+/** @deprecated Use `Field` + `FieldLabel` + `Input`. */
 export declare function TextFieldBlock({ name, value, label, labelIsHidden, labelColumnWidth, helpText, error, errorMsg, required, disabled, labelSize, layout, placeholder, size, testId, className, 'aria-describedby': ariaDescribedBy, ...props }: TextFieldBlockProps): import("react").JSX.Element;

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

@@ -12,4 +12,5 @@ export type TextareaFieldBlockProps = Pick<FieldBlockLayoutProps, 'layout' | 'la
     errorMsg?: FieldBlockErrorMsgProps['children'];
     size?: TextareaProps['size'];
 };
+/** @deprecated Use `Field` + `FieldLabel` + `Textarea`. */
 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/layout/field-blocks-layout.d.ts

@@ -1,5 +1,6 @@
 import { FieldBlocksLayoutColumn } from './field-blocks-layout-column';
 import { FieldBlocksLayoutRoot } from './field-blocks-layout-root';
+/** @deprecated Lay fields out with plain grid or flex classes; `FieldGroup` stacks related fields. */
 export declare const FieldBlocksLayout: typeof FieldBlocksLayoutRoot & {
     Column: typeof FieldBlocksLayoutColumn;
 };

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

@@ -5,19 +5,12 @@ declare const inputVariants: (props?: ({
     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'> & {
+export type InputProps = Omit<React.ComponentProps<'input'>, 'size'> & Omit<VariantProps<typeof inputVariants>, 'variant'> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
     variant?: VariantProps<typeof inputVariants>['variant'] | DeprecatedFilledVariant;
     testId?: string;
+    /** @deprecated Wrap the control in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */
     error?: boolean;
 };
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<VariantProps<(props?: ({
-    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;
-    testId?: string;
-    error?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
+declare function Input({ className, size, testId, variant, error, ...props }: InputProps): React.JSX.Element;
 export { Input };

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

@@ -1,44 +1,34 @@
 import { VariantProps } from 'class-variance-authority';
+import { Button } from '../Button';
 import { ButtonProps } from '../Button/Button';
 import { ControlSize } from '../../primitives/control-size';
 import * as React from 'react';
-export type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {
+export type InputGroupProps = React.ComponentProps<'div'> & {
     size?: ControlSize;
 };
-declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    size?: ControlSize;
-} & React.RefAttributes<HTMLDivElement>>;
+declare function InputGroup({ className, size, ...props }: InputGroupProps): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type InputGroupAddonProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof inputGroupAddonVariants>;
-declare const InputGroupAddon: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
-export type InputGroupInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+export type InputGroupAddonProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;
+declare function InputGroupAddon({ className, align, onClick, ...props }: InputGroupAddonProps): React.JSX.Element;
+export type InputGroupInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {
     testId?: string;
+    /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */
     error?: boolean;
 };
-declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    testId?: string;
-    error?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
-export type InputGroupTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+declare function InputGroupInput({ className, testId, error, type, ...props }: InputGroupInputProps): React.JSX.Element;
+export type InputGroupTextareaProps = React.ComponentProps<'textarea'> & {
     testId?: string;
+    /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */
     error?: boolean;
 };
-declare const InputGroupTextarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    testId?: string;
-    error?: boolean;
-} & React.RefAttributes<HTMLTextAreaElement>>;
-export type InputGroupTextProps = React.ComponentPropsWithoutRef<'span'>;
-declare const InputGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export type InputGroupButtonProps = Omit<ButtonProps, 'size' | 'variant'> & {
+declare function InputGroupTextarea({ className, testId, error, ...props }: InputGroupTextareaProps): React.JSX.Element;
+export type InputGroupTextProps = React.ComponentProps<'span'>;
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): React.JSX.Element;
+export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'> & {
     size?: ButtonProps['size'];
     variant?: ButtonProps['variant'];
 };
-declare const InputGroupButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant"> & {
-    size?: ButtonProps["size"];
-    variant?: ButtonProps["variant"];
-} & React.RefAttributes<HTMLButtonElement>>;
+declare function InputGroupButton({ size, variant, type, ...props }: InputGroupButtonProps): React.JSX.Element;
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };

package/dist/src/ds/components/JSONSchemaForm/json-schema-form-field-description.d.ts

@@ -1,4 +1,7 @@
-import { TextFieldBlockProps } from '../FormFieldBlocks/fields/text-field-block';
+import { InputProps } from '../Input';
 import * as React from 'react';
-export type JSONSchemaFormFieldDescriptionProps = Omit<TextFieldBlockProps, 'value' | 'onChange' | 'name'>;
-export declare function FieldDescription(props: JSONSchemaFormFieldDescriptionProps): React.JSX.Element;
+export type JSONSchemaFormFieldDescriptionProps = Omit<InputProps, 'value' | 'onChange' | 'name'> & {
+    label?: React.ReactNode;
+    labelIsHidden?: boolean;
+};
+export declare function FieldDescription({ label, labelIsHidden, className, ...props }: JSONSchemaFormFieldDescriptionProps): React.JSX.Element;

package/dist/src/ds/components/JSONSchemaForm/json-schema-form-field-name.d.ts

@@ -1,4 +1,7 @@
-import { TextFieldBlockProps } from '../FormFieldBlocks/fields/text-field-block';
+import { InputProps } from '../Input';
 import * as React from 'react';
-export type JSONSchemaFormFieldNameProps = Omit<TextFieldBlockProps, 'value' | 'onChange' | 'name'>;
-export declare function FieldName(props: JSONSchemaFormFieldNameProps): React.JSX.Element;
+export type JSONSchemaFormFieldNameProps = Omit<InputProps, 'value' | 'onChange' | 'name'> & {
+    label?: React.ReactNode;
+    labelIsHidden?: boolean;
+};
+export declare function FieldName({ label, labelIsHidden, className, ...props }: JSONSchemaFormFieldNameProps): React.JSX.Element;

package/dist/src/ds/components/JSONSchemaForm/json-schema-form-field-type.d.ts

@@ -1,4 +1,11 @@
-import { SelectFieldBlockProps } from '../FormFieldBlocks/fields/select-field-block';
+import { SelectTriggerProps } from '../Select/select';
 import * as React from 'react';
-export type JSONSchemaFormFieldTypeProps = Omit<SelectFieldBlockProps, 'value' | 'onValueChange' | 'options' | 'name'>;
-export declare function FieldType({ className, ...props }: JSONSchemaFormFieldTypeProps): React.JSX.Element;
+export type JSONSchemaFormFieldTypeProps = {
+    label?: React.ReactNode;
+    labelIsHidden?: boolean;
+    placeholder?: string;
+    size?: SelectTriggerProps['size'];
+    disabled?: boolean;
+    className?: string;
+};
+export declare function FieldType({ label, labelIsHidden, placeholder, size, disabled, className, }: JSONSchemaFormFieldTypeProps): React.JSX.Element;

package/dist/src/ds/components/Label/label.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
+/** @deprecated Use `FieldLabel` inside a `Field`. */
 declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

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

@@ -1,10 +1,10 @@
-import { InputProps } from '../Input';
+import { SearchInputProps } from '../SearchInput';
 export type ListSearchProps = {
     onSearch: (search: string) => void;
     label: string;
     placeholder: string;
     debounceMs?: number;
-    size?: InputProps['size'];
+    size?: SearchInputProps['size'];
     /**
      * Optional controlled value. When provided, ListSearch stays in sync with this
      * prop — useful when the parent needs to clear the input programmatically

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

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

package/dist/src/ds/components/SearchInput/search-input.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+import { InputGroupInputProps, InputGroupProps } from '../InputGroup';
+export type SearchInputProps = Omit<InputGroupInputProps, 'value' | 'onChange' | 'type' | 'ref' | 'error'> & {
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    onClose?: () => void;
+    size?: InputGroupProps['size'];
+    className?: string;
+    ref?: Ref<HTMLInputElement>;
+};
+export declare function SearchInput({ label, value, onValueChange, onClose, size, className, ref, ...inputProps }: SearchInputProps): import("react").JSX.Element;

package/dist/src/ds/components/SearchInput/search-input.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchInput } from './search-input';
+declare const meta: Meta<typeof SearchInput>;
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Collapsible: Story;

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

@@ -5,19 +5,12 @@ declare const textareaVariants: (props?: ({
     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'> & {
+export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'size'> & Omit<VariantProps<typeof textareaVariants>, 'variant'> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
     variant?: VariantProps<typeof textareaVariants>['variant'] | DeprecatedFilledVariant;
     testId?: string;
+    /** @deprecated Wrap the control in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */
     error?: boolean;
 };
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & Omit<VariantProps<(props?: ({
-    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;
-    testId?: string;
-    error?: boolean;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+declare function Textarea({ className, size, testId, variant, error, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea };

package/dist/src/ds/components/ai/ask-user/ask-user.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Button } from '../../Button';
+import { FieldLabelProps } from '../../Field';
 import { Txt } from '../../Txt';
 export type AskUserSelectionMode = 'single_select' | 'multi_select';
 export type AskUserAnswer = string | string[];
@@ -20,7 +21,7 @@ export declare const AskUserContainer: ({ className, ...props }: ComponentProps<
 export declare const AskUserLabel: ({ children, className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 export declare const AskUserBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 export declare const AskUserQuestion: ({ className, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
-export interface AskUserOptionRowProps extends Omit<ComponentProps<'label'>, 'children'> {
+export interface AskUserOptionRowProps extends Omit<FieldLabelProps, 'children'> {
     control: ReactNode;
     label: string;
     description?: string;

package/dist/src/ds/new/settings/index.d.ts

@@ -1,4 +1,4 @@
 export { SettingsContainer } from './settings-container';
 export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsTitle } from './settings-header';
-export { SettingsRow, type SettingsRowProps } from './settings-row';
+export { SettingsFieldsetRow, SettingsRow, type SettingsFieldsetRowProps, type SettingsRowProps } from './settings-row';
 export { SettingsLayout, type SettingsLayoutProps } from './settings-layout';

package/dist/src/ds/new/settings/settings-row.d.ts

@@ -1,7 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
-export type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {
+import { ReactNode } from 'react';
+import { FieldProps, FieldsetProps } from '../../components/Field';
+export type SettingsRowProps = Omit<FieldProps, 'children' | 'invalid' | 'orientation'> & {
     label: ReactNode;
     description?: ReactNode;
+    /** @deprecated The row's `Field` names the control it holds; drop `htmlFor` and the control's `id`. */
     htmlFor?: string;
     children?: ReactNode;
     tone?: 'default' | 'destructive';
@@ -12,6 +14,12 @@ export type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {
 type SettingsRowLayoutProps = SettingsRowProps & {
     layout: 'factory' | 'section';
 };
-export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, required, errorMsg, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
+export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, required, errorMsg, disabled, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
 export declare function SettingsRow(props: SettingsRowProps): import("react").JSX.Element;
+export type SettingsFieldsetRowProps = Omit<FieldsetProps, 'children'> & {
+    label: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
+export declare function SettingsFieldsetRow({ label, description, children, className, ...props }: SettingsFieldsetRowProps): import("react").JSX.Element;
 export {};