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

package/src/components/slider.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useThemeColors, useIsolinePlatform, useHaptics } from '../provider.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { sliderValue } from '../selection.ts';
+
+export interface SliderProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  onSlidingComplete?: (value: number) => void;
+  minimumValue?: number;
+  maximumValue?: number;
+  step?: number;
+  hapticStep?: number;
+  disabled?: boolean;
+  accessibilityLabel: string;
+  valueLabel?: string;
+  leadingLabel?: string;
+  trailingLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  activeColor?: string;
+  trackColor?: string;
+  thumbColor?: string;
+}
+export function Slider({
+  value,
+  onValueChange,
+  onSlidingComplete,
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  hapticStep,
+  disabled,
+  accessibilityLabel,
+  valueLabel,
+  leadingLabel,
+  trailingLabel,
+  style,
+  activeColor,
+  trackColor,
+  thumbColor,
+}: SliderProps) {
+  const colors = useThemeColors();
+  const { selectionHaptic } = useHaptics();
+  const lastHaptic = React.useRef<number | null>(null);
+  const ios = useIsolinePlatform() === 'ios';
+  const thumbWidth = ios ? 24 : 6;
+  const trackHeight = ios ? 4 : 12;
+  const [width, setWidth] = React.useState(1);
+  const current = sliderValue(value, minimumValue, maximumValue, step);
+  const fraction =
+    maximumValue > minimumValue ? (current - minimumValue) / (maximumValue - minimumValue) : 0;
+  const fromX = (x: number) =>
+    sliderValue(
+      minimumValue + Math.max(0, Math.min(1, x / width)) * (maximumValue - minimumValue),
+      minimumValue,
+      maximumValue,
+      step,
+    );
+  const change = (next: number, finish = false) => {
+    if (disabled) return;
+    const result = sliderValue(next, minimumValue, maximumValue, step);
+    if (hapticStep && hapticStep > 0) {
+      const tick = Math.round((result - minimumValue) / hapticStep);
+      if (tick !== lastHaptic.current) {
+        lastHaptic.current = tick;
+        selectionHaptic();
+      }
+    }
+    onValueChange(result);
+    if (finish) onSlidingComplete?.(result);
+  };
+  const delta = step > 0 ? step : (maximumValue - minimumValue) / 100;
+  const gesture = Gesture.Pan()
+    .enabled(!disabled)
+    .minDistance(0)
+    .runOnJS(true)
+    .onBegin((event) => change(fromX(event.x)))
+    .onUpdate((event) => change(fromX(event.x)))
+    .onEnd((event) => change(fromX(event.x), true));
+  return (
+    <View style={[{ gap: 4, opacity: disabled ? 0.4 : 1 }, style]}>
+      {leadingLabel || trailingLabel ? (
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Text variant="caption">{leadingLabel}</Text>
+          <Text variant="caption">{trailingLabel}</Text>
+        </View>
+      ) : null}
+      <GestureDetector gesture={gesture}>
+        <Pressable
+          disabled={disabled}
+          accessibilityRole="adjustable"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled }}
+          accessibilityValue={{
+            min: minimumValue,
+            max: maximumValue,
+            now: current,
+            text: valueLabel,
+          }}
+          accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+          onAccessibilityAction={(event) =>
+            change(
+              current + (event.nativeEvent.actionName === 'increment' ? delta : -delta),
+              true,
+            )
+          }
+          {...(Platform.OS === 'web'
+            ? {
+                role: 'slider',
+                'aria-valuemin': minimumValue,
+                'aria-valuemax': maximumValue,
+                'aria-valuenow': current,
+                'aria-valuetext': valueLabel,
+                onKeyDown: (
+                  event: Parameters<
+                    NonNullable<React.ComponentProps<typeof Pressable>['onKeyDown']>
+                  >[0],
+                ) => {
+                  const key = event.nativeEvent.key;
+                  if (
+                    ![
+                      'ArrowLeft',
+                      'ArrowRight',
+                      'ArrowDown',
+                      'ArrowUp',
+                      'Home',
+                      'End',
+                      'PageUp',
+                      'PageDown',
+                    ].includes(key)
+                  )
+                    return;
+                  event.preventDefault();
+                  change(
+                    key === 'Home'
+                      ? minimumValue
+                      : key === 'End'
+                        ? maximumValue
+                        : current +
+                          (['ArrowUp', 'ArrowRight', 'PageUp'].includes(key) ? 1 : -1) *
+                            delta *
+                            (key.startsWith('Page') ? 10 : 1),
+                    true,
+                  );
+                },
+              }
+            : {})}
+          onLayout={(event) => setWidth(Math.max(1, event.nativeEvent.layout.width))}
+          style={{ height: 44, minWidth: 80, justifyContent: 'center' }}
+        >
+          <View
+            style={{
+              height: trackHeight,
+              borderRadius: 6,
+              backgroundColor: trackColor ?? colors.surfaceContainerHighest,
+            }}
+          >
+            <View
+              style={{
+                height: trackHeight,
+                width: `${fraction * 100}%`,
+                backgroundColor: activeColor ?? colors.primary,
+                borderRadius: 6,
+              }}
+            />
+          </View>
+          <View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              left: fraction * Math.max(0, width - thumbWidth),
+              width: thumbWidth,
+              height: ios ? 24 : 36,
+              borderRadius: ios ? 12 : 3,
+              backgroundColor: thumbColor ?? activeColor ?? colors.primary,
+            }}
+          />
+        </Pressable>
+      </GestureDetector>
+    </View>
+  );
+}

