@shohojdhara/atomix 0.6.1 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -162,24 +162,24 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-measure": "^8.6.14",
-    "@storybook/addon-outline": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/cli": "^8.6.14",
-    "@storybook/components": "^8.6.14",
-    "@storybook/core-events": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/preview-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@storybook/types": "^8.6.14",
+    "@storybook/addon-a11y": "8.6.15",
+    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/addon-interactions": "8.6.15",
+    "@storybook/addon-links": "8.6.15",
+    "@storybook/addon-measure": "8.6.15",
+    "@storybook/addon-outline": "8.6.15",
+    "@storybook/addon-viewport": "8.6.15",
+    "@storybook/blocks": "8.6.15",
+    "@storybook/cli": "8.6.15",
+    "@storybook/components": "8.6.15",
+    "@storybook/core-events": "8.6.15",
+    "@storybook/manager-api": "8.6.15",
+    "@storybook/preview-api": "8.6.15",
+    "@storybook/react": "8.6.15",
+    "@storybook/react-vite": "8.6.15",
+    "@storybook/test": "8.6.15",
+    "@storybook/theming": "8.6.15",
+    "@storybook/types": "8.6.15",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^14.0.0",
@@ -216,7 +216,7 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-preserve-shebangs": "^0.2.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.6.14",
+    "storybook": "8.6.15",
     "storybook-theme-switch-addon": "^1.0.2",
     "ts-node": "^10.9.0",
     "tslib": "^2.6.0",
@@ -229,14 +229,14 @@
     "dev": "storybook dev -p 6006",
     "build": "npm run prebuild && npm run build:parallel && npm run postbuild",
     "build:sequential": "rollup -c",
-    "build:js": "rollup -c rollup.config.build.js",
-    "build:types": "rollup -c rollup.config.types.js",
-    "build:styles": "rollup -c rollup.config.styles.js",
+    "build:js": "rollup -c rollup/entries/build.js",
+    "build:types": "rollup -c rollup/entries/types.js",
+    "build:styles": "rollup -c rollup/entries/styles.js",
     "build:themes": "rollup -c rollup/config/themes.js",
     "build:parallel": "concurrently \"npm:build:js\" \"npm:build:types\" \"npm:build:styles\" \"npm:build:umd\"",
-    "build:umd": "rollup -c rollup.config.umd.js",
-    "build:cli": "rollup -c rollup.config.cli.js",
-    "build:cli:dev": "rollup -c rollup.config.cli.js --environment NODE_ENV:development",
+    "build:umd": "rollup -c rollup/entries/umd.js",
+    "build:cli": "rollup -c rollup/entries/cli.js",
+    "build:cli:dev": "rollup -c rollup/entries/cli.js --environment NODE_ENV:development",
     "build:analyze": "ANALYZE=true rollup -c",
     "build:storybook": "storybook build",
     "test": "vitest",

package/src/components/AtomixGlass/AtomixGlass.tsx

