@mastra/playground-ui 55.0.0-alpha.5 → 55.0.0

package/dist/src/ds/components/Select/select.d.ts

@@ -3,7 +3,11 @@ import { TextButtonSize } from '../Button/Button';
 import * as React from 'react';
 type SelectRootProps<Value> = SelectPrimitive.Root.Props<Value, false>;
 type SelectChangeDetails = Parameters<NonNullable<SelectRootProps<unknown>['onValueChange']>>[1];
-/** Preserves the non-null onValueChange signature used by existing consumers. */
+/**
+ * `onValueChange` is intentionally narrowed to a non-null value: these selects
+ * always hold a value once changed, which keeps existing `(value) => void`
+ * consumer handlers valid (Base UI's own callback type is `Value | null`).
+ */
 type SelectProps<Value = string> = Omit<SelectRootProps<Value>, 'onValueChange'> & {
     onValueChange?: (value: Value, eventDetails: SelectChangeDetails) => void;
 };
@@ -15,7 +19,20 @@ declare const SelectGroup: React.ForwardRefExoticComponent<Omit<import('@base-ui
 export type SelectValueProps = Omit<SelectPrimitive.Value.Props, 'className'> & {
     className?: string;
 };
+/**
+ * Displays the selected value. Radix's `Select.Value` took a `placeholder`
+ * prop and rendered the selected item's text automatically; Base UI's
+ * `Select.Value` behaves the same way (renders the value, falls back to
+ * `placeholder` when nothing is selected), so this is a thin passthrough.
+ */
 declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * A select is a form field, so it reuses the same button looks consumers see
+ * everywhere: `default` (the Button's filled default surface — the default
+ * here too), `outline` (bordered, transparent) and `ghost` (borderless, for
+ * dense toolbars/inline pickers). The high-emphasis `primary` look is the only
+ * one intentionally NOT offered (a field is not a call-to-action).
+ */
 export type SelectTriggerVariant = 'default' | 'outline' | 'ghost';
 type SelectTriggerLegacyVariant = 'primary';
 export type SelectTriggerProps = Omit<SelectPrimitive.Trigger.Props, 'className'> & {
@@ -27,8 +44,13 @@ declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerP
 type SelectContentPositionerProps = Omit<SelectPositionerProps, keyof SelectPopupProps>;
 export type SelectContentProps = Omit<SelectPopupProps, 'className'> & SelectContentPositionerProps & {
     className?: string;
-    /** Ignored compatibility prop from Radix; use Base UI positioning props instead. */
+    /**
+     * Kept for API compatibility with the previous Radix API. Radix supported
+     * `position="popper" | "item-aligned"`; Base UI always uses popper-style
+     * positioning so this prop is accepted but has no effect.
+     */
     position?: 'popper' | 'item-aligned';
+    /** Optional portal container, forwarded to `Select.Portal`. */
     container?: HTMLElement | null;
 };
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/ds/components/Slider/slider.d.ts

@@ -3,5 +3,5 @@ export type SliderProps = Omit<SliderPrimitive.Root.Props, 'onValueChange' | 'on
     onValueChange?: (value: number[], eventDetails: SliderPrimitive.Root.ChangeEventDetails) => void;
     onValueCommitted?: (value: number[], eventDetails: SliderPrimitive.Root.CommitEventDetails) => void;
 };
-declare const Slider: ({ className, defaultValue, value, min, max, onValueChange, onValueCommitted, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SliderProps) => import("react").JSX.Element;
+declare const Slider: ({ className, defaultValue, value, min, max, onValueChange, onValueCommitted, ...props }: SliderProps) => import("react").JSX.Element;
 export { Slider };

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

@@ -29,7 +29,7 @@ export interface RowProps {
     style?: CSSProperties;
     onClick?: () => void;
     tabIndex?: number;
-    /** Focuses the row and scrolls it into view. */
+    /** When true, row receives focus and scrolls into view */
     isActive?: boolean;
 }
 export declare const Row: import('react').ForwardRefExoticComponent<RowProps & import('react').RefAttributes<HTMLTableRowElement>>;

package/dist/src/ds/components/ai/tool-call/tool-call-group.d.ts

@@ -4,6 +4,8 @@ export interface ToolCallGroupStep {
     toolName: string;
     args: unknown;
     status: ToolCallStatus;
+    /** A successful tool result was recorded. Supply for every step to enable outcome counts; omit to keep legacy summaries. */
+    hasResult?: boolean;
 }
 export interface ToolCallGroupProps {
     steps: ToolCallGroupStep[];

package/dist/src/ds/new/layout/app-shell/app-shell.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface AppShellFrameProps {
+    children: ReactNode;
+    className: string;
+}
+export interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    children: ReactNode;
+    mainLabel: string;
+    mobileHeader?: ReactNode;
+    renderFrame?: (props: AppShellFrameProps) => ReactNode;
+    routeHeader?: ReactNode;
+}
+export declare function AppShell({ children, className, mainLabel, mobileHeader, ref, renderFrame, routeHeader, ...props }: AppShellProps): import("react").JSX.Element;

package/dist/src/ds/new/layout/app-shell/app-shell.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react-vite';
+import { AppShell } from './app-shell';
+declare const meta: {
+    title: string;
+    component: typeof AppShell;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        children: null;
+        mainLabel: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const StandardDesktop: Story;
+export declare const CollapsedSidebar: Story;
+export declare const Mobile: Story;
+export declare const WithoutRouteHeader: Story;
+export declare const WithFrameWrapper: Story;
+export declare const LightTheme: Story;
+export declare const DarkTheme: Story;

package/dist/src/ds/new/layout/app-shell/index.d.ts

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

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

@@ -1,10 +1,9 @@
 export declare const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
 export declare const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
-export declare const inputFocusBorderWithin = "has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-neutral5/50";
-export declare const controlFocusStyle = "ds-focus ds-focus-line";
-export { controlFocusStyle as controlFocusBorderVisible };
-export declare const inputHoverBorderVisible = "hover:not-focus-visible:not-aria-invalid:border-border2";
-export declare const inputHoverBorderWithin = "hover:not-has-[:focus-visible]:not-has-[[aria-invalid=true]]:border-border2";
+export declare const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+export declare const controlFocusBorderVisible = "outline-hidden focus-visible:outline-hidden focus-visible:border-neutral5/50";
+export declare const inputHoverBorderVisible = "[&:hover:not(:focus-visible)]:border-border2";
+export declare const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
 export declare const inputSurfaceAndFocusStyle: string;
 export declare const inputOutlineAndFocusStyle: string;
-export declare const unstyledFormElementStyle = "ds-focus border-0 bg-transparent";
+export declare const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";

package/dist/src/ds/primitives/menu-item.d.ts

@@ -9,6 +9,7 @@ export declare const menuPopupClass: string;
 export declare const menuLabelClass = "px-[.9em] pt-1.5 pb-1 text-ui-xs font-medium tracking-wider text-neutral3 uppercase";
 export declare const menuSeparatorClass = "-mx-1 my-1 h-px bg-border1";
 export declare const menuShortcutClass = "ml-auto text-ui-xs tracking-wider text-neutral3 tabular-nums";
+/** Non-interactive row (empty / loading) on the same size grid as an item. */
 export declare const menuEmptyClass = "flex h-form-md items-center gap-[.75em] px-[.9em] py-0.5 text-ui-smd leading-ui-sm text-neutral3 box-content";
 export declare const menuSearchClasses: {
     container: string;

package/dist/src/hooks/use-local-storage-state.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+import { z } from 'zod/v4';
+interface LocalStorageStateOptions<T> {
+    initialKey: string;
+    defaultValue: T;
+    schema: z.ZodType<T>;
+    serialize?: (value: T) => string;
+}
+export declare function useLocalStorageState<T>({ initialKey, defaultValue, schema, serialize, }: LocalStorageStateOptions<T>): [T, Dispatch<SetStateAction<T>>];
+export {};

package/dist/style.css

@@ -313,6 +313,10 @@
     --color-border2: var(--border2);
     --color-surface-overlay-soft: var(--surface-overlay-soft);
     --color-surface-overlay-strong: var(--surface-overlay-strong);
+    --color-button-default-bg: var(--button-default-bg);
+    --color-button-default-bg-hover: var(--button-default-bg-hover);
+    --color-button-default-bg-active: var(--button-default-bg-active);
+    --color-button-default-border: var(--button-default-border);
     --color-warning1: var(--warning1);
     --color-positive1: var(--positive1);
     --color-negative1: var(--negative1);
@@ -785,6 +789,10 @@
     top: var(--spacing-2);
   }
 
+  .top-2\.5 {
+    top: var(--spacing-2_5);
+  }
+
   .top-3 {
     top: var(--spacing-3);
   }
@@ -829,10 +837,6 @@
     right: var(--spacing-3);
   }
 
-  .right-full {
-    right: 100%;
-  }
-
   .bottom-0 {
     bottom: var(--spacing-0);
   }
@@ -963,6 +967,10 @@
     order: 9999;
   }
 
+  .col-\[title\/end\] {
+    grid-column: title / end;
+  }
+
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -975,16 +983,24 @@
     grid-column: 1 / -1;
   }
 
