@farcaster/snap 1.6.0 → 1.7.0

package/src/react-native/components/snap-action-button.tsx

@@ -0,0 +1,92 @@
+declare const __DEV__: boolean;
+
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+import { ICON_MAP } from "./snap-icon";
+
+const VARIANT_MAP: Record<string, "default" | "secondary" | "outline" | "ghost"> = {
+  default: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+};
+
+export function SnapActionButton({
+  element: { props },
+  emit,
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const label = String(props.label ?? "Action");
+  const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+  const iconName = props.icon ? String(props.icon) : undefined;
+
+  const variantStyle = (() => {
+    switch (variant) {
+      case "default":
+        return { backgroundColor: accentHex };
+      case "secondary":
+        return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
+      case "outline":
+        return { backgroundColor: "rgba(255,255,255,0.04)", borderWidth: 1, borderColor: colors.border };
+      case "ghost":
+        return { backgroundColor: "transparent" };
+    }
+  })();
+
+  const textColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+  const iconColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+
+  return (
+    <View style={styles.outer}>
+      <Pressable
+        style={({ pressed }) => [
+          styles.btn,
+          variant === "default" ? styles.btnDefault : styles.btnOther,
+          variantStyle,
+          pressed && styles.pressed,
+        ]}
+        onPress={() => {
+          void (async () => {
+            try {
+              await emit("press");
+            } catch (err: unknown) {
+              if (typeof __DEV__ !== "undefined" && __DEV__) {
+                // eslint-disable-next-line no-console
+                console.error("[snap] action failed", err);
+              }
+            }
+          })();
+        }}
+      >
+        {iconName && ICON_MAP[iconName] ? (
+          (() => { const I = ICON_MAP[iconName]!; return <I size={16} color={iconColor} />; })()
+        ) : null}
+        <Text style={{ color: textColor, fontSize: 14, fontWeight: "600" }}>
+          {label}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  outer: { flex: 1, minWidth: 0 },
+  btn: {
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: 8,
+  },
+  btnDefault: {
+    paddingVertical: 10,
+  },
+  btnOther: {
+    paddingVertical: 8,
+  },
+  pressed: { opacity: 0.88 },
+});

package/src/react-native/components/snap-badge.tsx

@@ -0,0 +1,57 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { ICON_MAP } from "./snap-icon";
+
+export function SnapBadge({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const label = String(props.label ?? "");
+  const color = props.color ? String(props.color) : undefined;
+  const iconName = props.icon ? String(props.icon) : undefined;
+  const isAccent = !color || color === "accent";
+  const resolvedColor = isAccent ? accentHex : hex(color);
+
+  const Icon = iconName ? ICON_MAP[iconName] : undefined;
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        isAccent
+          ? { backgroundColor: resolvedColor, borderColor: resolvedColor }
+          : { borderColor: resolvedColor },
+      ]}
+    >
+      {Icon && (
+        <Icon size={12} color={isAccent ? "#fff" : resolvedColor} />
+      )}
+      <Text
+        style={[
+          styles.label,
+          { color: isAccent ? "#fff" : resolvedColor },
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    borderWidth: 1,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+});

package/src/react-native/components/snap-icon.tsx

@@ -0,0 +1,102 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import {
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  ChevronRight,
+  Check,
+  X,
+  AlertTriangle,
+  Info,
+  Clock,
+  Heart,
+  MessageCircle,
+  Repeat,
+  Share,
+  User,
+  Users,
+  Star,
+  Trophy,
+  Zap,
+  Flame,
+  Gift,
+  ImageIcon,
+  Play,
+  Pause,
+  Wallet,
+  Coins,
+  Plus,
+  Minus,
+  RefreshCw,
+  Bookmark,
+  ThumbsUp,
+  ThumbsDown,
+  TrendingUp,
+  TrendingDown,
+  type LucideIcon,
+} from "lucide-react-native";
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  "arrow-right": ArrowRight,
+  "arrow-left": ArrowLeft,
+  "external-link": ExternalLink,
+  "chevron-right": ChevronRight,
+  check: Check,
+  x: X,
+  "alert-triangle": AlertTriangle,
+  info: Info,
+  clock: Clock,
+  heart: Heart,
+  "message-circle": MessageCircle,
+  repeat: Repeat,
+  share: Share,
+  user: User,
+  users: Users,
+  star: Star,
+  trophy: Trophy,
+  zap: Zap,
+  flame: Flame,
+  gift: Gift,
+  image: ImageIcon,
+  play: Play,
+  pause: Pause,
+  wallet: Wallet,
+  coins: Coins,
+  plus: Plus,
+  minus: Minus,
+  "refresh-cw": RefreshCw,
+  bookmark: Bookmark,
+  "thumbs-up": ThumbsUp,
+  "thumbs-down": ThumbsDown,
+  "trending-up": TrendingUp,
+  "trending-down": TrendingDown,
+};
+
+const SIZE_PX: Record<string, number> = {
+  sm: 16,
+  md: 20,
+};
+
+export function SnapIcon({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const name = String(props.name ?? "info");
+  const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
+  const color = props.color ? String(props.color) : undefined;
+  const isAccent = !color || color === "accent";
+  const resolvedColor = isAccent ? accentHex : hex(color);
+
+  const Icon = ICON_MAP[name];
+  if (!Icon) return null;
+
+  return (
+    <View style={{ alignItems: "center", justifyContent: "center" }}>
+      <Icon size={size} color={resolvedColor} />
+    </View>
+  );
+}
+
+export { ICON_MAP };

package/src/react-native/components/snap-image.tsx

@@ -0,0 +1,38 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Image } from "expo-image";
+import { StyleSheet, View } from "react-native";
+
+function aspectToRatio(aspect: string): number {
+  const [w, h] = aspect.split(":").map(Number);
+  if (!w || !h) return 1;
+  return w / h;
+}
+
+export function SnapImage({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const url = String(props.url ?? "");
+  const alt = String(props.alt ?? "");
+  const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
+
+  return (
+    <View style={[styles.frame, { aspectRatio: ratio }]}>
+      <Image
+        source={{ uri: url }}
+        style={StyleSheet.absoluteFill}
+        contentFit="cover"
+        accessibilityLabel={alt || undefined}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    flex: 1,
+    width: "100%",
+    borderRadius: 8,
+    overflow: "hidden",
+    backgroundColor: "#f3f4f6",
+  },
+});

