aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/speed-dial/SpeedDial.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"root":"SpeedDial-module_root__s6Lvi","hidden":"SpeedDial-module_hidden__-epI4","container":"SpeedDial-module_container__nrnfy","fab":"SpeedDial-module_fab__2ibfY","fabDisabled":"SpeedDial-module_fabDisabled__7lsqu","fabGlass":"SpeedDial-module_fabGlass__kdcks","fabSolidPrimary":"SpeedDial-module_fabSolidPrimary__uPa0m","fabSolidSecondary":"SpeedDial-module_fabSolidSecondary__RObCh","fabSolidError":"SpeedDial-module_fabSolidError__5e3OF","fabSolidInfo":"SpeedDial-module_fabSolidInfo__gpKR9","fabSolidSuccess":"SpeedDial-module_fabSolidSuccess__7jAE3","fabSolidWarning":"SpeedDial-module_fabSolidWarning__JLrWa","fabSolidDefault":"SpeedDial-module_fabSolidDefault__fiYnJ","fabSmall":"SpeedDial-module_fabSmall__-UBn4","fabMedium":"SpeedDial-module_fabMedium__fsF8u","fabLarge":"SpeedDial-module_fabLarge__cjhIA","fabHover":"SpeedDial-module_fabHover__zWwwv","fabActive":"SpeedDial-module_fabActive__yWrgP","actions":"SpeedDial-module_actions__sLZbA","actionsOpen":"SpeedDial-module_actionsOpen__mUdLe","actionsVertical":"SpeedDial-module_actionsVertical__4Hk7y","actionsHorizontal":"SpeedDial-module_actionsHorizontal__tPCWJ","backdrop":"SpeedDial-module_backdrop__Ye16h","backdropVisible":"SpeedDial-module_backdropVisible__zrttV"};
+
+export { styles as default };
+//# sourceMappingURL=SpeedDial.module.css.js.map

package/dist/esm/components/speed-dial/SpeedDial.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/speed-dial/SpeedDialAction.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useCallback } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import styles from './SpeedDialAction.module.css.js';
+
+// Calculate the position based on direction
+const getPosition = (direction, index, totalActions, size) => {
+  // Base spacing between buttons
+  const spacing = size === 'small' ? 40 : size === 'large' ? 65 : 55;
+  const offset = (index + 1) * spacing;
+  switch (direction) {
+    case 'up':
+      return {
+        bottom: `${offset}px`
+      };
+    case 'down':
+      return {
+        top: `${offset}px`
+      };
+    case 'left':
+      return {
+        right: `${offset}px`
+      };
+    case 'right':
+      return {
+        left: `${offset}px`
+      };
+    default:
+      return {
+        top: `${offset}px`
+      };
+  }
+};
+const getTransitionDelay = (index, totalActions, opening) => {
+  if (!opening) {
+    return `${(totalActions - 1 - index) * 30}ms`;
+  }
+  return `${index * 30}ms`;
+};
+const SpeedDialActionComponent = (props, ref) => {
+  const {
+    className,
+    style,
+    icon,
+    tooltipTitle,
+    tooltip,
+    disabled = false,
+    onClick,
+    glass = false,
+    index = 0,
+    totalActions = 1,
+    direction = 'up',
+    transition = true,
+    showTooltip = true,
+    size = 'medium',
+    open = false,
+    ...rest
+  } = props;
+  const positionStyle = useMemo(() => getPosition(direction, index, totalActions, size), [direction, index, totalActions, size]);
+  const transitionDelay = useMemo(() => transition ? getTransitionDelay(index, totalActions, open) : '0ms', [index, totalActions, open, transition]);
+  const handleClick = useCallback(event => {
+    event.stopPropagation();
+    if (!disabled) {
+      onClick?.(event);
+    }
+  }, [disabled, onClick]);
+  const handleKeyDown = useCallback(event => {
+    if (disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick?.(event);
+    }
+  }, [disabled, onClick]);
+  const tooltipContent = tooltipTitle ?? tooltip;
+  const actionClassName = cn(styles.action, glass ? styles.actionGlass : styles.actionSolid, size === 'small' && styles.sizeSmall, size === 'medium' && styles.sizeMedium, size === 'large' && styles.sizeLarge, !open && direction === 'up' && styles.hiddenUp, !open && direction === 'down' && styles.hiddenDown, !open && direction === 'left' && styles.hiddenLeft, !open && direction === 'right' && styles.hiddenRight, disabled && styles.actionDisabled, !transition && styles.actionNoTransition, className);
+  const tooltipClassName = cn(styles.tooltip, direction === 'up' && styles.tooltipUp, direction === 'down' && styles.tooltipDown, direction === 'left' && styles.tooltipLeft, direction === 'right' && styles.tooltipRight, open && showTooltip && tooltipContent && styles.tooltipVisible);
+  return jsxs("div", {
+    ref: ref,
+    className: cn('glass-speed-dial-action', actionClassName),
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled,
+    style: {
+      ...positionStyle,
+      transitionDelay,
+      ...(style ?? {})
+    },
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children: [icon, tooltipContent && jsx("div", {
+      className: tooltipClassName,
+      children: tooltipContent
+    })]
+  });
+};
+const SpeedDialAction = /*#__PURE__*/forwardRef(SpeedDialActionComponent);
+SpeedDialAction.displayName = 'SpeedDialAction';
+
+export { SpeedDialAction as default };
+//# sourceMappingURL=SpeedDialAction.js.map

