@farcaster/snap 1.18.0 → 1.19.0

package/dist/react/components/slider.js

@@ -11,6 +11,7 @@ export function SnapSlider({ element: { props }, }) {
     const max = Number(props.max ?? 100);
     const step = Number(props.step ?? 1);
     const label = props.label ? String(props.label) : undefined;
+    const showValue = props.showValue === true;
     const path = `/inputs/${name}`;
     const raw = get(path);
     const value = raw !== undefined
@@ -18,7 +19,7 @@ export function SnapSlider({ element: { props }, }) {
         : props.defaultValue !== undefined
             ? Number(props.defaultValue)
             : (min + max) / 2;
-    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && _jsx(Label, { style: { color: colors.text }, children: label }), _jsx("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 cursor-pointer", style: {
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { style: { color: colors.text }, children: label }), showValue && (_jsx("span", { style: { color: colors.textMuted, fontSize: 13, lineHeight: "18px" }, children: Math.round(value) }))] })), _jsx("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 cursor-pointer", style: {
                     backgroundColor: colors.muted,
                     accentColor: colors.accent,
                 } })] }));

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

@@ -47,7 +47,7 @@ export function SnapActionButton({ element, emit, }) {
                         const I = ICON_MAP[iconName];
                         return _jsx(I, { size: 16, color: iconColor });
                     })()
