@oxyhq/bloom 0.6.24 → 0.7.1

package/src/item/Item.tsx

@@ -0,0 +1,180 @@
+import React, { memo, useMemo } from 'react';
+import { Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/useInteractionState';
+import { Text } from '../typography';
+import { borderRadius, fontSize, space } from '../styles/tokens';
+import type { ItemProps } from './types';
+
+const DENSITY = {
+  comfortable: { paddingVertical: 10, minHeight: 44 },
+  compact: { paddingVertical: 6, minHeight: 36 },
+} as const;
+
+/**
+ * A generic list row — the building block shared by settings lists, menus,
+ * combobox/command option lists, etc. Leading + trailing slots flank a
+ * title/subtitle text column (or arbitrary `children`). Pressable when an
+ * `onPress` is supplied; otherwise a static container.
+ */
+const ItemComponent = function Item({
+  title,
+  subtitle,
+  children,
+  leading,
+  trailing,
+  onPress,
+  onLongPress,
+  disabled = false,
+  destructive = false,
+  selected = false,
+  active = false,
+  density = 'comfortable',
+  style,
+  titleStyle,
+  subtitleStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole,
+  role,
+  testID,
+}: ItemProps) {
+  const theme = useTheme();
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } =
+    useInteractionState();
+
+  const titleColor = destructive ? theme.colors.error : theme.colors.text;
+  const cfg = DENSITY[density];
+
+  const containerStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: space.md,
+      paddingHorizontal: space.lg,
+      paddingVertical: cfg.paddingVertical,
+      minHeight: cfg.minHeight,
+      borderRadius: borderRadius.sm,
+    };
+    if (selected || active) {
+      base.backgroundColor = active
+        ? theme.colors.primaryLight
+        : theme.colors.backgroundSecondary;
+    }
+    return base;
+  }, [cfg, selected, active, theme]);
+
+  const body =
+    children != null ? (
+      children
+    ) : (
+      <View style={styles.textColumn}>
+        {title != null ? (
+          typeof title === 'string' ? (
+            <Text
+              numberOfLines={1}
+              style={[styles.title, { color: titleColor }, titleStyle]}>
+              {title}
+            </Text>
+          ) : (
+            title
+          )
+        ) : null}
+        {subtitle != null ? (
+          typeof subtitle === 'string' ? (
+            <Text
+              numberOfLines={2}
+              style={[
+                styles.subtitle,
+                { color: theme.colors.textSecondary },
+                subtitleStyle,
+              ]}>
+              {subtitle}
+            </Text>
+          ) : (
+            subtitle
+          )
+        ) : null}
+      </View>
+    );
+
+  const content = (
+    <View style={[containerStyle, style]} testID={testID}>
+      {leading != null ? <View style={styles.slot}>{leading}</View> : null}
+      {body}
+      {trailing != null ? <View style={styles.slot}>{trailing}</View> : null}
+    </View>
+  );
+
+  if (onPress || onLongPress) {
+    const resolvedRole = accessibilityRole ?? 'button';
+    const handlePress = disabled || !onPress ? undefined : onPress;
+    const handleLongPress = disabled || !onLongPress ? undefined : onLongPress;
+    return (
+      <Pressable
+        onPress={handlePress}
+        onLongPress={handleLongPress}
+        onPressIn={disabled ? undefined : onPressIn}
+        onPressOut={disabled ? undefined : onPressOut}
+        disabled={disabled}
+        android_ripple={{ color: theme.colors.border }}
+        accessibilityRole={resolvedRole}
+        {...(role ? { role } : {})}
+        accessibilityLabel={
+          accessibilityLabel ?? (typeof title === 'string' ? title : undefined)
+        }
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ disabled, selected }}
+        style={[
+          disabled && styles.disabled,
+          pressed && !disabled && styles.pressed,
+        ]}>
+        {content}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      accessibilityRole={accessibilityRole ?? 'none'}
+      {...(role ? { role } : {})}
+      accessibilityLabel={
+        accessibilityLabel ?? (typeof title === 'string' ? title : undefined)
+      }
+      accessibilityHint={accessibilityHint}
+      accessibilityState={disabled ? { disabled: true } : undefined}
+      style={disabled ? styles.disabled : undefined}>
+      {content}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  slot: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textColumn: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    fontSize: fontSize.md,
+    fontWeight: '500',
+    lineHeight: fontSize.md * 1.3,
+  },
+  subtitle: {
+    fontSize: fontSize.sm,
+    lineHeight: fontSize.sm * 1.3,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+});
+
+export const Item = memo(ItemComponent);
+Item.displayName = 'Item';

