panelui-native 0.5.3 → 0.7.0

package/src/components/accordion/index.tsx

@@ -1,12 +1,14 @@
 /**
  * Accordion — collapsible sections.
  *
- * Adapted from: heroui-inc/heroui-native src/components/accordion/
- * (the Item / Trigger / Indicator / Content anatomy, single vs multiple
- * selection, the rotating chevron indicator, and layout-transition expand).
+ * Split into Item / Trigger / Indicator / Content so a section header can hold
+ * anything — a badge, a price, a second line — instead of only a string. The
+ * chevron rotates rather than swapping glyphs, and the panel expands through a
+ * layout transition, both on the UI thread.
  *
- * Upstream ships `default` and `surface`; the extra variants here follow the
- * same slot structure.
+ * `selectionMode` decides whether opening one section closes the others, which
+ * also changes the shape of `value`: a string when single, an array when
+ * multiple.
  */
 import {
   Children,

package/src/components/alert/index.tsx

@@ -1,12 +1,9 @@
 /**
  * Alert — a status message with an optional leading status icon.
  *
- * Adapted from: heroui-inc/heroui-native src/components/alert/alert.tsx
- * (Indicator / Content / Title / Description anatomy, status-driven icon and
- * title colour), restyled with Coss UI tokens.
- *
- * The `variant` prop name is kept from PanelUI v0.2 rather than renamed to
- * HeroUI's `status`, so existing code keeps working.
+ * The indicator derives its icon and colour from the variant, so a success
+ * alert cannot end up with a warning icon. Pass `icon` on the root to override
+ * it everywhere, or give `Alert.Indicator` children to override one.
  */
 import { createContext, forwardRef, useContext, type ReactNode } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';

package/src/components/bottom-sheet/index.tsx

@@ -23,6 +23,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getNativeUI } from '../../native';
 import { Portal } from '../../primitives/portal';
 import { cn } from '../../utils/cn';
 
@@ -50,13 +51,40 @@ export interface BottomSheetProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   defaultOpen?: boolean;
+  /**
+   * Present the platform's own sheet instead of this one, so it gets the
+   * system's detents, scroll interaction and dismiss gesture. Requires the
+   * optional `@expo/ui` package; without it this prop does nothing.
+   *
+   * **Theme tokens do not apply to the sheet chrome** — the platform draws the
+   * container, so `BottomSheet.Content`'s `className` and its drag handle are
+   * ignored. The content inside is still yours.
+   */
+  native?: boolean;
+  /**
+   * Heights the native sheet can rest at. Omit to size to the content.
+   * `{ fraction }` and `{ height }` are iOS-only; Android snaps them to the
+   * nearest of `half` / `full`.
+   */
+  snapPoints?: ('half' | 'full' | { fraction: number } | { height: number })[];
 }
 
+/**
+ * Set by the root so Content knows the platform is drawing the sheet, and with
+ * which detents. Null means the styled sheet renders.
+ */
+const NativeSheetContext = createContext<{
+  nativeUI: NonNullable<ReturnType<typeof getNativeUI>>;
+  snapPoints: BottomSheetProps['snapPoints'];
+} | null>(null);
+
 function BottomSheetRoot({
   children,
   open,
   onOpenChange,
   defaultOpen = false,
+  native,
+  snapPoints,
 }: BottomSheetProps) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = open !== undefined;
@@ -75,9 +103,17 @@ function BottomSheetRoot({
     [resolvedOpen, setOpen]
   );
 
+  const nativeUI = native ? getNativeUI() : null;
+  const nativeSheet = useMemo(
+    () => (nativeUI ? { nativeUI, snapPoints } : null),
+    [nativeUI, snapPoints]
+  );
+
   return (
     <BottomSheetContext.Provider value={context}>
-      {children}
+      <NativeSheetContext.Provider value={nativeSheet}>
+        {children}
+      </NativeSheetContext.Provider>
     </BottomSheetContext.Provider>
   );
 }
@@ -113,7 +149,8 @@ function BottomSheetContent({
 }: BottomSheetContentProps) {
   const context = useBottomSheet('BottomSheet.Content');
   const { open, setOpen } = context;
-  const { height: screenHeight } = useWindowDimensions();
+  const nativeSheet = useContext(NativeSheetContext);
+  const { height: screenHeight, width: screenWidth } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const translateY = useSharedValue(0);
 
@@ -142,6 +179,49 @@ function BottomSheetContent({
     transform: [{ translateY: translateY.value }],
   }));
 
