@apple-pie/slice-native 0.1.4 → 0.1.7

package/dist/types/native/src/hooks/useCreateThemedStyles/useCreateThemedStyles.d.ts

@@ -0,0 +1,7 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { SliceNativeTheme } from '../../theme';
+/** Resolve native styles using the current provider theme. Keep the factory stable
+ * (outside the component, or with useCallback) to reuse styles across renders. */
+export declare function useCreateThemedStyles<T extends {
+    [K in keyof T]: ViewStyle | TextStyle | ImageStyle;
+}>(styles: (theme: SliceNativeTheme) => T): T;

package/dist/types/native/src/hooks/useDeviceCapabilities/_types.d.ts

@@ -0,0 +1,17 @@
+import type { Platform } from 'react-native';
+export interface DeviceCapabilities {
+    /** Current React Native platform, including ios, android, and web. */
+    readonly platform: typeof Platform.OS;
+    /** Full iOS system version (e.g. '26.1.0'), or null on other platforms. */
+    readonly iosVersion: string | null;
+    /** Android API level (e.g. 37), or null on other platforms. */
+    readonly androidSdkVersion: number | null;
+    /** System-provided iOS name or Android model; null when unavailable. */
+    readonly deviceName: string | null;
+    /** iOS hardware identifier (e.g. 'iPhone17,1') or Android model; null when unavailable. */
+    readonly deviceModel: string | null;
+    /** Native Liquid Glass API availability (iOS 26+). */
+    readonly supportsLiquidGlass: boolean;
+    /** Native backdrop blur API availability, rather than content/window blur. */
+    readonly supportsNativeBlur: boolean;
+}

package/dist/types/native/src/hooks/useDeviceCapabilities/index.d.ts

@@ -0,0 +1,2 @@
+export { useDeviceCapabilities } from './useDeviceCapabilities';
+export type { DeviceCapabilities } from './_types';

package/dist/types/native/src/hooks/useDeviceCapabilities/useDeviceCapabilities.d.ts

@@ -0,0 +1,3 @@
+import type { DeviceCapabilities } from './_types';
+/** Unsupported-platform fallback. Metro selects the native hook on iOS/Android. */
+export declare function useDeviceCapabilities(): DeviceCapabilities;

package/dist/types/native/src/hooks/useDeviceCapabilities/useDeviceCapabilities.native.d.ts

@@ -0,0 +1,7 @@
+import type { DeviceCapabilities } from './_types';
+/**
+ * Reports native API availability. Both values are false on unsupported platforms
+ * or when the package's native module is absent. Accessibility preferences and
+ * per-view hardware acceleration can still cause components to use their fallback.
+ */
+export declare function useDeviceCapabilities(): DeviceCapabilities;

package/dist/types/native/src/index.d.ts

@@ -0,0 +1,12 @@
+export { SliceIcon, SliceIcons, StyledText, SliceButton, SliceTextInput, SliceLiquidGlassView } from './components';
+export type { IconProps, SliceIconProps, StyledTextProps, SliceButtonProps, SliceTextInputProps, SliceLiquidGlassViewProps, } from './components';
+export { lightTheme, darkTheme, createTypography } from './theme';
+export type { SliceNativeTheme, SliceTheme } from './theme';
+export { SliceThemeProvider, useSliceTheme, useSliceContext } from './providers';
+export type { ThemePreference, ThemeContextValue } from './providers';
+export { useCreateThemedStyles, useDeviceCapabilities } from './hooks';
+export type { DeviceCapabilities } from './hooks';
+export { lineHeightTextStyle, sizeToNumber, borderRadiusToNumber } from './utils';
+export { Size, BorderRadius, LiquidGlassBackground } from './types';
+export { SliceBackgroundBlur } from './components/SliceBackgroundBlur';
+export type { SliceBackgroundBlurProps } from './components/SliceBackgroundBlur';

