@oxyhq/bloom 0.13.0 → 0.14.0

package/src/responsive-sheet/const.ts

@@ -0,0 +1,53 @@
+/**
+ * Shared default constants for `ResponsiveSheet`.
+ *
+ * Platform-agnostic — imported by both the default/web CSS implementation
+ * (`ResponsiveSheet.tsx`) and the native reanimated implementation
+ * (`ResponsiveSheet.native.tsx`) so the two variants stay in lockstep.
+ */
+
+/** Below this viewport width the sheet renders as a bottom-sheet. */
+export const DEFAULT_BREAKPOINT = 768;
+
+/** Side-sheet width (px) on wide screens. Capped to fit the viewport. */
+export const DEFAULT_WIDTH = 460;
+
+/** Bottom-sheet maximum height as a fraction of the viewport height. */
+export const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
+
+/** Anchored edge of the side-sheet on wide screens. */
+export const DEFAULT_SIDE = 'left' as const;
+
+/**
+ * Open/close transition duration (ms). ~280–300ms ease-out reads as smooth
+ * without feeling sluggish; shared by the CSS transition and the native
+ * reanimated timing so both platforms match.
+ */
+export const ANIMATION_DURATION = 280;
+
+/**
+ * Standard CSS approximation of reanimated's `Easing.out(Easing.cubic)` so the
+ * web transition curve matches the native one.
+ */
+export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
+
+/** Corner radius for the side-sheet panel and the top of the bottom-sheet. */
+export const PANEL_RADIUS = 20;
+
+/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
+export const BACKDROP_OPACITY = 0.4;
+
+/** 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 on a narrow
+ * desktop window that is still above the breakpoint.
+ */
+export const SIDE_SHEET_MIN_GUTTER = 24;
+
+/** A11y label fallback when the host does not provide one. */
+export const DEFAULT_LABEL = 'Sheet';

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,16 @@
+// Web variant of the `./responsive-sheet` barrel.
+//
+// The default barrel (`./index.ts`) re-exports from `./ResponsiveSheet`, which
+// is itself the reanimated-free web/CSS implementation — Metro additionally
+// resolves `./ResponsiveSheet.native` for native targets. Web bundlers select
+// THIS file via the `"browser"` export condition in `package.json`'s
+// `exports['./responsive-sheet']`, pointing them explicitly at the CSS
+// implementation so a non-Metro bundler never follows the `.native` sibling
+// (which statically imports `react-native-reanimated`, a native-only module).
+// Types are platform-agnostic, so they come straight from `./types`.
+export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './ResponsiveSheet';
+export type {
+  ResponsiveSheetProps,
+  ResponsiveSheetSide,
+  ResponsiveSheetInset,
+} from './types';

package/src/responsive-sheet/types.ts

@@ -0,0 +1,57 @@
+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;
+}
+
+/**
+ * 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. It renders in place (no portal) so the host can scope it
+ * inside a themed/positioned subtree.
+ */
+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;
+}