@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/FocalPointPicker.tsx

@@ -0,0 +1,193 @@
+import { useRef, useState } from 'react';
+import {
+  View,
+  Image,
+  StyleSheet,
+  PanResponder,
+  type LayoutChangeEvent,
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { colors, radii } from '@lockin90/tokens';
+
+/** A normalized focal point — `x`/`y` each in the `0..1` range (top-left origin). */
+export interface FocalPoint {
+  x: number;
+  y: number;
+}
+
+export interface FocalPointPickerProps {
+  /** Image URL shown beneath the focal marker. */
+  src: string;
+  /** Current focal point — `x`/`y` each clamped to `0..1` (top-left origin). */
+  value: FocalPoint;
+  /** Fired with the next focal point on tap / drag. */
+  onChange: (point: FocalPoint) => void;
+  /** Frame aspect ratio (width / height). @default 1.6 */
+  aspect?: number;
+  /** Render the rule-of-thirds overlay (2 vertical + 2 horizontal lines). @default true */
+  showGrid?: boolean;
+  /** Accessibility label for the image. */
+  alt?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n);
+
+/**
+ * FocalPointPicker — pick the "keep in frame" point of an image. Mirrors the web
+ * `@lockin90/ui` FocalPointPicker export + prop API. Tap or drag anywhere on the
+ * framed image to move the focal marker; the position is reported as normalized
+ * `{ x, y }` coordinates (each `0..1`, top-left origin). A rule-of-thirds overlay
+ * aids composition. A `PanResponder` drives the same tap-and-drag interaction as
+ * the web pointer twin (press to set, drag to refine).
+ */
+export function FocalPointPicker({
+  src,
+  value,
+  onChange,
+  aspect = 1.6,
+  showGrid = true,
+  alt,
+  style,
+}: FocalPointPickerProps) {
+  const sizeRef = useRef({ width: 0, height: 0 });
+  const [dragging, setDragging] = useState(false);
+  // latest onChange, read by the (stable) PanResponder so it never goes stale
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const x = clamp01(value?.x ?? 0.5);
+  const y = clamp01(value?.y ?? 0.5);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    sizeRef.current = { width, height };
+  };
+
+  // emit a normalized focal point from a touch's position within the frame. Reads
+  // `sizeRef`/`onChangeRef` (stable refs) so the once-created responder stays fresh.
+  const emit = (e: GestureResponderEvent) => {
+    const { width, height } = sizeRef.current;
+    if (width === 0 || height === 0) return;
+    const { locationX, locationY } = e.nativeEvent;
+    onChangeRef.current({
+      x: clamp01(locationX / width),
+      y: clamp01(locationY / height),
+    });
+  };
+
+  const responder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => {
+        setDragging(true);
+        emit(e);
+      },
+      onPanResponderMove: (e) => emit(e),
+      onPanResponderRelease: () => setDragging(false),
+      onPanResponderTerminate: () => setDragging(false),
+      onPanResponderTerminationRequest: () => true,
+    }),
+  ).current;
+
+  return (
+    <View
+      onLayout={onLayout}
+      accessibilityRole="adjustable"
+      accessibilityLabel={alt}
+      style={[styles.frame, { aspectRatio: aspect }, style]}
+      {...responder.panHandlers}
+    >
+      <Image
+        source={{ uri: src }}
+        style={styles.img}
+        resizeMode="cover"
+        accessibilityLabel={alt}
+      />
+
+      {showGrid ? (
+        <View style={styles.grid} pointerEvents="none">
+          <View style={[styles.vLine, { left: '33.333%' }]} />
+          <View style={[styles.vLine, { left: '66.666%' }]} />
+          <View style={[styles.hLine, { top: '33.333%' }]} />
+          <View style={[styles.hLine, { top: '66.666%' }]} />
+        </View>
+      ) : null}
+
+      <View
+        pointerEvents="none"
+        style={[
+          styles.marker,
+          { left: `${x * 100}%`, top: `${y * 100}%` },
+        ]}
+      >
+        <View style={[styles.ring, dragging && styles.ringActive]} />
+        <View style={styles.dot} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    borderRadius: radii.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.bg1,
+  },
+  img: { width: '100%', height: '100%' },
+  grid: { ...StyleSheet.absoluteFillObject },
+  vLine: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: 1,
+    marginLeft: -0.5,
+    backgroundColor: colors.border2,
+  },
+  hLine: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 1,
+    marginTop: -0.5,
+    backgroundColor: colors.border2,
+  },
+  marker: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ring: {
+    position: 'absolute',
+    width: 30,
+    height: 30,
+    marginLeft: -15,
+    marginTop: -15,
+    borderRadius: radii.pill,
+    borderWidth: 2,
+    borderColor: colors.accent,
+    backgroundColor: 'rgba(124,92,255,0.12)',
+  },
+  // a touch of feedback while dragging (the web twin shows a grabbing cursor)
+  ringActive: {
+    backgroundColor: 'rgba(124,92,255,0.22)',
+  },
+  dot: {
+    position: 'absolute',
+    width: 6,
+    height: 6,
+    marginLeft: -3,
+    marginTop: -3,
+    borderRadius: radii.pill,
+    backgroundColor: '#fff',
+  },
+});

