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

package/src/components/icon-button.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import {
+  type GestureResponderEvent,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { Surface, type MaterialOptions } from '../provider.tsx';
+import { usesPlatformMaterial } from '../material.ts';
+import { Pressable } from './pressable.tsx';
+import { spatial } from '../motion.ts';
+import { useIsolinePlatform, useRipple, useThemeColors } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+export interface IconButtonProps extends MaterialOptions {
+  icon: React.ComponentType<{ size?: number; color?: string; fill?: string }>;
+  /**
+   * Receives the press event, for a button nested inside a pressable row that
+   * has to stop the row from seeing the same tap.
+   */
+  onPress: (event: GestureResponderEvent) => void;
+  /** Touch target diameter in dp; also sets the ripple's radius. */
+  size?: number;
+  iconSize?: number;
+  /** Defaults to `onSurfaceVariant`. */
+  color?: string;
+  fill?: string;
+  accessibilityLabel?: string;
+  hitSlop?: PressableProps['hitSlop'];
+  className?: string;
+  /** For a filled/elevated variant — plain RN styles, since `elevation` can't be a class. */
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+}
+
+/**
+ * The one size every icon button in a screen's header uses: a full 48dp
+ * target around a 22dp glyph, so a back arrow, a star and a sync toggle read
+ * as the same kind of control from one screen to the next. Spread it in —
+ * `<IconButton {...HEADER_ICON_BUTTON} … />` — rather than repeating the
+ * numbers, which is how they drifted apart before.
+ */
+export const HEADER_ICON_BUTTON = { size: 48, iconSize: 22 } as const;
+
+/** A circular icon-only pressable with the app's standard borderless ripple. */
+export function IconButton({
+  icon: Icon,
+  onPress,
+  size = 40,
+  iconSize = 18,
+  color,
+  fill,
+  accessibilityLabel,
+  hitSlop = 8,
+  className,
+  style,
+  disabled,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = true,
+}: IconButtonProps) {
+  const platform = useIsolinePlatform();
+  const ios = platform === 'ios';
+  const materialActive = usesPlatformMaterial(platform, material);
+  const extent = materialActive ? Math.max(size, 44) : size;
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  // The symbol gives a little under the finger, as the ripple spreads round it.
+  const pressed = useSharedValue(0);
+  const iconStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 - pressed.value * 0.14 }],
+  }));
+
+  const control = (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => {
+        pressed.value = withSpring(1, spatial.fast);
+      }}
+      onPressOut={() => {
+        pressed.value = withSpring(0, spatial.default);
+      }}
+      hitSlop={hitSlop}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      android_ripple={{ color: ripple.onNeutral, borderless: true, radius: size / 2 }}
+      className={cn(
+        'items-center justify-center rounded-full',
+        disabled && 'opacity-50',
+        className,
+      )}
+      style={[{ width: extent, height: extent }, !materialActive && style]}
+    >
+      <Animated.View style={iconStyle}>
+        <Icon
+          size={iconSize}
+          color={color ?? (ios ? colors.primary : colors.onSurfaceVariant)}
+          {...(fill ? { fill } : null)}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+  return materialActive ? (
+    <Surface
+      material={material}
+      glassStyle={glassStyle}
+      tintColor={tintColor}
+      fallbackColor={fallbackColor}
+      interactive={interactive}
+      style={[{ borderRadius: extent / 2 }, style]}
+    >
+      {control}
+    </Surface>
+  ) : (
+    control
+  );
+}

package/src/components/icons.tsx

