@shohojdhara/atomix 0.6.5 → 0.6.7

package/package.json

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

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -180,7 +180,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
     globalMousePosition,
     mouseOffset,
     transformStyle,
-    getShaderTime,
     handleMouseEnter,
     handleMouseLeave,
     handleMouseDown,
@@ -213,13 +212,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
 
     style,
     isFixedOrSticky,
-    withTimeAnimation,
-    animationSpeed,
-    withMultiLayerDistortion,
-    distortionOctaves,
-    distortionLacunarity,
-    distortionGain,
-    distortionQuality,
   });
 
 
@@ -429,7 +421,6 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
         shaderVariant={shaderVariant}
         withLiquidBlur={withLiquidBlur}
         isFixedOrSticky={isFixedOrSticky}
-        shaderTime={getShaderTime()}
         withTimeAnimation={withTimeAnimation}
         animationSpeed={animationSpeed}
         withMultiLayerDistortion={withMultiLayerDistortion}

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -77,7 +77,6 @@ interface AtomixGlassContainerProps
   withLiquidBlur?: boolean;
   isFixedOrSticky?: boolean;
   elasticity?: number;
-  shaderTime?: number;
 
   contentRef?: React.RefObject<HTMLDivElement | null>;
   children?: React.ReactNode;
@@ -117,7 +116,6 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
       shaderVariant = 'liquidGlass',
       withLiquidBlur = false,
       isFixedOrSticky = false,
-      shaderTime,
       withTimeAnimation = false,
       animationSpeed = 1.0,
       withMultiLayerDistortion = false,

package/src/components/AtomixGlass/__snapshots__/AtomixGlass.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
   >
     <div
       class="c-atomix-glass__container"
-      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(20.16px) saturate(250%) contrast(1.02) brightness(1.02); --atomix-glass-container-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16); --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.18);"
+      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(20.16px) saturate(250%) contrast(1.02) brightness(1.02); --atomix-glass-container-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08); --atomix-glass-container-shadow-opacity: 1; --atomix-glass-container-bg: none; --atomix-glass-container-text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.4); --atomix-glass-container-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10);"
     >
       <div
         class="c-atomix-glass__inner"

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