package/dist/esm/components/speed-dial/SpeedDialAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDialAction.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/speed-dial/SpeedDialAction.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"action":"SpeedDialAction-module_action__Ohy1g","actionGlass":"SpeedDialAction-module_actionGlass__Tm4zZ","actionSolid":"SpeedDialAction-module_actionSolid__ZZSDf","actionDisabled":"SpeedDialAction-module_actionDisabled__jUCzM","sizeSmall":"SpeedDialAction-module_sizeSmall__jsi1W","sizeMedium":"SpeedDialAction-module_sizeMedium__CULQ8","sizeLarge":"SpeedDialAction-module_sizeLarge__mmfLo","hiddenUp":"SpeedDialAction-module_hiddenUp__Mr5t1","hiddenDown":"SpeedDialAction-module_hiddenDown__y4Rcv","hiddenLeft":"SpeedDialAction-module_hiddenLeft__uA-1f","hiddenRight":"SpeedDialAction-module_hiddenRight__QsibO","tooltip":"SpeedDialAction-module_tooltip__ycpxK","tooltipVisible":"SpeedDialAction-module_tooltipVisible__9ZWv8","tooltipUp":"SpeedDialAction-module_tooltipUp__bCmlF","tooltipDown":"SpeedDialAction-module_tooltipDown__gdYfI","tooltipLeft":"SpeedDialAction-module_tooltipLeft__rfom-","tooltipRight":"SpeedDialAction-module_tooltipRight__NIIpP","actionNoTransition":"SpeedDialAction-module_actionNoTransition__3kQSu"};
+
+export { styles as default };
+//# sourceMappingURL=SpeedDialAction.module.css.js.map

package/dist/esm/components/speed-dial/SpeedDialAction.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDialAction.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/speed-dial/SpeedDialIcon.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import styles from './SpeedDialIcon.module.css.js';
+
+// Default icons
+const DefaultIcon = () => jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: jsx("path", {
+    d: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z",
+    fill: "currentColor"
+  })
+});
+const DefaultOpenIcon = () => jsx("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: jsx("path", {
+    d: "M19 13H5V11H19V13Z",
+    fill: "currentColor"
+  })
+});
+const isOpenIconProvided = props => Object.prototype.hasOwnProperty.call(props, 'openIcon');
+function SpeedDialIconComponent(props, ref) {
+  const {
+    className,
+    style,
+    icon,
+    openIcon,
+    open = false,
+    ...rest
+  } = props;
+  // Default icons
+  const iconToShow = icon || jsx(DefaultIcon, {});
+  const openIconToShow = openIcon || jsx(DefaultOpenIcon, {});
+  // If only using one icon, rotate it
+  if (!openIcon && !isOpenIconProvided(props)) {
+    return jsx("div", {
+      ref: ref,
+      className: cn('glass-speed-dial-icon', styles.icon, open && styles.iconOpen, className),
+      style: style,
+      ...rest,
+      children: iconToShow
+    });
+  }
+  // Using two separate icons for open/closed states
+  return jsxs("div", {
+    ref: ref,
+    className: cn('glass-speed-dial-icon', styles.iconContainer, className),
+    style: style,
+    ...rest,
+    children: [jsx("div", {
+      className: cn(styles.iconLayer, !open && styles.iconLayerActive),
+      children: iconToShow
+    }), jsx("div", {
+      className: cn(styles.iconLayer, open && styles.iconLayerActive),
+      children: openIconToShow
+    })]
+  });
+}
+/**
+ * SpeedDialIcon Component
+ *
+ * An icon component for the SpeedDial that transitions between open and closed states.
+ */
+const SpeedDialIcon = /*#__PURE__*/forwardRef(SpeedDialIconComponent);
+
+export { SpeedDialIcon, SpeedDialIcon as default };
+//# sourceMappingURL=SpeedDialIcon.js.map

