@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/Checkbox.tsx

@@ -0,0 +1,175 @@
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+
+/* ── shared check glyph ─────────────────────────────────────────────── */
+function CheckGlyph() {
+  return (
+    <Svg width={12} height={12} viewBox="0 0 16 16">
+      <Path
+        d="M3.5 8.5l3 3 6-7"
+        fill="none"
+        stroke="#fff"
+        strokeWidth={2.4}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/* ── Checkbox ───────────────────────────────────────────────────────── */
+export interface CheckboxProps {
+  /** controlled checked state */
+  checked?: boolean;
+  /** show a dash instead of a tick (mixed selection) */
+  indeterminate?: boolean;
+  /** fires with the next checked value */
+  onChange?: (checked: boolean) => void;
+  /** text beside the box */
+  label?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Custom checkbox — accent-filled box with a tick (or dash when indeterminate). */
+export function Checkbox({
+  checked = false,
+  indeterminate = false,
+  onChange,
+  label,
+  disabled = false,
+  style,
+}: CheckboxProps) {
+  const filled = checked || indeterminate;
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      disabled={disabled}
+      onPress={() => onChange?.(!checked)}
+      style={[styles.row, disabled && styles.disabled, style]}
+    >
+      <View style={[styles.box, filled && styles.boxFilled]}>
+        {indeterminate ? <View style={styles.dash} /> : checked ? <CheckGlyph /> : null}
+      </View>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </Pressable>
+  );
+}
+
+/* ── Radio ──────────────────────────────────────────────────────────── */
+export interface RadioProps {
+  /** controlled selected state */
+  checked?: boolean;
+  /** fires with the next checked value */
+  onChange?: (checked: boolean) => void;
+  /** text beside the dot */
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Custom radio — accent dot fills the ring when selected. */
+export function Radio({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  style,
+}: RadioProps) {
+  return (
+    <Pressable
+      accessibilityRole="radio"
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      onPress={() => onChange?.(!checked)}
+      style={[styles.row, disabled && styles.disabled, style]}
+    >
+      <View style={[styles.ring, checked && styles.ringChecked]}>
+        {checked ? <View style={styles.dot} /> : null}
+      </View>
+      {label ? <Text style={styles.label}>{label}</Text> : null}
+    </Pressable>
+  );
+}
+
+/* ── RadioGroup ─────────────────────────────────────────────────────── */
+export interface RadioOption {
+  value: string;
+  label: string;
+}
+
+export interface RadioGroupProps {
+  options?: RadioOption[];
+  /** currently selected value */
+  value?: string;
+  /** fires with the chosen option value */
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** A vertical column of mutually-exclusive radios. */
+export function RadioGroup({
+  options = [],
+  value,
+  onChange,
+  disabled = false,
+  style,
+}: RadioGroupProps) {
+  return (
+    <View accessibilityRole="radiogroup" style={[styles.group, style]}>
+      {options.map((opt) => (
+        <Radio
+          key={opt.value}
+          value={opt.value}
+          label={opt.label}
+          checked={value === opt.value}
+          disabled={disabled}
+          onChange={(c) => {
+            if (c) onChange?.(opt.value);
+          }}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 9 },
+  disabled: { opacity: 0.5 },
+  label: { fontFamily: fonts.ui, fontSize: 13.5, color: colors.text, lineHeight: 18 },
+
+  // checkbox
+  box: {
+    width: 18,
+    height: 18,
+    borderRadius: 5,
+    borderWidth: 1.5,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  boxFilled: { backgroundColor: colors.accent, borderColor: 'transparent' },
+  dash: { width: 9, height: 2, borderRadius: 1, backgroundColor: '#fff' },
+
+  // radio
+  ring: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 1.5,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ringChecked: { borderColor: colors.accent },
+  dot: { width: 9, height: 9, borderRadius: 4.5, backgroundColor: colors.accent },
+
+  // group
+  group: { flexDirection: 'column', gap: 10 },
+});

package/src/components/Chip.tsx

@@ -0,0 +1,132 @@
+import { View, Text, StyleSheet, type ViewProps } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients } from '@lockin90/tokens';
+
+export type ChipTone = 'default' | 'neutral' | 'high' | 'mid' | 'low' | 'accent' | 'pr';
+/** `md` (default) is the standard status pill; `sm` is the compact count/status
+ *  badge — tighter box, 10px tabular mono, filled-gradient accent. With `dot`,
+ *  `sm` collapses to a bare glowing circle. */
+export type ChipSize = 'sm' | 'md';
+
+export interface ChipProps extends ViewProps {
+  tone?: ChipTone;
+  /** leading glowing dot in the current color */
+  dot?: boolean;
+  /** `md` (default) status pill · `sm` compact count/status badge (see `ChipSize`). */
+  size?: ChipSize;
+  label: string;
+}
+
+const TONE: Record<ChipTone, { color: string; border: string; bg: string }> = {
+  default: { color: colors.textDim, border: colors.border, bg: colors.glass },
+  neutral: { color: colors.textFaint, border: colors.border2, bg: colors.glass2 },
+  high: { color: colors.zoneHigh, border: 'rgba(52,245,197,0.35)', bg: 'rgba(52,245,197,0.08)' },
+  mid: { color: colors.zoneMid, border: 'rgba(255,176,32,0.35)', bg: 'rgba(255,176,32,0.08)' },
+  low: { color: colors.zoneLow, border: 'rgba(255,77,109,0.35)', bg: 'rgba(255,77,109,0.08)' },
+  accent: { color: '#cbbcff', border: 'rgba(124,92,255,0.4)', bg: 'rgba(124,92,255,0.10)' },
+  // Dedicated PR red (design `.bd` — Finished's record pills) — NOT `low`'s
+  // zoneLow #FF4D6D (that's a spectrum/status color); a PR must scream a
+  // deliberately off-spectrum red, matching `PrBadge`'s `#FF4757`.
+  pr: { color: '#FF6B78', border: 'rgba(255,71,87,0.4)', bg: 'rgba(255,71,87,0.08)' },
+};
+
+/** `sm` tone overrides — the compact badge tweaks a few backgrounds vs the md
+ *  pill (high/mid/low read slightly stronger; neutral reads dim on glass-2).
+ *  The `accent` tone is handled specially (filled gradient). */
+const TONE_SM: Partial<Record<ChipTone, Partial<{ color: string; border: string; bg: string }>>> = {
+  neutral: { color: colors.textDim, border: colors.border, bg: colors.glass2 },
+  high: { bg: 'rgba(52,245,197,0.10)' },
+  mid: { bg: 'rgba(255,176,32,0.10)' },
+  low: { bg: 'rgba(255,77,109,0.10)' },
+};
+
+/** Color of the bare glowing circle for `sm` + `dot`. */
+const DOT_COLOR: Record<ChipTone, string> = {
+  default: colors.textDim,
+  neutral: colors.textFaint,
+  high: colors.zoneHigh,
+  mid: colors.zoneMid,
+  low: colors.zoneLow,
+  accent: colors.accent,
+  pr: '#FF4757',
+};
+
+/** Status pill — mono label, signal-colored tones. `size="sm"` is the compact badge. */
+export function Chip({ tone = 'default', dot, size = 'md', label, style, ...rest }: ChipProps) {
+  const t = TONE[tone];
+
+  // sm + dot → bare glowing circle, no text (the retired `Badge`'s dot mode)
+  if (size === 'sm' && dot) {
+    const dc = DOT_COLOR[tone];
+    return (
+      <View
+        style={[styles.smDot, { backgroundColor: dc, shadowColor: dc }, tone === 'neutral' && styles.smDotNoGlow, style]}
+        {...rest}
+      />
+    );
+  }
+
+  // sm accent → FILLED gradient count pill with dark text
+  if (size === 'sm' && tone === 'accent') {
+    return (
+      <View style={[styles.chip, styles.chipSm, styles.chipSmAccent, style]} {...rest}>
+        <LinearGradient
+          colors={[...gradients.cta.stops] as [string, string]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+        <Text style={[styles.label, styles.labelSm, styles.labelSmAccent]}>{label}</Text>
+      </View>
+    );
+  }
+
+  const sm = size === 'sm';
+  const o = sm ? TONE_SM[tone] : undefined;
+  const color = o?.color ?? t.color;
+  const border = o?.border ?? t.border;
+  const bg = o?.bg ?? t.bg;
+
+  return (
+    <View style={[styles.chip, sm && styles.chipSm, { borderColor: border, backgroundColor: bg }, style]} {...rest}>
+      {dot && <View style={[styles.dot, { backgroundColor: color, shadowColor: color }]} />}
+      <Text style={[styles.label, sm && styles.labelSm, { color }]}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    paddingVertical: 5,
+    paddingHorizontal: 11,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+  },
+  chipSm: {
+    gap: 4,
+    justifyContent: 'center',
+    minWidth: 16,
+    minHeight: 16,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+  },
+  chipSmAccent: { borderColor: 'transparent', overflow: 'hidden' },
+  dot: { width: 6, height: 6, borderRadius: 3, shadowOpacity: 0.9, shadowRadius: 6 },
+  smDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+    shadowOpacity: 0.9,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 0 },
+  },
+  smDotNoGlow: { shadowOpacity: 0 },
+  label: { fontFamily: fonts.mono, fontSize: 11, fontWeight: '500', letterSpacing: 0.4 },
+  labelSm: { fontSize: 10, fontWeight: '600', letterSpacing: 0, lineHeight: 10, fontVariant: ['tabular-nums'] },
+  labelSmAccent: { color: '#0A0A12' },
+});

package/src/components/ChoiceChip.tsx

@@ -0,0 +1,119 @@
+import { type ReactNode } from 'react';
+import { Pressable, Text, View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export type ChoiceChipSize = 'sm' | 'md';
+
+export interface ChoiceChipProps {
+  /** Selected (`.on`) state — accent border + tint + brighter text. */
+  selected?: boolean;
+  /** Pill size. */
+  size?: ChoiceChipSize;
+  /** Leading glow dot (ignored when `icon` is set). */
+  leadingDot?: boolean;
+  /** Leading glyph (overrides `leadingDot`). */
+  icon?: ReactNode;
+  /** Stacked grid-cell layout — icon ABOVE a small centred label, rounded-rect,
+   *  fills its flex cell (vs the default inline pill). For quick-action grids. */
+  stacked?: boolean;
+  /** Disable the pill. */
+  disabled?: boolean;
+  /** Fired on press. */
+  onPress?: () => void;
+  /** Label. */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ChoiceChip — a pressable, selectable filter pill (multi-select). The native
+ * twin of the web `ChoiceChip`: a `Pressable` pill whose `selected` state tints
+ * to the accent token. Distinct from the display-only `Chip` and the
+ * single-select `SegmentedTabs`.
+ */
+export function ChoiceChip({
+  selected = false,
+  size = 'md',
+  leadingDot,
+  icon,
+  stacked = false,
+  disabled = false,
+  onPress,
+  children,
+  style,
+}: ChoiceChipProps) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled }}
+      style={({ pressed }) => [
+        styles.chip,
+        size === 'sm' && styles.chipSm,
+        stacked && styles.chipStacked,
+        selected ? styles.chipOn : styles.chipOff,
+        pressed && !disabled && styles.chipPressed,
+        disabled && styles.chipDisabled,
+        style,
+      ]}
+    >
+      {icon != null ? (
+        <View style={styles.icon}>{icon}</View>
+      ) : leadingDot ? (
+        <View style={[styles.dot, selected ? styles.dotOn : styles.dotOff]} />
+      ) : null}
+      <Text
+        style={[
+          styles.label,
+          size === 'sm' && styles.labelSm,
+          stacked && styles.labelStacked,
+          selected ? styles.labelOn : styles.labelOff,
+        ]}
+        numberOfLines={1}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+    paddingVertical: 7,
+    paddingHorizontal: 13,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+  },
+  chipSm: { paddingVertical: 5, paddingHorizontal: 10 },
+  // stacked grid cell — icon over label, rounded rect, fills the flex column.
+  // alignItems:'center' overrides the base row alignment so the icon+label centre
+  // horizontally; extra vertical padding keeps the top icon off the rounded edge.
+  chipStacked: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 13,
+    paddingHorizontal: 4,
+    borderRadius: radii.md,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+  },
+  chipOff: { borderColor: colors.border, backgroundColor: colors.glass },
+  chipOn: { borderColor: 'rgba(124,92,255,0.5)', backgroundColor: 'rgba(124,92,255,0.12)' },
+  chipPressed: { opacity: 0.85 },
+  chipDisabled: { opacity: 0.5 },
+  icon: { alignItems: 'center', justifyContent: 'center' },
+  dot: { width: 6, height: 6, borderRadius: 3, shadowOpacity: 0.9, shadowRadius: 6 },
+  dotOff: { backgroundColor: colors.textDim, shadowColor: colors.textDim },
+  dotOn: { backgroundColor: colors.accent, shadowColor: colors.accent },
+  label: { fontFamily: fonts.ui, fontSize: 13, lineHeight: 16 },
+  labelSm: { fontSize: 12 },
+  labelStacked: { fontFamily: fonts.mono, fontSize: 10, lineHeight: 13, letterSpacing: 0.3, textAlign: 'center' },
+  labelOff: { color: colors.textDim },
+  labelOn: { color: colors.text },
+});

