@kushagradhawan/kookie-ui 0.1.29 → 0.1.31

package/src/components/accordion.tsx

@@ -10,7 +10,6 @@ import {
   accordionContentPropDefs,
 } from './accordion.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { requireReactElement } from '../helpers/require-react-element.js';
 
 import type {
   AccordionRootOwnProps,
@@ -29,28 +28,65 @@ interface AccordionRootProps
 
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
   (props, forwardedRef) => {
-    const { className, panelBackground, flush, radius, ...extractedRadixProps } = extractProps(
-      props,
-      accordionRootPropDefs,
-    );
+    const { className, panelBackground, material, flush, radius, color, ...extractedRadixProps } =
+      extractProps(props, accordionRootPropDefs);
 
     const radixProps = extractedRadixProps as React.ComponentPropsWithoutRef<
       typeof AccordionPrimitive.Root
     >;
 
+    // Show deprecation warning for panelBackground when used
+    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.',
+        );
+      }
+    }, [props.panelBackground]);
+
+    // Material takes precedence over panelBackground
+    const effectiveMaterial = material ?? panelBackground;
+
     // Ensure single accordions can collapse by default unless explicitly set
     if (radixProps.type === 'single' && radixProps.collapsible === undefined) {
       radixProps.collapsible = true;
     }
 
+    // Handle Home/End key navigation for multi-item accordions
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent) => {
+        if (radixProps.type === 'multiple') {
+          const items = event.currentTarget.querySelectorAll('[data-radix-accordion-item]');
+
+          if (event.key === 'Home') {
+            event.preventDefault();
+            const firstTrigger = items[0]?.querySelector(
+              '[data-radix-accordion-trigger]',
+            ) as HTMLElement;
+            firstTrigger?.focus();
+          } else if (event.key === 'End') {
+            event.preventDefault();
+            const lastTrigger = items[items.length - 1]?.querySelector(
+              '[data-radix-accordion-trigger]',
+            ) as HTMLElement;
+            lastTrigger?.focus();
+          }
+        }
+      },
+      [radixProps.type],
+    );
+
     return (
       <AccordionPrimitive.Root
         {...radixProps}
         ref={forwardedRef}
         className={classNames('rt-AccordionRoot', className)}
-        data-panel-background={panelBackground}
+        data-accent-color={color}
+        data-panel-background={effectiveMaterial}
+        data-material={effectiveMaterial}
         data-flush={flush || undefined}
         data-radius={radius}
+        onKeyDown={handleKeyDown}
       />
     );
   },
@@ -109,10 +145,20 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
   ({ children, ...props }, forwardedRef) => {
     const { className, ...triggerProps } = extractProps(props, accordionTriggerPropDefs);
 
+    // Radix UI handles focus management automatically
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+
     return (
       <AccordionPrimitive.Trigger
         {...triggerProps}
-        ref={forwardedRef}
+        ref={(node) => {
+          triggerRef.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
         className={classNames('rt-AccordionTrigger', className)}
       >
         {children}
@@ -137,6 +183,7 @@ const AccordionContent = React.forwardRef<AccordionContentElement, AccordionCont
         {...contentProps}
         ref={forwardedRef}
         className={classNames('rt-AccordionContent', className)}
+        aria-live="polite"
       >
         <div className="rt-AccordionContentInner">{children}</div>
       </AccordionPrimitive.Content>

package/src/components/alert-dialog.props.tsx

@@ -1,2 +1,22 @@
-export { dialogContentPropDefs as alertDialogContentPropDefs } from './dialog.props.js';
-export type { DialogContentOwnProps as AlertDialogContentOwnProps } from './dialog.props.js';
+import { dialogContentPropDefs } from './dialog.props.js';
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const materials = ['solid', 'translucent'] as const;
+
+const alertDialogContentPropDefs = {
+  ...dialogContentPropDefs,
+  material: { type: 'enum', values: materials, default: undefined },
+} satisfies {
+  align: PropDef<'start' | 'center'>;
+  size: PropDef<'1' | '2' | '3' | '4'>;
+  panelBackground: PropDef<'solid' | 'translucent' | undefined>;
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+  material: PropDef<'solid' | 'translucent' | undefined>;
+};
+
+type AlertDialogContentOwnProps = GetPropDefTypes<typeof alertDialogContentPropDefs>;
+
+export { alertDialogContentPropDefs };
+export type { AlertDialogContentOwnProps };

package/src/components/alert-dialog.tsx

@@ -46,20 +46,99 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
     const {
       align: alignPropDef,
       panelBackground: panelBackgroundPropDef,
+      material: materialPropDef,
       ...propDefs
     } = alertDialogContentPropDefs;
+
     const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
-    const { panelBackground } = extractProps(
+
+    // Extract panelBackground and material from props
+    const { panelBackground: extractedPanelBackground } = extractProps(
       { panelBackground: props.panelBackground },
       { panelBackground: panelBackgroundPropDef },
     );
+
+    const { material: extractedMaterial } = extractProps(
+      { material: props.material },
+      { material: materialPropDef },
+    );
+
+    // Handle material prop with panelBackground fallback
+    const materialValue = React.useMemo(() => {
+      if (extractedMaterial !== undefined) {
+        console.warn(
+          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
+        );
+      }
+      return extractedMaterial ?? extractedPanelBackground;
+    }, [extractedMaterial, extractedPanelBackground]);
+
     const {
       className,
       forceMount,
       container,
       panelBackground: _,
+      material: __,
       ...contentProps
     } = extractProps(props, propDefs);
+
+    // Focus management
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const combinedRef = React.useMemo(
+      () => (node: HTMLDivElement | null) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    // Focus trap effect
+    React.useEffect(() => {
+      // SSR safety - only run on client
+      if (typeof window === 'undefined') return;
+
+      const content = contentRef.current;
+      if (!content) return;
+
+      const focusableElements = content.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0] as HTMLElement;
+      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Tab') {
+          if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+              event.preventDefault();
+              lastElement.focus();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              event.preventDefault();
+              firstElement.focus();
+            }
+          }
+        }
+      };
+
+      content.addEventListener('keydown', handleKeyDown);
+
+      // Focus first element when dialog opens
+      firstElement.focus();
+
+      return () => {
+        content.removeEventListener('keydown', handleKeyDown);
+      };
+    }, []);
+
     return (
       <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
@@ -70,9 +149,21 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
               >
                 <AlertDialogPrimitive.Content
                   {...contentProps}
-                  ref={forwardedRef}
+                  ref={combinedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-AlertDialogContent', className)}
-                  data-panel-background={panelBackground}
+                  data-material={materialValue}
+                  data-panel-background={materialValue}
+                  tabIndex={-1}
+                  role="alertdialog"
+                  aria-modal="true"
+                  aria-describedby="alert-dialog-description"
+                />
+                {/* ARIA live region for screen reader announcements */}
+                <div
+                  aria-live="assertive"
+                  aria-atomic="true"
+                  className="rt-sr-only"
+                  id="alert-dialog-announcement"
                 />
               </div>
             </div>