@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/AtomixGlass/stories/Modes.stories.tsx

@@ -152,7 +152,7 @@ export const ModeGallery: Story = {
               saturation={130}
               cornerRadius={20}
               elasticity={0.12}
-              className='u-mb-4 d-inline-block'
+              className="u-mb-4 d-inline-block"
             >
               Four Rendering Modes
             </AtomixGlass>
@@ -185,176 +185,176 @@ export const ModeGallery: Story = {
 
           {/* Modes Grid */}
           <Container>
-          <Grid>
-            {modes.map(mode => {
-              const isSelected = selectedMode === mode.id;
+            <Grid>
+              {modes.map(mode => {
+                const isSelected = selectedMode === mode.id;
 
-              return (
-                <GridCol xs={12} md={6}  className='u-mb-4'>
-                  <AtomixGlass
-                    key={mode.id}
-                    mode={mode.id as any}
-                    displacementScale={mode.settings.displacementScale}
-                    blurAmount={mode.settings.blurAmount}
-                    saturation={mode.settings.saturation}
-                    aberrationIntensity={mode.settings.aberrationIntensity}
-                    shaderVariant={mode.id === 'shader' ? 'premiumGlass' : undefined}
-                    elasticity={0}
-                    cornerRadius={24}
-                    onClick={() => setSelectedMode(isSelected ? null : mode.id)}
-                    style={{
-                      cursor: 'pointer',
-                      transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
-                      transform: isSelected ? 'scale(1.03)' : 'scale(1)',
-                    }}
-                  >
-                    <div
+                return (
+                  <GridCol xs={12} md={6} className="u-mb-4">
+                    <AtomixGlass
+                      key={mode.id}
+                      mode={mode.id as any}
+                      displacementScale={mode.settings.displacementScale}
+                      blurAmount={mode.settings.blurAmount}
+                      saturation={mode.settings.saturation}
+                      aberrationIntensity={mode.settings.aberrationIntensity}
+                      shaderVariant={mode.id === 'shader' ? 'premiumGlass' : undefined}
+                      elasticity={0}
+                      cornerRadius={24}
+                      onClick={() => setSelectedMode(isSelected ? null : mode.id)}
                       style={{
-                        padding: '32px 28px',
-                        minHeight: '420px',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        transition: 'all 0.3s ease',
+                        cursor: 'pointer',
+                        transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
+                        transform: isSelected ? 'scale(1.03)' : 'scale(1)',
                       }}
                     >
-                      {/* Icon and Badge */}
-                      <div style={{ marginBottom: '24px' }}>
-                        <div
-                          style={{
-                            width: '64px',
-                            height: '64px',
-                            borderRadius: '18px',
-                            background: mode.gradient,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            fontSize: '32px',
-                            marginBottom: '16px',
-                            boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
-                            position: 'relative',
-                          }}
-                        >
+                      <div
+                        style={{
+                          padding: '32px 28px',
+                          minHeight: '420px',
+                          display: 'flex',
+                          flexDirection: 'column',
+                          transition: 'all 0.3s ease',
+                        }}
+                      >
+                        {/* Icon and Badge */}
+                        <div style={{ marginBottom: '24px' }}>
                           <div
                             style={{
-                              position: 'absolute',
-                              inset: '-3px',
-                              borderRadius: '20px',
+                              width: '64px',
+                              height: '64px',
+                              borderRadius: '18px',
                               background: mode.gradient,
-                              opacity: 0.4,
-                              filter: 'blur(10px)',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              fontSize: '32px',
+                              marginBottom: '16px',
+                              boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
+                              position: 'relative',
                             }}
-                          />
-                          <span style={{ position: 'relative', zIndex: 1 }}>{mode.icon}</span>
+                          >
+                            <div
+                              style={{
+                                position: 'absolute',
+                                inset: '-3px',
+                                borderRadius: '20px',
+                                background: mode.gradient,
+                                opacity: 0.4,
+                                filter: 'blur(10px)',
+                              }}
+                            />
+                            <span style={{ position: 'relative', zIndex: 1 }}>{mode.icon}</span>
+                          </div>
                         </div>
-                      </div>
 
-                      {/* Content */}
-                      <div style={{ flex: 1 }}>
-                        <h3
-                          style={{
-                            margin: '0 0 12px 0',
-                            fontSize: '26px',
-                            fontWeight: 600,
-                            color: '#fff',
-                            letterSpacing: '-0.5px',
-                          }}
-                        >
-                          {mode.name}
-                        </h3>
-                        <p
-                          style={{
-                            margin: '0 0 20px 0',
-                            fontSize: '14px',
-                            lineHeight: 1.6,
-                            color: 'rgba(255, 255, 255, 0.8)',
-                          }}
-                        >
-                          {mode.description}
-                        </p>
+                        {/* Content */}
+                        <div style={{ flex: 1 }}>
+                          <h3
+                            style={{
+                              margin: '0 0 12px 0',
+                              fontSize: '26px',
+                              fontWeight: 600,
+                              color: '#fff',
+                              letterSpacing: '-0.5px',
+                            }}
+                          >
+                            {mode.name}
+                          </h3>
+                          <p
+                            style={{
+                              margin: '0 0 20px 0',
+                              fontSize: '14px',
+                              lineHeight: 1.6,
+                              color: 'rgba(255, 255, 255, 0.8)',
+                            }}
+                          >
+                            {mode.description}
+                          </p>
+
+                          {/* Features List */}
+                          <div
+                            style={{
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: '8px',
+                              marginBottom: '20px',
+                            }}
+                          >
+                            {mode.features.map((feature, idx) => (
+                              <div
+                                key={idx}
+                                style={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '8px',
+                                  fontSize: '13px',
+                                  color: 'rgba(255, 255, 255, 0.75)',
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    width: '4px',
+                                    height: '4px',
+                                    borderRadius: '50%',
+                                    background: mode.gradient,
+                                  }}
+                                />
+                                {feature}
+                              </div>
+                            ))}
+                          </div>
+
+                          {/* Use Case */}
+                          <div
+                            style={{
+                              padding: '12px 16px',
+                              borderRadius: '12px',
+                              background: 'rgba(255, 255, 255, 0.08)',
+                              border: '1px solid rgba(255, 255, 255, 0.1)',
+                              fontSize: '12px',
+                              lineHeight: 1.5,
+                              color: 'rgba(255, 255, 255, 0.7)',
+                              marginTop: 'auto',
+                            }}
+                          >
+                            <strong style={{ color: '#fff' }}>Use Case:</strong> {mode.useCase}
+                          </div>
+                        </div>
 
-                        {/* Features List */}
+                        {/* Settings Info */}
                         <div
                           style={{
+                            marginTop: '20px',
+                            paddingTop: '16px',
+                            borderTop: '1px solid rgba(255, 255, 255, 0.1)',
                             display: 'flex',
-                            flexDirection: 'column',
+                            flexWrap: 'wrap',
                             gap: '8px',
-                            marginBottom: '20px',
                           }}
                         >
-                          {mode.features.map((feature, idx) => (
-                            <div
-                              key={idx}
+                          {Object.entries(mode.settings).map(([key, value]) => (
+                            <span
+                              key={key}
                               style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '8px',
-                                fontSize: '13px',
-                                color: 'rgba(255, 255, 255, 0.75)',
+                                padding: '4px 10px',
+                                fontSize: '11px',
+                                borderRadius: '8px',
+                                background: 'rgba(0, 0, 0, 0.2)',
+                                color: 'rgba(255, 255, 255, 0.6)',
+                                fontFamily: 'monospace',
                               }}
                             >
-                              <div
-                                style={{
-                                  width: '4px',
-                                  height: '4px',
-                                  borderRadius: '50%',
-                                  background: mode.gradient,
-                                }}
-                              />
-                              {feature}
-                            </div>
+                              {key.replace(/([A-Z])/g, ' $1').trim()}: {value}
+                            </span>
                           ))}
                         </div>
-
-                        {/* Use Case */}
-                        <div
-                          style={{
-                            padding: '12px 16px',
-                            borderRadius: '12px',
-                            background: 'rgba(255, 255, 255, 0.08)',
-                            border: '1px solid rgba(255, 255, 255, 0.1)',
-                            fontSize: '12px',
-                            lineHeight: 1.5,
-                            color: 'rgba(255, 255, 255, 0.7)',
-                            marginTop: 'auto',
-                          }}
-                        >
-                          <strong style={{ color: '#fff' }}>Use Case:</strong> {mode.useCase}
-                        </div>
-                      </div>
-
-                      {/* Settings Info */}
-                      <div
-                        style={{
-                          marginTop: '20px',
-                          paddingTop: '16px',
-                          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
-                          display: 'flex',
-                          flexWrap: 'wrap',
-                          gap: '8px',
-                        }}
-                      >
-                        {Object.entries(mode.settings).map(([key, value]) => (
-                          <span
-                            key={key}
-                            style={{
-                              padding: '4px 10px',
-                              fontSize: '11px',
-                              borderRadius: '8px',
-                              background: 'rgba(0, 0, 0, 0.2)',
-                              color: 'rgba(255, 255, 255, 0.6)',
-                              fontFamily: 'monospace',
-                            }}
-                          >
-                            {key.replace(/([A-Z])/g, ' $1').trim()}: {value}
-                          </span>
-                        ))}
                       </div>
-                    </div>
-                  </AtomixGlass>
-                </GridCol>
-              );
-            })}
-          </Grid>
+                    </AtomixGlass>
+                  </GridCol>
+                );
+              })}
+            </Grid>
           </Container>
 
           {/* Info Card */}
@@ -365,7 +365,7 @@ export const ModeGallery: Story = {
             saturation={130}
             cornerRadius={20}
             elasticity={0.12}
-            className='u-mt-8'
+            className="u-mt-8"
           >
             <div
               style={{

package/src/components/AtomixGlass/stories/Playground.stories.tsx

@@ -238,7 +238,7 @@ const BackgroundWrapper = ({
 }: BackgroundWrapperProps) => {
   return (
     <div
-      className={`atomix-glass-background ${className}`}
+      className={`c-atomix-glass-background ${className}`}
       style={{
         width,
         minHeight: height,
@@ -315,9 +315,9 @@ export const Playground: Story = {
       'standard'
     );
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [selectedShader, setSelectedShader] = useState<'liquidGlass' | 'plasma' | 'waves' | 'noise'>(
-      'liquidGlass'
-    );
+    const [selectedShader, setSelectedShader] = useState<
+      'liquidGlass' | 'plasma' | 'waves' | 'noise'
+    >('liquidGlass');
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [showCode, setShowCode] = useState(false);
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -500,7 +500,7 @@ export const Playground: Story = {
       'https://images.unsplash.com/photo-1653443688877-ff1d74f1e4a0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987',
       'https://images.unsplash.com/photo-1495164678535-ecbd76d9fa7d?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2669',
       'https://images.unsplash.com/photo-1742502575383-b908da0fb3ba?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2673',
-      'https://images.unsplash.com/photo-1627057075078-26c7caf11dc2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2674'
+      'https://images.unsplash.com/photo-1627057075078-26c7caf11dc2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2674',
     ];
 
     return (
@@ -508,9 +508,9 @@ export const Playground: Story = {
         <div className="o-container">
           <div className="o-grid">
             <div className="o-grid__col o-grid__col--4">
-            {/* Control Panel */}
+              {/* Control Panel */}
 
-              <AtomixGlass blurAmount={10} elasticity={0} displacementScale={20} padding='20px'>
+              <AtomixGlass blurAmount={10} elasticity={0} displacementScale={20} padding="20px">
                 <div
                   style={{
                     height: '90vh',
@@ -827,7 +827,7 @@ export const Playground: Story = {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  padding: '3rem'
+                  padding: '3rem',
                 }}
               >
                 {showCode ? (
@@ -925,19 +925,41 @@ export const Playground: Story = {
                         {/* Current Configuration */}
                         <div
                           className="u-p-4 u-rounded"
-                          style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)' }}
+                          style={{
+                            background: 'rgba(255,255,255,0.08)',
+                            border: '1px solid rgba(255,255,255,0.15)',
+                          }}
                         >
-                          <div className="u-mb-3 u-fw-semibold u-fs-sm" style={{ color: '#7AFFD7' }}>
+                          <div
+                            className="u-mb-3 u-fw-semibold u-fs-sm"
+                            style={{ color: '#7AFFD7' }}
+                          >
                             📊 Current Configuration
                           </div>
-                          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr', gap: '0.75rem' }}>
+                          <div
+                            style={{
+                              display: 'grid',
+                              gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
+                              gap: '0.75rem',
+                            }}
+                          >
                             <div>
                               <div className="u-fs-xs u-opacity-70">Mode</div>
-                              <div className="u-fw-semibold" style={{ textTransform: 'capitalize' }}>{selectedMode}</div>
+                              <div
+                                className="u-fw-semibold"
+                                style={{ textTransform: 'capitalize' }}
+                              >
+                                {selectedMode}
+                              </div>
                             </div>
                             <div>
                               <div className="u-fs-xs u-opacity-70">Shader</div>
-                              <div className="u-fw-semibold" style={{ textTransform: 'capitalize' }}>{selectedShader}</div>
+                              <div
+                                className="u-fw-semibold"
+                                style={{ textTransform: 'capitalize' }}
+                              >
+                                {selectedShader}
+                              </div>
                             </div>
                             <div>
                               <div className="u-fs-xs u-opacity-70">Displacement</div>
@@ -945,7 +967,9 @@ export const Playground: Story = {
                             </div>
                             <div>
                               <div className="u-fs-xs u-opacity-70">Aberration</div>
-                              <div className="u-fw-semibold">{settings.aberrationIntensity.toFixed(1)}</div>
+                              <div className="u-fw-semibold">
+                                {settings.aberrationIntensity.toFixed(1)}
+                              </div>
                             </div>
                             <div>
                               <div className="u-fs-xs u-opacity-70">Blur</div>
@@ -958,14 +982,18 @@ export const Playground: Story = {
                           </div>
                         </div>
 
-                     
-
                         {/* Visual Characteristics */}
                         <div
                           className="u-p-4 u-rounded"
-                          style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)' }}
+                          style={{
+                            background: 'rgba(255,255,255,0.08)',
+                            border: '1px solid rgba(255,255,255,0.15)',
+                          }}
                         >
-                          <div className="u-mb-3 u-fw-semibold u-fs-sm" style={{ color: '#7AFFD7' }}>
+                          <div
+                            className="u-mb-3 u-fw-semibold u-fs-sm"
+                            style={{ color: '#7AFFD7' }}
+                          >
                             🎨 Visual Characteristics
                           </div>
                           <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
@@ -973,9 +1001,13 @@ export const Playground: Story = {
                               style={{
                                 padding: '4px 12px',
                                 borderRadius: '12px',
-                                background: settings.enableLiquidBlur ? 'rgba(122, 255, 215, 0.2)' : 'rgba(255,255,255,0.1)',
+                                background: settings.enableLiquidBlur
+                                  ? 'rgba(122, 255, 215, 0.2)'
+                                  : 'rgba(255,255,255,0.1)',
                                 fontSize: '0.75rem',
-                                border: settings.enableLiquidBlur ? '1px solid #7AFFD7' : '1px solid transparent',
+                                border: settings.enableLiquidBlur
+                                  ? '1px solid #7AFFD7'
+                                  : '1px solid transparent',
                               }}
                             >
                               {settings.enableLiquidBlur ? '✓' : '○'} Liquid Blur
@@ -984,9 +1016,13 @@ export const Playground: Story = {
                               style={{
                                 padding: '4px 12px',
                                 borderRadius: '12px',
-                                background: settings.enableBorderEffect ? 'rgba(122, 255, 215, 0.2)' : 'rgba(255,255,255,0.1)',
+                                background: settings.enableBorderEffect
+                                  ? 'rgba(122, 255, 215, 0.2)'
+                                  : 'rgba(255,255,255,0.1)',
                                 fontSize: '0.75rem',
-                                border: settings.enableBorderEffect ? '1px solid #7AFFD7' : '1px solid transparent',
+                                border: settings.enableBorderEffect
+                                  ? '1px solid #7AFFD7'
+                                  : '1px solid transparent',
                               }}
                             >
                               {settings.enableBorderEffect ? '✓' : '○'} Border Effect
@@ -995,9 +1031,13 @@ export const Playground: Story = {
                               style={{
                                 padding: '4px 12px',
                                 borderRadius: '12px',
-                                background: settings.reducedMotion ? 'rgba(239, 68, 68, 0.2)' : 'rgba(255,255,255,0.1)',
+                                background: settings.reducedMotion
+                                  ? 'rgba(239, 68, 68, 0.2)'
+                                  : 'rgba(255,255,255,0.1)',
                                 fontSize: '0.75rem',
-                                border: settings.reducedMotion ? '1px solid #EF4444' : '1px solid transparent',
+                                border: settings.reducedMotion
+                                  ? '1px solid #EF4444'
+                                  : '1px solid transparent',
                               }}
                             >
                               {settings.reducedMotion ? '✓' : '○'} Reduced Motion
@@ -1006,9 +1046,13 @@ export const Playground: Story = {
                               style={{
                                 padding: '4px 12px',
                                 borderRadius: '12px',
-                                background: settings.highContrast ? 'rgba(245, 158, 11, 0.2)' : 'rgba(255,255,255,0.1)',
+                                background: settings.highContrast
+                                  ? 'rgba(245, 158, 11, 0.2)'
+                                  : 'rgba(255,255,255,0.1)',
                                 fontSize: '0.75rem',
-                                border: settings.highContrast ? '1px solid #F59E0B' : '1px solid transparent',
+                                border: settings.highContrast
+                                  ? '1px solid #F59E0B'
+                                  : '1px solid transparent',
                               }}
                             >
                               {settings.highContrast ? '✓' : '○'} High Contrast
@@ -1019,27 +1063,46 @@ export const Playground: Story = {
                         {/* Quick Stats */}
                         <div
                           className="u-p-4 u-rounded"
-                          style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)' }}
+                          style={{
+                            background: 'rgba(255,255,255,0.08)',
+                            border: '1px solid rgba(255,255,255,0.15)',
+                          }}
                         >
-                          <div className="u-mb-3 u-fw-semibold u-fs-sm" style={{ color: '#7AFFD7' }}>
+                          <div
+                            className="u-mb-3 u-fw-semibold u-fs-sm"
+                            style={{ color: '#7AFFD7' }}
+                          >
                             📈 Quick Stats
                           </div>
-                          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '0.75rem', fontSize: '0.875rem' }}>
+                          <div
+                            style={{
+                              display: 'grid',
+                              gridTemplateColumns: '1fr 1fr 1fr 1fr',
+                              gap: '0.75rem',
+                              fontSize: '0.875rem',
+                            }}
+                          >
                             <div>
                               <span className="u-opacity-70">Saturation:</span>
                               <span className="u-fw-semibold u-ml-2">{settings.saturation}%</span>
                             </div>
                             <div>
                               <span className="u-opacity-70">Radius:</span>
-                              <span className="u-fw-semibold u-ml-2">{settings.cornerRadius}px</span>
+                              <span className="u-fw-semibold u-ml-2">
+                                {settings.cornerRadius}px
+                              </span>
                             </div>
                             <div>
                               <span className="u-opacity-70">Background:</span>
-                              <span className="u-fw-semibold u-ml-2">{backgroundIndex + 1}/{backgrounds.length}</span>
+                              <span className="u-fw-semibold u-ml-2">
+                                {backgroundIndex + 1}/{backgrounds.length}
+                              </span>
                             </div>
                             <div>
                               <span className="u-opacity-70">Effects:</span>
-                              <span className="u-fw-semibold u-ml-2">{settings.disableEffects ? 'Disabled' : 'Enabled'}</span>
+                              <span className="u-fw-semibold u-ml-2">
+                                {settings.disableEffects ? 'Disabled' : 'Enabled'}
+                              </span>
                             </div>
                           </div>
                         </div>

package/src/components/AtomixGlass/stories/ShaderVariants.stories.tsx

@@ -31,8 +31,6 @@ const meta: Meta<typeof AtomixGlass> = {
 export default meta;
 type Story = StoryObj<typeof AtomixGlass>;
 
-
-
 /**
  * Liquid Glass Variant
  *

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -169,7 +169,7 @@ export const BackgroundWrapper = ({
 
   return (
     <div
-      className={`atomix-glass-background ${className}`}
+      className={`c-atomix-glass-background ${className}`}
       style={{
         position: 'relative',
         height: height,
@@ -189,22 +189,8 @@ export const BackgroundWrapper = ({
         ...style,
       }}
     >
-      {/* Overlay for better contrast and visual appeal */}
-      {finalOverlayOpacity > 0 && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            background: finalOverlayColor,
-            opacity: finalOverlayOpacity,
-          }}
-        />
-      )}
-    
-        {children}
+     
+      {children}
     </div>
   );
 };
@@ -215,7 +201,11 @@ export const BackgroundWrapper = ({
  * A container that provides mouse tracking and interactive background effects
  * for enhanced storytelling and demonstration purposes.
  */
-export const StoryContainer = ({ children, style = {}, interactive = false }: StoryContainerProps) => {
+export const StoryContainer = ({
+  children,
+  style = {},
+  interactive = false,
+}: StoryContainerProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [backgroundPosition, setBackgroundPosition] = useState({ x: 0, y: 0 });
 
@@ -244,6 +234,7 @@ export const StoryContainer = ({ children, style = {}, interactive = false }: St
         currentRef.removeEventListener('mousemove', handleMouseMove);
       };
     }
+    return undefined;
   }, [handleMouseMove, interactive]);
 
   return (