@ajuarezso/capacitor-liquid-glass 0.1.0 → 0.1.1

package/dist/esm/definitions.d.ts

@@ -9,12 +9,23 @@ export interface LiquidGlassTabItem {
     /** Optional badge value (e.g. "3" or "•"). */
     badge?: string;
 }
+/**
+ * Visual style of the tab bar background.
+ *  - `'default'` (default): Liquid Glass on iOS 26+ (translucent blurred).
+ *  - `'ultraThin'`: minimal blur (`UIBlurEffect.Style.systemUltraThinMaterial`),
+ *    more see-through than default.
+ *  - `'transparent'`: no background, no blur — content behind shows through 100%.
+ *    Trade-off: legibilidad puede sufrir sobre contenido caótico.
+ */
+export type TabBarStyle = 'default' | 'ultraThin' | 'transparent';
 export interface ShowTabBarOptions {
     items: LiquidGlassTabItem[];
     /** Index of the initially selected item. Defaults to 0. */
     selectedIndex?: number;
     /** Tint color for selected state, hex "#RRGGBB". Defaults to iOS system tint. */
     tintColor?: string;
+    /** Visual style of the tab bar background. Defaults to `'default'`. */
+    tabBarStyle?: TabBarStyle;
 }
 export interface SetSelectedTabOptions {
     /** Either pass numeric index or the item id. */

package/ios/Sources/LiquidGlassPlugin/LiquidGlassPlugin.swift

@@ -23,6 +23,7 @@ public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
         }
         let selectedIndex = call.getInt("selectedIndex") ?? 0
         let tintHex = call.getString("tintColor")
+        let styleRaw = call.getString("tabBarStyle") ?? "default"
 
         let items = rawItems.compactMap { LiquidGlassTabItem(dictionary: $0) }
         guard !items.isEmpty else {
@@ -32,7 +33,7 @@ public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
 
         DispatchQueue.main.async { [weak self] in
             guard let self else { return }
-            self.presentTabBar(items: items, selectedIndex: selectedIndex, tintHex: tintHex)
+            self.presentTabBar(items: items, selectedIndex: selectedIndex, tintHex: tintHex, styleRaw: styleRaw)
             call.resolve()
         }
     }
@@ -85,7 +86,7 @@ public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
         }
     }
 
-    private func presentTabBar(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?) {
+    private func presentTabBar(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?, styleRaw: String) {
         guard let window = UIApplication.shared.capacitorWindow else { return }
 
         if tabBarOverlay == nil {
@@ -102,8 +103,9 @@ public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
             tabBarOverlay = overlay
         }
 
+        let style = LiquidGlassTabBarStyle(rawValue: styleRaw) ?? .default
         tabBarOverlay?.attach(to: window)
-        tabBarOverlay?.configure(items: items, selectedIndex: selectedIndex, tintHex: tintHex)
+        tabBarOverlay?.configure(items: items, selectedIndex: selectedIndex, tintHex: tintHex, style: style)
         tabBarOverlay?.show()
     }
 }

package/ios/Sources/LiquidGlassPlugin/LiquidGlassTabBarOverlay.swift

@@ -21,6 +21,16 @@ struct LiquidGlassTabItem {
     }
 }
 
+/// Visual style of the tab bar background.
+enum LiquidGlassTabBarStyle: String {
+    /// Translucent blurred — auto-applies Liquid Glass on iOS 26+ SDK.
+    case `default`
+    /// Minimal blur (`systemUltraThinMaterial`) — more see-through than default.
+    case ultraThin
+    /// No background, no blur — content behind shows through 100%.
+    case transparent
+}
+
 /// A floating UITabBar overlay that adopts iOS 26 Liquid Glass automatically
 /// when the app is built against the iOS 26 SDK. On earlier iOS the bar falls
 /// back to the translucent blurred UITabBar appearance.