package/src/item/index.ts

@@ -0,0 +1,2 @@
+export { Item } from './Item';
+export type { ItemProps } from './types';

package/src/item/types.ts

@@ -0,0 +1,45 @@
+import type { AccessibilityRole, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface ItemProps {
+  /** Primary title text. */
+  title?: React.ReactNode;
+  /** Secondary text rendered below the title. */
+  subtitle?: React.ReactNode;
+  /**
+   * Arbitrary body content. When provided it replaces the
+   * `title`/`subtitle` text column — use it for fully custom rows.
+   */
+  children?: React.ReactNode;
+  /** Leading slot (icon, avatar, radio, etc.). */
+  leading?: React.ReactNode;
+  /** Trailing slot (chevron, switch, badge, value text, etc.). */
+  trailing?: React.ReactNode;
+  /** Makes the row pressable. */
+  onPress?: () => void;
+  /** Long-press handler. Only honored when the row is pressable. */
+  onLongPress?: () => void;
+  disabled?: boolean;
+  /** Render the title in the theme's negative/error color. */
+  destructive?: boolean;
+  /**
+   * Selected state — applies a subtle highlighted background. Useful when
+   * `Item` is used as an option inside an overlay (combobox, command, menu).
+   */
+  selected?: boolean;
+  /** Highlighted (keyboard-focused) state for overlay lists. */
+  active?: boolean;
+  /** Vertical density. Defaults to `'comfortable'`. */
+  density?: 'comfortable' | 'compact';
+  style?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  subtitleStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  /**
+   * Web ARIA role override. Use `'option'` for combobox/listbox items (RN's
+   * `accessibilityRole` has no `'option'`); ignored on native.
+   */
+  role?: 'option' | 'menuitem' | 'listitem';
+  testID?: string;
+}

package/src/kbd/Kbd.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Kbd } from './Kbd';
+
+const meta: Meta<typeof Kbd> = {
+  title: 'Components/Kbd',
+  component: Kbd,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Kbd>;
+
+export const Single: Story = {
+  args: { children: 'K' },
+};
+
+export const Combo: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+      <Kbd size="sm">Esc</Kbd>
+      <Kbd size="md">Enter</Kbd>
+    </View>
+  ),
+};

package/src/kbd/Kbd.tsx

