@cyberkaidev/ui 0.1.0

package/src/components/Overlays.tsx

@@ -0,0 +1,21 @@
+import { LoadingApp } from './LoadingApp';
+import { Toast } from './Toast';
+
+type Props = {
+  /** Caption shown under the loading spinner. */
+  loadingLabel?: string;
+};
+
+/**
+ * App-wide overlays (`Toast` + `LoadingApp`). Mount **once** at the root of the
+ * app — inside `ThemeProvider`, as a sibling of your navigator. They render
+ * above everything and are driven from anywhere via `useToast` / `useLoadingApp`.
+ */
+export function Overlays({ loadingLabel }: Props) {
+  return (
+    <>
+      <Toast />
+      <LoadingApp label={loadingLabel} />
+    </>
+  );
+}

package/src/components/RippleEffect.tsx

@@ -0,0 +1,244 @@
+import React from 'react';
+import {
+  Animated,
+  Easing,
+  I18nManager,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import type {
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  PressableProps,
+} from 'react-native';
+
+import { useColors } from '../ThemeProvider';
+
+type RippleItemType = {
+  unique: number;
+  locationX: number;
+  locationY: number;
+  radius: number;
+  scale: Animated.Value;
+  opacity: Animated.Value;
+};
+
+type Props = PressableProps & {
+  children: React.ReactNode;
+  /** Ripple color. Default: theme `text`. */
+  rippleColor?: string;
+  rippleOpacity?: number;
+  rippleDuration?: number;
+  rippleSize?: number;
+  rippleContainerBorderRadius?: number;
+  rippleCentered?: boolean;
+  rippleSequential?: boolean;
+  rippleFades?: boolean;
+};
+
+const CIRCLE_RADIUS = 10;
+const RELEASE_GROW_DURATION = 150;
+const RELEASE_FADE_DURATION = 250;
+const PRESS_FADE_IN_DURATION = 75;
+
+/** Wraps a child and paints a touch ripple at the press location. */
+export function RippleEffect({
+  children,
+  rippleColor,
+  rippleOpacity = 0.3,
+  rippleDuration = 400,
+  rippleSize = 0,
+  rippleContainerBorderRadius = 0,
+  rippleCentered = false,
+  rippleSequential = false,
+  rippleFades = true,
+  disabled = false,
+  onLayout,
+  onPressIn,
+  onPressOut,
+  ...pressableProps
+}: Props) {
+  const colors = useColors();
+  const color = rippleColor ?? colors.text;
+
+  const [layout, setLayout] = React.useState({ width: 0, height: 0 });
+  const [rippleIds, setRippleIds] = React.useState<number[]>([]);
+  const ripplesRef = React.useRef(new Map<number, RippleItemType>());
+  const activeRippleRef = React.useRef<number | null>(null);
+  const uniqueRef = React.useRef(0);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setLayout({ width, height });
+    onLayout?.(event);
+  };
+
+  const handlePressIn = React.useCallback(
+    (event: GestureResponderEvent) => {
+      onPressIn?.(event);
+
+      if (rippleSequential && ripplesRef.current.size) return;
+
+      const w2 = 0.5 * layout.width;
+      const h2 = 0.5 * layout.height;
+
+      // Fall back to the center when the gesture carries no coordinates.
+      const { locationX, locationY } =
+        rippleCentered || !event?.nativeEvent
+          ? { locationX: w2, locationY: h2 }
+          : event.nativeEvent;
+
+      const offsetX = Math.abs(w2 - locationX);
+      const offsetY = Math.abs(h2 - locationY);
+
+      const radius =
+        rippleSize > 0
+          ? 0.5 * rippleSize
+          : Math.sqrt((w2 + offsetX) ** 2 + (h2 + offsetY) ** 2);
+
+      const ripple: RippleItemType = {
+        unique: uniqueRef.current++,
+        locationX,
+        locationY,
+        radius,
+        scale: new Animated.Value(0),
+        opacity: new Animated.Value(0),
+      };
+
+      ripplesRef.current.set(ripple.unique, ripple);
+      activeRippleRef.current = ripple.unique;
+
+      Animated.timing(ripple.scale, {
+        toValue: 1,
+        duration: rippleDuration,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }).start();
+
+      Animated.timing(ripple.opacity, {
+        toValue: rippleOpacity,
+        duration: Math.min(rippleDuration, PRESS_FADE_IN_DURATION),
+        useNativeDriver: true,
+      }).start();
+
+      setRippleIds((current) => current.concat(ripple.unique));
+    },
+    [
+      layout.width,
+      layout.height,
+      onPressIn,
+      rippleCentered,
+      rippleDuration,
+      rippleOpacity,
+      rippleSequential,
+      rippleSize,
+    ]
+  );
+
+  const handlePressOut = React.useCallback(
+    (event: GestureResponderEvent) => {
+      onPressOut?.(event);
+
+      const releasedUnique = activeRippleRef.current;
+      activeRippleRef.current = null;
+      if (releasedUnique === null) return;
+
+      const ripple = ripplesRef.current.get(releasedUnique);
+      if (!ripple) return;
+
+      const removeRipple = () => {
+        ripplesRef.current.delete(releasedUnique);
+        setRippleIds((current) =>
+          current.filter((id) => id !== releasedUnique)
+        );
+      };
+
+      if (!rippleFades) {
+        removeRipple();
+        return;
+      }
+
+      Animated.parallel([
+        Animated.timing(ripple.scale, {
+          toValue: 1,
+          duration: RELEASE_GROW_DURATION,
+          useNativeDriver: true,
+        }),
+        Animated.timing(ripple.opacity, {
+          toValue: 0,
+          duration: RELEASE_FADE_DURATION,
+          useNativeDriver: true,
+        }),
+      ]).start(removeRipple);
+    },
+    [onPressOut, rippleFades]
+  );
+
+  return (
+    <Pressable
+      {...pressableProps}
+      disabled={disabled}
+      onLayout={handleLayout}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+    >
+      {children}
+      <View
+        pointerEvents="none"
+        style={[
+          styles.container,
+          { borderRadius: rippleContainerBorderRadius },
+        ]}
+      >
+        {rippleIds.map((id) => {
+          const ripple = ripplesRef.current.get(id);
+          if (!ripple) return null;
+          return <RippleCircle key={id} ripple={ripple} color={color} />;
+        })}
+      </View>
+    </Pressable>
+  );
+}
+
+type RippleCircleProps = {
+  ripple: RippleItemType;
+  color: string;
+};
+
+function RippleCircleComponent({ ripple, color }: RippleCircleProps) {
+  const { locationX, locationY, radius, scale, opacity } = ripple;
+
+  const rippleStyle = {
+    top: locationY - CIRCLE_RADIUS,
+    [I18nManager.isRTL ? 'right' : 'left']: locationX - CIRCLE_RADIUS,
+    backgroundColor: color,
+    opacity,
+    transform: [
+      {
+        scale: scale.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.5 / CIRCLE_RADIUS, radius / CIRCLE_RADIUS],
+        }),
+      },
+    ],
+  };
+
+  return <Animated.View style={[styles.circle, rippleStyle]} />;
+}
+
+const RippleCircle = React.memo(RippleCircleComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  circle: {
+    width: CIRCLE_RADIUS * 2,
+    height: CIRCLE_RADIUS * 2,
+    borderRadius: CIRCLE_RADIUS,
+    overflow: 'hidden',
+    position: 'absolute',
+  },
+});

