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

package/src/components/switch.tsx

@@ -0,0 +1,77 @@
+import { Platform, View, Switch as RNSwitch } from 'react-native';
+import { Pressable } from './pressable.tsx';
+
+import { useIsolinePlatform, useThemeColors } from '../provider.tsx';
+
+export interface SwitchProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}
+
+/** Native switch geometry on each OS, with the app's shared colour roles. */
+export function Switch({ value, onValueChange, disabled, accessibilityLabel }: SwitchProps) {
+  const colors = useThemeColors();
+  const ios = useIsolinePlatform() === 'ios';
+
+  if (Platform.OS === 'web')
+    return (
+      <Pressable
+        accessibilityRole="switch"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ checked: value, disabled }}
+        disabled={disabled}
+        onPress={() => onValueChange(!value)}
+        style={{
+          minHeight: 44,
+          minWidth: ios ? 51 : 52,
+          justifyContent: 'center',
+          opacity: disabled ? 0.4 : 1,
+        }}
+      >
+        <View
+          pointerEvents="none"
+          style={{
+            width: ios ? 51 : 52,
+            height: ios ? 31 : 32,
+            padding: ios ? 3 : 2,
+            borderRadius: 16,
+            borderWidth: ios ? 0 : 2,
+            borderColor: value ? colors.primary : colors.outline,
+            backgroundColor: value ? colors.primary : colors.outlineVariant,
+            justifyContent: 'center',
+          }}
+        >
+          <View
+            style={{
+              width: ios ? 25 : 24,
+              height: ios ? 25 : 24,
+              borderRadius: 14,
+              backgroundColor: ios
+                ? '#fff'
+                : value
+                  ? colors.onPrimary
+                  : colors.onSurfaceVariant,
+              alignSelf: value ? 'flex-end' : 'flex-start',
+            }}
+          />
+        </View>
+      </Pressable>
+    );
+
+  return (
+    <RNSwitch
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      trackColor={{
+        false: colors.outlineVariant,
+        true: ios ? colors.primary : colors.primaryContainer,
+      }}
+      thumbColor={ios ? undefined : value ? colors.primary : colors.onSurfaceVariant}
+      ios_backgroundColor={colors.outlineVariant}
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+}

