panelui-native 0.98.0 → 0.99.0

package/src/index.ts

@@ -569,6 +569,11 @@ export {
   type ImageGenerationFieldProps,
   type ImageGenerationStatus,
 } from './components/image-generation';
+export {
+  ImageViewer,
+  type ImageViewerProps,
+  type ImageViewerTriggerProps,
+} from './components/image-viewer';
 export { Input, type InputProps } from './components/input';
 export {
   InputGroup,

package/src/primitives/scrim.tsx

@@ -17,7 +17,13 @@
  */
 import { useEffect, useState, type ComponentType } from 'react';
 import { AccessibilityInfo, StyleSheet, View, type ViewProps } from 'react-native';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedProps,
+  useAnimatedStyle,
+  type DerivedValue,
+} from 'react-native-reanimated';
 
 type BlurTint = 'light' | 'dark' | 'default' | 'systemMaterial';
 
@@ -46,6 +52,15 @@ const BlurView: ComponentType<BlurViewProps> | null = (() => {
 /** True when a real blur can be drawn — for a caller that wants to know. */
 export const hasBlur = BlurView !== null;
 
+/**
+ * The same view, able to take its `intensity` from the UI thread. The package
+ * names the native view as the one to animate, so the radius itself moves
+ * rather than a finished blur being faded in over the page.
+ */
+const AnimatedBlurView = BlurView
+  ? Animated.createAnimatedComponent(BlurView as ComponentType<BlurViewProps>)
+  : null;
+
 type ReduceTransparencySource = {
   isReduceTransparencyEnabled?: () => Promise<boolean>;
   addEventListener?: (
@@ -160,6 +175,15 @@ export interface ScrimProps extends Omit<ViewProps, 'children'> {
    * opaque Reduce Transparency fallback. A popover passes a lighter one than a dialog.
    */
   dimClassName?: string;
+  /**
+   * How far the backdrop is in, from `0` to `1`, read on the UI thread.
+   *
+   * For an overlay the finger can pull partway out — a viewer dragged towards
+   * dismissal — where the backdrop has to follow the finger instead of running
+   * its own fade. The blur's radius tracks it, and the dim and the opaque
+   * fallback track it as opacity. Left out, the scrim fades itself in and out.
+   */
+  progress?: DerivedValue<number>;
 }
 
 export function Scrim({
@@ -167,12 +191,27 @@ export function Scrim({
   intensity = 24,
   tint = 'default',
   dimClassName = 'bg-black/50',
+  progress,
   style,
   ...props
 }: ScrimProps) {
   const reduceTransparency = useReduceTransparency();
   const mode = scrimMode(blur, BlurView !== null, reduceTransparency);
 
+  if (progress) {
+    return (
+      <ProgressScrim
+        mode={mode}
+        progress={progress}
+        intensity={intensity}
+        tint={tint}
+        dimClassName={dimClassName}
+        style={style}
+        {...props}
+      />
+    );
+  }
+
   if (mode === 'blur' && BlurView) {
     return (
       <Animated.View
@@ -219,3 +258,59 @@ export function Scrim({
 }
 
 Scrim.displayName = 'Scrim';
+
+interface ProgressScrimProps extends Omit<ViewProps, 'children'> {
+  mode: ScrimMode;
+  progress: DerivedValue<number>;
+  intensity: number;
+  tint: BlurTint;
+  dimClassName: string;
+}
+
+/** The scrim with its three layers driven by a shared value instead of a fade. */
+function ProgressScrim({
+  mode,
+  progress,
+  intensity,
+  tint,
+  dimClassName,
+  style,
+  ...props
+}: ProgressScrimProps) {
+  const blurProps = useAnimatedProps(() => ({
+    intensity: Math.min(Math.max(progress.value, 0), 1) * intensity,
+  }));
+  const fade = useAnimatedStyle(() => ({
+    opacity: Math.min(Math.max(progress.value, 0), 1),
+  }));
+
+  if (mode === 'blur' && AnimatedBlurView) {
+    return (
+      <View style={[StyleSheet.absoluteFill, style]} {...props}>
+        <AnimatedBlurView
+          tint={tint}
+          animatedProps={blurProps}
+          style={StyleSheet.absoluteFill}
+        />
+        <Animated.View
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, fade]}
+          className="bg-black/10"
+        />
+      </View>
+    );
+  }
+
+  return (
+    <Animated.View style={[StyleSheet.absoluteFill, fade, style]} {...props}>
+      {mode === 'opaque' ? (
+        <View
+          pointerEvents="none"
+          style={StyleSheet.absoluteFill}
+          className={opaqueClassName(tint)}
+        />
+      ) : null}
+      <View pointerEvents="none" style={StyleSheet.absoluteFill} className={dimClassName} />
+    </Animated.View>
+  );
+}