@oxyhq/bloom 0.5.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/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/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>
+  ),
+};

package/src/toast/Toast.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { toast, ToastOutlet } from './index';
+
+const meta: Meta = {
+  title: 'Components/Toast',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function ToastDemo({
+  variant,
+  message,
+}: {
+  variant: 'default' | 'success' | 'error' | 'warning' | 'info';
+  message: string;
+}) {
+  const fire = () => {
+    switch (variant) {
+      case 'success':
+        toast.success(message);
+        return;
+      case 'error':
+        toast.error(message);
+        return;
+      case 'warning':
+        toast.warning(message);
+        return;
+      case 'info':
+        toast.info(message);
+        return;
+      case 'default':
+      default:
+        toast(message);
+    }
+  };
+
+  return (
+    <Button onPress={fire}>{`Show ${variant}`}</Button>
+  );
+}
+
+function Outlet() {
+  return <ToastOutlet />;
+}
+
+export const Basic: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <ToastDemo variant="default" message="Saved" />
+      <Outlet />
+    </View>
+  ),
+};
+
+export const Success: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <ToastDemo variant="success" message="Profile updated" />
+      <Outlet />
+    </View>
+  ),
+};
+
+export const ErrorToast: Story = {
+  name: 'Error',
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <ToastDemo variant="error" message="Network error" />
+      <Outlet />
+    </View>
+  ),
+};
+
+export const Warning: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <ToastDemo variant="warning" message="Storage almost full" />
+      <Outlet />
+    </View>
+  ),
+};
+
+export const Info: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <ToastDemo variant="info" message="New version available" />
+      <Outlet />
+    </View>
+  ),
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <ToastDemo variant="default" message="Default" />
+      <ToastDemo variant="success" message="Success" />
+      <ToastDemo variant="error" message="Error" />
+      <ToastDemo variant="warning" message="Warning" />
+      <ToastDemo variant="info" message="Info" />
+      <Outlet />
+    </View>
+  ),
+};

package/lib/typescript/commonjs/__tests__/BloomThemeProvider.fonts-web.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-export {};
-//# sourceMappingURL=BloomThemeProvider.fonts-web.test.d.ts.map

package/lib/typescript/commonjs/__tests__/BloomThemeProvider.fonts-web.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BloomThemeProvider.fonts-web.test.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/BloomThemeProvider.fonts-web.test.tsx"],"names":[],"mappings":"AAAA;;GAEG"}

package/lib/typescript/commonjs/__tests__/BloomThemeProvider.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=BloomThemeProvider.test.d.ts.map

package/lib/typescript/commonjs/__tests__/BloomThemeProvider.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BloomThemeProvider.test.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/BloomThemeProvider.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/commonjs/__tests__/BottomSheet.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=BottomSheet.test.d.ts.map

package/lib/typescript/commonjs/__tests__/BottomSheet.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BottomSheet.test.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/BottomSheet.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/commonjs/__tests__/Button.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Button.test.d.ts.map

package/lib/typescript/commonjs/__tests__/Button.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/Button.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/commonjs/__tests__/Code.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Code.test.d.ts.map

package/lib/typescript/commonjs/__tests__/Code.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Code.test.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/Code.test.tsx"],"names":[],"mappings":""}