@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/TagInput.tsx

@@ -0,0 +1,325 @@
+import { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  type NativeSyntheticEvent,
+  type TextInputKeyPressEventData,
+  type ViewProps,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+/* ============================================================================
+   TagInput — CMS-style multi-value tag entry. A glassy field shell flex-wraps
+   the current tags as small removable mono pills, followed by a borderless
+   TextInput. onSubmitEditing adds the typed value; Backspace on the empty
+   input removes the last tag. Mirrors the web `@lockin90/ui` TagInput.
+   ========================================================================== */
+
+export interface TagInputProps extends ViewProps {
+  /** current tags (seeds internal state) */
+  tags?: string[];
+  /** called with the full tag list whenever it changes */
+  onChange?: (tags: string[]) => void;
+  /** placeholder for the text input */
+  placeholder?: string;
+  /** error state — red border + glow (e.g. a duplicate / invalid tag) */
+  invalid?: boolean;
+}
+
+/** Cross/× glyph used to remove a tag. */
+function RemoveIcon({ color }: { color: string }) {
+  return (
+    <Svg width={10} height={10} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2}>
+      <Path d="M6 6l12 12M18 6 6 18" />
+    </Svg>
+  );
+}
+
+/** Multi-value tag entry — removable mono pills + borderless input. */
+export function TagInput({
+  tags: tagsProp = ['sleep', 'recovery'],
+  onChange,
+  placeholder = 'Add a tag…',
+  invalid = false,
+  style,
+  ...rest
+}: TagInputProps) {
+  const [tags, setTags] = useState<string[]>(tagsProp);
+  const [draft, setDraft] = useState('');
+
+  const commit = (next: string[]) => {
+    setTags(next);
+    onChange?.(next);
+  };
+
+  const addTag = (raw: string) => {
+    const value = raw.trim();
+    if (!value || tags.includes(value)) {
+      setDraft('');
+      return;
+    }
+    commit([...tags, value]);
+    setDraft('');
+  };
+
+  const removeAt = (index: number) => {
+    commit(tags.filter((_, i) => i !== index));
+  };
+
+  const onKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    if (e.nativeEvent.key === 'Backspace' && draft === '' && tags.length > 0) {
+      removeAt(tags.length - 1);
+    }
+  };
+
+  return (
+    <View style={[styles.taginput, invalid && styles.taginputInvalid, style]} {...rest}>
+      {tags.map((tag, i) => (
+        <View key={`${tag}-${i}`} style={styles.tag}>
+          <Text style={styles.tagText}>{tag}</Text>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`Remove ${tag}`}
+            onPress={() => removeAt(i)}
+            style={styles.tagX}
+            hitSlop={6}
+          >
+            <RemoveIcon color={colors.accent2} />
+          </Pressable>
+        </View>
+      ))}
+      <TextInput
+        style={styles.input}
+        value={draft}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textFaint}
+        accessibilityLabel={placeholder}
+        onChangeText={setDraft}
+        onSubmitEditing={() => addTag(draft)}
+        onKeyPress={onKeyPress}
+        blurOnSubmit={false}
+        returnKeyType="done"
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+    </View>
+  );
+}
+
+/* ============================================================================
+   CodeInput — segmented OTP / verification-code entry. A row of single-char
+   boxes (mono, centered). Typing advances focus; Backspace moves back. Focused
+   box gets an accent border; a filled box gets a cyan tint. Mirrors the web
+   `@lockin90/ui` CodeInput.
+   ========================================================================== */
+
+export interface CodeInputProps extends ViewProps {
+  /** number of code boxes */
+  length?: number;
+  /** controlled code value */
+  value?: string;
+  /** called with the joined code whenever it changes */
+  onChange?: (code: string) => void;
+  /** error state — red border + tint (e.g. wrong code) */
+  error?: boolean;
+  /** Web-parity alias of `error` — the web `CodeInput` names this `invalid`, so
+   *  the same prop works on both platforms. Either prop turns the boxes red. */
+  invalid?: boolean;
+}
+
+/** Spread a multi-char entry (paste / iOS SMS autofill delivered into one box)
+ *  across the code boxes from `index` on: chars past the last box are dropped,
+ *  and focus lands after the last written char (clamped to the last box).
+ *  (Pure — extracted from `onBoxChange` so the paste math is unit-testable.) */
+export function spreadCodeAcrossBoxes(
+  chars: readonly string[],
+  index: number,
+  digits: string,
+  length: number,
+): { code: string; focusIndex: number } {
+  const next = chars.slice();
+  for (let i = 0; i < digits.length && index + i < length; i++) {
+    next[index + i] = digits[i];
+  }
+  return { code: next.join(''), focusIndex: Math.min(index + digits.length, length - 1) };
+}
+
+/** Segmented N-digit verification code — auto-advance + backspace. */
+export function CodeInput({ length = 6, value = '', onChange, error = false, invalid = false, style, ...rest }: CodeInputProps) {
+  const isInvalid = invalid || error;
+  const [code, setCode] = useState<string>(value.slice(0, length));
+  const [focused, setFocused] = useState<number | null>(null);
+  const refs = useRef<Array<TextInput | null>>([]);
+
+  const chars = Array.from({ length }, (_, i) => code[i] ?? '');
+
+  const commit = (next: string) => {
+    const clamped = next.slice(0, length);
+    setCode(clamped);
+    onChange?.(clamped);
+  };
+
+  const focusBox = (index: number) => {
+    refs.current[Math.max(0, Math.min(length - 1, index))]?.focus();
+  };
+
+  const onBoxChange = (index: number, raw: string) => {
+    // Paste or iOS SMS autofill can deliver the whole code into one box — spread
+    // it across the remaining boxes from here (mirrors the web `onPaste`).
+    const digits = raw.replace(/\s/g, '');
+    if (digits.length > 1) {
+      const spread = spreadCodeAcrossBoxes(chars, index, digits, length);
+      commit(spread.code);
+      focusBox(spread.focusIndex);
+      return;
+    }
+    const ch = digits.slice(-1);
+    const next = chars.slice();
+    next[index] = ch;
+    commit(next.join(''));
+    if (ch) focusBox(index + 1);
+  };
+
+  const onKeyPress = (index: number, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    if (e.nativeEvent.key !== 'Backspace') return;
+    if (chars[index]) {
+      const next = chars.slice();
+      next[index] = '';
+      commit(next.join(''));
+    } else if (index > 0) {
+      const next = chars.slice();
+      next[index - 1] = '';
+      commit(next.join(''));
+      focusBox(index - 1);
+    }
+  };
+
+  return (
+    <View style={[styles.code, style]} {...rest}>
+      {chars.map((ch, i) => {
+        const filled = !!ch;
+        const isFocused = focused === i;
+        const borderColor = isFocused
+          ? colors.accent
+          : isInvalid
+            ? colors.zoneLow
+            : filled
+              ? 'rgba(34,211,238,0.45)'
+              : colors.border2;
+        const backgroundColor = isFocused
+          ? 'rgba(124,92,255,0.06)'
+          : isInvalid
+            ? 'rgba(255,77,109,0.06)'
+            : filled
+              ? 'rgba(34,211,238,0.05)'
+              : colors.glass2;
+        return (
+          <TextInput
+            key={i}
+            ref={(el) => {
+              refs.current[i] = el;
+            }}
+            style={[styles.codeBox, { borderColor, backgroundColor }]}
+            keyboardType="number-pad"
+            textContentType={i === 0 ? 'oneTimeCode' : 'none'}
+            // box 0 accepts the full code so paste / iOS SMS autofill lands and
+            // spreads across boxes; the rest stay single-char for clean typing.
+            maxLength={i === 0 ? length : 1}
+            value={ch}
+            accessibilityLabel={`Digit ${i + 1}`}
+            selectionColor={colors.accent}
+            onChangeText={(t) => onBoxChange(i, t)}
+            onKeyPress={(e) => onKeyPress(i, e)}
+            onFocus={() => setFocused(i)}
+            onBlur={() => setFocused((cur) => (cur === i ? null : cur))}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  /* ---- TagInput ---- */
+  taginput: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 7,
+    padding: 8,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2,
+  },
+  // invalid: red border + soft red glow standing in for the web's 3px ring
+  // (`.lk-taginput--invalid`: border var(--bad) + 0 0 0 3px rgba(255,77,109,.16))
+  taginputInvalid: {
+    borderColor: colors.zoneLow,
+    shadowColor: colors.zoneLow,
+    shadowOpacity: 0.16,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 2,
+  },
+  tag: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingLeft: 9,
+    paddingRight: 6,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    borderColor: 'rgba(34,211,238,0.3)',
+    backgroundColor: 'rgba(34,211,238,0.1)',
+  },
+  tagText: {
+    color: colors.accent2,
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    lineHeight: 15,
+  },
+  tagX: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: 0.7,
+  },
+  input: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 90,
+    paddingVertical: 3,
+    paddingHorizontal: 2,
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontSize: 12,
+  },
+  /* ---- CodeInput ---- */
+  code: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  codeBox: {
+    width: 44,
+    height: 52,
+    textAlign: 'center',
+    // vertical-center the digit: textAlignVertical (Android) + includeFontPadding:false
+    // (drops Android's extra font padding that pushes the glyph up).
+    textAlignVertical: 'center',
+    includeFontPadding: false,
+    fontFamily: fonts.mono,
+    fontWeight: '700',
+    fontSize: 22,
+    color: colors.text,
+    borderWidth: 1,
+    borderRadius: radii.sm,
+    padding: 0,
+  },
+});

