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

package/src/components/bottom-sheet-web.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import { KeyboardAvoidingView, Modal, Platform, View, type DimensionValue } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { runOnJS, withSpring, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Pressable } from './pressable.tsx';
+import { useSheetTransition } from './sheet-transition.ts';
+import { Text } from './text.tsx';
+import {
+  Surface,
+  type MaterialOptions,
+  ThemeScope,
+  useThemeColors,
+  useIsolinePlatform,
+  useLabels,
+} from '../provider.tsx';
+import { spatial } from '../motion.ts';
+import { elevation } from '../provider.tsx';
+
+const CLOSE_SHARE = 0.3;
+const CLOSE_VELOCITY = 900;
+const LEAVE_MS = 160;
+
+export interface BottomSheetProps extends MaterialOptions {
+  visible: boolean;
+  onClose: () => void;
+  /** Caps long lists; the default leaves space for the status bar. */
+  maxHeight?: DimensionValue;
+  /** Runs once the sheet is on screen, e.g. to focus an input. */
+  onShow?: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * One branded sheet on both platforms. The handle owns the dismiss gesture
+ * so it cannot steal scrolling, calendar swipes or drags inside the content.
+ * On iOS the panel also follows the keyboard and supports VoiceOver Escape.
+ */
+export function BottomSheet({
+  visible,
+  onClose,
+  maxHeight = '90%',
+  onShow,
+  children,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: BottomSheetProps) {
+  const ios = useIsolinePlatform() === 'ios';
+  const glass = ios && material !== 'solid';
+  const insets = useSafeAreaInsets();
+  const web = Platform.OS === 'web';
+  const Box = (web ? View : Animated.View) as typeof Animated.View;
+  const labels = useLabels();
+  const colors = useThemeColors();
+  const { scrimStyle, panelStyle, onPanelLayout, drag, height, reducedMotion } =
+    useSheetTransition(visible);
+
+  const pull = Gesture.Pan()
+    .activeOffsetY([-8, 8])
+    .onUpdate((event) => {
+      drag.set(Math.max(0, event.translationY));
+    })
+    .onEnd((event) => {
+      const closing =
+        event.translationY > height.get() * CLOSE_SHARE ||
+        (event.velocityY > CLOSE_VELOCITY && event.translationY > 0);
+      if (!closing) {
+        drag.set(reducedMotion ? 0 : withSpring(0, spatial.default));
+        return;
+      }
+      if (reducedMotion) {
+        runOnJS(onClose)();
+        return;
+      }
+      drag.set(
+        withTiming(height.get(), { duration: LEAVE_MS }, (finished) => {
+          if (finished) runOnJS(onClose)();
+        }),
+      );
+    })
+    .onFinalize((_event, success) => {
+      if (!success) drag.set(reducedMotion ? 0 : withSpring(0, spatial.default));
+    });
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      presentationStyle="overFullScreen"
+      animationType="none"
+      onRequestClose={onClose}
+      onShow={onShow}
+    >
+      <ThemeScope style={{ flex: 1 }}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <KeyboardAvoidingView
+            style={{ flex: 1 }}
+            behavior="padding"
+            enabled={Platform.OS === 'ios'}
+          >
+            <Box
+              style={[
+                !web && scrimStyle,
+                { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', paddingTop: insets.top + 8 },
+              ]}
+              className="flex-1 bg-black/60"
+            >
+              <Pressable
+                testID="isoline-sheet-backdrop"
+                className="flex-1"
+                onPress={onClose}
+                accessible={false}
+              />
+
+              <Box
+                testID="isoline-sheet-panel"
+                onLayout={onPanelLayout}
+                accessibilityViewIsModal
+                onAccessibilityEscape={onClose}
+                className="rounded-t-[28px] bg-popover px-4"
+                style={[
+                  !web && panelStyle,
+                  {
+                    ...(glass
+                      ? { backgroundColor: 'transparent' }
+                      : web
+                        ? { backgroundColor: colors.surfaceContainerLow }
+                        : {}),
+                    paddingHorizontal: 16,
+                    paddingBottom: insets.bottom + 16,
+                    maxHeight,
+                    borderTopLeftRadius: ios ? 20 : 28,
+                    borderTopRightRadius: ios ? 20 : 28,
+                    elevation: elevation.level3,
+                  },
+                ]}
+              >
+                {glass ? (
+                  <Surface
+                    material={material}
+                    glassStyle={glassStyle}
+                    tintColor={tintColor}
+                    fallbackColor={fallbackColor}
+                    interactive={interactive}
+                    pointerEvents="none"
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      borderTopLeftRadius: ios ? 20 : 28,
+                      borderTopRightRadius: ios ? 20 : 28,
+                    }}
+                  />
+                ) : null}
+                <GestureDetector gesture={pull}>
+                  <Pressable
+                    onPress={onClose}
+                    className="-mx-4 min-h-11 items-center justify-center"
+                    accessible
+                    accessibilityRole="button"
+                    accessibilityLabel={labels.close}
+                    onAccessibilityTap={onClose}
+                    accessibilityActions={[{ name: 'activate' }]}
+                    onAccessibilityAction={({ nativeEvent }) => {
+                      if (nativeEvent.actionName === 'activate') onClose();
+                    }}
+                  >
+                    <View className="h-1 w-9 rounded-full bg-outlineVariant" />
+                  </Pressable>
+                </GestureDetector>
+                <Pressable
+                  onPress={onClose}
+                  accessibilityRole="button"
+                  accessibilityLabel={labels.close}
+                  className="self-end px-3 py-2"
+                >
+                  <Text style={{ color: colors.primary }}>{labels.close}</Text>
+                </Pressable>
+                {children}
+              </Box>
+            </Box>
+          </KeyboardAvoidingView>
+        </GestureHandlerRootView>
+      </ThemeScope>
+    </Modal>
+  );
+}