-                    : null, _jsx(Text, { style: { color: textColor, fontSize: 14, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
+                    : null, _jsx(Text, { style: { color: textColor, fontSize: 14, lineHeight: 18, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
 }
 const styles = StyleSheet.create({
     outer: { flex: 1, minWidth: 0 },

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

@@ -10,7 +10,7 @@ export function SnapBadge({ element: { props }, }) {
     const iconName = props.icon ? String(props.icon) : undefined;
     const isAccent = !color || color === "accent";
     const resolvedColor = isAccent ? accentHex : hex(color);
-    const isFilled = variant === "default";
+    const isFilled = variant !== "outline";
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
     return (_jsxs(View, { style: [
             styles.badge,
@@ -35,6 +35,7 @@ const styles = StyleSheet.create({
     },
     label: {
         fontSize: 12,
+        lineHeight: 16,
         fontWeight: "500",
     },
 });

package/dist/react-native/components/snap-bar-chart.js

@@ -32,8 +32,8 @@ export function SnapBarChart({ element: { props }, }) {
 const styles = StyleSheet.create({
     wrap: { flex: 1, width: "100%", gap: 8 },
     row: { flexDirection: "row", alignItems: "center", gap: 8 },
-    label: { width: 80, fontSize: 12, textAlign: "right" },
+    label: { width: 80, fontSize: 12, lineHeight: 16, textAlign: "right" },
     track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },
     fill: { height: "100%", borderRadius: 9999 },
-    value: { width: 32, fontSize: 12, fontVariant: ["tabular-nums"] },
+    value: { width: 32, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
 });

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

@@ -91,6 +91,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
-    cellText: { fontSize: 12, fontWeight: "600" },
+    cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
     selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
 });

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

@@ -25,12 +25,13 @@ export function SnapInput({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%", gap: 4 },
-    label: { fontSize: 13, fontWeight: "500" },
+    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.js

@@ -8,12 +8,11 @@ export function SnapItem({ element: { props }, children, }) {
         ? String(props.description)
         : undefined;
     const variant = String(props.variant ?? "default");
-    const containerVariant = { 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 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: {
-        flex: 1,
         flexDirection: "row",
         alignItems: "center",
     },
@@ -22,10 +21,12 @@ const styles = StyleSheet.create({
     },
     title: {
         fontSize: 15,
+        lineHeight: 20,
         fontWeight: "500",
     },
     description: {
         fontSize: 13,
+        lineHeight: 18,
         marginTop: 1,
     },
     actions: {

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

@@ -13,7 +13,7 @@ export function SnapProgress({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     wrap: { flex: 1, width: "100%", gap: 4 },
-    label: { fontSize: 13 },
+    label: { fontSize: 13, lineHeight: 18 },
     track: {
         height: 10,
         borderRadius: 9999,

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

@@ -20,23 +20,24 @@ export function SnapSlider({ element: { props }, }) {
         ? 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 }), _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] }));
+    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: 6 },
+    wrap: { width: "100%", gap: 2 },
     labelRow: {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
     },
-    label: { fontSize: 13, fontWeight: "500", flex: 1 },
-    valueText: { fontSize: 13 },
+    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 },
+    minMax: { fontSize: 12, lineHeight: 16 },
 });

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

@@ -24,6 +24,7 @@ const styles = StyleSheet.create({
     },
     label: {
         fontSize: 14,
+        lineHeight: 18,
         fontWeight: "400",
         flex: 1,
     },

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

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from "react-native";
 import { useSnapTheme } from "../theme.js";
 const SIZE_STYLES = {
     md: { fontSize: 16, lineHeight: 24 },
-    sm: { fontSize: 13 },
+    sm: { fontSize: 13, lineHeight: 18 },
 };
 const WEIGHT_MAP = {
     bold: "700",

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

@@ -69,7 +69,7 @@ export function SnapToggleGroup({ element: { props }, }) {
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%", gap: 6 },
-    label: { fontSize: 13, fontWeight: "500" },
+    label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
     group: {
         padding: 4,
         borderRadius: 8,
@@ -93,6 +93,7 @@ const styles = StyleSheet.create({
     },
     optionText: {
         fontSize: 13,
+        lineHeight: 18,
         fontWeight: "500",
     },
 });

package/dist/react-native/theme.js

@@ -6,11 +6,11 @@ const DEFAULT_LIGHT = {
     text: "#111111",
     textSecondary: "#6b7280",
     border: "#E5E7EB",
-    inputBg: "rgba(0,0,0,0.12)",
-    muted: "rgba(0,0,0,0.12)",
-    mutedSubtle: "rgba(0,0,0,0.06)",
-    mutedHover: "rgba(0,0,0,0.10)",
-    mutedSelected: "rgba(0,0,0,0.18)",
+    inputBg: "rgba(0,0,0,0.06)",
+    muted: "rgba(0,0,0,0.08)",
+    mutedSubtle: "rgba(0,0,0,0.04)",
+    mutedHover: "rgba(0,0,0,0.12)",
+    mutedSelected: "rgba(0,0,0,0.16)",
 };
 const DEFAULT_DARK = {
     bg: "#111318",
@@ -18,11 +18,11 @@ const DEFAULT_DARK = {
     text: "#fafafa",
     textSecondary: "#a1a1aa",
     border: "#2D2D44",
-    inputBg: "rgba(255,255,255,0.03)",
-    muted: "rgba(255,255,255,0.03)",
-    mutedSubtle: "rgba(255,255,255,0.02)",
-    mutedHover: "rgba(255,255,255,0.04)",
-    mutedSelected: "rgba(255,255,255,0.10)",
+    inputBg: "rgba(255,255,255,0.04)",
+    muted: "rgba(255,255,255,0.06)",
+    mutedSubtle: "rgba(255,255,255,0.03)",
+    mutedHover: "rgba(255,255,255,0.08)",
+    mutedSelected: "rgba(255,255,255,0.12)",
 };
 const SnapThemeContext = createContext({
     mode: "dark",

package/dist/react-native/v2/snap-view.js

@@ -57,7 +57,7 @@ function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWa
                         cardStyles.card,
                         {
                             borderRadius,
-                            maxHeight,
+                            ...(!showOverflowWarning && { maxHeight: SNAP_MAX_HEIGHT }),
                             borderColor: colors.border,
                             backgroundColor: colors.surface,
                         },

package/dist/ui/catalog.d.ts

@@ -295,6 +295,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 step: z.ZodOptional<z.ZodNumber>;
                 defaultValue: z.ZodOptional<z.ZodNumber>;
                 label: z.ZodOptional<z.ZodString>;
+                showValue: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>;
             description: string;
         };

package/dist/ui/slider.d.ts

@@ -9,5 +9,6 @@ export declare const sliderProps: z.ZodObject<{
     step: z.ZodOptional<z.ZodNumber>;
     defaultValue: z.ZodOptional<z.ZodNumber>;
     label: z.ZodOptional<z.ZodString>;
+    showValue: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>;
 export type SliderProps = z.infer<typeof sliderProps>;

package/dist/ui/slider.js

@@ -10,6 +10,8 @@ export const sliderProps = z
     step: z.number().optional(),
     defaultValue: z.number().optional(),
     label: z.string().max(SLIDER_MAX_LABEL_CHARS).optional(),
+    /** When true, display the current value next to the label. */
+    showValue: z.boolean().optional(),
 })
     .superRefine((val, ctx) => {
     if (val.min > val.max) {

package/llms.txt

@@ -134,6 +134,7 @@ Field values are sent in POST `inputs[name]` when a `submit` action fires.
 - `step` (number, optional, > 0. Default: 1)
 - `defaultValue` (number, optional, between min and max)
 - `label` (string, optional, max 60)
+- `showValue` (boolean, optional): display the current value next to the label
 - POST value: number
 
 **switch** — Boolean toggle.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/components/slider.tsx

@@ -16,6 +16,7 @@ export function SnapSlider({
   const max = Number(props.max ?? 100);
   const step = Number(props.step ?? 1);
   const label = props.label ? String(props.label) : undefined;
+  const showValue = props.showValue === true;
   const path = `/inputs/${name}`;
   const raw = get(path);
   const value =
@@ -27,7 +28,16 @@ export function SnapSlider({
 
   return (
     <div className="flex w-full flex-col gap-1.5">
-      {label && <Label style={{ color: colors.text }}>{label}</Label>}
+      {label && (
+        <div className="flex items-center justify-between">
+          <Label style={{ color: colors.text }}>{label}</Label>
+          {showValue && (
+            <span style={{ color: colors.textMuted, fontSize: 13, lineHeight: "18px" }}>
+              {Math.round(value)}
+            </span>
+          )}
+        </div>
+      )}
       <input
         type="range"
         min={min}

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

@@ -65,7 +65,7 @@ export function SnapActionButton({
               return <I size={16} color={iconColor} />;
             })()
           : null}
-        <Text style={{ color: textColor, fontSize: 14, fontWeight: "600" }}>
+        <Text style={{ color: textColor, fontSize: 14, lineHeight: 18, fontWeight: "600" }}>
           {label}
         </Text>
         {showExternalIcon ? (

package/src/react-native/components/snap-badge.tsx

@@ -13,7 +13,7 @@ export function SnapBadge({
   const iconName = props.icon ? String(props.icon) : undefined;
   const isAccent = !color || color === "accent";
   const resolvedColor = isAccent ? accentHex : hex(color);
-  const isFilled = variant === "default";
+  const isFilled = variant !== "outline";
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
@@ -54,6 +54,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 12,
+    lineHeight: 16,
     fontWeight: "500",
   },
 });

package/src/react-native/components/snap-bar-chart.tsx

@@ -66,8 +66,8 @@ export function SnapBarChart({
 const styles = StyleSheet.create({
   wrap: { flex: 1, width: "100%", gap: 8 },
   row: { flexDirection: "row", alignItems: "center", gap: 8 },
-  label: { width: 80, fontSize: 12, textAlign: "right" },
+  label: { width: 80, fontSize: 12, lineHeight: 16, textAlign: "right" },
   track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },
   fill: { height: "100%", borderRadius: 9999 },
-  value: { width: 32, fontSize: 12, fontVariant: ["tabular-nums"] },
+  value: { width: 32, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
 });

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

@@ -147,6 +147,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  cellText: { fontSize: 12, fontWeight: "600" },
+  cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
   selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
 });

package/src/react-native/components/snap-input.tsx

@@ -46,12 +46,13 @@ export function SnapInput({
 
 const styles = StyleSheet.create({
   wrap: { width: "100%", gap: 4 },
-  label: { fontSize: 13, fontWeight: "500" },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
   input: {
     borderWidth: 1,
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 10,
     fontSize: 14,
+    lineHeight: 18,
   },
 });

package/src/react-native/components/snap-item.tsx

@@ -14,12 +14,12 @@ export function SnapItem({
     : undefined;
   const variant = String(props.variant ?? "default");
 
-  const containerVariant = { paddingVertical: 8, paddingHorizontal: 10 };
+  const containerVariant = { paddingVertical: 6, paddingHorizontal: 10 };
 
   return (
     <View style={[styles.container, containerVariant]}>
       <View style={styles.content}>
-        <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+        {title ? <Text style={[styles.title, { color: colors.text }]}>{title}</Text> : null}
         {description ? (
           <Text style={[styles.description, { color: colors.textSecondary }]}>
             {description}
@@ -37,7 +37,6 @@ export function SnapItem({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     flexDirection: "row",
     alignItems: "center",
   },
@@ -46,10 +45,12 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 15,
+    lineHeight: 20,
     fontWeight: "500",
   },
   description: {
     fontSize: 13,
+    lineHeight: 18,
     marginTop: 1,
   },
   actions: {

package/src/react-native/components/snap-progress.tsx

@@ -27,7 +27,7 @@ export function SnapProgress({
 
 const styles = StyleSheet.create({
   wrap: { flex: 1, width: "100%", gap: 4 },
-  label: { fontSize: 13 },
+  label: { fontSize: 13, lineHeight: 18 },
   track: {
     height: 10,
     borderRadius: 9999,

package/src/react-native/components/snap-slider.tsx

@@ -26,6 +26,7 @@ export function SnapSlider({
     : 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;
 
@@ -34,9 +35,11 @@ export function SnapSlider({
       {label ? (
         <View style={styles.labelRow}>
           <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
-          <Text style={[styles.valueText, { color: colors.textSecondary }]}>
-            {String(Math.round(clamped))}
-          </Text>
+          {showValue && (
+            <Text style={[styles.valueText, { color: colors.textSecondary }]}>
+              {String(Math.round(clamped))}
+            </Text>
+          )}
         </View>
       ) : null}
       <Slider
@@ -65,18 +68,18 @@ export function SnapSlider({
 }
 
 const styles = StyleSheet.create({
-  wrap: { width: "100%", gap: 6 },
+  wrap: { width: "100%", gap: 2 },
   labelRow: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
   },
-  label: { fontSize: 13, fontWeight: "500", flex: 1 },
-  valueText: { fontSize: 13 },
+  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 },
+  minMax: { fontSize: 12, lineHeight: 16 },
 });

package/src/react-native/components/snap-switch.tsx

@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 14,
+    lineHeight: 18,
     fontWeight: "400",
     flex: 1,
   },

package/src/react-native/components/snap-text.tsx

@@ -4,7 +4,7 @@ import { useSnapTheme } from "../theme";
 
 const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
   md: { fontSize: 16, lineHeight: 24 },
-  sm: { fontSize: 13 },
+  sm: { fontSize: 13, lineHeight: 18 },
 };
 
 const WEIGHT_MAP: Record<string, "400" | "500" | "600" | "700"> = {

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

@@ -97,7 +97,7 @@ export function SnapToggleGroup({
 
 const styles = StyleSheet.create({
   wrap: { width: "100%", gap: 6 },
-  label: { fontSize: 13, fontWeight: "500" },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
   group: {
     padding: 4,
     borderRadius: 8,
@@ -121,6 +121,7 @@ const styles = StyleSheet.create({
   },
   optionText: {
     fontSize: 13,
+    lineHeight: 18,
     fontWeight: "500",
   },
 });

package/src/react-native/theme.tsx

@@ -24,11 +24,11 @@ const DEFAULT_LIGHT: SnapNativeColors = {
   text: "#111111",
   textSecondary: "#6b7280",
   border: "#E5E7EB",
-  inputBg: "rgba(0,0,0,0.12)",
-  muted: "rgba(0,0,0,0.12)",
-  mutedSubtle: "rgba(0,0,0,0.06)",
-  mutedHover: "rgba(0,0,0,0.10)",
-  mutedSelected: "rgba(0,0,0,0.18)",
+  inputBg: "rgba(0,0,0,0.06)",
+  muted: "rgba(0,0,0,0.08)",
+  mutedSubtle: "rgba(0,0,0,0.04)",
+  mutedHover: "rgba(0,0,0,0.12)",
+  mutedSelected: "rgba(0,0,0,0.16)",
 };
 
 const DEFAULT_DARK: SnapNativeColors = {
@@ -37,11 +37,11 @@ const DEFAULT_DARK: SnapNativeColors = {
   text: "#fafafa",
   textSecondary: "#a1a1aa",
   border: "#2D2D44",
-  inputBg: "rgba(255,255,255,0.03)",
-  muted: "rgba(255,255,255,0.03)",
-  mutedSubtle: "rgba(255,255,255,0.02)",
-  mutedHover: "rgba(255,255,255,0.04)",
-  mutedSelected: "rgba(255,255,255,0.10)",
+  inputBg: "rgba(255,255,255,0.04)",
+  muted: "rgba(255,255,255,0.06)",
+  mutedSubtle: "rgba(255,255,255,0.03)",
+  mutedHover: "rgba(255,255,255,0.08)",
+  mutedSelected: "rgba(255,255,255,0.12)",
 };
 
 // ─── Context ──────────────────────────────────────────

package/src/react-native/v2/snap-view.tsx

@@ -145,7 +145,7 @@ function SnapCardV2Inner({
             cardStyles.card,
             {
               borderRadius,
-              maxHeight,
+              ...(!showOverflowWarning && { maxHeight: SNAP_MAX_HEIGHT }),
               borderColor: colors.border,
               backgroundColor: colors.surface,
             },

package/src/ui/slider.ts

@@ -12,6 +12,8 @@ export const sliderProps = z
     step: z.number().optional(),
     defaultValue: z.number().optional(),
     label: z.string().max(SLIDER_MAX_LABEL_CHARS).optional(),
+    /** When true, display the current value next to the label. */
+    showValue: z.boolean().optional(),
   })
   .superRefine((val, ctx) => {
     if (val.min > val.max) {