@shohojdhara/atomix 0.2.1 → 0.2.3

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

@@ -46,6 +46,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the textarea is valid',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } satisfies Meta<typeof Textarea>;
 
@@ -121,3 +125,103 @@ export const States: Story = {
     </div>
   ),
 };
+
+// Glass Effect
+export const Glass: Story = {
+  args: {
+    placeholder: 'Glass Textarea',
+    rows: 4,
+    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',
+      }}
+    >
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+// Glass Variants
+export const GlassVariants: Story = {
+  render: () => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+      }}
+    >
+      <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' }}>
+        <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 />
+        <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,
+        }} />
+      </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',
+        }}
+      >
+        <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' }}>
+          <Textarea placeholder="Write your message..." rows={4} glass />
+          <Textarea placeholder="Additional notes..." rows={3} glass />
+        </div>
+      </div>
+
+      {/* Different Glass Modes */}
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+          padding: '2rem',
+          borderRadius: '12px',
+        }}
+      >
+        <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' }} />
+          <Textarea placeholder="Prominent Mode" rows={3} glass={{ mode: 'prominent' }} />
+          <Textarea placeholder="Shader Mode" rows={3} glass={{ mode: 'shader' }} />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Form/Textarea.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { TextareaProps } from '../../lib/types/components';
 import { useTextarea } from '../../lib/composables/useTextarea';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Textarea - A component for multiline text input
  */
