@mastra/playground-ui 30.0.2-alpha.2 → 31.0.0-alpha.4

package/dist/src/ds/components/ButtonsGroup/buttons-group.stories.d.ts

@@ -6,9 +6,39 @@ type Story = StoryObj<typeof ButtonsGroup>;
 export declare const Default: Story;
 export declare const DefaultSpacing: Story;
 export declare const CloseSpacing: Story;
+/**
+ * A split button: a primary action joined to a chevron that opens a real menu of related
+ * actions. The chevron is a `DropdownMenu.Trigger asChild`, so it stays a real `Button` and
+ * the group fuses the two into one pill with a single divider — no width or corner classes on
+ * either segment. (`DropdownMenu` renders no DOM of its own, so the trigger is still a direct
+ * child of the group; the menu content is portaled out.)
+ */
 export declare const AsSplitButton: Story;
 export declare const Vertical: Story;
 export declare const VerticalCloseSpacing: Story;
 export declare const WithSeparator: Story;
 export declare const VerticalWithSeparator: Story;
+/**
+ * A stepper: two outline buttons joined to a read-only value segment. The middle value
+ * uses `ButtonsGroupText` (a filled chip). Because that segment is filled (opaque bg) the
+ * group keeps its own border as the seam, so both dividers render as a single clean line.
+ */
+export declare const Stepper: Story;
+/** `ButtonsGroupText` as an actual text label segment (e.g. a unit) next to a control. */
 export declare const WithText: Story;
+/**
+ * Searchbar + dropdown fused into a single pill — the recommended composition. The search
+ * segment is an `InputGroup` (icon + input in one bordered box) nested inside the
+ * `ButtonsGroup` merger; an interactive clear button would go in an `InputGroupAddon`
+ * (`align="inline-end"`) with an `InputGroupButton`.
+ *
+ * No layout classes on the children (`flex-1`/`min-w-0`/`shrink-0`): the group owns sizing in
+ * `spacing="close"` — the InputGroup fills the row and the Select trigger sizes to its content.
+ * The group collapses the touching borders into a divider and flattens the inner corners,
+ * leaving the outer pill rounded.
+ *
+ * Only one class is passed: `rounded-full` on the `SelectTrigger`, an intentional shape choice
+ * so its outer corner matches the InputGroup pill (the trigger's standalone default is
+ * `rounded-lg`). The `w-[420px]` on the group is just the demo container width.
+ */
+export declare const SearchWithDropdown: Story;

package/dist/src/ds/components/Command/command.d.ts

@@ -1,83 +1,18 @@
 import { Dialog } from '../Dialog';
 import * as React from 'react';
