@farcaster/snap 1.10.0 → 1.14.0

package/src/react/components/slider.tsx

@@ -2,10 +2,7 @@
 
 import { useStateStore } from "@json-render/react";
 import { Label } from "@neynar/ui/label";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
-
-// TODO: switch back to @neynar/ui/slider once Base UI fixes the inline
-// <script> tag that triggers a React console warning on client render.
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapSlider({
   element: { props },
@@ -13,21 +10,24 @@ export function SnapSlider({
   element: { props: Record<string, unknown> };
 }) {
   const { get, set } = useStateStore();
-  const accentStyle = useSnapAccentScopeStyle();
-
+  const colors = useSnapColors();
   const name = String(props.name ?? "slider");
-  const path = `/inputs/${name}`;
-  const label = props.label ? String(props.label) : undefined;
   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 step = Number(props.step ?? 1);
+  const label = props.label ? String(props.label) : undefined;
+  const path = `/inputs/${name}`;
   const raw = get(path);
-  const value = raw === undefined || raw === null ? fallback : Number(raw);
+  const value =
+    raw !== undefined
+      ? Number(raw)
+      : props.defaultValue !== undefined
+        ? Number(props.defaultValue)
+        : (min + max) / 2;
 
   return (
-    <div className="flex w-full flex-col gap-1.5" style={accentStyle}>
-      {label && <Label>{label}</Label>}
+    <div className="flex w-full flex-col gap-1.5">
+      {label && <Label style={{ color: colors.text }}>{label}</Label>}
       <input
         type="range"
         min={min}
@@ -35,8 +35,11 @@ export function SnapSlider({
         step={step}
         value={value}
         onChange={(e) => set(path, Number(e.target.value))}
-        className="w-full h-2.5 rounded-full appearance-none bg-muted cursor-pointer"
-        style={{ accentColor: "var(--primary)" }}
+        className="w-full h-2.5 rounded-full appearance-none cursor-pointer"
+        style={{
+          backgroundColor: colors.muted,
+          accentColor: colors.accent,
+        }}
       />
     </div>
   );

package/src/react/components/switch.tsx

@@ -2,32 +2,29 @@
 
 import { useId } from "react";
 import { useStateStore } from "@json-render/react";
-import { Label } from "@neynar/ui/label";
 import { Switch } from "@neynar/ui/switch";
-import { useColorMode } from "@neynar/ui/color-mode";
-import { cn } from "@neynar/ui/utils";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { Label } from "@neynar/ui/label";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapSwitch({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const id = useId();
   const { get, set } = useStateStore();
-  const { mode } = useColorMode();
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
   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 path = `/inputs/${name}`;
   const raw = get(path);
-  const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
+  const checked =
+    raw !== undefined ? Boolean(raw) : Boolean(props.defaultChecked);
+  const id = useId();
 
   return (
     <div className="flex items-center justify-between gap-3">
       {label && (
-        <Label htmlFor={id} className="text-foreground font-normal">
+        <Label htmlFor={id} className="font-normal" style={{ color: colors.text }}>
           {label}
         </Label>
       )}
@@ -35,11 +32,10 @@ export function SnapSwitch({
         id={id}
         checked={checked}
         onCheckedChange={(v) => set(path, v)}
-        style={accentStyle}
-        className={cn(
-          mode === "light" &&
-            "data-unchecked:!bg-border data-unchecked:!border-(--input-border)",
-        )}
+        style={{
+          backgroundColor: checked ? colors.accent : colors.muted,
+          borderColor: checked ? colors.accent : colors.inputBorder,
+        }}
       />
     </div>
   );

package/src/react/components/text.tsx

@@ -1,15 +1,11 @@
 "use client";
 
 import { Text } from "@neynar/ui/typography";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 const SIZE_MAP = {
-  md: { component: "text", textSize: "base" as const },
-  sm: { component: "text", textSize: "sm" as const },
-} as const;
-
-const WEIGHT_MAP = {
-  bold: "bold",
-  normal: "normal",
+  md: { textSize: "base" as const },
+  sm: { textSize: "sm" as const },
 } as const;
 
 export function SnapText({
@@ -22,9 +18,16 @@ export function SnapText({
   const weight = props.weight ? String(props.weight) as "bold" | "normal" : undefined;
   const align = (props.align as "left" | "center" | "right") ?? undefined;
   const config = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const colors = useSnapColors();
 
   return (
-    <Text size={config.textSize} weight={weight} align={align} className="flex-1">
+    <Text
+      size={config.textSize}
+      weight={weight}
+      align={align}
+      className="flex-1"
+      style={{ color: colors.text }}
+    >
       {content}
     </Text>
   );

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

@@ -1,9 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import { useStateStore } from "@json-render/react";
 import { Label } from "@neynar/ui/label";
 import { cn } from "@neynar/ui/utils";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapToggleGroup({
   element: { props },
@@ -11,7 +12,7 @@ export function SnapToggleGroup({
   element: { props: Record<string, unknown> };
 }) {
   const { get, set } = useStateStore();
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
   const name = String(props.name ?? "toggle_group");
   const path = `/inputs/${name}`;
   const label = props.label ? String(props.label) : undefined;
@@ -50,30 +51,46 @@ export function SnapToggleGroup({
   };
 
   const isVertical = orientation === "vertical";
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
 
   return (
-    <div className="w-full space-y-1.5" style={accentStyle}>
-      {label && <Label>{label}</Label>}
+    <div className="w-full space-y-1.5">
+      {label && <Label style={{ color: colors.text }}>{label}</Label>}
       <div
         className={cn(
-          "flex gap-1 rounded-lg bg-border/20 p-1",
+          "flex gap-1 rounded-lg p-1",
           isVertical ? "flex-col" : "flex-row",
         )}
+        style={{ backgroundColor: colors.muted }}
       >
-        {options.map((opt) => {
+        {options.map((opt, i) => {
           const isSelected = selected.includes(opt);
+          const isHovered = hoveredIdx === i && !isSelected;
           return (
             <button
               key={opt}
               type="button"
               onClick={() => toggle(opt)}
+              onPointerEnter={() => setHoveredIdx(i)}
+              onPointerLeave={() => setHoveredIdx(null)}
               className={cn(
                 "rounded-md px-3 py-2 text-sm font-medium transition-colors",
                 isVertical ? "w-full" : "flex-1",
-                isSelected
-                  ? "bg-primary text-primary-foreground"
-                  : "text-foreground hover:bg-border/30",
               )}
+              style={{
+                transition: "background-color 0.15s, color 0.15s",
+                ...(isSelected
+                  ? {
+                      backgroundColor: colors.mode === "dark" ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.08)",
+                      color: colors.text,
+                    }
+                  : {
+                      color: colors.text,
+                      backgroundColor: isHovered
+                        ? (colors.mode === "dark" ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)")
+                        : (colors.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)"),
+                    }),
+              }}
             >
               {opt}
             </button>

package/src/react/hooks/use-snap-colors.ts

@@ -0,0 +1,129 @@
+"use client";
+
+import { useMemo } from "react";
+import { useStateStore } from "@json-render/react";
+import { useColorMode } from "@neynar/ui/color-mode";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
+import { useSnapPreviewPageAccent } from "../accent-context";
+import type { PaletteColor } from "@farcaster/snap";
+import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+
+/** Readable foreground color (black or white) for a given hex background. */
+export function pickForegroundForBg(hex: string): string {
+  const h = hex.replace(/^#/, "");
+  if (h.length !== 6) return "#ffffff";
+  const r = Number.parseInt(h.slice(0, 2), 16);
+  const g = Number.parseInt(h.slice(2, 4), 16);
+  const b = Number.parseInt(h.slice(4, 6), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 180 ? "#0a0a0a" : "#ffffff";
+}
+
+const NEUTRAL_LIGHT = {
+  text: "#111111",
+  textMuted: "#6B7280",
+  border: "#E5E7EB",
+  muted: "rgba(0,0,0,0.06)",
+  surface: "#ffffff",
+  inputBorder: "#E5E7EB",
+  inputBg: "rgba(0,0,0,0.06)",
+} as const;
+
+const NEUTRAL_DARK = {
+  text: "#FAFAFA",
+  textMuted: "#A1A1AA",
+  border: "#2D2D44",
+  muted: "rgba(255,255,255,0.03)",
+  surface: "#23262f",
+  inputBorder: "#3F3F46",
+  inputBg: "rgba(255,255,255,0.03)",
+} as const;
+
+export type SnapColors = {
+  /** Resolved accent hex */
+  accent: string;
+  /** Readable foreground for accent bg (black or white) */
+  accentFg: string;
+  /** Primary button hover color */
+  accentHover: string;
+  /** Secondary/outline button hover color */
+  outlineHover: string;
+  /** Primary text color */
+  text: string;
+  /** Muted/secondary text color */
+  textMuted: string;
+  /** Border color */
+  border: string;
+  /** Muted background (tracks, containers) */
+  muted: string;
+  /** Surface/card background */
+  surface: string;
+  /** Input border */
+  inputBorder: string;
+  /** Input background */
+  inputBg: string;
+  /** Current color mode */
+  mode: "light" | "dark";
+  /** Resolve a palette color name to hex */
+  paletteHex: (name: string) => string;
+  /** Resolve a palette color name to hex, with accent fallback */
+  colorHex: (name: string | undefined) => string;
+};
+
+function buildSnapColors(
+  accentName: string,
+  mode: "light" | "dark",
+): SnapColors {
+  const accent = resolveSnapPaletteHex(accentName, mode);
+  const accentFg = pickForegroundForBg(accent);
+  const neutrals = mode === "dark" ? NEUTRAL_DARK : NEUTRAL_LIGHT;
+  const paletteMap = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+
+  const accentHover =
+    mode === "light"
+      ? `color-mix(in srgb, ${accent} 82%, #000000)`
+      : `color-mix(in srgb, ${accent} 78%, #ffffff)`;
+
+  const outlineHover = `color-mix(in srgb, ${accent} 14%, ${neutrals.surface})`;
+
+  const paletteHex = (name: string) => resolveSnapPaletteHex(name, mode);
+
+  const colorHex = (name: string | undefined) => {
+    if (!name || name === "accent") return accent;
+    if (Object.hasOwn(paletteMap, name)) return paletteMap[name as PaletteColor];
+    return accent;
+  };
+
+  return {
+    accent,
+    accentFg,
+    accentHover,
+    outlineHover,
+    ...neutrals,
+    mode,
+    paletteHex,
+    colorHex,
+  };
+}
+
+/**
+ * Returns fully resolved color values for snap components.
+ * All colors are concrete hex values (or color-mix expressions for hover states)
+ * so they can be used as inline styles, independent of host app CSS.
+ */
+export function useSnapColors(): SnapColors {
+  const { get } = useStateStore();
+  const { mode } = useColorMode();
+  const pageAccent = useSnapPreviewPageAccent();
+  const fromState = get("/theme/accent");
+  const accentRaw =
+    (typeof pageAccent === "string" && pageAccent.length > 0
+      ? pageAccent
+      : fromState) ?? undefined;
+  const accentName =
+    typeof accentRaw === "string" && accentRaw.length > 0
+      ? accentRaw
+      : "purple";
+
+  return useMemo(() => buildSnapColors(accentName, mode), [accentName, mode]);
+}

package/src/react-native/catalog-renderer.tsx

@@ -14,6 +14,8 @@ import { SnapStack } from "./components/snap-stack";
 import { SnapSwitch } from "./components/snap-switch";
 import { SnapText } from "./components/snap-text";
 import { SnapToggleGroup } from "./components/snap-toggle-group";
+import { SnapBarChart } from "./components/snap-bar-chart";
+import { SnapCellGrid } from "./components/snap-cell-grid";
 
 /**
  * Maps snap json-render catalog types to React Native primitives.
@@ -34,4 +36,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
   switch: SnapSwitch,
   text: SnapText,
   toggle_group: SnapToggleGroup,
+  bar_chart: SnapBarChart,
+  cell_grid: SnapCellGrid,
 });

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

@@ -6,11 +6,6 @@ import { useSnapPalette } from "../use-snap-palette";
 import { useSnapTheme } from "../theme";
 import { ICON_MAP } from "./snap-icon";
 
-const VARIANT_MAP: Record<string, "primary" | "secondary"> = {
-  primary: "primary",
-  secondary: "secondary",
-};
-
 export function SnapActionButton({
   element: { props },
   emit,
@@ -18,28 +13,22 @@ export function SnapActionButton({
   const { accentHex } = useSnapPalette();
   const { colors } = useSnapTheme();
   const label = String(props.label ?? "Action");
-  const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
+  const variant = String(props.variant ?? "secondary");
+  const isPrimary = variant === "primary";
   const iconName = props.icon ? String(props.icon) : undefined;
 
-  const variantStyle = (() => {
-    switch (variant) {
-      case "primary":
-        return { backgroundColor: accentHex };
-      case "secondary":
-        return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
-    }
-  })();
-
-  const textColor = variant === "primary" ? "#fff" : accentHex;
-  const iconColor = variant === "primary" ? "#fff" : accentHex;
+  const textColor = isPrimary ? "#fff" : colors.text;
+  const iconColor = isPrimary ? "#fff" : colors.text;
 
   return (
     <View style={styles.outer}>
       <Pressable
         style={({ pressed }) => [
           styles.btn,
-          variant === "primary" ? styles.btnDefault : styles.btnOther,
-          variantStyle,
+          isPrimary ? styles.btnDefault : styles.btnOther,
+          isPrimary
+            ? { backgroundColor: pressed ? accentHex + "DD" : accentHex }
+            : { backgroundColor: pressed ? colors.mutedHover : colors.muted },
           pressed && styles.pressed,
         ]}
         onPress={() => {
@@ -48,7 +37,6 @@ export function SnapActionButton({
               await emit("press");
             } catch (err: unknown) {
               if (typeof __DEV__ !== "undefined" && __DEV__) {
-                // eslint-disable-next-line no-console
                 console.error("[snap] action failed", err);
               }
             }

package/src/react-native/components/snap-bar-chart.tsx

@@ -0,0 +1,73 @@
+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 SnapBarChart({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const bars = Array.isArray(props.bars) ? props.bars : [];
+  const chartColor = String(props.color ?? "accent");
+  const maxVal =
+    props.max != null
+      ? Number(props.max)
+      : Math.max(
+          ...bars.map((b: { value?: number }) => Number(b.value ?? 0)),
+          1,
+        );
+
+  function barFill(bar: { color?: string }): string {
+    if (bar.color) return hex(bar.color);
+    if (chartColor !== "accent") return hex(chartColor);
+    return accentHex;
+  }
+
+  return (
+    <View style={styles.wrap}>
+      {bars.map(
+        (
+          bar: { label?: string; value?: number; color?: string },
+          i: number,
+        ) => {
+          const value = Number(bar.value ?? 0);
+          const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+          return (
+            <View key={i} style={styles.row}>
+              <Text
+                style={[styles.label, { color: colors.textSecondary }]}
+                numberOfLines={1}
+              >
+                {String(bar.label ?? "")}
+              </Text>
+              <View style={[styles.track, { backgroundColor: colors.muted }]}>
+                <View
+                  style={[
+                    styles.fill,
+                    {
+                      width: `${pct}%`,
+                      backgroundColor: barFill(bar),
+                    },
+                  ]}
+                />
+              </View>
+              <Text style={[styles.value, { color: colors.textSecondary }]}>
+                {value}
+              </Text>
+            </View>
+          );
+        },
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flex: 1, width: "100%", gap: 8 },
+  row: { flexDirection: "row", alignItems: "center", gap: 8 },
+  label: { width: 80, fontSize: 12, textAlign: "right" },
+  track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },
+  fill: { height: "100%", borderRadius: 9999 },
+  value: { width: 32, fontSize: 12, fontVariant: ["tabular-nums"] },
+});

package/src/react-native/components/snap-cell-grid.tsx

@@ -0,0 +1,152 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+
+export function SnapCellGrid({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { hex, appearance } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const { get, set } = useStateStore();
+  const cols = Number(props.cols ?? 2);
+  const rows = Number(props.rows ?? 2);
+  const cells = Array.isArray(props.cells) ? props.cells : [];
+  const gap = String(props.gap ?? "sm");
+  const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
+  const gapPx = gapMap[gap] ?? 1;
+
+  const select = String(props.select ?? "off");
+  const interactive = select !== "off";
+  const isMultiple = select === "multiple";
+
+  const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+  const tapPath = `/inputs/${name}`;
+  const tapRaw = get(tapPath);
+
+  const selectedSet = new Set<string>();
+  if (typeof tapRaw === "string" && tapRaw.length > 0) {
+    for (const part of tapRaw.split("|")) {
+      if (part.includes(",")) selectedSet.add(part);
+    }
+  }
+
+  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+
+  const handleTap = (r: number, c: number) => {
+    const key = `${r},${c}`;
+    if (isMultiple) {
+      const next = new Set(selectedSet);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      set(tapPath, [...next].join("|"));
+    } else {
+      set(tapPath, key);
+    }
+  };
+
+  const cellMap = new Map<string, { color?: string; content?: string }>();
+  for (const c of cells) {
+    cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+      color: c.color as string | undefined,
+      content: c.content != null ? String(c.content) : undefined,
+    });
+  }
+
+  const ringOuter = appearance === "dark" ? "#fff" : "#000";
+  const ringInner = appearance === "dark" ? "#000" : "#fff";
+
+  const rowEls = [];
+  for (let r = 0; r < rows; r++) {
+    const rowCells = [];
+    for (let c = 0; c < cols; c++) {
+      const cell = cellMap.get(`${r},${c}`);
+      const selected = interactive && isSelected(r, c);
+      const bg = cell?.color ? hex(cell.color) : "transparent";
+
+      const cellContent = cell?.content ? (
+        <Text style={[styles.cellText, { color: colors.textPrimary }]}>
+          {cell.content}
+        </Text>
+      ) : null;
+
+      // Two-tone ring: outer View with contrasting border, inner View with inverse border
+      const cellView = selected ? (
+        <View style={[styles.cell, { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }]}>
+          <View
+            style={[
+              styles.innerCell,
+              { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+            ]}
+          >
+            {cellContent}
+          </View>
+        </View>
+      ) : (
+        <View style={[styles.cell, { backgroundColor: bg }]}>
+          {cellContent}
+        </View>
+      );
+
+      rowCells.push(
+        interactive ? (
+          <Pressable
+            key={`${r}-${c}`}
+            onPress={() => handleTap(r, c)}
+            style={styles.cellWrap}
+          >
+            {cellView}
+          </Pressable>
+        ) : (
+          <View key={`${r}-${c}`} style={styles.cellWrap}>
+            {cellView}
+          </View>
+        ),
+      );
+    }
+    rowEls.push(
+      <View key={r} style={[styles.gridRow, { gap: gapPx }]}>
+        {rowCells}
+      </View>,
+    );
+  }
+
+  const selectionLabel = interactive && selectedSet.size > 0
+    ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+    : null;
+
+  return (
+    <View style={[styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }]}>
+      {rowEls}
+      {selectionLabel ? (
+        <Text style={[styles.selectionText, { color: colors.textSecondary }]}>
+          {selectionLabel}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%" },
+  gridRow: { flexDirection: "row" },
+  cellWrap: { flex: 1 },
+  cell: {
+    flex: 1,
+    minHeight: 28,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  innerCell: {
+    flex: 1,
+    width: "100%",
+    minHeight: 26,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cellText: { fontSize: 12, fontWeight: "600" },
+  selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
+});

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

@@ -23,7 +23,7 @@ export function SnapSwitch({
       <Switch
         value={checked}
         onValueChange={(v) => set(path, v)}
-        trackColor={{ false: colors.border, true: accentHex }}
+        trackColor={{ false: colors.muted, true: accentHex }}
         thumbColor="#fff"
       />
     </View>