@kushagradhawan/kookie-ui 0.1.70 → 0.1.72

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';

package/src/hooks/use-live-announcer.ts

@@ -1,15 +1,23 @@
 import * as React from 'react';
 
+/**
+ * Reference counter to track how many components are using the live region.
+ * Only remove the live region when no components are using it.
+ */
+let liveRegionRefCount = 0;
+
 /**
  * Hook for making live announcements to screen readers
  * Creates a hidden aria-live region for announcing dynamic content changes
  */
 export function useLiveAnnouncer() {
+  // Track the timeout so we can clean it up on unmount
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   // Create aria-live region if it doesn't exist
   React.useEffect(() => {
     let liveRegion = document.getElementById('rt-live-announcer');
-    
+
     if (!liveRegion) {
       liveRegion = document.createElement('div');
       liveRegion.id = 'rt-live-announcer';
@@ -27,10 +35,24 @@ export function useLiveAnnouncer() {
       document.body.appendChild(liveRegion);
     }
 
+    // Increment ref count when component mounts
+    liveRegionRefCount++;
+
     return () => {
-      // Clean up on unmount if no other components are using it
-      if (liveRegion && !liveRegion.hasChildNodes()) {
-        liveRegion.remove();
+      // Decrement ref count when component unmounts
+      liveRegionRefCount--;
+
+      // Clean up timeout on unmount
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Only remove the live region if no components are using it
+      if (liveRegionRefCount === 0) {
+        const region = document.getElementById('rt-live-announcer');
+        if (region) {
+          region.remove();
+        }
       }
     };
   }, []);
@@ -38,15 +60,20 @@ export function useLiveAnnouncer() {
   const announce = React.useCallback((message: string) => {
     const liveRegion = document.getElementById('rt-live-announcer');
     if (liveRegion) {
+      // Clear any pending timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
       // Clear previous announcements
       liveRegion.textContent = '';
-      
+
       // Add new announcement with a small delay to ensure it's announced
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         liveRegion.textContent = message;
       }, 100);
     }
   }, []);
 
   return announce;
-} 
+}

package/src/hooks/use-toggle-state.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { useLiveAnnouncer } from './use-live-announcer.js';
+
+/**
+ * Options for the useToggleState hook
+ */
+interface UseToggleStateOptions {
+  /** Controlled pressed state */
+  pressed?: boolean;
+  /** Callback when pressed state changes */
+  onPressedChange?: (pressed: boolean) => void;
+  /** Function to get the accessible name for announcements */
+  getAccessibleName: () => string;
+  /** Component name for warning messages */
+  componentName: string;
+}
+
+/**
+ * Hook for shared toggle button state management.
+ * Provides accessibility announcements and controlled/uncontrolled warnings.
+ *
+ * @param options - Configuration options for the toggle state
+ * @returns Object containing the handlePressedChange callback
+ *
+ * @example
+ * ```tsx
+ * const getAccessibleName = React.useCallback(() => 'Toggle button', []);
+ *
+ * const { handlePressedChange } = useToggleState({
+ *   pressed,
+ *   onPressedChange,
+ *   getAccessibleName,
+ *   componentName: 'ToggleButton',
+ * });
+ * ```
+ */
+export function useToggleState({ pressed, onPressedChange, getAccessibleName, componentName }: UseToggleStateOptions) {
+  const announce = useLiveAnnouncer();
+
+  // Track if we've already warned about controlled without handler
+  const warnedRef = React.useRef(false);
+
+  /**
+   * Memoized handler for state changes with accessibility announcements.
+   * Announces the new state immediately for screen readers.
+   */
+  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
+  // Only warns once to avoid console spam
+  React.useEffect(() => {
+    if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined && !warnedRef.current) {
+      warnedRef.current = true;
+      console.warn(
+        `${componentName}: 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, componentName]);
+
+  return { handlePressedChange };
+}

package/src/hooks/use-tooltip-wrapper.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+/**
+ * Hook for managing tooltip accessibility props and conditional rendering.
+ * Encapsulates tooltip ID generation and aria-describedby binding.
+ *
+ * @param tooltip - The tooltip content (if any)
+ * @returns Object containing tooltipId, hasTooltip flag, and accessibility props
+ *
+ * @example
+ * ```tsx
+ * const { tooltipId, hasTooltip, accessibilityProps } = useTooltipWrapper(tooltip);
+ *
+ * const button = <button {...accessibilityProps}>Click me</button>;
+ *
+ * if (!hasTooltip) return button;
+ *
+ * return <Tooltip id={tooltipId} content={tooltip}>{button}</Tooltip>;
+ * ```
+ */
+export function useTooltipWrapper(tooltip: React.ReactNode) {
+  const tooltipId = React.useId();
+  const hasTooltip = Boolean(tooltip);
+
+  const accessibilityProps = React.useMemo(() => (hasTooltip ? { 'aria-describedby': tooltipId } : {}), [hasTooltip, tooltipId]);
+
+  return { tooltipId, hasTooltip, accessibilityProps };
+}

package/src/styles/tokens/color.css

@@ -16,6 +16,10 @@
   --color-surface-translucent: rgba(255, 255, 255, var(--surface-opacity));
   --color-dialog-solid: white;
   --color-dialog-translucent: rgba(255, 255, 255, var(--dialog-opacity));
+
+  /* Material system defaults (solid) - controls color-mix blending for component backgrounds */
+  --material-blend: 100%;
+  --material-alpha: 0;
 }
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
@@ -130,13 +134,16 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .radix-themes {
-  &:where([data-panel-background='solid']) {
+  &:where([data-panel-background='solid'], [data-material='solid']) {
     --color-panel: var(--color-panel-solid);
     --color-surface: var(--color-surface-solid);
     --color-dialog: var(--color-dialog-solid);
     --backdrop-filter-panel: none;
     --backdrop-filter-components: none;
     --backdrop-filter-dialog: none;
+    /* Material system for component backgrounds */
+    --material-blend: 100%;
+    --material-alpha: 0;
   }
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     --color-panel: var(--color-panel-translucent);
@@ -145,6 +152,9 @@
     --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
     --backdrop-filter-components: blur(var(--backdrop-blur-components));
     --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
+    /* Material system for component backgrounds */
+    --material-blend: 60%;
+    --material-alpha: 1;
   }
 }