-  .col-start-1 {
-    grid-column-start: 1;
+  .col-start-3 {
+    grid-column-start: 3;
   }
 
-  .col-start-2 {
-    grid-column-start: 2;
+  .col-start-\[action\] {
+    grid-column-start: action;
   }
 
-  .col-start-3 {
-    grid-column-start: 3;
+  .col-start-\[icon\] {
+    grid-column-start: icon;
+  }
+
+  .col-start-\[meta\] {
+    grid-column-start: meta;
+  }
+
+  .col-start-\[title\] {
+    grid-column-start: title;
   }
 
   .row-0 {
@@ -995,10 +1011,6 @@
     grid-row-start: 1;
   }
 
-  .row-end-2 {
-    grid-row-end: 2;
-  }
-
   .container {
     width: 100%;
   }
@@ -1057,6 +1069,10 @@
     margin: var(--spacing-1);
   }
 
+  .m-1\.5 {
+    margin: var(--spacing-1_5);
+  }
+
   .m-3 {
     margin: var(--spacing-3);
   }
@@ -2693,6 +2709,10 @@
     width: var(--width-dropdown-max-height);
   }
 
+  .w-dvw {
+    width: 100dvw;
+  }
+
   .w-fit {
     width: fit-content;
   }
@@ -3313,6 +3333,10 @@
     grid-template-columns: 200px auto;
   }
 
