@kushagradhawan/kookie-ui 0.1.71 → 0.1.72

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