package/src/components/tab-bar.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { I18nManager, Platform, View, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import {
+  Surface,
+  useIsolinePlatform,
+  useThemeColors,
+  useHaptics,
+  type MaterialOptions,
+} from '../provider.tsx';
+import { spatial } from '../motion.ts';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import type { IconProps } from './icons.tsx';
+export interface TabBarItem<T extends string> {
+  id: T;
+  label: string;
+  icon?: React.ComponentType<IconProps>;
+  disabled?: boolean;
+  badge?: string | number;
+}
+export interface TabBarProps<T extends string> extends MaterialOptions {
+  items: TabBarItem<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/** Controlled navigation UI: route handling belongs to the consuming app. */
+export function TabBar<T extends string>({
+  items,
+  value,
+  onChange,
+  accessibilityLabel,
+  style,
+  material = 'auto',
+  glassStyle,
+  tintColor,
+  fallbackColor,
+  interactive = false,
+}: TabBarProps<T>) {
+  const colors = useThemeColors();
+  const ios = useIsolinePlatform() === 'ios';
+  const { selectionHaptic } = useHaptics();
+  const refs = React.useRef<Record<string, React.ComponentRef<typeof Pressable> | null>>({});
+  const [width, setWidth] = React.useState(0);
+  const index = items.findIndex((item) => item.id === value);
+  const focusId =
+    items.find((item) => item.id === value && !item.disabled)?.id ??
+    items.find((item) => !item.disabled)?.id;
+  const visualIndex = I18nManager.isRTL
+    ? items.length - 1 - Math.max(0, index)
+    : Math.max(0, index);
+  const position = useSharedValue(visualIndex);
+  React.useEffect(() => {
+    position.value = withSpring(visualIndex, spatial.default);
+  }, [visualIndex, position]);
+  const segment = items.length ? Math.max(0, width - 8) / items.length : 0;
+  const motion = useAnimatedStyle(() => ({
+    transform: [{ translateX: position.value * segment }],
+  }));
+  const Marker = (Platform.OS === 'web' ? View : Animated.View) as typeof Animated.View;
+  return (
+    <Surface
+      material={ios ? material : 'solid'}
+      glassStyle={glassStyle}
+      tintColor={tintColor}
+      fallbackColor={fallbackColor}
+      interactive={interactive}
+      accessibilityRole="tablist"
+      accessibilityLabel={accessibilityLabel}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+      style={[
+        { padding: 4, borderRadius: ios ? 32 : 24, flexDirection: 'row', minHeight: 64 },
+        style,
+      ]}
+    >
+      {index >= 0 && width > 0 ? (
+        <Marker
+          pointerEvents="none"
+          style={[
+            {
+              position: 'absolute',
+              left: 4,
+              top: 4,
+              bottom: 4,
+              width: segment,
+              borderRadius: ios ? 28 : 20,
+              backgroundColor: colors.secondaryContainer,
+            },
+            Platform.OS === 'web'
+              ? { transform: [{ translateX: visualIndex * segment }] }
+              : motion,
+          ]}
+        />
+      ) : null}
+      {items.map((item) => {
+        const selected = item.id === value;
+        const Icon = item.icon;
+        return (
+          <Pressable
+            key={item.id}
+            ref={(node) => {
+              refs.current[item.id] = node;
+            }}
+            tabIndex={item.id === focusId ? 0 : -1}
+            {...(Platform.OS === 'web'
+              ? {
+                  onKeyDown: (
+                    event: Parameters<
+                      NonNullable<React.ComponentProps<typeof Pressable>['onKeyDown']>
+                    >[0],
+                  ) => {
+                    const key = event.nativeEvent.key;
+                    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(key)) return;
+                    event.preventDefault();
+                    const enabled = items.filter((tab) => !tab.disabled);
+                    if (!enabled.length) return;
+                    const current = enabled.findIndex((tab) => tab.id === item.id);
+                    const delta =
+                      (key === 'ArrowRight' ? 1 : -1) * (I18nManager.isRTL ? -1 : 1);
+                    const next =
+                      key === 'Home'
+                        ? enabled[0]
+                        : key === 'End'
+                          ? enabled[enabled.length - 1]
+                          : enabled[(current + delta + enabled.length) % enabled.length];
+                    onChange(next.id);
+                    refs.current[next.id]?.focus();
+                  },
+                }
+              : {})}
+            disabled={item.disabled}
+            accessibilityRole="tab"
+            accessibilityLabel={item.label}
+            accessibilityState={{ selected, disabled: item.disabled }}
+            onPress={() => {
+              if (!selected) {
+                selectionHaptic();
+                onChange(item.id);
+              }
+            }}
+            style={{
+              flex: 1,
+              minWidth: 0,
+              minHeight: 56,
+              padding: 6,
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 2,
+              borderRadius: 28,
+              opacity: item.disabled ? 0.4 : 1,
+            }}
+          >
+            {Icon ? (
+              <Icon size={22} color={selected ? colors.primary : colors.onSurfaceVariant} />
+            ) : null}
+            <Text
+              numberOfLines={1}
+              style={{
+                fontSize: 12,
+                lineHeight: 16,
+                fontWeight: selected ? '700' : '500',
+                color: selected ? colors.primary : colors.onSurfaceVariant,
+              }}
+            >
+              {item.label}
+            </Text>
+            {item.badge !== undefined ? (
+              <View
+                style={{
+                  position: 'absolute',
+                  right: 6,
+                  top: 2,
+                  paddingHorizontal: 4,
+                  minWidth: 16,
+                  borderRadius: 8,
+                  backgroundColor: colors.error,
+                }}
+              >
+                <Text style={{ color: colors.onError, fontSize: 10, lineHeight: 14 }}>
+                  {item.badge}
+                </Text>
+              </View>
+            ) : null}
+          </Pressable>
+        );
+      })}
+    </Surface>
+  );
+}

package/src/components/text-field.tsx

@@ -0,0 +1,264 @@
+import * as React from 'react';
+import { Platform, Text as RNText, TextInput, View } from 'react-native';
+import Animated, {
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { Text } from './text.tsx';
+import { PasswordVisibility } from './password-visibility.tsx';
+import { effects, spatial } from '../motion.ts';
+import { corner } from '../shape.ts';
+import { useIsolinePlatform, useThemeColors } from '../provider.tsx';
+import { cn } from '../utils.ts';
+
+type TextInputInstance = React.ElementRef<typeof TextInput>;
+
+/** The single-line field's height, `h-14`. */
+const FIELD_HEIGHT = 56;
+
+export type TextFieldProps = React.ComponentProps<typeof TextInput> & {
+  label: string;
+  /** Shown below the field in the error colour, which the border and label pick up too. */
+  error?: string | null;
+  /**
+   * The `bg-*` class of whatever surface the field sits on. The floated
+   * label needs an opaque patch behind it to mask the border line it
+   * overlaps, and that patch has to match the surface underneath — it
+   * defaults to the app's popover surface because every field so far lives
+   * in a dialog or sheet.
+   */
+  notchClassName?: string;
+};
+
+/**
+ * Material 3 Expressive outlined text field.
+ *
+ * The label rests inside the field, where a placeholder would sit, until
+ * there is a reason to move it — focus, or a value — at which point it
+ * floats up to overlap the border. Painting an opaque patch behind it there
+ * is the cheap way to get the M3 "notch": the alternative is clipping the
+ * border into two arcs, which this does not need.
+ *
+ * A placeholder is a hint for the empty field the reader is typing into, so
+ * it only shows once the label has floated out of its way; while the label
+ * rests inside the field the two would sit on top of each other.
+ */
+export const TextField: React.ForwardRefExoticComponent<
+  TextFieldProps & React.RefAttributes<TextInputInstance>
+> = React.forwardRef<TextInputInstance, TextFieldProps>(function TextField(
+  {
+    label,
+    error,
+    value,
+    placeholder,
+    style,
+    className,
+    notchClassName,
+    onFocus,
+    onBlur,
+    accessibilityLabel,
+    secureTextEntry,
+    ...props
+  },
+  ref,
+) {
+  const ios = useIsolinePlatform() === 'ios';
+  const web = Platform.OS === 'web';
+  const Box = (web ? View : Animated.View) as typeof Animated.View;
+  const Label = (web ? RNText : Animated.Text) as typeof Animated.Text;
+  const colors = useThemeColors();
+  const [revealed, setRevealed] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const floated = focused || Boolean(value);
+
+  const float = useSharedValue(floated ? 1 : 0);
+  const focus = useSharedValue(focused ? 1 : 0);
+
+  React.useEffect(() => {
+    float.value = withSpring(floated ? 1 : 0, spatial.default);
+  }, [floated, float]);
+
+  React.useEffect(() => {
+    focus.value = withSpring(focused ? 1 : 0, effects.default);
+  }, [focused, focus]);
+
+  const handleFocus = React.useCallback<NonNullable<TextFieldProps['onFocus']>>(
+    (event) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = React.useCallback<NonNullable<TextFieldProps['onBlur']>>(
+    (event) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+    [onBlur],
+  );
+
+  const borderStyle = useAnimatedStyle(() => ({
+    borderColor: error
+      ? colors.error
+      : interpolateColor(focus.value, [0, 1], [colors.outline, colors.primary]),
+    borderWidth: interpolate(focus.value, [0, 1], [1, 2]),
+  }));
+
+  const labelWrapStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateY: interpolate(float.value, [0, 1], [0, -FIELD_HEIGHT / 2]) },
+      { scale: interpolate(float.value, [0, 1], [1, 0.75]) },
+    ],
+  }));
+
+  const labelTextStyle = useAnimatedStyle(() => ({
+    color: error
+      ? colors.error
+      : interpolateColor(focus.value, [0, 1], [colors.onSurfaceVariant, colors.primary]),
+  }));
+
+  if (ios)
+    return (
+      <View className="gap-1.5">
+        <Text variant="label" style={{ color: error ? colors.error : colors.onSurfaceVariant }}>
+          {label}
+        </Text>
+        <View style={{ position: 'relative' }}>
+          <TextInput
+            ref={ref}
+            value={value}
+            placeholder={placeholder}
+            placeholderTextColor={colors.onSurfaceVariant}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            accessibilityLabel={accessibilityLabel ?? label}
+            className={cn('text-foreground', className)}
+            style={[
+              {
+                minHeight: 44,
+                paddingHorizontal: 12,
+                paddingRight: secureTextEntry ? 56 : 12,
+                paddingVertical: 10,
+                borderRadius: 10,
+                backgroundColor: colors.surfaceContainerHigh,
+                borderWidth: 1,
+                borderColor: error ? colors.error : focused ? colors.primary : 'transparent',
+                fontSize: 17,
+              },
+              style,
+            ]}
+            {...props}
+            autoCapitalize={props.autoCapitalize ?? (secureTextEntry ? 'none' : undefined)}
+            autoCorrect={props.autoCorrect ?? (secureTextEntry ? false : undefined)}
+            secureTextEntry={secureTextEntry && !revealed}
+          />
+          {secureTextEntry ? (
+            <PasswordVisibility
+              revealed={revealed}
+              onPress={() => setRevealed((value) => !value)}
+            />
+          ) : null}
+        </View>
+        {error ? (
+          <Text variant="caption" accessibilityRole="alert" style={{ color: colors.error }}>
+            {error}
+          </Text>
+        ) : null}
+      </View>
+    );
+  return (
+    <View className="gap-1.5">
+      <View className="relative">
+        <TextInput
+          ref={ref}
+          value={value}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={cn(
+            'h-14 rounded px-4 pt-2 text-base text-foreground',
+            secureTextEntry && 'pr-14',
+            className,
+          )}
+          style={style}
+          placeholder={floated ? placeholder : undefined}
+          accessibilityLabel={accessibilityLabel ?? label}
+          {...props}
+          autoCapitalize={props.autoCapitalize ?? (secureTextEntry ? 'none' : undefined)}
+          autoCorrect={props.autoCorrect ?? (secureTextEntry ? false : undefined)}
+          secureTextEntry={secureTextEntry && !revealed}
+        />
+
+        <Box
+          pointerEvents="none"
+          style={[
+            web
+              ? {
+                  borderWidth: focused ? 2 : 1,
+                  borderColor: error ? colors.error : focused ? colors.primary : colors.outline,
+                }
+              : borderStyle,
+            { borderRadius: corner.extraSmall },
+          ]}
+          className="absolute inset-0"
+        />
+
+        {/* The label rests centred on the first line, where the text goes,
+            and floats by half the field's height onto the border. */}
+        <View
+          pointerEvents="none"
+          style={{ height: FIELD_HEIGHT }}
+          className="absolute left-3 top-0 justify-center"
+        >
+          <Box
+            style={[
+              web
+                ? {
+                    transform: [
+                      { translateY: floated ? -FIELD_HEIGHT / 2 : 0 },
+                      { scale: floated ? 0.75 : 1 },
+                    ],
+                  }
+                : labelWrapStyle,
+              { transformOrigin: 'left center' },
+            ]}
+            className={cn('rounded px-1', notchClassName ?? 'bg-popover')}
+          >
+            <Label
+              style={
+                web
+                  ? {
+                      color: error
+                        ? colors.error
+                        : focused
+                          ? colors.primary
+                          : colors.onSurfaceVariant,
+                    }
+                  : labelTextStyle
+              }
+              className="text-base"
+            >
+              {label}
+            </Label>
+          </Box>
+        </View>
+        {secureTextEntry ? (
+          <PasswordVisibility
+            revealed={revealed}
+            onPress={() => setRevealed((value) => !value)}
+          />
+        ) : null}
+      </View>
+
+      {error ? (
+        <Text variant="caption" className="text-destructive">
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+});

package/src/components/text.tsx

@@ -0,0 +1,58 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+
+import { useIsolinePlatform, useIsolineTheme } from '../provider.tsx';
+import { cn } from '../utils.ts';
+import type { TextVariant } from '../theme.ts';
+
+const textVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      default: 'text-base leading-6',
+      display: 'text-[40px] leading-[46px] font-extrabold tracking-[-0.02em]',
+      title: 'text-[32px] leading-9 font-extrabold tracking-[-0.015em]',
+      heading: 'text-[22px] leading-7 font-bold tracking-tight',
+      subject: 'text-base font-semibold tracking-tight',
+      body: 'text-base leading-6',
+      reader: 'text-[18px] leading-[30px]',
+      muted: 'text-sm text-muted-foreground',
+      caption: 'text-sm text-muted-foreground',
+      labelLarge: 'text-[15px] font-semibold tracking-[0.01em]',
+      label: 'text-sm font-semibold tracking-[0.01em] text-muted-foreground',
+      mono: 'font-mono text-sm text-muted-foreground',
+      value: 'font-mono text-[15px] leading-[22px]',
+      valueLarge: 'font-mono text-[22px] leading-7 font-bold',
+      meta: 'text-[13px] leading-[18px] text-muted-foreground',
+    },
+  },
+  defaultVariants: { variant: 'default' },
+});
+
+export type TextProps = React.ComponentProps<typeof RNText> & VariantProps<typeof textVariants>;
+export function Text({ className, variant, style, ...props }: TextProps) {
+  const theme = useIsolineTheme();
+  const ios = useIsolinePlatform() === 'ios';
+  const role = variant ?? 'default';
+  const iosType = {
+    default: { fontSize: 17, lineHeight: 22 },
+    body: { fontSize: 17, lineHeight: 22 },
+    display: { fontSize: 34, lineHeight: 41, fontWeight: '700' as const },
+    title: { fontSize: 28, lineHeight: 34, fontWeight: '700' as const },
+    heading: { fontSize: 22, lineHeight: 28, fontWeight: '600' as const },
+    caption: { fontSize: 13, lineHeight: 18 },
+    label: { fontSize: 13, lineHeight: 18 },
+  };
+  return (
+    <RNText
+      className={cn(textVariants({ variant }), className)}
+      style={[
+        ios && iosType[role as keyof typeof iosType],
+        theme.typography?.[(variant ?? 'default') as TextVariant],
+        style,
+      ]}
+      {...props}
+    />
+  );
+}
+export { textVariants };