@shohojdhara/atomix 0.6.4 → 0.6.5

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

@@ -4,11 +4,11 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
 <div>
   <div
     class="c-atomix-glass"
-    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scale(1); --atomix-glass-container-position: absolute; --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-right: auto; --atomix-glass-bottom: auto; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.125rem); --atomix-glass-blend-mode: overlay; --atomix-glass-border-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08399999999999999) 33%, rgba(255, 255, 255, 0.27999999999999997) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22399999999999998) 33%, rgba(255, 255, 255, 0.42) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-opacity: 0; --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-opacity: 0; --atomix-glass-base-gradient: rgba(255, 255, 255, 0.1); --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-gradient: rgba(255, 255, 255, 0.05); --atomix-glass-overlay-highlight-opacity: 0; --atomix-glass-overlay-highlight-bg: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 60%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-3-opacity: 0; --atomix-glass-base-opacity: 0; --atomix-glass-overlay-opacity: 0; --atomix-glass-overlay-highlight-opacity: 0;"
+    style="--atomix-glass-radius: 16px; --atomix-glass-transform: translate(0px, 0px) scaleX(1) scaleY(1); --atomix-glass-container-position: absolute; --atomix-glass-position: absolute; --atomix-glass-top: 0px; --atomix-glass-left: 0px; --atomix-glass-right: auto; --atomix-glass-bottom: auto; --atomix-glass-width: 100%; --atomix-glass-height: 100%; --atomix-glass-container-width: 100%; --atomix-glass-container-height: 100%; --atomix-glass-border-width: 0.5px; --atomix-glass-blend-mode: overlay; --atomix-glass-child-parallax: translate(0px, 0px); --atomix-glass-contrast: 1.02; --atomix-glass-brightness: 1.02; --atomix-glass-border-gradient-1: linear-gradient(136.5deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.027999999999999997) 33%, rgba(255, 255, 255, 0.09324) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-border-gradient-2: linear-gradient(133.5deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07448) 33%, rgba(255, 255, 255, 0.13999999999999999) 66%, rgba(255, 255, 255, 0) 100%); --atomix-glass-hover-1-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%); --atomix-glass-hover-2-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); --atomix-glass-hover-3-gradient: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); --atomix-glass-base-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.12) 100%); --atomix-glass-overlay-gradient: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%); --atomix-glass-hover-1-opacity: 0; --atomix-glass-hover-2-opacity: 0; --atomix-glass-hover-3-opacity: 0; --atomix-glass-base-opacity: 0.14; --atomix-glass-overlay-opacity: 0.1; --atomix-glass-overlay-highlight-opacity: 0.04900000000000001;"
   >
     <div
-      class="c-atomix-glass__container   "
-      style="--atomix-glass-container-radius: 16px; --atomix-glass-container-backdrop: blur(0.1px) saturate(140%) contrast(1.4) brightness(0.9); --atomix-glass-container-shadow: 0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset; --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: 0px 12px 40px rgba(0, 0, 0, 0.25); --atomix-glass-container-padding: 0;"
+      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);"
     >
       <div
         class="c-atomix-glass__inner"
@@ -33,7 +33,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                   stop-opacity="0"
                 />
                 <stop
-                  offset="76%"
+                  offset="78.88%"
                   stop-color="black"
                   stop-opacity="0"
                 />
@@ -75,7 +75,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                   result="EDGE_MASK"
                 >
                   <fefunca
-                    tableValues="0 0.1 1"
+                    tableValues="0 0.028000000000000004 1"
                     type="discrete"
                   />
                 </fecomponenttransfer>
@@ -89,7 +89,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                   in="SourceGraphic"
                   in2="DISPLACEMENT_MAP"
                   result="RED_DISPLACED"
-                  scale="-70"
+                  scale="-28"
                   xChannelSelector="R"
                   yChannelSelector="B"
                 />
@@ -98,15 +98,15 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                   result="RED_CHANNEL"
                   type="matrix"
                   values="1 0 0 0 0
-                 0 0 0 0 0
-                 0 0 0 0 0
-                 0 0 0 1 0"
+0 0 0 0 0
+0 0 0 0 0
+0 0 0 1 0"
                 />
                 <fedisplacementmap
                   in="SourceGraphic"
                   in2="DISPLACEMENT_MAP"
                   result="GREEN_DISPLACED"
-                  scale="-72.8"
+                  scale="-28.3136"
                   xChannelSelector="R"
                   yChannelSelector="B"
                 />
@@ -115,15 +115,15 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                   result="GREEN_CHANNEL"
                   type="matrix"
                   values="0 0 0 0 0
