@cyberkaidev/ui 0.1.0

package/src/components/SegmentedButton.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import { Animated, Pressable, 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 { heightDP } from '../responsive';
+import { Text } from './Text';
+
+export type SegmentedButtonSizeType = 's' | 'm' | 'l';
+
+/** Track heights per size — the Material 3 Expressive button size scale. */
+const HEIGHTS: Record<SegmentedButtonSizeType, number> = {
+  s: heightDP(5),
+  m: heightDP(6),
+  l: heightDP(7),
+};
+
+/** Default track height (size `'m'`). */
+export const SEGMENTED_BUTTON_HEIGHT = HEIGHTS.m;
+
+/** Gap between the track edge and the segment pills, and between pills. */
+const TRACK_INSET = 3;
+
+export type SegmentedButtonItemType<Value> = {
+  /** Value reported to `onChange` when this segment is picked. */
+  value: Value;
+  /** Text shown in the segment. */
+  label: string;
+  /** Optional leading icon (replaced by a check on the selected segment). */
+  icon?: IconNameType;
+  disabled?: boolean;
+};
+
+type Props<Value> = {
+  /** 2–5 connected segments. */
+  segments: SegmentedButtonItemType<Value>[];
+  /** The currently selected `value` (single-select, controlled). */
+  value: Value;
+  /** Called with the picked segment's `value`. */
+  onChange: (value: Value) => void;
+  /** Track size. Default `'m'`. */
+  size?: SegmentedButtonSizeType;
+  /** Disable the whole control. */
+  disabled?: boolean;
+  /** Show the leading check on the selected segment. Default `true`. */
+  showSelectedCheck?: boolean;
+  testID?: string;
+};
+
+/**
+ * Single-select segmented button in the Material 3 **Expressive** style — a
+ * rounded track holding equal-width segments. The selected segment morphs into a
+ * filled pill with a springy pop; every segment squishes on press.
+ */
+export function SegmentedButton<Value>({
+  segments,
+  value,
+  onChange,
+  size = 'm',
+  disabled = false,
+  showSelectedCheck = true,
+  testID,
+}: Props<Value>) {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const height = HEIGHTS[size];
+
+  return (
+    <View
+      testID={testID ?? 'segmented-button'}
+      style={[
+        styles.track,
+        {
+          height,
+          borderColor: colors.border,
+          backgroundColor: colors.on_surface,
+        },
+        disabled ? styles.dimmed : null,
+      ]}
+    >
+      {segments.map((segment) => (
+        <Segment
+          key={String(segment.value)}
+          segment={segment}
+          selected={segment.value === value}
+          wholeDisabled={disabled}
+          showSelectedCheck={showSelectedCheck}
+          fullRadius={(height - TRACK_INSET * 2) / 2}
+          onPress={() => onChange(segment.value)}
+        />
+      ))}
+    </View>
+  );
+}
+
+function Segment<Value>({
+  segment,
+  selected,
+  wholeDisabled,
+  showSelectedCheck,
+  fullRadius,
+  onPress,
+}: {
+  segment: SegmentedButtonItemType<Value>;
+  selected: boolean;
+  wholeDisabled: boolean;
+  showSelectedCheck: boolean;
+  fullRadius: number;
+  onPress: () => void;
+}) {
+  const { colors, iconSize } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const pressScale = React.useRef(new Animated.Value(1)).current;
+  const popScale = React.useRef(new Animated.Value(1)).current;
+  // Composed once — not a fresh Animated node per render.
+  const scale = React.useRef(Animated.multiply(pressScale, popScale)).current;
+
+  const isDisabled = wholeDisabled || segment.disabled;
+  const contentColor = selected ? colors.background : colors.text;
+  const iconName: IconNameType | undefined =
+    selected && showSelectedCheck ? 'check' : segment.icon;
+
+  React.useEffect(() => {
+    if (!selected) return;
+    popScale.setValue(0.85);
+    Animated.spring(popScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      friction: 5,
+      tension: 140,
+    }).start();
+  }, [selected, popScale]);
+
+  const springPress = React.useCallback(
+    (toValue: number) =>
+      Animated.spring(pressScale, {
+        toValue,
+        useNativeDriver: true,
+        friction: 6,
+        tension: 160,
+      }).start(),
+    [pressScale]
+  );
+
+  return (
+    <Pressable
+      testID={`segmented-button-${String(segment.value)}`}
+      disabled={isDisabled}
+      onPress={onPress}
+      onPressIn={() => springPress(0.93)}
+      onPressOut={() => springPress(1)}
+      style={styles.segmentTouch}
+    >
+      <Animated.View
+        style={[
+          styles.pill,
+          {
+            borderRadius: fullRadius,
+            backgroundColor: selected ? colors.primary : colors.transparent,
+            transform: [{ scale }],
+          },
+          segment.disabled ? styles.dimmed : null,
+        ]}
+      >
+        {iconName ? (
+          <Icon name={iconName} size={iconSize.s} color={contentColor} />
+        ) : null}
+        <Text weight="bold" color={contentColor} numberOfLines={1}>
+          {segment.label}
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    track: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      padding: TRACK_INSET,
+      gap: TRACK_INSET,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderRadius: SEGMENTED_BUTTON_HEIGHT,
+      overflow: 'hidden',
+    },
+    segmentTouch: {
+      flex: 1,
+    },
+    pill: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: t.spaces.horizontal.s,
+      paddingHorizontal: t.spaces.horizontal.s,
+    },
+    dimmed: {
+      opacity: 0.5,
+    },
+  });
+}