+  .grid-cols-\[\[title\]_auto_\[meta\]_minmax\(0\,1fr\)_\[action\]_auto_\[end\]\] {
+    grid-template-columns: [title] auto[meta] minmax(0, 1fr)[action] auto[end];
+  }
+
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
@@ -3321,10 +3345,6 @@
     grid-template-columns: auto 1fr !important;
   }
 
-  .grid-cols-\[auto_minmax\(0\,1fr\)_auto\] {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
-
   .grid-cols-\[minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -4071,6 +4091,10 @@
     }
   }
 
+  .border-button-default-border {
+    border-color: var(--color-button-default-border);
+  }
+
   .border-current\/25 {
     border-color: currentColor;
   }
@@ -4623,6 +4647,10 @@
     background-color: var(--color-border2);
   }
 
+  .bg-button-default-bg {
+    background-color: var(--color-button-default-bg);
+  }
+
   .bg-current, .bg-current\/10 {
     background-color: currentColor;
   }
@@ -7205,6 +7233,10 @@
     opacity: 1;
   }
 
+  .group-data-\[size\]\:h-\[calc\(\.\.\.\)\]:is(:where(.group)[data-size] *) {
+    height: calc(...);
+  }
+
   .group-data-\[size\=lg\]\/input-group\:h-\[calc\(var\(--spacing-form-lg\)-2px\)\]:is(:where(.group\/input-group)[data-size="lg"] *) {
     height: calc(var(--spacing-form-lg) - 2px);
   }
