panelui-native 0.7.0 → 0.12.0

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

@@ -10,6 +10,7 @@ import {
   type ReactNode,
 } from 'react';
 import { Pressable, useWindowDimensions, View, type ViewProps } from 'react-native';
+import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   FadeIn,
@@ -24,6 +25,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getNativeUI } from '../../native';
+import { XIcon } from '../../icons';
 import { Portal } from '../../primitives/portal';
 import { cn } from '../../utils/cn';
 
@@ -69,6 +71,39 @@ export interface BottomSheetProps {
   snapPoints?: ('half' | 'full' | { fraction: number } | { height: number })[];
 }
 
+/**
+ * Roughly how tall the platform will make the sheet at a given detent, as a
+ * fraction of the screen. Approximate on purpose — it is used as a floor for
+ * the content, not as the sheet's real height, which the platform owns.
+ */
+const DETENT_FRACTION = { half: 0.5, full: 0.9 } as const;
+
+/**
+ * The height the content should at least fill for a given set of detents.
+ *
+ * Without this the hosted content sizes to itself and the platform centres
+ * that smaller box inside the taller sheet, which is why a short sheet shows
+ * its content floating in the middle. Filling the detent leaves nothing to
+ * centre, so the content sits where it was written: at the top.
+ */
+function detentFloor(
+  snapPoints: BottomSheetProps['snapPoints'],
+  screenHeight: number
+): number | undefined {
+  if (!snapPoints?.length) return undefined;
+
+  // The sheet opens at its first detent, so that is the one to fill.
+  const first = snapPoints[0];
+  if (first === 'half' || first === 'full') {
+    return screenHeight * DETENT_FRACTION[first];
+  }
+  if (typeof first === 'object' && 'fraction' in first) {
+    return screenHeight * first.fraction;
+  }
+  if (typeof first === 'object' && 'height' in first) return first.height;
+  return undefined;
+}
+
 /**
  * Set by the root so Content knows the platform is drawing the sheet, and with
  * which detents. Null means the styled sheet renders.
@@ -138,12 +173,18 @@ export interface BottomSheetContentProps extends ViewProps {
   className?: string;
   /** Tap on the backdrop closes the sheet. Default true. */
   dismissible?: boolean;