package/src/react-native/components/snap-input.tsx

@@ -0,0 +1,57 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapInput({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "input");
+  const path = `/inputs/${name}`;
+  const label = props.label ? String(props.label) : undefined;
+  const placeholder = props.placeholder ? String(props.placeholder) : undefined;
+  const type = String(props.type ?? "text");
+  const maxLength =
+    typeof props.maxLength === "number" ? props.maxLength : undefined;
+  const defaultValue = props.defaultValue != null ? String(props.defaultValue) : "";
+  const raw = get(path);
+  const value = raw !== undefined && raw !== null ? String(raw) : defaultValue;
+
+  return (
+    <View style={styles.wrap}>
+      {label ? <Text style={[styles.label, { color: colors.text }]}>{label}</Text> : null}
+      <TextInput
+        style={[
+          styles.input,
+          {
+            borderColor: colors.border,
+            backgroundColor: colors.inputBg,
+            color: colors.text,
+          },
+        ]}
+        value={value}
+        onChangeText={(text) => set(path, type === "number" ? Number(text) || 0 : text)}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textSecondary}
+        maxLength={maxLength}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType={type === "number" ? "numeric" : "default"}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 4 },
+  label: { fontSize: 13, fontWeight: "500" },
+  input: {
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+  },
+});

package/src/react-native/components/snap-item-group.tsx

