@rnative/ui 0.0.0-stage → 1.0.0

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,152 @@
+/**
+ * ANAN-UI — Theme: ThemeProvider
+ *
+ * Provides theme context to the component tree. Supports light, dark, and
+ * custom themes. Reads the system color scheme via React Native Appearance.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+import { ThemeContext } from './ThemeContext';
+import type {
+  Theme,
+  ThemeContextValue,
+  ThemeName,
+  ColorScheme,
+  ThemeColors,
+} from './types';
+import { lightTheme, darkTheme } from './themes';
+import type { CustomThemeOverride } from './themes';
+import {
+  spacing,
+  borderRadius,
+  shadow,
+  elevation,
+  animation,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+} from '../design-tokens';
+import type {
+  Spacing,
+  BorderRadius as BorderRadiusKey,
+  ShadowKey,
+  ElevationKey,
+  AnimationDuration,
+  AnimationEasing,
+  FontSize,
+  FontWeight,
+  LineHeight,
+} from '../design-tokens';
+import type { TextStyle } from 'react-native';
+
+type FontWeightValue = NonNullable<TextStyle['fontWeight']>;
+
+type ThemeDefinition = {
+  name: ThemeName;
+  colorScheme: ColorScheme;
+  colors: ThemeColors;
+};
+
+const THEME_DEFINITIONS: Record<ThemeName, ThemeDefinition> = {
+  light: lightTheme,
+  dark: darkTheme,
+};
+
+function buildThemeObject(def: ThemeDefinition): Theme {
+  return {
+    name: def.name,
+    colorScheme: def.colorScheme,
+    colors: def.colors,
+    typography: {
+      fontFamily,
+      fontSize: fontSize as Record<FontSize, number>,
+      fontWeight: fontWeight as Record<FontWeight, FontWeightValue>,
+      lineHeight: lineHeight as Record<LineHeight, number>,
+      letterSpacing: letterSpacing as Record<string, number>,
+    },
+    spacing: {
+      scale: spacing as Record<Spacing, number>,
+    },
+    borderRadius: {
+      scale: borderRadius as Record<BorderRadiusKey, number>,
+    },
+    shadows: {
+      keys: shadow as Record<ShadowKey, { shadowColor?: string; shadowOffset?: { width: number; height: number }; shadowOpacity?: number; shadowRadius?: number; elevation?: number } | { elevation: number }>,
+      resolve: (key: ShadowKey) => {
+        return { ...shadow[key] };
+      },
+    },
+    elevation: {
+      scale: elevation as Record<ElevationKey, number>,
+    },
+    animation: {
+      duration: animation.duration as Record<AnimationDuration, number>,
+      easing: animation.easing as Record<AnimationEasing, string>,
+    },
+  };
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: ThemeName;
+  customThemeOverride?: CustomThemeOverride;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'light',
+  customThemeOverride,
+}: ThemeProviderProps) {
+  const rnScheme = useRNColorScheme();
+  const systemTheme: ColorScheme = rnScheme === 'dark' ? 'dark' : 'light';
+
+  const [storedTheme, setStoredTheme] = useState<ThemeName>(defaultTheme);
+
+  const [explicitTheme, setExplicitTheme] = useState<ThemeName | undefined>(
+    undefined,
+  );
+
+  const themeName: ThemeName = explicitTheme ?? storedTheme;
+
+  const baseTheme = THEME_DEFINITIONS[themeName];
+
+  const theme: Theme = useMemo(() => {
+    const built = buildThemeObject(baseTheme);
+    if (customThemeOverride) {
+      built.colors = { ...built.colors, ...customThemeOverride };
+    }
+    return built;
+  }, [baseTheme, customThemeOverride]);
+
+  const setTheme = useCallback((next: ThemeName) => {
+    setExplicitTheme(next);
+    setStoredTheme(next);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    const next: ThemeName = themeName === 'light' ? 'dark' : 'light';
+    setExplicitTheme(next);
+    setStoredTheme(next);
+  }, [themeName]);
+
+  const value: ThemeContextValue = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme,
+      colorScheme: theme.colorScheme,
+      systemTheme,
+    }),
+    [theme, setTheme, toggleTheme, systemTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+export type { ThemeProviderProps };
+export { THEME_DEFINITIONS };

package/src/theme/index.ts

@@ -0,0 +1,9 @@
+/**
+ * ANAN-UI — Theme: Barrel Export
+ */
+
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';
+export type { Theme, ThemeContextValue, ColorScheme, ThemeName, ThemeColors } from './types';
+export { lightTheme, darkTheme } from './themes';
+export type { CustomThemeOverride } from './themes';

package/src/theme/themes.ts

