panelui-native 0.6.0 → 0.9.0

package/lib/typescript/src/primitives/scrim.d.ts

@@ -0,0 +1,21 @@
+import { type ViewProps } from 'react-native';
+/** True when a real blur can be drawn — for a caller that wants to know. */
+export declare const hasBlur: boolean;
+export interface ScrimProps extends Omit<ViewProps, 'children'> {
+    /** Frost the backdrop instead of dimming it. Falls back to a dim if it can't. */
+    blur?: boolean;
+    /** Blur strength, 0–100. */
+    intensity?: number;
+    /** Which way the blur tints. */
+    tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+    /**
+     * The dim used when not blurring — and when blurring is asked for but
+     * unavailable. A popover passes a lighter one than a dialog.
+     */
+    dimClassName?: string;
+}
+export declare function Scrim({ blur, intensity, tint, dimClassName, style, ...props }: ScrimProps): import("react").JSX.Element;
+export declare namespace Scrim {
+    var displayName: string;
+}
+//# sourceMappingURL=scrim.d.ts.map

package/lib/typescript/src/primitives/scrim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrim.d.ts","sourceRoot":"","sources":["../../../../src/primitives/scrim.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAyBhE,4EAA4E;AAC5E,eAAO,MAAM,OAAO,SAAoB,CAAC;AAEzC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7D,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,gBAAgB,CAAC;IACvD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAY,EACZ,SAAc,EACd,IAAgB,EAChB,YAA4B,EAC5B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,+BA0BZ;yBAjCe,KAAK"}

