@cyberkaidev/ui 0.1.0

package/src/components/AppBar.tsx

@@ -0,0 +1,226 @@
+import { BlurView } from 'expo-blur';
+import Constants from 'expo-constants';
+import { Platform, StyleSheet, View } from 'react-native';
+import type { ColorValue } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { Icon } from '../icons/Icon';
+import type { IconNameType } 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';
+import { Text } from './Text';
+
+const LARGE_TITLE_HEIGHT = heightDP(6);
+const COLLAPSE_DEAD_ZONE = heightDP(0.8);
+const CONTENT_HEIGHT = heightDP(7);
+const IS_IOS = Platform.OS === 'ios';
+
+/**
+ * Height of the fixed app bar, including the status bar. Uses the default
+ * `pageSpacing.top` — a themed override is not reflected here.
+ */
+export const APP_BAR_HEIGHT =
+  Constants.statusBarHeight + CONTENT_HEIGHT + pageSpacing.top;
+
+/** Height of the app bar when the large title is expanded. */
+export const APP_BAR_LARGE_HEIGHT = APP_BAR_HEIGHT + LARGE_TITLE_HEIGHT;
+
+export type AppBarTrailingType = {
+  label?: string;
+  icon?: IconNameType;
+  tintColor?: ColorValue;
+  hidden?: boolean;
+  onPress: () => void;
+};
+
+type Props = {
+  title: string;
+  /** Shows a back control; provide `onBack` to handle it. */
+  enabledBack?: boolean;
+  onBack?: () => void;
+  /** Render a large, collapsing title below the bar. */
+  large?: boolean;
+  /** Optional action on the trailing side. */
+  trailing?: AppBarTrailingType;
+  /** Scroll offset that drives the large-title collapse (see `useAppBarScroll`). */
+  scrollY?: SharedValue<number>;
+};
+
+/** Fixed top app bar with an optional collapsing large title. */
+export function AppBar({
+  title,
+  enabledBack,
+  onBack,
+  large,
+  trailing,
+  scrollY,
+}: Props) {
+  const { colors, borderRadius } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  const collapseProgress = useDerivedValue(() => {
+    if (!scrollY) return 0;
+    return interpolate(
+      scrollY.value,
+      [COLLAPSE_DEAD_ZONE, COLLAPSE_DEAD_ZONE + LARGE_TITLE_HEIGHT],
+      [0, 1],
+      Extrapolation.CLAMP
+    );
+  });
+
+  const titleAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: large ? collapseProgress.value : 1,
+  }));
+
+  const largeTitleAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: 1 - collapseProgress.value,
+    height: LARGE_TITLE_HEIGHT * (1 - collapseProgress.value),
+  }));
+
+  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.side, styles.sideLeft]}>
+          {enabledBack && (
+            <View style={styles.radiusOverflow}>
+              <Button
+                testID="app-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>
+
+        <Animated.View style={[styles.center, titleAnimatedStyle]}>
+          <Text weight="medium" numberOfLines={1}>
+            {title}
+          </Text>
+        </Animated.View>
+
+        <View style={[styles.side, styles.sideRight]}>
+          {trailing && !trailing.hidden && (
+            <View
+              style={[
+                styles.radiusOverflow,
+                {
+                  borderRadius: trailing.label
+                    ? borderRadius.radius_20
+                    : borderRadius.radius_100,
+                },
+              ]}
+            >
+              <Button
+                testID="app-bar-trailing-button"
+                hitSlop={{ top: 20, bottom: 20, left: 25, right: 15 }}
+                onPress={trailing.onPress}
+                style={styles.iconButton}
+              >
+                {trailing.icon && (
+                  <Icon
+                    name={trailing.icon}
+                    color={(trailing.tintColor as string) ?? colors.text}
+                  />
+                )}
+                {trailing.label && (
+                  <Text weight="medium" color={trailing.tintColor}>
+                    {trailing.label}
+                  </Text>
+                )}
+              </Button>
+            </View>
+          )}
+        </View>
+      </View>
+
+      {large && (
+        <Animated.View
+          style={[styles.largeTitleContainer, largeTitleAnimatedStyle]}
+        >
+          <Text weight="bold" size="xl" numberOfLines={1}>
+            {title}
+          </Text>
+        </Animated.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',
+      marginTop: Constants.statusBarHeight,
+      paddingHorizontal: t.spaces.horizontal.xs,
+      paddingTop: COLLAPSE_DEAD_ZONE,
+    },
+    side: {
+      flex: 1,
+    },
+    sideLeft: {
+      alignItems: 'flex-start',
+    },
+    sideRight: {
+      alignItems: 'flex-end',
+    },
+    center: {
+      flex: 2,
+      alignItems: 'center',
+    },
+    largeTitleContainer: {
+      width: '100%',
+      overflow: 'hidden',
+      justifyContent: 'flex-end',
+      paddingHorizontal: t.spaces.horizontal.l,
+      paddingBottom: t.spaces.vertical.s,
+    },
+    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,
+    },
+  });
+}

