@oxyhq/bloom 0.6.8 → 0.6.10

package/src/__tests__/CenteredDialog.test.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Modal, Text } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID } from '../dialog';
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+const CLOSE_LABEL = 'Close dialog';
+
+describe('CenteredDialog', () => {
+  it('renders the title, children and footer when visible', () => {
+    const { getByText } = renderWithTheme(
+      <CenteredDialog
+        visible
+        onClose={() => {}}
+        title="Confirm action"
+        footer={<Text>Footer area</Text>}
+      >
+        <Text>Body content</Text>
+      </CenteredDialog>,
+    );
+    expect(getByText('Confirm action')).toBeTruthy();
+    expect(getByText('Body content')).toBeTruthy();
+    expect(getByText('Footer area')).toBeTruthy();
+  });
+
+  it('forwards visible=false to the underlying Modal', () => {
+    const { UNSAFE_getByType } = renderWithTheme(
+      <CenteredDialog visible={false} onClose={() => {}} title="Hidden">
+        <Text>Body</Text>
+      </CenteredDialog>,
+    );
+    // The native fork always mounts the RN Modal; the platform hides it via
+    // the `visible` prop. Assert the prop is wired through.
+    expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
+  });
+
+  it('renders a header close button by default when a title is set and fires onClose', () => {
+    const onClose = jest.fn();
+    const { getByLabelText } = renderWithTheme(
+      <CenteredDialog visible onClose={onClose} title="With close">
+        <Text>Body</Text>
+      </CenteredDialog>,
+    );
+    fireEvent.press(getByLabelText(CLOSE_LABEL));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('omits the header close button when showClose is false even with a title', () => {
+    const { queryByLabelText } = renderWithTheme(
+      <CenteredDialog visible onClose={() => {}} title="No close" showClose={false}>
+        <Text>Body</Text>
+      </CenteredDialog>,
+    );
+    expect(queryByLabelText(CLOSE_LABEL)).toBeNull();
+  });
+
+  it('closes when the backdrop is pressed (dismissible default)', () => {
+    const onClose = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <CenteredDialog visible onClose={onClose}>
+        <Text>Body</Text>
+      </CenteredDialog>,
+    );
+    fireEvent.press(getByTestId(CENTERED_DIALOG_BACKDROP_TESTID));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does NOT close on backdrop press when dismissible is false', () => {
+    const onClose = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <CenteredDialog visible onClose={onClose} dismissible={false}>
+        <Text>Body</Text>
+      </CenteredDialog>,
+    );
+    fireEvent.press(getByTestId(CENTERED_DIALOG_BACKDROP_TESTID));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('derives the backdrop testID from a provided testID', () => {
+    const { getByTestId } = renderWithTheme(
+      <CenteredDialog visible onClose={() => {}} testID="signout">
+        <Text>Body</Text>
+      </CenteredDialog>,
+    );
+    expect(getByTestId('signout-backdrop')).toBeTruthy();
+  });
+
+  it('renders a chromeless card (no header) when no title and showClose unset', () => {
+    const { queryByLabelText, getByText, getByTestId } = renderWithTheme(
+      <CenteredDialog visible onClose={() => {}}>
+        <Text>Chromeless body</Text>
+      </CenteredDialog>,
+    );
+    expect(getByText('Chromeless body')).toBeTruthy();
+    // No header close button; only the backdrop is interactive.
+    expect(queryByLabelText(CLOSE_LABEL)).toBeNull();
+    expect(getByTestId(CENTERED_DIALOG_BACKDROP_TESTID)).toBeTruthy();
+  });
+});

package/src/accordion/Accordion.tsx

@@ -2,6 +2,7 @@ import React, { createContext, memo, useCallback, useContext, useEffect, useMemo
 import { View, Text, Pressable, Animated, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import { animation, borderRadius, space } from '../styles/tokens';
 import { SUPPORTS_NATIVE_DRIVER } from '../styles/native-driver';
 import type {
@@ -132,6 +133,11 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
   const { toggle } = useContext(AccordionContext);
   const { value, isExpanded, disabled } = useContext(AccordionItemContext);
   const rotateAnim = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  // Drive press-opacity via state, not Pressable's function-form `style`,
+  // which NativeWind v4's css-interop swallows (dropping the trigger's base
+  // layout: flexDirection, padding, gap).
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   useEffect(() => {
     Animated.spring(rotateAnim, {
@@ -154,7 +160,7 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
 
   return (
     <Pressable
-      style={({ pressed }) => [
+      style={[
         {
           flexDirection: 'row',
           alignItems: 'center',
@@ -166,6 +172,8 @@ const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
         style,
       ]}
       onPress={handlePress}
+      onPressIn={disabled ? undefined : onPressIn}
+      onPressOut={disabled ? undefined : onPressOut}
       disabled={disabled}
       accessibilityRole="button"
       accessibilityState={{ expanded: isExpanded, disabled }}

package/src/button/Button.tsx

@@ -13,6 +13,7 @@ import {
 
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
+import { useInteractionState } from '../hooks/useInteractionState';
 import type { ButtonProps } from './types';
 
 export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
@@ -65,9 +66,34 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   const theme = useTheme();
   const hasScaleFeedback = SCALE_VARIANTS.has(variant);
   const isInteractionBlocked = disabled || loading;
-  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(
-    hasScaleFeedback && !isInteractionBlocked ? PRESS_SCALE : undefined,
-  );
+  const { scaleAnim, onPressIn: onScalePressIn, onPressOut: onScalePressOut } =
+    usePressAnimation(
+      hasScaleFeedback && !isInteractionBlocked ? PRESS_SCALE : undefined,
+    );
+  // Non-scale variants (icon/ghost/text) convey press feedback via an opacity
+  // dip. We drive it through component state + onPressIn/onPressOut rather than
+  // Pressable's function-form `style` because NativeWind v4's css-interop
+  // rewrites the `style` prop of every JSX element and swallows the function
+  // form, which would drop ALL base styles (background, radius, padding,
+  // minHeight). A static style array is merged correctly by css-interop.
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } =
+    useInteractionState();
+
+  const handlePressIn = useMemo(() => {
+    if (isInteractionBlocked) return undefined;
+    return () => {
+      onScalePressIn();
+      onPressedIn();
+    };
+  }, [isInteractionBlocked, onScalePressIn, onPressedIn]);
+
+  const handlePressOut = useMemo(() => {
+    if (isInteractionBlocked) return undefined;
+    return () => {
+      onScalePressOut();
+      onPressedOut();
+    };
+  }, [isInteractionBlocked, onScalePressOut, onPressedOut]);
 
   const baseStyles = useMemo((): ViewStyle => {
     const sizeConfig = SIZE_CONFIG[size];
@@ -163,15 +189,15 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     <Animated.View style={hasScaleFeedback ? { transform: [{ scale: scaleAnim }] } : undefined}>
       <Pressable
         {...(resolvedClassName ? { className: resolvedClassName } as Record<string, string> : {})}
-        style={({ pressed }) => [
+        style={[
           baseStyles,
           disabled && !loading && { opacity: 0.5 },
           pressed && !hasScaleFeedback && !isInteractionBlocked && { opacity: resolvedActiveOpacity },
           style,
         ]}
         onPress={isInteractionBlocked ? undefined : onPress}
-        onPressIn={isInteractionBlocked ? undefined : onPressIn}
-        onPressOut={isInteractionBlocked ? undefined : onPressOut}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
         disabled={isInteractionBlocked}
         hitSlop={hitSlop ?? defaultHitSlop}
         accessibilityLabel={accessibilityLabel}

package/src/card/Card.tsx

@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
 import { View, Text, Pressable, Platform, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
 import { borderRadius, space } from '../styles/tokens';
 import type {
   CardProps,
@@ -22,6 +23,11 @@ const CardRootComponent: React.FC<CardProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  // Drive the press-opacity via state instead of Pressable's function-form
+  // `style`, which NativeWind v4's css-interop swallows (dropping the base
+  // container style: background, radius, border, shadow).
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
 
   const containerStyle = useMemo((): ViewStyle => {
     const base: ViewStyle = {
@@ -58,13 +64,15 @@ const CardRootComponent: React.FC<CardProps> = ({
   if (onPress) {
     return (
       <Pressable
-        style={({ pressed }) => [
+        style={[
           containerStyle,
-          pressed && { opacity: 0.85 },
+          pressed && !disabled && { opacity: 0.85 },
           disabled && { opacity: 0.5 },
           style,
         ]}
         onPress={onPress}
+        onPressIn={disabled ? undefined : onPressIn}
+        onPressOut={disabled ? undefined : onPressOut}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"

package/src/dialog/CenteredDialog.stories.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { CenteredDialog } from './CenteredDialog';
+
+const meta: Meta<typeof CenteredDialog> = {
+  title: 'Components/CenteredDialog',
+  component: CenteredDialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CenteredDialog>;
+
+function CompactDemo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>Open compact dialog</Button>
+      <CenteredDialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title="Delete project?"
+        footer={
+          <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 8 }}>
+            <Button variant="ghost" size="small" onPress={() => setVisible(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="small" onPress={() => setVisible(false)}>
+              Delete
+            </Button>
+          </View>
+        }
+      >
+        <Text>This action cannot be undone. The project and all its data will be permanently removed.</Text>
+      </CenteredDialog>
+    </>
+  );
+}
+
+function CozyDemo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>Open cozy dialog</Button>
+      <CenteredDialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title="Roomier layout"
+        compact={false}
+      >
+        <Text>compact={'{false}'} relaxes the padding and header/footer gaps for content-heavy dialogs.</Text>
+      </CenteredDialog>
+    </>
+  );
+}
+
+function ChromelessDemo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>Open chromeless dialog</Button>
+      <CenteredDialog visible={visible} onClose={() => setVisible(false)}>
+        <View style={{ gap: 12 }}>
+          <Text>No title, no close button — the card owns every pixel.</Text>
+          <Button variant="secondary" size="small" onPress={() => setVisible(false)}>
+            Done
+          </Button>
+        </View>
+      </CenteredDialog>
+    </>
+  );
+}
+
+function NonDismissibleDemo() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setVisible(true)}>Open blocking dialog</Button>
+      <CenteredDialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        title="Action required"
+        dismissible={false}
+        showClose={false}
+        footer={
+          <Button size="small" onPress={() => setVisible(false)}>
+            Acknowledge
+          </Button>
+        }
+      >
+        <Text>Backdrop tap and Escape are disabled — the user must choose an action.</Text>
+      </CenteredDialog>
+    </>
+  );
+}
+
+export const Compact: Story = {
+  render: () => <CompactDemo />,
+};
+
+export const Cozy: Story = {
+  render: () => <CozyDemo />,
+};
+
+export const Chromeless: Story = {
+  render: () => <ChromelessDemo />,
+};
+
+export const NonDismissible: Story = {
+  render: () => <NonDismissibleDemo />,
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <CompactDemo />
+      <CozyDemo />
+      <ChromelessDemo />
+      <NonDismissibleDemo />
+    </View>
+  ),
+};

package/src/dialog/CenteredDialog.tsx

@@ -0,0 +1,295 @@
+import React, { useMemo } from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import { useInteractionState } from '../hooks/useInteractionState';
+import { TimesLarge_Stroke2_Corner0_Rounded as CloseIcon } from '../icons/Times';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { CenteredDialogProps } from './centered-dialog-types';
+import {
+  CARD_RADIUS,
+  DEFAULT_MAX_WIDTH,
+  MAX_HEIGHT_FRACTION,
+  resolveSpacing,
+  VIEWPORT_GUTTER,
+} from './centered-dialog-tokens';
+
+const CLOSE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
+
+/** Stable testID for the dimmed backdrop. Overridden when a `testID` is set. */
+export const CENTERED_DIALOG_BACKDROP_TESTID = 'bloom-centered-dialog-backdrop';
+
+/**
+ * Native variant of `<CenteredDialog>`.
+ *
+ * A controlled, centered modal: a transparent RN `Modal` (fade animation,
+ * own native window) hosting a dimmed full-screen backdrop and a centered,
+ * rounded card styled entirely from Bloom theme tokens.
+ *
+ * The backdrop is a sibling `Pressable` rendered BEHIND the card (absolute
+ * filled), never a parent of it — so a tap on the card never bubbles to the
+ * backdrop's close handler and the card never ends up nested inside the
+ * backdrop's pressable on web.
+ *
+ * Dismissal: backdrop tap (when `dismissible`), the header close button, and
+ * the Android hardware back button (`onRequestClose`) all call `onClose`.
+ */
+export function CenteredDialog({
+  visible,
+  onClose,
+  title,
+  dismissible = true,
+  maxWidth = DEFAULT_MAX_WIDTH,
+  compact = true,
+  showClose,
+  children,
+  footer,
+  accessibilityLabel,
+  closeAccessibilityLabel = 'Close dialog',
+  backdropAccessibilityLabel = 'Dismiss dialog',
+  cardStyle,
+  contentStyle,
+  testID,
+}: CenteredDialogProps) {
+  const theme = useTheme();
+  const backdropPress = useInteractionState();
+
+  const spacing = useMemo(() => resolveSpacing(compact), [compact]);
+  const resolvedShowClose = showClose ?? Boolean(title);
+  const hasHeader = Boolean(title) || resolvedShowClose;
+
+  const handleBackdropPress = dismissible ? onClose : undefined;
+  // Android's hardware back must always be answerable; when the dialog is
+  // non-dismissible we still need a handler (RN requires one for transparent
+  // modals) — make it a no-op so back does nothing rather than crash.
+  const handleRequestClose = dismissible ? onClose : noop;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={handleRequestClose}
+    >
+      <View style={[styles.root, { padding: VIEWPORT_GUTTER }]}>
+        <Pressable
+          testID={testID ? `${testID}-backdrop` : CENTERED_DIALOG_BACKDROP_TESTID}
+          style={[
+            styles.backdrop,
+            { backgroundColor: theme.colors.overlay },
+            backdropPress.state && styles.backdropPressed,
+          ]}
+          onPress={handleBackdropPress}
+          onPressIn={backdropPress.onIn}
+          onPressOut={backdropPress.onOut}
+          disabled={!dismissible}
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+        />
+
+        {/* RN's `Modal` already isolates its contents in a separate
+            accessibility window, so an explicit `accessibilityViewIsModal`
+            on the card is redundant here (and would mark the sibling
+            backdrop inaccessible). The web fork uses `aria-modal` instead. */}
+        <View
+          testID={testID}
+          accessibilityLabel={accessibilityLabel ?? title}
+          style={[
+            styles.card,
+            {
+              maxWidth,
+              maxHeight: `${MAX_HEIGHT_FRACTION * 100}%`,
+              backgroundColor: theme.colors.card,
+              borderColor: theme.colors.border,
+              shadowColor: theme.colors.shadow,
+            },
+            cardStyle,
+          ]}
+        >
+          {hasHeader ? (
+            <DialogHeader
+              title={title}
+              showClose={resolvedShowClose}
+              padding={spacing.pad}
+              gap={spacing.headerGap}
+              closeAccessibilityLabel={closeAccessibilityLabel}
+              onClose={onClose}
+            />
+          ) : null}
+
+          <ScrollView
+            style={styles.bodyScroll}
+            contentContainerStyle={[
+              {
+                padding: spacing.pad,
+                paddingTop: hasHeader ? spacing.headerGap : spacing.pad,
+                gap: spacing.contentGap,
+              },
+              contentStyle,
+            ]}
+            showsVerticalScrollIndicator={false}
+            keyboardShouldPersistTaps="handled"
+          >
+            {children}
+          </ScrollView>
+
+          {footer ? (
+            <View
+              style={[
+                styles.footer,
+                {
+                  padding: spacing.pad,
+                  paddingTop: spacing.footerGap,
+                  borderTopColor: theme.colors.borderLight,
+                },
+              ]}
+            >
+              {footer}
+            </View>
+          ) : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function DialogHeader({
+  title,
+  showClose,
+  padding,
+  gap,
+  closeAccessibilityLabel,
+  onClose,
+}: {
+  title?: string;
+  showClose: boolean;
+  padding: number;
+  gap: number;
+  closeAccessibilityLabel: string;
+  onClose: () => void;
+}) {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.header,
+        { paddingHorizontal: padding, paddingTop: padding, gap },
+      ]}
+    >
+      {title ? (
+        <Text
+          accessibilityRole="header"
+          numberOfLines={2}
+          style={[styles.title, { color: theme.colors.text }]}
+        >
+          {title}
+        </Text>
+      ) : (
+        <View style={styles.titleSpacer} />
+      )}
+      {showClose ? (
+        <CloseButton
+          accessibilityLabel={closeAccessibilityLabel}
+          onPress={onClose}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+function CloseButton({
+  accessibilityLabel,
+  onPress,
+}: {
+  accessibilityLabel: string;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  const press = useInteractionState();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={press.onIn}
+      onPressOut={press.onOut}
+      hitSlop={CLOSE_HIT_SLOP}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        styles.closeButton,
+        { backgroundColor: theme.colors.contrast50 },
+        press.state && styles.closeButtonPressed,
+      ]}
+    >
+      <CloseIcon size="sm" fill={theme.colors.textSecondary} />
+    </Pressable>
+  );
+}
+
+function noop(): void {
+  /* non-dismissible: hardware back is intentionally inert */
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  // A subtle deepening on press confirms the tap-to-dismiss affordance.
+  backdropPressed: {
+    opacity: 0.92,
+  },
+  card: {
+    width: '100%',
+    borderRadius: CARD_RADIUS,
+    borderWidth: StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 12,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  title: {
+    flex: 1,
+    fontSize: 17,
+    fontWeight: '700',
+    lineHeight: 22,
+  },
+  titleSpacer: {
+    flex: 1,
+  },
+  closeButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonPressed: {
+    opacity: 0.7,
+  },
+  bodyScroll: {
+    flexGrow: 0,
+    flexShrink: 1,
+  },
+  footer: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+});