-                 0 1 0 0 0
-                 0 0 0 0 0
-                 0 0 0 1 0"
+0 1 0 0 0
+0 0 0 0 0
+0 0 0 1 0"
                 />
                 <fedisplacementmap
                   in="SourceGraphic"
                   in2="DISPLACEMENT_MAP"
                   result="BLUE_DISPLACED"
-                  scale="-74.2"
+                  scale="-28.470399999999998"
                   xChannelSelector="R"
                   yChannelSelector="B"
                 />
@@ -132,9 +132,9 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                   result="BLUE_CHANNEL"
                   type="matrix"
                   values="0 0 0 0 0
-                 0 0 0 0 0
-                 0 0 1 0 0
-                 0 0 0 1 0"
+0 0 0 0 0
+0 0 1 0 0
+0 0 0 1 0"
                 />
                 <feblend
                   in="GREEN_CHANNEL"
@@ -151,7 +151,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
                 <fegaussianblur
                   in="RGB_COMBINED"
                   result="ABERRATED_BLURRED"
-                  stdDeviation="0"
+                  stdDeviation="0.5644800000000001"
                 />
                 <fecomposite
                   in="ABERRATED_BLURRED"
@@ -192,6 +192,7 @@ exports[`AtomixGlass Visual Regression > matches snapshot with default props 1`]
         </div>
         <div
           class="c-atomix-glass__content"
+          style="transform: var(--atomix-glass-child-parallax, none);"
         >
           <div>
             Default Glass

package/src/components/AtomixGlass/glass-border-styles.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { ATOMIX_GLASS } from '../../lib/constants/components';
+import {
+  buildGlassBorderCssVars,
+  formatGlassBorderWidth,
+  normalizeBorderConfig,
+} from './glass-border-styles';
+
+describe('normalizeBorderConfig', () => {
+  it('defaults to enabled when border and withBorder are omitted', () => {
+    expect(normalizeBorderConfig()).toEqual({
+      enabled: true,
+      width: '0.5px',
+      opacityMultiplier: 1,
+      animated: true,
+    });
+  });
+
+  it('respects legacy withBorder=false', () => {
+    expect(normalizeBorderConfig(undefined, false).enabled).toBe(false);
+  });
+
+  it('border object overrides withBorder', () => {
+    expect(
+      normalizeBorderConfig({ enabled: true, width: 1, opacity: 0.5, animated: false }, false)
+    ).toEqual({
+      enabled: true,
+      width: '1px',
+      opacityMultiplier: 0.5,
+      animated: false,
+    });
+  });
+});
+
+describe('formatGlassBorderWidth', () => {
+  it('formats numbers as px', () => {
+    expect(formatGlassBorderWidth(2)).toBe('2px');
+  });
+});
+
+describe('buildGlassBorderCssVars', () => {
+  it('returns static gradients at zero mouse offset', () => {
+    const vars = buildGlassBorderCssVars({
+      mouseOffset: { x: 0, y: 0 },
+      mouseVelocity: { x: 0, y: 0 },
+      elasticVelocity: { x: 0, y: 0 },
+      borderOpacity: ATOMIX_GLASS.BORDER.DARK.opacity,
+      opacityMultiplier: 1,
+      tensionFactor: 0,
+    });
+
+    expect(vars[ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS.GRADIENT_1]).toContain('linear-gradient');
+    expect(vars[ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS.GRADIENT_2]).toContain('linear-gradient');
+    expect(vars[ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS.GRADIENT_1]).toContain(
+      `${ATOMIX_GLASS.BORDER.GRADIENT.BASE_ANGLE + ATOMIX_GLASS.BORDER.GRADIENT.CHROMATIC_OFFSET}deg`
+    );
+  });
+});

package/src/components/AtomixGlass/glass-border-styles.ts

