@oxyhq/bloom 0.16.2 → 0.18.0

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

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