package/src/components/FollowButton.tsx

@@ -0,0 +1,78 @@
+import { Pressable, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Icon } from './Icon';
+
+export interface FollowButtonProps {
+  /** Controlled follow state. */
+  following: boolean;
+  /** Fired when the pill is pressed — flip `following` in the parent. */
+  onToggle: () => void;
+  size?: 'sm' | 'md';
+  /** Label shown when not following. @default 'Follow' */
+  followLabel?: string;
+  /** Label shown when following. @default 'Following' */
+  followingLabel?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Pill follow toggle — native twin of the web `FollowButton`. Not-following =
+ * accent-filled "＋ Follow"; following = glass/outlined "✓ Following" (dim).
+ * Controlled via `following` + `onToggle`.
+ */
+export function FollowButton({
+  following,
+  onToggle,
+  size = 'md',
+  followLabel = 'Follow',
+  followingLabel = 'Following',
+  disabled,
+  style,
+}: FollowButtonProps) {
+  const glyph = size === 'sm' ? 12 : 13;
+  const pad = size === 'sm' ? styles.padSm : styles.padMd;
+  const labelSize = size === 'sm' ? 12 : 12.5;
+
+  const tone = following
+    ? { color: colors.textDim, border: colors.border, bg: colors.glass }
+    : { color: '#cbbcff', border: 'rgba(124,92,255,0.45)', bg: 'rgba(124,92,255,0.10)' };
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: following, disabled }}
+      disabled={disabled}
+      onPress={onToggle}
+      style={({ pressed }) => [
+        styles.base,
+        pad,
+        { borderColor: tone.border, backgroundColor: tone.bg },
+        pressed && !disabled && styles.pressed,
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      <Icon name={following ? 'check' : 'plus'} size={glyph} color={tone.color} />
+      <Text style={[styles.label, { fontSize: labelSize, color: tone.color }]}>
+        {following ? followingLabel : followLabel}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+  },
+  padMd: { paddingVertical: 7, paddingHorizontal: 15 },
+  padSm: { paddingVertical: 6, paddingHorizontal: 13 },
+  pressed: { opacity: 0.85, transform: [{ scale: 0.98 }] },
+  disabled: { opacity: 0.5 },
+  label: { fontFamily: fonts.ui, fontWeight: '600' },
+});

package/src/components/ForecastCallout.tsx

@@ -0,0 +1,100 @@
+import { type ReactNode } from 'react';
+import { View, Text, StyleSheet, type ViewProps } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Chip, type ChipTone } from './Chip';
+import { Icon, type IconName } from './Icon';
+
+export type ForecastCalloutTone = 'accent' | 'positive' | 'negative' | 'warn';
+
+export interface ForecastCalloutProps extends Omit<ViewProps, 'children'> {
+  /** small leading label chip, e.g. 'Forecast' / '31-day' */
+  chip?: string;
+  /** the forecast prose (projected peak / dip); emphasized spans allowed */
+  children: ReactNode;
+  /** tone — colors the leading chip + left accent bar (default 'accent') */
+  tone?: ForecastCalloutTone;
+  /** optional leading glyph */
+  icon?: IconName;
+}
+
+const TONE: Record<ForecastCalloutTone, { c: string; bg: string; border: string }> = {
+  accent: { c: colors.accent, bg: 'rgba(124,92,255,0.08)', border: 'rgba(124,92,255,0.3)' },
+  positive: { c: colors.mint, bg: 'rgba(52,245,197,0.08)', border: 'rgba(52,245,197,0.3)' },
+  negative: { c: colors.zoneLow, bg: 'rgba(255,77,109,0.08)', border: 'rgba(255,77,109,0.3)' },
+  warn: { c: colors.zoneMid, bg: 'rgba(255,176,32,0.08)', border: 'rgba(255,176,32,0.3)' },
+};
+
+/** Map the callout tone to the matching Chip tone. */
+const CHIP_TONE: Record<ForecastCalloutTone, ChipTone> = {
+  accent: 'accent',
+  positive: 'high',
+  negative: 'low',
+  warn: 'mid',
+};
+
+/**
+ * Forecast callout — a tinted glass panel with a left accent bar in the tone
+ * color, a tone-colored leading Chip (+ optional icon), then the projected
+ * peak/dip prose. Mirrors the design `.callout` vocab. Compose Chip + Icon.
+ */
+export function ForecastCallout({
+  chip,
+  children,
+  tone = 'accent',
+  icon,
+  style,
+  ...rest
+}: ForecastCalloutProps) {
+  const t = TONE[tone];
+  return (
+    <View
+      style={[styles.fc, { backgroundColor: t.bg, borderColor: t.border }, style]}
+      {...rest}
+    >
+      <View style={[styles.bar, { backgroundColor: t.c }]} pointerEvents="none" />
+      {(chip || icon) && (
+        <View style={styles.top}>
+          {icon && <Icon name={icon} size={16} color={t.c} />}
+          {chip && <Chip tone={CHIP_TONE[tone]} dot label={chip} />}
+        </View>
+      )}
+      {typeof children === 'string' ? (
+        <Text style={styles.text}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fc: {
+    position: 'relative',
+    paddingTop: 12,
+    paddingRight: 13,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    overflow: 'hidden',
+    gap: 7,
+  },
+  bar: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 3,
+  },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 7,
+  },
+  text: {
+    fontFamily: fonts.ui,
+    fontSize: 13,
+    lineHeight: 19,
+    color: colors.textDim,
+  },
+});

