@oxyhq/bloom 0.6.24 → 0.7.1

package/src/popover/index.web.tsx

@@ -0,0 +1,325 @@
+import React, {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Portal } from '../portal/index.web';
+import { PopoverContext, usePopoverContext } from './context';
+import type {
+  PopoverContentProps,
+  PopoverControlProps,
+  PopoverPlacement,
+  PopoverRootProps,
+  PopoverTriggerProps,
+} from './types';
+
+export type {
+  PopoverControlProps,
+  PopoverContentProps,
+  PopoverTriggerProps,
+  PopoverRootProps,
+  PopoverPlacement,
+  PopoverTriggerRenderProps,
+  PopoverTriggerState,
+} from './types';
+
+export { usePopoverContext };
+
+/**
+ * Web self-contained control. Unlike native (which proxies a `BottomSheet`
+ * via `useDialogControl`), the web popover owns its own open state and
+ * exposes a `DialogControlProps`-shaped handle for API parity.
+ */
+export function usePopoverControl(): PopoverControlProps {
+  const id = useId();
+  const [, setIsOpen] = useState(false);
+  const ref = useRef<{ open: () => void; close: (cb?: () => void) => void }>({
+    open: () => {},
+    close: () => {},
+  });
+
+  return useMemo<PopoverControlProps>(
+    () => ({
+      id,
+      ref,
+      open: () => setIsOpen(true),
+      close: (cb) => {
+        setIsOpen(false);
+        cb?.();
+      },
+    }),
+    [id],
+  );
+}
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function Root({ children, control }: PopoverRootProps) {
+  const id = useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef<View | null>(null);
+  const refHandle = useRef<{ open: () => void; close: (cb?: () => void) => void }>({
+    open: () => {},
+    close: () => {},
+  });
+
+  const activeControl = useMemo<PopoverControlProps>(
+    () =>
+      control ?? {
+        id,
+        ref: refHandle,
+        open: () => setIsOpen(true),
+        close: (cb) => {
+          setIsOpen(false);
+          cb?.();
+        },
+      },
+    [control, id],
+  );
+
+  // When an external control is provided, mirror its open/close into local
+  // state so Content renders. The external control still drives `open/close`.
+  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, isOpen } = usePopoverContext();
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+
+  const rendered = children({
+    control,
+    state: { hovered, focused, pressed: false },
+    props: {
+      onPress: () => control.open(),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      accessibilityLabel: label,
+      accessibilityRole: 'button',
+      'aria-expanded': isOpen,
+      'aria-haspopup': 'dialog',
+    },
+  });
+
+  return (
+    <View
+      ref={triggerRef}
+      collapsable={false}
+      style={styles.triggerWrap}
+      {...({
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+      } as Record<string, () => void>)}>
+      {rendered}
+    </View>
+  );
+}
+
+function resolvePosition(
+  rect: Rect,
+  panel: { width: number; height: number },
+  placement: PopoverPlacement,
+  offset: number,
+): { left: number; top: number } {
+  const viewportW = typeof window !== 'undefined' ? window.innerWidth : 0;
+  const viewportH = typeof window !== 'undefined' ? window.innerHeight : 0;
+  const isTop = placement.startsWith('top');
+
+  let top = isTop ? rect.y - panel.height - offset : rect.y + rect.height + offset;
+
+  // Flip if it would overflow the chosen edge.
+  if (!isTop && top + panel.height > viewportH && rect.y - panel.height - offset > 0) {
+    top = rect.y - panel.height - offset;
+  } else if (isTop && top < 0 && rect.y + rect.height + offset + panel.height <= viewportH) {
+    top = rect.y + rect.height + offset;
+  }
+
+  let left: number;
+  if (placement.endsWith('end')) {
+    left = rect.x + rect.width - panel.width;
+  } else if (placement.endsWith('start')) {
+    left = rect.x;
+  } else {
+    // bare 'bottom' / 'top' → center-align under the trigger.
+    left = rect.x + rect.width / 2 - panel.width / 2;
+  }
+
+  // Clamp horizontally into the viewport with an 8px gutter.
+  const gutter = 8;
+  left = Math.max(gutter, Math.min(left, viewportW - panel.width - gutter));
+  top = Math.max(gutter, top);
+
+  return { left, top };
+}
+
+export function Content({
+  children,
+  label = 'Popover',
+  placement = 'bottom-start',
+  offset = 6,
+  minWidth,
+  maxWidth = 360,
+  dismissible = true,
+  style,
+  testID,
+}: PopoverContentProps) {
+  const theme = useTheme();
+  const { control, isOpen, triggerRef } = usePopoverContext();
+  const [rect, setRect] = useState<Rect | null>(null);
+  const [panelSize, setPanelSize] = useState<{ width: number; height: number } | null>(null);
+  const panelRef = useRef<View | null>(null);
+
+  const measure = useCallback(() => {
+    const node = triggerRef.current;
+    if (!node) return;
+    node.measureInWindow((x, y, width, height) => {
+      setRect({ x, y, width, height });
+    });
+  }, [triggerRef]);
+
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setRect(null);
+      setPanelSize(null);
+      return;
+    }
+    measure();
+  }, [isOpen, measure]);
+
+  // Reposition on scroll / resize while open.
+  useEffect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+    const onChange = () => measure();
+    window.addEventListener('resize', onChange);
+    window.addEventListener('scroll', onChange, true);
+    return () => {
+      window.removeEventListener('resize', onChange);
+      window.removeEventListener('scroll', onChange, true);
+    };
+  }, [isOpen, measure]);
+
+  // Escape to dismiss.
+  useEffect(() => {
+    if (!isOpen || !dismissible || typeof document === 'undefined') return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        control.close();
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [isOpen, dismissible, control]);
+
+  if (!isOpen || !rect) return null;
+
+  const resolvedMinWidth = minWidth ?? rect.width;
+  const position = panelSize
+    ? resolvePosition(rect, panelSize, placement, offset)
+    : { left: rect.x, top: rect.y + rect.height + offset };
+
+  return (
+    <Portal>
+      {dismissible ? (
+        <Pressable
+          style={styles.backdrop}
+          onPress={() => control.close()}
+          accessibilityLabel="Dismiss popover"
+        />
+      ) : null}
+      <View
+        ref={panelRef}
+        accessibilityRole="none"
+        aria-label={label}
+        testID={testID}
+        onLayout={(e) =>
+          setPanelSize({
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+          })
+        }
+        style={[
+          styles.panel,
+          {
+            left: position.left,
+            top: position.top,
+            minWidth: resolvedMinWidth,
+            maxWidth,
+            backgroundColor: theme.isDark
+              ? theme.colors.backgroundSecondary
+              : theme.colors.background,
+            borderColor: theme.colors.borderLight,
+            shadowColor: theme.colors.shadow,
+            // Hide until measured to avoid a one-frame jump.
+            opacity: panelSize ? 1 : 0,
+          },
+          style,
+        ]}>
+        {children}
+      </View>
+    </Portal>
+  );
+}
+
+const styles = StyleSheet.create({
+  triggerWrap: {
+    alignSelf: 'flex-start',
+  },
+  backdrop: {
+    position: 'fixed' as 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 50,
+    pointerEvents: 'auto',
+  },
+  panel: {
+    position: 'fixed' as 'absolute',
+    zIndex: 60,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingVertical: 4,
+    overflow: 'hidden',
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    pointerEvents: 'auto',
+  },
+});

