@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Form/Input.stories.tsx

@@ -167,25 +167,14 @@ export const States: Story = {
 export const WithIcons: Story = {
   render: () => (
     <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Input
-        placeholder="Search..."
-        prefixIcon={<MagnifyingGlass size={18} />}
-      />
-      <Input
-        placeholder="Email address"
-        type="email"
-        prefixIcon={<Envelope size={18} />}
-      />
+      <Input placeholder="Search..." prefixIcon={<MagnifyingGlass size={18} />} />
+      <Input placeholder="Email address" type="email" prefixIcon={<Envelope size={18} />} />
       <Input
         placeholder="Username"
         prefixIcon={<User size={18} />}
         suffixIcon={<span style={{ color: 'green' }}>✓</span>}
       />
-      <Input
-        placeholder="Phone number"
-        type="tel"
-        prefixIcon={<Phone size={18} />}
-      />
+      <Input placeholder="Phone number" type="tel" prefixIcon={<Phone size={18} />} />
     </div>
   ),
 };
@@ -201,14 +190,14 @@ export const Clearable: Story = {
         <Input
           placeholder="Type to see clear button"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           clearable
         />
         <Input
           placeholder="With prefix icon"
           prefixIcon={<MagnifyingGlass size={18} />}
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           clearable
         />
       </div>
@@ -227,14 +216,14 @@ export const WithCounter: Story = {
         <Input
           placeholder="Type here (max 50 characters)"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           maxLength={50}
           showCounter
         />
         <Input
           placeholder="With custom max count"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           maxCount={100}
           showCounter
         />
@@ -255,7 +244,7 @@ export const PasswordToggle: Story = {
           type="password"
           placeholder="Enter password"
           value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          onChange={e => setPassword(e.target.value)}
           showPasswordToggle
         />
         <Input
@@ -263,7 +252,7 @@ export const PasswordToggle: Story = {
           placeholder="Password with prefix icon"
           prefixIcon={<Lock size={18} />}
           value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          onChange={e => setPassword(e.target.value)}
           showPasswordToggle
         />
       </div>
@@ -287,22 +276,18 @@ export const WithMessages: Story = {
           type="email"
           placeholder="Email address"
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={e => setEmail(e.target.value)}
           invalid={isInvalidEmail}
           errorMessage={isInvalidEmail ? 'Please enter a valid email address' : undefined}
-          helperText={!isInvalidEmail ? 'We\'ll never share your email' : undefined}
+          helperText={!isInvalidEmail ? "We'll never share your email" : undefined}
         />
         <Input
           placeholder="Username"
           value={username}
-          onChange={(e) => setUsername(e.target.value)}
+          onChange={e => setUsername(e.target.value)}
           helperText="Choose a unique username"
         />
-        <Input
-          placeholder="Required field"
-          required
-          helperText="This field is required"
-        />
+        <Input placeholder="Required field" required helperText="This field is required" />
       </div>
     );
   },
@@ -331,7 +316,8 @@ export const Comprehensive: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'A comprehensive example demonstrating multiple input features including icons, clearable functionality, password toggle, character counter, and helper text in a form-like layout.',
+        story:
+          'A comprehensive example demonstrating multiple input features including icons, clearable functionality, password toggle, character counter, and helper text in a form-like layout.',
       },
     },
   },
@@ -343,13 +329,11 @@ export const Comprehensive: Story = {
     return (
       <div className="u-flex u-flex-column u-gap-4" style={{ width: '400px' }}>
         <div>
-          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>
-            Search
-          </label>
+          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>Search</label>
           <Input
             placeholder="Search products..."
             value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            onChange={e => setSearch(e.target.value)}
             prefixIcon={<MagnifyingGlass size={18} />}
             clearable
             fullWidth
@@ -364,7 +348,7 @@ export const Comprehensive: Story = {
             type="password"
             placeholder="Enter your password"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={e => setPassword(e.target.value)}
             prefixIcon={<Lock size={18} />}
             showPasswordToggle
             fullWidth
@@ -373,13 +357,11 @@ export const Comprehensive: Story = {
         </div>
 
         <div>
-          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>
-            Bio
-          </label>
+          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>Bio</label>
           <Input
             placeholder="Tell us about yourself"
             value={bio}
-            onChange={(e) => setBio(e.target.value)}
+            onChange={e => setBio(e.target.value)}
             maxLength={200}
             showCounter
             fullWidth
@@ -465,7 +447,8 @@ export const GlassShowcase: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates glass morphism effects on inputs with different modes and configurations, showing how inputs look over colorful backgrounds.',
+        story:
+          'Demonstrates glass morphism effects on inputs with different modes and configurations, showing how inputs look over colorful backgrounds.',
       },
     },
   },

package/src/components/Form/Input.test.tsx

@@ -4,56 +4,50 @@ import { Input } from './Input';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Input Component', () => {
-    it('renders correctly', () => {
-        render(<Input placeholder="Test Input" />);
-        expect(screen.getByPlaceholderText('Test Input')).toBeInTheDocument();
-    });
+  it('renders correctly', () => {
+    render(<Input placeholder="Test Input" />);
+    expect(screen.getByPlaceholderText('Test Input')).toBeInTheDocument();
+  });
 
-    it('handles controlled value', () => {
-        render(<Input value="Controlled Value" onChange={() => { }} />);
-        const input = screen.getByDisplayValue('Controlled Value');
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveValue('Controlled Value');
-    });
+  it('handles controlled value', () => {
+    render(<Input value="Controlled Value" onChange={() => {}} />);
+    const input = screen.getByDisplayValue('Controlled Value');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Controlled Value');
+  });
 
-    it('handles uncontrolled defaultValue', () => {
-        render(<Input defaultValue="Default Value" />);
-        const input = screen.getByDisplayValue('Default Value');
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveValue('Default Value');
-    });
+  it('handles uncontrolled defaultValue', () => {
+    render(<Input defaultValue="Default Value" />);
+    const input = screen.getByDisplayValue('Default Value');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Default Value');
+  });
 
-    it('calls onChange when typing', () => {
-        const handleChange = vi.fn();
-        render(<Input onChange={handleChange} />);
-        const input = screen.getByRole('textbox');
-        fireEvent.change(input, { target: { value: 'New Value' } });
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
+  it('calls onChange when typing', () => {
+    const handleChange = vi.fn();
+    render(<Input onChange={handleChange} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'New Value' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 
-    it('applies accessibility attributes', () => {
-        render(
-            <Input
-                aria-label="Accessible Label"
-                aria-describedby="description-id"
-                invalid
-            />
-        );
-        const input = screen.getByLabelText('Accessible Label');
-        expect(input).toHaveAttribute('aria-describedby', 'description-id');
-        expect(input).toHaveAttribute('aria-invalid', 'true');
-    });
+  it('applies accessibility attributes', () => {
+    render(<Input aria-label="Accessible Label" aria-describedby="description-id" invalid />);
+    const input = screen.getByLabelText('Accessible Label');
+    expect(input).toHaveAttribute('aria-describedby', 'description-id');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
 
-    it('renders as glass when enabled', () => {
-        render(<Input glass placeholder="Glass Input" />);
-        expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
-    });
+  it('renders as glass when enabled', () => {
+    render(<Input glass placeholder="Glass Input" />);
+    expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
+  });
 });

package/src/components/Form/Radio.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Radio } from './Radio';
 
 const meta = {
@@ -9,8 +10,79 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Radio component allows users to select a single option from a group of mutually exclusive options. Radio buttons are typically used in groups where only one selection is allowed. They provide clear visual feedback and support keyboard navigation.',
+        component: `
+# Radio
+
+## Overview
+
+Radio component allows users to select a single option from a group of mutually exclusive options. Radio buttons are typically used in groups where only one selection is allowed. They provide clear visual feedback and support keyboard navigation.
+
+## Features
+
+- Single selection from mutually exclusive options
+- Label support
+- Disabled state
+- Validation states (valid/invalid)
+- Glass morphism effect
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Navigate and toggle with keyboard
+- Screen reader: State and label announced properly
+- ARIA support: Proper roles and properties for radio components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Radio 
+  label="Option label" 
+  name="groupName"
+  value="optionValue"
+  checked={isSelected}
+  onChange={setSelected}
+/>
+\`\`\`
+
+### Radio Group
+
+\`\`\`tsx
+<Radio 
+  label="Option 1" 
+  name="group" 
+  value="opt1"
+  checked={selected === 'opt1'}
+  onChange={() => setSelected('opt1')}
+/>
+<Radio 
+  label="Option 2" 
+  name="group" 
+  value="opt2"
+  checked={selected === 'opt2'}
+  onChange={() => setSelected('opt2')}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label | string | - | Radio button label text |
+| checked | boolean | false | Whether the radio button is checked |
+| disabled | boolean | false | Whether the radio button is disabled |
+| invalid | boolean | false | Whether the radio button is invalid |
+| valid | boolean | false | Whether the radio button is valid |
+| glass | boolean | false | Enable glass morphism effect |
+| name | string | - | Name of the radio button group |
+| value | string | - | Value of the radio button |
+| onChange | (value: string) => void | - | Callback when radio button state changes |
+        `,
       },
     },
   },
@@ -19,26 +91,70 @@ const meta = {
     label: {
       control: 'text',
       description: 'Radio button label text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     checked: {
       control: 'boolean',
       description: 'Whether the radio button is checked',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the radio button is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     invalid: {
       control: 'boolean',
       description: 'Whether the radio button is invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     valid: {
       control: 'boolean',
       description: 'Whether the radio button is valid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Name of the radio button group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Value of the radio button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when radio button state changes',
     },
   },
 } satisfies Meta<typeof Radio>;
@@ -47,12 +163,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Basic radio button
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     label: 'Option 1',
     name: 'option',
     value: 'option1',
-    onChange: () => { },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic radio button with label.',
+      },
+    },
   },
 };
 