package/src/components/ShapedButton.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import type { FontSizeType } from '../types';
+import { Button } from './Button';
+import { Text } from './Text';
+
+type Props = {
+  children: ReactNode;
+  /** Text size token. */
+  size?: FontSizeType;
+  /** `'primary'` = filled; `'secondary'` = transparent with primary text. */
+  type?: 'primary' | 'secondary';
+  disabled?: boolean;
+  /** Swaps the label for a spinner and blocks presses. */
+  isLoading?: boolean;
+  onPress: () => void;
+  testID?: string;
+};
+
+/** Filled call-to-action button with a loading state. */
+export function ShapedButton({
+  children,
+  size,
+  type = 'primary',
+  disabled,
+  isLoading = false,
+  onPress,
+  testID,
+}: Props) {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const opacity = disabled || isLoading ? 0.7 : 1;
+  const backgroundColor =
+    type === 'primary' ? colors.primary : colors.transparent;
+  const textColor = type === 'primary' ? colors.surface : colors.primary;
+
+  return (
+    <Button
+      testID={testID ?? 'shaped-button'}
+      style={[styles.container, { opacity, backgroundColor }]}
+      disabled={disabled || isLoading}
+      onPress={onPress}
+    >
+      {isLoading ? (
+        <ActivityIndicator
+          testID="activity-indicator"
+          size="small"
+          color={textColor}
+        />
+      ) : (
+        <Text weight="bold" color={textColor} size={size}>
+          {children}
+        </Text>
+      )}
+    </Button>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      paddingVertical: t.spaces.vertical.m,
+      borderRadius: t.borderRadius.radius_20,
+      justifyContent: 'center',
+      alignItems: 'center',
+      alignSelf: 'center',
+      overflow: 'hidden',
+    },
+  });
+}

package/src/components/SlideModal.tsx