-export const Textarea: React.FC<TextareaProps> = ({
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
   value,
   onChange,
   onBlur,
@@ -28,7 +29,8 @@ export const Textarea: React.FC<TextareaProps> = ({
   autoFocus = false,
   ariaLabel,
   ariaDescribedBy,
-}) => {
+  glass,
+}, ref) => {
   const { generateTextareaClass } = useTextarea({
     size,
     variant,
@@ -38,7 +40,7 @@ export const Textarea: React.FC<TextareaProps> = ({
   });
 
   const textareaClass = generateTextareaClass({
-    className,
+    className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
     size,
     variant,
     disabled,
@@ -46,8 +48,12 @@ export const Textarea: React.FC<TextareaProps> = ({
     valid,
   });
 
-  return (
+  // Custom styles for glass effect
+  const glassStyles = glass ? {} : {};
+
+  const textareaElement = (
     <textarea
+      ref={ref}
       className={textareaClass}
       value={value}
       onChange={onChange}
@@ -67,12 +73,35 @@ export const Textarea: React.FC<TextareaProps> = ({
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
       aria-invalid={invalid}
+      style={glass ? glassStyles : undefined}
     />
   );
-};
 
-export type { TextareaProps };
+  if (glass) {
+    // Default glass settings for textareas
+    const defaultGlassProps = {
+      displacementScale: 60,
+      blurAmount: 1,
+      saturation: 180,
+      aberrationIntensity: 1,
+      cornerRadius: 8,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {textareaElement}
+      </AtomixGlass>
+    );
+  }
+
+  return textareaElement;
+});
 
 Textarea.displayName = 'Textarea';
 
+export type { TextareaProps };
+
 export default Textarea;

package/src/components/Hero/Hero.stories.tsx

@@ -92,6 +92,10 @@ const meta = {
       control: 'text',
       description: 'Video background URL',
     },
+    glass: {
+      control: 'object',
+      description: 'Glass effect properties or boolean to enable/disable',
+    },
     videoOptions: {
       control: 'object',
       description: 'Video background options',
@@ -138,6 +142,55 @@ export const Default: Story = {
   },
 };
 
+/**
+ * Hero with glass effect
+ */
+export const WithGlassEffect: Story = {
+  args: {
+    title: 'Hero with Glass Effect',
+    subtitle: 'Modern UI with Glassmorphism',
+    text: 'This hero content is wrapped in a glass effect container for a modern look.',
+    backgroundImageSrc: 'https://picsum.photos/id/106/1920/1080',
+    showOverlay: true,
+    alignment: 'center',
+    glass: true,
+    contentWidth: '800px',
+    actions: primaryActionButtons,
+  },
+};
+
+/**
+ * Hero with custom glass effect
+ */
+export const WithCustomGlassEffect: Story = {
+  args: {
+    title: 'Hero with Custom Glass Effect',
+    subtitle: 'Fully Customizable Glass Properties',
+    text: 'This hero uses custom glass effect properties for a unique visual style.',
+    backgroundImageSrc: 'https://picsum.photos/id/15/1920/1080',
+    showOverlay: true,
+    fullViewportHeight: true,
+    alignment: 'center',
+    glass: {
+      displacementScale: 40,
+      blurAmount: -0.1,
+      saturation: 130,
+      aberrationIntensity: 0,
+      cornerRadius: 45,
+      mode: 'standard',
+      elasticity: .2,
+      showBorderEffects: true,
+      showHoverEffects: true,
+      onClick: () => {
+        console.log('Clicked!');
+      },
+    },
+    contentWidth: '800px',
+    actions: primaryActionButtons,
+  },
+};
+
+
 /**
  * Hero with left-aligned content and image on right
  */
@@ -292,4 +345,4 @@ export const VideoBackgroundWithImage: Story = {
     imageSrc: 'https://picsum.photos/id/180/712/500',
     imageAlt: 'Product showcase',
   },
-};
+};

package/src/components/Hero/Hero.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, useEffect } from 'react';
 import { HeroProps, HeroAlignment } from '../../lib/types/components';
 import { useHero } from '../../lib/composables/useHero';
 import { HERO } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Hero: React.FC<HeroProps> = ({
   title,
@@ -21,6 +22,8 @@ export const Hero: React.FC<HeroProps> = ({
   parallax = false,
   parallaxIntensity = 0.5,
   videoBackground,
+  children,
+  glass,
   videoOptions = {
     autoplay: true,
     loop: true,
@@ -64,7 +67,7 @@ export const Hero: React.FC<HeroProps> = ({
 
     return (
       <video
-        ref={videoRef}
+        ref={videoRef as React.LegacyRef<HTMLVideoElement>}
         className="c-hero__video"
         autoPlay={autoplay}
         loop={loop}
@@ -96,14 +99,68 @@ export const Hero: React.FC<HeroProps> = ({
     );
   };
 
-  const renderContent = () => (
-    <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
-      {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
-      <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
-      {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
-      {actions && <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
-    </div>
-  );
+  const renderContent = () => {
+    const content = (
+      <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
+        {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
+        <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
+        {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
+        {actions && <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
+      </div>
+    );
+
+    // If glass is explicitly set to false, don't apply glass effect
+    if (glass === false) {
+      return content;
+    }
+
+    // If glass is true or an object, apply glass effect
+    if (glass) {
+      // If glass is true, use default glass props
+      if (glass === true) {
+        return (
+          <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
+            <AtomixGlass
+              displacementScale={60}
+              blurAmount={3}
+              saturation={180}
+              aberrationIntensity={0}
+              cornerRadius={8}
+              overLight={false}
+              mode="standard"
+              
+            >
+              <div className="u-p-4">
+                {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
+                <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
+                {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
+                {actions && (
+                  <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>
+                )}
+              </div>
+            </AtomixGlass>
+          </div>
+        );
+      }
+
+      // If glass is an object, use provided glass props
+      return (
+        <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
+          <AtomixGlass {...glass}>
+            <div className="u-p-4">
+              {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
+              <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
+              {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
+              {actions && <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
+            </div>
+          </AtomixGlass>
+        </div>
+      );
+    }
+
+    // Default behavior - no glass effect
+    return content;
+  };
 
   const renderForegroundImage = () => {
     if (!hasForegroundImage) return null;
@@ -145,7 +202,7 @@ export const Hero: React.FC<HeroProps> = ({
 
   return (
     <div
-      ref={heroRef}
+      ref={heroRef as React.LegacyRef<HTMLDivElement>}
       className={generateHeroClassNames(className)}
       style={heroStyle}
       data-parallax={parallax ? 'true' : undefined}
@@ -153,7 +210,9 @@ export const Hero: React.FC<HeroProps> = ({
     >
       {renderBackground()}
       <div className={`${HERO.SELECTORS.CONTAINER.replace('.', '')} o-container`}>
-        {useGridLayout ? (
+        {children ? (
+          <div className={HERO.SELECTORS.GRID.replace('.', '')}>{children}</div>
+        ) : useGridLayout ? (
           <div className={`${HERO.SELECTORS.GRID.replace('.', '')} o-grid`}>
             {renderGridContent()}
           </div>

package/src/components/Modal/Modal.stories.tsx

@@ -30,6 +30,10 @@ const meta: Meta<typeof Modal> = {
       description: 'Whether to show the close button',
       defaultValue: true,
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 };
 
@@ -282,3 +286,234 @@ export const Sizes: Story = {
     );
   },
 };
+
+/**
+ * Glass morphism modal example.
+ */
+export const GlassModal: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Glass Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Glass Modal"
+          subtitle="This modal features a beautiful glass morphism effect."
+          glass={true}
+        >
+          <p>
+            This modal demonstrates the glass morphism effect with a translucent, frosted appearance.
+            The glass effect creates a modern, elegant look that works well over colorful backgrounds.
+          </p>
+          <p>
+            The glass effect includes displacement, blur, and chromatic aberration for a premium feel.
+          </p>
+        </Modal>
+      </>
+    );
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ 
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Glass modal with custom settings.
+ */
+export const GlassModalCustom: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Custom Glass Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Custom Glass Modal"
+          subtitle="This modal has customized glass effect settings."
+          glass={{
+            displacementScale: 120,
+            blurAmount: 3,
+            saturation: 200,
+            aberrationIntensity: 2,
+            cornerRadius: 20,
+            mode: 'polar',
+          }}
+          footer={
+            <>
+              <div
+                className="c-btn c-btn--outline-secondary"
+                onClick={() => setIsOpen(false)}
+                style={{
+                  cursor: 'pointer',
+                  padding: '8px 16px',
+                  display: 'inline-block',
+                  marginRight: '8px',
+                }}
+              >
+                Cancel
+              </div>
+              <div
+                className="c-btn c-btn--primary"
+                onClick={() => setIsOpen(false)}
+                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+              >
+                Confirm
+              </div>
+            </>
+          }
+        >
+          <p>
+            This modal uses custom glass settings with enhanced displacement, blur, and chromatic aberration.
+            The polar mode creates a different visual effect compared to the standard shader mode.
+          </p>
+        </Modal>
+      </>
+    );
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ 
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Glass modal with different sizes.
+ */
+export const GlassModalSizes: Story = {
+  render: () => {
+    const [size, setSize] = useState<'sm' | 'md' | 'lg' | 'xl'>('md');
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="u-d-flex u-flex-column u-gap-4">
+        <div className="u-d-flex u-gap-4">
+          <div
+            className={`c-btn ${size === 'sm' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('sm');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Small Glass Modal
+          </div>
+
+          <div
+            className={`c-btn ${size === 'md' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('md');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Medium Glass Modal
+          </div>
+
+          <div
+            className={`c-btn ${size === 'lg' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('lg');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Large Glass Modal
+          </div>
+
+          <div
+            className={`c-btn ${size === 'xl' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('xl');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Extra Large Glass Modal
+          </div>
+        </div>
+
+        <Modal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title={`${size.toUpperCase()} Glass Modal`}
+          subtitle="This modal demonstrates glass effect with different sizes."
+          size={size}
+          glass={true}
+          footer={
+            <>
+              <div
+                className="c-btn c-btn--outline-secondary"
+                onClick={() => setIsOpen(false)}
+                style={{
+                  cursor: 'pointer',
+                  padding: '8px 16px',
+                  display: 'inline-block',
+                  marginRight: '8px',
+                }}
+              >
+                Cancel
+              </div>
+              <div
+                className="c-btn c-btn--primary"
+                onClick={() => setIsOpen(false)}
+                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+              >
+                Confirm
+              </div>
+            </>
+          }
+        >
+          <p>This is a {size.toUpperCase()} sized glass modal.</p>
+          <p>The glass effect adapts to different modal sizes while maintaining its visual appeal.</p>
+        </Modal>
+      </div>
+    );
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ 
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
+        minHeight: '100vh',
+        padding: '2rem'
+      }}>
+        <Story />
+      </div>
+    ),
+  ],
+};