@farcaster/snap 2.0.0 → 2.0.2

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

@@ -0,0 +1,66 @@
+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 = { paddingVertical: 6, paddingHorizontal: 10 };
+
+  return (
+    <View style={[styles.container, containerVariant]}>
+      <View style={styles.content}>
+        {title ? <Text style={[styles.title, { color: colors.text }]}>{title}</Text> : null}
+        {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: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 15,
+    lineHeight: 20,
+    fontWeight: "500",
+  },
+  description: {
+    fontSize: 13,
+    lineHeight: 18,
+    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: { width: "100%", gap: 4 },
+  label: { fontSize: 13, lineHeight: 18 },
+  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,85 @@
+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 showValue = props.showValue === true;
+  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>
+          {showValue && (
+            <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: 2 },
+  labelRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500", flex: 1 },
+  valueText: { fontSize: 13, lineHeight: 18 },
+  slider: { width: "100%", height: 40 },
+  minMaxRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  minMax: { fontSize: 12, lineHeight: 16 },
+});

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",
+  },
+});

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

@@ -0,0 +1,46 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { StyleSheet, Switch, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapSwitch({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { accentHex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "switch");
+  const path = `/inputs/${name}`;
+  const label = props.label ? String(props.label) : undefined;
+  const fallback = Boolean(props.defaultChecked ?? false);
+  const raw = get(path);
+  const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
+
+  return (
+    <View style={styles.row}>
+      {label ? <Text style={[styles.label, { color: colors.text }]}>{label}</Text> : null}
+      <Switch
+        value={checked}
+        onValueChange={(v) => set(path, v)}
+        trackColor={{ false: colors.muted, true: accentHex }}
+        thumbColor="#fff"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 18,
+    fontWeight: "400",
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,51 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
+  md: { fontSize: 16, lineHeight: 24 },
+  sm: { fontSize: 13, lineHeight: 18 },
+};
+
+const WEIGHT_MAP: Record<string, "400" | "500" | "600" | "700"> = {
+  bold: "700",
+  normal: "400",
+};
+
+export function SnapText({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { colors } = useSnapTheme();
+  const content = String(props.content ?? "");
+  const size = String(props.size ?? "md");
+  const weight = props.weight ? String(props.weight) : undefined;
+  const align = (props.align as "left" | "center" | "right" | undefined) ?? undefined;
+
+  const sizeStyle = SIZE_STYLES[size] ?? SIZE_STYLES.md;
+  const resolvedWeight = weight ? WEIGHT_MAP[weight] : sizeStyle?.fontWeight;
+  const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
+
+  return (
+    <View style={styles.wrap}>
+      <Text
+        style={[
+          styles.base,
+          {
+            color: colors.text,
+            fontSize: sizeStyle!.fontSize,
+            lineHeight: sizeStyle!.lineHeight,
+            fontWeight: resolvedWeight,
+            textAlign,
+          },
+        ]}
+      >
+        {content}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%" },
+  base: {},
+});

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

@@ -0,0 +1,127 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme";
+
+export function SnapToggleGroup({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { colors } = useSnapTheme();
+  const name = String(props.name ?? "toggle_group");
+  const path = `/inputs/${name}`;
+  const label = props.label ? String(props.label) : undefined;
+  const isMultiple = Boolean(props.multiple);
+  const orientation = String(props.orientation ?? "horizontal");
+  const options = Array.isArray(props.options)
+    ? (props.options as string[])
+    : [];
+
+  const raw = get(path);
+  const defaultValue = props.defaultValue;
+
+  const selected = (() => {
+    if (raw !== undefined && raw !== null) {
+      return isMultiple
+        ? Array.isArray(raw)
+          ? (raw as string[])
+          : []
+        : typeof raw === "string"
+          ? [raw]
+          : [];
+    }
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue)
+        ? (defaultValue as string[])
+        : [String(defaultValue)];
+    }
+    return [];
+  })();
+
+  const isVertical = orientation === "vertical";
+
+  const handlePress = (opt: string) => {
+    if (isMultiple) {
+      const next = selected.includes(opt)
+        ? selected.filter((s) => s !== opt)
+        : [...selected, opt];
+      set(path, next);
+    } else {
+      if (opt && opt !== selected[0]) set(path, opt);
+    }
+  };
+
+  return (
+    <View style={styles.wrap}>
+      {label ? <Text style={[styles.label, { color: colors.text }]}>{label}</Text> : null}
+      <View
+        style={[
+          styles.group,
+          { backgroundColor: colors.muted },
+          isVertical ? styles.groupVertical : styles.groupHorizontal,
+        ]}
+      >
+        {options.map((opt, index) => {
+          const isSelected = selected.includes(opt);
+          return (
+            <Pressable
+              key={index}
+              style={({ pressed }) => [
+                styles.option,
+                {
+                  backgroundColor: isSelected
+                    ? colors.mutedSelected
+                    : pressed
+                      ? colors.mutedHover
+                      : colors.mutedSubtle,
+                },
+                !isVertical && styles.optionHorizontal,
+              ]}
+              onPress={() => handlePress(opt)}
+            >
+              <Text
+                style={[
+                  styles.optionText,
+                  { color: colors.text },
+                ]}
+              >
+                {opt}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 6 },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
+  group: {
+    padding: 4,
+    borderRadius: 8,
+    gap: 4,
+  },
+  groupHorizontal: {
+    flexDirection: "row",
+  },
+  groupVertical: {
+    flexDirection: "column",
+  },
+  option: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  optionHorizontal: {
+    flex: 1,
+  },
+  optionText: {
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: "500",
+  },
+});

package/src/react-native/confetti-overlay.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useMemo, useRef } from "react";
+import {
+  Animated,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+} from "react-native";
+
+const CONFETTI_COLORS = [
+  "#907AA9",
+  "#EC4899",
+  "#3B82F6",
+  "#10B981",
+  "#F59E0B",
+  "#EF4444",
+  "#06B6D4",
+];
+
+export function ConfettiOverlay() {
+  const { width, height } = useWindowDimensions();
+
+  const pieces = useMemo(
+    () =>
+      Array.from({ length: 80 }, (_, i) => ({
+        id: i,
+        left: Math.random() * width,
+        delay: Math.random() * 1200,
+        duration: 2500 + Math.random() * 2000,
+        color:
+          CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)]!,
+        size: 6 + Math.random() * 8,
+        startRotation: Math.random() * 360,
+        driftX: (Math.random() > 0.5 ? 1 : -1) * Math.random() * 40,
+      })),
+    // width captured once on mount; intentional stable dep
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const anims = useRef(
+    pieces.map(() => ({
+      translateY: new Animated.Value(-20),
+      opacity: new Animated.Value(1),
+      rotate: new Animated.Value(0),
+      translateX: new Animated.Value(0),
+    })),
+  ).current;
+
+  useEffect(() => {
+    const animations = pieces.map((piece, i) => {
+      const anim = anims[i]!;
+      anim.translateY.setValue(-20);
+      anim.opacity.setValue(1);
+      anim.rotate.setValue(0);
+      anim.translateX.setValue(0);
+
+      return Animated.sequence([
+        Animated.delay(piece.delay),
+        Animated.parallel([
+          Animated.timing(anim.translateY, {
+            toValue: height + 20,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim.opacity, {
+            toValue: 0,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim.rotate, {
+            toValue: 720,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+          Animated.timing(anim.translateX, {
+            toValue: piece.driftX,
+            duration: piece.duration,
+            useNativeDriver: true,
+          }),
+        ]),
+      ]);
+    });
+
+    const composite = Animated.parallel(animations);
+    composite.start();
+    return () => composite.stop();
+  }, [pieces, anims, height]);
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.container]} pointerEvents="none">
+      {pieces.map((piece, i) => {
+        const anim = anims[i]!;
+        const rotate = anim.rotate.interpolate({
+          inputRange: [0, 720],
+          outputRange: [
+            `${piece.startRotation}deg`,
+            `${piece.startRotation + 720}deg`,
+          ],
+        });
+        return (
+          <Animated.View
+            key={piece.id}
+            style={[
+              styles.piece,
+              {
+                left: piece.left,
+                width: piece.size,
+                height: piece.size * 0.6,
+                backgroundColor: piece.color,
+                opacity: anim.opacity,
+                transform: [
+                  { translateY: anim.translateY },
+                  { translateX: anim.translateX },
+                  { rotate },
+                ],
+              },
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+  piece: {
+    position: "absolute",
+    top: 0,
+    borderRadius: 2,
+  },
+});