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

package/nativewind.cjs

@@ -0,0 +1,68 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        outline: 'hsl(var(--outline))',
+        outlineVariant: 'hsl(var(--outline-variant))',
+        surface: 'hsl(var(--surface))',
+        surfaceVariant: 'hsl(var(--surface-variant))',
+        onSurface: 'hsl(var(--on-surface))',
+        onSurfaceVariant: 'hsl(var(--on-surface-variant))',
+        surfaceContainerLowest: 'hsl(var(--surface-container-lowest))',
+        surfaceContainerLow: 'hsl(var(--surface-container-low))',
+        surfaceContainer: 'hsl(var(--surface-container))',
+        surfaceContainerHigh: 'hsl(var(--surface-container-high))',
+        surfaceContainerHighest: 'hsl(var(--surface-container-highest))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        primaryContainer: 'hsl(var(--primary-container))',
+        onPrimaryContainer: 'hsl(var(--on-primary-container))',
+        secondaryContainer: 'hsl(var(--secondary-container))',
+        onSecondaryContainer: 'hsl(var(--on-secondary-container))',
+        tertiary: {
+          DEFAULT: 'hsl(var(--tertiary))',
+          foreground: 'hsl(var(--on-tertiary))',
+        },
+        tertiaryContainer: 'hsl(var(--tertiary-container))',
+        onTertiaryContainer: 'hsl(var(--on-tertiary-container))',
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        errorContainer: 'hsl(var(--error-container))',
+        onErrorContainer: 'hsl(var(--on-error-container))',
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        inverseSurface: 'hsl(var(--inverse-surface))',
+        inverseOnSurface: 'hsl(var(--inverse-on-surface))',
+        inversePrimary: 'hsl(var(--inverse-primary))',
+        success: 'hsl(var(--success))',
+      },
+    },
+  },
+  plugins: [],
+};

package/package.json

@@ -1,6 +1,63 @@
-{
-  "name": "@isoline-ui/react-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@isoline-ui/react-native",
+  "version": "0.1.0-alpha.3",
+  "description": "Shared expressive React Native components with platform-aware interaction",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/isoline-ui/isoline-ui.git",
+    "directory": "packages/react-native"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "default": "./src/theme.ts"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./src/tokens.ts"
+    },
+    "./nativewind": "./nativewind.cjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist",
+    "nativewind.cjs",
+    "README.md",
+    "LICENSE",
+    "NOTICE.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19.2.0 <20",
+    "react-native": ">=0.86.0 <0.89.0",
+    "nativewind": "^4.2.0",
+    "tailwindcss": "^3.4.0",
+    "react-native-reanimated": ">=4.5.0 <5",
+    "react-native-gesture-handler": ">=2.32.0 <4",
+    "react-native-safe-area-context": ">=5.7.0 <6",
+    "react-native-svg": ">=15.15.0 <16"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "typecheck": "tsc --project tsconfig.json"
+  }
+}

package/src/amount.ts

