panelui-native 0.75.1 → 0.76.0

package/src/components/tree/index.tsx

@@ -286,10 +286,10 @@ const TreeRoot = forwardRef<View, TreeProps>(
       <TreeContext.Provider value={context}>
         <Animated.View
           ref={ref}
+          {...props}
           layout={LinearTransition.duration(TRANSITION_DURATION)}
           accessibilityRole="list"
           className={root({ className })}
-          {...props}
         >
           {children}
         </Animated.View>
@@ -394,6 +394,7 @@ const TreeTrigger = forwardRef<View, TreeTriggerProps>(
     return (
       <Pressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{
           expanded: isBranch ? isExpanded : undefined,
@@ -403,7 +404,6 @@ const TreeTrigger = forwardRef<View, TreeTriggerProps>(
         aria-level={level + 1}
         disabled={triggerDisabled}
         className={trigger({ className })}
-        {...props}
         onPress={handlePress}
       >
         <IconColorProvider color={isSelected ? selectedColor : undefined}>

package/src/components/typography/index.tsx

@@ -290,9 +290,9 @@ export interface TypographyListProps extends ViewProps {
  */
 const TypographyList = forwardRef<View, TypographyListProps>(
   ({ className, ordered = false, children, ...props }, ref) => (
-    <View ref={ref} accessibilityRole="list" className={cn('gap-2', className)} {...props}>
+    <View ref={ref} {...props} accessibilityRole="list" className={cn('gap-2', className)}>
       {Children.map(children, (child, index) => (
-        <View className="w-full flex-row gap-2">
+        <View role="listitem" className="w-full flex-row gap-2">
           {ordered ? (
             <Text className="text-base text-muted-foreground">{index + 1}.</Text>
           ) : (

package/src/components/waterfall-chart/index.tsx

@@ -65,7 +65,12 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, { Defs, G, Line as SvgLine, LinearGradient, Path, Stop } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { Text } from '../../primitives/text';
+import {
+  finiteChartDomain,
+  finiteChartNumber,
+} from '../../primitives/finite-chart';
 import { barPath, compactNumber, type Plot } from '../../utils/chart';
 import { cn } from '../../utils/cn';
 
@@ -196,7 +201,7 @@ export function waterfallSteps(data: WaterfallDatum[]): WaterfallStep[] {
   let running = 0;
 
   for (const datum of data) {
-    const value = typeof datum.value === 'number' && !Number.isNaN(datum.value) ? datum.value : 0;
+    const value = finiteChartNumber(datum.value) ?? 0;
 
     if (datum.total) {
       // A total is a reading, so it is measured from the baseline and the
@@ -228,7 +233,7 @@ export function waterfallSteps(data: WaterfallDatum[]): WaterfallStep[] {
   return steps;
 }
 
-export interface WaterfallChartProps extends ViewProps {
+export interface WaterfallChartProps extends ViewProps, ChartAccessibilityProps<WaterfallStep> {
   className?: string;
   /** The steps, in the order they happen. */
   data: WaterfallDatum[];
@@ -327,6 +332,11 @@ const WaterfallChartRoot = forwardRef<WaterfallChartHandle, WaterfallChartProps>
       fallColor,
       totalColor,
       onActiveIndexChange,
+      accessible,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForDatum,
+      onAccessibilityDatumPress,
       compact = false,
       children,
       ...props
@@ -385,7 +395,8 @@ const WaterfallChartRoot = forwardRef<WaterfallChartHandle, WaterfallChartProps>
     };
 
     const extent = useMemo<[number, number]>(() => {
-      if (yDomain) return yDomain;
+      const explicit = finiteChartDomain(yDomain);
+      if (explicit) return explicit;
 
       /*
        * Both ends of every bar, not just the values. A step's bar occupies the
@@ -535,7 +546,29 @@ const WaterfallChartRoot = forwardRef<WaterfallChartHandle, WaterfallChartProps>
       <WaterfallChartContext.Provider value={context}>
         <View {...props} style={props.style} className={cn('w-full', className)}>
           {header}
-          <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+          <ChartAccessibilityData
+            chart="Waterfall chart"
+            data={steps}
+            disabled={accessible === false || loading}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityLabelForDatum={accessibilityLabelForDatum}
+            onAccessibilityDatumPress={onAccessibilityDatumPress}
+            valueOf={(step) => [
+              ['label', step.label],
+              ['change', step.value],
+              ['kind', step.kind],
+              ['starts at', step.start],
+              ['ends at', step.end],
+            ]}
+          />
+          <View
+            onLayout={onLayout}
+            style={{ aspectRatio }}
+            className="w-full"
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
             {plot.width > 0 ? (
               <>
                 <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>

package/src/hooks/use-disclosure.ts

@@ -1,4 +1,5 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useControllableState } from '../primitives/controllable-state';
 
 export interface UseDisclosureOptions {
   defaultOpen?: boolean;
@@ -34,17 +35,11 @@ export function useDisclosure({
   open: controlledOpen,
   onOpenChange,
 }: UseDisclosureOptions = {}): UseDisclosureResult {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-  const isControlled = controlledOpen !== undefined;
-  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-
-  const setOpen = useCallback(
-    (next: boolean) => {
-      if (!isControlled) setUncontrolledOpen(next);
-      onOpenChange?.(next);
-    },
-    [isControlled, onOpenChange]
-  );
+  const { value: isOpen, setValue: setOpen } = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
 
   const open = useCallback(() => setOpen(true), [setOpen]);
   const close = useCallback(() => setOpen(false), [setOpen]);

package/src/icons/index.tsx

@@ -852,6 +852,22 @@ export function PaperclipIcon({ size = 16, color, ...props }: IconProps) {
 }
 
 /** A capsule on a stand — a microphone, for anything voice. */
+/** A voice waveform — dictation, voice mode, a recording that has a shape. */
+export function AudioLinesIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function MicIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -1078,6 +1094,73 @@ export function CrosshairIcon({ size = 16, color, ...props }: IconProps) {
 }
 
 /** A compass needle — which way is north. */
+export function GlobeIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle
+        cx={12}
+        cy={12}
+        r={10}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function CameraIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Circle
+        cx={12}
+        cy={13}
+        r={3}
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/**
+ * The glyph on a control that opens a list of values — a stacked pair, because
+ * one chevron promises a direction the control does not travel in.
+ */
+export function ChevronsUpDownIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m7 15 5 5 5-5M7 9l5-5 5 5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function CompassIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -1256,6 +1339,29 @@ export interface ToggleIconProps extends IconProps {
 }
 
 /** Upvote. Filled once the vote is cast. */
+/**
+ * A plain up arrow, drawn symmetrically about the centre of its box so it sits
+ * dead centre in a circular button.
+ *
+ * Distinct from `ArrowUpIcon`, which is the heavy solid arrow a vote control
+ * wants, and from `SendIcon`, which is a paper plane. This is the one a
+ * composer's send button uses.
+ */
+export function SendArrowIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m5 12 7-7 7 7M12 19V5"
+        stroke={resolved}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function ArrowUpIcon({ size = 16, color, filled, ...props }: ToggleIconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (

package/src/index.ts

@@ -20,6 +20,9 @@ export { Portal, PortalHost, PortalProvider } from './primitives/portal';
 // recede. Public so a custom overlay gets the same backdrop — and the same
 // graceful fall back from blur to dim — as the built-in ones.
 export { Scrim, hasBlur, type ScrimProps } from './primitives/scrim';
+// The material iOS draws its floating controls in, with a solid fallback where
+// there is none. Public so a surface of your own gets the same treatment.
+export { Glass, hasGlass, type GlassProps, type GlassVariant, type GlassRadius } from './primitives/glass';
 export { Text, type TextProps } from './primitives/text';
 export { Collapse, type CollapseProps } from './primitives/collapse';
 export {
@@ -935,6 +938,25 @@ export {
   type SignatureToolbarProps,
   type SignatureButtonProps,
 } from './components/signature';
+export {
+  AIInput,
+  type AIInputProps,
+  type AIInputStatus,
+  type AIInputFieldProps,
+  type AIInputRowProps,
+  type AIInputToolbarProps,
+  type AIInputActionProps,
+  type AIInputPillProps,
+  type AIInputSubmitProps,
+  type AIInputRecordingProps,
+  type AIInputSheetProps,
+  type AIInputSheetScreenProps,
+  type AIInputSheetGroupProps,
+  type AIInputSheetRowProps,
+  type AIInputSheetToggleProps,
+  type AIInputSheetChoiceProps,
+  type AIInputVoiceModeProps,
+} from './components/ai-input';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
 export {
   Reasoning,
@@ -1190,17 +1212,20 @@ export {
   ArrowDownIcon,
   ArrowUpIcon,
   ArrowUpRightIcon,
+  AudioLinesIcon,
   BadgeCheckIcon,
   BellIcon,
   BookmarkIcon,
   BoldIcon,
   CalendarIcon,
+  CameraIcon,
   CardIcon,
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronsUpDownIcon,
   ChevronUpIcon,
   CircleIcon,
   CodeIcon,
@@ -1215,6 +1240,7 @@ export {
   FileIcon,
   FolderIcon,
   FolderOpenIcon,
+  GlobeIcon,
   GoogleIcon,
   HeartIcon,
   HeadingIcon,
@@ -1247,6 +1273,7 @@ export {
   RotateCcwIcon,
   RotateCwIcon,
   SearchIcon,
+  SendArrowIcon,
   SendIcon,
   ShareNodesIcon,
   ShieldAlertIcon,

package/src/primitives/controllable-state.ts

@@ -0,0 +1,112 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+
+const identity = <T,>(value: T): T => value;
+const objectIs = <T,>(left: T, right: T): boolean => Object.is(left, right);
+
+export interface ControllableStateOptions<T> {
+  /** Accepted owner state. `undefined` selects uncontrolled ownership. */
+  value: T | undefined;
+  /** Initial state used only while uncontrolled. */
+  defaultValue: T;
+  /** Reports a distinct requested value exactly once per setter invocation. */
+  onChange?: (value: T) => void;
+  /** Reports accepted state changes, whether requested or externally reset. */
+  onSettled?: (value: T) => void;
+  /** Normalize defaults, controlled values, and requests through one boundary. */
+  normalize?: (value: T) => T;
+  /** Equality used for no-op requests and accepted settlement. */
+  isEqual?: (left: T, right: T) => boolean;
+  /** Stable semantic identity for controlled objects recreated by their owner. */
+  getValueKey?: (value: T) => unknown;
+}
+
+export interface ControllableStateResult<T> {
+  /** State accepted by the current owner; controlled requests never render optimistically. */
+  value: T;
+  setValue: Dispatch<SetStateAction<T>>;
+  isControlled: boolean;
+}
+
+/**
+ * Owner-driven controlled/uncontrolled state with an explicit settlement edge.
+ *
+ * Switching from controlled to uncontrolled retains the last accepted owner
+ * value instead of resurrecting a stale default. Switching into controlled
+ * mode adopts the prop immediately. `undefined` is the ownership sentinel and
+ * therefore cannot itself be a controlled value; use `null` for empty state.
+ */
+export function useControllableState<T>({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onSettled,
+  normalize = identity,
+  isEqual = objectIs,
+  getValueKey,
+}: ControllableStateOptions<T>): ControllableStateResult<T> {
+  const [internalValue, setInternalValue] = useState(() =>
+    normalize(defaultValue)
+  );
+  const isControlled = valueProp !== undefined;
+  const controlledKey = isControlled
+    ? getValueKey
+      ? getValueKey(valueProp as T)
+      : valueProp
+    : undefined;
+  const controlledValue = useMemo(
+    () => (isControlled ? normalize(valueProp as T) : undefined),
+    // The semantic key deliberately replaces object identity for equivalent owner values.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controlledKey, isControlled, normalize]
+  );
+  const wasControlled = useRef(isControlled);
+  const lastControlledValue = useRef<T | undefined>(controlledValue);
+  if (isControlled) lastControlledValue.current = controlledValue;
+
+  const leavingControlled = wasControlled.current && !isControlled;
+  const value = isControlled
+    ? (controlledValue as T)
+    : leavingControlled
+      ? (lastControlledValue.current as T)
+      : internalValue;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  useLayoutEffect(() => {
+    if (wasControlled.current && !isControlled) {
+      setInternalValue(lastControlledValue.current as T);
+    }
+    wasControlled.current = isControlled;
+  }, [isControlled]);
+
+  const previousSettled = useRef(value);
+  useLayoutEffect(() => {
+    if (isEqual(previousSettled.current, value)) return;
+    previousSettled.current = value;
+    onSettled?.(value);
+  }, [isEqual, onSettled, value]);
+
+  const setValue = useCallback<Dispatch<SetStateAction<T>>>(
+    (next) => {
+      const requested = normalize(
+        typeof next === 'function'
+          ? (next as (current: T) => T)(valueRef.current)
+          : next
+      );
+      if (isEqual(valueRef.current, requested)) return;
+      if (!isControlled) setInternalValue(requested);
+      onChange?.(requested);
+    },
+    [isControlled, isEqual, normalize, onChange]
+  );
+
+  return { value, setValue, isControlled };
+}

package/src/primitives/finite-chart.ts

@@ -0,0 +1,14 @@
+/** Returns a number only when it is safe to use in chart arithmetic. */
+export function finiteChartNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+/** Accepts an explicit domain only when both ends are finite. */
+export function finiteChartDomain(
+  domain: readonly [number, number] | undefined
+): [number, number] | undefined {
+  if (!domain) return undefined;
+  const low = finiteChartNumber(domain[0]);
+  const high = finiteChartNumber(domain[1]);
+  return low === undefined || high === undefined ? undefined : [low, high];
+}

package/src/primitives/glass.tsx

@@ -0,0 +1,171 @@
+/**
+ * Glass — the material iOS draws its own floating controls in.
+ *
+ * A control that floats over content needs to read as *over* it, and a flat
+ * fill cannot say that: it either hides what is behind it or disappears into
+ * it. The system material does both jobs at once — it refracts what is behind,
+ * lifts its own edge, and stays legible over anything.
+ *
+ * ```tsx
+ * <Glass radius={28} className="px-4 py-3">
+ *   <Text>Over whatever is behind it.</Text>
+ * </Glass>
+ * ```
+ *
+ * ## Where it is real, and where it is not
+ *
+ * The material exists on iOS 26 and above. Below that, on Android, on web, and
+ * for anyone who has switched Reduce Transparency on, this draws
+ * `fallbackClassName` instead — a solid token surface. That is deliberate
+ * rather than a gap: a hand-drawn approximation of a system material is a
+ * near-miss on the one platform that has the real thing, and on Android it is
+ * an iOS look pasted onto a platform that never asked for it.
+ *
+ * So `Glass` is not a promise that the screen will be glass. It is a promise
+ * that the container will be drawn correctly either way, and callers should
+ * pick a `fallbackClassName` that stands on its own.
+ *
+ * ## The material is a layer, not the box
+ *
+ * The native view is rendered as a non-interactive layer filling this
+ * container, with the content above it, for the same reason `Scrim` layers a
+ * blur: it keeps every layout class, every token and every touch target on an
+ * ordinary `View` that behaves the way the rest of the library does.
+ *
+ * `radius` is a number rather than a class because the material has to round
+ * its own corners — clipping a square one to a rounded parent throws away the
+ * lit edge that makes it read as glass.
+ *
+ * ## Do not fade it
+ *
+ * Setting `opacity` to `0` on the material or on anything above it stops it
+ * rendering at all, and it does not come back when the opacity does. Move it,
+ * or unmount it; never animate it out.
+ */
+import type { ComponentType, ReactNode } from 'react';
+import { Platform, StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { cn } from '../utils/cn';
+import { useReduceTransparency } from './scrim';
+
+/** How the material treats what is behind it. */
+export type GlassVariant = 'regular' | 'clear';
+
+/**
+ * Corner radius in points — one number for all four, or a top and a bottom.
+ *
+ * The two-sided form is for a surface with an edge that is not a real edge: a
+ * sheet docked to the bottom of the screen rounds its top and leaves its
+ * bottom square, because the screen edge is where it ends.
+ */
+export type GlassRadius = number | { top?: number; bottom?: number };
+
+function shapeOf(radius: GlassRadius | undefined) {
+  if (radius === undefined) return null;
+  if (typeof radius === 'number') return { borderRadius: radius };
+  return {
+    borderTopLeftRadius: radius.top ?? 0,
+    borderTopRightRadius: radius.top ?? 0,
+    borderBottomLeftRadius: radius.bottom ?? 0,
+    borderBottomRightRadius: radius.bottom ?? 0,
+  };
+}
+
+interface GlassViewProps {
+  glassEffectStyle?: GlassVariant | 'none';
+  tintColor?: string;
+  colorScheme?: 'auto' | 'light' | 'dark';
+  style?: StyleProp<ViewStyle>;
+  pointerEvents?: ViewProps['pointerEvents'];
+  children?: ReactNode;
+}
+
+/**
+ * `expo-glass-effect`'s GlassView, or null when the material cannot be drawn
+ * here.
+ *
+ * Resolved once at module load, behind three gates that all have to pass. The
+ * package is optional, so the require can fail; the API is missing from some
+ * iOS 26 builds, and reaching for it there crashes; and the design itself is
+ * only present when the app was compiled for it. Asking all three once is
+ * cheaper than a try/catch on every render, and there is no answer that can
+ * change while the process is alive.
+ */
+const GlassView: ComponentType<GlassViewProps> | null = (() => {
+  if (Platform.OS !== 'ios') return null;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('expo-glass-effect');
+    if (typeof mod?.isGlassEffectAPIAvailable === 'function' && !mod.isGlassEffectAPIAvailable()) {
+      return null;
+    }
+    if (typeof mod?.isLiquidGlassAvailable === 'function' && !mod.isLiquidGlassAvailable()) {
+      return null;
+    }
+    return (mod?.GlassView as ComponentType<GlassViewProps>) ?? null;
+  } catch {
+    return null;
+  }
+})();
+
+/**
+ * True when the real material can be drawn — for a caller that wants to know
+ * before it commits to a look. It says nothing about Reduce Transparency, which
+ * is a live preference and belongs to the hook.
+ */
+export const hasGlass = GlassView !== null;
+
+export interface GlassProps extends ViewProps {
+  /**
+   * How much of what is behind shows through. `regular` is the everyday
+   * material; `clear` is thinner, for something over its own artwork.
+   */
+  variant?: GlassVariant;
+  /** Tints the material. Takes a colour, not a token name. */
+  tint?: string;
+  /**
+   * Corner radius in points. The material rounds itself to this, so give it
+   * the same shape the container is drawn with — clipping a square material
+   * to a rounded parent throws away the lit edge that makes it read as glass.
+   */
+  radius?: GlassRadius;
+  /** Applied only when the material cannot be drawn. Give it a real surface. */
+  fallbackClassName?: string;
+  className?: string;
+}
+
+export function Glass({
+  variant = 'regular',
+  tint,
+  radius,
+  fallbackClassName = 'bg-card',
+  className,
+  children,
+  style,
+  ...props
+}: GlassProps) {
+  const reduceTransparency = useReduceTransparency();
+  // Not knowing yet counts as "do not draw it": the material arriving a frame
+  // late is invisible, and one flashing at somebody who opted out is not.
+  const material = GlassView !== null && reduceTransparency === false;
+  const shape = shapeOf(radius);
+
+  return (
+    <View
+      className={cn('overflow-hidden', material ? null : fallbackClassName, className)}
+      style={[shape, style]}
+      {...props}
+    >
+      {material && GlassView ? (
+        <GlassView
+          glassEffectStyle={variant}
+          tintColor={tint}
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, shape]}
+        />
+      ) : null}
+      {children}
+    </View>
+  );
+}
+
+Glass.displayName = 'Glass';

package/src/primitives/scrim.tsx

@@ -113,7 +113,13 @@ function observeReduceTransparency(
  */
 let knownReduceTransparency: boolean | null = null;
 
-function useReduceTransparency() {
+/**
+ * Whether the device asks for Reduce Transparency: `true`, `false`, or `null`
+ * while the platform has not answered yet. Exported because every material in
+ * the library has to respect the same preference, and two copies of this would
+ * be two answers.
+ */
+export 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);