package/src/components/BounceEffect.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Animated, Pressable } from 'react-native';
+import type { PressableProps } from 'react-native';
+
+type Props = {
+  /** Fired after the release animation settles. */
+  onActionTrigger: () => void;
+  children: React.ReactNode;
+  style?: PressableProps['style'];
+};
+
+/** Wraps a child and plays a scale "bounce" on press, firing on release. */
+export function BounceEffect({ onActionTrigger, children, style }: Props) {
+  const scaleValue = React.useRef(new Animated.Value(1)).current;
+
+  const animateIn = () => {
+    Animated.spring(scaleValue, {
+      toValue: 0.9,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const animateOut = () => {
+    Animated.spring(scaleValue, {
+      toValue: 1,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePress = () => {
+    Animated.spring(scaleValue, {
+      toValue: 1,
+      friction: 4,
+      tension: 40,
+      useNativeDriver: true,
+    }).start(() => {
+      onActionTrigger();
+    });
+  };
+
+  return (
+    <Pressable
+      style={style}
+      onPressIn={animateIn}
+      onPressOut={animateOut}
+      onPress={handlePress}
+    >
+      <Animated.View style={{ transform: [{ scale: scaleValue }] }}>
+        {children}
+      </Animated.View>
+    </Pressable>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+import type { Insets, StyleProp, ViewStyle } from 'react-native';
+
+import { RippleEffect } from './RippleEffect';
+
+type Props = {
+  children: ReactNode;
+  onPress?: () => void;
+  onPressIn?: () => void;
+  onPressOut?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  hitSlop?: Insets;
+  /** Android only. */
+  rippleColor?: string;
+  /** Android only. */
+  rippleContainerBorderRadius?: number;
+};
+
+/**
+ * Base pressable. Android gets a touch ripple; every other platform gets
+ * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers'
+ * type resolution works without `moduleSuffixes`.
+ */
+export function Button({
+  children,
+  onPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  style,
+  testID,
+  hitSlop,
+  rippleColor,
+  rippleContainerBorderRadius,
+}: Props) {
+  if (Platform.OS === 'android') {
+    return (
+      <RippleEffect
+        testID={testID}
+        style={style}
+        disabled={disabled}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        hitSlop={hitSlop}
+        rippleColor={rippleColor}
+        rippleContainerBorderRadius={rippleContainerBorderRadius}
+      >
+        {children}
+      </RippleEffect>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      style={style}
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      hitSlop={hitSlop}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+}

package/src/components/Chips.tsx

@@ -0,0 +1,115 @@
+import type { ReactNode } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import { Text } from './Text';
+import { Button } from './Button';
+
+type ChipScheme = 'primary' | 'surface' | 'on_surface';
+
+type ChipItem<Item> = {
+  key: Item;
+  label: string;
+  disabled?: boolean;
+  /** Optional node rendered before the label (e.g. an icon). */
+  prefix?: ReactNode;
+  /** Visual scheme. Default `'surface'`. */
+  scheme?: ChipScheme;
+};
+
+type Props<Item> = {
+  data: ChipItem<Item>[];
+  /** Called with the item `key`. Omit to render the chips non-interactive. */
+  onPress?: (key: Item) => void;
+  marginT?: number;
+  marginB?: number;
+  testID?: string;
+};
+
+/** Horizontally scrolling row of selectable chips. */
+export function Chips<Item>({
+  data,
+  marginB = 0,
+  marginT = 0,
+  onPress,
+  testID,
+}: Props<Item>) {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const isInteractive = typeof onPress === 'function';
+
+  const schemeButton: Record<
+    ChipScheme,
+    { borderColor: string; backgroundColor: string }
+  > = {
+    surface: { borderColor: colors.border, backgroundColor: colors.surface },
+    on_surface: {
+      borderColor: colors.border,
+      backgroundColor: colors.on_surface,
+    },
+    primary: { borderColor: colors.primary, backgroundColor: colors.surface },
+  };
+
+  const schemeTextColor: Record<ChipScheme, string> = {
+    surface: colors.text,
+    on_surface: colors.text,
+    primary: colors.primary,
+  };
+
+  return (
+    <View
+      testID={testID}
+      style={[styles.container, { marginTop: marginT, marginBottom: marginB }]}
+    >
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.content}
+      >
+        {data.map(({ key, label, disabled, prefix, scheme = 'surface' }) => (
+          <Button
+            testID={`chip-${String(key)}`}
+            key={String(key)}
+            disabled={!isInteractive || disabled}
+            style={[
+              styles.button,
+              schemeButton[scheme],
+              disabled ? styles.dimmed : null,
+            ]}
+            onPress={() => onPress?.(key)}
+          >
+            {prefix}
+            <Text color={schemeTextColor[scheme]}>{label}</Text>
+          </Button>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+    },
+    content: {
+      gap: t.spaces.horizontal.l,
+      paddingHorizontal: t.pageSpacing.horizontal,
+    },
+    button: {
+      paddingHorizontal: t.spaces.horizontal.m,
+      paddingVertical: t.spaces.vertical.xs,
+      borderRadius: t.borderRadius.radius_20,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: t.spaces.horizontal.s,
+      overflow: 'hidden',
+    },
+    dimmed: {
+      opacity: 0.5,
+    },
+  });
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, View } from 'react-native';
+
+import { Icon } from '../icons/Icon';
+import type { IconNameType } from '../icons/Icon';
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import { widthDP } from '../responsive';
+import { Button } from './Button';
+
+const BUTTON_SIZE = widthDP(10);
+
+type Props = {
+  /** Icon name (see the `names` map in `Icon`). */
+  icon: IconNameType;
+  /** Highlights the icon and shows a dot badge. */
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  testID?: string;
+};
+
+/** Circular icon-only button with an optional "active" indicator. */
+export function IconButton({
+  icon,
+  active = false,
+  disabled = false,
+  onPress,
+  testID,
+}: Props) {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  return (
+    <View style={styles.container}>
+      <Button
+        testID={testID ?? 'icon-button'}
+        style={[
+          styles.button,
+          { backgroundColor: colors.on_surface, borderColor: colors.border },
+        ]}
+        disabled={disabled}
+        onPress={onPress}
+      >
+        <Icon name={icon} color={active ? colors.primary : colors.text} />
+        {active && (
+          <View
+            style={[
+              styles.badge,
+              { backgroundColor: colors.primary, borderColor: colors.surface },
+            ]}
+          />
+        )}
+      </Button>
+    </View>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      padding: 2,
+      borderRadius: t.borderRadius.radius_100,
+      overflow: 'hidden',
+    },
+    button: {
+      width: BUTTON_SIZE,
+      height: BUTTON_SIZE,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderWidth: 1,
+      borderRadius: t.borderRadius.radius_100,
+      overflow: 'hidden',
+    },
+    badge: {
+      position: 'absolute',
+      top: widthDP(1.5),
+      right: widthDP(1.5),
+      width: widthDP(2),
+      height: widthDP(2),
+      borderRadius: t.borderRadius.radius_100,
+      borderWidth: 1,
+    },
+  });
+}

package/src/components/InforList.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import { heightDP } from '../responsive';
+import { Button } from './Button';
+import { Text } from './Text';
+
+type ContainerProps = {
+  children: React.ReactNode;
+  marginT?: number;
+  marginB?: number;
+};
+
+type ContentProps = {
+  children: React.ReactNode;
+  /** Makes the row pressable. */
+  onPress?: () => void;
+};
+
+type TitleProps = {
+  children: React.ReactNode;
+  color?: string;
+};
+
+/** A label inside an `InforList.Content` row. */
+function Title({ children, color }: TitleProps) {
+  return (
+    <Text weight="medium" color={color}>
+      {children}
+    </Text>
+  );
+}
+
+/** A single row; pressable when `onPress` is provided. */
+function Content({ children, onPress }: ContentProps) {
+  const styles = useThemedStyles(makeStyles);
+  const isInteractive = typeof onPress === 'function';
+
+  return (
+    <Button
+      disabled={!isInteractive}
+      onPress={() => onPress?.()}
+      style={styles.content}
+    >
+      {children}
+    </Button>
+  );
+}
+
+/** Grouped list with dividers between rows. */
+function Container({ children, marginB, marginT }: ContainerProps) {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const items = React.Children.toArray(children);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          marginTop: marginT,
+          marginBottom: marginB,
+          backgroundColor: colors.surface,
+          borderColor: colors.border,
+        },
+      ]}
+    >
+      {items.map((child, index) => (
+        <React.Fragment key={index}>
+          {child}
+          {index < items.length - 1 && (
+            <View style={[styles.line, { backgroundColor: colors.border }]} />
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+}
+
+export const InforList = {
+  Title,
+  Content,
+  Container,
+};
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      alignItems: 'stretch',
+      borderRadius: t.borderRadius.radius_20,
+      overflow: 'hidden',
+      borderWidth: 1,
+    },
+    content: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      height: heightDP(6),
+      paddingHorizontal: t.spaces.horizontal.l,
+    },
+    line: {
+      flex: 1,
+      height: 1,
+      marginLeft: t.spaces.horizontal.l,
+    },
+  });
+}

package/src/components/LoadingApp.tsx

@@ -0,0 +1,55 @@
+import { ActivityIndicator, Modal, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../ThemeProvider';
+import { useLoadingApp } from '../stores/useLoadingApp';
+import { Text } from './Text';
+
+type Props = {
+  /** Optional caption under the spinner. */
+  label?: string;
+};
+
+/** Blocking full-screen loading overlay. Drive it with `useLoadingApp().setLoadingVisible(...)`. */
+export function LoadingApp({ label }: Props) {
+  const { colors, spaces } = useTheme();
+  const { visible } = useLoadingApp();
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      statusBarTranslucent
+      animationType="fade"
+    >
+      <View
+        style={[styles.background, { backgroundColor: colors.background_60 }]}
+      >
+        <View style={styles.content}>
+          <ActivityIndicator color={colors.text} size="small" />
+          {label ? (
+            <Text marginL={spaces.horizontal.s} weight="medium">
+              {label}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});