@oxyhq/bloom 0.6.24 → 0.7.1

package/src/command/types.ts

@@ -0,0 +1,47 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Props as IconProps } from '../icons/common';
+
+export interface CommandItem {
+  /** Stable id. */
+  id: string;
+  /** Primary label. */
+  label: string;
+  /** Secondary text shown beneath the label. */
+  description?: string;
+  /** Optional leading icon component (a Bloom icon). */
+  icon?: React.ComponentType<IconProps>;
+  /** Optional keywords that also match the query (not displayed). */
+  keywords?: string[];
+  /** Trailing shortcut hint (e.g. `'⌘K'`) — rendered as `Kbd`. */
+  shortcut?: string;
+  /** Group label this item belongs to. */
+  group?: string;
+  disabled?: boolean;
+  /** Invoked on select. The palette closes afterward. */
+  onSelect: () => void;
+}
+
+export interface CommandProps {
+  /** Whether the palette is open (controlled). */
+  visible: boolean;
+  /** Close request (Escape, backdrop, after a selection). */
+  onClose: () => void;
+  /** Command items. */
+  items: CommandItem[];
+  /** Input placeholder. Defaults to `'Type a command or search…'`. */
+  placeholder?: string;
+  /** Shown when no items match. Defaults to `'No results found.'`. */
+  emptyText?: string;
+  /** Controlled query. When omitted the palette owns the query. */
+  query?: string;
+  onQueryChange?: (query: string) => void;
+  /**
+   * Custom filter. Defaults to a case-insensitive substring match against
+   * `label`, `description` and `keywords`.
+   */
+  filter?: (item: CommandItem, query: string) => boolean;
+  /** Max height of the results list in px. Defaults to `360`. */
+  maxListHeight?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/field/Field.stories.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Field } from './Field';
+import { Switch } from '../switch';
+import * as TextField from '../text-field';
+
+const meta: Meta = {
+  title: 'Forms/Field',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const WithInput: Story = {
+  render: () => {
+    const [v, setV] = useState('');
+    return (
+      <View style={{ width: 360 }}>
+        <Field label="Username" description="Choose a unique handle." required>
+          <TextField.Input label="Username" value={v} onChangeText={setV} placeholder="ada" />
+        </Field>
+      </View>
+    );
+  },
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [v, setV] = useState('not-an-email');
+    return (
+      <View style={{ width: 360 }}>
+        <Field label="Email" error="Enter a valid email address.">
+          <TextField.Input label="Email" value={v} onChangeText={setV} isInvalid />
+        </Field>
+      </View>
+    );
+  },
+};
+
+export const WrappingAControl: Story = {
+  render: () => {
+    const [on, setOn] = useState(true);
+    return (
+      <View style={{ width: 360 }}>
+        <Field label="Notifications" description="Email me about account activity.">
+          <Switch value={on} onValueChange={setOn} />
+        </Field>
+      </View>
+    );
+  },
+};

package/src/field/Field.tsx