@@ -0,0 +1,43 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+export interface IconProps {
+  size?: number;
+  color?: string;
+  fill?: string;
+  ruleColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/** Small functional glyphs, drawn for Isoline. Consumer icons use IconProps. */
+function glyph(path: string) {
+  return function Glyph({ size = 24, color = '#000000', style }: IconProps) {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 24 24" style={style} accessible={false}>
+        <Path
+          d={path}
+          fill="none"
+          stroke={color}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+  };
+}
+export const ArrowLeft = glyph('M20 12H4m7-7-7 7 7 7');
+export const Check = glyph('m5 12 4 4L19 6');
+export const ChevronDown = glyph('m6 9 6 6 6-6');
+export const Search = glyph('M21 21l-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0');
+export const X = glyph('m6 6 12 12M18 6 6 18');
+
+export const ChevronUp = glyph('m6 15 6-6 6 6');
+export const ChevronRight = glyph('m9 6 6 6-6 6');
+export const Eye = glyph(
+  'M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12 M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0',
+);
+export const EyeOff = glyph(
+  'm3 3 18 18M9 5.5a12 12 0 0 1 3-.5c6 0 10 7 10 7a20 20 0 0 1-4 4M6 6a21 21 0 0 0-4 6s4 7 10 7a12 12 0 0 0 5-1M10 10a3 3 0 0 0 4 4',
+);
+
+export const Plus = glyph('M12 5v14M5 12h14');

package/src/components/input.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { TextInput, View } from 'react-native';
+
+import { PasswordVisibility } from './password-visibility.tsx';
+import { Text } from './text.tsx';
+import { useThemeColors } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+export type InputProps = React.ComponentProps<typeof TextInput> & {
+  label?: string;
+  /** Shown below the field in destructive color. */
+  error?: string | null;
+  hint?: string;
+};
+
+export const Input: React.ForwardRefExoticComponent<
+  InputProps & React.RefAttributes<React.ElementRef<typeof TextInput>>
+> = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(function Input(
+  {
+    className,
+    label,
+    error,
+    hint,
+    accessibilityLabel,
+    accessibilityHint,
+    secureTextEntry,
+    ...props
+  },
+  ref,
+) {
+  const colors = useThemeColors();
+  // A masked field can be shown in the clear on request: a password typed on
+  // a phone keyboard is easy to get wrong and impossible to check otherwise.
+  const [revealed, setRevealed] = React.useState(false);
+
+  return (
+    <View className="gap-2">
+      {label ? <Text variant="label">{label}</Text> : null}
+
+      <View className="justify-center">
+        <TextInput
+          ref={ref}
+          className={cn(
+            'h-14 rounded-xl border border-input bg-surfaceContainerLowest px-5 text-base text-foreground',
+            error && 'border-destructive',
+            secureTextEntry && 'pr-14',
+            className,
+          )}
+          // Mail addresses and passwords are the two things people mistype most;
+          // never help them along with autocorrect or capitalisation.
+          autoCapitalize={props.autoCapitalize ?? 'none'}
+          autoCorrect={props.autoCorrect ?? false}
+          placeholderTextColor={colors.onSurfaceVariant}
+          // The visible label is a sibling Text, not a native <label>, so a screen
+          // reader landing on the field itself hears nothing without this — and
+          // the error/hint line is otherwise a separate node it may never reach.
+          accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityHint={accessibilityHint ?? error ?? hint}
+          {...props}
+          secureTextEntry={secureTextEntry && !revealed}
+        />
+
+        {secureTextEntry ? (
+          <PasswordVisibility
+            revealed={revealed}
+            onPress={() => setRevealed((value) => !value)}
+          />
+        ) : null}
+      </View>
+
+      {error ? (
+        <Text variant="caption" className="text-destructive">
+          {error}
+        </Text>
+      ) : hint ? (
+        <Text variant="caption">{hint}</Text>
+      ) : null}
+    </View>
+  );
+});

package/src/components/keyboard-inset-view.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useKeyboardHeight } from '../use-keyboard-height.ts';
+
+/**
+ * A view that gives up the part of the screen the on-screen keyboard covers.
+ *
+ * Edge-to-edge (the default since Expo SDK 54) stops Android's `adjustResize`
+ * from shrinking the window, and `KeyboardAvoidingView` cannot be relied on to
+ * take over: its `height` mode measures the keyboard against a frame that no
+ * longer ends where the keyboard begins, and leaves the layout full height.
+ * A scroll view inside it then ends behind the keyboard, so its lower fields
+ * can neither be seen nor scrolled to. Padding by the measured keyboard height
+ * shrinks the scroll view's viewport instead, which also lets Android scroll a
+ * focused field into view.
+ */
+export function KeyboardInsetView({ style, ...props }: ViewProps) {
+  const insets = useSafeAreaInsets();
+  const keyboardHeight = useKeyboardHeight();
+  // Android reports the keyboard above its navigation bar. On iOS the
+  // keyboard already includes the home-indicator area.
+  const paddingBottom =
+    keyboardHeight > 0 ? keyboardHeight + (Platform.OS === 'android' ? insets.bottom : 0) : 0;
+
+  return <View style={[style, { paddingBottom }]} {...props} />;
+}

