@farcaster/snap 1.13.0 → 1.15.0

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/src/ui/cell-grid.ts

@@ -22,6 +22,7 @@ export const cellGridProps = z
     rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
     cells: z.array(cellGridCellSchema),
     gap: z.enum(GRID_GAP_VALUES).optional(),
+    rowHeight: z.number().int().min(8).max(64).optional(),
     select: z.enum(["off", "single", "multiple"]).optional(),
   })
   .superRefine((val, ctx) => {

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 };
-}