@farcaster/snap 1.5.2 → 1.7.0

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

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

@@ -0,0 +1,45 @@
+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.border, true: accentHex }}
+        thumbColor="#fff"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "400",
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,53 @@
+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" }> = {
+  lg: { fontSize: 20, fontWeight: "700" },
+  md: { fontSize: 16, lineHeight: 24 },
+  sm: { fontSize: 13 },
+};
+
+const WEIGHT_MAP: Record<string, "400" | "500" | "600" | "700"> = {
+  bold: "700",
+  medium: "500",
+  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: { flex: 1, width: "100%" },
+  base: {},
+});

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

@@ -0,0 +1,128 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapToggleGroup({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { get, set } = useStateStore();
+  const { accentHex } = useSnapPalette();
+  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.border + "33" },
+          isVertical ? styles.groupVertical : styles.groupHorizontal,
+        ]}
+      >
+        {options.map((opt, index) => {
+          const isSelected = selected.includes(opt);
+          return (
+            <Pressable
+              key={index}
+              style={({ pressed }) => [
+                styles.option,
+                isSelected && { backgroundColor: accentHex },
+                pressed && styles.pressed,
+                !isVertical && styles.optionHorizontal,
+              ]}
+              onPress={() => handlePress(opt)}
+            >
+              <Text
+                style={[
+                  styles.optionText,
+                  { color: colors.text },
+                  isSelected && styles.optionTextSelected,
+                ]}
+              >
+                {opt}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%", gap: 6 },
+  label: { fontSize: 13, 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,
+  },
+  pressed: { opacity: 0.88 },
+  optionText: {
+    fontSize: 13,
+    fontWeight: "500",
+  },
+  optionTextSelected: {
+    color: "#fff",
+  },
+});