@farcaster/snap 1.10.0 → 1.14.0

package/dist/constants.d.ts

@@ -1,3 +1,11 @@
 export declare const SPEC_VERSION: "1.0";
 export declare const MEDIA_TYPE: "application/vnd.farcaster.snap+json";
 export declare const EFFECT_VALUES: readonly ["confetti"];
+export declare const POST_GRID_TAP_KEY: "grid_tap";
+export declare const GRID_MIN_COLS = 2;
+export declare const GRID_MAX_COLS = 32;
+export declare const GRID_MIN_ROWS = 2;
+export declare const GRID_MAX_ROWS = 16;
+export declare const GRID_GAP_VALUES: readonly ["none", "sm", "md", "lg"];
+export declare const BAR_CHART_MAX_BARS = 6;
+export declare const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/constants.js

@@ -1,3 +1,13 @@
 export const SPEC_VERSION = "1.0";
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json";
 export const EFFECT_VALUES = ["confetti"];
+// ─── Pixel grid ────────────────────────────────────────
+export const POST_GRID_TAP_KEY = "grid_tap";
+export const GRID_MIN_COLS = 2;
+export const GRID_MAX_COLS = 32;
+export const GRID_MIN_ROWS = 2;
+export const GRID_MAX_ROWS = 16;
+export const GRID_GAP_VALUES = ["none", "sm", "md", "lg"];
+// ─── Bar chart ─────────────────────────────────────────
+export const BAR_CHART_MAX_BARS = 6;
+export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export type { Spec as SnapSpec, UIElement as SnapUIElement, } from "@json-render/core";
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES } from "./constants.js";
+export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, } from "./constants.js";
 export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, type PaletteColor, } from "./colors.js";
 export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, type SnapAction, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapElementInput, type SnapSpecInput, type SnapFunction, type SnapPayload, } from "./schemas.js";
 export { validateSnapResponse, type ValidationResult } from "./validator.js";
-export { type Middleware, useMiddleware } from "./middleware.js";

package/dist/index.js

@@ -1,5 +1,4 @@
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES } from "./constants.js";
+export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, } from "./constants.js";
 export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "./colors.js";
 export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, } from "./schemas.js";
 export { validateSnapResponse } from "./validator.js";
-export { useMiddleware } from "./middleware.js";

package/dist/react/catalog-renderer.js

@@ -15,6 +15,8 @@ import { SnapStack } from "./components/stack.js";
 import { SnapSwitch } from "./components/switch.js";
 import { SnapText } from "./components/text.js";
 import { SnapToggleGroup } from "./components/toggle-group.js";
+import { SnapBarChart } from "./components/bar-chart.js";
+import { SnapCellGrid } from "./components/cell-grid.js";
 /**
  * Maps snap json-render catalog types to React components.
  * Keys match the snap wire-format `type` strings exactly.
@@ -34,4 +36,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
     switch: SnapSwitch,
     text: SnapText,
     toggle_group: SnapToggleGroup,
+    bar_chart: SnapBarChart,
+    cell_grid: SnapCellGrid,
 });

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.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapBarChart({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
+export function SnapBarChart({ element: { props }, }) {
+    const colors = useSnapColors();
+    const bars = Array.isArray(props.bars) ? props.bars : [];
+    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 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", children: bars.map((bar, i) => {
+            const value = Number(bar.value ?? 0);
+            const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+            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,
+                                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.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapCellGrid({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,82 @@
+"use client";
+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 } from "@farcaster/snap";
+import { useSnapColors } from "../hooks/use-snap-colors.js";
+export function SnapCellGrid({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const colors = useSnapColors();
+    const cols = Number(props.cols ?? 2);
+    const rows = Number(props.rows ?? 2);
+    const select = String(props.select ?? "off");
+    const interactive = select !== "off";
+    const isMultiple = select === "multiple";
+    const cells = Array.isArray(props.cells) ? props.cells : [];
+    const gap = String(props.gap ?? "sm");
+    const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
+    const gapPx = gapMap[gap] ?? 1;
+    const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+    const tapPath = `/inputs/${name}`;
+    const tapRaw = get(tapPath);
+    // Parse selection — single mode: "row,col" string; multi mode: "row,col|row,col|..." string
+    const selectedSet = new Set();
+    if (typeof tapRaw === "string" && tapRaw.length > 0) {
+        for (const part of tapRaw.split("|")) {
+            if (part.includes(","))
+                selectedSet.add(part);
+        }
+    }
+    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const handleTap = (r, c) => {
+        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();
+    for (const c of cells) {
+        cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+            color: c.color,
+            content: c.content != null ? String(c.content) : undefined,
+        });
+    }
+    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 ? 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 === " ") {
+                            e.preventDefault();
+                            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: {
+                    background: bg,
+                    // Two-layer ring: 1px white/black inner + 2px accent outer
+                    boxShadow: selected
+                        ? `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}`));
+        }
+    }
+    const selectionLabel = interactive && selectedSet.size > 0
+        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+        : null;
+    return (_jsxs("div", { children: [_jsx("div", { className: "grid w-full rounded-lg p-1", style: {
+                    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    gap: gapPx,
+                    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;