@oxyhq/bloom 0.13.0 → 0.15.0

package/src/dialog/centered-dialog-types.ts

@@ -2,6 +2,10 @@ import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 /**
+ * @deprecated Use `<Dialog placement="center">` instead. `CenteredDialog` is
+ * superseded by the centered placement of the canonical `<Dialog>` and is
+ * slated for removal in a future major.
+ *
  * Props for the declarative `<CenteredDialog>` primitive.
  *
  * This is the simple, controlled centered-modal surface — distinct from the

package/src/dialog/index.ts

@@ -1,4 +1,4 @@
-export { Dialog } from './Dialog';
+export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
 export { CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID } from './CenteredDialog';
 export { BloomDialogProvider } from './BloomDialogProvider';
 export { alert } from './alert';
@@ -12,6 +12,9 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './types';
 export type { CenteredDialogProps } from './centered-dialog-types';

package/src/dialog/index.web.ts

@@ -8,7 +8,7 @@
 // Web bundlers select this file via the `"browser"` export condition in
 // `package.json`'s `exports['./dialog']`; native bundlers fall through to
 // the React Native build above.
-export { Dialog, BLOOM_DIALOG_CSS } from './Dialog.web';
+export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog.web';
 export {
   CenteredDialog,
   BLOOM_CENTERED_DIALOG_CSS,
@@ -26,6 +26,9 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './types';
 export type { CenteredDialogProps } from './centered-dialog-types';

package/src/dialog/placement.ts

@@ -0,0 +1,113 @@
+import { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * Anchor a `<Dialog>` can render against.
+ *
+ * - `'center'` — the default centered modal card (current behavior).
+ * - `'left'` / `'right'` — an anchored side-sheet / drawer.
+ * - `'bottom'` — a bottom-sheet (drag handle, slide-up).
+ */
+export type DialogPlacement = 'center' | 'left' | 'right' | 'bottom';
+
+/**
+ * A `<Dialog>` placement that may vary by viewport width.
+ *
+ * Either a single `DialogPlacement` (applied at every width) or a responsive
+ * map whose `base` applies below the first breakpoint and whose `sm`/`md`/`lg`/
+ * `xl` keys override it at and above the matching Tailwind breakpoint.
+ *
+ * The common store-drawer case is `{ base: 'bottom', md: 'left' }`; the common
+ * dialog-to-sheet case is `{ base: 'bottom', md: 'center' }`.
+ */
+export type ResponsiveDialogPlacement =
+  | DialogPlacement
+  | {
+      base: DialogPlacement;
+      sm?: DialogPlacement;
+      md?: DialogPlacement;
+      lg?: DialogPlacement;
+      xl?: DialogPlacement;
+    };
+
+/**
+ * Tailwind-default breakpoints (px). A responsive `placement` map resolves to
+ * the value for the largest key whose min-width is `<=` the current viewport
+ * width, falling back to `base`.
+ */
+export const BREAKPOINT_SM = 640;
+export const BREAKPOINT_MD = 768;
+export const BREAKPOINT_LG = 1024;
+export const BREAKPOINT_XL = 1280;
+
+/** Ordered breakpoint table, widest first, so the first match wins. */
+const RESPONSIVE_KEYS = [
+  ['xl', BREAKPOINT_XL],
+  ['lg', BREAKPOINT_LG],
+  ['md', BREAKPOINT_MD],
+  ['sm', BREAKPOINT_SM],
+] as const;
+
+/** Default side-sheet width (px) on wide screens. */
+export const DEFAULT_SIDE_WIDTH = 460;
+
+/** Default centered-card max width (px). Matches the legacy `maxWidth: 480`. */
+export const DEFAULT_CENTER_MAX_WIDTH = 480;
+
+/** Default bottom-sheet max height as a fraction of the viewport height. */
+export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
+
+/** Corner radius shared by the side-sheet panel and the bottom-sheet top. */
+export const PANEL_RADIUS = 20;
+
+/** Open/close transition duration (ms). ~280ms ease-out reads smooth. */
+export const ANIMATION_DURATION = 280;
+
+/** Centered-card fade-out duration (ms) — preserves the legacy timing. */
+export const CENTER_FADE_OUT_DURATION = 150;
+
+/** CSS approximation of reanimated's `Easing.out(Easing.cubic)`. */
+export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
+export const SHEET_BACKDROP_OPACITY = 0.4;
+
+/** Stable testID for the dimmed backdrop of a side/bottom placement dialog. */
+export const DIALOG_SHEET_BACKDROP_TESTID = 'bloom-dialog-sheet-backdrop';
+
+/** Drag-handle pill geometry for the bottom-sheet. */
+export const HANDLE_WIDTH = 36;
+export const HANDLE_HEIGHT = 5;
+export const HANDLE_RADIUS = 3;
+
+/**
+ * Minimum gutter kept between a wide side-sheet and the opposite viewport edge
+ * when capping its width, so the panel never spans the full screen.
+ */
+export const SIDE_SHEET_MIN_GUTTER = 24;
+
+/**
+ * Resolve a (possibly responsive) `placement` to a concrete `DialogPlacement`
+ * for the current viewport width.
+ *
+ * A plain string placement resolves to itself. A responsive map picks the
+ * value for the largest breakpoint key whose min-width is `<=` the viewport
+ * width, falling back to `base` below the first breakpoint.
+ */
+export function useResolvedPlacement(
+  placement: ResponsiveDialogPlacement | undefined,
+): DialogPlacement {
+  const { width } = useWindowDimensions();
+
+  return useMemo<DialogPlacement>(() => {
+    if (placement === undefined) return 'center';
+    if (typeof placement === 'string') return placement;
+    for (const [key, minWidth] of RESPONSIVE_KEYS) {
+      if (width >= minWidth) {
+        const value = placement[key];
+        if (value !== undefined) return value;
+      }
+    }
+    return placement.base;
+  }, [placement, width]);
+}