@@ -0,0 +1,232 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Dimensions,
+  Easing,
+  Modal,
+  PanResponder,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import { BlurView } from 'expo-blur';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import { heightDP, widthDP } from '../responsive';
+import { IconButton } from './IconButton';
+import { Scaffold } from './Scaffold';
+import { Text } from './Text';
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+const DRAG_DISMISS_DISTANCE = SCREEN_HEIGHT * 0.2;
+const DRAG_DISMISS_VELOCITY = 0.5;
+const IS_IOS = Platform.OS === 'ios';
+
+export type SlideModalRef = {
+  show: () => void;
+  hide: () => void;
+};
+
+type Props = {
+  children: React.ReactNode;
+  title: string;
+  /** Swaps the content for a spinner and blocks the drag-to-dismiss gesture. */
+  isLoading?: boolean;
+};
+
+/** Bottom sheet that slides up; controlled imperatively through its ref. */
+export const SlideModal = forwardRef<SlideModalRef, Props>(
+  ({ children, title, isLoading = false }, ref) => {
+    const { colors } = useTheme();
+    const styles = useThemedStyles(makeStyles);
+    const { bottom } = useSafeAreaInsets();
+
+    const [visible, setVisible] = React.useState(false);
+    const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+    const animateIn = useCallback(() => {
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }).start();
+    }, [translateY]);
+
+    const animateOut = useCallback(
+      (callback?: () => void) => {
+        Animated.timing(translateY, {
+          toValue: SCREEN_HEIGHT,
+          duration: 250,
+          easing: Easing.in(Easing.cubic),
+          useNativeDriver: true,
+        }).start(() => callback?.());
+      },
+      [translateY]
+    );
+
+    const handleClose = useCallback(() => {
+      animateOut(() => setVisible(false));
+    }, [animateOut]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          setVisible(true);
+          requestAnimationFrame(animateIn);
+        },
+        hide: handleClose,
+      }),
+      [animateIn, handleClose]
+    );
+
+    // Rebuilt only when `isLoading` flips — not on every render.
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !isLoading,
+          onMoveShouldSetPanResponder: (_, gesture) =>
+            !isLoading && Math.abs(gesture.dy) > 5,
+          onPanResponderMove: (_, gesture) => {
+            if (gesture.dy > 0) translateY.setValue(gesture.dy);
+          },
+          onPanResponderRelease: (_, gesture) => {
+            if (
+              gesture.dy > DRAG_DISMISS_DISTANCE ||
+              gesture.vy > DRAG_DISMISS_VELOCITY
+            ) {
+              handleClose();
+            } else {
+              animateIn();
+            }
+          },
+        }),
+      [isLoading, translateY, handleClose, animateIn]
+    );
+
+    return (
+      <Modal visible={visible} transparent statusBarTranslucent>
+        <Pressable
+          style={[styles.background, { backgroundColor: colors.background_60 }]}
+          disabled={isLoading}
+          onPress={handleClose}
+        >
+          {IS_IOS && (
+            <BlurView
+              style={styles.blur}
+              tint="dark"
+              intensity={20}
+              pointerEvents="none"
+            />
+          )}
+          <Animated.View style={[styles.page, { transform: [{ translateY }] }]}>
+            <View {...panResponder.panHandlers}>
+              <Scaffold.Body surface>
+                <Scaffold.View paddingHorizontal={0} paddingTop={0}>
+                  <View style={styles.dragHandleContainer}>
+                    <View
+                      style={[
+                        styles.dragHandle,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  </View>
+
+                  <View style={styles.header}>
+                    <View style={styles.title}>
+                      <Text size="l" weight="medium">
+                        {title}
+                      </Text>
+                    </View>
+                    <IconButton
+                      icon="close"
+                      disabled={isLoading}
+                      onPress={handleClose}
+                    />
+                  </View>
+
+                  <View style={[styles.content, { paddingBottom: bottom }]}>
+                    {isLoading ? (
+                      <View style={styles.loadingContainer}>
+                        <ActivityIndicator size="small" color={colors.text} />
+                      </View>
+                    ) : (
+                      children
+                    )}
+                  </View>
+                </Scaffold.View>
+              </Scaffold.Body>
+            </View>
+          </Animated.View>
+        </Pressable>
+      </Modal>
+    );
+  }
+);
+
+SlideModal.displayName = 'SlideModal';
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    background: {
+      flex: 1,
+      position: 'relative',
+    },
+    blur: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    },
+    page: {
+      height: 'auto',
+      position: 'absolute',
+      borderTopRightRadius: t.borderRadius.radius_20,
+      borderTopLeftRadius: t.borderRadius.radius_20,
+      overflow: 'hidden',
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+    dragHandleContainer: {
+      width: '100%',
+      alignItems: 'center',
+      paddingVertical: t.spaces.vertical.xs,
+    },
+    dragHandle: {
+      width: widthDP(12),
+      height: 4,
+      borderRadius: t.borderRadius.radius_5,
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: t.pageSpacing.horizontal,
+    },
+    title: {
+      width: '70%',
+    },
+    content: {
+      width: '100%',
+    },
+    loadingContainer: {
+      width: '100%',
+      height: heightDP(25),
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });
+}

package/src/components/TabBar.tsx

