@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Hook for managing modal state
@@ -89,6 +90,7 @@ export const Modal: React.FC<ModalProps> = ({
   className = '',
   closeButton = true,
   footer,
+  glass,
   ...props
 }) => {
   const modalRef = useRef<HTMLDivElement>(null);
@@ -134,11 +136,50 @@ export const Modal: React.FC<ModalProps> = ({
     'c-modal',
     isOpenState ? MODAL.CLASSES.IS_OPEN : '',
     size ? `c-modal--${size}` : '',
+    glass ? 'c-modal--glass' : '',
     className,
   ]
     .filter(Boolean)
     .join(' ');
 
+  const modalContent = (
+    <div className="c-modal__content">
+      {(title || closeButton) && (
+        <div className="c-modal__header">
+          <div className="c-modal__header-content">
+            {title && <h3 className="c-modal__title">{title}</h3>}
+            {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+          </div>
+          {closeButton && (
+            <button
+              type="button"
+              className="c-modal__close c-btn js-modal-close"
+              onClick={close}
+              aria-label="Close modal"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                  fill="#141414"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className="c-modal__body">{children}</div>
+
+      {footer && <div className="c-modal__footer">{footer}</div>}
+    </div>
+  );
+
   return (
     <div
       ref={modalRef}
@@ -151,41 +192,29 @@ export const Modal: React.FC<ModalProps> = ({
     >
       <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
       <div ref={dialogRef} className="c-modal__dialog">
-        <div className="c-modal__content">
-          {(title || closeButton) && (
-            <div className="c-modal__header">
-              <div className="c-modal__header-content">
-                {title && <h3 className="c-modal__title">{title}</h3>}
-                {subtitle && <p className="c-modal__sub">{subtitle}</p>}
-              </div>
-              {closeButton && (
-                <button
-                  type="button"
-                  className="c-modal__close c-btn js-modal-close"
-                  onClick={close}
-                  aria-label="Close modal"
-                >
-                  <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
-                      fill="#141414"
-                    />
-                  </svg>
-                </button>
-              )}
-            </div>
-          )}
-
-          <div className="c-modal__body">{children}</div>
-
-          {footer && <div className="c-modal__footer">{footer}</div>}
-        </div>
+        {glass ? (
+          // Default glass settings for modals
+          (() => {
+            const defaultGlassProps = {
+              displacementScale: 100,
+              blurAmount: 2,
+              saturation: 180,
+              aberrationIntensity: 1,
+              cornerRadius: 16,
+              mode: 'shader' as const,
+            };
+
+            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+            return (
+              <AtomixGlass {...glassProps}>
+                {modalContent}
+              </AtomixGlass>
+            );
+          })()
+        ) : (
+          modalContent
+        )}
       </div>
     </div>
   );

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

@@ -42,6 +42,10 @@ export default {
       control: 'text',
       description: 'Custom class for the pagination container',
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
   parameters: {
     docs: {
@@ -186,3 +190,100 @@ CustomStyling.parameters = {
     },
   },
 };
+
+export const Glass = {
+  args: {
+    currentPage: 5,
+    totalPages: 15,
+    siblingCount: 1,
+    showFirstLastButtons: true,
+    showPrevNextButtons: true,
+    size: 'md',
+    glass: true,
+  },
+  render: (args) => {
+    const [currentPage, setCurrentPage] = React.useState(args.currentPage);
+    const handlePageChange = (page: number) => {
+      setCurrentPage(page);
+      args.onPageChange?.(page);
+    };
+    
+    return (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          padding: '2rem',
+          borderRadius: '12px',
+          minHeight: '200px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Pagination {...args} currentPage={currentPage} onPageChange={handlePageChange} />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with glass morphism effect enabled against a gradient background.',
+      },
+    },
+  },
+};
+
+export const GlassCustom = {
+  args: {
+    currentPage: 5,
+    totalPages: 15,
+    siblingCount: 2,
+    showFirstLastButtons: true,
+    showPrevNextButtons: true,
+    size: 'lg',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => {
+    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)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          padding: '2rem',
+          borderRadius: '12px',
+          minHeight: '300px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div style={{ textAlign: 'center' }}>
+          <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} />
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pagination with custom glass morphism settings against a scenic background.',
+      },
+    },
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import { PaginationProps } from '../../lib/types/components';
 import { usePagination, DOTS } from '../../lib/composables/usePagination';
 import { PAGINATION_DEFAULTS } from '../../lib/constants/components';
 import { Icon, IconProps } from '../Icon/Icon';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 // @TODO: Add Search functionality for pagination
 
@@ -61,6 +62,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   size = PAGINATION_DEFAULTS.size,
   className = '',
   ariaLabel = 'Pagination',
+  glass,
 }) => {
   const { paginationRange, goToPage, nextPage, prevPage, firstPage, lastPage } = usePagination({
     currentPage,
@@ -74,7 +76,7 @@ export const Pagination: React.FC<PaginationProps> = ({
     return null;
   }
 
-  return (
+  const paginationContent = (
     <nav className={`c-pagination c-pagination--${size} ${className}`} aria-label={ariaLabel}>
       <ul className="c-pagination__items">
         {showFirstLastButtons && (
@@ -153,6 +155,28 @@ export const Pagination: React.FC<PaginationProps> = ({
       </ul>
     </nav>
   );
+
+  if (glass) {
+    // Default glass settings for pagination
+    const defaultGlassProps = {
+      displacementScale: 60,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.5,
+      cornerRadius: 8,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {paginationContent}
+      </AtomixGlass>
+    );
+  }
+
+  return paginationContent;
 };
 
 export type { PaginationProps };

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

@@ -42,6 +42,10 @@ export default {
     className: {
       control: { type: 'text' },
     },
+    glass: {
+      control: { type: 'boolean' },
+      description: 'Enable glass morphism effect',
+    },
   },
 } as Meta<typeof Popover>;
 
@@ -141,3 +145,93 @@ AutoPosition.args = {
   position: 'auto',
   defaultOpen: true, // Open by default to showcase auto-positioning
 };
+
+/**
+ * Glass morphism popover example.
+ */
+export const GlassPopover = Template.bind({});
+GlassPopover.args = {
+  ...Default.args,
+  glass: true,
+};
+GlassPopover.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass popover with custom settings.
+ */
+export const GlassPopoverCustom = Template.bind({});
+GlassPopoverCustom.args = {
+  ...Default.args,
+  glass: {
+    displacementScale: 80,
+    blurAmount: 2,
+    saturation: 200,
+    aberrationIntensity: 1,
+    cornerRadius: 16,
+    mode: 'polar',
+  },
+};
+GlassPopoverCustom.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass popover with hover trigger.
+ */
+export const GlassPopoverHover = Template.bind({});
+GlassPopoverHover.args = {
+  ...Default.args,
+  trigger: 'hover',
+  delay: 200,
+  glass: true,
+};
+GlassPopoverHover.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass popover with different positions.
+ */
+export const GlassPopoverPositions = Template.bind({});
+GlassPopoverPositions.args = {
+  ...Default.args,
+  glass: true,
+  defaultOpen: true,
+};
+GlassPopoverPositions.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];

package/src/components/Popover/Popover.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, forwardRef, createContext } from 'react';
 import { createPortal } from 'react-dom';
 import { POPOVER } from '../../lib/constants/components';
 import { usePopover } from '../../lib/composables/usePopover';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
 
 // Context to share popover state between components
@@ -36,6 +37,7 @@ export const Popover: React.FC<PopoverProps> = ({
   closeOnEscape = true,
   id,
   children,
+  glass,
 }) => {
   const {
     isOpen,
@@ -69,14 +71,38 @@ export const Popover: React.FC<PopoverProps> = ({
         createPortal(
           <div
             ref={popoverRef}
-            className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${className}`}
+            className={`c-popover c-popover--${currentPosition} ${isOpen ? POPOVER.CLASSES.IS_OPEN : ''} ${glass ? 'c-popover--glass' : ''} ${className}`}
             id={popoverId}
             role="tooltip"
             aria-hidden={!isOpen}
           >
-            <div className="c-popover__content">
-              <div className="c-popover__content-inner">{content}</div>
-            </div>
+            {glass ? (
+              // Default glass settings for popovers
+              (() => {
+                const defaultGlassProps = {
+                  displacementScale: 50,
+                  blurAmount: 1,
+                  saturation: 160,
+                  aberrationIntensity: 0.5,
+                  cornerRadius: 8,
+                  mode: 'shader' as const,
+                };
+
+                const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+                return (
+                  <AtomixGlass {...glassProps}>
+                    <div className="c-popover__content">
+                      <div className="c-popover__content-inner">{content}</div>
+                    </div>
+                  </AtomixGlass>
+                );
+              })()
+            ) : (
+              <div className="c-popover__content">
+                <div className="c-popover__content-inner">{content}</div>
+              </div>
+            )}
             <div ref={arrowRef} className="c-popover__arrow"></div>
           </div>,
           document.body

package/src/components/Rating/Rating.stories.tsx

@@ -21,6 +21,10 @@ export default {
         options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
       },
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
   parameters: {
     docs: {
@@ -107,3 +111,111 @@ CustomMaxValue.args = {
   readOnly: true,
   size: 'md',
 };
+
+export const Glass = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Rating {...args} />
+    </div>
+  ),
+};
+
+export const GlassInteractive = {
+  args: {
+    value: 3,
+    maxValue: 5,
+    allowHalf: true,
+    readOnly: false,
+    size: 'md',
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ textAlign: 'center' }}>
+        <h3 style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          Interactive Glass Rating
+        </h3>
+        <Rating {...args} />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassCustom = {
+  args: {
+    value: 4.5,
+    maxValue: 5,
+    allowHalf: true,
+    readOnly: true,
+    size: 'lg',
+    color: 'warning',
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <style>
+        {`
+          @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        `}
+      </style>
+      <div style={{ textAlign: 'center' }}>
+        <h3 style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+          Custom Glass Rating
+        </h3>
+        <Rating {...args} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Rating/Rating.tsx

@@ -3,6 +3,7 @@ import { THEME_COLORS, SIZES, RATING } from '../../lib/constants/components';
 import { useRating } from '../../lib/composables/useRating';
 import type { RatingProps } from '../../lib/types/components';
 import useForkRef from '../../lib/utils/useForkRef';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Rating component for displaying and collecting star ratings
@@ -34,6 +35,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
       label,
       id,
       useVanillaJS = false,
+      glass,
       ...restProps
     },
     ref
@@ -262,7 +264,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
       return stars;
     };
 
-    return (
+    const ratingContent = (
       <div
         className={ratingClasses}
         ref={useForkRef(internalRef, ref)}
@@ -276,6 +278,28 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         {renderStars()}
       </div>
     );
+
+    if (glass) {
+      // Default glass settings for ratings
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 160,
+        aberrationIntensity: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return (
+        <AtomixGlass {...glassProps}>
+          {ratingContent}
+        </AtomixGlass>
+      );
+    }
+
+    return ratingContent;
   }
 );
 

package/src/components/SectionIntro/SectionIntro.tsx

@@ -164,17 +164,15 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
   return (
     <div className={sectionIntroClasses} ref={sectionIntroRef}>
       {renderBackground()}
-      <div className="c-sectionintro__container o-container">
-        {label && <div className="c-sectionintro__label">{label}</div>}
-        <h2 className="c-sectionintro__title">{title}</h2>
-        {text && <div className="c-sectionintro__text">{text}</div>}
-        {actions && <div className="c-sectionintro__actions">{actions}</div>}
-        {imageSrc && (
-          <div className="c-sectionintro__image-wrapper">
-            <img src={imageSrc} alt={imageAlt} className="c-sectionintro__image" />
-          </div>
-        )}
-      </div>
+      {label && <div className="c-sectionintro__label">{label}</div>}
+      <h2 className="c-sectionintro__title">{title}</h2>
+      {text && <div className="c-sectionintro__text">{text}</div>}
+      {actions && <div className="c-sectionintro__actions">{actions}</div>}
+      {imageSrc && (
+        <div className="c-sectionintro__image-wrapper">
+          <img src={imageSrc} alt={imageAlt} className="c-sectionintro__image" />
+        </div>
+      )}
     </div>
   );
 };