@shohojdhara/atomix 0.3.0 → 0.3.2

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

@@ -150,20 +150,38 @@ export const ModeGallery: Story = {
               displacementScale={80}
               blurAmount={1}
               saturation={130}
-              cornerRadius={20}
+              cornerRadius={24}
               elasticity={0.12}
-              className="u-mb-4 d-inline-block"
+              style={{ marginBottom: '24px', display: 'inline-block' }}
             >
-              Four Rendering Modes
+              <div
+                style={{
+                  padding: '12px 24px',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  fontSize: '13px',
+                  fontWeight: 700,
+                  letterSpacing: '1px',
+                  textTransform: 'uppercase',
+                  color: 'rgba(255, 255, 255, 0.9)',
+                }}
+              >
+                <span>🎨</span>
+                <span>Four Rendering Modes</span>
+              </div>
             </AtomixGlass>
             <h1
               style={{
-                margin: '0 0 16px 0',
-                fontSize: '48px',
+                margin: '0 0 20px 0',
+                fontSize: '56px',
                 fontWeight: 700,
-                color: '#fff',
-                letterSpacing: '-1px',
-                textShadow: '0 4px 12px rgba(0,0,0,0.3)',
+                background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                backgroundClip: 'text',
+                letterSpacing: '-1.5px',
+                textShadow: '0 4px 12px rgba(0,0,0,0.1)',
               }}
             >
               AtomixGlass Modes
@@ -171,15 +189,15 @@ export const ModeGallery: Story = {
             <p
               style={{
                 fontSize: '18px',
-                color: 'rgba(255, 255, 255, 0.85)',
-                maxWidth: '680px',
+                color: 'rgba(255, 255, 255, 0.9)',
+                maxWidth: '720px',
                 margin: '0 auto',
-                lineHeight: 1.6,
+                lineHeight: 1.7,
                 textShadow: '0 2px 4px rgba(0,0,0,0.2)',
               }}
             >
               Choose from four distinct rendering modes, each optimized for different visual styles
-              and performance requirements.
+              and performance requirements. Click any card to explore the mode in detail.
             </p>
           </div>
 

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

@@ -520,12 +520,50 @@ export const Playground: Story = {
                   }}
                 >
                   <div className="u-mb-8">
-                    <h2 className="u-mb-2 u-text-white u-fw-bold" style={{ fontSize: '2rem' }}>
-                      Advanced Playground
-                    </h2>
-                    <p className="u-text-white u-opacity-70 u-fs-sm">
-                      Fine-tune every parameter with live preview
-                    </p>
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        marginBottom: '16px',
+                      }}
+                    >
+                      <div
+                        style={{
+                          width: '48px',
+                          height: '48px',
+                          borderRadius: '14px',
+                          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          fontSize: '24px',
+                          boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
+                        }}
+                      >
+                        🎮
+                      </div>
+                      <div>
+                        <h2
+                          className="u-m-0 u-text-white u-fw-bold"
+                          style={{
+                            fontSize: '1.75rem',
+                            background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+                            WebkitBackgroundClip: 'text',
+                            WebkitTextFillColor: 'transparent',
+                            backgroundClip: 'text',
+                          }}
+                        >
+                          Advanced Playground
+                        </h2>
+                        <p
+                          className="u-m-0 u-text-white u-opacity-80"
+                          style={{ fontSize: '13px', marginTop: '4px' }}
+                        >
+                          Fine-tune every parameter with live preview
+                        </p>
+                      </div>
+                    </div>
                   </div>
 
                   {/* Performance Indicator */}
@@ -574,8 +612,11 @@ export const Playground: Story = {
 
                   {/* Quick Presets */}
                   <div className="u-mb-6">
-                    <label className="u-d-block u-mb-3 u-text-white u-fw-semibold">
-                      Quick Presets
+                    <label
+                      className="u-d-block u-mb-3 u-text-white u-fw-semibold"
+                      style={{ fontSize: '14px', letterSpacing: '0.5px' }}
+                    >
+                      ⚡ Quick Presets
                     </label>
                     <div
                       style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}
