@base-ui/react 1.1.0 → 1.3.0

package/esm/toast/title/ToastTitle.js

@@ -21,14 +21,12 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
     ...elementProps
   } = componentProps;
   const {
-    toast
+    toast,
+    setTitleId
   } = useToastRootContext();
   const children = childrenProp ?? toast.title;
   const shouldRender = Boolean(children);
   const id = useId(idProp);
-  const {
-    setTitleId
-  } = useToastRootContext();
   useIsoLayoutEffect(() => {
     if (!shouldRender) {
       return undefined;
@@ -38,9 +36,9 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
       setTitleId(undefined);
     };
   }, [shouldRender, id, setTitleId]);
-  const state = React.useMemo(() => ({
+  const state = {
     type: toast.type
-  }), [toast.type]);
+  };
   const element = useRenderElement('h2', componentProps, {
     ref: forwardedRef,
     state,

package/esm/toast/useToastManager.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { ToastContext } from "./provider/ToastProviderContext.js";
 import type { ToastPositionerProps } from "./positioner/ToastPositioner.js";
 /**
  * Returns the array of toasts and methods to manage them.
  */
-export declare function useToastManager(): UseToastManagerReturnValue;
+export declare function useToastManager<Data extends object = any>(): UseToastManagerReturnValue<Data>;
 export interface ToastObject<Data extends object> {
   /**
    * The unique identifier for the toast.
@@ -13,7 +12,7 @@ export interface ToastObject<Data extends object> {
   /**
    * The ref for the toast.
    */
-  ref?: React.RefObject<HTMLElement | null>;
+  ref?: React.RefObject<HTMLElement | null> | undefined;
   /**
    * The title of the toast.
    */
@@ -22,7 +21,7 @@ export interface ToastObject<Data extends object> {
    * The type of the toast. Used to conditionally style the toast,
    * including conditionally rendering elements based on the type.
    */
-  type?: string;
+  type?: string | undefined;
   /**
    * The description of the toast.
    */
@@ -32,14 +31,14 @@ export interface ToastObject<Data extends object> {
    * A value of `0` will prevent the toast from being dismissed automatically.
    * @default 5000
    */
-  timeout?: number;
+  timeout?: number | undefined;
   /**
    * The priority of the toast.
    * - `low` - The toast will be announced politely.
    * - `high` - The toast will be announced urgently.
    * @default 'low'
    */
-  priority?: 'low' | 'high';
+  priority?: 'low' | 'high' | undefined;
   /**
    * The transition status of the toast.
    */
@@ -47,49 +46,49 @@ export interface ToastObject<Data extends object> {
   /**
    * Determines if the toast was closed due to the limit being reached.
    */
-  limited?: boolean;
+  limited?: boolean | undefined;
   /**
    * The height of the toast.
    */
-  height?: number;
+  height?: number | undefined;
   /**
    * Callback function to be called when the toast is closed.
    */
-  onClose?: () => void;
+  onClose?: (() => void) | undefined;
   /**
    * Callback function to be called when the toast is removed from the list after any animations are complete when closed.
    */
-  onRemove?: () => void;
+  onRemove?: (() => void) | undefined;
   /**
    * The props for the action button.
    */
-  actionProps?: React.ComponentPropsWithoutRef<'button'>;
+  actionProps?: React.ComponentPropsWithoutRef<'button'> | undefined;
   /**
    * The props forwarded to the toast positioner element when rendering anchored toasts.
    */
-  positionerProps?: ToastManagerPositionerProps;
+  positionerProps?: ToastManagerPositionerProps | undefined;
   /**
    * Custom data for the toast.
    */
-  data?: Data;
+  data?: Data | undefined;
 }
 export interface ToastManagerPositionerProps extends Omit<ToastPositionerProps, 'anchor' | 'toast'> {
   /**
    * An element to position the toast against.
    */
-  anchor?: Element | null;
+  anchor?: Element | null | undefined;
 }
-export interface UseToastManagerReturnValue {
-  toasts: ToastContext<any>['toasts'];
-  add: <Data extends object>(options: ToastManagerAddOptions<Data>) => string;
-  close: (toastId: string) => void;
-  update: <Data extends object>(toastId: string, options: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value, Data extends object>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
+export interface UseToastManagerReturnValue<Data extends object = any> {
+  toasts: ToastObject<Data>[];
+  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
+  close: (toastId?: string) => void;
+  update: <T extends Data = Data>(toastId: string, options: ToastManagerUpdateOptions<T>) => void;
+  promise: <Value, T extends Data = Data>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
 export interface ToastManagerAddOptions<Data extends object> extends Omit<ToastObject<Data>, 'id' | 'animation' | 'height' | 'ref' | 'limited'> {
-  id?: string;
+  id?: string | undefined;
 }
-export interface ToastManagerUpdateOptions<Data extends object> extends Partial<ToastManagerAddOptions<Data>> {}
+export interface ToastManagerUpdateOptions<Data extends object> extends Partial<Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited'>> {}
 export interface ToastManagerPromiseOptions<Value, Data extends object> {
   loading: string | ToastManagerUpdateOptions<Data>;
   success: string | ToastManagerUpdateOptions<Data> | ((result: Value) => string | ToastManagerUpdateOptions<Data>);

package/esm/toast/useToastManager.js

@@ -7,22 +7,16 @@ import { ToastContext } from "./provider/ToastProviderContext.js";
  * Returns the array of toasts and methods to manage them.
  */
 export function useToastManager() {
-  const context = React.useContext(ToastContext);
-  if (!context) {
+  const store = React.useContext(ToastContext);
+  if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : _formatErrorMessage(73));
   }
-  const {
-    toasts,
-    add,
-    close,
-    update,
-    promise
-  } = context;
+  const toasts = store.useState('toasts');
   return React.useMemo(() => ({
     toasts,
-    add,
-    close,
-    update,
-    promise
-  }), [toasts, add, close, update, promise]);
+    add: store.addToast,
+    close: store.closeToast,
+    update: store.updateToast,
+    promise: store.promiseToast
+  }), [toasts, store]);
 }

package/esm/toast/viewport/ToastViewport.d.ts

@@ -13,7 +13,7 @@ export interface ToastViewportState {
    */
   expanded: boolean;
 }
-export interface ToastViewportProps extends BaseUIComponentProps<'div', ToastViewport.State> {}
+export interface ToastViewportProps extends BaseUIComponentProps<'div', ToastViewportState> {}
 export declare namespace ToastViewport {
   type State = ToastViewportState;
   type Props = ToastViewportProps;

package/esm/toast/viewport/ToastViewport.js

@@ -3,10 +3,10 @@
 import * as React from 'react';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { useTimeout } from '@base-ui/utils/useTimeout';
 import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { ToastViewportContext } from "./ToastViewportContext.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { isFocusVisible } from "../utils/focusVisible.js";
 import { ToastViewportCssVars } from "./ToastViewportCssVars.js";
@@ -25,76 +25,69 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     children,
     ...elementProps
   } = componentProps;
-  const {
-    toasts,
-    pauseTimers,
-    resumeTimers,
-    setHovering,
-    setFocused,
-    viewportRef,
-    windowFocusedRef,
-    prevFocusElement,
-    setPrevFocusElement,
-    expanded,
-    focused
-  } = useToastContext();
+  const store = useToastProviderContext();
+  const windowFocusTimeout = useTimeout();
   const handlingFocusGuardRef = React.useRef(false);
   const markedReadyForMouseLeaveRef = React.useRef(false);
-  const numToasts = toasts.length;
+  const isEmpty = store.useState('isEmpty');
+  const toasts = store.useState('toasts');
+  const focused = store.useState('focused');
+  const expanded = store.useState('expanded');
+  const prevFocusElement = store.useState('prevFocusElement');
   const frontmostHeight = toasts[0]?.height ?? 0;
   const hasTransitioningToasts = React.useMemo(() => toasts.some(toast => toast.transitionStatus === 'ending'), [toasts]);
 
   // Listen globally for F6 so we can force-focus the viewport.
   React.useEffect(() => {
-    if (!viewportRef.current) {
+    const viewport = store.state.viewport;
+    if (!viewport) {
       return undefined;
     }
     function handleGlobalKeyDown(event) {
-      if (numToasts === 0) {
+      if (isEmpty) {
         return;
       }
-      if (event.key === 'F6' && event.target !== viewportRef.current) {
+      if (event.key === 'F6' && event.target !== viewport) {
         event.preventDefault();
-        setPrevFocusElement(activeElement(ownerDocument(viewportRef.current)));
-        viewportRef.current?.focus({
+        store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
+        viewport?.focus({
           preventScroll: true
         });
-        pauseTimers();
-        setFocused(true);
+        store.pauseTimers();
+        store.setFocused(true);
       }
     }
-    const win = ownerWindow(viewportRef.current);
+    const win = ownerWindow(viewport);
     win.addEventListener('keydown', handleGlobalKeyDown);
     return () => {
       win.removeEventListener('keydown', handleGlobalKeyDown);
     };
-  }, [pauseTimers, setFocused, setPrevFocusElement, numToasts, viewportRef]);
+  }, [store, isEmpty]);
   React.useEffect(() => {
-    if (!viewportRef.current || !numToasts) {
+    const viewport = store.state.viewport;
+    if (!viewport || isEmpty) {
       return undefined;
     }
-    const win = ownerWindow(viewportRef.current);
+    const win = ownerWindow(viewport);
     function handleWindowBlur(event) {
       if (event.target !== win) {
         return;
       }
-      windowFocusedRef.current = false;
-      pauseTimers();
+      store.setIsWindowFocused(false);
+      store.pauseTimers();
     }
     function handleWindowFocus(event) {
       if (event.relatedTarget || event.target === win) {
         return;
       }
       const target = getTarget(event);
-      const activeEl = activeElement(ownerDocument(viewportRef.current));
-      if (!contains(viewportRef.current, target) || !isFocusVisible(activeEl)) {
-        resumeTimers();
+      const activeEl = activeElement(ownerDocument(viewport));
+      if (!contains(viewport, target) || !isFocusVisible(activeEl)) {
+        store.resumeTimers();
       }
 
       // Wait for the `handleFocus` event to fire.
-      setTimeout(() => {
-        windowFocusedRef.current = true;
-      });
+      windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
     }
     win.addEventListener('blur', handleWindowBlur, true);
     win.addEventListener('focus', handleWindowFocus, true);
@@ -102,84 +95,69 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       win.removeEventListener('blur', handleWindowBlur, true);
       win.removeEventListener('focus', handleWindowFocus, true);
     };
-  }, [pauseTimers, resumeTimers, viewportRef, windowFocusedRef, setFocused,
-  // `viewportRef.current` isn't available on the first render,
+  }, [store, windowFocusTimeout,
+  // `store.state.viewport` isn't available on the first render,
   // since the portal node hasn't yet been created.
   // By adding this dependency, we ensure the window listeners
   // are added when toasts have been created, once the ref is available.
-  numToasts]);
+  isEmpty]);
   React.useEffect(() => {
-    const viewportNode = viewportRef.current;
-    if (!viewportNode || numToasts === 0) {
+    const viewport = store.state.viewport;
+    if (!viewport || isEmpty) {
       return undefined;
     }
-    const doc = ownerDocument(viewportNode);
-    function handlePointerDown(event) {
-      if (event.pointerType !== 'touch') {
-        return;
-      }
-      const target = getTarget(event);
-      if (contains(viewportNode, target)) {
-        return;
-      }
-      resumeTimers();
-      setHovering(false);
-      setFocused(false);
-    }
-    doc.addEventListener('pointerdown', handlePointerDown, true);
+    const doc = ownerDocument(viewport);
+    doc.addEventListener('pointerdown', store.handleDocumentPointerDown, true);
     return () => {
-      doc.removeEventListener('pointerdown', handlePointerDown, true);
+      doc.removeEventListener('pointerdown', store.handleDocumentPointerDown, true);
     };
-  }, [numToasts, resumeTimers, setFocused, setHovering, viewportRef]);
+  }, [isEmpty, store]);
   function handleFocusGuard(event) {
-    if (!viewportRef.current) {
+    const viewport = store.state.viewport;
+    if (!viewport) {
       return;
     }
     handlingFocusGuardRef.current = true;
 
     // If we're coming off the container, move to the first toast
-    if (event.relatedTarget === viewportRef.current) {
+    if (event.relatedTarget === viewport) {
       toasts[0]?.ref?.current?.focus();
     } else {
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
+      store.restoreFocusToPrevElement();
     }
   }
   function handleKeyDown(event) {
-    if (event.key === 'Tab' && event.shiftKey && event.target === viewportRef.current) {
+    if (event.key === 'Tab' && event.shiftKey && event.target === store.state.viewport) {
       event.preventDefault();
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
-      resumeTimers();
+      store.restoreFocusToPrevElement();
+      store.resumeTimers();
     }
   }
   React.useEffect(() => {
-    if (!windowFocusedRef.current || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
+    if (!store.state.isWindowFocused || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
       return;
     }
 
     // Once transitions have finished, see if a mouseleave was already triggered
     // but blocked from taking effect. If so, we can now safely resume timers and
     // collapse the viewport.
-    resumeTimers();
-    setHovering(false);
+    store.resumeTimers();
+    store.setHovering(false);
     markedReadyForMouseLeaveRef.current = false;
-  }, [hasTransitioningToasts, resumeTimers, setHovering, windowFocusedRef]);
+  }, [hasTransitioningToasts, store]);
   function handleMouseEnter() {
-    pauseTimers();
-    setHovering(true);
+    store.pauseTimers();
+    store.setHovering(true);
     markedReadyForMouseLeaveRef.current = false;
   }
   function handleMouseLeave() {
-    if (toasts.some(toast => toast.transitionStatus === 'ending')) {
+    if (hasTransitioningToasts) {
       // When swiping to dismiss, wait until the transitions have settled
       // to avoid the viewport collapsing while the user is interacting.
       markedReadyForMouseLeaveRef.current = true;
     } else {
-      resumeTimers();
-      setHovering(false);
+      store.resumeTimers();
+      store.setHovering(false);
     }
   }
   function handleFocus() {
@@ -194,17 +172,17 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     // Only set focused when the active element is focus-visible.
     // This prevents the viewport from staying expanded when clicking inside without
     // keyboard navigation.
-    if (isFocusVisible(ownerDocument(viewportRef.current).activeElement)) {
-      setFocused(true);
-      pauseTimers();
+    if (isFocusVisible(ownerDocument(store.state.viewport).activeElement)) {
+      store.setFocused(true);
+      store.pauseTimers();
     }
   }
   function handleBlur(event) {
-    if (!focused || contains(viewportRef.current, event.relatedTarget)) {
+    if (!focused || contains(store.state.viewport, event.relatedTarget)) {
       return;
     }
-    setFocused(false);
-    resumeTimers();
+    store.setFocused(false);
+    store.resumeTimers();
   }
   const defaultProps = {
     tabIndex: -1,
@@ -221,11 +199,11 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     onKeyDown: handleKeyDown,
     onClick: handleFocus
   };
-  const state = React.useMemo(() => ({
+  const state = {
     expanded
-  }), [expanded]);
+  };
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, viewportRef],
+    ref: [forwardedRef, store.setViewport],
     state,
     props: [defaultProps, {
       style: {
@@ -233,21 +211,17 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       }
     }, elementProps, {
       children: /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [numToasts > 0 && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+        children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
           onFocus: handleFocusGuard
-        }), children, numToasts > 0 && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+        }), children, !isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
           onFocus: handleFocusGuard
         })]
       })
     }]
   });