package/dist/esm/components/speed-dial/SpeedDialIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDialIcon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/speed-dial/SpeedDialIcon.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"icon":"SpeedDialIcon-module_icon__sJqKt","iconOpen":"SpeedDialIcon-module_iconOpen__txZ5a","iconContainer":"SpeedDialIcon-module_iconContainer__r6YVL","iconLayer":"SpeedDialIcon-module_iconLayer__PnHPk","iconLayerActive":"SpeedDialIcon-module_iconLayerActive__70cjM"};
+
+export { styles as default };
+//# sourceMappingURL=SpeedDialIcon.module.css.js.map

package/dist/esm/components/speed-dial/SpeedDialIcon.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDialIcon.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/ssr/AuraGlassClientBoundary.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { isBrowser } from '../../utils/env.js';
+
+const AuraGlassClientBoundary = ({
+  children,
+  fallback = null
+}) => {
+  const [isClient, setIsClient] = useState(() => isBrowser());
+  useEffect(() => {
+    if (isClient) return;
+    setIsClient(true);
+  }, [isClient]);
+  if (!isClient) {
+    return jsx(Fragment, {
+      children: fallback
+    });
+  }
+  return jsx(Fragment, {
+    children: children
+  });
+};
+
+export { AuraGlassClientBoundary, AuraGlassClientBoundary as default };
+//# sourceMappingURL=AuraGlassClientBoundary.js.map

package/dist/esm/components/ssr/AuraGlassClientBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuraGlassClientBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/status/GlassConnectionStatus.js

