@metropolle/design-system 1.0.0-beta.2025.10.24.1740.ba2b09b → 1.0.0-beta.2025.12.11.1425.3d956d0

package/dist/react/index.esm.js

@@ -1370,12 +1370,35 @@ function cn(...classes) {
 /**
  * Glass Card Component
  *
- * Componente de cartão com efeito glassmorphism baseado na identidade Metropolle.
- * Migrado dos componentes Angular existentes com melhorias.
+ * Componente de cartão com efeito glassmorphism ou Liquid Glass (iOS 26 style).
+ *
+ * @example
+ * ```tsx
+ * // Liquid Glass (novo padrão)
+ * <GlassCard glassStyle="liquid" intensity="md">
+ *   Content here
+ * </GlassCard>
+ *
+ * // Glassmorphism tradicional (retrocompatível)
+ * <GlassCard glassStyle="glass" variant="dark">
+ *   Content here
+ * </GlassCard>
+ * ```
  */
-const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children, className, enableHover = true, style, ...props }, ref) => {
+const GlassCard = forwardRef(({ glassStyle = 'liquid', intensity = 'md', theme, variant = 'light', blur, opacity, children, className, enableHover = true, style, ...props }, ref) => {
+    // Resolve theme from new prop or deprecated variant
+    const resolvedTheme = theme ?? variant;
+    // =====================
+    // LIQUID GLASS MODE
+    // =====================
+    if (glassStyle === 'liquid') {
+        return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-liquid-glass', `mds-liquid-glass--${intensity}`, !enableHover && 'mds-liquid-glass--no-hover', className), style: style, ...props, children: children }));
+    }
+    // =====================
+    // GLASS MODE (legacy)
+    // =====================
     // Default opacities baseadas no design existente
-    const defaultOpacity = variant === 'light' ? 0.15 : 0.8;
+    const defaultOpacity = resolvedTheme === 'light' ? 0.15 : 0.8;
     const finalOpacity = opacity ?? defaultOpacity;
     // Use CSS classes for base styles to avoid hydration mismatches
     const baseStyles = {
@@ -1383,12 +1406,16 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
     };
     // Only apply custom styles for non-default values
     const customStyles = {};
-    if (blur !== 20) {
-        customStyles.backdropFilter = `blur(${blur}px)`;
-        customStyles.WebkitBackdropFilter = `blur(${blur}px)`;
+    // Support legacy blur prop or convert from intensity
+    const resolvedBlur = blur ?? (intensity ? {
+        xs: 2, sm: 4, md: 6, lg: 8, xl: 12
+    }[intensity] : 20);
+    if (resolvedBlur !== 20) {
+        customStyles.backdropFilter = `blur(${resolvedBlur}px)`;
+        customStyles.WebkitBackdropFilter = `blur(${resolvedBlur}px)`;
     }
     if (opacity !== undefined) {
-        customStyles.background = variant === 'light'
+        customStyles.background = resolvedTheme === 'light'
             ? `rgba(255, 255, 255, ${finalOpacity})`
             : `rgba(60, 60, 60, ${finalOpacity})`;
     }
@@ -1403,7 +1430,7 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
             borderColor: 'rgba(255, 255, 255, 0.2)',
             background: opacity !== undefined ? `rgba(70, 70, 70, ${finalOpacity})` : undefined,
         }
-    }[variant] : {};
+    }[resolvedTheme] : {};
     const handleMouseEnter = (e) => {
         if (!enableHover)
             return;
@@ -1421,7 +1448,7 @@ const GlassCard = forwardRef(({ variant = 'light', blur = 20, opacity, children,
         });
         props.onMouseLeave?.(e);
     };
-    return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-glass-card', `mds-glass-card--${variant}`, !enableHover && 'mds-glass-card--no-hover', className), style: {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: cn('mds-glass-card', `mds-glass-card--${resolvedTheme}`, !enableHover && 'mds-glass-card--no-hover', className), style: {
             ...baseStyles,
             ...customStyles,
             ...style