@oxyhq/bloom 0.12.1 → 0.14.0

package/src/fab/Fab.web.tsx

@@ -14,15 +14,40 @@ import type { FabPlacement, FabProps, FabSize, FabVariant } from './types';
 
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';
 
-// Material-style FAB scale. `small` (40px, the compact FAB Mention uses) keeps a
-// full 24px icon box so the glyph reads clearly; `medium` (56px) is the
-// canonical FAB; `large` (64px) is the high-prominence action.
-const SIZE_CONFIG: Record<FabSize, { diameter: number; iconBox: number; fontSize: number }> = {
+interface ResolvedSize {
+  diameter: number;
+  iconBox: number;
+  fontSize: number;
+}
+
+// Material-style FAB scale. `small` (40px) keeps a full 24px icon box so the
+// glyph reads clearly; `medium` (56px) is the canonical FAB; `large` (64px) is
+// the high-prominence action.
+const SIZE_CONFIG: Record<FabSize, ResolvedSize> = {
   small: { diameter: 40, iconBox: 24, fontSize: 14 },
   medium: { diameter: 56, iconBox: 24, fontSize: 15 },
   large: { diameter: 64, iconBox: 28, fontSize: 16 },
 };
 
+const MIN_NUMERIC_ICON_BOX = 22;
+
+/**
+ * Resolve a `size` prop (preset name or raw pixel diameter) to concrete pixel
+ * geometry. Mirrors the native `resolveSize` exactly so a numeric size renders
+ * identically on both platforms. A numeric size sets the diameter directly and
+ * derives the icon box as `round(size * 0.5)` (clamped to a sensible minimum).
+ */
+function resolveSize(size: FabSize | number): ResolvedSize {
+  if (typeof size === 'number') {
+    return {
+      diameter: size,
+      iconBox: Math.max(MIN_NUMERIC_ICON_BOX, Math.round(size * 0.5)),
+      fontSize: Math.max(13, Math.round(size * 0.27)),
+    };
+  }
+  return SIZE_CONFIG[size];
+}
+
 const PILL_RADIUS = 999;
 const PRESS_SCALE = 0.94;
 const DEFAULT_OFFSET = 16;
@@ -176,7 +201,7 @@ const FabWebComponent: React.FC<FabProps> = ({
   const reactId = useId();
   const resolvedId = id ?? `bloom-fab-${reactId}`;
 
-  const sizeConfig = SIZE_CONFIG[size];
+  const sizeConfig = useMemo(() => resolveSize(size), [size]);
   const isExtended = label != null && label.length > 0;
   const content = icon ?? children;
   const variantColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
@@ -202,8 +227,9 @@ const FabWebComponent: React.FC<FabProps> = ({
       ...placementStyle(placement, offset),
     };
     if (isExtended) {
-      base.paddingLeft = size === 'small' ? 14 : 20;
-      base.paddingRight = size === 'small' ? 14 : 20;
+      const pad = sizeConfig.diameter <= 44 ? 14 : 20;
+      base.paddingLeft = pad;
+      base.paddingRight = pad;
     } else {
       base.width = sizeConfig.diameter;
     }
@@ -218,7 +244,6 @@ const FabWebComponent: React.FC<FabProps> = ({
     placement,
     offset,
     isExtended,
-    size,
   ]);
 
   const handleClick = useCallback(

package/src/fab/types.ts

@@ -12,13 +12,19 @@ import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 export type FabVariant = 'primary' | 'secondary' | 'surface';
 
 /**
- * FAB sizes, matching Material-ish conventions but in Bloom's scale:
+ * FAB size presets, matching Material-ish conventions but in Bloom's scale:
  *   - `small`   — 40px (compact / dense layouts)
  *   - `medium`  — 56px (the canonical FAB; the default)
  *   - `large`   — 64px (high-prominence primary action)
  *
  * In the `extended` variant the height tracks the size but the FAB grows
  * horizontally to fit its icon + label as a pill.
+ *
+ * The `size` prop ALSO accepts a raw pixel `number` for an exact diameter
+ * between (or outside) the presets — e.g. `size={48}` for a FAB halfway between
+ * `small` and `medium`. A numeric size sets the diameter directly, derives the
+ * icon box as `round(size * 0.5)` (min 22px) and keeps the circle radius at
+ * `size / 2`.
  */
 export type FabSize = 'small' | 'medium' | 'large';
 
@@ -73,7 +79,11 @@ export interface FabProps {
   label?: string;
 
   variant?: FabVariant;
-  size?: FabSize;
+  /**
+   * A preset (`'small' | 'medium' | 'large'`) or a raw pixel diameter
+   * (`number`). Defaults to `'medium'`. See {@link FabSize}.
+   */
+  size?: FabSize | number;
 
   /**
    * Corner of the containing block to anchor to. Defaults to `'bottom-right'`.

package/src/index.ts

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

@@ -93,6 +93,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.native.tsx

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

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