@@ -0,0 +1,204 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { forwardRef, useState, useCallback, useEffect } from 'react';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import '../../primitives/motion/MotionFramer.js';
+
+const defaultLabels = {
+  online: "Online",
+  offline: "Offline",
+  slow: "Slow Connection"
+};
+const GlassConnectionStatus = /*#__PURE__*/forwardRef(({
+  status: statusProp = "auto",
+  showText = true,
+  showQuality = false,
+  position = "top-right",
+  size = "md",
+  elevation = "level3",
+  autoHideDelay = 0,
+  onStatusChange,
+  animate = true,
+  labels = defaultLabels,
+  className,
+  ...props
+}, ref) => {
+  const [status, setStatus] = useState("online");
+  const [effectiveType, setEffectiveType] = useState("");
+  const [isVisible, setIsVisible] = useState(true);
+  const checkConnection = useCallback(() => {
+    if (typeof window === "undefined") return "online";
+    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+    const online = navigator.onLine;
+    if (!online) {
+      return "offline";
+    }
+    if (connection) {
+      const effectiveType = connection.effectiveType;
+      setEffectiveType(effectiveType);
+      if (effectiveType === "slow-2g" || effectiveType === "2g") {
+        return "slow";
+      }
+    }
+    return "online";
+  }, []);
+  useEffect(() => {
+    if (statusProp !== "auto") {
+      setStatus(statusProp);
+      onStatusChange?.(statusProp);
+      return;
+    }
+    const updateStatus = () => {
+      const newStatus = checkConnection();
+      setStatus(newStatus);
+      onStatusChange?.(newStatus);
+      if (newStatus === "online" && autoHideDelay > 0) {
+        setTimeout(() => setIsVisible(false), autoHideDelay);
+      } else {
+        setIsVisible(true);
+      }
+    };
+    updateStatus();
+    const handleOnline = () => updateStatus();
+    const handleOffline = () => updateStatus();
+    const handleConnectionChange = () => updateStatus();
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+    if (connection) {
+      connection.addEventListener("change", handleConnectionChange);
+    }
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+      if (connection) {
+        connection.removeEventListener("change", handleConnectionChange);
+      }
+    };
+  }, [statusProp, autoHideDelay, checkConnection, onStatusChange]);
+  if (!isVisible) return null;
+  const sizeClasses = {
+    sm: {
+      dot: "w-2 h-2",
+      text: "glass-text-xs",
+      padding: "glass-p-2",
+      icon: "w-4 h-4"
+    },
+    md: {
+      dot: "w-3 h-3",
+      text: "glass-text-sm",
+      padding: "glass-p-3",
+      icon: "w-5 h-5"
+    },
+    lg: {
+      dot: "w-4 h-4",
+      text: "glass-text-base",
+      padding: "glass-p-4",
+      icon: "w-6 h-6"
+    }
+  };
+  const statusConfig = {
+    online: {
+      color: "bg-green-500",
+      textColor: "text-green-500",
+      label: labels.online || defaultLabels.online,
+      icon: jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: sizeClasses[size].icon,
+        children: jsx("path", {
+          d: "M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      })
+    },
+    offline: {
+      color: "bg-red-500",
+      textColor: "text-red-500",
+      label: labels.offline || defaultLabels.offline,
+      icon: jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: sizeClasses[size].icon,
+        children: jsx("path", {
+          d: "M3 3L21 21M16 8C17.5 9.5 18 10 18 12C18 14 17.5 14.5 16 16M8 8C6.5 9.5 6 10 6 12C6 14 6.5 14.5 8 16M12 12V12.01M12 8V8.01M12 16V16.01",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      })
+    },
+    slow: {
+      color: "bg-yellow-500",
+      textColor: "text-yellow-500",
+      label: labels.slow || defaultLabels.slow,
+      icon: jsx("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: sizeClasses[size].icon,
+        children: jsx("path", {
+          d: "M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: animate ? "animate-pulse" : ""
+        })
+      })
+    }
+  };
+  const config = statusConfig[status];
+  const positionClasses = {
+    "top-left": "fixed top-4 left-4",
+    "top-right": "fixed top-4 right-4",
+    "bottom-left": "fixed bottom-4 left-4",
+    "bottom-right": "fixed bottom-4 right-4",
+    inline: "inline-flex"
+  };
+  return jsx(OptimizedGlassCore, {
+    "data-glass-component": true,
+    ref: ref,
+    elevation: elevation,
+    className: cn("flex items-center gap-2 glass-radius-full", sizeClasses[size].padding, position !== "inline" && "z-50", positionClasses[position], className),
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    ...props,
+    children: jsxs("div", {
+      className: 'relative glass-flex glass-items-center glass-gap-2',
+      children: [config.icon ? jsx("div", {
+        className: config.textColor,
+        children: config.icon
+      }) : jsxs("div", {
+        className: 'relative glass-flex glass-items-center glass-justify-center',
+        children: [jsx("div", {
+          className: cn(sizeClasses[size].dot, config.color, "rounded-full", animate && "animate-pulse")
+        }), animate && status !== "online" && jsx("div", {
+          className: cn(sizeClasses[size].dot, config.color, "rounded-full absolute animate-ping opacity-75")
+        })]
+      }), showText && jsx("span", {
+        className: cn(sizeClasses[size].text, "font-medium glass-text-primary"),
+        children: config.label
+      }), showQuality && effectiveType && jsx("span", {
+        className: cn(sizeClasses[size].text, "glass-text-secondary uppercase"),
+        children: effectiveType
+      })]
+    })
+  });
+});
+GlassConnectionStatus.displayName = "GlassConnectionStatus";
+
+export { GlassConnectionStatus, GlassConnectionStatus as default };
+//# sourceMappingURL=GlassConnectionStatus.js.map

package/dist/esm/components/status/GlassConnectionStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassConnectionStatus.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/surfaces/DimensionalGlass.js