package/dist/types/native/src/providers/SliceThemeProvider.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import { type SliceNativeTheme } from '../theme';
+export type ThemePreference = 'system' | 'light' | 'dark';
+export type ThemeContextValue = {
+    theme: SliceNativeTheme;
+    mode: 'light' | 'dark';
+    preference: ThemePreference;
+    setPreference?: (preference: ThemePreference) => void;
+};
+export declare function SliceThemeProvider({ preference, onPreferenceChange, children, }: {
+    preference?: ThemePreference;
+    onPreferenceChange?: (preference: ThemePreference) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSliceContext(): ThemeContextValue;
+export declare function useSliceTheme(): SliceNativeTheme;

package/dist/types/native/src/providers/index.d.ts

@@ -0,0 +1,2 @@
+export { SliceThemeProvider, useSliceTheme, useSliceContext } from './SliceThemeProvider';
+export type { ThemePreference, ThemeContextValue } from './SliceThemeProvider';

package/dist/types/native/src/specs/BackgroundBlurNativeComponent.d.ts

@@ -0,0 +1,9 @@
+import { type CodegenTypes, type ColorValue, type HostComponent, type ViewProps } from 'react-native';
+export interface NativeProps extends ViewProps {
+    blurIntensity?: CodegenTypes.WithDefault<CodegenTypes.Double, 12>;
+    fadeStop?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+    direction?: CodegenTypes.WithDefault<'down' | 'up' | 'left' | 'right', 'down'>;
+    fallbackColor?: ColorValue;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/dist/types/native/src/specs/LiquidGlassNativeComponent.d.ts

@@ -0,0 +1,9 @@
+import { type CodegenTypes, type ColorValue, type HostComponent, type ViewProps } from 'react-native';
+export interface NativeProps extends ViewProps {
+    glassStyle?: CodegenTypes.WithDefault<'regular' | 'clear', 'regular'>;
+    glassTintColor?: ColorValue;
+    interactive?: CodegenTypes.WithDefault<boolean, false>;
+    cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Double, 24>;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/dist/types/native/src/specs/NativeDeviceCapabilities.d.ts

@@ -0,0 +1,11 @@
+import type { TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+    readonly getConstants: () => {
+        supportsLiquidGlass: boolean;
+        supportsNativeBlur: boolean;
+        deviceName: string;
+        deviceModel: string;
+    };
+}
+declare const _default: Spec | null | undefined;
+export default _default;

package/dist/types/native/{theme → src/theme}/index.d.ts

@@ -1,9 +1,9 @@
 import type { TextStyle, ViewStyle } from 'react-native';
-import { light, coreColors as webCore } from '../../src/theme/colors/colors';
-import { corners } from '../../src/theme/corners/corners';
-import { elevations } from '../../src/theme/elevations/elevations';
-import { spacing } from '../../src/theme/spacing/spacing';
-import { type as webType } from '../../src/theme/type/type';
+import { light, coreColors as webCore } from '../../../src/theme/colors/colors';
+import { corners } from '../../../src/theme/corners/corners';
+import { elevations } from '../../../src/theme/elevations/elevations';
+import { spacing } from '../../../src/theme/spacing/spacing';
+import { type as webType } from '../../../src/theme/type/type';
 export { corners, spacing, elevations };
 export type NativeTypography = Record<keyof typeof webType, TextStyle>;
 type ShadowKey = 'surface-shadow-soft' | 'surface-shadow-strong';

package/dist/types/native/src/types/index.d.ts

@@ -0,0 +1 @@
+export type { BorderRadius, LiquidGlassBackground, Size } from './sharedTypes';

package/dist/types/native/src/types/sharedTypes.d.ts

@@ -0,0 +1,14 @@
+import type { SliceLiquidGlassViewProps } from '../components';
+/**
+ * Size type exposed in components
+ */
+export type Size = 's' | 'm' | 'l' | number;
+/**
+ * Used for props in components that implement an optional liquid glass background
+ * Other props of the liquid glass components are inferred by the parent component
+ */
+export type LiquidGlassBackground = Omit<SliceLiquidGlassViewProps, 'cornerRadius' | 'removeClippedSubviews' | 'interactive'>;
+/**
+ * Border radius exposed for components that apply it
+ */
+export type BorderRadius = 'pill' | 'rectangular' | number;

package/dist/types/native/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { lineHeightTextStyle } from './typography';
+export { sizeToNumber, borderRadiusToNumber } from './sizes';

package/dist/types/native/src/utils/sizes/index.d.ts

@@ -0,0 +1 @@
+export { sizeToNumber, borderRadiusToNumber } from './sizes';

package/dist/types/native/src/utils/sizes/sizes.d.ts

@@ -0,0 +1,7 @@
+import type { BorderRadius, Size } from '../../types/sharedTypes';
+/**
+ * Internal utility converting size props to an absolute number
+ */
+export declare function sizeToNumber(size?: Size): number;
+/** Resolve radius presets; invalid or negative values produce square corners. */
+export declare function borderRadiusToNumber(borderRadius?: BorderRadius): number;

package/dist/types/native/src/utils/typography/index.d.ts

@@ -0,0 +1 @@
+export { lineHeightTextStyle } from './typography';

package/dist/types/native/src/utils/typography/typography.d.ts

@@ -0,0 +1,7 @@
+import type { TextStyle } from 'react-native';
+/**
+ * Simple utility to take text style and returns a defined line height factor
+ * Since there is no relative/percent in native, looks for the fontsize and
+ * derives an absolute line height from the font size
+ */
+export declare function lineHeightTextStyle(styles: TextStyle, lineHeightFactor?: number): TextStyle;

package/package.json

@@ -1,38 +1,66 @@
 {
 	"name": "@apple-pie/slice-native",
-	"version": "0.1.4",
-	"description": "React Native icons and design tokens for Slice",
+	"version": "0.1.7",
+	"description": "React Native components, icons and design tokens for Slice",
 	"author": "Uris Dacosta",
 	"license": "ISC",
 	"type": "commonjs",
 	"main": "./dist/cjs/index.js",
 	"module": "./dist/esm/index.mjs",
-	"react-native": "./dist/esm/index.mjs",
-	"types": "./dist/types/native/index.d.ts",
+	"react-native": "./dist/react-native/native/src/index.js",
+	"types": "./dist/types/native/src/index.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/types/native/index.d.ts",
-			"react-native": "./dist/esm/index.mjs",
+			"types": "./dist/types/native/src/index.d.ts",
+			"react-native": "./dist/react-native/native/src/index.js",
 			"import": "./dist/esm/index.mjs",
 			"require": "./dist/cjs/index.js"
 		},
 		"./package.json": "./package.json",
 		"./theme": {
-			"types": "./dist/types/native/theme/index.d.ts",
-			"react-native": "./dist/esm/theme.mjs",
+			"types": "./dist/types/native/src/theme/index.d.ts",
+			"react-native": "./dist/react-native/native/src/theme/index.js",
 			"import": "./dist/esm/theme.mjs",
 			"require": "./dist/cjs/theme.js"
+		},
+		"./components": {
+			"types": "./dist/types/native/src/components/index.d.ts",
+			"react-native": "./dist/react-native/native/src/components/index.js",
+			"import": "./dist/esm/components.mjs",
+			"require": "./dist/cjs/components.js"
+		},
+		"./hooks": {
+			"types": "./dist/types/native/src/hooks/index.d.ts",
+			"react-native": "./dist/react-native/native/src/hooks/index.js",
+			"import": "./dist/esm/hooks.mjs",
+			"require": "./dist/cjs/hooks.js"
+		},
+		"./providers": {
+			"types": "./dist/types/native/src/providers/index.d.ts",
+			"react-native": "./dist/react-native/native/src/providers/index.js",
+			"import": "./dist/esm/providers.mjs",
+			"require": "./dist/cjs/providers.js"
+		},
+		"./utils": {
+			"types": "./dist/types/native/src/utils/index.d.ts",
+			"react-native": "./dist/react-native/native/src/utils/index.js",
+			"import": "./dist/esm/utils.mjs",
+			"require": "./dist/cjs/utils.js"
 		}
 	},
-	"files": ["dist"],
+	"files": ["dist", "platform", "src/specs", "SliceNative.podspec", "react-native.config.js"],
 	"sideEffects": false,
 	"scripts": {
 		"test": "vitest run --config vitest.config.mts",
+		"test:package": "npm run build && node scripts/check-package.mjs",
+		"coverage": "vitest run --config vitest.config.mts --coverage",
 		"lint": "biome format --write . && biome check . && npm run typecheck",
 		"lint:ci": "biome ci . && npm run typecheck",
 		"build": "npm run generate && node scripts/build.mjs",
+		"pack:tarball": "node scripts/pack.mjs",
+		"pack": "node scripts/pack.mjs",
 		"prepack": "npm run build",
-		"generate": "node scripts/generate-icons.mjs",
+		"generate": "node scripts/generate-icons.mjs && biome format --write src/components/SliceIcon/iconRegistry.tsx src/components/SliceIcon/icons.ts",
 		"typecheck": "tsc --noEmit -p tsconfig.json"
 	},
 	"publishConfig": {
@@ -47,6 +75,24 @@
 	"peerDependencies": {
 		"react": "^18.0.0 || ^19.0.0",
 		"react-native": ">=0.80.0 <1.0.0",
-		"react-native-svg": "^15.0.0"
+		"react-native-svg": "^15.0.0",
+		"react-native-reanimated": "^4.0.0"
+	},
+	"codegenConfig": {
+		"name": "SliceNativeSpec",
+		"type": "all",
+		"jsSrcsDir": "src/specs",
+		"ios": {
+			"componentProvider": {
+				"SliceLiquidGlassView": "RCTLiquidGlassView",
+				"SliceBackgroundBlur": "RCTBackgroundBlurView"
+			},
+			"modulesProvider": {
+				"SliceDeviceCapabilities": "SliceDeviceCapabilities"
+			}
+		},
+		"android": {
+			"javaPackageName": "com.slice"
+		}
 	}
 }

package/platform/android/build.gradle

@@ -0,0 +1,22 @@
+buildscript {
+  repositories { google(); mavenCentral() }
+  dependencies { classpath 'com.android.tools.build:gradle:8.7.3' }
+}
+apply plugin: 'com.android.library'
+apply plugin: 'com.facebook.react'
+
+react {
+  jsRootDir = file('../../src')
+  libraryName = 'SliceNativeSpec'
+  codegenJavaPackageName = 'com.slice'
+}
+android {
+  namespace 'com.slice'
+  compileSdkVersion rootProject.ext.has('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 35
+  defaultConfig {
+    minSdkVersion 24
+    targetSdkVersion rootProject.ext.has('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 35
+  }
+}
+repositories { google(); mavenCentral() }
+dependencies { implementation 'com.facebook.react:react-android' }

package/platform/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/platform/android/src/main/java/com/slice/SliceBackgroundBlurManager.java

@@ -0,0 +1,28 @@
+package com.slice;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.viewmanagers.SliceBackgroundBlurManagerDelegate;
+import com.facebook.react.viewmanagers.SliceBackgroundBlurManagerInterface;
+
+public final class SliceBackgroundBlurManager extends SimpleViewManager<SliceBackgroundBlurView>
+    implements SliceBackgroundBlurManagerInterface<SliceBackgroundBlurView> {
+  private final ViewManagerDelegate<SliceBackgroundBlurView> delegate = new SliceBackgroundBlurManagerDelegate<>(this);
+  @Override protected ViewManagerDelegate<SliceBackgroundBlurView> getDelegate() { return delegate; }
+  @Override public String getName() { return "SliceBackgroundBlur"; }
+  @Override protected SliceBackgroundBlurView createViewInstance(ThemedReactContext context) {
+    return new SliceBackgroundBlurView(context);
+  }
+  @Override @ReactProp(name = "blurIntensity", defaultDouble = 12)
+  public void setBlurIntensity(SliceBackgroundBlurView view, double value) { view.setIntensity(value); }
+  @Override @ReactProp(name = "fallbackColor", customType = "Color")
+  public void setFallbackColor(SliceBackgroundBlurView view, @Nullable Integer value) { view.setFallbackColor(value); }
+  // Directional fading is intentionally iOS-only.
+  @Override @ReactProp(name = "fadeStop", defaultDouble = 0)
+  public void setFadeStop(SliceBackgroundBlurView view, double value) {}
+  @Override @ReactProp(name = "direction")
+  public void setDirection(SliceBackgroundBlurView view, @Nullable String value) {}
+}

package/platform/android/src/main/java/com/slice/SliceBackgroundBlurView.java

@@ -0,0 +1,98 @@
+package com.slice;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.RenderEffect;
+import android.graphics.RenderNode;
+import android.graphics.Shader;
+import android.os.Build;
+import android.view.View;
+import java.lang.reflect.Method;
+
+/** Uniform, same-window backdrop blur. Older platforms draw only the fallback. */
+public final class SliceBackgroundBlurView extends View {
+  private double intensity = 12;
+  private int fallbackColor = Color.argb(46, 128, 128, 128);
+  private BackdropRenderer renderer;
+
+  public SliceBackgroundBlurView(Context context) {
+    super(context);
+    setWillNotDraw(false);
+    // Resolve a public API at runtime to avoid requiring SDK 37.2 to build consumers.
+    // SDK_INT alone cannot distinguish Android's minor API releases.
+    if (supportsNativeBlur()) {
+      try {
+        renderer = new BackdropRenderer();
+      } catch (ReflectiveOperationException | LinkageError ignored) {
+        renderer = null;
+      }
+    }
+  }
+
+  static boolean supportsNativeBlur() {
+    if (Build.VERSION.SDK_INT < 37) return false;
+    try {
+      RenderNode.class.getMethod("setBackdropRenderEffect", RenderEffect.class);
+      return true;
+    } catch (ReflectiveOperationException | RuntimeException | LinkageError ignored) {
+      return false;
+    }
+  }
+
+  public void setIntensity(double value) {
+    intensity = Double.isFinite(value) ? Math.max(0, Math.min(100, value)) : 12;
+    invalidate();
+  }
+
+  public void setFallbackColor(Integer value) {
+    fallbackColor = value == null ? Color.argb(46, 128, 128, 128) : value;
+    invalidate();
+  }
+
+  @Override protected void onDraw(Canvas canvas) {
+    super.onDraw(canvas);
+    if (intensity == 0) return;
+    if (renderer != null && canvas.isHardwareAccelerated() && isHardwareAccelerated()) {
+      try {
+        float radius = (float) intensity * getResources().getDisplayMetrics().density;
+        renderer.draw(canvas, getWidth(), getHeight(), radius);
+        return;
+      } catch (ReflectiveOperationException | RuntimeException | LinkageError ignored) {
+        renderer = null;
+      }
+    }
+    canvas.drawColor(fallbackColor);
+  }
+
+  @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+    super.onSizeChanged(w, h, oldw, oldh);
+    if (renderer != null) renderer.node.discardDisplayList();
+  }
+
+  @Override protected void onDetachedFromWindow() {
+    if (renderer != null) renderer.node.discardDisplayList();
+    super.onDetachedFromWindow();
+  }
+
+  // Keep newer graphics classes out of the View's fields on older Android releases.
+  private static final class BackdropRenderer {
+    final RenderNode node = new RenderNode("SliceBackgroundBlur");
+    final Method setBackdropEffect;
+
+    BackdropRenderer() throws ReflectiveOperationException {
+      setBackdropEffect = RenderNode.class.getMethod("setBackdropRenderEffect", RenderEffect.class);
+      node.setClipToBounds(true);
+    }
+
+    void draw(Canvas canvas, int width, int height, float radius) throws ReflectiveOperationException {
+      setBackdropEffect.invoke(node, RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP));
+      node.setPosition(0, 0, width, height);
+      if (!node.hasDisplayList()) {
+        node.beginRecording(width, height);
+        node.endRecording();
+      }
+      canvas.drawRenderNode(node);
+    }
+  }
+}

package/platform/android/src/main/java/com/slice/SliceDeviceCapabilitiesModule.java

@@ -0,0 +1,25 @@
+package com.slice;
+
+import android.os.Build;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.annotations.ReactModule;
+import java.util.HashMap;
+import java.util.Map;
+
+@ReactModule(name = SliceDeviceCapabilitiesModule.NAME)
+public final class SliceDeviceCapabilitiesModule extends NativeDeviceCapabilitiesSpec {
+  public static final String NAME = "SliceDeviceCapabilities";
+
+  public SliceDeviceCapabilitiesModule(ReactApplicationContext context) { super(context); }
+
+  @Override public String getName() { return NAME; }
+
+  @Override protected Map<String, Object> getTypedExportedConstants() {
+    Map<String, Object> result = new HashMap<>();
+    result.put("supportsLiquidGlass", false);
+    result.put("supportsNativeBlur", SliceBackgroundBlurView.supportsNativeBlur());
+    result.put("deviceName", Build.MODEL);
+    result.put("deviceModel", Build.MODEL);
+    return result;
+  }
+}

package/platform/android/src/main/java/com/slice/SlicePackage.java

@@ -0,0 +1,25 @@
+package com.slice;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.BaseReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.model.ReactModuleInfo;
+import com.facebook.react.module.model.ReactModuleInfoProvider;
+import com.facebook.react.uimanager.ViewManager;
+import java.util.Collections;
+import java.util.List;
+
+public final class SlicePackage extends BaseReactPackage {
+  @Override @Nullable public NativeModule getModule(String name, ReactApplicationContext context) {
+    return SliceDeviceCapabilitiesModule.NAME.equals(name) ? new SliceDeviceCapabilitiesModule(context) : null;
+  }
+  @Override public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return () -> Collections.singletonMap(SliceDeviceCapabilitiesModule.NAME, new ReactModuleInfo(
+        SliceDeviceCapabilitiesModule.NAME, SliceDeviceCapabilitiesModule.NAME,
+        false, false, false, true));
+  }
+  @Override public List<ViewManager> createViewManagers(ReactApplicationContext context) {
+    return Collections.singletonList(new SliceBackgroundBlurManager());
+  }
+}

package/platform/ios/BackgroundBlurSurface.swift

@@ -0,0 +1,89 @@
+import UIKit
+
+@objc(SliceBackgroundBlurSurface)
+public final class BackgroundBlurSurface: UIView {
+    private let effectView = UIVisualEffectView(effect: nil)
+    private var animator: UIViewPropertyAnimator?
+    private var intensity: Double = 12
+    private var fadeStop: Double = 0
+    private var direction = "down"
+    private var fallbackColor: UIColor = .secondarySystemBackground
+    private var observer: NSObjectProtocol?
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        isUserInteractionEnabled = false
+        addSubview(effectView)
+        observer = NotificationCenter.default.addObserver(
+            forName: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
+            object: nil, queue: .main
+        ) { [weak self] _ in
+            MainActor.assumeIsolated { self?.updateEffect() }
+        }
+    }
+
+    public required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+    deinit {
+        animator?.stopAnimation(true)
+        if let observer { NotificationCenter.default.removeObserver(observer) }
+    }
+
+    @objc public func configure(intensity: Double, fadeStop: Double, direction: String, fallbackColor: UIColor?) {
+        self.intensity = intensity.isFinite ? min(100, max(0, intensity)) : 12
+        self.fadeStop = fadeStop.isFinite ? min(1, max(0, fadeStop)) : 0
+        self.direction = direction
+        self.fallbackColor = fallbackColor ?? .secondarySystemBackground
+        updateEffect()
+        setNeedsLayout()
+    }
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+        updateEffect()
+    }
+
+    private func updateEffect() {
+        setNeedsLayout()
+        animator?.stopAnimation(true)
+        animator = nil
+        effectView.effect = nil
+        effectView.backgroundColor = .clear
+        if UIAccessibility.isReduceTransparencyEnabled {
+            effectView.backgroundColor = fallbackColor
+        } else if intensity > 0, window != nil {
+            let animator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [weak self] in
+                self?.effectView.effect = UIBlurEffect(style: .regular)
+            }
+            animator.pausesOnCompletion = true
+            animator.startAnimation()
+            animator.pauseAnimation()
+            animator.fractionComplete = CGFloat(intensity / 100)
+            self.animator = animator
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        effectView.frame = bounds
+        guard fadeStop > 0, !UIAccessibility.isReduceTransparencyEnabled else {
+            effectView.mask = nil
+            return
+        }
+        // Mask the effect view directly, never its parent. Reassign after resizing
+        // so UIKit refreshes its internal copies of the mask.
+        let mask = UIView(frame: effectView.bounds)
+        let gradient = CAGradientLayer()
+        gradient.frame = mask.bounds
+        gradient.colors = [UIColor.clear.cgColor, UIColor.black.cgColor, UIColor.black.cgColor]
+        gradient.locations = [0, NSNumber(value: fadeStop), 1]
+        switch direction {
+        case "up": gradient.startPoint = CGPoint(x: 0.5, y: 1); gradient.endPoint = CGPoint(x: 0.5, y: 0)
+        case "left": gradient.startPoint = CGPoint(x: 1, y: 0.5); gradient.endPoint = CGPoint(x: 0, y: 0.5)
+        case "right": gradient.startPoint = CGPoint(x: 0, y: 0.5); gradient.endPoint = CGPoint(x: 1, y: 0.5)
+        default: gradient.startPoint = CGPoint(x: 0.5, y: 0); gradient.endPoint = CGPoint(x: 0.5, y: 1)
+        }
+        mask.layer.addSublayer(gradient)
+        effectView.mask = mask
+    }
+}