@oxyhq/bloom 0.11.0 → 0.12.1

package/src/__tests__/Fab.web.test.tsx

@@ -0,0 +1,127 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { getByRole, getByText, getByLabelText, fireEvent } from '@testing-library/dom';
+import '@testing-library/jest-dom';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Fab } from '../fab/Fab.web';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(ui: React.ReactElement): HTMLElement {
+  act(() => {
+    root.render(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        {ui}
+      </BloomThemeProvider>,
+    );
+  });
+  return container;
+}
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe('Fab.web', () => {
+  it('renders a real <button> element', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button', { name: 'Add' });
+    expect(fab.tagName).toBe('BUTTON');
+  });
+
+  it('defaults to type="button"', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    expect(getByRole(c, 'button')).toHaveAttribute('type', 'button');
+  });
+
+  it('fires both onClick and onPress on click', () => {
+    const onClick = jest.fn();
+    const onPress = jest.fn();
+    const c = mount(
+      <Fab accessibilityLabel="Add" onClick={onClick} onPress={onPress} icon={<span>+</span>} />,
+    );
+    act(() => {
+      fireEvent.click(getByRole(c, 'button'));
+    });
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire handlers when disabled', () => {
+    const onPress = jest.fn();
+    const c = mount(
+      <Fab accessibilityLabel="Add" disabled onPress={onPress} icon={<span>+</span>} />,
+    );
+    const fab = getByRole(c, 'button');
+    expect(fab).toBeDisabled();
+    act(() => {
+      fireEvent.click(fab);
+    });
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('uses position: sticky for the default bottom-right placement (NOT fixed)', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab.style.position).toBe('sticky');
+    expect(fab.style.bottom).toBe('16px');
+    expect(fab.style.alignSelf).toBe('flex-end');
+  });
+
+  it('sets margin-top: auto for bottom placements so a short column pins the FAB to the bottom', () => {
+    const c = mount(<Fab accessibilityLabel="Add" icon={<span>+</span>} />);
+    expect(getByRole(c, 'button').style.marginTop).toBe('auto');
+  });
+
+  it('does NOT set margin-top: auto for top placements', () => {
+    const c = mount(<Fab accessibilityLabel="Add" placement="top-right" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab.style.marginTop).toBe('');
+    expect(fab.style.top).toBe('16px');
+  });
+
+  it('applies no positioning for placement="static"', () => {
+    const c = mount(<Fab accessibilityLabel="Add" placement="static" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab.style.position).toBe('');
+    expect(fab.style.marginTop).toBe('');
+  });
+
+  it('renders an extended label', () => {
+    const c = mount(<Fab label="Compose" icon={<span>+</span>} />);
+    expect(getByText(c, 'Compose')).toBeTruthy();
+  });
+
+  it('applies aria-label from accessibilityLabel', () => {
+    const c = mount(<Fab accessibilityLabel="Add post" icon={<span>+</span>} />);
+    expect(getByLabelText(c, 'Add post')).toBeTruthy();
+  });
+
+  it('passes className through so consumer layout classes win', () => {
+    const c = mount(<Fab accessibilityLabel="Add" className="my-fab" icon={<span>+</span>} />);
+    const fab = getByRole(c, 'button');
+    expect(fab).toHaveClass('bloom-fab');
+    expect(fab).toHaveClass('my-fab');
+  });
+
+  it('exposes testID as data-testid', () => {
+    const c = mount(<Fab accessibilityLabel="Add" testID="my-fab" icon={<span>+</span>} />);
+    expect(c.querySelector('[data-testid="my-fab"]')?.tagName).toBe('BUTTON');
+  });
+});

