@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/ListRow.tsx

@@ -0,0 +1,153 @@
+import { type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewProps } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { hapticSelection } from "../internal/optionalHaptics";
+
+export interface ListRowProps extends ViewProps {
+  /** Leading slot — an icon, avatar, badge, or letter chip. */
+  leading?: ReactNode;
+  /** Primary line. */
+  title: ReactNode;
+  /** Optional dimmer second line under the title. */
+  subtitle?: ReactNode;
+  /** Trailing slot — a chevron, value, or icon (pinned to the right). */
+  trailing?: ReactNode;
+  /**
+   * When set, the row becomes a `Pressable` (mirrors the web's `onClick`).
+   * Native uses `onPress`; the web uses `onClick` — otherwise the same API.
+   */
+  onPress?: () => void;
+  /** Accent-tinted selected state (used in pickers). */
+  active?: boolean;
+  /** Overrides the ACTIVE-state background — a translucent color string
+   *  (e.g. the change-exercise cyan `'rgba(34,211,238,0.09)'`, design
+   *  `.exl.on`). Default keeps the accent tint. */
+  activeTint?: string;
+  /** Danger tone — tints the title `--zone-low`. */
+  danger?: boolean;
+  /**
+   * Draw a hairline top border (separates adjacent rows). Defaults to `true`;
+   * set `divider={false}` on the FIRST row of a stack so it has no top border.
+   * (Web draws this between rows via `.lk-listrow + .lk-listrow`; native has no
+   * sibling selectors, so the divider is opt-out per row instead.)
+   */
+  divider?: boolean;
+}
+
+/** Title/subtitle helpers: render strings as <Text>, pass nodes through. */
+function asText(node: ReactNode, textStyle: object): ReactNode {
+  return typeof node === 'string' || typeof node === 'number' ? (
+    <Text style={textStyle} numberOfLines={1}>
+      {node}
+    </Text>
+  ) : (
+    node
+  );
+}
+
+/** Generic tappable list item — leading + title/subtitle + trailing. Mirrors
+ *  the web `@lockin90/ui` `ListRow`. With `onPress` it renders a `Pressable`
+ *  that highlights while pressed; otherwise a static `View`. */
+export function ListRow({
+  leading,
+  title,
+  subtitle,
+  trailing,
+  onPress,
+  active,
+  activeTint,
+  danger,
+  divider = true,
+  style,
+  ...rest
+}: ListRowProps) {
+  const titleStyle = [styles.title, danger && styles.titleDanger];
+
+  const body = (
+    <>
+      {leading != null && <View style={styles.leading}>{leading}</View>}
+      <View style={styles.main}>
+        {asText(title, titleStyle)}
+        {subtitle != null && asText(subtitle, styles.subtitle)}
+      </View>
+      {trailing != null && <View style={styles.trailing}>{trailing}</View>}
+    </>
+  );
+
+  const rowStyle = [
+    styles.row,
+    divider && styles.divider,
+    active && (activeTint != null ? { backgroundColor: activeTint } : styles.active),
+    style,
+  ];
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress ? () => { hapticSelection(); onPress(); } : undefined}
+        style={({ pressed }) => [...rowStyle, pressed && styles.pressed]}
+        {...rest}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={rowStyle} {...rest}>
+      {body}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    // minHeight keeps single-line and subtitle rows the SAME height (content is
+    // centered) so a mixed list doesn't look ragged; padding fits within it.
+    minHeight: 60,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    borderRadius: radii.sm,
+  },
+  divider: {
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  pressed: {
+    backgroundColor: colors.glass,
+  },
+  active: {
+    // accent tint ~12% — RN has no color-mix; use a translucent accent fill.
+    backgroundColor: 'rgba(124,92,255,0.14)',
+  },
+  leading: {
+    flexShrink: 0,
+  },
+  main: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    fontFamily: fonts.ui,
+    fontSize: 14.5,
+    lineHeight: 18,
+    color: colors.text,
+  },
+  titleDanger: {
+    color: colors.zoneLow,
+  },
+  subtitle: {
+    marginTop: 1,
+    fontFamily: fonts.ui,
+    fontSize: 12.5,
+    lineHeight: 16,
+    color: colors.textDim,
+  },
+  trailing: {
+    flexShrink: 0,
+    marginLeft: 'auto',
+  },
+});