package/src/components/Scaffold.tsx

@@ -0,0 +1,219 @@
+import { FlashList } from '@shopify/flash-list';
+import type { FlashListProps } from '@shopify/flash-list';
+import React from 'react';
+import { View as RNView, StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import type { ScrollHandlerProcessed } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../ThemeProvider';
+import { APP_BAR_HEIGHT, APP_BAR_LARGE_HEIGHT } from './AppBar';
+import { useTabBarHeight } from './TabBar';
+
+/**
+ * Which top bar the screen renders, so the scrolling region can reserve the
+ * matching top inset: `large` = collapsing `AppBar` (`large`), `small` = fixed
+ * `AppBar`/`SearchBar`, `none` = no top bar (just the page inset).
+ */
+export type SpaceTopBarType = 'large' | 'small' | 'none';
+
+type BarSpaceProps = {
+  /** Top inset to reserve for the screen's top bar. Required. */
+  spaceTopBar: SpaceTopBarType;
+  /** Reserve the bottom inset for the fixed `TabBar`. Required. */
+  spaceBottomBar: boolean;
+};
+
+type BodyProps = {
+  children: React.ReactNode;
+  /** Use the elevated `surface` background instead of the base `background`. */
+  surface?: boolean;
+  testID?: string;
+};
+
+type ViewProps = {
+  children: React.ReactNode;
+  paddingHorizontal?: number;
+  paddingTop?: number;
+  testID?: string;
+};
+
+type ScrollViewProps = BarSpaceProps & {
+  children: React.ReactNode;
+  paddingHorizontal?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  onScroll?: ScrollHandlerProcessed;
+  testID?: string;
+};
+
+type FlashListSectionProps<TItem> = BarSpaceProps &
+  Omit<FlashListProps<TItem>, 'onScroll'> & {
+    paddingHorizontal?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    onScroll?: ScrollHandlerProcessed;
+    drawDistance?: number;
+  };
+
+const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
+
+/**
+ * Resolves the top/bottom content insets from the declared bars. `useTabBarHeight`
+ * already includes the bottom safe-area inset.
+ */
+function useBarSpace(spaceTopBar: SpaceTopBarType, spaceBottomBar: boolean) {
+  const { pageSpacing } = useTheme();
+  const { bottom: safeBottom } = useSafeAreaInsets();
+  const tabBarHeight = useTabBarHeight();
+
+  let top: number;
+  if (spaceTopBar === 'large') {
+    top = APP_BAR_LARGE_HEIGHT;
+  } else if (spaceTopBar === 'small') {
+    top = APP_BAR_HEIGHT;
+  } else {
+    top = pageSpacing.top;
+  }
+
+  const bottom = spaceBottomBar
+    ? tabBarHeight + pageSpacing.bottom
+    : pageSpacing.bottom + safeBottom;
+
+  return { top, bottom, safeBottom };
+}
+
+/** Full-screen page container. */
+function Body({ children, surface, testID }: BodyProps) {
+  const { colors } = useTheme();
+  const backgroundColor = surface ? colors.surface : colors.background;
+
+  return (
+    <RNView testID={testID} style={[styles.body, { backgroundColor }]}>
+      {children}
+    </RNView>
+  );
+}
+
+/**
+ * Non-scrolling content region with standard page insets. Content does not
+ * scroll under the fixed bars, so this takes no `spaceTopBar` / `spaceBottomBar`
+ * — pass an explicit `paddingTop` when a top bar covers it.
+ */
+function View({ children, paddingHorizontal, paddingTop, testID }: ViewProps) {
+  const { pageSpacing } = useTheme();
+
+  return (
+    <RNView
+      testID={testID}
+      style={{
+        paddingHorizontal: paddingHorizontal ?? pageSpacing.horizontal,
+        paddingTop: paddingTop ?? pageSpacing.top,
+      }}
+    >
+      {children}
+    </RNView>
+  );
+}
+
+/** Scrolling content region with standard page insets. */
+function ScrollView({
+  children,
+  spaceTopBar,
+  spaceBottomBar,
+  paddingHorizontal,
+  paddingTop,
+  paddingBottom,
+  onScroll,
+  testID,
+}: ScrollViewProps) {
+  const { pageSpacing } = useTheme();
+  const bar = useBarSpace(spaceTopBar, spaceBottomBar);
+
+  const hPad = paddingHorizontal ?? pageSpacing.horizontal;
+  const tPad = paddingTop ?? bar.top;
+  const bPad =
+    paddingBottom != null ? paddingBottom + bar.safeBottom : bar.bottom;
+
+  const contentContainerStyle = React.useMemo(
+    () => ({
+      paddingHorizontal: hPad,
+      paddingTop: tPad,
+      paddingBottom: bPad,
+    }),
+    [hPad, tPad, bPad]
+  );
+
+  return (
+    <Animated.ScrollView
+      testID={testID}
+      contentContainerStyle={contentContainerStyle}
+      showsVerticalScrollIndicator={false}
+      contentInsetAdjustmentBehavior="never"
+      keyboardDismissMode="interactive"
+      onScroll={onScroll}
+      scrollEventThrottle={onScroll ? 16 : undefined}
+    >
+      {children}
+    </Animated.ScrollView>
+  );
+}
+
+/** Virtualized list region with standard page insets. */
+function FlashListSection<TItem>({
+  spaceTopBar,
+  spaceBottomBar,
+  paddingHorizontal,
+  paddingTop,
+  paddingBottom,
+  onScroll,
+  drawDistance = 250,
+  ...rest
+}: FlashListSectionProps<TItem>) {
+  const { pageSpacing } = useTheme();
+  const bar = useBarSpace(spaceTopBar, spaceBottomBar);
+
+  const hPad = paddingHorizontal ?? pageSpacing.horizontal;
+  const tPad = paddingTop ?? bar.top;
+  const bPad =
+    paddingBottom != null ? paddingBottom + bar.safeBottom : bar.bottom;
+
+  const contentContainerStyle = React.useMemo(
+    () => ({
+      paddingHorizontal: hPad,
+      paddingTop: tPad,
+      paddingBottom: bPad,
+    }),
+    [hPad, tPad, bPad]
+  );
+
+  const List = AnimatedFlashList as unknown as React.ComponentType<
+    FlashListProps<TItem> & { onScroll?: ScrollHandlerProcessed }
+  >;
+
+  return (
+    <List
+      contentContainerStyle={contentContainerStyle}
+      showsVerticalScrollIndicator={false}
+      contentInsetAdjustmentBehavior="never"
+      keyboardDismissMode="interactive"
+      onScroll={onScroll}
+      scrollEventThrottle={onScroll ? 16 : undefined}
+      drawDistance={drawDistance}
+      {...(rest as FlashListProps<TItem>)}
+    />
+  );
+}
+
+export const Scaffold = {
+  Body,
+  View,
+  ScrollView,
+  FlashList: FlashListSection,
+};
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+  },
+});