package/src/components/FormField.tsx

@@ -0,0 +1,217 @@
+import { useState, type ReactNode } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  Pressable,
+  type TextInputProps,
+  type ViewProps,
+} from 'react-native';
+import Svg, { Circle, Line } from 'react-native-svg';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export interface FormFieldProps extends ViewProps {
+  /** small mono uppercase label rendered above the control */
+  label?: string;
+  /** faint helper text below the control (hidden when `error` is set) */
+  help?: ReactNode;
+  /** red error text below the control — replaces `help` when present */
+  error?: ReactNode;
+  /** appends a small accent `*` after the label */
+  required?: boolean;
+  /** the form control to wrap */
+  children?: ReactNode;
+}
+
+/** Labeled form-control wrapper — mono label, the control, then faint help or red error. */
+export function FormField({
+  label,
+  help,
+  error,
+  required = false,
+  children,
+  style,
+  ...rest
+}: FormFieldProps) {
+  return (
+    <View style={[styles.field, style]} {...rest}>
+      {label ? (
+        <Text style={styles.fieldLabel}>
+          {label.toUpperCase()}
+          {required ? <Text style={styles.req}> *</Text> : null}
+        </Text>
+      ) : null}
+      <View style={styles.control}>{children}</View>
+      {error ? (
+        <Text style={styles.errorText}>{error}</Text>
+      ) : help ? (
+        <Text style={styles.helpText}>{help}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export interface SearchInputProps extends Omit<TextInputProps, 'onChange' | 'value'> {
+  /** current query value (controlled) */
+  value?: string;
+  /** fires with the next string value on every keystroke and on clear */
+  onChange?: (value: string) => void;
+  /** placeholder copy (default 'Search…') */
+  placeholder?: string;
+  /** invoked by the trailing × clear button (in addition to `onChange('')`) */
+  onClear?: () => void;
+  /** shell shape — `'pill'` (default, standalone search) or `'sm'` (the standard
+   *  Input radius, for menus/sheets where the search sits among other fields). */
+  shape?: 'pill' | 'sm';
+}
+
+/** Search field — leading magnifier, transparent input, trailing × clear when non-empty. */
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = 'Search…',
+  onClear,
+  shape = 'pill',
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}: SearchInputProps) {
+  const [focused, setFocused] = useState(false);
+  const hasValue = !!value && value.length > 0;
+
+  function clear() {
+    onChange?.('');
+    onClear?.();
+  }
+
+  return (
+    <View
+      style={[
+        styles.search,
+        shape === 'sm' && styles.searchSm,
+        { borderColor: focused ? colors.accent : colors.border2 },
+      ]}
+    >
+      <View style={styles.searchLead}>
+        <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+          <Circle cx={11} cy={11} r={7} stroke={colors.textFaint} strokeWidth={1.9} />
+          <Line
+            x1={16.5}
+            y1={16.5}
+            x2={21}
+            y2={21}
+            stroke={colors.textFaint}
+            strokeWidth={1.9}
+            strokeLinecap="round"
+          />
+        </Svg>
+      </View>
+      <TextInput
+        style={[styles.searchInput, style]}
+        value={value}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textFaint}
+        onChangeText={(t) => onChange?.(t)}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        {...rest}
+      />
+      {hasValue ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Clear search"
+          onPress={clear}
+          style={styles.searchClear}
+        >
+          <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+            <Line
+              x1={6}
+              y1={6}
+              x2={18}
+              y2={18}
+              stroke={colors.textDim}
+              strokeWidth={2}
+              strokeLinecap="round"
+            />
+            <Line
+              x1={18}
+              y1={6}
+              x2={6}
+              y2={18}
+              stroke={colors.textDim}
+              strokeWidth={2}
+              strokeLinecap="round"
+            />
+          </Svg>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // FormField
+  field: { gap: 6, minWidth: 0 },
+  fieldLabel: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    fontWeight: '500',
+    letterSpacing: 1.2,
+    color: colors.textFaint,
+  },
+  req: { color: colors.accent, fontSize: 11 },
+  control: { minWidth: 0 },
+  helpText: {
+    fontFamily: fonts.ui,
+    fontSize: 11.5,
+    lineHeight: 17,
+    color: colors.textFaint,
+  },
+  errorText: {
+    fontFamily: fonts.ui,
+    fontSize: 11.5,
+    lineHeight: 17,
+    color: colors.zoneLow,
+  },
+  // SearchInput
+  search: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    minWidth: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    backgroundColor: colors.glass2,
+  },
+  searchSm: {
+    borderRadius: radii.sm,
+  },
+  searchLead: { flexShrink: 0 },
+  searchInput: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  searchClear: {
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radii.pill,
+  },
+});