@farcaster/snap 2.0.0 → 2.0.2

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

@@ -1,47 +1,77 @@
 "use client";
 
+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";
+import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
-const VARIANT_MAP: Record<string, "default" | "outline" | "ghost" | "secondary"> = {
-  default: "default",
-  secondary: "secondary",
-  outline: "outline",
-  ghost: "ghost",
-};
+function isExternalLinkAction(
+  on: Record<string, unknown> | undefined,
+): boolean {
+  if (!on) return false;
+  const press = on.press as
+    | { action?: string; params?: Record<string, unknown> }
+    | undefined;
+  if (!press) return false;
+  return press.action === "open_url";
+}
 
 export function SnapActionButton({
-  element: { props },
+  element,
   emit,
 }: {
-  element: { props: Record<string, unknown> };
+  element: {
+    props: Record<string, unknown>;
+    on?: Record<string, unknown>;
+  };
   emit: (name: string) => void;
 }) {
+  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;
+  const showExternalIcon = isExternalLinkAction(element.on);
+
+  const style = {
+    cursor: "pointer" as const,
+    ...(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}
+        {showExternalIcon && (
+          <ExternalLink size={14} style={{ opacity: 0.6 }} />
+        )}
       </Button>
     </div>
   );

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 } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
 export function SnapBadge({
@@ -10,28 +10,24 @@ export function SnapBadge({
   element: { props: Record<string, unknown> };
 }) {
   const content = String(props.label ?? "");
+  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 isAccent = !color || color === "accent";
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
+  const style =
+    variant === "outline"
+      ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
+      : { backgroundColor: `${badgeColor}20`, color: badgeColor, borderColor: "transparent" };
+
   return (
-    <span style={isAccent ? accentStyle : undefined}>
-      <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
-        }
-      >
-        {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

@@ -0,0 +1,69 @@
+"use client";
+
+import { useSnapColors } from "../hooks/use-snap-colors";
+
+export function SnapBarChart({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  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: { value?: number }) => Number(b.value ?? 0)),
+          1,
+        );
+
+  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">
+      {bars.map(
+        (
+          bar: { label?: string; value?: number; color?: string },
+          i: number,
+        ) => {
+          const value = Number(bar.value ?? 0);
+          const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+          const fill = barFill(bar);
+          return (
+            <div key={i} className="flex w-full items-center gap-2">
+              <span
+                className="w-20 shrink-0 truncate text-right text-xs"
+                style={{ color: colors.textMuted }}
+              >
+                {String(bar.label ?? "")}
+              </span>
+              <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,
+                    backgroundColor: fill,
+                  }}
+                />
+              </div>
+              <span
+                className="w-8 shrink-0 text-xs tabular-nums"
+                style={{ color: colors.textMuted }}
+              >
+                {value}
+              </span>
+            </div>
+          );
+        },
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,128 @@
+"use client";
+
+import type { ReactNode } from "react";
+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";
+
+export function SnapCellGrid({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  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: 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}`;
+  const tapRaw = get(tapPath);
+
+  // Parse selection — single mode: "row,col" string; multi mode: "row,col|row,col|..." string
+  const selectedSet = new Set<string>();
+  if (typeof tapRaw === "string" && tapRaw.length > 0) {
+    for (const part of tapRaw.split("|")) {
+      if (part.includes(",")) selectedSet.add(part);
+    }
+  }
+
+  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+
+  const handleTap = (r: number, c: number) => {
+    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<string, { color?: string; content?: string }>();
+  for (const c of cells) {
+    cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+      color: c.color as string | undefined,
+      content: c.content != null ? String(c.content) : undefined,
+    });
+  }
+
+  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 ? colors.colorHex(cell.color) : "transparent";
+
+      cellEls.push(
+        <div
+          key={`${r}-${c}`}
+          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,
+          }}
+        >
+          {cell?.content ?? ""}
+        </div>,
+      );
+    }
+  }
+
+  const selectionLabel = interactive && selectedSet.size > 0
+    ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+    : null;
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "grid",
+          width: "100%",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: gapPx,
+          padding: 4,
+          borderRadius: 8,
+          backgroundColor: colors.muted,
+        }}
+      >
+        {cellEls}
+      </div>
+      {selectionLabel && (
+        <div className="mt-1.5 truncate text-xs font-mono" style={{ color: colors.textMuted }}>
+          {selectionLabel}
+        </div>
+      )}
+    </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>

package/src/react/components/item.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { ReactNode } from "react";
 import {
   Item,
   ItemContent,
@@ -8,26 +7,30 @@ import {
   ItemDescription,
   ItemActions,
 } from "@neynar/ui/item";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapItem({
-  element: { props },
+  element: { props, children: childIds },
   children,
 }: {
-  element: { props: Record<string, unknown> };
-  children?: ReactNode;
+  element: { props: Record<string, unknown>; children?: string[] };
+  children?: React.ReactNode;
 }) {
   const title = String(props.title ?? "");
   const description = props.description ? String(props.description) : undefined;
-  const variant =
-    (props.variant as "default" | "outline" | "muted") ?? "default";
+  const colors = useSnapColors();
 
   return (
-    <Item variant={variant} className={`flex-1 py-1.5 px-2.5 ${variant === "muted" ? "!bg-border/20" : ""}`}>
+    <Item className="flex-1 py-1.5 px-2.5">
       <ItemContent className="gap-0.5">
-        <ItemTitle>{title}</ItemTitle>
-        {description && <ItemDescription className="mt-0">{description}</ItemDescription>}
+        <ItemTitle style={{ color: colors.text }}>{title}</ItemTitle>
+        {description && (
+          <ItemDescription className="mt-0" style={{ color: colors.textMuted }}>
+            {description}
+          </ItemDescription>
+        )}
       </ItemContent>
-      {children && <ItemActions>{children}</ItemActions>}
+      {childIds && childIds.length > 0 && <ItemActions>{children}</ItemActions>}
     </Item>
   );
 }

package/src/react/components/progress.tsx

@@ -1,27 +1,32 @@
 "use client";
 
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapProgress({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  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 (
-    <div className="flex w-full flex-1 flex-col gap-1" style={accentStyle}>
+    <div className="flex w-full flex-1 flex-col gap-1">
       {label && (
-        <span className="text-muted-foreground text-xs">{label}</span>
+        <span className="text-xs" style={{ color: colors.textMuted }}>
+          {label}
+        </span>
       )}
-      <div className="bg-muted h-2.5 w-full overflow-hidden rounded-full">
+      <div
+        className="h-2.5 w-full overflow-hidden rounded-full"
+        style={{ backgroundColor: colors.muted }}
+      >
         <div
-          className="h-full rounded-full bg-primary transition-all"
-          style={{ width: `${percent}%` }}
+          className="h-full rounded-full transition-all"
+          style={{ width: `${percent}%`, backgroundColor: colors.accent }}
         />
       </div>
     </div>

package/src/react/components/separator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Separator } from "@neynar/ui/separator";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapSeparator({
   element: { props },
@@ -9,6 +10,12 @@ export function SnapSeparator({
 }) {
   const orientation =
     (props.orientation as "horizontal" | "vertical") ?? "horizontal";
+  const colors = useSnapColors();
 
-  return <Separator orientation={orientation} />;
+  return (
+    <Separator
+      orientation={orientation}
+      style={{ backgroundColor: colors.border }}
+    />
+  );
 }

package/src/react/components/slider.tsx

@@ -2,10 +2,7 @@
 
 import { useStateStore } from "@json-render/react";
 import { Label } from "@neynar/ui/label";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
-
-// 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";
 
 export function SnapSlider({
   element: { props },
@@ -13,21 +10,34 @@ export function SnapSlider({
   element: { props: Record<string, unknown> };
 }) {
   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);
+  const value =
+    raw !== undefined
+      ? Number(raw)
+      : props.defaultValue !== undefined
+        ? Number(props.defaultValue)
+        : (min + max) / 2;
 
   return (
-    <div className="flex w-full flex-col gap-1.5" style={accentStyle}>
-      {label && <Label>{label}</Label>}
+    <div className="flex w-full flex-col gap-1.5">
+      {label && (
+        <div className="flex items-center justify-between">
+          <Label style={{ color: colors.text }}>{label}</Label>
+          {showValue && (
+            <span style={{ color: colors.textMuted, fontSize: 13, lineHeight: "18px" }}>
+              {Math.round(value)}
+            </span>
+          )}
+        </div>
+      )}
       <input
         type="range"
         min={min}
@@ -35,8 +45,11 @@ export function SnapSlider({
         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)" }}
+        className="w-full h-2.5 rounded-full appearance-none cursor-pointer"
+        style={{
+          backgroundColor: colors.muted,
+          accentColor: colors.accent,
+        }}
       />
     </div>
   );