@shohojdhara/atomix 0.2.3 → 0.2.5

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

@@ -385,7 +385,7 @@ export const ValidationStates: Story = {
           valid={true}
           helperText="This input is valid"
         >
-          <Input id="valid-input" value="John Doe" valid={true} />
+          <Input id="valid-input" value="John Doe" onChange={() => {}} valid={true} />
         </FormGroup>
 
         <FormGroup
@@ -394,7 +394,7 @@ export const ValidationStates: Story = {
           invalid={true}
           helperText="This input is invalid"
         >
-          <Input id="invalid-input" value="test" invalid={true} />
+          <Input id="invalid-input" value="test" onChange={() => {}} invalid={true} />
         </FormGroup>
 
         <FormGroup
@@ -410,6 +410,7 @@ export const ValidationStates: Story = {
               { value: 'ca', label: 'Canada' },
             ]}
             value="us"
+            onChange={() => {}}
             valid={true}
           />
         </FormGroup>
@@ -426,6 +427,7 @@ export const ValidationStates: Story = {
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' },
             ]}
+            onChange={() => {}}
             invalid={true}
           />
         </FormGroup>
@@ -441,7 +443,12 @@ export const ValidationStates: Story = {
         </FormGroup>
 
         <FormGroup invalid={true} helperText="This checkbox is invalid">
-          <Checkbox id="invalid-checkbox" label="Invalid Checkbox" invalid={true} />
+          <Checkbox
+            id="invalid-checkbox"
+            label="Invalid Checkbox"
+            onChange={() => {}}
+            invalid={true}
+          />
         </FormGroup>
       </Form>
     </div>

package/src/components/Form/Form.tsx

@@ -10,6 +10,7 @@ export const Form: React.FC<FormProps> = ({
   onSubmit,
   onReset,
   className = '',
+  style,
   disabled = false,
   id,
   method = 'post',
@@ -27,6 +28,7 @@ export const Form: React.FC<FormProps> = ({
     <form
       id={id}
       className={formClass}
+      style={style}
       onSubmit={handleSubmit(onSubmit)}
       onReset={handleReset(onReset)}
       method={method}

package/src/components/Form/FormGroup.tsx

@@ -11,6 +11,7 @@ export const FormGroup: React.FC<FormGroupProps> = ({
   helperText,
   htmlFor,
   className = '',
+  style,
   disabled = false,
   required = false,
   invalid = false,
@@ -33,7 +34,7 @@ export const FormGroup: React.FC<FormGroupProps> = ({
   });
 
   return (
-    <div className={formGroupClass}>
+    <div className={formGroupClass} style={style}>
       {label && (
         <label className="c-form-group__label" htmlFor={htmlFor}>
           {label}

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

@@ -115,7 +115,7 @@ export const Glass: Story = {
     placeholder: 'Glass Input',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
@@ -159,13 +159,16 @@ export const GlassVariants: Story = {
         <Input placeholder="Large Glass" size="lg" glass />
         <Input placeholder="Primary Glass" variant="primary" glass />
         <Input placeholder="Success Glass" variant="success" glass />
-        <Input placeholder="Custom Glass" glass={{
-          displacementScale: 80,
-          blurAmount: 2,
-          saturation: 200,
-          aberrationIntensity: 2,
-          cornerRadius: 12,
-        }} />
+        <Input
+          placeholder="Custom Glass"
+          glass={{
+            displacementScale: 80,
+            blurAmount: 2,
+            saturation: 200,
+            aberrationIntensity: 2,
+            cornerRadius: 12,
+          }}
+        />
       </div>
     </div>
   ),
@@ -215,9 +218,7 @@ export const GlassShowcase: Story = {
           justifyContent: 'center',
         }}
       >
-        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
-          Glass Modes
-        </h3>
+        <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: '300px' }}>
           <Input placeholder="Standard Mode" glass={{ mode: 'standard' }} />
           <Input placeholder="Polar Mode" glass={{ mode: 'polar' }} />

package/src/components/Form/Input.tsx

@@ -6,108 +6,110 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Input - A component for text input fields
  */
-export const Input = forwardRef<HTMLInputElement, InputProps>(({
-  type = 'text',
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder,
-  className = '',
-  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,
-  });
+export const Input = 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,
+    });
 
-  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 : undefined}
-    />
-  );
+    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}
+      />
+    );
 
-  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;
+  }
+);
 
 Input.displayName = 'Input';
 

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

@@ -59,7 +59,7 @@ export const Checked: Story = {
 
 // Radio button group
 export const RadioGroup: Story = {
-  render: args => (
+  render: (args: any) => (
     <div className="u-d-flex u-flex-column u-gap-2">
       <Radio label="Option 1" name="radioGroup" value="option1" checked />
       <Radio label="Option 2" name="radioGroup" value="option2" />
@@ -70,7 +70,7 @@ export const RadioGroup: Story = {
 
 // Radio button states
 export const States: Story = {
-  render: args => (
+  render: (args: any) => (
     <div className="u-d-flex u-flex-column u-gap-2">
       <Radio label="Default radio" name="states" value="default" />
       <Radio label="Checked radio" name="states" value="checked" checked />
@@ -105,7 +105,7 @@ export const Glass: Story = {
     value: 'glass',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -136,10 +136,11 @@ export const GlassCustom: Story = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',
@@ -170,7 +171,14 @@ export const GlassGroup: Story = {
       }}
     >
       <div>
-        <h3 style={{ color: 'white', marginBottom: '2rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{
+            color: 'white',
+            marginBottom: '2rem',
+            textAlign: 'center',
+            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+          }}
+        >
           Glass Radio Group
         </h3>
         <div className="u-d-flex u-flex-column u-gap-2">
@@ -209,7 +217,14 @@ export const GlassStates: Story = {
         `}
       </style>
       <div>
-        <h3 style={{ color: 'white', marginBottom: '2rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{
+            color: 'white',
+            marginBottom: '2rem',
+            textAlign: 'center',
+            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+          }}
+        >
           Glass Radio States
         </h3>
         <div className="u-d-flex u-flex-column u-gap-2">

package/src/components/Form/Radio.tsx

@@ -11,6 +11,7 @@ export const Radio: React.FC<RadioProps> = ({
   checked = false,
   onChange,
   className = '',
+  style,
   disabled = false,
   required = false,
   id,
@@ -36,7 +37,7 @@ export const Radio: React.FC<RadioProps> = ({
   });
 
   const radioContent = (
-    <div className={radioClass}>
+    <div className={radioClass} style={style}>
       <input
         type="radio"
         className="c-radio__input"
@@ -72,11 +73,7 @@ export const Radio: React.FC<RadioProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {radioContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{radioContent}</AtomixGlass>;
   }
 
   return radioContent;

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

@@ -161,7 +161,7 @@ export const Glass: Story = {
     placeholder: 'Glass Select',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -193,10 +193,11 @@ export const GlassCustom: Story = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',
@@ -208,7 +209,14 @@ export const GlassCustom: Story = {
       }}
     >
       <div style={{ width: '100%', maxWidth: '300px' }}>
-        <h3 style={{ color: 'white', marginBottom: '1rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{
+            color: 'white',
+            marginBottom: '1rem',
+            textAlign: 'center',
+            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+          }}
+        >
           Custom Glass Select
         </h3>
         <Select {...args} />
@@ -222,7 +230,7 @@ export const GlassStates: Story = {
   args: {
     options: countries,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
@@ -246,7 +254,14 @@ export const GlassStates: Story = {
         `}
       </style>
       <div style={{ width: '100%', maxWidth: '300px' }}>
-        <h3 style={{ color: 'white', marginBottom: '2rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{
+            color: 'white',
+            marginBottom: '2rem',
+            textAlign: 'center',
+            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+          }}
+        >
           Glass Select States
         </h3>
         <div className="u-d-flex u-flex-column u-gap-3">

package/src/components/Form/Select.tsx

@@ -15,6 +15,7 @@ export const Select: React.FC<SelectProps> = ({
   onFocus,
   placeholder = 'Select an option',
   className = '',
+  style,
   disabled = false,
   required = false,
   id,
@@ -118,6 +119,7 @@ export const Select: React.FC<SelectProps> = ({
     <div
       className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
       ref={dropdownRef}
+      style={style}
       aria-expanded={isOpen}
     >
       {/* Native select for accessibility and form submission */}
@@ -198,11 +200,7 @@ export const Select: React.FC<SelectProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {selectContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
   }
 
   return selectContent;

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

@@ -133,7 +133,7 @@ export const Glass: Story = {
     rows: 4,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -169,13 +169,17 @@ export const GlassVariants: Story = {
         <Textarea placeholder="Large Glass" size="lg" rows={3} glass />
         <Textarea placeholder="Primary Glass" variant="primary" rows={3} glass />
         <Textarea placeholder="Success Glass" variant="success" rows={3} glass />
-        <Textarea placeholder="Custom Glass" rows={4} glass={{
-          displacementScale: 80,
-          blurAmount: 2,
-          saturation: 200,
-          aberrationIntensity: 2,
-          cornerRadius: 12,
-        }} />
+        <Textarea
+          placeholder="Custom Glass"
+          rows={4}
+          glass={{
+            displacementScale: 80,
+            blurAmount: 2,
+            saturation: 200,
+            aberrationIntensity: 2,
+            cornerRadius: 12,
+          }}
+        />
       </div>
     </div>
   ),
@@ -212,9 +216,7 @@ export const GlassShowcase: Story = {
           borderRadius: '12px',
         }}
       >
-        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
-          Glass Modes
-        </h3>
+        <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' }}>
           <Textarea placeholder="Standard Mode" rows={3} glass={{ mode: 'standard' }} />
           <Textarea placeholder="Polar Mode" rows={3} glass={{ mode: 'polar' }} />