@oxyhq/bloom 0.17.0 → 0.18.0

package/src/context-menu/index.tsx

@@ -23,13 +23,13 @@ import { useInteractionState } from '../hooks/useInteractionState';
 import { ItemCtx, useItemContext } from './context';
 import type {
   ContextMenuContextValue,
-  GroupProps,
+  ContextMenuContentProps,
+  ContextMenuGroupProps,
+  ContextMenuItemIconProps,
+  ContextMenuItemProps,
+  ContextMenuItemTextProps,
+  ContextMenuTriggerProps,
   ItemContextValue,
-  ItemIconProps,
-  ItemProps,
-  ItemTextProps,
-  OuterProps,
-  TriggerProps,
 } from './types';
 
 // ---------------------------------------------------------------------------
@@ -47,17 +47,17 @@ function useNativeContextMenuContext(): NativeContextMenuContextValue {
   const ctx = useContext(NativeContextMenuContext);
   if (!ctx) {
     throw new Error(
-      'ContextMenu components must be used within a ContextMenu.Root',
+      'ContextMenu components must be used within a <ContextMenu>',
     );
   }
   return ctx;
 }
 
 // ---------------------------------------------------------------------------
-// Root
+// ContextMenu (Root)
 // ---------------------------------------------------------------------------
 
