panelui-native 0.6.0 → 0.9.0

package/src/components/dialog/index.tsx

@@ -13,6 +13,7 @@ import {
 import { Pressable, View, type ViewProps } from 'react-native';
 import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
 import { Portal } from '../../primitives/portal';
+import { Scrim } from '../../primitives/scrim';
 import { Text, type TextProps } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
@@ -82,12 +83,19 @@ export interface DialogContentProps extends ViewProps {
   className?: string;
   /** Tap on the backdrop closes the dialog. Default true. */
   dismissible?: boolean;
+  /**
+   * Frost the screen behind the dialog instead of dimming it. Uses `expo-blur`
+   * when installed and falls back to the dim when it is not, so it is safe to
+   * pass either way.
+   */
+  blur?: boolean;
   children?: ReactNode;
 }
 
 function DialogContent({
   className,
   dismissible = true,
+  blur = false,
   children,
   ...props
 }: DialogContentProps) {
@@ -106,9 +114,10 @@ function DialogContent({
         exiting={FadeOut.duration(150)}
         className="absolute inset-0 items-center justify-center p-6"
       >
+        <Scrim blur={blur} />
         <Pressable
           accessibilityLabel="Close dialog"
-          className="absolute inset-0 bg-black/50"
+          className="absolute inset-0"
           onPress={dismissible ? () => setOpen(false) : undefined}
         />
         <Animated.View

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

@@ -1,32 +1,54 @@
 /**
  * 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 { createContext, forwardRef, useContext, type ReactNode } from 'react';
 import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { Text, type TextProps } from '../../primitives/text';
 
+type EmptyStateSize = 'sm' | 'default' | 'lg';
+
+/** Sub-components read the size so the title, description and media scale with the root. */
+const EmptyStateContext = createContext<{ size: EmptyStateSize }>({ size: 'default' });
+
 const emptyStateVariants = tv({
   slots: {
-    root: 'w-full flex-1 items-center justify-center gap-6 px-6 py-12',
+    root: 'w-full items-center justify-center',
     header: 'w-full max-w-sm items-center gap-1',
-    title: 'text-center text-xl font-semibold text-foreground',
-    description: 'text-center text-sm text-muted-foreground',
+    title: 'text-center font-semibold text-foreground',
+    description: 'text-center text-muted-foreground',
     content: 'w-full max-w-sm items-center gap-3',
   },
+  variants: {
+    variant: {
+      // Fills whatever space it is given — a whole screen, or a flex parent.
+      default: { root: 'flex-1' },
+      // A self-contained block that sits inside content rather than filling a
+      // screen: bordered, on the card fill, sized to its contents.
+      card: { root: 'rounded-2xl border border-border bg-card' },
+    },
+    size: {
+      sm: { root: 'gap-4 px-4 py-8', title: 'text-base', description: 'text-sm' },
+      default: { root: 'gap-6 px-6 py-12', title: 'text-xl', description: 'text-sm' },
+      lg: { root: 'gap-6 px-6 py-16', title: 'text-2xl', description: 'text-base' },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
 });
 
 const mediaVariants = tv({
   slots: {
     wrapper: 'items-center justify-center',
-    card: 'h-9 w-9 shrink-0 items-center justify-center',
-    ghost: 'absolute h-9 w-9 rounded-md border border-border bg-card',
+    card: 'shrink-0 items-center justify-center',
+    ghost: 'absolute rounded-md border border-border bg-card',
   },
   variants: {
     variant: {
@@ -38,21 +60,41 @@ const mediaVariants = tv({
         card: 'rounded-md border border-border bg-card',
       },
     },
+    size: {
+      sm: { card: 'h-8 w-8', ghost: 'h-8 w-8' },
+      default: { card: 'h-9 w-9', ghost: 'h-9 w-9' },
+      lg: { card: 'h-11 w-11', ghost: 'h-11 w-11' },
+    },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'default',
   },
 });
 
-export interface EmptyStateProps extends ViewProps {
+export interface EmptyStateProps
+  extends ViewProps,
+    VariantProps<typeof emptyStateVariants> {
   className?: string;
+  /**
+   * `default` fills its parent — a whole screen, or a flex slot. `card` is a
+   * self-contained bordered block for an empty state that sits inside content
+   * rather than owning the screen.
+   */
+  variant?: 'default' | 'card';
+  /** Scales the padding, media, title and description together. */
+  size?: EmptyStateSize;
   children?: ReactNode;
 }
 
 const EmptyStateRoot = forwardRef<View, EmptyStateProps>(
-  ({ className, ...props }, ref) => {
-    const { root } = emptyStateVariants();
-    return <View ref={ref} className={root({ className })} {...props} />;
+  ({ className, variant, size = 'default', ...props }, ref) => {
+    const { root } = emptyStateVariants({ variant, size });
+    return (
+      <EmptyStateContext.Provider value={{ size }}>
+        <View ref={ref} className={root({ className })} {...props} />
+      </EmptyStateContext.Provider>
+    );
   }
 );
 EmptyStateRoot.displayName = 'EmptyState';
@@ -79,7 +121,8 @@ export interface EmptyStateMediaProps
  */
 const EmptyStateMedia = forwardRef<View, EmptyStateMediaProps>(
   ({ className, variant = 'default', children, ...props }, ref) => {
-    const { wrapper, card, ghost } = mediaVariants({ variant });
+    const { size } = useContext(EmptyStateContext);
+    const { wrapper, card, ghost } = mediaVariants({ variant, size });
 
     return (
       <View ref={ref} className={wrapper({ className: `mb-4 ${className ?? ''}` })} {...props}>
@@ -105,21 +148,23 @@ const EmptyStateMedia = forwardRef<View, EmptyStateMediaProps>(
 EmptyStateMedia.displayName = 'EmptyState.Media';
 
 const EmptyStateTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
-  const { title } = emptyStateVariants();
+  const { size } = useContext(EmptyStateContext);
+  const { title } = emptyStateVariants({ size });
   return <Text ref={ref} className={title({ className })} {...props} />;
 });
 EmptyStateTitle.displayName = 'EmptyState.Title';
 
 const EmptyStateDescription = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
-    const { description } = emptyStateVariants();
+    const { size } = useContext(EmptyStateContext);
+    const { description } = emptyStateVariants({ size });
     return <Text ref={ref} className={description({ className })} {...props} />;
   }
 );
 EmptyStateDescription.displayName = 'EmptyState.Description';
 
 /** Slot below the header, for actions such as a primary button. */
-const EmptyStateContent = forwardRef<View, EmptyStateProps>(
+const EmptyStateContent = forwardRef<View, ViewProps & { className?: string }>(
   ({ className, ...props }, ref) => {
     const { content } = emptyStateVariants();
     return <View ref={ref} className={content({ className })} {...props} />;

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.