@oxyhq/bloom 0.17.0 → 0.18.0

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

package/src/segmented-control/index.tsx

@@ -40,21 +40,21 @@ const InternalContext = createContext<{
  *
  * @example
  * ```tsx
- * <SegmentedControl.Root value={value} onChange={setValue}>
- *   <SegmentedControl.Item value="one">
- *     <SegmentedControl.ItemText value="one">
+ * <SegmentedControl value={value} onChange={setValue}>
+ *   <SegmentedControlItem value="one">
+ *     <SegmentedControlItemText value="one">
  *       One
- *     </SegmentedControl.ItemText>
- *   </SegmentedControl.Item>
- *   <SegmentedControl.Item value="two">
- *     <SegmentedControl.ItemText value="two">
+ *     </SegmentedControlItemText>
+ *   </SegmentedControlItem>
+ *   <SegmentedControlItem value="two">
+ *     <SegmentedControlItemText value="two">
  *       Two
- *     </SegmentedControl.ItemText>
- *   </SegmentedControl.Item>
- * </SegmentedControl.Root>
+ *     </SegmentedControlItemText>
+ *   </SegmentedControlItem>
+ * </SegmentedControl>
  * ```
  */
-export function Root<T extends string>({
+export function SegmentedControl<T extends string>({
   label,
   type = 'radio',
   size = 'large',
@@ -146,7 +146,7 @@ const InternalItemContext = createContext<{
   active: boolean;
 } | null>(null);
 
-export function Item({
+export function SegmentedControlItem({
   value,
   style,
   children,
@@ -177,7 +177,7 @@ export function Item({
   const ctx = useContext(InternalContext);
   if (!ctx) {
     throw new Error(
-      'SegmentedControl.Item must be used within a SegmentedControl.Root',
+      'SegmentedControlItem must be used within a SegmentedControl',
     );
   }
 
@@ -264,7 +264,7 @@ export function Item({
   );
 }
 
-export function ItemText({
+export function SegmentedControlItemText({
   style,
   children,
   ...props
@@ -276,7 +276,7 @@ export function ItemText({
   const ctx = useContext(InternalItemContext);
   if (!ctx) {
     throw new Error(
-      'SegmentedControl.ItemText must be used within a SegmentedControl.Item',
+      'SegmentedControlItemText must be used within a SegmentedControlItem',
     );
   }
 

package/src/select/Select.stories.tsx

@@ -2,7 +2,16 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import * as Select from './index';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectIcon,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+} from './index';
 
 const meta: Meta = {
   title: 'Components/Select',
@@ -25,44 +34,44 @@ const FRUITS: Option[] = [
 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
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger label="Pick a fruit">
+        <SelectValue placeholder="Pick a fruit" />
+        <SelectIcon />
+      </SelectTrigger>
+      <SelectContent
         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>
+          <SelectItem value={item.value} label={item.label}>
+            <SelectItemIndicator />
+            <SelectItemText>{item.label}</SelectItemText>
+          </SelectItem>
         )}
       />
-    </Select.Root>
+    </Select>
   );
 }
 
 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
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger label="Pick a fruit">
+        <SelectValue placeholder="No fruit selected" />
+        <SelectIcon />
+      </SelectTrigger>
+      <SelectContent
         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>
+          <SelectItem value={item.value} label={item.label}>
+            <SelectItemIndicator />
+            <SelectItemText>{item.label}</SelectItemText>
+          </SelectItem>
         )}
       />
-    </Select.Root>
+    </Select>
   );
 }
 

package/src/select/common.ts

@@ -28,6 +28,6 @@ export const ItemContext = createContext<SelectItemContextValue>({
 });
 ItemContext.displayName = 'SelectItemContext';
 
-export function useItemContext(): SelectItemContextValue {
+export function useSelectItemContext(): SelectItemContextValue {
   return useContext(ItemContext);
 }