@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/Popover.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet, Modal, Dimensions } from 'react-native';
+import Svg, { Rect, Path } from 'react-native-svg';
+import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+/* expo-clipboard is an optional dependency — not a hard dep of this kit.
+ * Resolve it lazily and guard usage; if it's absent we keep the visual
+ * feedback (the check flash) and skip the actual clipboard write. */
+let clipboard: { setStringAsync?: (v: string) => Promise<unknown> } | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  clipboard = require('expo-clipboard');
+} catch {
+  clipboard = null;
+}
+
+export interface PopoverProps {
+  /** The pressable trigger. Defaults to a small "?" info button. */
+  trigger?: ReactNode;
+  /** Panel content. Defaults to a short sample explainer. */
+  children?: ReactNode;
+  /** Which edge of the trigger the panel aligns to. */
+  align?: 'left' | 'right' | 'center';
+}
+
+const DEFAULT_TEXT =
+  'This score blends your recent training, sleep, and recovery signals into a single readiness number.';
+
+interface Anchor {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const { width: SW, height: SH } = Dimensions.get('window');
+const EST_W = 260;
+const EST_H = 80;
+
+/** Click-triggered floating panel of arbitrary content (richer than a Tooltip).
+ *  The "?" trigger toggles a transparent Modal whose full-screen backdrop closes
+ *  on tap; the panel is a glass card absolutely anchored to the measured trigger
+ *  (flips above near the bottom). Mirrors the web `Popover` prop API. */
+export function Popover({ trigger, children, align = 'center' }: PopoverProps) {
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [size, setSize] = useState({ pw: EST_W, ph: EST_H });
+  const triggerRef = useRef<View>(null);
+
+  const openPanel = () => {
+    triggerRef.current?.measureInWindow((x, y, w, h) => setAnchor({ x, y, w, h }));
+    setOpen(true);
+  };
+
+  const { pw, ph } = size;
+  let top = 0;
+  let left = 0;
+  if (anchor) {
+    const flipAbove = anchor.y + anchor.h + ph + 8 > SH && anchor.y - 8 - ph > 0;
+    top = flipAbove ? anchor.y - 8 - ph : anchor.y + anchor.h + 6;
+
+    if (align === 'left') left = anchor.x;
+    else if (align === 'right') left = anchor.x + anchor.w - pw;
+    else left = anchor.x + anchor.w / 2 - pw / 2;
+    left = Math.max(8, Math.min(left, SW - pw - 8));
+  }
+
+  return (
+    <View style={styles.root}>
+      <Pressable
+        ref={triggerRef}
+        style={styles.trigger}
+        accessibilityRole="button"
+        onPress={() => (open ? setOpen(false) : openPanel())}
+      >
+        {trigger ?? <Icon name="info" size={16} color={colors.textDim} />}
+      </Pressable>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={styles.backdrop} onPress={() => setOpen(false)} />
+        {anchor != null && (
+          <View
+            style={[styles.panel, { top, left }]}
+            onLayout={(e) => {
+              const { width, height } = e.nativeEvent.layout;
+              if (width !== pw || height !== ph) setSize({ pw: width, ph: height });
+            }}
+          >
+            {typeof children === 'string' ? (
+              <Text style={styles.text}>{children}</Text>
+            ) : (
+              children ?? <Text style={styles.text}>{DEFAULT_TEXT}</Text>
+            )}
+          </View>
+        )}
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { alignSelf: 'flex-start' },
+  trigger: {
+    minWidth: 28,
+    height: 28,
+    paddingHorizontal: 6,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backdrop: { ...StyleSheet.absoluteFillObject },
+  panel: {
+    position: 'absolute',
+    maxWidth: 260,
+    padding: 12,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    backgroundColor: colors.bg1,
+    ...nativeShadows.elev2,
+  },
+  text: { fontFamily: fonts.ui, fontSize: 12.5, lineHeight: 18, color: colors.textDim },
+});
+
+export interface CopyButtonProps {
+  /** Text written to the clipboard on press. */
+  value?: string;
+  /** Optional label rendered beside the icon. */
+  label?: string;
+  /** Fires after the copy (clipboard write is best-effort on native). */
+  onPress?: () => void;
+}
+
+/** Copies `value` to the clipboard (via expo-clipboard if present) and flashes
+ *  a transient check for ~1.2s — the copy glyph (two overlapping rounded rects)
+ *  swaps to a check Icon. Mirrors the web `CopyButton`. */
+export function CopyButton({ value = 'LOCKIN-2026', label, onPress }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const id = setTimeout(() => setCopied(false), 1200);
+    return () => clearTimeout(id);
+  }, [copied]);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={copied ? 'Copied' : 'Copy'}
+      onPress={() => {
+        if (value != null && typeof clipboard?.setStringAsync === 'function') {
+          void clipboard.setStringAsync(value);
+        }
+        setCopied(true);
+        onPress?.();
+      }}
+      style={({ pressed }) => [copyStyles.btn, copied && copyStyles.btnDone, pressed && copyStyles.btnPressed]}
+    >
+      {copied ? (
+        <Icon name="check" size={15} color={colors.accent3} />
+      ) : (
+        <Svg
+          width={15}
+          height={15}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={colors.textDim}
+          strokeWidth={1.9}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <Rect x={9} y={9} width={11} height={11} rx={2.5} />
+          <Path d="M5 15H4.5A1.5 1.5 0 0 1 3 13.5V4.5A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5" />
+        </Svg>
+      )}
+      {label != null && (
+        <Text style={[copyStyles.label, copied && copyStyles.labelDone]}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}
+
+const copyStyles = StyleSheet.create({
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass2,
+  },
+  btnPressed: { opacity: 0.85 },
+  btnDone: {
+    borderColor: 'rgba(52, 245, 197, 0.4)',
+    backgroundColor: 'rgba(52, 245, 197, 0.12)',
+  },
+  label: { fontFamily: fonts.ui, fontSize: 12.5, fontWeight: '600', color: colors.textDim },
+  labelDone: { color: colors.accent3 },
+});

package/src/components/PrBadge.tsx

@@ -0,0 +1,51 @@
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { fonts } from '@lockin90/tokens';
+
+export type PrBadgeSize = 'sm' | 'md';
+
+/** PR red — the deliberate off-spectrum signal color of the training design
+ *  (matched literal on web, `.lk-prbadge`). Not a spectrum/zone token: a PR
+ *  must scream. */
+export const PR_RED = '#FF4757';
+
+export interface PrBadgeProps {
+  /** Badge text (default `'PR'` — also `'NEW'`, `'AT PEAK'`, …). */
+  label?: string;
+  /** `md` (default) on cards/callouts; `sm` inside dense set rows. */
+  size?: PrBadgeSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * PrBadge — the solid RED personal-record flag. Native twin of the web
+ * `PrBadge` (`.lk-prbadge`): tight 4px-radius tab, white bold mono uppercase
+ * text, soft red glow. `SetTable` stamps it on PR'd done sets; `PrCard` uses
+ * it as the `new` / `atPeak` state tag.
+ */
+export function PrBadge({ label = 'PR', size = 'md', style }: PrBadgeProps) {
+  const sm = size === 'sm';
+  return (
+    <View style={[styles.badge, sm ? styles.badgeSm : styles.badgeMd, style]}>
+      <Text style={[styles.text, sm ? styles.textSm : styles.textMd]}>{label.toUpperCase()}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: PR_RED,
+    borderRadius: 4,
+    shadowColor: PR_RED,
+    shadowOpacity: 0.5,
+    shadowRadius: 5,
+    shadowOffset: { width: 0, height: 0 },
+  },
+  badgeMd: { paddingVertical: 3, paddingHorizontal: 7 },
+  badgeSm: { paddingVertical: 2, paddingHorizontal: 5 },
+  text: { fontFamily: fonts.mono, fontWeight: '700', color: '#FFFFFF', letterSpacing: 0.8 },
+  textMd: { fontSize: 10 },
+  textSm: { fontSize: 8.5 },
+});

package/src/components/PrCard.tsx

@@ -0,0 +1,132 @@
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, fonts, radii } from '@lockin90/tokens';
+import { hapticSelection } from '../internal/optionalHaptics';
+import { PrBadge, PR_RED } from './PrBadge';
+
+/** PR state — `new`/`atPeak` get the red-tinted border/glow + red tag;
+ *  `offPeak` a quiet amber text tag. */
+export type PrCardState = 'new' | 'atPeak' | 'offPeak';
+
+export interface PrCardProps {
+  /** Lift name (e.g. `'Back Squat'`). */
+  name: string;
+  /** Record kind, mono overline (e.g. `'Estimated 1RM'`). */
+  kind: string;
+  /** The record value (e.g. `'130 kg'`). */
+  value: string;
+  /** Dim mono detail (e.g. `'today · +2kg'`). */
+  detail?: string;
+  /** Record state — omit for a plain card with no tag. */
+  state?: PrCardState;
+  /** When set, the card becomes a `Pressable`. */
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const STATE_TAG: Record<Exclude<PrCardState, 'offPeak'>, string> = {
+  new: 'NEW',
+  atPeak: 'AT PEAK',
+};
+
+/**
+ * PrCard — a personal-record card. Native twin of the web `PrCard` (same
+ * prop API): lift name + mono record kind, the record value big in the
+ * display font, and a dim detail line. `new`/`atPeak` records get the
+ * red-PR treatment — red-tinted border + soft red glow and a red `PrBadge`
+ * tag (`NEW` / `AT PEAK`); `offPeak` keeps the plain glass surface with a
+ * quiet amber `OFF PEAK` text tag.
+ */
+export function PrCard({ name, kind, value, detail, state, onPress, style }: PrCardProps) {
+  const hot = state === 'new' || state === 'atPeak';
+
+  const body = (
+    <>
+      <View style={styles.top}>
+        <Text style={styles.name} numberOfLines={1}>
+          {name}
+        </Text>
+        {hot ? (
+          <PrBadge size="sm" label={STATE_TAG[state as 'new' | 'atPeak']} />
+        ) : state === 'offPeak' ? (
+          <Text style={styles.off}>OFF PEAK</Text>
+        ) : null}
+      </View>
+      <Text style={styles.kind}>{kind.toUpperCase()}</Text>
+      <Text style={styles.value}>{value}</Text>
+      {detail != null && <Text style={styles.detail}>{detail}</Text>}
+    </>
+  );
+
+  const surface = [styles.card, hot && styles.hot, style];
+
+  if (onPress) {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => {
+          hapticSelection();
+          onPress();
+        }}
+        style={({ pressed }) => [surface, pressed && styles.pressed]}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+  return <View style={surface}>{body}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: 'flex-start',
+    gap: 3,
+    paddingVertical: 13,
+    paddingHorizontal: 15,
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  hot: {
+    borderColor: 'rgba(255,71,87,0.38)',
+    shadowColor: PR_RED,
+    shadowOpacity: 0.16,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 0 },
+  },
+  pressed: { backgroundColor: colors.glass2 },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    alignSelf: 'stretch',
+  },
+  name: {
+    flexShrink: 1,
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 14,
+    letterSpacing: -0.14,
+    color: colors.text,
+  },
+  off: {
+    flexShrink: 0,
+    fontFamily: fonts.mono,
+    fontSize: 9,
+    fontWeight: '600',
+    letterSpacing: 0.7,
+    color: colors.zoneMid,
+  },
+  kind: { fontFamily: fonts.mono, fontSize: 9.5, letterSpacing: 1.1, color: colors.textFaint },
+  value: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 22,
+    letterSpacing: -0.44,
+    lineHeight: 25,
+    color: colors.text,
+    marginTop: 3,
+  },
+  detail: { fontFamily: fonts.mono, fontSize: 10.5, color: colors.textDim },
+});

