@shohojdhara/atomix 0.2.1 → 0.2.3

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

@@ -39,6 +39,10 @@ const meta = {
       control: 'text',
       description: 'Placeholder text',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Input>;
 
@@ -104,3 +108,123 @@ export const States: Story = {
     </div>
   ),
 };
+
+// Glass Effect
+export const Glass: Story = {
+  args: {
+    placeholder: 'Glass Input',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+        padding: '2rem',
+        borderRadius: '12px',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Input {...args} />
+    </div>
+  ),
+};
+
+// Glass Variants
+export const GlassVariants: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+        padding: '2rem',
+        borderRadius: '12px',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+        Glass Input Variants
+      </h3>
+      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+        <Input placeholder="Small Glass" size="sm" glass />
+        <Input placeholder="Medium Glass" size="md" glass />
+        <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,
+        }} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass Showcase
+export const GlassShowcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      {/* Basic Glass */}
+      <div
+        style={{
+          background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '2rem',
+          borderRadius: '12px',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
+          Glass Input on Background
+        </h3>
+        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+          <Input placeholder="Enter your name" glass />
+          <Input type="email" placeholder="Enter your email" glass />
+          <Input type="password" placeholder="Enter password" glass />
+        </div>
+      </div>
+
+      {/* Different Glass Modes */}
+      <div
+        style={{
+          background: 'url(https://cdn.pixabay.com/photo/2021/11/13/08/50/athens-6790780_1280.jpg)',
+          padding: '2rem',
+          borderRadius: '12px',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <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' }} />
+          <Input placeholder="Prominent Mode" glass={{ mode: 'prominent' }} />
+          <Input placeholder="Shader Mode" glass={{ mode: 'shader' }} />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Form/Input.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { InputProps } from '../../lib/types/components';
 import { useInput } from '../../lib/composables/useInput';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Input - A component for text input fields
  */
-export const Input: React.FC<InputProps> = ({
+export const Input = forwardRef<HTMLInputElement, InputProps>(({
   type = 'text',
   value,
   onChange,
@@ -32,7 +33,8 @@ export const Input: React.FC<InputProps> = ({
   step,
   ariaLabel,
   ariaDescribedBy,
-}) => {
+  glass,
+}, ref) => {
   const { generateInputClass } = useInput({
     size,
     variant,
@@ -42,7 +44,7 @@ export const Input: React.FC<InputProps> = ({
   });
 
   const inputClass = generateInputClass({
-    className,
+    className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
     size,
     variant,
     disabled,
@@ -51,8 +53,12 @@ export const Input: React.FC<InputProps> = ({
     type,
   });
 
-  return (
+  // Custom styles for glass effect
+  const glassStyles = glass ? {} : {};
+
+  const inputElement = (
     <input
+      ref={ref}
       type={type}
       className={inputClass}
       value={value}
@@ -76,12 +82,35 @@ export const Input: React.FC<InputProps> = ({
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
       aria-invalid={invalid}
+      style={glass ? glassStyles : undefined}
     />
   );
-};
 
-export type { InputProps };
+  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 };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {inputElement}
+      </AtomixGlass>
+    );
+  }
+
+  return inputElement;
+});
 
 Input.displayName = 'Input';
 
+export type { InputProps };
+
 export default Input;

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

@@ -28,6 +28,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the radio button is valid',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Radio>;
 
@@ -92,3 +96,138 @@ export const WithoutLabel: Story = {
     ariaLabel: 'Radio button without visible label',
   },
 };
+
+// Glass variant
+export const Glass: Story = {
+  args: {
+    label: 'Glass Radio',
+    name: 'glass',
+    value: 'glass',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Radio {...args} />
+    </div>
+  ),
+};
+
+// Glass with custom settings
+export const GlassCustom: Story = {
+  args: {
+    label: 'Custom Glass Radio',
+    name: 'glassCustom',
+    value: 'glassCustom',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        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',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Radio {...args} />
+    </div>
+  ),
+};
+
+// Glass radio group
+export const GlassGroup: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '300px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div>
+        <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">
+          <Radio label="Glass Option 1" name="glassGroup" value="option1" checked glass />
+          <Radio label="Glass Option 2" name="glassGroup" value="option2" glass />
+          <Radio label="Glass Option 3" name="glassGroup" value="option3" glass />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// Glass states
+export const GlassStates: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '500px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        `}
+      </style>
+      <div>
+        <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">
+          <Radio label="Glass Default" name="glassStates" value="default" glass />
+          <Radio label="Glass Checked" name="glassStates" value="checked" checked glass />
+          <Radio label="Glass Disabled" name="glassStates" value="disabled" disabled glass />
+          <Radio
+            label="Glass Disabled and Checked"
+            name="glassStates"
+            value="disabledChecked"
+            disabled
+            checked
+            glass
+          />
+          <Radio label="Glass Valid" name="glassStates" value="valid" valid checked glass />
+          <Radio label="Glass Invalid" name="glassStates" value="invalid" invalid glass />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Form/Radio.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RadioProps } from '../../lib/types/components';
 import { useRadio } from '../../lib/composables/useRadio';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Radio - A component for radio button inputs
@@ -19,6 +20,7 @@ export const Radio: React.FC<RadioProps> = ({
   valid = false,
   ariaLabel,
   ariaDescribedBy,
+  glass,
 }) => {
   const { generateRadioClass } = useRadio({
     disabled,
@@ -27,13 +29,13 @@ export const Radio: React.FC<RadioProps> = ({
   });
 
   const radioClass = generateRadioClass({
-    className,
+    className: `${className} ${glass ? 'c-radio--glass' : ''}`.trim(),
     disabled,
     invalid,
     valid,
   });
 
-  return (
+  const radioContent = (
     <div className={radioClass}>
       <input
         type="radio"
@@ -56,6 +58,28 @@ export const Radio: React.FC<RadioProps> = ({
       )}
     </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,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {radioContent}
+      </AtomixGlass>
+    );
+  }
+
+  return radioContent;
 };
 
 export type { RadioProps };

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

@@ -34,6 +34,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether multiple options can be selected',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Select>;
 
@@ -149,3 +153,109 @@ export const DisabledOptions: Story = {
     placeholder: 'Select a country',
   },
 };
+
+// Glass variant
+export const Glass: Story = {
+  args: {
+    options: countries,
+    placeholder: 'Glass Select',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '300px' }}>
+        <Select {...args} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass with custom settings
+export const GlassCustom: Story = {
+  args: {
+    options: countries,
+    placeholder: 'Custom Glass Select',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        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',
+        borderRadius: '12px',
+        minHeight: '300px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '300px' }}>
+        <h3 style={{ color: 'white', marginBottom: '1rem', textAlign: 'center', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          Custom Glass Select
+        </h3>
+        <Select {...args} />
+      </div>
+    </div>
+  ),
+};
+
+// Glass states
+export const GlassStates: Story = {
+  args: {
+    options: countries,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        `}
+      </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)' }}>
+          Glass Select States
+        </h3>
+        <div className="u-d-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 />
+          <Select options={args.options} placeholder="Glass Invalid" invalid glass />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Form/Select.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from 'react';
 import { SelectProps } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
 import { SELECT } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Select - A component for dropdown selection
@@ -24,6 +25,7 @@ export const Select: React.FC<SelectProps> = ({
   multiple = false,
   ariaLabel,
   ariaDescribedBy,
+  glass,
 }) => {
   const { generateSelectClass } = useSelect({
     size,
@@ -33,7 +35,7 @@ export const Select: React.FC<SelectProps> = ({
   });
 
   const selectClass = generateSelectClass({
-    className,
+    className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
     size,
     disabled,
     invalid,
@@ -112,7 +114,7 @@ export const Select: React.FC<SelectProps> = ({
     }
   };
 
-  return (
+  const selectContent = (
     <div
       className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
       ref={dropdownRef}
@@ -182,6 +184,28 @@ export const Select: React.FC<SelectProps> = ({
       </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 };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {selectContent}
+      </AtomixGlass>
+    );
+  }
+
+  return selectContent;
 };
 
 export type { SelectProps };