@ajuarezso/capacitor-liquid-glass 0.2.0 → 0.3.1

package/dist/esm/definitions.d.ts

@@ -16,8 +16,11 @@ export interface LiquidGlassTabItem {
  *    more see-through than default.
  *  - `'transparent'`: no background, no blur — content behind shows through 100%.
  *    Trade-off: legibilidad puede sufrir sobre contenido caótico.
+ *  - `'liquidGlass'`: REAL iOS 26 `UIGlassEffect` — el mismo material que usan
+ *    Music y App Store. En iOS < 26 cae a `UIBlurEffect.systemThinMaterial`
+ *    (aproximación cercana con system vibrancy).
  */
-export type TabBarStyle = 'default' | 'ultraThin' | 'transparent';
+export type TabBarStyle = 'default' | 'ultraThin' | 'transparent' | 'liquidGlass';
 export interface ShowTabBarOptions {
     items: LiquidGlassTabItem[];
     /** Index of the initially selected item. Defaults to 0. */

package/ios/Sources/LiquidGlassPlugin/LiquidGlassTabBarOverlay.swift

@@ -29,6 +29,9 @@ enum LiquidGlassTabBarStyle: String {
     case ultraThin
     /// No background, no blur — content behind shows through 100%.
     case transparent
+    /// REAL iOS 26 `UIGlassEffect` (Music + App Store material).
+    /// Fallback en iOS < 26 → `UIBlurEffect.systemThinMaterial`.
+    case liquidGlass
 }
 
 /// A floating UITabBar overlay that adopts iOS 26 Liquid Glass automatically
@@ -44,6 +47,11 @@ final class LiquidGlassTabBarOverlay: NSObject {
     private weak var window: UIWindow?
     private var tabBar: UITabBar?
     private var items: [LiquidGlassTabItem] = []
+    /// Overlay `UIVisualEffectView` que provee el material cuando el style es
+    /// `.liquidGlass`. Solo se monta cuando el estilo lo requiere, y se
+    /// destruye al cambiar a otro estilo. Vive como subview del window justo
+    /// DEBAJO del `tabBar` (que en este modo queda 100% transparente).
+    private var glassOverlayView: UIVisualEffectView?
 
     func attach(to window: UIWindow) {
         if self.window === window, tabBar != nil { return }
@@ -73,20 +81,36 @@ final class LiquidGlassTabBarOverlay: NSObject {
     /// - `default`: Liquid Glass (iOS 26+) o blur translúcido como fallback.
     /// - `ultraThin`: blur mínimo `systemUltraThinMaterial` — más ver-through.
     /// - `transparent`: sin background ni blur — content behind se ve completo.
+    /// - `liquidGlass`: tab bar 100% transparente + overlay `UIVisualEffectView`
+    ///    con `UIGlassEffect` (iOS 26+) o `systemThinMaterial` fallback.
     private func applyAppearance(_ tabBar: UITabBar, style: LiquidGlassTabBarStyle) {
         let appearance = UITabBarAppearance()
         switch style {
         case .default:
             appearance.configureWithDefaultBackground()
+            removeGlassOverlay()
         case .ultraThin:
             appearance.configureWithDefaultBackground()
             appearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
             appearance.backgroundColor = UIColor.clear
+            removeGlassOverlay()
         case .transparent:
             appearance.configureWithTransparentBackground()
             appearance.backgroundEffect = nil
             appearance.backgroundColor = UIColor.clear
             appearance.shadowColor = UIColor.clear
+            removeGlassOverlay()
+        case .liquidGlass:
+            // Tab bar 100% transparente — el material lo aporta el overlay
+            // `UIVisualEffectView` con `UIGlassEffect` montado debajo del bar.
+            // Es el patrón canon de iOS 26 para aplicar Liquid Glass real a
+            // controles que no exponen API directa para asignarlo (UITabBar
+            // solo acepta `UIBlurEffect` en `backgroundEffect`).
+            appearance.configureWithTransparentBackground()
+            appearance.backgroundEffect = nil
+            appearance.backgroundColor = UIColor.clear
+            appearance.shadowColor = UIColor.clear
+            installGlassOverlay(behind: tabBar)
         }
         tabBar.standardAppearance = appearance
         if #available(iOS 15.0, *) {
@@ -94,6 +118,50 @@ final class LiquidGlassTabBarOverlay: NSObject {
         }
     }
 
+    /// Monta un `UIVisualEffectView` con `UIGlassEffect` (iOS 26+) o
+    /// `systemThinMaterial` como fallback, justo DEBAJO del `tabBar` en el
+    /// z-order del window. `tabBar` está en modo transparente, así que todo
+    /// el material visible viene del overlay.
+    ///
+    /// El overlay queda con `isUserInteractionEnabled = false` para no
+    /// interferir con los taps que el `tabBar` consume por encima.
+    private func installGlassOverlay(behind tabBar: UITabBar) {
+        guard let parent = tabBar.superview else { return }
+        // Idempotente: si ya existe overlay no recrearlo (evita flicker en
+        // re-configs por badge updates u otros cambios sin style change).
+        if glassOverlayView != nil { return }
+
+        let effect: UIVisualEffect
+        #if compiler(>=6.1)
+        if #available(iOS 26.0, *) {
+            effect = UIGlassEffect()
+        } else {
+            effect = UIBlurEffect(style: .systemThinMaterial)
+        }
+        #else
+        effect = UIBlurEffect(style: .systemThinMaterial)
+        #endif
+
+        let overlay = UIVisualEffectView(effect: effect)
+        overlay.translatesAutoresizingMaskIntoConstraints = false
+        overlay.isUserInteractionEnabled = false
+        parent.insertSubview(overlay, belowSubview: tabBar)
+
+        NSLayoutConstraint.activate([
+            overlay.leadingAnchor.constraint(equalTo: tabBar.leadingAnchor),
+            overlay.trailingAnchor.constraint(equalTo: tabBar.trailingAnchor),
+            overlay.topAnchor.constraint(equalTo: tabBar.topAnchor),
+            overlay.bottomAnchor.constraint(equalTo: tabBar.bottomAnchor),
+        ])
+
+        self.glassOverlayView = overlay
+    }
+
+    private func removeGlassOverlay() {
+        glassOverlayView?.removeFromSuperview()
+        glassOverlayView = nil
+    }
+
     func configure(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?, style: LiquidGlassTabBarStyle) {
         guard let tabBar else { return }
 
@@ -153,6 +221,12 @@ final class LiquidGlassTabBarOverlay: NSObject {
         tabBar.isHidden = false
         tabBar.alpha = 0
         tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
+        // Sincronizar el overlay glass (si está montado) con la misma curva,
+        // sino el material queda visible mientras el bar fade-out/in.
+        let overlay = glassOverlayView
+        overlay?.isHidden = false
+        overlay?.alpha = 0
+        overlay?.transform = CGAffineTransform(translationX: 0, y: 20)
         // Fade-in + slide-up (curva native iOS para apariciones)
         UIView.animate(
             withDuration: 0.28,
@@ -163,6 +237,8 @@ final class LiquidGlassTabBarOverlay: NSObject {
             animations: {
                 tabBar.alpha = 1
                 tabBar.transform = .identity
+                overlay?.alpha = 1
+                overlay?.transform = .identity
             },
             completion: nil
         )
@@ -173,6 +249,7 @@ final class LiquidGlassTabBarOverlay: NSObject {
         guard let tabBar = tabBar else { return }
         if tabBar.isHidden { return }
         // Fade-out + slide-down (más rápido que el show — el exit es snappy)
+        let overlay = glassOverlayView
         UIView.animate(
             withDuration: 0.18,
             delay: 0,
@@ -180,10 +257,14 @@ final class LiquidGlassTabBarOverlay: NSObject {
             animations: {
                 tabBar.alpha = 0
                 tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
+                overlay?.alpha = 0
+                overlay?.transform = CGAffineTransform(translationX: 0, y: 20)
             },
             completion: { _ in
                 tabBar.isHidden = true
                 tabBar.transform = .identity
+                overlay?.isHidden = true
+                overlay?.transform = .identity
             }
         )
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/capacitor-liquid-glass",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "iOS 26 Liquid Glass native chrome (TabBar, NavigationBar, Alerts, Sheets) for Capacitor apps. Falls back gracefully on iOS < 26 and Android.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",