panelui-native 0.98.0 → 0.100.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,
@@ -706,6 +711,25 @@ export {
   type BubbleChartPoint,
   type BubbleChartStatus,
 } from './components/bubble-chart';
+export {
+  BumpChart,
+  useBumpChart,
+  bumpRanks,
+  type BumpChartProps,
+  type BumpChartHandle,
+  type BumpChartHeaderProps,
+  type BumpChartGridProps,
+  type BumpChartLineProps,
+  type BumpChartSkeletonProps,
+  type BumpChartXAxisProps,
+  type BumpChartYAxisProps,
+  type BumpChartLabelsProps,
+  type BumpChartTooltipProps,
+  type BumpChartLegendProps,
+  type BumpChartStatus,
+  type BumpChartDatum,
+  type BumpRanks,
+} from './components/bump-chart';
 export {
   PyramidChart,
   usePyramidChart,
@@ -922,6 +946,24 @@ export {
   type MessageScrollerButtonProps,
   type MessageScrollerPosition,
 } from './components/message-scroller';
+export {
+  MirrorAreaChart,
+  useMirrorAreaChart,
+  type MirrorAreaChartProps,
+  type MirrorAreaChartHandle,
+  type MirrorAreaChartHeaderProps,
+  type MirrorAreaChartGridProps,
+  type MirrorAreaChartBaselineProps,
+  type MirrorAreaChartAreaProps,
+  type MirrorAreaChartSkeletonProps,
+  type MirrorAreaChartXAxisProps,
+  type MirrorAreaChartYAxisProps,
+  type MirrorAreaChartTooltipProps,
+  type MirrorAreaChartLegendProps,
+  type MirrorAreaChartStatus,
+  type MirrorAreaChartSide,
+  type MirrorAreaChartDatum,
+} from './components/mirror-area-chart';
 export {
   Message,
   type MessageProps,

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>
+  );
+}

package/src/utils/chart.ts

@@ -560,6 +560,76 @@ export function areaPath(
     .join(' ');
 }
 
+/**
+ * A colour as a gradient stop: the colour without its alpha, and the alpha as
+ * the stop's opacity. A `<Stop>` given `rgba(255,255,255,0.13)` as its colour
+ * draws it opaque on native, so a translucent token such as `--color-skeleton`
+ * comes out solid white in a dark theme.
+ */
+export function colorStop(color: string): { stopColor: string; stopOpacity: number } {
+  const value = color.trim();
+  const clamp = (alpha: number) => (Number.isFinite(alpha) ? Math.min(Math.max(alpha, 0), 1) : 1);
+
+  // #rgba and #rrggbbaa
+  if (/^#([0-9a-f]{4}|[0-9a-f]{8})$/i.test(value)) {
+    const body =
+      value.length === 5
+        ? value
+            .slice(1)
+            .split('')
+            .map((digit) => digit + digit)
+            .join('')
+        : value.slice(1);
+    return {
+      stopColor: `#${body.slice(0, 6)}`,
+      stopOpacity: clamp(parseInt(body.slice(6, 8), 16) / 255),
+    };
+  }
+
+  // rgba(r, g, b, a) and rgb(r g b / a)
+  const match = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*[,/]\s*([\d.]+%?)\s*\)$/i.exec(value);
+  if (match) {
+    const raw = match[4]!;
+    const alpha = raw.endsWith('%') ? Number(raw.slice(0, -1)) / 100 : Number(raw);
+    return { stopColor: `rgb(${match[1]}, ${match[2]}, ${match[3]})`, stopOpacity: clamp(alpha) };
+  }
+
+  return { stopColor: value, stopOpacity: 1 };
+}
+
+/**
+ * One unbroken run of points joined by S-curves, for a chart of positions.
+ *
+ * Each join leaves one point level and arrives at the next one level, with
+ * both control points at the midpoint between them. A line that holds its
+ * position stays flat, and a line that changes position crosses over in the
+ * middle of the gap. The monotone curve suits values, not places: it bends
+ * through every point, so a series holding its rank would still look like it
+ * was moving.
+ */
+export function bumpSegment(points: ChartPoint[]): string {
+  'worklet';
+  if (!points.length) return '';
+  let d = `M${points[0]!.x},${points[0]!.y}`;
+  for (let i = 1; i < points.length; i += 1) {
+    const from = points[i - 1]!;
+    const to = points[i]!;
+    const mid = (from.x + to.x) / 2;
+    d += ` C${mid},${from.y} ${mid},${to.y} ${to.x},${to.y}`;
+  }
+  return d;
+}
+
+/** A dot at every point, as one path, so a series' markers cost one node. */
+export function dotsPath(points: ChartPoint[], radius: number): string {
+  'worklet';
+  let d = '';
+  for (const point of points) {
+    d += `M${point.x - radius},${point.y} a${radius},${radius} 0 1,0 ${radius * 2},0 a${radius},${radius} 0 1,0 ${-radius * 2},0 `;
+  }
+  return d;
+}
+
 /**
  * A rounded rectangle, built as a path rather than drawn as a `Rect`.
  *