@@ -0,0 +1,71 @@
+/**
+ * ANAN-UI — Theme: Theme Definitions (light / dark)
+ *
+ * Maps semantic color roles to raw design token values.
+ */
+
+import type { ThemeColors, ThemeName, ColorScheme } from './types';
+import { colors } from '../design-tokens';
+
+function buildColors(scheme: ColorScheme): ThemeColors {
+  const isDark = scheme === 'dark';
+
+  const bg = isDark ? colors.slate[950] : colors.slate[50];
+  const fg = isDark ? colors.slate[50] : colors.slate[900];
+  const card = isDark ? colors.slate[900] : '#ffffff';
+  const cardFg = isDark ? colors.slate[50] : colors.slate[900];
+  const popover = isDark ? colors.slate[900] : '#ffffff';
+  const popoverFg = isDark ? colors.slate[50] : colors.slate[900];
+  const primary = colors.primary[600];
+  const primaryFg = '#ffffff';
+  const secondary = isDark ? colors.slate[800] : colors.slate[100];
+  const secondaryFg = isDark ? colors.slate[50] : colors.slate[900];
+  const muted = isDark ? colors.slate[800] : colors.slate[100];
+  const mutedFg = isDark ? colors.slate[400] : colors.slate[500];
+  const accent = colors.accent[600];
+  const accentFg = '#ffffff';
+  const destructive = colors.destructive[600];
+  const destructiveFg = '#ffffff';
+  const border = isDark ? colors.border.dark : colors.border.light;
+  const input = isDark ? colors.slate[800] : colors.slate[100];
+  const ring = colors.primary[500];
+
+  return {
+    background: bg,
+    foreground: fg,
+    card,
+    cardForeground: cardFg,
+    popover,
+    popoverForeground: popoverFg,
+    primary,
+    primaryForeground: primaryFg,
+    secondary,
+    secondaryForeground: secondaryFg,
+    muted,
+    mutedForeground: mutedFg,
+    accent,
+    accentForeground: accentFg,
+    destructive,
+    destructiveForeground: destructiveFg,
+    border,
+    input,
+    ring,
+  };
+}
+
+export const lightThemeColors = buildColors('light');
+export const darkThemeColors = buildColors('dark');
+
+export const lightTheme: { name: ThemeName; colorScheme: ColorScheme; colors: ThemeColors } = {
+  name: 'light',
+  colorScheme: 'light',
+  colors: lightThemeColors,
+};
+
+export const darkTheme: { name: ThemeName; colorScheme: ColorScheme; colors: ThemeColors } = {
+  name: 'dark',
+  colorScheme: 'dark',
+  colors: darkThemeColors,
+};
+
+export type CustomThemeOverride = Partial<ThemeColors>;

package/src/theme/types.ts

@@ -0,0 +1,89 @@
+/**
+ * ANAN-UI — Theme: Theme Types
+ *
+ * The resolved theme object consumed by components.
+ * Semantic roles are mapped to raw design token values by the theme layer.
+ */
+
+import type { FontSize, FontWeight, LineHeight } from '../design-tokens/typography';
+import type { Spacing } from '../design-tokens/spacing';
+import type { BorderRadius } from '../design-tokens/border-radius';
+import type { ShadowKey, ElevationKey } from '../design-tokens/shadows';
+import type { AnimationDuration, AnimationEasing } from '../design-tokens/animation';
+import type { TextStyle } from 'react-native';
+
+export type ColorScheme = 'light' | 'dark';
+
+export type ThemeName = 'light' | 'dark';
+
+export interface ThemeColors {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+}
+
+export interface ThemeTypography {
+  fontFamily: { sans: string; mono: string };
+  fontSize: Record<FontSize, number>;
+  fontWeight: Record<FontWeight, NonNullable<TextStyle['fontWeight']>>;
+  lineHeight: Record<LineHeight, number>;
+  letterSpacing: Record<string, number>;
+}
+
+export interface ThemeSpacing {
+  scale: Record<Spacing, number>;
+}
+
+export interface ThemeBorderRadius {
+  scale: Record<BorderRadius, number>;
+}
+
+export interface ThemeShadows {
+  keys: Record<ShadowKey, { shadowColor?: string; shadowOffset?: { width: number; height: number }; shadowOpacity?: number; shadowRadius?: number; elevation?: number } | { elevation: number }>;
+  resolve: (key: ShadowKey) => ReturnType<typeof import('../design-tokens/shadows').resolveShadow>;
+}
+
+export interface ThemeElevation {
+  scale: Record<ElevationKey, number>;
+}
+
+export interface ThemeAnimation {
+  duration: Record<AnimationDuration, number>;
+  easing: Record<AnimationEasing, string>;
+}
+
+export interface Theme {
+  name: ThemeName;
+  colorScheme: ColorScheme;
+  colors: ThemeColors;
+  typography: ThemeTypography;
+  spacing: ThemeSpacing;
+  borderRadius: ThemeBorderRadius;
+  shadows: ThemeShadows;
+  elevation: ThemeElevation;
+  animation: ThemeAnimation;
+}
+
+export interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: ThemeName) => void;
+  toggleTheme: () => void;
+  colorScheme: ColorScheme;
+  systemTheme: ColorScheme;
+}

