@oxyhq/bloom 0.5.0 → 0.6.0

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

@@ -40,7 +40,11 @@ export * from './divider';
 export * from './radio-indicator';
 export * from './collapsible';
 export { ErrorBoundary } from './error-boundary';
-export type { ErrorBoundaryProps } from './error-boundary';
+export type {
+  ErrorBoundaryProps,
+  ErrorBoundaryFallback,
+  ErrorBoundaryFallbackContext,
+} from './error-boundary';
 export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';

package/src/index.web.ts

@@ -45,7 +45,11 @@ export * from './divider';
 export * from './radio-indicator';
 export * from './collapsible';
 export { ErrorBoundary } from './error-boundary';
-export type { ErrorBoundaryProps } from './error-boundary';
+export type {
+  ErrorBoundaryProps,
+  ErrorBoundaryFallback,
+  ErrorBoundaryFallbackContext,
+} from './error-boundary';
 export * from './avatar';
 export * from './loading';
 export * as PromptInput from './prompt-input';

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

package/src/skeleton/index.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
+import {
+  Animated,
+  View,
+  type ViewStyle,
+  type TextStyle,
+  type DimensionValue,
+  StyleSheet,
+} from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { SUPPORTS_NATIVE_DRIVER } from '../styles/native-driver';
@@ -129,6 +136,52 @@ export function Pill({
 }
 Pill.displayName = 'Skeleton.Pill';
 
+/**
+ * Generic rectangular shimmering placeholder. Use for image/card/banner
+ * placeholders where neither {@link Pill} (forced borderRadius: 999) nor
+ * {@link Circle} fit. Defaults to a small borderRadius (8). Pass `0` for
+ * sharp corners or any larger number / percentage string for custom shapes.
+ */
+export function Box({
+  width,
+  height,
+  borderRadius = 8,
+  blend,
+  style,
+}: {
+  /** Width as a number, percentage string, or any valid RN dimension. */
+  width?: DimensionValue;
+  /** Height as a number, percentage string, or any valid RN dimension. */
+  height?: DimensionValue;
+  /**
+   * Corner radius — number or percentage string. Defaults to 8. Pass 0 for
+   * sharp corners.
+   */
+  borderRadius?: ViewStyle['borderRadius'];
+  /** When true, dampens shimmer opacity (use for nested skeletons). */
+  blend?: boolean;
+  style?: ViewStyle | ViewStyle[];
+}) {
+  const { colors } = useTheme();
+  const shimmer = useShimmer();
+
+  return (
+    <Animated.View
+      style={[
+        {
+          backgroundColor: colors.contrast50,
+          width,
+          height,
+          borderRadius,
+          opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
+        },
+        style,
+      ]}
+    />
+  );
+}
+Box.displayName = 'Skeleton.Box';
+
 export function Col({
   children,
   style,

package/src/text-field/TextField.stories.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as TextField from './index';
+
+const meta: Meta = {
+  title: 'Components/TextField',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function ControlledField({
+  label,
+  placeholder,
+  initial = '',
+  isInvalid,
+  editable = true,
+}: {
+  label: string;
+  placeholder?: string;
+  initial?: string;
+  isInvalid?: boolean;
+  editable?: boolean;
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <View style={{ width: 320 }}>
+      <TextField.LabelText>{label}</TextField.LabelText>
+      <TextField.Root isInvalid={isInvalid}>
+        <TextField.Input
+          label={label}
+          placeholder={placeholder}
+          value={value}
+          onChangeText={setValue}
+          editable={editable}
+          isInvalid={isInvalid}
+        />
+      </TextField.Root>
+    </View>
+  );
+}
+
+export const Basic: Story = {
+  render: () => (
+    <ControlledField label="Username" placeholder="oxylander" />
+  ),
+};
+
+export const WithValue: Story = {
+  render: () => (
+    <ControlledField label="Email" initial="nate@oxy.so" />
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <ControlledField
+      label="Email"
+      initial="not-an-email"
+      isInvalid
+    />
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <ControlledField
+      label="Username"
+      initial="oxylander"
+      editable={false}
+    />
+  ),
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <ControlledField label="First name" placeholder="Ada" />
+      <ControlledField label="Last name" placeholder="Lovelace" />
+      <ControlledField
+        label="Email"
+        initial="invalid-email"
+        isInvalid
+      />
+    </View>
+  ),
+};