@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Tabs/Tabs.tsx

@@ -61,83 +61,85 @@ export interface TabsProps {
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = memo(({
-  items,
-  activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
-  onTabChange,
-  className = '',
-  style,
-  glass,
-}) => {
-  const [currentTab, setCurrentTab] = useState(activeIndex);
-
-  // Handle tab change
-  const handleTabClick = (index: number) => {
-    setCurrentTab(index);
-    if (onTabChange) {
-      onTabChange(index);
-    }
-  };
-
-  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)}
+export const Tabs: React.FC<TabsProps> = memo(
+  ({
+    items,
+    activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
+    onTabChange,
+    className = '',
+    style,
+    glass,
+  }) => {
+    const [currentTab, setCurrentTab] = useState(activeIndex);
+
+    // Handle tab change
+    const handleTabClick = (index: number) => {
+      setCurrentTab(index);
+      if (onTabChange) {
+        onTabChange(index);
+      }
+    };
+
+    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)}
+                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 className="c-tabs__panel-body">{item.content}</div>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-
-  if (glass) {
-    // Default glass settings for tabs
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      cornerRadius: 8,
-      mode: 'shader' as const,
-    };
-
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    );
+
+    if (glass) {
+      // Default glass settings for tabs
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 160,
+        aberrationIntensity: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
+    }
 
-    return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
+    return tabContent;
   }
-
-  return tabContent;
-});
+);
 
 Tabs.displayName = 'Tabs';
 

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>