@rnative/ui 0.0.0-stage → 1.0.0

package/src/design-tokens/colors.ts

@@ -0,0 +1,120 @@
+/**
+ * ANAN-UI — Design Tokens: Colors
+ *
+ * Raw color palette + semantic color roles.
+ * Themes map semantic roles to raw palette values.
+ */
+
+// Raw palette — Slate (neutral)
+export const slate = {
+  50: '#f8fafc',
+  100: '#f1f5f9',
+  200: '#e2e8f0',
+  300: '#cbd5e1',
+  400: '#94a3b8',
+  500: '#64748b',
+  600: '#475569',
+  700: '#334155',
+  800: '#1e293b',
+  900: '#0f172a',
+  950: '#020617',
+} as const;
+
+// Raw palette — Primary (blue)
+export const primary = {
+  50: '#eff6ff',
+  100: '#dbeafe',
+  200: '#bfdbfe',
+  300: '#93c5fd',
+  400: '#60a5fa',
+  500: '#3b82f6',
+  600: '#2563eb',
+  700: '#1d4ed8',
+  800: '#1e40af',
+  900: '#1e3a8a',
+  950: '#172554',
+} as const;
+
+// Raw palette — Destructive (red)
+export const destructive = {
+  50: '#fef2f2',
+  100: '#fee2e2',
+  200: '#fecaca',
+  300: '#fca5a5',
+  400: '#f87171',
+  500: '#ef4444',
+  600: '#dc2626',
+  700: '#b91c1c',
+  800: '#991b1b',
+  900: '#7f1d1d',
+  950: '#450a0a',
+} as const;
+
+// Raw palette — Secondary (muted)
+export const secondary = {
+  50: '#f8fafc',
+  100: '#f1f5f9',
+  200: '#e2e8f0',
+  300: '#cbd5e1',
+  400: '#94a3b8',
+  500: '#64748b',
+  600: '#475569',
+  700: '#334155',
+  800: '#1e293b',
+  900: '#0f172a',
+  950: '#020617',
+} as const;
+
+// Raw palette — Muted (background accents)
+export const muted = {
+  50: '#f8fafc',
+  100: '#f1f5f9',
+  200: '#e2e8f0',
+  300: '#cbd5e1',
+  400: '#94a3b8',
+  500: '#64748b',
+  600: '#475569',
+  700: '#334155',
+  800: '#1e293b',
+  900: '#0f172a',
+  950: '#020617',
+} as const;
+
+// Raw palette — Accent (green)
+export const accent = {
+  50: '#f0fdf4',
+  100: '#dcfce7',
+  200: '#bbf7d0',
+  300: '#86efac',
+  400: '#4ade80',
+  500: '#22c55e',
+  600: '#16a34a',
+  700: '#15803d',
+  800: '#166534',
+  900: '#14532d',
+  950: '#052e16',
+} as const;
+
+// Raw palette — Popover / border / input
+export const border = {
+  light: '#e2e8f0',
+  dark: '#334155',
+} as const;
+
+export type Slate = (typeof slate)[keyof typeof slate];
+export type Primary = (typeof primary)[keyof typeof primary];
+export type Destructive = (typeof destructive)[keyof typeof destructive];
+export type Secondary = (typeof secondary)[keyof typeof secondary];
+export type Muted = (typeof muted)[keyof typeof muted];
+export type Accent = (typeof accent)[keyof typeof accent];
+
+// Grouped palette namespace — lets consumers do `colors.slate[900]`, etc.
+export const colors = {
+  slate,
+  primary,
+  destructive,
+  secondary,
+  muted,
+  accent,
+  border,
+} as const;

package/src/design-tokens/index.ts

@@ -0,0 +1,21 @@
+/**
+ * ANAN-UI — Design Tokens: Barrel Export
+ */
+
+export { slate, primary, destructive, secondary, muted, accent, border, colors } from './colors';
+export type { Slate, Primary, Destructive, Secondary, Muted, Accent } from './colors';
+
+export { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } from './typography';
+export type { FontSize, FontWeight, LineHeight } from './typography';
+
+export { spacing } from './spacing';
+export type { Spacing } from './spacing';
+
+export { borderRadius } from './border-radius';
+export type { BorderRadius } from './border-radius';
+
+export { shadow, elevation, resolveShadow } from './shadows';
+export type { ShadowKey, Elevation, ElevationKey } from './shadows';
+
+export { animation } from './animation';
+export type { AnimationDuration, AnimationEasing } from './animation';

