panelui-native 0.22.6 → 0.28.1

package/src/components/map/maplibre.ts

@@ -0,0 +1,201 @@
+/**
+ * The bridge to MapLibre.
+ *
+ * A map is the one component here that cannot be drawn in JavaScript. It needs
+ * a renderer with the tiles, the projection and the GPU work already solved,
+ * and that renderer is native code — which means `Map` is the only component
+ * in the library with a dependency you have to build for.
+ *
+ * Two things follow, and both are handled here rather than spread through the
+ * component:
+ *
+ * The package is resolved lazily and once. A project that never renders a map
+ * installs nothing, and the failure when it is missing is a readable fallback
+ * rather than a red screen — which matters because the most common way to hit
+ * it is running in a client that cannot load native modules at all.
+ *
+ * The types are declared here rather than imported from the package. They are
+ * structural and cover only what is used. Importing them would put the package
+ * in the library's published type surface, so anyone installing PanelUI would
+ * have to install a map renderer to typecheck their project, whether or not
+ * they ever draw a map.
+ *
+ * The cost of that choice is that nothing checks these declarations against the
+ * renderer, and React Native drops props it does not recognise without a word —
+ * so a renamed prop is silently ignored rather than caught. They track the
+ * renderer's **v11** API. When the peer range widens, re-read the props used
+ * below against the package rather than assuming they survived.
+ */
+import type { ComponentType, ReactElement, ReactNode, Ref } from 'react';
+
+/** `[longitude, latitude]` — the order the style spec uses, not the spoken one. */
+export type LngLat = [number, number];
+
+/** `[west, south, east, north]`. */
+export type LngLatBounds = [number, number, number, number];
+
+/**
+ * A MapLibre style document. Left loose on purpose: the spec is large, it is
+ * versioned separately from this library, and the parts of it callers pass
+ * through are exactly the parts a narrower type would get in the way of.
+ */
+export type StyleSpecification = Record<string, unknown>;
+
+/** Where the map is looking. */
+export interface ViewState {
+  center: LngLat;
+  zoom: number;
+  bearing: number;
+  pitch: number;
+  bounds: LngLatBounds;
+}
+
+export interface MapRef {
+  getCenter(): Promise<LngLat>;
+  getZoom(): Promise<number>;
+  getBearing(): Promise<number>;
+  getPitch(): Promise<number>;
+  getBounds(): Promise<LngLatBounds>;
+  getViewState(): Promise<ViewState>;
+}
+
+/** Pixel insets held off the edges of the viewport. */
+export interface ViewPadding {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+/** Zoom, tilt and rotation — everything about the camera except where it sits. */
+export interface CameraOptions {
+  zoom?: number;
+  bearing?: number;
+  pitch?: number;
+  padding?: ViewPadding;
+}
+
+/** How the camera gets there. */
+export interface CameraAnimationOptions {
+  duration?: number;
+  easing?: 'linear' | 'ease' | 'fly';
+}
+
+/**
+ * Where the camera starts. Either a centre or a box, never both — the renderer
+ * types them as a union for the same reason: a camera framing a box has no
+ * separate centre to honour.
+ */
+export type InitialViewState =
+  | (CameraOptions & { center?: never; bounds?: never })
+  | (CameraOptions & { center: LngLat; bounds?: never })
+  | (CameraOptions & { bounds: LngLatBounds; center?: never });
+
+export interface CameraRef {
+  jumpTo(options: { center: LngLat } & CameraOptions): void;
+  easeTo(options: { center?: LngLat } & CameraOptions & CameraAnimationOptions): void;
+  flyTo(options: { center?: LngLat } & CameraOptions & CameraAnimationOptions): void;
+  fitBounds(
+    bounds: LngLatBounds,
+    options?: CameraOptions & CameraAnimationOptions
+  ): void;
+}
+
+/** A native event as it arrives — the payload is under `nativeEvent`. */
+export interface NativeEvent<T> {
+  nativeEvent: T;
+}
+
+interface MapLibreModule {
+  Map: ComponentType<{
+    ref?: Ref<MapRef>;
+    mapStyle: string | StyleSpecification;
+    style?: unknown;
+    logo?: boolean;
+    compass?: boolean;
+    attribution?: boolean;
+    scaleBar?: boolean;
+    dragPan?: boolean;
+    touchZoom?: boolean;
+    touchRotate?: boolean;
+    touchPitch?: boolean;
+    onPress?: (event: NativeEvent<{ coordinates: LngLat }>) => void;
+    onDidFinishLoadingMap?: () => void;
+    onRegionDidChange?: (event: NativeEvent<ViewState>) => void;
+    children?: ReactNode;
+  }>;
+  Camera: ComponentType<{
+    ref?: Ref<CameraRef>;
+    /**
+     * The camera's opening position. Applied once, on the first frame — every
+     * move after this one goes through the ref, so a re-render never yanks the
+     * map back out from under a gesture.
+     */
+    initialViewState?: InitialViewState;
+    center?: LngLat;
+    bounds?: LngLatBounds;
+    zoom?: number;
+    bearing?: number;
+    pitch?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    maxBounds?: LngLatBounds;
+    padding?: ViewPadding;
+  }>;
+  Marker: ComponentType<{
+    id?: string;
+    lngLat: LngLat;
+    anchor?: string;
+    children: ReactElement;
+  }>;
+  Callout: ComponentType<{ title?: string; children?: ReactNode; style?: unknown }>;
+  GeoJSONSource: ComponentType<{
+    id?: string;
+    data: unknown;
+    cluster?: boolean;
+    clusterRadius?: number;
+    clusterMaxZoom?: number;
+    lineMetrics?: boolean;
+    onPress?: (event: NativeEvent<{ features: unknown[] }>) => void;
+    children?: ReactNode;
+  }>;
+  Layer: ComponentType<Record<string, unknown>>;
+  UserLocation: ComponentType<{
+    animated?: boolean;
+    accuracy?: boolean;
+    heading?: boolean;
+    minDisplacement?: number;
+    onPress?: () => void;
+    children?: ReactNode;
+  }>;
+}
+
+/**
+ * The renderer, or null when it is not installed. Resolved once at module
+ * load — the require is cheap, and caching it keeps a try/catch out of render.
+ */
+const maplibre: MapLibreModule | null = (() => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require('@maplibre/maplibre-react-native') as MapLibreModule;
+  } catch {
+    return null;
+  }
+})();
+
+/**
+ * True when a map can actually be drawn.
+ *
+ * False in any client that cannot load native modules, and in any project that
+ * has not installed the renderer. Worth checking before routing somewhere whose
+ * whole content is a map.
+ */
+export const hasMapLibre = maplibre !== null;
+
+/**
+ * The renderer's components, or null.
+ *
+ * Returned as one object rather than as separate exports so a caller destructures
+ * once after a single null check, instead of narrowing each component in turn.
+ */
+export const MapLibre = maplibre;

