@shohojdhara/atomix 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo, useRef, useEffect } from 'react';
-import type { AtomixGlassProps, GlassSize } from '../../lib/types/components';
+import React, { useMemo, useRef } from 'react';
+import type { AtomixGlassProps } from '../../lib/types/components';
 import { ATOMIX_GLASS } from '../../lib/constants/components';
 import { AtomixGlassContainer } from './AtomixGlassContainer';
 import { useAtomixGlass } from '../../lib/composables/useAtomixGlass';
@@ -155,20 +155,48 @@ export function AtomixGlass({
     style,
   });
 
-  // Calculate isOverLight independently from overLightConfig to prevent displacement changes on hover
-  // overLightConfig recalculates with hover/active states, but displacement should remain stable
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const isOverLight = useMemo(() => overLightConfig?.isOverLight, [overLight]);
+  const isOverLight = useMemo(() => overLightConfig.isOverLight, [overLightConfig.isOverLight]);
 
   const shouldRenderOverLightLayers = withOverLightLayers && isOverLight;
 
+  // ── Layout hoisting ──────────────────────────────────────────────────
+  // When position is fixed/sticky the layout props must live on the ROOT
+  // `.c-atomix-glass` element so that every decorative layer (borders,
+  // backgrounds, hover effects) stays in the same stacking context.
+
+  // Extract zIndex from style so it becomes the base for ALL internal
+  // layers via --atomix-glass-base-z-index.  It must NOT be applied as a
+  // real z-index on the root element — that would break the glass effect.
+  const { zIndex: customZIndex, ...restStyle } = style;
+  const isFixedOrSticky = restStyle.position === 'fixed' || restStyle.position === 'sticky';
+
+  const rootLayoutStyle = useMemo<React.CSSProperties>(() => {
+    if (!isFixedOrSticky) return {};
+    const { position: p, top: t, left: l, right: r, bottom: b } = restStyle;
+    return {
+      ...(p && { position: p }),
+      ...(t !== undefined && { top: t }),
+      ...(l !== undefined && { left: l }),
+      ...(r !== undefined && { right: r }),
+      ...(b !== undefined && { bottom: b }),
+    };
+  }, [isFixedOrSticky, restStyle]);
+
   // Calculate base style with transforms
