@farcaster/snap 1.5.2 → 2.0.0

package/dist/constants.d.ts

@@ -1,110 +1,3 @@
-export declare const POST_GRID_TAP_KEY: "grid_tap";
 export declare const SPEC_VERSION: "1.0";
 export declare const MEDIA_TYPE: "application/vnd.farcaster.snap+json";
-export declare const LIMITS: {
-    readonly maxElementsPerPage: 5;
-    readonly maxButtonsPerPage: 4;
-    readonly maxTextInputChars: 280;
-    readonly maxListItems: 4;
-    readonly minListItems: 1;
-    readonly minButtonGroupOptions: 2;
-    readonly maxButtonGroupOptions: 4;
-    readonly maxButtonGroupOptionChars: 40;
-    readonly maxButtonLabelChars: 30;
-    readonly listItemContentMaxChars: 100;
-    readonly listItemTrailingMaxChars: 40;
-    readonly minGridCols: 2;
-    readonly maxGridCols: 64;
-    readonly minGridRows: 2;
-    readonly maxGridRows: 8;
-    readonly minGroupChildren: 2;
-    readonly maxGroupChildren: 3;
-    readonly maxBarChartBars: 6;
-    readonly barChartLabelMaxChars: 40;
-    readonly maxEstimatedPageHeightPx: 500;
-};
-export declare const TEXT_STYLE: {
-    readonly title: "title";
-    readonly body: "body";
-    readonly caption: "caption";
-    readonly label: "label";
-};
-export declare const TEXT_STYLE_VALUES: readonly ["title", "body", "caption", "label"];
-export declare const TEXT_ALIGN_VALUES: readonly ["left", "center", "right"];
-export declare const IMAGE_ASPECT_VALUES: readonly ["1:1", "16:9", "4:3", "3:4", "9:16"];
-export declare const SPACER_SIZE: {
-    readonly small: "small";
-    readonly medium: "medium";
-    readonly large: "large";
-};
-export declare const SPACER_SIZE_VALUES: readonly ["small", "medium", "large"];
-export declare const LIST_STYLE_VALUES: readonly ["ordered", "unordered", "plain"];
-export declare const DEFAULT_LIST_STYLE: "ordered";
-export declare const GRID_CELL_SIZE_VALUES: readonly ["auto", "square"];
-export declare const GRID_GAP_VALUES: readonly ["none", "small", "medium"];
-export declare const DEFAULT_GRID_GAP: "small";
-export declare const BUTTON_GROUP_STYLE: {
-    readonly row: "row";
-    readonly stack: "stack";
-    readonly grid: "grid";
-};
-export declare const BUTTON_GROUP_STYLE_VALUES: readonly ["row", "stack", "grid"];
-export declare const BUTTON_ACTION: {
-    readonly post: "post";
-    readonly link: "link";
-    readonly mini_app: "mini_app";
-    readonly client: "client";
-};
-export declare const BUTTON_ACTION_VALUES: readonly ["post", "link", "mini_app", "client"];
-export declare const CLIENT_ACTION: {
-    readonly view_cast: "view_cast";
-    readonly view_profile: "view_profile";
-    readonly compose_cast: "compose_cast";
-    readonly view_token: "view_token";
-    readonly send_token: "send_token";
-    readonly swap_token: "swap_token";
-};
-export declare const CLIENT_ACTION_VALUES: readonly ["view_cast", "view_profile", "compose_cast", "view_token", "send_token", "swap_token"];
-export declare const BUTTON_STYLE: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-};
-export declare const BUTTON_STYLE_VALUES: readonly ["primary", "secondary"];
-export declare const BUTTON_LAYOUT_VALUES: readonly ["stack", "row", "grid"];
-export declare const DEFAULT_BUTTON_LAYOUT: "stack";
 export declare const EFFECT_VALUES: readonly ["confetti"];