package/src/components/bottom-sheet.tsx

@@ -0,0 +1,5 @@
+import {Platform} from 'react-native';
+import {BottomSheet as NativeSheet, type BottomSheetProps} from './bottom-sheet-native.tsx';
+import {BottomSheet as WebSheet} from './bottom-sheet-web.tsx';
+export type {BottomSheetProps};
+export function BottomSheet(props: BottomSheetProps) { return Platform.OS === 'web' ? <WebSheet {...props}/> : <NativeSheet {...props}/>; }

package/src/components/button-group.tsx

@@ -0,0 +1,326 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+import { Pressable, AnimatedPressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import {
+  Surface,
+  type MaterialOptions,
+  useIsolineTheme,
+  useIsolinePlatform,
+  useHaptics,
+} from '../provider.tsx';
+import { corner } from '../shape.ts';
+import { spatial } from '../motion.ts';
+import { useRipple, useThemeColors } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/**
+ * Material 3 Expressive connected button group.
+ *
+ * A row of buttons that behave as one object. Two things make it Expressive
+ * rather than a row of chips:
+ *
+ * - **Shape as state.** The selected button's corners morph from the group's
+ *   small inner radius to a full pill, so which one is active is legible from
+ *   silhouette alone, before any colour is read.
+ * - **The squeeze.** Pressing a button widens it and compresses its immediate
+ *   neighbours. The group has a fixed width, so the buttons behave like
+ *   objects sharing a space rather than independent targets — which is what
+ *   tells you they are one control.
+ *
+ * Both run on spatial springs, so a fast double-tap redirects the motion mid
+ * flight instead of queueing two animations.
+ */
+
+/** How much a pressed button grows, and its neighbours give up, as flex. */
+const PRESS_GROWTH = 0.18;
+const NEIGHBOUR_SQUEEZE = 0.09;
+
+export interface ButtonGroupItem<T extends string> {
+  id: T;
+  disabled?: boolean;
+  label: string;
+  icon?: React.ComponentType<{ size?: number; color?: string }>;
+  /** Optional trailing count, e.g. unread mail in that view. */
+  badge?: number;
+}
+
+export interface ButtonGroupProps<T extends string> extends MaterialOptions {
+  items: ButtonGroupItem<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  className?: string;
+  /**
+   * Drop the label on unselected buttons, leaving icon + badge. Meant for
+   * groups where every item carries a badge, so the count alone still
+   * identifies it — the selected button keeps the only visible label.
+   */
+  compact?: boolean;
+}
+
+export function ButtonGroup<T extends string>({
+  items,
+  value,
+  onChange,
+  className,
+  compact,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: ButtonGroupProps<T>) {
+  const ios = useIsolinePlatform() === 'ios';
+  const Group = material !== 'solid' ? Surface : View;
+  const colors = useThemeColors();
+  const { scheme } = useIsolineTheme();
+  const { selectionHaptic } = useHaptics();
+  // Which button is under a finger, as an index. -1 is "none", and lives on
+  // the UI thread so the squeeze never waits on a React render.
+  const pressed = useSharedValue(-1);
+
+  if (ios)
+    return (
+      <Group
+        {...(material !== 'solid'
+          ? { material, glassStyle, tintColor, fallbackColor, interactive }
+          : {})}
+        className={className}
+        style={{
+          flexDirection: 'row',
+          gap: 2,
+          padding: 3,
+          borderRadius: 12,
+          ...(material === 'solid' ? { backgroundColor: colors.surfaceContainerHigh } : {}),
+        }}
+      >
+        {items.map((item) => {
+          const selected = item.id === value;
+          const Icon = item.icon;
+          return (
+            <Pressable
+              key={item.id}
+              accessibilityRole="button"
+              accessibilityLabel={item.label}
+              disabled={item.disabled}
+              accessibilityState={{ selected, disabled: item.disabled }}
+              onPress={() => {
+                if (!selected) selectionHaptic();
+                onChange(item.id);
+              }}
+              style={{
+                opacity: item.disabled ? 0.4 : 1,
+                flex: 1,
+                minWidth: 0,
+                minHeight: 36,
+                paddingVertical: 8,
+                paddingHorizontal: 6,
+                borderRadius: 9,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 4,
+                backgroundColor: selected
+                  ? scheme === 'dark'
+                    ? colors.surfaceContainerHighest
+                    : colors.surfaceContainerLowest
+                  : 'transparent',
+                boxShadow: selected ? '0px 1px 4px rgba(0,0,0,0.15)' : undefined,
+              }}
+            >
+              {Icon ? <Icon size={16} color={colors.onSurface} /> : null}
+              <Text
+                numberOfLines={1}
+                style={{
+                  fontSize: 13,
+                  lineHeight: 18,
+                  fontWeight: '600',
+                  color: colors.onSurface,
+                  flexShrink: 1,
+                }}
+              >
+                {item.label}
+              </Text>
+              {item.badge !== undefined ? (
+                <Text style={{ fontSize: 12, color: colors.onSurface }}>{item.badge}</Text>
+              ) : null}
+            </Pressable>
+          );
+        })}
+      </Group>
+    );
+  return (
+    <View className={cn('flex-row gap-1', className)}>
+      {items.map((item, index) => (
+        <GroupButton
+          key={item.id}
+          item={item}
+          index={index}
+          count={items.length}
+          selected={item.id === value}
+          compact={compact ?? false}
+          pressed={pressed}
+          onPress={() => onChange(item.id)}
+        />
+      ))}
+    </View>
+  );
+}
+
+function GroupButton<T extends string>({
+  item,
+  index,
+  count,
+  selected,
+  compact,
+  pressed,
+  onPress,
+}: {
+  item: ButtonGroupItem<T>;
+  index: number;
+  count: number;
+  selected: boolean;
+  compact: boolean;
+  pressed: SharedValue<number>;
+  onPress: () => void;
+}) {
+  const { selectionHaptic } = useHaptics();
+  const web = Platform.OS === 'web';
+  const Container = (web ? View : Animated.View) as typeof Animated.View;
+  const Control = (web ? Pressable : AnimatedPressable) as typeof AnimatedPressable;
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const Icon = item.icon;
+  const first = index === 0;
+  const last = index === count - 1;
+
+  // The group's outer corners are round; the shared inner edges are not, so
+  // the row reads as one segmented object rather than as separate pills.
+  const outer = corner.extraLarge;
+  const inner = corner.small;
+
+  const shape = useSharedValue(selected ? 1 : 0);
+
+  React.useEffect(() => {
+    shape.value = withSpring(selected ? 1 : 0, spatial.default);
+  }, [selected, shape]);
+
+  // In compact mode, unselected buttons hug their icon+badge content instead
+  // of sharing the row evenly, so the freed width goes to the selected
+  // button's label rather than sitting empty inside its neighbours.
+  const flexStyle = useAnimatedStyle(() => {
+    if (compact) {
+      const grow = selected ? 1 : 0;
+      return { flexGrow: withSpring(grow, spatial.default), flexShrink: grow };
+    }
+
+    const distance = pressed.value < 0 ? 99 : Math.abs(pressed.value - index);
+
+    const flex = distance === 0 ? 1 + PRESS_GROWTH : distance === 1 ? 1 - NEIGHBOUR_SQUEEZE : 1;
+
+    return { flex: withSpring(flex, spatial.fast) };
+  });
+
+  // Selected morphs every corner to a pill; unselected keeps the group's
+  // segmented silhouette. Applied to the Pressable itself, not just the
+  // wrapping View, or the ripple shows hard corners through the morph.
+  const radiusStyle = useAnimatedStyle(() => {
+    const radius = (base: number) => base + (corner.extraExtraLarge - base) * shape.value;
+
+    return {
+      borderTopLeftRadius: withSpring(radius(first ? outer : inner), spatial.default),
+      borderBottomLeftRadius: withSpring(radius(first ? outer : inner), spatial.default),
+      borderTopRightRadius: withSpring(radius(last ? outer : inner), spatial.default),
+      borderBottomRightRadius: withSpring(radius(last ? outer : inner), spatial.default),
+    };
+  });
+
+  // The static style gives the animated flex above a value to spring from
+  // (and to render correctly before the first frame), matching what it
+  // settles into: an even share normally, or grow-to-fill vs. hug-content
+  // once compact mode gives each button a different role.
+  const staticFlexStyle = compact
+    ? { flexGrow: selected ? 1 : 0, flexShrink: selected ? 1 : 0 }
+    : { flex: 1 };
+
+  return (
+    <Container
+      style={[staticFlexStyle, !web && flexStyle, web ? { overflow: 'hidden' } : radiusStyle]}
+      className="overflow-hidden"
+    >
+      <Control
+        onPressIn={() => {
+          pressed.set(index);
+        }}
+        onPressOut={() => {
+          pressed.set(-1);
+        }}
+        onPress={() => {
+          if (!selected) selectionHaptic();
+          onPress();
+        }}
+        android_ripple={{ color: selected ? ripple.onTonal : ripple.onNeutral }}
+        accessibilityRole="button"
+        accessibilityLabel={item.label}
+        disabled={item.disabled}
+        accessibilityState={{ selected, disabled: item.disabled }}
+        className={cn(
+          'h-12 flex-row items-center justify-center gap-1.5 px-3',
+          selected ? 'bg-primaryContainer' : 'bg-surfaceContainerHigh',
+        )}
+        style={
+          web
+            ? {
+                borderTopLeftRadius: selected ? corner.extraExtraLarge : first ? outer : inner,
+                borderBottomLeftRadius: selected
+                  ? corner.extraExtraLarge
+                  : first
+                    ? outer
+                    : inner,
+                borderTopRightRadius: selected ? corner.extraExtraLarge : last ? outer : inner,
+                borderBottomRightRadius: selected
+                  ? corner.extraExtraLarge
+                  : last
+                    ? outer
+                    : inner,
+              }
+            : radiusStyle
+        }
+      >
+        {Icon ? (
+          <Icon
+            size={18}
+            color={selected ? colors.onPrimaryContainer : colors.onSurfaceVariant}
+          />
+        ) : null}
+
+        {selected || !compact ? (
+          <Text
+            numberOfLines={1}
+            className={cn(
+              'text-sm font-semibold',
+              selected ? 'text-onPrimaryContainer' : 'text-onSurfaceVariant',
+            )}
+          >
+            {item.label}
+          </Text>
+        ) : null}
+
+        {item.badge ? (
+          <View className="min-w-[20px] items-center justify-center rounded-full bg-primary px-1.5 py-0.5">
+            <Text className="text-xs font-bold tabular-nums text-primary-foreground">
+              {item.badge}
+            </Text>
+          </View>
+        ) : null}
+      </Control>
+    </Container>
+  );
+}