package/src/components/Menu.tsx

@@ -0,0 +1,156 @@
+import { useRef, useState, type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet, Modal, Dimensions } from 'react-native';
+import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+/** A single row in a {@link Menu}. A `divider` row renders a hairline
+ *  separator instead of an action (its `label` is ignored). */
+export interface MenuItemData {
+  /** Visible row text. */
+  label: string;
+  /** Optional leading glyph (e.g. an `<Icon />`). */
+  icon?: ReactNode;
+  /** Fired on press; the menu closes afterwards. */
+  onClick?: () => void;
+  /** Render the row in the danger tone (`zoneLow`). */
+  danger?: boolean;
+  /** Render a 1px separator instead of an action row. */
+  divider?: boolean;
+}
+
+export interface MenuProps {
+  /** The pressable trigger. Defaults to a small ⋯ icon button. */
+  trigger?: ReactNode;
+  /** Action rows to render in the panel. */
+  items?: MenuItemData[];
+  /** Which edge of the trigger the panel aligns to. */
+  align?: 'left' | 'right';
+}
+
+const DEFAULT_ITEMS: MenuItemData[] = [
+  { label: 'Edit' },
+  { label: 'Duplicate' },
+  { divider: true, label: '' },
+  { label: 'Delete', danger: true },
+];
+
+interface Anchor {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const { width: SW, height: SH } = Dimensions.get('window');
+const EST_W = 160;
+const EST_H = 160;
+
+/** Popover menu of actions — a glass panel of item rows. The ⋯ trigger toggles
+ *  a transparent Modal whose full-screen backdrop closes on tap; the panel is
+ *  absolutely anchored to the measured trigger (flips above near the bottom). */
+export function Menu({ trigger, items = DEFAULT_ITEMS, align = 'right' }: MenuProps) {
+  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 openMenu = () => {
+    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 left = anchor.x + anchor.w - pw;
+    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) : openMenu())}
+      >
+        {trigger ?? <Icon name="more" size={18} 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 });
+            }}
+          >
+            {items.map((item, i) =>
+              item.divider ? (
+                <View key={i} style={styles.divider} />
+              ) : (
+                <Pressable
+                  key={i}
+                  accessibilityRole="menuitem"
+                  style={({ pressed }) => [styles.item, pressed && styles.itemPressed]}
+                  onPress={() => {
+                    item.onClick?.();
+                    setOpen(false);
+                  }}
+                >
+                  {item.icon != null && <View style={styles.icon}>{item.icon}</View>}
+                  <Text style={[styles.label, item.danger && styles.danger]} numberOfLines={1}>
+                    {item.label}
+                  </Text>
+                </Pressable>
+              ),
+            )}
+          </View>
+        )}
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { alignSelf: 'flex-start' },
+  trigger: {
+    minWidth: 30,
+    height: 30,
+    paddingHorizontal: 6,
+    borderRadius: radii.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  backdrop: { ...StyleSheet.absoluteFillObject },
+  panel: {
+    position: 'absolute',
+    minWidth: 160,
+    padding: 5,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    backgroundColor: colors.bg1,
+    ...nativeShadows.elev2,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: radii.sm,
+  },
+  itemPressed: { backgroundColor: colors.glass2 },
+  icon: { flexShrink: 0 },
+  label: { flex: 1, fontFamily: fonts.ui, fontSize: 13.5, color: colors.textDim },
+  danger: { color: colors.zoneLow },
+  divider: { height: 1, marginVertical: 5, marginHorizontal: 6, backgroundColor: colors.border },
+});

package/src/components/MessageBubble.tsx

