@shohojdhara/atomix 0.4.8 → 0.4.9

package/src/components/Dropdown/Dropdown.tsx

@@ -39,15 +39,16 @@ const DropdownContext = createContext<DropdownContextType>({
 
 export const DropdownMenu = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
   ({ children, className = '', ...props }, ref) => {
-    const { glass } = useContext(DropdownStyleContext); // We need to access glass prop here?
-    // Wait, the original code wrapped <ul> in Context Provider.
-    // And applied glass wrapper around <ul>.
-    // If we use Compound Component, DropdownMenu should be the list.
+    const { glass } = useContext(DropdownStyleContext);
+    const { id } = useContext(DropdownContext);
 
     return (
       <ul
         ref={ref}
+        id={`${id}-menu`}
         className={`c-dropdown__menu ${glass ? 'c-dropdown__menu--glass' : ''} ${className}`.trim()}
+        role="menu"
+        aria-labelledby={`${id}-trigger`}
         {...props}
       >
         {children}
@@ -59,21 +60,20 @@ DropdownMenu.displayName = 'DropdownMenu';
 
 export const DropdownTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ children, className = '', onClick, onKeyDown, ...props }, ref) => {
-    // We need to inject the trigger logic here.
-    // But triggers are usually handled by the parent Dropdown in the original code.
-    // The original code wraps children in `c-dropdown__toggle` div.
-
-    // Ideally, DropdownTrigger allows user to customize the trigger element.
-    // For backward compat, Dropdown wraps `children` (legacy) in `c-dropdown__toggle`.
-
-    // If we use <Dropdown.Trigger><Button/></Dropdown.Trigger>, we want the Button to be the trigger.
+    const { isOpen, id } = useContext(DropdownContext);
 
     return (
       <div
         ref={ref}
+        id={`${id}-trigger`}
         className={`c-dropdown__toggle ${className}`.trim()}
         onClick={onClick}
         onKeyDown={onKeyDown}
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        aria-controls={`${id}-menu`}
+        tabIndex={0}
+        role="button"
         {...props}
       >
         {children}

package/src/components/Form/Select.tsx

@@ -143,6 +143,37 @@ export const Select: SelectComponent = memo(
       [onChange, name]
     );
 
+    // Keyboard navigation
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          handleToggle();
+          break;
+        case 'Escape':
+          if (isOpen) {
+            event.preventDefault();
+            setIsOpen(false);
+            if (bodyRef.current) {
+              bodyRef.current.style.height = '0px';
+            }
+          }
+          break;
+        case 'ArrowDown':
+        case 'ArrowUp':
+          if (!isOpen) {
+            event.preventDefault();
+            handleToggle();
+          }
+          break;
+        default:
+          break;
+      }
+    };
+
     const onSelect = useCallback(
       (val: string, label: string) => {
         handleItemClick({ value: val, label });
@@ -183,7 +214,17 @@ export const Select: SelectComponent = memo(
             aria-label={ariaLabel}
             aria-describedby={ariaDescribedBy}
             aria-invalid={invalid}
-            style={{ display: 'none' }}
+            style={{
+              position: 'absolute',
+              width: '1px',
+              height: '1px',
+              padding: '0',
+              margin: '-1px',
+              overflow: 'hidden',
+              clip: 'rect(0, 0, 0, 0)',
+              whiteSpace: 'nowrap',
+              border: '0',
+            }}
           >
             {placeholder && (
               <option value="" disabled>
@@ -198,7 +239,17 @@ export const Select: SelectComponent = memo(
           </select>
 
           {/* Custom Select UI */}
-          <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
+          <div
+            className={SELECT.CLASSES.SELECTED}
+            onClick={handleToggle}
+            onKeyDown={handleKeyDown}
+            aria-disabled={disabled}
+            tabIndex={disabled ? -1 : 0}
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded={isOpen}
+            aria-controls={id ? `${id}-listbox` : undefined}
+          >
             {selectedLabel}
           </div>
 
@@ -206,7 +257,12 @@ export const Select: SelectComponent = memo(
 
           <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
             <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
-              <ul className={SELECT.CLASSES.SELECT_ITEMS}>
+              <ul
+                className={SELECT.CLASSES.SELECT_ITEMS}
+                role="listbox"
+                id={id ? `${id}-listbox` : undefined}
+                aria-labelledby={id}
+              >
                 {hasOptionsProp ? (
                   options.map((option, index) => (
                     <li
@@ -214,6 +270,9 @@ export const Select: SelectComponent = memo(
                       className={SELECT.CLASSES.SELECT_ITEM}
                       data-value={option.value}
                       onClick={() => !option.disabled && handleItemClick(option)}
+                      role="option"
+                      aria-selected={value === option.value}
+                      aria-disabled={option.disabled}
                     >
                       <label htmlFor={`SelectItem${index}`} className="c-checkbox">
                         <input

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef, useState, useCallback, memo, forwardRef, ReactNode } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo, forwardRef, ReactNode, useId } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { useFocusTrap } from '../../lib/composables/useFocusTrap';
 
 /**
  * Hook for managing modal state
@@ -183,6 +184,12 @@ const ModalImpl = memo(
       onOpen,
     });
 
+    // Use focus trap hook
+    const contentRef = useFocusTrap(isOpenState);
+    const instanceId = useId();
+    const titleId = `modal-title-${instanceId}`;
+    const descId = `modal-desc-${instanceId}`;
+
     // Handle keyboard events for Escape key
     useEffect(() => {
       if (!keyboard) return undefined;
@@ -224,7 +231,7 @@ const ModalImpl = memo(
     );
 
     const modalContent = (
-      <div className="c-modal__content">
+      <div className="c-modal__content" ref={contentRef}>
         {hasCompoundComponents ? (
           React.Children.map(children, child => {
             if (
@@ -233,6 +240,7 @@ const ModalImpl = memo(
             ) {
               return React.cloneElement(child, {
                 onClose: (child.props as any).onClose || close,
+                id: titleId,
               } as any);
             }
             return child;
@@ -241,13 +249,14 @@ const ModalImpl = memo(
           <>
             {(title || closeButton) && (
               <ModalHeader
+                id={titleId}
                 title={title}
                 subtitle={subtitle}
                 closeButton={closeButton}
                 onClose={close}
               />
             )}
-            <ModalBody>{children}</ModalBody>
+            <ModalBody id={descId}>{children}</ModalBody>
             {footer && <ModalFooter>{footer}</ModalFooter>}
           </>
         )}
@@ -262,6 +271,8 @@ const ModalImpl = memo(
         role="dialog"
         aria-modal="true"
         aria-hidden={!isOpenState}
+        aria-labelledby={titleId}
+        aria-describedby={descId}
         {...props}
       >
         <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -82,6 +82,50 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
       };
     }, [collapsible, expanded, onToggle]);
 
+    // Handle Escape key to close mobile menu
+    useEffect(() => {
+      if (!navbarExpanded || !closeOnEscape) return undefined;
+
+      const handleEscapeKey = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          if (typeof onToggle === 'function') {
+            onToggle(false);
+          } else {
+            setNavbarExpanded(false);
+          }
+        }
+      };
+
+      document.addEventListener('keydown', handleEscapeKey);
+      return () => {
+        document.removeEventListener('keydown', handleEscapeKey);
+      };
+    }, [navbarExpanded, closeOnEscape, onToggle]);
+
+    // Handle outside click to close mobile menu
+    useEffect(() => {
+      if (!navbarExpanded || !closeOnOutsideClick) return undefined;
+
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          collapseRef.current &&
+          !collapseRef.current.contains(event.target as Node) &&
+          !(event.target as HTMLElement).closest('.c-navbar__toggler')
+        ) {
+          if (typeof onToggle === 'function') {
+            onToggle(false);
+          } else {
+            setNavbarExpanded(false);
+          }
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [navbarExpanded, closeOnOutsideClick, onToggle]);
+
     // Generate the navbar class
     const navbarClass = generateNavbarClass({
       position,

package/src/components/Slider/Slider.stories.tsx

@@ -461,7 +461,7 @@ const testimonialSlides: SliderSlide[] = [
               }}
             />
           </div>
-          <p className="u-text-base u-fst-italic u-mb-4">
+          <p className="u-text-base u-textt-italic u-mb-4">
             "Atomix has completely transformed how we build our user interfaces. The components are
             intuitive and the design system is consistent across all our products."
           </p>
@@ -486,7 +486,7 @@ const testimonialSlides: SliderSlide[] = [
               }}
             />
           </div>
-          <p className="u-text-base u-fst-italic u-mb-4">
+          <p className="u-text-base u-textt-italic u-mb-4">
             "Implementing Atomix reduced our development time by 40%. The documentation is excellent
             and the components are highly customizable."
           </p>
@@ -511,7 +511,7 @@ const testimonialSlides: SliderSlide[] = [
               }}
             />
           </div>
-          <p className="u-text-base u-fst-italic u-mb-4">
+          <p className="u-text-base u-textt-italic u-mb-4">
             "The accessibility features in Atomix are impressive. Our products now meet WCAG 2.1 AA
             standards with minimal effort."
           </p>

package/src/components/Slider/Slider.tsx

@@ -87,6 +87,38 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     .filter(Boolean)
     .join(' ');
 
+  // Keyboard navigation
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        if (direction === 'horizontal') {
+          event.preventDefault();
+          slidePrev();
+        }
+        break;
+      case 'ArrowRight':
+        if (direction === 'horizontal') {
+          event.preventDefault();
+          slideNext();
+        }
+        break;
+      case 'ArrowUp':
+        if (direction === 'vertical') {
+          event.preventDefault();
+          slidePrev();
+        }
+        break;
+      case 'ArrowDown':
+        if (direction === 'vertical') {
+          event.preventDefault();
+          slideNext();
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <div
       ref={ref || (containerRef as React.RefObject<HTMLDivElement>)}
@@ -106,10 +138,16 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
       onMouseMove={handleTouchMove}
       onMouseUp={handleTouchEnd}
       onMouseLeave={handleTouchEnd}
+      onKeyDown={handleKeyDown}
+      role="region"
+      aria-roledescription="carousel"
+      aria-label={(rest as any)['aria-label'] || 'Image slider'}
+      tabIndex={0}
     >
       <div
         ref={wrapperRef as React.RefObject<HTMLDivElement>}
         className="c-slider__wrapper"
+        aria-live={autoplay ? 'off' : 'polite'}
         style={{
           display: 'flex',
           flexDirection: direction === 'vertical' ? 'column' : 'row',

package/src/components/Steps/Steps.tsx

@@ -193,8 +193,8 @@ const StepsComp: React.FC<StepsProps> = ({
   } else {
     // Compound rendering
     content = Children.map(children, (child, index) => {
-      if (isValidElement(child)) {
-        const childProps = child.props as any;
+      if (isValidElement<StepsItemProps>(child)) {
+        const childProps = child.props;
         // Inject active/completed based on index if not explicitly provided
         const isActive = childProps.active ?? index <= currentStep;
         const isCompleted = childProps.completed ?? index < currentStep;
@@ -207,7 +207,7 @@ const StepsComp: React.FC<StepsProps> = ({
           active: isActive,
           completed: isCompleted,
           number,
-        } as any);
+        });
       }
       return child;
     });

package/src/components/Tabs/Tabs.tsx

@@ -67,20 +67,36 @@ export interface TabsProps {
 const TabsContext = createContext<{
   currentTab: number;
   handleTabClick: (index: number) => void;
+  handleKeyDown: (event: React.KeyboardEvent, totalTabs: number) => void;
+  totalTabs: number;
 }>({
   currentTab: 0,
   handleTabClick: () => {},
+  handleKeyDown: () => {},
+  totalTabs: 0,
 });
 
 // Compound components
 export const TabsList = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
-  ({ children, className = '', ...props }, ref) => {
+  ({ children, className = '', onKeyDown, ...props }, ref) => {
+    const { handleKeyDown: contextHandleKeyDown } = useContext(TabsContext);
+    const totalTabs = React.Children.count(children);
+
     return (
-      <ul ref={ref} className={`c-tabs__nav ${className}`.trim()} {...props}>
+      <ul
+        ref={ref}
+        className={`c-tabs__nav ${className}`.trim()}
+        role="tablist"
+        onKeyDown={(e) => {
+          contextHandleKeyDown(e, totalTabs);
+          onKeyDown?.(e);
+        }}
+        {...props}
+      >
         {React.Children.map(children, (child, index) => {
           if (React.isValidElement(child)) {
-             // Inject index into TabsTrigger
-             return React.cloneElement(child, { index } as any);
+            // Inject index into TabsTrigger
+            return React.cloneElement(child, { index } as any);
           }
           return child;
         })}
@@ -106,9 +122,10 @@ export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
     const isActive = index !== undefined && currentTab === index;
 
     return (
-      <li className="c-tabs__nav-item">
+      <li className="c-tabs__nav-item" role="presentation">
         <button
           ref={ref}
+          id={`tab-nav-${index}`}
           className={`c-tabs__nav-btn ${isActive ? TAB.CLASSES.ACTIVE : ''} ${className}`.trim()}
           onClick={(e) => {
             if (index !== undefined) handleTabClick(index);
@@ -118,6 +135,7 @@ export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
           role="tab"
           aria-selected={isActive}
           aria-controls={`tab-panel-${index}`}
+          tabIndex={isActive ? 0 : -1}
           type="button"
           {...props}
         >
@@ -209,6 +227,37 @@ export const Tabs: TabsComponent = memo(
       }
     };
 
+    // Keyboard navigation
+    const handleKeyDown = (event: React.KeyboardEvent, totalTabs: number) => {
+      let newIndex = currentTab;
+      switch (event.key) {
+        case 'ArrowRight':
+          newIndex = (currentTab + 1) % totalTabs;
+          break;
+        case 'ArrowLeft':
+          newIndex = (currentTab - 1 + totalTabs) % totalTabs;
+          break;
+        case 'Home':
+          newIndex = 0;
+          break;
+        case 'End':
+          newIndex = totalTabs - 1;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      handleTabClick(newIndex);
+
+      // Focus the newly active tab after it renders
+      setTimeout(() => {
+        const tabElement = document.getElementById(`tab-nav-${newIndex}`);
+        if (tabElement) {
+          tabElement.focus();
+        }
+      }, 0);
+    };
+
     // Determine content based on mode (legacy items vs compound children)
     let content: ReactNode;
 
@@ -217,16 +266,23 @@ export const Tabs: TabsComponent = memo(
       // Legacy mode
       content = (
         <>
-          <ul className="c-tabs__nav">
+          <ul
+            className="c-tabs__nav"
+            role="tablist"
+            onKeyDown={(e) => handleKeyDown(e, items.length)}
+          >
             {items.map((item, index) => (
-              <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
+              <li className="c-tabs__nav-item" key={`tab-nav-${index}`} role="presentation">
                 <button
+                  id={`tab-nav-${index}`}
                   className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
                   onClick={() => handleTabClick(index)}
                   data-tabindex={index}
                   role="tab"
                   aria-selected={index === currentTab}
                   aria-controls={`tab-panel-${index}`}
+                  tabIndex={index === currentTab ? 0 : -1}
+                  type="button"
                 >
                   {item.label}
                 </button>
@@ -257,8 +313,21 @@ export const Tabs: TabsComponent = memo(
       );
     } else {
       // Compound mode
+      const tabsList = React.Children.toArray(children).find(
+        (child): child is React.ReactElement =>
+          React.isValidElement(child) && (child.type as any).displayName === 'TabsList'
+      );
+      const totalTabsCount = tabsList ? React.Children.count(tabsList.props.children) : 0;
+
       content = (
-        <TabsContext.Provider value={{ currentTab, handleTabClick }}>
+        <TabsContext.Provider
+          value={{
+            currentTab,
+            handleTabClick,
+            handleKeyDown,
+            totalTabs: totalTabsCount,
+          }}
+        >
           {children}
         </TabsContext.Provider>
       );

package/src/components/Testimonial/Testimonial.tsx

@@ -125,7 +125,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
           {author.avatarSrc && (
             <img
               src={author.avatarSrc}
-              alt={author.avatarAlt || ''}
+              alt={author.avatarAlt || `${author.name}'s avatar`}
               className="c-testimonial__author-avatar c-avatar c-avatar--xxl c-avatar--circle"
             />
           )}

package/src/components/TypedButton/TypedButton.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TypedButton } from './TypedButton';
+
+const meta: Meta<typeof TypedButton> = {
+  title: 'Components/TypedButton',
+  component: TypedButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    glass: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'TypedButton Component',
+    size: 'md',
+    variant: 'primary',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: 'lg',
+  },
+};
+
+export const Glass: Story = {
+  args: {
+    ...Default.args,
+    glass: true,
+  },
+};

package/src/components/TypedButton/TypedButton.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef, useId, memo } from 'react';
+import { TYPEDBUTTON } from '../../lib/constants/components';
+import { useTypedButton } from '../../lib/composables/useTypedButton';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import type { TypedButtonProps } from '../../lib/types/components';
+
+/**
+ * TypedButton - Medium Presentational Component
+ * 
+ * @param {TypedButtonProps} props - Component properties
+ * @returns {JSX.Element} The rendered component
+ */
+export const TypedButton = memo(
+  forwardRef<HTMLDivElement, TypedButtonProps>(
+    ({ children, className = '', disabled = false, glass, style, 'aria-label': ariaLabel, ...props }, ref) => {
+      const instanceId = useId();
+      const { generateClassNames } = useTypedButton({ disabled });
+      
+      const content = (
+        <div
+          ref={ref}
+          className={generateClassNames(className)}
+          style={style}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+
+      return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
+    }
+  )
+);
+
+TypedButton.displayName = 'TypedButton';
+
+export default TypedButton;

package/src/components/TypedButton/index.ts

@@ -0,0 +1,2 @@
+export { default as TypedButton } from './TypedButton';
+export type { TypedButtonProps } from './TypedButton';

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -146,10 +146,17 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
 
     const handleDownload = useCallback(() => {
       if (src) {
-        const a = document.createElement('a');
-        a.href = src;
-        a.download = 'video';
-        a.click();
+        try {
+          const url = new URL(src, window.location.origin);
+          if (['http:', 'https:', 'blob:', 'data:'].includes(url.protocol)) {
+            const a = document.createElement('a');
+            a.href = url.href;
+            a.download = 'video';
+            a.click();
+          }
+        } catch (e) {
+          // Ignore invalid URLs
+        }
       }
     }, [src]);
 

package/src/lib/composables/index.ts

@@ -36,13 +36,10 @@ export * from './useRadio';
 export * from './useSelect';
 export * from './useTextarea';
 
-// New composables
-export * from './useBreadcrumb';
-export * from './useCard';
-export * from './useDataTable';
-export * from './useModal';
-export * from './usePagination';
-export * from './useSlider';
+// Phase 3: Optimization & Adaptation - New composables
+export * from './useResponsiveGlass';
+export * from './usePerformanceMonitor';
+export * from './useResponsiveGlass.presets';
 
 // Chart composables - simplified
 export * from './useChartData';