@cyberkaidev/ui 0.1.0

package/src/components/TextButton.tsx

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { 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;
+  size?: FontSizeType;
+  /** Text color. Default: theme `primary`. */
+  color?: string;
+  disabled?: boolean;
+  onPress: () => void;
+  testID?: string;
+};
+
+/** Text-only button, no fill. */
+export function TextButton({
+  children,
+  size,
+  color,
+  disabled = false,
+  onPress,
+  testID,
+}: Props) {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const opacity = disabled ? 0.5 : 1;
+
+  return (
+    <Button
+      testID={testID ?? 'text-button'}
+      style={[styles.container, { opacity }]}
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={{ top: 20, bottom: 20, left: 25, right: 15 }}
+    >
+      <Text weight="medium" color={color ?? colors.primary} size={size}>
+        {children}
+      </Text>
+    </Button>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      paddingHorizontal: t.spaces.horizontal.s,
+      paddingVertical: t.spaces.vertical.xs,
+      borderRadius: t.borderRadius.radius_20,
+      overflow: 'hidden',
+    },
+  });
+}

package/src/components/TextInput.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { StyleSheet, TextInput as RNTextInput, View } from 'react-native';
+import type { TextInputProps } from 'react-native';
+
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import type { ThemeType } from '../theme';
+import { heightDP } from '../responsive';
+import { Text } from './Text';
+
+type Props = {
+  value: string;
+  placeholder: string;
+  /** Helper text shown below the field (in the error color). */
+  supportingText?: string;
+  isError?: boolean;
+  autoFocus?: TextInputProps['autoFocus'];
+  autoCapitalize?: TextInputProps['autoCapitalize'];
+  autoCorrect?: TextInputProps['autoCorrect'];
+  autoComplete?: TextInputProps['autoComplete'];
+  inputMode?: TextInputProps['inputMode'];
+  onChangeText: (text: string) => void;
+  onBlur?: TextInputProps['onBlur'];
+  /** Called on submit when the value is non-empty. */
+  onEnter?: () => void;
+};
+
+/** Single-line text field with a supporting message and error state. */
+export function TextInput({
+  value,
+  placeholder,
+  supportingText,
+  isError = false,
+  autoFocus,
+  autoCapitalize,
+  autoCorrect,
+  autoComplete,
+  inputMode,
+  onEnter,
+  onChangeText,
+  onBlur,
+}: Props) {
+  const { colors, spaces } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  const borderColor = isError
+    ? colors.red
+    : isFocused
+      ? colors.primary
+      : colors.border;
+
+  return (
+    <View style={styles.container}>
+      <RNTextInput
+        testID="text-input-field"
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.on_surface,
+            color: colors.text,
+            borderColor,
+          },
+        ]}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={autoCorrect}
+        autoComplete={autoComplete}
+        inputMode={inputMode}
+        cursorColor={colors.primary}
+        placeholderTextColor={colors.text}
+        onChangeText={onChangeText}
+        onFocus={() => setIsFocused(true)}
+        onBlur={(event) => {
+          setIsFocused(false);
+          onBlur?.(event);
+        }}
+        value={value}
+        onSubmitEditing={() => {
+          if (value.trim().length > 0) onEnter?.();
+        }}
+        returnKeyType="done"
+      />
+      {supportingText ? (
+        <Text color={colors.red} size="xs" marginL={spaces.horizontal.s}>
+          {supportingText}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      gap: t.spaces.vertical.xs,
+    },
+    input: {
+      width: '100%',
+      height: heightDP(7),
+      borderWidth: 1,
+      borderRadius: t.borderRadius.radius_15,
+      paddingHorizontal: t.spaces.horizontal.l,
+      fontSize: t.fontSizes.s,
+    },
+  });
+}