package/src/components/snackbar.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
+import { Text } from './text.tsx';
+import { Pressable } from './pressable.tsx';
+import {
+  Surface,
+  useIsolinePlatform,
+  useThemeColors,
+  elevation,
+  type MaterialOptions,
+} from '../provider.tsx';
+export interface SnackbarProps extends MaterialOptions {
+  message: string;
+  bottom?: number;
+  actionLabel?: string;
+  onAction?: () => void;
+}
+/** Visibility, duration and undo state belong to the caller. Solid is the reading-safe default. */
+export function Snackbar({
+  message,
+  bottom = 12,
+  actionLabel,
+  onAction,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: SnackbarProps) {
+  const colors = useThemeColors();
+  const glass = useIsolinePlatform() === 'ios' && material !== 'solid';
+  const web = Platform.OS === 'web';
+  const Box = (glass ? Surface : web ? View : Animated.View) as typeof Animated.View;
+  return (
+    <View
+      pointerEvents="box-none"
+      style={{ position: 'absolute', left: 0, right: 0, paddingHorizontal: 16, bottom }}
+    >
+      <Box
+        {...(glass
+          ? { material, glassStyle, tintColor, fallbackColor, interactive }
+          : !web
+            ? {
+                entering: FadeInDown.springify().damping(20),
+                exiting: FadeOutDown.duration(120),
+              }
+            : {})}
+        accessibilityLiveRegion="polite"
+        style={{
+          minHeight: 48,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          borderRadius: 16,
+          paddingVertical: 6,
+          paddingLeft: 16,
+          paddingRight: 6,
+          elevation: elevation.level3,
+          ...(!glass ? { backgroundColor: colors.inverseSurface } : {}),
+        }}
+      >
+        <Text
+          style={{
+            flex: 1,
+            fontSize: 14,
+            color: glass ? colors.onSurface : colors.inverseOnSurface,
+          }}
+        >
+          {message}
+        </Text>
+        {onAction && actionLabel ? (
+          <Pressable
+            onPress={onAction}
+            accessibilityRole="button"
+            style={{
+              minHeight: 44,
+              justifyContent: 'center',
+              borderRadius: 22,
+              paddingHorizontal: 12,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 14,
+                fontWeight: '700',
+                color: glass ? colors.primary : colors.inversePrimary,
+              }}
+            >
+              {actionLabel}
+            </Text>
+          </Pressable>
+        ) : null}
+      </Box>
+    </View>
+  );
+}

package/src/components/split-button.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import {
+  Surface,
+  SurfaceGroup,
+  useIsolinePlatform,
+  type MaterialOptions,
+} from '../provider.tsx';
+import { Popover } from './popover.tsx';
+import { ContextMenuRows } from './context-menu.tsx';
+import { ChevronUp } from './icons.tsx';
+import { AnimatedPressable, Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { useHaptics } from '../provider.tsx';
+import { spatial } from '../motion.ts';
+import { corner } from '../shape.ts';
+import { elevation, useRipple, useThemeColors } from '../provider.tsx';
+
+/**
+ * Material 3 Expressive split button.
+ *
+ * One control holding a primary action and the variations on it: tapping the
+ * leading half does the obvious thing, tapping the trailing half offers the
+ * alternatives. It exists so the common case stays one tap while the rarer
+ * ones stop needing a separate button each.
+ *
+ * The trailing half is where the Expressive part lives — on activation its
+ * chevron spins and its outer corners morph from a pill to a small radius, so
+ * the button visibly *becomes* the open menu's anchor rather than just
+ * toggling a highlight.
+ */
+
+export interface SplitButtonAction {
+  disabled?: boolean;
+  destructive?: boolean;
+  id: string;
+  label: string;
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  onPress: () => void;
+}
+
+export interface SplitButtonProps extends MaterialOptions {
+  menuMaterial?: MaterialOptions['material'];
+  label: string;
+  icon: React.ComponentType<{ size?: number; color?: string }>;
+  onPress: () => void;
+  actions: SplitButtonAction[];
+  optionsLabel?: string;
+}
+
+/** The two halves sit a hair apart, which is what reads as "split". */
+const HAIRLINE = 2;
+const HEIGHT = 56;
+
+export function SplitButton({
+  label,
+  icon: Icon,
+  onPress,
+  actions,
+  optionsLabel,
+  material = 'solid',
+  menuMaterial = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = true,
+}: SplitButtonProps) {
+  const glass = useIsolinePlatform() === 'ios' && material !== 'solid';
+  const web = Platform.OS === 'web';
+  const Piece = glass ? Surface : View;
+  const Trailing = (glass ? Surface : web ? View : Animated.View) as typeof Animated.View;
+  const Control = (web ? Pressable : AnimatedPressable) as typeof AnimatedPressable;
+  const colors = useThemeColors();
+  const { selectionHaptic } = useHaptics();
+  const ripple = useRipple();
+  const [open, setOpen] = React.useState(false);
+  // Where to pin the menu, measured off the trailing half as it opens.
+  const trailingRef = React.useRef<React.ElementRef<typeof View>>(null);
+  const progress = useSharedValue(0);
+
+  const close = React.useCallback(() => {
+    setOpen(false);
+    progress.value = withSpring(0, spatial.default);
+  }, [progress]);
+
+  /**
+   * The menu lives in a modal rather than in an absolutely positioned sibling,
+   * because on Android a view drawn outside its parent's bounds never receives
+   * the touch — the menu would appear above the button and then ignore taps.
+   * Measuring the trailing half first is what keeps it looking anchored to it.
+   */
+  const openMenu = React.useCallback(() => {
+    setOpen(true);
+    selectionHaptic();
+    progress.value = withSpring(1, spatial.default);
+  }, [selectionHaptic, progress]);
+
+  const trailingStyle = useAnimatedStyle(() => {
+    const pill = HEIGHT / 2;
+    const radius = pill + (corner.medium - pill) * progress.value;
+
+    return { borderTopRightRadius: radius, borderBottomRightRadius: radius };
+  });
+
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+  }));
+
+  return (
+    <View>
+      <Popover
+        visible={open}
+        onClose={close}
+        anchorRef={trailingRef}
+        placement="top"
+        accessibilityLabel={optionsLabel ?? label}
+        material={menuMaterial}
+        glassStyle={glassStyle}
+        tintColor={tintColor}
+        fallbackColor={fallbackColor}
+        interactive={interactive}
+      >
+        <ContextMenuRows items={actions} onClose={close} />
+      </Popover>
+
+      <SurfaceGroup spacing={12} style={{ flexDirection: 'row', gap: HAIRLINE }}>
+        {/* The ripple's own corner radius has to come from clipping a wrapper,
+            not from the Pressable's own borderRadius: Android's ripple mask
+            can only express one radius for all four corners, and this button
+            mixes a full pill on the left with a small radius on the right. */}
+        <Piece
+          {...(glass ? { material, glassStyle, tintColor, fallbackColor, interactive } : {})}
+          style={{
+            elevation: elevation.level2,
+            borderTopLeftRadius: 28,
+            borderBottomLeftRadius: 28,
+            borderTopRightRadius: 8,
+            borderBottomRightRadius: 8,
+          }}
+        >
+          <Pressable
+            onPress={onPress}
+            android_ripple={{ color: ripple.onTonal }}
+            accessibilityRole="button"
+            className="flex-row items-center gap-2 rounded-l-full rounded-r-lg bg-primaryContainer pl-6 pr-5"
+            style={{ height: HEIGHT, ...(glass ? { backgroundColor: 'transparent' } : {}) }}
+          >
+            <Icon size={20} color={glass ? colors.primary : colors.onPrimaryContainer} />
+            <Text
+              className="text-base font-semibold text-onPrimaryContainer"
+              style={glass ? { color: colors.primary } : undefined}
+            >
+              {label}
+            </Text>
+          </Pressable>
+        </Piece>
+
+        <View ref={trailingRef} collapsable={false}>
+          <Trailing
+            {...(glass ? { material, glassStyle, tintColor, fallbackColor, interactive } : {})}
+            style={[
+              !web && !glass && trailingStyle,
+              {
+                elevation: elevation.level2,
+                borderTopRightRadius: open ? 12 : 28,
+                borderBottomRightRadius: open ? 12 : 28,
+                borderTopLeftRadius: 8,
+                borderBottomLeftRadius: 8,
+              },
+            ]}
+            className="overflow-hidden rounded-l-lg"
+          >
+            {/* The ripple has to carry the same (animated) corner radius as
+                this wrapper, or it shows hard corners while the pill morphs
+                to a menu anchor — `overflow-hidden` above clips the fill but
+                not the ripple's own outline. */}
+            <Control
+              onPress={() => (open ? close() : openMenu())}
+              android_ripple={{ color: ripple.onTonal }}
+              accessibilityRole="button"
+              accessibilityLabel={optionsLabel ?? label}
+              accessibilityState={{ expanded: open }}
+              className="items-center justify-center rounded-l-lg bg-primaryContainer px-4"
+              style={[
+                !web && !glass && trailingStyle,
+                {
+                  height: HEIGHT,
+                  borderTopRightRadius: open ? 12 : 28,
+                  borderBottomRightRadius: open ? 12 : 28,
+                  ...(glass ? { backgroundColor: 'transparent' } : {}),
+                },
+              ]}
+            >
+              <Animated.View style={chevronStyle}>
+                <ChevronUp
+                  size={20}
+                  color={glass ? colors.primary : colors.onPrimaryContainer}
+                />
+              </Animated.View>
+            </Control>
+          </Trailing>
+        </View>
+      </SurfaceGroup>
+    </View>
+  );
+}