package/src/components/SearchBar.tsx

@@ -0,0 +1,166 @@
+import { BlurView } from 'expo-blur';
+import Constants from 'expo-constants';
+import React from 'react';
+import { Platform, StyleSheet, TextInput, View } from 'react-native';
+
+import { Icon } from '../icons/Icon';
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import { pageSpacing } from '../theme';
+import type { ThemeType } from '../theme';
+import { heightDP } from '../responsive';
+import { Button } from './Button';
+
+const CONTENT_HEIGHT = heightDP(7);
+const IS_IOS = Platform.OS === 'ios';
+
+/**
+ * Total height of the fixed search bar, including the status bar. Uses the
+ * default `pageSpacing.top` — a themed override is not reflected here.
+ */
+export const SEARCH_BAR_HEIGHT =
+  Constants.statusBarHeight + CONTENT_HEIGHT + pageSpacing.top;
+
+type Props = {
+  /** Placeholder shown while the field is empty. */
+  placeholder: string;
+  /** Fired with the trimmed query on submit. */
+  onEnter: (query: string) => void;
+  /** Fired when the back control is pressed. */
+  onBack: () => void;
+  editable?: boolean;
+  autoFocus?: boolean;
+};
+
+/** Fixed top search bar with a back control and a text field. */
+export function SearchBar({
+  placeholder,
+  onEnter,
+  onBack,
+  editable,
+  autoFocus,
+}: Props) {
+  const { colors, iconSize } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const inputRef = React.useRef<React.ComponentRef<typeof TextInput>>(null);
+
+  const [value, setValue] = React.useState('');
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  function handleSubmit() {
+    inputRef.current?.blur();
+    onEnter(value.trim());
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface_90,
+          borderBottomColor: colors.border,
+        },
+      ]}
+    >
+      {IS_IOS && <BlurView style={styles.blur} tint="dark" intensity={20} />}
+      <View style={styles.content}>
+        <View style={styles.radiusOverflow}>
+          <Button
+            testID="search-bar-back-button"
+            hitSlop={{ top: 20, bottom: 20, left: 25, right: 15 }}
+            onPress={onBack}
+            style={styles.iconButton}
+          >
+            <Icon name="arrow_back" color={colors.text} />
+          </Button>
+        </View>
+        <View style={styles.inputWrapper}>
+          <View style={styles.icon} pointerEvents="none">
+            <Icon name="search" size={iconSize.s} color={colors.text} />
+          </View>
+          <TextInput
+            ref={inputRef}
+            testID="search-bar-input"
+            style={[
+              styles.input,
+              {
+                borderColor: isFocused ? colors.primary : colors.border,
+                color: colors.text,
+              },
+            ]}
+            placeholder={placeholder}
+            placeholderTextColor={colors.text}
+            autoFocus={autoFocus}
+            autoCapitalize="words"
+            autoCorrect={false}
+            autoComplete="off"
+            cursorColor={colors.primary}
+            onChangeText={setValue}
+            value={value}
+            onSubmitEditing={handleSubmit}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            returnKeyType="search"
+            editable={editable}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      zIndex: 10,
+      width: '100%',
+      borderStyle: 'solid',
+      borderBottomWidth: 1,
+    },
+    content: {
+      width: '100%',
+      height: CONTENT_HEIGHT,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: t.spaces.horizontal.s,
+      marginTop: Constants.statusBarHeight,
+      paddingHorizontal: t.spaces.horizontal.xs,
+    },
+    inputWrapper: {
+      position: 'relative',
+      flex: 1,
+    },
+    input: {
+      height: heightDP(5.5),
+      borderWidth: 1,
+      borderRadius: t.borderRadius.radius_15,
+      paddingLeft: t.spaces.horizontal.l * 1.7 + t.iconSize.s,
+      fontSize: t.fontSizes.s,
+    },
+    icon: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: t.spaces.horizontal.l,
+      justifyContent: 'center',
+      zIndex: 2,
+    },
+    iconButton: {
+      padding: t.spaces.horizontal.xs,
+    },
+    radiusOverflow: {
+      borderRadius: t.borderRadius.radius_100,
+      overflow: 'hidden',
+    },
+    blur: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    },
+  });
+}