@expokit/cli 0.0.0-stage → 0.3.0

package/registry/search-bar/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/search-bar.json

@@ -0,0 +1,17 @@
+{
+  "name": "search-bar",
+  "type": "component",
+  "title": "Search Bar",
+  "description": "Search field with a soft focus halo: the magnifier pops on focus, Cancel slides in as the field springs narrower, the clear button scales in and a spinning arc shows loading. Suggestions drop down in an animated panel with recent / trending icons and the matching text in bold; a trailing slot fits a filter or mic button. The minimal variant expands from a round icon.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "search-bar/files"
+}

package/registry/search-results.json

@@ -0,0 +1,30 @@
+{
+  "name": "search-results",
+  "type": "block",
+  "title": "Search Results",
+  "description": "A clean, monochrome search screen: a compact pinned search field, one scrolling row of filter chips (Filters sheet, sort, price, rating, free delivery, open now), tight list rows with neutral thumbnails, rating, distance and price, Recent and Trending while the field is empty, skeleton rows while searching and a compact “No results” state — with a subtle staggered entrance that respects Reduce Motion.",
+  "tier": "pro",
+  "dependencies": [
+    "expo-haptics",
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit",
+    "bottom-sheet",
+    "button",
+    "radio-group",
+    "search-bar",
+    "skeleton",
+    "slider"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/bottom-sheet.tsx",
+    "components/ui/button.tsx",
+    "components/ui/radio-group.tsx",
+    "components/ui/search-bar.tsx",
+    "components/ui/skeleton.tsx",
+    "components/ui/slider.tsx"
+  ],
+  "filesDir": null
+}

package/registry/segmented-control/files/src/components/ui/segmented-control.tsx

