@farcaster/snap 1.13.0 → 1.15.0

package/dist/react/components/action-button.js

@@ -1,20 +1,28 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 import { ICON_MAP } from "./icon.js";
-const VARIANT_MAP = {
-    primary: "default",
-    secondary: "secondary",
-};
 export function SnapActionButton({ element: { props }, emit, }) {
     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 accentStyle = useSnapAccentScopeStyle();
+    const colors = useSnapColors();
+    const [hovered, setHovered] = useState(false);
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
-    return (_jsx("div", { className: "w-full min-w-0 flex-1", style: accentStyle, children: _jsxs(Button, { type: "button", variant: variant, className: cn("w-full gap-2", variant === "default" &&
-                "hover:!bg-[var(--snap-action-primary-hover)]", variant !== "default" &&
-                "hover:!bg-[var(--snap-action-outline-hover)]"), onClick: () => emit("press"), children: [Icon && _jsx(Icon, { size: 16 }), label] }) }));
+    const style = isPrimary
+        ? {
+            backgroundColor: hovered ? colors.accentHover : colors.accent,
+            color: colors.accentFg,
+            borderColor: "transparent",
+        }
+        : {
+            backgroundColor: hovered ? `color-mix(in srgb, ${colors.accent} 15%, transparent)` : colors.muted,
+            color: colors.text,
+            borderColor: "transparent",
+        };
+    return (_jsx("div", { className: "w-full min-w-0 flex-1", children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("w-full gap-2"), style: style, onClick: () => emit("press"), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label] }) }));
 }

package/dist/react/components/badge.js

@@ -1,17 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from "@neynar/ui/badge";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { useSnapColors, pickForegroundForBg } from "../hooks/use-snap-colors.js";
 import { ICON_MAP } from "./icon.js";
 export function SnapBadge({ element: { props }, }) {
     const content = String(props.label ?? "");
     const variant = String(props.variant ?? "default");
     const color = props.color ? String(props.color) : undefined;
     const iconName = props.icon ? String(props.icon) : undefined;
-    const accentStyle = useSnapAccentScopeStyle();
-    const isAccent = !color || color === "accent";
+    const colors = useSnapColors();
+    const badgeColor = colors.colorHex(color);
+    const badgeFg = variant === "default" ? pickForegroundForBg(badgeColor) : badgeColor;
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
-    return (_jsx("span", { style: isAccent ? accentStyle : undefined, children: _jsxs(Badge, { variant: variant, className: "gap-1", style: variant === "outline" && !isAccent
-                ? { borderColor: `var(--snap-color-${color})`, color: `var(--snap-color-${color})` }
-                : undefined, children: [Icon && _jsx(Icon, { size: 12 }), content] }) }));
+    const style = variant === "outline"
+        ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
+        : { backgroundColor: badgeColor, color: badgeFg, borderColor: "transparent" };
+    return (_jsxs(Badge, { variant: variant, className: "gap-1", style: style, children: [Icon && _jsx(Icon, { size: 12 }), content] }));
 }

package/dist/react/components/bar-chart.js

@@ -1,31 +1,26 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapBarChart({ element: { props }, }) {
-    const accentStyle = useSnapAccentScopeStyle();
+    const colors = useSnapColors();
     const bars = Array.isArray(props.bars) ? props.bars : [];
-    const chartColor = String(props.color ?? "accent");
+    const chartColor = props.color ? String(props.color) : undefined;
     const maxVal = props.max != null
         ? Number(props.max)
         : Math.max(...bars.map((b) => Number(b.value ?? 0)), 1);
-    function barColor(bar) {
-        if (bar.color && bar.color in PALETTE_LIGHT_HEX) {
-            return `var(--snap-color-${bar.color}, ${PALETTE_LIGHT_HEX[bar.color]})`;
-        }
-        if (chartColor !== "accent" && chartColor in PALETTE_LIGHT_HEX) {
-            return `var(--snap-color-${chartColor}, ${PALETTE_LIGHT_HEX[chartColor]})`;
-        }
-        return "var(--primary)";
+    function barFill(bar) {
+        if (bar.color)
+            return colors.colorHex(bar.color);
+        return colors.colorHex(chartColor);
     }
-    return (_jsx("div", { className: "flex w-full flex-col gap-2", style: accentStyle, children: bars.map((bar, i) => {
+    return (_jsx("div", { className: "flex w-full flex-col gap-2", children: bars.map((bar, i) => {
             const value = Number(bar.value ?? 0);
             const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
-            const fill = barColor(bar);
-            return (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 truncate text-right text-xs", children: String(bar.label ?? "") }), _jsx("div", { className: "bg-muted h-2.5 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full transition-all", style: {
+            const fill = barFill(bar);
+            return (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "w-20 shrink-0 truncate text-right text-xs", style: { color: colors.textMuted }, children: String(bar.label ?? "") }), _jsx("div", { className: "h-2.5 flex-1 overflow-hidden rounded-full", style: { backgroundColor: colors.muted }, children: _jsx("div", { className: "h-full rounded-full transition-all", style: {
                                 width: `${pct}%`,
                                 minWidth: pct > 0 ? 4 : 0,
-                                background: fill,
-                            } }) }), _jsx("span", { className: "text-muted-foreground w-8 shrink-0 text-xs tabular-nums", children: value })] }, i));
+                                backgroundColor: fill,
+                            } }) }), _jsx("span", { className: "w-8 shrink-0 text-xs tabular-nums", style: { color: colors.textMuted }, children: value })] }, i));
         }) }));
 }