@@ -43,13 +53,9 @@ final class LiquidGlassTabBarOverlay: NSObject {
         tabBar.translatesAutoresizingMaskIntoConstraints = false
         tabBar.delegate = self
 
-        // Default appearance triggers Liquid Glass automatically on iOS 26.
-        let appearance = UITabBarAppearance()
-        appearance.configureWithDefaultBackground()
-        tabBar.standardAppearance = appearance
-        if #available(iOS 15.0, *) {
-            tabBar.scrollEdgeAppearance = appearance
-        }
+        // Default appearance: triggers Liquid Glass automatically on iOS 26+.
+        // (Sobreescrito en `configure(...)` si el caller pidió otro estilo).
+        applyAppearance(tabBar, style: .default)
 
         window.addSubview(tabBar)
 
@@ -63,7 +69,32 @@ final class LiquidGlassTabBarOverlay: NSObject {
         emitLayout()
     }
 
-    func configure(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?) {
+    /// Aplica el appearance correspondiente al estilo solicitado.
+    /// - `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.
+    private func applyAppearance(_ tabBar: UITabBar, style: LiquidGlassTabBarStyle) {
+        let appearance = UITabBarAppearance()
+        switch style {
+        case .default:
+            appearance.configureWithDefaultBackground()
+        case .ultraThin:
+            appearance.configureWithDefaultBackground()
+            appearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
+            appearance.backgroundColor = UIColor.clear
+        case .transparent:
+            appearance.configureWithTransparentBackground()
+            appearance.backgroundEffect = nil
+            appearance.backgroundColor = UIColor.clear
+            appearance.shadowColor = UIColor.clear
+        }
+        tabBar.standardAppearance = appearance
+        if #available(iOS 15.0, *) {
+            tabBar.scrollEdgeAppearance = appearance
+        }
+    }
+
+    func configure(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?, style: LiquidGlassTabBarStyle) {
         guard let tabBar else { return }
 
         // Preserve selection across re-configs (badge changes, etc.)
@@ -73,6 +104,9 @@ final class LiquidGlassTabBarOverlay: NSObject {
 
         self.items = items
 
+        // Re-aplica appearance por si el caller cambió de estilo en runtime.
+        applyAppearance(tabBar, style: style)
+
         let uiItems: [UITabBarItem] = items.enumerated().map { index, item in
             let tab = UITabBarItem(
                 title: item.label,
@@ -108,12 +142,46 @@ final class LiquidGlassTabBarOverlay: NSObject {
     }
 
     func show() {
-        tabBar?.isHidden = false
+        guard let tabBar = tabBar else { return }
+        // Si ya está visible, no hacer nada (evita flicker en re-show consecutivos)
+        if !tabBar.isHidden && tabBar.alpha == 1.0 { emitLayout(); return }
+        // Reset estado pre-animación
+        tabBar.isHidden = false
+        tabBar.alpha = 0
+        tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
+        // Fade-in + slide-up (curva native iOS para apariciones)
+        UIView.animate(
+            withDuration: 0.28,
+            delay: 0,
+            usingSpringWithDamping: 0.85,
+            initialSpringVelocity: 0,
+            options: [.curveEaseOut, .allowUserInteraction],
+            animations: {
+                tabBar.alpha = 1
+                tabBar.transform = .identity
+            },
+            completion: nil
+        )
         emitLayout()
     }
 
     func hide() {
-        tabBar?.isHidden = true
+        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)
+        UIView.animate(
+            withDuration: 0.18,
+            delay: 0,
+            options: [.curveEaseIn, .allowUserInteraction],
+            animations: {
+                tabBar.alpha = 0
+                tabBar.transform = CGAffineTransform(translationX: 0, y: 20)
+            },
+            completion: { _ in
+                tabBar.isHidden = true
+                tabBar.transform = .identity
+            }
+        )
     }
 
     func setSelectedIndex(_ index: Int) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/capacitor-liquid-glass",
-  "version": "0.1.0",
+  "version": "0.1.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",