@oxyhq/bloom 0.4.0 → 0.5.1

package/src/bottom-sheet/BottomSheet.stories.tsx

@@ -0,0 +1,92 @@
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { BottomSheet, type BottomSheetRef } from './index';
+
+const meta: Meta<typeof BottomSheet> = {
+  title: 'Components/BottomSheet',
+  component: BottomSheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+function BasicSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open sheet</Button>
+      <BottomSheet ref={ref}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Bottom sheet</Text>
+          <Text>
+            Pan down to close, or tap the backdrop. This is the default sheet
+            (flush, rounded top corners only).
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+function DetachedSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open detached</Button>
+      <BottomSheet ref={ref} detached>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Detached</Text>
+          <Text>
+            Floating card with margins and rounded corners on all sides.
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+function NonScrollableSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open non-scrollable</Button>
+      <BottomSheet ref={ref} scrollable={false}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>
+            Non-scrollable
+          </Text>
+          <Text>
+            Use when the body owns its own VirtualizedList (FlatList,
+            SectionList, etc.).
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicSheet />,
+};
+
+export const Detached: Story = {
+  render: () => <DetachedSheet />,
+};
+
+export const NonScrollable: Story = {
+  render: () => <NonScrollableSheet />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <BasicSheet />
+      <DetachedSheet />
+      <NonScrollableSheet />
+    </View>
+  ),
+};

package/src/bottom-sheet/index.tsx

@@ -89,7 +89,7 @@ export interface BottomSheetProps {
     /**
      * Opacity of the dimming backdrop behind the sheet (0–1). Defaults to `0.5`.
      * Set to a higher value (e.g. `0.7`) when the sheet is presented over another
-     * bottom sheet (Dialog/Prompt cases) so the underlying handle/content does not
+     * bottom sheet (Dialog cases) so the underlying handle/content does not
      * bleed through.
      */
     backdropOpacity?: number;
@@ -300,8 +300,8 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
 
     // On unmount: ensure pending close callbacks (e.g. consumer's `onDismiss`)
     // still fire if the BS is yanked mid-animation by a parent re-render.
-    // Without this, `Dialog.Outer.handleDismiss` never runs and queued
-    // callbacks like `Prompt.Action`'s post-close handler are silently lost.
+    // Without this, `Dialog`'s `handleDismiss` never runs and queued
+    // callbacks (post-close handlers) are silently lost.
     // Only fires when the sheet was actually rendered (open or closing) to
     // avoid spuriously calling onDismiss on bare unmount of a never-opened
     // sheet. Refs are read inside the cleanup, so latest values are captured.

package/src/button/Button.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    onPress: () => {},
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'inverse', 'icon', 'ghost', 'text'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  args: { children: 'Save' },
+};
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Primary' },
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Secondary' },
+};
+
+export const Ghost: Story = {
+  args: { variant: 'ghost', children: 'Ghost' },
+};
+
+export const TextOnly: Story = {
+  args: { variant: 'text', children: 'Text button' },
+  name: 'Text',
+};
+
+export const Inverse: Story = {
+  args: { variant: 'inverse', children: 'Inverse' },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="inverse">Inverse</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="text">Text</Button>
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button size="small">Small</Button>
+      <Button size="medium">Medium</Button>
+      <Button size="large">Large</Button>
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: { loading: true, children: 'Submitting' },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, children: 'Disabled' },
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+    </View>
+  ),
+};

package/src/context-menu/ContextMenu.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useTheme } from '../theme/use-theme';
+import * as ContextMenu from './index';
+
+const meta: Meta = {
+  title: 'Components/ContextMenu',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function TriggerSurface() {
+  const theme = useTheme();
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger label="Long-press for actions">
+        {({ props }) => (
+          <Pressable
+            onPress={() => props.onPress?.()}
+            onLongPress={() => props.onLongPress?.()}
+            accessibilityLabel={props.accessibilityLabel}
+            accessibilityHint={props.accessibilityHint}
+            style={{
+              padding: 24,
+              borderRadius: 12,
+              backgroundColor: theme.colors.backgroundSecondary,
+              borderWidth: 1,
+              borderColor: theme.colors.borderLight,
+              minWidth: 240,
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ color: theme.colors.text }}>
+              Long-press / right-click me
+            </Text>
+          </Pressable>
+        )}
+      </ContextMenu.Trigger>
+      <ContextMenu.Outer>
+        <ContextMenu.Group>
+          <ContextMenu.Item label="Open" onPress={() => {}}>
+            <ContextMenu.ItemText>Open</ContextMenu.ItemText>
+          </ContextMenu.Item>
+          <ContextMenu.Item label="Rename" onPress={() => {}}>
+            <ContextMenu.ItemText>Rename</ContextMenu.ItemText>
+          </ContextMenu.Item>
+          <ContextMenu.Item label="Delete" onPress={() => {}}>
+            <ContextMenu.ItemText>Delete</ContextMenu.ItemText>
+          </ContextMenu.Item>
+        </ContextMenu.Group>
+      </ContextMenu.Outer>
+    </ContextMenu.Root>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <TriggerSurface />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <TriggerSurface />
+      <TriggerSurface />
+    </View>
+  ),
+};