@@ -7730,6 +7762,16 @@
     border-color: var(--color-border2);
   }
 
+  .focus-within\:border-neutral5\/50:focus-within {
+    border-color: var(--color-neutral5);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-within\:border-neutral5\/50:focus-within {
+      border-color: color-mix(in oklab, var(--color-neutral5) 50%, transparent);
+    }
+  }
+
   .focus-within\:border-neutral6\/20:focus-within {
     border-color: var(--color-neutral6);
   }
@@ -7740,6 +7782,10 @@
     }
   }
 
+  .focus-within\:bg-surface-overlay-strong:focus-within {
+    background-color: var(--color-surface-overlay-strong);
+  }
+
   .focus-within\:bg-surface4:focus-within {
     background-color: var(--color-surface4);
   }
@@ -7866,6 +7912,10 @@
       }
     }
 
+    .hover\:bg-button-default-bg-hover:hover {
+      background-color: var(--color-button-default-bg-hover);
+    }
+
     .hover\:bg-green-500\/20:hover {
       background-color: var(--color-green-500);
     }
@@ -8059,10 +8109,6 @@
       --tw-brightness: brightness(125%);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
-
-    .hover\:not-has-\[\:focus-visible\]\:not-has-\[\[aria-invalid\=true\]\]\:border-border2:hover:not(:has(:focus-visible)):not(:has([aria-invalid="true"])), .hover\:not-focus-visible\:not-aria-invalid\:border-border2:hover:not(:focus-visible):not([aria-invalid="true"]) {
-      border-color: var(--color-border2);
-    }
   }
 
   .focus\:border-accent1:focus {
@@ -8093,6 +8139,10 @@
     }
   }
 
+  .focus\:bg-surface3:focus {
+    background-color: var(--color-surface3);
+  }
+
   .focus\:text-neutral6:focus {
     color: var(--color-neutral6);
   }
@@ -8115,10 +8165,16 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .focus\:ring-accent1:focus {
+  .focus\:ring-accent1:focus, .focus\:ring-accent1\/50:focus {
     --tw-ring-color: var(--color-accent1);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:ring-accent1\/50:focus {
+      --tw-ring-color: color-mix(in oklab, var(--color-accent1) 50%, transparent);
+    }
+  }
+
   .focus\:outline-hidden:focus {
     --tw-outline-style: none;
     outline-style: none;
@@ -8145,6 +8201,10 @@
     outline-style: solid;
   }
 
+  .focus\:ring-inset:focus {
+    --tw-ring-inset: inset;
+  }
+
   .focus\:placeholder\:opacity-70:focus::placeholder {
     opacity: .7;
   }
@@ -8153,6 +8213,10 @@
     border-color: var(--color-accent1);
   }
 
+  .focus-visible\:border-border2:focus-visible {
+    border-color: var(--color-border2);
+  }
+
   .focus-visible\:border-error:focus-visible {
     border-color: var(--color-error);
   }
@@ -8167,6 +8231,10 @@
     }
   }
 
+  .focus-visible\:border-transparent:focus-visible {
+    border-color: #0000;
+  }
+
   .focus-visible\:bg-surface-overlay-strong:focus-visible {
     background-color: var(--color-surface-overlay-strong);
   }
@@ -8342,6 +8410,10 @@
     }
   }
 
