@shohojdhara/atomix 0.3.13 → 0.3.14

package/src/components/Form/Input.tsx

@@ -8,108 +8,110 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
  */
 export const Input = memo(
   forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      type = 'text',
-      value,
-      onChange,
-      onBlur,
-      onFocus,
-      placeholder,
-      className = '',
-      style,
-      disabled = false,
-      required = false,
-      readOnly = false,
-      id,
-      name,
-      autoComplete,
-      autoFocus = false,
-      size = 'md',
-      variant,
-      invalid = false,
-      valid = false,
-      maxLength,
-      minLength,
-      pattern,
-      min,
-      max,
-      step,
-      ariaLabel,
-      ariaDescribedBy,
-      glass,
-    },
-    ref
-  ) => {
-    const { generateInputClass } = useInput({
-      size,
-      variant,
-      disabled,
-      invalid,
-      valid,
-    });
+    (
+      {
+        type = 'text',
+        value,
+        defaultValue,
+        onChange,
+        onBlur,
+        onFocus,
+        placeholder,
+        className = '',
+        style,
+        disabled = false,
+        required = false,
+        readOnly = false,
+        id,
+        name,
+        autoComplete,
+        autoFocus = false,
+        size = 'md',
+        variant,
+        invalid = false,
+        valid = false,
+        maxLength,
+        minLength,
+        pattern,
+        min,
+        max,
+        step,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        glass,
+      },
+      ref
+    ) => {
+      const { generateInputClass } = useInput({
+        size,
+        variant,
+        disabled,
+        invalid,
+        valid,
+      });
 
-    const inputClass = generateInputClass({
-      className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
-      size,
-      variant,
-      disabled,
-      invalid,
-      valid,
-      type,
-    });
+      const inputClass = generateInputClass({
+        className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
+        size,
+        variant,
+        disabled,
+        invalid,
+        valid,
+        type,
+      });
 
-    // Custom styles for glass effect
-    const glassStyles = glass ? {} : {};
+      // Custom styles for glass effect
+      const glassStyles = glass ? {} : {};
 
-    const inputElement = (
-      <input
-        ref={ref}
-        type={type}
-        className={inputClass}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        placeholder={placeholder}
-        disabled={disabled}
-        required={required}
-        readOnly={readOnly}
-        id={id}
-        name={name}
-        autoComplete={autoComplete}
-        autoFocus={autoFocus}
-        maxLength={maxLength}
-        minLength={minLength}
-        pattern={pattern}
-        min={min}
-        max={max}
-        step={step}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-        style={glass ? { ...glassStyles, ...style } : style}
-      />
-    );
+      const inputElement = (
+        <input
+          ref={ref}
+          type={type}
+          className={inputClass}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          readOnly={readOnly}
+          id={id}
+          name={name}
+          autoComplete={autoComplete}
+          autoFocus={autoFocus}
+          maxLength={maxLength}
+          minLength={minLength}
+          pattern={pattern}
+          min={min}
+          max={max}
+          step={step}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+          style={glass ? { ...glassStyles, ...style } : style}
+        />
+      );
 
-    if (glass) {
-      // Default glass settings for inputs
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 180,
-        aberrationIntensity: 0.2,
-        cornerRadius: 12,
-        mode: 'shader' as const,
-      };
+      if (glass) {
+        // Default glass settings for inputs
+        const defaultGlassProps = {
+          displacementScale: 60,
+          blurAmount: 1,
+          saturation: 180,
+          aberrationIntensity: 0.2,
+          cornerRadius: 12,
+          mode: 'shader' as const,
+        };
 
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return <AtomixGlass {...glassProps}>{inputElement}</AtomixGlass>;
-    }
+        return <AtomixGlass {...glassProps}>{inputElement}</AtomixGlass>;
+      }
 
-    return inputElement;
-  }
+      return inputElement;
+    }
   )
 );
 

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

@@ -52,7 +52,7 @@ export const Basic: Story = {
     label: 'Option 1',
     name: 'option',
     value: 'option1',
-    onChange: () => {},
+    onChange: () => { },
   },
 };
 
@@ -63,7 +63,7 @@ export const Checked: Story = {
     name: 'option',
     value: 'option1',
     checked: true,
-    onChange: () => {},
+    onChange: () => { },
   },
 };
 