-  const contextValue = React.useMemo(() => ({
-    viewportRef
-  }), [viewportRef]);
   const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
-  return /*#__PURE__*/_jsxs(ToastViewportContext.Provider, {
-    value: contextValue,
-    children: [numToasts > 0 && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
       onFocus: handleFocusGuard
     }), element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/_jsx("div", {
       style: visuallyHidden,

package/esm/toggle/Toggle.d.ts

@@ -8,7 +8,9 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Toggle](https://base-ui.com/react/components/toggle)
  */
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Toggle: {
+  <Value extends string>(props: Toggle.Props<Value> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+};
 export interface ToggleState {
   /**
    * Whether the toggle is currently pressed.
@@ -19,38 +21,38 @@ export interface ToggleState {
    */
   disabled: boolean;
 }
-export interface ToggleProps extends NativeButtonProps, BaseUIComponentProps<'button', Toggle.State> {
+export interface ToggleProps<Value extends string> extends NativeButtonProps, BaseUIComponentProps<'button', ToggleState> {
   /**
    * Whether the toggle button is currently pressed.
    * This is the controlled counterpart of `defaultPressed`.
    */
-  pressed?: boolean;
+  pressed?: boolean | undefined;
   /**
    * Whether the toggle button is currently pressed.
    * This is the uncontrolled counterpart of `pressed`.
    * @default false
    */
-  defaultPressed?: boolean;
+  defaultPressed?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Callback fired when the pressed state is changed.
    */
-  onPressedChange?: (pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void;
+  onPressedChange?: ((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void) | undefined;
   /**
    * A unique string that identifies the toggle when used
    * inside a toggle group.
    */
-  value?: string;
+  value?: Value | undefined;
 }
 export type ToggleChangeEventReason = typeof REASONS.none;
 export type ToggleChangeEventDetails = BaseUIChangeEventDetails<Toggle.ChangeEventReason>;
 export declare namespace Toggle {
   type State = ToggleState;
-  type Props = ToggleProps;
+  type Props<TValue extends string = string> = ToggleProps<TValue>;
   type ChangeEventReason = ToggleChangeEventReason;
   type ChangeEventDetails = ToggleChangeEventDetails;
 }

package/esm/toggle/Toggle.js

@@ -3,6 +3,8 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { error } from '@base-ui/utils/error';
 import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { useRenderElement } from "../utils/useRenderElement.js";
 import { useToggleGroupContext } from "../toggle-group/ToggleGroupContext.js";
@@ -41,8 +43,16 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
   const groupValue = groupContext?.value ?? [];
   const defaultPressed = groupContext ? undefined : defaultPressedProp;
   const disabled = (disabledProp || groupContext?.disabled) ?? false;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      if (groupContext && valueProp === undefined && groupContext.isValueInitialized) {
+        error('A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.', 'This will cause issues between the Toggle Group and Toggle values.', 'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.');
+      }
+    }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  }
   const [pressed, setPressedState] = useControlled({
-    controlled: groupContext ? groupValue?.indexOf(value) > -1 : pressedProp,
+    controlled: groupContext ? value !== undefined && groupValue.indexOf(value) > -1 : pressedProp,
     default: defaultPressed,
     name: 'Toggle',
     state: 'pressed'
@@ -60,10 +70,10 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     pressed
-  }), [disabled, pressed]);
+  };
   const refs = [buttonRef, forwardedRef];
   const props = [{
     'aria-pressed': pressed,

package/esm/toggle-group/ToggleGroup.d.ts

@@ -7,59 +7,71 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
  */
-export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ToggleGroup: {
+  <Value extends string>(props: ToggleGroup.Props<Value> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+};
 export interface ToggleGroupState {
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
   multiple: boolean;
+  /**
+   * The orientation of the toggle group.
+   */
+  orientation: Orientation;
 }
-export interface ToggleGroupProps extends BaseUIComponentProps<'div', ToggleGroup.State> {
+export interface ToggleGroupProps<Value extends string> extends BaseUIComponentProps<'div', ToggleGroupState> {
   /**
    * The open state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the controlled counterpart of `defaultValue`.
    */
-  value?: readonly any[];
+  value?: readonly Value[] | undefined;
   /**
    * The open state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the uncontrolled counterpart of `value`.
    */
-  defaultValue?: readonly any[];
+  defaultValue?: readonly Value[] | undefined;
   /**
    * Callback fired when the pressed states of the toggle group changes.
    */
-  onValueChange?: (groupValue: any[], eventDetails: ToggleGroup.ChangeEventDetails) => void;
+  onValueChange?: ((groupValue: Value[], eventDetails: ToggleGroup.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the toggle group should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * @default 'horizontal'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * When `false` only one item in the group can be pressed. If any item in
    * the group becomes pressed, the others will become unpressed.
    * When `true` multiple items can be pressed.
    * @default false
    */
-  multiple?: boolean;
+  multiple?: boolean | undefined;
 }
 export type ToggleGroupChangeEventReason = typeof REASONS.none;
 export type ToggleGroupChangeEventDetails = BaseUIChangeEventDetails<ToggleGroup.ChangeEventReason>;
 export declare namespace ToggleGroup {
   type State = ToggleGroupState;
-  type Props = ToggleGroupProps;
+  type Props<Value extends string = string> = ToggleGroupProps<Value>;
   type ChangeEventReason = ToggleGroupChangeEventReason;
   type ChangeEventDetails = ToggleGroupChangeEventDetails;
 }