@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/Countdown.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, nativeShadows, gradients } from '@lockin90/tokens';
+
+export type CountdownUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+
+const ALL_UNITS: CountdownUnit[] = ['days', 'hours', 'minutes', 'seconds'];
+
+const UNIT_LABEL: Record<CountdownUnit, string> = {
+  days: 'Days',
+  hours: 'Hours',
+  minutes: 'Minutes',
+  seconds: 'Seconds',
+};
+
+export interface CountdownProps {
+  /** Target epoch (ms). When set, the countdown ticks live every second and clears on unmount. */
+  to?: number;
+  /** Static parts shown when `to` is not provided (a fixed, non-ticking countdown). */
+  parts?: { days?: number; hours?: number; minutes?: number; seconds?: number };
+  /** Which cells to render, in order. Defaults to all four. */
+  units?: CountdownUnit[];
+  /** The unit cell to render glowing (the `.lit` accent cell). */
+  highlightUnit?: CountdownUnit;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Break a positive remaining-millisecond span into clamped day/hour/minute/second parts. */
+function splitRemaining(ms: number): Record<CountdownUnit, number> {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return {
+    days: Math.floor(total / 86400),
+    hours: Math.floor((total % 86400) / 3600),
+    minutes: Math.floor((total % 3600) / 60),
+    seconds: total % 60,
+  };
+}
+
+/** Two-digit zero-pad. */
+function pad(value: number): string {
+  return String(Math.max(0, value)).padStart(2, '0');
+}
+
+/**
+ * Countdown — a row of glass cells (days / hours / minutes / seconds), each a big
+ * display number with a mono unit label, counting down to a target time.
+ *
+ * Pass `to` (epoch ms) to tick live every second, or `parts` for a static render.
+ * `highlightUnit` glows one cell with the accent border + glow. Clamps at zero.
+ * Native analogue of the web `Countdown` — identical prop API.
+ */
+export function Countdown({ to, parts, units = ALL_UNITS, highlightUnit, style }: CountdownProps) {
+  // Do NOT call Date.now() at module scope — only inside the effect/initializer.
+  const computeParts = (): Record<CountdownUnit, number> => {
+    if (to != null) return splitRemaining(to - Date.now());
+    return {
+      days: Math.max(0, parts?.days ?? 0),
+      hours: Math.max(0, parts?.hours ?? 0),
+      minutes: Math.max(0, parts?.minutes ?? 0),
+      seconds: Math.max(0, parts?.seconds ?? 0),
+    };
+  };
+
+  const [value, setValue] = useState<Record<CountdownUnit, number>>(computeParts);
+
+  useEffect(() => {
+    if (to == null) {
+      setValue({
+        days: Math.max(0, parts?.days ?? 0),
+        hours: Math.max(0, parts?.hours ?? 0),
+        minutes: Math.max(0, parts?.minutes ?? 0),
+        seconds: Math.max(0, parts?.seconds ?? 0),
+      });
+      return;
+    }
+    const tick = () => setValue(splitRemaining(to - Date.now()));
+    tick(); // sync immediately
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [to, parts?.days, parts?.hours, parts?.minutes, parts?.seconds]);
+
+  return (
+    <View style={[styles.row, style]} accessibilityRole="timer">
+      {units.map((unit) => {
+        const lit = highlightUnit === unit;
+        const inner = (
+          <>
+            <Text style={styles.num}>{pad(value[unit])}</Text>
+            <Text style={[styles.label, lit && styles.labelLit]}>{UNIT_LABEL[unit]}</Text>
+          </>
+        );
+        // lit cell uses the SAME cta gradient as web's `--grad-cta` (not a flat fill)
+        return lit ? (
+          <LinearGradient
+            key={unit}
+            colors={gradients.cta.stops as unknown as [string, string]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={[styles.cell, styles.cellLit]}
+          >
+            {inner}
+          </LinearGradient>
+        ) : (
+          <View key={unit} style={styles.cell}>
+            {inner}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: 12,
+  },
+  cell: {
+    minWidth: 92,
+    paddingVertical: 16,
+    paddingHorizontal: 14,
+    borderRadius: radii.md,
+    alignItems: 'center',
+    gap: 9,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  cellLit: {
+    borderColor: 'transparent',
+    ...nativeShadows.glowAccent,
+  },
+  labelLit: {
+    color: 'rgba(255,255,255,0.72)',
+  },
+  num: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 46,
+    letterSpacing: -1.38,
+    lineHeight: 46,
+    color: colors.text,
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    fontWeight: '500',
+    letterSpacing: 1.68,
+    textTransform: 'uppercase',
+    color: colors.textDim,
+  },
+});

package/src/components/CreditCardVisual.tsx

@@ -0,0 +1,151 @@
+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';
+
+/** Card-art gradient (mirrors the `@lockin90/tokens` gradient tokens). */
+export type CardGradient = 'cta' | 'flux' | 'violet' | 'mint' | 'warm';
+
+export interface CreditCardVisualProps {
+  /** last 4 digits — rendered as `•••• •••• •••• {last4}` */
+  last4: string;
+  /** cardholder name (uppercased for display) */
+  holder?: string;
+  /** expiry, `'MM/YY'` */
+  expiry?: string;
+  /** brand label shown top-right, e.g. `'VISA'` (plain text, not a logo) */
+  brand?: string;
+  /** card-art gradient @default 'cta' */
+  gradient?: CardGradient;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A CSS-style angle (deg, clockwise from 12 o'clock like web `linear-gradient`)
+ *  → expo-linear-gradient start/end unit points, so the native art matches the
+ *  web gradient direction exactly. */
+function angleToPoints(angle: number): { start: { x: number; y: number }; end: { x: number; y: number } } {
+  const rad = ((angle - 90) * Math.PI) / 180;
+  const x = Math.cos(rad);
+  const y = Math.sin(rad);
+  return {
+    start: { x: 0.5 - x / 2, y: 0.5 - y / 2 },
+    end: { x: 0.5 + x / 2, y: 0.5 + y / 2 },
+  };
+}
+
+/**
+ * CreditCardVisual — a credit-card-aspect (≈1.586:1) gradient panel mirroring the
+ * `.creditcard` art in the billing mockup: a brand label top-right, a metallic
+ * chip glyph, the masked card-number row (mono, letter-spaced) and a bottom row
+ * with the cardholder (mono uppercase) + expiry. The chosen `gradient` fills the
+ * art (via `expo-linear-gradient`) behind a subtle sheen. Tokens-driven; web twin
+ * lives in `@lockin90/ui` with an identical name, props and visuals.
+ */
+export function CreditCardVisual({ last4, holder, expiry, brand, gradient = 'cta', style }: CreditCardVisualProps) {
+  const g = gradients[gradient] ?? gradients.cta;
+  const { start, end } = angleToPoints(g.angle);
+
+  return (
+    <LinearGradient
+      colors={g.stops as unknown as readonly [string, string, ...string[]]}
+      start={start}
+      end={end}
+      style={[styles.card, style]}
+    >
+      {/* sheen: a soft top-right glossy highlight over the gradient */}
+      <View style={styles.sheen} pointerEvents="none" />
+
+      <View style={styles.top}>
+        <View style={styles.chip} />
+        {brand ? <Text style={styles.brand}>{brand}</Text> : null}
+      </View>
+
+      <Text style={styles.num}>{`•••• •••• •••• ${last4}`}</Text>
+
+      <View style={styles.bottom}>
+        <View>
+          <Text style={styles.lbl}>CARD HOLDER</Text>
+          <Text style={styles.val}>{(holder ?? '').toUpperCase()}</Text>
+        </View>
+        {expiry ? (
+          <View style={styles.fieldEnd}>
+            <Text style={styles.lbl}>EXPIRES</Text>
+            <Text style={styles.val}>{expiry}</Text>
+          </View>
+        ) : null}
+      </View>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    position: 'relative',
+    width: '100%',
+    maxWidth: 360,
+    aspectRatio: 1.586,
+    padding: 22,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    justifyContent: 'space-between',
+    overflow: 'hidden',
+    ...nativeShadows.elev2,
+  },
+  sheen: {
+    position: 'absolute',
+    right: -40,
+    top: -60,
+    width: 240,
+    height: 240,
+    borderRadius: 120,
+    backgroundColor: 'rgba(255,255,255,0.16)',
+  },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  chip: {
+    width: 38,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: '#c4a85e',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.2)',
+  },
+  brand: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontStyle: 'italic',
+    fontSize: 22,
+    letterSpacing: -0.4,
+    color: colors.text,
+  },
+  num: {
+    fontFamily: fonts.mono,
+    fontSize: 19,
+    letterSpacing: 2.3,
+    color: colors.text,
+  },
+  bottom: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    gap: 10,
+  },
+  fieldEnd: {
+    alignItems: 'flex-end',
+  },
+  lbl: {
+    fontFamily: fonts.mono,
+    fontSize: 8.5,
+    letterSpacing: 0.85,
+    color: colors.textFaint,
+  },
+  val: {
+    marginTop: 2,
+    fontFamily: fonts.mono,
+    fontSize: 13,
+    color: colors.text,
+  },
+});

package/src/components/DateField.tsx

@@ -0,0 +1,346 @@
+import { useState, type ComponentType, type ReactNode } from 'react';
+import { View, Text, TextInput, Pressable, Platform, StyleSheet, type ViewProps } from 'react-native';
+import Svg, { Path, Rect, Polyline } from 'react-native-svg';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+/* @react-native-community/datetimepicker is an optional peer dependency. When
+ * installed, tapping the field opens the OS date picker — the native analogue of
+ * web's `<input type="date">`; when absent the field falls back to an editable
+ * text input. Resolved lazily so the kit never hard-depends on it. */
+let DateTimePicker: ComponentType<{
+  value: Date;
+  mode?: 'date' | 'time' | 'datetime';
+  display?: string;
+  onChange?: (event: { type: string }, date?: Date) => void;
+}> | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  DateTimePicker = require('@react-native-community/datetimepicker').default;
+} catch {
+  DateTimePicker = null;
+}
+
+/** Parse a `YYYY-MM-DD` string into a local Date (or undefined). */
+function parseDate(v?: string): Date | undefined {
+  if (!v) return undefined;
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(v);
+  if (!m) return undefined;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? undefined : d;
+}
+
+/** Format a Date as `YYYY-MM-DD`. */
+function formatDate(d: Date): string {
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+}
+
+/* ============================================================================
+   DateField — a dark glassy date field. Mono uppercase label above, a leading
+   calendar glyph, and an accent focus border. When the optional datetimepicker
+   peer is present, tapping opens the OS date picker (the native analogue of web's
+   `<input type="date">`) and `onChange` receives a 'YYYY-MM-DD' string; otherwise
+   it falls back to a plain text field. Mirrors the web `@lockin90/ui` DateField.
+   ========================================================================== */
+
+export interface DateFieldProps extends Omit<ViewProps, 'onChange'> {
+  /** current value (text, e.g. 2026-06-21) */
+  value?: string;
+  /** fires with the raw input value on every change */
+  onChange?: (value: string) => void;
+  /** placeholder when empty */
+  placeholder?: string;
+  /** small mono uppercase label rendered above the field */
+  label?: string;
+}
+
+/** Leading calendar glyph for the date field. */
+function CalendarIcon({ color }: { color: string }) {
+  return (
+    <Svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
+      <Rect x="3" y="4.5" width="18" height="16" rx="2.5" />
+      <Path d="M3 9h18" />
+      <Path d="M8 2.5v4M16 2.5v4" />
+    </Svg>
+  );
+}
+
+/** Dark glassy date field — leading calendar glyph, accent focus border.
+ *  Opens the OS date picker when the optional datetimepicker peer is installed;
+ *  otherwise an editable text field (graceful fallback). */
+export function DateField({
+  value,
+  onChange,
+  placeholder = 'YYYY-MM-DD',
+  label,
+  style,
+  ...rest
+}: DateFieldProps) {
+  const [focused, setFocused] = useState(false);
+  const [show, setShow] = useState(false);
+  const borderColor = focused || show ? colors.accent : colors.border2;
+
+  const labelEl = label ? <Text style={styles.dateLabel}>{label.toUpperCase()}</Text> : null;
+
+  // OS picker path — tap the field to open the platform date picker.
+  if (DateTimePicker) {
+    return (
+      <View style={[styles.dateWrap, style]} {...rest}>
+        {labelEl}
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={label ?? placeholder}
+          onPress={() => setShow(true)}
+          style={[styles.dateField, { borderColor }]}
+        >
+          <View style={styles.dateLead}>
+            <CalendarIcon color={colors.textFaint} />
+          </View>
+          <Text style={[styles.dateInput, !value && styles.datePlaceholder]} numberOfLines={1}>
+            {value || placeholder}
+          </Text>
+        </Pressable>
+        {show ? (
+          <>
+            <DateTimePicker
+              value={parseDate(value) ?? new Date()}
+              mode="date"
+              display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+              onChange={(event, date) => {
+                if (Platform.OS !== 'ios') setShow(false);
+                if (event.type === 'dismissed') return;
+                if (date) onChange?.(formatDate(date));
+              }}
+            />
+            {Platform.OS === 'ios' ? (
+              <Pressable
+                accessibilityRole="button"
+                onPress={() => setShow(false)}
+                style={styles.dateDone}
+              >
+                <Text style={styles.dateDoneText}>Done</Text>
+              </Pressable>
+            ) : null}
+          </>
+        ) : null}
+      </View>
+    );
+  }
+
+  // Fallback path — editable text field (no picker installed).
+  return (
+    <View style={[styles.dateWrap, style]} {...rest}>
+      {labelEl}
+      <View style={[styles.dateField, { borderColor }]}>
+        <View style={styles.dateLead}>
+          <CalendarIcon color={colors.textFaint} />
+        </View>
+        <TextInput
+          style={styles.dateInput}
+          value={value}
+          placeholder={placeholder}
+          placeholderTextColor={colors.textFaint}
+          onChangeText={onChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+      </View>
+    </View>
+  );
+}
+
+/* ============================================================================
+   TreeItem — a nested, expandable tree row for nav / page trees. A chevron that
+   rotates when expanded, an optional leading icon, the label, an optional faint
+   drag handle, an accent-tinted active state, and indented children rendered
+   below when expanded. Mirrors the web `@lockin90/ui` TreeItem.
+   ========================================================================== */
+
+export interface TreeItemProps extends Omit<ViewProps, 'children'> {
+  /** row label text */
+  label?: string;
+  /** nesting depth — indents the row by depth * 16 */
+  depth?: number;
+  /** show a chevron and allow toggling open/closed */
+  expandable?: boolean;
+  /** whether the children are currently revealed */
+  expanded?: boolean;
+  /** called when the chevron / row toggle is activated */
+  onToggle?: () => void;
+  /** optional leading glyph (before the label) */
+  icon?: ReactNode;
+  /** accent-tinted selected row */
+  active?: boolean;
+  /** show a faint ⠿ drag handle on the left */
+  dragHandle?: boolean;
+  /** nested TreeItems, shown only when `expanded` */
+  children?: ReactNode;
+}
+
+/** Chevron glyph — rotated 90° when expanded. */
+function ChevronIcon({ color }: { color: string }) {
+  return (
+    <Svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Polyline points="9 6 15 12 9 18" />
+    </Svg>
+  );
+}
+
+/** Nested, expandable tree row — chevron, optional icon, label, drag handle. */
+export function TreeItem({
+  label = 'Page',
+  depth = 0,
+  expandable = false,
+  expanded = false,
+  onToggle,
+  icon,
+  active = false,
+  dragHandle = false,
+  children,
+  style,
+  ...rest
+}: TreeItemProps) {
+  return (
+    <View style={styles.treeItem}>
+      <Pressable
+        style={[styles.treeRow, active && styles.treeActive, { paddingLeft: depth * 16 + 8 }, style]}
+        onPress={expandable ? onToggle : undefined}
+        {...rest}
+      >
+        {dragHandle ? <Text style={styles.treeGrip}>⠿</Text> : null}
+
+        {expandable ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={expanded ? 'Collapse' : 'Expand'}
+            accessibilityState={{ expanded }}
+            onPress={onToggle}
+            style={styles.treeChevron}
+            hitSlop={6}
+          >
+            <View style={expanded ? styles.treeChevronOpen : undefined}>
+              <ChevronIcon color={colors.textFaint} />
+            </View>
+          </Pressable>
+        ) : (
+          <View style={styles.treeSpacer} />
+        )}
+
+        {icon ? <View style={styles.treeIcon}>{icon}</View> : null}
+
+        <Text style={styles.treeLabel} numberOfLines={1}>
+          {label}
+        </Text>
+      </Pressable>
+
+      {expandable && expanded && children ? <View style={styles.treeChildren}>{children}</View> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  /* ---- DateField ---- */
+  dateWrap: {
+    alignSelf: 'flex-start',
+    gap: 6,
+    minWidth: 0,
+  },
+  dateLabel: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    fontWeight: '500',
+    letterSpacing: 1.2,
+    color: colors.textFaint,
+  },
+  dateField: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 9,
+    minWidth: 0,
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    backgroundColor: colors.glass2,
+  },
+  dateLead: { flexShrink: 0 },
+  dateInput: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  datePlaceholder: { color: colors.textFaint },
+  dateDone: {
+    alignSelf: 'flex-end',
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+  },
+  dateDoneText: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.accent,
+  },
+  /* ---- TreeItem ---- */
+  treeItem: {},
+  treeRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingRight: 10,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  treeActive: {
+    backgroundColor: 'rgba(124,92,255,0.12)',
+    borderColor: 'rgba(124,92,255,0.4)',
+  },
+  treeGrip: {
+    flexShrink: 0,
+    fontSize: 13,
+    lineHeight: 13,
+    color: colors.textFaint,
+  },
+  treeChevron: {
+    flexShrink: 0,
+    width: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  treeChevronOpen: { transform: [{ rotate: '90deg' }] },
+  treeSpacer: { flexShrink: 0, width: 18, height: 18 },
+  treeIcon: {
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  treeLabel: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.ui,
+    fontSize: 13.5,
+    fontWeight: '600',
+    lineHeight: 16,
+    color: colors.text,
+  },
+  treeChildren: {
+    marginTop: 2,
+    marginBottom: 2,
+    marginLeft: 17,
+    paddingLeft: 12,
+    borderLeftWidth: 1,
+    borderLeftColor: colors.border2,
+    borderStyle: 'dashed',
+    gap: 2,
+  },
+});