@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import { Platform, StyleSheet, View, type TextStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { borderRadius } from '../styles/tokens';
+import type { KbdProps } from './types';
+
+const SIZE_CONFIG = {
+  sm: { minWidth: 18, height: 18, fontSize: 11, paddingHorizontal: 4 },
+  md: { minWidth: 22, height: 22, fontSize: 12, paddingHorizontal: 6 },
+} as const;
+
+/**
+ * A small keyboard-key chip. Bordered, monospace via the Bloom mono font
+ * token, themed for light/dark. Used to surface shortcuts (e.g. `⌘K`,
+ * `Esc`) inside menus, command palettes and tooltips.
+ */
+const KbdComponent = function Kbd({
+  children,
+  size = 'md',
+  style,
+  textStyle,
+  testID,
+}: KbdProps) {
+  const theme = useTheme();
+  const cfg = SIZE_CONFIG[size];
+
+  const monoFamily: TextStyle =
+    Platform.OS === 'web'
+      ? { fontFamily: 'var(--bloom-font-mono)' }
+      : { fontFamily: 'Geist Mono' };
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.container,
+        {
+          minWidth: cfg.minWidth,
+          height: cfg.height,
+          paddingHorizontal: cfg.paddingHorizontal,
+          backgroundColor: theme.colors.backgroundSecondary,
+          borderColor: theme.colors.border,
+        },
+        style,
+      ]}>
+      <Text
+        numberOfLines={1}
+        style={[
+          monoFamily,
+          {
+            fontSize: cfg.fontSize,
+            lineHeight: cfg.height,
+            color: theme.colors.textSecondary,
+            textAlign: 'center',
+          },
+          textStyle,
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderRadius: borderRadius.xs,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const Kbd = memo(KbdComponent);
+Kbd.displayName = 'Kbd';

package/src/kbd/index.ts

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd';
+export type { KbdProps } from './types';

package/src/kbd/types.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface KbdProps {
+  /** Key label, e.g. `⌘`, `K`, `Esc`, `Ctrl`. */
+  children: React.ReactNode;
+  /** Visual size. Defaults to `'md'`. */
+  size?: 'sm' | 'md';
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>;
+  /** Text style override. */
+  textStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/label/Label.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from './Label';
+
+const meta: Meta<typeof Label> = {
+  title: 'Forms/Label',
+  component: Label,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Basic: Story = {
+  args: { children: 'Email address' },
+};
+
+export const Required: Story = {
+  args: { children: 'Email address', required: true },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      <Label size="xs">Extra small</Label>
+      <Label size="sm">Small (default)</Label>
+      <Label size="md">Medium</Label>
+    </View>
+  ),
+};

package/src/label/Label.tsx

@@ -0,0 +1,64 @@
+import React, { memo } from 'react';
+import { Platform } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { atoms as a } from '../styles';
+import { fontSize } from '../styles/tokens';
+import type { LabelProps } from './types';
+
+const SIZE_FONT = {
+  xs: fontSize.xs,
+  sm: fontSize.sm,
+  md: fontSize.md,
+} as const;
+
+/**
+ * Themed form label. A thin wrapper over Bloom's `Text` that applies the
+ * label typography (medium weight, secondary color) and optionally renders a
+ * required marker. On web it forwards `htmlFor` so a click focuses the
+ * associated control.
+ */
+const LabelComponent = function Label({
+  children,
+  nativeID,
+  htmlFor,
+  required = false,
+  disabled = false,
+  size = 'sm',
+  style,
+  testID,
+}: LabelProps) {
+  const theme = useTheme();
+
+  const webProps: Record<string, unknown> =
+    Platform.OS === 'web' ? { htmlFor: htmlFor ?? nativeID } : {};
+
+  return (
+    <Text
+      {...webProps}
+      nativeID={nativeID}
+      testID={testID}
+      style={[
+        a.font_medium,
+        a.mb_sm,
+        {
+          fontSize: SIZE_FONT[size],
+          color: disabled ? theme.colors.textTertiary : theme.colors.textSecondary,
+        },
+        style,
+      ]}>
+      {children}
+      {required ? (
+        <Text
+          accessibilityLabel="required"
+          style={{ color: theme.colors.negative }}>
+          {' *'}
+        </Text>
+      ) : null}
+    </Text>
+  );
+};
+
+export const Label = memo(LabelComponent);
+Label.displayName = 'Label';

package/src/label/index.ts

@@ -0,0 +1,2 @@
+export { Label } from './Label';
+export type { LabelProps } from './types';

package/src/label/types.ts

@@ -0,0 +1,27 @@
+import type { StyleProp, TextStyle } from 'react-native';
+
+export interface LabelProps {
+  /** Label text. */
+  children: React.ReactNode;
+  /**
+   * Native ID of the control this label describes. On web, also wires up
+   * `htmlFor` so clicking the label focuses the associated input.
+   */
+  nativeID?: string;
+  /**
+   * Web-only convenience: the `id` of the form control this label is for.
+   * Defaults to `nativeID` when omitted. Ignored on native.
+   */
+  htmlFor?: string;
+  /**
+   * Render a required marker (an asterisk in the theme's negative color)
+   * after the label text. Defaults to `false`.
+   */
+  required?: boolean;
+  /** Visually subdued label (e.g. for optional fields). Defaults to `false`. */
+  disabled?: boolean;
+  /** Typography size token. Defaults to `'sm'`. */
+  size?: 'xs' | 'sm' | 'md';
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/popover/Popover.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as Popover from './index';
+import { Button } from '../button';
+import { Item } from '../item';
+import { Text } from '../typography';
+
+const meta: Meta = {
+  title: 'Overlays/Popover',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {
+  render: () => (
+    <View style={{ padding: 80 }}>
+      <Popover.Root>
+        <Popover.Trigger label="Open popover">
+          {({ props }) => (
+            <Button {...props} onPress={props.onPress}>
+              Open popover
+            </Button>
+          )}
+        </Popover.Trigger>
+        <Popover.Content 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>
+    </View>
+  ),
+};
+
+export const RichContent: Story = {
+  render: () => (
+    <View style={{ padding: 80 }}>
+      <Popover.Root>
+        <Popover.Trigger label="Details">
+          {({ props }) => (
+            <Button {...props} variant="secondary" onPress={props.onPress}>
+              Details
+            </Button>
+          )}
+        </Popover.Trigger>
+        <Popover.Content 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>
+    </View>
+  ),
+};

package/src/popover/context.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+import type { View } from 'react-native';
+
+import type { PopoverControlProps } from './types';
+
+export interface PopoverContextValue {
+  control: PopoverControlProps;
+  /** Whether the popover is currently open. Drives web rendering. */
+  isOpen: boolean;
+  /**
+   * Ref to the trigger wrapper. Web uses it to anchor the floating panel.
+   * Native ignores it (it presents a bottom sheet).
+   */
+  triggerRef: React.RefObject<View | null>;
+}
+
+export const PopoverContext = createContext<PopoverContextValue | null>(null);
+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>');
+  }
+  return ctx;
+}

package/src/popover/index.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+
+import { useDialogControl } from '../dialog/context';
+import { SheetShell } from '../dialog/SheetShell';
+import { PopoverContext, usePopoverContext } from './context';
+import type {
+  PopoverContentProps,
+  PopoverControlProps,
+  PopoverRootProps,
+  PopoverTriggerProps,
+} from './types';
+
+export type {
+  PopoverControlProps,
+  PopoverContentProps,
+  PopoverTriggerProps,
+  PopoverRootProps,
+  PopoverPlacement,
+  PopoverTriggerRenderProps,
+  PopoverTriggerState,
+} from './types';
+
+export { useDialogControl as usePopoverControl } from '../dialog/context';
+export { usePopoverContext };
+
+/**
+ * Native `Popover` — presents its content in a bottom sheet (Bloom's
+ * 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) {
+  const defaultControl = useDialogControl();
+  const triggerRef = useRef<View | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const activeControl = control ?? defaultControl;
+
+  // Wrap the control so `isOpen` reflects open/close on native too.
+  const wrappedControl = useMemo<PopoverControlProps>(
+    () => ({
+      ...activeControl,
+      open: () => {
+        setIsOpen(true);
+        activeControl.open();
+      },
+      close: (cb) => {
+        setIsOpen(false);
+        activeControl.close(cb);
+      },
+    }),
+    [activeControl],
+  );
+
+  const context = useMemo(
+    () => ({ control: wrappedControl, isOpen, triggerRef }),
+    [wrappedControl, isOpen],
+  );
+
+  return (
+    <PopoverContext.Provider value={context}>
+      {children}
+    </PopoverContext.Provider>
+  );
+}
+
+export function Trigger({ children, label }: PopoverTriggerProps) {
+  const { control, triggerRef } = usePopoverContext();
+  const [focused, setFocused] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  const rendered = children({
+    control,
+    state: { hovered: false, focused, pressed },
+    props: {
+      onPress: () => control.open(),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      accessibilityLabel: label,
+      accessibilityRole: 'button',
+      'aria-haspopup': 'dialog',
+    },
+  });
+
+  return (
+    <View ref={triggerRef} collapsable={false}>
+      {rendered}
+    </View>
+  );
+}
+
+export function Content({
+  children,
+  label = 'Popover',
+  style,
+}: PopoverContentProps) {
+  const { control } = usePopoverContext();
+
+  return (
+    <SheetShell control={control} label={label} contentStyle={style}>
+      {children}
+    </SheetShell>
+  );
+}