@farcaster/snap 1.13.0 → 1.15.0

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

@@ -3,30 +3,21 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 import { ICON_MAP } from "./snap-icon.js";
-const VARIANT_MAP = {
-    primary: "primary",
-    secondary: "secondary",
-};
 export function SnapActionButton({ element: { props }, emit, }) {
     const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
     const label = String(props.label ?? "Action");
-    const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
+    const variant = String(props.variant ?? "secondary");
+    const isPrimary = variant === "primary";
     const iconName = props.icon ? String(props.icon) : undefined;
-    const variantStyle = (() => {
-        switch (variant) {
-            case "primary":
-                return { backgroundColor: accentHex };
-            case "secondary":
-                return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
-        }
-    })();
-    const textColor = variant === "primary" ? "#fff" : accentHex;
-    const iconColor = variant === "primary" ? "#fff" : accentHex;
+    const textColor = isPrimary ? "#fff" : colors.text;
+    const iconColor = isPrimary ? "#fff" : colors.text;
     return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
                 styles.btn,
-                variant === "primary" ? styles.btnDefault : styles.btnOther,
-                variantStyle,
+                isPrimary ? styles.btnDefault : styles.btnOther,
+                isPrimary
+                    ? { backgroundColor: pressed ? accentHex + "DD" : accentHex }
+                    : { backgroundColor: pressed ? colors.mutedHover : colors.muted },
                 pressed && styles.pressed,
             ], onPress: () => {
                 void (async () => {
@@ -35,7 +26,6 @@ export function SnapActionButton({ element: { props }, emit, }) {
                     }
                     catch (err) {
                         if (typeof __DEV__ !== "undefined" && __DEV__) {
-                            // eslint-disable-next-line no-console
                             console.error("[snap] action failed", err);
                         }
                     }

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

@@ -71,7 +71,7 @@ export function SnapCellGrid({ element: { props }, }) {
     const selectionLabel = interactive && selectedSet.size > 0
         ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
         : null;
-    return (_jsxs(View, { style: [styles.wrap, { gap: gapPx }], children: [rowEls, selectionLabel ? (_jsx(Text, { style: [styles.selectionText, { color: colors.textSecondary }], children: selectionLabel })) : null] }));
+    return (_jsxs(View, { style: [styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], children: [rowEls, selectionLabel ? (_jsx(Text, { style: [styles.selectionText, { color: colors.textSecondary }], children: selectionLabel })) : null] }));
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%" },

package/dist/react-native/components/snap-switch.js

@@ -13,7 +13,7 @@ export function SnapSwitch({ element: { props }, }) {
     const fallback = Boolean(props.defaultChecked ?? false);
     const raw = get(path);
     const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
-    return (_jsxs(View, { style: styles.row, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(Switch, { value: checked, onValueChange: (v) => set(path, v), trackColor: { false: colors.border, true: accentHex }, thumbColor: "#fff" })] }));
+    return (_jsxs(View, { style: styles.row, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(Switch, { value: checked, onValueChange: (v) => set(path, v), trackColor: { false: colors.muted, true: accentHex }, thumbColor: "#fff" })] }));
 }
 const styles = StyleSheet.create({
     row: {

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

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 export function SnapToggleGroup({ element: { props }, }) {
     const { get, set } = useStateStore();
-    const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
     const name = String(props.name ?? "toggle_group");
     const path = `/inputs/${name}`;
@@ -49,19 +47,23 @@ export function SnapToggleGroup({ element: { props }, }) {
     };
     return (_jsxs(View, { style: styles.wrap, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(View, { style: [
                     styles.group,
-                    { backgroundColor: colors.border + "33" },
+                    { backgroundColor: colors.muted },
                     isVertical ? styles.groupVertical : styles.groupHorizontal,
                 ], children: options.map((opt, index) => {
                     const isSelected = selected.includes(opt);
                     return (_jsx(Pressable, { style: ({ pressed }) => [
                             styles.option,
-                            isSelected && { backgroundColor: accentHex },
-                            pressed && styles.pressed,
+                            {
+                                backgroundColor: isSelected
+                                    ? colors.mutedSelected
+                                    : pressed
+                                        ? colors.mutedHover
+                                        : colors.mutedSubtle,
+                            },
                             !isVertical && styles.optionHorizontal,
                         ], onPress: () => handlePress(opt), children: _jsx(Text, { style: [
                                 styles.optionText,
                                 { color: colors.text },
-                                isSelected && styles.optionTextSelected,
                             ], children: opt }) }, index));
                 }) })] }));
 }
@@ -89,12 +91,8 @@ const styles = StyleSheet.create({
     optionHorizontal: {
         flex: 1,
     },
-    pressed: { opacity: 0.88 },
     optionText: {
         fontSize: 13,
         fontWeight: "500",
     },
-    optionTextSelected: {
-        color: "#fff",
-    },
 });

package/dist/react-native/index.js

@@ -133,7 +133,7 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
     return (_jsxs(View, { style: styles.container, children: [loading && (_jsx(View, { style: [
                     styles.overlay,
                     {
-                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.75)",
+                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
                     },
                 ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })), _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                     applyStatePaths(stateRef.current, changes);

package/dist/react-native/theme.d.ts

@@ -7,6 +7,12 @@ export type SnapNativeColors = {
     border: string;
     inputBg: string;
     muted: string;
+    /** Subtle tint for toggle button resting state */
+    mutedSubtle: string;
+    /** Slightly stronger tint for hover/press state */
+    mutedHover: string;
+    /** Stronger tint for selected state (toggle group) */
+    mutedSelected: string;
 };
 interface SnapThemeValue {
     mode: "light" | "dark";

package/dist/react-native/theme.js

@@ -5,18 +5,24 @@ const DEFAULT_LIGHT = {
     surface: "#ffffff",
     text: "#111111",
     textSecondary: "#6b7280",
-    border: "#d1d5db",
-    inputBg: "#ffffff",
-    muted: "#f9fafb",
+    border: "#E5E7EB",
+    inputBg: "rgba(0,0,0,0.12)",
+    muted: "rgba(0,0,0,0.12)",
+    mutedSubtle: "rgba(0,0,0,0.06)",
+    mutedHover: "rgba(0,0,0,0.10)",
+    mutedSelected: "rgba(0,0,0,0.18)",
 };
 const DEFAULT_DARK = {
     bg: "#111318",
     surface: "#1a1d24",
     text: "#fafafa",
     textSecondary: "#a1a1aa",
-    border: "#374151",
-    inputBg: "#1a1d24",
-    muted: "#27272a",
+    border: "#2D2D44",
+    inputBg: "rgba(255,255,255,0.03)",
+    muted: "rgba(255,255,255,0.03)",
+    mutedSubtle: "rgba(255,255,255,0.02)",
+    mutedHover: "rgba(255,255,255,0.04)",
+    mutedSelected: "rgba(255,255,255,0.10)",
 };
 const SnapThemeContext = createContext({
     mode: "dark",

package/dist/ui/catalog.d.ts

@@ -392,6 +392,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     none: "none";
                     lg: "lg";
                 }>>;
+                rowHeight: z.ZodOptional<z.ZodNumber>;
                 select: z.ZodOptional<z.ZodEnum<{
                     multiple: "multiple";
                     off: "off";

package/dist/ui/cell-grid.d.ts

@@ -24,6 +24,7 @@ export declare const cellGridProps: z.ZodObject<{
         none: "none";
         lg: "lg";
     }>>;
+    rowHeight: z.ZodOptional<z.ZodNumber>;
     select: z.ZodOptional<z.ZodEnum<{
         multiple: "multiple";
         off: "off";

package/dist/ui/cell-grid.js

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

package/llms.txt

@@ -88,6 +88,7 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 - `rows` (number, required, 2–16)
 - `cells` (array, required): sparse list of `{ row, col, color?: PaletteColor, content?: string }`
 - `gap` (optional): `"none"` (0px) | `"sm"` (1px) | `"md"` (2px) | `"lg"` (4px). Default: `"sm"`
+- `rowHeight` (number, optional, 8–64): pixel height per row. Default: 28. Grid height = rows × rowHeight
 - `select` (optional): `"off"` | `"single"` | `"multiple"`. Default: `"off"`. Taps write to `inputs[name]`
 
 ### Container Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/components/action-button.tsx

@@ -1,15 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
-const VARIANT_MAP: Record<string, "default" | "secondary"> = {
-  primary: "default",
-  secondary: "secondary",
-};
-
 export function SnapActionButton({
   element: { props },
   emit,
@@ -18,25 +14,36 @@ export function SnapActionButton({
   emit: (name: string) => void;
 }) {
   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;
 
+  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 (
-    <div className="w-full min-w-0 flex-1" style={accentStyle}>
+    <div className="w-full min-w-0 flex-1">
       <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)]",
-        )}
+        variant={isPrimary ? "default" : "secondary"}
+        className={cn("w-full gap-2")}
+        style={style}
         onClick={() => emit("press")}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
       >
         {Icon && <Icon size={16} />}
         {label}

package/src/react/components/badge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Badge } from "@neynar/ui/badge";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors, pickForegroundForBg } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
 export function SnapBadge({
@@ -13,25 +13,22 @@ export function SnapBadge({
   const variant = String(props.variant ?? "default") as "default" | "outline";
   const color = props.color ? String(props.color) : undefined;
   const iconName = props.icon ? String(props.icon) : undefined;
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
+
+  const badgeColor = colors.colorHex(color);
+  const badgeFg = variant === "default" ? pickForegroundForBg(badgeColor) : badgeColor;
 
-  const isAccent = !color || color === "accent";
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
+  const style =
+    variant === "outline"
+      ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
+      : { backgroundColor: badgeColor, color: badgeFg, borderColor: "transparent" };
+
   return (
-    <span style={isAccent ? accentStyle : undefined}>
-      <Badge
-        variant={variant}
-        className="gap-1"
-        style={
-          variant === "outline" && !isAccent
-            ? { borderColor: `var(--snap-color-${color})`, color: `var(--snap-color-${color})` }
-            : undefined
-        }
-      >
-        {Icon && <Icon size={12} />}
-        {content}
-      </Badge>
-    </span>
+    <Badge variant={variant} className="gap-1" style={style}>
+      {Icon && <Icon size={12} />}
+      {content}
+    </Badge>
   );
 }

package/src/react/components/bar-chart.tsx

@@ -1,17 +1,15 @@
 "use client";
 
-import type { PaletteColor } from "@farcaster/snap";
-import { PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapBarChart({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  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)
@@ -20,18 +18,13 @@ export function SnapBarChart({
           1,
         );
 
-  function barColor(bar: { color?: string }): string {
-    if (bar.color && bar.color in PALETTE_LIGHT_HEX) {
-      return `var(--snap-color-${bar.color}, ${PALETTE_LIGHT_HEX[bar.color as PaletteColor]})`;
-    }
-    if (chartColor !== "accent" && chartColor in PALETTE_LIGHT_HEX) {
-      return `var(--snap-color-${chartColor}, ${PALETTE_LIGHT_HEX[chartColor as PaletteColor]})`;
-    }
-    return "var(--primary)";
+  function barFill(bar: { color?: string }): string {
+    if (bar.color) return colors.colorHex(bar.color);
+    return colors.colorHex(chartColor);
   }
 
   return (
-    <div className="flex w-full flex-col gap-2" style={accentStyle}>
+    <div className="flex w-full flex-col gap-2">
       {bars.map(
         (
           bar: { label?: string; value?: number; color?: string },
@@ -39,23 +32,32 @@ export function SnapBarChart({
         ) => {
           const value = Number(bar.value ?? 0);
           const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
-          const fill = barColor(bar);
+          const fill = barFill(bar);
           return (
             <div key={i} className="flex w-full items-center gap-2">
-              <span className="text-muted-foreground w-20 shrink-0 truncate text-right text-xs">
+              <span
+                className="w-20 shrink-0 truncate text-right text-xs"
+                style={{ color: colors.textMuted }}
+              >
                 {String(bar.label ?? "")}
               </span>
-              <div className="bg-muted h-2.5 flex-1 overflow-hidden rounded-full">
+              <div
+                className="h-2.5 flex-1 overflow-hidden rounded-full"
+                style={{ backgroundColor: colors.muted }}
+              >
                 <div
                   className="h-full rounded-full transition-all"
                   style={{
                     width: `${pct}%`,
                     minWidth: pct > 0 ? 4 : 0,
-                    background: fill,
+                    backgroundColor: fill,
                   }}
                 />
               </div>
-              <span className="text-muted-foreground w-8 shrink-0 text-xs tabular-nums">
+              <span
+                className="w-8 shrink-0 text-xs tabular-nums"
+                style={{ color: colors.textMuted }}
+              >
                 {value}
               </span>
             </div>

package/src/react/components/cell-grid.tsx

@@ -3,10 +3,8 @@
 import type { ReactNode } from "react";
 import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
-import { POST_GRID_TAP_KEY, PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import type { PaletteColor } from "@farcaster/snap";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
-import { useColorMode } from "@neynar/ui/color-mode";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapCellGrid({
   element: { props },
@@ -14,8 +12,7 @@ export function SnapCellGrid({
   element: { props: Record<string, unknown> };
 }) {
   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");
@@ -25,6 +22,7 @@ export function SnapCellGrid({
   const gap = String(props.gap ?? "sm");
   const gapMap: Record<string, number> = { 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}`;
@@ -60,17 +58,12 @@ export function SnapCellGrid({
     });
   }
 
-  const ringColor = appearance === "dark" ? "#fff" : "#000";
-
   const cellEls: ReactNode[] = [];
   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 as PaletteColor]})`
-          : "transparent";
+      const bg = cell?.color ? colors.colorHex(cell.color) : "transparent";
 
       cellEls.push(
         <div
@@ -89,14 +82,14 @@ export function SnapCellGrid({
               : undefined
           }
           className={cn(
-            "flex min-h-7 items-center justify-center rounded text-xs font-semibold",
+            "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,
           }}
         >
@@ -111,18 +104,22 @@ export function SnapCellGrid({
     : null;
 
   return (
-    <div style={accentStyle}>
+    <div>
       <div
-        className="grid w-full"
         style={{
-          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+          display: "grid",
+          width: "100%",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
           gap: gapPx,
+          padding: 4,
+          borderRadius: 8,
+          backgroundColor: colors.muted,
         }}
       >
         {cellEls}
       </div>
       {selectionLabel && (
-        <div className="text-muted-foreground mt-1.5 truncate text-xs font-mono">
+        <div className="mt-1.5 truncate text-xs font-mono" style={{ color: colors.textMuted }}>
           {selectionLabel}
         </div>
       )}

package/src/react/components/icon.tsx

@@ -36,7 +36,7 @@ import {
   TrendingDown,
   type LucideIcon,
 } from "lucide-react";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export const ICON_MAP: Record<string, LucideIcon> = {
   "arrow-right": ArrowRight,
@@ -87,29 +87,16 @@ export function SnapIcon({
   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";
+  const iconColor = colors.colorHex(color);
 
   return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        ...(isAccent ? accentStyle : {}),
-      }}
-    >
-      <Icon
-        size={size}
-        style={
-          isAccent
-            ? { color: "var(--snap-accent, currentColor)" }
-            : { color: `var(--snap-color-${color}, currentColor)` }
-        }
-      />
+    <span style={{ display: "inline-flex", alignItems: "center" }}>
+      <Icon size={size} style={{ color: iconColor }} />
     </span>
   );
 }

package/src/react/components/input.tsx

@@ -4,32 +4,43 @@ 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";
 
 export function SnapInput({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  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 : "";
+  const maxLength = props.maxLength ? Number(props.maxLength) : undefined;
+  const path = `/inputs/${name}`;
+  const value = (get(path) as string) ?? (props.defaultValue != null ? String(props.defaultValue) : "");
+  const id = useId();
 
   return (
     <div className="w-full space-y-1.5">
-      {label && <Label htmlFor={id}>{label}</Label>}
+      {label && (
+        <Label htmlFor={id} style={{ color: colors.text }}>
+          {label}
+        </Label>
+      )}
       <Input
         id={id}
-        value={value}
-        onChange={(e) => set(path, e.target.value)}
+        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,
+        }}
       />
     </div>
   );

package/src/react/components/item-group.tsx

@@ -2,6 +2,7 @@
 
 import { Children, type ReactNode, Fragment } from "react";
 import { cn } from "@neynar/ui/utils";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 const GAP_MAP: Record<string, string> = {
   none: "gap-0",
@@ -21,6 +22,7 @@ export function SnapItemGroup({
   const separator = Boolean(props.separator);
   const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
   const items = Children.toArray(children);
+  const colors = useSnapColors();
 
   return (
     <div
@@ -29,11 +31,12 @@ export function SnapItemGroup({
         border && "rounded-lg border",
         gap,
       )}
+      style={border ? { borderColor: colors.border } : undefined}
     >
       {items.map((child, i) => (
         <Fragment key={i}>
           {separator && i > 0 && (
-            <div className="h-px bg-border" />
+            <div className="h-px" style={{ backgroundColor: colors.border }} />
           )}
           {child}
         </Fragment>