@farcaster/snap 1.13.0 → 1.15.0

package/src/react/components/item.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { ReactNode } from "react";
 import {
   Item,
   ItemContent,
@@ -8,26 +7,30 @@ import {
   ItemDescription,
   ItemActions,
 } from "@neynar/ui/item";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapItem({
-  element: { props },
+  element: { props, children: childIds },
   children,
 }: {
-  element: { props: Record<string, unknown> };
-  children?: ReactNode;
+  element: { props: Record<string, unknown>; children?: string[] };
+  children?: React.ReactNode;
 }) {
   const title = String(props.title ?? "");
   const description = props.description ? String(props.description) : undefined;
-  const variant =
-    (props.variant as "default") ?? "default";
+  const colors = useSnapColors();
 
   return (
-    <Item variant={variant} className="flex-1 py-1.5 px-2.5">
+    <Item className="flex-1 py-1.5 px-2.5">
       <ItemContent className="gap-0.5">
-        <ItemTitle>{title}</ItemTitle>
-        {description && <ItemDescription className="mt-0">{description}</ItemDescription>}
+        <ItemTitle style={{ color: colors.text }}>{title}</ItemTitle>
+        {description && (
+          <ItemDescription className="mt-0" style={{ color: colors.textMuted }}>
+            {description}
+          </ItemDescription>
+        )}
       </ItemContent>
-      {children && <ItemActions>{children}</ItemActions>}
+      {childIds && childIds.length > 0 && <ItemActions>{children}</ItemActions>}
     </Item>
   );
 }

package/src/react/components/progress.tsx

@@ -1,27 +1,32 @@
 "use client";
 
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapProgress({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
   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 ? String(props.label) : null;
 
   return (
-    <div className="flex w-full flex-1 flex-col gap-1" style={accentStyle}>
+    <div className="flex w-full flex-1 flex-col gap-1">
       {label && (
-        <span className="text-muted-foreground text-xs">{label}</span>
+        <span className="text-xs" style={{ color: colors.textMuted }}>
+          {label}
+        </span>
       )}
-      <div className="bg-muted h-2.5 w-full overflow-hidden rounded-full">
+      <div
+        className="h-2.5 w-full overflow-hidden rounded-full"
+        style={{ backgroundColor: colors.muted }}
+      >
         <div
-          className="h-full rounded-full bg-primary transition-all"
-          style={{ width: `${percent}%` }}
+          className="h-full rounded-full transition-all"
+          style={{ width: `${percent}%`, backgroundColor: colors.accent }}
         />
       </div>
     </div>

package/src/react/components/separator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Separator } from "@neynar/ui/separator";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapSeparator({
   element: { props },
@@ -9,6 +10,12 @@ export function SnapSeparator({
 }) {
   const orientation =
     (props.orientation as "horizontal" | "vertical") ?? "horizontal";
+  const colors = useSnapColors();
 
-  return <Separator orientation={orientation} />;
+  return (
+    <Separator
+      orientation={orientation}
+      style={{ backgroundColor: colors.border }}
+    />
+  );
 }

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/index.tsx

@@ -283,24 +283,25 @@ export function SnapView({
   return (
     <div style={{ position: "relative", width: "100%" }}>
       {showConfetti && <ConfettiOverlay />}
-      {loading && (
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 10,
-            fontSize: 14,
-            color: "var(--text-muted)",
-            background: "var(--bg-primary, rgba(0,0,0,0.6))",
-            backdropFilter: "blur(4px)",
-          }}
-        >
-          Loading...
-        </div>
-      )}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 10,
+          fontSize: 14,
+          color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
+          background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
+          backdropFilter: loading ? "blur(8px)" : "blur(0px)",
+          opacity: loading ? 1 : 0,
+          pointerEvents: loading ? "auto" : "none",
+          transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
+        }}
+      >
+        Loading...
+      </div>
 
       <div style={previewSurfaceStyle}>
         <SnapPreviewAccentProvider pageAccent={snap.theme?.accent}>

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-cell-grid.tsx

@@ -118,7 +118,7 @@ export function SnapCellGrid({
     : null;
 
   return (
-    <View style={[styles.wrap, { gap: gapPx }]}>
+    <View style={[styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }]}>
       {rowEls}
       {selectionLabel ? (
         <Text style={[styles.selectionText, { color: colors.textSecondary }]}>

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>

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

@@ -1,14 +1,12 @@
 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}`;
@@ -59,7 +57,7 @@ export function SnapToggleGroup({
       <View
         style={[
           styles.group,
-          { backgroundColor: colors.border + "33" },
+          { backgroundColor: colors.muted },
           isVertical ? styles.groupVertical : styles.groupHorizontal,
         ]}
       >
@@ -70,8 +68,13 @@ export function SnapToggleGroup({
               key={index}
               style={({ pressed }) => [
                 styles.option,
-                isSelected && { backgroundColor: accentHex },
-                pressed && styles.pressed,
+                {
+                  backgroundColor: isSelected
+                    ? colors.mutedSelected
+                    : pressed
+                      ? colors.mutedHover
+                      : colors.mutedSubtle,
+                },
                 !isVertical && styles.optionHorizontal,
               ]}
               onPress={() => handlePress(opt)}
@@ -80,7 +83,6 @@ export function SnapToggleGroup({
                 style={[
                   styles.optionText,
                   { color: colors.text },
-                  isSelected && styles.optionTextSelected,
                 ]}
               >
                 {opt}
@@ -117,12 +119,8 @@ const styles = StyleSheet.create({
   optionHorizontal: {
     flex: 1,
   },
-  pressed: { opacity: 0.88 },
   optionText: {
     fontSize: 13,
     fontWeight: "500",
   },
-  optionTextSelected: {
-    color: "#fff",
-  },
 });

package/src/react-native/index.tsx

@@ -213,7 +213,7 @@ function SnapViewInner({
             styles.overlay,
             {
               backgroundColor:
-                mode === "dark" ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.75)",
+                mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
             },
           ]}
         >