@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/Skeleton.tsx

@@ -0,0 +1,13 @@
+import { View, type ViewProps, type DimensionValue } from 'react-native';
+import { colors, radii } from '@lockin90/tokens';
+
+export interface SkeletonProps extends ViewProps {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  radius?: number;
+}
+
+/** Placeholder block (static fill; wrap with an Animated shimmer if desired). */
+export function Skeleton({ width, height = 14, radius = radii.sm, style, ...rest }: SkeletonProps) {
+  return <View style={[{ width, height, borderRadius: radius, backgroundColor: colors.glass }, style]} {...rest} />;
+}

package/src/components/Slider.tsx

@@ -0,0 +1,187 @@
+import { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  PanResponder,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+  type DimensionValue,
+} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export interface SliderProps {
+  /** current value (default 72) */
+  value?: number;
+  /** scale minimum (default 0) */
+  min?: number;
+  /** scale maximum (default 100) */
+  max?: number;
+  /** fired with the new numeric value while dragging */
+  onChange?: (value: number) => void;
+  /** the filled-portion paint — a solid color OR a `[from, to]` gradient tuple */
+  fill?: string | [string, string];
+  /** thumb / fill glow color */
+  glow?: string;
+  /** the unfilled remainder rail color */
+  trackColor?: string;
+  /** optional scale labels rendered evenly-spaced under the rail (e.g. a
+   *  mood/focus/energy scale). When omitted, nothing extra renders. */
+  labels?: string[];
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Generic Aurora-Flux range slider: a neutral remainder rail, a gradient fill
+ *  up to the value with a soft glow, and a glowing white thumb with a colored
+ *  ring. Draggable via PanResponder; emits the clamped value through `onChange`.
+ *  Mirrors the web `Slider` look + prop API. */
+export function Slider({
+  value = 72,
+  min = 0,
+  max = 100,
+  onChange,
+  fill = [colors.accent, colors.cyan],
+  glow = colors.accent,
+  trackColor = 'rgba(255,255,255,0.10)',
+  labels,
+  style,
+}: SliderProps) {
+  const span = max - min || 1;
+  const pct = Math.max(0, Math.min(100, ((value - min) / span) * 100));
+  const pctStr = `${pct}%` as DimensionValue;
+
+  // measured track width, used to turn drag gestures into values
+  const widthRef = useRef(0);
+  const [, setWidth] = useState(0);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width;
+    widthRef.current = w;
+    setWidth(w);
+  };
+
+  const emitAtX = (x: number) => {
+    const w = widthRef.current;
+    if (w <= 0) return;
+    const frac = Math.max(0, Math.min(1, x / w));
+    const next = min + frac * span;
+    onChange?.(next);
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => emitAtX(e.nativeEvent.locationX),
+      onPanResponderMove: (e) => emitAtX(e.nativeEvent.locationX),
+    }),
+  ).current;
+
+  const useGradient = Array.isArray(fill);
+
+  // the interactive rail (PanResponder + onLayout live here so dragging maps
+  // to the rail's measured width). Identical to before when no labels.
+  const rail = (
+    <View
+      style={[styles.root, labels ? undefined : style]}
+      onLayout={onLayout}
+      {...pan.panHandlers}
+    >
+      {/* unfilled remainder rail */}
+      <View style={[styles.track, { backgroundColor: trackColor }]} pointerEvents="none" />
+
+      {/* gradient/solid fill up to the value, with soft glow */}
+      <View
+        style={[styles.fillWrap, { width: pctStr, shadowColor: glow }]}
+        pointerEvents="none"
+      >
+        {useGradient ? (
+          <LinearGradient
+            colors={fill as [string, string]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={StyleSheet.absoluteFill}
+          />
+        ) : (
+          <View style={[StyleSheet.absoluteFill, { backgroundColor: fill as string }]} />
+        )}
+      </View>
+
+      {/* glowing white thumb with a colored ring */}
+      <View
+        style={[styles.thumb, { left: pctStr, borderColor: glow, shadowColor: glow }]}
+        pointerEvents="none"
+      />
+    </View>
+  );
+
+  // No labels → identical to before (rail carries `style`).
+  if (!labels || labels.length === 0) {
+    return rail;
+  }
+
+  // With labels → wrap the rail + an evenly-spaced labels row.
+  return (
+    <View style={style}>
+      {rail}
+      <View style={styles.labels} pointerEvents="none">
+        {labels.map((label, i) => (
+          <Text key={`${i}-${label}`} style={styles.label}>
+            {label}
+          </Text>
+        ))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { position: 'relative', height: 18, justifyContent: 'center' },
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 10,
+    borderRadius: radii.pill,
+  },
+  fillWrap: {
+    position: 'absolute',
+    left: 0,
+    height: 10,
+    borderRadius: radii.pill,
+    overflow: 'hidden',
+    // soft glow (shadowColor set inline to `glow`)
+    shadowOpacity: 0.7,
+    shadowRadius: 7,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 6,
+  },
+  thumb: {
+    position: 'absolute',
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    // center the 18px thumb on the value point
+    marginLeft: -9,
+    backgroundColor: '#fff',
+    borderWidth: 4,
+    // glow (shadowColor set inline)
+    shadowOpacity: 0.8,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 8,
+  },
+  // optional scale labels — evenly-spaced row under the rail
+  labels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 7,
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 8.5,
+    color: colors.textFaint,
+  },
+});

