@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/EdgePanel/EdgePanelCompound.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { EdgePanel } from './EdgePanel';
+import React from 'react';
+
+describe('EdgePanel Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <EdgePanel isOpen={true} title="Legacy Title">
+        Legacy Content
+      </EdgePanel>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <EdgePanel isOpen={true}>
+        <EdgePanel.Header>
+          <h4>Compound Title</h4>
+        </EdgePanel.Header>
+        <EdgePanel.Body>
+          Compound Content
+        </EdgePanel.Body>
+        <EdgePanel.Footer>
+          Footer
+        </EdgePanel.Footer>
+      </EdgePanel>
+    );
+
+    expect(screen.getByText('Compound Title')).toBeInTheDocument();
+    expect(screen.getByText('Compound Content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
+
+  it('uses close button in compound mode', () => {
+    const onClose = vi.fn();
+    render(
+      <EdgePanel isOpen={true} onOpenChange={onClose}>
+        <EdgePanel.Header>
+          <EdgePanel.CloseButton onClick={() => onClose(false)} />
+        </EdgePanel.Header>
+        <EdgePanel.Body>Content</EdgePanel.Body>
+      </EdgePanel>
+    );
+
+    const closeBtn = screen.getByLabelText('Close panel');
+    fireEvent.click(closeBtn);
+    expect(onClose).toHaveBeenCalledWith(false);
+  });
+});

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

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

package/src/components/Form/Checkbox.tsx

@@ -117,7 +117,7 @@ export const Checkbox = React.memo(
           blurAmount: 1,
           saturation: 160,
           aberrationIntensity: 0.3,
-          cornerRadius: 6,
+          borderRadius: 6,
           mode: 'shader' as const,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

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

@@ -432,7 +432,7 @@ export const GlassVariants: Story = {
             blurAmount: 2,
             saturation: 200,
             aberrationIntensity: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
           }}
         />
       </div>

package/src/components/Form/Input.tsx

@@ -101,7 +101,7 @@ export const Input = memo(
           blurAmount: 1,
           saturation: 180,
           aberrationIntensity: 0.2,
-          cornerRadius: 12,
+          borderRadius: 12,
           mode: 'shader' as const,
         };
 

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

@@ -333,7 +333,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     } as any,
     onChange: () => {},
   },

package/src/components/Form/Radio.tsx

@@ -68,7 +68,7 @@ export const Radio: React.FC<RadioProps> = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.3,
-        cornerRadius: 6,
+        borderRadius: 6,
         mode: 'shader' as const,
       };
 

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: {
@@ -330,7 +353,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

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');
+  });
+});

package/src/components/Form/Select.tsx

@@ -1,15 +1,20 @@
-import React, { useRef, useEffect, useState, memo } from 'react';
-import { SelectProps } from '../../lib/types/components';
+import React, { useRef, useEffect, useState, memo, useCallback } from 'react';
+import { SelectProps, SelectOption as SelectOptionType } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
 import { SELECT } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { SelectContext, SelectOption } from './SelectOption';