-export function Root({ children }: { children: React.ReactNode }) {
+export function ContextMenu({ children }: { children: React.ReactNode }) {
   const control = useDialogControl();
 
   const ctx = useMemo(
@@ -78,10 +78,10 @@ export function Root({ children }: { children: React.ReactNode }) {
 }
 
 // ---------------------------------------------------------------------------
-// Trigger
+// ContextMenuTrigger
 // ---------------------------------------------------------------------------
 
-export function Trigger({ children, label, hint, style }: TriggerProps) {
+export function ContextMenuTrigger({ children, label, hint, style }: ContextMenuTriggerProps) {
   const { open } = useNativeContextMenuContext();
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
 
@@ -108,10 +108,10 @@ export function Trigger({ children, label, hint, style }: TriggerProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Outer  (the menu container — uses Bloom Dialog as a bottom sheet)
+// ContextMenuContent  (the menu container — uses Bloom Dialog as a bottom sheet)
 // ---------------------------------------------------------------------------
 
-export function Outer({ children, style }: OuterProps) {
+export function ContextMenuContent({ children, style }: ContextMenuContentProps) {
   const { control } = useNativeContextMenuContext();
 
   return (
@@ -131,16 +131,16 @@ export function Outer({ children, style }: OuterProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// ContextMenuItem
 // ---------------------------------------------------------------------------
 
-export function Item({
+export function ContextMenuItem({
   children,
   label,
   onPress,
   disabled = false,
   style,
-}: ItemProps) {
+}: ContextMenuItemProps) {
   const theme = useTheme();
   const { close } = useNativeContextMenuContext();
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
@@ -191,10 +191,10 @@ export function Item({
 }
 
 // ---------------------------------------------------------------------------
-// ItemText
+// ContextMenuItemText
 // ---------------------------------------------------------------------------
 
-export function ItemText({ children, style }: ItemTextProps) {
+export function ContextMenuItemText({ children, style }: ContextMenuItemTextProps) {
   const theme = useTheme();
   const { disabled } = useItemContext();
 
@@ -214,10 +214,10 @@ export function ItemText({ children, style }: ItemTextProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ItemIcon
+// ContextMenuItemIcon
 // ---------------------------------------------------------------------------
 
-export function ItemIcon({ icon: Comp }: ItemIconProps) {
+export function ContextMenuItemIcon({ icon: Comp }: ContextMenuItemIconProps) {
   const theme = useTheme();
   const { disabled } = useItemContext();
 
@@ -230,18 +230,18 @@ export function ItemIcon({ icon: Comp }: ItemIconProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Group
+// ContextMenuGroup
 // ---------------------------------------------------------------------------
 
-export function Group({ children, style }: GroupProps) {
+export function ContextMenuGroup({ children, style }: ContextMenuGroupProps) {
   return <View style={style}>{children}</View>;
 }
 
 // ---------------------------------------------------------------------------
-// Divider
+// ContextMenuDivider
 // ---------------------------------------------------------------------------
 
-export function Divider() {
+export function ContextMenuDivider() {
   const theme = useTheme();
 
   return (

package/src/context-menu/index.web.tsx

@@ -23,13 +23,13 @@ import { createOverlayZIndex } from '../styles/z-index';
 import { ItemCtx, useItemContext } from './context';
 import type {
   ContextMenuContextValue,
-  GroupProps,
+  ContextMenuContentProps,
+  ContextMenuGroupProps,
+  ContextMenuItemIconProps,
+  ContextMenuItemProps,
+  ContextMenuItemTextProps,
+  ContextMenuTriggerProps,
   ItemContextValue,
-  ItemIconProps,
-  ItemProps,
-  ItemTextProps,
-  OuterProps,
-  TriggerProps,
 } from './types';
 
 const contextMenuZIndex = createOverlayZIndex();
@@ -51,17 +51,17 @@ function useWebContextMenuContext(): WebContextMenuContextValue {
   const ctx = useContext(WebContextMenuContext);
   if (!ctx) {
     throw new Error(
-      'ContextMenu components must be used within a ContextMenu.Root',
+      'ContextMenu components must be used within a <ContextMenu>',
     );
   }
   return ctx;
 }
 
 // ---------------------------------------------------------------------------
-// Root
+// ContextMenu (Root)
 // ---------------------------------------------------------------------------
 
-export function Root({ children }: { children: React.ReactNode }) {
+export function ContextMenu({ children }: { children: React.ReactNode }) {
   const [position, setPosition] = useState<Position | null>(null);
   const isOpen = position !== null;
 
@@ -70,7 +70,7 @@ export function Root({ children }: { children: React.ReactNode }) {
       isOpen,
       position,
       open: () => {
-        /* open is handled by the Trigger's contextmenu event */
+        /* open is handled by the ContextMenuTrigger's contextmenu event */
       },
       close: () => setPosition(null),
     }),
@@ -78,7 +78,7 @@ export function Root({ children }: { children: React.ReactNode }) {
   );
 
   /**
-   * We store the setPosition in a ref so the Trigger can call it
+   * We store the setPosition in a ref so the ContextMenuTrigger can call it
    * without needing a stable identity on `open`.
    */
   return (
@@ -96,10 +96,10 @@ const SetPositionContext = createContext<
 SetPositionContext.displayName = 'ContextMenuSetPositionContext';
 
 // ---------------------------------------------------------------------------
-// Trigger
+// ContextMenuTrigger
 // ---------------------------------------------------------------------------
 
-export function Trigger({ children, label, hint, style }: TriggerProps) {
+export function ContextMenuTrigger({ children, label, hint, style }: ContextMenuTriggerProps) {
   const ctx = useWebContextMenuContext();
   const setPosition = useContext(SetPositionContext);
   const triggerRef = useRef<View>(null);
@@ -146,10 +146,10 @@ export function Trigger({ children, label, hint, style }: TriggerProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Outer
+// ContextMenuContent
 // ---------------------------------------------------------------------------
 
-export function Outer({ children, style }: OuterProps) {
+export function ContextMenuContent({ children, style }: ContextMenuContentProps) {
   const ctx = useWebContextMenuContext();
   const theme = useTheme();
   const { isOpen, close, position } = ctx;
@@ -197,16 +197,16 @@ export function Outer({ children, style }: OuterProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// ContextMenuItem
 // ---------------------------------------------------------------------------
 
-export function Item({
+export function ContextMenuItem({
   children,
   label,
   onPress,
   disabled = false,
   style,
-}: ItemProps) {
+}: ContextMenuItemProps) {
   const theme = useTheme();
   const { close } = useWebContextMenuContext();
   const {
@@ -256,10 +256,10 @@ export function Item({
 }
 
 // ---------------------------------------------------------------------------
-// ItemText
+// ContextMenuItemText
 // ---------------------------------------------------------------------------
 
-export function ItemText({ children, style }: ItemTextProps) {
+export function ContextMenuItemText({ children, style }: ContextMenuItemTextProps) {
   const theme = useTheme();
   const { disabled } = useItemContext();
 
@@ -279,10 +279,10 @@ export function ItemText({ children, style }: ItemTextProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ItemIcon
+// ContextMenuItemIcon
 // ---------------------------------------------------------------------------
 
-export function ItemIcon({ icon: Comp }: ItemIconProps) {
+export function ContextMenuItemIcon({ icon: Comp }: ContextMenuItemIconProps) {
   const theme = useTheme();
   const { disabled } = useItemContext();
 
@@ -295,18 +295,18 @@ export function ItemIcon({ icon: Comp }: ItemIconProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Group
+// ContextMenuGroup
 // ---------------------------------------------------------------------------
 
-export function Group({ children }: GroupProps) {
+export function ContextMenuGroup({ children }: ContextMenuGroupProps) {
   return <>{children}</>;
 }
 
 // ---------------------------------------------------------------------------
-// Divider
+// ContextMenuDivider
 // ---------------------------------------------------------------------------
 
-export function Divider() {
+export function ContextMenuDivider() {
   const theme = useTheme();
 
   return (

package/src/context-menu/types.ts

@@ -18,7 +18,7 @@ export type ItemContextValue = {
   disabled: boolean;
 };
 
-export type TriggerProps = {
+export type ContextMenuTriggerProps = {
   children: (props: TriggerChildProps) => React.ReactNode;
   label: string;
   /** Accessibility hint describing what long-pressing / right-clicking does. */
@@ -44,25 +44,25 @@ export type TriggerChildProps = {
   };
 };
 
-export type OuterProps = React.PropsWithChildren<{
+export type ContextMenuContentProps = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
 }>;
 
-export type ItemProps = React.PropsWithChildren<{
+export type ContextMenuItemProps = React.PropsWithChildren<{
   label: string;
   onPress: (e?: GestureResponderEvent) => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
 }>;
 
-export type ItemTextProps = React.PropsWithChildren<{
+export type ContextMenuItemTextProps = React.PropsWithChildren<{
   style?: TextStyle;
 }>;
 
-export type ItemIconProps = {
+export type ContextMenuItemIconProps = {
   icon: React.ComponentType<SVGIconProps>;
 };
 
-export type GroupProps = React.PropsWithChildren<{
+export type ContextMenuGroupProps = React.PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
 }>;

package/src/dialog/SheetShell.tsx

@@ -31,7 +31,7 @@ export interface SheetShellProps {
 
 /**
  * Bottom-sheet shell with an embedded drag handle. Exposes the bloom
- * dialog `close()` context to descendants — `Menu.Item`, `Select.Item`
+ * dialog `close()` context to descendants — `MenuItem`, `SelectItem`
  * etc. rely on it to dismiss the sheet after selection.
  */
 export function SheetShell({

package/src/field/Field.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Field } from './Field';
 import { Switch } from '../switch';
-import * as TextField from '../text-field';
+import { TextFieldInput } from '../text-field';
 
 const meta: Meta = {
   title: 'Forms/Field',
@@ -20,7 +20,7 @@ export const WithInput: Story = {
     return (
       <View style={{ width: 360 }}>
         <Field label="Username" description="Choose a unique handle." required>
-          <TextField.Input label="Username" value={v} onChangeText={setV} placeholder="ada" />
+          <TextFieldInput label="Username" value={v} onChangeText={setV} placeholder="ada" />
         </Field>
       </View>
     );
@@ -33,7 +33,7 @@ export const WithError: Story = {
     return (
       <View style={{ width: 360 }}>
         <Field label="Email" error="Enter a valid email address.">
-          <TextField.Input label="Email" value={v} onChangeText={setV} isInvalid />
+          <TextFieldInput label="Email" value={v} onChangeText={setV} isInvalid />
         </Field>
       </View>
     );

package/src/index.ts

@@ -57,7 +57,7 @@ export type { AvatarGroupProps, AvatarGroupItem } from './avatar-group';
 export { UserHoverCard } from './user-hover-card';
 export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading';
-export * as PromptInput from './prompt-input';
+export * from './prompt-input';
 export * from './switch';
 export { toast, type Toast } from './toast';
 
@@ -71,8 +71,8 @@ export { Fill } from './fill';
 export { IconCircle } from './icon-circle';
 
 // Form components
-export * as TextField from './text-field';
-export * as SegmentedControl from './segmented-control';
+export * from './text-field';
+export * from './segmented-control';
 export { SearchInput } from './search-input';
 export { Label } from './label';
 export type { LabelProps } from './label';
@@ -93,9 +93,9 @@ export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 export * from './card';
 export * from './badge';
 export * from './chip';
-export * as Tabs from './tabs';
+export * from './tabs';
 export * from './checkbox';
-export * as Accordion from './accordion';
+export * from './accordion';
 
 // Settings / Grouped list
 export * from './settings-list';
@@ -105,12 +105,12 @@ export { Kbd } from './kbd';
 export type { KbdProps } from './kbd';
 
 // Overlay components
-export * as Admonition from './admonition';
-export * as Menu from './menu';
-export * as Tooltip from './tooltip';
-export * as Select from './select';
-export * as ContextMenu from './context-menu';
-export * as Popover from './popover';
+export * from './admonition';
+export * from './menu';
+export * from './tooltip';
+export * from './select';
+export * from './context-menu';
+export * from './popover';
 export { AlertDialog, AlertDialogHost, confirm } from './alert-dialog';
 export type {
   AlertDialogProps,

package/src/index.web.ts

@@ -62,7 +62,7 @@ export type { AvatarGroupProps, AvatarGroupItem } from './avatar-group/index.web
 export { UserHoverCard } from './user-hover-card';
 export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading/index.web';
-export * as PromptInput from './prompt-input';
+export * from './prompt-input';
 export * from './switch';
 export { toast, type Toast } from './toast/index.web';
 
@@ -76,8 +76,8 @@ export { Fill } from './fill';
 export { IconCircle } from './icon-circle';
 
 // Form components
-export * as TextField from './text-field';
-export * as SegmentedControl from './segmented-control';
+export * from './text-field';
+export * from './segmented-control';
 export { SearchInput } from './search-input';
 export { Label } from './label';
 export type { LabelProps } from './label';
@@ -98,9 +98,9 @@ export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 export * from './card';
 export * from './badge';
 export * from './chip';
-export * as Tabs from './tabs';
+export * from './tabs';
 export * from './checkbox';
-export * as Accordion from './accordion';
+export * from './accordion';
 
 // Settings / Grouped list
 export * from './settings-list';
@@ -110,12 +110,12 @@ export { Kbd } from './kbd';
 export type { KbdProps } from './kbd';
 
 // Overlay components
-export * as Admonition from './admonition';
-export * as Menu from './menu/index.web';
-export * as Tooltip from './tooltip/index.web';
-export * as Select from './select/index.web';
-export * as ContextMenu from './context-menu/index.web';
-export * as Popover from './popover/index.web';
+export * from './admonition';
+export * from './menu/index.web';
+export * from './tooltip/index.web';
+export * from './select/index.web';
+export * from './context-menu/index.web';
+export * from './popover/index.web';
 export { AlertDialog, AlertDialogHost, confirm } from './alert-dialog/index.web';
 export type {
   AlertDialogProps,

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;
 }