+  /**
+   * Show a close button in the top-right corner. On by default for the styled
+   * sheet; ignored by the native sheet, which has its own dismiss affordances.
+   */
+  showClose?: boolean;
   children?: ReactNode;
 }
 
 function BottomSheetContent({
   className,
   dismissible = true,
+  showClose = true,
   children,
   ...props
 }: BottomSheetContentProps) {
@@ -153,6 +194,7 @@ function BottomSheetContent({
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const translateY = useSharedValue(0);
+  const closeTint = useCSSVariable('--color-muted-foreground');
 
   const close = useCallback(() => setOpen(false), [setOpen]);
 
@@ -200,8 +242,10 @@ function BottomSheetContent({
                 {...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',
+                  // box — padding and safe-area are still ours. The top
+                  // padding has to clear the platform's grabber, which sits
+                  // inside the sheet rather than above the content.
+                  'justify-start gap-2 px-5 pb-2 pt-5',
                   className
                 )}
                 style={{
@@ -210,6 +254,7 @@ function BottomSheetContent({
                   // against, so `100%` measures against nothing and the
                   // content lays out wider than the sheet it sits in.
                   width: screenWidth,
+                  minHeight: detentFloor(nativeSheet.snapPoints, screenHeight),
                   paddingBottom: Math.max(insets.bottom, 16),
                 }}
               >
@@ -256,6 +301,17 @@ function BottomSheetContent({
             <View className="mb-3 self-center">
               <View className="h-1 w-10 rounded-full bg-muted-foreground/30" />
             </View>
+            {showClose ? (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="Close"
+                onPress={close}
+                hitSlop={8}
+                className="absolute right-4 top-3 h-8 w-8 items-center justify-center rounded-full bg-muted active:opacity-70"
+              >
+                <XIcon size={16} color={typeof closeTint === 'string' ? closeTint : undefined} />
+              </Pressable>
+            ) : null}
             {children}
           </Animated.View>
         </GestureDetector>

package/src/components/button/index.tsx

@@ -110,14 +110,35 @@ export interface ButtonProps
    * 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.
+   * `className`, `fullWidth`, `startContent`, `endContent` and `loading` are
+   * all ignored. `variant` maps onto the nearest platform style:
+   * `primary`/`destructive` → filled, `outline` → outlined, everything else
+   * → text; `size` sets the height.
+   *
+   * A native button **fills the width it is given**, because the host is told
+   * its size rather than left to measure the platform's content — which is
+   * what made it collapse and then jump on first press. Put it in a row to
+   * share the width, or in a narrower parent to shrink it.
    */
   native?: boolean;
 }
 
+/**
+ * Height given to the native host, matching the styled scale above.
+ *
+ * The host is told its size rather than asked to work it out. `matchContents`
+ * measures the platform's own content a frame late and again when that content
+ * changes — so the button renders at nothing, collapses against whatever sits
+ * above it, and jolts into place on the first press. Width comes from ordinary
+ * layout instead, which is why a native button fills its container.
+ */
+const NATIVE_HEIGHT: Record<NonNullable<ButtonVariantProps['size']>, number> = {
+  sm: 36,
+  md: 44,
+  lg: 48,
+  icon: 44,
+};
+
 /** PanelUI variants mapped onto the platform button styles. */
 const NATIVE_VARIANT: Record<
   NonNullable<ButtonVariantProps['variant']>,
@@ -178,7 +199,7 @@ export const Button = forwardRef<View, ButtonProps>(
       const isStringLabel = typeof children === 'string';
 
       return (
-        <Host matchContents>
+        <Host style={{ height: NATIVE_HEIGHT[size ?? 'md'] }}>
           <NativeButton
             label={isStringLabel ? children : undefined}
             variant={NATIVE_VARIANT[variant ?? 'primary']}

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

@@ -6,26 +6,49 @@
  * 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: {
@@ -37,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';
@@ -78,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}>
@@ -104,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/frame/index.tsx

@@ -15,28 +15,67 @@
  *   </Frame.Header>
  *   <Frame.Panel>
  *     <Frame.Row>…</Frame.Row>
- *     <Frame.Row divided>…</Frame.Row>
+ *     <Frame.Row>…</Frame.Row>
  *   </Frame.Panel>
  *   <Frame.Footer>Updated 2 minutes ago</Frame.Footer>
  * </Frame>
  * ```
+ *
+ * The panel draws the hairlines between its own rows. React Native has no
+ * `:first-child`, so the alternative is every caller writing
+ * `divided={index > 0}` on every row and getting it wrong once.
  */
-import { forwardRef, type ReactNode } from 'react';
-import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { Children, cloneElement, forwardRef, isValidElement, type ReactNode } from 'react';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type Text as RNText,
+  type ViewProps,
+} from 'react-native';
+import { tv } from 'tailwind-variants';
+import { ChevronRightIcon } from '../../icons';
 import { Text, type TextProps } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
+const frameVariants = tv({
+  slots: {
+    root: '',
+    panel: 'overflow-hidden rounded-xl border border-border bg-card',
+  },
+  variants: {
+    variant: {
+      default: { root: 'rounded-2xl border border-border bg-surface p-1.5' },
+      // No shell: the panel is the whole widget. For a Frame nested inside a
+      // card that already draws a border, where the shell's own edge sitting
+      // just inside it reads as a double line.
+      plain: { root: '', panel: 'rounded-2xl' },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type FrameVariant = 'default' | 'plain';
+
 export interface FrameProps extends ViewProps {
   className?: string;
 }
 
-const FrameRoot = forwardRef<View, FrameProps>(({ className, ...props }, ref) => (
-  <View
-    ref={ref}
-    className={cn('rounded-2xl border border-border bg-surface p-1.5', className)}
-    {...props}
-  />
-));
+export interface FrameRootProps extends FrameProps {
+  /**
+   * `plain` drops the outer shell so the panel is the widget — for a Frame
+   * inside a container that already draws its own border.
+   */
+  variant?: FrameVariant;
+}
+
+const FrameRoot = forwardRef<View, FrameRootProps>(
+  ({ className, variant, ...props }, ref) => (
+    <View ref={ref} className={frameVariants({ variant }).root({ className })} {...props} />
+  )
+);
 FrameRoot.displayName = 'Frame';
 
 export interface FrameHeaderProps extends FrameProps {
@@ -103,41 +142,147 @@ const FrameDescription = forwardRef<RNText, TextProps>(
 );
 FrameDescription.displayName = 'Frame.Description';
 
+/**
+ * Marks the parts that take part in the panel's own divider bookkeeping —
+ * a Row draws a line above itself, a Section draws one above its heading.
+ * Anything else the panel is given is left alone.
+ */
+interface Dividable {
+  divided?: boolean;
+}
+
+/**
+ * Draws the hairline above every child but the first. An explicit `divided`
+ * on a child wins, so a row can still opt out or force one.
+ */
+function divideChildren(children: ReactNode) {
+  let seen = 0;
+  return Children.map(children, (child) => {
+    if (!isValidElement<Dividable>(child)) return child;
+    if (!DIVIDABLE.has(child.type)) return child;
+
+    const index = seen++;
+    if (child.props.divided !== undefined) return child;
+    return cloneElement(child, { divided: index > 0 });
+  });
+}
+
+export interface FramePanelProps extends FrameProps {
+  /**
+   * Set false to place the hairlines by hand instead — for a panel whose rows
+   * are generated somewhere the divider order is not obvious.
+   */
+  dividers?: boolean;
+  children?: ReactNode;
+}
+
 /**
  * The inset card holding the frame's content — the raised surface sitting in
  * from the shell's edges, with its own smaller radius.
  */
-const FramePanel = forwardRef<View, FrameProps>(({ className, ...props }, ref) => (
-  <View
-    ref={ref}
-    className={cn('overflow-hidden rounded-xl border border-border bg-card', className)}
-    {...props}
-  />
-));
+const FramePanel = forwardRef<View, FramePanelProps>(
+  ({ className, dividers = true, children, ...props }, ref) => (
+    <View ref={ref} className={frameVariants().panel({ className })} {...props}>
+      {dividers ? divideChildren(children) : children}
+    </View>
+  )
+);
 FramePanel.displayName = 'Frame.Panel';
 
+export interface FrameRowProps extends Omit<PressableProps, 'children'>, Dividable {
+  className?: string;
+  /**
+   * Draw a hairline above this row. `Frame.Panel` sets it for you; pass it
+   * explicitly to override the panel's decision either way.
+   */
+  divided?: boolean;
+  /** Trailing chevron marking the row as leading somewhere. */
+  chevron?: boolean;
+  children?: ReactNode;
+}
+
 /**
- * A row inside a Frame.Panel. Pass `divided` on every row after the first to
- * draw a hairline separator above it (React Native has no :first-child).
+ * A row inside a Frame.Panel. Give it an `onPress` and it becomes a real
+ * pressable — press feedback, a button role — rather than a View with a
+ * handler bolted on.
  */
-export interface FrameRowProps extends FrameProps {
+const FrameRow = forwardRef<View, FrameRowProps>(
+  ({ className, divided, chevron, children, onPress, ...props }, ref) => {
+    const classes = cn(
+      'flex-row items-center gap-3 px-4 py-3.5',
+      divided && 'border-t border-border',
+      onPress && 'active:bg-muted',
+      className
+    );
+
+    const body = (
+      <>
+        {children}
+        {chevron ? <ChevronRightIcon size={16} /> : null}
+      </>
+    );
+
+    if (!onPress) {
+      return (
+        <View ref={ref} className={classes} {...(props as ViewProps)}>
+          {body}
+        </View>
+      );
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        onPress={onPress}
+        className={classes}
+        {...props}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+);
+FrameRow.displayName = 'Frame.Row';
+
+export interface FrameSectionProps extends FrameProps, Dividable {
+  /** Heading above the rows. Strings are wrapped for you. */
+  title?: ReactNode;
   divided?: boolean;
+  children?: ReactNode;
 }
 
-const FrameRow = forwardRef<View, FrameRowProps>(
-  ({ className, divided, ...props }, ref) => (
+/**
+ * A labelled cluster of rows inside a Panel, for a widget holding more than
+ * one group. It divides its own rows the way the panel does, so the two nest
+ * without either having to know about the other.
+ */
+const FrameSection = forwardRef<View, FrameSectionProps>(
+  ({ className, title, divided, children, ...props }, ref) => (
     <View
       ref={ref}
-      className={cn(
-        'flex-row items-center gap-3 px-4 py-3.5',
-        divided && 'border-t border-border',
-        className
-      )}
+      className={cn(divided && 'border-t border-border', className)}
       {...props}
-    />
+    >
+      {title ? (
+        <View className="bg-muted/40 px-4 pb-1.5 pt-2.5">
+          {typeof title === 'string' ? (
+            <Text size="xs" weight="medium" muted className="uppercase tracking-wider">
+              {title}
+            </Text>
+          ) : (
+            title
+          )}
+        </View>
+      ) : null}
+      {divideChildren(children)}
+    </View>
   )
 );
-FrameRow.displayName = 'Frame.Row';
+FrameSection.displayName = 'Frame.Section';
+
+/** Parts the panel divides. Declared after them, since it holds references. */
+const DIVIDABLE = new Set<unknown>([FrameRow, FrameSection]);
 
 export interface FrameFooterProps extends FrameProps {
   children?: ReactNode;
@@ -169,6 +314,7 @@ export const Frame = Object.assign(FrameRoot, {
   Action: FrameAction,
   Description: FrameDescription,
   Panel: FramePanel,
+  Section: FrameSection,
   Row: FrameRow,
   Footer: FrameFooter,
 });