@@ -0,0 +1,156 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { forwardRef } from 'react';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+import { LiquidGlassMaterial } from '../../primitives/LiquidGlassMaterial.js';
+
+/**
+ * DimensionalGlass Component
+ * Modern implementation using OptimizedGlass with dimensional effects
+ */
+const DimensionalGlass = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  style,
+  elevation = 'level2',
+  blurStrength = 'standard',
+  opacity = 'medium',
+  borderOpacity = 'medium',
+  borderWidth = 1,
+  fullWidth = false,
+  fullHeight = false,
+  borderRadius = 12,
+  interactive = true,
+  padding = 16,
+  depth = 0.5,
+  dynamicShadow = true,
+  animate = false,
+  zIndex = 1,
+  backgroundColor = 'var(--glass-bg-default)',
+  maxTilt = 5,
+  hoverScale = 1.02,
+  animationConfig,
+  disableAnimation,
+  motionSensitivity,
+  material = 'glass',
+  materialProps,
+  ...rest
+}, ref) => {
+  const prefersReducedMotion = useReducedMotion();
+  const shouldAnimate = animate && !disableAnimation && !prefersReducedMotion;
+  // Map blur strength to intensity
+  const intensityMap = {
+    none: 'subtle',
+    light: 'subtle',
+    standard: 'medium',
+    heavy: 'strong'
+  };
+  // Map elevation to OptimizedGlass elevation levels
+  const getElevationLevel = elev => {
+    if (typeof elev === 'string' && elev.startsWith('level')) {
+      return elev;
+    }
+    // Map numeric elevation to level
+    const numElev = typeof elev === 'number' ? elev : 2;
+    if (numElev <= 1) return 'level1';
+    if (numElev <= 2) return 'level2';
+    if (numElev <= 3) return 'level3';
+    return 'level4';
+  };
+  // Calculate depth transform
+  const depthTransform = depth > 0 ? `translateZ(${depth * 10}px)` : '';
+  return jsx(MotionFramer, {
+    preset: shouldAnimate ? "fadeIn" : "none",
+    className: cn('transform-gpu', shouldAnimate && 'animate-pulse-subtle', className),
+    children: material === 'liquid' ? jsx(LiquidGlassMaterial, {
+      ref: ref,
+      ior: materialProps?.ior || 1.52,
+      thickness: materialProps?.thickness || depth * 20 + 8,
+      tint: materialProps?.tint || {
+        r: 0,
+        g: 0,
+        b: 0,
+        a: depth * 0.05 + 0.03
+      },
+      variant: materialProps?.variant === 'clear' ? 'clear' : materialProps?.variant === 'regular' ? 'regular' : 'regular',
+      quality: materialProps?.quality || 'ultra',
+      environmentAdaptation: true,
+      motionResponsive: true,
+      interactive: interactive,
+      className: cn(
+      // Base styles
+      'relative overflow-hidden transition-all duration-300', 'liquid-glass-dimensional-surface',
+      // Dimensions
+      fullWidth && 'w-full', fullHeight && 'h-full',
+      // Interactive states
+      interactive && ['hover:scale-[var(--hover-scale)] active:scale-95', 'cursor-pointer'],
+      // Animation states
+      shouldAnimate && 'animate-dimensional-float', className),
+      style: {
+        ...style,
+        '--hover-scale': hoverScale.toString(),
+        '--liquid-glass-dimensional-depth': depth.toString(),
+        '--liquid-glass-tilt-max': `${maxTilt}deg`,
+        transform: depthTransform,
+        zIndex,
+        padding: typeof padding === 'number' ? `${padding}px` : padding,
+        borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius
+      },
+      "data-liquid-glass-dimensional": "true",
+      "data-dimensional-depth": depth,
+      "data-dimensional-elevation": elevation,
+      ...Object.fromEntries(Object.entries(rest).filter(([key]) => key !== 'variant')),
+      children: children
+    }) : jsx(OptimizedGlassCore, {
+      ref: ref,
+      intent: "neutral",
+      elevation: getElevationLevel(elevation),
+      intensity: intensityMap[blurStrength],
+      depth: Math.round(depth * 4),
+      tint: "neutral",
+      border: borderOpacity === 'none' ? 'none' : 'subtle',
+      animation: shouldAnimate ? 'float' : 'none',
+      performanceMode: "medium",
+      liftOnHover: interactive,
+      press: interactive,
+      className: cn(
+      // Base styles
+      'relative overflow-hidden transition-all duration-300',
+      // Dimensional effects
+      'transform-style-preserve-3d', depthTransform && '[transform:' + depthTransform + ']',
+      // Size
+      fullWidth && 'w-full', fullHeight && 'h-full',
+      // Spacing
+      typeof padding === 'number' ? `p-${Math.round(padding / 4)}` : 'glass-p-4',
+      // Border radius
+      typeof borderRadius === 'number' ? borderRadius <= 4 ? 'glass-radius-md' : borderRadius <= 8 ? 'glass-radius-lg' : 'glass-radius-xl' : 'glass-radius-xl',
+      // Z-index
+      zIndex > 1 && `z-${Math.min(zIndex, 50)}`, className),
+      style: {
+        backgroundColor,
+        borderWidth: borderWidth > 0 ? `${borderWidth}px` : undefined,
+        perspective: interactive ? '1000px' : undefined,
+        ...style
+      },
+      ...rest,
+      children: jsx("div", {
+        className: cn('relative h-full w-full', interactive && 'transform-gpu transition-transform duration-200', depth > 0 && 'transform-style-preserve-3d'),
+        style: {
+          transform: depth > 0 ? `translateZ(${depth * 5}px)` : undefined
+        },
+        children: children
+      })
+    })
+  });
+});
+DimensionalGlass.displayName = 'DimensionalGlass';
+
+export { DimensionalGlass, DimensionalGlass as default };
+//# sourceMappingURL=DimensionalGlass.js.map

package/dist/esm/components/surfaces/DimensionalGlass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DimensionalGlass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}