package/src/components/list-controls.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { ScrollView, View, type ScrollViewProps } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text } from './text.tsx';
+import { Button } from './button.tsx';
+import { IconButton } from './icon-button.tsx';
+import { BackButton } from './back-button.tsx';
+import { X } from './icons.tsx';
+import type { MaterialOptions } from '../provider.tsx';
+
+export interface SelectionHeaderProps {
+  count: number;
+  countLabel: string;
+  allSelected: boolean;
+  onClear: () => void;
+  onToggleAll: () => void;
+  clearLabel: string;
+  selectAllLabel: string;
+  deselectAllLabel: string;
+}
+export function SelectionHeader({
+  count,
+  countLabel,
+  allSelected,
+  onClear,
+  onToggleAll,
+  clearLabel,
+  selectAllLabel,
+  deselectAllLabel,
+}: SelectionHeaderProps) {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
+      <IconButton icon={X} accessibilityLabel={clearLabel} onPress={onClear} />
+      <Text accessibilityLiveRegion="polite" style={{ flex: 1, fontWeight: '600' }}>
+        {countLabel}
+      </Text>
+      <Button
+        size="s"
+        variant="ghost"
+        label={allSelected ? deselectAllLabel : selectAllLabel}
+        onPress={onToggleAll}
+      />
+    </View>
+  );
+}
+export interface ListSectionHeaderProps {
+  title: string;
+  first?: boolean;
+  trailing?: React.ReactNode;
+}
+export function ListSectionHeader({ title, first, trailing }: ListSectionHeaderProps) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingTop: first ? 0 : 16,
+        paddingBottom: 4,
+      }}
+    >
+      <Text accessibilityRole="header" variant="label" style={{ flex: 1 }}>
+        {title}
+      </Text>
+      {trailing}
+    </View>
+  );
+}
+export interface JumpToTopPillProps extends MaterialOptions {
+  label: string;
+  onPress: () => void;
+  count?: number;
+  accessibilityLabel?: string;
+}
+export function JumpToTopPill({
+  label,
+  onPress,
+  count = 0,
+  accessibilityLabel,
+  ...materialOptions
+}: JumpToTopPillProps) {
+  return (
+    <Button
+      {...materialOptions}
+      label={label}
+      accessibilityLabel={accessibilityLabel ?? label}
+      onPress={onPress}
+      variant={count > 0 ? 'default' : 'tonal'}
+      size="s"
+    />
+  );
+}
+export interface SettingsScreenLayoutProps {
+  title: string;
+  caption?: string;
+  onBack: () => void;
+  backLabel: string;
+  children: React.ReactNode;
+  overlay?: React.ReactNode;
+  scrollProps?: Omit<ScrollViewProps, 'children'>;
+}
+/** Screen geometry without a router dependency. Overlays stay outside the scrolling content. */
+export function SettingsScreenLayout({
+  title,
+  caption,
+  onBack,
+  backLabel,
+  children,
+  overlay,
+  scrollProps,
+}: SettingsScreenLayoutProps) {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={{ flex: 1, paddingTop: insets.top }}>
+      <View style={{ paddingHorizontal: 16, paddingBottom: 16, gap: 8 }}>
+        <BackButton onPress={onBack} label={backLabel} />
+        <Text variant="title" accessibilityRole="header">
+          {title}
+        </Text>
+        {caption ? <Text variant="caption">{caption}</Text> : null}
+      </View>
+      <ScrollView
+        {...scrollProps}
+        contentContainerStyle={[
+          { padding: 16, paddingBottom: insets.bottom + 24, gap: 20 },
+          scrollProps?.contentContainerStyle,
+        ]}
+      >
+        {children}
+      </ScrollView>
+      {overlay}
+    </View>
+  );
+}

