@isoline-ui/react-native 0.0.0-stage → 0.1.0-alpha.3

package/src/components/empty-state.tsx

@@ -0,0 +1,49 @@
+import type * as React from 'react';
+import { View } from 'react-native';
+import Animated, { FadeIn } from 'react-native-reanimated';
+
+import { ExpressiveShape, type ExpressiveShapeName } from './expressive-shape.tsx';
+import type { IconProps } from './icons.tsx';
+import { Text } from './text.tsx';
+import { useThemeColors } from '../provider.tsx';
+
+/**
+ * An empty list's one thing to look at: a large Expressive shape with the
+ * symbol of what would be here, a line saying so, and a line saying how to
+ * change it.
+ */
+export function EmptyState({
+  icon: Icon,
+  shape,
+  title,
+  body,
+  tone = 'primary',
+}: {
+  icon: React.ComponentType<IconProps>;
+  shape: ExpressiveShapeName;
+  title: string;
+  body?: string;
+  tone?: 'primary' | 'tertiary';
+}) {
+  const colors = useThemeColors();
+  const fill = tone === 'primary' ? colors.primaryContainer : colors.tertiaryContainer;
+  const ink = tone === 'primary' ? colors.onPrimaryContainer : colors.onTertiaryContainer;
+
+  return (
+    <Animated.View entering={FadeIn.duration(220)} className="items-center gap-5 px-8 py-12">
+      <ExpressiveShape shape={shape} size={132} color={fill}>
+        <Icon size={56} color={ink} />
+      </ExpressiveShape>
+      <View className="items-center gap-2">
+        <Text variant="heading" className="text-center">
+          {title}
+        </Text>
+        {body ? (
+          <Text variant="muted" className="text-center leading-5">
+            {body}
+          </Text>
+        ) : null}
+      </View>
+    </Animated.View>
+  );
+}