package/src/components/marker/index.tsx

@@ -25,7 +25,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { AnimatedPressable, type AnimatedPressableProps } from '../../primitives/animated-pressable';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { Separator } from '../separator';
 import { Shimmer } from '../shimmer';
@@ -90,7 +90,7 @@ const MarkerRoot = forwardRef<View, MarkerProps>(
       variant === 'separator' ? (
         <>
           <Separator className="flex-1" />
-          {children}
+          {textChildren(children)}
           <Separator className="flex-1" />
         </>
       ) : (
@@ -149,7 +149,7 @@ const MarkerIcon = forwardRef<View, MarkerIconProps>(
         {...props}
       >
         <IconColorProvider color={typeof muted === 'string' ? muted : undefined}>
-          {children}
+          {textChildren(children)}
         </IconColorProvider>
       </View>
     );

package/src/components/message/index.tsx

@@ -34,7 +34,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { AnimatedPressable } from '../../primitives/animated-pressable';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
 const messageVariants = tv({
@@ -54,19 +54,20 @@ const messageVariants = tv({
         root: 'flex-row justify-start',
         content: 'items-start',
         // A squared corner on the side the message comes from points the
-        // bubble back at its sender.
-        bubble: 'rounded-bl-md bg-muted',
+        // bubble back at its sender. Logical, so "the side it comes from"
+        // stays true when the script runs the other way.
+        bubble: 'rounded-es-md bg-muted',
         bubbleContent: 'text-foreground',
-        header: 'text-left',
-        footer: 'text-left',
+        header: 'text-start',
+        footer: 'text-start',
       },
       end: {
         root: 'flex-row-reverse justify-start',
         content: 'items-end',
-        bubble: 'rounded-br-md bg-primary',
+        bubble: 'rounded-ee-md bg-primary',
         bubbleContent: 'text-primary-foreground',
-        header: 'text-right',
-        footer: 'text-right',
+        header: 'text-end',
+        footer: 'text-end',
       },
     },
   },
@@ -136,11 +137,11 @@ const MessageRoot = forwardRef<View, MessageProps>(
         className={root({ className })}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </AnimatedPressable>
     ) : (
       <View ref={ref} className={root({ className })} {...props}>
-        {children}
+        {textChildren(children)}
       </View>
     );
 
@@ -206,7 +207,7 @@ const MessageAvatar = forwardRef<View, MessageAvatarProps>(
 
     return (
       <View ref={ref} className={avatar({ className })} {...props}>
-        {stacked ? <View className="opacity-0">{children}</View> : children}
+        {stacked ? <View className="opacity-0">{textChildren(children)}</View> : children}
       </View>
     );
   }
@@ -226,7 +227,7 @@ const MessageContent = forwardRef<View, MessageContentProps>(
 
     return (
       <View ref={ref} className={content({ className })} {...props}>
-        {children}
+        {textChildren(children)}
       </View>
     );
   }
@@ -274,7 +275,7 @@ const MessageBubble = forwardRef<View, MessageBubbleProps>(
     return (
       <View ref={ref} className={bubble({ className })} {...props}>
         <IconColorProvider color={typeof foreground === 'string' ? foreground : undefined}>
-          {children}
+          {textChildren(children)}
         </IconColorProvider>
       </View>
     );
@@ -333,7 +334,7 @@ const MessageActions = forwardRef<View, MessageActionsProps>(
         )}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </View>
     );
   }

package/src/components/message-scroller/index.tsx

@@ -56,6 +56,7 @@ import { useCSSVariable } from 'uniwind';
 import { ChevronDownIcon } from '../../icons';
 import { AnimatedPressable } from '../../primitives/animated-pressable';
 import { cn } from '../../utils/cn';
+import { textChildren } from '../../primitives/text';
 
 /** Within this many pixels of the bottom still counts as being at the bottom. */
 const END_THRESHOLD = 24;
@@ -233,7 +234,7 @@ function MessageScrollerRoot({
   return (
     <MessageScrollerContext.Provider value={context}>
       <View className={cn('relative overflow-hidden', className)} {...props}>
-        {children}
+        {textChildren(children)}
       </View>
     </MessageScrollerContext.Provider>
   );
@@ -404,7 +405,7 @@ function MessageScrollerViewport({
       onMomentumScrollEnd={settleAnchor}
       onContentSizeChange={onContentSizeChange}
     >
-      {children}
+      {textChildren(children)}
     </Animated.ScrollView>
   );
 }
@@ -445,7 +446,7 @@ function MessageScrollerContent({
       className={cn('gap-3 p-4 pb-16', className)}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </View>
   );
 }
@@ -487,7 +488,7 @@ function MessageScrollerItem({
 
   return (
     <View className={className} {...props} onLayout={onLayout}>
-      {children}
+      {textChildren(children)}
     </View>
   );
 }

package/src/components/otp-input/index.tsx

@@ -323,7 +323,7 @@ export const OtpInput = forwardRef<TextInput, OtpInputProps>(
                   placeholder={placeholder}
                   invalid={invalid}
                   className={slots.cell({
-                    className: `${i > 0 ? 'ml-2' : ''} ${cellClassName ?? ''}`,
+                    className: `${i > 0 ? 'ms-2' : ''} ${cellClassName ?? ''}`,
                   })}
                   charClassName={slots.char()}
                   caretClassName={slots.caret()}
@@ -331,7 +331,7 @@ export const OtpInput = forwardRef<TextInput, OtpInputProps>(
                 {groupEvery > 0 &&
                 (i + 1) % groupEvery === 0 &&
                 i < length - 1 ? (
-                  <View className={`${slots.separator()} ml-2`} />
+                  <View className={`${slots.separator()} ms-2`} />
                 ) : null}
               </View>
             ))}

package/src/components/popover/index.tsx

@@ -60,8 +60,9 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from '../../primitives/portal';
 import { Scrim } from '../../primitives/scrim';
+import { useBackHandler } from '../../hooks/use-back-handler';
 import { BottomSheet } from '../bottom-sheet';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
 /** Gap between the trigger and the panel. */
@@ -255,6 +256,13 @@ function PopoverContent({
 }: PopoverContentProps) {
   const context = usePopover('Popover.Content');
   const { open, setOpen, trigger, setPlacement, setArrowOffset, presentation } = context;
+
+  // The anchored panel owns the Android back button while it is up. The sheet
+  // presentation is left alone — BottomSheet installs its own handler.
+  useBackHandler(open && dismissible && presentation !== 'bottom-sheet', () =>
+    setOpen(false)
+  );
+
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
@@ -349,14 +357,42 @@ function PopoverContent({
     ],
   }));
 
-  // The sheet presentation hands off entirely to BottomSheet — it owns its own
-  // portal, backdrop and dismiss gesture, so there is nothing to anchor here.
-  // The context is re-provided inside so Popover.Close keeps closing it.
+  /*
+   * The sheet presentation hands off entirely to BottomSheet — it owns its own
+   * portal, backdrop and dismiss gesture, so there is nothing to anchor here.
+   * The context is re-provided inside so Popover.Close keeps closing it.
+   *
+   * `width` still means something, though. A sheet is the full width of the
+   * screen and lays its children out in a column, so a panel sized to its
+   * content takes the cross-axis *start* and ends up flush against one edge —
+   * the right-hand one under RTL, directly below the close button. Centring it
+   * is what makes `width="content-fit"` mean the same thing in both
+   * presentations.
+   *
+   * The className goes on an inner view rather than on the sheet: passed to
+   * the surface it is merged into the sheet's own padding classes and replaces
+   * them, so a panel asking for `p-3` silently strips the sheet's `px-5 pt-2`.
+   */
   if (presentation === 'bottom-sheet') {
     return (
       <BottomSheet open={open} onOpenChange={setOpen}>
-        <BottomSheet.Content dismissible={dismissible} className={className}>
-          <PopoverContext.Provider value={context}>{children}</PopoverContext.Provider>
+        <BottomSheet.Content dismissible={dismissible}>
+          <PopoverContext.Provider value={context}>
+            <View
+              className={cn(width === 'content-fit' && 'self-center', className)}
+              style={[
+                width === 'full' || width === 'trigger' ? { width: '100%' } : null,
+                typeof width === 'number' ? { width } : null,
+                minWidth === undefined ? null : { minWidth },
+                // Clear of the close button, which floats over the top-end
+                // corner of the sheet rather than sitting in the flow.
+                { paddingTop: 8 },
+                style,
+              ]}
+            >
+              {textChildren(children)}
+            </View>
+          </PopoverContext.Provider>
         </BottomSheet.Content>
       </BottomSheet>
     );
@@ -410,7 +446,7 @@ function PopoverContent({
               )}
               {...props}
             >
-              {children}
+              {textChildren(children)}
             </Animated.View>
           </Animated.View>
         </View>

package/src/components/progress/index.tsx

@@ -11,6 +11,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
@@ -135,6 +136,9 @@ export const Progress = forwardRef<View, ProgressProps>(
   ) => {
     const slots = progressVariants({ color, size });
     const trackWidth = useSharedValue(0);
+    // Yoga mirrors the track; the bar sliding along it is a transform, so it
+    // has to be turned around itself.
+    const sign = useDirectionSign();
     const progress = useSharedValue(clamp(value) / 100);
     const slide = useSharedValue(0);
 
@@ -167,10 +171,14 @@ export const Progress = forwardRef<View, ProgressProps>(
         width: barWidth,
         transform: [
           {
+            // The loop travels the way the text does. Yoga mirrors the track
+            // but not the transform sliding along it.
             translateX: interpolate(
               slide.value,
               [0, 1],
-              [-barWidth, trackWidth.value]
+              sign === 1
+                ? [-barWidth, trackWidth.value]
+                : [trackWidth.value, -barWidth]
             ),
           },
         ],
@@ -213,7 +221,7 @@ export const Progress = forwardRef<View, ProgressProps>(
             <View />
           )}
           {showValue ? (
-            <Text size="sm" muted className={cn(label == null && 'ml-auto')}>
+            <Text size="sm" muted className={cn(label == null && 'ms-auto')}>
               {formatValue(clamp(value), valueLabel, formatOptions)}
             </Text>
           ) : null}

package/src/components/radio-group/index.tsx

@@ -35,7 +35,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { cn } from '../../utils/cn';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 
 type RadioVariant = 'dot' | 'card';
 type RadioOrientation = 'vertical' | 'horizontal';
@@ -152,7 +152,7 @@ const RadioGroupRoot = forwardRef<View, RadioGroupProps>(
           )}
           {...props}
         >
-          {children}
+          {textChildren(children)}
         </View>
       </RadioGroupContext.Provider>
     );