@likith99/react-native-adaptive-liquid-glass 0.1.0

package/ios/ALGButtonView.swift

@@ -0,0 +1,113 @@
+import UIKit
+import SwiftUI
+
+private final class ButtonModel: ObservableObject {
+  @Published var title = ""
+  @Published var symbol = ""
+  @Published var prominent = false
+  @Published var disabled = false
+  @Published var loading = false
+  @Published var tint: UIColor?
+  @Published var label = ""
+  @Published var hint = ""
+  @Published var identifier = ""
+  var activate: () -> Void = {}
+}
+
+@available(iOS 26.0, *)
+private struct NativeButtonContent: View {
+  @ObservedObject var model: ButtonModel
+  @Environment(\.accessibilityReduceTransparency) private var reduceTransparency
+
+  private var button: some View {
+    Button {
+      if !model.disabled && !model.loading { model.activate() }
+    } label: {
+      HStack(spacing: 8) {
+        if model.loading { ProgressView().accessibilityHidden(true) }
+        else if !model.symbol.isEmpty { Image(systemName: model.symbol).accessibilityHidden(true) }
+        Text(model.title)
+      }
+      .frame(maxWidth: .infinity)
+    }
+    .disabled(model.disabled || model.loading)
+    .accessibilityLabel(model.label.isEmpty ? model.title : model.label)
+    .accessibilityHint(model.hint)
+    .accessibilityValue(model.loading ? "Loading" : "")
+    .accessibilityIdentifier(model.identifier)
+  }
+
+  var body: some View {
+    Group {
+      if reduceTransparency {
+        if model.prominent { button.buttonStyle(.borderedProminent) }
+        else { button.buttonStyle(.bordered) }
+      } else if model.prominent {
+        button.buttonStyle(.glassProminent)
+      } else {
+        button.buttonStyle(.glass)
+      }
+    }
+    .controlSize(.large)
+    .tint(model.tint.map { Color(uiColor: $0) } ?? .accentColor)
+    .padding(.horizontal, 4)
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+  }
+}
+
+@objc(ALGButtonView)
+public final class ALGButtonView: UIView {
+  private let model = ButtonModel()
+  private var host: UIViewController?
+  @objc public var onActivate: (() -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    model.activate = { [weak self] in self?.onActivate?() }
+    if #available(iOS 26.0, *) {
+      let controller = UIHostingController(rootView: NativeButtonContent(model: model))
+      controller.view.backgroundColor = .clear
+      host = controller
+      addSubview(controller.view)
+    }
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+
+  @objc public func configure(_ title: String, symbol: String, prominent: Bool, disabled: Bool,
+    loading: Bool, tint: UIColor?, scheme: String, label: String, hint: String, identifier: String) {
+    model.title = title
+    model.symbol = symbol
+    model.prominent = prominent
+    model.disabled = disabled
+    model.loading = loading
+    model.tint = tint
+    model.label = label
+    model.hint = hint
+    model.identifier = identifier
+    overrideUserInterfaceStyle = scheme == "dark" ? .dark : scheme == "light" ? .light : .unspecified
+  }
+
+  public override func layoutSubviews() { super.layoutSubviews(); host?.view.frame = bounds }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    guard let host else { return }
+    if window == nil {
+      host.willMove(toParent: nil)
+      host.removeFromParent()
+      return
+    }
+    var responder: UIResponder? = superview
+    while let current = responder {
+      if let parent = current as? UIViewController {
+        if host.parent !== parent {
+          host.willMove(toParent: nil)
+          host.removeFromParent()
+          parent.addChild(host)
+          host.didMove(toParent: parent)
+        }
+        break
+      }
+      responder = current.next
+    }
+  }
+}

package/ios/ALGMenuComponentView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface ALGMenuComponentView : RCTViewComponentView
+@end

package/ios/ALGMenuComponentView.mm