@@ -0,0 +1,53 @@
+/** Parse a locale-formatted editing value; invalid/partial input stays null. */
+export function parseLocalizedAmount(input: string, locale = 'en-US'): number | null {
+  const parts = new Intl.NumberFormat(locale).formatToParts(-12345.6);
+  const group = parts.find((part) => part.type === 'group')?.value;
+  const decimal = parts.find((part) => part.type === 'decimal')?.value ?? '.';
+  const minus = parts.find((part) => part.type === 'minusSign')?.value ?? '-';
+  let value = input.trim().replace(/[\u200e\u200f\u061c]/g, '');
+  for (let digit = 0; digit <= 9; digit++) {
+    const local = new Intl.NumberFormat(locale, { useGrouping: false }).format(digit);
+    if (local !== String(digit)) value = value.split(local).join(String(digit));
+  }
+  if (group && /\s/u.test(group)) value = value.replace(/[ \u00a0\u202f]/g, group);
+  if (group && value.includes(group)) {
+    const [integer, fraction] = value.split(decimal);
+    if (fraction?.includes(group)) return null;
+    const groups = integer
+      .replace(minus, '')
+      .replace(/^\u2212/, '')
+      .split(group);
+    const example = new Intl.NumberFormat(locale)
+      .formatToParts(123456789)
+      .filter((part) => part.type === 'integer');
+    const primary = example.at(-1)?.value.length ?? 3;
+    const secondary = example.at(-2)?.value.length ?? primary;
+    if (
+      groups.some((part) => !/^\d+$/.test(part)) ||
+      groups.at(-1)!.length !== primary ||
+      groups.slice(1, -1).some((part) => part.length !== secondary) ||
+      groups[0].length > secondary
+    )
+      return null;
+    value = value.split(group).join('');
+  }
+  value = value
+    .split(decimal)
+    .join('.')
+    .split(minus)
+    .join('-')
+    .replace(/\u2212/g, '-');
+  if (!/^-?(?:\d+(?:\.\d+)?|\.\d+)$/.test(value)) return null;
+  const result = Number(value);
+  return Number.isFinite(result) ? result : null;
+}
+export function formatLocalizedAmount(
+  value: number,
+  locale = 'en-US',
+  fractionDigits = 2,
+): string {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(value);
+}

package/src/calendar.ts

@@ -0,0 +1,42 @@
+/** Gregorian local-date values. UTC arithmetic avoids DST changes and host time zones. */
+export function validDate(value: string): boolean {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const date = new Date(`${value}T12:00:00Z`);
+  return Number.isFinite(date.valueOf()) && date.toISOString().slice(0, 10) === value;
+}
+export function addDays(value: string, amount: number): string {
+  if (!validDate(value)) throw new RangeError('Expected a Gregorian date in YYYY-MM-DD format');
+  const date = new Date(`${value}T12:00:00Z`);
+  date.setUTCDate(date.getUTCDate() + amount);
+  return date.toISOString().slice(0, 10);
+}
+export function addMonths(month: string, amount: number): string {
+  const first = month.slice(0, 7) + '-01';
+  if (!validDate(first)) throw new RangeError('Expected a Gregorian month');
+  const date = new Date(`${first}T12:00:00Z`);
+  date.setUTCMonth(date.getUTCMonth() + amount);
+  return date.toISOString().slice(0, 7);
+}
+export function monthDays(month: string, firstDayOfWeek = 1): string[] {
+  const first = `${month.slice(0, 7)}-01`;
+  if (!validDate(first)) throw new RangeError('Expected a Gregorian month');
+  const weekday = new Date(`${first}T12:00:00Z`).getUTCDay();
+  const offset = (weekday - (((firstDayOfWeek % 7) + 7) % 7) + 7) % 7;
+  return Array.from({ length: 42 }, (_, index) => addDays(first, index - offset));
+}
+export function formatCalendarDate(
+  date: string,
+  locale?: string,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'medium' },
+): string {
+  return validDate(date)
+    ? new Intl.DateTimeFormat(locale, {
+        ...options,
+        calendar: 'gregory',
+        timeZone: 'UTC',
+      }).format(new Date(`${date}T12:00:00Z`))
+    : date;
+}
+export function validTime(value: string): boolean {
+  return /^(?:[01]\d|2[0-3]):[0-5]\d$/.test(value);
+}