package/src/fab/Fab.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Fab } from './Fab';
+import * as Icons from '../icons';
+
+const meta: Meta<typeof Fab> = {
+  title: 'Components/Fab',
+  component: Fab,
+  args: {
+    accessibilityLabel: 'Compose',
+    icon: <Icons.PlusLarge_Stroke2_Corner0_Rounded size="lg" fill="#fff" />,
+    onPress: () => {},
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'surface'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    placement: {
+      control: 'select',
+      options: ['bottom-right', 'bottom-left', 'top-right', 'top-left', 'static'],
+    },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Fab>;
+
+/** Default circular icon FAB, anchored to the bottom-right of its container. */
+export const Default: Story = {};
+
+/** Lower-emphasis surface FAB. */
+export const Surface: Story = {
+  args: { variant: 'surface' },
+};
+
+/** Extended FAB: icon + label pill. */
+export const Extended: Story = {
+  args: { label: 'Compose' },
+};
+
+/**
+ * The FAB anchored to the bottom-right of a CONSTRAINED column. On web the FAB
+ * uses `position: sticky`, so it tracks the bottom of THIS column (not the
+ * viewport) — exactly what a multi-column app layout needs.
+ */
+export const InContainerColumn: Story = {
+  render: (args) => (
+    <View
+      style={{
+        position: 'relative',
+        width: 360,
+        height: 480,
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 12,
+        overflow: 'hidden',
+      }}
+    >
+      <Fab {...args} />
+    </View>
+  ),
+};

package/src/fab/Fab.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useMemo } from 'react';
+import {
+  Animated,
+  Pressable,
+  Text,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePressAnimation } from '../hooks/usePressAnimation';
+import { useInteractionState } from '../hooks/useInteractionState';
+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 }> = {
+  small: { diameter: 40, iconBox: 24, fontSize: 14 },
+  medium: { diameter: 56, iconBox: 24, fontSize: 15 },
+  large: { diameter: 64, iconBox: 28, fontSize: 16 },
+};
+
+const PILL_RADIUS = 999;
+const PRESS_SCALE = 0.94;
+const DEFAULT_OFFSET = 16;
+const DEFAULT_Z_INDEX = 50;
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
+
+/**
+ * Compute the `position: absolute` anchoring for a placement. The FAB pins to
+ * the nearest positioned ancestor (the consumer's column container), NOT the
+ * screen — so it never escapes a constrained layout. `static` returns no
+ * positioning (consumer-controlled).
+ */
+function placementStyle(placement: FabPlacement, offset: number): ViewStyle {
+  if (placement === 'static') return {};
+  const style: ViewStyle = { position: 'absolute' };
+  if (placement === 'bottom-right' || placement === 'bottom-left') {
+    style.bottom = offset;
+  } else {
+    style.top = offset;
+  }
+  if (placement === 'bottom-right' || placement === 'top-right') {
+    style.right = offset;
+  } else {
+    style.left = offset;
+  }
+  return style;
+}
+
+const FabComponent: React.FC<FabProps> = ({
+  onPress,
+  icon,
+  children,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  placement = 'bottom-right',
+  offset = DEFAULT_OFFSET,
+  disabled = false,
+  accessibilityLabel,
+  accessibilityHint,
+  style,
+  labelStyle,
+  className,
+  testID,
+  zIndex = DEFAULT_Z_INDEX,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const isExtended = label != null && label.length > 0;
+  const content = icon ?? children;
+
+  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(
+    disabled ? undefined : PRESS_SCALE,
+  );
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } =
+    useInteractionState();
+
+  const resolvedColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
+
+  const containerStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      backgroundColor: resolvedColors.background,
+      borderRadius: PILL_RADIUS,
+      height: sizeConfig.diameter,
+      // Elevation / shadow (native).
+      shadowColor: theme.colors.shadow,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 6,
+    };
+    if (isExtended) {
+      base.paddingHorizontal = size === 'small' ? 14 : 20;
+      base.gap = 8;
+    } else {
+      base.width = sizeConfig.diameter;
+    }
+    return base;
+  }, [resolvedColors.background, sizeConfig.diameter, theme.colors.shadow, isExtended, size]);
+
+  const labelTextStyle = useMemo((): TextStyle => ({
+    fontSize: sizeConfig.fontSize,
+    fontWeight: '600',
+    color: resolvedColors.foreground,
+  }), [sizeConfig.fontSize, resolvedColors.foreground]);
+
+  const handlePressIn = disabled
+    ? undefined
+    : () => {
+        onPressIn();
+        onPressedIn();
+      };
+  const handlePressOut = disabled
+    ? undefined
+    : () => {
+        onPressOut();
+        onPressedOut();
+      };
+
+  return (
+    <Animated.View
+      style={[
+        placementStyle(placement, offset),
+        { zIndex, transform: [{ scale: scaleAnim }] },
+        style,
+      ]}
+    >
+      <Pressable
+        {...(className ? ({ className } as Record<string, string>) : {})}
+        style={[
+          containerStyle,
+          disabled && { opacity: 0.5 },
+          pressed && !disabled && { opacity: 0.9 },
+        ]}
+        onPress={disabled ? undefined : onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        hitSlop={HIT_SLOP}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        {content != null && (
+          <View
+            style={{
+              width: sizeConfig.iconBox,
+              height: sizeConfig.iconBox,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {content}
+          </View>
+        )}
+        {isExtended && (
+          <Text style={[labelTextStyle, labelStyle]} numberOfLines={1}>
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+function resolveVariant(
+  variant: FabVariant,
+  colors: ReturnType<typeof useTheme>['colors'],
+): { background: string; foreground: string } {
+  switch (variant) {
+    case 'secondary':
+    case 'surface':
+      return { background: colors.card, foreground: colors.text };
+    case 'primary':
+    default:
+      return { background: colors.primary, foreground: colors.primaryForeground };
+  }
+}
+
+export const Fab = memo(FabComponent);
+Fab.displayName = 'Fab';

package/src/fab/Fab.web.tsx

@@ -0,0 +1,272 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  type CSSProperties,
+  type MouseEvent,
+} from 'react';
+
+import { useTheme } from '../theme/use-theme';
+import type { Theme } from '../theme/types';
+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 }> = {
+  small: { diameter: 40, iconBox: 24, fontSize: 14 },
+  medium: { diameter: 56, iconBox: 24, fontSize: 15 },
+  large: { diameter: 64, iconBox: 28, fontSize: 16 },
+};
+
+const PILL_RADIUS = 999;
+const PRESS_SCALE = 0.94;
+const DEFAULT_OFFSET = 16;
+const DEFAULT_Z_INDEX = 50;
+
+// ---------------------------------------------------------------------------
+//  Per-state CSS injection
+//
+//  Inline styles cannot express `:hover` / `:focus-visible` / `:active`. We
+//  inject one static stylesheet (keyed by id, once) defining the interaction
+//  behavior for the base `bloom-fab` class; per-instance resolved colors stay
+//  inline. The focus-ring color is read from a CSS custom property the
+//  component sets inline (`--bloom-fab-ring`).
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'bloom-fab-web-css';
+
+const BLOOM_FAB_CSS = `
+.bloom-fab {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 8px;
+  margin: 0;
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease;
+}
+.bloom-fab:disabled,
+.bloom-fab[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+}
+.bloom-fab:not(:disabled):not([aria-disabled="true"]):hover {
+  box-shadow: var(--bloom-fab-shadow-hover);
+}
+.bloom-fab:not(:disabled):not([aria-disabled="true"]):active {
+  transform: scale(var(--bloom-fab-press-scale, 1));
+}
+.bloom-fab:focus-visible {
+  outline: 2px solid var(--bloom-fab-ring, currentColor);
+  outline-offset: 3px;
+}
+`;
+
+function useFabCss(): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = BLOOM_FAB_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+
+/**
+ * Positioning for a placement on web.
+ *
+ * CRITICAL: the positioned placements use `position: sticky`, NOT `fixed`. A
+ * sticky element is positioned relative to its nearest scrolling ancestor and
+ * stays within its containing block — so the FAB tracks the bottom-right of the
+ * CENTRAL CONTENT COLUMN as it scrolls and never escapes to the viewport edge /
+ * over a side rail in a constrained multi-column app layout.
+ *
+ * Pinning a FAB to the BOTTOM of a column needs TWO mechanisms working together,
+ * because sticky alone is not enough:
+ *
+ *   1. `margin-top: auto` — in a flex COLUMN this consumes all the free vertical
+ *      space, pushing the FAB to the bottom of the container EVEN WHEN THE
+ *      CONTENT IS SHORT (e.g. an empty feed / loading spinner). Without it, a
+ *      short column leaves the FAB at its natural flow position (mid-column) —
+ *      which is exactly the "floating in the middle / broken" bug.
+ *   2. `position: sticky; bottom` — when the content is TALL and the column
+ *      scrolls, sticky keeps the FAB pinned to the bottom of the viewport as the
+ *      user scrolls, instead of scrolling away with the content.
+ *
+ * Horizontal placement uses `align-self` (sticky elements can't be pushed by
+ * `left`/`right` the way absolute ones are) plus an inline-edge margin for the
+ * `offset`. The consumer column MUST be a flex column that fills the available
+ * height, and the FAB MUST be its last child — documented in the usage story.
+ */
+function placementStyle(placement: FabPlacement, offset: number): CSSProperties {
+  if (placement === 'static') return {};
+  const style: CSSProperties = { position: 'sticky' };
+  const isBottom = placement === 'bottom-right' || placement === 'bottom-left';
+  if (isBottom) {
+    style.bottom = offset;
+    // Push the FAB to the bottom of a (flex-column) container even when the
+    // content is too short to scroll, so it never floats mid-column.
+    style.marginTop = 'auto';
+  } else {
+    style.top = offset;
+  }
+  if (placement === 'bottom-right' || placement === 'top-right') {
+    style.alignSelf = 'flex-end';
+    style.marginRight = offset;
+  } else {
+    style.alignSelf = 'flex-start';
+    style.marginLeft = offset;
+  }
+  return style;
+}
+
+function resolveVariant(
+  variant: FabVariant,
+  c: Theme['colors'],
+): { background: string; foreground: string; ring: string } {
+  switch (variant) {
+    case 'secondary':
+    case 'surface':
+      return { background: c.card, foreground: c.text, ring: c.primary };
+    case 'primary':
+    default:
+      return { background: c.primary, foreground: c.primaryForeground, ring: c.primary };
+  }
+}
+
+const FabWebComponent: React.FC<FabProps> = ({
+  onPress,
+  onClick,
+  icon,
+  children,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  placement = 'bottom-right',
+  offset = DEFAULT_OFFSET,
+  disabled = false,
+  accessibilityLabel,
+  'aria-label': ariaLabelProp,
+  accessibilityHint,
+  style,
+  labelStyle,
+  className,
+  testID,
+  zIndex = DEFAULT_Z_INDEX,
+  id,
+  title,
+  type = 'button',
+}) => {
+  useFabCss();
+  const theme = useTheme();
+  const reactId = useId();
+  const resolvedId = id ?? `bloom-fab-${reactId}`;
+
+  const sizeConfig = SIZE_CONFIG[size];
+  const isExtended = label != null && label.length > 0;
+  const content = icon ?? children;
+  const variantColors = useMemo(() => resolveVariant(variant, theme.colors), [variant, theme.colors]);
+
+  // Resolved-token shadows. The token is already a full color (per the Bloom
+  // web CSS-var contract), so it is used directly — never wrapped in hsl().
+  const restShadow = `0 4px 12px ${theme.colors.shadow}`;
+  const hoverShadow = `0 8px 20px ${theme.colors.shadow}`;
+
+  const containerStyle = useMemo((): CSSProperties => {
+    const base: CSSProperties = {
+      backgroundColor: variantColors.background,
+      color: variantColors.foreground,
+      borderRadius: PILL_RADIUS,
+      height: sizeConfig.diameter,
+      zIndex,
+      boxShadow: restShadow,
+      fontSize: sizeConfig.fontSize,
+      fontWeight: 600,
+      ['--bloom-fab-ring' as string]: variantColors.ring,
+      ['--bloom-fab-shadow-hover' as string]: hoverShadow,
+      ['--bloom-fab-press-scale' as string]: PRESS_SCALE,
+      ...placementStyle(placement, offset),
+    };
+    if (isExtended) {
+      base.paddingLeft = size === 'small' ? 14 : 20;
+      base.paddingRight = size === 'small' ? 14 : 20;
+    } else {
+      base.width = sizeConfig.diameter;
+    }
+    return base;
+  }, [
+    variantColors,
+    sizeConfig.diameter,
+    sizeConfig.fontSize,
+    zIndex,
+    restShadow,
+    hoverShadow,
+    placement,
+    offset,
+    isExtended,
+    size,
+  ]);
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClick?.(event);
+      onPress?.();
+    },
+    [disabled, onClick, onPress],
+  );
+
+  const ariaLabel = ariaLabelProp ?? accessibilityLabel ?? label;
+  const composedClassName = ['bloom-fab'].concat(className ? [className] : []).join(' ');
+
+  return (
+    <button
+      id={resolvedId}
+      type={type}
+      className={composedClassName}
+      style={{ ...containerStyle, ...(style as CSSProperties) }}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-disabled={disabled || undefined}
+      aria-label={ariaLabel}
+      title={title ?? accessibilityHint}
+      data-testid={testID}
+    >
+      {content != null && (
+        <span
+          aria-hidden={isExtended ? 'true' : undefined}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: sizeConfig.iconBox,
+            height: sizeConfig.iconBox,
+          }}
+        >
+          {content}
+        </span>
+      )}
+      {isExtended && <span style={labelStyle as CSSProperties}>{label}</span>}
+    </button>
+  );
+};
+
+export const Fab = memo(FabWebComponent);
+Fab.displayName = 'Fab';

package/src/fab/index.ts

@@ -0,0 +1,2 @@
+export { Fab } from './Fab';
+export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';

package/src/fab/index.web.ts

@@ -0,0 +1,12 @@
+// Web variant of the `./fab` barrel.
+//
+// The default barrel (`./index.ts`) re-exports the React Native (`Pressable`)
+// implementation, whose `placement` anchoring uses `position: absolute` within
+// the nearest positioned ancestor. The web fork (`./Fab.web`) renders a real
+// HTML `<button>` and uses `position: sticky` for its anchored placements so
+// the FAB tracks the bottom-right of its CONTAINING content column while
+// scrolling — never the viewport edge (the bug that motivated moving the FAB
+// into Bloom). Web bundlers select this file via the `"browser"` export
+// condition in `package.json`'s `exports['./fab']`.
+export { Fab } from './Fab.web';
+export type { FabProps, FabVariant, FabSize, FabPlacement } from './types';