package/src/components/loading-indicator.tsx

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+
+import { KEEP_MOTION, useReducedMotion } from '../reduced-motion.ts';
+import { useIsolinePlatform, useThemeColors } from '../provider.tsx';
+import { blendRadii, radiiToPath, shapeRadii, type ShapeSpec } from '../shape.ts';
+import { cn } from '../utils.ts';
+
+/**
+ * The Material 3 Expressive loading indicator.
+ *
+ * Expressive replaced the indeterminate spinner for waits under about five
+ * seconds. Instead of a rotating arc it is a single filled shape that turns
+ * while morphing through a sequence of polygons — the morph is the signal that
+ * something is happening, so it stays legible at sizes where a thin arc turns
+ * into a grey smudge.
+ *
+ * The outline is rebuilt every frame on the UI thread from interpolated radii
+ * (see `src/lib/shape.ts`), which is what lets a four-sided shape become a
+ * nine-sided one; morphing between two vertex lists of different lengths is
+ * not otherwise defined.
+ */
+
+/** The shape sequence, chosen so no two neighbours share a corner count. */
+const SEQUENCE: ShapeSpec[] = [
+  { vertices: 4, roundness: 0.55, rotation: 0 },
+  { vertices: 7, roundness: 0.4, rotation: 0.3 },
+  { vertices: 5, roundness: 0.5, rotation: 0.6 },
+  { vertices: 9, roundness: 0.35, rotation: 0.1 },
+  { vertices: 6, roundness: 0.45, rotation: 0.5 },
+  { vertices: 8, roundness: 0.4, rotation: 0.2 },
+];
+
+/** Sampled once at module load; only the blend runs per frame. */
+const RADII = SEQUENCE.map((shape) => shapeRadii(shape));
+
+/** Time on each shape. Slow enough to read as a shape, not as a flicker. */
+const MORPH_MS = 650;
+/** One full turn. Deliberately not a multiple of the morph, so it never loops
+ *  back to an identical frame and start looking like a static image. */
+const SPIN_MS = 4600;
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export interface LoadingIndicatorProps {
+  size?: number;
+  color?: string;
+  /** Draws the M3 "contained" variant — the shape inside a tonal circle. */
+  contained?: boolean;
+  className?: string;
+}
+
+export function LoadingIndicator({
+  size = 48,
+  color,
+  contained = false,
+  className,
+}: LoadingIndicatorProps) {
+  const ios = useIsolinePlatform() === 'ios';
+  const theme = useThemeColors();
+  const resolvedColor = color ?? theme.primary;
+  const progress = useSharedValue(0);
+  const spin = useSharedValue(0);
+
+  /*
+   * A busy indicator keeps moving under "Remove animations", the same way the
+   * platform's own does. What the setting is for is motion the reader did not
+   * ask for and cannot escape; this is the opposite — it is the answer to
+   * "is anything happening", and a spinner frozen mid-turn says the app has
+   * hung. The shape-morph is the decorative half of it, and that does stop.
+   */
+  const reducedMotion = useReducedMotion();
+
+  React.useEffect(() => {
+    if (ios) return;
+    progress.value = 0;
+    if (!reducedMotion) {
+      progress.value = withRepeat(
+        // Linear across the whole sequence; the per-step easing is applied in
+        // the worklet below, so the loop can restart without a seam.
+        withTiming(RADII.length, {
+          duration: RADII.length * MORPH_MS,
+          easing: Easing.linear,
+        }),
+        -1,
+      );
+    }
+
+    spin.value = 0;
+    spin.value = withRepeat(
+      withTiming(360, {
+        duration: SPIN_MS,
+        easing: Easing.linear,
+        reduceMotion: KEEP_MOTION,
+      }),
+      -1,
+    );
+
+    return () => {
+      cancelAnimation(progress);
+      cancelAnimation(spin);
+    };
+  }, [ios, progress, reducedMotion, spin]);
+
+  const inset = contained ? size * 0.24 : 0;
+  const canvas = size;
+  const radius = (size - inset * 2) / 2;
+
+  const animatedProps = useAnimatedProps(() => {
+    // Reanimated can briefly publish a non-finite or terminal progress value
+    // while a repeating animation is being attached/detached. Normalize it
+    // before indexing so a transient frame can never pass undefined radii to
+    // the UI-thread worklet.
+    const value = Number.isFinite(progress.value) ? progress.value : 0;
+    const rawIndex = Math.floor(value);
+    const index = ((rawIndex % RADII.length) + RADII.length) % RADII.length;
+    const next = (index + 1) % RADII.length;
+    const from = RADII[index] ?? RADII[0]!;
+    const to = RADII[next] ?? from;
+
+    // Smoothstep the fraction so each shape settles before the next begins,
+    // rather than the outline sliding at a constant rate the whole time.
+    const t = value - rawIndex;
+    const eased = t * t * (3 - 2 * t);
+
+    return {
+      d: radiiToPath(blendRadii(from, to, eased), canvas / 2, radius),
+    };
+  });
+
+  const spinStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${spin.value}deg` }],
+  }));
+
+  if (ios)
+    return (
+      <View
+        className={className}
+        style={{
+          width: size,
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: size / 2,
+          backgroundColor: contained ? theme.surfaceContainerHigh : 'transparent',
+        }}
+      >
+        <ActivityIndicator
+          size={size <= 24 ? 'small' : 'large'}
+          color={resolvedColor}
+          accessibilityLabel="Loading"
+        />
+      </View>
+    );
+  return (
+    <View
+      className={cn('items-center justify-center', contained && 'rounded-full', className)}
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: contained ? theme.surfaceContainerHighest : 'transparent',
+      }}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading"
+    >
+      <Animated.View style={spinStyle}>
+        <Svg width={canvas} height={canvas}>
+          <AnimatedPath animatedProps={animatedProps} fill={resolvedColor} />
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+}