@womp/kookie-ui 0.34.2 → 0.35.1

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

@@ -1,79 +0,0 @@
-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('kui-live-announcer');
-
-    if (!liveRegion) {
-      liveRegion = document.createElement('div');
-      liveRegion.id = 'kui-live-announcer';
-      liveRegion.setAttribute('aria-live', 'polite');
-      liveRegion.setAttribute('aria-atomic', 'true');
-      liveRegion.style.cssText = `
-        position: absolute;
-        left: -10000px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-      `;
-      document.body.appendChild(liveRegion);
-    }
-
-    // Increment ref count when component mounts
-    liveRegionRefCount++;
-
-    return () => {
-      // 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('kui-live-announcer');
-        if (region) {
-          region.remove();
-        }
-      }
-    };
-  }, []);
-
-  const announce = React.useCallback((message: string) => {
-    const liveRegion = document.getElementById('kui-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
-      timeoutRef.current = setTimeout(() => {
-        liveRegion.textContent = message;
-      }, 100);
-    }
-  }, []);
-
-  return announce;
-}

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

@@ -1,72 +0,0 @@
-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: 'Toggle',
- * });
- * ```
- */
-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/props/shadow.props.ts

@@ -1,30 +0,0 @@
-import type { PropDef, GetPropDefTypes } from './prop-def.js';
-
-const shadowValues = ['1', '2', '3', '4', '5', '6'] as const;
-
-const shadowPropDefs = {
-  /**
-   * Sets the CSS **box-shadow** property using design system shadow tokens.
-   * Supports shadow scale values and responsive objects.
-   *
-   * @example
-   * shadow="3"
-   * shadow={{ sm: '2', lg: '4' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
-   */
-  shadow: {
-    type: 'enum',
-    className: 'kui-r-shadow',
-    values: shadowValues,
-    responsive: true,
-  },
-} satisfies {
-  shadow: PropDef<(typeof shadowValues)[number]>;
-};
-
-type ShadowProps = GetPropDefTypes<typeof shadowPropDefs>;
-
-export { shadowPropDefs };
-export type { ShadowProps };