package/src/components/CodeBlock.tsx

@@ -0,0 +1,106 @@
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { CopyButton } from './Popover';
+
+export interface CodeBlockProps {
+  /** The raw code / JSON / identifier shown in the block. */
+  code: string;
+  /** Optional header title, e.g. 'Response' / 'Incident ID' / a filename. */
+  label?: string;
+  /** Render a CopyButton (value=code) in the header. Default true. */
+  copyable?: boolean;
+  /** Wrap long lines instead of horizontal scrolling. Default false. */
+  wrap?: boolean;
+  /** Cap the scroll area height (px); content scrolls vertically past it. */
+  maxHeight?: number;
+}
+
+/** Monospace code / JSON block on a dark inset surface. Optional header
+ *  (label + traffic-light dots + copy) over a horizontally scrolling mono body
+ *  (or wrapped), optionally height-capped with vertical scroll. Mirrors the web
+ *  `CodeBlock` prop API. Used for raw-record/JSON viewers, incident IDs, keys. */
+export function CodeBlock({ code, label, copyable = true, wrap = false, maxHeight }: CodeBlockProps) {
+  const hasHeader = label != null || copyable;
+
+  const body = wrap ? (
+    <View style={styles.body}>
+      <Text style={styles.code}>{code}</Text>
+    </View>
+  ) : (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.body}
+    >
+      <Text style={styles.code}>{code}</Text>
+    </ScrollView>
+  );
+
+  return (
+    <View style={styles.root}>
+      {hasHeader && (
+        <View style={styles.head}>
+          <View style={styles.dots} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            <View style={[styles.dot, { backgroundColor: colors.zoneLow }]} />
+            <View style={[styles.dot, { backgroundColor: colors.zoneMid }]} />
+            <View style={[styles.dot, { backgroundColor: colors.mint }]} />
+          </View>
+          {label != null && (
+            <Text style={styles.label} numberOfLines={1}>
+              {label}
+            </Text>
+          )}
+          {copyable && (
+            <View style={styles.copy}>
+              <CopyButton value={code} />
+            </View>
+          )}
+        </View>
+      )}
+      {maxHeight != null ? (
+        <ScrollView style={{ maxHeight }} showsVerticalScrollIndicator={false}>
+          {body}
+        </ScrollView>
+      ) : (
+        body
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.bg0,
+    overflow: 'hidden',
+  },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  dots: { flexDirection: 'row', gap: 5 },
+  dot: { width: 9, height: 9, borderRadius: 999 },
+  label: {
+    flex: 1,
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    letterSpacing: 0.4,
+    color: colors.textFaint,
+  },
+  copy: { marginLeft: 'auto' },
+  body: { paddingHorizontal: 16, paddingVertical: 14 },
+  code: {
+    fontFamily: fonts.mono,
+    fontSize: 11.5,
+    lineHeight: 20,
+    color: colors.textDim,
+  },
+});

