@expokit/cli 0.0.0-stage → 0.3.0

package/registry/search-bar/files/src/components/ui/search-bar.tsx

@@ -0,0 +1,530 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+import { alpha, motion, useKit } from '@/lib/kit';
+
+export type SearchBarVariant = 'default' | 'filled' | 'minimal';
+export type SearchBarSize = 'sm' | 'md' | 'lg';
+
+export interface SearchSuggestion {
+  key: string;
+  label: string;
+  /** Muted text on the right, e.g. a category or result count. */
+  hint?: string;
+  /** Leading icon (default 'search'). */
+  icon?: 'recent' | 'trending' | 'search';
+}
+
+export interface SearchBarProps extends Omit<TextInputProps, 'style'> {
+  /** 'default' outlined pill · 'filled' iOS-style grey field · 'minimal' icon that expands into a field. */
+  variant?: SearchBarVariant;
+  /** 'sm' 36pt · 'md' 44pt · 'lg' 52pt. */
+  size?: SearchBarSize;
+  /** Swaps the magnifier for a spinning arc (e.g. while results load). */
+  loading?: boolean;
+  /** Slide a Cancel button in from the right while searching (default: true, except 'minimal'). */
+  showCancel?: boolean;
+  cancelLabel?: string;
+  /** Called after Cancel clears the query and dismisses the keyboard. */
+  onCancel?: () => void;
+  /** Called when the clear button empties the query. */
+  onClear?: () => void;
+  /** Focus colour (default: theme accent). */
+  accent?: string;
+  /** 'minimal' only: which side the collapsed icon rests on. */
+  align?: 'left' | 'right';
+  /** Shown in a dropdown panel under the bar while it is focused. */
+  suggestions?: SearchSuggestion[];
+  /** Called when a suggestion is picked (the query is set to its label first). */
+  onSelectSuggestion?: (item: SearchSuggestion) => void;
+  /** Filter suggestions by the query (default true). Turn off if you filter them yourself. */
+  filterSuggestions?: boolean;
+  /** Most suggestions to show (default 6). */
+  maxSuggestions?: number;
+  /** Rendered inside the field on the right, e.g. a mic or filter button. */
+  trailing?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Every dimension comes from one table so the sizes read clearly different. */
+const SIZES: Record<SearchBarSize, { h: number; font: number; icon: number; slot: number; r: number; clear: number; end: number }> = {
+  sm: { h: 34, font: 14, icon: 14, slot: 30, r: 9, clear: 16, end: 6 },
+  md: { h: 44, font: 16, icon: 18, slot: 40, r: 12, clear: 20, end: 8 },
+  lg: { h: 56, font: 19, icon: 22, slot: 52, r: 16, clear: 24, end: 12 },
+};
+
+/** react-native-web draws the browser focus outline; our border + halo is the focus indicator. */
+const webNoOutline = Platform.OS === 'web' ? ({ outlineStyle: 'none', outlineWidth: 0 } as object) : null;
+
+/**
+ * Search field with a focus halo: the magnifier pops on focus, Cancel slides in as the field
+ * springs narrower, a clear button scales in, a spinning arc shows loading and a suggestion
+ * panel drops down while focused. The 'minimal' variant rests as a round icon and expands
+ * into a full field when tapped.
+ */
+export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBar(
+  {
+    variant = 'default',
+    size = 'md',
+    loading = false,
+    showCancel,
+    cancelLabel = 'Cancel',
+    onCancel,
+    onClear,
+    accent,
+    align = 'left',
+    suggestions,
+    onSelectSuggestion,
+    filterSuggestions = true,
+    maxSuggestions = 6,
+    trailing,
+    style,
+    value,
+    defaultValue,
+    onChangeText,
+    onFocus,
+    onBlur,
+    placeholder = 'Search',
+    editable = true,
+    autoFocus,
+    ...props
+  },
+  ref
+) {
+  const { colors, radius } = useKit();
+  const s = SIZES[size];
+  const tint = accent ?? colors.accent;
+  const minimal = variant === 'minimal';
+  const cancelEnabled = !minimal && (showCancel ?? true);
+
+  const inputRef = useRef<TextInput>(null);
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  const [focused, setFocused] = useState(false);
+  const [inner, setInner] = useState(defaultValue ?? '');
+  const text = value ?? inner;
+  const [expanded, setExpanded] = useState(!!text || !!autoFocus);
+  const [rowW, setRowW] = useState(0);
+  const [cancelW, setCancelW] = useState(0);
+
+  const open = !minimal || expanded;
+  const cancelShown = cancelEnabled && (focused || text.length > 0);
+
+  // JS driver: layout (widths) and colours.
+  const focusJS = useRef(new Animated.Value(0)).current;
+  const cancelJS = useRef(new Animated.Value(0)).current;
+  const openJS = useRef(new Animated.Value(open ? 1 : 0)).current;
+  // Native driver: opacity and transforms, on different views.
+  const halo = useRef(new Animated.Value(0)).current;
+  const cancelN = useRef(new Animated.Value(0)).current;
+  const openN = useRef(new Animated.Value(open ? 1 : 0)).current;
+  const icon = useRef(new Animated.Value(1)).current;
+  const clear = useRef(new Animated.Value(text ? 1 : 0)).current;
+  const busy = useRef(new Animated.Value(loading ? 1 : 0)).current;
+  const spin = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const to = focused ? 1 : 0;
+    Animated.timing(focusJS, { toValue: to, duration: motion.fast, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
+    Animated.spring(halo, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
+    if (focused) {
+      icon.setValue(0.6);
+      Animated.spring(icon, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    }
+  }, [focused, focusJS, halo, icon]);
+
+  useEffect(() => {
+    const to = cancelShown ? 1 : 0;
+    Animated.spring(cancelJS, { toValue: to, useNativeDriver: false, ...motion.snappy }).start();
+    Animated.spring(cancelN, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
+  }, [cancelShown, cancelJS, cancelN]);
+
+  useEffect(() => {
+    const to = open ? 1 : 0;
+    Animated.spring(openJS, { toValue: to, useNativeDriver: false, ...motion.gentle }).start();
+    Animated.timing(openN, { toValue: to, duration: open ? motion.normal : motion.fast, delay: open ? 80 : 0, useNativeDriver: true }).start();
+  }, [open, openJS, openN]);
+
+  useEffect(() => {
+    Animated.spring(clear, { toValue: text && editable && open ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [text, editable, open, clear]);
+
+  useEffect(() => {
+    Animated.timing(busy, { toValue: loading ? 1 : 0, duration: motion.fast, useNativeDriver: true }).start();
+    if (!loading) return;
+    spin.setValue(0);
+    const loop = Animated.loop(Animated.timing(spin, { toValue: 1, duration: 750, easing: Easing.linear, useNativeDriver: true }));
+    loop.start();
+    return () => loop.stop();
+  }, [loading, busy, spin]);
+
+  // The panel closes a beat after blur so a tap on a suggestion still lands (web blurs on mousedown).
+  const [panelOpen, setPanelOpen] = useState(false);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    if (focused) setPanelOpen(true);
+    else closeTimer.current = setTimeout(() => setPanelOpen(false), 160);
+    return () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    };
+  }, [focused]);
+
+  const query = text.trim().toLowerCase();
+  const visible = (suggestions ?? [])
+    .filter((item) => !filterSuggestions || !query || item.label.toLowerCase().includes(query))
+    .slice(0, maxSuggestions);
+
+  const setText = (next: string) => {
+    if (value === undefined) setInner(next);
+    onChangeText?.(next);
+  };
+
+  const expand = () => {
+    setExpanded(true);
+    requestAnimationFrame(() => inputRef.current?.focus());
+  };
+
+  const cancel = () => {
+    setText('');
+    inputRef.current?.blur();
+    if (minimal) setExpanded(false);
+    onCancel?.();
+  };
+
+  const select = (item: SearchSuggestion) => {
+    setText(item.label);
+    setPanelOpen(false);
+    inputRef.current?.blur();
+    onSelectSuggestion?.(item);
+  };
+
+  const look: Record<SearchBarVariant, { bg: string; rest: string; r: number }> = {
+    default: { bg: colors.card, rest: colors.input, r: radius.capsule(s.h) },
+    filled: { bg: colors.muted, rest: alpha(colors.muted, 0), r: Math.round(s.r * (radius.md / 12)) },
+    minimal: { bg: colors.muted, rest: alpha(colors.muted, 0), r: radius.capsule(s.h) },
+  };
+  const { bg, rest, r } = look[variant];
+  const borderColor = focusJS.interpolate({ inputRange: [0, 1], outputRange: [rest, tint] });
+  const fieldW = minimal ? openJS.interpolate({ inputRange: [0, 1], outputRange: [s.h, Math.max(s.h, rowW)] }) : undefined;
+  const slot = minimal ? s.h : s.slot;
+  const iconColor = focused ? tint : minimal && !open ? colors.foreground : colors.mutedForeground;
+
+  return (
+    <View style={[styles.root, !editable && styles.disabled, style]}>
+      <View
+        onLayout={(e) => setRowW(e.nativeEvent.layout.width)}
+        style={[styles.row, minimal && { justifyContent: align === 'right' ? 'flex-end' : 'flex-start' }]}
+      >
+        <Animated.View style={minimal ? { width: fieldW, height: s.h } : [styles.flex, { height: s.h }]}>
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.halo,
+              {
+                borderRadius: r + 4,
+                backgroundColor: alpha(tint, 0.18),
+                opacity: halo,
+                transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }],
+              },
+            ]}
+          />
+          <Animated.View style={[styles.field, { borderRadius: r, backgroundColor: bg, borderColor }]}>
+            <View style={[styles.slot, { width: slot }]}>
+              <Animated.View
+                style={{
+                  opacity: busy.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+                  transform: [
+                    { scale: icon },
+                    { rotate: icon.interpolate({ inputRange: [0, 1], outputRange: ['-30deg', '0deg'] }) },
+                  ],
+                }}
+              >
+                <Icon name="search" size={s.icon} color={iconColor} />
+              </Animated.View>
+              <Animated.View
+                pointerEvents="none"
+                style={[
+                  styles.center,
+                  { opacity: busy, transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) }] },
+                ]}
+              >
+                <Svg width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none">
+                  <Circle cx={12} cy={12} r={8.5} stroke={alpha(tint, 0.2)} strokeWidth={2.2} />
+                  <Path d="M12 3.5a8.5 8.5 0 0 1 8.5 8.5" stroke={tint} strokeWidth={2.2} strokeLinecap="round" />
+                </Svg>
+              </Animated.View>
+            </View>
+            <Animated.View style={[styles.flex, { opacity: openN }]} pointerEvents={open ? 'auto' : 'none'}>
+              <TextInput
+                ref={inputRef}
+                returnKeyType="search"
+                autoCorrect={false}
+                accessibilityRole="search"
+                accessibilityLabel={props.accessibilityLabel ?? placeholder}
+                {...props}
+                autoFocus={autoFocus}
+                editable={editable}
+                value={text}
+                onChangeText={setText}
+                placeholder={placeholder}
+                placeholderTextColor={colors.mutedForeground}
+                selectionColor={tint}
+                cursorColor={tint}
+                onFocus={(e) => {
+                  setFocused(true);
+                  onFocus?.(e);
+                }}
+                onBlur={(e) => {
+                  setFocused(false);
+                  if (minimal && !text) setExpanded(false);
+                  onBlur?.(e);
+                }}
+                style={[styles.input, { color: colors.foreground, fontSize: s.font, height: s.h - 3 }, webNoOutline]}
+              />
+            </Animated.View>
+            <Animated.View
+              pointerEvents={text && open ? 'auto' : 'none'}
+              style={[styles.clear, { width: s.clear + 8, opacity: clear, transform: [{ scale: clear }] }]}
+            >
+              <Pressable
+                hitSlop={12}
+                accessibilityRole="button"
+                accessibilityLabel="Clear search"
+                onPress={() => {
+                  setText('');
+                  onClear?.();
+                  inputRef.current?.focus();
+                }}
+                style={[
+                  styles.clearDot,
+                  { width: s.clear, height: s.clear, borderRadius: s.clear / 2, backgroundColor: alpha(colors.mutedForeground, 0.22) },
+                ]}
+              >
+                <Svg width={s.clear / 2} height={s.clear / 2} viewBox="0 0 24 24" fill="none">
+                  <Path d="M6 6l12 12M18 6L6 18" stroke={colors.foreground} strokeWidth={3} strokeLinecap="round" />
+                </Svg>
+              </Pressable>
+            </Animated.View>
+            {trailing ? (
+              <Animated.View style={[styles.trailing, { paddingRight: s.end - 2, opacity: openN }]} pointerEvents={open ? 'auto' : 'none'}>
+                {trailing}
+              </Animated.View>
+            ) : (
+              <View style={{ width: s.end }} />
+            )}
+            {minimal && !open ? (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={placeholder}
+                onPress={expand}
+                disabled={!editable}
+                style={StyleSheet.absoluteFill}
+              />
+            ) : null}
+          </Animated.View>
+        </Animated.View>
+
+        {cancelEnabled ? (
+          <>
+            <Text
+              pointerEvents="none"
+              onLayout={(e) => setCancelW(Math.ceil(e.nativeEvent.layout.width) + 14)}
+              style={[styles.cancelText, styles.measure, { fontSize: s.font }]}
+            >
+              {cancelLabel}
+            </Text>
+            <Animated.View
+              style={{ height: s.h, overflow: 'hidden', width: cancelJS.interpolate({ inputRange: [0, 1], outputRange: [0, cancelW] }) }}
+            >
+              <Animated.View
+                style={[
+                  styles.cancel,
+                  {
+                    width: cancelW,
+                    opacity: cancelN,
+                    transform: [{ translateX: cancelN.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) }],
+                  },
+                ]}
+              >
+                <Pressable
+                  hitSlop={{ top: 10, bottom: 10, left: 6, right: 10 }}
+                  accessibilityRole="button"
+                  accessibilityLabel={cancelLabel}
+                  onPress={cancel}
+                >
+                  <Text numberOfLines={1} style={[styles.cancelText, { color: tint, fontSize: s.font }]}>
+                    {cancelLabel}
+                  </Text>
+                </Pressable>
+              </Animated.View>
+            </Animated.View>
+          </>
+        ) : null}
+      </View>
+
+      {suggestions ? (
+        <SuggestionPanel open={panelOpen && open && visible.length > 0} items={visible} query={query} tint={tint} onSelect={select} />
+      ) : null}
+    </View>
+  );
+});
+
+/** Dropdown list under the bar: drops in, rows show an icon, bolded match and a hint. */
+function SuggestionPanel({
+  open,
+  items,
+  query,
+  tint,
+  onSelect,
+}: {
+  open: boolean;
+  items: SearchSuggestion[];
+  query: string;
+  tint: string;
+  onSelect: (item: SearchSuggestion) => void;
+}) {
+  const { colors, radius } = useKit();
+  const [mounted, setMounted] = useState(open);
+  const enter = useRef(new Animated.Value(0)).current;
+  const last = useRef(items);
+  if (items.length) last.current = items;
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    } else {
+      Animated.timing(enter, { toValue: 0, duration: motion.fast, useNativeDriver: true }).start(({ finished }) => {
+        if (finished) setMounted(false);
+      });
+    }
+  }, [open, enter]);
+
+  if (!mounted) return null;
+  return (
+    <Animated.View
+      accessibilityRole="list"
+      style={[
+        styles.panel,
+        {
+          backgroundColor: colors.popover,
+          borderColor: colors.border,
+          borderRadius: radius.lg,
+          opacity: enter,
+          transform: [
+            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-6, 0] }) },
+            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [0.98, 1] }) },
+          ],
+        },
+      ]}
+    >
+      {last.current.map((item) => (
+        <Pressable
+          key={item.key}
+          accessibilityRole="button"
+          accessibilityLabel={item.hint ? `${item.label}, ${item.hint}` : item.label}
+          onPress={() => onSelect(item)}
+          style={({ pressed }) => [styles.option, pressed && { backgroundColor: alpha(tint, 0.1) }]}
+        >
+          <View style={[styles.optionIcon, { backgroundColor: colors.muted }]}>
+            <Icon name={item.icon ?? 'search'} size={15} color={item.icon === 'trending' ? tint : colors.mutedForeground} />
+          </View>
+          <Text numberOfLines={1} style={[styles.optionText, { color: colors.mutedForeground }]}>
+            <Highlight label={item.label} query={query} color={colors.foreground} />
+          </Text>
+          {item.hint ? (
+            <Text numberOfLines={1} style={[styles.hint, { color: colors.mutedForeground }]}>
+              {item.hint}
+            </Text>
+          ) : null}
+        </Pressable>
+      ))}
+    </Animated.View>
+  );
+}
+
+/** Bolds the part of `label` that matches the query (the whole label when there is no query). */
+function Highlight({ label, query, color }: { label: string; query: string; color: string }) {
+  const at = query ? label.toLowerCase().indexOf(query) : -1;
+  if (!query) return <Text style={{ color, fontWeight: '400' }}>{label}</Text>;
+  if (at < 0) return <Text>{label}</Text>;
+  return (
+    <>
+      {label.slice(0, at)}
+      <Text style={{ color, fontWeight: '400' }}>{label.slice(at, at + query.length)}</Text>
+      {label.slice(at + query.length)}
+    </>
+  );
+}
+
+function Icon({ name, size, color }: { name: 'search' | 'recent' | 'trending'; size: number; color: string }) {
+  const p = { stroke: color, strokeWidth: 1.8, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {name === 'search' ? (
+        <>
+          <Circle cx={10.8} cy={10.8} r={6.6} {...p} strokeWidth={2.1} />
+          <Path d="M15.8 15.8 20 20" {...p} strokeWidth={2.1} />
+        </>
+      ) : name === 'recent' ? (
+        <>
+          <Path d="M4.6 12a7.6 7.6 0 1 0 2.2-5.4" {...p} />
+          <Path d="M4.5 4.4v3.3h3.3" {...p} />
+          <Path d="M12 8.2V12l2.6 1.7" {...p} />
+        </>
+      ) : (
+        <>
+          <Path d="M3.5 16.5 9.2 10.8l3.6 3.6L20.5 6.7" {...p} />
+          <Path d="M15.3 6.7h5.2v5.2" {...p} />
+        </>
+      )}
+    </Svg>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { alignSelf: 'stretch' },
+  disabled: { opacity: 0.5 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  flex: { flex: 1 },
+  halo: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4 },
+  field: { flex: 1, flexDirection: 'row', alignItems: 'center', borderWidth: 1.5, overflow: 'hidden' },
+  slot: { height: '100%', alignItems: 'center', justifyContent: 'center' },
+  center: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' },
+  input: { paddingVertical: 0, paddingLeft: 0, paddingRight: 4 },
+  clear: { alignItems: 'center', justifyContent: 'center' },
+  clearDot: { alignItems: 'center', justifyContent: 'center' },
+  trailing: { paddingLeft: 2, alignItems: 'center', justifyContent: 'center' },
+  cancel: { position: 'absolute', left: 0, top: 0, bottom: 0, justifyContent: 'center', paddingLeft: 14 },
+  cancelText: { fontWeight: '400' },
+  measure: { position: 'absolute', opacity: 0, left: 0, top: 0 },
+  panel: {
+    marginTop: 10,
+    paddingVertical: 6,
+    borderWidth: StyleSheet.hairlineWidth * 2,
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 4,
+  },
+  option: { flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 44, paddingHorizontal: 12 },
+  optionIcon: { width: 28, height: 28, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
+  optionText: { flex: 1, fontSize: 15 },
+  hint: { fontSize: 12.5, maxWidth: 110 },
+});