@@ -0,0 +1,34 @@
+#import "ALGMenuComponentView.h"
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/ComponentDescriptors.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/Props.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/EventEmitters.h>
+#import <React/RCTConversions.h>
+#import "AdaptiveLiquidGlass-Swift.h"
+using namespace facebook::react;
+@implementation ALGMenuComponentView {
+  ALGMenuView *_menu;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider { return concreteComponentDescriptorProvider<ALGMenuComponentDescriptor>(); }
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGMenuProps>();
+    _menu = [[ALGMenuView alloc] initWithFrame:CGRectZero];
+    self.contentView = _menu;
+    __weak ALGMenuComponentView *weakSelf = self;
+    _menu.onAction = ^(NSString *identifier) {
+      ALGMenuComponentView *self = weakSelf;
+      if (self && self->_eventEmitter) std::static_pointer_cast<const ALGMenuEventEmitter>(self->_eventEmitter)->onMenuAction({std::string(identifier.UTF8String)});
+    };
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const ALGMenuProps>(props);
+  [_menu configure:@(p.title.c_str()) itemsJSON:@(p.itemsJSON.c_str()) symbol:@(p.systemImage.c_str())
+    disabled:p.disabled tint:RCTUIColorFromSharedColor(p.glassTint) forceFallback:p.forceFallback
+    label:@(p.controlLabel.c_str()) hint:@(p.controlHint.c_str()) identifier:@(p.controlTestID.c_str())
+    toolbar:p.toolbar maxVisibleItems:p.maxVisibleItems mergingEnabled:p.mergingEnabled];
+  [super updateProps:props oldProps:oldProps];
+}
++ (BOOL)shouldBeRecycled { return NO; }
+@end

package/ios/ALGMenuView.swift

