@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/Meter.tsx

@@ -0,0 +1,186 @@
+import { View, Text, StyleSheet, type ViewProps, type DimensionValue } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, gradients, fonts } from '@lockin90/tokens';
+
+/** Zone tone — colors the fill (and segments). 'accent' is the gradient default. */
+export type MeterTone = 'high' | 'mid' | 'low' | 'accent';
+
+export interface MeterProps extends ViewProps {
+  /** the scalar value to read out, in [min, max] */
+  value: number;
+  /** range floor (default 0) */
+  min?: number;
+  /** range ceiling (default 100) */
+  max?: number;
+  /** mono uppercase caption shown above the track */
+  label?: string;
+  /** show the numeric value (+ unit) on the label row */
+  showValue?: boolean;
+  /** suffix after the value readout (e.g. '%', 'pts') */
+  unit?: string;
+  /** zone color of the fill / filled segments (default 'accent' gradient) */
+  tone?: MeterTone;
+  /** target marker — renders a tick at this value on the track (continuous mode) */
+  threshold?: number;
+  /** segmented mode: render N discrete cells, filled by the value fraction */
+  segments?: number;
+}
+
+/** Solid color for zone tones (accent renders as a gradient instead). */
+const TONE_COLOR: Record<Exclude<MeterTone, 'accent'>, string> = {
+  high: colors.zoneHigh,
+  mid: colors.zoneMid,
+  low: colors.zoneLow,
+};
+
+const clamp = (x: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, x));
+
+/**
+ * Meter — a labelled horizontal fill meter for a scalar value within a range.
+ *
+ * A semantic value-in-range readout (distinct from the raw BarFill fraction bar
+ * and the loading ProgressBar): an optional mono label + value readout, an
+ * optional target/threshold marker tick, a zone tone, and an optional SEGMENTED
+ * mode (N discrete cells filled by the value fraction — e.g. password-strength
+ * or confidence meters).
+ */
+export function Meter({
+  value,
+  min = 0,
+  max = 100,
+  label,
+  showValue = false,
+  unit,
+  tone = 'accent',
+  threshold,
+  segments,
+  style,
+  ...rest
+}: MeterProps) {
+  const span = max - min || 1;
+  const frac = clamp((value - min) / span, 0, 1);
+  const segmented = typeof segments === 'number' && segments > 0;
+
+  // accent → gradient; zone tones → solid glow color
+  const segColor = tone === 'accent' ? colors.accent : TONE_COLOR[tone];
+  const glow = tone === 'accent' ? colors.accent : TONE_COLOR[tone];
+
+  const hasHeader = label != null || showValue;
+  const fillWidth = `${frac * 100}%` as DimensionValue;
+
+  return (
+    <View style={[styles.root, style]} {...rest}>
+      {hasHeader && (
+        <View style={styles.head}>
+          {label != null && <Text style={styles.label}>{label}</Text>}
+          {showValue && (
+            <Text style={styles.value}>
+              {value}
+              {unit != null && <Text style={styles.unit}>{unit}</Text>}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {segmented ? (
+        <View style={styles.segs}>
+          {Array.from({ length: segments }, (_, i) => {
+            const on = frac > 0 && frac >= (i + 1) / segments - 1e-9;
+            return (
+              <View
+                key={i}
+                style={[
+                  styles.seg,
+                  on && {
+                    backgroundColor: segColor,
+                    shadowColor: glow,
+                    shadowOpacity: 0.8,
+                    shadowRadius: 6,
+                  },
+                ]}
+              />
+            );
+          })}
+        </View>
+      ) : (
+        <View style={styles.track}>
+          {tone === 'accent' ? (
+            <LinearGradient
+              colors={[...gradients.cta.stops] as [string, string]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={[styles.fill, { width: fillWidth }]}
+            />
+          ) : (
+            <View style={[styles.fill, { width: fillWidth, backgroundColor: segColor }]} />
+          )}
+          {typeof threshold === 'number' && (
+            <View
+              style={[
+                styles.tick,
+                { left: `${clamp((threshold - min) / span, 0, 1) * 100}%` as DimensionValue },
+              ]}
+            />
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const TRACK_H = 8;
+
+const styles = StyleSheet.create({
+  root: { width: '100%', gap: 8 },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    fontWeight: '500',
+    textTransform: 'uppercase',
+    letterSpacing: 1.68,
+    color: colors.textFaint,
+  },
+  value: {
+    fontFamily: fonts.mono,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.textDim,
+  },
+  unit: { color: colors.textFaint },
+  /* continuous track + fill */
+  track: {
+    position: 'relative',
+    height: TRACK_H,
+    borderRadius: 999,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: 999,
+  },
+  /* threshold tick — overlaid on the track */
+  tick: {
+    position: 'absolute',
+    top: -2,
+    bottom: -2,
+    width: 2,
+    marginLeft: -1,
+    borderRadius: 999,
+    backgroundColor: colors.textDim,
+  },
+  /* segmented mode */
+  segs: { flexDirection: 'row', gap: 5 },
+  seg: {
+    flex: 1,
+    height: 5,
+    borderRadius: 999,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+});

package/src/components/MetricTile.tsx

@@ -0,0 +1,247 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type ViewProps, type DimensionValue } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients } from '@lockin90/tokens';
+
+/* ── MetricTile ──────────────────────────────────────────────────────────── */
+
+export type MetricDeltaTone = 'up' | 'down' | 'flat';
+
+export interface MetricTileProps extends ViewProps {
+  /** mono uppercase caption above the value */
+  label?: string;
+  /** big display number */
+  value?: ReactNode;
+  /** small suffix after the value (e.g. '%', 'pts') */
+  unit?: string;
+  /** signed delta shown as a tone-colored pill (e.g. '+3') */
+  delta?: string;
+  /** colors the delta pill: up=mint, down=red, flat=faint */
+  deltaTone?: MetricDeltaTone;
+  /** faint icon in the top-right corner */
+  icon?: ReactNode;
+  /** bottom spark-fill bar. A single value in [0,1] fills the bar to that
+   *  fraction; a multi-point series fills to `last / max`. Omit to hide the bar. */
+  spark?: number[];
+  /** override the spark fill colour (solid); defaults to the flux/cta gradient. */
+  sparkColor?: string;
+  /** placeholder mode: renders an em-dash `—` in place of the value, suppresses
+   *  the unit + delta pill, and shows the optional `hint` instead. */
+  empty?: boolean;
+  /** small helper line shown in empty mode (e.g. "No data yet — connect a wearable"). */
+  hint?: string;
+}
+
+const DELTA: Record<MetricDeltaTone, { color: string; bg: string }> = {
+  up: { color: colors.zoneHigh, bg: 'rgba(52,245,197,0.12)' },
+  down: { color: colors.zoneLow, bg: 'rgba(255,77,109,0.12)' },
+  flat: { color: colors.textFaint, bg: colors.glass2 },
+};
+
+/** Fraction (0..1) the spark-fill bar should reach for a given series. */
+function sparkFill(vals: number[]): number {
+  if (vals.length === 0) return 0;
+  if (vals.length === 1) return Math.max(0, Math.min(1, vals[0]!));
+  const max = Math.max(...vals, 0);
+  if (max <= 0) return 0;
+  return Math.max(0, Math.min(1, vals[vals.length - 1]! / max));
+}
+
+/** A small KPI tile — glass card with a mono label + optional top-right icon, a
+ *  big display value + unit, and an optional tone-colored delta pill. In `empty`
+ *  mode it shows an em-dash placeholder + an optional `hint`. */
+export function MetricTile({
+  label = 'Followers',
+  value = '1.2k',
+  unit,
+  delta,
+  deltaTone = 'flat',
+  icon,
+  spark,
+  sparkColor,
+  empty,
+  hint,
+  style,
+  ...rest
+}: MetricTileProps) {
+  if (empty) {
+    return (
+      <View style={[styles.tile, style]} {...rest}>
+        <View style={styles.top}>
+          <Text style={styles.label}>{label}</Text>
+          {icon != null && <View style={styles.icon}>{icon}</View>}
+        </View>
+        <View style={styles.body}>
+          <Text style={[styles.value, styles.valueEmpty]}>—</Text>
+        </View>
+        {hint != null && <Text style={styles.hint}>{hint}</Text>}
+      </View>
+    );
+  }
+  const d = DELTA[deltaTone];
+  return (
+    <View style={[styles.tile, style]} {...rest}>
+      <View style={styles.top}>
+        <Text style={styles.label}>{label}</Text>
+        {icon != null && <View style={styles.icon}>{icon}</View>}
+      </View>
+      <View style={styles.body}>
+        <Text style={styles.value}>{value}</Text>
+        {unit != null && <Text style={styles.unit}>{unit}</Text>}
+      </View>
+      {delta != null && (
+        <View style={[styles.delta, { backgroundColor: d.bg }]}>
+          <Text style={[styles.deltaText, { color: d.color }]}>{delta}</Text>
+        </View>
+      )}
+      {spark != null && spark.length > 0 && (
+        <View style={styles.spark}>
+          {sparkColor != null ? (
+            <View
+              style={[styles.sparkFill, { width: `${sparkFill(spark) * 100}%` as DimensionValue, backgroundColor: sparkColor }]}
+            />
+          ) : (
+            <LinearGradient
+              colors={[...gradients.cta.stops] as [string, string]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={[styles.sparkFill, { width: `${sparkFill(spark) * 100}%` as DimensionValue }]}
+            />
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+/* ── ProgressDots ────────────────────────────────────────────────────────── */
+
+export interface ProgressDotsProps extends ViewProps {
+  /** number of segment dots */
+  total?: number;
+  /** how many dots are filled (clamped to 0…total) */
+  filled?: number;
+  /** color of the filled dots */
+  color?: string;
+}
+
+/** A row of segment dots showing progress (e.g. calibration day 5 of 14).
+ *  Filled dots glow in `color`; the rest stay faint, the current dot is larger. */
+export function ProgressDots({
+  total = 14,
+  filled = 5,
+  color = colors.accent,
+  style,
+  ...rest
+}: ProgressDotsProps) {
+  const count = Math.max(0, Math.floor(total));
+  const done = Math.max(0, Math.min(count, Math.floor(filled)));
+  const currentIndex = done - 1;
+
+  return (
+    <View style={[styles.dots, style]} {...rest}>
+      {Array.from({ length: count }, (_, i) => {
+        const on = i < done;
+        return (
+          <View
+            key={i}
+            style={[
+              styles.dot,
+              on && { backgroundColor: color, shadowColor: color, shadowOpacity: 0.8, shadowRadius: 6 },
+              i === currentIndex && styles.dotNow,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  /* MetricTile */
+  tile: {
+    flexDirection: 'column',
+    gap: 6,
+    padding: 14,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    fontWeight: '500',
+    textTransform: 'uppercase',
+    letterSpacing: 1.68,
+    color: colors.textFaint,
+  },
+  icon: { opacity: 0.8 },
+  body: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: 4,
+  },
+  value: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 24,
+    letterSpacing: -0.48,
+    color: colors.text,
+  },
+  unit: {
+    fontFamily: fonts.ui,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.textDim,
+  },
+  delta: {
+    alignSelf: 'flex-start',
+    paddingVertical: 2,
+    paddingHorizontal: 7,
+    borderRadius: radii.sm,
+  },
+  deltaText: {
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    fontWeight: '500',
+    letterSpacing: 0.22,
+  },
+  /* empty / zero-data placeholder: faint em-dash value + a faint mono hint line */
+  valueEmpty: { color: colors.textFaint },
+  hint: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    letterSpacing: 0.21,
+    color: colors.textFaint,
+  },
+  /* spark-fill bar */
+  spark: {
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    overflow: 'hidden',
+    marginTop: 3,
+  },
+  sparkFill: { height: '100%', borderRadius: 999 },
+  /* ProgressDots */
+  dots: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 6,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: colors.border2,
+  },
+  dotNow: { transform: [{ scale: 1.35 }] },
+});

package/src/components/MiniRing.tsx

@@ -0,0 +1,17 @@
+import { Fragment } from 'react';
+import { Ring, type RingProps } from './Ring';
+
+export type MiniRingProps = RingProps;
+
+/** MiniRing — a compact `Ring` preset for dense grids (e.g. the calendar month
+ *  grid of daily energy rings). Same prop API as `Ring`; smaller/thinner defaults
+ *  with glow off (glow reads as noise at this size). The arc + zone colour carry
+ *  the value, so the big default centre number is suppressed — pass `children`
+ *  (e.g. a small day number) if you want a centre readout. The web twin of native. */
+export function MiniRing({ size = 34, thickness = 4, glow = false, children, ...rest }: MiniRingProps) {
+  return (
+    <Ring size={size} thickness={thickness} glow={glow} {...rest}>
+      {children ?? <Fragment />}
+    </Ring>
+  );
+}

package/src/components/Modal.tsx

@@ -0,0 +1,129 @@
+import { type ReactNode } from 'react';
+import { Modal as RNModal, View, Text, Pressable, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export interface ModalProps {
+  /** Show the modal. When false, nothing renders. */
+  open?: boolean;
+  /** Called on scrim tap, close-button tap, or Android back. */
+  onClose?: () => void;
+  /** Header title (font-display). Header is omitted when absent. */
+  title?: string;
+  /** Body content. */
+  children?: ReactNode;
+  /** Optional footer — right-aligned actions under a hairline. */
+  footer?: ReactNode;
+  /** Card max-width: sm ~380px, md ~460px, lg ~620px. */
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const MAX_WIDTH = { sm: 380, md: 460, lg: 620 } as const;
+
+/** Centered glass dialog over a dimmed scrim. Closes on scrim tap + Android
+ *  back; the card stops propagation. */
+export function Modal({ open = true, onClose, title, children, footer, size = 'md' }: ModalProps) {
+  return (
+    <RNModal transparent visible={open} animationType="fade" onRequestClose={onClose} statusBarTranslucent>
+      <Pressable style={styles.scrim} onPress={() => onClose?.()}>
+        <Pressable
+          style={[styles.card, { maxWidth: MAX_WIDTH[size] }]}
+          onPress={() => {}}
+          accessibilityViewIsModal
+        >
+          {(title || onClose) && (
+            <View style={styles.head}>
+              {title ? <Text style={styles.title}>{title}</Text> : <View />}
+              {onClose && (
+                <Pressable
+                  onPress={onClose}
+                  accessibilityRole="button"
+                  accessibilityLabel="Close"
+                  hitSlop={6}
+                  style={styles.close}
+                >
+                  <Svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke={colors.textFaint} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+                    <Path d="m6 6 12 12M18 6 6 18" />
+                  </Svg>
+                </Pressable>
+              )}
+            </View>
+          )}
+          <View style={styles.body}>
+            {typeof children === 'string' ? <Text style={styles.bodyText}>{children}</Text> : children}
+          </View>
+          {footer && <View style={styles.foot}>{footer}</View>}
+        </Pressable>
+      </Pressable>
+    </RNModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+  },
+  card: {
+    width: '100%',
+    backgroundColor: colors.bg1,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: radii.lg,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOpacity: 0.5,
+    shadowRadius: 64,
+    shadowOffset: { width: 0, height: 24 },
+    elevation: 20,
+  },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    paddingVertical: 18,
+    paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+  },
+  title: {
+    flex: 1,
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 17,
+    letterSpacing: -0.17,
+    color: colors.text,
+  },
+  close: {
+    width: 30,
+    height: 30,
+    marginRight: -4,
+    borderRadius: radii.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  body: {
+    padding: 20,
+  },
+  bodyText: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    lineHeight: 22,
+    color: colors.textDim,
+  },
+  foot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+});