package/dist/react/components/cell-grid.js

@@ -2,13 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
-import { POST_GRID_TAP_KEY, PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
-import { useColorMode } from "@neynar/ui/color-mode";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapCellGrid({ element: { props }, }) {
     const { get, set } = useStateStore();
-    const accentStyle = useSnapAccentScopeStyle();
-    const { mode: appearance } = useColorMode();
+    const colors = useSnapColors();
     const cols = Number(props.cols ?? 2);
     const rows = Number(props.rows ?? 2);
     const select = String(props.select ?? "off");
@@ -18,6 +16,7 @@ export function SnapCellGrid({ element: { props }, }) {
     const gap = String(props.gap ?? "sm");
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
     const gapPx = gapMap[gap] ?? 1;
+    const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
     const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
     const tapPath = `/inputs/${name}`;
     const tapRaw = get(tapPath);
@@ -51,15 +50,12 @@ export function SnapCellGrid({ element: { props }, }) {
             content: c.content != null ? String(c.content) : undefined,
         });
     }
-    const ringColor = appearance === "dark" ? "#fff" : "#000";
     const cellEls = [];
     for (let r = 0; r < rows; r++) {
         for (let c = 0; c < cols; c++) {
             const cell = cellMap.get(`${r},${c}`);
             const selected = interactive && isSelected(r, c);
-            const bg = cell?.color && cell.color in PALETTE_LIGHT_HEX
-                ? `var(--snap-color-${cell.color}, ${PALETTE_LIGHT_HEX[cell.color]})`
-                : "transparent";
+            const bg = cell?.color ? colors.colorHex(cell.color) : "transparent";
             cellEls.push(_jsx("div", { role: interactive ? "button" : undefined, tabIndex: interactive ? 0 : undefined, onClick: interactive ? () => handleTap(r, c) : undefined, onKeyDown: interactive
                     ? (e) => {
                         if (e.key === "Enter" || e.key === " ") {
@@ -67,11 +63,11 @@ export function SnapCellGrid({ element: { props }, }) {
                             handleTap(r, c);
                         }
                     }
-                    : undefined, className: cn("flex min-h-7 items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
+                    : undefined, className: cn("flex items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
+                    height: rowHeight,
                     background: bg,
-                    // Two-layer ring: 1px white/black inner + 2px accent outer
                     boxShadow: selected
-                        ? `inset 0 0 0 1px ${appearance === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${appearance === "dark" ? "#fff" : "#000"}`
+                        ? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
                         : undefined,
                 }, children: cell?.content ?? "" }, `${r}-${c}`));
         }
@@ -79,8 +75,13 @@ export function SnapCellGrid({ element: { props }, }) {
     const selectionLabel = interactive && selectedSet.size > 0
         ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
         : null;
-    return (_jsxs("div", { style: accentStyle, children: [_jsx("div", { className: "grid w-full", style: {
-                    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+    return (_jsxs("div", { children: [_jsx("div", { style: {
+                    display: "grid",
+                    width: "100%",
+                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
                     gap: gapPx,
-                }, children: cellEls }), selectionLabel && (_jsx("div", { className: "text-muted-foreground mt-1.5 truncate text-xs font-mono", children: selectionLabel }))] }));
+                    padding: 4,
+                    borderRadius: 8,
+                    backgroundColor: colors.muted,
+                }, children: cellEls }), selectionLabel && (_jsx("div", { className: "mt-1.5 truncate text-xs font-mono", style: { color: colors.textMuted }, children: selectionLabel }))] }));
 }

package/dist/react/components/icon.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowRight, ArrowLeft, ExternalLink, ChevronRight, Check, X, AlertTriangle, Info, Clock, Heart, MessageCircle, Repeat, Share, User, Users, Star, Trophy, Zap, Flame, Gift, ImageIcon, Play, Pause, Wallet, Coins, Plus, Minus, RefreshCw, Bookmark, ThumbsUp, ThumbsDown, TrendingUp, TrendingDown, } from "lucide-react";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export const ICON_MAP = {
     "arrow-right": ArrowRight,
     "arrow-left": ArrowLeft,
@@ -45,16 +45,10 @@ export function SnapIcon({ element: { props }, }) {
     const name = String(props.name ?? "info");
     const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
     const color = props.color ? String(props.color) : undefined;
-    const accentStyle = useSnapAccentScopeStyle();
+    const colors = useSnapColors();
     const Icon = ICON_MAP[name];
     if (!Icon)
         return null;
-    const isAccent = !color || color === "accent";
-    return (_jsx("span", { style: {
-            display: "inline-flex",
-            alignItems: "center",
-            ...(isAccent ? accentStyle : {}),
-        }, children: _jsx(Icon, { size: size, style: isAccent
-                ? { color: "var(--snap-accent, currentColor)" }
-                : { color: `var(--snap-color-${color}, currentColor)` } }) }));
+    const iconColor = colors.colorHex(color);
+    return (_jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: _jsx(Icon, { size: size, style: { color: iconColor } }) }));
 }

package/dist/react/components/input.js

@@ -4,15 +4,21 @@ import { useId } from "react";
 import { useStateStore } from "@json-render/react";
 import { Input } from "@neynar/ui/input";
 import { Label } from "@neynar/ui/label";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapInput({ element: { props }, }) {
-    const id = useId();
     const { get, set } = useStateStore();
+    const colors = useSnapColors();
     const name = String(props.name ?? "input");
-    const path = `/inputs/${name}`;
+    const type = String(props.type ?? "text");
     const label = props.label ? String(props.label) : undefined;
     const placeholder = props.placeholder ? String(props.placeholder) : undefined;
-    const maxLength = typeof props.maxLength === "number" ? props.maxLength : undefined;
-    const raw = get(path);
-    const value = typeof raw === "string" ? raw : "";
-    return (_jsxs("div", { className: "w-full space-y-1.5", children: [label && _jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, value: value, onChange: (e) => set(path, e.target.value), placeholder: placeholder, maxLength: maxLength })] }));
+    const maxLength = props.maxLength ? Number(props.maxLength) : undefined;
+    const path = `/inputs/${name}`;
+    const value = get(path) ?? (props.defaultValue != null ? String(props.defaultValue) : "");
+    const id = useId();
+    return (_jsxs("div", { className: "w-full space-y-1.5", children: [label && (_jsx(Label, { htmlFor: id, style: { color: colors.text }, children: label })), _jsx(Input, { id: id, type: type === "number" ? "number" : "text", placeholder: placeholder, maxLength: maxLength, value: value, onChange: (e) => set(path, e.target.value), style: {
+                    backgroundColor: colors.inputBg,
+                    borderColor: colors.inputBorder,
+                    color: colors.text,
+                } })] }));
 }