package/src/dialog/types.ts

@@ -1,5 +1,21 @@
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
+import type { ResponsiveDialogPlacement } from './placement';
+
+export type { DialogPlacement, ResponsiveDialogPlacement } from './placement';
+
+/**
+ * Side-sheet inset (px) from the root overlay's edges. Lets a host place a
+ * `left`/`right` placement "inside its own shell" — e.g. offset from the top
+ * by a header, or from the anchored edge by a nav rail.
+ */
+export type DialogInset = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
 /**
  * Imperative open/close handle returned by `useDialogControl`.
  *
@@ -51,7 +67,14 @@ export type DialogAction = {
 /**
  * Props accepted by the unified `<Dialog>` component.
  *
- * Three usage modes — pick whichever fits the call site:
+ * Open/close is driven by EITHER of two mutually-exclusive modes:
+ *
+ *   - **Imperative `control`** (`useDialogControl()` + `control.open()` /
+ *     `control.close()`). The legacy default; unchanged.
+ *   - **Controlled `open`** (an `open` boolean + `onClose`). When `open` is
+ *     provided it wins and `control` is ignored.
+ *
+ * Rendering modes (orthogonal to open/close mode) — pick whichever fits:
  *
  *   1. **Declarative (`title` / `description` / `actions`).** Most common
  *      confirm/cancel surface. Bloom renders the title, description and
@@ -63,10 +86,26 @@ export type DialogAction = {
  *
  *   3. **Imperative `alert()`.** Bypass the JSX layer entirely — see the
  *      module-level `alert()` helper.
+ *
+ * `placement` controls the surface anchor — centered modal (default), an
+ * anchored side-sheet (`left`/`right`), or a bottom-sheet (`bottom`) — and may
+ * be a responsive map that collapses to a bottom-sheet on narrow viewports.
  */
 export type DialogProps = React.PropsWithChildren<{
-  control: DialogControlProps;
-  /** Fires after the dialog has finished closing. */
+  /**
+   * Imperative open/close handle from `useDialogControl()`. Optional — omit it
+   * when driving the dialog with the controlled `open` prop instead.
+   */
+  control?: DialogControlProps;
+  /**
+   * Controlled open state (opt-in). When provided, the dialog is driven by
+   * this boolean and `onClose`, and `control` is ignored.
+   */
+  open?: boolean;
+  /**
+   * Fires after the dialog has finished closing. In controlled mode it is the
+   * close request the host must answer by flipping `open` to `false`.
+   */
   onClose?: () => void;
   testID?: string;
   /** Optional dialog header text. Rendered above `description` / `children`. */
@@ -78,11 +117,38 @@ export type DialogProps = React.PropsWithChildren<{
    * confirm/cancel/destructive buttons for you. Order is preserved.
    */
   actions?: DialogAction[];
+  /**
+   * Surface anchor. Defaults to `'center'` (the centered modal — current
+   * behavior). `'left'`/`'right'` render an anchored side-sheet, `'bottom'` a
+   * bottom-sheet. A responsive map resolves by viewport width, e.g.
+   * `{ base: 'bottom', md: 'left' }` (drawer on wide, sheet on narrow).
+   */
+  placement?: ResponsiveDialogPlacement;
+  /** Side-sheet width (px) on wide screens. Defaults to `460`. */
+  width?: number;
+  /** Centered-card max width (px). Defaults to `480`. */
+  maxWidth?: number;
+  /** Bottom-sheet max height as a fraction of the viewport height. Defaults to `0.9`. */
+  maxHeightRatio?: number;
+  /** Side-sheet inset (px) from the root overlay's edges. */
+  inset?: DialogInset;
+  /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
+  showHandle?: boolean;
+  /** Whether tapping the backdrop dismisses the dialog. Defaults to `true`. */
+  dismissOnBackdrop?: boolean;
   /**
    * Style overrides applied to the inner content container on native (the
    * floating bottom-sheet card) and to the modal panel on web.
    */
   style?: StyleProp<ViewStyle>;
+  /** Style overrides for the side/bottom placement panel surface. */
+  panelStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the side/bottom placement panel surface. */
+  panelClassName?: string;
+  /** Style for the root overlay (theme-var scope, rail offset, etc.). */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the root overlay (e.g. `"md:left-[4.75rem]"`). */
+  containerClassName?: string;
   /** Accessibility label, applied to the dialog role on web. */
   label?: string;
 }>;

package/src/index.ts

@@ -20,6 +20,7 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 export * from './portal';
 export {
   Dialog,
+  DIALOG_SHEET_BACKDROP_TESTID,
   CenteredDialog,
   CENTERED_DIALOG_BACKDROP_TESTID,
   BloomDialogProvider,
@@ -35,7 +36,10 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './dialog';
 export * from './button';
 export { Fab } from './fab';
@@ -88,6 +92,14 @@ export type { ComboboxProps, ComboboxOption } from './combobox';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
+// Responsive sheet — side-sheet on wide screens, bottom-sheet on narrow.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './responsive-sheet';
+
 // Data display
 export * from './card';
 export * from './badge';

package/src/index.web.ts

@@ -25,6 +25,7 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 export * from './portal/index.web';
 export {
   Dialog,
+  DIALOG_SHEET_BACKDROP_TESTID,
   CenteredDialog,
   CENTERED_DIALOG_BACKDROP_TESTID,
   BloomDialogProvider,
@@ -40,7 +41,10 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogInset,
+  DialogPlacement,
   DialogProps,
+  ResponsiveDialogPlacement,
 } from './dialog/index.web';
 export * from './button/index.web';
 export { Fab } from './fab/index.web';
@@ -93,6 +97,14 @@ export type { ComboboxProps, ComboboxOption } from './combobox/index.web';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
+// Responsive sheet — side-sheet on wide screens, bottom-sheet on narrow.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet/index.web';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './responsive-sheet/index.web';
+
 // Data display
 export * from './card';
 export * from './badge';

package/src/responsive-sheet/ResponsiveSheet.stories.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ResponsiveSheet } from './index';
+import type { ResponsiveSheetSide } from './types';
+import { Button } from '../button';
+import { Text } from '../typography';
+
+const meta: Meta = {
+  title: 'Overlays/ResponsiveSheet',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function Demo({ side }: { side: ResponsiveSheetSide }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={{ padding: 24, minHeight: 480 }}>
+      <Button onPress={() => setOpen(true)}>Open sheet ({side})</Button>
+      <ResponsiveSheet
+        open={open}
+        onClose={() => setOpen(false)}
+        side={side}
+        width={420}
+        inset={{ top: 16, bottom: 16, left: 16 }}
+        label="Demo sheet"
+      >
+        <View style={{ padding: 20, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Responsive sheet</Text>
+          <Text>
+            On a wide viewport this is an anchored side-sheet; below the
+            breakpoint it becomes a bottom-sheet with a drag handle. Resize the
+            preview to switch modes.
+          </Text>
+          <Button variant="secondary" onPress={() => setOpen(false)}>
+            Close
+          </Button>
+        </View>
+      </ResponsiveSheet>
+    </View>
+  );
+}
+
+export const SideLeft: Story = {
+  render: () => <Demo side="left" />,
+};
+
+export const SideRight: Story = {
+  render: () => <Demo side="right" />,
+};

package/src/responsive-sheet/ResponsiveSheet.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { Dialog } from '../dialog';
+import {
+  BREAKPOINT_LG,
+  BREAKPOINT_MD,
+  BREAKPOINT_SM,
+  BREAKPOINT_XL,
+  DIALOG_SHEET_BACKDROP_TESTID,
+  type ResponsiveDialogPlacement,
+} from '../dialog/placement';
+import type { ResponsiveSheetProps } from './types';
+
+/**
+ * @deprecated Use `<Dialog placement={{ base: 'bottom', md: 'left' }}>` instead.
+ *
+ * `ResponsiveSheet` is now a thin wrapper that configures the canonical
+ * `<Dialog>` — an anchored side-sheet on wide screens collapsing to a
+ * bottom-sheet below the breakpoint. It holds ZERO motion/layout logic of its
+ * own; it maps its props onto a responsive `Dialog` `placement`. The
+ * `@oxyhq/bloom/responsive-sheet` subpath is retained for the migration window.
+ *
+ * This file is BOTH the package default entry (resolved by downstream `tsc`
+ * and non-Metro web bundlers via the `browser` condition through `index.web`)
+ * AND a clean delegation, so it carries no platform-specific imports.
+ */
+export function ResponsiveSheet({
+  open,
+  onClose,
+  side = 'left',
+  breakpoint = BREAKPOINT_MD,
+  width,
+  maxHeightRatio,
+  inset,
+  showHandle,
+  dismissOnBackdrop,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label,
+  children,
+}: ResponsiveSheetProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      placement={placementForSide(side, breakpoint)}
+      width={width}
+      maxHeightRatio={maxHeightRatio}
+      inset={inset}
+      showHandle={showHandle}
+      dismissOnBackdrop={dismissOnBackdrop}
+      panelStyle={panelStyle}
+      panelClassName={panelClassName}
+      containerStyle={containerStyle}
+      containerClassName={containerClassName}
+      label={label}
+    >
+      {children}
+    </Dialog>
+  );
+}
+
+/**
+ * Build the `Dialog` `placement` map for a `ResponsiveSheet`: a bottom-sheet
+ * below `breakpoint`, the anchored `side` at and above it. The `breakpoint`
+ * (px) is bucketed to the nearest Tailwind key so the side-sheet engages at the
+ * matching width.
+ */
+function placementForSide(
+  side: 'left' | 'right',
+  breakpoint: number,
+): ResponsiveDialogPlacement {
+  if (breakpoint <= BREAKPOINT_SM) return { base: 'bottom', sm: side };
+  if (breakpoint <= BREAKPOINT_MD) return { base: 'bottom', md: side };
+  if (breakpoint <= BREAKPOINT_LG) return { base: 'bottom', lg: side };
+  if (breakpoint <= BREAKPOINT_XL) return { base: 'bottom', xl: side };
+  return { base: 'bottom', xl: side };
+}
+
+/**
+ * @deprecated Stable testID for the dimmed backdrop dismiss button — now
+ * provided by the underlying `<Dialog>`'s side/bottom backdrop.
+ */
+export const RESPONSIVE_SHEET_BACKDROP_TESTID = DIALOG_SHEET_BACKDROP_TESTID;
+
+export default ResponsiveSheet;

package/src/responsive-sheet/ResponsiveSheet.web.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Dialog } from '../dialog/index.web';
+import {
+  BREAKPOINT_LG,
+  BREAKPOINT_MD,
+  BREAKPOINT_SM,
+  BREAKPOINT_XL,
+  DIALOG_SHEET_BACKDROP_TESTID,
+  type ResponsiveDialogPlacement,
+} from '../dialog/placement';
+import type { ResponsiveSheetProps } from './types';
+
+/**
+ * @deprecated Use `<Dialog placement={{ base: 'bottom', md: 'left' }}>` instead.
+ *
+ * Web fork of the deprecated `ResponsiveSheet` wrapper. Identical delegation to
+ * the default fork, but imports the web `Dialog` explicitly so non-Metro web
+ * bundlers never follow the native (reanimated) `Dialog` sibling.
+ */
+export function ResponsiveSheet({
+  open,
+  onClose,
+  side = 'left',
+  breakpoint = BREAKPOINT_MD,
+  width,
+  maxHeightRatio,
+  inset,
+  showHandle,
+  dismissOnBackdrop,
+  panelStyle,
+  panelClassName,
+  containerStyle,
+  containerClassName,
+  label,
+  children,
+}: ResponsiveSheetProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      placement={placementForSide(side, breakpoint)}
+      width={width}
+      maxHeightRatio={maxHeightRatio}
+      inset={inset}
+      showHandle={showHandle}
+      dismissOnBackdrop={dismissOnBackdrop}
+      panelStyle={panelStyle}
+      panelClassName={panelClassName}
+      containerStyle={containerStyle}
+      containerClassName={containerClassName}
+      label={label}
+    >
+      {children}
+    </Dialog>
+  );
+}
+
+function placementForSide(
+  side: 'left' | 'right',
+  breakpoint: number,
+): ResponsiveDialogPlacement {
+  if (breakpoint <= BREAKPOINT_SM) return { base: 'bottom', sm: side };
+  if (breakpoint <= BREAKPOINT_MD) return { base: 'bottom', md: side };
+  if (breakpoint <= BREAKPOINT_LG) return { base: 'bottom', lg: side };
+  if (breakpoint <= BREAKPOINT_XL) return { base: 'bottom', xl: side };
+  return { base: 'bottom', xl: side };
+}
+
+/**
+ * @deprecated Stable testID for the dimmed backdrop dismiss button — now
+ * provided by the underlying `<Dialog>`'s side/bottom backdrop.
+ */
+export const RESPONSIVE_SHEET_BACKDROP_TESTID = DIALOG_SHEET_BACKDROP_TESTID;
+
+export default ResponsiveSheet;