package/src/components/action-chip.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { useThemeColors, useIsolinePlatform } from '../provider.tsx';
+import { Button, type ButtonProps } from './button.tsx';
+import { Text } from './text.tsx';
+import type { IconProps } from './icons.tsx';
+
+export interface ActionChipProps extends Omit<
+  ButtonProps,
+  'children' | 'icon' | 'label' | 'variant' | 'size'
+> {
+  label: string;
+  icon?: React.ComponentType<IconProps>;
+  tone?: 'neutral' | 'primary' | 'secondary' | 'tertiary';
+}
+export function ActionChip({
+  label,
+  icon: Icon,
+  tone = 'neutral',
+  style,
+  ...props
+}: ActionChipProps) {
+  const colors = useThemeColors();
+  const glass =
+    useIsolinePlatform() === 'ios' &&
+    props.material !== undefined &&
+    props.material !== 'solid';
+  const backgroundColor = glass
+    ? 'transparent'
+    : tone === 'neutral'
+      ? colors.surfaceContainerHigh
+      : colors[`${tone}Container`];
+  const color = glass
+    ? colors.primary
+    : tone === 'neutral'
+      ? colors.onSurface
+      : colors[
+          tone === 'primary'
+            ? 'onPrimaryContainer'
+            : tone === 'secondary'
+              ? 'onSecondaryContainer'
+              : 'onTertiaryContainer'
+        ];
+  return (
+    <Button
+      {...props}
+      size="s"
+      variant="tonal"
+      accessibilityLabel={props.accessibilityLabel ?? label}
+      // A callback only when the caller passed one: Button has to re-render on
+      // press to resolve it, which a plain style avoids.
+      style={
+        typeof style === 'function'
+          ? (state) => [{ backgroundColor, minHeight: 48 }, style(state)]
+          : [{ backgroundColor, minHeight: 48 }, style]
+      }
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        {Icon ? <Icon size={20} color={color} /> : null}
+        <Text style={{ color, fontWeight: '600' }}>{label}</Text>
+      </View>
+    </Button>
+  );
+}

package/src/components/amount-field.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { View, TextInput } from 'react-native';
+import { TextField, type TextFieldProps } from './text-field.tsx';
+import { Text } from './text.tsx';
+import { parseLocalizedAmount } from '../amount.ts';
+
+export interface AmountFieldProps extends Omit<TextFieldProps, 'value' | 'onChangeText'> {
+  value: string;
+  onChangeText: (value: string) => void;
+  onAmountChange?: (amount: number | null) => void;
+  currency?: string | null;
+  locale?: string;
+}
+/** Preserve the editing string, including incomplete decimals; report numeric units separately. */
+export const AmountField: React.ForwardRefExoticComponent<
+  AmountFieldProps & React.RefAttributes<React.ElementRef<typeof TextInput>>
+> = React.forwardRef<React.ComponentRef<typeof TextInput>, AmountFieldProps>(
+  function AmountField(
+    { value, onChangeText, onAmountChange, currency, locale = 'en-US', ...props },
+    ref,
+  ) {
+    let symbol = currency ?? '';
+    if (currency) {
+      try {
+        symbol =
+          new Intl.NumberFormat(locale, { style: 'currency', currency })
+            .formatToParts(0)
+            .find((part) => part.type === 'currency')?.value ?? currency;
+      } catch {}
+    }
+    return (
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <TextField
+            {...props}
+            ref={ref}
+            value={value}
+            keyboardType="decimal-pad"
+            onChangeText={(text) => {
+              onChangeText(text);
+              onAmountChange?.(parseLocalizedAmount(text, locale));
+            }}
+          />
+        </View>
+        {symbol ? <Text accessibilityLabel={currency ?? undefined}>{symbol}</Text> : null}
+      </View>
+    );
+  },
+);

