@shohojdhara/atomix 0.3.15 → 0.4.1

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/Toggle/Toggle.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { Toggle } from './Toggle';
 
-const meta = {
+const meta: Meta<typeof Toggle> = {
   title: 'Components/Toggle',
   component: Toggle,
   parameters: {
@@ -75,7 +75,7 @@ Toggle provides an on/off switch control for binary choices. It offers a more vi
       description: 'Whether the toggle is initially on (uncontrolled)',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     checked: {
@@ -95,7 +95,7 @@ Toggle provides an on/off switch control for binary choices. It offers a more vi
       description: 'Whether the toggle is disabled',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     glass: {
@@ -103,11 +103,11 @@ Toggle provides an on/off switch control for binary choices. It offers a more vi
       description: 'Enable glass morphism effect',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
   },
-} satisfies Meta<typeof Toggle>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -171,7 +171,15 @@ export const InitiallyOn: Story = {
 
 export const DisabledStates: Story = {
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '2rem', padding: '30px' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '2rem',
+        padding: '30px',
+      }}
+    >
       <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
         <Toggle disabled={true} checked={false} />
         <span>Disabled Off</span>
@@ -193,13 +201,19 @@ export const DisabledStates: Story = {
 
 export const WithGlassEffect: Story = {
   render: args => (
-    <div style={{ 
-      display: 'flex', 
-      justifyContent: 'center', 
-      padding: '30px',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      minHeight: '200px'
-    }}>
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
       <Toggle {...args} />
     </div>
   ),

package/src/components/Toggle/Toggle.test.tsx

@@ -4,88 +4,83 @@ import { Toggle } from './Toggle';
 import React from 'react';
 
 describe('Toggle Component', () => {
-    it('renders correctly', () => {
-        render(<Toggle />);
-        const toggle = screen.getByRole('switch');
-        expect(toggle).toBeInTheDocument();
-        expect(toggle).toHaveAttribute('aria-checked', 'false');
-    });
+  it('renders correctly', () => {
+    render(<Toggle />);
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toBeInTheDocument();
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+  });
 
-    it('handles defaultChecked (uncontrolled)', () => {
-        render(<Toggle defaultChecked={true} />);
-        const toggle = screen.getByRole('switch');
-        expect(toggle).toHaveAttribute('aria-checked', 'true');
-    });
+  it('handles defaultChecked (uncontrolled)', () => {
+    render(<Toggle defaultChecked={true} />);
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
+  });
 
-    it('toggles state when clicked (uncontrolled)', () => {
-        const handleChange = vi.fn();
-        render(<Toggle onChange={handleChange} />);
-        const toggle = screen.getByRole('switch');
+  it('toggles state when clicked (uncontrolled)', () => {
+    const handleChange = vi.fn();
+    render(<Toggle onChange={handleChange} />);
+    const toggle = screen.getByRole('switch');
 
-        fireEvent.click(toggle);
-        expect(toggle).toHaveAttribute('aria-checked', 'true');
-        expect(handleChange).toHaveBeenCalledWith(true);
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
+    expect(handleChange).toHaveBeenCalledWith(true);
 
-        fireEvent.click(toggle);
-        expect(toggle).toHaveAttribute('aria-checked', 'false');
-        expect(handleChange).toHaveBeenCalledWith(false);
-    });
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+    expect(handleChange).toHaveBeenCalledWith(false);
+  });
 
-    it('handles checked (controlled)', () => {
-        const { rerender } = render(<Toggle checked={true} />);
-        const toggle = screen.getByRole('switch');
-        expect(toggle).toHaveAttribute('aria-checked', 'true');
+  it('handles checked (controlled)', () => {
+    const { rerender } = render(<Toggle checked={true} />);
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
 
-        rerender(<Toggle checked={false} />);
-        expect(toggle).toHaveAttribute('aria-checked', 'false');
-    });
+    rerender(<Toggle checked={false} />);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+  });
 
-    it('calls onChange but does not toggle internally when controlled', () => {
-        const handleChange = vi.fn();
-        render(<Toggle checked={false} onChange={handleChange} />);
-        const toggle = screen.getByRole('switch');
+  it('calls onChange but does not toggle internally when controlled', () => {
+    const handleChange = vi.fn();
+    render(<Toggle checked={false} onChange={handleChange} />);
+    const toggle = screen.getByRole('switch');
 
-        fireEvent.click(toggle);
-        expect(handleChange).toHaveBeenCalledWith(true);
-        // Should still be false because it's controlled and we haven't rerendered with checked={true}
-        expect(toggle).toHaveAttribute('aria-checked', 'false');
-    });
+    fireEvent.click(toggle);
+    expect(handleChange).toHaveBeenCalledWith(true);
+    // Should still be false because it's controlled and we haven't rerendered with checked={true}
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+  });
 
-    it('does not toggle when disabled', () => {
-        const handleChange = vi.fn();
-        render(<Toggle disabled onChange={handleChange} />);
-        const toggle = screen.getByRole('switch');
+  it('does not toggle when disabled', () => {
+    const handleChange = vi.fn();
+    render(<Toggle disabled onChange={handleChange} />);
+    const toggle = screen.getByRole('switch');
 
-        fireEvent.click(toggle);
-        expect(handleChange).not.toHaveBeenCalled();
-        expect(toggle).toHaveAttribute('aria-checked', 'false');
-        expect(toggle).toHaveAttribute('aria-disabled', 'true');
-        expect(toggle).toHaveAttribute('tabindex', '-1');
-    });
+    fireEvent.click(toggle);
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+    expect(toggle).toHaveAttribute('aria-disabled', 'true');
+    expect(toggle).toHaveAttribute('tabindex', '-1');
+  });
 
-    it('handles keyboard interaction', () => {
-        const handleChange = vi.fn();
-        render(<Toggle onChange={handleChange} />);
-        const toggle = screen.getByRole('switch');
+  it('handles keyboard interaction', () => {
+    const handleChange = vi.fn();
+    render(<Toggle onChange={handleChange} />);
+    const toggle = screen.getByRole('switch');
 
-        fireEvent.keyDown(toggle, { key: 'Enter' });
-        expect(toggle).toHaveAttribute('aria-checked', 'true');
-        expect(handleChange).toHaveBeenCalledWith(true);
+    fireEvent.keyDown(toggle, { key: 'Enter' });
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
+    expect(handleChange).toHaveBeenCalledWith(true);
 
-        fireEvent.keyDown(toggle, { key: ' ' });
-        expect(toggle).toHaveAttribute('aria-checked', 'false');
-        expect(handleChange).toHaveBeenCalledWith(false);
-    });
+    fireEvent.keyDown(toggle, { key: ' ' });
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+    expect(handleChange).toHaveBeenCalledWith(false);
+  });
 
-    it('applies accessibility attributes', () => {
-        render(
-            <Toggle
-                aria-label="Accessible Toggle"
-                aria-describedby="description-id"
-            />
-        );
-        const toggle = screen.getByRole('switch');
-        expect(toggle).toHaveAttribute('aria-label', 'Accessible Toggle');
-        expect(toggle).toHaveAttribute('aria-describedby', 'description-id');
-    });
+  it('applies accessibility attributes', () => {
+    render(<Toggle aria-label="Accessible Toggle" aria-describedby="description-id" />);
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toHaveAttribute('aria-label', 'Accessible Toggle');
+    expect(toggle).toHaveAttribute('aria-describedby', 'description-id');
+  });
 });

package/src/components/Toggle/Toggle.tsx

@@ -91,8 +91,11 @@ export const Toggle: React.FC<ToggleProps> = ({
     'c-toggle',
     isChecked && TOGGLE.CLASSES.IS_ON,
     disabled && 'is-disabled',
+    glass && 'c-toggle--glass',
     className,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   const toggleContent = (
     <div

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -193,15 +193,17 @@ export const ClickTrigger: Story = {
 
 export const AllPositions: Story = {
   render: () => (
-    <div style={{ 
-      display: 'grid', 
-      gridTemplateColumns: 'repeat(3, 1fr)', 
-      gap: '20px', 
-      padding: '50px',
-      alignItems: 'center',
-      justifyItems: 'center',
-      height: '500px'
-    }}>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '20px',
+        padding: '50px',
+        alignItems: 'center',
+        justifyItems: 'center',
+        height: '500px',
+      }}
+    >
       <div>
         <Tooltip content="Top Left Tooltip">
           <button className="c-btn c-btn--primary">Top Left</button>
@@ -217,23 +219,23 @@ export const AllPositions: Story = {
           <button className="c-btn c-btn--primary">Top Right</button>
         </Tooltip>
       </div>
-      
+
       <div>
         <Tooltip content="Left Tooltip" position="left">
           <button className="c-btn c-btn--primary">Left</button>
         </Tooltip>
       </div>
-      
+
       <div style={{ textAlign: 'center' }}>
         <p>All tooltip positions</p>
       </div>
-      
+
       <div>
         <Tooltip content="Right Tooltip" position="right">
           <button className="c-btn c-btn--primary">Right</button>
         </Tooltip>
       </div>
-      
+
       <div>
         <Tooltip content="Bottom Left Tooltip" position="bottom-left">
           <button className="c-btn c-btn--primary">Bottom Left</button>
@@ -262,13 +264,15 @@ export const AllPositions: Story = {
 
 export const WithGlassEffect: Story = {
   render: args => (
-    <div style={{ 
-      display: 'flex', 
-      justifyContent: 'center', 
-      padding: '100px',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      minHeight: '300px'
-    }}>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '100px',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '300px',
+      }}
+    >
       <Tooltip {...args}>
         <button className="c-btn c-btn--primary">Hover me</button>
       </Tooltip>

package/src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,11 @@ import React, { ReactNode, memo } from 'react';
 import { TOOLTIP } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
-import { useTooltip, type TooltipPosition, type TooltipTrigger } from '../../lib/composables/useTooltip';
+import {
+  useTooltip,
+  type TooltipPosition,
+  type TooltipTrigger,
+} from '../../lib/composables/useTooltip';
 
 export interface TooltipProps {
   /**
@@ -19,14 +23,14 @@ export interface TooltipProps {
    * The position of the tooltip relative to the trigger
    */
   position?:
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
 
   /**
    * How the tooltip is triggered
@@ -60,109 +64,103 @@ export interface TooltipProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-export const Tooltip: React.FC<TooltipProps> = memo(({
-  content,
-  children,
-  position = TOOLTIP.DEFAULTS.POSITION,
-  trigger = TOOLTIP.DEFAULTS.TRIGGER,
-  className = '',
-  style,
-  delay = TOOLTIP.DEFAULTS.DELAY,
-  offset = TOOLTIP.DEFAULTS.OFFSET,
-  glass,
-}) => {
-  const {
-    isVisible,
-    isPositioned,
-    tooltipId,
-    triggerRef,
-    tooltipRef,
-    tooltipStyle,
-    arrowStyle,
-    triggerProps,
-    wrapperProps,
-  } = useTooltip({
-    position: position as   TooltipPosition,
-    trigger: trigger as TooltipTrigger,
-    offset,
-    delay,
-  });
-
-  const getTooltipPositionClasses = () => {
-    const positionMap: Record<string, string> = {
-      top: 'c-tooltip--top',
-      bottom: 'c-tooltip--bottom',
-      left: 'c-tooltip--left',
-      right: 'c-tooltip--right',
-      'top-left': 'c-tooltip--top-left',
-      'top-right': 'c-tooltip--top-right',
-      'bottom-left': 'c-tooltip--bottom-left',
-      'bottom-right': 'c-tooltip--bottom-right',
+export const Tooltip: React.FC<TooltipProps> = memo(
+  ({
+    content,
+    children,
+    position = TOOLTIP.DEFAULTS.POSITION,
+    trigger = TOOLTIP.DEFAULTS.TRIGGER,
+    className = '',
+    style,
+    delay = TOOLTIP.DEFAULTS.DELAY,
+    offset = TOOLTIP.DEFAULTS.OFFSET,
+    glass,
+  }) => {
+    const {
+      isVisible,
+      isPositioned,
+      tooltipId,
+      triggerRef,
+      tooltipRef,
+      tooltipStyle,
+      arrowStyle,
+      triggerProps,
+      wrapperProps,
+    } = useTooltip({
+      position: position as TooltipPosition,
+      trigger: trigger as TooltipTrigger,
+      offset,
+      delay,
+    });
+
+    const getTooltipPositionClasses = () => {
+      const positionMap: Record<string, string> = {
+        top: 'c-tooltip--top',
+        bottom: 'c-tooltip--bottom',
+        left: 'c-tooltip--left',
+        right: 'c-tooltip--right',
+        'top-left': 'c-tooltip--top-left',
+        'top-right': 'c-tooltip--top-right',
+        'bottom-left': 'c-tooltip--bottom-left',
+        'bottom-right': 'c-tooltip--bottom-right',
+      };
+      return positionMap[position] || 'c-tooltip--top';
     };
-    return positionMap[position] || 'c-tooltip--top';
-  };
-
-  const renderContent = () => {
-    const contentElement = (
-      <div
-        className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && isPositioned && 'is-active'}`}
-      >
-        <span 
-          className={TOOLTIP.SELECTORS.ARROW.substring(1)}
-          style={arrowStyle}
-        ></span>
-        {content}
-      </div>
-    );
 
-    if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 100,
-        blurAmount: 3,
-      };
+    const renderContent = () => {
+      const contentElement = (
+        <div
+          className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)} ${isVisible && isPositioned && 'is-active'}`}
+        >
+          <span className={TOOLTIP.SELECTORS.ARROW.substring(1)} style={arrowStyle}></span>
+          {content}
+        </div>
+      );
 
-      const glassProps =
-        glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-      return <AtomixGlass {...glassProps}>{contentElement}</AtomixGlass>;
-    }
-
-    return contentElement;
-  };
-
-  return (
-    <div
-      className="u-position-relative u-inline-block"
-      style={style}
-      {...wrapperProps}
-    >
-      <div
-        ref={triggerRef}
-        className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
-        {...triggerProps}
-      >
-        {children}
-      </div>
-      {isVisible && (
+      if (glass) {
+        const defaultGlassProps = {
+          displacementScale: 100,
+          blurAmount: 3,
+        };
+
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+        return <AtomixGlass {...glassProps}>{contentElement}</AtomixGlass>;
+      }
+
+      return contentElement;
+    };
+
+    return (
+      <div className="u-position-relative u-inline-block" style={style} {...wrapperProps}>
         <div
-          ref={tooltipRef}
-          id={tooltipId}
-          role="tooltip"
-          className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)} ${getTooltipPositionClasses()} ${glass ? 'c-tooltip--glass' : ''}`}
-          data-tooltip-position={position}
-          data-tooltip-trigger={trigger}
-          style={{
-            ...tooltipStyle,
-            // Position off-screen initially to prevent jump, then move to calculated position
-            ...(isPositioned ? {} : { left: '-9999px', top: '-9999px' }),
-          }}
+          ref={triggerRef}
+          className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
+          {...triggerProps}
         >
-          {renderContent()}
+          {children}
         </div>
-      )}
-    </div>
-  );
-});
+        {isVisible && (
+          <div
+            ref={tooltipRef}
+            id={tooltipId}
+            role="tooltip"
+            className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)} ${getTooltipPositionClasses()} ${glass ? 'c-tooltip--glass' : ''}`}
+            data-tooltip-position={position}
+            data-tooltip-trigger={trigger}
+            style={{
+              ...tooltipStyle,
+              // Position off-screen initially to prevent jump, then move to calculated position
+              ...(isPositioned ? {} : { left: '-9999px', top: '-9999px' }),
+            }}
+          >
+            {renderContent()}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
 
 Tooltip.displayName = 'Tooltip';