@@ -0,0 +1,118 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export type MessageBubbleVariant = 'incoming' | 'outgoing';
+export type MessageBubbleStatus = 'sent' | 'delivered' | 'read';
+
+export interface MessageBubbleProps {
+  /** `incoming` = glass, left-aligned; `outgoing` = accent, right-aligned. */
+  variant: MessageBubbleVariant;
+  /** Message body — string or wrapped nodes. */
+  children: ReactNode;
+  /** Small line under the bubble, e.g. "Sofia · 8:02am". */
+  meta?: string;
+  /** Outgoing only — tiny trailing delivery glyph. */
+  status?: MessageBubbleStatus;
+  style?: StyleProp<ViewStyle>;
+}
+
+const STATUS_COLOR: Record<MessageBubbleStatus, string> = {
+  sent: colors.textFaint,
+  delivered: colors.textDim,
+  read: colors.accent2,
+};
+
+/** Plain-text check glyph — unicode ✓ / ✓✓ to match the web's inline checks. */
+function StatusGlyph({ status }: { status: MessageBubbleStatus }) {
+  return (
+    <Text style={[styles.check, { color: STATUS_COLOR[status] }]}>
+      {status === 'sent' ? '✓' : '✓✓'}
+    </Text>
+  );
+}
+
+/** Chat message bubble — `incoming` (glass, left) / `outgoing` (accent, right),
+ *  with an optional `meta` line and an outgoing-only delivery `status` glyph.
+ *  Mirrors the web `@lockin90/ui` `MessageBubble`. */
+export function MessageBubble({ variant, children, meta, status, style }: MessageBubbleProps) {
+  const outgoing = variant === 'outgoing';
+  const showStatus = outgoing && status != null;
+
+  return (
+    <View style={[styles.msg, outgoing ? styles.msgOut : styles.msgIn, style]}>
+      <View style={[styles.bubble, outgoing ? styles.bubbleOut : styles.bubbleIn]}>
+        {typeof children === 'string' || typeof children === 'number' ? (
+          <Text style={[styles.body, outgoing ? styles.bodyOut : styles.bodyIn]}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+      {(meta != null || showStatus) && (
+        <View style={styles.meta}>
+          {showStatus && <StatusGlyph status={status!} />}
+          {meta != null && <Text style={styles.metaText}>{meta}</Text>}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  msg: {
+    maxWidth: '82%',
+    gap: 4,
+  },
+  msgIn: {
+    alignSelf: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  msgOut: {
+    alignSelf: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  bubble: {
+    paddingVertical: 11,
+    paddingHorizontal: 14,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  bubbleIn: {
+    backgroundColor: colors.glass2,
+    borderColor: colors.border2,
+    borderBottomLeftRadius: radii.sm,
+  },
+  bubbleOut: {
+    backgroundColor: 'rgba(124,92,255,0.16)',
+    borderColor: 'rgba(124,92,255,0.34)',
+    borderBottomRightRadius: radii.sm,
+  },
+  body: {
+    fontFamily: fonts.ui,
+    fontSize: 13.5,
+    lineHeight: 20,
+  },
+  bodyIn: {
+    color: colors.text,
+  },
+  bodyOut: {
+    color: '#ece8ff',
+  },
+  meta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  metaText: {
+    fontFamily: fonts.ui,
+    fontSize: 10.5,
+    lineHeight: 13,
+    color: colors.textDim,
+  },
+  check: {
+    fontSize: 10.5,
+    lineHeight: 13,
+    fontWeight: '700',
+  },
+});

package/src/components/MessageComposer.tsx

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients, nativeShadows } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+export interface MessageComposerProps {
+  /** called with the trimmed, non-empty text; the field clears afterwards */
+  onSend: (text: string) => void;
+  /** placeholder shown in the empty field */
+  placeholder?: string;
+  /** show a leading lock glyph marking the thread end-to-end encrypted */
+  e2ee?: boolean;
+  /** disable the whole bar (input + buttons) */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * MessageComposer — the DM/chat input bar: a glassy pill containing an
+ * optional E2EE lock, an attach button, a growing multiline text field, an
+ * emoji button and an accent-filled send button. Mirrors `.composer` from the
+ * coach/chat design. Pressing send fires `onSend` then clears.
+ */
+export function MessageComposer({
+  onSend,
+  placeholder = 'Message…',
+  e2ee = false,
+  disabled = false,
+  style,
+}: MessageComposerProps) {
+  const [value, setValue] = useState('');
+  const canSend = !disabled && value.trim().length > 0;
+
+  function send() {
+    const text = value.trim();
+    if (disabled || text.length === 0) return;
+    onSend(text);
+    setValue('');
+  }
+
+  return (
+    <View style={[styles.bar, disabled && styles.barDisabled, style]}>
+      {e2ee ? (
+        <View style={styles.lock} accessibilityLabel="End-to-end encrypted">
+          <Icon name="lock" size={16} color={colors.zoneHigh} />
+        </View>
+      ) : null}
+
+      <Pressable
+        style={({ pressed }) => [styles.btn, pressed && !disabled && styles.btnPressed]}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel="Attach"
+      >
+        <Icon name="plus" size={18} color={colors.textDim} />
+      </Pressable>
+
+      <View style={styles.inputWrap}>
+        <TextInput
+          style={styles.input}
+          value={value}
+          onChangeText={setValue}
+          editable={!disabled}
+          multiline
+          accessibilityLabel="Message text"
+        />
+        {value.length === 0 ? (
+          <View style={styles.placeholderWrap} pointerEvents="none">
+            <Text style={styles.placeholderText} numberOfLines={1}>
+              {placeholder}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+
+      <Pressable
+        style={({ pressed }) => [styles.btn, pressed && !disabled && styles.btnPressed]}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel="Emoji"
+      >
+        <Icon name="sparkle" size={18} color={colors.textDim} />
+      </Pressable>
+
+      <Pressable
+        onPress={send}
+        disabled={!canSend}
+        accessibilityRole="button"
+        accessibilityLabel="Send message"
+      >
+        {({ pressed }) => (
+          <LinearGradient
+            colors={gradients.cta.stops as unknown as [string, string]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={[styles.send, !canSend && styles.sendDisabled, pressed && canSend && styles.sendPressed]}
+          >
+            <Icon name="share" size={18} color="#0A0A12" />
+          </LinearGradient>
+        )}
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 10,
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    borderRadius: radii.lg,
+    backgroundColor: colors.glass2,
+    borderWidth: 1,
+    borderColor: colors.border2,
+  },
+  barDisabled: { opacity: 0.8 },
+  lock: {
+    flexShrink: 0,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 16,
+    height: 16,
+  },
+  btn: {
+    flexShrink: 0,
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.glass,
+  },
+  btnPressed: { opacity: 0.7, borderColor: colors.border2 },
+  inputWrap: {
+    flex: 1,
+    minWidth: 0,
+    alignSelf: 'center',
+    position: 'relative',
+    justifyContent: 'center',
+  },
+  input: {
+    width: '100%',
+    minWidth: 0,
+    // match the send button's height at rest; grow only on multiline
+    minHeight: 42,
+    maxHeight: 120,
+    backgroundColor: colors.glass,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: radii.pill,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    // center single-line text so the field isn't taller than the buttons
+    textAlignVertical: 'center',
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontSize: 13.5,
+    lineHeight: 18,
+  },
+  // single-line, truncating placeholder overlay — the multiline TextInput's own
+  // placeholder wraps a long string (e.g. "Encrypted message…") onto 2 lines, making
+  // the pill taller than the buttons. Overlaying our own numberOfLines={1} text keeps
+  // the resting field exactly one line high; it's hidden the moment the user types.
+  placeholderWrap: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+  },
+  placeholderText: {
+    color: colors.textFaint,
+    fontFamily: fonts.ui,
+    fontSize: 13.5,
+  },
+  send: {
+    flexShrink: 0,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...nativeShadows.glowAccent,
+  },
+  sendDisabled: { opacity: 0.4 },
+  sendPressed: { transform: [{ translateY: -2 }] },
+});