@@ -63,7 +185,13 @@ export const Checked: Story = {
     name: 'option',
     value: 'option1',
     checked: true,
-    onChange: () => { },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checked radio button state.',
+      },
+    },
   },
 };
 
@@ -98,6 +226,13 @@ export const RadioGroup: Story = {
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Group of radio buttons demonstrating mutual exclusivity.',
+      },
+    },
+  },
 };
 
 // Radio button states
@@ -121,20 +256,14 @@ export const States: Story = {
           checked={selectedValue === 'checked'}
           onChange={() => setSelectedValue('checked')}
         />
-        <Radio
-          label="Disabled radio"
-          name="states"
-          value="disabled"
-          disabled
-          onChange={() => { }}
-        />
+        <Radio label="Disabled radio" name="states" value="disabled" disabled onChange={() => {}} />
         <Radio
           label="Disabled and checked radio"
           name="states"
           value="disabledChecked"
           disabled
           checked
-          onChange={() => { }}
+          onChange={() => {}}
         />
         <Radio
           label="Valid radio"
@@ -163,7 +292,7 @@ export const WithoutLabel: Story = {
     name: 'noLabel',
     value: 'noLabel',
     'aria-label': 'Radio button without visible label',
-    onChange: () => { },
+    onChange: () => {},
   },
 };
 
