@oxyhq/bloom 0.4.0 → 0.5.1

package/src/fonts/index.web.ts

@@ -1,10 +1,10 @@
 // Web variant of the `./fonts` barrel.
 //
 // The default barrel (`./index.ts`) re-exports `applyFontFaces` from
-// `./apply-font-faces`, which on native resolves to a no-op stub — Metro
-// cannot parse `.woff2` module-level imports. The web fork explicitly
-// reaches for `./apply-font-faces.web`, which performs the real `@font-face`
-// injection.
+// `./apply-font-faces`, which on native is a no-op stub. The web fork
+// explicitly reaches for `./apply-font-faces.web`, which performs the real
+// `@font-face` injection using inlined base64 data URLs (see
+// `font-data.web.ts`).
 //
 // Web bundlers select this file via the `"browser"` condition in
 // `package.json`'s `exports['./fonts']`; native bundlers fall through to

package/src/index.ts

@@ -18,8 +18,22 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 
 // Core components
 export * from './portal';
-export * as Dialog from './dialog';
-export * as Prompt from './prompt';
+export {
+  Dialog,
+  BloomDialogProvider,
+  alert,
+  useDialogContext,
+  useDialogControl,
+} from './dialog';
+export type {
+  AlertButton,
+  AlertButtonStyle,
+  DialogAction,
+  DialogActionColor,
+  DialogContextProps,
+  DialogControlProps,
+  DialogProps,
+} from './dialog';
 export * from './button';
 export * from './grouped-buttons';
 export * from './divider';
@@ -31,7 +45,7 @@ export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
 export * from './switch';
-export * as Toast from './toast';
+export { toast, type Toast } from './toast';
 
 // Typography
 export * as Typography from './typography';

package/src/index.web.ts

@@ -23,8 +23,22 @@ export { type Props as IconProps, sizes as iconSizes, useCommonSVGProps } from '
 
 // Core components
 export * from './portal/index.web';
-export * as Dialog from './dialog/index.web';
-export * as Prompt from './prompt';
+export {
+  Dialog,
+  BloomDialogProvider,
+  alert,
+  useDialogContext,
+  useDialogControl,
+} from './dialog/index.web';
+export type {
+  AlertButton,
+  AlertButtonStyle,
+  DialogAction,
+  DialogActionColor,
+  DialogContextProps,
+  DialogControlProps,
+  DialogProps,
+} from './dialog/index.web';
 export * from './button';
 export * from './grouped-buttons';
 export * from './divider';
@@ -36,7 +50,7 @@ export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';
 export * from './switch';
-export * as Toast from './toast/index.web';
+export { toast, type Toast } from './toast/index.web';
 
 // Typography
 export * as Typography from './typography';

package/src/loading/Loading.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Loading } from './Loading';
+
+const meta: Meta<typeof Loading> = {
+  title: 'Components/Loading',
+  component: Loading,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['spinner', 'top', 'skeleton', 'inline'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Loading>;
+
+export const Basic: Story = {
+  args: { variant: 'spinner' },
+};
+
+export const Spinner: Story = {
+  args: { variant: 'spinner', text: 'Loading…', showText: true },
+};
+
+export const Inline: Story = {
+  args: { variant: 'inline', text: 'Saving' },
+};
+
+export const Skeleton: Story = {
+  args: { variant: 'skeleton', lines: 4 },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
+      <Loading variant="spinner" size="small" />
+      <Loading variant="spinner" size="medium" />
+      <Loading variant="spinner" size="large" />
+    </View>
+  ),
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 24, alignItems: 'flex-start' }}>
+      <Loading variant="spinner" size="small" text="Small" />
+      <Loading variant="inline" text="Saving changes" />
+      <Loading variant="skeleton" lines={3} />
+    </View>
+  ),
+};

