@oxyhq/bloom 0.17.0 → 0.18.1

package/src/select/index.tsx

@@ -19,20 +19,20 @@ import { useInteractionState } from '../hooks/useInteractionState';
 import {
   ChevronTopBottom_Stroke2_Corner0_Rounded as ChevronUpDownIcon,
 } from '../icons/Chevron';
-import { defaultItemValueExtractor, ItemContext, useItemContext } from './common';
+import { defaultItemValueExtractor, ItemContext, useSelectItemContext } from './common';
 import type {
-  ContentProps,
-  IconProps,
-  ItemIndicatorProps,
-  ItemProps,
-  ItemTextProps,
-  RootProps,
+  SelectContentProps,
+  SelectIconProps,
+  SelectItemIndicatorProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectProps,
   SelectItemContextValue,
-  TriggerProps,
-  ValueTextProps,
+  SelectTriggerProps,
+  SelectValueProps,
 } from './types';
 
-export { useItemContext };
+export { useSelectItemContext };
 
 // ---------------------------------------------------------------------------
 // Context
@@ -40,7 +40,7 @@ export { useItemContext };
 
 type SelectContextValue = {
   control: DialogControlProps;
-} & Pick<RootProps, 'value' | 'onValueChange' | 'disabled'>;
+} & Pick<SelectProps, 'value' | 'onValueChange' | 'disabled'>;
 
 const SelectContext = createContext<SelectContextValue | null>(null);
 SelectContext.displayName = 'SelectContext';
@@ -53,16 +53,16 @@ ValueStoreContext.displayName = 'SelectValueStoreContext';
 function useSelectContext(): SelectContextValue {
   const ctx = useContext(SelectContext);
   if (!ctx) {
-    throw new Error('Select components must be used within a Select.Root');
+    throw new Error('Select components must be used within a Select');
   }
   return ctx;
 }
 
 // ---------------------------------------------------------------------------
-// Root
+// Select
 // ---------------------------------------------------------------------------
 