package/dist/react/components/item-group.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from "react";
 import { cn } from "@neynar/ui/utils";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 const GAP_MAP = {
     none: "gap-0",
     sm: "gap-1",
@@ -13,5 +14,6 @@ export function SnapItemGroup({ element: { props }, children, }) {
     const separator = Boolean(props.separator);
     const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
     const items = Children.toArray(children);
-    return (_jsx("div", { className: cn("flex flex-col", border && "rounded-lg border", gap), children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx("div", { className: "h-px bg-border" })), child] }, i))) }));
+    const colors = useSnapColors();
+    return (_jsx("div", { className: cn("flex flex-col", border && "rounded-lg border", gap), style: border ? { borderColor: colors.border } : undefined, children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx("div", { className: "h-px", style: { backgroundColor: colors.border } })), child] }, i))) }));
 }

package/dist/react/components/item.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from "react";
-export declare function SnapItem({ element: { props }, children, }: {
+export declare function SnapItem({ element: { props, children: childIds }, children, }: {
     element: {
         props: Record<string, unknown>;
+        children?: string[];
     };
-    children?: ReactNode;
+    children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/item.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, } from "@neynar/ui/item";
-export function SnapItem({ element: { props }, children, }) {
+import { useSnapColors } from "../hooks/use-snap-colors.js";
+export function SnapItem({ element: { props, children: childIds }, children, }) {
     const title = String(props.title ?? "");
     const description = props.description ? String(props.description) : undefined;
-    const variant = props.variant ?? "default";
-    return (_jsxs(Item, { variant: variant, className: "flex-1 py-1.5 px-2.5", children: [_jsxs(ItemContent, { className: "gap-0.5", children: [_jsx(ItemTitle, { children: title }), description && _jsx(ItemDescription, { className: "mt-0", children: description })] }), children && _jsx(ItemActions, { children: children })] }));
+    const colors = useSnapColors();
+    return (_jsxs(Item, { className: "flex-1 py-1.5 px-2.5", children: [_jsxs(ItemContent, { className: "gap-0.5", children: [_jsx(ItemTitle, { style: { color: colors.text }, children: title }), description && (_jsx(ItemDescription, { className: "mt-0", style: { color: colors.textMuted }, children: description }))] }), childIds && childIds.length > 0 && _jsx(ItemActions, { children: children })] }));
 }

package/dist/react/components/progress.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapProgress({ element: { props }, }) {
-    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 (_jsxs("div", { className: "flex w-full flex-1 flex-col gap-1", style: accentStyle, children: [label && (_jsx("span", { className: "text-muted-foreground text-xs", children: label })), _jsx("div", { className: "bg-muted h-2.5 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full bg-primary transition-all", style: { width: `${percent}%` } }) })] }));
+    return (_jsxs("div", { className: "flex w-full flex-1 flex-col gap-1", children: [label && (_jsx("span", { className: "text-xs", style: { color: colors.textMuted }, children: label })), _jsx("div", { className: "h-2.5 w-full overflow-hidden rounded-full", style: { backgroundColor: colors.muted }, children: _jsx("div", { className: "h-full rounded-full transition-all", style: { width: `${percent}%`, backgroundColor: colors.accent } }) })] }));
 }

package/dist/react/components/separator.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Separator } from "@neynar/ui/separator";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapSeparator({ element: { props }, }) {
     const orientation = props.orientation ?? "horizontal";
-    return _jsx(Separator, { orientation: orientation });
+    const colors = useSnapColors();
+    return (_jsx(Separator, { orientation: orientation, style: { backgroundColor: colors.border } }));
 }

package/dist/react/components/slider.js

@@ -2,20 +2,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react";
 import { Label } from "@neynar/ui/label";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
-// 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.js";
 export function SnapSlider({ element: { props }, }) {
     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);
-    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", style: accentStyle, children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "range", min: min, max: max, 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)" } })] }));
+    const value = raw !== undefined
+        ? Number(raw)
+        : props.defaultValue !== undefined
+            ? Number(props.defaultValue)
+            : (min + max) / 2;
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && _jsx(Label, { style: { color: colors.text }, children: label }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => set(path, Number(e.target.value)), className: "w-full h-2.5 rounded-full appearance-none cursor-pointer", style: {
+                    backgroundColor: colors.muted,
+                    accentColor: colors.accent,
+                } })] }));
 }