package/src/components/expand-indicator.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { ChevronDown } from './icons.tsx';
+import { spatial } from '../motion.ts';
+import { useThemeColors } from '../provider.tsx';
+
+/** One size for every disclosure chevron, so no two sections look differently foldable. */
+export const EXPAND_INDICATOR_SIZE = 20;
+
+export interface ExpandIndicatorProps {
+  expanded: boolean;
+  /** Defaults to `onSurfaceVariant`; a chip in its selected tone passes its own. */
+  color?: string;
+}
+
+/**
+ * The chevron on anything that opens in place — a message card, its details,
+ * the Cc/Bcc fields.
+ *
+ * Every one of those used to draw its own `ChevronDown` at whatever size
+ * suited the spot: 16 on a card, 12 on the details line beneath it, so two
+ * disclosures a finger's width apart looked like different kinds of thing.
+ * This is the one they share.
+ *
+ * It turns on the fast spatial spring rather than flipping, and overshoots a
+ * little on the way: the Expressive cue that the section is a thing being
+ * opened, not a picture being swapped. Reanimated drops the spring for
+ * "Remove animations" on its own, and the chevron still ends up pointing the
+ * right way — the state is carried by where it ends, not by the movement.
+ *
+ * Decorative to a screen reader: whatever it sits in owns the tap and says
+ * `expanded` itself.
+ */
+export function ExpandIndicator({ expanded, color }: ExpandIndicatorProps) {
+  const colors = useThemeColors();
+  const turn = useSharedValue(expanded ? 1 : 0);
+
+  React.useEffect(() => {
+    turn.value = withSpring(expanded ? 1 : 0, spatial.fast);
+  }, [expanded, turn]);
+
+  const style = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${turn.value * 180}deg` }],
+  }));
+
+  return (
+    <Animated.View
+      style={style}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+    >
+      <ChevronDown size={EXPAND_INDICATOR_SIZE} color={color ?? colors.onSurfaceVariant} />
+    </Animated.View>
+  );
+}

package/src/components/expressive-shape.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+/**
+ * A still member of the Expressive shape library, with something inside it.
+ *
+ * Expressive leans on a small set of characterful shapes — the 4-leaf clover,
+ * the scalloped cookie — to mark the one thing on a screen worth looking at
+ * first: an empty state's symbol, a step in a flow. Drawn from the same radial
+ * maths the loading indicator morphs (`~/lib/shape`), so the app's shapes are
+ * one family.
+ */
+
+export { type ExpressiveShapeName } from '../expressive-shapes.ts';
+import { EXPRESSIVE_SHAPES as PATHS, type ExpressiveShapeName } from '../expressive-shapes.ts';
+
+export function ExpressiveShape({
+  shape,
+  size,
+  color,
+  children,
+}: {
+  shape: ExpressiveShapeName;
+  size: number;
+  color: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <View style={{ width: size, height: size }} className="items-center justify-center">
+      <Svg width={size} height={size} viewBox="0 0 100 100" style={{ position: 'absolute' }}>
+        <Path d={PATHS[shape]} fill={color} />
+      </Svg>
+      {children}
+    </View>
+  );
+}

package/src/components/fab-menu-legacy.tsx

@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { BackHandler, View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeInDown,
+  FadeOut,
+  FadeOutDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { Plus, type IconProps } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { useHaptics, useLabels } from '../provider.tsx';
+import { spatial, staggerFor } from '../motion.ts';
+import { useReducedMotion } from '../reduced-motion.ts';
+import { elevation, useRipple, useThemeColors } from '../provider.tsx';
+
+export interface FabMenuAction {
+  disabled?: boolean;
+  destructive?: boolean;
+  id: string;
+  label: string;
+  icon: React.ComponentType<IconProps>;
+  run: () => void;
+}
+export interface FabMenuProps {
+  bottom: number;
+  label: string;
+  actions: FabMenuAction[];
+}
+
+/**
+ * The button's closed size: the height of the floating navigation bar it
+ * sits beside, so the two read as one row — and round, as the bar is.
+ */
+export const FAB_MENU_SIZE = 64;
+const CLOSE_SIZE = 56;
+
+/**
+ * The capture button, as an Expressive FAB menu.
+ *
+ * Closed, it is the one tinted circle beside the navigation bar (or, in a
+ * collection, in the corner). Open, it shrinks into a smaller close button
+ * while the ways in — link or text, file, scan, camera — unfold above it one after
+ * another, each a full-width pill with its name on it. Everything else dims;
+ * nothing about capturing asks where a thing goes. Only ways in: a list is
+ * written, not captured, and is started from Collections or a collection's menu.
+ */
+export function LegacyFabMenu({ bottom, label, actions }: FabMenuProps) {
+  const labels = useLabels();
+  const { selectionHaptic, impactHaptic } = useHaptics();
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const reducedMotion = useReducedMotion();
+  const [open, setOpen] = React.useState(false);
+  const progress = useSharedValue(0);
+
+  React.useEffect(() => {
+    // The calmer spatial spring: the button settles with a hint of give
+    // rather than wobbling through its size and rotation.
+    progress.value = withSpring(open ? 1 : 0, spatial.default);
+    if (!open) return;
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      setOpen(false);
+      return true;
+    });
+    return () => subscription.remove();
+  }, [open, progress]);
+
+  const fabStyle = useAnimatedStyle(() => {
+    const size = FAB_MENU_SIZE + (CLOSE_SIZE - FAB_MENU_SIZE) * progress.value;
+    return {
+      width: size,
+      height: size,
+      // Round, like the pill beside it, at every size it passes through.
+      borderRadius: size / 2,
+      backgroundColor: progress.value > 0.5 ? colors.primary : colors.primaryContainer,
+    };
+  });
+  const iconStyle = useAnimatedStyle(() => ({
+    // An eighth of a turn: the plus becomes a cross without spinning.
+    transform: [{ rotate: `${progress.value * 45}deg` }],
+  }));
+
+  const choose = (run: () => void) => {
+    selectionHaptic();
+    setOpen(false);
+    run();
+  };
+
+  return (
+    <>
+      {open ? (
+        <Animated.View
+          entering={FadeIn.duration(150)}
+          exiting={FadeOut.duration(120)}
+          className="absolute inset-0 bg-black/40"
+        >
+          <Pressable
+            className="flex-1"
+            onPress={() => setOpen(false)}
+            accessibilityLabel={labels.close}
+          />
+        </Animated.View>
+      ) : null}
+
+      <View
+        pointerEvents="box-none"
+        className="absolute right-4 items-end gap-3"
+        style={{ bottom }}
+      >
+        {open
+          ? actions.map((action, index) => {
+              const Icon = action.icon;
+              // Nearest the button first, so the menu unfolds upwards.
+              const order = actions.length - 1 - index;
+              return (
+                <Animated.View
+                  key={action.id}
+                  entering={FadeInDown.springify()
+                    .stiffness(spatial.default.stiffness)
+                    .damping(spatial.default.damping)
+                    .delay(order * staggerFor(reducedMotion))}
+                  exiting={FadeOutDown.duration(100)}
+                  className="overflow-hidden rounded-full"
+                  style={{ elevation: elevation.level2 }}
+                >
+                  <Pressable
+                    disabled={action.disabled}
+                    style={{ opacity: action.disabled ? 0.4 : 1 }}
+                    onPress={() => choose(action.run)}
+                    android_ripple={{ color: ripple.onTonal }}
+                    accessibilityRole="button"
+                    className="h-14 flex-row items-center gap-3 rounded-full bg-primaryContainer pl-5 pr-6"
+                  >
+                    <Icon
+                      size={24}
+                      color={action.destructive ? colors.error : colors.onPrimaryContainer}
+                    />
+                    <Text
+                      className="text-base font-semibold text-onPrimaryContainer"
+                      style={action.destructive ? { color: colors.error } : undefined}
+                    >
+                      {action.label}
+                    </Text>
+                  </Pressable>
+                </Animated.View>
+              );
+            })
+          : null}
+
+        <Animated.View
+          style={[fabStyle, { elevation: elevation.level3 }]}
+          className="overflow-hidden"
+        >
+          <Pressable
+            onPress={() => {
+              impactHaptic('light');
+              setOpen((value) => !value);
+            }}
+            android_ripple={{ color: ripple.onTonal }}
+            accessibilityRole="button"
+            accessibilityLabel={open ? labels.close : label}
+            accessibilityState={{ expanded: open }}
+            className="flex-1 items-center justify-center"
+          >
+            <Animated.View style={iconStyle}>
+              <Plus
+                size={open ? 24 : 28}
+                color={open ? colors.onPrimary : colors.onPrimaryContainer}
+              />
+            </Animated.View>
+          </Pressable>
+        </Animated.View>
+      </View>
+    </>
+  );
+}

package/src/components/fab-menu.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { LegacyFabMenu } from './fab-menu-legacy.tsx';
+import { Plus, type IconProps } from './icons.tsx';
+import { FloatingActionButton } from './floating-action-button.tsx';
+import { Popover } from './popover.tsx';
+import { ContextMenuRows } from './context-menu.tsx';
+import {
+  useHaptics,
+  useLabels,
+  useIsolinePlatform,
+  type MaterialOptions,
+} from '../provider.tsx';
+export interface FabMenuAction {
+  id: string;
+  label: string;
+  icon: React.ComponentType<IconProps>;
+  run: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+}
+export interface FabMenuProps extends MaterialOptions {
+  /** Material of the anchored menu, independent of the floating trigger. */
+  menuMaterial?: MaterialOptions['material'];
+  bottom: number;
+  label: string;
+  actions: FabMenuAction[];
+}
+export const FAB_MENU_SIZE = 64;
+/** Floating primary action with a safe, anchored overflow surface on native and web. */
+export function FabMenu({
+  bottom,
+  label,
+  actions,
+  material = 'solid',
+  menuMaterial = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = true,
+}: FabMenuProps) {
+  const [open, setOpen] = React.useState(false);
+  const anchor = React.useRef<React.ComponentRef<typeof View>>(null);
+  const labels = useLabels();
+  const { impactHaptic } = useHaptics();
+  const ios = useIsolinePlatform() === 'ios';
+  if (Platform.OS !== 'web' && (!ios || material === 'solid'))
+    return <LegacyFabMenu bottom={bottom} label={label} actions={actions} />;
+  return (
+    <>
+      <View
+        ref={anchor}
+        collapsable={false}
+        style={{ position: 'absolute', right: 16, bottom }}
+      >
+        <FloatingActionButton
+          icon={Plus}
+          accessibilityLabel={open ? labels.close : label}
+          size={FAB_MENU_SIZE}
+          material={material}
+          glassStyle={glassStyle}
+          tintColor={tintColor}
+          fallbackColor={fallbackColor}
+          interactive={interactive}
+          onPress={() => {
+            impactHaptic('light');
+            setOpen((value) => !value);
+          }}
+        />
+      </View>
+      <Popover
+        visible={open}
+        onClose={() => setOpen(false)}
+        anchorRef={anchor}
+        placement="top"
+        accessibilityLabel={label}
+        material={menuMaterial}
+        glassStyle={glassStyle}
+        tintColor={tintColor}
+        fallbackColor={fallbackColor}
+        interactive={interactive}
+      >
+        <ContextMenuRows
+          items={actions.map(({ run, ...action }) => ({ ...action, onPress: run }))}
+          onClose={() => setOpen(false)}
+        />
+      </Popover>
+    </>
+  );
+}

package/src/components/filter-chip.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { type IconProps } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+import { useSquish } from './squish.ts';
+import { Text } from './text.tsx';
+import { corner } from '../shape.ts';
+import { useIsolinePlatform, useRipple, useThemeColors } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/**
+ * Material 3 filter chip — the app's one selectable pill.
+ *
+ * Unselected it reads as an offer, selected it fills with the primary
+ * container. Both states are drawn from the same set of style properties;
+ * only the colour values change. That is load-bearing on Android, and it is
+ * why an unselected chip paints an opaque fill in its own surface's tone
+ * rather than simply leaving the background unset:
+ *
+ * React Native builds a view's background out of layers — fill, border,
+ * ripple — held in a single drawable. Adding a *layer* that wasn't there
+ * before (a fill appearing on select, a border appearing on deselect)
+ * replaces that drawable with a freshly constructed one, and a fresh drawable
+ * starts with empty bounds. A view with `overflow: hidden` clips its children
+ * to those bounds, so for as long as they stay empty the chip paints its fill
+ * and nothing else: the icon and the label are laid out at full size but
+ * never drawn. That is the bug this shape avoids — and `overflow: hidden` is
+ * not optional here, since a contained ripple has to be clipped to the pill
+ * (see `pressable.tsx`).
+ *
+ * So: a fill and a border in *both* states, and selection expressed as
+ * colour. `surface` is what an unselected chip fills with, which has to match
+ * whatever the chip is sitting on for "off" to read as unfilled.
+ *
+ * The same reasoning rules out swapping the leading icon for a checkmark on
+ * select: everything about the chip's structure stays put across a toggle,
+ * and only colour moves. Selection stays legible without colour from the
+ * filled silhouette, the same way it does in `button-group.tsx` — the one
+ * selectable control in the app that never lost its label, and the shape this
+ * chip is now built to match.
+ *
+ * The radius is a real dp value rather than `rounded-full`: Tailwind's full
+ * radius is 9999, and `button-group.tsx` likewise morphs between numbers from
+ * the corner scale.
+ */
+
+/** The tones a chip can sit on, as the fill an unselected chip paints. */
+const SURFACE_FILL = {
+  background: 'bg-background',
+  surfaceContainerHigh: 'bg-surfaceContainerHigh',
+  /** Bottom sheets and dialogs. */
+  popover: 'bg-popover',
+} as const;
+
+export interface FilterChipProps {
+  label: string;
+  selected: boolean;
+  onPress: () => void;
+  /**
+   * A second, deliberate action on the same chip — removing a saved search,
+   * say. Optional: a chip that only filters has nothing to hide behind a hold.
+   */
+  onLongPress?: () => void;
+  /** Optional leading icon. Drawn in both states, or in neither. */
+  icon?: React.ComponentType<IconProps>;
+  /**
+   * Optional trailing icon — a chevron on a chip that opens a choice rather
+   * than toggling. Drawn in both states, like `icon`.
+   */
+  trailingIcon?: React.ComponentType<IconProps>;
+  /**
+   * The tone the chip is drawn on. An unselected chip fills with it rather
+   * than staying transparent, so its fill is a colour change away from the
+   * selected one rather than a new drawable layer.
+   */
+  surface?: keyof typeof SURFACE_FILL;
+}
+
+export function FilterChip({
+  label,
+  selected,
+  onPress,
+  onLongPress,
+  icon: Icon,
+  trailingIcon: Trailing,
+  surface = 'background',
+}: FilterChipProps) {
+  const ios = useIsolinePlatform() === 'ios';
+  const web = Platform.OS === 'web';
+  const Container = (web ? View : Animated.View) as typeof Animated.View;
+  const colors = useThemeColors();
+  const ripple = useRipple();
+
+  const foreground = selected ? colors.onPrimaryContainer : colors.onSurfaceVariant;
+  const squish = useSquish();
+
+  // Fill and clip on a plain wrapper, with the same radius on the Pressable
+  // inside it, so the contained ripple is clipped to the pill rather than to
+  // its bounding box.
+  return (
+    <Container
+      className="shrink-0 overflow-hidden"
+      style={[{ borderRadius: ios ? 10 : corner.large }, !web && squish.style]}
+    >
+      <Pressable
+        {...squish.handlers}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        // A 32dp chip is under the 48dp touch target on its own.
+        hitSlop={{ top: 8, bottom: 8 }}
+        android_ripple={{ color: selected ? ripple.onTonal : ripple.onNeutral }}
+        accessibilityRole="button"
+        accessibilityState={{ selected }}
+        className={cn(
+          'min-h-8 flex-row items-center gap-1.5 border px-3 py-1',
+          selected
+            ? 'border-primaryContainer bg-primaryContainer'
+            : cn('border-outline', SURFACE_FILL[surface]),
+        )}
+        style={{ borderRadius: ios ? 10 : corner.large }}
+      >
+        {Icon ? <Icon size={16} color={foreground} /> : null}
+
+        {/* Coloured inline from the same value the icon uses, rather than
+            through a class, so the two cannot diverge and the label keeps a
+            colour even if the class does not resolve. */}
+        <Text variant="labelLarge" numberOfLines={1} style={{ color: foreground }}>
+          {label}
+        </Text>
+        {Trailing ? <Trailing size={16} color={foreground} /> : null}
+      </Pressable>
+    </Container>
+  );
+}

package/src/components/floating-action-button.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  Surface,
+  useIsolinePlatform,
+  useThemeColors,
+  useRipple,
+  type MaterialOptions,
+} from '../provider.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import type { IconProps } from './icons.tsx';
+export interface FloatingActionButtonProps extends MaterialOptions {
+  icon: React.ComponentType<IconProps>;
+  accessibilityLabel: string;
+  onPress: () => void;
+  label?: string;
+  disabled?: boolean;
+  size?: 56 | 64;
+  style?: StyleProp<ViewStyle>;
+}
+/** A reusable floating action; screen placement and navigation remain consumer-owned. */
+export function FloatingActionButton({
+  icon: Icon,
+  accessibilityLabel,
+  onPress,
+  label,
+  disabled,
+  size = 64,
+  style,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = true,
+}: FloatingActionButtonProps) {
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const glass = useIsolinePlatform() === 'ios' && material !== 'solid';
+  const Container = glass ? Surface : View;
+  const color = glass ? colors.primary : colors.onPrimaryContainer;
+  return (
+    <Container
+      {...(glass ? { material, glassStyle, tintColor, fallbackColor, interactive } : {})}
+      style={[
+        {
+          borderRadius: size / 2,
+          ...(!glass ? { backgroundColor: colors.primaryContainer } : {}),
+          minWidth: size,
+          height: size,
+        },
+        style,
+      ]}
+    >
+      <Pressable
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled }}
+        onPress={onPress}
+        android_ripple={{ color: ripple.onTonal }}
+        style={{
+          minWidth: size,
+          height: size,
+          paddingHorizontal: label ? 20 : 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 10,
+          borderRadius: size / 2,
+          opacity: disabled ? 0.4 : 1,
+        }}
+      >
+        <Icon size={26} color={color} />
+        {label ? <Text style={{ color, fontWeight: '600' }}>{label}</Text> : null}
+      </Pressable>
+    </Container>
+  );
+}