@@ -71,27 +71,27 @@ export const Checked: Story = {
 export const RadioGroup: Story = {
   render: (args: any) => {
     const [selectedValue, setSelectedValue] = React.useState('option1');
-    
+
     return (
-      <div className="u-d-flex u-flex-column u-gap-2">
-        <Radio 
-          label="Option 1" 
-          name="radioGroup" 
-          value="option1" 
+      <div className="u-flex u-flex-column u-gap-2">
+        <Radio
+          label="Option 1"
+          name="radioGroup"
+          value="option1"
           checked={selectedValue === 'option1'}
           onChange={() => setSelectedValue('option1')}
         />
-        <Radio 
-          label="Option 2" 
-          name="radioGroup" 
-          value="option2" 
+        <Radio
+          label="Option 2"
+          name="radioGroup"
+          value="option2"
           checked={selectedValue === 'option2'}
           onChange={() => setSelectedValue('option2')}
         />
-        <Radio 
-          label="Option 3" 
-          name="radioGroup" 
-          value="option3" 
+        <Radio
+          label="Option 3"
+          name="radioGroup"
+          value="option3"
           checked={selectedValue === 'option3'}
           onChange={() => setSelectedValue('option3')}
         />
@@ -104,29 +104,29 @@ export const RadioGroup: Story = {
 export const States: Story = {
   render: (args: any) => {
     const [selectedValue, setSelectedValue] = React.useState('default');
-    
+
     return (
-      <div className="u-d-flex u-flex-column u-gap-2">
-        <Radio 
-          label="Default radio" 
-          name="states" 
-          value="default" 
+      <div className="u-flex u-flex-column u-gap-2">
+        <Radio
+          label="Default radio"
+          name="states"
+          value="default"
           checked={selectedValue === 'default'}
-          onChange={() => setSelectedValue('default')} 
+          onChange={() => setSelectedValue('default')}
         />
-        <Radio 
-          label="Checked radio" 
-          name="states" 
-          value="checked" 
+        <Radio
+          label="Checked radio"
+          name="states"
+          value="checked"
           checked={selectedValue === 'checked'}
-          onChange={() => setSelectedValue('checked')} 
+          onChange={() => setSelectedValue('checked')}
         />
-        <Radio 
-          label="Disabled radio" 
-          name="states" 
-          value="disabled" 
+        <Radio
+          label="Disabled radio"
+          name="states"
+          value="disabled"
           disabled
-          onChange={() => {}}
+          onChange={() => { }}
         />
         <Radio
           label="Disabled and checked radio"
@@ -134,21 +134,21 @@ export const States: Story = {
           value="disabledChecked"
           disabled
           checked
-          onChange={() => {}}
+          onChange={() => { }}
         />
-        <Radio 
-          label="Valid radio" 
-          name="states" 
-          value="valid" 
-          valid 
+        <Radio
+          label="Valid radio"
+          name="states"
+          value="valid"
+          valid
           checked={selectedValue === 'valid'}
           onChange={() => setSelectedValue('valid')}
         />
-        <Radio 
-          label="Invalid radio" 
-          name="states" 
-          value="invalid" 
-          invalid 
+        <Radio
+          label="Invalid radio"
+          name="states"
+          value="invalid"
+          invalid
           checked={selectedValue === 'invalid'}
           onChange={() => setSelectedValue('invalid')}
         />
@@ -162,8 +162,8 @@ export const WithoutLabel: Story = {
   args: {
     name: 'noLabel',
     value: 'noLabel',
-    ariaLabel: 'Radio button without visible label',
-    onChange: () => {},
+    'aria-label': 'Radio button without visible label',
+    onChange: () => { },
   },
 };
 
@@ -174,7 +174,7 @@ export const Glass: Story = {
     name: 'glass',
     value: 'glass',
     glass: true,
-    onChange: () => {},
+    onChange: () => { },
   },
   render: (args: any) => (
     <div
@@ -206,7 +206,7 @@ export const GlassCustom: Story = {
       aberrationIntensity: 0.8,
       cornerRadius: 12,
     } as any,
-    onChange: () => {},
+    onChange: () => { },
   },
   render: (args: any) => (
     <div
@@ -232,7 +232,7 @@ export const GlassCustom: Story = {
 export const GlassGroup: Story = {
   render: () => {
     const [selectedValue, setSelectedValue] = React.useState('option1');
-    
+
     return (
       <div
         style={{
@@ -256,30 +256,30 @@ export const GlassGroup: Story = {
           >
             Glass Radio Group
           </h3>
-          <div className="u-d-flex u-flex-column u-gap-2">
-            <Radio 
-              label="Glass Option 1" 
-              name="glassGroup" 
-              value="option1" 
+          <div className="u-flex u-flex-column u-gap-2">
+            <Radio
+              label="Glass Option 1"
+              name="glassGroup"
+              value="option1"
               checked={selectedValue === 'option1'}
               onChange={() => setSelectedValue('option1')}
-              glass 
+              glass
             />
-            <Radio 
-              label="Glass Option 2" 
-              name="glassGroup" 
-              value="option2" 
+            <Radio
+              label="Glass Option 2"
+              name="glassGroup"
+              value="option2"
               checked={selectedValue === 'option2'}
               onChange={() => setSelectedValue('option2')}
-              glass 
+              glass
             />
-            <Radio 
-              label="Glass Option 3" 
-              name="glassGroup" 
-              value="option3" 
+            <Radio
+              label="Glass Option 3"
+              name="glassGroup"
+              value="option3"
               checked={selectedValue === 'option3'}
               onChange={() => setSelectedValue('option3')}
-              glass 
+              glass
             />
           </div>
         </div>
@@ -292,7 +292,7 @@ export const GlassGroup: Story = {
 export const GlassStates: Story = {
   render: () => {
     const [selectedValue, setSelectedValue] = React.useState('default');
-    
+
     return (
       <div
         style={{
@@ -327,31 +327,31 @@ export const GlassStates: Story = {
           >
             Glass Radio States
           </h3>
-          <div className="u-d-flex u-flex-column u-gap-2">
-            <Radio 
-              label="Glass Default" 
-              name="glassStates" 
-              value="default" 
+          <div className="u-flex u-flex-column u-gap-2">
+            <Radio
+              label="Glass Default"
+              name="glassStates"
+              value="default"
               checked={selectedValue === 'default'}
               onChange={() => setSelectedValue('default')}
-              glass 
+              glass
             />
-            <Radio 
-              label="Glass Checked" 
-              name="glassStates" 
-              value="checked" 
+            <Radio
+              label="Glass Checked"
+              name="glassStates"
+              value="checked"
               checked={selectedValue === 'checked'}
               onChange={() => setSelectedValue('checked')}
-              glass 
+              glass
             />
-            <Radio 
-              label="Glass Disabled" 
-              name="glassStates" 
-              value="disabled" 
+            <Radio
+              label="Glass Disabled"
+              name="glassStates"
+              value="disabled"
               disabled
               checked={selectedValue === 'disabled'}
               onChange={() => setSelectedValue('disabled')}
-              glass 
+              glass
             />
             <Radio
               label="Glass Disabled and Checked"
@@ -362,23 +362,23 @@ export const GlassStates: Story = {
               onChange={() => setSelectedValue('disabledChecked')}
               glass
             />
-            <Radio 
-              label="Glass Valid" 
-              name="glassStates" 
-              value="valid" 
-              valid 
+            <Radio
+              label="Glass Valid"
+              name="glassStates"
+              value="valid"
+              valid
               checked={selectedValue === 'valid'}
               onChange={() => setSelectedValue('valid')}
-              glass 
+              glass
             />
-            <Radio 
-              label="Glass Invalid" 
-              name="glassStates" 
-              value="invalid" 
-              invalid 
+            <Radio
+              label="Glass Invalid"
+              name="glassStates"
+              value="invalid"
+              invalid
               checked={selectedValue === 'invalid'}
               onChange={() => setSelectedValue('invalid')}
-              glass 
+              glass
             />
           </div>
         </div>

package/src/components/Form/Radio.tsx

@@ -19,8 +19,8 @@ export const Radio: React.FC<RadioProps> = memo(({
   value,
   invalid = false,
   valid = false,
-  ariaLabel,
-  ariaDescribedBy,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
   glass,
 }) => {
   const { generateRadioClass } = useRadio({

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

@@ -93,7 +93,7 @@ export const Interactive: Story = {
     };
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
         <Select
           options={countries}
           placeholder="Select a country"
@@ -116,7 +116,7 @@ export const Sizes: Story = {
     options: countries,
   },
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Select size="sm" options={countries} placeholder="Small select" />
       <Select size="md" options={countries} placeholder="Medium select (default)" />
       <Select size="lg" options={countries} placeholder="Large select" />
@@ -130,7 +130,7 @@ export const States: Story = {
     options: countries,
   },
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Select options={countries} placeholder="Default select" />
       <Select options={countries} placeholder="Disabled select" disabled />
       <Select options={countries} placeholder="Valid select" valid value="us" />
@@ -272,7 +272,7 @@ export const GlassStates: Story = {
         >
           Glass Select States
         </h3>
-        <div className="u-d-flex u-flex-column u-gap-3">
+        <div className="u-flex u-flex-column u-gap-3">
           <Select options={args.options} placeholder="Glass Select" glass />
           <Select options={args.options} placeholder="Glass Disabled" disabled glass />
           <Select options={args.options} placeholder="Glass Valid" valid value="us" glass />

package/src/components/Form/Select.tsx

@@ -24,8 +24,8 @@ export const Select: React.FC<SelectProps> = memo(({
   invalid = false,
   valid = false,
   multiple = false,
-  ariaLabel,
-  ariaDescribedBy,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
   glass,
 }) => {
   const { generateSelectClass } = useSelect({

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

@@ -58,6 +58,10 @@ const meta = {
       control: 'boolean',
       description: 'Enable glass morphism effect',
     },
+    defaultValue: {
+      control: 'text',
+      description: 'Initial value for uncontrolled textarea',
+    },
   },
 } satisfies Meta<typeof Textarea>;
 
@@ -72,6 +76,17 @@ export const Basic: Story = {
   },
 };
 
+/**
+ * Textarea using defaultValue for uncontrolled component pattern.
+ */
+export const Uncontrolled: Story = {
+  args: {
+    defaultValue: 'Initial value',
+    placeholder: 'Type something...',
+    rows: 4,
+  },
+};
+
 // With value
 export const WithValue: Story = {
   args: {
@@ -83,7 +98,7 @@ export const WithValue: Story = {
 // Textarea sizes
 export const Sizes: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Textarea size="sm" placeholder="Small textarea" rows={3} />
       <Textarea size="md" placeholder="Medium textarea (default)" rows={3} />
       <Textarea size="lg" placeholder="Large textarea" rows={3} />
@@ -94,7 +109,7 @@ export const Sizes: Story = {
 // Textarea rows
 export const Rows: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Textarea placeholder="2 rows" rows={2} />
       <Textarea placeholder="4 rows" rows={4} />
       <Textarea placeholder="6 rows" rows={6} />
@@ -105,7 +120,7 @@ export const Rows: Story = {
 // Textarea variants
 export const Variants: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Textarea variant="primary" placeholder="Primary textarea" rows={2} />
       <Textarea variant="secondary" placeholder="Secondary textarea" rows={2} />
       <Textarea variant="success" placeholder="Success textarea" rows={2} />
@@ -119,7 +134,7 @@ export const Variants: Story = {
 // States
 export const States: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Textarea placeholder="Default textarea" rows={2} />
       <Textarea placeholder="Disabled textarea" disabled rows={2} />
       <Textarea placeholder="Valid textarea" valid rows={2} />
@@ -171,7 +186,7 @@ export const GlassVariants: Story = {
       <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
         Glass Textarea Variants
       </h3>
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '400px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '400px' }}>
         <Textarea placeholder="Small Glass" size="sm" rows={3} glass />
         <Textarea placeholder="Medium Glass" size="md" rows={3} glass />
         <Textarea placeholder="Large Glass" size="lg" rows={3} glass />
@@ -210,7 +225,7 @@ export const GlassShowcase: Story = {
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
           Glass Textarea on Background
         </h3>
-        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '400px' }}>
+        <div className="u-flex u-flex-column u-gap-3" style={{ width: '400px' }}>
           <Textarea placeholder="Write your message..." rows={4} glass />
           <Textarea placeholder="Additional notes..." rows={3} glass />
         </div>
@@ -225,7 +240,7 @@ export const GlassShowcase: Story = {
         }}
       >
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>Glass Modes</h3>
-        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '400px' }}>
+        <div className="u-flex u-flex-column u-gap-3" style={{ width: '400px' }}>
           <Textarea placeholder="Standard Mode" rows={3} glass={{ mode: 'standard' }} />
           <Textarea placeholder="Polar Mode" rows={3} glass={{ mode: 'polar' }} />
           <Textarea placeholder="Prominent Mode" rows={3} glass={{ mode: 'prominent' }} />