@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/src/components/accordion.props.tsx

@@ -0,0 +1,90 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['classic', 'soft', 'surface', 'outline', 'ghost'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+
+const accordionRootPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  ...colorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /**
+   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
+   */
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  flush: { type: 'boolean', default: false },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  flush: PropDef<boolean>;
+};
+
+const accordionItemPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+const accordionHeaderPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+const accordionTriggerPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+const accordionContentPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+export {
+  accordionRootPropDefs,
+  accordionItemPropDefs,
+  accordionHeaderPropDefs,
+  accordionTriggerPropDefs,
+  accordionContentPropDefs,
+};
+
+export type AccordionRootOwnProps = {
+  size?: (typeof sizes)[number];
+  variant?: (typeof variants)[number];
+  color?: string;
+  highContrast?: boolean;
+  radius?: string;
+  material?: (typeof panelBackgrounds)[number];
+  panelBackground?: (typeof panelBackgrounds)[number];
+  flush?: boolean;
+};
+
+export type AccordionItemOwnProps = {
+  asChild?: boolean;
+};
+
+export type AccordionHeaderOwnProps = {
+  asChild?: boolean;
+};
+
+export type AccordionTriggerOwnProps = {
+  asChild?: boolean;
+};
+
+export type AccordionContentOwnProps = {
+  asChild?: boolean;
+};

package/src/components/accordion.tsx

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+
+import {
+  accordionRootPropDefs,
+  accordionItemPropDefs,
+  accordionHeaderPropDefs,
+  accordionTriggerPropDefs,
+  accordionContentPropDefs,
+} from './accordion.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+
+import type {
+  AccordionRootOwnProps,
+  AccordionItemOwnProps,
+  AccordionHeaderOwnProps,
+  AccordionTriggerOwnProps,
+  AccordionContentOwnProps,
+} from './accordion.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+// Root component
+type AccordionRootElement = React.ElementRef<typeof AccordionPrimitive.Root>;
+interface AccordionRootProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Root, RemovedProps>,
+    AccordionRootOwnProps {}
+
+const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
+  (props, forwardedRef) => {
+    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-accent-color={color}
+        data-panel-background={effectiveMaterial}
+        data-material={effectiveMaterial}
+        data-flush={flush || undefined}
+        data-radius={radius}
+        onKeyDown={handleKeyDown}
+      />
+    );
+  },
+);
+AccordionRoot.displayName = 'Accordion.Root';
+
+// Item component
+type AccordionItemElement = React.ElementRef<typeof AccordionPrimitive.Item>;
+interface AccordionItemProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Item, RemovedProps>,
+    AccordionItemOwnProps {}
+
+const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(
+  (props, forwardedRef) => {
+    const { className, ...itemProps } = extractProps(props, accordionItemPropDefs);
+
+    return (
+      <AccordionPrimitive.Item
+        {...itemProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionItem', className)}
+      />
+    );
+  },
+);
+AccordionItem.displayName = 'Accordion.Item';
+
+// Header component
+type AccordionHeaderElement = React.ElementRef<typeof AccordionPrimitive.Header>;
+interface AccordionHeaderProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Header, RemovedProps>,
+    AccordionHeaderOwnProps {}
+
+const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(
+  (props, forwardedRef) => {
+    const { className, ...headerProps } = extractProps(props, accordionHeaderPropDefs);
+
+    return (
+      <AccordionPrimitive.Header
+        {...headerProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionHeader', className)}
+      />
+    );
+  },
+);
+AccordionHeader.displayName = 'Accordion.Header';
+
+// Trigger component
+type AccordionTriggerElement = React.ElementRef<typeof AccordionPrimitive.Trigger>;
+interface AccordionTriggerProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Trigger, RemovedProps>,
+    AccordionTriggerOwnProps {}
+
+const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(
+  ({ 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={(node) => {
+          triggerRef.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
+        className={classNames('rt-AccordionTrigger', className)}
+      >
+        {children}
+      </AccordionPrimitive.Trigger>
+    );
+  },
+);
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+// Content component
+type AccordionContentElement = React.ElementRef<typeof AccordionPrimitive.Content>;
+interface AccordionContentProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Content, RemovedProps>,
+    AccordionContentOwnProps {}
+
+const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(
+  (props, forwardedRef) => {
+    const { className, children, ...contentProps } = extractProps(props, accordionContentPropDefs);
+
+    return (
+      <AccordionPrimitive.Content
+        {...contentProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionContent', className)}
+        aria-live="polite"
+      >
+        <div className="rt-AccordionContentInner">{children}</div>
+      </AccordionPrimitive.Content>
+    );
+  },
+);
+AccordionContent.displayName = 'Accordion.Content';
+
+export {
+  AccordionRoot as Root,
+  AccordionItem as Item,
+  AccordionHeader as Header,
+  AccordionTrigger as Trigger,
+  AccordionContent as Content,
+};
+
+export type {
+  AccordionRootProps as RootProps,
+  AccordionItemProps as ItemProps,
+  AccordionHeaderProps as HeaderProps,
+  AccordionTriggerProps as TriggerProps,
+  AccordionContentProps as ContentProps,
+};

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>