+  if (nativeSheet) {
+    const { Host, BottomSheet: NativeBottomSheet, RNHostView } = nativeSheet.nativeUI;
+    // The platform owns presentation, so this stays mounted and toggles
+    // isPresented rather than unmounting on close.
+    //
+    // RNHostView is not optional: our content is React Native, and the native
+    // sheet cannot measure RN views directly. Without it the sheet sizes to
+    // nothing and the content spills outside its container.
+    return (
+      <Host matchContents style={{ position: 'absolute' }}>
+        <NativeBottomSheet
+          isPresented={open}
+          onDismiss={dismissible ? close : () => {}}
+          snapPoints={nativeSheet.snapPoints}
+        >
+          <RNHostView matchContents>
+            <BottomSheetContext.Provider value={context}>
+              <View
+                {...props}
+                className={cn(
+                  // The platform draws the container, but it hands us a bare
+                  // box — padding and safe-area are still ours.
+                  'gap-2 px-5 pb-2 pt-1',
+                  className
+                )}
+                style={{
+                  // An explicit width, not `w-full`. Inside the native host
+                  // there is no parent width for a percentage to resolve
+                  // against, so `100%` measures against nothing and the
+                  // content lays out wider than the sheet it sits in.
+                  width: screenWidth,
+                  paddingBottom: Math.max(insets.bottom, 16),
+                }}
+              >
+                {children}
+              </View>
+            </BottomSheetContext.Provider>
+          </RNHostView>
+        </NativeBottomSheet>
+      </Host>
+    );
+  }
+
   if (!open) return null;
 
   return (

package/src/components/button/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
 import { IconColorProvider } from '../../icons';
+import { getNativeUI } from '../../native';
 import { Spinner } from '../spinner';
 
 const buttonVariants = tv({
@@ -104,8 +105,32 @@ export interface ButtonProps
   endContent?: ReactNode;
   /** Extra classes for the label when children is a string. */
   labelClassName?: string;
+  /**
+   * Render the platform's own button instead of this one. Requires the
+   * optional `@expo/ui` package; without it this prop does nothing.
+   *
+   * **Theme tokens do not apply** — the platform draws the button, so
+   * `className`, `size`, `fullWidth`, `startContent`, `endContent` and
+   * `loading` are all ignored. `variant` maps onto the nearest platform
+   * style: `primary`/`destructive` → filled, `outline` → outlined, everything
+   * else → text.
+   */
+  native?: boolean;
 }
 
+/** PanelUI variants mapped onto the platform button styles. */
+const NATIVE_VARIANT: Record<
+  NonNullable<ButtonVariantProps['variant']>,
+  'filled' | 'outlined' | 'text'
+> = {
+  primary: 'filled',
+  destructive: 'filled',
+  secondary: 'filled',
+  outline: 'outlined',
+  ghost: 'text',
+  social: 'outlined',
+};
+
 export const Button = forwardRef<View, ButtonProps>(
   (
     {
@@ -119,11 +144,13 @@ export const Button = forwardRef<View, ButtonProps>(
       loading = false,
       startContent,
       endContent,
+      native,
       ...props
     },
     ref
   ) => {
     const isDisabled = disabled || loading;
+    const nativeUI = native ? getNativeUI() : null;
     const { root, label, spinner } = buttonVariants({
       variant,
       size,
@@ -146,6 +173,31 @@ export const Button = forwardRef<View, ButtonProps>(
           ? themedColor
           : undefined;
 
+    if (nativeUI) {
+      const { Host, Button: NativeButton, RNHostView } = nativeUI;
+      const isStringLabel = typeof children === 'string';
+
+      return (
+        <Host matchContents>
+          <NativeButton
+            label={isStringLabel ? children : undefined}
+            variant={NATIVE_VARIANT[variant ?? 'primary']}
+            disabled={isDisabled}
+            onPress={props.onPress}
+          >
+            {/* Non-string children are React Native views, and the native
+                button cannot measure those directly — they have to be hosted
+                or they render outside the button's bounds. */}
+            {isStringLabel ? undefined : (
+              <RNHostView matchContents>
+                <>{children}</>
+              </RNHostView>
+            )}
+          </NativeButton>
+        </Host>
+      );
+    }
+
     return (
       <IconColorProvider color={contentColor}>
         <AnimatedPressable

package/src/components/empty-state/index.tsx

@@ -1,11 +1,10 @@
 /**
  * EmptyState — the placeholder shown when a list or view has no content.
  *
- * Adapted from: cosscom/coss packages/ui/src/components/empty.tsx
- * (centered Header / Media / Title / Description / Content anatomy, and the
- * `icon` media variant that stacks two rotated ghost cards behind the icon).
- * Coss does that with CSS pseudo-elements; on native it is two absolutely
- * positioned siblings with static rotate transforms.
+ * Centred Header / Media / Title / Description / Content, with an `icon` media
+ * variant that stacks two rotated ghost cards behind the icon. On the web that
+ * is a pair of CSS pseudo-elements; React Native has none, so it is two
+ * absolutely positioned siblings with static rotate transforms.
  */
 import { forwardRef, type ReactNode } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';

package/src/components/inline-select/index.tsx

@@ -1,3 +1,16 @@
+/**
+ * InlineSelect — a select that reveals its options next to the trigger instead
+ * of taking over the screen with a sheet.
+ *
+ * Two presentations, because the right one depends on what surrounds it:
+ *
+ * - Inline (default) expands the list in normal layout flow. Everything below
+ *   moves down. Fine inside a settings list where that reads as the row
+ *   growing, wrong anywhere the shift is jarring.
+ * - `overlay` floats the list above the page through a portal, anchored to the
+ *   trigger and flipped above it when there is no room below. Nothing else on
+ *   the screen moves.
+ */
 import {
   Children,
   createContext,
@@ -5,10 +18,17 @@ import {
   useCallback,
   useContext,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View } from 'react-native';
+import {
+  Pressable,
+  ScrollView,
+  useWindowDimensions,
+  View,
+  type LayoutChangeEvent,
+} from 'react-native';
 import Animated, {
   FadeIn,
   FadeOut,
@@ -19,6 +39,7 @@ import Animated, {
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon, ChevronDownIcon } from '../../icons';
+import { Portal } from '../../primitives/portal';
 import { Text } from '../../primitives/text';
 
 const inlineSelectVariants = tv({
@@ -27,7 +48,7 @@ const inlineSelectVariants = tv({
       'w-full flex-row items-center justify-between gap-3 rounded-2xl border border-input bg-background px-4 py-3.5',
     triggerLabel: 'flex-1 text-base font-medium text-foreground',
     placeholder: 'flex-1 text-base text-muted-foreground',
-    list: 'mt-2 overflow-hidden rounded-2xl border border-border bg-popover p-2 shadow-sm',
+    list: 'overflow-hidden rounded-2xl border border-border bg-popover p-2 shadow-sm',
     item: 'flex-row items-center gap-2 rounded-xl px-3 py-3',
     itemLabel: 'flex-1 text-base font-medium text-foreground',
     itemIndicator: 'h-5 w-5 items-center justify-center',
@@ -39,6 +60,13 @@ const inlineSelectVariants = tv({
     disabled: {
       true: { trigger: 'opacity-[0.64]' },
     },
+    presentation: {
+      inline: { list: 'mt-2' },
+      overlay: { list: 'shadow-lg' },
+    },
+  },
+  defaultVariants: {
+    presentation: 'inline',
   },
 });
 
@@ -54,7 +82,7 @@ export interface InlineSelectItemProps {
   label: string;
 }
 
-/** Option row. Rendered inline beneath the trigger — no overlay involved. */
+/** Option row. */
 function InlineSelectItem({ value, label }: InlineSelectItemProps) {
   const context = useContext(InlineSelectContext);
   if (!context) {
@@ -85,29 +113,55 @@ function InlineSelectItem({ value, label }: InlineSelectItemProps) {
   );
 }
 
+/** Trigger frame in window coordinates, measured when the list opens. */
+interface Anchor {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 export interface InlineSelectProps {
   className?: string;
   value?: string;
   onValueChange: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
+  /**
+   * Float the list above the page instead of expanding it in layout flow, so
+   * opening the select does not push the content below it down.
+   */
+  overlay?: boolean;
+  /**
+   * Width of the floating list. `trigger` matches the trigger, `content` sizes
+   * to the longest option, or pass a pixel value. Ignored without `overlay`.
+   */
+  overlayWidth?: 'trigger' | 'content' | number;
+  /** Gap between the trigger and the floating list. Ignored without `overlay`. */
+  overlayOffset?: number;
+  /** Called when the list opens or closes. */
+  onOpenChange?: (open: boolean) => void;
   children: ReactNode;
 }
 
-/**
- * A select that expands its options inline instead of opening a bottom sheet.
- * Useful inside forms and scroll views where an overlay would be disruptive.
- */
 function InlineSelectRoot({
   className,
   value,
   onValueChange,
   placeholder = 'Select an option',
   disabled,
+  overlay = false,
+  overlayWidth = 'trigger',
+  overlayOffset = 8,
+  onOpenChange,
   children,
 }: InlineSelectProps) {
   const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [listHeight, setListHeight] = useState(0);
+  const triggerRef = useRef<View>(null);
   const chevron = useSharedValue(0);
+  const { height: screenHeight } = useWindowDimensions();
 
   const selectedLabel = useMemo(() => {
     let label: string | undefined;
@@ -119,63 +173,156 @@ function InlineSelectRoot({
     return label;
   }, [children, value]);
 
+  const close = useCallback(() => {
+    chevron.value = withTiming(0, { duration: 160 });
+    setOpen(false);
+    onOpenChange?.(false);
+  }, [chevron, onOpenChange]);
+
   const toggle = useCallback(() => {
-    setOpen((current) => {
-      chevron.value = withTiming(current ? 0 : 1, { duration: 160 });
-      return !current;
+    if (open) {
+      close();
+      return;
+    }
+
+    const show = () => {
+      chevron.value = withTiming(1, { duration: 160 });
+      setOpen(true);
+      onOpenChange?.(true);
+    };
+
+    if (!overlay) {
+      show();
+      return;
+    }
+
+    // The list is positioned in window coordinates, so it has to know where
+    // the trigger actually landed — not where layout said it would.
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      show();
     });
-  }, [chevron]);
+  }, [chevron, close, onOpenChange, open, overlay]);
 
   const context = useMemo<InlineSelectContextValue>(
     () => ({
       value,
       onSelect: (next) => {
         onValueChange(next);
-        chevron.value = withTiming(0, { duration: 160 });
-        setOpen(false);
+        close();
       },
     }),
-    [value, onValueChange, chevron]
+    [value, onValueChange, close]
   );
 
-  const slots = inlineSelectVariants({ disabled: !!disabled });
+  const slots = inlineSelectVariants({
+    disabled: !!disabled,
+    presentation: overlay ? 'overlay' : 'inline',
+  });
   const chevronColor = useCSSVariable('--color-muted-foreground');
 
   const chevronStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: `${chevron.value * 180}deg` }],
   }));
 
+  const trigger = (
+    <Pressable
+      ref={triggerRef}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled, expanded: open }}
+      disabled={disabled}
+      onPress={toggle}
+      className={slots.trigger()}
+    >
+      {selectedLabel ? (
+        <Text className={slots.triggerLabel()}>{selectedLabel}</Text>
+      ) : (
+        <Text className={slots.placeholder()}>{placeholder}</Text>
+      )}
+      <Animated.View style={chevronStyle}>
+        <ChevronDownIcon
+          color={typeof chevronColor === 'string' ? chevronColor : '#737373'}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+
+  if (!overlay) {
+    return (
+      <InlineSelectContext.Provider value={context}>
+        <View className={className}>
+          {trigger}
+          {open ? (
+            <Animated.View
+              entering={FadeIn.duration(140)}
+              exiting={FadeOut.duration(120)}
+              className={slots.list()}
+            >
+              {children}
+            </Animated.View>
+          ) : null}
+        </View>
+      </InlineSelectContext.Provider>
+    );
+  }
+
+  // Flip above the trigger when the list would run off the bottom. listHeight
+  // is 0 on the first frame, so the list opens downwards and corrects itself
+  // once measured — which is invisible inside the 140ms fade.
+  const spaceBelow = anchor
+    ? screenHeight - (anchor.y + anchor.height) - overlayOffset
+    : 0;
+  const flip = !!anchor && listHeight > 0 && listHeight > spaceBelow;
+
+  const overlayPosition = anchor
+    ? {
+        position: 'absolute' as const,
+        left: anchor.x,
+        ...(flip
+          ? { bottom: screenHeight - anchor.y + overlayOffset }
+          : { top: anchor.y + anchor.height + overlayOffset }),
+        ...(overlayWidth === 'trigger'
+          ? { width: anchor.width }
+          : typeof overlayWidth === 'number'
+            ? { width: overlayWidth }
+            : { minWidth: anchor.width }),
+        // Never collapse to nothing in a cramped viewport — the list scrolls.
+        maxHeight: Math.max((flip ? anchor.y : spaceBelow) - overlayOffset, 160),
+      }
+    : null;
+
+  const onListLayout = (event: LayoutChangeEvent) => {
+    setListHeight(event.nativeEvent.layout.height);
+  };
+
   return (
     <InlineSelectContext.Provider value={context}>
-      <View className={className}>
-        <Pressable
-          accessibilityRole="button"
-          accessibilityState={{ disabled: !!disabled, expanded: open }}
-          disabled={disabled}
-          onPress={toggle}
-          className={slots.trigger()}
-        >
-          {selectedLabel ? (
-            <Text className={slots.triggerLabel()}>{selectedLabel}</Text>
-          ) : (
-            <Text className={slots.placeholder()}>{placeholder}</Text>
-          )}
-          <Animated.View style={chevronStyle}>
-            <ChevronDownIcon
-              color={typeof chevronColor === 'string' ? chevronColor : '#737373'}
-            />
-          </Animated.View>
-        </Pressable>
-        {open ? (
-          <Animated.View
-            entering={FadeIn.duration(140)}
-            exiting={FadeOut.duration(120)}
-            className={slots.list()}
-          >
-            {children}
-          </Animated.View>
-        ) : null}
-      </View>
+      <View className={className}>{trigger}</View>
+
+      {open && overlayPosition ? (
+        <Portal>
+          {/* Full-screen catcher so a press anywhere else dismisses the list. */}
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            onPress={close}
+            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+          />
+          <InlineSelectContext.Provider value={context}>
+            <Animated.View
+              entering={FadeIn.duration(140)}
+              exiting={FadeOut.duration(120)}
+              onLayout={onListLayout}
+              style={overlayPosition}
+              className={slots.list()}
+            >
+              <ScrollView bounces={false} showsVerticalScrollIndicator={false}>
+                {children}
+              </ScrollView>
+            </Animated.View>
+          </InlineSelectContext.Provider>
+        </Portal>
+      ) : null}
     </InlineSelectContext.Provider>
   );
 }

package/src/components/input/index.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useCallback, useState } from 'react';
 import { TextInput, View, type TextInputProps } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
+import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
 import { Text } from '../../primitives/text';
 
 const inputVariants = tv({
@@ -34,6 +35,19 @@ export interface InputProps extends TextInputProps {
   /** Error message. When set, the field renders in its invalid state. */
   errorMessage?: string;
   disabled?: boolean;
+  /**
+   * Lift the field above the software keyboard when it would otherwise be
+   * covered. Moves by exactly the overlap, and not at all when the field is
+   * already clear.
+   *
+   * Install `react-native-keyboard-controller` for this to behave on Android.
+   *
+   * Do not toggle this at runtime — it changes which component renders the
+   * container, which would remount the field and drop focus.
+   */
+  avoidKeyboard?: boolean;
+  /** Gap kept between the field and the keyboard when `avoidKeyboard` is set. */
+  keyboardOffset?: number;
 }
 
 export const Input = forwardRef<TextInput, InputProps>(
@@ -45,6 +59,8 @@ export const Input = forwardRef<TextInput, InputProps>(
       description,
       errorMessage,
       disabled,
+      avoidKeyboard = false,
+      keyboardOffset = 16,
       onFocus,
       onBlur,
       ...props
@@ -75,8 +91,8 @@ export const Input = forwardRef<TextInput, InputProps>(
       [onBlur]
     );
 
-    return (
-      <View className={slots.container({ className: containerClassName })}>
+    const body = (
+      <>
         {label ? <Text className={slots.label()}>{label}</Text> : null}
         <TextInput
           ref={ref}
@@ -96,8 +112,28 @@ export const Input = forwardRef<TextInput, InputProps>(
         ) : description ? (
           <Text className={slots.description()}>{description}</Text>
         ) : null}
-      </View>
+      </>
     );
+
+    const containerClasses = slots.container({ className: containerClassName });
+
+    /*
+     * The keyboard hook is deliberately behind a component boundary rather
+     * than an `enabled` flag. Calling it at all has global consequences —
+     * without the keyboard controller installed it falls back to Reanimated's
+     * useAnimatedKeyboard, which switches Android out of adjustResize for the
+     * whole app. A field that never asked to avoid the keyboard must not do
+     * that to every other screen.
+     */
+    if (avoidKeyboard) {
+      return (
+        <KeyboardAvoider offset={keyboardOffset} className={containerClasses}>
+          {body}
+        </KeyboardAvoider>
+      );
+    }
+
+    return <View className={containerClasses}>{body}</View>;
   }
 );
 

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

@@ -1,7 +1,6 @@
 /**
  * InputGroup — an Input with leading and/or trailing decorators.
  *
- * Adapted from: heroui-inc/heroui-native src/components/input-group/
  * Prefix and Suffix are absolutely positioned and their measured widths become
  * padding on the Input, so text never runs underneath a decorator regardless
  * of how wide that decorator turns out to be.