package/src/design-tokens/shadows.ts

@@ -0,0 +1,78 @@
+/**
+ * ANAN-UI — Design Tokens: Shadows & Elevation
+ *
+ * iOS uses shadowColor/shadowOffset/shadowOpacity/shadowRadius.
+ * Android uses elevation.
+ * Platform-specific resolution is centralized here.
+ */
+
+import { Platform } from 'react-native';
+
+export const shadow = {
+  xs: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 8,
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    elevation: 16,
+  },
+} as const;
+
+export const elevation = {
+  none: 0,
+  sm: 1,
+  md: 4,
+  lg: 8,
+  xl: 16,
+  '2xl': 24,
+} as const;
+
+/**
+ * Resolves a shadow token to platform-appropriate styles.
+ * iOS: shadow props; Android: elevation.
+ */
+export function resolveShadow(key: keyof typeof shadow) {
+  const token = shadow[key];
+  if (Platform.OS === 'android') {
+    return { elevation: token.elevation };
+  }
+  return {
+    shadowColor: token.shadowColor,
+    shadowOffset: token.shadowOffset,
+    shadowOpacity: token.shadowOpacity,
+    shadowRadius: token.shadowRadius,
+    elevation: token.elevation,
+  };
+}
+
+export type ShadowKey = keyof typeof shadow;
+export type Elevation = (typeof elevation)[keyof typeof elevation];
+export type ElevationKey = keyof typeof elevation;

package/src/design-tokens/spacing.ts

@@ -0,0 +1,31 @@
+/**
+ * ANAN-UI — Design Tokens: Spacing
+ *
+ * Based on a 4px grid.
+ */
+
+export const spacing = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+} as const;
+
+export type Spacing = keyof typeof spacing;

package/src/design-tokens/typography.ts

@@ -0,0 +1,45 @@
+/**
+ * ANAN-UI — Design Tokens: Typography
+ */
+
+export const fontFamily = {
+  sans: 'System',
+  mono: 'Courier New',
+} as const;
+
+export const fontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+} as const;
+
+export const fontWeight = {
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+} as const;
+
+export const lineHeight = {
+  none: 1,
+  tight: 1.25,
+  normal: 1.5,
+  relaxed: 1.75,
+} as const;
+
+export const letterSpacing = {
+  tighter: -0.5,
+  tight: -0.25,
+  normal: 0,
+  wide: 0.25,
+  wider: 0.5,
+  widest: 1,
+} as const;
+
+export type FontSize = keyof typeof fontSize;
+export type FontWeight = keyof typeof fontWeight;
+export type LineHeight = keyof typeof lineHeight;

package/src/primitives/Box.tsx