@@ -0,0 +1,136 @@
+import { ATOMIX_GLASS } from '../../lib/constants/components';
+import { smoothstep } from './glass-utils';
+import type { GlassBorderConfig } from '../../lib/types/components';
+import type { MousePosition } from '../../lib/types/components';
+
+const { BORDER, CONSTANTS } = ATOMIX_GLASS;
+const BORDER_GRADIENT = BORDER.GRADIENT;
+const WHITE = CONSTANTS.PALETTE.WHITE;
+
+/** Resolved border configuration after normalizing props. */
+export interface ResolvedGlassBorderConfig {
+  enabled: boolean;
+  width: string;
+  opacityMultiplier: number;
+  animated: boolean;
+}
+
+/**
+ * Formats border width for CSS custom properties.
+ */
+export function formatGlassBorderWidth(value: string | number | undefined): string {
+  if (value === undefined) {
+    return BORDER.DEFAULT_WIDTH;
+  }
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+/**
+ * Resolves `border` and legacy `withBorder` into a single configuration object.
+ */
+export function normalizeBorderConfig(
+  border?: boolean | GlassBorderConfig,
+  withBorder?: boolean
+): ResolvedGlassBorderConfig {
+  const legacyDefault = withBorder ?? true;
+
+  if (border === undefined) {
+    return {
+      enabled: legacyDefault,
+      width: BORDER.DEFAULT_WIDTH,
+      opacityMultiplier: 1,
+      animated: true,
+    };
+  }
+
+  if (typeof border === 'boolean') {
+    return {
+      enabled: border,
+      width: BORDER.DEFAULT_WIDTH,
+      opacityMultiplier: 1,
+      animated: true,
+    };
+  }
+
+  return {
+    enabled: border.enabled ?? legacyDefault,
+    width: formatGlassBorderWidth(border.width),
+    opacityMultiplier: border.opacity ?? 1,
+    animated: border.animated !== false,
+  };
+}
+
+export interface BuildGlassBorderCssVarsParams {
+  mouseOffset: MousePosition;
+  mouseVelocity: MousePosition;
+  elasticVelocity: MousePosition;
+  borderOpacity: number;
+  opacityMultiplier?: number;
+  tensionFactor?: number;
+}
+
+/**
+ * Builds animated chromatic rim CSS variables for border layers 1 and 2.
+ * When empty, SCSS static conic/linear fallbacks apply.
+ */
+export function buildGlassBorderCssVars(
+  params: BuildGlassBorderCssVarsParams
+): Record<string, string> {
+  const {
+    mouseOffset,
+    mouseVelocity,
+    elasticVelocity,
+    borderOpacity,
+    opacityMultiplier = 1,
+    tensionFactor = 0,
+  } = params;
+
+  const mx = mouseOffset.x;
+  const my = mouseOffset.y;
+  const absMx = Math.abs(mx);
+
+  const velocityRotation =
+    (mouseVelocity.x + elasticVelocity.x) * BORDER_GRADIENT.VELOCITY_ANGLE_MULTIPLIER;
+  const borderGradientAngle =
+    BORDER_GRADIENT.BASE_ANGLE + mx * BORDER_GRADIENT.ANGLE_MULTIPLIER + velocityRotation;
+
+  const chromaticOffset = BORDER_GRADIENT.CHROMATIC_OFFSET;
+  const angleR = borderGradientAngle - chromaticOffset;
+  const angleB = borderGradientAngle + chromaticOffset;
+
+  const borderStop1 = Math.max(
+    BORDER_GRADIENT.STOP_1.MIN,
+    BORDER_GRADIENT.STOP_1.BASE + my * BORDER_GRADIENT.STOP_1.MULTIPLIER
+  );
+  const borderStop2 = Math.min(
+    BORDER_GRADIENT.STOP_2.MAX,
+    BORDER_GRADIENT.STOP_2.BASE + my * BORDER_GRADIENT.STOP_2.MULTIPLIER
+  );
+
+  const tensionGlow = 1 + tensionFactor * 0.5;
+  const opacities = BORDER_GRADIENT.OPACITY;
+  const borderOpacities = [
+    (opacities.BASE_1 + absMx * opacities.MULTIPLIER_LOW) * tensionGlow,
+    (opacities.BASE_2 + absMx * opacities.MULTIPLIER_HIGH) * tensionGlow,
+    (opacities.BASE_3 + absMx * opacities.MULTIPLIER_LOW) * tensionGlow,
+    (opacities.BASE_4 + absMx * opacities.MULTIPLIER_HIGH) * tensionGlow,
+  ];
+
+  const configBorderOpacity = borderOpacity * opacityMultiplier;
+
+  const gradient1 = `linear-gradient(${angleB}deg, rgba(${WHITE}, 0) 0%, rgba(${WHITE}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${WHITE}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${WHITE}, 0) 100%)`;
+  const gradient2 = `linear-gradient(${angleR}deg, rgba(${WHITE}, 0) 0%, rgba(${WHITE}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${WHITE}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${WHITE}, 0) 100%)`;
+
+  return {
+    [BORDER.GRADIENT_CSS_VARS.GRADIENT_1]: gradient1,
+    [BORDER.GRADIENT_CSS_VARS.GRADIENT_2]: gradient2,
+  };
+}
+
+/**
+ * Computes tension factor from elastic translation magnitude (0–1).
+ */
+export function computeBorderTensionFactor(elasticTranslation: MousePosition): number {
+  const magnitude = Math.hypot(elasticTranslation.x, elasticTranslation.y);
+  return smoothstep(magnitude / 80);
+}