@@ -576,7 +576,7 @@ const AtomixGlassInner = forwardRef<HTMLDivElement, AtomixGlassProps>(function A
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
       aria-disabled={onClick && effectiveWithoutEffects ? true : onClick ? false : undefined}
-      aria-pressed={undefined}
+      aria-pressed={onClick ? isActive : undefined}
       onKeyDown={onClick ? handleKeyDown : undefined}
     >
       <AtomixGlassContainer

package/src/components/AtomixGlass/AtomixGlassContainer.tsx

@@ -89,6 +89,7 @@ interface AtomixGlassContainerProps
   shaderVariant?: FragmentShaderType;
   withLiquidBlur?: boolean;
   isFixedOrSticky?: boolean;
+  elasticity?: number;
 
   // Phase 1: Animation System props
   shaderTime?: number;
@@ -592,7 +593,13 @@ export const AtomixGlassContainer = forwardRef<HTMLDivElement, AtomixGlassContai
             <div className={ATOMIX_GLASS.FILTER_SHADOW_CLASS} />
           </div>
 
-          <div ref={contentRef} className={ATOMIX_GLASS.CONTENT_CLASS}>
+          <div
+            ref={contentRef}
+            className={ATOMIX_GLASS.CONTENT_CLASS}
+            style={{
+              transform: 'var(--atomix-glass-child-parallax, none)',
+            }}
+          >
             {children}
           </div>
         </div>

package/src/components/AtomixGlass/deprecated/AtomixGlass.deprecated.tsx

@@ -0,0 +1,390 @@
+import React, { useId, 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';
+
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ *
+ * @example
+ * // Dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass cornerRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ */
+export function AtomixGlass({
+  children,
+  displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE,
+  blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT,
+  saturation = ATOMIX_GLASS.DEFAULTS.SATURATION,
+  aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY,
+  elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY,
+  borderRadius,
+  globalMousePosition: externalGlobalMousePosition,
+  mouseOffset: externalMouseOffset,
+  mouseContainer = null,
+  className = '',
+  padding = ATOMIX_GLASS.DEFAULTS.PADDING,
+  overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT,
+  style = {},
+  mode = ATOMIX_GLASS.DEFAULTS.MODE,
+  onClick,
+  shaderVariant = 'liquidGlass',
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  role,
+  tabIndex,
+  reducedMotion = false,
+  highContrast = false,
+  withoutEffects = false,
+  withLiquidBlur = false,
+  withBorder = true,
+  withOverLightLayers = false,
+  debugBorderRadius = false,
+}: AtomixGlassProps) {
+  const glassRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Use composable hook for all state and logic
+  const {
+    isHovered,
+    isActive,
+    glassSize,
+    effectiveBorderRadius,
+    effectiveReducedMotion,
+    effectiveHighContrast,
+    effectiveWithoutEffects,
+    overLightConfig,
+    globalMousePosition,
+    mouseOffset,
+    transformStyle,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseDown,
+    handleMouseUp,
+    handleKeyDown,
+  } = useAtomixGlass({
+    glassRef,
+    contentRef,
+    borderRadius,
+    globalMousePosition: externalGlobalMousePosition,
+    mouseOffset: externalMouseOffset,
+    mouseContainer,
+    overLight,
+    reducedMotion,
+    highContrast,
+    withoutEffects,
+    elasticity,
+    onClick,
+    debugBorderRadius,
+    children,
+  });
+
+  // Calculate base style with transforms
+  const baseStyle = useMemo(
+    () => ({
+      ...style,
+      ...(elasticity !== 0 && {
+        transform: transformStyle,
+        transition: effectiveReducedMotion ? 'none' : 'all ease-out 0.2s',
+        willChange: effectiveWithoutEffects ? 'auto' : 'transform',
+      }),
+      ...(effectiveHighContrast && {
+        border: '2px solid currentColor',
+        outline: '2px solid transparent',
+        outlineOffset: '2px',
+      }),
+    }),
+    [
+      style,
+      transformStyle,
+      effectiveReducedMotion,
+      effectiveWithoutEffects,
+      effectiveHighContrast,
+      elasticity,
+    ]
+  );
+
+  // Calculate position and size styles
+  const positionStyles = useMemo(
+    () => ({
+      position: (baseStyle.position || 'absolute') as React.CSSProperties['position'],
+      top: baseStyle.top || 0,
+      left: baseStyle.left || 0,
+    }),
+    [baseStyle]
+  );
+
+  const adjustedSize = useMemo(
+    () => ({
+      width:
+        baseStyle.position !== 'fixed'
+          ? '100%'
+          : baseStyle.width
+            ? baseStyle.width
+            : Math.max(glassSize.width, 0),
+      height:
+        baseStyle.position !== 'fixed'
+          ? '100%'
+          : baseStyle.height
+            ? baseStyle.height
+            : Math.max(glassSize.height, 0),
+    }),
+    [baseStyle, glassSize]
+  );
+
+  // Generate CSS variables for layers
+  const glassId = useId();
+  const glassVars = useMemo(() => {
+    const isOverLight = overLightConfig?.isOverLight ?? false;
+    const mx = mouseOffset.x;
+    const my = mouseOffset.y;
+    const scopedId = `ag-${glassId.replace(/:/g, '')}`;
+
+    return {
+      [`--${scopedId}-pos`]: positionStyles.position,
+      [`--${scopedId}-top`]: positionStyles.top !== 'fixed' ? `${positionStyles.top}px` : '0',
+      [`--${scopedId}-left`]: positionStyles.left !== 'fixed' ? `${positionStyles.left}px` : '0',
+      [`--${scopedId}-w`]:
+        baseStyle.position !== 'fixed' ? adjustedSize.width : `${adjustedSize.width}px`,
+      [`--${scopedId}-h`]:
+        baseStyle.position !== 'fixed' ? adjustedSize.height : `${adjustedSize.height}px`,
+      [`--${scopedId}-r`]: `${effectiveBorderRadius}px`,
+      [`--${scopedId}-t`]: baseStyle.transform,
+      [`--${scopedId}-tr`]: effectiveReducedMotion ? 'none' : baseStyle.transition,
+      [`--${scopedId}-blend`]: isOverLight ? 'multiply' : 'overlay',
+      [`--${scopedId}-b1`]: `linear-gradient(${135 + mx * 1.2}deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${0.12 + Math.abs(mx) * 0.008}) ${Math.max(10, 33 + my * 0.3)}%, rgba(255,255,255,${0.4 + Math.abs(mx) * 0.012}) ${Math.min(90, 66 + my * 0.4)}%, rgba(255,255,255,0) 100%)`,
+      [`--${scopedId}-b2`]: `linear-gradient(${135 + mx * 1.2}deg, rgba(255,255,255,0) 0%, rgba(255,255,255,${0.32 + Math.abs(mx) * 0.008}) ${Math.max(10, 33 + my * 0.3)}%, rgba(255,255,255,${0.6 + Math.abs(mx) * 0.012}) ${Math.min(90, 66 + my * 0.4)}%, rgba(255,255,255,0) 100%)`,
+      [`--${scopedId}-h1-o`]: isHovered || isActive ? (isOverLight ? 0.3 : 0.5) : 0,
+      [`--${scopedId}-h1`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx / 2}% ${50 + my / 2}%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0) 60%)`
+        : `radial-gradient(circle at ${50 + mx / 2}% ${50 + my / 2}%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%)`,
+      [`--${scopedId}-h2-o`]: isActive ? (isOverLight ? 0.4 : 0.5) : 0,
+      [`--${scopedId}-h2`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx / 1.5}% ${50 + my / 1.5}%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0) 80%)`
+        : `radial-gradient(circle at ${50 + mx / 1.5}% ${50 + my / 1.5}%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%)`,
+      [`--${scopedId}-h3-o`]: isHovered
+        ? isOverLight
+          ? 0.25
+          : 0.4
+        : isActive
+          ? isOverLight
+            ? 0.5
+            : 0.8
+          : 0,
+      [`--${scopedId}-h3`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx}% ${50 + my}%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%)`
+        : `radial-gradient(circle at ${50 + mx}% ${50 + my}%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)`,
+      [`--${scopedId}-base-o`]: isOverLight ? overLightConfig.opacity : 0,
+      [`--${scopedId}-base`]: isOverLight
+        ? `linear-gradient(135deg, rgba(0,0,0,${0.12 + mx * 0.002}) 0%, rgba(0,0,0,${0.08 + my * 0.001}) 50%, rgba(0,0,0,${0.15 + Math.abs(mx) * 0.003}) 100%)`
+        : 'rgba(255,255,255,0.1)',
+      [`--${scopedId}-over-o`]: isOverLight ? overLightConfig.opacity * 0.9 : 0,
+      [`--${scopedId}-over`]: isOverLight
+        ? `radial-gradient(circle at ${50 + mx * 0.5}% ${50 + my * 0.5}%, rgba(0,0,0,${0.08 + Math.abs(mx) * 0.002}) 0%, rgba(0,0,0,0.04) 40%, rgba(0,0,0,${0.12 + Math.abs(my) * 0.002}) 100%)`
+        : 'rgba(255,255,255,0.05)',
+      '--ag-scoped-id': scopedId,
+    } as React.CSSProperties;
+  }, [
+    glassId,
+    positionStyles,
+    adjustedSize,
+    effectiveBorderRadius,
+    baseStyle,
+    effectiveReducedMotion,
+    mouseOffset,
+    isHovered,
+    isActive,
+    overLightConfig,
+  ]);
+
+  const scopedId = `ag-${glassId.replace(/:/g, '')}`;
+
+  return (
+    <div
+      className={`${ATOMIX_GLASS.BASE_CLASS} ${className}`}
+      style={{ ...positionStyles, position: 'relative', ...glassVars }}
+      role={role || (onClick ? 'button' : undefined)}
+      tabIndex={onClick ? (tabIndex ?? 0) : tabIndex}
+      aria-label={ariaLabel}
+      aria-describedby={ariaDescribedBy}
+      aria-disabled={onClick ? false : undefined}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+    >
+      <AtomixGlassContainer
+        ref={glassRef}
+        contentRef={contentRef}
+        className={className}
+        style={baseStyle}
+        borderRadius={effectiveBorderRadius}
+        displacementScale={
+          effectiveWithoutEffects
+            ? 0
+            : mode === 'shader'
+              ? displacementScale * 0.8
+              : overLightConfig.isOverLight
+                ? displacementScale * 0.6
+                : displacementScale
+        }
+        blurAmount={effectiveWithoutEffects ? 0 : blurAmount}
+        saturation={
+          effectiveHighContrast
+            ? 200
+            : overLightConfig.isOverLight
+              ? saturation * overLightConfig.saturationBoost
+              : saturation
+        }
+        aberrationIntensity={
+          effectiveWithoutEffects
+            ? 0
+            : mode === 'shader'
+              ? aberrationIntensity * 0.7
+              : aberrationIntensity
+        }
+        glassSize={glassSize}
+        padding={padding}
+        mouseOffset={effectiveWithoutEffects ? { x: 0, y: 0 } : mouseOffset}
+        globalMousePosition={effectiveWithoutEffects ? { x: 0, y: 0 } : globalMousePosition}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        isHovered={isHovered}
+        isActive={isActive}
+        overLight={overLightConfig?.isOverLight || false}
+        onClick={onClick}
+        mode={mode}
+        transform={baseStyle.transform}
+        effectiveWithoutEffects={effectiveWithoutEffects}
+        effectiveReducedMotion={effectiveReducedMotion}
+        shaderVariant={shaderVariant}
+        elasticity={elasticity}
+        withLiquidBlur={withLiquidBlur}
+      >
+        {children}
+      </AtomixGlassContainer>
+      {withBorder && (
+        <>
+          <span
+            className={ATOMIX_GLASS.BORDER_1_CLASS}
+            style={{
+              position: `var(--${scopedId}-pos)` as any,
+              top: `var(--${scopedId}-top)`,
+              left: `var(--${scopedId}-left)`,
+              width: `var(--${scopedId}-w)`,
+              height: `var(--${scopedId}-h)`,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              background: `var(--${scopedId}-b1)`,
+            }}
+          />
+          <span
+            className={ATOMIX_GLASS.BORDER_2_CLASS}
+            style={{
+              position: `var(--${scopedId}-pos)` as any,
+              top: `var(--${scopedId}-top)`,
+              left: `var(--${scopedId}-left)`,
+              width: `var(--${scopedId}-w)`,
+              height: `var(--${scopedId}-h)`,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              background: `var(--${scopedId}-b2)`,
+            }}
+          />
+        </>
+      )}
+      {Boolean(onClick) && (
+        <>
+          <div
+            className={ATOMIX_GLASS.HOVER_1_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              opacity: `var(--${scopedId}-h1-o)`,
+              background: `var(--${scopedId}-h1)`,
+            }}
+          />
+          <div
+            className={ATOMIX_GLASS.HOVER_2_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              opacity: `var(--${scopedId}-h2-o)`,
+              background: `var(--${scopedId}-h2)`,
+            }}
+          />
+          <div
+            className={ATOMIX_GLASS.HOVER_3_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              mixBlendMode: `var(--${scopedId}-blend)` as any,
+              opacity: `var(--${scopedId}-h3-o)`,
+              background: `var(--${scopedId}-h3)`,
+            }}
+          />
+        </>
+      )}
+      {withOverLightLayers && (
+        <>
+          <div
+            className={ATOMIX_GLASS.BASE_LAYER_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              opacity: `var(--${scopedId}-base-o)`,
+              background: `var(--${scopedId}-base)`,
+            }}
+          />
+          <div
+            className={ATOMIX_GLASS.OVERLAY_LAYER_CLASS}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: `var(--${scopedId}-r)`,
+              transform: `var(--${scopedId}-t)`,
+              transition: `var(--${scopedId}-tr)`,
+              opacity: `var(--${scopedId}-over-o)`,
+              background: `var(--${scopedId}-over)`,
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export default AtomixGlass;
+

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

@@ -251,6 +251,35 @@ export const softClamp = (value: number, max: number): number => {
   return max * (1 - Math.exp(-value / max));
 };
 
+/**
+ * Spring-damper integration helper
+ * Calculates the next value based on velocity, stiffness, and damping.
+ */
+export const calculateSpring = (
+  current: number,
+  target: number,
+  velocity: number,
+  stiffness: number = 0.1,
+  damping: number = 0.8
+): { value: number; velocity: number } => {
+  const force = (target - current) * stiffness;
+  const newVelocity = (velocity + force) * damping;
+  const newValue = current + newVelocity;
+  return { value: newValue, velocity: newVelocity };
+};
+
+/**
+ * Calculate velocity from position delta and time
+ */
+export const calculateVelocity = (
+  current: number,
+  previous: number,
+  deltaTime: number
+): number => {
+  if (deltaTime <= 0) return 0;
+  return (current - previous) / deltaTime;
+};
+
 /**
  * Get displacement map URL based on mode
  */

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

@@ -402,7 +402,7 @@ export const Playground: Story = {
         name: 'Standard',
         icon: '⚖️',
         settings: {
-          displacementScale: 120,
+          displacementScale: 80,
           blurAmount: 1,
           saturation: 140,
           aberrationIntensity: 2,
@@ -429,6 +429,37 @@ export const Playground: Story = {
         mode: 'standard' as const,
         shader: 'liquidGlass' as const,
       },
+      liquid: {
+        name: 'Liquid Glass',
+        icon: '💧',
+        settings: {
+          displacementScale: 150,
+          blurAmount: 2.5,
+          saturation: 180,
+          aberrationIntensity: 4.0,
+          elasticity: 0.35,
+          borderRadius: 40,
+          overLight: false,
+          reducedMotion: false,
+          highContrast: false,
+          withoutEffects: false,
+          withLiquidBlur: true,
+          withBorder: true,
+          withTimeAnimation: true,
+          animationSpeed: 1.2,
+          withMultiLayerDistortion: true,
+          distortionOctaves: 4,
+          distortionLacunarity: 2.2,
+          distortionGain: 0.55,
+          distortionQuality: 'high' as const,
+          devicePreset: 'quality' as const,
+          disableResponsiveBreakpoints: false,
+          debugPerformance: false,
+          debugOverLight: false,
+        },
+        mode: 'prominent' as const,
+        shader: 'appleFluid' as const,
+      },
       premium: {
         name: 'Premium',
         icon: '💎',

package/src/components/Button/Button.stories.tsx

@@ -351,7 +351,7 @@ export const AllOutlineVariants: Story = {
       <Button label="Outline Success" variant="outline-success" />
       <Button label="Outline Info" variant="outline-info" />
       <Button label="Outline Warning" variant="outline-warning" />
-      <Button label="Outline Danger" variant="outline-danger" />
+      <Button label="Outline Danger" variant="outline-error" />
       <Button label="Outline Light" variant="outline-light" />
       <Button label="Outline Dark" variant="outline-dark" />
     </div>

package/src/components/Button/Button.tsx

@@ -172,21 +172,23 @@ export const Button = React.memo(
                   size: spinnerSize,
                   variant:
                     variant === 'link' ||
+                    variant === 'ghost' ||
                     (typeof variant === 'string' && variant.startsWith('outline-'))
                       ? 'primary'
                       : variant === 'danger'
-                        ? 'error'
-                        : variant,
+                        ? 'danger'
+                        : variant as any,
                 },
                 <Spinner
                   size={spinnerSize}
                   variant={
                     variant === 'link' ||
+                    variant === 'ghost' ||
                     (typeof variant === 'string' && variant.startsWith('outline-'))
                       ? 'primary'
                       : variant === 'danger'
-                        ? 'error'
-                        : variant
+                        ? 'danger'
+                        : variant as any
                   }
                 />
               )}
@@ -323,7 +325,6 @@ export const Button = React.memo(
           displacementScale: 20,
           blurAmount: 0,
           saturation: 200,
-          elasticity: 0,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
         return <AtomixGlass {...glassProps}>{buttonChildren}</AtomixGlass>;

package/src/components/Card/Card.tsx

@@ -377,7 +377,7 @@ const CardImpl = React.memo(
 
         if (glass) {
           const glassProps = glass === true ? {} : glass;
-          return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{anchorElement}</AtomixGlass>;
+          return <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass>;
         }
 
         return anchorElement;
@@ -392,7 +392,7 @@ const CardImpl = React.memo(
 
       if (glass) {
         const glassProps = glass === true ? {} : glass;
-        return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{divElement}</AtomixGlass>;
+        return <AtomixGlass {...glassProps}>{divElement}</AtomixGlass>;
       }
 
       return divElement;

package/src/components/Dropdown/Dropdown.tsx

@@ -36,6 +36,7 @@ type ExtendedComponentType<P = {}> = ComponentType<P> & {
 interface DropdownTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
   onClick?: (e: React.MouseEvent) => void;
   onKeyDown?: (e: React.KeyboardEvent) => void;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 interface DropdownMenuProps extends React.HTMLAttributes<HTMLUListElement> {}

package/src/components/EdgePanel/EdgePanel.tsx

@@ -140,9 +140,7 @@ const EdgePanelComponentBase = ({
     return null;
   }
 
-  const defaultGlassProps = {
-    elasticity: 0,
-  };
+  const defaultGlassProps = {};
 
   const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };