@ajuarezso/capacitor-liquid-glass 0.1.0 → 0.2.0

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. */
@@ -37,6 +48,33 @@ export interface TabBarLayoutEvent {
     /** Safe-area bottom inset the tab bar is sitting on (pt). */
     bottomSafeArea: number;
 }
+/**
+ * Options for the native iOS Liquid Glass search bar overlay (top of window).
+ *
+ * On iOS 26+ the underlying `UISearchBar` adopts the system Liquid Glass look
+ * automatically; on earlier iOS we wrap it in a `systemUltraThinMaterial`
+ * blurred container so the visual is as close as possible.
+ */
+export interface ShowSearchBarOptions {
+    /** Placeholder shown when the field is empty. */
+    placeholder?: string;
+    /** Initial text the field opens with. */
+    initialText?: string;
+    /** Custom label for the trailing "Cancel" button. */
+    cancelText?: string;
+    /** Tint color for the cursor + Cancel button, hex `"#RRGGBB"`. */
+    tintColor?: string;
+    /** Hide the trailing Cancel button (defaults to `false`). */
+    hideCancelButton?: boolean;
+}
+export interface SearchTextChangedEvent {
+    /** Current text in the search field. */
+    text: string;
+}
+export interface SearchSubmittedEvent {
+    /** Text the user submitted (return key on the keyboard). */
+    text: string;
+}
 export interface LiquidGlassPlugin {
     /** Creates (or updates) and shows the native Liquid Glass tab bar. */
     showTabBar(options: ShowTabBarOptions): Promise<void>;
@@ -52,5 +90,17 @@ export interface LiquidGlassPlugin {
     addListener(eventName: 'tabSelected', listenerFunc: (event: TabSelectedEvent) => void): Promise<PluginListenerHandle>;
     /** Emitted when the tab bar's height or safe-area changes (rotation, etc.). */
     addListener(eventName: 'tabBarLayoutChanged', listenerFunc: (event: TabBarLayoutEvent) => void): Promise<PluginListenerHandle>;
+    /** Shows the native Liquid Glass search bar overlay anchored to the top. */
+    showSearchBar(options?: ShowSearchBarOptions): Promise<void>;
+    /** Hides the search bar without destroying configuration. */
+    hideSearchBar(): Promise<void>;
+    /** Clears the text in the search field without dismissing the overlay. */
+    clearSearchText(): Promise<void>;
+    /** Emitted on every keystroke while the user types in the search field. */
+    addListener(eventName: 'searchTextChanged', listenerFunc: (event: SearchTextChangedEvent) => void): Promise<PluginListenerHandle>;
+    /** Emitted when the user taps the keyboard's "Search" / return key. */
+    addListener(eventName: 'searchSubmitted', listenerFunc: (event: SearchSubmittedEvent) => void): Promise<PluginListenerHandle>;
+    /** Emitted when the user taps the trailing Cancel button. */
+    addListener(eventName: 'searchCancelled', listenerFunc: () => void): Promise<PluginListenerHandle>;
     removeAllListeners(): Promise<void>;
 }

package/dist/esm/web.d.ts

@@ -1,5 +1,5 @@
 import { WebPlugin } from '@capacitor/core';
-import type { LiquidGlassPlugin, SetSelectedTabOptions, ShowTabBarOptions, TabBarLayoutEvent, UpdateTabBadgeOptions } from './definitions';
+import type { LiquidGlassPlugin, SetSelectedTabOptions, ShowSearchBarOptions, ShowTabBarOptions, TabBarLayoutEvent, UpdateTabBadgeOptions } from './definitions';
 /**
  * Web fallback — real Liquid Glass requires native iOS 26. On the web we
  * resolve no-ops so the app can run in the browser during development; the
@@ -12,4 +12,7 @@ export declare class LiquidGlassWeb extends WebPlugin implements LiquidGlassPlug
     setSelectedTab(_options: SetSelectedTabOptions): Promise<void>;
     updateTabBadge(_options: UpdateTabBadgeOptions): Promise<void>;
     getTabBarLayout(): Promise<TabBarLayoutEvent>;
+    showSearchBar(_options?: ShowSearchBarOptions): Promise<void>;
+    hideSearchBar(): Promise<void>;
+    clearSearchText(): Promise<void>;
 }

package/dist/esm/web.js

@@ -21,4 +21,13 @@ export class LiquidGlassWeb extends WebPlugin {
     async getTabBarLayout() {
         return { height: 0, bottomSafeArea: 0 };
     }
+    async showSearchBar(_options) {
+        // no-op on web — caller should render its own DOM search input.
+    }
+    async hideSearchBar() {
+        // no-op on web
+    }
+    async clearSearchText() {
+        // no-op on web
+    }
 }

package/dist/plugin.cjs.js

@@ -28,6 +28,15 @@ class LiquidGlassWeb extends core.WebPlugin {
     async getTabBarLayout() {
         return { height: 0, bottomSafeArea: 0 };
     }
+    async showSearchBar(_options) {
+        // no-op on web — caller should render its own DOM search input.
+    }
+    async hideSearchBar() {
+        // no-op on web
+    }
+    async clearSearchText() {
+        // no-op on web
+    }
 }
 
 var web = /*#__PURE__*/Object.freeze({

package/dist/plugin.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.cjs.js","sources":["esm/index.js","esm/web.js"],"sourcesContent":["import { registerPlugin } from '@capacitor/core';\nconst LiquidGlass = registerPlugin('LiquidGlass', {\n    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),\n});\nexport * from './definitions';\nexport { LiquidGlass };\n","import { WebPlugin } from '@capacitor/core';\n/**\n * Web fallback — real Liquid Glass requires native iOS 26. On the web we\n * resolve no-ops so the app can run in the browser during development; the\n * Angular shell is expected to render its own CSS glassmorphism tab bar when\n * `isNativePlatform()` is false.\n */\nexport class LiquidGlassWeb extends WebPlugin {\n    async showTabBar(_options) {\n        // no-op on web\n    }\n    async hideTabBar() {\n        // no-op on web\n    }\n    async setSelectedTab(_options) {\n        // no-op on web\n    }\n    async updateTabBadge(_options) {\n        // no-op on web\n    }\n    async getTabBarLayout() {\n        return { height: 0, bottomSafeArea: 0 };\n    }\n}\n"],"names":["registerPlugin","WebPlugin"],"mappings":";;;;AACK,MAAC,WAAW,GAAGA,mBAAc,CAAC,aAAa,EAAE;AAClD,IAAI,GAAG,EAAE,MAAM,mDAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;AAClE,CAAC;;ACFD;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,cAAc,SAASC,cAAS,CAAC;AAC9C,IAAI,MAAM,UAAU,CAAC,QAAQ,EAAE;AAC/B;AACA,IAAI;AACJ,IAAI,MAAM,UAAU,GAAG;AACvB;AACA,IAAI;AACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;AACnC;AACA,IAAI;AACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;AACnC;AACA,IAAI;AACJ,IAAI,MAAM,eAAe,GAAG;AAC5B,QAAQ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE;AAC/C,IAAI;AACJ;;;;;;;;;"}
+{"version":3,"file":"plugin.cjs.js","sources":["esm/index.js","esm/web.js"],"sourcesContent":["import { registerPlugin } from '@capacitor/core';\nconst LiquidGlass = registerPlugin('LiquidGlass', {\n    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),\n});\nexport * from './definitions';\nexport { LiquidGlass };\n","import { WebPlugin } from '@capacitor/core';\n/**\n * Web fallback — real Liquid Glass requires native iOS 26. On the web we\n * resolve no-ops so the app can run in the browser during development; the\n * Angular shell is expected to render its own CSS glassmorphism tab bar when\n * `isNativePlatform()` is false.\n */\nexport class LiquidGlassWeb extends WebPlugin {\n    async showTabBar(_options) {\n        // no-op on web\n    }\n    async hideTabBar() {\n        // no-op on web\n    }\n    async setSelectedTab(_options) {\n        // no-op on web\n    }\n    async updateTabBadge(_options) {\n        // no-op on web\n    }\n    async getTabBarLayout() {\n        return { height: 0, bottomSafeArea: 0 };\n    }\n    async showSearchBar(_options) {\n        // no-op on web — caller should render its own DOM search input.\n    }\n    async hideSearchBar() {\n        // no-op on web\n    }\n    async clearSearchText() {\n        // no-op on web\n    }\n}\n"],"names":["registerPlugin","WebPlugin"],"mappings":";;;;AACK,MAAC,WAAW,GAAGA,mBAAc,CAAC,aAAa,EAAE;AAClD,IAAI,GAAG,EAAE,MAAM,mDAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;AAClE,CAAC;;ACFD;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,cAAc,SAASC,cAAS,CAAC;AAC9C,IAAI,MAAM,UAAU,CAAC,QAAQ,EAAE;AAC/B;AACA,IAAI;AACJ,IAAI,MAAM,UAAU,GAAG;AACvB;AACA,IAAI;AACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;AACnC;AACA,IAAI;AACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;AACnC;AACA,IAAI;AACJ,IAAI,MAAM,eAAe,GAAG;AAC5B,QAAQ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE;AAC/C,IAAI;AACJ,IAAI,MAAM,aAAa,CAAC,QAAQ,EAAE;AAClC;AACA,IAAI;AACJ,IAAI,MAAM,aAAa,GAAG;AAC1B;AACA,IAAI;AACJ,IAAI,MAAM,eAAe,GAAG;AAC5B;AACA,IAAI;AACJ;;;;;;;;;"}

package/dist/plugin.js

@@ -27,6 +27,15 @@ var capacitorLiquidGlass = (function (exports, core) {
         async getTabBarLayout() {
             return { height: 0, bottomSafeArea: 0 };
         }
+        async showSearchBar(_options) {
+            // no-op on web — caller should render its own DOM search input.
+        }
+        async hideSearchBar() {
+            // no-op on web
+        }
+        async clearSearchText() {
+            // no-op on web
+        }
     }
 
     var web = /*#__PURE__*/Object.freeze({

package/dist/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["esm/index.js","esm/web.js"],"sourcesContent":["import { registerPlugin } from '@capacitor/core';\nconst LiquidGlass = registerPlugin('LiquidGlass', {\n    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),\n});\nexport * from './definitions';\nexport { LiquidGlass };\n","import { WebPlugin } from '@capacitor/core';\n/**\n * Web fallback — real Liquid Glass requires native iOS 26. On the web we\n * resolve no-ops so the app can run in the browser during development; the\n * Angular shell is expected to render its own CSS glassmorphism tab bar when\n * `isNativePlatform()` is false.\n */\nexport class LiquidGlassWeb extends WebPlugin {\n    async showTabBar(_options) {\n        // no-op on web\n    }\n    async hideTabBar() {\n        // no-op on web\n    }\n    async setSelectedTab(_options) {\n        // no-op on web\n    }\n    async updateTabBadge(_options) {\n        // no-op on web\n    }\n    async getTabBarLayout() {\n        return { height: 0, bottomSafeArea: 0 };\n    }\n}\n"],"names":["registerPlugin","WebPlugin"],"mappings":";;;AACK,UAAC,WAAW,GAAGA,mBAAc,CAAC,aAAa,EAAE;IAClD,IAAI,GAAG,EAAE,MAAM,mDAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;IAClE,CAAC;;ICFD;IACA;IACA;IACA;IACA;IACA;IACO,MAAM,cAAc,SAASC,cAAS,CAAC;IAC9C,IAAI,MAAM,UAAU,CAAC,QAAQ,EAAE;IAC/B;IACA,IAAI;IACJ,IAAI,MAAM,UAAU,GAAG;IACvB;IACA,IAAI;IACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;IACnC;IACA,IAAI;IACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;IACnC;IACA,IAAI;IACJ,IAAI,MAAM,eAAe,GAAG;IAC5B,QAAQ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE;IAC/C,IAAI;IACJ;;;;;;;;;;;;;;;"}
+{"version":3,"file":"plugin.js","sources":["esm/index.js","esm/web.js"],"sourcesContent":["import { registerPlugin } from '@capacitor/core';\nconst LiquidGlass = registerPlugin('LiquidGlass', {\n    web: () => import('./web').then((m) => new m.LiquidGlassWeb()),\n});\nexport * from './definitions';\nexport { LiquidGlass };\n","import { WebPlugin } from '@capacitor/core';\n/**\n * Web fallback — real Liquid Glass requires native iOS 26. On the web we\n * resolve no-ops so the app can run in the browser during development; the\n * Angular shell is expected to render its own CSS glassmorphism tab bar when\n * `isNativePlatform()` is false.\n */\nexport class LiquidGlassWeb extends WebPlugin {\n    async showTabBar(_options) {\n        // no-op on web\n    }\n    async hideTabBar() {\n        // no-op on web\n    }\n    async setSelectedTab(_options) {\n        // no-op on web\n    }\n    async updateTabBadge(_options) {\n        // no-op on web\n    }\n    async getTabBarLayout() {\n        return { height: 0, bottomSafeArea: 0 };\n    }\n    async showSearchBar(_options) {\n        // no-op on web — caller should render its own DOM search input.\n    }\n    async hideSearchBar() {\n        // no-op on web\n    }\n    async clearSearchText() {\n        // no-op on web\n    }\n}\n"],"names":["registerPlugin","WebPlugin"],"mappings":";;;AACK,UAAC,WAAW,GAAGA,mBAAc,CAAC,aAAa,EAAE;IAClD,IAAI,GAAG,EAAE,MAAM,mDAAe,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;IAClE,CAAC;;ICFD;IACA;IACA;IACA;IACA;IACA;IACO,MAAM,cAAc,SAASC,cAAS,CAAC;IAC9C,IAAI,MAAM,UAAU,CAAC,QAAQ,EAAE;IAC/B;IACA,IAAI;IACJ,IAAI,MAAM,UAAU,GAAG;IACvB;IACA,IAAI;IACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;IACnC;IACA,IAAI;IACJ,IAAI,MAAM,cAAc,CAAC,QAAQ,EAAE;IACnC;IACA,IAAI;IACJ,IAAI,MAAM,eAAe,GAAG;IAC5B,QAAQ,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,CAAC,EAAE;IAC/C,IAAI;IACJ,IAAI,MAAM,aAAa,CAAC,QAAQ,EAAE;IAClC;IACA,IAAI;IACJ,IAAI,MAAM,aAAa,GAAG;IAC1B;IACA,IAAI;IACJ,IAAI,MAAM,eAAe,GAAG;IAC5B;IACA,IAAI;IACJ;;;;;;;;;;;;;;;"}

package/ios/Sources/LiquidGlassPlugin/LiquidGlassPlugin.swift

@@ -12,9 +12,13 @@ public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
         CAPPluginMethod(name: "setSelectedTab", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "updateTabBadge", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "getTabBarLayout", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "showSearchBar", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "hideSearchBar", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "clearSearchText", returnType: CAPPluginReturnPromise),
     ]
 
     private var tabBarOverlay: LiquidGlassTabBarOverlay?
+    private var searchOverlay: LiquidGlassSearchOverlay?
 
     @objc func showTabBar(_ call: CAPPluginCall) {
         guard let rawItems = call.getArray("items") as? [[String: Any]] else {
@@ -23,6 +27,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 +37,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 +90,68 @@ public class LiquidGlassPlugin: CAPPlugin, CAPBridgedPlugin {
         }
     }
 
-    private func presentTabBar(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?) {
+    // MARK: - Search Bar
+
+    @objc func showSearchBar(_ call: CAPPluginCall) {
+        let placeholder = call.getString("placeholder")
+        let initialText = call.getString("initialText")
+        let cancelText = call.getString("cancelText")
+        let tintHex = call.getString("tintColor")
+        let hideCancelButton = call.getBool("hideCancelButton") ?? false
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self else { return }
+            self.presentSearchBar(
+                placeholder: placeholder,
+                initialText: initialText,
+                cancelText: cancelText,
+                tintHex: tintHex,
+                hideCancelButton: hideCancelButton
+            )
+            call.resolve()
+        }
+    }
+
+    @objc func hideSearchBar(_ call: CAPPluginCall) {
+        DispatchQueue.main.async { [weak self] in
+            self?.searchOverlay?.hide()
+            call.resolve()
+        }
+    }
+
+    @objc func clearSearchText(_ call: CAPPluginCall) {
+        DispatchQueue.main.async { [weak self] in
+            self?.searchOverlay?.clearText()
+            call.resolve()
+        }
+    }
+
+    private func presentSearchBar(
+        placeholder: String?,
+        initialText: String?,
+        cancelText: String?,
+        tintHex: String?,
+        hideCancelButton: Bool
+    ) {
+        guard let window = UIApplication.shared.capacitorWindow else { return }
+
+        if searchOverlay == nil {
+            let overlay = LiquidGlassSearchOverlay()
+            overlay.delegate = self
+            searchOverlay = overlay
+        }
+
+        searchOverlay?.configure(
+            placeholder: placeholder,
+            initialText: initialText,
+            cancelText: cancelText,
+            tintHex: tintHex,
+            hideCancelButton: hideCancelButton
+        )
+        searchOverlay?.show(on: window)
+    }
+
+    private func presentTabBar(items: [LiquidGlassTabItem], selectedIndex: Int, tintHex: String?, styleRaw: String) {
         guard let window = UIApplication.shared.capacitorWindow else { return }
 
         if tabBarOverlay == nil {
@@ -102,12 +168,28 @@ 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()
     }
 }
 
+// MARK: - LiquidGlassSearchOverlayDelegate
+extension LiquidGlassPlugin: LiquidGlassSearchOverlayDelegate {
+    func searchOverlayDidChangeText(_ text: String) {
+        notifyListeners("searchTextChanged", data: ["text": text])
+    }
+
+    func searchOverlayDidSubmit(_ text: String) {
+        notifyListeners("searchSubmitted", data: ["text": text])
+    }
+
+    func searchOverlayDidCancel() {
+        notifyListeners("searchCancelled", data: [:])
+    }
+}
+
 // MARK: - UIApplication helper
 private extension UIApplication {
     var capacitorWindow: UIWindow? {

package/ios/Sources/LiquidGlassPlugin/LiquidGlassSearchOverlay.swift

@@ -0,0 +1,172 @@
+import UIKit
+
+/// Callbacks emitted from the search overlay back to the plugin so it can
+/// `notifyListeners(...)` to JS land.
+protocol LiquidGlassSearchOverlayDelegate: AnyObject {
+    func searchOverlayDidChangeText(_ text: String)
+    func searchOverlayDidSubmit(_ text: String)
+    func searchOverlayDidCancel()
+}
+
+/// A floating UISearchBar overlay wrapped in a UIVisualEffectView so it
+/// inherits the iOS 26 Liquid Glass look (and falls back to
+/// `systemUltraThinMaterial` blur on earlier iOS).
+///
+/// Auto-layout pin: top of the keyWindow, respecting the safe area, full width.
+final class LiquidGlassSearchOverlay: NSObject {
+
+    weak var delegate: LiquidGlassSearchOverlayDelegate?
+
+    // Internal state
+    private weak var window: UIWindow?
+    private var container: UIVisualEffectView?
+    private var searchBar: UISearchBar?
+
+    // Cached config (so re-configures persist across show/hide)
+    private var placeholder: String?
+    private var initialText: String?
+    private var cancelText: String?
+    private var tintHex: String?
+    private var hideCancelButton: Bool = false
+
+    /// Stores the configuration; safe to call before `show()`.
+    func configure(
+        placeholder: String?,
+        initialText: String?,
+        cancelText: String?,
+        tintHex: String?,
+        hideCancelButton: Bool
+    ) {
+        self.placeholder = placeholder
+        self.initialText = initialText
+        self.cancelText = cancelText
+        self.tintHex = tintHex
+        self.hideCancelButton = hideCancelButton
+        // If already attached, push config to live UI right away.
+        applyConfigToSearchBar()
+    }
+
+    /// Attach + show the overlay on the given window. Idempotent: re-attaching
+    /// to the same window is a no-op (just re-applies the config + first responder).
+    func show(on window: UIWindow) {
+        if self.window === window, container != nil {
+            applyConfigToSearchBar()
+            container?.isHidden = false
+            searchBar?.becomeFirstResponder()
+            return
+        }
+        self.window = window
+
+        // Container with blur — auto-becomes Liquid Glass on iOS 26 SDK.
+        let blur = UIBlurEffect(style: .systemUltraThinMaterial)
+        let container = UIVisualEffectView(effect: blur)
+        container.translatesAutoresizingMaskIntoConstraints = false
+
+        let searchBar = UISearchBar()
+        searchBar.translatesAutoresizingMaskIntoConstraints = false
+        searchBar.delegate = self
+        searchBar.searchBarStyle = .minimal
+        searchBar.backgroundImage = UIImage() // strip default chrome so blur shows through
+        searchBar.autocorrectionType = .no
+        searchBar.autocapitalizationType = .none
+        searchBar.returnKeyType = .search
+
+        container.contentView.addSubview(searchBar)
+        window.addSubview(container)
+
+        NSLayoutConstraint.activate([
+            container.leadingAnchor.constraint(equalTo: window.leadingAnchor),
+            container.trailingAnchor.constraint(equalTo: window.trailingAnchor),
+            container.topAnchor.constraint(equalTo: window.topAnchor),
+
+            searchBar.leadingAnchor.constraint(equalTo: container.contentView.leadingAnchor, constant: 8),
+            searchBar.trailingAnchor.constraint(equalTo: container.contentView.trailingAnchor, constant: -8),
+            searchBar.topAnchor.constraint(equalTo: window.safeAreaLayoutGuide.topAnchor),
+            searchBar.bottomAnchor.constraint(equalTo: container.contentView.bottomAnchor, constant: -8),
+        ])
+
+        self.container = container
+        self.searchBar = searchBar
+
+        applyConfigToSearchBar()
+        searchBar.becomeFirstResponder()
+    }
+
+    /// Hide overlay (don't tear down — keep config so next `show()` is fast).
+    func hide() {
+        searchBar?.resignFirstResponder()
+        UIView.animate(withDuration: 0.18, animations: { [weak self] in
+            self?.container?.alpha = 0
+        }, completion: { [weak self] _ in
+            self?.container?.isHidden = true
+            self?.container?.alpha = 1
+        })
+    }
+
+    /// Clear text without dismissing the overlay.
+    func clearText() {
+        searchBar?.text = ""
+        // Notify delegate so JS land sees the empty value.
+        delegate?.searchOverlayDidChangeText("")
+    }
+
+    // MARK: - Private
+
+    private func applyConfigToSearchBar() {
+        guard let searchBar else { return }
+        searchBar.placeholder = placeholder
+        if let initialText { searchBar.text = initialText }
+        searchBar.showsCancelButton = !hideCancelButton
+        if let tintHex, let tint = UIColor(searchBarHex: tintHex) {
+            searchBar.tintColor = tint
+        }
+        // Override the system "Cancel" label if a custom one was provided.
+        if let cancelText, !hideCancelButton {
+            // Walk subviews to find the cancel button (UIKit private path is
+            // historically how this is done; safe enough — falls through to no-op
+            // if the button can't be located on a future iOS).
+            if let button = findCancelButton(in: searchBar) {
+                button.setTitle(cancelText, for: .normal)
+            }
+        }
+    }
+
+    private func findCancelButton(in view: UIView) -> UIButton? {
+        for sub in view.subviews {
+            if let btn = sub as? UIButton { return btn }
+            if let nested = findCancelButton(in: sub) { return nested }
+        }
+        return nil
+    }
+}
+
+// MARK: - UISearchBarDelegate
+extension LiquidGlassSearchOverlay: UISearchBarDelegate {
+    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
+        delegate?.searchOverlayDidChangeText(searchText)
+    }
+
+    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
+        delegate?.searchOverlayDidSubmit(searchBar.text ?? "")
+        searchBar.resignFirstResponder()
+    }
+
+    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
+        searchBar.text = ""
+        searchBar.resignFirstResponder()
+        delegate?.searchOverlayDidCancel()
+    }
+}
+
+// MARK: - UIColor+hex (scoped to this file to avoid duplicate-symbol with TabBarOverlay)
+private extension UIColor {
+    convenience init?(searchBarHex hex: String) {
+        var value = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
+        if value.hasPrefix("#") { value.removeFirst() }
+        guard value.count == 6, let rgb = UInt64(value, radix: 16) else { return nil }
+        let r = CGFloat((rgb & 0xFF0000) >> 16) / 255
+        let g = CGFloat((rgb & 0x00FF00) >> 8) / 255
+        let b = CGFloat(rgb & 0x0000FF) / 255
+        self.init(red: r, green: g, blue: b, alpha: 1.0)
+    }
+}

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,
@@ -87,9 +121,13 @@ final class LiquidGlassTabBarOverlay: NSObject {
 
         tabBar.setItems(uiItems, animated: false)
 
-        if let previousSelectedId, let restoreIdx = items.firstIndex(where: { $0.id == previousSelectedId }) {
+        // Si el caller pidió explícitamente "no selection" (selectedIndex < 0),
+        // respetar eso y NO restaurar la selección previa — deja selectedItem = nil.
+        if selectedIndex < 0 {
+            tabBar.selectedItem = nil
+        } else if let previousSelectedId, let restoreIdx = items.firstIndex(where: { $0.id == previousSelectedId }) {
             tabBar.selectedItem = uiItems[restoreIdx]
-        } else if selectedIndex >= 0, selectedIndex < uiItems.count {
+        } else if selectedIndex < uiItems.count {
             tabBar.selectedItem = uiItems[selectedIndex]
         }
 
@@ -108,16 +146,56 @@ 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) {
-        guard let tabBar, let items = tabBar.items, index >= 0, index < items.count else { return }
+        guard let tabBar, let items = tabBar.items else { return }
+        // index < 0 → deseleccionar todos los tabs (selectedItem = nil)
+        if index < 0 {
+            tabBar.selectedItem = nil
+            return
+        }
+        guard index < items.count else { return }
         tabBar.selectedItem = items[index]
     }
 

package/package.json

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