@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Navigation/SideMenu/SideMenu.stories.tsx

@@ -607,3 +607,343 @@ export const InteractiveDemo: Story = {
     onToggle: fn(),
   },
 };
+
+// Glass Morphism Effect Stories - Professional Showcase
+
+/**
+ * Background wrapper component for consistent glass effect demonstrations
+ */
+interface BackgroundWrapperProps {
+  children: React.ReactNode;
+  backgroundImage: string;
+  height?: string;
+  padding?: string;
+  overlay?: boolean;
+}
+
+const BackgroundWrapper = ({
+  children,
+  backgroundImage,
+  height = '90vh',
+  padding = '60px 40px',
+  overlay = false,
+}: BackgroundWrapperProps) => (
+  <div
+    style={{
+      position: 'relative',
+      width: '100%',
+      minHeight: height,
+      background: `url(${backgroundImage})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundAttachment: 'fixed',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      padding: padding,
+      borderRadius: '12px',
+      gap: '3rem',
+    }}
+  >
+    {overlay && (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.3)',
+          borderRadius: '12px',
+        }}
+      />
+    )}
+    {children}
+  </div>
+);
+
+/**
+ * Glass Effect - Default
+ *
+ * Demonstrates the SideMenu component with default glass morphism settings.
+ * The glass effect provides a modern, frosted appearance perfect for sidebar navigation.
+ */
+export const Glass: Story = {
+  render: () => (
+    <BackgroundWrapper
+      backgroundImage="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop"
+      overlay
+    >
+      <div style={{ position: 'relative', width: '300px' }}>
+        <SideMenu title="Navigation" glass>
+          <SideMenuList>
+            <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+              Home
+            </SideMenuItem>
+            <SideMenuItem href="/explore" icon={<Icon name="Compass" size="sm" />}>
+              Explore
+            </SideMenuItem>
+            <SideMenuItem href="/services" icon={<Icon name="Briefcase" size="sm" />}>
+              Services
+            </SideMenuItem>
+            <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+              Contact
+            </SideMenuItem>
+          </SideMenuList>
+          <SideMenuList>
+            <SideMenuItem href="/settings" icon={<Icon name="Gear" size="sm" />}>
+              Settings
+            </SideMenuItem>
+          </SideMenuList>
+        </SideMenu>
+      </div>
+      <div style={{ position: 'relative', zIndex: 1, flex: 1, maxWidth: '600px' }}>
+        <h2
+          style={{
+            color: 'white',
+            fontSize: '32px',
+            fontWeight: 600,
+            marginBottom: '16px',
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          Glass SideMenu
+        </h2>
+        <p
+          style={{
+            color: 'rgba(255,255,255,0.9)',
+            fontSize: '18px',
+            lineHeight: 1.6,
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          A modern sidebar navigation with glassmorphism effect. Perfect for dashboards, admin
+          panels, and application interfaces that require elegant navigation.
+        </p>
+      </div>
+    </BackgroundWrapper>
+  ),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Basic glass morphism effect with default settings. The sidebar maintains excellent readability while creating a beautiful frosted glass aesthetic.',
+      },
+    },
+  },
+};
+
+/**
+ * Glass with Custom Properties
+ *
+ * Demonstrates advanced customization of the glass effect with various
+ * displacement, blur, and corner radius settings.
+ */
+export const GlassCustom: Story = {
+  render: () => (
+    <BackgroundWrapper
+      backgroundImage="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop"
+      overlay
+    >
+      <div style={{ position: 'relative', width: '320px' }}>
+        <SideMenu
+          title="Nature Explorer"
+          glass={{
+            displacementScale: 70,
+            blurAmount: 2,
+            cornerRadius: 12,
+            mode: 'shader',
+          }}
+        >
+          <SideMenuList>
+            <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+              Home
+            </SideMenuItem>
+            <SideMenuItem href="/trails" icon={<Icon name="MapPin" size="sm" />}>
+              Trails
+            </SideMenuItem>
+            <SideMenuItem href="/wildlife" icon={<Icon name="Sparkle" size="sm" />}>
+              Wildlife
+            </SideMenuItem>
+            <SideMenuItem href="/camping" icon={<Icon name="Tent" size="sm" />}>
+              Camping
+            </SideMenuItem>
+          </SideMenuList>
+          <SideMenuList>
+            <SideMenuItem href="/guides" icon={<Icon name="Book" size="sm" />}>
+              Guides
+            </SideMenuItem>
+            <SideMenuItem href="/gear" icon={<Icon name="Backpack" size="sm" />}>
+              Gear List
+            </SideMenuItem>
+          </SideMenuList>
+        </SideMenu>
+      </div>
+      <div style={{ position: 'relative', zIndex: 1, flex: 1, maxWidth: '600px' }}>
+        <h2
+          style={{
+            color: 'white',
+            fontSize: '32px',
+            fontWeight: 600,
+            marginBottom: '16px',
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          Custom Glass Properties
+        </h2>
+        <p
+          style={{
+            color: 'rgba(255,255,255,0.9)',
+            fontSize: '18px',
+            lineHeight: 1.6,
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          Enhanced glass effect with custom displacement, blur, and corner radius. Perfect for
+          creating unique visual experiences tailored to your brand.
+        </p>
+      </div>
+    </BackgroundWrapper>
+  ),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Customized glass effect with increased displacement and blur for a more pronounced visual impact. Demonstrates the flexibility of the glass morphism system.',
+      },
+    },
+  },
+};
+
+/**
+ * Glass Theme Variations
+ *
+ * A comprehensive showcase of glass sidebar across different themed
+ * backgrounds, demonstrating versatility and adaptability.
+ */
+export const GlassThemeShowcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      {/* Ocean Theme */}
+      <BackgroundWrapper
+        backgroundImage="https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=2940&auto=format&fit=crop"
+        height="70vh"
+      >
+        <div style={{ position: 'relative', width: '300px' }}>
+          <SideMenu title="Ocean Explorer" glass>
+            <SideMenuList>
+              <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+                Home
+              </SideMenuItem>
+              <SideMenuItem href="/beaches" icon={<Icon name="Sun" size="sm" />}>
+                Beaches
+              </SideMenuItem>
+              <SideMenuItem href="/diving" icon={<Icon name="Waves" size="sm" />}>
+                Diving
+              </SideMenuItem>
+            </SideMenuList>
+          </SideMenu>
+        </div>
+        <div style={{ position: 'relative', flex: 1 }}>
+          <h3
+            style={{
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 600,
+              textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+            }}
+          >
+            Ocean & Travel Theme
+          </h3>
+        </div>
+      </BackgroundWrapper>
+
+      {/* Urban Theme */}
+      <BackgroundWrapper
+        backgroundImage="https://images.unsplash.com/photo-1514565131-fce0801e5785?q=80&w=2940&auto=format&fit=crop"
+        height="70vh"
+      >
+        <div style={{ position: 'relative', width: '300px' }}>
+          <SideMenu title="Admin Panel" glass>
+            <SideMenuList>
+              <SideMenuItem href="/dashboard" icon={<Icon name="ChartBar" size="sm" />} active>
+                Dashboard
+              </SideMenuItem>
+              <SideMenuItem href="/analytics" icon={<Icon name="TrendUp" size="sm" />}>
+                Analytics
+              </SideMenuItem>
+              <SideMenuItem href="/users" icon={<Icon name="Users" size="sm" />}>
+                Users
+              </SideMenuItem>
+            </SideMenuList>
+          </SideMenu>
+        </div>
+        <div style={{ position: 'relative', flex: 1 }}>
+          <h3
+            style={{
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 600,
+              textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+            }}
+          >
+            Modern & Professional Theme
+          </h3>
+        </div>
+      </BackgroundWrapper>
+
+      {/* Sunset Theme */}
+      <BackgroundWrapper
+        backgroundImage="https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?q=80&w=2940&auto=format&fit=crop"
+        height="70vh"
+      >
+        <div style={{ position: 'relative', width: '320px' }}>
+          <SideMenu
+            title="Travel Hub"
+            glass={{
+              displacementScale: 60,
+              blurAmount: 1.8,
+              cornerRadius: 16,
+              mode: 'shader',
+            }}
+          >
+            <SideMenuList>
+              <SideMenuItem href="/home" icon={<Icon name="House" size="sm" />} active>
+                Home
+              </SideMenuItem>
+              <SideMenuItem href="/destinations" icon={<Icon name="MapPin" size="sm" />}>
+                Destinations
+              </SideMenuItem>
+              <SideMenuItem href="/bookings" icon={<Icon name="Calendar" size="sm" />}>
+                Bookings
+              </SideMenuItem>
+            </SideMenuList>
+          </SideMenu>
+        </div>
+        <div style={{ position: 'relative', flex: 1 }}>
+          <h3
+            style={{
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 600,
+              textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+            }}
+          >
+            Warm & Inviting Theme
+          </h3>
+        </div>
+      </BackgroundWrapper>
+    </div>
+  ),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'A comprehensive showcase demonstrating how glass sidebar adapts to different themes and color palettes. Each example represents a different use case and aesthetic.',
+      },
+    },
+  },
+};

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -3,6 +3,8 @@ import { SideMenuProps } from '../../../lib/types/components';
 import { useSideMenu } from '../../../lib/composables/useSideMenu';
 import { SIDE_MENU } from '../../../lib/constants/components';
 import { Icon } from '../../Icon';
+import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
+import { log } from 'console';
 
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
@@ -28,9 +30,11 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       onToggle,
       collapsible = true,
       className = '',
+      style,
       disabled = false,
       toggleIcon,
       id,
+      glass,
     },
     ref
   ) => {
@@ -54,8 +58,8 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
     // Default toggle icon using Atomix Icon component
     const defaultToggleIcon = <Icon name="CaretRight" size="xs" />;
 
-    return (
-      <div ref={ref} className={sideMenuClass} id={id}>
+    const sideMenuContent = (
+      <>
         {title && collapsible && (
           <div
             className="c-side-menu__toggler"
@@ -89,6 +93,29 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
             {children}
           </div>
         </div>
+      </>
+    );
+
+    if (glass) {
+      const defaultGlassProps = {
+        displacementScale: 70,
+        blurAmount: 2,
+        cornerRadius: 12,
+        mode: 'shader' as const,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return (
+        <AtomixGlass {...glassProps}>
+          <div ref={ref} className={sideMenuClass + ' c-side-menu--glass'} id={id} style={style}>
+            {sideMenuContent}
+          </div>
+        </AtomixGlass>
+      );
+    }
+
+    return (
+      <div ref={ref} className={sideMenuClass} id={id} style={style}>
+        {sideMenuContent}
       </div>
     );
   }

package/src/components/Pagination/Pagination.stories.tsx

@@ -201,13 +201,13 @@ export const Glass = {
     size: 'md',
     glass: true,
   },
-  render: (args) => {
+  render: (args: any) => {
     const [currentPage, setCurrentPage] = React.useState(args.currentPage);
     const handlePageChange = (page: number) => {
       setCurrentPage(page);
       args.onPageChange?.(page);
     };
-    
+
     return (
       <div
         style={{
@@ -249,17 +249,18 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => {
+  render: (args: any) => {
     const [currentPage, setCurrentPage] = React.useState(args.currentPage);
     const handlePageChange = (page: number) => {
       setCurrentPage(page);
       args.onPageChange?.(page);
     };
-    
+
     return (
       <div
         style={{
-          background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+          background:
+            'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           padding: '2rem',
@@ -271,7 +272,13 @@ export const GlassCustom = {
         }}
       >
         <div style={{ textAlign: 'center' }}>
-          <h3 style={{ color: 'white', marginBottom: '2rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          <h3
+            style={{
+              color: 'white',
+              marginBottom: '2rem',
+              textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+            }}
+          >
             Custom Glass Pagination
           </h3>
           <Pagination {...args} currentPage={currentPage} onPageChange={handlePageChange} />

package/src/components/Pagination/Pagination.tsx

@@ -61,6 +61,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   showPrevNextButtons = PAGINATION_DEFAULTS.showPrevNextButtons,
   size = PAGINATION_DEFAULTS.size,
   className = '',
+  style,
   ariaLabel = 'Pagination',
   glass,
 }) => {
@@ -77,7 +78,11 @@ export const Pagination: React.FC<PaginationProps> = ({
   }
 
   const paginationContent = (
-    <nav className={`c-pagination c-pagination--${size} ${className}`} aria-label={ariaLabel}>
+    <nav
+      className={`c-pagination c-pagination--${size} ${className}`}
+      style={style}
+      aria-label={ariaLabel}
+    >
       <ul className="c-pagination__items">
         {showFirstLastButtons && (
           <PaginationNavButton
@@ -169,11 +174,7 @@ export const Pagination: React.FC<PaginationProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {paginationContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{paginationContent}</AtomixGlass>;
   }
 
   return paginationContent;

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -111,7 +111,8 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
 
     const link = document.createElement('a');
     link.href = currentImage.src;
-    link.download = currentImage.title || `image-${currentIndex + 1}`;
+    const sanitizedTitle = (currentImage.title || `image-${currentIndex + 1}`).replace(/[^a-zA-Z0-9.-]/g, '_');
+    link.download = sanitizedTitle;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);

package/src/components/Popover/Popover.stories.tsx

@@ -155,12 +155,14 @@ GlassPopover.args = {
   glass: true,
 };
 GlassPopover.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -182,12 +184,14 @@ GlassPopoverCustom.args = {
   },
 };
 GlassPopoverCustom.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -204,12 +208,14 @@ GlassPopoverHover.args = {
   glass: true,
 };
 GlassPopoverHover.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -225,12 +231,14 @@ GlassPopoverPositions.args = {
   defaultOpen: true,
 };
 GlassPopoverPositions.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),

package/src/components/Popover/Popover.tsx

@@ -28,6 +28,7 @@ export const Popover: React.FC<PopoverProps> = ({
   position = 'top',
   trigger = 'click',
   className = '',
+  style,
   delay = 0,
   offset = 12,
   defaultOpen = false,
@@ -72,6 +73,7 @@ export const Popover: React.FC<PopoverProps> = ({
           <div
             ref={popoverRef}
             className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${glass ? 'c-popover--glass' : ''} ${className}`}
+            style={style}
             id={popoverId}
             role="tooltip"
             aria-hidden={!isOpen}
@@ -88,7 +90,8 @@ export const Popover: React.FC<PopoverProps> = ({
                   mode: 'shader' as const,
                 };
 
-                const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+                const glassProps =
+                  glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
                 return (
                   <AtomixGlass {...glassProps}>

package/src/components/ProductReview/ProductReview.tsx

@@ -43,6 +43,11 @@ export interface ProductReviewProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -57,6 +62,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
   ratingColor = 'warning' as ThemeColor,
   onSubmit,
   className = '',
+  style,
 }) => {
   const [rating, setRating] = useState<number>(initialRating);
   const [comment, setComment] = useState<string>('');
@@ -90,7 +96,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
 
   if (submitted) {
     return (
-      <div className={containerClasses} ref={reviewRef}>
+      <div className={containerClasses} ref={reviewRef} style={style}>
         <div className="c-product-review__success">
           <h3>Thank you for your review!</h3>
           <p>Your feedback helps us improve our products.</p>
@@ -109,7 +115,7 @@ export const ProductReview: React.FC<ProductReviewProps> = ({
   }
 
   return (
-    <div className={containerClasses} ref={reviewRef}>
+    <div className={containerClasses} ref={reviewRef} style={style}>
       <div className="c-product-review__header">
         <h3 className="c-product-review__title">Review {productName}</h3>
         {productImage && (