@oxyhq/bloom 0.14.0 → 0.16.0

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,70 +0,0 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-/**
- * 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.native.tsx

@@ -1,257 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Pressable,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  type ViewStyle,
-} from 'react-native';
-import Animated, {
-  cancelAnimation,
-  Easing,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { Z_INDEX } from '../styles/z-index';
-import { useTheme } from '../theme/use-theme';
-import {
-  ANIMATION_DURATION,
-  BACKDROP_OPACITY,
-  DEFAULT_BREAKPOINT,
-  DEFAULT_LABEL,
-  DEFAULT_MAX_HEIGHT_RATIO,
-  DEFAULT_SIDE,
-  DEFAULT_WIDTH,
-  HANDLE_HEIGHT,
-  HANDLE_RADIUS,
-  HANDLE_WIDTH,
-  PANEL_RADIUS,
-  SIDE_SHEET_MIN_GUTTER,
-} from './const';
-import type { ResponsiveSheetProps } from './types';
-
-/** Stable testID for the dimmed backdrop dismiss button. */
-export const RESPONSIVE_SHEET_BACKDROP_TESTID = 'bloom-responsive-sheet-backdrop';
-
-/**
- * Native variant of `<ResponsiveSheet>` (selected only by Metro).
- *
- * Uses `react-native-reanimated` to drive the same motion as the web/CSS
- * default fork: a shared `progress` value times 0 -> 1 on open and 1 -> 0 on
- * close, mapped to the panel translate/opacity and the backdrop opacity.
- * Native exit animations are safe here — the web-only `removeChild` crash does
- * not apply — so we keep the node mounted through the close timing and unmount
- * from the animation completion callback.
- *
- * The panel itself is measured (not percentage-translated): we offset by the
- * panel's own width/height so the hidden state sits fully off its side, which
- * is the reanimated-friendly equivalent of the web `translate(±100%)`.
- */
-export function ResponsiveSheet({
-  open,
-  onClose,
-  side = DEFAULT_SIDE,
-  breakpoint = DEFAULT_BREAKPOINT,
-  width = DEFAULT_WIDTH,
-  maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
-  inset,
-  showHandle = true,
-  dismissOnBackdrop = true,
-  panelStyle,
-  panelClassName,
-  containerStyle,
-  containerClassName,
-  label = DEFAULT_LABEL,
-  children,
-}: ResponsiveSheetProps) {
-  const theme = useTheme();
-  const { width: viewportWidth, height: viewportHeight } = useWindowDimensions();
-
-  // Keep the tree mounted through the exit timing; unmount once it settles.
-  const [mounted, setMounted] = useState(open);
-  // `progress`: 0 = fully hidden, 1 = fully shown. Drives both transform and
-  // opacity so a single timing controls the whole transition.
-  const progress = useSharedValue(open ? 1 : 0);
-
-  const isBottom = viewportWidth < breakpoint;
-
-  // Measured panel extent along the travel axis. Falls back to the geometry
-  // target so the very first frame is already off-screen before layout lands.
-  const insetTop = inset?.top ?? 0;
-  const insetBottom = inset?.bottom ?? 0;
-  const insetLeft = inset?.left ?? 0;
-  const insetRight = inset?.right ?? 0;
-  const anchorInset = side === 'left' ? insetLeft : insetRight;
-  const oppositeInset = side === 'left' ? insetRight : insetLeft;
-
-  const sideWidth = useMemo(() => {
-    const available = viewportWidth - anchorInset - oppositeInset - SIDE_SHEET_MIN_GUTTER;
-    return Math.max(0, Math.min(width, available));
-  }, [viewportWidth, anchorInset, oppositeInset, width]);
-
-  const bottomMaxHeight = useMemo(
-    () => Math.round(viewportHeight * maxHeightRatio),
-    [viewportHeight, maxHeightRatio],
-  );
-
-  // Travel distance for the hidden state: the panel's measured extent (height
-  // for the bottom-sheet, width for the side-sheet), with the geometry target
-  // as the pre-measurement fallback.
-  const travel = useSharedValue(isBottom ? bottomMaxHeight : sideWidth);
-  useEffect(() => {
-    travel.value = isBottom ? bottomMaxHeight : sideWidth;
-  }, [isBottom, bottomMaxHeight, sideWidth, travel]);
-
-  const finishClose = useCallback(() => {
-    setMounted(false);
-  }, []);
-
-  useEffect(() => {
-    cancelAnimation(progress);
-    const timing = { duration: ANIMATION_DURATION, easing: Easing.out(Easing.cubic) };
-    if (open) {
-      setMounted(true);
-      progress.value = withTiming(1, timing);
-      return;
-    }
-    if (!mounted) return;
-    progress.value = withTiming(0, timing, (finished) => {
-      if (finished) runOnJS(finishClose)();
-    });
-  }, [open, mounted, progress, finishClose]);
-
-  const handleBackdropPress = useCallback(() => {
-    if (dismissOnBackdrop) onClose();
-  }, [dismissOnBackdrop, onClose]);
-
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: progress.value * BACKDROP_OPACITY,
-  }));
-
-  const hiddenSign = side === 'left' ? -1 : 1;
-  const panelAnimatedStyle = useAnimatedStyle(() => {
-    const hidden = 1 - progress.value;
-    if (isBottom) {
-      return {
-        opacity: progress.value,
-        transform: [{ translateY: hidden * travel.value }],
-      };
-    }
-    return {
-      opacity: progress.value,
-      transform: [{ translateX: hidden * travel.value * hiddenSign }],
-    };
-  }, [isBottom, hiddenSign]);
-
-  const measurePanel = useCallback(
-    (e: { nativeEvent: { layout: { width: number; height: number } } }) => {
-      const measured = isBottom ? e.nativeEvent.layout.height : e.nativeEvent.layout.width;
-      if (measured > 0) travel.value = measured;
-    },
-    [isBottom, travel],
-  );
-
-  const panelGeometry = useMemo<ViewStyle>(() => {
-    if (isBottom) {
-      return {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        maxHeight: bottomMaxHeight,
-        borderTopLeftRadius: PANEL_RADIUS,
-        borderTopRightRadius: PANEL_RADIUS,
-      };
-    }
-    return {
-      top: insetTop,
-      bottom: insetBottom,
-      [side]: anchorInset,
-      width: sideWidth,
-      borderRadius: PANEL_RADIUS,
-    } as ViewStyle;
-  }, [isBottom, bottomMaxHeight, insetTop, insetBottom, side, anchorInset, sideWidth]);
-
-  if (!mounted) return null;
-
-  return (
-    <View
-      style={[styles.root, containerStyle]}
-      {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-      pointerEvents="box-none"
-    >
-      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} pointerEvents="auto">
-        <Pressable
-          testID={RESPONSIVE_SHEET_BACKDROP_TESTID}
-          accessibilityRole="button"
-          accessibilityLabel={`Dismiss ${label}`}
-          onPress={handleBackdropPress}
-          disabled={!dismissOnBackdrop}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
-
-      <Animated.View
-        accessibilityViewIsModal
-        {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
-        onLayout={measurePanel}
-        style={[
-          styles.panel,
-          { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow },
-          panelGeometry,
-          panelAnimatedStyle,
-          panelStyle,
-        ]}
-        pointerEvents="auto"
-      >
-        {isBottom && showHandle ? (
-          <View style={styles.handleRow} pointerEvents="none">
-            <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
-          </View>
-        ) : null}
-        {children}
-      </Animated.View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: {
-    ...StyleSheet.absoluteFill,
-    zIndex: Z_INDEX.fullscreen,
-  },
-  backdrop: {
-    ...StyleSheet.absoluteFill,
-    backgroundColor: '#000',
-  },
-  panel: {
-    position: 'absolute',
-    overflow: 'hidden',
-    shadowOpacity: 0.18,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 12,
-  },
-  handleRow: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 8,
-    paddingBottom: 4,
-  },
-  handle: {
-    width: HANDLE_WIDTH,
-    height: HANDLE_HEIGHT,
-    borderRadius: HANDLE_RADIUS,
-    opacity: 0.5,
-  },
-});
-
-export default ResponsiveSheet;

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" />,
-};