@@ -0,0 +1,77 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { Label } from '../label';
+import { atoms as a } from '../styles';
+import { fontSize, space } from '../styles/tokens';
+import type { FieldProps } from './types';
+
+/**
+ * Standalone form-field wrapper: an optional `Label`, the control (passed as
+ * `children`), and a description **or** error message below it. Composes
+ * Bloom's `Label`. Unlike `TextField` — which bakes its label/error into the
+ * input chrome — `Field` wraps any arbitrary control (a `Switch`, a
+ * `SegmentedControl`, a custom picker, etc.).
+ */
+const FieldComponent = function Field({
+  children,
+  label,
+  description,
+  error,
+  required = false,
+  disabled = false,
+  nativeID,
+  style,
+  testID,
+}: FieldProps) {
+  const theme = useTheme();
+  const hasError = typeof error === 'string' && error.length > 0;
+  const descriptionID = nativeID ? `${nativeID}-description` : undefined;
+  const errorID = nativeID ? `${nativeID}-error` : undefined;
+
+  return (
+    <View style={[a.w_full, style]} testID={testID}>
+      {label != null ? (
+        <Label htmlFor={nativeID} required={required} disabled={disabled}>
+          {label}
+        </Label>
+      ) : null}
+
+      {children}
+
+      {hasError ? (
+        <Text
+          nativeID={errorID}
+          accessibilityRole="alert"
+          style={[
+            {
+              fontSize: fontSize.sm,
+              color: theme.colors.negative,
+              marginTop: space.xs,
+            },
+          ]}>
+          {error}
+        </Text>
+      ) : description != null ? (
+        <Text
+          nativeID={descriptionID}
+          style={[
+            {
+              fontSize: fontSize.sm,
+              color: disabled
+                ? theme.colors.textTertiary
+                : theme.colors.textSecondary,
+              marginTop: space.xs,
+            },
+          ]}>
+          {description}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+export const Field = memo(FieldComponent);
+Field.displayName = 'Field';

package/src/field/index.ts

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

package/src/field/types.ts

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface FieldProps {
+  /** The input/control this field wraps. */
+  children: React.ReactNode;
+  /** Field label, rendered above the control via Bloom's `Label`. */
+  label?: React.ReactNode;
+  /** Helper/description text rendered below the control. */
+  description?: React.ReactNode;
+  /**
+   * Error message. When a non-empty string is provided the field renders in
+   * its invalid state (error-colored message, replaces the description).
+   */
+  error?: string | null;
+  /** Mark the field's label with a required asterisk. */
+  required?: boolean;
+  /** Disabled styling for the label/description. */
+  disabled?: boolean;
+  /**
+   * `nativeID` wired to the label's `htmlFor` (web) so a label click focuses
+   * the control. Set the same id on the child control's `nativeID`.
+   */
+  nativeID?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/index.ts

@@ -67,6 +67,16 @@ export { IconCircle } from './icon-circle';
 export * as TextField from './text-field';
 export * as SegmentedControl from './segmented-control';
 export { SearchInput } from './search-input';
+export { Label } from './label';
+export type { LabelProps } from './label';
+export { Field } from './field';
+export type { FieldProps } from './field';
+export { InputGroup } from './input-group';
+export type { InputGroupProps, InputGroupAddonProps } from './input-group';
+export { Slider } from './slider';
+export type { SliderProps } from './slider';
+export { Combobox } from './combobox';
+export type { ComboboxProps, ComboboxOption } from './combobox';
 
 // Bottom sheet
 export { BottomSheet } from './bottom-sheet';
@@ -82,6 +92,10 @@ export * as Accordion from './accordion';
 
 // Settings / Grouped list
 export * from './settings-list';
+export { Item } from './item';
+export type { ItemProps } from './item';
+export { Kbd } from './kbd';
+export type { KbdProps } from './kbd';
 
 // Overlay components
 export * as Admonition from './admonition';
@@ -89,6 +103,15 @@ 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 { AlertDialog, AlertDialogHost, confirm } from './alert-dialog';
+export type {
+  AlertDialogProps,
+  AlertDialogActionStyle,
+  ConfirmOptions,
+} from './alert-dialog';
+export { Command } from './command';
+export type { CommandProps, CommandItem } from './command';
 
 // Code (mono)
 export * as Code from './code';

package/src/index.web.ts

@@ -72,6 +72,16 @@ export { IconCircle } from './icon-circle';
 export * as TextField from './text-field';
 export * as SegmentedControl from './segmented-control';
 export { SearchInput } from './search-input';
+export { Label } from './label';
+export type { LabelProps } from './label';
+export { Field } from './field';
+export type { FieldProps } from './field';
+export { InputGroup } from './input-group';
+export type { InputGroupProps, InputGroupAddonProps } from './input-group';
+export { Slider } from './slider';
+export type { SliderProps } from './slider';
+export { Combobox } from './combobox/index.web';
+export type { ComboboxProps, ComboboxOption } from './combobox/index.web';
 
 // Bottom sheet
 export { BottomSheet } from './bottom-sheet';
@@ -87,6 +97,10 @@ export * as Accordion from './accordion';
 
 // Settings / Grouped list
 export * from './settings-list';
+export { Item } from './item';
+export type { ItemProps } from './item';
+export { Kbd } from './kbd';
+export type { KbdProps } from './kbd';
 
 // Overlay components
 export * as Admonition from './admonition';
@@ -94,6 +108,15 @@ 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 { AlertDialog, AlertDialogHost, confirm } from './alert-dialog/index.web';
+export type {
+  AlertDialogProps,
+  AlertDialogActionStyle,
+  ConfirmOptions,
+} from './alert-dialog/index.web';
+export { Command } from './command/index.web';
+export type { CommandProps, CommandItem } from './command/index.web';
 
 // Code (mono)
 export * as Code from './code';

package/src/input-group/InputGroup.stories.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { InputGroup } from './InputGroup';
+import * as TextField from '../text-field';
+import { Button } from '../button';
+import { Kbd } from '../kbd';
+
+const meta: Meta = {
+  title: 'Forms/InputGroup',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const TextAddons: Story = {
+  render: () => {
+    const [v, setV] = useState('');
+    return (
+      <View style={{ width: 360 }}>
+        <InputGroup>
+          <InputGroup.Addon>https://</InputGroup.Addon>
+          <TextField.Input label="Domain" value={v} onChangeText={setV} placeholder="oxy" />
+          <InputGroup.Addon>.so</InputGroup.Addon>
+        </InputGroup>
+      </View>
+    );
+  },
+};
+
+export const ButtonAddon: Story = {
+  render: () => {
+    const [v, setV] = useState('');
+    return (
+      <View style={{ width: 360 }}>
+        <InputGroup>
+          <TextField.Input label="Invite" value={v} onChangeText={setV} placeholder="email" />
+          <InputGroup.Addon divider noPadding>
+            <Button variant="ghost" size="small" onPress={() => {}}>
+              Send
+            </Button>
+          </InputGroup.Addon>
+        </InputGroup>
+      </View>
+    );
+  },
+};
+
+export const ShortcutHint: Story = {
+  render: () => {
+    const [v, setV] = useState('');
+    return (
+      <View style={{ width: 360 }}>
+        <InputGroup>
+          <TextField.Input label="Search" value={v} onChangeText={setV} placeholder="Search…" />
+          <InputGroup.Addon>
+            <Kbd size="sm">⌘K</Kbd>
+          </InputGroup.Addon>
+        </InputGroup>
+      </View>
+    );
+  },
+};

package/src/input-group/InputGroup.tsx

@@ -0,0 +1,184 @@
+import React, {
+  createContext,
+  memo,
+  useContext,
+  useMemo,
+} from 'react';
+import { Platform, StyleSheet, View } 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 { InputGroupAddonProps, InputGroupProps } from './types';
+
+const SIZE_CONFIG = {
+  sm: { minHeight: 36, paddingHorizontal: space.sm },
+  md: { minHeight: 44, paddingHorizontal: space.md },
+  lg: { minHeight: 52, paddingHorizontal: space.lg },
+} as const;
+
+interface InputGroupContextValue {
+  size: 'sm' | 'md' | 'lg';
+}
+
+const InputGroupContext = createContext<InputGroupContextValue>({ size: 'md' });
+InputGroupContext.displayName = 'InputGroupContext';
+
+const AddonComponent = function InputGroupAddon({
+  children,
+  divider = false,
+  noPadding = false,
+  style,
+  testID,
+}: InputGroupAddonProps) {
+  const theme = useTheme();
+  const { size } = useContext(InputGroupContext);
+  const cfg = SIZE_CONFIG[size];
+
+  // Plain string/number content is wrapped in a themed Text so it reads as a
+  // subdued addon label (and never trips RN's "raw text outside <Text>" rule).
+  const content =
+    typeof children === 'string' || typeof children === 'number' ? (
+      <Text
+        numberOfLines={1}
+        style={{ color: theme.colors.textSecondary, fontSize: fontSize.md }}>
+        {children}
+      </Text>
+    ) : (
+      children
+    );
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.addon,
+        !noPadding && { paddingHorizontal: cfg.paddingHorizontal },
+        style,
+      ]}>
+      {divider ? (
+        <View
+          style={[styles.divider, { backgroundColor: theme.colors.borderLight }]}
+        />
+      ) : null}
+      {content}
+    </View>
+  );
+};
+
+export const Addon = memo(AddonComponent);
+Addon.displayName = 'InputGroup.Addon';
+
+/**
+ * Horizontal group that wraps an input with leading/trailing addons (icons,
+ * text, buttons, `Kbd`). Renders a single bordered chrome — radii, border,
+ * focus/error colors match Bloom's `TextField` so a group reads as one field.
+ * The input child stretches to fill the middle.
+ *
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroup.Addon>https://</InputGroup.Addon>
+ *   <TextField.Input label="Domain" value={v} onChangeText={setV} />
+ *   <InputGroup.Addon divider>
+ *     <Button size="small" variant="ghost" onPress={go}>Go</Button>
+ *   </InputGroup.Addon>
+ * </InputGroup>
+ * ```
+ */
+const InputGroupComponent = function InputGroup({
+  children,
+  isInvalid = false,
+  disabled = false,
+  size = 'md',
+  style,
+  testID,
+}: InputGroupProps) {
+  const theme = useTheme();
+  const cfg = SIZE_CONFIG[size];
+  const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
+  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } =
+    useInteractionState();
+
+  const borderColor = isInvalid
+    ? theme.colors.negative
+    : focused
+      ? theme.colors.primary
+      : hovered
+        ? theme.colors.borderLight
+        : 'transparent';
+
+  const backgroundColor = isInvalid
+    ? theme.colors.negativeSubtle
+    : theme.colors.contrast50;
+
+  const ctx = useMemo<InputGroupContextValue>(() => ({ size }), [size]);
+
+  const webHandlers: Record<string, unknown> =
+    Platform.OS === 'web'
+      ? {
+          onMouseOver: onHoverIn,
+          onMouseOut: onHoverOut,
+        }
+      : {};
+
+  return (
+    <InputGroupContext.Provider value={ctx}>
+      <View
+        testID={testID}
+        accessibilityState={disabled ? { disabled: true } : undefined}
+        // Capture focus bubbling from a nested input so the whole chrome
+        // reflects focus — RN-web bubbles focus/blur, native does not but a
+        // nested TextInput's own focus ring is sufficient there.
+        onFocus={onFocus}
+        onBlur={onBlur}
+        {...webHandlers}
+        style={[
+          styles.container,
+          {
+            minHeight: cfg.minHeight,
+            backgroundColor,
+            borderColor,
+          },
+          disabled && styles.disabled,
+          style,
+        ]}>
+        {children}
+      </View>
+    </InputGroupContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    width: '100%',
+    borderRadius: borderRadius.sm,
+    borderWidth: 2,
+    overflow: 'hidden',
+  },
+  addon: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: space.xs,
+    flexShrink: 0,
+    position: 'relative',
+  },
+  divider: {
+    position: 'absolute',
+    left: 0,
+    top: space.sm,
+    bottom: space.sm,
+    width: StyleSheet.hairlineWidth,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+const InputGroupBase = memo(InputGroupComponent);
+InputGroupBase.displayName = 'InputGroup';
+
+export const InputGroup = Object.assign(InputGroupBase, { Addon });

package/src/input-group/index.ts

@@ -0,0 +1,2 @@
+export { InputGroup, Addon } from './InputGroup';
+export type { InputGroupProps, InputGroupAddonProps } from './types';

package/src/input-group/types.ts

@@ -0,0 +1,36 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface InputGroupAddonProps {
+  /** Addon content (icon, text, `Button`, `Kbd`, etc.). */
+  children: React.ReactNode;
+  /**
+   * Visually separate the addon from the input with a hairline divider on the
+   * inner edge. Defaults to `false` (addons that are buttons usually want
+   * this `true`; plain text/icons usually don't).
+   */
+  divider?: boolean;
+  /**
+   * Remove the default horizontal padding (useful when the addon is an
+   * interactive control that brings its own hit area / padding).
+   */
+  noPadding?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface InputGroupProps {
+  /**
+   * Group children. Place `InputGroup.Addon` elements before/after the input
+   * (a Bloom `TextField.Input`, a `SearchInput`, or any control). The middle
+   * child stretches to fill.
+   */
+  children: React.ReactNode;
+  /** Invalid state — renders the error-colored border. */
+  isInvalid?: boolean;
+  /** Disabled styling. */
+  disabled?: boolean;
+  /** Size affects height + horizontal padding. Defaults to `'md'`. */
+  size?: 'sm' | 'md' | 'lg';
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/item/Item.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Item } from './Item';
+import { Badge } from '../badge';
+import { Person_Stroke2_Corner0_Rounded as PersonIcon } from '../icons/Person';
+
+const meta: Meta<typeof Item> = {
+  title: 'Components/Item',
+  component: Item,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Item>;
+
+export const Basic: Story = {
+  args: { title: 'Profile', subtitle: 'Manage your account details' },
+};
+
+export const Pressable: Story = {
+  render: () => (
+    <View style={{ width: 360 }}>
+      <Item
+        title="Account"
+        subtitle="Email, password, sessions"
+        leading={<PersonIcon size="md" />}
+        trailing={<Badge content={3} color="primary" />}
+        onPress={() => {}}
+      />
+    </View>
+  ),
+};
+
+export const Density: Story = {
+  render: () => (
+    <View style={{ width: 360, gap: 4 }}>
+      <Item title="Comfortable" subtitle="default density" />
+      <Item title="Compact" density="compact" />
+    </View>
+  ),
+};