+  .active\:bg-button-default-bg-active:active {
+    background-color: var(--color-button-default-bg-active);
+  }
+
   .active\:bg-neutral6\/10:active {
     background-color: var(--color-neutral6);
   }
@@ -8494,17 +8566,18 @@
     opacity: .5;
   }
 
-  .has-\[\:focus-visible\]\:bg-surface-overlay-strong:has(:focus-visible) {
-    background-color: var(--color-surface-overlay-strong);
+  .has-\[\:focus-visible\]\:ring-2:has(:focus-visible) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .has-\[\:focus-visible\]\:not-has-\[\[aria-invalid\=true\]\]\:border-neutral5\/50:has(:focus-visible):not(:has([aria-invalid="true"])) {
-    border-color: var(--color-neutral5);
+  .has-\[\:focus-visible\]\:ring-neutral6\/60:has(:focus-visible) {
+    --tw-ring-color: var(--color-neutral6);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .has-\[\:focus-visible\]\:not-has-\[\[aria-invalid\=true\]\]\:border-neutral5\/50:has(:focus-visible):not(:has([aria-invalid="true"])) {
-      border-color: color-mix(in oklab, var(--color-neutral5) 50%, transparent);
+    .has-\[\:focus-visible\]\:ring-neutral6\/60:has(:focus-visible) {
+      --tw-ring-color: color-mix(in oklab, var(--color-neutral6) 60%, transparent);
     }
   }
 
@@ -8544,6 +8617,10 @@
     border-radius: var(--radius-xl);
   }
 
+  .has-\[\>\[data-slot\=page-header-icon\]\]\:grid-cols-\[\[icon\]_auto_\[title\]_auto_\[meta\]_minmax\(0\,1fr\)_\[action\]_auto_\[end\]\]:has( > [data-slot="page-header-icon"]) {
+    grid-template-columns: [icon] auto[title] auto[meta] minmax(0, 1fr)[action] auto[end];
+  }
+
   .has-\[\>button\]\:pr-1:has( > button) {
     padding-right: var(--spacing-1);
   }
@@ -9207,6 +9284,10 @@
     border-color: var(--color-border2);
   }
 
+  .data-\[popup-open\]\:bg-button-default-bg-hover[data-popup-open] {
+    background-color: var(--color-button-default-bg-hover);
+  }
+
   .data-\[popup-open\]\:bg-neutral6\/5[data-popup-open] {
     background-color: var(--color-neutral6);
   }
@@ -9221,10 +9302,6 @@
     background-color: var(--color-surface3);
   }
 
-  .data-\[popup-open\]\:bg-surface5[data-popup-open] {
-    background-color: var(--color-surface5);
-  }
-
   .data-\[popup-open\]\:text-neutral6[data-popup-open] {
     color: var(--color-neutral6);
   }
@@ -9738,6 +9815,10 @@
   }
 
   @media (min-width: 64rem) {
+    .lg\:m-2 {
+      margin: var(--spacing-2);
+    }
+
     .lg\:m-6 {
       margin: var(--spacing-6);
     }
@@ -9758,6 +9839,10 @@
       display: flex;
     }
 
+    .lg\:grid {
+      display: grid;
+    }
+
     .lg\:hidden {
       display: none;
     }
@@ -9794,6 +9879,14 @@
       grid-template-columns: 17.5rem 4.5rem 17.5rem 4.5rem minmax(0, 1fr);
     }
 
+    .lg\:grid-cols-\[auto_1fr\] {
+      grid-template-columns: auto 1fr;
+    }
+
+    .lg\:grid-rows-\[1fr\] {
+      grid-template-rows: 1fr;
+    }
+
     .lg\:flex-row {
       flex-direction: row;
     }
@@ -9832,6 +9925,10 @@
   }
 
   @media (min-width: 80rem) {
+    .xl\:block {
+      display: block;
+    }
+
     .xl\:hidden {
       display: none;
     }
@@ -10666,6 +10763,10 @@
     color: var(--color-black);
   }
 
