@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/Steps/Steps.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState, ReactNode } from 'react';
+import React, { useEffect, useState, ReactNode, forwardRef, Children, cloneElement, isValidElement } from 'react';
 import { STEPS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
-export interface StepItem {
+// Legacy Item Interface
+export interface StepItemData {
   /**
    * The number for the step
    */
@@ -20,11 +21,71 @@ export interface StepItem {
   content?: React.ReactNode;
 }
 
+export type { StepItemData as StepItem };
+
+// Compound Component Props
+export interface StepsItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * The number or icon for the step
+   */
+  number?: number | string | ReactNode;
+
+  /**
+   * The text label/title for the step
+   */
+  title?: ReactNode;
+
+  /**
+   * Whether the step is active
+   */
+  active?: boolean;
+
+  /**
+   * Whether the step is completed
+   */
+  completed?: boolean;
+
+  /**
+   * Index of the step (injected by parent)
+   */
+  index?: number;
+}
+
+export const StepsItem = forwardRef<HTMLDivElement, StepsItemProps>(
+  ({ children, className = '', number, title, active, completed, index, ...props }, ref) => {
+    const itemClasses = [
+      'c-steps__item',
+      active ? STEPS.CLASSES.ACTIVE : '',
+      completed ? STEPS.CLASSES.COMPLETED : '',
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        aria-current={active ? 'step' : undefined}
+        data-index={index}
+        {...props}
+      >
+        <div className="c-steps__line"></div>
+        <div className="c-steps__content">
+          {(number !== undefined && number !== null) && <div className="c-steps__number">{number}</div>}
+          {title && <div className="c-steps__text">{title}</div>}
+          {children && <div className="c-steps__custom-content">{children}</div>}
+        </div>
+      </div>
+    );
+  }
+);
+
+StepsItem.displayName = 'StepsItem';
+
 export interface StepsProps {
   /**
-   * Array of step items
+   * Array of step items (Legacy)
    */
-  items: StepItem[];
+  items?: StepItemData[];
 
   /**
    * Current active step index (0-based)
@@ -56,12 +117,22 @@ export interface StepsProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Children (Compound)
+   */
+  children?: ReactNode;
 }
 
+type StepsComponent = React.FC<StepsProps> & {
+  Item: typeof StepsItem;
+  Step: typeof StepsItem; // Alias for convenience
+};
+
 /**
  * Steps component for displaying a sequence of steps
  */
-export const Steps: React.FC<StepsProps> = ({
+const StepsComp: React.FC<StepsProps> = ({
   items,
   activeIndex = 0,
   vertical = false,
@@ -69,6 +140,7 @@ export const Steps: React.FC<StepsProps> = ({
   className = '',
   style,
   glass,
+  children,
 }) => {
   const [currentStep, setCurrentStep] = useState(activeIndex);
 
@@ -79,10 +151,11 @@ export const Steps: React.FC<StepsProps> = ({
     }
   }, [activeIndex]);
 
-  // Method to go to next step
+  // Method to go to next step (Internal helper)
   const goToNextStep = () => {
     const nextIndex = currentStep + 1;
-    if (nextIndex < items.length) {
+    const maxIndex = items ? items.length : Children.count(children);
+    if (nextIndex < maxIndex) {
       setCurrentStep(nextIndex);
       if (onStepChange) {
         onStepChange(nextIndex);
@@ -101,6 +174,45 @@ export const Steps: React.FC<StepsProps> = ({
     }
   };
 
+  let content: ReactNode;
+
+  if (items && items.length > 0) {
+    // Legacy rendering
+    content = items.map((item, index) => (
+      <StepsItem
+        key={`step-${index}`}
+        index={index}
+        number={item.number}
+        title={item.text}
+        active={index <= currentStep}
+        completed={index < currentStep}
+      >
+        {item.content}
+      </StepsItem>
+    ));
+  } else {
+    // Compound rendering
+    content = Children.map(children, (child, index) => {
+      if (isValidElement(child)) {
+        const childProps = child.props as any;
+        // Inject active/completed based on index if not explicitly provided
+        const isActive = childProps.active ?? index <= currentStep;
+        const isCompleted = childProps.completed ?? index < currentStep;
+
+        // If number is not provided, default to index + 1
+        const number = childProps.number ?? (index + 1);
+
+        return cloneElement(child, {
+          index,
+          active: isActive,
+          completed: isCompleted,
+          number,
+        } as any);
+      }
+      return child;
+    });
+  }
+
   const stepsContent = (
     <div
       className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
@@ -108,20 +220,7 @@ export const Steps: React.FC<StepsProps> = ({
       role="navigation"
       aria-label="Steps"
     >
-      {items.map((item, index) => (
-        <div
-          key={`step-${index}`}
-          className={`c-steps__item ${index <= currentStep ? STEPS.CLASSES.ACTIVE : ''} ${index < currentStep ? STEPS.CLASSES.COMPLETED : ''}`}
-          aria-current={index === currentStep ? 'step' : undefined}
-        >
-          <div className="c-steps__line"></div>
-          <div className="c-steps__content">
-            <div className="c-steps__number">{item.number}</div>
-            <div className="c-steps__text">{item.text}</div>
-            {item.content && <div className="c-steps__custom-content">{item.content}</div>}
-          </div>
-        </div>
-      ))}
+      {content}
     </div>
   );
 
@@ -132,7 +231,7 @@ export const Steps: React.FC<StepsProps> = ({
       blurAmount: 1,
       saturation: 160,
       aberrationIntensity: 0.5,
-      cornerRadius: 8,
+      borderRadius: 8,
       mode: 'shader' as const,
     };
 
@@ -144,6 +243,10 @@ export const Steps: React.FC<StepsProps> = ({
   return stepsContent;
 };
 
+export const Steps = StepsComp as StepsComponent;
+
 Steps.displayName = 'Steps';
+Steps.Item = StepsItem;
+Steps.Step = StepsItem;
 
 export default Steps;

package/src/components/Steps/StepsCompound.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Steps } from './Steps';
+import React from 'react';
+
+describe('Steps Component', () => {
+  it('renders correctly with legacy items prop', () => {
+    const items = [
+      { number: 1, text: 'Step 1' },
+      { number: 2, text: 'Step 2' },
+      { number: 3, text: 'Step 3' },
+    ];
+    render(<Steps items={items} activeIndex={1} />);
+
+    // Step 1: active (<= 1) and completed (< 1)
+    const step1 = screen.getByText('Step 1').closest('.c-steps__item');
+    expect(step1).toHaveClass('is-active');
+    expect(step1).toHaveClass('is-completed');
+
+    // Step 2: active (<= 1) and NOT completed (>= 1)
+    const step2 = screen.getByText('Step 2').closest('.c-steps__item');
+    expect(step2).toHaveClass('is-active');
+    expect(step2).not.toHaveClass('is-completed');
+
+    // Step 3: NOT active (> 1)
+    const step3 = screen.getByText('Step 3').closest('.c-steps__item');
+    expect(step3).not.toHaveClass('is-active');
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Steps activeIndex={1}>
+        <Steps.Item title="Step 1">Content 1</Steps.Item>
+        <Steps.Item title="Step 2">Content 2</Steps.Item>
+        <Steps.Item title="Step 3">Content 3</Steps.Item>
+      </Steps>
+    );
+
+    // Verify titles
+    expect(screen.getByText('Step 1')).toBeInTheDocument();
+    expect(screen.getByText('Step 2')).toBeInTheDocument();
+    expect(screen.getByText('Step 3')).toBeInTheDocument();
+
+    // Verify content
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+
+    // Step 1: active and completed (inferred from activeIndex 1)
+    const step1 = screen.getByText('Step 1').closest('.c-steps__item');
+    expect(step1).toHaveClass('is-active');
+    expect(step1).toHaveClass('is-completed');
+
+    // Step 2: active and NOT completed
+    const step2 = screen.getByText('Step 2').closest('.c-steps__item');
+    expect(step2).toHaveClass('is-active');
+    expect(step2).not.toHaveClass('is-completed');
+
+    // Step 3: NOT active
+    const step3 = screen.getByText('Step 3').closest('.c-steps__item');
+    expect(step3).not.toHaveClass('is-active');
+
+    // Verify automatic numbering
+    expect(step1?.querySelector('.c-steps__number')).toHaveTextContent('1');
+    expect(step2?.querySelector('.c-steps__number')).toHaveTextContent('2');
+    expect(step3?.querySelector('.c-steps__number')).toHaveTextContent('3');
+  });
+
+  it('supports explicit props on Steps.Item', () => {
+    render(
+      <Steps>
+        <Steps.Item title="Custom Step" number="A" active completed>
+          Custom Content
+        </Steps.Item>
+      </Steps>
+    );
+
+    const step = screen.getByText('Custom Step').closest('.c-steps__item');
+    expect(step).toHaveClass('is-active');
+    expect(step).toHaveClass('is-completed');
+    expect(step?.querySelector('.c-steps__number')).toHaveTextContent('A');
+  });
+});

package/src/components/Tabs/Tabs.stories.tsx

@@ -372,7 +372,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     } as GlassProps,
   },
   render: args => (

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode, memo } from 'react';
+import React, { useState, ReactNode, memo, createContext, useContext, forwardRef } from 'react';
 import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -27,9 +27,9 @@ export interface TabsItemProps {
 
 export interface TabsProps {
   /**
-   * Array of tab items
+   * Array of tab items (Legacy mode)
    */
-  items: TabsItemProps[];
+  items?: TabsItemProps[];
 
   /**
    * Initial active tab index
@@ -56,12 +56,140 @@ export interface TabsProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Children (Compound mode)
+   */
+  children?: ReactNode;
+}
+
+// Context for compound usage
+const TabsContext = createContext<{
+  currentTab: number;
+  handleTabClick: (index: number) => void;
+}>({
+  currentTab: 0,
+  handleTabClick: () => {},
+});
+
+// Compound components
+export const TabsList = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <ul ref={ref} className={`c-tabs__nav ${className}`.trim()} {...props}>
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+             // Inject index into TabsTrigger
+             return React.cloneElement(child, { index } as any);
+          }
+          return child;
+        })}
+      </ul>
+    );
+  }
+);
+TabsList.displayName = 'TabsList';
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  index?: number; // Injected by TabsList or passed explicitly
 }
 
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ children, className = '', index, onClick, ...props }, ref) => {
+    const { currentTab, handleTabClick } = useContext(TabsContext);
+
+    // Safety check if used outside context or without index
+    if (index === undefined) {
+      console.warn('TabsTrigger requires an index prop or must be a direct child of TabsList');
+    }
+
+    const isActive = index !== undefined && currentTab === index;
+
+    return (
+      <li className="c-tabs__nav-item">
+        <button
+          ref={ref}
+          className={`c-tabs__nav-btn ${isActive ? TAB.CLASSES.ACTIVE : ''} ${className}`.trim()}
+          onClick={(e) => {
+            if (index !== undefined) handleTabClick(index);
+            onClick?.(e);
+          }}
+          data-tabindex={index}
+          role="tab"
+          aria-selected={isActive}
+          aria-controls={`tab-panel-${index}`}
+          type="button"
+          {...props}
+        >
+          {children}
+        </button>
+      </li>
+    );
+  }
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+export const TabsPanels = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-tabs__panels ${className}`.trim()} {...props}>
+        {React.Children.map(children, (child, index) => {
+           if (React.isValidElement(child)) {
+             return React.cloneElement(child, { index } as any);
+           }
+           return child;
+        })}
+      </div>
+    );
+  }
+);
+TabsPanels.displayName = 'TabsPanels';
+
+export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  index?: number;
+}
+
+export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
+  ({ children, className = '', index, style, ...props }, ref) => {
+    const { currentTab } = useContext(TabsContext);
+    const isActive = index !== undefined && currentTab === index;
+
+    return (
+      <div
+        ref={ref}
+        className={`c-tabs__panel ${isActive ? TAB.CLASSES.ACTIVE : ''} ${className}`.trim()}
+        data-tabindex={index}
+        id={`tab-panel-${index}`}
+        role="tabpanel"
+        aria-labelledby={`tab-nav-${index}`}
+        style={{
+          height: isActive ? 'auto' : '0px',
+          opacity: isActive ? 1 : 0,
+          overflow: 'hidden',
+          transition: 'height 0.3s ease, opacity 0.3s ease',
+          ...style,
+        }}
+        {...props}
+      >
+        <div className="c-tabs__panel-body">{children}</div>
+      </div>
+    );
+  }
+);
+TabsPanel.displayName = 'TabsPanel';
+
+
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = memo(
+type TabsComponent = React.FC<TabsProps> & {
+  List: typeof TabsList;
+  Trigger: typeof TabsTrigger;
+  Panels: typeof TabsPanels;
+  Panel: typeof TabsPanel;
+};
+
+export const Tabs: TabsComponent = memo(
   ({
     items,
     activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
@@ -69,7 +197,8 @@ export const Tabs: React.FC<TabsProps> = memo(
     className = '',
     style,
     glass,
-  }) => {
+    children,
+  }: TabsProps) => {
     const [currentTab, setCurrentTab] = useState(activeIndex);
 
     // Handle tab change
@@ -80,44 +209,64 @@ export const Tabs: React.FC<TabsProps> = memo(
       }
     };
 
-    const tabContent = (
-      <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
-        <ul className="c-tabs__nav">
-          {items.map((item, index) => (
-            <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
-              <button
-                className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-                onClick={() => handleTabClick(index)}
+    // Determine content based on mode (legacy items vs compound children)
+    let content: ReactNode;
+
+    // Use items prop if provided
+    if (items && items.length > 0) {
+      // Legacy mode
+      content = (
+        <>
+          <ul className="c-tabs__nav">
+            {items.map((item, index) => (
+              <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
+                <button
+                  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}`}
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+          <div className="c-tabs__panels">
+            {items.map((item, index) => (
+              <div
+                className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+                key={`tab-panel-${index}`}
                 data-tabindex={index}
-                role="tab"
-                aria-selected={index === currentTab}
-                aria-controls={`tab-panel-${index}`}
+                id={`tab-panel-${index}`}
+                role="tabpanel"
+                aria-labelledby={`tab-nav-${index}`}
+                style={{
+                  height: index === currentTab ? 'auto' : '0px',
+                  opacity: index === currentTab ? 1 : 0,
+                  overflow: 'hidden',
+                  transition: 'height 0.3s ease, opacity 0.3s ease',
+                }}
               >
-                {item.label}
-              </button>
-            </li>
-          ))}
-        </ul>
-        <div className="c-tabs__panels">
-          {items.map((item, index) => (
-            <div
-              className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-              key={`tab-panel-${index}`}
-              data-tabindex={index}
-              id={`tab-panel-${index}`}
-              role="tabpanel"
-              aria-labelledby={`tab-nav-${index}`}
-              style={{
-                height: index === currentTab ? 'auto' : '0px',
-                opacity: index === currentTab ? 1 : 0,
-                overflow: 'hidden',
-                transition: 'height 0.3s ease, opacity 0.3s ease',
-              }}
-            >
-              <div className="c-tabs__panel-body">{item.content}</div>
-            </div>
-          ))}
-        </div>
+                <div className="c-tabs__panel-body">{item.content}</div>
+              </div>
+            ))}
+          </div>
+        </>
+      );
+    } else {
+      // Compound mode
+      content = (
+        <TabsContext.Provider value={{ currentTab, handleTabClick }}>
+          {children}
+        </TabsContext.Provider>
+      );
+    }
+
+    const wrapper = (
+      <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
+        {content}
       </div>
     );
 