-export declare const GROUP_LAYOUT_VALUES: readonly ["row"];
-/** Only valid as `page.elements`: vertical container for the page body (matches json-render trees). */
-export declare const PAGE_ROOT_TYPE: {
-    readonly stack: "stack";
-};
-export declare const ELEMENT_TYPE: {
-    readonly text: "text";
-    readonly image: "image";
-    readonly divider: "divider";
-    readonly spacer: "spacer";
-    readonly progress: "progress";
-    readonly list: "list";
-    readonly grid: "grid";
-    readonly text_input: "text_input";
-    readonly slider: "slider";
-    readonly button_group: "button_group";
-    readonly toggle: "toggle";
-    readonly group: "group";
-    readonly bar_chart: "bar_chart";
-};
-export type ElementType = (typeof ELEMENT_TYPE)[keyof typeof ELEMENT_TYPE];
-export declare const HTTPS_PREFIX: "https://";
-export declare const HTTP_PREFIX: "http://";
-/** 6-digit hex only (#RRGGBB); used for grid cell backgrounds (free hex). */
-export declare const HEX_COLOR_6_RE: RegExp;
-export declare const TEXT_CONTENT_MAX: {
-    readonly title: 80;
-    readonly body: 160;
-    readonly caption: 100;
-    readonly label: 40;
-};
-export declare const SLIDER_STEP_ALIGN_EPS = 0.000001;
-export declare const DEFAULT_SLIDER_STEP: 1;
-export declare const MEDIA_ELEMENT_TYPES: ElementType[];
-export declare const INTERACTIVE_ELEMENT_TYPES: ElementType[];

package/dist/constants.js

@@ -1,151 +1,3 @@
-export const POST_GRID_TAP_KEY = "grid_tap";
 export const SPEC_VERSION = "1.0";
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json";
-export const LIMITS = {
-    maxElementsPerPage: 5,
-    maxButtonsPerPage: 4,
-    maxTextInputChars: 280,
-    maxListItems: 4,
-    minListItems: 1,
-    minButtonGroupOptions: 2,
-    maxButtonGroupOptions: 4,
-    maxButtonGroupOptionChars: 40,
-    maxButtonLabelChars: 30,
-    listItemContentMaxChars: 100,
-    listItemTrailingMaxChars: 40,
-    minGridCols: 2,
-    maxGridCols: 64,
-    minGridRows: 2,
-    maxGridRows: 8,
-    minGroupChildren: 2,
-    maxGroupChildren: 3,
-    maxBarChartBars: 6,
-    barChartLabelMaxChars: 40,
-    maxEstimatedPageHeightPx: 500,
-};
-export const TEXT_STYLE = {
-    title: "title",
-    body: "body",
-    caption: "caption",
-    label: "label",
-};
-export const TEXT_STYLE_VALUES = [
-    TEXT_STYLE.title,
-    TEXT_STYLE.body,
-    TEXT_STYLE.caption,
-    TEXT_STYLE.label,
-];
-export const TEXT_ALIGN_VALUES = ["left", "center", "right"];
-export const IMAGE_ASPECT_VALUES = [
-    "1:1",
-    "16:9",
-    "4:3",
-    "3:4",
-    "9:16",
-];
-export const SPACER_SIZE = {
-    small: "small",
-    medium: "medium",
-    large: "large",
-};
-export const SPACER_SIZE_VALUES = [
-    SPACER_SIZE.small,
-    SPACER_SIZE.medium,
-    SPACER_SIZE.large,
-];
-export const LIST_STYLE_VALUES = ["ordered", "unordered", "plain"];
-export const DEFAULT_LIST_STYLE = "ordered";
-export const GRID_CELL_SIZE_VALUES = ["auto", "square"];
-export const GRID_GAP_VALUES = ["none", "small", "medium"];
-export const DEFAULT_GRID_GAP = "small";
-export const BUTTON_GROUP_STYLE = {
-    row: "row",
-    stack: "stack",
-    grid: "grid",
-};
-export const BUTTON_GROUP_STYLE_VALUES = [
-    BUTTON_GROUP_STYLE.row,
-    BUTTON_GROUP_STYLE.stack,
-    BUTTON_GROUP_STYLE.grid,
-];
-export const BUTTON_ACTION = {
-    post: "post",
-    link: "link",
-    mini_app: "mini_app",
-    client: "client",
-};
-export const BUTTON_ACTION_VALUES = [
-    BUTTON_ACTION.post,
-    BUTTON_ACTION.link,
-    BUTTON_ACTION.mini_app,
-    BUTTON_ACTION.client,
-];
-export const CLIENT_ACTION = {
-    view_cast: "view_cast",
-    view_profile: "view_profile",
-    compose_cast: "compose_cast",
-    view_token: "view_token",
-    send_token: "send_token",
-    swap_token: "swap_token",
-};
-export const CLIENT_ACTION_VALUES = [
-    CLIENT_ACTION.view_cast,
-    CLIENT_ACTION.view_profile,
-    CLIENT_ACTION.compose_cast,
-    CLIENT_ACTION.view_token,
-    CLIENT_ACTION.send_token,
-    CLIENT_ACTION.swap_token,
-];
-export const BUTTON_STYLE = {
-    primary: "primary",
-    secondary: "secondary",
-};
-export const BUTTON_STYLE_VALUES = [
-    BUTTON_STYLE.primary,
-    BUTTON_STYLE.secondary,
-];
-export const BUTTON_LAYOUT_VALUES = ["stack", "row", "grid"];
-export const DEFAULT_BUTTON_LAYOUT = BUTTON_LAYOUT_VALUES[0];
 export const EFFECT_VALUES = ["confetti"];