+
+export type SelectComponent = React.FC<SelectProps> & {
+  Option: typeof SelectOption;
+};
 
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = memo(
+export const Select: SelectComponent = memo(
   ({
-    options = [],
+    options,
     value,
     onChange,
     onBlur,
@@ -28,7 +33,8 @@ export const Select: React.FC<SelectProps> = memo(
     'aria-label': ariaLabel,
     'aria-describedby': ariaDescribedBy,
     glass,
-  }) => {
+    children,
+  }: SelectProps) => {
     const { generateSelectClass } = useSelect({
       size,
       disabled,
@@ -51,17 +57,35 @@ export const Select: React.FC<SelectProps> = memo(
     const bodyRef = useRef<HTMLDivElement>(null);
     const nativeSelectRef = useRef<HTMLSelectElement>(null);
 
+    // State for registered options (Compound mode)
+    const [registeredOptions, setRegisteredOptions] = useState<SelectOptionType[]>([]);
+
+    const registerOption = useCallback((option: SelectOptionType) => {
+      setRegisteredOptions((prev) => {
+        if (prev.some(o => o.value === option.value)) return prev;
+        return [...prev, option];
+      });
+    }, []);
+
+    const unregisterOption = useCallback((value: string) => {
+      setRegisteredOptions((prev) => prev.filter(o => o.value !== value));
+    }, []);
+
+    // Determine active options
+    const hasOptionsProp = options && options.length > 0;
+    const activeOptions = hasOptionsProp ? options : registeredOptions;
+
     // Update selected label when value changes
     useEffect(() => {
       if (value) {
-        const selectedOption = options.find(opt => opt.value === value);
+        const selectedOption = activeOptions.find(opt => opt.value === value);
         if (selectedOption) {
           setSelectedLabel(selectedOption.label);
         }
       } else {
         setSelectedLabel(placeholder);
       }
-    }, [value, options, placeholder]);
+    }, [value, activeOptions, placeholder]);
 
     // Handle click outside to close dropdown
     useEffect(() => {
@@ -93,99 +117,125 @@ export const Select: React.FC<SelectProps> = memo(
     };
 
     // Handle item selection
-    const handleItemClick = (option: { value: string; label: string }) => {
-      setSelectedLabel(option.label);
-      setIsOpen(false);
-      if (bodyRef.current) {
-        bodyRef.current.style.height = '0px';
-      }
+    const handleItemClick = useCallback(
+      (option: { value: string; label: string }) => {
+        setSelectedLabel(option.label);
+        setIsOpen(false);
+        if (bodyRef.current) {
+          bodyRef.current.style.height = '0px';
+        }
 
-      if (nativeSelectRef.current) {
-        nativeSelectRef.current.value = option.value;
-      }
+        if (nativeSelectRef.current) {
+          nativeSelectRef.current.value = option.value;
+        }
 
-      if (onChange) {
-        // Create a synthetic event
-        const event = {
-          target: {
-            name,
-            value: option.value,
-          },
-        } as React.ChangeEvent<HTMLSelectElement>;
-        onChange(event);
-      }
-    };
+        if (onChange) {
+          // Create a synthetic event
+          const event = {
+            target: {
+              name,
+              value: option.value,
+            },
+          } as React.ChangeEvent<HTMLSelectElement>;
+          onChange(event);
+        }
+      },
+      [onChange, name]
+    );
+
+    const onSelect = useCallback(
+      (val: string, label: string) => {
+        handleItemClick({ value: val, label });
+      },
+      [handleItemClick]
+    );
+
+    const contextValue = React.useMemo(
+      () => ({
+        registerOption,
+        unregisterOption,
+        selectedValue: value,
+        onSelect,
+      }),
+      [registerOption, unregisterOption, value, onSelect]
+    );
 
     const selectContent = (
-      <div
-        className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
-        ref={dropdownRef}
-        style={style}
-        aria-expanded={isOpen}
-      >
-        {/* Native select for accessibility and form submission */}
-        <select
-          ref={nativeSelectRef}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          disabled={disabled}
-          required={required}
-          id={id}
-          name={name}
-          multiple={multiple}
-          aria-label={ariaLabel}
-          aria-describedby={ariaDescribedBy}
-          aria-invalid={invalid}
-          style={{ display: 'none' }}
+      <SelectContext.Provider value={contextValue}>
+        <div
+          className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
+          ref={dropdownRef}
+          style={style}
+          aria-expanded={isOpen}
         >
-          {placeholder && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {options.map(option => (
-            <option key={option.value} value={option.value} disabled={option.disabled}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-
-        {/* Custom Select UI */}
-        <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
-          {selectedLabel}
-        </div>
+          {/* Native select for accessibility and form submission */}
+          <select
+            ref={nativeSelectRef}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            disabled={disabled}
+            required={required}
+            id={id}
+            name={name}
+            multiple={multiple}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={invalid}
+            style={{ display: 'none' }}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {activeOptions.map(option => (
+              <option key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+
+          {/* Custom Select UI */}
+          <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
+            {selectedLabel}
+          </div>
+
+          <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
 
-        <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
-
-        <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
-          <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
-            <ul className={SELECT.CLASSES.SELECT_ITEMS}>
-              {options.map((option, index) => (
-                <li
-                  key={option.value}
-                  className={SELECT.CLASSES.SELECT_ITEM}
-                  data-value={option.value}
-                  onClick={() => !option.disabled && handleItemClick(option)}
-                >
-                  <label htmlFor={`SelectItem${index}`} className="c-checkbox">
-                    <input
-                      type="checkbox"
-                      id={`SelectItem${index}`}
-                      className="c-checkbox__input c-select__item-input"
-                      checked={value === option.value}
-                      readOnly
-                      disabled={option.disabled}
-                    />
-                    <div className="c-select__item-label">{option.label}</div>
-                  </label>
-                </li>
-              ))}
-            </ul>
+          <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
+            <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
+              <ul className={SELECT.CLASSES.SELECT_ITEMS}>
+                {hasOptionsProp ? (
+                  options.map((option, index) => (
+                    <li
+                      key={option.value}
+                      className={SELECT.CLASSES.SELECT_ITEM}
+                      data-value={option.value}
+                      onClick={() => !option.disabled && handleItemClick(option)}
+                    >
+                      <label htmlFor={`SelectItem${index}`} className="c-checkbox">
+                        <input
+                          type="checkbox"
+                          id={`SelectItem${index}`}
+                          className="c-checkbox__input c-select__item-input"
+                          checked={value === option.value}
+                          readOnly
+                          disabled={option.disabled}
+                        />
+                        <div className="c-select__item-label">{option.label}</div>
+                      </label>
+                    </li>
+                  ))
+                ) : (
+                  children
+                )}
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
+      </SelectContext.Provider>
     );
 
     if (glass) {
@@ -195,7 +245,7 @@ export const Select: React.FC<SelectProps> = memo(
         blurAmount: 1,
         saturation: 180,
         aberrationIntensity: 0.2,
-        cornerRadius: 12,
+        borderRadius: 12,
         mode: 'shader' as const,
       };
 
@@ -206,10 +256,11 @@ export const Select: React.FC<SelectProps> = memo(
 
     return selectContent;
   }
-);
+) as unknown as SelectComponent;
 
 export type { SelectProps };
 
 Select.displayName = 'Select';
+Select.Option = SelectOption;
 
 export default Select;

package/src/components/Form/SelectOption.tsx

@@ -0,0 +1,88 @@
+import React, { createContext, useContext, useEffect, memo, ReactNode } from 'react';
+import { SelectOption as SelectOptionType } from '../../lib/types/components';
+import { SELECT } from '../../lib/constants/components';
+
+// Context for managing options registration and selection
+export interface SelectContextType {
+  registerOption: (option: SelectOptionType) => void;
+  unregisterOption: (value: string) => void;
+  selectedValue?: string | string[];
+  onSelect: (value: string, label: string) => void;
+}
+
+export const SelectContext = createContext<SelectContextType | null>(null);
+
+export interface SelectOptionProps {
+  value: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const SelectOption: React.FC<SelectOptionProps> = memo(
+  ({ value, children, disabled = false, className = '', style }) => {
+    const context = useContext(SelectContext);
+
+    // We assume children is the label if it's a string, or we need a way to get label.
+    // For simplicity, we use children as label for registration if it's a string.
+    const label = typeof children === 'string' ? children : value;
+
+    useEffect(() => {
+      if (context) {
+        context.registerOption({ value, label, disabled });
+        return () => {
+          context.unregisterOption(value);
+        };
+      }
+      return undefined;
+    }, [context, value, label, disabled]);
+
+    if (!context) {
+      console.warn('SelectOption must be used within a Select component');
+      return null;
+    }
+
+    const { selectedValue, onSelect } = context;
+
+    const isSelected = Array.isArray(selectedValue)
+      ? selectedValue.includes(value)
+      : selectedValue === value;
+
+    const handleClick = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        onSelect(value, label);
+      }
+    };
+
+    return (
+      <li
+        className={`${SELECT.CLASSES.SELECT_ITEM} ${className}`.trim()}
+        data-value={value}
+        onClick={handleClick}
+        style={style}
+        role="option"
+        aria-selected={isSelected}
+        aria-disabled={disabled}
+      >
+        <label className="c-checkbox" style={{ pointerEvents: 'none' }}>
+           <input
+             type="checkbox"
+             className="c-checkbox__input c-select__item-input"
+             checked={isSelected}
+             readOnly
+             disabled={disabled}
+             tabIndex={-1}
+           />
+           <div className="c-select__item-label">{children}</div>
+        </label>
+      </li>
+    );
+  }
+);
+
+SelectOption.displayName = 'SelectOption';
+
+export default SelectOption;

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

@@ -343,7 +343,7 @@ export const GlassVariants: Story = {
             blurAmount: 2,
             saturation: 200,
             aberrationIntensity: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
           }}
         />
       </div>

package/src/components/Form/Textarea.tsx

@@ -92,7 +92,7 @@ export const Textarea = memo(
           blurAmount: 1,
           saturation: 180,
           aberrationIntensity: 1,
-          cornerRadius: 8,
+          borderRadius: 8,
           mode: 'shader' as const,
         };