@@ -0,0 +1,221 @@
+import UIKit
+
+private struct MenuItem: Decodable, Equatable {
+  let id: String
+  let title: String
+  let kind: String?
+  let systemImage: String?
+  let disabled: Bool?
+  let destructive: Bool?
+  let checked: Bool?
+  let items: [MenuItem]?
+  let placement: String?
+  var isGroup: Bool { kind == "section" || kind == "submenu" }
+}
+
+@objc(ALGMenuView)
+public final class ALGMenuView: UIView {
+  private let button = UIButton(type: .system)
+  private let bar = UIToolbar()
+  private var items: [MenuItem] = []
+  private var lastJSON = ""
+  private var revision = 0
+  private var title = ""
+  private var symbol = ""
+  private var tint: UIColor?
+  private var forceFallback = false
+  private var disabled = false
+  private var toolbar = false
+  private var maxVisibleItems = 3
+  private var mergingEnabled = false
+  private var identifier = ""
+  private var configured = false
+  private var needsBarUpdate = true
+  private var lastWidth: CGFloat = -1
+  @objc public var onAction: ((String) -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    addSubview(button)
+    addSubview(bar)
+    bar.isHidden = true
+    button.showsMenuAsPrimaryAction = true
+    button.changesSelectionAsPrimaryAction = false
+    // Keeping the authored order needs iOS 16; below it UIKit picks the order itself.
+    if #available(iOS 16.0, *) { button.preferredMenuElementOrder = .fixed }
+    button.titleLabel?.adjustsFontForContentSizeCategory = true
+    NotificationCenter.default.addObserver(self, selector: #selector(updateAppearance),
+      name: UIAccessibility.reduceTransparencyStatusDidChangeNotification, object: nil)
+    NotificationCenter.default.addObserver(self, selector: #selector(updateAppearance),
+      name: UIContentSizeCategory.didChangeNotification, object: nil)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+  deinit { NotificationCenter.default.removeObserver(self) }
+
+  @objc public func configure(_ title: String, itemsJSON: String, symbol: String, disabled: Bool,
+    tint: UIColor?, forceFallback: Bool, label: String, hint: String, identifier: String,
+    toolbar: Bool, maxVisibleItems: Int, mergingEnabled: Bool) {
+    let appearanceChanged = !configured || self.title != title || self.symbol != symbol || self.tint != tint || self.forceFallback != forceFallback
+    let structureChanged = lastJSON != itemsJSON || self.toolbar != toolbar || self.disabled != disabled ||
+      self.maxVisibleItems != maxVisibleItems || self.mergingEnabled != mergingEnabled || self.identifier != identifier
+    self.title = title; self.symbol = symbol; self.tint = tint; self.forceFallback = forceFallback
+    self.disabled = disabled; self.toolbar = toolbar; self.maxVisibleItems = maxVisibleItems
+    self.mergingEnabled = mergingEnabled; self.identifier = identifier
+    if lastJSON != itemsJSON {
+      lastJSON = itemsJSON
+      items = (try? JSONDecoder().decode([MenuItem].self, from: Data(itemsJSON.utf8))) ?? []
+    }
+    if structureChanged || appearanceChanged {
+      revision += 1
+      dismissMenus()
+      button.menu = UIMenu(children: elements(items, revision: revision))
+      needsBarUpdate = true
+    }
+    button.isHidden = toolbar; bar.isHidden = !toolbar
+    button.isEnabled = !disabled && !items.isEmpty
+    button.accessibilityLabel = label.isEmpty ? title : label
+    button.accessibilityHint = hint
+    button.accessibilityIdentifier = identifier
+    bar.accessibilityIdentifier = identifier
+    // Keep individual native controls exposed to accessibility.
+    bar.isAccessibilityElement = false
+    if appearanceChanged { updateAppearance() }
+    configured = true
+    setNeedsLayout()
+  }
+
+  private func enabledAction(_ id: String, in nodes: [MenuItem]) -> MenuItem? {
+    for item in nodes where item.disabled != true {
+      if item.isGroup {
+        if let found = enabledAction(id, in: item.items ?? []) { return found }
+      } else if item.id == id { return item }
+    }
+    return nil
+  }
+  private func action(_ item: MenuItem, revision: Int) -> UIAction {
+    var attributes: UIMenuElement.Attributes = []
+    if item.disabled == true || item.isGroup { attributes.insert(.disabled) }
+    if item.destructive == true { attributes.insert(.destructive) }
+    return UIAction(title: item.title, image: item.systemImage.flatMap { UIImage(systemName: $0) },
+      identifier: UIAction.Identifier(item.id), attributes: attributes, state: item.checked == true ? .on : .off) { [weak self] _ in
+      guard let self, self.window != nil, !self.disabled, self.revision == revision,
+        self.enabledAction(item.id, in: self.items) != nil else { return }
+      self.onAction?(item.id)
+    }
+  }
+  private func elements(_ nodes: [MenuItem], revision: Int) -> [UIMenuElement] {
+    nodes.map { item in
+      if item.isGroup && item.disabled != true {
+        return UIMenu(title: item.title, image: item.systemImage.flatMap { UIImage(systemName: $0) },
+          identifier: UIMenu.Identifier(item.id), options: item.kind == "section" ? [.displayInline] : [],
+          children: elements(item.items ?? [], revision: revision))
+      }
+      return action(item, revision: revision)
+    }
+  }
+  @objc private func updateAppearance() {
+    var configuration: UIButton.Configuration
+    let appearance = UIToolbarAppearance()
+    if #available(iOS 26.0, *), !forceFallback, !UIAccessibility.isReduceTransparencyEnabled {
+      configuration = .glass()
+      appearance.configureWithDefaultBackground()
+      bar.isTranslucent = true
+    } else {
+      configuration = .tinted()
+      appearance.configureWithOpaqueBackground()
+      bar.isTranslucent = false
+    }
+    configuration.title = title
+    configuration.image = symbol.isEmpty ? nil : UIImage(systemName: symbol)
+    configuration.imagePadding = 8
+    configuration.cornerStyle = .capsule
+    configuration.buttonSize = .large
+    configuration.baseForegroundColor = tint
+    button.configuration = configuration
+    bar.tintColor = tint
+    bar.standardAppearance = appearance
+    bar.scrollEdgeAppearance = appearance
+    bar.compactAppearance = appearance
+    needsBarUpdate = true
+    setNeedsLayout()
+  }
+
+  private func updateBar() {
+    guard toolbar, bounds.width > 0, needsBarUpdate || lastWidth != bounds.width else { return }
+    dismissMenus()
+    needsBarUpdate = false; lastWidth = bounds.width
+    let font = UIFont.preferredFont(forTextStyle: .body)
+    func width(_ item: MenuItem) -> CGFloat {
+      let hasSymbol = item.systemImage.flatMap { UIImage(systemName: $0) } != nil
+      return hasSymbol ? 52 : max(52, ceil((item.title as NSString).size(withAttributes: [.font: font]).width) + 40)
+    }
+    // Reserve overflow space whenever there are hidden items. On narrow layouts,
+    // move actions to a native menu instead of clipping or shrinking their labels.
+    var visible: [MenuItem] = []
+    var used: CGFloat = 0
+    let available = max(0, bounds.width - 32)
+    for item in items where item.placement != "overflow" {
+      let candidate = width(item)
+      let needsOverflow = visible.count + 1 < items.count
+      if visible.count < maxVisibleItems && used + candidate + (needsOverflow ? 60 : 0) <= available {
+        visible.append(item); used += candidate
+      }
+    }
+    let visibleIDs = Set(visible.map(\.id))
+    let overflow = items.filter { !visibleIDs.contains($0.id) }
+    var controls = visible.map { item -> UIBarButtonItem in
+      let control: UIBarButtonItem
+      if item.isGroup {
+        let menu = UIMenu(children: elements(item.items ?? [], revision: revision))
+        if let image = item.systemImage.flatMap({ UIImage(systemName: $0) }) {
+          control = UIBarButtonItem(image: image, menu: menu)
+        } else { control = UIBarButtonItem(title: item.title, menu: menu) }
+      } else {
+        control = UIBarButtonItem(primaryAction: action(item, revision: revision))
+        if control.image != nil { control.title = nil }
+        control.isSelected = item.checked == true
+      }
+      control.width = width(item)
+      control.isEnabled = !disabled && item.disabled != true
+      control.accessibilityLabel = item.title
+      control.accessibilityIdentifier = identifier.isEmpty ? item.id : "\(identifier)-\(item.id)"
+      if item.destructive == true { control.tintColor = .systemRed }
+      return control
+    }
+    if !overflow.isEmpty {
+      let more = UIBarButtonItem(image: UIImage(systemName: "ellipsis"), menu: UIMenu(children: elements(overflow, revision: revision)))
+      more.accessibilityLabel = "More actions"
+      more.accessibilityIdentifier = identifier.isEmpty ? "toolbar-overflow" : "\(identifier)-overflow"
+      more.isEnabled = !disabled
+      more.width = 52
+      controls.append(more)
+    }
+    for control in controls {
+      if #available(iOS 16.0, *) { control.preferredMenuElementOrder = .fixed }
+      if #available(iOS 26.0, *) {
+        control.sharesBackground = mergingEnabled
+        control.hidesSharedBackground = forceFallback || UIAccessibility.isReduceTransparencyEnabled
+      }
+    }
+    bar.setItems(controls, animated: false)
+  }
+  private func dismissMenus() {
+    func dismiss(in view: UIView) {
+      for interaction in view.interactions {
+        (interaction as? UIContextMenuInteraction)?.dismissMenu()
+      }
+      for child in view.subviews { dismiss(in: child) }
+    }
+    dismiss(in: self)
+  }
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    button.frame = bounds.insetBy(dx: 4, dy: min(8, bounds.height / 4))
+    bar.frame = bounds
+    updateBar()
+  }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { dismissMenus() }
+  }
+}