-export const GROUP_LAYOUT_VALUES = ["row"];
-/** Only valid as `page.elements`: vertical container for the page body (matches json-render trees). */
-export const PAGE_ROOT_TYPE = {
-    stack: "stack",
-};
-export const ELEMENT_TYPE = {
-    text: "text",
-    image: "image",
-    divider: "divider",
-    spacer: "spacer",
-    progress: "progress",
-    list: "list",
-    grid: "grid",
-    text_input: "text_input",
-    slider: "slider",
-    button_group: "button_group",
-    toggle: "toggle",
-    group: "group",
-    bar_chart: "bar_chart",
-};
-export const HTTPS_PREFIX = "https://";
-export const HTTP_PREFIX = "http://";
-/** 6-digit hex only (#RRGGBB); used for grid cell backgrounds (free hex). */
-export const HEX_COLOR_6_RE = /^#[0-9a-fA-F]{6}$/;
-export const TEXT_CONTENT_MAX = {
-    [TEXT_STYLE.title]: 80,
-    [TEXT_STYLE.body]: 160,
-    [TEXT_STYLE.caption]: 100,
-    [TEXT_STYLE.label]: 40,
-};
-export const SLIDER_STEP_ALIGN_EPS = 1e-6;
-export const DEFAULT_SLIDER_STEP = 1;
-export const MEDIA_ELEMENT_TYPES = [
-    ELEMENT_TYPE.image,
-    ELEMENT_TYPE.grid,
-];
-export const INTERACTIVE_ELEMENT_TYPES = [
-    ELEMENT_TYPE.button_group,
-    ELEMENT_TYPE.slider,
-    ELEMENT_TYPE.text_input,
-    ELEMENT_TYPE.toggle,
-];

package/dist/dataStore.d.ts

@@ -0,0 +1,12 @@
+export type DataStoreValue = string | number | boolean | null | DataStoreValue[] | {
+    [key: string]: DataStoreValue;
+};
+export type SnapDataStoreOperations = {
+    get(key: string): Promise<DataStoreValue | null>;
+    set(key: string, value: DataStoreValue): Promise<void>;
+};
+export type SnapDataStore = SnapDataStoreOperations & {
+    withLock<T>(fn: (store: SnapDataStoreOperations) => Promise<T>): Promise<T>;
+};
+export declare function createDefaultDataStore(): SnapDataStore;
+export declare function createInMemoryDataStore(): SnapDataStore;

package/dist/dataStore.js