package/src/components/squish.ts

@@ -0,0 +1,41 @@
+import {
+  type AnimatedStyle,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { spatial } from '../motion.ts';
+
+/** How far a card gives under the finger: enough to feel, not enough to look like a jump. */
+const PRESSED_SCALE = 0.97;
+
+/**
+ * A card or tile giving a little under the finger and springing back on
+ * release, as Material 3 Expressive's components do — on top of the ripple,
+ * which only colours. Spread `handlers` on the Pressable and put `style` on
+ * the animated view around it. Under "Remove animations" the spring is
+ * Reanimated's, so the system's setting already stills it.
+ */
+export interface SquishFeedback {
+  style: AnimatedStyle<{ transform: { scale: number }[] }>;
+  handlers: { onPressIn: () => void; onPressOut: () => void };
+}
+
+export function useSquish(): SquishFeedback {
+  const pressed = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: withSpring(pressed.value === 1 ? PRESSED_SCALE : 1, spatial.fast) }],
+  }));
+  return {
+    style,
+    handlers: {
+      onPressIn: () => {
+        pressed.value = 1;
+      },
+      onPressOut: () => {
+        pressed.value = 0;
+      },
+    },
+  };
+}

package/src/components/swipeable-row.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import ReanimatedSwipeable, {
+  type SwipeableMethods,
+} from 'react-native-gesture-handler/ReanimatedSwipeable';
+import { Button } from './button.tsx';
+
+export interface SwipeAction {
+  id: string;
+  label: string;
+  onPress: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+}
+export interface SwipeableRowProps {
+  children: React.ReactNode;
+  accessibilityLabel: string;
+  actionsLabel: string;
+  startActions?: SwipeAction[];
+  endActions?: SwipeAction[];
+  disabled?: boolean;
+  showActionsButton?: boolean;
+  onSwipeStart?: () => void;
+  onSwipeEnd?: () => void;
+}
+export function SwipeableRow({
+  children,
+  accessibilityLabel,
+  actionsLabel,
+  startActions = [],
+  endActions = [],
+  disabled,
+  showActionsButton = true,
+  onSwipeStart,
+  onSwipeEnd,
+}: SwipeableRowProps) {
+  const ref = React.useRef<SwipeableMethods>(null);
+  const [open, setOpen] = React.useState(false);
+  const actions = [...startActions, ...endActions];
+  const run = (action: SwipeAction) => {
+    if (disabled || action.disabled) return;
+    ref.current?.close();
+    setOpen(false);
+    action.onPress();
+  };
+  const rows = (items: SwipeAction[]) => (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, padding: 4 }}>
+      {items.map((action) => (
+        <Button
+          key={action.id}
+          label={action.label}
+          size="s"
+          variant={action.destructive ? 'destructive' : 'tonal'}
+          disabled={disabled || action.disabled}
+          onPress={() => run(action)}
+        />
+      ))}
+    </View>
+  );
+  const content = (
+    <View>
+      {children}
+      {showActionsButton ? (
+        <Button
+          label={actionsLabel}
+          variant="ghost"
+          size="s"
+          disabled={disabled || !actions.length}
+          onPress={() => setOpen((value) => !value)}
+        />
+      ) : null}
+      {open ? rows(actions) : null}
+    </View>
+  );
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      accessibilityActions={actions
+        .filter((action) => !action.disabled)
+        .map((action) => ({ name: action.id, label: action.label }))}
+      onAccessibilityAction={(event) => {
+        const action = actions.find((action) => action.id === event.nativeEvent.actionName);
+        if (action) run(action);
+      }}
+    >
+      {Platform.OS === 'web' ? (
+        content
+      ) : (
+        <ReanimatedSwipeable
+          ref={ref}
+          enabled={!disabled}
+          overshootLeft={false}
+          overshootRight={false}
+          renderLeftActions={startActions.length ? () => rows(startActions) : undefined}
+          renderRightActions={endActions.length ? () => rows(endActions) : undefined}
+          onSwipeableWillOpen={(direction) => {
+            const action = direction === 'right' ? onSwipeStart : onSwipeEnd;
+            if (action) {
+              action();
+              ref.current?.close();
+            }
+          }}
+        >
+          {content}
+        </ReanimatedSwipeable>
+      )}
+    </View>
+  );
+}