@farcaster/snap 2.0.0 → 2.0.1

package/dist/colors.d.ts

@@ -3,12 +3,12 @@
  * it to a hex value appropriate for its current light/dark mode.
  *
  * Light-mode hex values (used by emulator):
- *   gray=#8F8F8F  blue=#006BFF  red=#FC0036  amber=#FFAE00
- *   green=#28A948  teal=#00AC96  purple=#8B5CF6  pink=#F32782
+ *   gray=#6E6A86  blue=#286983  red=#B4637A  amber=#EA9D34
+ *   green=#3E8F8F  teal=#56949F  purple=#907AA9  pink=#D7827E
  *
  * Dark-mode hex values (for reference; client-owned):
- *   gray=#8F8F8F  blue=#006FFE  red=#F13342  amber=#FFAE00
- *   green=#00AC3A  teal=#00AA96  purple=#A78BFA  pink=#F12B82
+ *   gray=#908CAA  blue=#9CCFD8  red=#EB6F92  amber=#F6C177
+ *   green=#56D4A4  teal=#3E8FB0  purple=#C4A7E7  pink=#EBBCBA
  */
 export declare const PALETTE_COLOR: {
     readonly gray: "gray";

package/dist/colors.js

@@ -3,12 +3,12 @@
  * it to a hex value appropriate for its current light/dark mode.
  *
  * Light-mode hex values (used by emulator):
- *   gray=#8F8F8F  blue=#006BFF  red=#FC0036  amber=#FFAE00
- *   green=#28A948  teal=#00AC96  purple=#8B5CF6  pink=#F32782
+ *   gray=#6E6A86  blue=#286983  red=#B4637A  amber=#EA9D34
+ *   green=#3E8F8F  teal=#56949F  purple=#907AA9  pink=#D7827E
  *
  * Dark-mode hex values (for reference; client-owned):
- *   gray=#8F8F8F  blue=#006FFE  red=#F13342  amber=#FFAE00
- *   green=#00AC3A  teal=#00AA96  purple=#A78BFA  pink=#F12B82
+ *   gray=#908CAA  blue=#9CCFD8  red=#EB6F92  amber=#F6C177
+ *   green=#56D4A4  teal=#3E8FB0  purple=#C4A7E7  pink=#EBBCBA
  */
 export const PALETTE_COLOR = {
     gray: "gray",
@@ -34,25 +34,25 @@ export const PALETTE_COLOR_VALUES = [
 ];
 /** Light-mode hex for each palette color (emulator / reference client). */
 export const PALETTE_LIGHT_HEX = {
-    gray: "#8F8F8F",
-    blue: "#006BFF",
-    red: "#FC0036",
-    amber: "#FFAE00",
-    green: "#28A948",
-    teal: "#00AC96",
-    purple: "#8B5CF6",
-    pink: "#F32782",
+    gray: "#6E6A86",
+    blue: "#286983",
+    red: "#B4637A",
+    amber: "#EA9D34",
+    green: "#3E8F8F",
+    teal: "#56949F",
+    purple: "#907AA9",
+    pink: "#D7827E",
 };
 /** Dark-mode hex for each palette color (reference). */
 export const PALETTE_DARK_HEX = {
-    gray: "#8F8F8F",
-    blue: "#006FFE",
-    red: "#F13342",
-    amber: "#FFAE00",
-    green: "#00AC3A",
-    teal: "#00AA96",
-    purple: "#A78BFA",
-    pink: "#F12B82",
+    gray: "#908CAA",
+    blue: "#9CCFD8",
+    red: "#EB6F92",
+    amber: "#F6C177",
+    green: "#56D4A4",
+    teal: "#3E8FB0",
+    purple: "#C4A7E7",
+    pink: "#EBBCBA",
 };
 export const PROGRESS_COLOR_VALUES = [
     PALETTE_COLOR_ACCENT,

package/dist/constants.d.ts

@@ -1,3 +1,19 @@
-export declare const SPEC_VERSION: "1.0";
+export declare const SPEC_VERSION_1: "1.0";
+export declare const SPEC_VERSION_2: "2.0";
+export declare const SPEC_VERSION: "2.0";
+export declare const SUPPORTED_SPEC_VERSIONS: readonly ["1.0", "2.0"];
+export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
 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 MAX_ELEMENTS = 64;
+export declare const MAX_ROOT_CHILDREN = 7;
+export declare const MAX_CHILDREN = 6;
+export declare const MAX_DEPTH = 4;
+export declare const BAR_CHART_MAX_BARS = 6;
+export declare const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/constants.js

@@ -1,3 +1,21 @@
-export const SPEC_VERSION = "1.0";
+export const SPEC_VERSION_1 = "1.0";
+export const SPEC_VERSION_2 = "2.0";
+export const SPEC_VERSION = SPEC_VERSION_2;
+export const SUPPORTED_SPEC_VERSIONS = [SPEC_VERSION_1, SPEC_VERSION_2];
 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"];
+// ─── Snap structural limits ───────────────────────────
+export const MAX_ELEMENTS = 64;
+export const MAX_ROOT_CHILDREN = 7;
+export const MAX_CHILDREN = 6;
+export const MAX_DEPTH = 4;
+// ─── Bar chart ─────────────────────────────────────────
+export const BAR_CHART_MAX_BARS = 6;
+export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/index.d.ts

@@ -1,7 +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 type { Spec as SnapSpec, UIElement as SnapUIElement, } from "@json-render/core";
+export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, type SpecVersion, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } 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 SnapFunction, type SnapPayload, } from "./schemas.js";
-export { validateSnapResponse, type ValidationResult, } from "./validator.js";
-export { type DataStoreValue, type SnapDataStore, type SnapDataStoreOperations, createDefaultDataStore, createInMemoryDataStore, } from "./dataStore.js";
-export { type Middleware, useMiddleware } from "./middleware.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";

package/dist/index.js

@@ -1,6 +1,4 @@
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, } from "./constants.js";
+export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } 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 { createDefaultDataStore, createInMemoryDataStore, } from "./dataStore.js";
-export { useMiddleware } from "./middleware.js";
+export { validateSnapResponse } from "./validator.js";