@@ -0,0 +1,43 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { Children, Fragment, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+const GAP_MAP: Record<string, number> = { none: 0, sm: 4, md: 8, lg: 12 };
+
+export function SnapItemGroup({
+  element: { props },
+  children,
+}: ComponentRenderProps<Record<string, unknown>> & { children?: ReactNode }) {
+  const { colors } = useSnapTheme();
+  const border = Boolean(props.border);
+  const separator = Boolean(props.separator);
+  const gap = GAP_MAP[String(props.gap ?? "sm")] ?? 4;
+  const items = Children.toArray(children);
+
+  return (
+    <View
+      style={[
+        styles.group,
+        border && { borderWidth: 1, borderColor: colors.border, borderRadius: 12 },
+        { gap },
+      ]}
+    >
+      {items.map((child, i) => (
+        <Fragment key={i}>
+          {separator && i > 0 && (
+            <View style={{ height: 1, backgroundColor: colors.border + "80" }} />
+          )}
+          {child}
+        </Fragment>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    width: "100%",
+    overflow: "hidden",
+  },
+});

package/src/react-native/components/snap-item.tsx

@@ -0,0 +1,70 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import type { ReactNode } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapItem({
+  element: { props },
+  children,
+}: ComponentRenderProps<Record<string, unknown>> & { children?: ReactNode }) {
+  const { colors } = useSnapTheme();
+  const title = String(props.title ?? "");
+  const description = props.description
+    ? String(props.description)
+    : undefined;
+  const variant = String(props.variant ?? "default");
+
+  const containerVariant =
+    variant === "outline"
+      ? { borderWidth: 1, borderColor: colors.border + "80", borderRadius: 8, padding: 10 }
+      : variant === "muted"
+        ? { backgroundColor: "rgba(255,255,255,0.04)", borderRadius: 8, padding: 10 }
+        : { paddingVertical: 8, paddingHorizontal: 10 };
+
+  return (
+    <View style={[styles.container, containerVariant]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+        {description ? (
+          <Text style={[styles.description, { color: colors.textSecondary }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {children ? (
+        <View style={styles.actions}>
+          <View style={{ flex: 0 }}>{children}</View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: "500",
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 1,
+  },
+  actions: {
+    marginLeft: "auto",
+    paddingLeft: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0,
+    flexGrow: 0,
+    flexBasis: "auto",
+    gap: 4,
+  },
+});

package/src/react-native/components/snap-progress.tsx

@@ -0,0 +1,40 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapProgress({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const value = Number(props.value ?? 0);
+  const max = Math.max(1, Number(props.max ?? 100));
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+  const label = props.label != null ? String(props.label) : null;
+
+  return (
+    <View style={styles.wrap}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.textSecondary }]}>{label}</Text>
+      ) : null}
+      <View style={[styles.track, { backgroundColor: colors.muted }]}>
+        <View style={[styles.fill, { width: `${percent}%`, backgroundColor: accentHex }]} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flex: 1, width: "100%", gap: 4 },
+  label: { fontSize: 13 },
+  track: {
+    height: 10,
+    borderRadius: 9999,
+    overflow: "hidden",
+  },
+  fill: {
+    height: "100%",
+    borderRadius: 9999,
+  },
+});

package/src/react-native/components/snap-separator.tsx

@@ -0,0 +1,32 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapSeparator({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { colors } = useSnapTheme();
+  const orientation = String(props.orientation ?? "horizontal");
+  const isVertical = orientation === "vertical";
+
+  return (
+    <View
+      style={[
+        isVertical ? styles.vertical : styles.horizontal,
+        { backgroundColor: colors.border + "80" },
+      ]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  horizontal: {
+    width: "100%",
+    height: 1,
+  },
+  vertical: {
+    height: "100%",
+    width: 1,
+    alignSelf: "stretch",
+  },
+});

package/src/react-native/components/snap-slider.tsx

@@ -0,0 +1,82 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import Slider from "@react-native-community/slider";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapSlider({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "slider");
+  const path = `/inputs/${name}`;
+  const min = Number(props.min ?? 0);
+  const max = Number(props.max ?? 100);
+  const step = props.step != null ? Number(props.step) : 1;
+  const fallback =
+    props.defaultValue != null ? Number(props.defaultValue) : (min + max) / 2;
+  const raw = get(path);
+  const value =
+    raw === undefined || raw === null ? fallback : Number(raw);
+  const clamped = Number.isFinite(value)
+    ? Math.min(max, Math.max(min, value))
+    : fallback;
+
+  const label = props.label != null ? String(props.label) : null;
+  const minLabel = props.minLabel != null ? String(props.minLabel) : null;
+  const maxLabel = props.maxLabel != null ? String(props.maxLabel) : null;
+
+  return (
+    <View style={styles.wrap}>
+      {label ? (
+        <View style={styles.labelRow}>
+          <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
+          <Text style={[styles.valueText, { color: colors.textSecondary }]}>
+            {String(Math.round(clamped))}
+          </Text>
+        </View>
+      ) : null}
+      <Slider
+        style={styles.slider}
+        minimumValue={min}
+        maximumValue={max}
+        step={step > 0 ? step : 1}
+        value={clamped}
+        onValueChange={(v) => set(path, v)}
+        minimumTrackTintColor={accentHex}
+        maximumTrackTintColor={colors.muted}
+        thumbTintColor={accentHex}
+      />
+      {minLabel != null || maxLabel != null ? (
+        <View style={styles.minMaxRow}>
+          <Text style={[styles.minMax, { color: colors.textSecondary }]}>
+            {minLabel ?? String(min)}
+          </Text>
+          <Text style={[styles.minMax, { color: colors.textSecondary }]}>
+            {maxLabel ?? String(max)}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 6 },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: { fontSize: 13, fontWeight: "500", flex: 1 },
+  valueText: { fontSize: 13 },
+  slider: { width: "100%", height: 40 },
+  minMaxRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  minMax: { fontSize: 12 },
+});

package/src/react-native/components/snap-stack.tsx

@@ -0,0 +1,66 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import type { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+
+const VGAP: Record<string, number> = {
+  none: 0,
+  sm: 8,
+  md: 16,
+  lg: 24,
+};
+
+const HGAP: Record<string, number> = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+};
+
+const JUSTIFY: Record<string, "flex-start" | "center" | "flex-end" | "space-between" | "space-around"> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+};
+
+export function SnapStack({
+  element: { props },
+  children,
+}: ComponentRenderProps<Record<string, unknown>> & { children?: ReactNode }) {
+  const direction = String(props.direction ?? "vertical");
+  const rawGap = props.gap;
+  const isHorizontal = direction === "horizontal";
+  const gapMap = isHorizontal ? HGAP : VGAP;
+  const gap =
+    typeof rawGap === "number"
+      ? rawGap
+      : typeof rawGap === "string" && rawGap in gapMap
+        ? gapMap[rawGap]!
+        : isHorizontal ? HGAP.md! : VGAP.md!;
+  const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
+
+  return (
+    <View
+      style={[
+        styles.stack,
+        isHorizontal ? styles.horizontal : undefined,
+        { gap },
+        justify ? { justifyContent: justify } : undefined,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  stack: {
+    width: "100%",
+  },
+  horizontal: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+  },
+});