@@ -0,0 +1,35 @@
+export function createDefaultDataStore() {
+    const err = new Error("Data store is not configured. Use withUpstash() from @farcaster/snap-upstash or provide a data store implementation.");
+    return {
+        get(_key) {
+            return Promise.reject(err);
+        },
+        set(_key, _value) {
+            return Promise.reject(err);
+        },
+        withLock(_fn) {
+            return Promise.reject(err);
+        },
+    };
+}
+export function createInMemoryDataStore() {
+    const data = new Map();
+    const ops = {
+        get: async (key) => {
+            return data.get(key) ?? null;
+        },
+        set: async (key, value) => {
+            data.set(key, value);
+        },
+    };
+    /** Serializes `withLock` callbacks so async work does not interleave across callers. */
+    let lockChain = Promise.resolve();
+    return {
+        ...ops,
+        withLock(fn) {
+            const run = lockChain.then(() => fn(ops));
+            lockChain = run.then(() => undefined, () => undefined);
+            return run;
+        },
+    };
+}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-export { POST_GRID_TAP_KEY, PAGE_ROOT_TYPE, ELEMENT_TYPE, MEDIA_TYPE, DEFAULT_LIST_STYLE, DEFAULT_SLIDER_STEP, CLIENT_ACTION, CLIENT_ACTION_VALUES, } from "./constants.js";
+export type { Spec as SnapSpec, UIElement as SnapUIElement } from "@json-render/core";
+export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, } 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, firstPageResponseSchema, payloadSchema, clientActionSchema, createDefaultDataStore, type Button, type Element, type Elements, type GroupChildElement, type ClientAction, type SnapAction, type SnapPageElementInput, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapFunction, type SnapPayload, type DataStoreValue, type SnapDataStore, type SnapDataStoreOperations, } from "./schemas.js";
-export { validateSnapResponse, validateFirstPageResponse, type ValidationResult, } from "./validator.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";

package/dist/index.js

@@ -1,5 +1,6 @@
-export { POST_GRID_TAP_KEY, PAGE_ROOT_TYPE, ELEMENT_TYPE, MEDIA_TYPE, DEFAULT_LIST_STYLE, DEFAULT_SLIDER_STEP, CLIENT_ACTION, CLIENT_ACTION_VALUES, } from "./constants.js";
+export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, } 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, firstPageResponseSchema, payloadSchema, clientActionSchema, createDefaultDataStore, } from "./schemas.js";
-export { validateSnapResponse, validateFirstPageResponse, } from "./validator.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";

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

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

package/dist/react/accent-context.js

@@ -0,0 +1,10 @@
+"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 }));
+}
+export function useSnapPreviewPageAccent() {
+    return useContext(SnapPreviewAccentContext)?.pageAccent;
+}

package/dist/react/catalog-renderer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Maps snap json-render catalog types to React components.
+ * Keys match the snap wire-format `type` strings exactly.
+ */
+export declare const SnapCatalogView: import("react").ComponentType<import("@json-render/react").CreateRendererProps>;

package/dist/react/catalog-renderer.js

@@ -0,0 +1,37 @@
+"use client";
+import { createRenderer } from "@json-render/react";
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { SnapActionButton } from "./components/action-button.js";
+import { SnapBadge } from "./components/badge.js";
+import { SnapIcon } from "./components/icon.js";
+import { SnapImage } from "./components/image.js";
+import { SnapInput } from "./components/input.js";
+import { SnapItem } from "./components/item.js";
+import { SnapItemGroup } from "./components/item-group.js";
+import { SnapProgress } from "./components/progress.js";
+import { SnapSeparator } from "./components/separator.js";
+import { SnapSlider } from "./components/slider.js";
+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";
+/**
+ * Maps snap json-render catalog types to React components.
+ * Keys match the snap wire-format `type` strings exactly.
+ */
+export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
+    badge: SnapBadge,
+    button: SnapActionButton,
+    icon: SnapIcon,
+    image: SnapImage,
+    input: SnapInput,
+    item: SnapItem,
+    item_group: SnapItemGroup,
+    progress: SnapProgress,
+    separator: SnapSeparator,
+    slider: SnapSlider,
+    stack: SnapStack,
+    switch: SnapSwitch,
+    text: SnapText,
+    toggle_group: SnapToggleGroup,
+});

