@oxyhq/bloom 0.16.2 → 0.18.0

package/src/input-group/InputGroup.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { InputGroup } from './InputGroup';
-import * as TextField from '../text-field';
+import { TextFieldInput } from '../text-field';
 import { Button } from '../button';
 import { Kbd } from '../kbd';
 
@@ -22,7 +22,7 @@ export const TextAddons: Story = {
       <View style={{ width: 360 }}>
         <InputGroup>
           <InputGroup.Addon>https://</InputGroup.Addon>
-          <TextField.Input label="Domain" value={v} onChangeText={setV} placeholder="oxy" />
+          <TextFieldInput label="Domain" value={v} onChangeText={setV} placeholder="oxy" />
           <InputGroup.Addon>.so</InputGroup.Addon>
         </InputGroup>
       </View>
@@ -36,7 +36,7 @@ export const ButtonAddon: Story = {
     return (
       <View style={{ width: 360 }}>
         <InputGroup>
-          <TextField.Input label="Invite" value={v} onChangeText={setV} placeholder="email" />
+          <TextFieldInput label="Invite" value={v} onChangeText={setV} placeholder="email" />
           <InputGroup.Addon divider noPadding>
             <Button variant="ghost" size="small" onPress={() => {}}>
               Send
@@ -54,7 +54,7 @@ export const ShortcutHint: Story = {
     return (
       <View style={{ width: 360 }}>
         <InputGroup>
-          <TextField.Input label="Search" value={v} onChangeText={setV} placeholder="Search…" />
+          <TextFieldInput label="Search" value={v} onChangeText={setV} placeholder="Search…" />
           <InputGroup.Addon>
             <Kbd size="sm">⌘K</Kbd>
           </InputGroup.Addon>

package/src/input-group/InputGroup.tsx

@@ -79,7 +79,7 @@ Addon.displayName = 'InputGroup.Addon';
  * ```tsx
  * <InputGroup>
  *   <InputGroup.Addon>https://</InputGroup.Addon>
- *   <TextField.Input label="Domain" value={v} onChangeText={setV} />
+ *   <TextFieldInput label="Domain" value={v} onChangeText={setV} />
  *   <InputGroup.Addon divider>
  *     <Button size="small" variant="ghost" onPress={go}>Go</Button>
  *   </InputGroup.Addon>

package/src/input-group/types.ts

@@ -21,7 +21,7 @@ export interface InputGroupAddonProps {
 export interface InputGroupProps {
   /**
    * Group children. Place `InputGroup.Addon` elements before/after the input
-   * (a Bloom `TextField.Input`, a `SearchInput`, or any control). The middle
+   * (a Bloom `TextFieldInput`, a `SearchInput`, or any control). The middle
    * child stretches to fill.
    */
   children: React.ReactNode;

package/src/menu/Menu.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../button';
-import * as Menu from './index';
+import { Menu, MenuContent, MenuGroup, MenuItem, MenuItemText, MenuTrigger } from './index';
 
 const meta: Meta = {
   title: 'Components/Menu',
@@ -15,49 +15,49 @@ type Story = StoryObj;
 
 function BasicMenu() {
   return (
-    <Menu.Root>
-      <Menu.Trigger label="Open menu">
+    <Menu>
+      <MenuTrigger 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>
+      </MenuTrigger>
+      <MenuContent>
+        <MenuGroup>
+          <MenuItem label="Profile" onPress={() => {}}>
+            <MenuItemText>Profile</MenuItemText>
+          </MenuItem>
+          <MenuItem label="Settings" onPress={() => {}}>
+            <MenuItemText>Settings</MenuItemText>
+          </MenuItem>
+          <MenuItem label="Sign out" onPress={() => {}}>
+            <MenuItemText>Sign out</MenuItemText>
+          </MenuItem>
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
   );
 }
 
 function MenuWithDisabledItem() {
   return (
-    <Menu.Root>
-      <Menu.Trigger label="Open menu with disabled item">
+    <Menu>
+      <MenuTrigger 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>
+      </MenuTrigger>
+      <MenuContent>
+        <MenuGroup>
+          <MenuItem label="Edit" onPress={() => {}}>
+            <MenuItemText>Edit</MenuItemText>
+          </MenuItem>
+          <MenuItem label="Duplicate" onPress={() => {}} disabled>
+            <MenuItemText>Duplicate (disabled)</MenuItemText>
+          </MenuItem>
+          <MenuItem label="Delete" onPress={() => {}}>
+            <MenuItemText>Delete</MenuItemText>
+          </MenuItem>
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
   );
 }
 

package/src/menu/context.ts

@@ -11,7 +11,7 @@ ItemContext.displayName = 'BloomMenuItemContext';
 export function useMenuContext(): MenuContextType {
   const context = useContext(MenuContext);
   if (!context) {
-    throw new Error('useMenuContext must be used within a Menu.Root');
+    throw new Error('useMenuContext must be used within a Menu component');
   }
   return context;
 }
@@ -19,7 +19,7 @@ export function useMenuContext(): MenuContextType {
 export function useMenuItemContext(): ItemContextType {
   const context = useContext(ItemContext);
   if (!context) {
-    throw new Error('useMenuItemContext must be used within a Menu.Item');
+    throw new Error('useMenuItemContext must be used within a MenuItem component');
   }
   return context;
 }

package/src/menu/index.tsx

@@ -15,18 +15,18 @@ import {
 } from './context';
 import type {
   MenuContextType,
-  GroupProps,
-  ItemIconProps,
-  ItemProps,
-  ItemTextProps,
-  TriggerProps,
+  MenuGroupProps,
+  MenuItemIconProps,
+  MenuItemProps,
+  MenuItemTextProps,
+  MenuTriggerProps,
 } from './types';
 
 export type { DialogControlProps as MenuControlProps } from '../dialog/types';
 export { useDialogControl as useMenuControl } from '../dialog/context';
 export { useMenuContext };
 
-export function Root({
+export function Menu({
   children,
   control,
 }: React.PropsWithChildren<{
@@ -47,12 +47,12 @@ export function Root({
   );
 }
 
-export function Trigger({
+export function MenuTrigger({
   children,
   label,
   role = 'button',
   hint,
-}: TriggerProps) {
+}: MenuTriggerProps) {
   const context = useMenuContext();
   const [focused, setFocused] = useState(false);
   const [pressed, setPressed] = useState(false);
@@ -75,7 +75,7 @@ export function Trigger({
   });
 }
 
-export function Outer({
+export function MenuContent({
   children,
   showCancel,
 }: React.PropsWithChildren<{
@@ -96,7 +96,7 @@ export function Outer({
   );
 }
 
-export function Item({ children, label, style, onPress, ...rest }: ItemProps) {
+export function MenuItem({ children, label, style, onPress, ...rest }: MenuItemProps) {
   const theme = useTheme();
   const context = useMenuContext();
   const [focused, setFocused] = useState(false);
@@ -148,7 +148,7 @@ export function Item({ children, label, style, onPress, ...rest }: ItemProps) {
   );
 }
 
-export function ItemText({ children, style }: ItemTextProps) {
+export function MenuItemText({ children, style }: MenuItemTextProps) {
   const theme = useTheme();
   const { disabled } = useMenuItemContext();
 
@@ -167,7 +167,7 @@ export function ItemText({ children, style }: ItemTextProps) {
   );
 }
 
-export function ItemIcon({ icon: Comp, fill }: ItemIconProps) {
+export function MenuItemIcon({ icon: Comp, fill }: MenuItemIconProps) {
   const theme = useTheme();
   const { disabled } = useMenuItemContext();
 
@@ -185,7 +185,7 @@ export function ItemIcon({ icon: Comp, fill }: ItemIconProps) {
   );
 }
 
-export function Group({ children, style }: GroupProps) {
+export function MenuGroup({ children, style }: MenuGroupProps) {
   const theme = useTheme();
 
   const childArray = React.Children.toArray(children).filter(isValidElement);
@@ -199,7 +199,7 @@ export function Group({ children, style }: GroupProps) {
       ]}
     >
       {childArray.map((child, i) => {
-        if (child.type === Item) {
+        if (child.type === MenuItem) {
           return (
             <Fragment key={i}>
               {i > 0 && (
@@ -225,7 +225,7 @@ export function Group({ children, style }: GroupProps) {
   );
 }
 
-export function Divider() {
+export function MenuDivider() {
   return null;
 }
 

package/src/menu/index.web.tsx

@@ -25,11 +25,11 @@ import {
 } from './context';
 import type {
   MenuContextType,
-  GroupProps,
-  ItemIconProps,
-  ItemProps,
-  ItemTextProps,
-  TriggerProps,
+  MenuGroupProps,
+  MenuItemIconProps,
+  MenuItemProps,
+  MenuItemTextProps,
+  MenuTriggerProps,
 } from './types';
 
 export { useMenuContext };
@@ -92,7 +92,7 @@ function useMenuControlAsDialogControl(
   }, [menuControl]);
 }
 
-export function Root({
+export function Menu({
   children,
   control,
 }: React.PropsWithChildren<{
@@ -157,12 +157,12 @@ export function Root({
   );
 }
 
-export function Trigger({
+export function MenuTrigger({
   children,
   label,
   role = 'button',
   hint,
-}: TriggerProps) {
+}: MenuTriggerProps) {
   const { control, triggerRef } = useMenuContext();
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -186,7 +186,7 @@ export function Trigger({
   });
 }
 
-export function Outer({
+export function MenuContent({
   children,
   style,
 }: React.PropsWithChildren<{
@@ -268,7 +268,7 @@ export function Outer({
   );
 }
 
-export function Item({ children, label, onPress, style, ...rest }: ItemProps) {
+export function MenuItem({ children, label, onPress, style, ...rest }: MenuItemProps) {
   const theme = useTheme();
   const { control } = useMenuContext();
   const [hovered, setHovered] = useState(false);
@@ -321,7 +321,7 @@ export function Item({ children, label, onPress, style, ...rest }: ItemProps) {
   );
 }
 
-export function ItemText({ children, style }: ItemTextProps) {
+export function MenuItemText({ children, style }: MenuItemTextProps) {
   const theme = useTheme();
   const { disabled } = useMenuItemContext();
 
@@ -338,7 +338,7 @@ export function ItemText({ children, style }: ItemTextProps) {
   );
 }
 
-export function ItemIcon({ icon: Comp, position = 'left', fill }: ItemIconProps) {
+export function MenuItemIcon({ icon: Comp, position = 'left', fill }: MenuItemIconProps) {
   const theme = useTheme();
   const { disabled } = useMenuItemContext();
 
@@ -363,11 +363,11 @@ export function ItemIcon({ icon: Comp, position = 'left', fill }: ItemIconProps)
   );
 }
 
-export function Group({ children }: GroupProps) {
+export function MenuGroup({ children }: MenuGroupProps) {
   return <>{children}</>;
 }
 
-export function Divider() {
+export function MenuDivider() {
   const theme = useTheme();
 
   return (

package/src/menu/types.ts

@@ -48,14 +48,14 @@ export type TriggerChildProps = {
   };
 };
 
-export type TriggerProps = {
+export type MenuTriggerProps = {
   children: (props: TriggerChildProps) => React.ReactNode;
   label: string;
   hint?: string;
   role?: AccessibilityRole;
 };
 
-export type ItemProps = React.PropsWithChildren<
+export type MenuItemProps = React.PropsWithChildren<
   Omit<PressableProps, 'style'> & {
     label: string;
     onPress: (e: GestureResponderEvent) => void;
@@ -63,16 +63,16 @@ export type ItemProps = React.PropsWithChildren<
   }
 >;
 
-export type ItemTextProps = React.PropsWithChildren<{
+export type MenuItemTextProps = React.PropsWithChildren<{
   style?: TextStyle;
 }>;
 
-export type ItemIconProps = {
+export type MenuItemIconProps = {
   icon: React.ComponentType<SVGIconProps>;
   position?: 'left' | 'right';
   fill?: (props: { disabled: boolean }) => string;
 };
 
-export type GroupProps = React.PropsWithChildren<{
+export type MenuGroupProps = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
 }>;

package/src/popover/Popover.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import * as Popover from './index';
+import { Popover, PopoverTrigger, PopoverContent } from './index';
 import { Button } from '../button';
 import { Item } from '../item';
 import { Text } from '../typography';
@@ -18,22 +18,22 @@ type Story = StoryObj;
 export const Basic: Story = {
   render: () => (
     <View style={{ padding: 80 }}>
-      <Popover.Root>
-        <Popover.Trigger label="Open popover">
+      <Popover>
+        <PopoverTrigger label="Open popover">
           {({ props }) => (
             <Button {...props} onPress={props.onPress}>
               Open popover
             </Button>
           )}
-        </Popover.Trigger>
-        <Popover.Content label="Account actions" placement="bottom-start">
+        </PopoverTrigger>
+        <PopoverContent label="Account actions" placement="bottom-start">
           <View style={{ minWidth: 200 }}>
             <Item title="Edit profile" density="compact" onPress={() => {}} />
             <Item title="Settings" density="compact" onPress={() => {}} />
             <Item title="Sign out" density="compact" destructive onPress={() => {}} />
           </View>
-        </Popover.Content>
-      </Popover.Root>
+        </PopoverContent>
+      </Popover>
     </View>
   ),
 };
@@ -41,21 +41,21 @@ export const Basic: Story = {
 export const RichContent: Story = {
   render: () => (
     <View style={{ padding: 80 }}>
-      <Popover.Root>
-        <Popover.Trigger label="Details">
+      <Popover>
+        <PopoverTrigger label="Details">
           {({ props }) => (
             <Button {...props} variant="secondary" onPress={props.onPress}>
               Details
             </Button>
           )}
-        </Popover.Trigger>
-        <Popover.Content label="Details" placement="bottom" maxWidth={280}>
+        </PopoverTrigger>
+        <PopoverContent label="Details" placement="bottom" maxWidth={280}>
           <View style={{ padding: 12, gap: 6 }}>
             <Text style={{ fontWeight: '600' }}>Storage</Text>
             <Text>4.2 GB of 10 GB used.</Text>
           </View>
-        </Popover.Content>
-      </Popover.Root>
+        </PopoverContent>
+      </Popover>
     </View>
   ),
 };

package/src/popover/context.ts

@@ -20,7 +20,7 @@ PopoverContext.displayName = 'PopoverContext';
 export function usePopoverContext(): PopoverContextValue {
   const ctx = useContext(PopoverContext);
   if (!ctx) {
-    throw new Error('Popover components must be used within a <Popover.Root>');
+    throw new Error('Popover components must be used within a <Popover>');
   }
   return ctx;
 }

package/src/popover/index.tsx

@@ -7,7 +7,7 @@ import { PopoverContext, usePopoverContext } from './context';
 import type {
   PopoverContentProps,
   PopoverControlProps,
-  PopoverRootProps,
+  PopoverProps,
   PopoverTriggerProps,
 } from './types';
 
@@ -15,7 +15,7 @@ export type {
   PopoverControlProps,
   PopoverContentProps,
   PopoverTriggerProps,
-  PopoverRootProps,
+  PopoverProps,
   PopoverPlacement,
   PopoverTriggerRenderProps,
   PopoverTriggerState,
@@ -29,7 +29,7 @@ export { usePopoverContext };
  * established native-overlay convention, shared with `Menu`/`Select`). The
  * web fork (`index.web.tsx`) anchors a floating panel to the trigger.
  */
-export function Root({ children, control }: PopoverRootProps) {
+export function Popover({ children, control }: PopoverProps) {
   const defaultControl = useDialogControl();
   const triggerRef = useRef<View | null>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -64,7 +64,7 @@ export function Root({ children, control }: PopoverRootProps) {
   );
 }
 
-export function Trigger({ children, label }: PopoverTriggerProps) {
+export function PopoverTrigger({ children, label }: PopoverTriggerProps) {
   const { control, triggerRef } = usePopoverContext();
   const [focused, setFocused] = useState(false);
   const [pressed, setPressed] = useState(false);
@@ -89,7 +89,7 @@ export function Trigger({ children, label }: PopoverTriggerProps) {
   );
 }
 
-export function Content({
+export function PopoverContent({
   children,
   label = 'Popover',
   style,

package/src/popover/index.web.tsx

@@ -17,7 +17,7 @@ import type {
   PopoverContentProps,
   PopoverControlProps,
   PopoverPlacement,
-  PopoverRootProps,
+  PopoverProps,
   PopoverTriggerProps,
 } from './types';
 
@@ -25,7 +25,7 @@ export type {
   PopoverControlProps,
   PopoverContentProps,
   PopoverTriggerProps,
-  PopoverRootProps,
+  PopoverProps,
   PopoverPlacement,
   PopoverTriggerRenderProps,
   PopoverTriggerState,
@@ -69,7 +69,7 @@ interface Rect {
   height: number;
 }
 
-export function Root({ children, control }: PopoverRootProps) {
+export function Popover({ children, control }: PopoverProps) {
   const id = useId();
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef<View | null>(null);
@@ -121,7 +121,7 @@ export function Root({ children, control }: PopoverRootProps) {
   );
 }
 
-export function Trigger({ children, label }: PopoverTriggerProps) {
+export function PopoverTrigger({ children, label }: PopoverTriggerProps) {
   const { control, triggerRef, isOpen } = usePopoverContext();
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -191,7 +191,7 @@ function resolvePosition(
   return { left, top };
 }
 
-export function Content({
+export function PopoverContent({
   children,
   label = 'Popover',
   placement = 'bottom-start',

package/src/popover/types.ts

@@ -53,7 +53,7 @@ export interface PopoverContentProps {
   testID?: string;
 }
 
-export interface PopoverRootProps {
+export interface PopoverProps {
   children: React.ReactNode;
   /** Optionally supply your own control (from `usePopoverControl`). */
   control?: PopoverControlProps;

package/src/search-input/index.tsx

@@ -4,12 +4,12 @@ import { Platform, type TextInput, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { atoms as a } from '../styles';
 import { Button } from '../button';
-import * as TextField from '../text-field';
+import { TextField, TextFieldIcon, TextFieldInput, type TextFieldInputProps } from '../text-field';
 import { MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon } from '../icons/MagnifyingGlass';
 import { TimesLarge_Stroke2_Corner0_Rounded as X } from '../icons/Times';
 
-type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
-  label?: TextField.InputProps['label'];
+type SearchInputProps = Omit<TextFieldInputProps, 'label'> & {
+  label?: TextFieldInputProps['label'];
   /**
    * Called when the user presses the clear (X) button.
    */
@@ -23,9 +23,9 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
 
     return (
       <View style={[a.w_full, a.relative]}>
-        <TextField.Root>
-          <TextField.Icon icon={MagnifyingGlassIcon} />
-          <TextField.Input
+        <TextField>
+          <TextFieldIcon icon={MagnifyingGlassIcon} />
+          <TextFieldInput
             inputRef={ref}
             label={label}
             value={value}
@@ -41,7 +41,7 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
             style={showClear ? { paddingRight: 24 } : undefined}
             {...rest}
           />
-        </TextField.Root>
+        </TextField>
 
         {showClear && (
           <View