@@ -6,23 +6,15 @@ import { ATOMIX_GLASS } from '../../lib/constants/components';
 const { CONSTANTS } = ATOMIX_GLASS;
 
 /**
- * Calculate distance between two points
- */
-export const calculateDistance = (pos1: MousePosition, pos2: MousePosition): number => {
-  if (
-    !pos1 ||
-    !pos2 ||
-    typeof pos1.x !== 'number' ||
-    typeof pos1.y !== 'number' ||
-    typeof pos2.x !== 'number' ||
-    typeof pos2.y !== 'number'
-  ) {
-    return 0;
-  }
-  const deltaX = pos1.x - pos2.x;
-  const deltaY = pos1.y - pos2.y;
-  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-};
+ * Canonical 2D vector type shared across the glass math/shader utilities.
+ *
+ * Structurally identical to {@link MousePosition}; re-exported by `shader-utils`
+ * as the public `Vec2`.
+ */
+export interface Vec2 {
+  x: number;
+  y: number;
+}
 
 /**
  * Calculate element center from bounding rect
@@ -251,6 +243,79 @@ export const softClamp = (value: number, max: number): number => {
   return max * (1 - Math.exp(-value / max));
 };
 
+/**
+ * Clamp a value to the `[min, max]` range. Returns `min` for non-finite input.
+ */
+export const clamp = (value: number, min: number, max: number): number => {
+  if (typeof value !== 'number' || isNaN(value)) {
+    return min;
+  }
+  return Math.max(min, Math.min(max, value));
+};
+
+/**
+ * Two-edge smoothstep (GLSL semantics) — Hermite interpolation between `edge0`
+ * and `edge1`. Reuses {@link smoothstep} after normalizing `x` into `[0, 1]`.
+ */
+export const smoothstepEdge = (edge0: number, edge1: number, x: number): number => {
+  if (typeof edge0 !== 'number' || typeof edge1 !== 'number' || typeof x !== 'number') {
+    return 0;
+  }
+  return smoothstep((x - edge0) / (edge1 - edge0));
+};
+
+/**
+ * Cubic ease-in-out curve. `t` is clamped to `[0, 1]`.
+ */
+export const easeInOutCubic = (t: number): number => {
+  if (typeof t !== 'number' || isNaN(t)) {
+    return 0;
+  }
+  const clamped = Math.max(0, Math.min(1, t));
+  return clamped < 0.5
+    ? 4 * clamped * clamped * clamped
+    : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
+};
+
+/**
+ * Quartic ease-out curve. `t` is clamped to `[0, 1]`.
+ */
+export const easeOutQuart = (t: number): number => {
+  if (typeof t !== 'number' || isNaN(t)) {
+    return 0;
+  }
+  const clamped = Math.max(0, Math.min(1, t));
+  return 1 - Math.pow(1 - clamped, 4);
+};
+
+/**
+ * Overflow-safe Euclidean length of a 2D vector.
+ */
+export const vec2Length = (x: number, y: number): number => {
+  if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
+    return 0;
+  }
+  const maxComponent = Math.max(Math.abs(x), Math.abs(y));
+  if (maxComponent === 0) return 0;
+  const scaledX = x / maxComponent;
+  const scaledY = y / maxComponent;
+  return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
+};
+
+/**
+ * Resolves the hover/active intensity multipliers from interaction state.
+ *
+ * Single source of truth for the `HOVER_INTENSITY` / `ACTIVE_INTENSITY`
+ * multipliers shared by the hook and the imperative style updater.
+ */
+export const getInteractionIntensity = (
+  isHovered: boolean,
+  isActive: boolean
+): { hoverIntensity: number; activeIntensity: number } => ({
+  hoverIntensity: isHovered ? CONSTANTS.INTERACTION.HOVER_INTENSITY : 1,
+  activeIntensity: isActive ? CONSTANTS.INTERACTION.ACTIVE_INTENSITY : 1,
+});
+
 /**
  * Spring-damper integration helper
  * Calculates the next value based on velocity, stiffness, and damping.
@@ -349,42 +414,6 @@ export function pickGlassLayoutStyle(style: CSSProperties): GlassLayoutPosition
   };
 }
 
-/**
- * Builds inline layout styles for the root wrapper.
- *
- * Reserved for alternate layout strategies. The default implementation applies
- * layout on `.c-atomix-glass__container` to preserve backdrop-filter behavior.
- */
-export function pickGlassHoistedRootStyle(style: CSSProperties): CSSProperties {
-  const layout = pickGlassLayoutStyle(style);
-  const resolvedPosition = (layout.position ?? style.position ?? 'fixed') as CSSProperties['position'];
-
-  return {
-    position: resolvedPosition,
-    ...(layout.top !== undefined && { top: layout.top }),
-    ...(layout.left !== undefined && { left: layout.left }),
-    ...(layout.right !== undefined && { right: layout.right }),
-    ...(layout.bottom !== undefined && { bottom: layout.bottom }),
-    ...(layout.inset !== undefined && { inset: layout.inset }),
-  };
-}
-
-/**
- * Returns `style` without layout properties, preserving visual declarations only.
- */
-export function omitGlassLayoutStyle(style: CSSProperties): CSSProperties {
-  const {
-    position: _p,
-    top: _t,
-    left: _l,
-    right: _r,
-    bottom: _b,
-    inset: _inset,
-    ...visualStyle
-  } = style;
-  return visualStyle;
-}
-
 /**
  * Resolves inset custom properties for decorative layers (hover, borders, backgrounds).
  *

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

@@ -1,9 +1,15 @@
 // Adapted from https://github.com/shuding/liquid-glass
 
-export interface Vec2 {
-  x: number;
-  y: number;
-}
+import {
+  clamp,
+  easeInOutCubic,
+  easeOutQuart,
+  smoothstepEdge as smoothStep,
+  vec2Length as calculateLength,
+} from './glass-utils';
+import type { Vec2 } from './glass-utils';
+
+export type { Vec2 } from './glass-utils';
 
 export interface ShaderOptions {
   width: number;
@@ -34,31 +40,6 @@ const DEFAULT_CANVAS_WIDTH = 256;
 const DEFAULT_CANVAS_HEIGHT = 256;
 
 // Utility functions
-const smoothStep = (a: number, b: number, t: number): number => {
-  // Add input validation
-  if (typeof a !== 'number' || typeof b !== 'number' || typeof t !== 'number') {
-    return 0;
-  }
-
-  const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
-  return clamped * clamped * (3 - 2 * clamped);
-};
-
-const calculateLength = (x: number, y: number): number => {
-  // Add input validation and error handling
-  if (typeof x !== 'number' || typeof y !== 'number' || isNaN(x) || isNaN(y)) {
-    return 0;
-  }
-
-  // Prevent potential overflow
-  const maxX = Math.max(Math.abs(x), Math.abs(y));
-  if (maxX === 0) return 0;
-
-  const scaledX = x / maxX;
-  const scaledY = y / maxX;
-  return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
-};
-
 const roundedRectSDF = (
   x: number,
   y: number,
@@ -96,42 +77,6 @@ const validateVec2 = (vec: Vec2): boolean => {
   );
 };
 
-const clampValue = (value: number, min: number, max: number): number => {
-  // Add input validation
-  if (typeof value !== 'number' || typeof min !== 'number' || typeof max !== 'number') {
-    return min;
-  }
-
-  if (isNaN(value)) return min;
-  if (isNaN(min)) return 0;
-  if (isNaN(max)) return 1;
-
-  return Math.max(min, Math.min(max, value));
-};
-
-// Advanced easing functions for Apple-style smooth animations
-const easeInOutCubic = (t: number): number => {
-  // Add input validation
-  if (typeof t !== 'number' || isNaN(t)) {
-    return 0;
-  }
-
-  const clampedT = Math.max(0, Math.min(1, t));
-  return clampedT < 0.5
-    ? 4 * clampedT * clampedT * clampedT
-    : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
-};
-
-const easeOutQuart = (t: number): number => {
-  // Add input validation
-  if (typeof t !== 'number' || isNaN(t)) {
-    return 0;
-  }
-
-  const clampedT = Math.max(0, Math.min(1, t));
-  return 1 - Math.pow(1 - clampedT, 4);
-};
-
 // Perlin-like noise for organic distortion
 const noise2D = (x: number, y: number): number => {
   // Add input validation
@@ -503,8 +448,8 @@ export const fragmentShaders = {
     const finalY = iy + totalDistortionY + chromaticOffset.y * 0.5;
 
     return createTexture(
-      clampValue(finalX * scaled + 0.5, 0, 1),
-      clampValue(finalY * scaled + 0.5, 0, 1)
+      clamp(finalX * scaled + 0.5, 0, 1),
+      clamp(finalY * scaled + 0.5, 0, 1)
     );
   },
 
@@ -545,7 +490,7 @@ export const fragmentShaders = {
     const totalX = ix + (organicX * 0.035 + fluidVelocityX + vortexX) * mask;
     const totalY = iy + (organicY * 0.035 + fluidVelocityY + vortexY) * mask;
 
-    return createTexture(clampValue(totalX + 0.5, 0, 1), clampValue(totalY + 0.5, 0, 1));
+    return createTexture(clamp(totalX + 0.5, 0, 1), clamp(totalY + 0.5, 0, 1));
   },
 
   // High-end glass with advanced refraction and depth
@@ -593,7 +538,7 @@ export const fragmentShaders = {
     const finalX = ix + (refractionX + depthX + organicNoise * 0.015) * edgeMask;
     const finalY = iy + (refractionY + depthY + organicNoise * 0.015) * edgeMask;
 
-    return createTexture(clampValue(finalX + 0.5, 0, 1), clampValue(finalY + 0.5, 0, 1));
+    return createTexture(clamp(finalX + 0.5, 0, 1), clamp(finalY + 0.5, 0, 1));
   },
 
   // Metallic liquid effect with shimmer
@@ -630,7 +575,7 @@ export const fragmentShaders = {
     const totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask;
     const totalY = iy + (wave2 + shimmer * 0.8 + Math.sin(flowAngle) * flowEffect) * mask;
 
-    return createTexture(clampValue(totalX + 0.5, 0, 1), clampValue(totalY + 0.5, 0, 1));
+    return createTexture(clamp(totalX + 0.5, 0, 1), clamp(totalY + 0.5, 0, 1));
   },
 
   // basiBasi - Expert Premium Glass Shader
@@ -784,7 +729,7 @@ export const fragmentShaders = {
     const finalX = ix + totalDistortionX * 0.85; // Scale down for subtlety
     const finalY = iy + totalDistortionY * 0.85;
 
-    return createTexture(clampValue(finalX + 0.5, 0, 1), clampValue(finalY + 0.5, 0, 1));
+    return createTexture(clamp(finalX + 0.5, 0, 1), clamp(finalY + 0.5, 0, 1));
   },
 
   // Aliases for compatibility
@@ -903,13 +848,13 @@ export class ShaderDisplacementGenerator {
           const g = smoothedDy / maxScale + 0.5;
 
           const pixelIndex = (y * w + x) * 4;
-          data[pixelIndex] = clampValue(r * 255, NORMALIZATION_CLAMP.min, NORMALIZATION_CLAMP.max); // Red channel (X displacement)
-          data[pixelIndex + 1] = clampValue(
+          data[pixelIndex] = clamp(r * 255, NORMALIZATION_CLAMP.min, NORMALIZATION_CLAMP.max); // Red channel (X displacement)
+          data[pixelIndex + 1] = clamp(
             g * 255,
             NORMALIZATION_CLAMP.min,
             NORMALIZATION_CLAMP.max
           ); // Green channel (Y displacement)
-          data[pixelIndex + 2] = clampValue(
+          data[pixelIndex + 2] = clamp(
             g * 255,
             NORMALIZATION_CLAMP.min,
             NORMALIZATION_CLAMP.max
@@ -951,6 +896,3 @@ export class ShaderDisplacementGenerator {
     return this.canvasDPI;
   }
 }
-
-// Re-export animation system functions for convenience
-export { createFBMEngine, liquidGlassWithTime } from './animation-system';

package/src/components/Form/Select.test.tsx

@@ -20,9 +20,9 @@ describe('Select Component', () => {
     // Check native select options
     const select = document.querySelector('select');
     expect(select).not.toBeNull();
-    expect(select?.options).toHaveLength(3); // Placeholder + 2
-    expect(select?.options[1].value).toBe('1');
-    expect(select?.options[2].value).toBe('2');
+    expect(select!.options).toHaveLength(3); // Placeholder + 2
+    expect(select!.options[1]!.value).toBe('1');
+    expect(select!.options[2]!.value).toBe('2');
   });
 
   it('renders compound options correctly', async () => {
@@ -43,9 +43,9 @@ describe('Select Component', () => {
     await waitFor(() => {
         const select = document.querySelector('select');
         expect(select).not.toBeNull();
-        expect(select?.options).toHaveLength(3); // Placeholder + 2
-        expect(select?.options[1].value).toBe('1');
-        expect(select?.options[2].value).toBe('2');
+        expect(select!.options).toHaveLength(3); // Placeholder + 2
+        expect(select!.options[1]!.value).toBe('1');
+        expect(select!.options[2]!.value).toBe('2');
     });
   });
 

package/src/components/Form/Textarea.stories.tsx

@@ -104,7 +104,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Number of visible text lines',
       table: {
         type: { summary: 'number' },
-        defaultValue: { summary: 2 },
+        defaultValue: { summary: '2' },
       },
     },
     cols: {
@@ -138,7 +138,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is disabled',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     invalid: {
@@ -146,7 +146,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is invalid',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     valid: {
@@ -154,7 +154,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Whether the textarea is valid',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     glass: {
@@ -162,7 +162,7 @@ Textarea component provides a multi-line text input field for longer content. It
       description: 'Enable glass morphism effect',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     defaultValue: {

package/src/layouts/Grid/Grid.stories.tsx

@@ -670,13 +670,47 @@ export const AlignmentAndSpacing: Story = {
         </div>
       </div>
 
+      {/* Row Gap */}
+      <div className="u-mb-8">
+        <h2 className="u-mb-4 u-text-brand-emphasis">Row Gap</h2>
+        <p className="u-mb-4 u-text-secondary-emphasis">
+          Wrapped rows use vertical spacing from the grid gutter width (`row-gap` via
+          `--atomix-gutter-y`):
+        </p>
+
+        <Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 1</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 2</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 3</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 4</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 5</DemoCard>
+          </GridCol>
+          <GridCol xs={4}>
+            <DemoCard variant="secondary">Column 6</DemoCard>
+          </GridCol>
+        </Row>
+      </div>
+
       {/* No Gutters */}
       <div className="u-mb-8">
         <h2 className="u-mb-4 u-text-brand-emphasis">No Gutters</h2>