+  .\[\&\:hover\:not\(\:focus-visible\)\]\:border-border2:hover:not(:focus-visible), .\[\&\:hover\:not\(\:focus-within\)\]\:border-border2:hover:not(:focus-within) {
+    border-color: var(--color-border2);
+  }
+
   .\[\&\:hover\>\[data-slot\=button-icon\]\]\:opacity-100:hover > [data-slot="button-icon"] {
     opacity: 1;
   }
@@ -10862,11 +10963,11 @@
     margin-left: calc(var(--spacing-px) * -1);
   }
 
-  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[data-slot\=buttons-group-text\]\)\:not\(\[data-variant\=default\]\)\:not\(\[data-variant\=primary\]\)\:not\(\[data-variant\=destructive\]\)\:not\(\:first-child\)\:not\(\:hover\)\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\]\:border-t-transparent > :not([data-slot="buttons-group-separator"]):not([data-slot="buttons-group-text"]):not([data-variant="default"]):not([data-variant="primary"]):not([data-variant="destructive"]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible)) {
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[data-slot\=buttons-group-text\]\)\:not\(\[data-variant\=default\]\)\:not\(\[data-variant\=primary\]\)\:not\(\[data-variant\=destructive\]\)\:not\(\:first-child\)\:not\(\[data-variant\=outline\]\)\:not\(\:hover\)\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\]\:border-t-transparent > :not([data-slot="buttons-group-separator"]):not([data-slot="buttons-group-text"]):not([data-variant="default"]):not([data-variant="primary"]):not([data-variant="destructive"]):not(:first-child):not([data-variant="outline"]):not(:hover):not(:focus-visible):not(:has(:focus-visible)) {
     border-top-color: #0000;
   }
 
-  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[data-slot\=buttons-group-text\]\)\:not\(\[data-variant\=default\]\)\:not\(\[data-variant\=primary\]\)\:not\(\[data-variant\=destructive\]\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\:not\(\:first-child\)\:not\(\:hover\)\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\]\:border-l-transparent > :not([data-slot="buttons-group-separator"]):not([data-slot="buttons-group-text"]):not([data-variant="default"]):not([data-variant="primary"]):not([data-variant="destructive"]):not([aria-hidden="true"]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible)) {
+  .\[\&\>\*\:not\(\[data-slot\=buttons-group-separator\]\)\:not\(\[data-slot\=buttons-group-text\]\)\:not\(\[data-variant\=default\]\)\:not\(\[data-variant\=primary\]\)\:not\(\[data-variant\=destructive\]\)\:not\(\[aria-hidden\=true\]\)\:not\(\[data-variant\=outline\]\)\:not\(\[data-base-ui-focus-guard\]\)\:not\(\[aria-owns\]\)\:not\(\:first-child\)\:not\(\:hover\)\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\]\:border-l-transparent > :not([data-slot="buttons-group-separator"]):not([data-slot="buttons-group-text"]):not([data-variant="default"]):not([data-variant="primary"]):not([data-variant="destructive"]):not([aria-hidden="true"]):not([data-variant="outline"]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible)) {
     border-left-color: #0000;
   }
 
@@ -11561,6 +11662,10 @@
   --border2: oklch(100% 0 0 / .11);
   --surface-overlay-soft: oklch(100% 0 0 / .04);
   --surface-overlay-strong: oklch(100% 0 0 / .07);
+  --button-default-bg: var(--surface5);
+  --button-default-bg-hover: var(--surface6);
+  --button-default-bg-active: var(--surface4);
+  --button-default-border: var(--border1);
   --surface-header: oklch(15% 0 0);
   --surface-header-hover: oklch(19% 0 0);
   --surface-row-featured: oklch(100% 0 0 / .12);
