@farcaster/snap 1.13.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/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/theme.tsx

@@ -10,6 +10,12 @@ export type SnapNativeColors = {
   border: string;
   inputBg: string;
   muted: string;
+  /** Subtle tint for toggle button resting state */
+  mutedSubtle: string;
+  /** Slightly stronger tint for hover/press state */
+  mutedHover: string;
+  /** Stronger tint for selected state (toggle group) */
+  mutedSelected: string;
 };
 
 const DEFAULT_LIGHT: SnapNativeColors = {
@@ -17,9 +23,12 @@ const DEFAULT_LIGHT: SnapNativeColors = {
   surface: "#ffffff",
   text: "#111111",
   textSecondary: "#6b7280",
-  border: "#d1d5db",
-  inputBg: "#ffffff",
-  muted: "#f9fafb",
+  border: "#E5E7EB",
+  inputBg: "rgba(0,0,0,0.12)",
+  muted: "rgba(0,0,0,0.12)",
+  mutedSubtle: "rgba(0,0,0,0.06)",
+  mutedHover: "rgba(0,0,0,0.10)",
+  mutedSelected: "rgba(0,0,0,0.18)",
 };
 
 const DEFAULT_DARK: SnapNativeColors = {
@@ -27,9 +36,12 @@ const DEFAULT_DARK: SnapNativeColors = {
   surface: "#1a1d24",
   text: "#fafafa",
   textSecondary: "#a1a1aa",
-  border: "#374151",
-  inputBg: "#1a1d24",
-  muted: "#27272a",
+  border: "#2D2D44",
+  inputBg: "rgba(255,255,255,0.03)",
+  muted: "rgba(255,255,255,0.03)",
+  mutedSubtle: "rgba(255,255,255,0.02)",
+  mutedHover: "rgba(255,255,255,0.04)",
+  mutedSelected: "rgba(255,255,255,0.10)",
 };
 
 // ─── Context ──────────────────────────────────────────

package/dist/react/hooks/use-snap-accent.d.ts

@@ -1,13 +0,0 @@
-import { type CSSProperties } from "react";
-import type { PaletteColor } from "@farcaster/snap";
-/**
- * CSS variables so Neynar controls (`bg-primary`, `data-checked:bg-primary`, etc.)
- * use the snap `theme.accent` inside json-render catalog components.
- */
-export declare function useSnapAccentScopeStyle(): CSSProperties;
-/** Active snap palette table for the current docs shell theme. */
-export declare function useSnapPalette(): {
-    hex: (name: string) => string;
-    map: Record<PaletteColor, string>;
-    theme: "light" | "dark";
-};

package/dist/react/hooks/use-snap-accent.js

@@ -1,32 +0,0 @@
-"use client";
-import { useMemo } from "react";
-import { useStateStore } from "@json-render/react";
-import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useColorMode } from "@neynar/ui/color-mode";
-import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
-import { snapPreviewPrimaryCssProperties } from "../lib/preview-primary-css.js";
-import { useSnapPreviewPageAccent } from "../accent-context.js";
-/**
- * CSS variables so Neynar controls (`bg-primary`, `data-checked:bg-primary`, etc.)
- * use the snap `theme.accent` inside json-render catalog components.
- */
-export function useSnapAccentScopeStyle() {
-    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(() => snapPreviewPrimaryCssProperties(accentName, mode), [accentName, mode]);
-}
-/** Active snap palette table for the current docs shell theme. */
-export function useSnapPalette() {
-    const { mode } = useColorMode();
-    const map = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
-    const hex = (name) => resolveSnapPaletteHex(name, mode);
-    return { hex, map, theme: mode };
-}

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

@@ -1,45 +0,0 @@
-"use client";
-
-import { useMemo, type CSSProperties } from "react";
-import { useStateStore } from "@json-render/react";
-import type { PaletteColor } from "@farcaster/snap";
-import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useColorMode } from "@neynar/ui/color-mode";
-import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
-import { snapPreviewPrimaryCssProperties } from "../lib/preview-primary-css";
-import { useSnapPreviewPageAccent } from "../accent-context";
-
-/**
- * CSS variables so Neynar controls (`bg-primary`, `data-checked:bg-primary`, etc.)
- * use the snap `theme.accent` inside json-render catalog components.
- */
-export function useSnapAccentScopeStyle(): CSSProperties {
-  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(
-    () => snapPreviewPrimaryCssProperties(accentName, mode),
-    [accentName, mode],
-  );
-}
-
-/** Active snap palette table for the current docs shell theme. */
-export function useSnapPalette(): {
-  hex: (name: string) => string;
-  map: Record<PaletteColor, string>;
-  theme: "light" | "dark";
-} {
-  const { mode } = useColorMode();
-  const map = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
-  const hex = (name: string) => resolveSnapPaletteHex(name, mode);
-  return { hex, map, theme: mode };
-}