-export function Root({ children, value, onValueChange, disabled }: RootProps) {
+export function Select({ children, value, onValueChange, disabled }: SelectProps) {
   const control = useDialogControl();
   const valueStoreState = useState<unknown>(undefined);
 
@@ -81,10 +81,10 @@ export function Root({ children, value, onValueChange, disabled }: RootProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Trigger
+// SelectTrigger
 // ---------------------------------------------------------------------------
 
-export function Trigger({ children, label }: TriggerProps) {
+export function SelectTrigger({ children, label }: SelectTriggerProps) {
   const { control } = useSelectContext();
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
   const {
@@ -124,14 +124,14 @@ export function Trigger({ children, label }: TriggerProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ValueText
+// SelectValue
 // ---------------------------------------------------------------------------
 
-export function ValueText({
+export function SelectValue({
   placeholder,
   children: extractLabel = defaultExtractLabel,
   style,
-}: ValueTextProps) {
+}: SelectValueProps) {
   const [storedValue] = useContext(ValueStoreContext);
   const theme = useTheme();
 
@@ -159,23 +159,23 @@ function defaultExtractLabel(item: unknown): React.ReactNode {
 }
 
 // ---------------------------------------------------------------------------
-// Icon
+// SelectIcon
 // ---------------------------------------------------------------------------
 
-export function Icon(_props: IconProps) {
+export function SelectIcon(_props: SelectIconProps) {
   const theme = useTheme();
   return <ChevronUpDownIcon size="sm" fill={theme.colors.textSecondary} />;
 }
 
 // ---------------------------------------------------------------------------
-// Content
+// SelectContent
 // ---------------------------------------------------------------------------
 
-export function Content<T>({
+export function SelectContent<T>({
   items,
   valueExtractor = defaultItemValueExtractor,
   ...props
-}: ContentProps<T>) {
+}: SelectContentProps<T>) {
   const { control, ...context } = useSelectContext();
   const [, setStoredValue] = useContext(ValueStoreContext);
 
@@ -189,7 +189,7 @@ export function Content<T>({
   }, [items, context.value, valueExtractor, setStoredValue]);
 
   return (
-    <ContentInner
+    <SelectContentInner
       control={control}
       items={items}
       valueExtractor={valueExtractor}
@@ -201,19 +201,19 @@ export function Content<T>({
   );
 }
 
-type ContentInnerProps<T> = ContentProps<T> &
-  Pick<RootProps, 'value' | 'onValueChange' | 'disabled'> & {
+type SelectContentInnerProps<T> = SelectContentProps<T> &
+  Pick<SelectProps, 'value' | 'onValueChange' | 'disabled'> & {
     control: DialogControlProps;
   };
 
-function ContentInner<T>({
+function SelectContentInner<T>({
   label = 'Select an option',
   items,
   renderItem,
   valueExtractor = defaultItemValueExtractor,
   control,
   ...contextValues
-}: ContentInnerProps<T>) {
+}: SelectContentInnerProps<T>) {
   const theme = useTheme();
 
   const render = useCallback(
@@ -258,14 +258,10 @@ function ContentInner<T>({
 }
 
 // ---------------------------------------------------------------------------
-// Item context + value extractor (shared across platforms)
+// SelectItem
 // ---------------------------------------------------------------------------
 
-// ---------------------------------------------------------------------------
-// Item
-// ---------------------------------------------------------------------------
-
-export function Item({ children, value, label, style }: ItemProps) {
+export function SelectItem({ children, value, label, style }: SelectItemProps) {
   const theme = useTheme();
   const { close } = useDialogContext();
   const { value: selectedValue, onValueChange } = useSelectContext();
@@ -311,11 +307,11 @@ export function Item({ children, value, label, style }: ItemProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ItemText
+// SelectItemText
 // ---------------------------------------------------------------------------
 
-export function ItemText({ children, style }: ItemTextProps) {
-  const { selected } = useItemContext();
+export function SelectItemText({ children, style }: SelectItemTextProps) {
+  const { selected } = useSelectItemContext();
 
   return (
     <Text
@@ -331,11 +327,11 @@ export function ItemText({ children, style }: ItemTextProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ItemIndicator
+// SelectItemIndicator
 // ---------------------------------------------------------------------------
 
-export function ItemIndicator({ icon: IconComponent }: ItemIndicatorProps) {
-  const { selected } = useItemContext();
+export function SelectItemIndicator({ icon: IconComponent }: SelectItemIndicatorProps) {
+  const { selected } = useSelectItemContext();
 
   if (IconComponent) {
     return (
@@ -349,10 +345,10 @@ export function ItemIndicator({ icon: IconComponent }: ItemIndicatorProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Separator
+// SelectSeparator
 // ---------------------------------------------------------------------------
 
-export function Separator() {
+export function SelectSeparator() {
   const theme = useTheme();
 
   return (

package/src/select/index.web.tsx

@@ -11,20 +11,20 @@ import {
   ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon,
 } from '../icons/Chevron';
 import { Check_Stroke2_Corner0_Rounded as CheckIcon } from '../icons/Check';
-import { defaultItemValueExtractor, ItemContext, useItemContext } from './common';
+import { defaultItemValueExtractor, ItemContext, useSelectItemContext } from './common';
 import type {
-  ContentProps,
-  IconProps,
-  ItemIndicatorProps,
-  ItemProps,
-  ItemTextProps,
-  RootProps,
+  SelectContentProps,
+  SelectIconProps,
+  SelectItemIndicatorProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectProps,
   SelectItemContextValue,
-  TriggerProps,
-  ValueTextProps,
+  SelectTriggerProps,
+  SelectValueProps,
 } from './types';
 
-export { useItemContext };
+export { useSelectItemContext };
 
 const selectZIndex = createOverlayZIndex();
 
@@ -32,7 +32,7 @@ const selectZIndex = createOverlayZIndex();
 // Context
 // ---------------------------------------------------------------------------
 
-type SelectContextValue = Pick<RootProps, 'value' | 'onValueChange' | 'disabled'> & {
+type SelectContextValue = Pick<SelectProps, 'value' | 'onValueChange' | 'disabled'> & {
   isOpen: boolean;
   open: () => void;
   close: () => void;
@@ -44,16 +44,16 @@ SelectContext.displayName = 'SelectContext';
 function useSelectContext(): SelectContextValue {
   const ctx = useContext(SelectContext);
   if (!ctx) {
-    throw new Error('Select components must be used within a Select.Root');
+    throw new Error('Select components must be used within a Select');
   }
   return ctx;
 }
 
 // ---------------------------------------------------------------------------
-// Root
+// Select
 // ---------------------------------------------------------------------------
 
-export function Root({ children, value, onValueChange, disabled }: RootProps) {
+export function Select({ children, value, onValueChange, disabled }: SelectProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const ctx = useMemo<SelectContextValue>(
@@ -72,10 +72,10 @@ export function Root({ children, value, onValueChange, disabled }: RootProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Trigger
+// SelectTrigger
 // ---------------------------------------------------------------------------
 
-export function Trigger({ children, label }: TriggerProps) {
+export function SelectTrigger({ children, label }: SelectTriggerProps) {
   const ctx = useSelectContext();
   const theme = useTheme();
   const triggerId = useId();
@@ -133,14 +133,14 @@ export function Trigger({ children, label }: TriggerProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ValueText
+// SelectValue
 // ---------------------------------------------------------------------------
 
-export function ValueText({
+export function SelectValue({
   children: extractLabel,
   placeholder,
   style,
-}: ValueTextProps) {
+}: SelectValueProps) {
   const { value } = useSelectContext();
   const theme = useTheme();
 
@@ -161,24 +161,24 @@ export function ValueText({
 }
 
 // ---------------------------------------------------------------------------
-// Icon
+// SelectIcon
 // ---------------------------------------------------------------------------
 
-export function Icon({ style }: IconProps) {
+export function SelectIcon({ style }: SelectIconProps) {
   const theme = useTheme();
   return <ChevronDownIcon style={style} size="xs" fill={theme.colors.textSecondary} />;
 }
 
 // ---------------------------------------------------------------------------
-// Content
+// SelectContent
 // ---------------------------------------------------------------------------
 
-export function Content<T>({
+export function SelectContent<T>({
   items,
   renderItem,
   label = 'Select an option',
   valueExtractor = defaultItemValueExtractor,
-}: ContentProps<T>) {
+}: SelectContentProps<T>) {
   const ctx = useSelectContext();
   const theme = useTheme();
 
@@ -216,14 +216,10 @@ export function Content<T>({
 }
 
 // ---------------------------------------------------------------------------
-// Item context + value extractor (shared across platforms)
+// SelectItem
 // ---------------------------------------------------------------------------
 
-// ---------------------------------------------------------------------------
-// Item
-// ---------------------------------------------------------------------------
-
-export function Item({ ref, value, children, style }: ItemProps) {
+export function SelectItem({ ref, value, children, style }: SelectItemProps) {
   const theme = useTheme();
   const ctx = useSelectContext();
   const {
@@ -267,10 +263,10 @@ export function Item({ ref, value, children, style }: ItemProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ItemText
+// SelectItemText
 // ---------------------------------------------------------------------------
 
-export function ItemText({ children, style }: ItemTextProps) {
+export function SelectItemText({ children, style }: SelectItemTextProps) {
   return (
     <Text style={[styles.itemText, ...(style ? [style] : [])]}>
       {children}
@@ -279,11 +275,11 @@ export function ItemText({ children, style }: ItemTextProps) {
 }
 
 // ---------------------------------------------------------------------------
-// ItemIndicator
+// SelectItemIndicator
 // ---------------------------------------------------------------------------
 
-export function ItemIndicator({ icon: IconComponent = CheckIcon }: ItemIndicatorProps) {
-  const { selected } = useItemContext();
+export function SelectItemIndicator({ icon: IconComponent = CheckIcon }: SelectItemIndicatorProps) {
+  const { selected } = useSelectItemContext();
 
   if (!selected) {
     return <View style={styles.itemIndicatorPlaceholder} />;
@@ -297,10 +293,10 @@ export function ItemIndicator({ icon: IconComponent = CheckIcon }: ItemIndicator
 }
 
 // ---------------------------------------------------------------------------
-// Separator
+// SelectSeparator
 // ---------------------------------------------------------------------------
 
-export function Separator() {
+export function SelectSeparator() {
   const theme = useTheme();
 
   return (

package/src/select/types.ts

@@ -3,14 +3,14 @@ import type { StyleProp, TextStyle, View, ViewStyle } from 'react-native';
 import type { Props as SVGIconProps } from '../icons/common';
 import type { DialogControlProps } from '../dialog/types';
 
-export type RootProps = {
+export type SelectProps = {
   children?: React.ReactNode;
   value?: string;
   onValueChange?: (value: string) => void;
   disabled?: boolean;
 };
 
-export type TriggerProps = {
+export type SelectTriggerProps = {
   children: React.ReactNode | ((props: TriggerChildProps) => React.ReactNode);
   label: string;
 };
@@ -31,12 +31,12 @@ export type TriggerChildProps = {
 };
 
 /**
- * Shows the currently selected value inside a `Select.Trigger`.
+ * Shows the currently selected value inside a `SelectTrigger`.
  *
  * Pass a `children` function to extract a display string from the selected
  * item when items are not plain `{ value, label }` objects.
  */
-export type ValueTextProps = {
+export type SelectValueProps = {
   /**
    * Extracts the display text from the currently-selected item.
    * Defaults to `item => item.label`.
@@ -46,11 +46,11 @@ export type ValueTextProps = {
   style?: TextStyle;
 };
 
-export type IconProps = {
+export type SelectIconProps = {
   style?: TextStyle;
 };
 
-export type ContentProps<T> = {
+export type SelectContentProps<T> = {
   /**
    * Label displayed at the top of the selection sheet (native) or
    * used as an ARIA label (web).
@@ -60,7 +60,7 @@ export type ContentProps<T> = {
   label?: string;
   /** The array of items to choose from. */
   items: T[];
-  /** Renders a single item. Use `Select.Item` inside this callback. */
+  /** Renders a single item. Use `SelectItem` inside this callback. */
   renderItem: (
     item: T,
     index: number,
@@ -73,7 +73,7 @@ export type ContentProps<T> = {
   valueExtractor?: (item: T) => string;
 };
 
-export type ItemProps = {
+export type SelectItemProps = {
   ref?: React.Ref<View>;
   value: string;
   label: string;
@@ -81,12 +81,12 @@ export type ItemProps = {
   style?: StyleProp<ViewStyle>;
 };
 
-export type ItemTextProps = {
+export type SelectItemTextProps = {
   children: React.ReactNode;
   style?: TextStyle;
 };
 
-export type ItemIndicatorProps = {
+export type SelectItemIndicatorProps = {
   icon?: React.ComponentType<SVGIconProps>;
 };
 

package/src/tabs/Tabs.tsx

@@ -18,7 +18,7 @@ import {
 import { useTheme } from '../theme/use-theme';
 import { usePressAnimation } from '../hooks/usePressAnimation';
 import { borderRadius, space } from '../styles/tokens';
-import type { TabsProps, TabProps, TabPanelProps, TabsVariant } from './types';
+import type { TabsProps, TabsTriggerProps, TabsContentProps, TabsVariant } from './types';
 
 interface TabsContextValue {
   value: string;
@@ -88,7 +88,7 @@ const TabsBarComponent: React.FC<TabsProps> = ({
   );
 };
 
-const TabComponent: React.FC<TabProps> = ({
+const TabComponent: React.FC<TabsTriggerProps> = ({
   value,
   label,
   icon,
@@ -182,7 +182,7 @@ const TabComponent: React.FC<TabProps> = ({
   );
 };
 
-const TabPanelComponent: React.FC<TabPanelProps> = ({ value, children, style }) => {
+const TabPanelComponent: React.FC<TabsContentProps> = ({ value, children, style }) => {
   const { value: selectedValue } = useContext(TabsContext);
 
   if (value !== selectedValue) return null;
@@ -190,11 +190,11 @@ const TabPanelComponent: React.FC<TabPanelProps> = ({ value, children, style })
   return <View style={style}>{children}</View>;
 };
 
-export const TabsBar = memo(TabsBarComponent);
-TabsBar.displayName = 'TabsBar';
+export const Tabs = memo(TabsBarComponent);
+Tabs.displayName = 'Tabs';
 
-export const Tab = memo(TabComponent);
-Tab.displayName = 'Tab';
+export const TabsTrigger = memo(TabComponent);
+TabsTrigger.displayName = 'TabsTrigger';
 
-export const TabPanel = memo(TabPanelComponent);
-TabPanel.displayName = 'TabPanel';
+export const TabsContent = memo(TabPanelComponent);
+TabsContent.displayName = 'TabsContent';

package/src/tabs/index.ts

@@ -1,2 +1,2 @@
-export { TabsBar, Tab, TabPanel } from './Tabs';
-export type { TabsProps, TabProps, TabPanelProps, TabsVariant } from './types';
+export { Tabs, TabsTrigger, TabsContent } from './Tabs';
+export type { TabsProps, TabsTriggerProps, TabsContentProps, TabsVariant } from './types';

package/src/tabs/types.ts

@@ -9,13 +9,13 @@ export interface TabsProps {
   onValueChange: (value: string) => void;
   /** Visual variant for the tab bar. */
   variant?: TabsVariant;
-  /** The tab items. Must be Tab components. */
+  /** The tab items. Must be TabsTrigger components. */
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
-export interface TabProps {
+export interface TabsTriggerProps {
   /** Unique value identifying this tab. */
   value: string;
   /** Tab label text. */
@@ -28,7 +28,7 @@ export interface TabProps {
   textStyle?: StyleProp<TextStyle>;
 }
 
-export interface TabPanelProps {
+export interface TabsContentProps {
   /** The tab value this panel corresponds to. */
   value: string;
   /** Panel content. */

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import * as TextField from './index';
+import { TextField, TextFieldInput, TextFieldLabel } from './index';
 
 const meta: Meta = {
   title: 'Components/TextField',
@@ -28,9 +28,9 @@ function ControlledField({
   const [value, setValue] = useState(initial);
   return (
     <View style={{ width: 320 }}>
-      <TextField.LabelText>{label}</TextField.LabelText>
-      <TextField.Root isInvalid={isInvalid}>
-        <TextField.Input
+      <TextFieldLabel>{label}</TextFieldLabel>
+      <TextField isInvalid={isInvalid}>
+        <TextFieldInput
           label={label}
           placeholder={placeholder}
           value={value}
@@ -38,7 +38,7 @@ function ControlledField({
           editable={editable}
           isInvalid={isInvalid}
         />
-      </TextField.Root>
+      </TextField>
     </View>
   );
 }

package/src/text-field/index.tsx

@@ -46,11 +46,11 @@ const Context = createContext<{
 });
 Context.displayName = 'TextFieldContext';
 
-export type RootProps = React.PropsWithChildren<
+export type TextFieldProps = React.PropsWithChildren<
   { isInvalid?: boolean } & ViewStyleProp
 >;
 
-export function Root({ children, isInvalid = false, style }: RootProps) {
+export function TextField({ children, isInvalid = false, style }: TextFieldProps) {
   const inputRef = useRef<TextInput>(null);
   const {
     state: hovered,
@@ -122,7 +122,7 @@ export function useSharedInputStyles() {
   }, [theme]);
 }
 
-export type InputProps = Omit<
+export type TextFieldInputProps = Omit<
   TextInputProps,
   'value' | 'onChangeText' | 'placeholder'
 > & {
@@ -134,7 +134,7 @@ export type InputProps = Omit<
   placeholder?: string | null | undefined;
 };
 
-export function Input({
+export function TextFieldInput({
   label,
   placeholder,
   value,
@@ -145,7 +145,7 @@ export function Input({
   inputRef,
   style,
   ...rest
-}: InputProps) {
+}: TextFieldInputProps) {
   const theme = useTheme();
   const ctx = useContext(Context);
   const withinRoot = Boolean(ctx.inputRef);
@@ -155,8 +155,8 @@ export function Input({
 
   if (!withinRoot) {
     return (
-      <Root isInvalid={isInvalid}>
-        <Input
+      <TextField isInvalid={isInvalid}>
+        <TextFieldInput
           label={label}
           placeholder={placeholder}
           value={value}
@@ -164,7 +164,7 @@ export function Input({
           isInvalid={isInvalid}
           {...rest}
         />
-      </Root>
+      </TextField>
     );
   }
 
@@ -246,7 +246,7 @@ export function Input({
   );
 }
 
-export function LabelText({
+export function TextFieldLabel({
   nativeID,
   children,
 }: React.PropsWithChildren<{ nativeID?: string }>) {
@@ -265,7 +265,7 @@ export function LabelText({
   );
 }
 
-export function Icon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }) {
+export function TextFieldIcon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }) {
   const theme = useTheme();
   const ctx = useContext(Context);
 
@@ -297,7 +297,7 @@ export function Icon({ icon: Comp }: { icon: React.ComponentType<SVGIconProps> }
   );
 }
 
-export function SuffixText({
+export function TextFieldSuffix({
   children,
   label,
   accessibilityHint,
@@ -330,7 +330,7 @@ export function SuffixText({
   );
 }
 
-export function GhostText({
+export function TextFieldGhost({
   children,
   value,
 }: {