@@ -0,0 +1,122 @@
+import { BlurView } from 'expo-blur';
+import React from 'react';
+import { Platform, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Icon } from '../icons/Icon';
+import type { IconNameType } from '../icons/Icon';
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import { heightDP } from '../responsive';
+import { Text } from './Text';
+
+const IS_IOS = Platform.OS === 'ios';
+const VISIBILITY_ANIMATION_DURATION = 200;
+const CONTENT_HEIGHT = heightDP(8);
+
+export type TabItemType = {
+  key: string;
+  icon: IconNameType;
+  label: string;
+  active: boolean;
+  onPress: () => void;
+};
+
+type Props = {
+  items: TabItemType[];
+  /** Fade the bar out (and disable touches) when false. Default `true`. */
+  visible?: boolean;
+};
+
+/** Height a screen should reserve for the fixed tab bar. */
+export function useTabBarHeight() {
+  const insets = useSafeAreaInsets();
+  return CONTENT_HEIGHT + insets.bottom;
+}
+
+/** Fixed bottom tab bar driven by a list of items — knows nothing about routing. */
+export function TabBar({ items, visible = true }: Props) {
+  const { colors, iconSize } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const insets = useSafeAreaInsets();
+
+  const visibility = useSharedValue(visible ? 1 : 0);
+
+  React.useEffect(() => {
+    visibility.value = withTiming(visible ? 1 : 0, {
+      duration: VISIBILITY_ANIMATION_DURATION,
+    });
+  }, [visible, visibility]);
+
+  const visibilityAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: visibility.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { backgroundColor: colors.surface_90, borderTopColor: colors.border },
+        visibilityAnimatedStyle,
+      ]}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
+      {IS_IOS && <BlurView style={styles.blur} tint="dark" intensity={20} />}
+
+      {items.map((item) => {
+        const tintColor = item.active ? colors.primary : colors.text;
+        return (
+          <Pressable
+            key={item.key}
+            testID={`tab-${item.key}`}
+            onPress={item.onPress}
+            accessibilityRole="button"
+            accessibilityState={item.active ? { selected: true } : {}}
+            style={[styles.button, { marginBottom: insets.bottom }]}
+          >
+            <Icon name={item.icon} color={tintColor} size={iconSize.l} />
+            <Text color={tintColor} size="xs">
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </Animated.View>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 10,
+      elevation: 10,
+      width: '100%',
+      flexDirection: 'row',
+      borderStyle: 'solid',
+      borderTopWidth: 1,
+    },
+    button: {
+      flex: 1,
+      height: CONTENT_HEIGHT,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: t.spaces.vertical.xs,
+    },
+    blur: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    },
+  });
+}

package/src/components/Text.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { Text as RNText } from 'react-native';
+import type { ColorValue } from 'react-native';
+
+import { useTheme } from '../ThemeProvider';
+import type { FontSizeType, FontWeightType, TextAlignType } from '../types';
+
+const fontFamilyByWeight: Record<FontWeightType, string> = {
+  regular: 'Inter-Regular',
+  medium: 'Inter-Medium',
+  bold: 'Inter-Bold',
+};
+
+type Props = {
+  children: ReactNode;
+  /** Font weight → font family (`Inter-*`). Default `'regular'`. */
+  weight?: FontWeightType;
+  /** Font size token. Default `'s'`. */
+  size?: FontSizeType;
+  /** Text color. Default: theme `text`. */
+  color?: string | ColorValue;
+  /** Max lines before truncation. */
+  numberOfLines?: number;
+  textAlign?: TextAlignType;
+  /** Margins in dp. */
+  marginT?: number;
+  marginB?: number;
+  marginR?: number;
+  marginL?: number;
+  opacity?: number;
+  testID?: string;
+};
+
+/** Themed text primitive. All display copy comes from `children`. */
+export function Text({
+  children,
+  weight = 'regular',
+  size = 's',
+  color,
+  numberOfLines,
+  textAlign,
+  marginT = 0,
+  marginB = 0,
+  marginR = 0,
+  marginL = 0,
+  opacity,
+  testID,
+}: Props) {
+  const { colors, fontSizes } = useTheme();
+
+  return (
+    <RNText
+      testID={testID ?? 'text'}
+      numberOfLines={numberOfLines}
+      style={{
+        fontFamily: fontFamilyByWeight[weight],
+        fontSize: fontSizes[size],
+        color: color ?? colors.text,
+        marginTop: marginT,
+        marginBottom: marginB,
+        marginRight: marginR,
+        marginLeft: marginL,
+        textAlign,
+        opacity,
+      }}
+    >
+      {children}
+    </RNText>
+  );
+}