@expokit/cli 0.0.0-stage → 0.2.0

package/registry/stepper/files/src/lib/kit.tsx

@@ -0,0 +1,219 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { Platform, useColorScheme, type TextStyle } from 'react-native';
+
+/**
+ * ExpoKit design tokens. Every component reads them through useKit(), so one
+ * <KitProvider> (optional) re-skins the whole kit: light / dark, accent colour, radius.
+ * Without a provider, components follow the system colour scheme.
+ */
+
+/**
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
+ * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ */
+export const KIT_VERSION = 2;
+
+export type ColorScheme = 'light' | 'dark';
+
+export interface Colors {
+  background: string;
+  foreground: string;
+  /** Cards, sheets, inputs. */
+  card: string;
+  cardForeground: string;
+  /** Raised surfaces: popovers, toasts. */
+  popover: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  warning: string;
+  danger: string;
+  dangerForeground: string;
+  ring: string;
+  overlay: string;
+}
+
+export interface Theme {
+  dark: boolean;
+  colors: Colors;
+  /** Corner radius scale. `radius.full` makes pills. */
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+    /** A corner designed at the default radius (12), scaled to the current one: `radius.scale(16)` is 16 at 12, 0 at 0. */
+    scale: (n: number) => number;
+    /** Corner for a bar or chip of height `h`: a pill at radius ≥ 12, softer below, square at 0. */
+    capsule: (h: number) => number;
+  };
+  /** 4pt spacing scale: space(4) === 16. */
+  space: (n: number) => number;
+  font: { family?: string; mono: string };
+  text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+}
+
+const light: Colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  card: '#ffffff',
+  cardForeground: '#09090b',
+  popover: '#ffffff',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  input: '#d4d4d8',
+  primary: '#18181b',
+  primaryForeground: '#fafafa',
+  secondary: '#f4f4f5',
+  secondaryForeground: '#18181b',
+  accent: '#18181b',
+  accentForeground: '#ffffff',
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#e5484d',
+  dangerForeground: '#ffffff',
+  ring: '#18181b',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+const dark: Colors = {
+  background: '#09090b',
+  foreground: '#fafafa',
+  card: '#111113',
+  cardForeground: '#fafafa',
+  popover: '#18181b',
+  muted: '#1c1c20',
+  mutedForeground: '#a1a1aa',
+  border: '#27272a',
+  input: '#34343a',
+  primary: '#fafafa',
+  primaryForeground: '#18181b',
+  secondary: '#1f1f23',
+  secondaryForeground: '#fafafa',
+  accent: '#fafafa',
+  accentForeground: '#09090b',
+  success: '#3dd68c',
+  warning: '#ffb224',
+  danger: '#ff6369',
+  dangerForeground: '#ffffff',
+  ring: '#d4d4d8',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const palettes = { light, dark };
+
+function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
+  const base = scheme === 'dark' ? dark : light;
+  const accent = overrides?.accent;
+  const colors: Colors = {
+    ...base,
+    ...(accent ? { accent, ring: accent, accentForeground: readableOn(accent) } : null),
+    ...overrides?.colors?.[scheme],
+  };
+  const r = overrides?.radius ?? 12;
+  return {
+    dark: scheme === 'dark',
+    colors,
+    radius: {
+      sm: Math.round(r * 0.5),
+      md: r,
+      lg: Math.round(r * 1.35),
+      xl: Math.round(r * 1.8),
+      full: 999,
+      scale: (n) => Math.round((n * r) / 12),
+      capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
+    },
+    space: (n) => n * 4,
+    font: {
+      family: overrides?.fontFamily,
+      mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
+    },
+    text: {
+      xs: { fontSize: 12, lineHeight: 16 },
+      sm: { fontSize: 14, lineHeight: 20 },
+      md: { fontSize: 16, lineHeight: 22 },
+      lg: { fontSize: 18, lineHeight: 24, fontWeight: '400' },
+      xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
+      xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
+    },
+  };
+}
+
+export interface ThemeOverrides {
+  /** Brand colour used for focus rings, selected states and accent buttons. */
+  accent?: string;
+  /** Base corner radius in points (default 12). */
+  radius?: number;
+  fontFamily?: string;
+  /** Override any token per scheme. */
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+}
+
+const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+
+export function KitProvider({
+  scheme,
+  children,
+  ...overrides
+}: ThemeOverrides & { scheme?: ColorScheme | 'system'; children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+  );
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit(): Theme {
+  const ctx = useContext(KitContext);
+  const system = useColorScheme();
+  const scheme: ColorScheme = ctx?.scheme ?? (system === 'dark' ? 'dark' : 'light');
+  return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
+}
+
+/** Shared motion presets so the whole kit moves the same way. */
+export const motion = {
+  /** Toggles, selection indicators. */
+  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. */
+  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  /** Sheets, layout changes. */
+  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  fast: 160,
+  normal: 240,
+};
+
+/** Adds alpha to a #rrggbb colour: alpha('#6366f1', 0.2). */
+export function alpha(hex: string, a: number) {
+  if (!hex.startsWith('#') || (hex.length !== 7 && hex.length !== 4)) return hex;
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  return full + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
+}
+
+/** Black or white, whichever reads better on `hex`. */
+export function readableOn(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return '#ffffff';
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#09090b' : '#ffffff';
+}
+
+/**
+ * True for children that must be wrapped in <Text>: strings, numbers and arrays of them —
+ * `{count} new` is the array [3, ' new'], and raw text outside <Text> crashes on native.
+ */
+export function isTextNode(node: React.ReactNode): node is string | number | (string | number)[] {
+  if (typeof node === 'string' || typeof node === 'number') return true;
+  return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
+}

package/registry/stepper.json

@@ -0,0 +1,17 @@
+{
+  "name": "stepper",
+  "type": "component",
+  "title": "Stepper",
+  "description": "Quantity control whose number rolls — each changed digit slides out as the new one slides in, up or down with the change. Airbnb-style outline, an iOS-style filled capsule, a compact row control, and a DoorDash-style cart button that springs open from a single + into − 1 + (with a trash can at 1). Buttons spring on press, hold to repeat with acceleration, and pushing past a limit gives a little bump.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "stepper/files"
+}

package/registry/swipe-deck.json

@@ -0,0 +1,15 @@
+{
+  "name": "swipe-deck",
+  "type": "component",
+  "title": "Swipe Deck",
+  "description": "A stack of photo cards you swipe left or right — the top card follows your finger, leans in 3D, washes green or red and stamps SAVE / SKIP, then flies off as the next card rises. Flick momentum, undo, and a ref for buttons.",
+  "tier": "pro",
+  "dependencies": [],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/swipeable-row.json

@@ -0,0 +1,15 @@
+{
+  "name": "swipeable-row",
+  "type": "component",
+  "title": "Swipeable Row",
+  "description": "Mail-style list row: drag sideways to reveal actions that fan out and grow with your finger. A full swipe stretches the edge action across the row and fires it — destructive ones slide away and collapse the row. PanResponder only, so it works with a mouse on the web too.",
+  "tier": "pro",
+  "dependencies": [],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/switch/files/src/components/ui/switch.tsx

@@ -0,0 +1,344 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Animated, PanResponder, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+
+export type SwitchVariant = 'ios' | 'material' | 'icon';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+
+export interface SwitchProps {
+  /** Controlled state. */
+  value?: boolean;
+  /** Initial state when uncontrolled. */
+  defaultValue?: boolean;
+  onValueChange?: (value: boolean) => void;
+  variant?: SwitchVariant;
+  size?: SwitchSize;
+  /** Icons drawn inside the thumb for `variant="icon"`: sun / moon or check / ✕. */
+  icon?: 'theme' | 'check';
+  /** Turns the switch into a settings row: label (and description) on the left, switch on the right. */
+  label?: string;
+  description?: string;
+  /** Track colour when on (default: theme accent). */
+  accent?: string;
+  disabled?: boolean;
+  /** Light tap when it flips (default true). */
+  haptics?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<SwitchSize, { w: number; h: number }> = {
+  sm: { w: 40, h: 24 },
+  md: { w: 51, h: 31 },
+  lg: { w: 62, h: 38 },
+};
+
+const SUN_RAYS = 'M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4';
+const MOON = 'M20 14.2A8 8 0 1 1 9.8 4a6.4 6.4 0 0 0 10.2 10.2z';
+const CHECK = 'M5.5 12.5l4 4L18.5 7.5';
+const CROSS = 'M7 7l10 10M17 7L7 17';
+
+const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+/**
+ * Toggle switch with a spring thumb that stretches toward its destination while pressed
+ * (squash & stretch), can be dragged across, and throws a soft halo when it flips.
+ * The track cross-fades. iOS, Material 3 and icon looks.
+ */
+export function Switch({
+  value,
+  defaultValue = false,
+  onValueChange,
+  variant = 'ios',
+  size = 'md',
+  icon = 'theme',
+  label,
+  description,
+  accent,
+  disabled,
+  haptics = true,
+  accessibilityLabel,
+  style,
+}: SwitchProps) {
+  const { colors, dark } = useKit();
+  const gid = 'sw' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const tint = accent ?? colors.accent;
+  const [inner, setInner] = useState(defaultValue);
+  const on = value ?? inner;
+
+  const s = SIZES[size];
+  const material = variant === 'material';
+  const W = s.w;
+  const H = s.h;
+  const border = material ? 2 : 0;
+  const innerW = W - border * 2;
+  const innerH = H - border * 2;
+  const pad = 2;
+  const dOn = innerH - pad * 2; // thumb diameter when on (and always, except Material)
+  const dOff = material ? Math.round(innerH * 0.5) : dOn;
+  const stretchW = material ? 6 : Math.round(dOn * 0.32);
+  const growH = material ? 4 : 0;
+
+  // pos + stretch drive layout and colours (JS driver). glyph drives the icons, halo the glow (native driver).
+  const pos = useRef(new Animated.Value(on ? 1 : 0)).current;
+  const stretch = useRef(new Animated.Value(0)).current;
+  const glyph = useRef(new Animated.Value(on ? 1 : 0)).current;
+  const halo = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.spring(pos, { toValue: on ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+    Animated.spring(glyph, { toValue: on ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [on, pos, glyph]);
+
+  // Halo: 0 hidden · 1 held (glow around the thumb) · 2 released (expands and fades out).
+  const press = (to: number) => {
+    Animated.spring(stretch, { toValue: to, useNativeDriver: false, ...(to ? motion.snappy : motion.bouncy) }).start();
+    if (to) Animated.spring(halo, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    else Animated.timing(halo, { toValue: 2, duration: 420, useNativeDriver: true }).start(({ finished }) => finished && halo.setValue(0));
+  };
+
+  const toggle = () => {
+    if (haptics) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
+    if (value === undefined) setInner(!on);
+    onValueChange?.(!on);
+  };
+
+  // Thumb geometry. Left edge is anchored while off (grows right), right edge while on (grows left).
+  const c0 = pad + dOn / 2;
+  const c1 = innerW - pad - dOn / 2;
+
+  // Drag the thumb across: pos follows the finger, release settles on the nearer side.
+  // A touch that never moves is a tap and just toggles. On web the wrapping Pressable also
+  // gets a click after the gesture, so it ignores presses right after one (`endedAt`).
+  const live = useRef({ on, toggle, travel: c1 - c0 });
+  live.current = { on, toggle, travel: c1 - c0 };
+  const drag = useRef({ from: 0, moved: false, endedAt: 0 });
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => !drag.current.moved,
+        onPanResponderGrant: () => {
+          pos.stopAnimation();
+          drag.current = { from: live.current.on ? 1 : 0, moved: false, endedAt: 0 };
+          press(1);
+        },
+        onPanResponderMove: (_, g) => {
+          if (Math.abs(g.dx) > 3) drag.current.moved = true;
+          if (drag.current.moved) pos.setValue(clamp01(drag.current.from + g.dx / live.current.travel));
+        },
+        onPanResponderRelease: (_, g) => {
+          const { on: now, toggle: flip } = live.current;
+          drag.current.endedAt = Date.now();
+          press(0);
+          if (!drag.current.moved) return flip();
+          const next = clamp01(drag.current.from + g.dx / live.current.travel) > 0.5;
+          Animated.spring(pos, { toValue: next ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+          if (next !== now) flip();
+        },
+        onPanResponderTerminate: () => {
+          press(0);
+          Animated.spring(pos, { toValue: live.current.on ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+        },
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const base = pos.interpolate({ inputRange: [0, 1], outputRange: [dOff, dOn], extrapolate: 'clamp' });
+  const thumbW = Animated.add(base, Animated.multiply(stretch, stretchW));
+  const thumbH = Animated.add(base, Animated.multiply(stretch, growH));
+  const left = Animated.subtract(
+    pos.interpolate({ inputRange: [0, 1], outputRange: [c0 - dOff / 2, c1 - dOn / 2], extrapolate: 'clamp' }),
+    Animated.multiply(
+      pos.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
+      Animated.multiply(stretch, stretchW)
+    )
+  );
+  const top = Animated.subtract(
+    pos.interpolate({ inputRange: [0, 1], outputRange: [(innerH - dOff) / 2, (innerH - dOn) / 2], extrapolate: 'clamp' }),
+    Animated.multiply(stretch, growH / 2)
+  );
+
+  const offTrack = material ? alpha(colors.mutedForeground, 0.12) : alpha(colors.foreground, dark ? 0.16 : 0.1);
+  const trackBg = pos.interpolate({ inputRange: [0, 1], outputRange: [offTrack, tint], extrapolate: 'clamp' });
+  const trackBorder = pos.interpolate({ inputRange: [0, 1], outputRange: [colors.mutedForeground, tint], extrapolate: 'clamp' });
+  const onFg = readableOn(tint);
+  const thumbBg = material
+    ? pos.interpolate({ inputRange: [0, 1], outputRange: [colors.mutedForeground, onFg], extrapolate: 'clamp' })
+    : '#ffffff';
+
+  const iconSize = dOn * 0.62;
+  const sunColor = colors.warning;
+  const offIcon = icon === 'theme' ? sunColor : colors.mutedForeground;
+
+  const haloSize = Math.round(dOn * 1.75);
+
+  const control = (
+    <Animated.View
+      {...(disabled ? null : responder.panHandlers)}
+      style={[
+        styles.track,
+        { width: W, height: H, borderRadius: H / 2, backgroundColor: trackBg },
+        material && { borderWidth: border, borderColor: trackBorder },
+      ]}
+    >
+      {material ? null : (
+        // Depth: a soft sheen over the top half, a touch of shade at the bottom, and a hairline edge.
+        <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+          <Svg width={W} height={H}>
+            <Defs>
+              <LinearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor="#ffffff" stopOpacity={dark ? 0.12 : 0.24} />
+                <Stop offset="0.55" stopColor="#ffffff" stopOpacity={0} />
+                <Stop offset="1" stopColor="#000000" stopOpacity={0.07} />
+              </LinearGradient>
+            </Defs>
+            <Rect width={W} height={H} rx={H / 2} fill={`url(#${gid})`} />
+            <Rect
+              x={0.5}
+              y={0.5}
+              width={W - 1}
+              height={H - 1}
+              rx={(H - 1) / 2}
+              fill="none"
+              stroke={colors.foreground}
+              strokeOpacity={dark ? 0.08 : 0.06}
+            />
+          </Svg>
+        </View>
+      )}
+      <Animated.View pointerEvents="none" style={[styles.thumb, { width: thumbW, height: thumbH, left, top }]}>
+        <Animated.View
+          style={[
+            styles.halo,
+            {
+              width: haloSize,
+              height: haloSize,
+              borderRadius: haloSize / 2,
+              backgroundColor: alpha(on ? tint : colors.mutedForeground, 0.2),
+              opacity: halo.interpolate({ inputRange: [0, 1, 2], outputRange: [0, 1, 0] }),
+              transform: [{ scale: halo.interpolate({ inputRange: [0, 1, 2], outputRange: [0.5, 1, 1.45] }) }],
+            },
+          ]}
+        />
+        <Animated.View style={[StyleSheet.absoluteFill, !material && styles.shadow, { borderRadius: H, backgroundColor: thumbBg }]} />
+        {material ? (
+          <Animated.View
+            style={[
+              styles.glyph,
+              {
+                opacity: glyph.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 0, 1] }),
+                transform: [{ scale: glyph.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) }],
+              },
+            ]}
+          >
+            <Svg width={dOn * 0.6} height={dOn * 0.6} viewBox="0 0 24 24" fill="none">
+              <Path d={CHECK} stroke={tint} strokeWidth={3.2} strokeLinecap="round" strokeLinejoin="round" />
+            </Svg>
+          </Animated.View>
+        ) : null}
+        {variant === 'icon' ? (
+          <>
+            <Animated.View
+              style={[
+                styles.glyph,
+                {
+                  opacity: glyph.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 0, 0] }),
+                  transform: [
+                    { rotate: glyph.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '-120deg'] }) },
+                    { scale: glyph.interpolate({ inputRange: [0, 1], outputRange: [1, 0.4] }) },
+                  ],
+                },
+              ]}
+            >
+              <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
+                {icon === 'theme' ? (
+                  <>
+                    <Circle cx={12} cy={12} r={4.2} fill={offIcon} />
+                    <Path d={SUN_RAYS} stroke={offIcon} strokeWidth={2.2} strokeLinecap="round" />
+                  </>
+                ) : (
+                  <Path d={CROSS} stroke={offIcon} strokeWidth={2.8} strokeLinecap="round" />
+                )}
+              </Svg>
+            </Animated.View>
+            <Animated.View
+              style={[
+                styles.glyph,
+                {
+                  opacity: glyph.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 0, 1] }),
+                  transform: [
+                    { rotate: glyph.interpolate({ inputRange: [0, 1], outputRange: ['120deg', '0deg'] }) },
+                    { scale: glyph.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) },
+                  ],
+                },
+              ]}
+            >
+              <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
+                {icon === 'theme' ? (
+                  <Path d={MOON} fill={tint} />
+                ) : (
+                  <Path d={CHECK} stroke={tint} strokeWidth={2.8} strokeLinecap="round" strokeLinejoin="round" />
+                )}
+              </Svg>
+            </Animated.View>
+          </>
+        ) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+
+  const a11y = {
+    accessibilityRole: 'switch' as const,
+    accessibilityState: { checked: on, disabled: !!disabled },
+    accessibilityLabel: accessibilityLabel ?? label,
+    disabled,
+    onPress: () => {
+      if (Date.now() - drag.current.endedAt > 400) toggle();
+    },
+    onPressIn: () => press(1),
+    onPressOut: () => press(0),
+  };
+
+  if (!label) {
+    return (
+      <Pressable {...a11y} hitSlop={Math.max(0, (44 - H) / 2)} style={[{ alignSelf: 'flex-start', opacity: disabled ? 0.45 : 1 }, style]}>
+        {control}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable {...a11y} style={[styles.row, { opacity: disabled ? 0.45 : 1 }, style]}>
+      <View style={styles.text}>
+        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
+        {description ? <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text> : null}
+      </View>
+      {control}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 16, minHeight: 44 },
+  text: { flex: 1 },
+  label: { fontSize: 15.5, fontWeight: '400' },
+  description: { fontSize: 13, lineHeight: 18, marginTop: 2 },
+  track: { justifyContent: 'center' },
+  thumb: { position: 'absolute', alignItems: 'center', justifyContent: 'center' },
+  halo: { position: 'absolute' },
+  shadow: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(0,0,0,0.06)',
+    shadowColor: '#000',
+    shadowOpacity: 0.22,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3,
+  },
+  glyph: { position: 'absolute' },
+});