-declare const Command: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Command: React.ForwardRefExoticComponent<any>;
 type CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {
     children?: React.ReactNode;
     title?: string;
     description?: string;
 };
 declare const CommandDialog: ({ children, title, description, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
-    ref?: React.Ref<HTMLInputElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
-    value?: string;
-    onValueChange?: (search: string) => void;
-} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const CommandList: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
-    heading?: React.ReactNode;
-    value?: string;
-    forceMount?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    alwaysRender?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    keywords?: string[];
-    forceMount?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.ForwardRefExoticComponent<any>;
+declare const CommandList: React.ForwardRefExoticComponent<any>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<any>;
+declare const CommandGroup: React.ForwardRefExoticComponent<any>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<any>;
+declare const CommandItem: React.ForwardRefExoticComponent<any>;
 declare const CommandShortcut: {
     ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -16,7 +16,8 @@ export type SearchFieldBlockProps = {
     layout?: 'horizontal' | 'vertical';
     className?: string;
     size?: InputProps['size'];
+    variant?: InputProps['variant'];
     isMinimized?: boolean;
     onMinimizedChange?: (minimized: boolean) => void;
 };
-export declare function SearchFieldBlock({ name, helpText, errorMsg, required, disabled, value, label, labelIsHidden, layout, placeholder, onChange, onReset, className, size, isMinimized, onMinimizedChange, }: SearchFieldBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchFieldBlock({ name, helpText, errorMsg, required, disabled, value, label, labelIsHidden, layout, placeholder, onChange, onReset, className, size, variant, isMinimized, onMinimizedChange, }: SearchFieldBlockProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const inputVariants: (props?: ({
-    variant?: "default" | "unstyled" | null | undefined;
+    variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
     size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants> & {
@@ -9,10 +9,10 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     error?: boolean;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
-    variant?: "default" | "unstyled" | null | undefined;
+    variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
     size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     testId?: string;
     error?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
-export { Input, inputVariants };
+export { Input };

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

@@ -6,9 +6,13 @@ type Story = StoryObj<typeof Input>;
 export declare const Default: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
+export declare const Filled: Story;
+export declare const Outline: Story;
 export declare const Disabled: Story;
 export declare const WithValue: Story;
 export declare const Email: Story;
 export declare const Password: Story;
 export declare const Number: Story;
 export declare const SizesWithButton: Story;
+export declare const Error: Story;
+export declare const OnDifferentSurfaces: Story;

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

@@ -2,12 +2,17 @@ import { VariantProps } from 'class-variance-authority';
 import { ButtonProps } from '../Button/Button';
 import { FormElementSize } from '../../primitives/form-element';
 import * as React from 'react';
+declare const inputGroupVariants: (props?: ({
+    variant?: "default" | "outline" | "filled" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputGroupProps = React.ComponentPropsWithoutRef<'div'> & {
     size?: FormElementSize;
-};
+} & VariantProps<typeof inputGroupVariants>;
 declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     size?: FormElementSize;
-} & React.RefAttributes<HTMLDivElement>>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "filled" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & 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,6 +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 WithInlineStartIcon: Story;
 export declare const WithInlineEndButton: Story;
 export declare const WithLeadingAndTrailing: Story;
@@ -15,3 +16,5 @@ export declare const Sizes: Story;
 export declare const Disabled: Story;
 export declare const Invalid: Story;
 export declare const Textarea: Story;
+export declare const NumberWithStepper: Story;
+export declare const OnDifferentSurfaces: Story;

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

@@ -11,5 +11,6 @@ export type ListSearchProps = {
      * (e.g. from a Reset button). If omitted, ListSearch manages its own state.
      */
     value?: string;
+    variant?: InputProps['variant'];
 };
-export declare const ListSearch: ({ onSearch, label, placeholder, debounceMs, size, value: controlledValue, }: ListSearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListSearch: ({ onSearch, label, placeholder, debounceMs, size, value: controlledValue, variant, }: ListSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Searchbar/searchbar.d.ts

@@ -1,13 +1,16 @@
 import { FormElementSize } from '../../primitives/form-element';
+type SearchbarVariant = 'default' | 'filled' | 'outline';
 export type SearchbarProps = {
     onSearch: (search: string) => void;
     label: string;
     placeholder: string;
     debounceMs?: number;
     size?: FormElementSize;
+    variant?: SearchbarVariant;
     className?: string;
 };
-export declare const Searchbar: ({ onSearch, label, placeholder, debounceMs, size, className, }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Searchbar: ({ onSearch, label, placeholder, debounceMs, size, variant, className, }: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SearchbarWrapper: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ds/components/Searchbar/searchbar.stories.d.ts

@@ -5,7 +5,10 @@ export default meta;
 type Story = StoryObj<typeof Searchbar>;
 export declare const Default: Story;
 export declare const AgentSearch: Story;
+export declare const Variants: Story;
 export declare const WithCustomDebounce: Story;
 export declare const WithWrapper: Story;
 export declare const InteractiveSearch: Story;
 export declare const InSidebarContext: Story;
+export declare const Sizes: Story;
+export declare const OnDifferentSurfaces: Story;

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const textareaVariants: (props?: ({
-    variant?: "default" | "unstyled" | null | undefined;
+    variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
     size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & VariantProps<typeof textareaVariants> & {
@@ -9,10 +9,10 @@ export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElemen
     error?: boolean;
 };
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & VariantProps<(props?: ({
-    variant?: "default" | "unstyled" | null | undefined;
+    variant?: "default" | "outline" | "unstyled" | "filled" | null | undefined;
     size?: "default" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     testId?: string;
     error?: boolean;
 } & React.RefAttributes<HTMLTextAreaElement>>;
-export { Textarea, textareaVariants };
+export { Textarea };

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

@@ -8,3 +8,4 @@ export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const Error: Story;
 export declare const Disabled: Story;
+export declare const OnDifferentSurfaces: Story;

package/dist/src/ds/primitives/form-element.d.ts

@@ -5,10 +5,12 @@ export declare const formElementSizes: {
     readonly lg: "h-form-lg";
 };
 export declare const formElementFocus = "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
-export declare const formElementFocusWithin = "focus-within:outline-hidden focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
-export declare const formElementRadius = "rounded-md";
-export declare const sharedFormElementStyle = "bg-surface2 border border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 rounded-lg";
 export declare const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden focus-visible:border-accent1 focus-visible:ring-1 focus-visible:ring-accent1/40";
 export declare const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
-export declare const formElementTransition = "transition-all duration-normal ease-out-custom";
+export declare const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
+export declare const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+export declare const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+export declare const inputSurfaceAndFocusStyle: string;
+export declare const inputOutlineAndFocusStyle: string;
+export declare const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 export type FormElementSize = keyof typeof formElementSizes;

package/dist/src/lib/formatting.d.ts

@@ -1,2 +1,3 @@
 export declare const formatJSON: (code: string) => Promise<string>;
+export declare const formatTypeScript: (code: string) => Promise<string>;
 export declare const isValidJson: (str: string) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "30.0.2-alpha.2",
+  "version": "31.0.0-alpha.4",
   "description": "Mastra Playground components",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
@@ -85,8 +85,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.21.2-alpha.2",
-    "@mastra/react": "0.4.3-alpha.2"
+    "@mastra/client-js": "^1.22.0-alpha.4",
+    "@mastra/react": "0.4.3-alpha.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.6",
@@ -122,10 +122,10 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.5",
-    "@mastra/react": "0.4.3-alpha.2",
-    "@mastra/core": "1.38.0-alpha.2",
     "@internal/lint": "0.0.99",
-    "@mastra/client-js": "^1.21.2-alpha.2"
+    "@mastra/client-js": "^1.22.0-alpha.4",
+    "@mastra/core": "1.38.0-alpha.4",
+    "@mastra/react": "0.4.3-alpha.4"
   },
   "homepage": "https://mastra.ai",
   "repository": {