@@ -585,28 +626,48 @@ export const Playground: Story = {
                           key={key}
                           onClick={() => applyPreset(key as keyof typeof presets)}
                           style={{
-                            padding: '12px',
-                            background: 'rgba(255,255,255,0.1)',
-                            border: '1px solid rgba(255,255,255,0.2)',
-                            borderRadius: '12px',
+                            padding: '16px 12px',
+                            background: 'rgba(255,255,255,0.08)',
+                            border: '2px solid rgba(255,255,255,0.15)',
+                            borderRadius: '16px',
                             color: 'white',
                             cursor: 'pointer',
-                            transition: 'all 0.2s',
+                            transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
                             textAlign: 'center',
+                            position: 'relative',
+                            overflow: 'hidden',
                           }}
                           onMouseEnter={e => {
                             e.currentTarget.style.background = 'rgba(255,255,255,0.15)';
                             e.currentTarget.style.borderColor = 'rgba(255,255,255,0.3)';
+                            e.currentTarget.style.transform = 'translateY(-2px) scale(1.02)';
+                            e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.2)';
                           }}
                           onMouseLeave={e => {
-                            e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
-                            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)';
+                            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.15)';
+                            e.currentTarget.style.transform = 'translateY(0) scale(1)';
+                            e.currentTarget.style.boxShadow = 'none';
                           }}
                         >
-                          <div style={{ fontSize: '1.5rem', marginBottom: '4px' }}>
+                          <div
+                            style={{
+                              fontSize: '2rem',
+                              marginBottom: '8px',
+                              filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.2))',
+                            }}
+                          >
                             {preset.icon}
                           </div>
-                          <div style={{ fontSize: '0.875rem', fontWeight: 600 }}>{preset.name}</div>
+                          <div
+                            style={{
+                              fontSize: '0.875rem',
+                              fontWeight: 700,
+                              letterSpacing: '0.3px',
+                            }}
+                          >
+                            {preset.name}
+                          </div>
                         </button>
                       ))}
                     </div>
