@farcaster/snap 2.0.0 → 2.0.2

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+export function SnapCellGrid({ element: { props }, }) {
+    const { hex, appearance } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    const { get, set } = useStateStore();
+    const cols = Number(props.cols ?? 2);
+    const rows = Number(props.rows ?? 2);
+    const cells = Array.isArray(props.cells) ? props.cells : [];
+    const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
+    const gap = String(props.gap ?? "sm");
+    const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
+    const gapPx = gapMap[gap] ?? 1;
+    const select = String(props.select ?? "off");
+    const interactive = select !== "off";
+    const isMultiple = select === "multiple";
+    const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+    const tapPath = `/inputs/${name}`;
+    const tapRaw = get(tapPath);
+    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 ringOuter = appearance === "dark" ? "#fff" : "#000";
+    const ringInner = appearance === "dark" ? "#000" : "#fff";
+    const rowEls = [];
+    for (let r = 0; r < rows; r++) {
+        const rowCells = [];
+        for (let c = 0; c < cols; c++) {
+            const cell = cellMap.get(`${r},${c}`);
+            const selected = interactive && isSelected(r, c);
+            const bg = cell?.color ? hex(cell.color) : "transparent";
+            const cellContent = cell?.content ? (_jsx(Text, { style: [styles.cellText, { color: colors.textPrimary }], children: cell.content })) : null;
+            // Two-tone ring: outer View with contrasting border, inner View with inverse border
+            const cellView = selected ? (_jsx(View, { style: [styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }], children: _jsx(View, { style: [
+                        styles.innerCell,
+                        { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+                    ], children: cellContent }) })) : (_jsx(View, { style: [styles.cell, { height: rowHeight, backgroundColor: bg }], children: cellContent }));
+            rowCells.push(interactive ? (_jsx(Pressable, { onPress: () => handleTap(r, c), style: styles.cellWrap, children: cellView }, `${r}-${c}`)) : (_jsx(View, { style: styles.cellWrap, children: cellView }, `${r}-${c}`)));
+        }
+        rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
+    }
+    const selectionLabel = interactive && selectedSet.size > 0
+        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+        : 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%" },
+    gridRow: { flexDirection: "row" },
+    cellWrap: { flex: 1 },
+    cell: {
+        borderRadius: 4,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    innerCell: {
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+    selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
+});

package/dist/react-native/components/snap-icon.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { type LucideIcon } from "lucide-react-native";
+declare const ICON_MAP: Record<string, LucideIcon>;
+export declare function SnapIcon({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;
+export { ICON_MAP };

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+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-native";
+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 { accentHex, hex } = useSnapPalette();
+    const name = String(props.name ?? "info");
+    const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
+    const color = props.color ? String(props.color) : undefined;
+    const isAccent = !color || color === "accent";
+    const resolvedColor = isAccent ? accentHex : hex(color);
+    const Icon = ICON_MAP[name];
+    if (!Icon)
+        return null;
+    return (_jsx(View, { style: { alignItems: "center", justifyContent: "center" }, children: _jsx(Icon, { size: size, color: resolvedColor }) }));
+}
+export { ICON_MAP };

package/dist/react-native/components/snap-image.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapImage({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "expo-image";
+import { StyleSheet, View } from "react-native";
+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(View, { style: [styles.frame, { aspectRatio: ratio }], children: _jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }) }));
+}
+const styles = StyleSheet.create({
+    frame: {
+        width: "100%",
+        borderRadius: 8,
+        overflow: "hidden",
+        backgroundColor: "#f3f4f6",
+    },
+});

package/dist/react-native/components/snap-input.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapInput({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react-native";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import { useSnapTheme } from "../theme.js";
+export function SnapInput({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const { colors } = useSnapTheme();
+    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 type = String(props.type ?? "text");
+    const maxLength = typeof props.maxLength === "number" ? props.maxLength : undefined;
+    const defaultValue = props.defaultValue != null ? String(props.defaultValue) : "";
+    const raw = get(path);
+    const value = raw !== undefined && raw !== null ? String(raw) : defaultValue;
+    return (_jsxs(View, { style: styles.wrap, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(TextInput, { style: [
+                    styles.input,
+                    {
+                        borderColor: colors.border,
+                        backgroundColor: colors.inputBg,
+                        color: colors.text,
+                    },
+                ], value: value, onChangeText: (text) => set(path, type === "number" ? Number(text) || 0 : text), placeholder: placeholder, placeholderTextColor: colors.textSecondary, maxLength: maxLength, autoCapitalize: "none", autoCorrect: false, keyboardType: type === "number" ? "numeric" : "default" })] }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%", gap: 4 },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
+    input: {
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 14,
+        lineHeight: 18,
+    },
+});

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

@@ -0,0 +1,5 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { type ReactNode } from "react";
+export declare function SnapItemGroup({ element: { props }, children, }: ComponentRenderProps<Record<string, unknown>> & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSnapTheme } from "../theme.js";
+const GAP_MAP = { none: 0, sm: 4, md: 8, lg: 12 };
+export function SnapItemGroup({ element: { props }, children, }) {
+    const { colors } = useSnapTheme();
+    const border = Boolean(props.border);
+    const separator = Boolean(props.separator);
+    const gap = GAP_MAP[String(props.gap ?? "sm")] ?? 4;
+    const items = Children.toArray(children);
+    return (_jsx(View, { style: [
+            styles.group,
+            border && { borderWidth: 1, borderColor: colors.border, borderRadius: 12 },
+            { gap },
+        ], children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx(View, { style: { height: 1, backgroundColor: colors.border + "80" } })), child] }, i))) }));
+}
+const styles = StyleSheet.create({
+    group: {
+        width: "100%",
+        overflow: "hidden",
+    },
+});

package/dist/react-native/components/snap-item.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import type { ReactNode } from "react";
+export declare function SnapItem({ element: { props }, children, }: ComponentRenderProps<Record<string, unknown>> & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme.js";
+export function SnapItem({ element: { props }, children, }) {
+    const { colors } = useSnapTheme();
+    const title = String(props.title ?? "");
+    const description = props.description
+        ? String(props.description)
+        : undefined;
+    const variant = String(props.variant ?? "default");
+    const containerVariant = { paddingVertical: 6, paddingHorizontal: 10 };
+    return (_jsxs(View, { style: [styles.container, containerVariant], children: [_jsxs(View, { style: styles.content, children: [title ? _jsx(Text, { style: [styles.title, { color: colors.text }], children: title }) : null, description ? (_jsx(Text, { style: [styles.description, { color: colors.textSecondary }], children: description })) : null] }), children ? (_jsx(View, { style: styles.actions, children: _jsx(View, { style: { flex: 0 }, children: children }) })) : null] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    content: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 15,
+        lineHeight: 20,
+        fontWeight: "500",
+    },
+    description: {
+        fontSize: 13,
+        lineHeight: 18,
+        marginTop: 1,
+    },
+    actions: {
+        marginLeft: "auto",
+        paddingLeft: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        flexShrink: 0,
+        flexGrow: 0,
+        flexBasis: "auto",
+        gap: 4,
+    },
+});

package/dist/react-native/components/snap-progress.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapProgress({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+export function SnapProgress({ element: { props }, }) {
+    const { accentHex } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    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 != null ? String(props.label) : null;
+    return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label })) : null, _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [styles.fill, { width: `${percent}%`, backgroundColor: accentHex }] }) })] }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%", gap: 4 },
+    label: { fontSize: 13, lineHeight: 18 },
+    track: {
+        height: 10,
+        borderRadius: 9999,
+        overflow: "hidden",
+    },
+    fill: {
+        height: "100%",
+        borderRadius: 9999,
+    },
+});

package/dist/react-native/components/snap-separator.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapSeparator({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { useSnapTheme } from "../theme.js";
+export function SnapSeparator({ element: { props }, }) {
+    const { colors } = useSnapTheme();
+    const orientation = String(props.orientation ?? "horizontal");
+    const isVertical = orientation === "vertical";
+    return (_jsx(View, { style: [
+            isVertical ? styles.vertical : styles.horizontal,
+            { backgroundColor: colors.border + "80" },
+        ] }));
+}
+const styles = StyleSheet.create({
+    horizontal: {
+        width: "100%",
+        height: 1,
+    },
+    vertical: {
+        height: "100%",
+        width: 1,
+        alignSelf: "stretch",
+    },
+});

package/dist/react-native/components/snap-slider.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapSlider({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react-native";
+import Slider from "@react-native-community/slider";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+export function SnapSlider({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const { accentHex } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    const name = String(props.name ?? "slider");
+    const path = `/inputs/${name}`;
+    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);
+    const clamped = Number.isFinite(value)
+        ? Math.min(max, Math.max(min, value))
+        : fallback;
+    const label = props.label != null ? String(props.label) : null;
+    const showValue = props.showValue === true;
+    const minLabel = props.minLabel != null ? String(props.minLabel) : null;
+    const maxLabel = props.maxLabel != null ? String(props.maxLabel) : null;
+    return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsxs(View, { style: styles.labelRow, children: [_jsx(Text, { style: [styles.label, { color: colors.text }], children: label }), showValue && (_jsx(Text, { style: [styles.valueText, { color: colors.textSecondary }], children: String(Math.round(clamped)) }))] })) : null, _jsx(Slider, { style: styles.slider, minimumValue: min, maximumValue: max, step: step > 0 ? step : 1, value: clamped, onValueChange: (v) => set(path, v), minimumTrackTintColor: accentHex, maximumTrackTintColor: colors.muted, thumbTintColor: accentHex }), minLabel != null || maxLabel != null ? (_jsxs(View, { style: styles.minMaxRow, children: [_jsx(Text, { style: [styles.minMax, { color: colors.textSecondary }], children: minLabel ?? String(min) }), _jsx(Text, { style: [styles.minMax, { color: colors.textSecondary }], children: maxLabel ?? String(max) })] })) : null] }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%", gap: 2 },
+    labelRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500", flex: 1 },
+    valueText: { fontSize: 13, lineHeight: 18 },
+    slider: { width: "100%", height: 40 },
+    minMaxRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    minMax: { fontSize: 12, lineHeight: 16 },
+});

package/dist/react-native/components/snap-stack.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import type { ReactNode } from "react";
+export declare function SnapStack({ element: { props }, children, }: ComponentRenderProps<Record<string, unknown>> & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+const VGAP = {
+    none: 0,
+    sm: 8,
+    md: 16,
+    lg: 24,
+};
+const HGAP = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+};
+const JUSTIFY = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between",
+    around: "space-around",
+};
+export function SnapStack({ element: { props }, children, }) {
+    const direction = String(props.direction ?? "vertical");
+    const rawGap = props.gap;
+    const isHorizontal = direction === "horizontal";
+    const gapMap = isHorizontal ? HGAP : VGAP;
+    const gap = typeof rawGap === "number"
+        ? rawGap
+        : typeof rawGap === "string" && rawGap in gapMap
+            ? gapMap[rawGap]
+            : isHorizontal ? HGAP.md : VGAP.md;
+    const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
+    return (_jsx(View, { style: [
+            styles.stack,
+            isHorizontal ? styles.horizontal : undefined,
+            { gap },
+            justify ? { justifyContent: justify } : undefined,
+        ], children: children }));
+}
+const styles = StyleSheet.create({
+    stack: {
+        width: "100%",
+    },
+    horizontal: {
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+    },
+});

package/dist/react-native/components/snap-switch.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapSwitch({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react-native";
+import { StyleSheet, Switch, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+export function SnapSwitch({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const { accentHex } = useSnapPalette();
+    const { colors } = useSnapTheme();
+    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 (_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: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+    },
+    label: {
+        fontSize: 14,
+        lineHeight: 18,
+        fontWeight: "400",
+        flex: 1,
+    },
+});

package/dist/react-native/components/snap-text.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapText({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme.js";
+const SIZE_STYLES = {
+    md: { fontSize: 16, lineHeight: 24 },
+    sm: { fontSize: 13, lineHeight: 18 },
+};
+const WEIGHT_MAP = {
+    bold: "700",
+    normal: "400",
+};
+export function SnapText({ element: { props }, }) {
+    const { colors } = useSnapTheme();
+    const content = String(props.content ?? "");
+    const size = String(props.size ?? "md");
+    const weight = props.weight ? String(props.weight) : undefined;
+    const align = props.align ?? undefined;
+    const sizeStyle = SIZE_STYLES[size] ?? SIZE_STYLES.md;
+    const resolvedWeight = weight ? WEIGHT_MAP[weight] : sizeStyle?.fontWeight;
+    const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
+    return (_jsx(View, { style: styles.wrap, children: _jsx(Text, { style: [
+                styles.base,
+                {
+                    color: colors.text,
+                    fontSize: sizeStyle.fontSize,
+                    lineHeight: sizeStyle.lineHeight,
+                    fontWeight: resolvedWeight,
+                    textAlign,
+                },
+            ], children: content }) }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%" },
+    base: {},
+});

package/dist/react-native/components/snap-toggle-group.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapToggleGroup({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,99 @@
+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 { useSnapTheme } from "../theme.js";
+export function SnapToggleGroup({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const { colors } = useSnapTheme();
+    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
+        : [];
+    const raw = get(path);
+    const defaultValue = props.defaultValue;
+    const selected = (() => {
+        if (raw !== undefined && raw !== null) {
+            return isMultiple
+                ? Array.isArray(raw)
+                    ? raw
+                    : []
+                : typeof raw === "string"
+                    ? [raw]
+                    : [];
+        }
+        if (defaultValue !== undefined) {
+            return Array.isArray(defaultValue)
+                ? defaultValue
+                : [String(defaultValue)];
+        }
+        return [];
+    })();
+    const isVertical = orientation === "vertical";
+    const handlePress = (opt) => {
+        if (isMultiple) {
+            const next = selected.includes(opt)
+                ? selected.filter((s) => s !== opt)
+                : [...selected, opt];
+            set(path, next);
+        }
+        else {
+            if (opt && opt !== selected[0])
+                set(path, opt);
+        }
+    };
+    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.muted },
+                    isVertical ? styles.groupVertical : styles.groupHorizontal,
+                ], children: options.map((opt, index) => {
+                    const isSelected = selected.includes(opt);
+                    return (_jsx(Pressable, { style: ({ pressed }) => [
+                            styles.option,
+                            {
+                                backgroundColor: isSelected
+                                    ? colors.mutedSelected
+                                    : pressed
+                                        ? colors.mutedHover
+                                        : colors.mutedSubtle,
+                            },
+                            !isVertical && styles.optionHorizontal,
+                        ], onPress: () => handlePress(opt), children: _jsx(Text, { style: [
+                                styles.optionText,
+                                { color: colors.text },
+                            ], children: opt }) }, index));
+                }) })] }));
+}
+const styles = StyleSheet.create({
+    wrap: { width: "100%", gap: 6 },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
+    group: {
+        padding: 4,
+        borderRadius: 8,
+        gap: 4,
+    },
+    groupHorizontal: {
+        flexDirection: "row",
+    },
+    groupVertical: {
+        flexDirection: "column",
+    },
+    option: {
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 6,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    optionHorizontal: {
+        flex: 1,
+    },
+    optionText: {
+        fontSize: 13,
+        lineHeight: 18,
+        fontWeight: "500",
+    },
+});

package/dist/react-native/confetti-overlay.d.ts

@@ -0,0 +1 @@
+export declare function ConfettiOverlay(): import("react").JSX.Element;