@kushagradhawan/kookie-ui 0.1.71 → 0.1.72

package/src/components/_internal/base-button.tsx

@@ -83,9 +83,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
   // This helps developers migrate to the new material prop
   React.useEffect(() => {
     if (props.panelBackground !== undefined) {
-      console.warn(
-        'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
-      );
+      console.warn('Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.');
     }
   }, [props.panelBackground]);
 
@@ -96,6 +94,10 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
   // This prevents layout thrashing when using translucent materials
   const buttonRef = React.useRef<HTMLElement>(null);
 
+  // Use a ref to track current material value to avoid stale closures in setTimeout
+  const materialRef = React.useRef(effectiveMaterial);
+  materialRef.current = effectiveMaterial;
+
   React.useEffect(() => {
     const button = buttonRef.current;
     if (!button) return;
@@ -106,14 +108,17 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       // Add will-change when material is translucent to optimize rendering
       button.style.setProperty('will-change', 'backdrop-filter');
 
+      // Track timeout for cleanup
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
       // Clean up will-change after transition completes to prevent memory leaks
       const cleanup = () => {
-        const transitionDuration =
-          getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';
+        const transitionDuration = getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';
         const duration = parseInt(transitionDuration) || 75;
 
-        setTimeout(() => {
-          if (button && effectiveMaterial !== 'translucent') {
+        timeoutId = setTimeout(() => {
+          // Use ref to get current value, not stale closure value
+          if (button && materialRef.current !== 'translucent') {
             button.style.setProperty('will-change', 'auto');
           }
         }, duration);
@@ -124,6 +129,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
       observer.observe(button, { attributes: true, attributeFilter: ['data-material'] });
 
       return () => {
+        if (timeoutId) clearTimeout(timeoutId);
         observer.disconnect();
         button.style.setProperty('will-change', 'auto');
       };
@@ -138,8 +144,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
 
   // Only pass disabled for elements that support it
   // This prevents invalid HTML attributes on unsupported elements
-  const shouldPassDisabled =
-    asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
+  const shouldPassDisabled = asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
 
   // Determine if we are rendering a real <button> element so we can set a safe
   // default type. Native <button> defaults to type="submit" which can cause
@@ -221,10 +226,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props,
           {/* Centered spinner overlay during loading state */}
           <Flex asChild align="center" justify="center" position="absolute" inset="0">
             <span>
-              <Spinner
-                size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)}
-                aria-hidden="true"
-              />
+              <Spinner size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} aria-hidden="true" />
             </span>
           </Flex>
         </>

package/src/components/button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
+import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 /**
@@ -84,9 +85,7 @@ type ButtonProps<C extends React.ElementType = 'button'> = ButtonOwnProps & {
  * Button component type that supports polymorphic rendering
  * @template C - The element type to render as
  */
-type ButtonComponent = <C extends React.ElementType = 'button'>(
-  props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> },
-) => React.ReactElement | null;
+type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & { ref?: React.ForwardedRef<ButtonElement> }) => React.ReactElement | null;
 
 /**
  * Button component for triggering actions throughout your interface
@@ -113,27 +112,11 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(
  */
 const Button = React.forwardRef(
   (
-    {
-      className,
-      tooltip,
-      tooltipSide = 'top',
-      tooltipAlign = 'center',
-      tooltipDelayDuration,
-      tooltipDisableHoverableContent,
-      overrideStyles,
-      ...props
-    }: ButtonProps,
+    { className, style, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, overrideStyles, ...props }: ButtonProps,
     forwardedRef: React.ForwardedRef<ButtonElement>,
   ) => {
-    // Generate unique ID for tooltip accessibility
-    const tooltipId = React.useId();
-    const hasTooltip = Boolean(tooltip);
-
-    // Prepare accessibility props for tooltip integration
-    const tooltipAccessibilityProps = React.useMemo(
-      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
-      [hasTooltip, tooltipId],
-    );
+    // Use shared tooltip wrapper hook for accessibility props
+    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
 
     // Create the base button element with tooltip accessibility props
     // Map overrideStyles to CSS variables consumed by the override variant rules
@@ -152,7 +135,7 @@ const Button = React.forwardRef(
         setVar(`--button-override-${prefix}filter`, s.filter);
         setVar(`--button-override-${prefix}outline`, s.outline);
         setVar(`--button-override-${prefix}outline-offset`, s.outlineOffset);
-        setVar(`--button-override-${prefix}opacity`, s.opacity as any);
+        setVar(`--button-override-${prefix}opacity`, s.opacity);
       };
 
       apply('', overrideStyles.normal);
@@ -167,35 +150,23 @@ const Button = React.forwardRef(
         setVar('--button-override-focus-outline-offset', overrideStyles.focus.outlineOffset);
       }
 
-      return vars as unknown as React.CSSProperties;
+      return vars as React.CSSProperties;
     }, [overrideStyles]);
 
-    const button = (
-      <BaseButton
-        {...props}
-        {...tooltipAccessibilityProps}
-        ref={forwardedRef}
-        className={classNames('rt-Button', className)}
-        style={overrideVars ? { ...overrideVars, ...(props as any).style } : (props as any).style}
-      />
-    );
+    // Combine override styles with user-provided styles
+    const combinedStyle = React.useMemo(() => (overrideVars ? { ...overrideVars, ...style } : style), [overrideVars, style]);
+
+    const button = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-Button', className)} style={combinedStyle} />;
 
     // If no tooltip is provided, return the button as-is for better performance
-    if (!tooltip) {
+    if (!hasTooltip) {
       return button;
     }
 
     // Wrap with Tooltip when tooltip content is provided
     // This creates a compound component that handles both button and tooltip functionality
     return (
-      <Tooltip
-        content={tooltip}
-        side={tooltipSide}
-        align={tooltipAlign}
-        delayDuration={tooltipDelayDuration}
-        disableHoverableContent={tooltipDisableHoverableContent}
-        id={tooltipId}
-      >
+      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
         {button}
       </Tooltip>
     );

package/src/components/chatbar.tsx

@@ -1130,19 +1130,7 @@ type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby'> & {
 };
 
 const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef) => {
-  const {
-    asChild,
-    clearOnSend = true,
-    disabled,
-    children,
-    className,
-    style,
-    size: sizeProp,
-    variant: variantProp,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    ...buttonProps
-  } = props;
+  const { asChild, clearOnSend = true, disabled, children, className, style, size: sizeProp, variant: variantProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...buttonProps } = props;
   const ctx = useChatbarContext();
 
   const trimmed = ctx.value.trim();

package/src/components/icon-button.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { BaseButton } from './_internal/base-button.js';
 import { Tooltip } from './tooltip.js';
+import { useTooltipWrapper } from '../hooks/use-tooltip-wrapper.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
@@ -57,9 +58,7 @@ type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProp
  * IconButton component type that supports polymorphic rendering
  * @template C - The element type to render as
  */
-type IconButtonComponent = <C extends React.ElementType = 'button'>(
-  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },
-) => React.ReactElement | null;
+type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> }) => React.ReactElement | null;
 
 /**
  * IconButton component for compact, accessible icon-only interactions
@@ -103,68 +102,45 @@ type IconButtonComponent = <C extends React.ElementType = 'button'>(
  */
 const IconButton = React.forwardRef(
   (
-    {
-      className,
-      tooltip,
-      tooltipSide = 'top',
-      tooltipAlign = 'center',
-      tooltipDelayDuration,
-      tooltipDisableHoverableContent,
-      ...props
-    }: IconButtonProps,
+    { className, tooltip, tooltipSide = 'top', tooltipAlign = 'center', tooltipDelayDuration, tooltipDisableHoverableContent, ...props }: IconButtonProps,
     forwardedRef: React.ForwardedRef<IconButtonElement>,
   ) => {
-    // Generate unique ID for tooltip accessibility
-    const tooltipId = React.useId();
+    // Use shared tooltip wrapper hook for accessibility props
+    const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
+
     // Runtime accessibility validation to ensure WCAG compliance
     // This helps catch accessibility issues during development
     const hasAriaLabel = 'aria-label' in props && props['aria-label'];
     const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];
     const hasChildren = 'children' in props && props.children;
 
-    // Throw descriptive error if no accessible name is provided
+    // Validate accessible name - throw in development, log error in production
     if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {
-      throw new Error(
+      const errorMessage =
         'IconButton: Icon buttons must have an accessible name. Please provide either:' +
-          '\n- aria-label prop with descriptive text' +
-          '\n- aria-labelledby prop referencing a label element' +
-          '\n- or visible text children',
-      );
-    }
+        '\n- aria-label prop with descriptive text' +
+        '\n- aria-labelledby prop referencing a label element' +
+        '\n- or visible text children';
 
-    // Prepare accessibility props for tooltip integration
-    const hasTooltip = Boolean(tooltip);
-    const tooltipAccessibilityProps = React.useMemo(
-      () => (hasTooltip ? { 'aria-describedby': tooltipId } : {}),
-      [hasTooltip, tooltipId],
-    );
+      if (process.env.NODE_ENV === 'development') {
+        throw new Error(errorMessage);
+      } else {
+        console.error(errorMessage);
+      }
+    }
 
     // Create the base icon button element with accessibility props
