@farcaster/snap 1.5.1 → 1.6.0

package/src/react/components/item.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  Item,
+  ItemContent,
+  ItemTitle,
+  ItemDescription,
+  ItemActions,
+} from "@neynar/ui/item";
+
+export function SnapItem({
+  element: { props },
+  children,
+}: {
+  element: { props: Record<string, unknown> };
+  children?: ReactNode;
+}) {
+  const title = String(props.title ?? "");
+  const description = props.description ? String(props.description) : undefined;
+  const variant =
+    (props.variant as "default" | "outline" | "muted") ?? "default";
+
+  return (
+    <Item variant={variant} className={`flex-1 py-1.5 px-2.5 ${variant === "muted" ? "!bg-border/20" : ""}`}>
+      <ItemContent className="gap-0.5">
+        <ItemTitle>{title}</ItemTitle>
+        {description && <ItemDescription className="mt-0">{description}</ItemDescription>}
+      </ItemContent>
+      {children && <ItemActions>{children}</ItemActions>}
+    </Item>
+  );
+}

package/src/react/components/progress.tsx

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

package/src/react/components/separator.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Separator } from "@neynar/ui/separator";
+
+export function SnapSeparator({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const orientation =
+    (props.orientation as "horizontal" | "vertical") ?? "horizontal";
+
+  return <Separator orientation={orientation} />;
+}

package/src/react/components/slider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+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.
+
+export function SnapSlider({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const { get, set } = useStateStore();
+  const accentStyle = useSnapAccentScopeStyle();
+
+  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 raw = get(path);
+  const value = raw === undefined || raw === null ? fallback : Number(raw);
+
+  return (
+    <div className="flex w-full flex-col gap-1.5" style={accentStyle}>
+      {label && <Label>{label}</Label>}
+      <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)" }}
+      />
+    </div>
+  );
+}

package/src/react/components/stack.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@neynar/ui/utils";
+
+const VGAP: Record<string, string> = {
+  none: "gap-0",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+};
+
+const HGAP: Record<string, string> = {
+  none: "gap-0",
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-3",
+};
+
+const JUSTIFY: Record<string, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+};
+
+export function SnapStack({
+  element: { props },
+  children,
+}: {
+  element: { props: Record<string, unknown> };
+  children?: ReactNode;
+}) {
+  const direction = String(props.direction ?? "vertical");
+  const gapKey = String(props.gap ?? "md");
+  const isHorizontal = direction === "horizontal";
+  const gap = isHorizontal
+    ? (HGAP[gapKey] ?? "gap-2")
+    : (VGAP[gapKey] ?? "gap-4");
+  const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
+
+  return (
+    <div
+      className={cn(
+        "flex w-full",
+        isHorizontal ? "flex-row items-center flex-wrap" : "flex-col",
+        gap,
+        justify,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/react/components/switch.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+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";
+
+export function SnapSwitch({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const id = useId();
+  const { get, set } = useStateStore();
+  const { mode } = useColorMode();
+  const accentStyle = useSnapAccentScopeStyle();
+  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 raw = get(path);
+  const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
+
+  return (
+    <div className="flex items-center justify-between gap-3">
+      {label && (
+        <Label htmlFor={id} className="text-foreground font-normal">
+          {label}
+        </Label>
+      )}
+      <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)",
+        )}
+      />
+    </div>
+  );
+}

package/src/react/components/text.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Text, Title } from "@neynar/ui/typography";
+
+const SIZE_MAP = {
+  lg: { component: "title", textSize: undefined, order: 3 },
+  md: { component: "text", textSize: "base" as const, order: undefined },
+  sm: { component: "text", textSize: "sm" as const, order: undefined },
+} as const;
+
+const WEIGHT_MAP = {
+  bold: "bold",
+  medium: "medium",
+  normal: "normal",
+} as const;
+
+export function SnapText({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const content = String(props.content ?? "");
+  const size = String(props.size ?? "md") as "lg" | "md" | "sm";
+  const weight = props.weight ? String(props.weight) as "bold" | "medium" | "normal" : undefined;
+  const align = (props.align as "left" | "center" | "right") ?? undefined;
+  const config = SIZE_MAP[size] ?? SIZE_MAP.md;
+
+  const alignClass = align === "center" ? "text-center" : align === "right" ? "text-right" : "";
+
+  if (config.component === "title") {
+    return (
+      <Title order={config.order} weight={weight ?? "bold"} className={`flex-1 ${alignClass}`}>
+        {content}
+      </Title>
+    );
+  }
+
+  return (
+    <Text size={config.textSize} weight={weight} align={align} className="flex-1">
+      {content}
+    </Text>
+  );
+}

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

@@ -0,0 +1,85 @@
+"use client";
+
+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";
+
+export function SnapToggleGroup({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const { get, set } = useStateStore();
+  const accentStyle = useSnapAccentScopeStyle();
+  const name = String(props.name ?? "toggle_group");
+  const path = `/inputs/${name}`;
+  const label = props.label ? String(props.label) : undefined;
+  const isMultiple = Boolean(props.multiple);
+  const orientation = String(props.orientation ?? "horizontal");
+  const options = Array.isArray(props.options)
+    ? (props.options as string[])
+    : [];
+
+  const raw = get(path);
+  const defaultValue = props.defaultValue;
+
+  const selected = (() => {
+    if (raw !== undefined && raw !== null) {
+      return isMultiple
+        ? Array.isArray(raw) ? (raw as string[]) : []
+        : typeof raw === "string" ? [raw] : [];
+    }
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue) ? defaultValue as string[] : [String(defaultValue)];
+    }
+    return [];
+  })();
+
+  const toggle = (opt: string) => {
+    if (isMultiple) {
+      const current = Array.isArray(raw) ? (raw as string[]) : [];
+      if (current.includes(opt)) {
+        set(path, current.filter((v) => v !== opt));
+      } else {
+        set(path, [...current, opt]);
+      }
+    } else {
+      set(path, opt);
+    }
+  };
+
+  const isVertical = orientation === "vertical";
+
+  return (
+    <div className="w-full space-y-1.5" style={accentStyle}>
+      {label && <Label>{label}</Label>}
+      <div
+        className={cn(
+          "flex gap-1 rounded-lg bg-border/20 p-1",
+          isVertical ? "flex-col" : "flex-row",
+        )}
+      >
+        {options.map((opt) => {
+          const isSelected = selected.includes(opt);
+          return (
+            <button
+              key={opt}
+              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",
+              )}
+            >
+              {opt}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/react/hooks/use-snap-accent.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import { useMemo, type CSSProperties } from "react";
+import { useStateStore } from "@json-render/react";
+import type { PaletteColor } from "@farcaster/snap";
+import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { useColorMode } from "@neynar/ui/color-mode";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
+import { snapPreviewPrimaryCssProperties } from "../lib/preview-primary-css";
+import { useSnapPreviewPageAccent } from "../accent-context";
+
+/**
+ * CSS variables so Neynar controls (`bg-primary`, `data-checked:bg-primary`, etc.)
+ * use the snap `theme.accent` inside json-render catalog components.
+ */
+export function useSnapAccentScopeStyle(): CSSProperties {
+  const { get } = useStateStore();
+  const { mode } = useColorMode();
+  const pageAccent = useSnapPreviewPageAccent();
+  const fromState = get("/theme/accent");
+  const accentRaw =
+    (typeof pageAccent === "string" && pageAccent.length > 0
+      ? pageAccent
+      : fromState) ?? undefined;
+  const accentName =
+    typeof accentRaw === "string" && accentRaw.length > 0
+      ? accentRaw
+      : "purple";
+  return useMemo(
+    () => snapPreviewPrimaryCssProperties(accentName, mode),
+    [accentName, mode],
+  );
+}
+
+/** Active snap palette table for the current docs shell theme. */
+export function useSnapPalette(): {
+  hex: (name: string) => string;
+  map: Record<PaletteColor, string>;
+  theme: "light" | "dark";
+} {
+  const { mode } = useColorMode();
+  const map = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+  const hex = (name: string) => resolveSnapPaletteHex(name, mode);
+  return { hex, map, theme: mode };
+}