panelui-native 0.63.0 → 0.66.1

package/src/index.ts

@@ -209,6 +209,8 @@ export {
   type FlowControlsProps,
   type FlowMiniMapProps,
   type FlowConnection,
+  type FlowEndpoint,
+  type FlowEndpointReference,
   type FlowViewport,
   type FlowNodePosition,
   type FlowEdgeVariant,
@@ -304,6 +306,7 @@ export {
   type MapArcProps,
   type MapGeoJSONProps,
   type MapClusterProps,
+  type MapFeatureAccessibility,
   type MapHeatmapProps,
   type MapUserLocationProps,
   type BasemapSource,
@@ -1095,6 +1098,28 @@ export {
   type TypographyParagraphProps,
   type TypographyCodeProps,
 } from './components/typography';
+export {
+  WaterfallChart,
+  useWaterfallChart,
+  waterfallSteps,
+  type WaterfallChartProps,
+  type WaterfallChartHandle,
+  type WaterfallChartHeaderProps,
+  type WaterfallChartGridProps,
+  type WaterfallChartBarsProps,
+  type WaterfallChartConnectorsProps,
+  type WaterfallChartValuesProps,
+  type WaterfallChartSkeletonProps,
+  type WaterfallChartXAxisProps,
+  type WaterfallChartYAxisProps,
+  type WaterfallChartTooltipProps,
+  type WaterfallChartLegendProps,
+  type WaterfallChartStatus,
+  type WaterfallChartOrientation,
+  type WaterfallDatum,
+  type WaterfallStep,
+  type WaterfallKind,
+} from './components/waterfall-chart';
 
 // Icons
 export {

package/src/primitives/modal-isolation-store.ts

@@ -0,0 +1,31 @@
+/** Tracks modal owners without unisolating the app while a nested modal remains. */
+export class ModalIsolationStore {
+  private owners = new Set<string>();
+  private listeners = new Set<() => void>();
+
+  acquire = (owner: string): (() => void) => {
+    const wasActive = this.getSnapshot();
+    this.owners.add(owner);
+    if (this.getSnapshot() !== wasActive) this.emit();
+
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      const activeBeforeRelease = this.getSnapshot();
+      this.owners.delete(owner);
+      if (this.getSnapshot() !== activeBeforeRelease) this.emit();
+    };
+  };
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+
+  getSnapshot = (): boolean => this.owners.size > 0;
+
+  private emit() {
+    this.listeners.forEach((listener) => listener());
+  }
+}

package/src/primitives/portal.tsx

@@ -7,6 +7,7 @@ import {
   useSyncExternalStore,
   type ReactNode,
 } from 'react';
+import { ModalIsolationStore } from './modal-isolation-store';
 
 type PortalMap = ReadonlyMap<string, ReactNode>;
 
@@ -39,13 +40,18 @@ class PortalStore {
 }
 
 const PortalContext = createContext<PortalStore | null>(null);
+const ModalIsolationContext = createContext<ModalIsolationStore | null>(null);
 
 export function PortalProvider({ children }: { children: ReactNode }) {
-  const storeRef = useRef<PortalStore | null>(null);
-  storeRef.current ??= new PortalStore();
+  const portalStoreRef = useRef<PortalStore | null>(null);
+  const modalStoreRef = useRef<ModalIsolationStore | null>(null);
+  portalStoreRef.current ??= new PortalStore();
+  modalStoreRef.current ??= new ModalIsolationStore();
   return (
-    <PortalContext.Provider value={storeRef.current}>
-      {children}
+    <PortalContext.Provider value={portalStoreRef.current}>
+      <ModalIsolationContext.Provider value={modalStoreRef.current}>
+        {children}
+      </ModalIsolationContext.Provider>
     </PortalContext.Provider>
   );
 }
@@ -71,6 +77,30 @@ export function Portal({ children }: { children: ReactNode }) {
   return null;
 }
 
+/** A portal that owns modal focus until it unmounts. */
+export function ModalPortal({ children }: { children: ReactNode }) {
+  const store = useModalIsolationStore('ModalPortal');
+  const owner = useId();
+
+  useEffect(() => store.acquire(owner), [owner, store]);
+
+  return <Portal>{children}</Portal>;
+}
+
+/** Whether any modal portal currently owns focus. */
+export function useModalIsolationActive(): boolean {
+  const store = useModalIsolationStore('useModalIsolationActive');
+  return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+
+function useModalIsolationStore(component: string): ModalIsolationStore {
+  const store = useContext(ModalIsolationContext);
+  if (!store) {
+    throw new Error(`${component} must be used within a <PanelUIProvider>`);
+  }
+  return store;
+}
+
 /** Mount point for portaled content. PanelUIProvider renders one automatically. */
 export function PortalHost() {
   const store = usePortalStore('PortalHost');

package/src/primitives/scrim.tsx

@@ -10,17 +10,20 @@
  * that never blurs anything installs nothing. When it is asked for and the
  * package is missing, this falls back to a dim rather than failing: a blur you
  * cannot draw is better shown as a darkened screen than as a crash.
+ * Reduce Transparency replaces the blur with an opaque, tint-aware surface.
  *
  * It fills its parent and does not intercept touches itself — the overlay layers
  * its own dismiss `Pressable` over it — so it is purely the visual backdrop.
  */
-import { type ComponentType } from 'react';
-import { StyleSheet, View, type ViewProps } from 'react-native';
+import { useEffect, useState, type ComponentType } from 'react';
+import { AccessibilityInfo, StyleSheet, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
+type BlurTint = 'light' | 'dark' | 'default' | 'systemMaterial';
+
 interface BlurViewProps {
   intensity?: number;
-  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  tint?: BlurTint;
   style?: unknown;
   children?: React.ReactNode;
 }
@@ -43,16 +46,112 @@ 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;
 
+type ReduceTransparencySource = {
+  isReduceTransparencyEnabled?: () => Promise<boolean>;
+  addEventListener?: (
+    event: 'reduceTransparencyChanged',
+    listener: (enabled: boolean) => void
+  ) => { remove?: () => void } | undefined;
+};
+
+function observeReduceTransparency(
+  source: ReduceTransparencySource,
+  onChange: (enabled: boolean) => void
+) {
+  let active = true;
+  let changed = false;
+  const update = (enabled: boolean) => {
+    changed = true;
+    if (active) onChange(Boolean(enabled));
+  };
+  /*
+   * A platform that cannot report the preference has no preference to respect,
+   * so blur stays available. A platform that has the API and failed to answer
+   * might have it switched on, and that is the case worth being careful about.
+   */
+  const fallback = (queryable: boolean) => () => {
+    if (active && !changed) onChange(queryable);
+  };
+
+  let subscription: { remove?: () => void } | undefined;
+  try {
+    subscription = source.addEventListener?.('reduceTransparencyChanged', update);
+  } catch {
+    // Some web and test shims expose AccessibilityInfo without every event.
+  }
+
+  try {
+    if (typeof source.isReduceTransparencyEnabled !== 'function') fallback(false)();
+    else {
+      void source.isReduceTransparencyEnabled().then((enabled) => {
+        // A preference event that arrived while the query was pending is newer.
+        if (active && !changed) update(enabled);
+      }, fallback(true));
+    }
+  } catch {
+    fallback(true)();
+  }
+
+  return () => {
+    active = false;
+    try {
+      subscription?.remove?.();
+    } catch {
+      // Cleanup stays safe for partial platform shims.
+    }
+  };
+}
+
+/**
+ * The last answer the platform gave, shared by every scrim in the process.
+ *
+ * The query is asynchronous and the preference belongs to the device, not to
+ * any one overlay. Without this, each overlay opens not knowing it and draws
+ * opaque until the answer arrives — a flash on every dialog for the many people
+ * who have the preference off. Remembered here, only the first overlay of a
+ * launch can see it.
+ */
+let knownReduceTransparency: boolean | null = null;
+
+function useReduceTransparency() {
+  // Not knowing is deliberately conservative: draw opaque until the platform
+  // says blur is allowed, rather than flashing blur at someone who opted out.
+  const [enabled, setEnabled] = useState<boolean | null>(knownReduceTransparency);
+  useEffect(
+    () =>
+      observeReduceTransparency(AccessibilityInfo, (next) => {
+        knownReduceTransparency = next;
+        setEnabled(next);
+      }),
+    []
+  );
+  return enabled;
+}
+
+type ScrimMode = 'blur' | 'dim' | 'opaque';
+
+function scrimMode(blur: boolean, canBlur: boolean, reduceTransparency: boolean | null): ScrimMode {
+  if (!blur) return 'dim';
+  if (reduceTransparency !== false) return 'opaque';
+  return canBlur ? 'blur' : 'dim';
+}
+
+function opaqueClassName(tint: BlurTint) {
+  if (tint === 'light') return 'bg-white';
+  if (tint === 'dark') return 'bg-black';
+  return 'bg-background';
+}
+
 export interface ScrimProps extends Omit<ViewProps, 'children'> {
   /** Frost the backdrop instead of dimming it. Falls back to a dim if it can't. */
   blur?: boolean;
   /** Blur strength, 0–100. */
   intensity?: number;
   /** Which way the blur tints. */
-  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  tint?: BlurTint;
   /**
-   * The dim used when not blurring — and when blurring is asked for but
-   * unavailable. A popover passes a lighter one than a dialog.
+   * The dim used when not blurring, when blur is unavailable, and over the
+   * opaque Reduce Transparency fallback. A popover passes a lighter one than a dialog.
    */
   dimClassName?: string;
 }
@@ -65,7 +164,10 @@ export function Scrim({
   style,
   ...props
 }: ScrimProps) {
-  if (blur && BlurView) {
+  const reduceTransparency = useReduceTransparency();
+  const mode = scrimMode(blur, BlurView !== null, reduceTransparency);
+
+  if (mode === 'blur' && BlurView) {
     return (
       <Animated.View
         entering={FadeIn.duration(180)}
@@ -81,6 +183,24 @@ export function Scrim({
     );
   }
 
+  if (mode === 'opaque') {
+    return (
+      <Animated.View
+        entering={FadeIn.duration(180)}
+        exiting={FadeOut.duration(150)}
+        style={[StyleSheet.absoluteFill, style]}
+        {...props}
+      >
+        <View
+          pointerEvents="none"
+          style={StyleSheet.absoluteFill}
+          className={opaqueClassName(tint)}
+        />
+        <View pointerEvents="none" style={StyleSheet.absoluteFill} className={dimClassName} />
+      </Animated.View>
+    );
+  }
+
   return (
     <Animated.View
       entering={FadeIn.duration(150)}

package/src/providers/panel-ui-provider.tsx

@@ -1,7 +1,11 @@
 import { Fragment, type ComponentType, type ReactNode } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { PortalHost, PortalProvider } from '../primitives/portal';
+import {
+  PortalHost,
+  PortalProvider,
+  useModalIsolationActive,
+} from '../primitives/portal';
 import { ToastViewport } from '../components/toast';
 import { cn } from '../utils/cn';
 
@@ -58,19 +62,47 @@ export function PanelUIProvider({
       {/* Outermost of ours, so every field below it can avoid the keyboard.
           A no-op Fragment when the controller is not installed. */}
       <KeyboardProvider>
-        <View className={cn('flex-1', background && 'bg-background', className)}>
-          <PortalProvider>
+        <PortalProvider>
+          <ProviderSurface
+            background={background}
+            className={className}
+          >
             {children}
-            {/* Sits before PortalHost so it can portal into it. */}
-            <ToastViewport />
-            <PortalHost />
-          </PortalProvider>
-        </View>
+          </ProviderSurface>
+        </PortalProvider>
       </KeyboardProvider>
     </GestureHandlerRootView>
   );
 }
 
+function ProviderSurface({
+  children,
+  className,
+  background,
+}: Required<Pick<PanelUIProviderProps, 'children' | 'background'>> &
+  Pick<PanelUIProviderProps, 'className'>) {
+  const modalActive = useModalIsolationActive();
+  const isolateApp = Platform.OS === 'android' && modalActive;
+
+  return (
+    <View className={cn('flex-1', background && 'bg-background', className)}>
+      {/* This wrapper is the app accessibility boundary. PortalHost stays its
+          sibling, so hiding the background can never hide the active modal. */}
+      <View
+        collapsable={false}
+        style={styles.content}
+        importantForAccessibility={isolateApp ? 'no-hide-descendants' : 'auto'}
+      >
+        {children}
+      </View>
+      {/* Sits before PortalHost so it can portal into it. */}
+      <ToastViewport />
+      <PortalHost />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   root: { flex: 1 },
+  content: { flex: 1 },
 });

package/theme.css

@@ -78,12 +78,16 @@
   --color-accent-foreground: unset;
   --color-destructive: unset;
   --color-destructive-foreground: unset;
+  --color-destructive-solid-foreground: unset;
   --color-info: unset;
   --color-info-foreground: unset;
+  --color-info-solid-foreground: unset;
   --color-success: unset;
   --color-success-foreground: unset;
+  --color-success-solid-foreground: unset;
   --color-warning: unset;
   --color-warning-foreground: unset;
+  --color-warning-solid-foreground: unset;
   --color-border: unset;
   --color-input: unset;
   --color-ring: unset;
@@ -226,15 +230,19 @@
       /* status: {hue}-500, foreground {hue}-700 */
       --color-destructive: #ef4444;
       --color-destructive-foreground: #b91c1c;
+      --color-destructive-solid-foreground: #171717;
 
       --color-info: #3b82f6;
       --color-info-foreground: #1d4ed8;
+      --color-info-solid-foreground: #171717;
 
       --color-success: #10b981;
       --color-success-foreground: #047857;
+      --color-success-solid-foreground: #171717;
 
       --color-warning: #f59e0b;
       --color-warning-foreground: #b45309;
+      --color-warning-solid-foreground: #171717;
 
       /* border: black 8%, input: black 10% */
       --color-border: rgba(0, 0, 0, 0.08);
@@ -327,15 +335,19 @@
       /* color-mix(red-500 90%, white), foreground {hue}-400 */
       --color-destructive: #f15757;
       --color-destructive-foreground: #f87171;
+      --color-destructive-solid-foreground: #171717;
 
       --color-info: #3b82f6;
       --color-info-foreground: #60a5fa;
+      --color-info-solid-foreground: #171717;
 
       --color-success: #10b981;
       --color-success-foreground: #34d399;
+      --color-success-solid-foreground: #171717;
 
       --color-warning: #f59e0b;
       --color-warning-foreground: #fbbf24;
+      --color-warning-solid-foreground: #171717;
 
       /* border: white 6%, input: white 8% */
       --color-border: rgba(255, 255, 255, 0.06);
@@ -446,15 +458,19 @@
 
       --color-destructive: #eb5757;
       --color-destructive-foreground: #c62b30;
+      --color-destructive-solid-foreground: #08090a;
 
       --color-info: #4ea7fc;
       --color-info-foreground: #0b6ec4;
+      --color-info-solid-foreground: #08090a;
 
       --color-success: #27a644;
       --color-success-foreground: #1c7a32;
+      --color-success-solid-foreground: #08090a;
 
       --color-warning: #f2c94c;
       --color-warning-foreground: #8a6d0b;
+      --color-warning-solid-foreground: #08090a;
 
       --color-border: rgba(0, 0, 0, 0.08);
       --color-input: rgba(0, 0, 0, 0.12);
@@ -531,15 +547,19 @@
 
       --color-destructive: #eb5757;
       --color-destructive-foreground: #ff8a8a;
+      --color-destructive-solid-foreground: #08090a;
 
       --color-info: #4ea7fc;
       --color-info-foreground: #8ec5ff;
+      --color-info-solid-foreground: #08090a;
 
       --color-success: #27a644;
       --color-success-foreground: #4cc061;
+      --color-success-solid-foreground: #08090a;
 
       --color-warning: #f2c94c;
       --color-warning-foreground: #f5d97a;
+      --color-warning-solid-foreground: #08090a;
 
       /* The hairlines are opaque, not translucent: the surface ladder is only
          a few points wide, so a border mixed with whatever is under it would
@@ -606,10 +626,9 @@
       /* the sunken band under a card or dialog: black at 3.5% */
       --color-inset: rgba(0, 0, 0, 0.035);
 
-      /* Brand green is too light for white text; light mode uses the
-         darker ramp step so the contrast ratio holds. */
+      /* Dark green ink preserves the brand fill and clears the body-text floor. */
       --color-primary: #24b47e;
-      --color-primary-foreground: #ffffff;
+      --color-primary-foreground: #052e1b;
 
       --color-secondary: rgba(0, 0, 0, 0.05);
       --color-secondary-foreground: #171717;
@@ -622,15 +641,19 @@
 
       --color-destructive: #ef4444;
       --color-destructive-foreground: #b91c1c;
+      --color-destructive-solid-foreground: #171717;
 
       --color-info: #3b82f6;
       --color-info-foreground: #1d4ed8;
+      --color-info-solid-foreground: #171717;
 
       --color-success: #24b47e;
       --color-success-foreground: #16794c;
+      --color-success-solid-foreground: #171717;
 
       --color-warning: #f59e0b;
       --color-warning-foreground: #b45309;
+      --color-warning-solid-foreground: #171717;
 
       --color-border: rgba(0, 0, 0, 0.08);
       --color-input: rgba(0, 0, 0, 0.1);
@@ -707,15 +730,19 @@
 
       --color-destructive: #f15757;
       --color-destructive-foreground: #f87171;
+      --color-destructive-solid-foreground: #171717;
 
       --color-info: #3b82f6;
       --color-info-foreground: #60a5fa;
+      --color-info-solid-foreground: #171717;
 
       --color-success: #3ecf8e;
       --color-success-foreground: #4ade80;
+      --color-success-solid-foreground: #171717;
 
       --color-warning: #f59e0b;
       --color-warning-foreground: #fbbf24;
+      --color-warning-solid-foreground: #171717;
 
       --color-border: rgba(255, 255, 255, 0.07);
       --color-input: rgba(255, 255, 255, 0.1);