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

package/src/components/button.tsx

@@ -0,0 +1,337 @@
+import type { PressableStateCallbackType } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Platform, View } 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 { DialogActionContext } from './dialog-context.ts';
+import type { IconProps } from './icons.tsx';
+import { AnimatedPressable, Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { useIsolinePlatform, useHaptics } from '../provider.tsx';
+import { spatial } from '../motion.ts';
+import { corner } from '../shape.ts';
+import {
+  useRipple,
+  useThemeColors,
+  type RippleColors,
+  type ThemeColors,
+} from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+/**
+ * Material 3 Expressive button.
+ *
+ * Colour still carries emphasis — Filled for the one action that matters,
+ * Tonal below it, Outlined and Text lower again — but Expressive added two
+ * dimensions on top of that:
+ *
+ * - **Size as hierarchy.** Five sizes from XS to XL, so a primary action can
+ *   be made important by being *large*, not just by being coloured. The larger
+ *   sizes are meant to be used; a screen where every button is medium is the
+ *   thing this is trying to fix.
+ * - **Shape as feedback.** Every button morphs between round and square while
+ *   pressed. The shape change is felt more than it is seen, and it survives on
+ *   a filled button where a ripple over a saturated fill barely registers.
+ */
+
+const buttonVariants = cva('flex-row items-center justify-center', {
+  variants: {
+    variant: {
+      default: 'bg-primary',
+      secondary: 'bg-secondaryContainer',
+      tonal: 'bg-primaryContainer',
+      tertiary: 'bg-tertiary',
+      outline: 'border border-outline bg-transparent',
+      ghost: 'bg-transparent',
+      destructive: 'bg-destructive',
+    },
+    size: {
+      xs: 'h-8 gap-1.5 px-3',
+      s: 'h-10 gap-2 px-4',
+      m: 'h-14 gap-2 px-6',
+      l: 'h-24 gap-3 px-12',
+      xl: 'h-[136px] gap-4 px-16',
+      icon: 'h-12 w-12 px-0',
+    },
+  },
+  defaultVariants: { variant: 'default', size: 'm' },
+});
+
+const labelVariants = cva('font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-onSecondaryContainer',
+      tonal: 'text-onPrimaryContainer',
+      tertiary: 'text-tertiary-foreground',
+      outline: 'text-foreground',
+      ghost: 'text-primary',
+      destructive: 'text-destructive-foreground',
+    },
+    size: {
+      xs: 'text-[13px]',
+      s: 'text-sm',
+      m: 'text-[15px]',
+      l: 'text-2xl',
+      xl: 'text-[32px]',
+      icon: 'text-[15px]',
+    },
+  },
+  defaultVariants: { variant: 'default', size: 'm' },
+});
+
+/** Ripple reads dark-on-light for filled/tonal fills, light-on-dark otherwise. */
+function rippleByVariant(
+  ripple: RippleColors,
+): Record<NonNullable<ButtonProps['variant']>, string> {
+  return {
+    default: ripple.onTonal,
+    secondary: ripple.onTonal,
+    tonal: ripple.onTonal,
+    tertiary: ripple.onTonal,
+    outline: ripple.onNeutral,
+    ghost: ripple.onNeutral,
+    destructive: ripple.onTonal,
+  };
+}
+
+/** The icon beside a label takes the label's color. */
+function iconColor(colors: ThemeColors, variant: NonNullable<ButtonProps['variant']>): string {
+  const byVariant: Record<NonNullable<ButtonProps['variant']>, string> = {
+    default: colors.onPrimary,
+    secondary: colors.onSecondaryContainer,
+    tonal: colors.onPrimaryContainer,
+    tertiary: colors.onTertiary,
+    outline: colors.onSurface,
+    ghost: colors.primary,
+    destructive: colors.onError,
+  };
+  return byVariant[variant];
+}
+
+const ICON_SIZE: Record<NonNullable<ButtonProps['size']>, number> = {
+  xs: 16,
+  s: 18,
+  m: 20,
+  l: 32,
+  xl: 40,
+  icon: 20,
+};
+
+/** Height and the M3 square-shape radius for each size, in dp. */
+const METRICS: Record<NonNullable<ButtonProps['size']>, { height: number; square: number }> = {
+  xs: { height: 32, square: corner.medium },
+  s: { height: 40, square: corner.medium },
+  m: { height: 56, square: corner.large },
+  l: { height: 96, square: corner.extraLarge },
+  xl: { height: 136, square: corner.extraLarge },
+  icon: { height: 48, square: corner.medium },
+};
+
+export type ButtonProps = Omit<React.ComponentProps<typeof Pressable>, 'children'> &
+  VariantProps<typeof buttonVariants> &
+  MaterialOptions & {
+    children?: React.ComponentProps<typeof Pressable>['children'];
+    pressableClassName?: string;
+    label?: string;
+    /** A leading symbol, drawn in the label's color. */
+    icon?: React.ComponentType<IconProps>;
+    /** Resting shape. Pressing morphs to the other one and back. */
+    shape?: 'round' | 'square';
+    /** Fires a selection tick on press. Off for destructive-adjacent actions. */
+    haptic?: boolean;
+  };
+
+/**
+ * Pressable with a spring shape-and-scale morph on touch.
+ *
+ * The press feedback runs on the UI thread through Reanimated rather than
+ * through React state, so it stays at 60fps while the JS thread is busy
+ * ingesting a sync batch.
+ */
+export function Button({
+  className,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = true,
+  pressableClassName,
+  style,
+  variant,
+  size,
+  label,
+  icon: Icon,
+  shape = 'round',
+  haptic = true,
+  children,
+  onPressIn,
+  onPressOut,
+  onPress,
+  ...props
+}: ButtonProps) {
+  const web = Platform.OS === 'web';
+  const platform = useIsolinePlatform();
+  const materialActive = usesPlatformMaterial(platform, material);
+  const Container = (
+    materialActive ? Surface : web ? View : Animated.View
+  ) as typeof Animated.View;
+  const Control = (
+    web || materialActive ? Pressable : AnimatedPressable
+  ) as typeof AnimatedPressable;
+  // Reanimated only drives the animated styles it finds in a plain `style`
+  // value: inside a style callback they are dropped, and the control keeps
+  // square corners under its rounded clip (an Outlined border then shows only
+  // as broken top and bottom lines). So the animated control gets a resolved
+  // array, and a caller's style callback is fed the pressed state from here.
+  const animated = !web && !materialActive;
+  const tracksPressed = web || (animated && typeof style === 'function');
+  const [pressedNow, setPressedNow] = React.useState(false);
+  const ios = useIsolinePlatform() === 'ios';
+  const alertAction = React.useContext(DialogActionContext) && ios;
+  const { selectionHaptic } = useHaptics();
+  const ripple = useRipple();
+  const colors = useThemeColors();
+  const pressed = useSharedValue(0);
+  const resolvedVariant = variant ?? 'default';
+  const resolvedSize = size ?? 'm';
+  const metrics = METRICS[resolvedSize];
+
+  const rest = ios ? 12 : shape === 'round' ? metrics.height / 2 : metrics.square;
+  const active = ios ? rest : shape === 'round' ? metrics.square : metrics.height / 2;
+
+  // Radius is shared with the wrapper below so the ripple's own clip morphs
+  // in lockstep with the visible shape — a Pressable can only self-clip its
+  // ripple to whatever radius it has *right now*, and Android's ripple mask
+  // doesn't reliably keep up with per-frame Reanimated updates on its own.
+  const radiusStyle = useAnimatedStyle(() => ({
+    borderRadius: rest + (active - rest) * pressed.value,
+  }));
+  const scaleStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 - pressed.value * 0.03 }],
+  }));
+
+  return (
+    <Container
+      {...(materialActive
+        ? { material, glassStyle, tintColor, fallbackColor, interactive }
+        : {})}
+      style={[
+        web || materialActive
+          ? {
+              borderRadius: alertAction
+                ? 0
+                : materialActive
+                  ? rest
+                  : pressedNow
+                    ? active
+                    : rest,
+            }
+          : radiusStyle,
+        alertAction && { flex: 1 },
+      ]}
+      className={cn(!materialActive && 'overflow-hidden', className)}
+    >
+      <Control
+        className={cn(
+          buttonVariants({ variant, size }),
+          props.disabled && 'opacity-50',
+          pressableClassName,
+        )}
+        style={resolveStyle(animated, pressedNow, (state: PressableStateCallbackType) => [
+          web || materialActive
+            ? {
+                borderRadius: pressedNow ? active : rest,
+                transform: [{ scale: pressedNow ? 0.97 : 1 }],
+              }
+            : radiusStyle,
+          animated && scaleStyle,
+          ios && {
+            minHeight: 44,
+            height: { xs: 44, s: 44, m: 50, l: 64, xl: 80, icon: 44 }[resolvedSize],
+            borderWidth: resolvedVariant === 'outline' ? 0 : undefined,
+          },
+          materialActive && { backgroundColor: 'transparent', borderWidth: 0 },
+          alertAction && { backgroundColor: 'transparent', borderWidth: 0, borderRadius: 0 },
+          typeof style === 'function' ? style(state) : style,
+        ])}
+        android_ripple={{ color: rippleByVariant(ripple)[resolvedVariant] }}
+        onPressIn={(event) => {
+          if (tracksPressed) setPressedNow(true);
+          pressed.value = withSpring(1, spatial.fast);
+          onPressIn?.(event);
+        }}
+        onPressOut={(event) => {
+          if (tracksPressed) setPressedNow(false);
+          pressed.value = withSpring(0, spatial.default);
+          onPressOut?.(event);
+        }}
+        onPress={(event) => {
+          if (haptic) selectionHaptic();
+          onPress?.(event);
+        }}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: props.disabled ?? false }}
+        {...props}
+      >
+        {(state: PressableStateCallbackType) => (
+          <>
+            {Icon ? (
+              <Icon
+                size={ICON_SIZE[resolvedSize]}
+                color={
+                  alertAction || materialActive
+                    ? resolvedVariant === 'destructive'
+                      ? colors.error
+                      : colors.primary
+                    : iconColor(colors, resolvedVariant)
+                }
+              />
+            ) : null}
+            {label ? (
+              <Text
+                className={cn(labelVariants({ variant, size }))}
+                style={
+                  alertAction || materialActive
+                    ? {
+                        color:
+                          resolvedVariant === 'destructive' ? colors.error : colors.primary,
+                      }
+                    : undefined
+                }
+                numberOfLines={1}
+              >
+                {label}
+              </Text>
+            ) : typeof children === 'function' ? (
+              children(state)
+            ) : (
+              children
+            )}
+          </>
+        )}
+      </Control>
+    </Container>
+  );
+}
+
+/**
+ * The control's style as Reanimated can read it: resolved now for the
+ * animated control, left as a callback where no animated style is involved.
+ */
+function resolveStyle<T>(
+  animated: boolean,
+  pressed: boolean,
+  style: (state: PressableStateCallbackType) => T,
+): T | ((state: PressableStateCallbackType) => T) {
+  return animated ? style({ pressed }) : style;
+}
+
+export { buttonVariants, labelVariants };

