@oxyhq/bloom 0.15.0 → 0.16.1

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

@@ -1,68 +0,0 @@
-import { borderRadius, space } from '../styles/tokens';
-
-/**
- * Shared layout constants for `<CenteredDialog>`, kept in one module so the
- * native and web forks render identically. All values are Bloom theme tokens
- * (`styles/tokens`) — no ad-hoc magic numbers.
- *
- * COMPACT is the priority: the `compact` spacing set is the default and is
- * deliberately tight (≈`space.md`), so the card reads snug out of the box.
- * The `cozy` set is the opt-out (`compact={false}`) for roomier dialogs.
- */
-
-/** Default max card width — comfortable for a compact dialog. */
-export const DEFAULT_MAX_WIDTH = 440;
-
-/** Card height is capped at this fraction of the viewport; body scrolls. */
-export const MAX_HEIGHT_FRACTION = 0.8;
-
-/** Card corner radius (token: `borderRadius.lg` = 16). */
-export const CARD_RADIUS = borderRadius.lg;
-
-/** Outer gutter between the card edge and the viewport edge (token `space.lg`). */
-export const VIEWPORT_GUTTER = space.lg;
-
-export type DialogSpacing = {
-  /** Card inner padding (horizontal + vertical). */
-  pad: number;
-  /** Gap between the header title row and the body. */
-  headerGap: number;
-  /** Gap between the body and the footer. */
-  footerGap: number;
-  /** Vertical gap between stacked body items (the content container `gap`). */
-  contentGap: number;
-};
-
-/**
- * Compact (default) — tight, snug spacing built on `space.md` (12).
- *
- *   pad        = space.md  (12)
- *   headerGap  = space.sm  (8)
- *   footerGap  = space.md  (12)
- *   contentGap = space.sm  (8)
- */
-export const COMPACT_SPACING: DialogSpacing = {
-  pad: space.md,
-  headerGap: space.sm,
-  footerGap: space.md,
-  contentGap: space.sm,
-};
-
-/**
- * Cozy (`compact={false}`) — roomier spacing built on `space.xl` (20).
- *
- *   pad        = space.xl   (20)
- *   headerGap  = space.md   (12)
- *   footerGap  = space.lg   (16)
- *   contentGap = space.md   (12)
- */
-export const COZY_SPACING: DialogSpacing = {
-  pad: space.xl,
-  headerGap: space.md,
-  footerGap: space.lg,
-  contentGap: space.md,
-};
-
-export function resolveSpacing(compact: boolean): DialogSpacing {
-  return compact ? COMPACT_SPACING : COZY_SPACING;
-}

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

@@ -1,74 +0,0 @@
-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
- * imperative `useDialogControl()` + `<Dialog control={…}>` API in the same
- * module. Reach for `<CenteredDialog>` when you already own the open/closed
- * boolean (a `useState`, a query flag, a route param) and just want Bloom to
- * render the dimmed backdrop + a snug, theme-styled centered card.
- *
- * All spacing/colour/radius come from Bloom theme tokens — the card reads
- * compact out of the box (`compact` defaults to `true`).
- */
-export type CenteredDialogProps = {
-  /** Whether the dialog is mounted + visible. */
-  visible: boolean;
-  /**
-   * Close request — fired on backdrop tap (when `dismissible`), the close
-   * button, the hardware back button (Android), and `Escape` (web). The
-   * caller owns the visible state, so it must flip `visible` to `false` here.
-   */
-  onClose: () => void;
-  /**
-   * Optional header title. When set (or when `showClose` is `true`) Bloom
-   * renders a tight header row above the content.
-   */
-  title?: string;
-  /**
-   * Tap-outside / back-button / Escape dismisses the dialog. Defaults to
-   * `true`. Set `false` for blocking flows (e.g. a destructive confirm that
-   * must be answered via an explicit action).
-   */
-  dismissible?: boolean;
-  /** Max card width in px. Defaults to {@link DEFAULT_MAX_WIDTH} (440). */
-  maxWidth?: number;
-  /**
-   * Tight, snug spacing (the Bloom default). Set `false` for a roomier card
-   * with larger padding and header/footer gaps. Defaults to `true`.
-   */
-  compact?: boolean;
-  /**
-   * Render a close (✕) icon button in the header. Defaults to `true` when a
-   * `title` is provided, otherwise `false` (a chromeless card owns its own
-   * dismissal affordances).
-   */
-  showClose?: boolean;
-  /** Card body. Scrolls within the height cap when it overflows. */
-  children?: ReactNode;
-  /**
-   * Optional footer slot for actions (e.g. a Bloom `<Button>` row). Rendered
-   * below the scrollable body with a hairline separator.
-   */
-  footer?: ReactNode;
-  /**
-   * Accessibility label for the dialog surface. Falls back to `title` when
-   * omitted.
-   */
-  accessibilityLabel?: string;
-  /** Accessibility label for the header close (✕) button. */
-  closeAccessibilityLabel?: string;
-  /** Accessibility label for the dimmed backdrop's tap-to-dismiss affordance. */
-  backdropAccessibilityLabel?: string;
-  /** Style overrides merged onto the centered card container. */
-  cardStyle?: StyleProp<ViewStyle>;
-  /** Style overrides merged onto the scrollable content container. */
-  contentStyle?: StyleProp<ViewStyle>;
-  testID?: string;
-};

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

@@ -1,54 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-// 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

@@ -1,60 +0,0 @@
-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;
-}