@@ -128,19 +277,23 @@ export const Tabs: React.FC<TabsProps> = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
+      return <AtomixGlass {...glassProps}>{wrapper}</AtomixGlass>;
     }
 
-    return tabContent;
+    return wrapper;
   }
-);
+) as unknown as TabsComponent;
 
 Tabs.displayName = 'Tabs';
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Panels = TabsPanels;
+Tabs.Panel = TabsPanel;
 
 export default Tabs;

package/src/components/Tabs/TabsCompound.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Tabs } from './Tabs';
+import React from 'react';
+
+describe('Tabs Component', () => {
+  it('renders correctly with legacy props', () => {
+    const items = [
+      { label: 'Tab 1', content: 'Content 1' },
+      { label: 'Tab 2', content: 'Content 2' },
+    ];
+    render(<Tabs items={items} />);
+
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+    expect(screen.getByText('Content 1')).toBeVisible();
+
+    // Content 2 is rendered but hidden
+    const content2 = screen.getByText('Content 2').closest('.c-tabs__panel');
+    expect(content2).toHaveStyle({ height: '0px', opacity: '0' });
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Tabs>
+        <Tabs.List>
+          <Tabs.Trigger index={0}>Tab 1</Tabs.Trigger>
+          <Tabs.Trigger index={1}>Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Panels>
+          <Tabs.Panel index={0}>Content 1</Tabs.Panel>
+          <Tabs.Panel index={1}>Content 2</Tabs.Panel>
+        </Tabs.Panels>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+    expect(screen.getByText('Content 1')).toBeVisible();
+  });
+
+  it('switches tabs in compound mode', () => {
+    render(
+      <Tabs>
+        <Tabs.List>
+          <Tabs.Trigger index={0}>Tab 1</Tabs.Trigger>
+          <Tabs.Trigger index={1}>Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Panels>
+          <Tabs.Panel index={0}>Content 1</Tabs.Panel>
+          <Tabs.Panel index={1}>Content 2</Tabs.Panel>
+        </Tabs.Panels>
+      </Tabs>
+    );
+
+    fireEvent.click(screen.getByText('Tab 2'));
+
+    const content1 = screen.getByText('Content 1').closest('.c-tabs__panel');
+    const content2 = screen.getByText('Content 2').closest('.c-tabs__panel');
+
+    expect(content1).toHaveStyle({ height: '0px', opacity: '0' });
+    expect(content2).toHaveStyle({ height: 'auto', opacity: '1' });
+  });
+});

package/src/components/Todo/Todo.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { TodoProps } from '../../lib/types/components';
 import { useTodo } from '../../lib/composables/useTodo';
 import { Icon } from '../Icon/Icon';
-import { TODO } from '../../lib/constants/components';
 import { generateUUID } from '../../lib/utils';
 
 export const Todo: React.FC<TodoProps> = ({

package/src/components/Toggle/Toggle.stories.tsx

@@ -266,7 +266,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
       children: <div>Custom glass</div>,
     },
   },