package/src/components/TemplateCard.tsx

@@ -0,0 +1,181 @@
+import { type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, fonts, radii } from '@lockin90/tokens';
+import { hapticSelection } from '../internal/optionalHaptics';
+
+/** Who authored the template — coach/AI show a tinted source pill. */
+export type TemplateSource = 'coach' | 'ai' | 'manual';
+
+export interface TemplateCardProps {
+  /** Template name (display font). */
+  name: string;
+  /** Dim summary line (e.g. `'Chest · Arms · 5 ex · ~48m'`). */
+  meta?: string;
+  /** Bold emphasized fragment appended to the meta line after a `' · '`
+   *  separator (e.g. the exercise count `'5 ex'` — design `.tpl .mt b`,
+   *  reads slightly brighter than the rest of the meta line). */
+  metaCount?: string;
+  /** Faint mono footer (e.g. `'Last used 2d ago'`). */
+  lastUsed?: string;
+  /** Authoring source — `coach` mint pill · `ai` violet pill · `manual` none (default). */
+  source?: TemplateSource;
+  /** Accent color for the left edge bar (any token, e.g. `colors.cyan`) — the
+   *  edge bar renders only when `leading` is absent (see `leading`). */
+  tint?: string;
+  /**
+   * Leading 34×34 tinted icon tile (design `.tpl .ti.tile` — the row's
+   * primary identifier, e.g. `<Icon name={workoutTypeIcon(type)} />`).
+   * Colored from `tint` (13%-fill / 33%-border, the app's tile convention).
+   * When set, this REPLACES the plain `tint` edge bar (the mockup never
+   * shows both together).
+   */
+  leading?: ReactNode;
+  /** When set, the card becomes a `Pressable` (mirrors the web `onPress`). */
+  onPress?: () => void;
+  /** Trailing slot pinned right (chevron, menu, duration…). */
+  trailing?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SOURCE_PILL: Record<Exclude<TemplateSource, 'manual'>, { label: string; color: string; border: string; bg: string }> = {
+  coach: { label: 'COACH', color: colors.mint, border: 'rgba(52,245,197,0.32)', bg: 'rgba(52,245,197,0.10)' },
+  ai: { label: 'AI', color: colors.accent, border: 'rgba(124,92,255,0.4)', bg: 'rgba(124,92,255,0.12)' },
+};
+
+/**
+ * TemplateCard — a workout-template row card. Native twin of the web
+ * `TemplateCard` (same prop API): glass surface, display-font name, dim meta
+ * line, faint mono "last used", a small mint `Coach` / violet `AI` source
+ * pill when the template wasn't hand-built, and a `tint` accent bar down the
+ * left edge. With `onPress` the whole card is the tap target.
+ */
+export function TemplateCard({
+  name,
+  meta,
+  metaCount,
+  lastUsed,
+  source = 'manual',
+  tint,
+  leading,
+  onPress,
+  trailing,
+  style,
+}: TemplateCardProps) {
+  const pill = source !== 'manual' ? SOURCE_PILL[source] : null;
+
+  const body = (
+    <>
+      {leading == null && tint ? <View style={[styles.tint, { backgroundColor: tint }]} /> : null}
+      {leading != null ? (
+        <View
+          style={[
+            styles.leadTile,
+            tint
+              ? { backgroundColor: `${tint}1F`, borderColor: `${tint}52` }
+              : { backgroundColor: colors.glass, borderColor: colors.border },
+          ]}
+        >
+          {leading}
+        </View>
+      ) : null}
+      <View style={styles.main}>
+        <View style={styles.top}>
+          <Text style={styles.name} numberOfLines={1}>
+            {name}
+          </Text>
+          {pill ? (
+            <View style={[styles.src, { borderColor: pill.border, backgroundColor: pill.bg }]}>
+              <Text style={[styles.srcText, { color: pill.color }]}>{pill.label}</Text>
+            </View>
+          ) : null}
+        </View>
+        {(meta != null || metaCount != null) && (
+          <Text style={styles.meta}>
+            {meta}
+            {meta != null && metaCount != null ? ' · ' : null}
+            {metaCount != null ? <Text style={styles.metaCount}>{metaCount}</Text> : null}
+          </Text>
+        )}
+        {lastUsed != null && <Text style={styles.last}>{lastUsed}</Text>}
+      </View>
+      {trailing != null && <View style={styles.trailing}>{trailing}</View>}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => {
+          hapticSelection();
+          onPress();
+        }}
+        style={({ pressed }) => [styles.card, pressed && styles.pressed, style]}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+  return <View style={[styles.card, style]}>{body}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 13,
+    paddingHorizontal: 15,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+    overflow: 'hidden',
+  },
+  pressed: { backgroundColor: colors.glass2, borderColor: colors.border2 },
+  tint: {
+    position: 'absolute',
+    left: 0,
+    top: 10,
+    bottom: 10,
+    width: 3,
+    borderTopRightRadius: 3,
+    borderBottomRightRadius: 3,
+  },
+  // leading icon tile (design `.tpl .ti.tile`) — 34×34, tint-colored fill/border
+  leadTile: {
+    width: 34,
+    height: 34,
+    borderRadius: 10,
+    borderWidth: 1,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  main: { flex: 1, minWidth: 0, gap: 3 },
+  top: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  name: {
+    flexShrink: 1,
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 15,
+    letterSpacing: -0.15,
+    color: colors.text,
+  },
+  meta: { fontSize: 12, color: colors.textDim },
+  // design `.tpl .mt b` — the bold count fragment reads one step brighter
+  // than the dim meta line (mirrors the design's faint→dim relationship).
+  metaCount: { color: colors.text, fontWeight: '700' },
+  last: { fontFamily: fonts.mono, fontSize: 10.5, color: colors.textFaint, marginTop: 1 },
+  trailing: { flexShrink: 0, flexDirection: 'row', alignItems: 'center' },
+
+  src: {
+    flexShrink: 0,
+    paddingVertical: 3,
+    paddingHorizontal: 7,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+  },
+  srcText: { fontFamily: fonts.mono, fontSize: 8.5, fontWeight: '600', letterSpacing: 0.7, lineHeight: 9 },
+});