-  const baseStyle = {
-    ...style,
-    ...(!effectiveWithoutEffects && {
-      transform: transformStyle,
-    }),
-  };
+  // When layout is hoisted to the root, strip those props from the container
+  const baseStyle = useMemo(() => {
+    if (isFixedOrSticky) {
+      const { position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle } = restStyle;
+      return {
+        ...visualStyle,
+        ...(!effectiveWithoutEffects && { transform: transformStyle }),
+      };
+    }
+    return {
+      ...restStyle,
+      ...(!effectiveWithoutEffects && { transform: transformStyle }),
+    };
+  }, [isFixedOrSticky, restStyle, effectiveWithoutEffects, transformStyle]);
 
   // Build className with state modifiers
   const componentClassName = [
@@ -181,14 +209,17 @@ export function AtomixGlass({
     .filter(Boolean)
     .join(' ');
 
-  // Calculate position and size styles
+  // Calculate position and size styles for internal layers
+  // When root is fixed/sticky, internal layers use absolute (relative to root)
   const positionStyles = useMemo(
     () => ({
-      position: (style.position || 'absolute') as React.CSSProperties['position'],
-      top: style.top || 0,
-      left: style.left || 0,
+      position: (isFixedOrSticky
+        ? 'absolute'
+        : restStyle.position || 'absolute') as React.CSSProperties['position'],
+      top: isFixedOrSticky ? 0 : restStyle.top || 0,
+      left: isFixedOrSticky ? 0 : restStyle.left || 0,
     }),
-    [style.position, style.top, style.left]
+    [isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left]
   );
 
   const adjustedSize = useMemo(() => {
@@ -205,14 +236,14 @@ export function AtomixGlass({
     };
 
     return {
-      width: resolveSize(width, style.width, glassSize.width),
-      height: resolveSize(height, style.height, glassSize.height),
+      width: resolveSize(width, restStyle.width, glassSize.width),
+      height: resolveSize(height, restStyle.height, glassSize.height),
     };
   }, [
     width,
     height,
-    style.width,
-    style.height,
+    restStyle.width,
+    restStyle.height,
     positionStyles.position,
     glassSize.width,
     glassSize.height,
@@ -304,6 +335,7 @@ export function AtomixGlass({
     const configBorderOpacity = overLightConfig?.borderOpacity ?? 1;
 
     return {
+      ...(customZIndex !== undefined && { '--atomix-glass-base-z-index': customZIndex }),
       '--atomix-glass-radius': `${effectiveBorderRadius}px`,
       '--atomix-glass-transform': transformStyle || 'none',
       '--atomix-glass-position': positionStyles.position,
@@ -335,6 +367,9 @@ export function AtomixGlass({
       '--atomix-glass-overlay-gradient': isOverLight
         ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)`
         : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
+      '--atomix-glass-overlay-highlight-opacity':
+        opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
+      '--atomix-glass-overlay-highlight-bg': `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`,
     } as React.CSSProperties;
   }, [
     gradientValues,
@@ -345,6 +380,7 @@ export function AtomixGlass({
     adjustedSize,
     isOverLight,
     overLightConfig.borderOpacity,
+    customZIndex,
   ]);
 
   // Helper function to render background layers
@@ -361,13 +397,6 @@ export function AtomixGlass({
       ]
         .filter(Boolean)
         .join(' ')}
-      style={{
-        ...positionStyles,
-        height: adjustedSize.height,
-        width: adjustedSize.width,
-        borderRadius: `${effectiveBorderRadius}px`,
-        transform: baseStyle.transform,
-      }}
     />
   );
 
@@ -375,7 +404,7 @@ export function AtomixGlass({
     <div
       {...rest}
       className={componentClassName}
-      style={glassVars}
+      style={{ ...glassVars }}
       role={role || (onClick ? 'button' : undefined)}
       tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
       aria-label={ariaLabel}
@@ -388,7 +417,7 @@ export function AtomixGlass({
         ref={glassRef}
         contentRef={contentRef}
         className={className}
-        style={baseStyle}
+        style={rootLayoutStyle}
         borderRadius={effectiveBorderRadius}
         displacementScale={
           effectiveWithoutEffects
@@ -437,7 +466,6 @@ export function AtomixGlass({
         effectiveWithoutEffects={effectiveWithoutEffects}
         effectiveReducedMotion={effectiveReducedMotion}
         shaderVariant={shaderVariant}
-        elasticity={elasticity}
         withLiquidBlur={withLiquidBlur}
       >
         {children}
@@ -461,14 +489,7 @@ export function AtomixGlass({
           <div className={ATOMIX_GLASS.BASE_LAYER_CLASS} />
           <div className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS} />
           {/* Overlay highlight - opacity and background are dynamic, calculated inline */}
-          <div
-            className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS}
-            style={{
-              opacity:
-                opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
-              background: `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`,
-            }}
-          />
+          <div className={ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS} />
         </>
       )}
       {withBorder && (

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -91,7 +91,7 @@ interface AtomixGlassContainerProps {
   effectiveReducedMotion?: boolean;
   shaderVariant?: FragmentShaderType;
   withLiquidBlur?: boolean;
-  elasticity?: number;
+
   contentRef?: React.RefObject<HTMLDivElement>;
   children?: React.ReactNode;
 }
@@ -129,7 +129,7 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       effectiveReducedMotion = false,
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
-      elasticity = 0,
+
       contentRef,
     },
     ref
@@ -489,21 +489,12 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       >
         <div
           className={ATOMIX_GLASS.INNER_CLASS}
-          style={
-            {
-              padding: `var(--atomix-glass-container-padding)`,
-              boxShadow: `var(--atomix-glass-container-box-shadow)`,
-            } as CSSProperties
-          }
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onMouseDown={onMouseDown}
           onMouseUp={onMouseUp}
         >
-          <div
-            className={ATOMIX_GLASS.FILTER_CLASS}
-            style={{ zIndex: 1, position: 'absolute', inset: 0 }}
-          >
+          <div className={ATOMIX_GLASS.FILTER_CLASS}>
             <GlassFilter
               blurAmount={blurAmount}
               mode={mode}
@@ -524,39 +515,14 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             <div
               ref={setForceNoTransition}
               className={ATOMIX_GLASS.FILTER_OVERLAY_CLASS}
-              style={
-                {
-                  filter: `url(#${filterId})`,
-                  backdropFilter: `var(--atomix-glass-container-backdrop)`,
-                  borderRadius: `var(--atomix-glass-container-radius)`,
-                } as CSSProperties
-              }
-            />
-            <div
-              className={ATOMIX_GLASS.FILTER_SHADOW_CLASS}
-              style={
-                {
-                  boxShadow: `var(--atomix-glass-container-shadow)`,
-                  opacity: `var(--atomix-glass-container-shadow-opacity)`,
-                  background: `var(--atomix-glass-container-bg)`,
-                  borderRadius: `var(--atomix-glass-container-radius)`,
-                } as CSSProperties
-              }
+              style={{
+                filter: `url(#${filterId})`,
+              }}
             />
+            <div className={ATOMIX_GLASS.FILTER_SHADOW_CLASS} />
           </div>
 
-          <div
-            ref={contentRef}
-            className={ATOMIX_GLASS.CONTENT_CLASS}
-            style={
-              {
-                position: 'relative',
-                textShadow: `var(--atomix-glass-container-text-shadow)`,
-                // Ensure content is always above the filter layer (zIndex 1)
-                zIndex: elasticity > 0 ? 100 : 2,
-              } as CSSProperties
-            }
-          >
+          <div ref={contentRef} className={ATOMIX_GLASS.CONTENT_CLASS}>
             {children}
           </div>
         </div>

package/src/components/AtomixGlass/glass-utils.ts

@@ -51,21 +51,8 @@ export const calculateMouseInfluence = (mouseOffset: MousePosition): number => {
   return Math.min(0.8, influence); // Tighter cap to prevent blur/filter blow-out
 };
 
-/**
- * Calculate overlight intensity based on background and mouse position
- */
-export const calculateOverLightIntensity = (
-  mouseOffset: MousePosition,
-  baseIntensity: number
-): number => {
-  if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
-    return baseIntensity;
-  }
 
-  // Calculate additional intensity based on mouse position
-  const mouseInfluence = calculateMouseInfluence(mouseOffset);
-  return Math.min(1.0, baseIntensity * (1 + mouseInfluence * 0.3));
-};
+
 
 /**
  * Clamp blur value to minimum and maximum with overlight consideration
@@ -238,6 +225,32 @@ export const extractBorderRadiusFromChildren = (children: React.ReactNode): numb
   return CONSTANTS.DEFAULT_CORNER_RADIUS;
 };
 
+/**
+ * Smoothstep interpolation — hermite S-curve
+ * Creates a smooth ease-in / ease-out transition from 0 to 1.
+ * `t` is clamped to [0, 1] before evaluation.
+ */
+export const smoothstep = (t: number): number => {
+  const clamped = Math.max(0, Math.min(1, t));
+  return clamped * clamped * (3 - 2 * clamped);
+};
+
+/**
+ * Linear interpolation between `a` and `b` by factor `t` ∈ [0, 1]
+ */
+export const lerp = (a: number, b: number, t: number): number => {
+  return a + (b - a) * t;
+};
+
+/**
+ * Soft clamp — exponentially approaches `max` without a hard cutoff.
+ * Gives a natural deceleration curve near the limit.
+ */
+export const softClamp = (value: number, max: number): number => {
+  if (max <= 0) return 0;
+  return max * (1 - Math.exp(-value / max));
+};
+
 /**
  * Get displacement map URL based on mode
  */

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

@@ -272,9 +272,9 @@ type Story = StoryObj<typeof meta>;
 export const BasicUsage: Story = {
   args: {
     children: (
-      <div className="u-text-center">
-        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-28">Basic Glass Effect</h2>
-        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90">
+      <div className="u-text-center u-flex u-flex-column u-items-center u-justify-center">
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-fs-2xl u-font-bold">Basic Glass Effect</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-fs-base">
           This is a basic AtomixGlass component with default settings.
         </p>
         <Button variant="primary" glass>
@@ -284,15 +284,13 @@ export const BasicUsage: Story = {
     ),
     padding: '32px', // Increased padding for better visual appearance
   },
-  render: args => (
-    <div className="u-bg-gradient-to-br u-from-indigo-500 u-via-purple-500 u-to-blue-500 u-min-h-screen u-w-full u-flex u-items-center u-justify-center">
-      <div className="u-w-full u-h-full">
-        <div className="u-flex u-justify-center u-items-center u-h-full">
-          <AtomixGlass {...args} />
-        </div>
-      </div>
-    </div>
-  ),
+  decorators: [
+    Story => (
+      <BackgroundWrapper backgroundImage={backgroundImages[2]} overlay overlayOpacity={0.2}>
+        <Story />
+      </BackgroundWrapper>
+    ),
+  ],
   parameters: {
     docs: {
       description: {
@@ -306,8 +304,8 @@ export const WithAllProps: Story = {
   args: {
     children: (
       <div className="u-text-center">
-        <h2 className="u-mb-4 u-mt-0 u-text-white u-text-24">Fully Configured Glass</h2>
-        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-text-16">
+        <h2 className="u-mb-4 u-mt-0 u-text-white u-fs-2xl u-font-bold">Fully Configured Glass</h2>
+        <p className="u-mb-6 u-mt-0 u-text-white u-opacity-90 u-fs-base">
           This glass component uses all configurable properties.
         </p>
         <div className="u-flex u-gap-4 u-justify-center">
@@ -331,13 +329,13 @@ export const WithAllProps: Story = {
     padding: '32px', // Increased padding for better visual appearance
     onClick: mockHandlers.onClick,
   },
-  render: args => (
-    <BackgroundWrapper backgroundImage={backgroundImages[0]}>
-      <div className="u-flex u-justify-center u-items-center u-h-full">
-        <AtomixGlass {...args} />
-      </div>
-    </BackgroundWrapper>
-  ),
+  decorators: [
+    Story => (
+      <BackgroundWrapper backgroundImage={backgroundImages[0]} overlay overlayOpacity={0.3}>
+        <Story />
+      </BackgroundWrapper>
+    ),
+  ],
   parameters: {
     docs: {
       description: {