package/src/components/Sortable.tsx

@@ -0,0 +1,263 @@
+import { useRef, useState, type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  PanResponder,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+/* ============================================================================
+   Sortable (native) — drag-to-reorder list. Mirrors the web `@lockin90/ui`
+   `Sortable`: same export name + prop API (`items`, `onReorder`, `handle`,
+   `disabled`).
+
+   Interaction: a long-press on the grip handle arms a PanResponder drag; moving
+   the finger past a row's half-height swaps neighbours live, and release commits
+   the new order via `onReorder(nextIds)`.
+
+   GRACEFUL FALLBACK (always available): every row also renders up/down chevron
+   buttons that move the row one slot and call `onReorder`. This is the keyboard-
+   /accessibility-equivalent of the web's ↑/↓ handle support, and it guarantees
+   reordering works even where a gesture drag is awkward (small targets, nested
+   scroll views). The web uses pointer drag + ↑/↓ on a focused handle; native
+   uses gesture drag + the visible chevron buttons — same `onReorder` contract.
+   ========================================================================== */
+
+export interface SortableItem {
+  /** stable identity — used as the key and reported back in `onReorder`. */
+  id: string;
+  /** the row content to render (the handle + controls are added by `Sortable`). */
+  node: ReactNode;
+}
+
+export interface SortableProps {
+  /** the ordered rows. */
+  items: SortableItem[];
+  /** called with the full id list (in the new order) after a reorder. */
+  onReorder: (nextIds: string[]) => void;
+  /**
+   * Drag only by the dedicated grip handle (default). When `false`, a long-press
+   * anywhere on the row arms the drag. (The chevron fallback is unaffected.)
+   */
+  handle?: boolean;
+  /** disable all interaction (rows render but cannot be moved). */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Move the item at `from` to `to` and return the reordered array. */
+function move<T>(list: T[], from: number, to: number): T[] {
+  const next = list.slice();
+  const [picked] = next.splice(from, 1);
+  next.splice(to, 0, picked);
+  return next;
+}
+
+/** Drag-to-reorder list — long-press grip drag + up/down chevron fallback. */
+export function Sortable({
+  items,
+  onReorder,
+  handle = true,
+  disabled = false,
+  style,
+}: SortableProps) {
+  const ids = items.map((it) => it.id);
+  // index of the row currently being dragged (null = idle)
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  // live mirrors for the PanResponder closure (refs don't re-create the responder)
+  const dragIndexRef = useRef<number | null>(null);
+  const rowHeightRef = useRef(56);
+
+  const reorder = (from: number, to: number) => {
+    if (from === to || to < 0 || to >= items.length) return;
+    onReorder(move(ids, from, to));
+  };
+
+  const onRowLayout = (e: LayoutChangeEvent) => {
+    const h = e.nativeEvent.layout.height;
+    if (h > 0) rowHeightRef.current = h;
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      // arm only after a deliberate long-press on the handle (set below via grant)
+      onMoveShouldSetPanResponder: () => dragIndexRef.current != null,
+      onPanResponderMove: (_e, gesture) => {
+        const start = dragIndexRef.current;
+        if (start == null) return;
+        const rows = Math.round(gesture.dy / rowHeightRef.current);
+        const target = Math.max(0, Math.min(items.length - 1, start + rows));
+        if (target !== start) {
+          reorder(start, target);
+          dragIndexRef.current = target;
+          setDragIndex(target);
+        }
+      },
+      onPanResponderRelease: () => {
+        dragIndexRef.current = null;
+        setDragIndex(null);
+      },
+      onPanResponderTerminate: () => {
+        dragIndexRef.current = null;
+        setDragIndex(null);
+      },
+    }),
+  ).current;
+
+  const armDrag = (index: number) => {
+    if (disabled) return;
+    dragIndexRef.current = index;
+    setDragIndex(index);
+  };
+
+  return (
+    <View style={[styles.root, style]} {...pan.panHandlers}>
+      {items.map((item, i) => {
+        const dragging = dragIndex === i;
+        return (
+          <View
+            key={item.id}
+            onLayout={i === 0 ? onRowLayout : undefined}
+            style={[styles.row, dragging && styles.dragging, disabled && styles.disabledRow]}
+          >
+            {/* grip handle — long-press to arm the drag */}
+            <Pressable
+              onLongPress={() => armDrag(i)}
+              onPressOut={() => {
+                // if a long-press armed but no drag followed, release on press-out
+                if (!dragging) {
+                  dragIndexRef.current = null;
+                }
+              }}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityLabel="Drag to reorder"
+              hitSlop={6}
+              style={styles.handle}
+            >
+              <Icon name="grip" size={18} color={colors.textFaint} />
+            </Pressable>
+
+            {/* row content */}
+            <View style={styles.content}>
+              {typeof item.node === 'string' || typeof item.node === 'number' ? (
+                <Text style={styles.contentText} numberOfLines={1}>
+                  {item.node}
+                </Text>
+              ) : (
+                item.node
+              )}
+            </View>
+
+            {/* up/down fallback controls — always present (a11y-equivalent of web ↑/↓) */}
+            <View style={styles.controls}>
+              <Pressable
+                onPress={() => reorder(i, i - 1)}
+                disabled={disabled || i === 0}
+                accessibilityRole="button"
+                accessibilityLabel="Move up"
+                hitSlop={6}
+                style={[styles.ctrl, (disabled || i === 0) && styles.ctrlDisabled]}
+              >
+                {/* `chevron` points right; rotate −90° → points up */}
+                <View style={styles.chevronUp}>
+                  <Icon name="chevron" size={16} color={colors.textDim} />
+                </View>
+              </Pressable>
+              <Pressable
+                onPress={() => reorder(i, i + 1)}
+                disabled={disabled || i === items.length - 1}
+                accessibilityRole="button"
+                accessibilityLabel="Move down"
+                hitSlop={6}
+                style={[
+                  styles.ctrl,
+                  (disabled || i === items.length - 1) && styles.ctrlDisabled,
+                ]}
+              >
+                {/* rotate +90° → points down */}
+                <View style={styles.chevronDown}>
+                  <Icon name="chevron" size={16} color={colors.textDim} />
+                </View>
+              </Pressable>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+// TODO nested: a `SortableTree` (parent/child indent + reparent) is deferred —
+// ship flat reorder first per the build spec; nesting can layer on later.
+
+const styles = StyleSheet.create({
+  root: {
+    width: '100%',
+    gap: 6,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    padding: 4,
+    paddingRight: 6,
+    borderRadius: radii.sm,
+    backgroundColor: colors.glass,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  dragging: {
+    opacity: 0.85,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2,
+  },
+  disabledRow: {
+    opacity: 0.6,
+  },
+  handle: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radii.sm,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+    paddingVertical: 8,
+  },
+  contentText: {
+    fontFamily: fonts.ui,
+    fontSize: 14.5,
+    lineHeight: 18,
+    color: colors.text,
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  ctrl: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radii.sm,
+  },
+  ctrlDisabled: {
+    opacity: 0.35,
+  },
+  chevronUp: {
+    transform: [{ rotate: '-90deg' }],
+  },
+  chevronDown: {
+    transform: [{ rotate: '90deg' }],
+  },
+});

package/src/components/SourceChip.tsx

@@ -0,0 +1,95 @@
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { Icon, type IconName } from './Icon';
+
+export type SourceChipSize = 'sm' | 'md';
+
+export interface SourceChipProps {
+  /**
+   * The backend `source` field on a workout — `'whoop' | 'garmin' | 'polar' |
+   * 'oura' | 'apple_health' | 'manual' | 'lockin90'` or any other/unknown
+   * value. `manual`, `lockin90`, `null`, and unrecognized sources render
+   * nothing — hand-logged workouts get no chip.
+   */
+  source?: string | null;
+  /** @default 'sm' — the row-meta scale. Use `'md'` for the workout-detail "Synced from" lockup. */
+  size?: SourceChipSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface SourceVisual {
+  iconName: IconName;
+  ground: string;
+  ink: string;
+  /** width÷height of the vendored wordmark's cropped band — omitted for the
+   *  square apple-health heart glyph (uses `size` instead of `width`×`height`). */
+  aspect?: number;
+  /** hairline border so light-ground chips don't float on the dark UI. */
+  border?: boolean;
+}
+
+/** Ground + ink per source — the design's `wm-logo` chip lockup (variant B).
+ *  Intentionally separate from `Icon`'s `BRAND_COLORS` (tuned for a glyph
+ *  drawn directly on the dark UI, no chip ground behind it). Mirrors the web
+ *  twin's map pair-for-pair. */
+const SOURCES: Partial<Record<string, SourceVisual>> = {
+  whoop: { iconName: 'whoop', ground: '#0B0B0B', ink: '#FFFFFF', aspect: 24 / 5.2 },
+  garmin: { iconName: 'garmin', ground: '#FFFFFF', ink: '#007CC3', aspect: 24 / 7.7, border: true },
+  polar: { iconName: 'polar', ground: '#FFFFFF', ink: '#D10027', aspect: 24 / 5.4, border: true },
+  oura: { iconName: 'oura', ground: '#15120E', ink: '#F0EADF', aspect: 24 / 8.7 },
+  apple_health: { iconName: 'apple-health', ground: '#FFFFFF', ink: '#FF2D55', border: true },
+};
+
+const SIZES: Record<SourceChipSize, { h: number; radius: number; padH: number; padV: number }> = {
+  sm: { h: 12, radius: 6, padH: 5, padV: 2 },
+  md: { h: 18, radius: 7, padH: 8, padV: 3.5 },
+};
+
+/**
+ * SourceChip — a brand-colored mini logo lockup marking which wearable a
+ * synced workout came from (source-badges.html, variant B · pill). Renders
+ * the kit's already-vendored provider wordmark `Icon` on its real brand
+ * ground with contrasting ink — never a re-drawn logo. Native twin of the web
+ * `SourceChip` (same prop API + visuals). `manual` / `lockin90` / `null` /
+ * unknown sources render nothing so hand-logged rows keep their plain layout.
+ */
+export function SourceChip({ source, size = 'sm', style }: SourceChipProps) {
+  const visual = source ? SOURCES[source] : undefined;
+  if (!visual) return null;
+  const s = SIZES[size];
+  const iconWidth = visual.aspect != null ? Math.round(s.h * visual.aspect) : undefined;
+
+  return (
+    <View
+      style={[
+        styles.chip,
+        {
+          borderRadius: s.radius,
+          paddingVertical: s.padV,
+          paddingHorizontal: s.padH,
+          backgroundColor: visual.ground,
+        },
+        visual.border && styles.bordered,
+        style,
+      ]}
+    >
+      <Icon
+        name={visual.iconName}
+        color={visual.ink}
+        {...(iconWidth != null ? { width: iconWidth, height: s.h } : { size: s.h })}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bordered: {
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.12)',
+  },
+});

package/src/components/Sparkline.tsx

@@ -0,0 +1,108 @@
+import { useId } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Polyline, Path, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import { colors } from '@lockin90/tokens';
+
+export interface SparklineProps {
+  /** The series, oldest → newest. Auto-scaled to fit the box. */
+  data?: number[];
+  /** Box width in px. */
+  width?: number;
+  /** Box height in px. */
+  height?: number;
+  /** Line color (hex/rgb color string). */
+  color?: string;
+  /** Fill the area under the line with a faint gradient of `color`. */
+  fill?: boolean;
+  /** Draw a glowing dot at the last point. */
+  dot?: boolean;
+  /** Line stroke width in px. */
+  strokeWidth?: number;
+  /** optional wrapper style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A gentle rising sample so `<Sparkline />` renders something on its own. */
+const DEFAULT_DATA = [40, 44, 42, 50, 55, 53, 62, 68, 72];
+
+/** A little vertical breathing room so the line/dot never touch the edges. */
+const PAD = 3;
+
+/**
+ * Sparkline — a generic mini trend line. Normalizes `data` into a width×height
+ * box (min → bottom, max → top, with a touch of vertical padding) and draws it
+ * as a rounded polyline. Optionally fills the area beneath with a faint gradient
+ * of `color`, and marks the last point with a glowing dot. The line stretches to
+ * fill whatever box you give it.
+ */
+export function Sparkline({
+  data = DEFAULT_DATA,
+  width = 120,
+  height = 32,
+  color = colors.mint,
+  fill = false,
+  dot = true,
+  strokeWidth = 2,
+  style,
+}: SparklineProps) {
+  const gradId = useId();
+  const n = data.length;
+
+  // Horizontal padding so the first/last points and the trailing dot stay fully
+  // inside the box (stroke half-width + dot radius). Dot radius is strokeWidth+1.
+  const dotR = strokeWidth + 1;
+  const padX = strokeWidth + dotR;
+  const innerW = Math.max(0, width - padX * 2);
+
+  // Normalize each value into the box: x spreads evenly across the padded inner
+  // width (padX..width-padX), y maps min→bottom / max→top.
+  const min = n ? Math.min(...data) : 0;
+  const max = n ? Math.max(...data) : 0;
+  const span = max - min || 1;
+  const innerH = height - PAD * 2;
+
+  const pts = data.map((v, i) => {
+    const x = n <= 1 ? padX + innerW / 2 : padX + (i / (n - 1)) * innerW;
+    const frac = (v - min) / span;
+    const y = PAD + (1 - frac) * innerH;
+    return [+x.toFixed(2), +y.toFixed(2)] as const;
+  });
+
+  const polyPoints = pts.map(([x, y]) => `${x},${y}`).join(' ');
+  const line = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x},${y}`).join(' ');
+  // Closed path for the area fill: line, then down to the baseline and back.
+  const area =
+    pts.length > 0 ? `${line} L${pts[pts.length - 1]![0]},${height} L${pts[0]![0]},${height} Z` : '';
+  const last = pts[pts.length - 1];
+
+  return (
+    <View style={[{ width, height }, style]}>
+      <Svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none">
+        {fill && pts.length > 0 && (
+          <>
+            <Defs>
+              <LinearGradient id={gradId} x1="0" y1="0" x2="0" y2={height}>
+                <Stop offset="0%" stopColor={color} stopOpacity={0.28} />
+                <Stop offset="100%" stopColor={color} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Path d={area} fill={`url(#${gradId})`} />
+          </>
+        )}
+
+        {pts.length > 0 && (
+          <Polyline
+            points={polyPoints}
+            fill="none"
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        )}
+
+        {dot && last && <Circle cx={last[0]} cy={last[1]} r={dotR} fill={color} />}
+      </Svg>
+    </View>
+  );
+}