package/ios/ALGSegmentedComponentView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface ALGSegmentedComponentView : RCTViewComponentView
+@end

package/ios/ALGSegmentedComponentView.mm

@@ -0,0 +1,36 @@
+#import "ALGSegmentedComponentView.h"
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/ComponentDescriptors.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/Props.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/EventEmitters.h>
+#import <React/RCTConversions.h>
+#import "AdaptiveLiquidGlass-Swift.h"
+using namespace facebook::react;
+@implementation ALGSegmentedComponentView {
+  ALGSegmentedView *_segmented;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<ALGSegmentedComponentDescriptor>();
+}
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGSegmentedProps>();
+    _segmented = [[ALGSegmentedView alloc] initWithFrame:CGRectZero];
+    self.contentView = _segmented;
+    __weak ALGSegmentedComponentView *weakSelf = self;
+    _segmented.onSelectionChange = ^(NSString *value) {
+      ALGSegmentedComponentView *strongSelf = weakSelf;
+      if (!strongSelf || !strongSelf->_eventEmitter) return;
+      std::static_pointer_cast<const ALGSegmentedEventEmitter>(strongSelf->_eventEmitter)->onSelectionChange({std::string(value.UTF8String)});
+    };
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const ALGSegmentedProps>(props);
+  NSString *scheme = p.colorScheme == ALGSegmentedColorScheme::Dark ? @"dark" : p.colorScheme == ALGSegmentedColorScheme::Light ? @"light" : @"system";
+  [_segmented configure:@(p.optionsJSON.c_str()) selectedValue:@(p.selectedValue.c_str()) disabled:p.disabled
+               tint:RCTUIColorFromSharedColor(p.glassTint) scheme:scheme label:@(p.controlLabel.c_str()) identifier:@(p.controlTestID.c_str())];
+  [super updateProps:props oldProps:oldProps];
+}
++ (BOOL)shouldBeRecycled { return NO; }
+@end