@@ -174,7 +303,7 @@ export const Glass: Story = {
     name: 'glass',
     value: 'glass',
     glass: true,
-    onChange: () => { },
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -206,7 +335,7 @@ export const GlassCustom: Story = {
       aberrationIntensity: 0.8,
       cornerRadius: 12,
     } as any,
-    onChange: () => { },
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -385,4 +514,4 @@ export const GlassStates: Story = {
       </div>
     );
   },
-};
+};

package/src/components/Form/Radio.tsx

@@ -6,78 +6,80 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Radio - A component for radio button inputs
  */
-export const Radio: React.FC<RadioProps> = memo(({
-  label,
-  checked = false,
-  onChange,
-  className = '',
-  style,
-  disabled = false,
-  required = false,
-  id,
-  name,
-  value,
-  invalid = false,
-  valid = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  glass,
-}) => {
-  const { generateRadioClass } = useRadio({
-    disabled,
-    invalid,
-    valid,
-  });
+export const Radio: React.FC<RadioProps> = memo(
+  ({
+    label,
+    checked = false,
+    onChange,
+    className = '',
+    style,
+    disabled = false,
+    required = false,
+    id,
+    name,
+    value,
+    invalid = false,
+    valid = false,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    glass,
+  }) => {
+    const { generateRadioClass } = useRadio({
+      disabled,
+      invalid,
+      valid,
+    });
 
-  const radioClass = generateRadioClass({
-    className: `${className} ${glass ? 'c-radio--glass' : ''}`.trim(),
-    disabled,
-    invalid,
-    valid,
-  });
+    const radioClass = generateRadioClass({
+      className: `${className} ${glass ? 'c-radio--glass' : ''}`.trim(),
+      disabled,
+      invalid,
+      valid,
+    });
 
-  const radioContent = (
-    <div className={radioClass} style={style}>
-      <input
-        type="radio"
-        className="c-radio__input"
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        required={required}
-        id={id}
-        name={name}
-        value={value}
-        aria-label={!label ? ariaLabel : undefined}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-      />
-      {label && (
-        <label className="c-radio__label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-    </div>
-  );
+    const radioContent = (
+      <div className={radioClass} style={style}>
+        <input
+          type="radio"
+          className="c-radio__input"
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          required={required}
+          id={id}
+          name={name}
+          value={value}
+          aria-label={!label ? ariaLabel : undefined}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+        />
+        {label && (
+          <label className="c-radio__label" htmlFor={id}>
+            {label}
+          </label>
+        )}
+      </div>
+    );
 
-  if (glass) {
-    // Default glass settings for radio buttons
-    const defaultGlassProps = {
-      displacementScale: 40,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.3,
-      cornerRadius: 6,
-      mode: 'shader' as const,
-    };
+    if (glass) {
+      // Default glass settings for radio buttons
+      const defaultGlassProps = {
+        displacementScale: 40,
+        blurAmount: 1,
+        saturation: 160,
+        aberrationIntensity: 0.3,
+        cornerRadius: 6,
+        mode: 'shader' as const,
+      };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return <AtomixGlass {...glassProps}>{radioContent}</AtomixGlass>;
-  }
+      return <AtomixGlass {...glassProps}>{radioContent}</AtomixGlass>;
+    }
 
-  return radioContent;
-});
+    return radioContent;
+  }
+);
 
 export type { RadioProps };