package/src/theme/useTheme.ts

@@ -0,0 +1,7 @@
+/**
+ * ANAN-UI — Theme: useTheme hook re-export
+ */
+
+import { useTheme } from './ThemeContext';
+export { useTheme };
+export type { Theme, ThemeContextValue, ColorScheme, ThemeName } from './types';

package/src/utils/cn.ts

@@ -0,0 +1,37 @@
+/**
+ * ANAN-UI — Utility: cn
+ *
+ * Merges React Native style props (StyleProp arrays / objects) into a single
+ * flattened array suitable for the `style` prop. Later styles win (React Native
+ * applies left-to-right). Filters out falsy values.
+ *
+ * Unlike classnames-based `cn`, there is no conflict resolution — RN style
+ * arrays already cascade by order. This is a convenience for conditional styles.
+ */
+
+import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+
+type StyleValue = StyleProp<ViewStyle | TextStyle | ImageStyle>;
+
+type MergedStyle = ViewStyle | TextStyle | ImageStyle;
+
+export function cn(...styles: StyleValue[]): MergedStyle[] {
+  const result: MergedStyle[] = [];
+
+  const push = (style: StyleValue): void => {
+    if (!style) return;
+    if (Array.isArray(style)) {
+      for (const item of style) {
+        push(item as StyleValue);
+      }
+    } else {
+      result.push(style as MergedStyle);
+    }
+  };
+
+  for (const style of styles) {
+    push(style);
+  }
+
+  return result;
+}

package/src/utils/createVariants.ts

@@ -0,0 +1,47 @@
+/**
+ * ANAN-UI — Utility: createVariants
+ *
+ * Builds a variant resolver for React Native components.
+ *
+ * Given a variant config (base + variant/size records + defaults), returns a
+ * function that resolves the appropriate StyleSheet style array based on the
+ * component's props and the active theme.
+ *
+ * Styles are resolved at render time (inside the component) so theme switches
+ * are reflected immediately. Variant definitions themselves are pure functions
+ * of (props, theme).
+ */
+
+import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
+
+type StyleRecord = Record<string, ViewStyle | TextStyle>;
+
+export interface VariantConfig<V extends string, S extends string> {
+  base: ViewStyle | TextStyle;
+  variants: {
+    variant: Record<V, ViewStyle | TextStyle>;
+    size: Record<S, ViewStyle | TextStyle>;
+  };
+  defaultVariants: { variant: V; size: S };
+}
+
+export interface VariantProps<V extends string, S extends string> {
+  variant?: V;
+  size?: S;
+}
+
+export function createVariants<V extends string, S extends string>(
+  config: VariantConfig<V, S>,
+) {
+  return (props: VariantProps<V, S>): (ViewStyle | TextStyle)[] => {
+    const variant = props.variant ?? config.defaultVariants.variant;
+    const size = props.size ?? config.defaultVariants.size;
+
+    const variantStyle = config.variants.variant[variant];
+    const sizeStyle = config.variants.size[size];
+
+    return [config.base, variantStyle, sizeStyle].filter(Boolean);
+  };
+}
+
+export type { StyleProp };

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+/**
+ * ANAN-UI — Utility: Barrel Export
+ */
+
+export { cn } from './cn';
+export { createVariants, type VariantConfig, type VariantProps } from './createVariants';
+export { mergeAccessibilityProps } from './mergeProps';

package/src/utils/mergeProps.ts

@@ -0,0 +1,35 @@
+/**
+ * ANAN-UI — Utility: mergeProps
+ *
+ * Merges accessibility and event-handler props safely. Intended for use when
+ * composing primitives (e.g. Pressable inside a custom component) so that
+ * consumer-provided accessibility props are preserved and forwarded.
+ */
+
+import type { AccessibilityProps } from 'react-native';
+
+export function mergeAccessibilityProps<
+  T extends Record<string, unknown>,
+>(
+  base: T,
+  extra?: AccessibilityProps,
+): T & Partial<AccessibilityProps> {
+  return {
+    ...base,
+    ...(extra?.accessibilityLabel !== undefined && {
+      accessibilityLabel: extra.accessibilityLabel,
+    }),
+    ...(extra?.accessibilityRole !== undefined && {
+      accessibilityRole: extra.accessibilityRole,
+    }),
+    ...(extra?.accessibilityHint !== undefined && {
+      accessibilityHint: extra.accessibilityHint,
+    }),
+    ...(extra?.accessibilityState !== undefined && {
+      accessibilityState: extra.accessibilityState,
+    }),
+    ...(extra?.accessibilityValue !== undefined && {
+      accessibilityValue: extra.accessibilityValue,
+    }),
+  };
+}