package/src/components/Toast.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import { Icon } from '../icons/Icon';
+import type { IconNameType } from '../icons/Icon';
+import { useTheme, useThemedStyles } from '../ThemeProvider';
+import { useToast } from '../stores/useToast';
+import type { ThemeType } from '../theme';
+import type { ToastVariantType } from '../types';
+import { Text } from './Text';
+
+const VISIBLE_MS = 3000;
+const FADE_MS = 300;
+
+const iconByVariant: Record<ToastVariantType, IconNameType | null> = {
+  error: 'error',
+  success: 'check',
+  info: null,
+};
+
+/** Transient centered notice. Drive it with `useToast().showToast(...)`. */
+export function Toast() {
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+  const { visible, variant, message, hideToast } = useToast();
+  const opacity = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (!visible) return;
+
+    let hideTimer: ReturnType<typeof setTimeout>;
+    const enter = Animated.timing(opacity, {
+      toValue: 1,
+      duration: FADE_MS,
+      useNativeDriver: true,
+    });
+
+    enter.start(() => {
+      hideTimer = setTimeout(() => {
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: FADE_MS,
+          useNativeDriver: true,
+        }).start(() => hideToast());
+      }, VISIBLE_MS);
+    });
+
+    return () => {
+      enter.stop();
+      clearTimeout(hideTimer);
+    };
+    // `message`/`variant` restart the fade + auto-hide cycle when a new toast is
+    // shown while one is already visible.
+  }, [visible, message, variant, opacity, hideToast]);
+
+  if (!visible) return null;
+
+  const iconName = iconByVariant[variant];
+  const iconColor = variant === 'error' ? colors.red : colors.green;
+
+  return (
+    <Animated.View style={[styles.background, { opacity }]}>
+      <View style={[styles.content, { backgroundColor: colors.background }]}>
+        {iconName && <Icon name={iconName} color={iconColor} />}
+        <Text weight="medium" size="xs" textAlign="center">
+          {message}
+        </Text>
+      </View>
+    </Animated.View>
+  );
+}
+
+function makeStyles(t: ThemeType) {
+  return StyleSheet.create({
+    background: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+      pointerEvents: 'none',
+    },
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: t.spaces.horizontal.s,
+      borderRadius: t.borderRadius.radius_20,
+      paddingVertical: t.spaces.vertical.s,
+      paddingHorizontal: t.spaces.horizontal.l,
+      pointerEvents: 'none',
+    },
+  });
+}

package/src/hooks/useAppBarScroll.ts

@@ -0,0 +1,19 @@
+import {
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+/**
+ * Tracks vertical scroll offset for the collapsing `AppBar`. Spread
+ * `scrollHandler` onto an `Animated.ScrollView`/`Scaffold` `onScroll` and pass
+ * `scrollY` to `<AppBar scrollY={...} />`.
+ */
+export function useAppBarScroll() {
+  const scrollY = useSharedValue(0);
+
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    scrollY.value = event.contentOffset.y;
+  });
+
+  return { scrollY, scrollHandler };
+}