package/src/menu/Menu.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import * as Menu from './index';
+
+const meta: Meta = {
+  title: 'Components/Menu',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function BasicMenu() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger label="Open menu">
+        {({ props }) => (
+          <Button onPress={props.onPress}>Open menu</Button>
+        )}
+      </Menu.Trigger>
+      <Menu.Outer>
+        <Menu.Group>
+          <Menu.Item label="Profile" onPress={() => {}}>
+            <Menu.ItemText>Profile</Menu.ItemText>
+          </Menu.Item>
+          <Menu.Item label="Settings" onPress={() => {}}>
+            <Menu.ItemText>Settings</Menu.ItemText>
+          </Menu.Item>
+          <Menu.Item label="Sign out" onPress={() => {}}>
+            <Menu.ItemText>Sign out</Menu.ItemText>
+          </Menu.Item>
+        </Menu.Group>
+      </Menu.Outer>
+    </Menu.Root>
+  );
+}
+
+function MenuWithDisabledItem() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger label="Open menu with disabled item">
+        {({ props }) => <Button onPress={props.onPress}>Open</Button>}
+      </Menu.Trigger>
+      <Menu.Outer>
+        <Menu.Group>
+          <Menu.Item label="Edit" onPress={() => {}}>
+            <Menu.ItemText>Edit</Menu.ItemText>
+          </Menu.Item>
+          <Menu.Item label="Duplicate" onPress={() => {}} disabled>
+            <Menu.ItemText>Duplicate (disabled)</Menu.ItemText>
+          </Menu.Item>
+          <Menu.Item label="Delete" onPress={() => {}}>
+            <Menu.ItemText>Delete</Menu.ItemText>
+          </Menu.Item>
+        </Menu.Group>
+      </Menu.Outer>
+    </Menu.Root>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicMenu />,
+};
+
+export const WithDisabled: Story = {
+  render: () => <MenuWithDisabledItem />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <BasicMenu />
+      <MenuWithDisabledItem />
+    </View>
+  ),
+};

package/src/menu/index.tsx