-    const iconButton = (
-      <BaseButton
-        {...props}
-        {...tooltipAccessibilityProps}
-        ref={forwardedRef}
-        className={classNames('rt-IconButton', className)}
-      />
-    );
+    const iconButton = <BaseButton {...props} {...tooltipAccessibilityProps} ref={forwardedRef} className={classNames('rt-IconButton', className)} />;
 
     // If no tooltip is provided, return the icon button as-is for better performance
-    if (!tooltip) {
+    if (!hasTooltip) {
       return iconButton;
     }
 
     // Wrap with Tooltip when tooltip content is provided
     // This creates a compound component that handles both button and tooltip functionality
     return (
-      <Tooltip
-        content={tooltip}
-        side={tooltipSide}
-        align={tooltipAlign}
-        delayDuration={tooltipDelayDuration}
-        disableHoverableContent={tooltipDisableHoverableContent}
-        id={tooltipId}
-      >
+      <Tooltip content={tooltip} side={tooltipSide} align={tooltipAlign} delayDuration={tooltipDelayDuration} disableHoverableContent={tooltipDisableHoverableContent} id={tooltipId}>
         {iconButton}
       </Tooltip>
     );

package/src/components/image.css

@@ -63,7 +63,7 @@
   .rt-Image {
     border: 1px solid CanvasText;
   }
-  
+
   /* Enhanced focus visibility in forced colors mode */
   .rt-Image:where(:focus-visible) {
     outline: 2px solid Highlight;
@@ -78,7 +78,9 @@
  */
 .rt-Image:where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+  transition:
+    var(--transition-card),
+    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* 
    * Hover effects with progressive enhancement
@@ -87,7 +89,7 @@
   @media (hover: hover) {
     &:where(:hover) {
       box-shadow: var(--shadow-3); /* Subtle elevation on hover */
-      filter: brightness(1.05) contrast(1.02); /* Slight brightness/contrast boost */
+      filter: brightness(1.08) contrast(1.02); /* Slight brightness/contrast boost */
     }
   }
 
@@ -116,13 +118,15 @@
  */
 :where(:any-link, button, label) {
   cursor: pointer;
-  transition: var(--transition-card), filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
+  transition:
+    var(--transition-card),
+    filter var(--motion-duration-small) var(--motion-ease-standard); /* Smooth transitions for interactive states */
 
   /* Hover effects for wrapper elements */
   @media (hover: hover) {
     &:where(:hover) {
       /* box-shadow: var(--shadow-3); */
-      filter: brightness(1.05) contrast(1.02);
+      filter: brightness(1.08) contrast(1.02);
     }
   }
 
@@ -141,8 +145,6 @@
   outline-offset: -2px;
 }
 
-
-
 /* 
  * Object-fit variants for responsive image scaling
  * These classes control how images are resized to fit their containers
@@ -217,7 +219,7 @@
   color: var(--gray-11); /* Subtle but readable color */
   margin-top: var(--space-2); /* Consistent spacing from image */
   text-align: center; /* Centered alignment for visual balance */
-  
+
   /* 
    * Text wrapping and hyphenation for better layout
    * Prevents caption text from breaking the layout

package/src/components/shell.tsx

@@ -450,17 +450,21 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   const peekCtxValue = React.useMemo(() => ({ peekTarget, setPeekTarget, peekPane, clearPeek }), [peekTarget, setPeekTarget, peekPane, clearPeek]);
   const actionsCtxValue = React.useMemo(() => ({ togglePane, expandPane, collapsePane, setSidebarToggleComputer }), [togglePane, expandPane, collapsePane, setSidebarToggleComputer]);
 
+  // Memoized full context value for ShellProvider to prevent unnecessary effect re-runs
+  const shellContextValue = React.useMemo(
+    () => ({
+      ...baseContextValue,
+      peekTarget,
+      setPeekTarget,
+      peekPane,
+      clearPeek,
+    }),
+    [baseContextValue, peekTarget, setPeekTarget, peekPane, clearPeek],
+  );
+
   return (
     <div {...props} ref={ref} className={classNames('rt-ShellRoot', className)} style={{ ...heightStyle, ...props.style }}>
-      <ShellProvider
-        value={{
-          ...baseContextValue,
-          peekTarget,
-          setPeekTarget,
-          peekPane,
-          clearPeek,
-        }}
-      >
+      <ShellProvider value={shellContextValue}>
         <PresentationContext.Provider value={presentationCtxValue}>
           <LeftModeContext.Provider value={leftModeCtxValue}>
             <PanelModeContext.Provider value={panelModeCtxValue}>

package/src/components/toggle-button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Toggle } from 'radix-ui';
 import { Button } from './button.js';
-import { useLiveAnnouncer } from '../hooks/use-live-announcer.js';
+import { useToggleState } from '../hooks/use-toggle-state.js';
 
 /**
  * ToggleButton props that extend Button with toggle-specific functionality
@@ -63,66 +63,37 @@ type ToggleButtonElement = React.ElementRef<typeof Button>;
  * </ToggleButton>
  * ```
  */
-const ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(
-  ({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {
-    // Get the live announcer for accessibility announcements
-    const announce = useLiveAnnouncer();
+const ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {
+  /**
+   * Extract accessible name from button content for announcements.
+   * This ensures screen readers announce meaningful state changes.
+   */
+  const getAccessibleName = React.useCallback(() => {
+    if (typeof children === 'string') return children;
+    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {
+      return (children.props as any).children;
+    }
+    return 'Toggle button';
+  }, [children]);
 
-    /**
-     * Extract accessible name from button content for announcements
-     * This ensures screen readers announce meaningful state changes
-     */
-    const getAccessibleName = React.useCallback(() => {
-      if (typeof children === 'string') return children;
-      if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {
-        return (children.props as any).children;
-      }
-      return 'Toggle button';
-    }, [children]);
+  // Use shared toggle state hook for accessibility announcements and warnings
+  const { handlePressedChange } = useToggleState({
+    pressed,
+    onPressedChange,
+    getAccessibleName,
+    componentName: 'ToggleButton',
+  });
 
-    /**
-     * Memoized handler for state changes with accessibility announcements
-     * This ensures screen readers announce the new state immediately
-     */
-    const handlePressedChange = React.useCallback(
-      (newPressed: boolean) => {
-        const accessibleName = getAccessibleName();
-        // Announce the state change for screen readers
-        announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);
-        // Call the user's change handler
-        onPressedChange?.(newPressed);
-      },
-      [announce, onPressedChange, getAccessibleName],
-    );
-
-    // Development-only warning for controlled/uncontrolled pattern
-    // This helps developers avoid common state management mistakes
-    React.useEffect(() => {
-      if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {
-        console.warn(
-          'ToggleButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +
-            'This will result in a read-only toggle button. If you want the button to be interactive, ' +
-            'you should provide an `onPressedChange` handler.',
-        );
-      }
-    }, [pressed, onPressedChange]);
-
-    // Render the toggle button using Radix UI's Toggle primitive
-    // This provides proper ARIA attributes and keyboard navigation
-    return (
-      <Toggle.Root
-        pressed={pressed}
-        onPressedChange={handlePressedChange}
-        defaultPressed={defaultPressed}
-        asChild
-      >
-        <Button {...buttonProps} ref={forwardedRef}>
-          {children}
-        </Button>
-      </Toggle.Root>
-    );
-  },
-);
+  // Render the toggle button using Radix UI's Toggle primitive
+  // This provides proper ARIA attributes and keyboard navigation
+  return (
+    <Toggle.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
+      <Button {...buttonProps} ref={forwardedRef}>
+        {children}
+      </Button>
+    </Toggle.Root>
+  );
+});
 ToggleButton.displayName = 'ToggleButton';
 
 export { ToggleButton };

package/src/components/toggle-icon-button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Toggle } from 'radix-ui';
 import { IconButton } from './icon-button.js';
 import { BaseButton } from './_internal/base-button.js';
-import { useLiveAnnouncer } from '../hooks/use-live-announcer.js';
+import { useToggleState } from '../hooks/use-toggle-state.js';
 import type { IconButtonProps } from './icon-button.js';
 
 type ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;
@@ -104,32 +104,34 @@ type ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & Accessibil
  * <span id="notifications-label">Toggle notifications</span>
  * ```
  */
-const ToggleIconButton = React.forwardRef<
-  ToggleIconButtonElement,
-  ToggleIconButtonPropsWithAccessibility
->(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {
-  // Get the live announcer for accessibility announcements
-  const announce = useLiveAnnouncer();
+const ToggleIconButton = React.forwardRef<ToggleIconButtonElement, ToggleIconButtonPropsWithAccessibility>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {
+  // Extract specific props for stable dependency array
+  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children } = iconButtonProps;
+
+  // Cache the label lookup from aria-labelledby to avoid repeated DOM queries
+  const cachedLabelRef = React.useRef<string | null>(null);
+
+  // Clear cached label when ariaLabelledBy changes
+  React.useEffect(() => {
+    cachedLabelRef.current = null;
+  }, [ariaLabelledBy]);
 
   /**
-   * Extract accessible name from various sources for announcements
-   * This ensures screen readers announce meaningful state changes
+   * Extract accessible name from various sources for announcements.
+   * This ensures screen readers announce meaningful state changes.
    * Priority: aria-label > aria-labelledby > children > fallback
    */
   const getAccessibleName = React.useCallback(() => {
-    const {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      children,
-    } = iconButtonProps;
-
     // First priority: direct aria-label
     if (ariaLabel) return ariaLabel;
 
-    // Second priority: referenced label element
+    // Second priority: referenced label element (cached)
     if (ariaLabelledBy) {
-      const labelElement = document.getElementById(ariaLabelledBy);
-      return labelElement?.textContent || 'Toggle icon button';
+      if (cachedLabelRef.current === null) {
+        const labelElement = document.getElementById(ariaLabelledBy);
+        cachedLabelRef.current = labelElement?.textContent || 'Toggle icon button';
+      }
+      return cachedLabelRef.current;
     }
 
     // Third priority: visible text children
@@ -140,45 +142,21 @@ const ToggleIconButton = React.forwardRef<
 
     // Fallback for edge cases
     return 'Toggle icon button';
-  }, [iconButtonProps]);
-
-  /**
-   * Memoized handler for state changes with accessibility announcements
-   * This ensures screen readers announce the new state immediately
-   */
-  const handlePressedChange = React.useCallback(
-    (newPressed: boolean) => {
-      const accessibleName = getAccessibleName();
-      // Announce the state change for screen readers
-      announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);
-      // Call the user's change handler
-      onPressedChange?.(newPressed);
-    },
-    [announce, onPressedChange, getAccessibleName],
-  );
+  }, [ariaLabel, ariaLabelledBy, children]);
 
-  // Development-only warning for controlled/uncontrolled pattern
-  // This helps developers avoid common state management mistakes
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {
-      console.warn(
-        'ToggleIconButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +
-          'This will result in a read-only toggle button. If you want the button to be interactive, ' +
-          'you should provide an `onPressedChange` handler.',
-      );
-    }
-  }, [pressed, onPressedChange]);
+  // Use shared toggle state hook for accessibility announcements and warnings
+  const { handlePressedChange } = useToggleState({
+    pressed,
+    onPressedChange,
+    getAccessibleName,
+    componentName: 'ToggleIconButton',
+  });
 
   // Render the toggle icon button using Radix UI's Toggle primitive
   // This provides proper ARIA attributes and keyboard navigation
   // The IconButton component handles accessibility validation internally
   return (
-    <Toggle.Root
-      pressed={pressed}
-      onPressedChange={handlePressedChange}
-      defaultPressed={defaultPressed}
-      asChild
-    >
+    <Toggle.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
       <IconButton {...iconButtonProps} ref={forwardedRef} />
     </Toggle.Root>
   );

package/src/hooks/index.ts

@@ -1,2 +1,4 @@
 export { useLiveAnnouncer } from './use-live-announcer.js';
 export { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';
+export { useTooltipWrapper } from './use-tooltip-wrapper.js';
+export { useToggleState } from './use-toggle-state.js';