package/src/components/checkbox.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useThemeColors, useHaptics, useIsolinePlatform } from '../provider.tsx';
+import { Pressable } from './pressable.tsx';
+import { Check } from './icons.tsx';
+import { Text } from './text.tsx';
+
+export interface CheckboxProps {
+  checked: boolean | 'mixed';
+  onCheckedChange: (checked: boolean) => void;
+  accessibilityLabel: string;
+  label?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+/** Controlled selection; storage and selection of a collection remain caller-owned. */
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  accessibilityLabel,
+  label,
+  disabled,
+  style,
+}: CheckboxProps) {
+  const colors = useThemeColors();
+  const ios = useIsolinePlatform() === 'ios';
+  const { selectionHaptic } = useHaptics();
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      onPress={() => {
+        selectionHaptic();
+        onCheckedChange(checked !== true);
+      }}
+      style={[
+        {
+          minHeight: 44,
+          minWidth: 44,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          opacity: disabled ? 0.4 : 1,
+        },
+        style,
+      ]}
+    >
+      <View
+        style={{
+          width: 24,
+          height: 24,
+          borderRadius: ios || checked ? 12 : 6,
+          borderWidth: 2,
+          borderColor: checked ? colors.primary : colors.outline,
+          backgroundColor: checked ? colors.primary : 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {checked === 'mixed' ? (
+          <View style={{ width: 12, height: 2, backgroundColor: colors.onPrimary }} />
+        ) : checked ? (
+          <Check size={18} color={colors.onPrimary} />
+        ) : null}
+      </View>
+      {label ? <Text style={{ flexShrink: 1 }}>{label}</Text> : null}
+    </Pressable>
+  );
+}

package/src/components/color-picker.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { Check } from './icons.tsx';
+import { BottomSheet } from './bottom-sheet.tsx';
+import { useThemeColors, type MaterialOptions } from '../provider.tsx';
+import { useRadioNavigation } from './radio-navigation.ts';
+
+export interface ColorSwatch {
+  value: string;
+  label: string;
+  color?: string;
+  disabled?: boolean;
+}
+export interface ColorSwatchPickerProps {
+  value: string | null;
+  onChange: (value: string) => void;
+  swatches: ColorSwatch[];
+  accessibilityLabel: string;
+}
+export function ColorSwatchPicker({
+  value,
+  onChange,
+  swatches,
+  accessibilityLabel,
+}: ColorSwatchPickerProps) {
+  const colors = useThemeColors();
+  const navigation = useRadioNavigation(
+    swatches.map((swatch) => ({ id: swatch.value, disabled: swatch.disabled })),
+    value,
+    onChange,
+  );
+  return (
+    <View
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}
+    >
+      {swatches.map((swatch) => (
+        <Pressable
+          {...navigation(swatch.value)}
+          key={swatch.value}
+          accessibilityRole="radio"
+          accessibilityLabel={swatch.label}
+          disabled={swatch.disabled}
+          accessibilityState={{ checked: value === swatch.value, disabled: swatch.disabled }}
+          onPress={() => onChange(swatch.value)}
+          style={{
+            width: 48,
+            height: 48,
+            padding: 4,
+            borderWidth: 2,
+            borderRadius: 24,
+            borderColor: value === swatch.value ? colors.primary : 'transparent',
+            opacity: swatch.disabled ? 0.4 : 1,
+          }}
+        >
+          <View
+            style={{
+              flex: 1,
+              borderRadius: 20,
+              backgroundColor: swatch.color ?? swatch.value,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {value === swatch.value ? (
+              <View style={{ borderRadius: 12, backgroundColor: colors.surface, padding: 2 }}>
+                <Check size={18} color={colors.onSurface} />
+              </View>
+            ) : null}
+          </View>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+export interface ColorPickerSheetProps extends ColorSwatchPickerProps, MaterialOptions {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+}
+export function ColorPickerSheet({
+  visible,
+  onClose,
+  title,
+  material = 'solid',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive,
+  ...props
+}: ColorPickerSheetProps) {
+  return (
+    <BottomSheet
+      visible={visible}
+      onClose={onClose}
+      material={material}
+      glassStyle={glassStyle}
+      tintColor={tintColor}
+      fallbackColor={fallbackColor}
+      interactive={interactive}
+    >
+      <Text variant="heading">{title}</Text>
+      <ColorSwatchPicker
+        {...props}
+        onChange={(value) => {
+          props.onChange(value);
+          onClose();
+        }}
+      />
+    </BottomSheet>
+  );
+}

package/src/components/context-menu.tsx

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { useThemeColors, useHaptics } from '../provider.tsx';
+import type { MaterialOptions } from '../material.ts';
+import { Popover } from './popover.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { Check, type IconProps } from './icons.tsx';
+export interface ContextMenuItem {
+  id: string;
+  label: string;
+  onPress: () => void;
+  icon?: React.ComponentType<IconProps>;
+  disabled?: boolean;
+  destructive?: boolean;
+  selected?: boolean;
+}
+export interface ContextMenuProps extends MaterialOptions {
+  children: React.ReactNode;
+  accessibilityLabel: string;
+  items: ContextMenuItem[];
+  disabled?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: 'top' | 'bottom';
+}
+/** Shared anchored menu, not a UIKit context-menu controller or an application router. */
+export function ContextMenu({
+  children,
+  accessibilityLabel,
+  items,
+  disabled,
+  onOpenChange,
+  placement,
+  ...material
+}: ContextMenuProps) {
+  const [open, setOpen] = React.useState(false);
+  const anchor = React.useRef<React.ComponentRef<typeof View>>(null);
+  const set = (next: boolean) => {
+    setOpen(next);
+    onOpenChange?.(next);
+  };
+  return (
+    <View ref={anchor} collapsable={false}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ expanded: open, disabled }}
+        disabled={disabled}
+        onPress={() => set(true)}
+        onLongPress={() => set(true)}
+        style={{ minHeight: 44, justifyContent: 'center' }}
+      >
+        {children}
+      </Pressable>
+      <Popover
+        {...material}
+        visible={open}
+        onClose={() => set(false)}
+        anchorRef={anchor}
+        placement={placement}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <ContextMenuRows items={items} onClose={() => set(false)} />
+      </Popover>
+    </View>
+  );
+}
+export function ContextMenuRows({
+  items,
+  onClose,
+}: {
+  items: ContextMenuItem[];
+  onClose: () => void;
+}) {
+  const colors = useThemeColors();
+  const refs = React.useRef<Record<string, React.ComponentRef<typeof Pressable> | null>>({});
+  const initial =
+    items.find((item) => item.selected && !item.disabled) ??
+    items.find((item) => !item.disabled);
+  React.useEffect(() => {
+    if (Platform.OS === 'web' && initial) refs.current[initial.id]?.focus();
+  }, []);
+  const { selectionHaptic } = useHaptics();
+  return (
+    <View accessibilityRole="menu">
+      {items.map((item) => {
+        const Icon = item.icon;
+        const color = item.destructive ? colors.error : colors.onSurface;
+        return (
+          <Pressable
+            key={item.id}
+            ref={(node) => {
+              refs.current[item.id] = node;
+            }}
+            tabIndex={item.id === initial?.id ? 0 : -1}
+            {...(Platform.OS === 'web'
+              ? {
+                  onKeyDown: (
+                    event: Parameters<
+                      NonNullable<React.ComponentProps<typeof Pressable>['onKeyDown']>
+                    >[0],
+                  ) => {
+                    const key = event.nativeEvent.key;
+                    if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(key)) return;
+                    event.preventDefault();
+                    const enabled = items.filter((action) => !action.disabled);
+                    if (!enabled.length) return;
+                    const index = enabled.findIndex((action) => action.id === item.id);
+                    const next =
+                      key === 'Home'
+                        ? enabled[0]
+                        : key === 'End'
+                          ? enabled[enabled.length - 1]
+                          : enabled[
+                              (index + (key === 'ArrowDown' ? 1 : -1) + enabled.length) %
+                                enabled.length
+                            ];
+                    refs.current[next.id]?.focus();
+                  },
+                }
+              : {})}
+            disabled={item.disabled}
+            accessibilityRole={item.selected === undefined ? 'menuitem' : 'menuitemradio'}
+            accessibilityLabel={item.label}
+            accessibilityState={{ disabled: item.disabled, checked: item.selected }}
+            onPress={() => {
+              selectionHaptic();
+              onClose();
+              item.onPress();
+            }}
+            style={{
+              minHeight: 44,
+              padding: 10,
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 10,
+              opacity: item.disabled ? 0.4 : 1,
+              borderRadius: 10,
+            }}
+          >
+            {Icon ? <Icon size={20} color={color} /> : null}
+            <Text style={{ flex: 1, color, fontSize: 16 }}>{item.label}</Text>
+            {item.selected ? <Check size={18} color={colors.primary} /> : null}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}