package/dist/react/components/switch.js

@@ -2,22 +2,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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.js";
+import { Label } from "@neynar/ui/label";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapSwitch({ element: { props }, }) {
-    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);
-    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [label && (_jsx(Label, { htmlFor: id, className: "text-foreground font-normal", children: label })), _jsx(Switch, { id: id, checked: checked, onCheckedChange: (v) => set(path, v), style: accentStyle, className: cn(mode === "light" &&
-                    "data-unchecked:!bg-border data-unchecked:!border-(--input-border)") })] }));
+    const checked = raw !== undefined ? Boolean(raw) : Boolean(props.defaultChecked);
+    const id = useId();
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [label && (_jsx(Label, { htmlFor: id, className: "font-normal", style: { color: colors.text }, children: label })), _jsx(Switch, { id: id, checked: checked, onCheckedChange: (v) => set(path, v), style: {
+                    backgroundColor: checked ? colors.accent : colors.muted,
+                    borderColor: checked ? colors.accent : colors.inputBorder,
+                } })] }));
 }

package/dist/react/components/text.js

@@ -1,13 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "@neynar/ui/typography";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 const SIZE_MAP = {
-    md: { component: "text", textSize: "base" },
-    sm: { component: "text", textSize: "sm" },
-};
-const WEIGHT_MAP = {
-    bold: "bold",
-    normal: "normal",
+    md: { textSize: "base" },
+    sm: { textSize: "sm" },
 };
 export function SnapText({ element: { props }, }) {
     const content = String(props.content ?? "");
@@ -15,5 +12,6 @@ export function SnapText({ element: { props }, }) {
     const weight = props.weight ? String(props.weight) : undefined;
     const align = props.align ?? undefined;
     const config = SIZE_MAP[size] ?? SIZE_MAP.md;
-    return (_jsx(Text, { size: config.textSize, weight: weight, align: align, className: "flex-1", children: content }));
+    const colors = useSnapColors();
+    return (_jsx(Text, { size: config.textSize, weight: weight, align: align, className: "flex-1", style: { color: colors.text }, children: content }));
 }

package/dist/react/components/toggle-group.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.js";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapToggleGroup({ element: { props }, }) {
     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;
@@ -43,10 +44,23 @@ export function SnapToggleGroup({ element: { props }, }) {
         }
     };
     const isVertical = orientation === "vertical";