package/src/components/CodeField.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  type TextInputProps,
+} from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export interface CodeFieldProps
+  extends Omit<TextInputProps, 'value' | 'onChange' | 'onChangeText'> {
+  /** Current code / embed string. */
+  value: string;
+  /** Fired with the next string on every edit. */
+  onChange: (value: string) => void;
+  /** Optional language label rendered as a chip in the header (e.g. 'html', 'json'). */
+  language?: string;
+  /** Placeholder shown when empty. */
+  placeholder?: string;
+  /** Visible rows of the input. Default 8. */
+  rows?: number;
+  /** Invalid state — red border. */
+  invalid?: boolean;
+  /** Wrap long lines. On native the multiline input always wraps; kept for prop parity. */
+  wrap?: boolean;
+}
+
+/** Editable multiline monospace code / embed input on the same dark inset
+ *  surface as `CodeBlock`. Mirrors the web `CodeField` prop API. Tab-to-insert
+ *  is web-only (no soft-keyboard Tab on native); otherwise identical. */
+export function CodeField({
+  value,
+  onChange,
+  language,
+  placeholder,
+  rows = 8,
+  invalid = false,
+  // `wrap` is destructured (not forwarded to TextInput) for prop parity with
+  // web; native multiline always wraps, so it has no runtime effect here.
+  wrap: _wrap = false,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}: CodeFieldProps) {
+  const [focused, setFocused] = useState(false);
+  const hasHeader = language != null;
+
+  const borderColor = invalid
+    ? colors.zoneLow
+    : focused
+      ? colors.accent
+      : colors.border;
+
+  return (
+    <View style={[styles.root, { borderColor }]}>
+      {hasHeader && (
+        <View style={styles.head}>
+          <View
+            style={styles.dots}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            <View style={[styles.dot, { backgroundColor: colors.zoneLow }]} />
+            <View style={[styles.dot, { backgroundColor: colors.zoneMid }]} />
+            <View style={[styles.dot, { backgroundColor: colors.mint }]} />
+          </View>
+          {language != null && (
+            <Text style={styles.lang} numberOfLines={1}>
+              {language}
+            </Text>
+          )}
+        </View>
+      )}
+      <TextInput
+        multiline
+        textAlignVertical="top"
+        numberOfLines={rows}
+        value={value}
+        onChangeText={onChange}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textFaint}
+        autoCapitalize="none"
+        autoCorrect={false}
+        spellCheck={false}
+        style={[styles.ta, { minHeight: rows * 20 + 28 }, style]}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        {...rest}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.bg0,
+    overflow: 'hidden',
+  },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  dots: { flexDirection: 'row', gap: 5 },
+  dot: { width: 9, height: 9, borderRadius: 999 },
+  lang: {
+    marginLeft: 'auto',
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    letterSpacing: 0.4,
+    color: colors.textFaint,
+  },
+  ta: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontFamily: fonts.mono,
+    fontSize: 11.5,
+    lineHeight: 20,
+    color: colors.textDim,
+  },
+});