package/src/responsive-sheet/index.ts

@@ -0,0 +1,6 @@
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './types';

package/src/responsive-sheet/index.web.ts

@@ -0,0 +1,14 @@
+// Web variant of the `./responsive-sheet` barrel.
+//
+// `ResponsiveSheet` is now a deprecated thin wrapper over `<Dialog>`. The
+// default barrel (`./index.ts`) imports the default `Dialog`; THIS web barrel
+// re-exports from `./ResponsiveSheet.web`, which imports the web `Dialog`
+// explicitly so a non-Metro bundler never follows the native (reanimated)
+// `Dialog` sibling. Web bundlers select this file via the `"browser"` export
+// condition in `package.json`'s `exports['./responsive-sheet']`.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet.web';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './types';

package/src/responsive-sheet/types.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** Edge a wide-screen side-sheet anchors to. */
+export type ResponsiveSheetSide = 'left' | 'right';
+
+/**
+ * Inset (px) of the wide-screen side-sheet from its container edges. Lets a
+ * host place the sheet "inside its own shell" — e.g. offset from the top by a
+ * header, or from the left by a nav rail — with margins on every side.
+ */
+export interface ResponsiveSheetInset {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+/**
+ * @deprecated Use `<Dialog placement={{ base: 'bottom', md: 'left' }}>` from
+ * `@oxyhq/bloom/dialog` instead. `ResponsiveSheet` is now a thin wrapper over
+ * `<Dialog>` retained for the migration window.
+ *
+ * A responsive overlay sheet: an anchored side-sheet on wide screens and a
+ * bottom-sheet (with drag handle) on small screens, switching by viewport
+ * width. It is a plain controlled component — the host drives `open`/`onClose`
+ * from its own state.
+ */
+export interface ResponsiveSheetProps {
+  /** Whether the sheet is open. Controlled by the host. */
+  open: boolean;
+  /** Fired when the sheet requests to close (backdrop tap, Escape on web). */
+  onClose: () => void;
+  /** Anchor edge on wide screens. Defaults to `'left'`. */
+  side?: ResponsiveSheetSide;
+  /** Viewport width (px) below which the sheet renders as a bottom-sheet. Defaults to `768`. */
+  breakpoint?: number;
+  /** Side-sheet width (px) on wide screens. Capped to fit. Defaults to `460`. */
+  width?: number;
+  /** Bottom-sheet max height as a fraction of the viewport height. Defaults to `0.9`. */
+  maxHeightRatio?: number;
+  /** Side-sheet inset (px) from the container edges. Defaults to `0` on all sides. */
+  inset?: ResponsiveSheetInset;
+  /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
+  showHandle?: boolean;
+  /** Whether tapping the backdrop closes the sheet. Defaults to `true`. */
+  dismissOnBackdrop?: boolean;
+  /** Style for the panel surface (e.g. brand color). Composed after defaults. */
+  panelStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the panel surface. */
+  panelClassName?: string;
+  /** Style for the root overlay (theme-var scope, rail offset, etc.). */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** NativeWind classes for the root overlay (e.g. `"md:left-[4.75rem]"`). */
+  containerClassName?: string;
+  /** Accessibility label for the sheet panel and the backdrop dismiss button. */
+  label?: string;
+  /** Sheet content. */
+  children: ReactNode;
+}