package/src/components/avatar.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {
+  Image,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { Text } from './text.tsx';
+import { useThemeColors } from '../provider.tsx';
+
+export interface AvatarProps {
+  accessibilityLabel: string;
+  initials?: string;
+  source?: ImageSourcePropType;
+  size?: number;
+  color?: string;
+  foregroundColor?: string;
+  accent?: string;
+  badge?: React.ReactNode;
+  renderImage?: (size: number, onError: () => void) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+/** Image rendering and initials only: no address book, network lookup or app preference. */
+export function Avatar({
+  accessibilityLabel,
+  initials,
+  source,
+  size = 44,
+  color,
+  foregroundColor,
+  accent,
+  badge,
+  renderImage,
+  style,
+  className,
+}: AvatarProps) {
+  const colors = useThemeColors();
+  const [failed, setFailed] = React.useState(false);
+  React.useEffect(() => setFailed(false), [source, renderImage]);
+  return (
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={accessibilityLabel}
+      style={[{ width: size, height: size }, style]}
+    >
+      <View
+        className={className}
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          overflow: 'hidden',
+          backgroundColor: color ?? colors.secondaryContainer,
+          borderWidth: accent ? 2 : 0,
+          borderColor: accent,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text
+          accessible={false}
+          style={{
+            fontSize: size * 0.36,
+            lineHeight: size * 0.5,
+            color: foregroundColor ?? colors.onSecondaryContainer,
+            fontWeight: '600',
+          }}
+        >
+          {initials}
+        </Text>
+        {!failed && renderImage ? (
+          renderImage(size, () => setFailed(true))
+        ) : !failed && source ? (
+          <Image
+            source={source}
+            accessible={false}
+            onError={() => setFailed(true)}
+            resizeMode="cover"
+            style={{ position: 'absolute', width: size, height: size }}
+          />
+        ) : null}
+      </View>
+      {badge ? (
+        <View style={{ position: 'absolute', right: -3, bottom: -3 }}>{badge}</View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/back-button.tsx

@@ -0,0 +1,39 @@
+import { BackIcon } from './back-icon.tsx';
+import { HEADER_ICON_BUTTON } from './icon-button.tsx';
+import { Pressable } from './pressable.tsx';
+import { Text } from './text.tsx';
+import { useLabels } from '../provider.tsx';
+import { useRipple, useThemeColors } from '../provider.tsx';
+
+export interface BackButtonProps {
+  onPress: () => void;
+  /** What the row leads back to, e.g. "Inbox", "Settings". Defaults to "Back". */
+  label?: string;
+}
+
+/**
+ * The `< Back` row every screen opens with.
+ *
+ * The arrow is drawn at the header icon size, so it matches the bare back
+ * arrow of the screens that use a top bar instead (the reader, compose).
+ */
+export function BackButton({ onPress, label }: BackButtonProps) {
+  const colors = useThemeColors();
+  const ripple = useRipple();
+  const labels = useLabels();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={8}
+      android_ripple={{ color: ripple.onNeutral }}
+      accessibilityRole="button"
+      className="h-12 flex-row items-center gap-2 self-start rounded-full pl-2 pr-3"
+    >
+      <BackIcon size={HEADER_ICON_BUTTON.iconSize} color={colors.onSurfaceVariant} />
+      <Text variant="labelLarge" className="text-muted-foreground">
+        {label ?? labels.back}
+      </Text>
+    </Pressable>
+  );
+}

package/src/components/back-icon.tsx

@@ -0,0 +1,25 @@
+import { I18nManager, Platform } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { useIsolinePlatform } from '../provider.tsx';
+import { ArrowLeft, type IconProps } from './icons.tsx';
+
+/** Navigation uses the iOS chevron; directional/content arrows stay unchanged. */
+export function BackIcon({ size = 24, color = '#000000', style, ...props }: IconProps) {
+  if (useIsolinePlatform() !== 'ios') {
+    return <ArrowLeft size={size} color={color} style={style} {...props} />;
+  }
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" style={style} accessible={false}>
+      <Path
+        d={I18nManager.isRTL ? 'm9 5 7 7-7 7' : 'm15 5-7 7 7 7'}
+        fill="none"
+        stroke={color}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/components/badge.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Text } from './text.tsx';
+import { cn } from '../utils.ts';
+
+export interface BadgeProps {
+  label: string;
+  /**
+   * Tints the pill and its text, for a badge that stands for something with a
+   * colour of its own — a tag. Left unset, the badge is the neutral container
+   * colour a folder name gets.
+   */
+  color?: string;
+  className?: string;
+}
+
+/** A small pill label, such as a folder name sitting beside a message count. */
+export function Badge({ label, color, className }: BadgeProps) {
+  return (
+    <View
+      className={cn(
+        'rounded-full px-2 py-0.5',
+        color ? undefined : 'bg-surfaceContainerHigh',
+        className,
+      )}
+      // The colour at low alpha, so a tinted badge reads as tinted rather than
+      // as a solid swatch competing with the accent.
+      style={color ? { backgroundColor: `${color}2A` } : undefined}
+    >
+      <Text
+        variant="caption"
+        className={cn(color ? undefined : 'text-onSurfaceVariant')}
+        style={color ? { color } : undefined}
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}

package/src/components/banner.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from './text.tsx';
+import { Button } from './button.tsx';
+import { IconButton } from './icon-button.tsx';
+import { X, type IconProps } from './icons.tsx';
+import { useThemeColors } from '../provider.tsx';
+
+export interface BannerProps {
+  message: string;
+  title?: string;
+  tone?: 'neutral' | 'info' | 'error';
+  icon?: React.ComponentType<IconProps>;
+  actionLabel?: string;
+  onAction?: () => void;
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+export function Banner({
+  message,
+  title,
+  tone = 'neutral',
+  icon: Icon,
+  actionLabel,
+  onAction,
+  onDismiss,
+  dismissLabel,
+}: BannerProps) {
+  const colors = useThemeColors();
+  const backgroundColor =
+    tone === 'error'
+      ? colors.errorContainer
+      : tone === 'info'
+        ? colors.primaryContainer
+        : colors.surfaceContainerHigh;
+  const color =
+    tone === 'error'
+      ? colors.onErrorContainer
+      : tone === 'info'
+        ? colors.onPrimaryContainer
+        : colors.onSurface;
+  return (
+    <View
+      accessibilityLiveRegion={tone === 'error' ? 'assertive' : 'polite'}
+      style={{ borderRadius: 16, padding: 12, gap: 8, backgroundColor }}
+    >
+      <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
+        {Icon ? <Icon size={24} color={color} /> : null}
+        <View style={{ flex: 1, gap: 4 }}>
+          {title ? <Text style={{ color, fontWeight: '600' }}>{title}</Text> : null}
+          <Text style={{ color }}>{message}</Text>
+        </View>
+        {onDismiss && dismissLabel ? (
+          <IconButton icon={X} accessibilityLabel={dismissLabel} onPress={onDismiss} />
+        ) : null}
+      </View>
+      {actionLabel && onAction ? (
+        <Button variant="ghost" size="s" label={actionLabel} onPress={onAction} />
+      ) : null}
+    </View>
+  );
+}
+export const InlineNotice = Banner;

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { KeyboardAvoidingView, Modal, type DimensionValue } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { type MaterialOptions, ThemeScope, useIsolinePlatform } from '../provider.tsx';
+import { SheetFrame } from './sheet-frame.tsx';
+import { useSheet } from './sheet-transition.ts';
+export interface BottomSheetProps extends MaterialOptions {
+  visible: boolean;
+  onClose: () => void;
+  maxHeight?: DimensionValue;
+  onShow?: () => void;
+  children: React.ReactNode;
+}
+export function BottomSheet({
+  visible,
+  onClose,
+  maxHeight = '90%',
+  onShow,
+  children,
+  ...materialOptions
+}: BottomSheetProps) {
+  const insets = useSafeAreaInsets();
+  const ios = useIsolinePlatform() === 'ios';
+  const sheet = useSheet(visible, onClose);
+  return (
+    <Modal
+      visible={sheet.mounted}
+      transparent
+      presentationStyle="overFullScreen"
+      animationType="none"
+      onRequestClose={onClose}
+      onShow={onShow}
+    >
+      <ThemeScope style={{ flex: 1 }}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled={ios}>
+            <SheetFrame
+              {...materialOptions}
+              sheet={sheet}
+              visible={visible}
+              onClose={onClose}
+              panelStyle={{ paddingBottom: insets.bottom + 16, maxHeight }}
+            >
+              {children}
+            </SheetFrame>
+          </KeyboardAvoidingView>
+        </GestureHandlerRootView>
+      </ThemeScope>
+    </Modal>
+  );
+}