package/ios/ALGSegmentedView.swift

@@ -0,0 +1,58 @@
+import UIKit
+
+private struct SegmentOption: Decodable {
+  let value: String
+  let label: String
+  let disabled: Bool?
+}
+
+/// Native segmented-control interaction and selected-thumb rendering belong to UIKit.
+@objc(ALGSegmentedView)
+public final class ALGSegmentedView: UIView {
+  private let control = UISegmentedControl(items: [])
+  private var options: [SegmentOption] = []
+  private var lastJSON = ""
+  private var selectedValue = ""
+  @objc public var onSelectionChange: ((String) -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    addSubview(control)
+    control.addTarget(self, action: #selector(selectionChanged), for: .valueChanged)
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+
+  @objc public func configure(_ json: String, selectedValue: String, disabled: Bool,
+    tint: UIColor?, scheme: String, label: String, identifier: String) {
+    if lastJSON != json {
+      options = (try? JSONDecoder().decode([SegmentOption].self, from: Data(json.utf8))) ?? []
+      control.removeAllSegments()
+      for (index, option) in options.enumerated() {
+        control.insertSegment(withTitle: option.label, at: index, animated: false)
+        control.setEnabled(!(option.disabled ?? false), forSegmentAt: index)
+      }
+      lastJSON = json
+    }
+    self.selectedValue = selectedValue
+    control.selectedSegmentIndex = options.firstIndex { $0.value == selectedValue } ?? UISegmentedControl.noSegment
+    control.isEnabled = !disabled
+    control.selectedSegmentTintColor = tint
+    control.accessibilityLabel = label.isEmpty ? nil : label
+    control.accessibilityIdentifier = identifier
+    overrideUserInterfaceStyle = scheme == "dark" ? .dark : scheme == "light" ? .light : .unspecified
+  }
+
+  @objc private func selectionChanged() {
+    let index = control.selectedSegmentIndex
+    guard control.isEnabled, options.indices.contains(index), !(options[index].disabled ?? false) else { return }
+    let next = options[index].value
+    // React remains authoritative, including when a callback declines a change.
+    control.selectedSegmentIndex = options.firstIndex { $0.value == selectedValue } ?? UISegmentedControl.noSegment
+    if next != selectedValue { onSelectionChange?(next) }
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    control.frame = bounds.insetBy(dx: 0, dy: max(0, (bounds.height - 44) / 2))
+  }
+}

package/ios/ALGSliderComponentView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface ALGSliderComponentView : RCTViewComponentView
+@end

package/ios/ALGSliderComponentView.mm

@@ -0,0 +1,47 @@
+#import "ALGSliderComponentView.h"
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/ComponentDescriptors.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/Props.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/EventEmitters.h>
+#import <React/RCTConversions.h>
+#import "AdaptiveLiquidGlass-Swift.h"
+using namespace facebook::react;
+@implementation ALGSliderComponentView {
+  ALGSliderView *_slider;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<ALGSliderComponentDescriptor>();
+}
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGSliderProps>();
+    _slider = [[ALGSliderView alloc] initWithFrame:CGRectZero];
+    self.contentView = _slider;
+    __weak ALGSliderComponentView *weakSelf = self;
+    _slider.onChange = ^(double value) {
+      ALGSliderComponentView *self = weakSelf;
+      if (self && self->_eventEmitter) std::static_pointer_cast<const ALGSliderEventEmitter>(self->_eventEmitter)->onSliderChange({value});
+    };
+    _slider.onStart = ^(double value) {
+      ALGSliderComponentView *self = weakSelf;
+      if (self && self->_eventEmitter) std::static_pointer_cast<const ALGSliderEventEmitter>(self->_eventEmitter)->onSliderStart({value});
+    };
+    _slider.onComplete = ^(double value) {
+      ALGSliderComponentView *self = weakSelf;
+      if (self && self->_eventEmitter) std::static_pointer_cast<const ALGSliderEventEmitter>(self->_eventEmitter)->onSliderComplete({value});
+    };
+    _slider.onCancel = ^(double value) {
+      ALGSliderComponentView *self = weakSelf;
+      if (self && self->_eventEmitter) std::static_pointer_cast<const ALGSliderEventEmitter>(self->_eventEmitter)->onSliderCancel({value});
+    };
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const ALGSliderProps>(props);
+  [_slider configure:p.value minimum:p.minimumValue maximum:p.maximumValue step:p.step disabled:p.disabled
+                tint:RCTUIColorFromSharedColor(p.glassTint) label:@(p.controlLabel.c_str())
+                hint:@(p.controlHint.c_str()) identifier:@(p.controlTestID.c_str())];
+  [super updateProps:props oldProps:oldProps];
+}
++ (BOOL)shouldBeRecycled { return NO; }
+@end

package/ios/ALGSliderView.swift

@@ -0,0 +1,102 @@
+import UIKit
+
+private final class AccessibleGlassSlider: UISlider {
+  var adjust: ((Double) -> Void)?
+  override func accessibilityIncrement() { adjust?(1) }
+  override func accessibilityDecrement() { adjust?(-1) }
+}
+
+@objc(ALGSliderView)
+public final class ALGSliderView: UIView {
+  private let slider = AccessibleGlassSlider()
+  private var minimum = 0.0
+  private var maximum = 1.0
+  private var step = 0.0
+  private var controlledValue = 0.0
+  private var dragging = false
+  private var lastEmitted: Double?
+  @objc public var onChange: ((Double) -> Void)?
+  @objc public var onStart: ((Double) -> Void)?
+  @objc public var onComplete: ((Double) -> Void)?
+  @objc public var onCancel: ((Double) -> Void)?
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    addSubview(slider)
+    slider.addTarget(self, action: #selector(start), for: .touchDown)
+    slider.addTarget(self, action: #selector(change), for: .valueChanged)
+    slider.addTarget(self, action: #selector(finish), for: [.touchUpInside, .touchUpOutside])
+    slider.addTarget(self, action: #selector(cancel), for: .touchCancel)
+    slider.adjust = { [weak self] direction in
+      guard let self, self.slider.isEnabled else { return }
+      self.onStart?(self.controlledValue)
+      let increment = self.step > 0 ? self.step : (self.maximum - self.minimum) / 20
+      let value = self.normalized(self.controlledValue + direction * increment)
+      self.position(value)
+      if value != self.controlledValue { self.onChange?(value) }
+      self.onComplete?(value)
+    }
+  }
+  required init?(coder: NSCoder) { fatalError("init(coder:) is unavailable") }
+
+  @objc public func configure(_ value: Double, minimum: Double, maximum: Double, step: Double,
+    disabled: Bool, tint: UIColor?, label: String, hint: String, identifier: String) {
+    guard minimum.isFinite, maximum.isFinite, value.isFinite, step.isFinite,
+      (maximum - minimum).isFinite, maximum > minimum, step >= 0, step <= maximum - minimum else { return }
+    if dragging && (disabled || self.minimum != minimum || self.maximum != maximum || self.step != step) { cancel() }
+    self.minimum = minimum
+    self.maximum = maximum
+    self.step = step
+    controlledValue = normalized(value)
+    slider.isEnabled = !disabled
+    slider.minimumTrackTintColor = tint
+    slider.accessibilityLabel = label.isEmpty ? nil : label
+    slider.accessibilityHint = hint.isEmpty ? nil : hint
+    slider.accessibilityIdentifier = identifier
+    // UIKit keeps ownership of the thumb during tracking, avoiding JS echo jitter.
+    if !dragging { position(controlledValue) }
+  }
+  private func normalized(_ value: Double) -> Double {
+    let clamped = min(maximum, max(minimum, value))
+    if clamped == maximum || step == 0 { return clamped }
+    return min(maximum, max(minimum, minimum + ((clamped - minimum) / step).rounded() * step))
+  }
+  private var current: Double { normalized(minimum + Double(slider.value) * (maximum - minimum)) }
+  private func position(_ value: Double) {
+    slider.value = Float((value - minimum) / (maximum - minimum))
+    slider.accessibilityValue = String(format: "%.6g", value)
+  }
+  @objc private func start() {
+    guard slider.isEnabled, !dragging else { return }
+    dragging = true
+    lastEmitted = current
+    onStart?(current)
+  }
+  @objc private func change() {
+    guard slider.isEnabled else { return }
+    let value = current
+    // Snap only for stepped sliders; preserve UIKit momentum for continuous tracking.
+    if step > 0 { position(value) }
+    else { slider.accessibilityValue = String(format: "%.6g", value) }
+    if value != lastEmitted { lastEmitted = value; onChange?(value) }
+    if !dragging { onComplete?(value) }
+  }
+  @objc private func finish() {
+    guard dragging else { return }
+    change()
+    let value = current
+    dragging = false
+    onComplete?(value)
+  }
+  @objc private func cancel() {
+    guard dragging else { return }
+    dragging = false
+    position(controlledValue)
+    onCancel?(controlledValue)
+  }
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window == nil { cancel() }
+  }
+  public override func layoutSubviews() { super.layoutSubviews(); slider.frame = bounds }
+}

package/ios/ALGSurfaceComponentView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface ALGSurfaceComponentView : RCTViewComponentView
+@end

package/ios/ALGSurfaceComponentView.mm

@@ -0,0 +1,45 @@
+#import "ALGSurfaceComponentView.h"
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/ComponentDescriptors.h>
+#import <react/renderer/components/AdaptiveLiquidGlassSpec/Props.h>
+#import <React/RCTConversions.h>
+#import "AdaptiveLiquidGlass-Swift.h"
+
+using namespace facebook::react;
+
+@implementation ALGSurfaceComponentView {
+  ALGSurfaceView *_glass;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<ALGSurfaceComponentDescriptor>();
+}
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const ALGSurfaceProps>();
+    _glass = [[ALGSurfaceView alloc] initWithFrame:CGRectZero];
+    self.contentView = _glass;
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const ALGSurfaceProps>(props);
+  NSString *material = p.material == ALGSurfaceMaterial::Clear ? @"clear" : p.material == ALGSurfaceMaterial::None ? @"none" : @"regular";
+  NSString *scheme = p.colorScheme == ALGSurfaceColorScheme::Dark ? @"dark" : p.colorScheme == ALGSurfaceColorScheme::Light ? @"light" : @"system";
+  [_glass configure:material interactive:p.interactive tint:RCTUIColorFromSharedColor(p.glassTint)
+             radius:p.glassRadius container:p.container mergingEnabled:p.mergingEnabled spacing:p.spacing duration:p.animationDuration scheme:scheme];
+  [super updateProps:props oldProps:oldProps];
+}
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)child index:(NSInteger)index {
+  [_glass.reactContentView insertSubview:child atIndex:index];
+}
+- (void)layoutSubviews {
+  [super layoutSubviews];
+  // Fabric's default contentView frame excludes padding. React children already
+  // carry Yoga's padding offsets, so the material must occupy the full bounds.
+  _glass.frame = self.bounds;
+}
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)child index:(NSInteger)index {
+  [child removeFromSuperview];
+}
+// UIKit effects retain state; a fresh instance also avoids stale effects on remount.
++ (BOOL)shouldBeRecycled { return NO; }
+@end