package/src/context-menu/index.tsx

@@ -1,9 +1,10 @@
 /**
  * ContextMenu — Native implementation
  *
- * Opens a bottom-sheet menu via Bloom's Dialog when the user long-presses
- * the trigger.  The menu body is rendered through Bloom's Menu component
- * pattern using Dialog.Outer / Dialog.ScrollableInner.
+ * Opens a bottom-sheet menu when the user long-presses the trigger. The
+ * menu body uses bloom's internal `SheetShell` (a `BottomSheet`
+ * presentation primitive with the same drag-handle + close-on-tap
+ * semantics shared by `Menu` and `Select`).
  */
 import React, {
   createContext,
@@ -15,7 +16,9 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import * as Dialog from '../dialog';
+import { useDialogControl } from '../dialog/context';
+import { SheetShell } from '../dialog/SheetShell';
+import type { DialogControlProps } from '../dialog/types';
 import { useInteractionState } from '../hooks/useInteractionState';
 import { ItemCtx, useItemContext } from './context';
 import type {
@@ -34,7 +37,7 @@ import type {
 // ---------------------------------------------------------------------------
 
 type NativeContextMenuContextValue = ContextMenuContextValue & {
-  control: Dialog.DialogControlProps;
+  control: DialogControlProps;
 };
 
 const NativeContextMenuContext = createContext<NativeContextMenuContextValue | null>(null);
@@ -55,7 +58,7 @@ function useNativeContextMenuContext(): NativeContextMenuContextValue {
 // ---------------------------------------------------------------------------
 
 export function Root({ children }: { children: React.ReactNode }) {
-  const control = Dialog.useDialogControl();
+  const control = useDialogControl();
 
   const ctx = useMemo(
     () => ({
@@ -112,8 +115,7 @@ export function Outer({ children, style }: OuterProps) {
   const { control } = useNativeContextMenuContext();
 
   return (
-    <Dialog.Outer control={control} preventExpansion>
-      <Dialog.Handle />
+    <SheetShell control={control} label="Context menu">
       <NativeContextMenuContext.Provider
         value={{
           isOpen: true,
@@ -122,11 +124,9 @@ export function Outer({ children, style }: OuterProps) {
           control,
         }}
       >
-        <Dialog.ScrollableInner label="Context menu">
-          <View style={[styles.outerContent, style]}>{children}</View>
-        </Dialog.ScrollableInner>
+        <View style={[styles.outerContent, style]}>{children}</View>
       </NativeContextMenuContext.Provider>
-    </Dialog.Outer>
+    </SheetShell>
   );
 }
 

package/src/dialog/BloomDialogProvider.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+
+import { AutoMountedDialog } from './Dialog';
+import {
+  buttonToAction,
+  dismissAlert,
+  subscribeAlerts,
+  type AlertEntry,
+} from './alert-store';
+
+/**
+ * Mounts the imperative `alert()` host inside your app.
+ *
+ * Wrap your app root once (after `BloomThemeProvider`, so the dialog's
+ * colours come from the active theme) and you can call `alert()` from
+ * anywhere — including from code that runs before the provider mounts
+ * (alerts are queued and drained on subscribe).
+ *
+ * ```tsx
+ * import { BloomDialogProvider } from '@oxyhq/bloom';
+ *
+ * <BloomThemeProvider mode="system" colorPreset="oxy">
+ *   <BloomDialogProvider>
+ *     <App />
+ *   </BloomDialogProvider>
+ * </BloomThemeProvider>
+ * ```
+ *
+ * Alerts are presented one at a time. While one is on screen, subsequent
+ * `alert()` calls enqueue and present in FIFO order once their predecessor
+ * has finished closing.
+ */
+export function BloomDialogProvider({ children }: { children: React.ReactNode }) {
+  const [queue, setQueue] = useState<readonly AlertEntry[]>([]);
+
+  useEffect(() => subscribeAlerts(setQueue), []);
+
+  // Only the head of the queue is presented; this keeps the bottom-sheet
+  // exit/enter animations clean and matches the platform `Alert.alert`
+  // behaviour our consumers expect.
+  const head = queue[0];
+
+  return (
+    <>
+      {children}
+      {head ? <AlertHost key={head.id} entry={head} /> : null}
+    </>
+  );
+}
+
+function AlertHost({ entry }: { entry: AlertEntry }) {
+  const actions = entry.buttons.map(buttonToAction);
+  return (
+    <AutoMountedDialog
+      title={entry.title}
+      description={entry.message}
+      actions={actions}
+      onResolve={() => dismissAlert(entry.id)}
+    />
+  );
+}

package/src/dialog/BloomDialogProvider.web.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+
+import { AutoMountedDialog } from './Dialog.web';
+import {
+  buttonToAction,
+  dismissAlert,
+  subscribeAlerts,
+  type AlertEntry,
+} from './alert-store';
+
+/**
+ * Web variant of `BloomDialogProvider`. Identical surface area to the
+ * native version — it just uses the web-fork `Dialog` (`Dialog.web.tsx`)
+ * underneath instead of the bottom-sheet variant.
+ *
+ * See the native file (`./BloomDialogProvider.tsx`) for the full design
+ * notes; this fork exists purely so the bundler's `browser` condition can
+ * resolve to a `Dialog` that doesn't pull in the native gesture-handler /
+ * reanimated stack.
+ */
+export function BloomDialogProvider({ children }: { children: React.ReactNode }) {
+  const [queue, setQueue] = useState<readonly AlertEntry[]>([]);
+
+  useEffect(() => subscribeAlerts(setQueue), []);
+
+  const head = queue[0];
+
+  return (
+    <>
+      {children}
+      {head ? <AlertHost key={head.id} entry={head} /> : null}
+    </>
+  );
+}
+
+function AlertHost({ entry }: { entry: AlertEntry }) {
+  const actions = entry.buttons.map(buttonToAction);
+  return (
+    <AutoMountedDialog
+      title={entry.title}
+      description={entry.message}
+      actions={actions}
+      onResolve={() => dismissAlert(entry.id)}
+    />
+  );
+}

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { Dialog } from './Dialog';
+import { useDialogControl } from './context';
+import { alert } from './alert';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+function DeclarativeDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open dialog</Button>
+      <Dialog
+        control={control}
+        title="Sign out?"
+        description="You'll need to enter your password to sign in again."
+        actions={[
+          { label: 'Sign out', color: 'destructive' },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+function CustomChildrenDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open custom dialog</Button>
+      <Dialog control={control} title="Custom body">
+        <View style={{ gap: 12 }}>
+          <Text>Render any JSX inside the dialog body.</Text>
+          <Button variant="secondary" onPress={() => control.close()}>
+            Done
+          </Button>
+        </View>
+      </Dialog>
+    </>
+  );
+}
+
+function AlertDemo() {
+  return (
+    <Button
+      onPress={() =>
+        alert('Delete project?', 'This action cannot be undone.', [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'Delete', style: 'destructive' },
+        ])
+      }
+    >
+      Trigger alert()
+    </Button>
+  );
+}
+
+function ThreeActionDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Three actions</Button>
+      <Dialog
+        control={control}
+        title="Save changes?"
+        description="You have unsaved changes."
+        actions={[
+          { label: 'Save', color: 'default' },
+          { label: 'Discard', color: 'destructive' },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <DeclarativeDemo />,
+};
+
+export const CustomChildren: Story = {
+  render: () => <CustomChildrenDemo />,
+};
+
+export const AlertHelper: Story = {
+  render: () => <AlertDemo />,
+};
+
+export const ThreeAction: Story = {
+  render: () => <ThreeActionDemo />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <DeclarativeDemo />
+      <CustomChildrenDemo />
+      <AlertDemo />
+    </View>
+  ),
+};