@@ -11657,6 +11762,10 @@ html.light {
   --border2: oklch(20.8% 0 0 / .16);
   --surface-overlay-soft: oklch(20.8% 0 0 / .04);
   --surface-overlay-strong: oklch(20.8% 0 0 / .07);
+  --button-default-bg: var(--surface2);
+  --button-default-bg-hover: var(--surface5);
+  --button-default-bg-active: var(--surface5);
+  --button-default-border: var(--border2);
   --surface-header: oklch(92.6% 0 0);
   --surface-header-hover: oklch(90% 0 0);
   --surface-row-featured: oklch(20.8% 0 0 / .11);

package/dist/{switch-CRgSw0D1.js → switch-A-j7GDcX.js}

@@ -1,10 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
 import * as React from 'react';
-import './focus.css';import './switch.css';/* empty css               */
 import { c as cn } from './cn-ByEbywDh.js';
 
-const Switch = React.forwardRef(
+import './switch.css';const Switch = React.forwardRef(
   ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {
     const shouldRenderStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
     const shouldRenderIcon = icon !== void 0 || shouldRenderStateIcons;
@@ -22,7 +21,7 @@ const Switch = React.forwardRef(
           "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
           "hover:bg-neutral6/[0.18]",
           "active:bg-neutral6/[0.22]",
-          "ds-focus ds-focus-orbit ds-focus-within",
+          "focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid",
           "data-[checked]:bg-neutral6/[0.92]",
           "data-[checked]:hover:bg-neutral6",
           "data-[checked]:active:bg-neutral5",
@@ -101,4 +100,4 @@ function SwitchThumbIcon({
 }
 
 export { Switch as S };
-//# sourceMappingURL=switch-CRgSw0D1.js.map
+//# sourceMappingURL=switch-A-j7GDcX.js.map

package/dist/switch-A-j7GDcX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-A-j7GDcX.js","sources":["../src/ds/components/Switch/switch.tsx"],"sourcesContent":["import { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport './switch.css';\n\ntype SwitchProps = Omit<SwitchPrimitive.Root.Props, 'className'> & {\n  className?: string;\n  /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n  asChild?: boolean;\n  icon?: React.ReactNode;\n  checkedIcon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n};\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ className, asChild, children, icon, checkedIcon, uncheckedIcon, ...props }, ref) => {\n    const shouldRenderStateIcons = checkedIcon !== undefined || uncheckedIcon !== undefined;\n    const shouldRenderIcon = icon !== undefined || shouldRenderStateIcons;\n\n    const singleIcon = shouldRenderStateIcons ? undefined : icon;\n    const onIcon = checkedIcon ?? icon;\n    const offIcon = uncheckedIcon ?? icon;\n\n    // Base UI's Switch.Root defaults to a `<span>` and forwards `id` to its\n    // hidden checkbox input. Render a native `<button>` (with `nativeButton`) so\n    // the consumer's `id` — and the click target — lands on the visible control,\n    // matching the previous Radix behavior.\n    const renderProps =\n      asChild && React.isValidElement(children)\n        ? { render: children as React.ReactElement }\n        : { render: <button type=\"button\" />, nativeButton: true };\n\n    return (\n      <SwitchPrimitive.Root\n        ref={ref}\n        data-slot=\"switch\"\n        className={cn(\n          'peer group/switch inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-0 bg-neutral6/[0.14] p-0.5 outline-hidden',\n          'transition-colors duration-normal ease-out-custom motion-reduce:transition-none',\n          'hover:bg-neutral6/[0.18]',\n          'active:bg-neutral6/[0.22]',\n          'focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid',\n          'data-[checked]:bg-neutral6/[0.92]',\n          'data-[checked]:hover:bg-neutral6',\n          'data-[checked]:active:bg-neutral5',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:bg-neutral6/[0.16] data-[disabled]:hover:bg-neutral6/[0.16]',\n          'data-[disabled]:data-[checked]:bg-neutral6/[0.3] data-[disabled]:data-[checked]:hover:bg-neutral6/[0.3]',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n        <SwitchPrimitive.Thumb\n          data-slot=\"switch-thumb\"\n          className={cn(\n            'switch-thumb-motion pointer-events-none relative block h-4 w-5 rounded-full bg-neutral6',\n            'transition-[background-color,translate,width,transform] duration-normal ease-out-custom motion-reduce:transition-none',\n            'group-active/switch:w-6 group-data-[disabled]/switch:w-5',\n            'data-[checked]:translate-x-3 data-[checked]:bg-surface1 data-[unchecked]:translate-x-0',\n            'group-active/switch:data-[checked]:translate-x-2',\n            'data-[disabled]:data-[checked]:bg-surface1/80 data-[disabled]:data-[unchecked]:bg-neutral6/[0.42]',\n          )}\n        >\n          {shouldRenderIcon ? <SwitchThumbIcon checkedIcon={onIcon} icon={singleIcon} uncheckedIcon={offIcon} /> : null}\n        </SwitchPrimitive.Thumb>\n      </SwitchPrimitive.Root>\n    );\n  },\n);\nSwitch.displayName = 'Switch';\n\nfunction SwitchThumbIcon({\n  checkedIcon,\n  icon,\n  uncheckedIcon,\n}: {\n  checkedIcon?: React.ReactNode;\n  icon?: React.ReactNode;\n  uncheckedIcon?: React.ReactNode;\n}) {\n  const iconClassName = cn(\n    'absolute inset-0 flex items-center justify-center text-surface1',\n    'transition-[color,opacity] duration-normal ease-out-custom motion-reduce:transition-none',\n    '[&_svg]:stroke-2.5 [&_svg]:size-2.5',\n  );\n\n  if (icon !== undefined) {\n    return (\n      <span\n        aria-hidden\n        data-slot=\"switch-thumb-icon\"\n        className={cn(iconClassName, 'group-data-[checked]/switch:text-neutral6')}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      {uncheckedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"unchecked\"\n          className={cn(iconClassName, 'opacity-100 group-data-[checked]/switch:opacity-0')}\n        >\n          {uncheckedIcon}\n        </span>\n      ) : null}\n      {checkedIcon !== undefined ? (\n        <span\n          aria-hidden\n          data-slot=\"switch-thumb-icon\"\n          data-switch-icon=\"checked\"\n          className={cn(iconClassName, 'text-neutral6 opacity-0 group-data-[checked]/switch:opacity-100')}\n        >\n          {checkedIcon}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { Switch };\nexport type { SwitchProps };\n"],"names":["SwitchPrimitive"],"mappings":"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"}

package/dist/{switch-CsnP5CNn.cjs → switch-BROLIeGF.cjs}

@@ -1,9 +1,8 @@
 'use strict';
 
-require('./focus.css');require('./switch.css');const jsxRuntime = require('react/jsx-runtime');
+require('./switch.css');const jsxRuntime = require('react/jsx-runtime');
 const _switch = require('@base-ui/react/switch');
 const React = require('react');
-;/* empty css                 */
 const utils_cn = require('./cn-DnbTIGXa.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -43,7 +42,7 @@ const Switch = React__namespace.forwardRef(
           "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
           "hover:bg-neutral6/[0.18]",
           "active:bg-neutral6/[0.22]",
-          "ds-focus ds-focus-orbit ds-focus-within",
+          "focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-neutral5/55 focus-visible:outline-solid",
           "data-[checked]:bg-neutral6/[0.92]",
           "data-[checked]:hover:bg-neutral6",
           "data-[checked]:active:bg-neutral5",
@@ -122,4 +121,4 @@ function SwitchThumbIcon({
 }
 
 exports.Switch = Switch;
-//# sourceMappingURL=switch-CsnP5CNn.cjs.map
+//# sourceMappingURL=switch-BROLIeGF.cjs.map