@@ -838,25 +899,62 @@ export const Playground: Story = {
                       cornerRadius={16}
                       saturation={120}
                     >
-                      <div style={{ padding: '2rem' }}>
-                        <div className="u-d-flex u-justify-content-between u-align-items-center u-mb-4">
-                          <h3 className="u-text-white u-fw-semibold" style={{ fontSize: '1.5rem' }}>
-                            Generated Code
-                          </h3>
-                          <Button variant="primary" size="sm" onClick={copyCode}>
-                            {copiedCode ? '✓ Copied' : 'Copy'}
+                      <div style={{ padding: '2.5rem' }}>
+                        <div
+                          className="u-d-flex u-justify-content-between u-align-items-center u-mb-4"
+                          style={{ marginBottom: '24px' }}
+                        >
+                          <div>
+                            <h3
+                              className="u-m-0 u-fw-bold"
+                              style={{
+                                fontSize: '1.75rem',
+                                background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+                                WebkitBackgroundClip: 'text',
+                                WebkitTextFillColor: 'transparent',
+                                backgroundClip: 'text',
+                                marginBottom: '8px',
+                              }}
+                            >
+                              💻 Generated Code
+                            </h3>
+                            <p
+                              className="u-m-0"
+                              style={{
+                                fontSize: '13px',
+                                color: 'rgba(255, 255, 255, 0.7)',
+                              }}
+                            >
+                              Copy this code to use in your project
+                            </p>
+                          </div>
+                          <Button
+                            variant="primary"
+                            size="md"
+                            onClick={copyCode}
+                            style={{
+                              minWidth: '120px',
+                              boxShadow: copiedCode
+                                ? '0 4px 16px rgba(122, 255, 215, 0.4)'
+                                : 'none',
+                            }}
+                          >
+                            {copiedCode ? '✓ Copied!' : '📋 Copy Code'}
                           </Button>
                         </div>
                         <pre
                           style={{
-                            background: 'rgba(0,0,0,0.5)',
-                            padding: '1.5rem',
-                            borderRadius: '8px',
+                            background: 'rgba(0,0,0,0.6)',
+                            padding: '1.75rem',
+                            borderRadius: '12px',
                             overflow: 'auto',
                             maxHeight: '500px',
                             color: '#7AFFD7',
                             fontSize: '0.875rem',
-                            lineHeight: 1.6,
+                            lineHeight: 1.7,
+                            border: '1px solid rgba(122, 255, 215, 0.2)',
+                            fontFamily: 'Monaco, "Courier New", monospace',
+                            boxShadow: 'inset 0 2px 8px rgba(0,0,0,0.3)',
                           }}
                         >
                           <code>{generateCode()}</code>
@@ -882,28 +980,65 @@ export const Playground: Story = {
                     enableBorderEffect={settings.enableBorderEffect}
                     style={{ width: '100%' }}
                   >
-                    <div style={{ padding: '2rem', textAlign: 'center' }}>
+                    <div style={{ padding: '2.5rem', textAlign: 'center' }}>
                       <div
                         style={{
                           display: 'inline-flex',
                           alignItems: 'center',
-                          padding: '8px 20px',
-                          borderRadius: '24px',
-                          background: 'rgba(122, 255, 215, 0.2)',
+                          gap: '8px',
+                          padding: '10px 24px',
+                          borderRadius: '28px',
+                          background: 'linear-gradient(135deg, rgba(122, 255, 215, 0.25) 0%, rgba(102, 126, 234, 0.25) 100%)',
+                          border: '1px solid rgba(122, 255, 215, 0.3)',
                           color: '#7AFFD7',
                           fontSize: '0.875rem',
-                          fontWeight: 600,
-                          marginBottom: '1.5rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.5px',
+                          marginBottom: '2rem',
+                          boxShadow: '0 4px 16px rgba(122, 255, 215, 0.2)',
                         }}
                       >
-                        ✨ LIVE PREVIEW
+                        <span style={{ fontSize: '18px' }}>✨</span>
+                        <span>LIVE PREVIEW</span>
                       </div>
-                      <h2 className="u-mb-4 u-text-white u-fw-bold" style={{ fontSize: '2.5rem' }}>
+                      <div
+                        style={{
+                          width: '96px',
+                          height: '96px',
+                          margin: '0 auto 24px',
+                          borderRadius: '24px',
+                          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          fontSize: '48px',
+                          boxShadow: '0 12px 32px rgba(102, 126, 234, 0.4)',
+                        }}
+                      >
+                        ✨
+                      </div>
+                      <h2
+                        className="u-mb-4 u-fw-bold"
+                        style={{
+                          fontSize: '2.75rem',
+                          background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
+                          WebkitBackgroundClip: 'text',
+                          WebkitTextFillColor: 'transparent',
+                          backgroundClip: 'text',
+                          letterSpacing: '-1px',
+                        }}
+                      >
                         AtomixGlass
                       </h2>
                       <p
-                        className="u-mb-6 u-opacity-90"
-                        style={{ fontSize: '1.125rem', lineHeight: 1.6 }}
+                        className="u-mb-6"
+                        style={{
+                          fontSize: '1.125rem',
+                          lineHeight: 1.7,
+                          color: 'rgba(255, 255, 255, 0.9)',
+                          maxWidth: '600px',
+                          margin: '0 auto 2rem',
+                        }}
                       >
                         Adjust the controls on the left to see real-time changes. Each parameter
                         affects the visual appearance and performance characteristics of the glass

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

@@ -71,7 +71,7 @@ export const LiquidGlass: Story = {
         <h2
           style={{
             margin: '0 0 16px 0',
-            fontSize: '36px',
+            fontSize: '38px',
             fontWeight: 700,
             background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
             WebkitBackgroundClip: 'text',
@@ -84,14 +84,14 @@ export const LiquidGlass: Story = {
         </h2>
         <p
           style={{
-            margin: '0 0 28px 0',
-            fontSize: '17px',
-            lineHeight: 1.7,
-            color: 'rgba(255, 255, 255, 0.85)',
+            margin: '0 0 32px 0',
+            fontSize: '18px',
+            lineHeight: 1.8,
+            color: 'rgba(255, 255, 255, 0.9)',
           }}
         >
           Experience fluid, time-based animations with multi-layered organic distortion and
-          chromatic aberration effects that create living glass.
+          chromatic aberration effects that create living, breathing glass.
         </p>
         <div
           style={{
@@ -192,7 +192,7 @@ export const AppleFluid: Story = {
         <h2
           style={{
             margin: '0 0 16px 0',
-            fontSize: '36px',
+            fontSize: '38px',
             fontWeight: 700,
             background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
             WebkitBackgroundClip: 'text',
@@ -205,14 +205,14 @@ export const AppleFluid: Story = {
         </h2>
         <p
           style={{
-            margin: '0 0 28px 0',
-            fontSize: '17px',
-            lineHeight: 1.7,
-            color: 'rgba(255, 255, 255, 0.85)',
+            margin: '0 0 32px 0',
+            fontSize: '18px',
+            lineHeight: 1.8,
+            color: 'rgba(255, 255, 255, 0.9)',
           }}
         >
           Apple-inspired fluid dynamics with vortex effects and high-quality 5-octave noise. Mouse
-          interactions create mesmerizing flow patterns.
+          interactions create mesmerizing, organic flow patterns.
         </p>
         <div
           style={{
@@ -313,7 +313,7 @@ export const PremiumGlass: Story = {
         <h2
           style={{
             margin: '0 0 16px 0',
-            fontSize: '36px',
+            fontSize: '38px',
             fontWeight: 700,
             background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
             WebkitBackgroundClip: 'text',
@@ -326,14 +326,14 @@ export const PremiumGlass: Story = {
         </h2>
         <p
           style={{
-            margin: '0 0 28px 0',
-            fontSize: '17px',
-            lineHeight: 1.7,
-            color: 'rgba(255, 255, 255, 0.85)',
+            margin: '0 0 32px 0',
+            fontSize: '18px',
+            lineHeight: 1.8,
+            color: 'rgba(255, 255, 255, 0.9)',
           }}
         >
           Advanced refraction with multi-layer depth effects and edge-aware rendering. The optimal
-          balance of quality and performance.
+          balance of quality and performance for production applications.
         </p>
         <div
           style={{

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

@@ -175,9 +175,7 @@ export const BackgroundWrapper = ({
         height: height,
         width: width,
         backgroundColor: !bgImage ? '#1a1a2e' : undefined, // Fallback color if no image
-        background: bgImage
-          ? `url(${bgImage}) ${finalOverlayOpacity && ',' + finalOverlayColor}`
-          : undefined,
+        background: bgImage ? `url(${bgImage})` : undefined,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         backgroundAttachment: 'fixed',
@@ -189,8 +187,32 @@ export const BackgroundWrapper = ({
         ...style,
       }}
     >
-     
-      {children}
+      {/* Overlay */}
+      {(finalOverlayOpacity > 0 || overlay) && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: finalOverlayColor,
+            opacity: finalOverlayOpacity,
+            borderRadius: borderRadius,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'white',
+        }}
+      >
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/Button/Button.tsx

@@ -3,6 +3,7 @@ import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
+import { Icon, type PhosphorIconsType } from '../Icon/Icon';
 import { BUTTON } from '../../lib/constants/components';
 
 export type ButtonAsProp = {
@@ -13,7 +14,7 @@ export type ButtonAsProp = {
 };
 
 export const Button = React.memo(
-  forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
+  forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps & ButtonAsProp>(
     (
       {
         label,
@@ -25,6 +26,8 @@ export const Button = React.memo(
         loading = false,
         loadingText,
         icon,
+        iconName,
+        iconSize = 'sm',
         iconPosition = 'start',
         iconOnly = false,
         rounded = false,
@@ -35,6 +38,8 @@ export const Button = React.memo(
         type = 'button',
         className = '',
         as: Component = 'button',
+        href,
+        target,
         glass,
         onHover,
         onFocus,
@@ -51,6 +56,18 @@ export const Button = React.memo(
     ) => {
       const isDisabled = disabled || loading;
 
+      // Determine if we should render as a link
+      const shouldRenderAsLink = Boolean(href && !isDisabled);
+
+      // Resolve icon element - support both icon (ReactNode) and iconName (string)
+      const iconElement = useMemo(() => {
+        if (loading) return null;
+        if (iconName) {
+          return <Icon name={iconName as PhosphorIconsType} size={iconSize} />;
+        }
+        return icon;
+      }, [icon, iconName, iconSize, loading]);
+
       const { generateButtonClass, handleClick } = useButton({
         variant,
         size,
@@ -85,21 +102,21 @@ export const Button = React.memo(
 
       // Handle click with loading check
       const handleClickEvent = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
+        (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (isDisabled) {
             event.preventDefault();
             return;
           }
-          onClick?.(event);
+          onClick?.(event as React.MouseEvent<HTMLButtonElement>);
         },
         [isDisabled, onClick]
       );
 
       // Handle hover
       const handleMouseEnter = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
+        (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (!isDisabled) {
-            onHover?.(event);
+            onHover?.(event as React.MouseEvent<HTMLButtonElement>);
           }
         },
         [isDisabled, onHover]
@@ -107,9 +124,9 @@ export const Button = React.memo(
 
       // Handle focus
       const handleFocusEvent = useCallback(
-        (event: React.FocusEvent<HTMLButtonElement>) => {
+        (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (!isDisabled) {
-            onFocus?.(event);
+            onFocus?.(event as React.FocusEvent<HTMLButtonElement>);
           }
         },
         [isDisabled, onFocus]
@@ -117,9 +134,9 @@ export const Button = React.memo(
 
       // Handle blur
       const handleBlurEvent = useCallback(
-        (event: React.FocusEvent<HTMLButtonElement>) => {
+        (event: React.FocusEvent<HTMLButtonElement | HTMLAnchorElement>) => {
           if (!isDisabled) {
-            onBlur?.(event);
+            onBlur?.(event as React.FocusEvent<HTMLButtonElement>);
           }
         },
         [isDisabled, onBlur]
@@ -141,9 +158,9 @@ export const Button = React.memo(
 
       // Button content with icon positioning
       const buttonContent = useMemo(() => {
-        const iconElement = icon && !loading && (
+        const iconSpan = iconElement && (
           <span className={BUTTON.ICON_CLASS} aria-hidden="true">
-            {icon}
+            {iconElement}
           </span>
         );
 
@@ -169,7 +186,7 @@ export const Button = React.memo(
             <>
               {labelElement}
               {spinnerElement}
-              {iconElement}
+              {iconSpan}
             </>
           );
         }
@@ -177,23 +194,23 @@ export const Button = React.memo(
         return (
           <>
             {spinnerElement}
-            {iconElement}
+            {iconSpan}
             {labelElement}
           </>
         );
-      }, [icon, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
+      }, [iconElement, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
 
       // Button props
       const buttonProps = useMemo(
         () => ({
           ref,
           className: buttonClass,
-          type: Component === 'button' ? type : undefined,
+          type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
           onClick: handleClickEvent,
           onMouseEnter: onHover ? handleMouseEnter : undefined,
           onFocus: onFocus ? handleFocusEvent : undefined,
           onBlur: onBlur ? handleBlurEvent : undefined,
-          disabled: isDisabled && Component === 'button',
+          disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
           'aria-disabled': isDisabled,
           'aria-busy': loading,
           'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
@@ -228,8 +245,36 @@ export const Button = React.memo(
         ]
       );
 
+      // Render as anchor if href is provided
+      if (shouldRenderAsLink) {
+        const { ref: _, ...buttonPropsWithoutRef } = buttonProps;
+        const anchorButtonProps = {
+          ...buttonPropsWithoutRef,
+          type: undefined, 
+          disabled: undefined,
+        };
+        const anchorElement = (
+          <a {...anchorButtonProps} ref={ref as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
+            {buttonContent}
+          </a>
+        );
+
+        if (glass) {
+          const defaultGlassProps = {
+            displacementScale: 20,
+            blurAmount: 0,
+            saturation: 200,
+            elasticity: 0,
+          };
+          const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+          return <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass>;
+        }
+
+        return anchorElement;
+      }
+
+      // Default button rendering
       if (glass) {
-        // Default glass settings for buttons
         const defaultGlassProps = {
           displacementScale: 20,
           blurAmount: 0,