-        <p className="u-mb-4 u-text-secondary-emphasis">Remove spacing between columns:</p>
+        <p className="u-mb-4 u-text-secondary-emphasis">
+          Remove horizontal and vertical gutter spacing between columns:
+        </p>
 
         <div className="u-mb-6">
-          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">With gutters (default)</h3>
+          <h3 className="u-mb-3 u-text-secondary-emphasis u-font-medium">
+            With gutters (default)
+          </h3>
           <Row className="u-mb-4 u-p-3 u-bg-brand-subtle u-rounded">
             <GridCol xs={4}>
               <DemoCard variant="secondary">Column 1</DemoCard>
@@ -687,6 +721,15 @@ export const AlignmentAndSpacing: Story = {
             <GridCol xs={4}>
               <DemoCard variant="secondary">Column 3</DemoCard>
             </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="secondary">Column 4</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="secondary">Column 5</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="secondary">Column 6</DemoCard>
+            </GridCol>
           </Row>
         </div>
 
@@ -702,6 +745,15 @@ export const AlignmentAndSpacing: Story = {
             <GridCol xs={4}>
               <DemoCard variant="accent">Column 3</DemoCard>
             </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="accent">Column 4</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="accent">Column 5</DemoCard>
+            </GridCol>
+            <GridCol xs={4}>
+              <DemoCard variant="accent">Column 6</DemoCard>
+            </GridCol>
           </Row>
         </div>
       </div>

package/src/layouts/Grid/README.md

@@ -30,9 +30,11 @@ import { Grid, GridCol } from '@/layouts/Grid';
   - Adds utility class `u-justify-content-[value]`
 - `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
   - Adds utility class `u-align-items-[value]`
-- `noGutters`: Remove gutters between columns
+- `noGutters`: Remove horizontal and vertical gutter spacing
   - Adds modifier class `o-grid--no-gutters`
 
+Grids apply `row-gap` from `--atomix-gutter-y` (defaults to `$grid-gutter-width`) when columns wrap to multiple rows. Horizontal gutters use the existing column padding model. Override vertical spacing with `--atomix-gutter-y` on any `.o-grid`.
+
 ### GridCol
 
 Column component with responsive sizing options.
@@ -89,9 +91,11 @@ import { Container, Row, GridCol } from '@/layouts/Grid';
   - Adds utility class `u-justify-content-[value]`
 - `alignItems`: Control vertical alignment ('start', 'end', 'center', 'baseline', 'stretch')
   - Adds utility class `u-align-items-[value]`
-- `noGutters`: Remove gutters between columns
+- `noGutters`: Remove horizontal and vertical gutter spacing
   - Adds modifier class `o-grid--no-gutters`
 
+Grids apply `row-gap` from `--atomix-gutter-y` (defaults to `$grid-gutter-width`) when columns wrap to multiple rows. Horizontal gutters use the existing column padding model. Override vertical spacing with `--atomix-gutter-y` on any `.o-grid`.
+
 ## Breakpoints
 
 The grid system uses the following breakpoints: