@farcaster/snap 1.6.0 → 1.7.0

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

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

package/dist/react-native/catalog-renderer.js

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

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

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = {
+    default: "default",
+    secondary: "secondary",
+    outline: "outline",
+    ghost: "ghost",
+};
+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 ?? "default")] ?? "default";
+    const iconName = props.icon ? String(props.icon) : undefined;
+    const variantStyle = (() => {
+        switch (variant) {
+            case "default":
+                return { backgroundColor: accentHex };
+            case "secondary":
+                return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
+            case "outline":
+                return { backgroundColor: "rgba(255,255,255,0.04)", borderWidth: 1, borderColor: colors.border };
+            case "ghost":
+                return { backgroundColor: "transparent" };
+        }
+    })();
+    const textColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+    const iconColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+    return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
+                styles.btn,
+                variant === "default" ? styles.btnDefault : styles.btnOther,
+                variantStyle,
+                pressed && styles.pressed,
+            ], onPress: () => {
+                void (async () => {
+                    try {
+                        await emit("press");
+                    }
+                    catch (err) {
+                        if (typeof __DEV__ !== "undefined" && __DEV__) {
+                            // eslint-disable-next-line no-console
+                            console.error("[snap] action failed", err);
+                        }
+                    }
+                })();
+            }, children: [iconName && ICON_MAP[iconName] ? ((() => { const I = ICON_MAP[iconName]; return _jsx(I, { size: 16, color: iconColor }); })()) : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label })] }) }));
+}
+const styles = StyleSheet.create({
+    outer: { flex: 1, minWidth: 0 },
+    btn: {
+        paddingHorizontal: 16,
+        borderRadius: 10,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+        gap: 8,
+    },
+    btnDefault: {
+        paddingVertical: 10,
+    },
+    btnOther: {
+        paddingVertical: 8,
+    },
+    pressed: { opacity: 0.88 },
+});

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

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

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

@@ -0,0 +1,38 @@
+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 { ICON_MAP } from "./snap-icon.js";
+export function SnapBadge({ element: { props }, }) {
+    const { accentHex, hex } = useSnapPalette();
+    const label = String(props.label ?? "");
+    const color = props.color ? String(props.color) : undefined;
+    const iconName = props.icon ? String(props.icon) : undefined;
+    const isAccent = !color || color === "accent";
+    const resolvedColor = isAccent ? accentHex : hex(color);
+    const Icon = iconName ? ICON_MAP[iconName] : undefined;
+    return (_jsxs(View, { style: [
+            styles.badge,
+            isAccent
+                ? { backgroundColor: resolvedColor, borderColor: resolvedColor }
+                : { borderColor: resolvedColor },
+        ], children: [Icon && (_jsx(Icon, { size: 12, color: isAccent ? "#fff" : resolvedColor })), _jsx(Text, { style: [
+                    styles.label,
+                    { color: isAccent ? "#fff" : resolvedColor },
+                ], children: label })] }));
+}
+const styles = StyleSheet.create({
+    badge: {
+        alignSelf: "flex-start",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 9999,
+        borderWidth: 1,
+    },
+    label: {
+        fontSize: 12,
+        fontWeight: "500",
+    },
+});

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,24 @@
+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: {
+        flex: 1,
+        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,36 @@
+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, fontWeight: "500" },
+    input: {
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 14,
+    },
+});

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,45 @@
+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 = variant === "outline"
+        ? { borderWidth: 1, borderColor: colors.border + "80", borderRadius: 8, padding: 10 }
+        : variant === "muted"
+            ? { backgroundColor: "rgba(255,255,255,0.04)", borderRadius: 8, padding: 10 }
+            : { paddingVertical: 8, paddingHorizontal: 10 };
+    return (_jsxs(View, { style: [styles.container, containerVariant], children: [_jsxs(View, { style: styles.content, children: [_jsx(Text, { style: [styles.title, { color: colors.text }], children: title }), 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: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    content: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 15,
+        fontWeight: "500",
+    },
+    description: {
+        fontSize: 13,
+        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: { flex: 1, width: "100%", gap: 4 },
+    label: { fontSize: 13 },
+    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,42 @@
+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 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 }), _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: 6 },
+    labelRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    label: { fontSize: 13, fontWeight: "500", flex: 1 },
+    valueText: { fontSize: 13 },
+    slider: { width: "100%", height: 40 },
+    minMaxRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    minMax: { fontSize: 12 },
+});

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,30 @@
+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.border, true: accentHex }, thumbColor: "#fff" })] }));
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+    },
+    label: {
+        fontSize: 14,
+        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,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapTheme } from "../theme.js";
+const SIZE_STYLES = {
+    lg: { fontSize: 20, fontWeight: "700" },
+    md: { fontSize: 16, lineHeight: 24 },
+    sm: { fontSize: 13 },
+};
+const WEIGHT_MAP = {
+    bold: "700",
+    medium: "500",
+    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: { flex: 1, 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;