@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/Pagination.tsx

@@ -0,0 +1,188 @@
+import { Fragment } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+/* ============================================================================
+   Pagination + Breadcrumb — admin/CMS navigation atoms.
+   ========================================================================== */
+
+export interface PaginationProps {
+  /** current page, 1-based */
+  page?: number;
+  /** total number of pages */
+  pageCount?: number;
+  onChange?: (page: number) => void;
+}
+
+/** Build the page list with ellipsis truncation — always shows first, last,
+ *  current, and current ±1; `'…'` marks collapsed ranges. */
+function pageItems(page: number, pageCount: number): Array<number | '…'> {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1);
+  }
+  const out: Array<number | '…'> = [1];
+  const left = Math.max(2, page - 1);
+  const right = Math.min(pageCount - 1, page + 1);
+  if (left > 2) out.push('…');
+  for (let p = left; p <= right; p += 1) out.push(p);
+  if (right < pageCount - 1) out.push('…');
+  out.push(pageCount);
+  return out;
+}
+
+/** Numbered pager — mono numerals, accent-filled active page, chevron
+ *  prev/next that dim and disable at the ends. */
+export function Pagination({ page = 1, pageCount = 8, onChange }: PaginationProps) {
+  const count = Math.max(1, pageCount);
+  const current = Math.min(Math.max(1, page), count);
+  const go = (p: number) => {
+    if (p < 1 || p > count || p === current) return;
+    onChange?.(p);
+  };
+
+  const atStart = current <= 1;
+  const atEnd = current >= count;
+
+  return (
+    <View style={styles.pager}>
+      <Pressable
+        onPress={() => go(current - 1)}
+        disabled={atStart}
+        style={({ pressed }) => [
+          styles.btn,
+          styles.edge,
+          atStart && styles.btnDisabled,
+          pressed && !atStart && styles.btnPressed,
+        ]}
+      >
+        <Icon name="back" size={16} color={atStart ? colors.textFaint : colors.textDim} />
+      </Pressable>
+
+      {pageItems(current, count).map((item, i) =>
+        item === '…' ? (
+          <View key={`gap-${i}`} style={styles.gap}>
+            <Text style={styles.gapText}>…</Text>
+          </View>
+        ) : (
+          <Pressable
+            key={item}
+            onPress={() => go(item)}
+            style={({ pressed }) => [
+              styles.btn,
+              item === current && styles.btnActive,
+              pressed && item !== current && styles.btnPressed,
+            ]}
+          >
+            <Text style={[styles.btnText, item === current && styles.btnTextActive]}>{item}</Text>
+          </Pressable>
+        ),
+      )}
+
+      <Pressable
+        onPress={() => go(current + 1)}
+        disabled={atEnd}
+        style={({ pressed }) => [
+          styles.btn,
+          styles.edge,
+          atEnd && styles.btnDisabled,
+          pressed && !atEnd && styles.btnPressed,
+        ]}
+      >
+        <Icon name="chevron" size={16} color={atEnd ? colors.textFaint : colors.textDim} />
+      </Pressable>
+    </View>
+  );
+}
+
+export interface Crumb {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps {
+  items?: Crumb[];
+  onNavigate?: (index: number) => void;
+}
+
+const DEFAULT_CRUMBS: Crumb[] = [{ label: 'Admin' }, { label: 'Users' }, { label: 'Profile' }];
+
+/** Inline breadcrumb trail — dim pressable ancestors, bold current leaf,
+ *  faint chevron separators. */
+export function Breadcrumb({ items = DEFAULT_CRUMBS, onNavigate }: BreadcrumbProps) {
+  return (
+    <View style={styles.crumb}>
+      {items.map((crumb, i) => {
+        const last = i === items.length - 1;
+        return (
+          <Fragment key={`${crumb.label}-${i}`}>
+            {last ? (
+              <Text style={[styles.crumbItem, styles.crumbCurrent]}>{crumb.label}</Text>
+            ) : (
+              <Pressable onPress={() => onNavigate?.(i)}>
+                {({ pressed }) => (
+                  <Text style={[styles.crumbItem, pressed && styles.crumbLinkActive]}>
+                    {crumb.label}
+                  </Text>
+                )}
+              </Pressable>
+            )}
+            {!last && (
+              <View style={styles.crumbSep}>
+                <Icon name="chevron" size={13} color={colors.textFaint} />
+              </View>
+            )}
+          </Fragment>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  /* ── Pagination ── */
+  pager: { flexDirection: 'row', alignItems: 'center', gap: 4, alignSelf: 'flex-start' },
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 32,
+    height: 32,
+    paddingHorizontal: 8,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    backgroundColor: colors.glass,
+  },
+  edge: {},
+  btnPressed: { backgroundColor: colors.glass2, borderColor: colors.border2 },
+  btnActive: { backgroundColor: colors.accent, borderColor: colors.accent },
+  btnDisabled: { opacity: 0.4 },
+  btnText: {
+    fontFamily: fonts.mono,
+    fontSize: 12.5,
+    fontWeight: '500',
+    lineHeight: 12.5,
+    color: colors.textDim,
+  },
+  btnTextActive: { color: colors.text, fontWeight: '600' },
+  gap: {
+    minWidth: 20,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gapText: { fontFamily: fonts.mono, fontSize: 12.5, color: colors.textFaint },
+
+  /* ── Breadcrumb ── */
+  crumb: { flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start' },
+  crumbItem: {
+    fontFamily: fonts.ui,
+    fontSize: 12.5,
+    lineHeight: 14,
+    color: colors.textDim,
+  },
+  crumbLinkActive: { color: colors.text },
+  crumbCurrent: { color: colors.text, fontWeight: '600' },
+  crumbSep: { opacity: 0.6 },
+});

package/src/components/PasswordInput.tsx

@@ -0,0 +1,111 @@
+import { useState, type ReactNode } from 'react';
+import { View, Text, TextInput, Pressable, StyleSheet, type TextInputProps } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+export interface PasswordInputProps extends Omit<TextInputProps, 'secureTextEntry'> {
+  /** small mono uppercase label rendered above the field */
+  label?: string;
+  /** red border to signal an invalid value */
+  invalid?: boolean;
+  /** field density */
+  inputSize?: 'sm' | 'md';
+  /** optional leading icon inside the field shell */
+  leading?: ReactNode;
+  /** start with the password revealed @default false */
+  defaultVisible?: boolean;
+  /** accessibility label for the show/hide toggle
+   *  (default "Show password" / "Hide password") */
+  toggleLabel?: string;
+}
+
+/**
+ * PasswordInput — a password TextInput with a built-in show/hide eye toggle.
+ * Mirrors `Input` (same `label` / `leading` / `invalid` / `inputSize` + glass
+ * shell); `secureTextEntry` is owned internally and flipped by the eye button.
+ */
+export function PasswordInput({
+  label,
+  invalid = false,
+  inputSize = 'md',
+  leading,
+  defaultVisible = false,
+  toggleLabel,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}: PasswordInputProps) {
+  const [focused, setFocused] = useState(false);
+  const [visible, setVisible] = useState(defaultVisible);
+  const sm = inputSize === 'sm';
+  const borderColor = invalid ? colors.zoneLow : focused ? colors.accent : colors.border2;
+  const aria = toggleLabel ?? (visible ? 'Hide password' : 'Show password');
+
+  return (
+    <View style={styles.wrap}>
+      {label ? <Text style={styles.label}>{label.toUpperCase()}</Text> : null}
+      <View style={[styles.field, sm && styles.fieldSm, { borderColor }]}>
+        {leading ? <View style={styles.lead}>{leading}</View> : null}
+        <TextInput
+          style={[styles.input, sm && styles.inputSm, style]}
+          placeholderTextColor={colors.textFaint}
+          secureTextEntry={!visible}
+          onFocus={(e) => {
+            setFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setFocused(false);
+            onBlur?.(e);
+          }}
+          {...rest}
+        />
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={aria}
+          hitSlop={8}
+          onPress={() => setVisible((v) => !v)}
+          style={styles.trail}
+        >
+          <Icon name={visible ? 'eyeOff' : 'eye'} size={18} color={colors.textFaint} />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { gap: 6, minWidth: 0 },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    fontWeight: '500',
+    letterSpacing: 1.2,
+    color: colors.textFaint,
+  },
+  field: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    minWidth: 0,
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    backgroundColor: colors.glass2,
+  },
+  fieldSm: { paddingVertical: 6, paddingHorizontal: 10 },
+  lead: { flexShrink: 0 },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  inputSm: { fontSize: 12.5 },
+  trail: { flexShrink: 0 },
+});

package/src/components/PasswordStrengthMeter.tsx

@@ -0,0 +1,104 @@
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle, type ViewProps } from 'react-native';
+import { colors, fonts, radii } from '@lockin90/tokens';
+
+export type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
+
+export interface PasswordStrengthMeterProps extends Omit<ViewProps, 'children' | 'style'> {
+  /** 0 = empty/weakest .. 4 = strongest */
+  score: PasswordStrengthScore;
+  /** override the derived label (default: 0/1='Weak', 2='Fair', 3='Good', 4='Strong') */
+  label?: string;
+  /** optional helper line shown under the meter */
+  hint?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Number of equal segments rendered (the 4-segment model is shared web↔native). */
+const SEGMENTS = 4;
+
+/** Default label per score — 0 and 1 both read 'Weak'. */
+const LABELS = ['Weak', 'Weak', 'Fair', 'Good', 'Strong'] as const;
+
+/**
+ * Color of the filled segments + label, keyed by score:
+ * 1 = bad/red, 2 = warn/amber, 3 = cyan, 4 = mint/ok (score 0 falls back to bad).
+ */
+const SCORE_COLOR = [colors.bad, colors.bad, colors.warn, colors.cyan, colors.ok] as const;
+
+/**
+ * PasswordStrengthMeter — a row of 4 equal segments that fill left→right up to
+ * `score`, colored by strength (red → amber → cyan → mint), with a small label
+ * (derived or overridden) tinted in the score color and an optional hint line.
+ */
+export function PasswordStrengthMeter({
+  score,
+  label,
+  hint,
+  style,
+  ...rest
+}: PasswordStrengthMeterProps) {
+  const s = Math.max(0, Math.min(SEGMENTS, score)) as PasswordStrengthScore;
+  const color = SCORE_COLOR[s];
+  const text = label ?? LABELS[s];
+
+  return (
+    <View
+      style={[styles.root, style]}
+      accessibilityRole="progressbar"
+      accessibilityLabel={`Password strength: ${text}`}
+      accessibilityValue={{ min: 0, max: SEGMENTS, now: s }}
+      {...rest}
+    >
+      <View style={styles.bars}>
+        {Array.from({ length: SEGMENTS }, (_, i) => {
+          const on = i < s;
+          return (
+            <View
+              key={i}
+              style={[
+                styles.seg,
+                on && {
+                  backgroundColor: color,
+                  shadowColor: color,
+                  shadowOpacity: 0.55,
+                  shadowRadius: 5,
+                },
+              ]}
+            />
+          );
+        })}
+      </View>
+      <View style={styles.meta}>
+        <Text style={[styles.label, { color }]}>{text}</Text>
+        {hint != null && <Text style={styles.hint}>{hint}</Text>}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { width: '100%', gap: 8 },
+  bars: { flexDirection: 'row', gap: 6 },
+  seg: {
+    flex: 1,
+    height: 5,
+    borderRadius: radii.pill,
+    backgroundColor: colors.border,
+  },
+  meta: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  hint: {
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    color: colors.textFaint,
+  },
+});

package/src/components/PendingPatternCard.tsx

@@ -0,0 +1,163 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Card } from './Card';
+import { Button } from './Button';
+import { Chip } from './Chip';
+import { Icon } from './Icon';
+
+export interface PendingPatternConfidence {
+  label: string;
+  value: string;
+}
+
+export interface PendingPatternCardProps {
+  /** The detected-pattern prose — what the engine thinks it found. */
+  interpretation: ReactNode;
+  /** Effect line, e.g. '+8 energy when sleep > 7h'. Signed value is highlighted
+   *  (mint for +, red for −). */
+  effect?: string;
+  /** Optional supporting chips, e.g. `[{ label: 'n', value: '22 events' }]`. */
+  confidence?: PendingPatternConfidence[];
+  onAccept?: () => void;
+  onDismiss?: () => void;
+  /** @default 'Accept' */
+  acceptLabel?: string;
+  /** @default 'Dismiss' */
+  dismissLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Split an effect string into its leading signed token and the trailing prose,
+ *  so the magnitude (e.g. `+8`, `−18m`) can be emphasized and tone-colored. */
+function splitEffect(effect: string): { sign: 'pos' | 'neg' | 'none'; value: string; rest: string } {
+  const match = /^\s*([+\-−]\s*[\d.,]+\s*[^\s]*)(.*)$/.exec(effect);
+  if (!match) return { sign: 'none', value: '', rest: effect.trim() };
+  const value = match[1].trim();
+  const rest = match[2].trim();
+  const sign = value.startsWith('-') || value.startsWith('−') ? 'neg' : 'pos';
+  return { sign, value, rest };
+}
+
+/** A detected-but-unconfirmed pattern surfaced for review — glass card with a
+ *  "Pending pattern" eyebrow, the interpretation prose, an emphasized effect
+ *  line, optional confidence chips, and an Accept / Dismiss action row. */
+export function PendingPatternCard({
+  interpretation,
+  effect,
+  confidence,
+  onAccept,
+  onDismiss,
+  acceptLabel = 'Accept',
+  dismissLabel = 'Dismiss',
+  style,
+}: PendingPatternCardProps) {
+  const eff = effect ? splitEffect(effect) : null;
+  const hasActions = onAccept != null || onDismiss != null;
+  const effColor =
+    eff?.sign === 'pos' ? colors.zoneHigh : eff?.sign === 'neg' ? colors.zoneLow : colors.text;
+
+  return (
+    <Card lit style={[styles.card, style]}>
+      <View style={styles.head}>
+        <View style={styles.ic}>
+          <Icon name="sparkle" size={18} color={colors.accent} />
+        </View>
+        <Text style={styles.eyebrow}>Pending pattern</Text>
+      </View>
+
+      {typeof interpretation === 'string' ? (
+        <Text style={styles.prose}>{interpretation}</Text>
+      ) : (
+        <View style={styles.prose}>{interpretation}</View>
+      )}
+
+      {eff && (
+        <View style={styles.effect}>
+          {!!eff.value && <Text style={[styles.effectVal, { color: effColor }]}>{eff.value}</Text>}
+          {!!eff.rest && <Text style={styles.effectLabel}>{eff.rest}</Text>}
+        </View>
+      )}
+
+      {confidence && confidence.length > 0 && (
+        <View style={styles.meta}>
+          {confidence.map((c, i) => (
+            <Chip key={`${c.label}-${i}`} tone="neutral" label={`${c.label} · ${c.value}`} />
+          ))}
+        </View>
+      )}
+
+      {hasActions && (
+        <View style={styles.actions}>
+          {onAccept != null && (
+            <Button variant="primary" title={acceptLabel} onPress={onAccept} style={styles.action} />
+          )}
+          {onDismiss != null && (
+            <Button variant="ghost" title={dismissLabel} onPress={onDismiss} style={styles.action} />
+          )}
+        </View>
+      )}
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { padding: 20 },
+  head: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  ic: {
+    width: 32,
+    height: 32,
+    borderRadius: radii.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  eyebrow: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    fontWeight: '500',
+    textTransform: 'uppercase',
+    letterSpacing: 1.6,
+    color: colors.textFaint,
+  },
+  prose: { marginTop: 14, fontSize: 13.5, lineHeight: 21, color: colors.textDim },
+  effect: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: 10,
+    marginTop: 14,
+    paddingVertical: 11,
+    paddingHorizontal: 14,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.bg1,
+  },
+  effectVal: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 22,
+    letterSpacing: -0.4,
+    lineHeight: 24,
+  },
+  effectLabel: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 1.2,
+    color: colors.textFaint,
+    flexShrink: 1,
+  },
+  meta: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 14 },
+  actions: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  action: { flex: 1 },
+});