-    return (_jsxs("div", { className: "w-full space-y-1.5", style: accentStyle, children: [label && _jsx(Label, { children: label }), _jsx("div", { className: cn("flex gap-1 rounded-lg bg-border/20 p-1", isVertical ? "flex-col" : "flex-row"), children: options.map((opt) => {
+    const [hoveredIdx, setHoveredIdx] = useState(null);
+    return (_jsxs("div", { className: "w-full space-y-1.5", children: [label && _jsx(Label, { style: { color: colors.text }, children: label }), _jsx("div", { className: cn("flex gap-1 rounded-lg p-1", isVertical ? "flex-col" : "flex-row"), style: { backgroundColor: colors.muted }, children: options.map((opt, i) => {
                     const isSelected = selected.includes(opt);
-                    return (_jsx("button", { type: "button", onClick: () => toggle(opt), 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"), children: opt }, opt));
+                    const isHovered = hoveredIdx === i && !isSelected;
+                    return (_jsx("button", { 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"), 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)"),
+                                }),
+                        }, children: opt }, opt));
                 }) })] }));
 }

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

@@ -0,0 +1,38 @@
+/** Readable foreground color (black or white) for a given hex background. */
+export declare function pickForegroundForBg(hex: string): string;
+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;
+};
+/**
+ * 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 declare function useSnapColors(): SnapColors;

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

@@ -0,0 +1,82 @@
+"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.js";
+import { useSnapPreviewPageAccent } from "../accent-context.js";
+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) {
+    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)",
+};
+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)",
+};
+function buildSnapColors(accentName, mode) {
+    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) => resolveSnapPaletteHex(name, mode);
+    const colorHex = (name) => {
+        if (!name || name === "accent")
+            return accent;
+        if (Object.hasOwn(paletteMap, name))
+            return paletteMap[name];
+        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() {
+    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/dist/react/index.js

@@ -174,7 +174,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                 break;
         }
     }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), loading && (_jsx("div", { style: {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), _jsx("div", { style: {
                     position: "absolute",
                     inset: 0,
                     display: "flex",
@@ -182,10 +182,13 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                     justifyContent: "center",
                     zIndex: 10,
                     fontSize: 14,
-                    color: "var(--text-muted)",
-                    background: "var(--bg-primary, rgba(0,0,0,0.6))",
-                    backdropFilter: "blur(4px)",
-                }, children: "Loading..." })), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                    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",
+                }, children: "Loading..." }), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                             applyStatePaths(stateRef.current, changes);
                         }, onAction: handleAction }, pageKey) }) })] }));
 }