package/src/hooks/usePressAndHoldRepeat.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+type Props = {
+  /** Called once on press and repeatedly (accelerating) while held. */
+  onTrigger: () => void;
+  /** When true, the control fires nothing and any in-flight repeat stops. */
+  disabled?: boolean;
+};
+
+// Delay after the initial press before the automatic repeat kicks in.
+const HOLD_START_DELAY_MS = 350;
+// Interval between the first few repeats.
+const INITIAL_REPEAT_INTERVAL_MS = 250;
+// Fastest the repeat is allowed to get.
+const MIN_REPEAT_INTERVAL_MS = 40;
+// Each repeat multiplies the interval by this, so the value accelerates while held.
+const ACCELERATION_FACTOR = 0.82;
+
+/**
+ * Press-and-hold with acceleration, decoupled from any domain.
+ *
+ * Wire the returned handlers to a pressable: `onPressIn` fires `onTrigger` once
+ * immediately (so a quick tap steps by one) and, if the press is held past
+ * `HOLD_START_DELAY_MS`, keeps firing it on a shrinking interval until `onPressOut`
+ * (or unmount). Clamping / bounds are the caller's concern — firing `onTrigger`
+ * when the value is already at a limit is expected to be a no-op.
+ */
+export function usePressAndHoldRepeat({ onTrigger, disabled }: Props) {
+  const onTriggerRef = React.useRef(onTrigger);
+  const startTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const repeatTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+
+  React.useEffect(() => {
+    onTriggerRef.current = onTrigger;
+  });
+
+  const clearTimers = React.useCallback(() => {
+    if (startTimeoutRef.current !== null) {
+      clearTimeout(startTimeoutRef.current);
+      startTimeoutRef.current = null;
+    }
+    if (repeatTimeoutRef.current !== null) {
+      clearTimeout(repeatTimeoutRef.current);
+      repeatTimeoutRef.current = null;
+    }
+  }, []);
+
+  React.useEffect(() => clearTimers, [clearTimers]);
+
+  // Stop an in-flight repeat the moment the consumer disables the control.
+  React.useEffect(() => {
+    if (disabled) clearTimers();
+  }, [disabled, clearTimers]);
+
+  const onPressIn = React.useCallback(() => {
+    if (disabled) return;
+
+    clearTimers();
+    onTriggerRef.current();
+
+    function scheduleRepeat(interval: number) {
+      repeatTimeoutRef.current = setTimeout(() => {
+        onTriggerRef.current();
+        scheduleRepeat(
+          Math.max(MIN_REPEAT_INTERVAL_MS, interval * ACCELERATION_FACTOR)
+        );
+      }, interval);
+    }
+
+    startTimeoutRef.current = setTimeout(() => {
+      startTimeoutRef.current = null;
+      scheduleRepeat(INITIAL_REPEAT_INTERVAL_MS);
+    }, HOLD_START_DELAY_MS);
+  }, [disabled, clearTimers]);
+
+  const onPressOut = React.useCallback(() => {
+    clearTimers();
+  }, [clearTimers]);
+
+  return { onPressIn, onPressOut };
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,51 @@
+import { SymbolView } from 'expo-symbols';
+import type { AndroidSymbol, SFSymbol } from 'expo-symbols';
+
+import { useTheme } from '../ThemeProvider';
+
+// Curated set of generic UI icons. Each entry maps a public name to a
+// per-platform SF Symbol / Android symbol.
+const names = {
+  check: { ios: 'checkmark', android: 'check' },
+  remove: { ios: 'minus', android: 'remove' },
+  add: { ios: 'plus', android: 'add' },
+  settings: { ios: 'gear', android: 'settings' },
+  arrow_back: { ios: 'chevron.left', android: 'arrow_back' },
+  search: { ios: 'magnifyingglass', android: 'search' },
+  edit: { ios: 'pencil', android: 'edit' },
+  error: { ios: 'x.circle', android: 'error' },
+  close: { ios: 'xmark', android: 'close' },
+  folder: { ios: 'folder', android: 'folder' },
+  question: { ios: 'questionmark', android: 'question_mark' },
+  filter: { ios: 'line.3.horizontal.decrease', android: 'filter_list' },
+} satisfies Record<string, { ios: SFSymbol; android: AndroidSymbol }>;
+
+export type IconNameType = keyof typeof names;
+
+type Props = {
+  /** One of the curated icon names. */
+  name: IconNameType;
+  /** Icon color. Defaults to the theme `primary`. */
+  color?: string;
+  /** Size in dp. Defaults to the theme `iconSize.m`. */
+  size?: number;
+  testID?: string;
+};
+
+/** Renders a curated UI icon via `expo-symbols` (`SymbolView`). */
+export function Icon({ name, color, size, testID }: Props) {
+  const { colors, iconSize } = useTheme();
+
+  // Built as an object and spread: under the react-native-strict-api types,
+  // `SymbolViewProps` doesn't surface the inherited `ViewProps` members
+  // (`testID`, a11y props) to JSX excess-property checks, so a literal
+  // `testID=` attribute fails to typecheck even though it's forwarded natively.
+  const props = {
+    testID: testID ?? `icon-${name}`,
+    name: names[name],
+    tintColor: color ?? colors.primary,
+    size: size ?? iconSize.m,
+  };
+
+  return <SymbolView {...props} />;
+}

package/src/index.tsx

@@ -0,0 +1,64 @@
+// components
+export * from './components/AppBar';
+export * from './components/BounceEffect';
+export * from './components/Button';
+export * from './components/Chips';
+export * from './components/IconButton';
+export * from './components/InforList';
+export * from './components/LoadingApp';
+export * from './components/Overlays';
+export * from './components/RippleEffect';
+export * from './components/Scaffold';
+export * from './components/SearchBar';
+export * from './components/SegmentedButton';
+export * from './components/ShapedButton';
+export * from './components/SlideModal';
+export * from './components/TabBar';
+export * from './components/Text';
+export * from './components/TextButton';
+export * from './components/TextInput';
+export * from './components/Toast';
+
+// icons
+export * from './icons/Icon';
+
+// theme + provider
+export {
+  ThemeProvider,
+  useTheme,
+  useColors,
+  useThemedStyles,
+} from './ThemeProvider';
+export {
+  colors,
+  fontSizes,
+  iconSize,
+  spaces,
+  borderRadius,
+  pageSpacing,
+  defaultTokens,
+} from './theme';
+export type {
+  ThemeType,
+  ThemeTokensType,
+  FontSizesType,
+  IconSizesType,
+  SpacesType,
+  SpaceScaleType,
+  BorderRadiusType,
+  PageSpacingType,
+} from './theme';
+
+// responsive helpers
+export { widthDP, heightDP } from './responsive';
+
+// hooks
+export * from './hooks/useAppBarScroll';
+export * from './hooks/usePressAndHoldRepeat';
+
+// global state
+export { useToast } from './stores/useToast';
+export { useLoadingApp } from './stores/useLoadingApp';
+
+// shared style types
+export type * from './types';

package/src/responsive.ts

@@ -0,0 +1,32 @@
+import { Dimensions, PixelRatio } from 'react-native';
+
+const screenWidth = Dimensions.get('window').width;
+const screenHeight = Dimensions.get('window').height;
+
+/**
+ * Convert a percentage of the screen width to a density-independent pixel value.
+ *
+ * @param widthPercent Percentage of the screen width (number, or numeric string).
+ * @returns The value in dp, rounded to the nearest physical pixel.
+ */
+export function widthDP(widthPercent: string | number): number {
+  const elemWidth =
+    typeof widthPercent === 'number' ? widthPercent : parseFloat(widthPercent);
+
+  return PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
+}
+
+/**
+ * Convert a percentage of the screen height to a density-independent pixel value.
+ *
+ * @param heightPercent Percentage of the screen height (number, or numeric string).
+ * @returns The value in dp, rounded to the nearest physical pixel.
+ */
+export function heightDP(heightPercent: string | number): number {
+  const elemHeight =
+    typeof heightPercent === 'number'
+      ? heightPercent
+      : parseFloat(heightPercent);
+
+  return PixelRatio.roundToNearestPixel((screenHeight * elemHeight) / 100);
+}

package/src/stores/useLoadingApp.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+type State = {
+  visible: boolean;
+};
+
+type Actions = {
+  /** Toggle the blocking loading overlay. */
+  setLoadingVisible: (visible: boolean) => void;
+};
+
+/**
+ * Global state for the blocking `<LoadingApp />` overlay. Render it once near
+ * the root and drive it with `useLoadingApp.getState().setLoadingVisible(...)`.
+ */
+export const useLoadingApp = create<State & Actions>((set) => ({
+  visible: false,
+  setLoadingVisible: (visible) => set({ visible }),
+}));

package/src/stores/useToast.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+
+import type { ToastVariantType } from '../types';
+
+type ShowToastArgs = {
+  /** Text shown in the toast. */
+  message: string;
+  /** Visual intent. Defaults to `'info'`. */
+  variant?: ToastVariantType;
+};
+
+type State = {
+  visible: boolean;
+  variant: ToastVariantType;
+  message: string;
+};
+
+type Actions = {
+  /** Show the toast with a message and optional variant. */
+  showToast: (args: ShowToastArgs) => void;
+  /** Hide the toast. */
+  hideToast: () => void;
+};
+
+/**
+ * Global toast state. Render `<Toast />` once near the root; call
+ * `useToast.getState().showToast(...)` (or the hook) from anywhere.
+ */
+export const useToast = create<State & Actions>((set) => ({
+  visible: false,
+  variant: 'info',
+  message: '',
+  showToast: ({ message, variant = 'info' }) =>
+    set({ message, variant, visible: true }),
+  hideToast: () => set({ visible: false }),
+}));

package/src/theme.ts

@@ -0,0 +1,125 @@
+import { heightDP, widthDP } from './responsive';
+import type { ColorsType, FontSizeType, IconSizeType } from './types';
+
+/**
+ * A ready-made color palette. `ThemeProvider` **requires** a `colors` prop — pass
+ * this, spread from it, or provide your own `ColorsType`.
+ */
+export const colors: ColorsType = {
+  background: 'black',
+  background_60: 'rgba(0,0,0,0.6)',
+  on_surface: '#1A191E',
+  surface: '#100e12',
+  surface_90: 'rgba(16, 14, 18, 0.9)',
+  border: '#3D3B40',
+  text: '#f6f1ff',
+  primary: '#4284ff',
+  red: '#ff0004',
+  green: '#00ff2a',
+  amber: '#FFC107',
+  transparent: 'transparent',
+};
+
+export type FontSizesType = Record<FontSizeType, number>;
+
+/** Default font sizes, in dp. */
+export const fontSizes: FontSizesType = {
+  xxxl: heightDP(4.3),
+  xxl: heightDP(3.8),
+  xl: heightDP(3.2),
+  l: heightDP(2.8),
+  m: heightDP(2.3),
+  s: heightDP(2),
+  xs: heightDP(1.5),
+};
+
+export type IconSizesType = Record<IconSizeType, number>;
+
+/** Default icon sizes, in dp. */
+export const iconSize: IconSizesType = {
+  xl: heightDP(5),
+  l: heightDP(4),
+  m: heightDP(3.4),
+  s: heightDP(2.3),
+};
+
+export type SpaceScaleType = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+
+export type SpacesType = {
+  horizontal: Record<SpaceScaleType, number>;
+  vertical: Record<SpaceScaleType, number>;
+};
+
+/** Default spacing scale, in dp. */
+export const spaces: SpacesType = {
+  horizontal: {
+    xs: heightDP(1),
+    s: widthDP(2),
+    m: widthDP(3),
+    l: widthDP(4),
+    xl: widthDP(5),
+    xxl: widthDP(8),
+  },
+  vertical: {
+    xs: heightDP(0.7),
+    s: heightDP(1),
+    m: heightDP(2),
+    l: heightDP(3),
+    xl: heightDP(4),
+    xxl: heightDP(7),
+  },
+};
+
+export type BorderRadiusType = {
+  radius_5: number;
+  radius_10: number;
+  radius_15: number;
+  radius_20: number;
+  radius_100: number | string;
+};
+
+/** Default border radius scale. */
+export const borderRadius: BorderRadiusType = {
+  radius_5: 5,
+  radius_10: 10,
+  radius_15: 15,
+  radius_20: 20,
+  radius_100: '100%',
+};
+
+export type PageSpacingType = {
+  horizontal: number;
+  top: number;
+  bottom: number;
+};
+
+/** Default page insets used by `Scaffold` and the fixed bars. */
+export const pageSpacing: PageSpacingType = {
+  horizontal: spaces.horizontal.l,
+  top: spaces.vertical.l,
+  bottom: spaces.horizontal.l,
+};
+
+export type ThemeType = {
+  colors: ColorsType;
+  fontSizes: FontSizesType;
+  iconSize: IconSizesType;
+  spaces: SpacesType;
+  borderRadius: BorderRadiusType;
+  pageSpacing: PageSpacingType;
+};
+
+/** Everything in `ThemeType` except `colors`. */
+export type ThemeTokensType = Omit<ThemeType, 'colors'>;
+
+/**
+ * Defaults for the non-color token groups. `ThemeProvider` merges any override
+ * on top of these (there is no default palette — `colors` is required).
+ */
+export const defaultTokens: ThemeTokensType = {
+  fontSizes,
+  iconSize,
+  spaces,
+  borderRadius,
+  pageSpacing,
+};