@@ -0,0 +1,341 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
+import {
+  Animated,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+
+export type SegmentedControlVariant = 'pill' | 'underline' | 'outline';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+
+export interface SegmentOption {
+  value: string;
+  label?: string;
+  /** Icon node, or a function that receives the current text colour. */
+  icon?: React.ReactNode | ((state: { active: boolean; color: string }) => React.ReactNode);
+  accessibilityLabel?: string;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps {
+  /** Segments — plain strings or `{ value, label, icon }` objects. */
+  options: (string | SegmentOption)[];
+  /** Controlled selection. */
+  value?: string;
+  /** Initial selection when uncontrolled (default: first segment). */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  variant?: SegmentedControlVariant;
+  size?: SegmentedControlSize;
+  /** Equal-width segments that fill the row (default) or segments sized to their content. */
+  fullWidth?: boolean;
+  /** Indicator colour. Pill uses a raised surface unless an accent is given. */
+  accent?: string;
+  disabled?: boolean;
+  /** Selection tick on change (default true). */
+  haptics?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<SegmentedControlSize, { h: number; font: number; px: number; icon: number }> = {
+  sm: { h: 32, font: 13, px: 12, icon: 14 },
+  md: { h: 40, font: 14.5, px: 16, icon: 16 },
+  lg: { h: 48, font: 16, px: 20, icon: 18 },
+};
+
+const INSET = 3;
+// Liquid move: the edge in the direction of travel leads, the other one trails behind.
+const LEAD = motion.snappy;
+const TRAIL = { damping: 20, stiffness: 150, mass: 0.9 };
+
+/**
+ * Segmented control with a liquid indicator: its leading edge springs ahead and the trailing
+ * edge catches up, so it stretches as it travels. Measured with onLayout so it fits any label.
+ * Drag the selected segment to scrub across the others. Pill (iOS), underline (tabs) and outline
+ * looks, with optional icons.
+ */
+export function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = 'pill',
+  size = 'md',
+  fullWidth = true,
+  accent,
+  disabled,
+  haptics = true,
+  accessibilityLabel,
+  style,
+}: SegmentedControlProps) {
+  const { colors, radius, dark } = useKit();
+  const gid = 'sc' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const items: SegmentOption[] = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  const [inner, setInner] = useState(defaultValue ?? items[0]?.value);
+  const selected = value ?? inner;
+  const index = Math.max(0, items.findIndex((o) => o.value === selected));
+  const s = SIZES[size];
+
+  const layouts = useRef<{ x: number; width: number }[]>([]);
+  const [measured, setMeasured] = useState(0);
+  // Left and right edges of the indicator, animated separately (JS driver, they set left/width).
+  const lx = useRef(new Animated.Value(0)).current;
+  const rx = useRef(new Animated.Value(0)).current;
+  const placed = useRef(false);
+  const shown = useRef(-1);
+
+  useEffect(() => {
+    const l = layouts.current[index];
+    if (!l) return;
+    if (!placed.current) {
+      lx.setValue(l.x);
+      rx.setValue(l.x + l.width);
+      placed.current = true;
+      shown.current = index;
+      return;
+    }
+    const right = index >= shown.current;
+    shown.current = index;
+    Animated.parallel([
+      Animated.spring(lx, { toValue: l.x, useNativeDriver: false, ...(right ? TRAIL : LEAD) }),
+      Animated.spring(rx, { toValue: l.x + l.width, useNativeDriver: false, ...(right ? LEAD : TRAIL) }),
+    ]).start();
+  }, [index, measured, lx, rx]);
+
+  const onSegmentLayout = (i: number) => (e: LayoutChangeEvent) => {
+    const { x: lx, width } = e.nativeEvent.layout;
+    const prev = layouts.current[i];
+    if (prev && prev.x === lx && prev.width === width) return;
+    layouts.current[i] = { x: lx, width };
+    setMeasured((n) => n + 1);
+  };
+
+  const select = (next: string) => {
+    if (next === selected) return;
+    if (haptics) Haptics.selectionAsync().catch(() => {});
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  // Scrub: a horizontal drag that starts on the selected segment slides the selection along.
+  // Drags that start elsewhere are left alone, so the control still scrolls inside a ScrollView.
+  const live = useRef({ items, select, disabled });
+  live.current = { items, select, disabled };
+  const touch = useRef({ originX: 0, onActive: false });
+  const onSegmentPressIn = (i: number, active: boolean) => (e: GestureResponderEvent) => {
+    const l = layouts.current[i];
+    touch.current = { originX: e.nativeEvent.pageX - ((l?.x ?? 0) + e.nativeEvent.locationX), onActive: active };
+  };
+  const scrub = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponderCapture: (_, g) =>
+          !live.current.disabled && touch.current.onActive && Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderRelease: () => (touch.current.onActive = false),
+        onPanResponderTerminate: () => (touch.current.onActive = false),
+        onPanResponderMove: (_, g) => {
+          const at = g.moveX - touch.current.originX;
+          const { items: opts, select: pick } = live.current;
+          let best = -1;
+          let dist = Infinity;
+          layouts.current.forEach((l, i) => {
+            if (!l || opts[i]?.disabled) return;
+            const d = at < l.x ? l.x - at : at > l.x + l.width ? at - l.x - l.width : 0;
+            if (d < dist) [best, dist] = [i, d];
+          });
+          if (best >= 0) pick(opts[best].value);
+        },
+      }),
+    []
+  );
+
+  const tint = accent ?? colors.accent;
+  const pill = variant === 'pill';
+  const underline = variant === 'underline';
+  const outline = variant === 'outline';
+  const segRadius = Math.min(radius.md, (s.h - INSET * 2) / 2);
+
+  const activeFg = pill ? (accent ? readableOn(accent) : colors.foreground) : underline ? colors.foreground : tint;
+  const idleFg = colors.mutedForeground;
+
+  const indicator: ViewStyle = pill
+    ? {
+        top: INSET,
+        bottom: INSET,
+        borderRadius: segRadius,
+        backgroundColor: accent ?? (dark ? colors.input : colors.background),
+        borderWidth: accent ? 0 : StyleSheet.hairlineWidth,
+        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),
+      }
+    : underline
+      ? { bottom: 0, height: 3, borderTopLeftRadius: 3, borderTopRightRadius: 3, backgroundColor: tint }
+      : {
+          top: INSET,
+          bottom: INSET,
+          borderRadius: segRadius,
+          backgroundColor: alpha(tint, 0.12),
+          borderWidth: 1.5,
+          borderColor: alpha(tint, 0.55),
+        };
+
+  // onLayout x includes the track border; absolute children start inside it.
+  const trackBorder = pill ? StyleSheet.hairlineWidth : outline ? 1 : 0;
+
+  return (
+    <View
+      {...scrub.panHandlers}
+      accessibilityRole="tablist"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        styles.track,
+        { opacity: disabled ? 0.5 : 1, alignSelf: fullWidth ? 'stretch' : 'flex-start' },
+        pill && {
+          padding: INSET,
+          borderRadius: segRadius + INSET,
+          backgroundColor: colors.muted,
+          borderWidth: trackBorder,
+          borderColor: colors.border,
+        },
+        outline && { padding: INSET, borderRadius: segRadius + INSET, borderWidth: 1, borderColor: colors.border },
+        underline && { borderBottomWidth: StyleSheet.hairlineWidth, borderColor: colors.border },
+        style,
+      ]}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.indicator,
+          indicator,
+          pill && !accent && styles.shadow,
+          {
+            left: trackBorder ? Animated.add(lx, -trackBorder) : lx,
+            width: Animated.subtract(rx, lx),
+            opacity: layouts.current[index] ? 1 : 0,
+          },
+        ]}
+      >
+        {pill && accent ? (
+          // A soft sheen on the filled accent pill.
+          <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
+            <Defs>
+              <LinearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor="#ffffff" stopOpacity={0.26} />
+                <Stop offset="0.6" stopColor="#ffffff" stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect width="100%" height="100%" rx={segRadius} fill={`url(#${gid})`} />
+          </Svg>
+        ) : null}
+      </Animated.View>
+      {items.map((o, i) => (
+        <Segment
+          key={o.value}
+          option={o}
+          active={i === index}
+          onPress={() => select(o.value)}
+          onPressIn={onSegmentPressIn(i, i === index)}
+          onLayout={onSegmentLayout(i)}
+          fullWidth={fullWidth}
+          size={s}
+          height={underline ? s.h : s.h - INSET * 2}
+          activeFg={activeFg}
+          idleFg={idleFg}
+          disabled={disabled || o.disabled}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface SegmentProps {
+  option: SegmentOption;
+  active: boolean;
+  onPress: () => void;
+  onPressIn: (e: GestureResponderEvent) => void;
+  onLayout: (e: LayoutChangeEvent) => void;
+  fullWidth: boolean;
+  size: { h: number; font: number; px: number; icon: number };
+  height: number;
+  activeFg: string;
+  idleFg: string;
+  disabled?: boolean;
+}
+
+function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size, height, activeFg, idleFg, disabled }: SegmentProps) {
+  // a: text colour (JS). press: content squish, pop: little bounce on selection (native, same view).
+  const a = useRef(new Animated.Value(active ? 1 : 0)).current;
+  const press = useRef(new Animated.Value(1)).current;
+  const pop = useRef(new Animated.Value(1)).current;
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    Animated.timing(a, { toValue: active ? 1 : 0, duration: 180, useNativeDriver: false }).start();
+    if (active && mounted.current) {
+      pop.setValue(0.9);
+      Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    }
+    mounted.current = true;
+  }, [active, a, pop]);
+
+  const pressTo = (to: number) =>
+    Animated.spring(press, { toValue: to, useNativeDriver: true, ...(to < 1 ? motion.snappy : motion.bouncy) }).start();
+
+  const color = a.interpolate({ inputRange: [0, 1], outputRange: [idleFg, activeFg] });
+  const icon =
+    typeof option.icon === 'function' ? option.icon({ active, color: active ? activeFg : idleFg }) : option.icon;
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active, disabled: !!disabled }}
+      accessibilityLabel={option.accessibilityLabel ?? option.label}
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={(e) => {
+        onPressIn(e);
+        pressTo(0.94);
+      }}
+      onPressOut={() => pressTo(1)}
+      onLayout={onLayout}
+      hitSlop={height < 44 ? { top: (44 - height) / 2, bottom: (44 - height) / 2 } : undefined}
+      style={[styles.segment, fullWidth && styles.flex, { height, paddingHorizontal: size.px }]}
+    >
+      <Animated.View style={[styles.content, { transform: [{ scale: Animated.multiply(press, pop) }] }]}>
+        {icon ? <View style={{ minWidth: size.icon, alignItems: 'center' }}>{icon}</View> : null}
+        {option.label ? (
+          <Animated.Text numberOfLines={1} style={[styles.label, { fontSize: size.font, color }]}>
+            {option.label}
+          </Animated.Text>
+        ) : null}
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { flexDirection: 'row', alignItems: 'center' },
+  flex: { flex: 1 },
+  indicator: { position: 'absolute' },
+  shadow: {
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+  segment: { alignItems: 'center', justifyContent: 'center', minWidth: 0 },
+  content: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  label: { fontWeight: '400', letterSpacing: -0.1, userSelect: 'none' },
+});