@shohojdhara/atomix 0.3.15 → 0.4.1

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

@@ -256,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"
@@ -298,7 +292,7 @@ export const WithoutLabel: Story = {
     name: 'noLabel',
     value: 'noLabel',
     'aria-label': 'Radio button without visible label',
-    onChange: () => { },
+    onChange: () => {},
   },
 };
 
@@ -309,7 +303,7 @@ export const Glass: Story = {
     name: 'glass',
     value: 'glass',
     glass: true,
-    onChange: () => { },
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -341,7 +335,7 @@ export const GlassCustom: Story = {
       aberrationIntensity: 0.8,
       cornerRadius: 12,
     } as any,
-    onChange: () => { },
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -520,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 };
 

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

@@ -256,6 +256,29 @@ export const Sizes: Story = {
   ),
 };
 
+// Compound usage
+export const Compound: Story = {
+  render: () => (
+    <div style={{ width: '300px' }}>
+      <Select placeholder="Select a framework">
+        <Select.Option value="react">React</Select.Option>
+        <Select.Option value="vue">Vue</Select.Option>
+        <Select.Option value="angular">Angular</Select.Option>
+        <Select.Option value="svelte" disabled>
+          Svelte (Disabled)
+        </Select.Option>
+      </Select>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Select component using Compound Component Pattern.',
+      },
+    },
+  },
+};
+
 // Select states
 export const States: Story = {
   args: {

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Select } from './Select';
+
+describe('Select Component', () => {
+  it('renders legacy options correctly', () => {
+    const options = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+    ];
+    render(<Select options={options} value="" onChange={() => {}} />);
+
+    // Check custom UI items
+    const items = document.querySelectorAll('.c-select__item');
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent('Option 1');
+    expect(items[1]).toHaveTextContent('Option 2');
+
+    // Check native select options
+    const select = document.querySelector('select');
+    expect(select).not.toBeNull();
+    expect(select?.options).toHaveLength(3); // Placeholder + 2
+    expect(select?.options[1].value).toBe('1');
+    expect(select?.options[2].value).toBe('2');
+  });
+
+  it('renders compound options correctly', async () => {
+    render(
+      <Select value="" onChange={() => {}}>
+        <Select.Option value="1">Compound Option 1</Select.Option>
+        <Select.Option value="2">Compound Option 2</Select.Option>
+      </Select>
+    );
+
+    // Check custom UI items
+    const items = document.querySelectorAll('.c-select__item');
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent('Compound Option 1');
+    expect(items[1]).toHaveTextContent('Compound Option 2');
+
+    // Check native select options
+    await waitFor(() => {
+        const select = document.querySelector('select');
+        expect(select).not.toBeNull();
+        expect(select?.options).toHaveLength(3); // Placeholder + 2
+        expect(select?.options[1].value).toBe('1');
+        expect(select?.options[2].value).toBe('2');
+    });
+  });
+
+  it('handles selection in legacy mode', () => {
+    const handleChange = vi.fn();
+    const options = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+    ];
+    render(<Select options={options} value="" onChange={handleChange} />);
+
+    // Open dropdown
+    const trigger = document.querySelector('.c-select__selected');
+    fireEvent.click(trigger!);
+
+    // Click item
+    const item = document.querySelector('.c-select__item[data-value="1"]');
+    fireEvent.click(item!);
+
+    expect(handleChange).toHaveBeenCalled();
+    // Check event value
+    expect(handleChange.mock.calls[0][0].target.value).toBe('1');
+  });
+
+  it('handles selection in compound mode', async () => {
+    const handleChange = vi.fn();
+    render(
+      <Select value="" onChange={handleChange}>
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+      </Select>
+    );
+
+    // Wait for options to be registered
+    await waitFor(() => {
+        const select = document.querySelector('select');
+        expect(select?.options).toHaveLength(3);
+    });
+
+    // Open dropdown
+    const trigger = document.querySelector('.c-select__selected');
+    fireEvent.click(trigger!);
+
+    // Click item
+    const item = document.querySelector('.c-select__item[data-value="2"]');
+    fireEvent.click(item!);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0].target.value).toBe('2');
+  });
+});