package/dist/react/components/action-button.d.ts

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

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@neynar/ui/button";
+import { cn } from "@neynar/ui/utils";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { ICON_MAP } from "./icon.js";
+const VARIANT_MAP = {
+    default: "default",
+    secondary: "secondary",
+    outline: "outline",
+    ghost: "ghost",
+};
+export function SnapActionButton({ element: { props }, emit, }) {
+    const label = String(props.label ?? "Action");
+    const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+    const iconName = props.icon ? String(props.icon) : undefined;
+    const accentStyle = useSnapAccentScopeStyle();
+    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] }) }));
+}

package/dist/react/components/badge.d.ts

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

package/dist/react/components/badge.js

@@ -0,0 +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 { ICON_MAP } from "./icon.js";
+export function SnapBadge({ element: { props }, }) {
+    const content = String(props.label ?? "");
+    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 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] }) }));
+}

package/dist/react/components/icon.d.ts

@@ -0,0 +1,7 @@
+import { type LucideIcon } from "lucide-react";
+export declare const ICON_MAP: Record<string, LucideIcon>;
+export declare function SnapIcon({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/components/icon.js

@@ -0,0 +1,60 @@
+"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";
+export const ICON_MAP = {
+    "arrow-right": ArrowRight,
+    "arrow-left": ArrowLeft,
+    "external-link": ExternalLink,
+    "chevron-right": ChevronRight,
+    check: Check,
+    x: X,
+    "alert-triangle": AlertTriangle,
+    info: Info,
+    clock: Clock,
+    heart: Heart,
+    "message-circle": MessageCircle,
+    repeat: Repeat,
+    share: Share,
+    user: User,
+    users: Users,
+    star: Star,
+    trophy: Trophy,
+    zap: Zap,
+    flame: Flame,
+    gift: Gift,
+    image: ImageIcon,
+    play: Play,
+    pause: Pause,
+    wallet: Wallet,
+    coins: Coins,
+    plus: Plus,
+    minus: Minus,
+    "refresh-cw": RefreshCw,
+    bookmark: Bookmark,
+    "thumbs-up": ThumbsUp,
+    "thumbs-down": ThumbsDown,
+    "trending-up": TrendingUp,
+    "trending-down": TrendingDown,
+};
+const SIZE_PX = {
+    sm: 16,
+    md: 20,
+};
+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 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)` } }) }));
+}

package/dist/react/components/image.d.ts

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

package/dist/react/components/image.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AspectRatio } from "@neynar/ui/aspect-ratio";
+function aspectToRatio(aspect) {
+    const [w, h] = aspect.split(":").map(Number);
+    if (!w || !h)
+        return 1;
+    return w / h;
+}
+export function SnapImage({ element: { props }, }) {
+    const url = String(props.url ?? "");
+    const alt = String(props.alt ?? "");
+    const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
+    return (_jsx(AspectRatio, { ratio: ratio, className: "relative w-full flex-1 overflow-hidden rounded-lg", children: _jsx("img", { src: url, alt: alt, className: "absolute inset-0 size-full object-cover" }) }));
+}

package/dist/react/components/input.d.ts

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

package/dist/react/components/input.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useStateStore } from "@json-render/react";
+import { Input } from "@neynar/ui/input";
+import { Label } from "@neynar/ui/label";
+export function SnapInput({ element: { props }, }) {
+    const id = useId();
+    const { get, set } = useStateStore();
+    const name = String(props.name ?? "input");
+    const path = `/inputs/${name}`;
+    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 })] }));
+}

package/dist/react/components/item-group.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export declare function SnapItemGroup({ element: { props }, children, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/item-group.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment } from "react";
+import { cn } from "@neynar/ui/utils";
+const GAP_MAP = {
+    none: "gap-0",
+    sm: "gap-1",
+    md: "gap-2",
+    lg: "gap-3",
+};
+export function SnapItemGroup({ element: { props }, children, }) {
+    const border = Boolean(props.border);
+    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))) }));
+}

package/dist/react/components/item.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function SnapItem({ element: { props }, children, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/item.js

@@ -0,0 +1,9 @@
+"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, }) {
+    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 })] }));
+}

package/dist/react/components/progress.d.ts

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

package/dist/react/components/progress.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+export function SnapProgress({ element: { props }, }) {
+    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 (_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}%` } }) })] }));
+}

package/dist/react/components/separator.d.ts

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