package/dist/react/accent-context.d.ts

@@ -1,6 +1,8 @@
 import { type ReactNode } from "react";
-export declare function SnapPreviewAccentProvider({ pageAccent, children, }: {
+export declare function SnapPreviewAccentProvider({ pageAccent, appearance, children, }: {
     pageAccent: string | undefined;
+    appearance?: "light" | "dark";
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useSnapPreviewPageAccent(): string | undefined;
+export declare function useSnapAppearance(): "light" | "dark";

package/dist/react/accent-context.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const SnapPreviewAccentContext = createContext(null);
-export function SnapPreviewAccentProvider({ pageAccent, children, }) {
-    return (_jsx(SnapPreviewAccentContext.Provider, { value: { pageAccent }, children: children }));
+const SnapPreviewContext = createContext(null);
+export function SnapPreviewAccentProvider({ pageAccent, appearance = "dark", children, }) {
+    return (_jsx(SnapPreviewContext.Provider, { value: { pageAccent, appearance }, children: children }));
 }
 export function useSnapPreviewPageAccent() {
-    return useContext(SnapPreviewAccentContext)?.pageAccent;
+    return useContext(SnapPreviewContext)?.pageAccent;
+}
+export function useSnapAppearance() {
+    return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

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

@@ -1,6 +1,7 @@
-export declare function SnapActionButton({ element: { props }, emit, }: {
+export declare function SnapActionButton({ element, emit, }: {
     element: {
         props: Record<string, unknown>;
+        on?: Record<string, unknown>;
     };
     emit: (name: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,41 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ExternalLink } from "lucide-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 = {
-    default: "default",
-    secondary: "secondary",
-    outline: "outline",
-    ghost: "ghost",
-};
-export function SnapActionButton({ element: { props }, emit, }) {
+function isExternalLinkAction(on) {
+    if (!on)
+        return false;
+    const press = on.press;
+    if (!press)
+        return false;
+    return press.action === "open_url";
+}
+export function SnapActionButton({ element, emit, }) {
+    const { props } = element;
     const label = String(props.label ?? "Action");
-    const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+    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 showExternalIcon = isExternalLinkAction(element.on);
+    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, showExternalIcon && (_jsx(ExternalLink, { size: 14, style: { opacity: 0.6 } }))] }) }));
 }

package/dist/react/components/badge.js

@@ -1,18 +1,18 @@
 "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 } 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 Icon = iconName ? ICON_MAP[iconName] : undefined;
-    return (_jsx("span", { style: isAccent ? accentStyle : undefined, children: _jsxs(Badge, { variant: isAccent ? "default" : "outline", className: "gap-1", 
-            // TODO: fix outline badge border color in @neynar/ui — too bright in dark mode
-            style: !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}20`, color: badgeColor, 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,87 @@
+"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 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);
+    // 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 items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
+                    height: rowHeight,
+                    background: bg,
+                    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", { style: {
+                    display: "grid",
+                    width: "100%",
+                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+                    gap: gapPx,
+                    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 ${variant === "muted" ? "!bg-border/20" : ""}`, 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,25 @@
 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 showValue = props.showValue === true;
+    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 && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { style: { color: colors.text }, children: label }), showValue && (_jsx("span", { style: { color: colors.textMuted, fontSize: 13, lineHeight: "18px" }, children: Math.round(value) }))] })), _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,
+                } })] }));
 }