@@ -4,7 +4,9 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Button } from '../button';
-import * as Dialog from '../dialog';
+import { useDialogControl } from '../dialog/context';
+import { SheetShell } from '../dialog/SheetShell';
+import type { DialogControlProps } from '../dialog/types';
 import {
   MenuContext,
   ItemContext,
@@ -20,17 +22,17 @@ import type {
   TriggerProps,
 } from './types';
 
-export type { DialogControlProps as MenuControlProps } from '../dialog';
-export { useDialogControl as useMenuControl } from '../dialog';
+export type { DialogControlProps as MenuControlProps } from '../dialog/types';
+export { useDialogControl as useMenuControl } from '../dialog/context';
 export { useMenuContext };
 
 export function Root({
   children,
   control,
 }: React.PropsWithChildren<{
-  control?: Dialog.DialogControlProps;
+  control?: DialogControlProps;
 }>) {
-  const defaultControl = Dialog.useDialogControl();
+  const defaultControl = useDialogControl();
   const context = useMemo<MenuContextType>(
     () => ({
       control: control ?? defaultControl,
@@ -83,20 +85,14 @@ export function Outer({
   const context = useMenuContext();
 
   return (
-    <Dialog.Outer
-      control={context.control}
-      preventExpansion
-    >
-      <Dialog.Handle />
+    <SheetShell control={context.control} label="Menu">
       <MenuContext.Provider value={context}>
-        <Dialog.ScrollableInner label="Menu">
-          <View style={styles.outerContent}>
-            {children}
-            {showCancel && <Cancel />}
-          </View>
-        </Dialog.ScrollableInner>
+        <View style={styles.outerContent}>
+          {children}
+          {showCancel && <Cancel />}
+        </View>
       </MenuContext.Provider>
-    </Dialog.Outer>
+    </SheetShell>
   );
 }
 

package/src/prompt-input/PromptInput.stories.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PromptInput } from './PromptInput';
+
+const meta: Meta<typeof PromptInput> = {
+  title: 'Components/PromptInput',
+  component: PromptInput,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PromptInput>;
+
+function BasicPrompt() {
+  const [value, setValue] = useState('');
+  return (
+    <View style={{ width: 480 }}>
+      <PromptInput
+        value={value}
+        onValueChange={setValue}
+        placeholder="Ask anything"
+        onSubmit={() => {
+          // submitted
+          setValue('');
+        }}
+      />
+    </View>
+  );
+}
+
+function LoadingPrompt() {
+  const [value, setValue] = useState('Generating response...');
+  return (
+    <View style={{ width: 480 }}>
+      <PromptInput
+        value={value}
+        onValueChange={setValue}
+        placeholder="Ask anything"
+        isLoading
+        onSubmit={() => {}}
+        onStop={() => {}}
+      />
+    </View>
+  );
+}
+
+function DisabledPrompt() {
+  return (
+    <View style={{ width: 480 }}>
+      <PromptInput
+        value=""
+        placeholder="Disabled"
+        disabled
+        onSubmit={() => {}}
+      />
+    </View>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicPrompt />,
+};
+
+export const Loading: Story = {
+  render: () => <LoadingPrompt />,
+};
+
+export const Disabled: Story = {
+  render: () => <DisabledPrompt />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <BasicPrompt />
+      <LoadingPrompt />
+      <DisabledPrompt />
+    </View>
+  ),
+};

package/src/select/Select.stories.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as Select from './index';
+
+const meta: Meta = {
+  title: 'Components/Select',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+type Option = { value: string; label: string };
+
+const FRUITS: Option[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'durian', label: 'Durian' },
+  { value: 'elderberry', label: 'Elderberry' },
+];
+
+function BasicSelect() {
+  const [value, setValue] = useState<string>('apple');
+  return (
+    <Select.Root value={value} onValueChange={setValue}>
+      <Select.Trigger label="Pick a fruit">
+        <Select.ValueText placeholder="Pick a fruit" />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Content
+        label="Pick a fruit"
+        items={FRUITS}
+        renderItem={(item) => (
+          <Select.Item value={item.value} label={item.label}>
+            <Select.ItemIndicator />
+            <Select.ItemText>{item.label}</Select.ItemText>
+          </Select.Item>
+        )}
+      />
+    </Select.Root>
+  );
+}
+
+function UncontrolledSelect() {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  return (
+    <Select.Root value={value} onValueChange={setValue}>
+      <Select.Trigger label="Pick a fruit">
+        <Select.ValueText placeholder="No fruit selected" />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Content
+        label="Pick a fruit"
+        items={FRUITS}
+        renderItem={(item) => (
+          <Select.Item value={item.value} label={item.label}>
+            <Select.ItemIndicator />
+            <Select.ItemText>{item.label}</Select.ItemText>
+          </Select.Item>
+        )}
+      />
+    </Select.Root>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicSelect />,
+};
+
+export const WithPlaceholder: Story = {
+  render: () => <UncontrolledSelect />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <BasicSelect />
+      <UncontrolledSelect />
+    </View>
+  ),
+};

package/src/select/index.tsx

@@ -11,7 +11,9 @@ import { FlatList, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Button } from '../button';
-import * as Dialog from '../dialog';
+import { useDialogContext, useDialogControl } from '../dialog/context';
+import { SheetShell } from '../dialog/SheetShell';
+import type { DialogControlProps } from '../dialog/types';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
 import {
@@ -37,7 +39,7 @@ export { useItemContext };
 // ---------------------------------------------------------------------------
 
 type SelectContextValue = {
-  control: Dialog.DialogControlProps;
+  control: DialogControlProps;
 } & Pick<RootProps, 'value' | 'onValueChange' | 'disabled'>;
 
 const SelectContext = createContext<SelectContextValue | null>(null);
@@ -61,7 +63,7 @@ function useSelectContext(): SelectContextValue {
 // ---------------------------------------------------------------------------
 
 export function Root({ children, value, onValueChange, disabled }: RootProps) {
-  const control = Dialog.useDialogControl();
+  const control = useDialogControl();
   const valueStoreState = useState<unknown>(undefined);
 
   const ctx = useMemo<SelectContextValue>(
@@ -187,23 +189,21 @@ export function Content<T>({
   }, [items, context.value, valueExtractor, setStoredValue]);
 
   return (
-    <Dialog.Outer control={control}>
-      <ContentInner
-        control={control}
-        items={items}
-        valueExtractor={valueExtractor}
-        {...props}
-        value={context.value}
-        onValueChange={context.onValueChange}
-        disabled={context.disabled}
-      />
-    </Dialog.Outer>
+    <ContentInner
+      control={control}
+      items={items}
+      valueExtractor={valueExtractor}
+      {...props}
+      value={context.value}
+      onValueChange={context.onValueChange}
+      disabled={context.disabled}
+    />
   );
 }
 
 type ContentInnerProps<T> = ContentProps<T> &
   Pick<RootProps, 'value' | 'onValueChange' | 'disabled'> & {
-    control: Dialog.DialogControlProps;
+    control: DialogControlProps;
   };
 
 function ContentInner<T>({
@@ -234,26 +234,26 @@ function ContentInner<T>({
   );
 
   return (
-    <SelectContext.Provider value={ctx}>
-      <Dialog.Handle />
-      <Dialog.Inner
-        label={label}
-        header={
-          <View style={styles.contentHeader}>
-            <Text style={[styles.contentHeaderText, { color: theme.colors.text }]}>
-              {label}
-            </Text>
-          </View>
-        }
-      >
+    <SheetShell
+      control={control}
+      label={label}
+      header={
+        <View style={styles.contentHeader}>
+          <Text style={[styles.contentHeaderText, { color: theme.colors.text }]}>
+            {label}
+          </Text>
+        </View>
+      }
+    >
+      <SelectContext.Provider value={ctx}>
         <FlatList
           data={items}
           renderItem={render}
           keyExtractor={valueExtractor}
           style={styles.flatList}
         />
-      </Dialog.Inner>
-    </SelectContext.Provider>
+      </SelectContext.Provider>
+    </SheetShell>
   );
 }
 
@@ -267,7 +267,7 @@ function ContentInner<T>({
 
 export function Item({ children, value, label, style }: ItemProps) {
   const theme = useTheme();
-  const { close } = Dialog.useDialogContext();
+  const { close } = useDialogContext();
   const { value: selectedValue, onValueChange } = useSelectContext();
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
   const {

package/src/settings-list/SettingsList.stories.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Switch } from '../switch';
+import {
+  SettingsListGroup,
+  SettingsListItem,
+  SettingsListDivider,
+} from './SettingsList';
+
+const meta: Meta = {
+  title: 'Components/SettingsList',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function BasicList() {
+  return (
+    <View style={{ width: 360 }}>
+      <SettingsListGroup title="Account">
+        <SettingsListItem
+          title="Profile"
+          description="Manage your account profile"
+          onPress={() => {}}
+        />
+        <SettingsListItem
+          title="Email"
+          value="nate@oxy.so"
+          onPress={() => {}}
+        />
+        <SettingsListItem
+          title="Sign out"
+          destructive
+          onPress={() => {}}
+        />
+      </SettingsListGroup>
+    </View>
+  );
+}
+
+function WithToggles() {
+  const [notifs, setNotifs] = useState(true);
+  const [dark, setDark] = useState(false);
+  return (
+    <View style={{ width: 360 }}>
+      <SettingsListGroup title="Preferences" footer="Changes apply immediately.">
+        <SettingsListItem
+          title="Push notifications"
+          rightElement={
+            <Switch value={notifs} onValueChange={setNotifs} />
+          }
+          showChevron={false}
+        />
+        <SettingsListItem
+          title="Dark mode"
+          rightElement={<Switch value={dark} onValueChange={setDark} />}
+          showChevron={false}
+        />
+      </SettingsListGroup>
+    </View>
+  );
+}
+
+function DescriptionList() {
+  return (
+    <View style={{ width: 360 }}>
+      <SettingsListGroup title="Security">
+        <SettingsListItem
+          title="Two-factor authentication"
+          description="Add an extra layer of security to your account."
+          onPress={() => {}}
+        />
+        <SettingsListItem
+          title="Active sessions"
+          description="View where your account is signed in."
+          onPress={() => {}}
+        />
+      </SettingsListGroup>
+    </View>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicList />,
+};
+
+export const WithRightElements: Story = {
+  render: () => <WithToggles />,
+};
+
+export const WithDescriptions: Story = {
+  render: () => <DescriptionList />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 24, width: 360 }}>
+      <DescriptionList />
+      <SettingsListDivider />
+      <WithToggles />
+    </View>
+  ),
+};