package/src/components/Timeline.tsx

@@ -0,0 +1,132 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type ViewProps } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, fonts, gradients, nativeShadows } from '@lockin90/tokens';
+import { Chip } from './Chip';
+import { Pulse } from './Pulse';
+
+export type TimelineStatus = 'done' | 'now' | 'next';
+
+export interface TimelineItem {
+  title: string;
+  /** Optional time/date label, e.g. "Today", "In 2 months", "Q3 2026". */
+  date?: string;
+  description?: ReactNode;
+  status?: TimelineStatus;
+  statusLabel?: string;
+}
+
+export interface TimelineProps extends ViewProps {
+  items?: TimelineItem[];
+}
+
+const CHIP_TONE = { done: 'high', now: 'accent', next: 'mid' } as const;
+const DEFAULT_LABEL = { done: 'Done', now: 'In progress', next: 'Next' } as const;
+
+const DEFAULT_ITEMS: TimelineItem[] = [
+  { status: 'done', title: 'Model calibrated', date: 'Shipped', description: 'Energy & recovery model trained and validated against real wearable data.' },
+  { status: 'done', title: 'Wearables connected', date: 'Shipped', description: 'Oura, WHOOP, Apple Health and Garmin sync built end-to-end.' },
+  { status: 'now', title: 'Closed beta', date: 'Today', description: 'Polishing the experience with founding athletes right now.' },
+  { status: 'next', title: 'Public launch', date: 'In 2 months', description: 'Doors open to the waitlist first.' },
+];
+
+function Dot({ status }: { status: TimelineStatus }) {
+  if (status === 'done') {
+    return (
+      <LinearGradient
+        colors={gradients.mint.stops as unknown as [string, string]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={[styles.dot, styles.dotDone]}
+      >
+        <Svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke="#0A0A12" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round">
+          <Path d="M20 6 9 17l-5-5" />
+        </Svg>
+      </LinearGradient>
+    );
+  }
+  if (status === 'now') {
+    return (
+      <View style={[styles.dot, styles.dotNow]}>
+        <Pulse />
+      </View>
+    );
+  }
+  return <View style={[styles.dot, styles.dotNext]} />;
+}
+
+/** Vertical milestone timeline — done → now → next, each with a time/date label
+ *  and a status chip. Native twin of the web Timeline (the "coming soon" component). */
+export function Timeline({ items = DEFAULT_ITEMS, style, ...rest }: TimelineProps) {
+  return (
+    <View style={style} {...rest}>
+      {items.map((it, i) => {
+        const status = it.status ?? 'next';
+        const last = i === items.length - 1;
+        return (
+          <View key={i} style={[styles.item, last && styles.itemLast]}>
+            <View style={styles.gutter}>
+              {/* connecting line: absolutely positioned in the gutter so it
+                  always spans from just below this dot down to the next dot,
+                  independent of the dot's intrinsic height (web .lk-tl-item::before) */}
+              {!last ? (
+                <View style={[styles.line, status === 'done' && styles.lineDone]} />
+              ) : null}
+              <Dot status={status} />
+            </View>
+            <View style={[styles.body, status === 'next' && styles.bodyNext]}>
+              <View style={styles.top}>
+                <Text style={styles.title}>{it.title}</Text>
+                {it.date ? <Text style={styles.date}>{it.date.toUpperCase()}</Text> : null}
+                <Chip tone={CHIP_TONE[status]} dot label={it.statusLabel ?? DEFAULT_LABEL[status]} />
+              </View>
+              {it.description ? <Text style={styles.desc}>{it.description}</Text> : null}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+/** Dot diameter and the vertical gap between consecutive items — the connecting
+ *  line spans from just below one dot (top: DOT_SIZE) to the next (bottom: -GAP). */
+const DOT_SIZE = 28;
+const GAP = 22;
+
+const styles = StyleSheet.create({
+  item: { flexDirection: 'row', paddingBottom: GAP },
+  itemLast: { paddingBottom: 0 },
+  gutter: { width: 28, alignItems: 'center' },
+  dot: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2,
+  },
+  dotDone: { borderColor: 'transparent', ...nativeShadows.glowMint },
+  dotNow: { backgroundColor: 'rgba(124,92,255,0.14)', borderColor: 'rgba(124,92,255,0.5)' },
+  dotNext: { backgroundColor: 'rgba(255,176,32,0.12)', borderColor: 'rgba(255,176,32,0.4)' },
+  // Runs from just below this dot (top: DOT_SIZE) down through the row gap to
+  // the next dot (bottom: -GAP), centered under the 28px dot (left = 13).
+  line: {
+    position: 'absolute',
+    top: DOT_SIZE,
+    bottom: -GAP,
+    left: 13,
+    width: 2,
+    backgroundColor: colors.border2,
+  },
+  lineDone: { backgroundColor: colors.mint },
+  body: { flex: 1, paddingLeft: 16, paddingTop: 1 },
+  bodyNext: { opacity: 0.82 },
+  top: { flexDirection: 'row', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 5 },
+  title: { fontFamily: fonts.display, fontSize: 16, fontWeight: '600', color: colors.text },
+  date: { fontFamily: fonts.mono, fontSize: 11, letterSpacing: 0.7, color: colors.textFaint },
+  desc: { color: colors.textDim, fontSize: 13.5, lineHeight: 21, marginTop: 4 },
+});