package/src/components/PricingTierCard.tsx

@@ -0,0 +1,234 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients, nativeShadows } from '@lockin90/tokens';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Badge } from './Badge';
+
+/**
+ * A single feature row. A plain `string` (or `{ included: true }`) renders a
+ * mint check ✓; `{ included: false }` renders a muted cross ✗ (feature not in
+ * this tier). Lets one component express both included and excluded features.
+ */
+export type PricingFeature = string | { label: string; included?: boolean };
+
+export interface PricingTierCardProps {
+  /** tier name, e.g. 'Free' | 'Pro' | 'Elite' */
+  name: string;
+  /** preformatted price, e.g. '$9' or 'Free' */
+  price: string;
+  /** billing period, e.g. '/mo' */
+  period?: string;
+  description?: string;
+  /**
+   * Feature list. A plain string → mint check ✓; an object with
+   * `included: false` → a muted cross ✗ (excluded from this tier).
+   */
+  features: PricingFeature[];
+  /** accent/cta-gradient border + glow + a ribbon */
+  featured?: boolean;
+  /** ribbon copy (only when `featured`) @default 'Most popular' */
+  ribbonLabel?: string;
+  /** small tier badge label */
+  badge?: string;
+  /** CTA slot — consumer passes a `<Button>` (renders at the bottom) */
+  cta?: ReactNode;
+  /** dim + disable the whole card (unavailable / current plan / coming soon) */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * PricingTierCard — a glass plan card: tier name + optional badge, a big price
+ * (display font) + period, a description, a feature list each with a leading
+ * mint check Icon, and a CTA slot pinned to the bottom. When `featured`, it
+ * gains a cta-gradient border + accent glow and a ribbon (`ribbonLabel`).
+ * Composed from Card + Icon + Badge; mirrors the web `@lockin90/ui`
+ * PricingTierCard and the `.tier` cards in the billing mockup.
+ */
+export function PricingTierCard({
+  name,
+  price,
+  period,
+  description,
+  features,
+  featured,
+  ribbonLabel = 'Most popular',
+  badge,
+  cta,
+  disabled = false,
+  style,
+}: PricingTierCardProps) {
+  const dim = disabled ? { opacity: 0.5 } : null;
+  const body = (
+    <>
+      {featured ? <Ribbon label={ribbonLabel} /> : null}
+
+      <View style={styles.head}>
+        <Text style={styles.name}>{name}</Text>
+        {badge ? <Badge tone="accent">{badge}</Badge> : null}
+      </View>
+
+      {description ? <Text style={styles.desc}>{description}</Text> : null}
+
+      <View style={styles.price}>
+        <Text style={styles.amt}>{price}</Text>
+        {period ? <Text style={styles.per}>{period}</Text> : null}
+      </View>
+
+      <View style={styles.feat}>
+        {features.map((f, i) => {
+          const label = typeof f === 'string' ? f : f.label;
+          const included = typeof f === 'string' ? true : f.included !== false;
+          return (
+            <View key={`${label}-${i}`} style={styles.featRow}>
+              <Icon
+                name={included ? 'check' : 'close'}
+                size={16}
+                color={included ? colors.zoneHigh : colors.textFaint}
+              />
+              <Text style={[styles.featText, !included && styles.featTextOff]}>{label}</Text>
+            </View>
+          );
+        })}
+      </View>
+
+      {cta ? <View style={styles.cta}>{cta}</View> : null}
+    </>
+  );
+
+  // featured: a cta-gradient hairline border (LinearGradient padding) wraps the
+  // Card, plus the accent glow — matches the web `.lk-tier-featured` ::before.
+  if (featured) {
+    return (
+      <LinearGradient
+        colors={gradients.cta.stops as unknown as [string, string]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={[styles.featuredBorder, dim, style]}
+        pointerEvents={disabled ? 'none' : undefined}
+      >
+        <Card flat style={styles.featuredInner}>
+          {body}
+        </Card>
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <Card style={[styles.card, dim, style]} pointerEvents={disabled ? 'none' : undefined}>
+      {body}
+    </Card>
+  );
+}
+
+function Ribbon({ label }: { label: string }) {
+  return (
+    <LinearGradient
+      colors={gradients.cta.stops as unknown as [string, string]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={styles.ribbon}
+    >
+      <Text style={styles.ribbonText}>{label.toUpperCase()}</Text>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { position: 'relative' },
+  featuredBorder: {
+    borderRadius: radii.md,
+    padding: 1.5,
+    ...nativeShadows.glowAccent,
+  },
+  featuredInner: {
+    position: 'relative',
+    // fill the gradient-border wrapper — in a stretched row (horizontal tier
+    // scroller) a content-sized inner card left the wrapper's lower half as a
+    // thick gradient band instead of a 1.5px hairline.
+    flex: 1,
+    backgroundColor: colors.bg1,
+    borderWidth: 0,
+    borderRadius: radii.md - 1.5,
+  },
+  ribbon: {
+    position: 'absolute',
+    top: 14,
+    right: 14,
+    zIndex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: radii.pill,
+    ...nativeShadows.glowAccent,
+  },
+  ribbonText: {
+    fontFamily: fonts.mono,
+    fontSize: 9.5,
+    fontWeight: '600',
+    letterSpacing: 1.1,
+    color: '#0A0A12',
+  },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 9,
+  },
+  name: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 19,
+    color: colors.text,
+  },
+  desc: {
+    fontSize: 12.5,
+    lineHeight: 18,
+    color: colors.textDim,
+    minHeight: 34,
+    marginTop: 4,
+  },
+  price: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: 6,
+    marginTop: 8,
+    marginBottom: 2,
+  },
+  amt: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 42,
+    letterSpacing: -1.7,
+    lineHeight: 44,
+    color: colors.text,
+  },
+  per: {
+    fontFamily: fonts.mono,
+    fontSize: 12.5,
+    color: colors.textFaint,
+  },
+  feat: {
+    marginVertical: 16,
+    gap: 11,
+    flex: 1,
+  },
+  featRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+  },
+  featText: {
+    flex: 1,
+    fontSize: 13,
+    lineHeight: 18,
+    color: colors.text,
+  },
+  featTextOff: {
+    color: colors.textDim,
+  },
+  cta: {
+    marginTop: 'auto',
+    paddingTop: 4,
+  },
+});