package/src/popover/types.ts

@@ -0,0 +1,60 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { DialogControlProps } from '../dialog/types';
+
+export type PopoverPlacement = 'bottom' | 'top' | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+export type PopoverControlProps = DialogControlProps;
+
+export interface PopoverTriggerState {
+  hovered: boolean;
+  focused: boolean;
+  pressed: boolean;
+}
+
+export interface PopoverTriggerRenderProps {
+  control: PopoverControlProps;
+  state: PopoverTriggerState;
+  props: {
+    onPress: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    accessibilityLabel?: string;
+    accessibilityRole?: 'button';
+    'aria-expanded'?: boolean;
+    'aria-haspopup'?: 'dialog';
+  };
+}
+
+export interface PopoverTriggerProps {
+  /** Render-prop receiving the control + interaction state + a11y props. */
+  children: (renderProps: PopoverTriggerRenderProps) => React.ReactElement;
+  /** Accessibility label for the trigger. */
+  label?: string;
+}
+
+export interface PopoverContentProps {
+  children: React.ReactNode;
+  /** Accessibility label for the floating panel. */
+  label?: string;
+  /**
+   * Preferred placement relative to the trigger (web only — native presents a
+   * bottom sheet). Defaults to `'bottom-start'`.
+   */
+  placement?: PopoverPlacement;
+  /** Gap in px between the trigger and the panel (web). Defaults to `6`. */
+  offset?: number;
+  /** Minimum panel width in px (web). Defaults to the trigger width. */
+  minWidth?: number;
+  /** Max panel width in px (web). Defaults to `360`. */
+  maxWidth?: number;
+  /** Dismiss on outside press / Escape. Defaults to `true`. */
+  dismissible?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface PopoverRootProps {
+  children: React.ReactNode;
+  /** Optionally supply your own control (from `usePopoverControl`). */
+  control?: PopoverControlProps;
+}

package/src/react-native-css.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Ambient declaration for `react-native-css/native-internal`.
+ *
+ * react-native-css is NOT a Bloom dependency — it arrives transitively via the
+ * host app's NativeWind install (NativeWind 5 is built on react-native-css@3).
+ * Bloom's `native-root-vars.native.ts` statically imports `rootVariables` from
+ * this subpath so Metro resolves the `import` export condition to the package's
+ * `module` build — the SAME family instance the react-native-css renderer
+ * (`varResolver`) subscribes to. A runtime `require()` would resolve the
+ * `require` condition to the separate `commonjs` build, whose `rootVariables`
+ * is a distinct, un-observed family instance (see the file-level comment in
+ * `native-root-vars.native.ts`).
+ *
+ * Because the package isn't installed in Bloom, `tsc` can't see its published
+ * types, so we declare the slice we use here — typed to match react-native-css
+ * @3.0.7's `dist/typescript/.../native-internal/root.d.ts` exactly (no `any`,
+ * no shims). This file is `.native`-only in spirit; the web fork never imports
+ * the subpath, so on web bundlers the static import is never reached.
+ */
+declare module 'react-native-css/native-internal' {
+  /**
+   * A leaf style value. Mirrors react-native-css's `compiler.types`
+   * `StyleDescriptor`. Bloom only ever writes string HSL triples / `hsl(...)`
+   * strings, but the family is typed against the full descriptor union.
+   */
+  type StyleDescriptor =
+    | string
+    | number
+    | boolean
+    | undefined
+    | StyleDescriptor[];
+
+  /**
+   * A media-conditioned predicate guarding a variable value. Bloom never emits
+   * conditioned values (its preset vars are unconditional), so the inner shape
+   * is intentionally opaque here — declaring the full recursive union would
+   * duplicate a large compiler type we never construct.
+   */
+  type MediaCondition = readonly unknown[];
+
+  /**
+   * A single variable value: a `[value]` tuple, optionally guarded by media
+   * conditions. Mirrors react-native-css's `VariableValue`. `rootVariables(...).set`
+   * takes a `VariableValue[]` (the variable's full ordered value list).
+   */
+  type VariableValue =
+    | readonly [StyleDescriptor]
+    | readonly [StyleDescriptor, readonly MediaCondition[]];
+
+  /**
+   * The reactive cell react-native-css renders from. `rootVariables(name)`
+   * returns one of these; `.set` replaces its value list and notifies the
+   * renderer's subscribed effects. Mirrors `Observable<StyleDescriptor, VariableValue[]>`.
+   */
+  interface Observable {
+    set: (value: readonly VariableValue[]) => void;
+  }
+
+  /**
+   * The GLOBAL root-variable family — `rootVariables(name)` returns the
+   * observable for the bare variable `name` (no leading `--`). This is the
+   * exact callable react-native-css's compiled `:root {}` / `@theme` vars are
+   * written through (`StyleCollection.inject` → `rootVariables(name).set(...)`).
+   */
+  export const rootVariables: ((name: string) => Observable) & {
+    delete(name: string): boolean;
+    clear(): void;
+  };
+}

package/src/slider/Slider.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Slider } from './Slider';
+import { Text } from '../typography';
+
+const meta: Meta = {
+  title: 'Components/Slider',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState(40);
+    return (
+      <View style={{ width: 320, gap: 8 }}>
+        <Text>{`Value: ${value}`}</Text>
+        <Slider value={value} onValueChange={setValue} min={0} max={100} />
+      </View>
+    );
+  },
+};
+
+export const Stepped: Story = {
+  render: () => {
+    const [value, setValue] = useState(2);
+    return (
+      <View style={{ width: 320, gap: 8 }}>
+        <Text>{`Step 0–5: ${value}`}</Text>
+        <Slider value={value} onValueChange={setValue} min={0} max={5} step={1} />
+      </View>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ width: 320 }}>
+      <Slider value={60} onValueChange={() => {}} disabled />
+    </View>
+  ),
+};