@shohojdhara/atomix 0.3.15 → 0.4.0

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.tsx

@@ -7,204 +7,206 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = memo(({
-  options = [],
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder = 'Select an option',
-  className = '',
-  style,
-  disabled = false,
-  required = false,
-  id,
-  name,
-  size = 'md',
-  invalid = false,
-  valid = false,
-  multiple = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  glass,
-}) => {
-  const { generateSelectClass } = useSelect({
-    size,
-    disabled,
-    invalid,
-    valid,
-  });
-
-  const selectClass = generateSelectClass({
-    className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
-    size,
-    disabled,
-    invalid,
-    valid,
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState(placeholder);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const nativeSelectRef = useRef<HTMLSelectElement>(null);
-
-  // Update selected label when value changes
-  useEffect(() => {
-    if (value) {
-      const selectedOption = options.find(opt => opt.value === value);
-      if (selectedOption) {
-        setSelectedLabel(selectedOption.label);
+export const Select: React.FC<SelectProps> = memo(
+  ({
+    options = [],
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    placeholder = 'Select an option',
+    className = '',
+    style,
+    disabled = false,
+    required = false,
+    id,
+    name,
+    size = 'md',
+    invalid = false,
+    valid = false,
+    multiple = false,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    glass,
+  }) => {
+    const { generateSelectClass } = useSelect({
+      size,
+      disabled,
+      invalid,
+      valid,
+    });
+
+    const selectClass = generateSelectClass({
+      className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
+      size,
+      disabled,
+      invalid,
+      valid,
+    });
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedLabel, setSelectedLabel] = useState(placeholder);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const bodyRef = useRef<HTMLDivElement>(null);
+    const nativeSelectRef = useRef<HTMLSelectElement>(null);
+
+    // Update selected label when value changes
+    useEffect(() => {
+      if (value) {
+        const selectedOption = options.find(opt => opt.value === value);
+        if (selectedOption) {
+          setSelectedLabel(selectedOption.label);
+        }
+      } else {
+        setSelectedLabel(placeholder);
       }
-    } else {
-      setSelectedLabel(placeholder);
-    }
-  }, [value, options, placeholder]);
-
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-        if (bodyRef.current) {
+    }, [value, options, placeholder]);
+
+    // Handle click outside to close dropdown
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+          if (bodyRef.current) {
+            bodyRef.current.style.height = '0px';
+          }
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
+
+    // Toggle dropdown
+    const handleToggle = () => {
+      if (!disabled) {
+        if (!isOpen && bodyRef.current && panelRef.current) {
+          bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
+        } else if (bodyRef.current) {
           bodyRef.current.style.height = '0px';
         }
+        setIsOpen(!isOpen);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Toggle dropdown
-  const handleToggle = () => {
-    if (!disabled) {
-      if (!isOpen && bodyRef.current && panelRef.current) {
-        bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
-      } else if (bodyRef.current) {
+    // Handle item selection
+    const handleItemClick = (option: { value: string; label: string }) => {
+      setSelectedLabel(option.label);
+      setIsOpen(false);
+      if (bodyRef.current) {
         bodyRef.current.style.height = '0px';
       }
-      setIsOpen(!isOpen);
-    }
-  };
-
-  // Handle item selection
-  const handleItemClick = (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);
-    }
-  };
-
-  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' }}
+      if (onChange) {
+        // Create a synthetic event
+        const event = {
+          target: {
+            name,
+            value: option.value,
+          },
+        } as React.ChangeEvent<HTMLSelectElement>;
+        onChange(event);
+      }
+    };
+
+    const selectContent = (
+      <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>
+          )}
+          {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>
 
-      <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>
+        <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>
         </div>
       </div>
-    </div>
-  );
-
-  if (glass) {
-    // Default glass settings for select components
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 180,
-      aberrationIntensity: 0.2,
-      cornerRadius: 12,
-      mode: 'shader' as const,
-    };
-
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    );
+
+    if (glass) {
+      // Default glass settings for select components
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 180,
+        aberrationIntensity: 0.2,
+        cornerRadius: 12,
+        mode: 'shader' as const,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
+    }
 
-    return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
+    return selectContent;
   }
-
-  return selectContent;
-});
+);
 
 export type { SelectProps };
 

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

@@ -4,42 +4,37 @@ import { Textarea } from './Textarea';
 
 // 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('Textarea Component', () => {
-    it('renders correctly', () => {
-        render(<Textarea placeholder="Test Textarea" />);
-        expect(screen.getByPlaceholderText('Test Textarea')).toBeInTheDocument();
-    });
+  it('renders correctly', () => {
+    render(<Textarea placeholder="Test Textarea" />);
+    expect(screen.getByPlaceholderText('Test Textarea')).toBeInTheDocument();
+  });
 
-    it('handles uncontrolled defaultValue', () => {
-        render(<Textarea defaultValue="Default Textarea Value" />);
-        const textarea = screen.getByDisplayValue('Default Textarea Value');
-        expect(textarea).toBeInTheDocument();
-        expect(textarea).toHaveValue('Default Textarea Value');
-    });
+  it('handles uncontrolled defaultValue', () => {
+    render(<Textarea defaultValue="Default Textarea Value" />);
+    const textarea = screen.getByDisplayValue('Default Textarea Value');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveValue('Default Textarea Value');
+  });
 
-    it('calls onChange when typing', () => {
-        const handleChange = vi.fn();
-        render(<Textarea onChange={handleChange} />);
-        const textarea = screen.getByRole('textbox');
-        fireEvent.change(textarea, { target: { value: 'New Textarea Value' } });
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
+  it('calls onChange when typing', () => {
+    const handleChange = vi.fn();
+    render(<Textarea onChange={handleChange} />);
+    const textarea = screen.getByRole('textbox');
+    fireEvent.change(textarea, { target: { value: 'New Textarea Value' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 
-    it('applies accessibility attributes', () => {
-        render(
-            <Textarea
-                aria-label="Accessible Textarea"
-                invalid
-            />
-        );
-        const textarea = screen.getByLabelText('Accessible Textarea');
-        expect(textarea).toHaveAttribute('aria-invalid', 'true');
-    });
+  it('applies accessibility attributes', () => {
+    render(<Textarea aria-label="Accessible Textarea" invalid />);
+    const textarea = screen.getByLabelText('Accessible Textarea');
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
+  });
 });