@@ -0,0 +1,121 @@
+/**
+ * ANAN-UI — Primitive: Box
+ *
+ * A flexible layout primitive. Accepts all ViewProps plus theme-aware style
+ * tokens (padding, margin, background, border, shadow, etc.) resolved via
+ * the theme context.
+ *
+ * Static styles live in StyleSheet.create; dynamic values are token references.
+ */
+
+import { View, StyleSheet } from 'react-native';
+import type {
+  ViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '../theme';
+import { cn } from '../utils/cn';
+import type { Spacing } from '../design-tokens/spacing';
+import type { BorderRadius } from '../design-tokens/border-radius';
+import type { ShadowKey } from '../design-tokens/shadows';
+import type { ThemeColors } from '../theme/types';
+
+export interface BoxProps extends ViewProps {
+  p?: Spacing;
+  px?: Spacing;
+  py?: Spacing;
+  pt?: Spacing;
+  pr?: Spacing;
+  pb?: Spacing;
+  pl?: Spacing;
+  m?: Spacing;
+  mx?: Spacing;
+  my?: Spacing;
+  mt?: Spacing;
+  mr?: Spacing;
+  mb?: Spacing;
+  ml?: Spacing;
+  bg?: keyof import('../theme/types').ThemeColors;
+  borderRadius?: BorderRadius;
+  shadow?: ShadowKey;
+  style?: StyleProp<ViewStyle>;
+}
+
+const baseStyles = StyleSheet.create({
+  root: {},
+});
+
+export function Box({
+  p, px, py, pt, pr, pb, pl,
+  m, mx, my, mt, mr, mb, ml,
+  bg,
+  borderRadius: radius,
+  shadow: shadowKey,
+  style,
+  children,
+  ...rest
+}: BoxProps) {
+  const { theme } = useTheme();
+
+  const paddingStyle: ViewStyle = {};
+  if (p !== undefined) {
+    paddingStyle.padding = theme.spacing.scale[p];
+  }
+  if (px !== undefined) {
+    paddingStyle.paddingHorizontal = theme.spacing.scale[px];
+  }
+  if (py !== undefined) {
+    paddingStyle.paddingVertical = theme.spacing.scale[py];
+  }
+  if (pt !== undefined) paddingStyle.paddingTop = theme.spacing.scale[pt];
+  if (pr !== undefined) paddingStyle.paddingRight = theme.spacing.scale[pr];
+  if (pb !== undefined) paddingStyle.paddingBottom = theme.spacing.scale[pb];
+  if (pl !== undefined) paddingStyle.paddingLeft = theme.spacing.scale[pl];
+
+  const marginStyle: ViewStyle = {};
+  if (m !== undefined) {
+    marginStyle.margin = theme.spacing.scale[m];
+  }
+  if (mx !== undefined) {
+    marginStyle.marginHorizontal = theme.spacing.scale[mx];
+  }
+  if (my !== undefined) {
+    marginStyle.marginVertical = theme.spacing.scale[my];
+  }
+  if (mt !== undefined) marginStyle.marginTop = theme.spacing.scale[mt];
+  if (mr !== undefined) marginStyle.marginRight = theme.spacing.scale[mr];
+  if (mb !== undefined) marginStyle.marginBottom = theme.spacing.scale[mb];
+  if (ml !== undefined) marginStyle.marginLeft = theme.spacing.scale[ml];
+
+  const backgroundStyle: ViewStyle = {};
+  if (bg !== undefined) {
+    backgroundStyle.backgroundColor = theme.colors[bg];
+  }
+
+  const radiusStyle: ViewStyle = {};
+  if (radius !== undefined) {
+    radiusStyle.borderRadius = theme.borderRadius.scale[radius];
+  }
+
+  const shadowStyle = shadowKey !== undefined ? theme.shadows.resolve(shadowKey) : {};
+
+  return (
+    <View
+      {...rest}
+      style={cn(
+        baseStyles.root,
+        paddingStyle,
+        marginStyle,
+        backgroundStyle,
+        radiusStyle,
+        shadowStyle,
+        style,
+      )}
+    >
+      {children}
+    </View>
+  );
+}
+
+Box.displayName = 'Box';

package/src/primitives/Pressable.tsx

@@ -0,0 +1,106 @@
+/**
+ * ANAN-UI — Primitive: Pressable
+ *
+ * A touchable primitive with theme-aware styling and full accessibility.
+ * Wraps React Native's Pressable. Uses the render prop's `pressed` state to
+ * apply a pressed visual style (opacity by default, or a `pressedStyle`
+ * override) without re-mounting or nesting child pressables.
+ *
+ * Supports disabled state (visual + accessibility) and forwards all
+ * Pressable props.
+ */
+
+import {
+  Pressable,
+  StyleSheet,
+} from 'react-native';
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../theme';
+import { cn } from '../utils/cn';
+import type { Spacing } from '../design-tokens/spacing';
+import type { BorderRadius } from '../design-tokens/border-radius';
+
+export interface PressablePrimitiveProps extends Omit<PressableProps, 'style'> {
+  p?: Spacing;
+  px?: Spacing;
+  py?: Spacing;
+  bg?: keyof import('../theme/types').ThemeColors;
+  borderRadius?: BorderRadius;
+  disabled?: boolean;
+  /** Extra style applied while the pressable is pressed. */
+  pressedStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+const baseStyles = StyleSheet.create({
+  root: {},
+  pressed: {
+    opacity: 0.75,
+  },
+});
+
+export function PressablePrimitive({
+  p,
+  px,
+  py,
+  bg,
+  borderRadius: radius,
+  disabled,
+  pressedStyle,
+  style,
+  children,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  ...rest
+}: PressablePrimitiveProps) {
+  const { theme } = useTheme();
+
+  const paddingStyle: ViewStyle = {};
+  if (p !== undefined) {
+    paddingStyle.padding = theme.spacing.scale[p];
+  }
+  if (px !== undefined) {
+    paddingStyle.paddingHorizontal = theme.spacing.scale[px];
+  }
+  if (py !== undefined) {
+    paddingStyle.paddingVertical = theme.spacing.scale[py];
+  }
+
+  const backgroundStyle: ViewStyle = {};
+  if (bg !== undefined) {
+    backgroundStyle.backgroundColor = theme.colors[bg];
+  }
+
+  const radiusStyle: ViewStyle = {};
+  if (radius !== undefined) {
+    radiusStyle.borderRadius = theme.borderRadius.scale[radius];
+  }
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={disabled ? undefined : onPress}
+      onLongPress={disabled ? undefined : onLongPress}
+      onPressIn={disabled ? undefined : onPressIn}
+      onPressOut={disabled ? undefined : onPressOut}
+      style={({ pressed }) =>
+        cn(
+          baseStyles.root,
+          paddingStyle,
+          backgroundStyle,
+          radiusStyle,
+          disabled ? { opacity: 0.5 } : {},
+          pressed ? (pressedStyle ?? baseStyles.pressed) : {},
+          style,
+        )
+      }
+      {...rest}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+PressablePrimitive.displayName = 'Pressable';

package/src/primitives/Text.tsx

@@ -0,0 +1,84 @@
+/**
+ * ANAN-UI — Primitive: Text
+ *
+ * A text primitive with theme-aware typography tokens.
+ * Supports color, fontSize, fontWeight, lineHeight, and text alignment.
+ */
+
+import { Text, StyleSheet } from 'react-native';
+import type { TextProps, StyleProp, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+import { cn } from '../utils/cn';
+import type { FontSize } from '../design-tokens/typography';
+import type { FontWeight } from '../design-tokens/typography';
+import type { LineHeight } from '../design-tokens/typography';
+
+export interface TextPrimitiveProps extends TextProps {
+  color?: keyof import('../theme/types').ThemeColors;
+  fontSize?: FontSize;
+  fontWeight?: FontWeight;
+  lineHeight?: LineHeight;
+  align?: 'left' | 'center' | 'right' | 'justify';
+  style?: StyleProp<TextStyle>;
+}
+
+const baseStyles = StyleSheet.create({
+  root: {},
+});
+
+export function TextPrimitive({
+  color,
+  fontSize: size,
+  fontWeight: weight,
+  lineHeight: height,
+  align,
+  style,
+  children,
+  ...rest
+}: TextPrimitiveProps) {
+  const { theme } = useTheme();
+
+  const colorStyle: TextStyle = {};
+  if (color !== undefined) {
+    colorStyle.color = theme.colors[color];
+  }
+
+  const sizeStyle: TextStyle = {};
+  if (size !== undefined) {
+    sizeStyle.fontSize = theme.typography.fontSize[size];
+  }
+
+  const weightStyle: TextStyle = {};
+  if (weight !== undefined) {
+    weightStyle.fontWeight = theme.typography.fontWeight[weight];
+  }
+
+  const heightStyle: TextStyle = {};
+  if (height !== undefined) {
+    heightStyle.lineHeight = theme.typography.lineHeight[height];
+  }
+
+  const alignStyle: TextStyle = {};
+  if (align !== undefined) {
+    alignStyle.textAlign = align;
+  }
+
+  return (
+    <Text
+      {...rest}
+      style={cn(
+        baseStyles.root,
+        colorStyle,
+        sizeStyle,
+        weightStyle,
+        heightStyle,
+        alignStyle,
+        style,
+      )}
+    >
+      {children}
+    </Text>
+  );
+}
+
+TextPrimitive.displayName = 'Text';

package/src/primitives/index.ts

@@ -0,0 +1,15 @@
+/**
+ * ANAN-UI — Primitive: Barrel Export
+ */
+
+export { Box } from './Box';
+export { TextPrimitive } from './Text';
+export { PressablePrimitive as Pressable } from './Pressable';
+export type { BoxProps } from './Box';
+export type { TextPrimitiveProps } from './Text';
+export type { PressablePrimitiveProps as PressableProps } from './Pressable';
+
+/** @deprecated The primitive `Text` is now exported as `TextPrimitive`; the public `Text` component lives in `components/text`. */
+export { TextPrimitive as Text } from './Text';
+/** @deprecated Use `TextPrimitiveProps`; the public `TextProps` belongs to the `Text` component. */
+export type { TextPrimitiveProps as TextProps } from './Text';

package/src/theme/ThemeContext.ts

@@ -0,0 +1,20 @@
+/**
+ * ANAN-UI — Theme: ThemeContext
+ *
+ * React Context holding the active theme. Provided by ThemeProvider.
+ */
+
+import { createContext, useContext } from 'react';
+import type { Theme, ThemeContextValue } from './types';
+
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export type { Theme, ThemeContextValue };