panelui-native 0.62.0 → 0.65.0

package/src/index.ts

@@ -304,6 +304,7 @@ export {
   type MapArcProps,
   type MapGeoJSONProps,
   type MapClusterProps,
+  type MapFeatureAccessibility,
   type MapHeatmapProps,
   type MapUserLocationProps,
   type BasemapSource,
@@ -591,6 +592,52 @@ export {
   type PolarAreaScale,
   type PolarAreaDatum,
 } from './components/polar-area-chart';
+export {
+  Plot,
+  usePlot,
+  usePlotCursor,
+  type PlotProps,
+  type PlotHandle,
+  type PlotGeometry,
+  type PlotHeaderProps,
+  type PlotLegendProps,
+  type PlotGridProps,
+  type PlotSeriesProps,
+  type PlotLineProps,
+  type PlotAreaProps,
+  type PlotBarsProps,
+  type PlotDotsProps,
+  type PlotRuleProps,
+  type PlotLayerProps,
+  type PlotOverlayProps,
+  type PlotXAxisProps,
+  type PlotYAxisProps,
+  type PlotCursorProps,
+  type PlotTooltipProps,
+  type PlotDatum,
+  type PlotStatus,
+  type PlotCurve,
+  type PlotScale,
+  type PlotBound,
+  type PlotBox,
+} from './components/plot';
+/*
+ * The scale functions, alongside the component they exist for. Every one is a
+ * worklet, which is what lets a mark somebody writes themselves be rebuilt on
+ * the UI thread on the same frames `Plot`'s own are.
+ */
+export {
+  areaPath,
+  bandOf,
+  barPath,
+  compactNumber,
+  linePath,
+  segment,
+  xAt,
+  xOf,
+  yOf,
+  type ChartPoint,
+} from './components/plot';
 export { Textarea, type TextareaProps } from './components/textarea';
 export {
   TagInput,
@@ -1049,6 +1096,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/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

@@ -56,6 +56,18 @@
    */
   --color-overlay: unset;
   --color-overlay-foreground: unset;
+  /*
+   * A band set *into* a surface rather than raised off it — the footer of
+   * actions under a card or a dialog.
+   *
+   * A translucent black in every theme, rather than a colour of its own,
+   * because it has to come out darker than whatever it is drawn on and that
+   * changes: a card, a popover, or a surface the caller passed in. `--color-
+   * muted` cannot do this job — it is white in a dark theme, so the band it
+   * draws floats forward instead of sinking, which is the opposite of what a
+   * footer is saying.
+   */
+  --color-inset: unset;
   --color-primary: unset;
   --color-primary-foreground: unset;
   --color-secondary: unset;
@@ -66,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;
@@ -194,6 +210,8 @@
 
       --color-overlay: #ffffff;
       --color-overlay-foreground: #262626;
+      /* the sunken band under a card or dialog: black at 3.5% */
+      --color-inset: rgba(0, 0, 0, 0.035);
 
       --color-primary: #262626;
       --color-primary-foreground: #fafafa;
@@ -212,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);
@@ -289,6 +311,8 @@
       /* color-mix(background 92%, white) — one step past the popover */
       --color-overlay: #232323;
       --color-overlay-foreground: #f5f5f5;
+      /* the sunken band under a card or dialog: black at 22% */
+      --color-inset: rgba(0, 0, 0, 0.22);
 
       --color-primary: #f5f5f5;
       --color-primary-foreground: #262626;
@@ -311,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);
@@ -413,6 +441,8 @@
 
       --color-overlay: #ffffff;
       --color-overlay-foreground: #08090a;
+      /* the sunken band under a card or dialog: black at 3.5% */
+      --color-inset: rgba(0, 0, 0, 0.035);
 
       --color-primary: #5e6ad2;
       --color-primary-foreground: #ffffff;
@@ -428,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);
@@ -496,6 +530,8 @@
 
       --color-overlay: #18191a;
       --color-overlay-foreground: #f7f8f8;
+      /* the sunken band under a card or dialog: black at 22% */
+      --color-inset: rgba(0, 0, 0, 0.22);
 
       --color-primary: #5e6ad2;
       --color-primary-foreground: #ffffff;
@@ -511,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
@@ -583,11 +623,12 @@
 
       --color-overlay: #ffffff;
       --color-overlay-foreground: #171717;
+      /* 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;
@@ -600,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);
@@ -668,6 +713,8 @@
 
       --color-overlay: #2a2a2a;
       --color-overlay-foreground: #ededed;
+      /* the sunken band under a card or dialog: black at 22% */
+      --color-inset: rgba(0, 0, 0, 0.22);
 
       --color-primary: #3ecf8e;
       --color-primary-foreground: #052e1b;
@@ -683,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);