@isoline-ui/react-native 0.0.0-stage → 1.0.0

package/src/components/menu-sheet.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { SheetScrollView } from './sheet-frame.tsx';
+import { BottomSheet } from './bottom-sheet.tsx';
+import type { IconProps } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import {
+  type MaterialOptions,
+  useIsolinePlatform,
+  useRipple,
+  useThemeColors,
+} from '../provider.tsx';
+
+export interface MenuSheetItem {
+  id: string;
+  icon: React.ComponentType<IconProps>;
+  label: string;
+  onPress: () => void;
+  /** Overrides the icon colour, for a state like "starred". */
+  color?: string;
+  /** Filled icons read as "on" for toggles. */
+  fill?: string;
+}
+
+export interface MenuSheetProps extends MaterialOptions {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  /** A line under the title saying what the actions would act on. */
+  subject?: string;
+  items: MenuSheetItem[];
+}
+
+/**
+ * A sheet of actions, each with its symbol and its name.
+ *
+ * The overflow half of a toolbar: what does not fit on the pill — or what an
+ * icon on its own would not explain — is listed here instead, where there is
+ * room for the word that says what it does. Rows are the same size and shape
+ * as the pickers' (`SnoozeSheet`, `MoveSheet`), so an action list and a value
+ * list do not read as two different kinds of sheet.
+ */
+export function MenuSheet({
+  visible,
+  onClose,
+  title,
+  subject,
+  items,
+  ...materialOptions
+}: MenuSheetProps) {
+  return (
+    <BottomSheet {...materialOptions} visible={visible} onClose={onClose} maxHeight="85%">
+      <SheetScrollView style={{ flexGrow: 0 }} keyboardShouldPersistTaps="handled">
+        <View className="mb-2 gap-1 px-2">
+          <Text variant="heading">{title}</Text>
+          {subject ? (
+            <Text variant="caption" numberOfLines={1}>
+              {subject}
+            </Text>
+          ) : null}
+        </View>
+
+        <MenuSheetRows items={items} onClose={onClose} />
+      </SheetScrollView>
+    </BottomSheet>
+  );
+}
+
+/** A menu sheet's rows on their own, for a sheet that shows more above its actions. */
+export function MenuSheetRows({
+  items,
+  onClose,
+}: {
+  items: MenuSheetItem[];
+  onClose: () => void;
+}) {
+  const ios = useIsolinePlatform() === 'ios';
+  const colors = useThemeColors();
+  const ripple = useRipple();
+
+  return (
+    <View
+      className="gap-1"
+      style={
+        ios
+          ? {
+              borderRadius: 14,
+              overflow: 'hidden',
+              backgroundColor: colors.surfaceContainerLowest,
+            }
+          : undefined
+      }
+    >
+      {items.map((item) => {
+        const Icon = item.icon;
+
+        return (
+          <View key={item.id} className="overflow-hidden rounded-2xl">
+            <Pressable
+              onPress={() => {
+                // Closed first, so the sheet is gone by the time an action
+                // that leaves selection mode takes the toolbar with it.
+                onClose();
+                item.onPress();
+              }}
+              android_ripple={{ color: ripple.onNeutral }}
+              style={
+                ios
+                  ? {
+                      borderRadius: 0,
+                      borderBottomWidth: 1,
+                      borderBottomColor: colors.outlineVariant,
+                    }
+                  : undefined
+              }
+              accessibilityRole="button"
+              className="flex-row items-center gap-3 rounded-2xl px-4 py-4 active:bg-accent"
+            >
+              <Icon
+                size={22}
+                color={item.color ?? colors.onSurfaceVariant}
+                {...(item.fill ? { fill: item.fill } : null)}
+              />
+              <Text className="flex-1 text-base font-medium">{item.label}</Text>
+            </Pressable>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/panel-sheet.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Platform, BackHandler, useWindowDimensions, View } from 'react-native';
+import { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { SheetFrame, SheetScrollView } from './sheet-frame.tsx';
+import { useSheet } from './sheet-transition.ts';
+import { BottomSheet as WebSheet } from './bottom-sheet-web.tsx';
+import { type MaterialOptions, elevation } from '../provider.tsx';
+
+/** Room left above a sheet that has grown to the top, so the scrim still shows. */
+const TOP_GAP = 24;
+
+/**
+ * A bottom sheet for typing into: the same frame as `BottomSheet`, drawn
+ * inside the screen rather than in a `Modal`.
+ *
+ * Android draws edge to edge, so nothing resizes a window for the keyboard
+ * any more; a sheet has to lift itself. Reanimated reads the keyboard's
+ * height for the app's own window, and a `Modal` is a window of its own — so
+ * a sheet with a text field lives here, rendered last in its screen, and
+ * rides up on the keyboard as it opens. Its content scrolls once the keyboard
+ * leaves it too little room. Sheets without a text field use `BottomSheet`.
+ */
+function NativePanelSheet({
+  visible,
+  onClose,
+  children,
+  ...materialOptions
+}: {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+} & MaterialOptions) {
+  const insets = useSafeAreaInsets();
+  const window = useWindowDimensions();
+  const keyboard = useAnimatedKeyboard();
+  const sheet = useSheet(visible, onClose);
+
+  React.useEffect(() => {
+    if (!visible) return;
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      onClose();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [visible, onClose]);
+
+  const lift = useAnimatedStyle(() => ({
+    transform: [{ translateY: -keyboard.height.value }],
+  }));
+  const panel = useAnimatedStyle(() => ({
+    // Under the keyboard the gesture inset is covered anyway.
+    paddingBottom: keyboard.height.value > 0 ? 12 : insets.bottom + 16,
+    maxHeight: window.height - keyboard.height.value - insets.top - TOP_GAP,
+  }));
+
+  if (!sheet.mounted) return null;
+
+  return (
+    // Above the screen's own elevated views: on Android, elevation also orders.
+    <View className="absolute inset-0" style={{ zIndex: 50, elevation: elevation.level3 }}>
+      <SheetFrame
+        {...materialOptions}
+        sheet={sheet}
+        visible={visible}
+        onClose={onClose}
+        lift={lift}
+        panelStyle={panel}
+      >
+        <SheetScrollView
+          keyboardShouldPersistTaps="handled"
+          style={{ flexGrow: 0, marginHorizontal: -16 }}
+          contentContainerStyle={{ paddingHorizontal: 16 }}
+        >
+          {children}
+        </SheetScrollView>
+      </SheetFrame>
+    </View>
+  );
+}
+
+export interface PanelSheetProps extends MaterialOptions {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+export function PanelSheet(props: PanelSheetProps) {
+  return Platform.OS === 'web' ? <WebSheet {...props} /> : <NativePanelSheet {...props} />;
+}

package/src/components/password-visibility.tsx

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+import { Eye, EyeOff } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+import { useLabels, useRipple, useThemeColors } from '../provider.tsx';
+
+/** Shared affordance for both input styles; credential policy remains caller-owned. */
+export function PasswordVisibility({
+  revealed,
+  onPress,
+}: {
+  revealed: boolean;
+  onPress: () => void;
+}) {
+  const labels = useLabels();
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const Icon = revealed ? EyeOff : Eye;
+  return (
+    <View
+      style={{ position: 'absolute', right: 4, top: 0, bottom: 0, justifyContent: 'center' }}
+    >
+      <Pressable
+        onPress={onPress}
+        android_ripple={{ color: ripple.onNeutral, borderless: true }}
+        accessibilityRole="button"
+        accessibilityLabel={revealed ? labels.hidePassword : labels.showPassword}
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Icon size={20} color={colors.onSurfaceVariant} />
+      </Pressable>
+    </View>
+  );
+}

package/src/components/popover-layout.ts

@@ -0,0 +1,47 @@
+export interface AnchorRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export interface PopoverViewport {
+  width: number;
+  height: number;
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+/** Clamp and flip an anchored surface without drawing actions outside the usable window. */
+export function placePopover(
+  anchor: AnchorRect,
+  size: { width: number; height: number },
+  viewport: PopoverViewport,
+  placement: 'top' | 'bottom' = 'bottom',
+  gap = 8,
+) {
+  const left = (viewport.left ?? 0) + 12,
+    right = viewport.width - (viewport.right ?? 0) - 12;
+  const top = (viewport.top ?? 0) + 12,
+    bottom = viewport.height - (viewport.bottom ?? 0) - 12;
+  const width = Math.max(0, Math.min(size.width, right - left));
+  const height = Math.max(0, Math.min(size.height, bottom - top));
+  const below = bottom - (anchor.y + anchor.height + gap),
+    above = anchor.y - gap - top;
+  const side =
+    placement === 'bottom'
+      ? height > below && above > below
+        ? 'top'
+        : 'bottom'
+      : height > above && below > above
+        ? 'bottom'
+        : 'top';
+  const y = side === 'bottom' ? anchor.y + anchor.height + gap : anchor.y - gap - height;
+  return {
+    left: Math.max(left, Math.min(anchor.x + anchor.width - width, right - width)),
+    top: Math.max(top, Math.min(y, bottom - height)),
+    width,
+    maxHeight: bottom - top,
+    placement: side,
+  };
+}

package/src/components/popover.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  Modal,
+  ScrollView,
+  View,
+  useWindowDimensions,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  Surface,
+  ThemeScope,
+  useIsolinePlatform,
+  useLabels,
+  type MaterialOptions,
+} from '../provider.tsx';
+import { Pressable } from './pressable.tsx';
+import { placePopover, type AnchorRect } from './popover-layout.ts';
+export type { AnchorRect } from './popover-layout.ts';
+export type PopoverAnchorRef = React.RefObject<React.ComponentRef<typeof View> | null>;
+export interface PopoverProps extends MaterialOptions {
+  visible: boolean;
+  onClose: () => void;
+  anchorRef?: PopoverAnchorRef;
+  anchor?: AnchorRect;
+  placement?: 'top' | 'bottom';
+  width?: number;
+  accessibilityLabel: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onShow?: () => void;
+}
+/** Controlled anchored surface. Native Modal provides back dismissal; web adds focus trapping/Escape. */
+export function Popover({
+  visible,
+  onClose,
+  anchorRef,
+  anchor,
+  placement = 'bottom',
+  width = 300,
+  accessibilityLabel,
+  children,
+  style,
+  onShow,
+  material = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: PopoverProps) {
+  const window = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const labels = useLabels();
+  const ios = useIsolinePlatform() === 'ios';
+  const [measured, setMeasured] = React.useState<AnchorRect | null>(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    if (!visible) {
+      setMeasured(null);
+      return;
+    }
+    let active = true;
+    if (anchor) return;
+    if (anchorRef?.current)
+      anchorRef.current.measureInWindow((x, y, width, height) => {
+        if (active) setMeasured({ x, y, width, height });
+      });
+    else setMeasured({ x: window.width / 2, y: window.height / 2, width: 0, height: 0 });
+    return () => {
+      active = false;
+    };
+  }, [visible, anchor, anchorRef, window.width, window.height]);
+  const target = anchor ?? measured;
+  const layout = placePopover(
+    target ?? { x: 0, y: 0, width: 0, height: 0 },
+    { width, height },
+    { ...window, ...insets },
+    placement,
+  );
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      onShow={onShow}
+    >
+      <ThemeScope style={{ flex: 1 }}>
+        <Pressable
+          testID="popover-backdrop"
+          accessibilityLabel={labels.close}
+          accessibilityRole="button"
+          onPress={onClose}
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            backgroundColor: 'rgba(0,0,0,0.2)',
+          }}
+        />
+        <View
+          testID="isoline-popover-panel"
+          accessibilityViewIsModal
+          onAccessibilityEscape={onClose}
+          accessibilityLabel={accessibilityLabel}
+          style={{
+            position: 'absolute',
+            left: layout.left,
+            top: layout.top,
+            width: layout.width,
+            maxHeight: layout.maxHeight,
+            opacity: target ? 1 : 0,
+          }}
+        >
+          <Surface
+            material={ios ? material : 'solid'}
+            glassStyle={glassStyle}
+            tintColor={tintColor}
+            fallbackColor={fallbackColor}
+            interactive={interactive}
+            style={[{ borderRadius: 20, maxHeight: layout.maxHeight }, style]}
+          >
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              style={{ flexGrow: 0, maxHeight: Math.max(0, layout.maxHeight - 2) }}
+              onContentSizeChange={(_width, h) => setHeight(h)}
+              contentContainerStyle={{ padding: 12 }}
+            >
+              {children}
+            </ScrollView>
+          </Surface>
+        </View>
+      </ThemeScope>
+    </Modal>
+  );
+}

package/src/components/pressable.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import {
+  Platform,
+  Pressable as RNPressable,
+  StyleSheet,
+  type PressableProps,
+  type ViewStyle,
+} from 'react-native';
+import Animated, { type AnimatedProps } from 'react-native-reanimated';
+
+import { useIsolinePlatform } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/**
+ * Shared touch feedback: contained ripples on Android, a pressed opacity on
+ * iOS. Preserve the caller's style callback, handlers and animated styles.
+ */
+type PressableRef = React.ElementRef<typeof RNPressable>;
+export const Pressable: React.ForwardRefExoticComponent<
+  PressableProps & React.RefAttributes<PressableRef>
+> = React.forwardRef<React.ElementRef<typeof RNPressable>, PressableProps>(function Pressable(
+  { className, android_ripple, style, disabled, onKeyDown, accessibilityState, ...props },
+  ref,
+) {
+  const ios = useIsolinePlatform() === 'ios';
+  const web = Platform.OS === 'web';
+  const classNames = cn(
+    // Use browser modality detection, including keyboard use after a tap. Keep
+    // the ring inside shaped/connected controls so clipping cannot cut it off.
+    web &&
+      'outline-0 focus-visible:[outline-style:solid] focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-primary',
+    Platform.OS === 'android' &&
+      android_ripple &&
+      !android_ripple.borderless &&
+      'overflow-hidden',
+    className,
+  );
+  return (
+    <RNPressable
+      ref={ref}
+      disabled={disabled}
+      onKeyDown={
+        web
+          ? (event) => {
+              if (disabled) return;
+              onKeyDown?.(event);
+              const role = props.role ?? props.accessibilityRole;
+              // RN Web's PressResponder only treats role=button as space-activatable.
+              // Semantic toggles still need the standard Space behavior on the web.
+              if (
+                !event.defaultPrevented &&
+                event.nativeEvent.key === ' ' &&
+                role &&
+                ['checkbox', 'switch', 'radio', 'menuitemradio', 'menuitemcheckbox'].includes(
+                  role,
+                )
+              ) {
+                event.preventDefault();
+                const target = event.currentTarget as unknown as { click?: () => void };
+                target.click?.();
+              }
+            }
+          : onKeyDown
+      }
+      {...(web
+        ? {
+            'aria-busy': accessibilityState?.busy,
+            'aria-checked': accessibilityState?.checked,
+            'aria-disabled': disabled || accessibilityState?.disabled,
+            'aria-expanded': accessibilityState?.expanded,
+            'aria-selected': accessibilityState?.selected,
+          }
+        : { accessibilityState })}
+      android_ripple={android_ripple}
+      // NativeWind's web adapter cannot merge className into a style callback.
+      // Supply RN Web's compiled-class marker inside the callback instead.
+      className={web ? undefined : classNames}
+      style={
+        ios || Platform.OS === 'web'
+          ? (state) => {
+              const resolved = typeof style === 'function' ? style(state) : style;
+              const opacity = StyleSheet.flatten(resolved)?.opacity;
+              // Do not brighten translucent controls or replace animated opacity.
+              const pressedOpacity =
+                opacity === undefined || typeof opacity === 'number'
+                  ? (opacity ?? 1) * 0.65
+                  : undefined;
+              return [
+                web && classNames
+                  ? ({ $$css: true, [classNames]: classNames } as ViewStyle)
+                  : undefined,
+                resolved,
+                state.pressed && !disabled && pressedOpacity !== undefined
+                  ? { opacity: pressedOpacity }
+                  : undefined,
+              ];
+            }
+          : style
+      }
+      {...props}
+    />
+  );
+});
+
+/** For a Pressable whose shape or radius is driven by a Reanimated style. */
+export const AnimatedPressable: React.ComponentType<
+  Omit<AnimatedProps<PressableProps>, 'ref'> & React.RefAttributes<PressableRef>
+> = Animated.createAnimatedComponent(Pressable);

package/src/components/radio-navigation.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { I18nManager, Platform } from 'react-native';
+import { Pressable } from './pressable.tsx';
+
+/** Native accessibility supplies radio actions; web adds roving focus and selection. */
+export function useRadioNavigation(
+  items: { id: string; disabled?: boolean }[],
+  value: string | null,
+  onChange: (id: string) => void,
+) {
+  const refs = React.useRef<Record<string, React.ComponentRef<typeof Pressable> | null>>({});
+  const enabled = items.filter((item) => !item.disabled);
+  const first = enabled.find((item) => item.id === value)?.id ?? enabled[0]?.id;
+  return (id: string) => ({
+    ref: (node: React.ComponentRef<typeof Pressable> | null) => {
+      refs.current[id] = node;
+    },
+    tabIndex: (id === first ? 0 : -1) as 0 | -1,
+    ...(Platform.OS === 'web'
+      ? {
+          onKeyDown: (
+            event: Parameters<
+              NonNullable<React.ComponentProps<typeof Pressable>['onKeyDown']>
+            >[0],
+          ) => {
+            const key = event.nativeEvent.key;
+            if (
+              !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
+                key,
+              ) ||
+              !enabled.length
+            )
+              return;
+            event.preventDefault();
+            const index = enabled.findIndex((item) => item.id === id);
+            const horizontal = key === 'ArrowLeft' || key === 'ArrowRight';
+            const delta =
+              (key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 1) *
+              (horizontal && I18nManager.isRTL ? -1 : 1);
+            const next =
+              key === 'Home'
+                ? enabled[0]
+                : key === 'End'
+                  ? enabled[enabled.length - 1]
+                  : enabled[(index + delta + enabled.length) % enabled.length];
+            onChange(next.id);
+            refs.current[next.id]?.focus();
+          },
+        }
+      : {}),
+  });
+}

package/src/components/refresh-control.tsx

@@ -0,0 +1,39 @@
+import {
+  RefreshControl as RNRefreshControl,
+  type RefreshControlProps as RNRefreshControlProps,
+} from 'react-native';
+
+import { useThemeColors } from '../provider.tsx';
+
+export type RefreshControlProps = RNRefreshControlProps;
+
+/**
+ * RN's `RefreshControl`, pre-colored with the app's role tokens for the
+ * current scheme.
+ *
+ * Every other prop is forwarded, and that is load-bearing rather than
+ * politeness. On Android a `ScrollView` does not render its `refreshControl`
+ * beside the list: it clones the element with the scroll view itself as
+ * `children` and the list's layout style, and renders that clone as the
+ * outer view. A wrapper that accepts only `refreshing` and `onRefresh` drops
+ * both — which takes the entire list, empty state and footer included, out of
+ * the tree and leaves a blank screen under the header. Keep this a
+ * pass-through; anything it swallows, the list loses.
+ */
+export function RefreshControl({
+  tintColor,
+  colors,
+  progressBackgroundColor,
+  ...rest
+}: RefreshControlProps) {
+  const theme = useThemeColors();
+
+  return (
+    <RNRefreshControl
+      {...rest}
+      tintColor={tintColor ?? theme.onSurfaceVariant}
+      colors={colors ?? [theme.primary]}
+      progressBackgroundColor={progressBackgroundColor ?? theme.surfaceContainerHigh}
+    />
+  );
+}

package/src/components/row-gap.tsx

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+
+/**
+ * The space a card list leaves between two rows.
+ *
+ * Every list that renders rows as separate rounded cards passes this as its
+ * `ItemSeparatorComponent`, so the rhythm is one value rather than a number
+ * repeated per screen. Taller cards that need to breathe more — the
+ * Screener's — space themselves.
+ */
+export function RowGap() {
+  return <View className="h-[3px]" />;
+}