package/lib/typescript/src/providers/panel-ui-provider.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface PanelUIProviderProps {
     children: ReactNode;
     /**

package/lib/typescript/src/providers/panel-ui-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,oBAAoB,+BAatB"}
+{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBrE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,oBAAoB,+BAiBtB"}

package/lib/typescript/src/theme/use-theme.d.ts

@@ -17,7 +17,7 @@ export interface PanelThemeFamily {
 /**
  * The theme families PanelUI ships. Each sets its own palette *and* its own
  * radius scale, so switching family changes the shape of the UI as well as
- * its colour — Panel is the Coss default, Moon is sharp and monochrome,
+ * its colour — Panel is the default, Moon is sharp and monochrome,
  * Grass is soft and green.
  *
  * Everything beyond `panel` must be registered in your metro config, or

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "panelui-native",
-  "version": "0.6.0",
-  "description": "High-performance React Native UI components for Expo. Coss UI design language, powered by Uniwind (Tailwind v4) and Reanimated.",
+  "version": "0.9.0",
+  "description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -43,7 +43,6 @@
     "nativewind",
     "reanimated",
     "design-system",
-    "shadcn",
     "dark-mode",
     "theming",
     "accessibility",
@@ -64,10 +63,15 @@
   "license": "MIT",
   "homepage": "https://github.com/panel-ui/PanelUI#readme",
   "peerDependencies": {
+    "@expo/ui": "*",
+    "@react-native-masked-view/masked-view": ">=0.3.0",
+    "expo-blur": ">=13.0.0",
     "expo-clipboard": ">=7.0.0",
+    "expo-linear-gradient": ">=13.0.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=2.0.0",
+    "react-native-keyboard-controller": ">=1.12.0",
     "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-svg": ">=15.0.0",
@@ -96,8 +100,17 @@
     ]
   },
   "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    },
+    "expo-blur": {
+      "optional": true
+    },
     "expo-clipboard": {
       "optional": true
+    },
+    "react-native-keyboard-controller": {
+      "optional": true
     }
   }
 }

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/attachment/index.tsx

@@ -0,0 +1,279 @@
+/**
+ * Attachment — a file, with its upload life.
+ *
+ * A file in a chat composer or an upload list is the same row shape `Item`
+ * already draws — media, a name, a size, a remove button — so this is that row,
+ * not a second one. What it adds is the part `Item` has no opinion on: the
+ * file's *state*. A file is picked, then uploading, then processing, then done
+ * (or failed), and each of those has to look different or the user cannot tell
+ * a stuck upload from a finished one.
+ *
+ * ```tsx
+ * <Attachment state="uploading">
+ *   <Attachment.Media><FileIcon /></Attachment.Media>
+ *   <Attachment.Content>
+ *     <Attachment.Title>report.pdf</Attachment.Title>
+ *     <Attachment.Description>PDF · 2.4 MB</Attachment.Description>
+ *   </Attachment.Content>
+ *   <Attachment.Actions>
+ *     <Attachment.Action aria-label="Cancel"><XIcon size={14} /></Attachment.Action>
+ *   </Attachment.Actions>
+ * </Attachment>
+ * ```
+ *
+ * While uploading or processing the title shimmers — the same sweep the rest of
+ * the library uses for "in progress" — and an optional bar tracks `progress`.
+ * A failed file tints its name and description in the destructive colour, which
+ * carries the state without relying on an icon nobody reads.
+ */
+import { createContext, forwardRef, useContext, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { AnimatedPressable, type AnimatedPressableProps } from '../../primitives/animated-pressable';
+import { Text, type TextProps } from '../../primitives/text';
+import { cn } from '../../utils/cn';
+import { Item } from '../item';
+import { Shimmer } from '../shimmer';
+
+export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+type AttachmentSize = 'default' | 'sm' | 'xs';
+
+interface AttachmentContextValue {
+  state: AttachmentState;
+  size: AttachmentSize;
+}
+
+const AttachmentContext = createContext<AttachmentContextValue>({
+  state: 'done',
+  size: 'default',
+});
+
+/** True while the file is still moving — the two states that shimmer. */
+function isBusy(state: AttachmentState): boolean {
+  return state === 'uploading' || state === 'processing';
+}
+
+const rootVariants = tv({
+  base: '',
+  variants: {
+    state: {
+      idle: '',
+      uploading: '',
+      processing: '',
+      // The border carries the failure, so it reads at a glance in a list.
+      error: 'border border-destructive',
+      done: '',
+    },
+  },
+});
+
+export interface AttachmentProps
+  extends Omit<AnimatedPressableProps, 'children' | 'disabled'> {
+  className?: string;
+  /**
+   * Where the file is in its life. `uploading`/`processing` shimmer the name;
+   * `error` tints the row destructive. Default `done`.
+   */
+  state?: AttachmentState;
+  /** Row density, passed through to the underlying Item. */
+  size?: AttachmentSize;
+  /** Stack the row into a card — for a horizontal group of thumbnails. */
+  orientation?: 'horizontal' | 'vertical';
+  /** Upload progress 0–1. Draws a thin bar along the bottom while busy. */
+  progress?: number;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+const AttachmentRoot = forwardRef<View, AttachmentProps>(
+  (
+    { className, state = 'done', size = 'default', orientation, progress, children, ...props },
+    ref
+  ) => {
+    const track = useCSSVariable('--color-primary');
+
+    return (
+      <AttachmentContext.Provider value={{ state, size }}>
+        <Item
+          ref={ref}
+          size={size}
+          orientation={orientation}
+          variant="outline"
+          className={cn('overflow-hidden', rootVariants({ state }), className)}
+          {...props}
+        >
+          {children}
+
+          {/* A determinate bar while busy, if progress is known. Absolute so it
+              rides the row's bottom edge without shifting the layout. */}
+          {isBusy(state) && progress !== undefined ? (
+            <View className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted">
+              <View
+                style={{
+                  width: `${Math.min(100, Math.max(0, progress * 100))}%`,
+                  backgroundColor: typeof track === 'string' ? track : undefined,
+                }}
+                className="h-full"
+              />
+            </View>
+          ) : null}
+        </Item>
+      </AttachmentContext.Provider>
+    );
+  }
+);
+AttachmentRoot.displayName = 'Attachment';
+
+export interface AttachmentGroupProps extends ViewProps {
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+  children?: ReactNode;
+}
+
+/** A row (or column) of attachments — the same stack `Item.Group` provides. */
+const AttachmentGroup = forwardRef<View, AttachmentGroupProps>(
+  ({ className, orientation = 'vertical', children, ...props }, ref) => (
+    <Item.Group ref={ref} orientation={orientation} className={className} {...props}>
+      {children}
+    </Item.Group>
+  )
+);
+AttachmentGroup.displayName = 'Attachment.Group';
+
+export interface AttachmentMediaProps extends ViewProps {
+  className?: string;
+  /** `icon` frames it in a tile; `image` clips it for a thumbnail. */
+  variant?: 'default' | 'icon' | 'image';
+  children?: ReactNode;
+}
+
+/** Leading slot — a file-type icon tile, or an image thumbnail. */
+const AttachmentMedia = forwardRef<View, AttachmentMediaProps>(
+  ({ className, variant = 'icon', children, ...props }, ref) => (
+    <Item.Media ref={ref} variant={variant} className={className} {...props}>
+      {children}
+    </Item.Media>
+  )
+);
+AttachmentMedia.displayName = 'Attachment.Media';
+
+export interface AttachmentContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AttachmentContent = forwardRef<View, AttachmentContentProps>(
+  ({ className, children, ...props }, ref) => (
+    <Item.Content ref={ref} className={className} {...props}>
+      {children}
+    </Item.Content>
+  )
+);
+AttachmentContent.displayName = 'Attachment.Content';
+
+export interface AttachmentTitleProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The file name. Shimmers while the file is uploading or processing. */
+const AttachmentTitle = forwardRef<React.ElementRef<typeof Text>, AttachmentTitleProps>(
+  ({ className, children, ...props }, ref) => {
+    const { state } = useContext(AttachmentContext);
+
+    if (isBusy(state)) {
+      // Shimmer owns the text so it can mask the sweep to the glyphs.
+      return <Shimmer textClassName={cn('text-base font-medium', className)}>{children}</Shimmer>;
+    }
+
+    return (
+      <Item.Title
+        ref={ref}
+        className={cn(state === 'error' && 'text-destructive', className)}
+        {...props}
+      >
+        {children}
+      </Item.Title>
+    );
+  }
+);
+AttachmentTitle.displayName = 'Attachment.Title';
+
+export interface AttachmentDescriptionProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** File type, size or status. Tints destructive on `error`. */
+const AttachmentDescription = forwardRef<
+  React.ElementRef<typeof Text>,
+  AttachmentDescriptionProps
+>(({ className, children, ...props }, ref) => {
+  const { state } = useContext(AttachmentContext);
+
+  return (
+    <Item.Description
+      ref={ref}
+      className={cn(state === 'error' && 'text-destructive', className)}
+      {...props}
+    >
+      {children}
+    </Item.Description>
+  );
+});
+AttachmentDescription.displayName = 'Attachment.Description';
+
+export interface AttachmentActionsProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const AttachmentActions = forwardRef<View, AttachmentActionsProps>(
+  ({ className, children, ...props }, ref) => (
+    <Item.Actions ref={ref} className={className} {...props}>
+      {children}
+    </Item.Actions>
+  )
+);
+AttachmentActions.displayName = 'Attachment.Actions';
+
+export interface AttachmentActionProps
+  extends Omit<AnimatedPressableProps, 'children'> {
+  className?: string;
+  accessibilityLabel: string;
+  children?: ReactNode;
+}
+
+/**
+ * A single icon button in the actions slot — remove, retry, download. An icon
+ * on its own says nothing to a screen reader, so the label is required.
+ */
+const AttachmentAction = forwardRef<View, AttachmentActionProps>(
+  ({ className, accessibilityLabel, children, ...props }, ref) => (
+    <AnimatedPressable
+      ref={ref}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      hitSlop={8}
+      className={cn(
+        'h-8 w-8 items-center justify-center rounded-full active:bg-muted',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </AnimatedPressable>
+  )
+);
+AttachmentAction.displayName = 'Attachment.Action';
+
+export const Attachment = Object.assign(AttachmentRoot, {
+  Group: AttachmentGroup,
+  Media: AttachmentMedia,
+  Content: AttachmentContent,
+  Title: AttachmentTitle,
+  Description: AttachmentDescription,
+  Actions: AttachmentActions,
+  Action: AttachmentAction,
+});

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,
@@ -23,6 +24,8 @@ import Animated, {
   withTiming,
 } 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';
 
@@ -50,13 +53,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 +105,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>
   );
 }
@@ -102,20 +140,28 @@ 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) {
   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);
+  const closeTint = useCSSVariable('--color-muted-foreground');
 
   const close = useCallback(() => setOpen(false), [setOpen]);
 
@@ -142,6 +188,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 (
@@ -176,6 +265,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

@@ -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