@rnative/ui 0.0.0-stage → 1.0.0

package/src/components/input/Input.tsx

@@ -0,0 +1,139 @@
+/**
+ * ANAN-UI — Component: Input
+ *
+ * A labeled text input with variant/size support, focus and error states, and
+ * full accessibility. Built on React Native's TextInput.
+ *
+ * The border reflects focus (ring) and error (destructive) states. The label
+ * doubles as the accessibility label when none is provided, and errors are
+ * announced to screen readers via `accessibilityHint`.
+ */
+
+import { useState } from 'react';
+import { View, TextInput, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle, TextInputFocusEventData, NativeSyntheticEvent } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getInputVariants } from './Input.variants';
+import { inputStyles } from './Input.styles';
+import type { InputProps, InputVariant, InputSize } from './Input.types';
+
+export function Input({
+  label,
+  hint,
+  error,
+  variant: variantProp,
+  size: sizeProp,
+  disabled = false,
+  style,
+  inputStyle,
+  onFocus,
+  onBlur,
+  editable,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: InputProps) {
+  const { theme } = useTheme();
+  const [focused, setFocused] = useState(false);
+
+  const { variants, text, defaultVariants } = getInputVariants(theme);
+  const variant: InputVariant = variantProp ?? defaultVariants.variant;
+  const size: InputSize = sizeProp ?? defaultVariants.size;
+
+  const hasError = error !== undefined && error.length > 0;
+
+  // Base border color from the variant (transparent for filled/ghost).
+  const baseBorder =
+    variants.variant[variant].borderColor ?? 'transparent';
+
+  // Border reflects error > focus > base variant.
+  const borderColor = hasError
+    ? theme.colors.destructive
+    : focused
+      ? theme.colors.ring
+      : baseBorder;
+
+  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  const fieldStyle: StyleProp<ViewStyle> = cn(
+    inputStyles.field,
+    variants.variant[variant],
+    variants.size[size],
+    { borderColor },
+    disabled && { opacity: 0.5 },
+    style,
+  );
+
+  const resolvedInputStyle: StyleProp<TextStyle> = cn(
+    styles.input,
+    text[size],
+    { color: disabled ? theme.colors.mutedForeground : theme.colors.foreground },
+    inputStyle,
+  );
+
+  const message = hasError ? error : hint;
+  const messageColor = hasError ? 'destructive' : 'mutedForeground';
+
+  return (
+    <View style={inputStyles.container}>
+      {label !== undefined && (
+        <TextPrimitive
+          color={disabled ? 'mutedForeground' : 'foreground'}
+          fontSize="sm"
+          fontWeight="medium"
+          style={inputStyles.label}
+          accessibilityRole="text"
+        >
+          {label}
+        </TextPrimitive>
+      )}
+
+      <View style={fieldStyle}>
+        <TextInput
+          {...rest}
+          editable={editable !== undefined ? editable : !disabled}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={theme.colors.mutedForeground}
+          accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityHint={accessibilityHint ?? (hasError ? error : undefined)}
+          accessibilityState={{ disabled }}
+          style={resolvedInputStyle}
+        />
+      </View>
+
+      {message !== undefined && (
+        <TextPrimitive
+          color={messageColor}
+          fontSize="sm"
+          style={inputStyles.message}
+          accessibilityRole={hasError ? 'alert' : 'text'}
+        >
+          {message}
+        </TextPrimitive>
+      )}
+    </View>
+  );
+}
+
+Input.displayName = 'Input';
+
+const styles = StyleSheet.create({
+  input: {
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+  },
+});
+
+export type { InputProps, InputVariant, InputSize };

package/src/components/input/Input.types.ts

@@ -0,0 +1,28 @@
+/**
+ * ANAN-UI — Component: Input Types
+ *
+ * A labeled text input with variant/size support, focus + error states, and
+ * full accessibility. Built on React Native's TextInput.
+ */
+
+import type { TextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type InputVariant = 'outline' | 'filled' | 'ghost';
+
+export type InputSize = 'sm' | 'default' | 'lg';
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  /** Visible label rendered above the field. Used as the accessibility label when none is given. */
+  label?: string;
+  /** Helper text rendered below the field (hidden when `error` is set). */
+  hint?: string;
+  /** Error message. When present the field shows the destructive border and announces the error. */
+  error?: string;
+  variant?: InputVariant;
+  size?: InputSize;
+  disabled?: boolean;
+  /** Style applied to the outer container (label + field + messages). */
+  style?: StyleProp<ViewStyle>;
+  /** Style applied to the underlying TextInput. */
+  inputStyle?: StyleProp<TextStyle>;
+}

package/src/components/input/Input.variants.ts

@@ -0,0 +1,71 @@
+/**
+ * ANAN-UI — Component: Input Variants
+ *
+ * Variant/size style definitions resolved against the active theme at render
+ * time. Border/background colors are base values; focus and error states are
+ * layered in Input.tsx.
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+import type { InputVariant, InputSize } from './Input.types';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export interface InputVariantConfig {
+  variants: {
+    variant: Record<InputVariant, ViewStyle>;
+    size: Record<InputSize, ViewStyle>;
+  };
+  text: Record<InputSize, TextStyle>;
+  defaultVariants: { variant: InputVariant; size: InputSize };
+}
+
+export function getInputVariants(theme: Theme): InputVariantConfig {
+  return {
+    variants: {
+      variant: {
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.card,
+        },
+        filled: {
+          borderWidth: 1,
+          borderColor: 'transparent',
+          backgroundColor: theme.colors.muted,
+        },
+        ghost: {
+          borderWidth: 1,
+          borderColor: 'transparent',
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          minHeight: 32,
+          paddingHorizontal: spacing[2],
+          paddingVertical: spacing[1],
+          borderRadius: borderRadius.md,
+        },
+        default: {
+          minHeight: 40,
+          paddingHorizontal: spacing[3],
+          paddingVertical: spacing[2],
+          borderRadius: borderRadius.md,
+        },
+        lg: {
+          minHeight: 48,
+          paddingHorizontal: spacing[4],
+          paddingVertical: spacing[3],
+          borderRadius: borderRadius.lg,
+        },
+      },
+    },
+    text: {
+      sm: { fontSize: theme.typography.fontSize.sm },
+      default: { fontSize: theme.typography.fontSize.base },
+      lg: { fontSize: theme.typography.fontSize.lg },
+    },
+    defaultVariants: { variant: 'outline', size: 'default' },
+  };
+}

package/src/components/input/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: Input Barrel Export
+ */
+
+export { Input } from './Input';
+export type { InputProps, InputVariant, InputSize } from './Input.types';

package/src/components/separator/Separator.styles.ts

@@ -0,0 +1,23 @@
+/**
+ * ANAN-UI — Component: Separator Styles
+ *
+ * Static styles created with StyleSheet.create. The line color and thickness
+ * are resolved at render time in Separator.tsx.
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const separatorStyles = StyleSheet.create({
+  base: {
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+  horizontal: {
+    alignSelf: 'stretch',
+    height: 0,
+  },
+  vertical: {
+    alignSelf: 'stretch',
+    width: 0,
+  },
+});

package/src/components/separator/Separator.tsx

@@ -0,0 +1,70 @@
+/**
+ * ANAN-UI — Component: Separator
+ *
+ * A themed divider, horizontal or vertical. The line color and thickness come
+ * from the design tokens/theme. Decorative by default: it is hidden from
+ * screen readers unless `decorative={false}` is set.
+ *
+ * `solid` lines are drawn with a background fill; `dashed`/`dotted` lines use a
+ * one-sided border (React Native applies `borderStyle` per-side on iOS and
+ * falls back to a solid line on Android).
+ */
+
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { separatorStyles } from './Separator.styles';
+import type { SeparatorProps } from './Separator.types';
+
+export function Separator({
+  orientation = 'horizontal',
+  variant = 'solid',
+  thickness = StyleSheet.hairlineWidth,
+  color = 'border',
+  decorative = true,
+  style,
+  ...rest
+}: SeparatorProps) {
+  const { theme } = useTheme();
+
+  const lineColor = theme.colors[color];
+  const isHorizontal = orientation === 'horizontal';
+
+  // Solid: fill the cross axis with the line color. Dashed/dotted: use a
+  // one-sided border so RN can apply the dash pattern.
+  const lineStyle =
+    variant === 'solid'
+      ? isHorizontal
+        ? { height: thickness, backgroundColor: lineColor }
+        : { width: thickness, backgroundColor: lineColor }
+      : isHorizontal
+        ? {
+            height: thickness,
+            borderBottomWidth: thickness,
+            borderBottomColor: lineColor,
+            borderStyle: variant,
+          }
+        : {
+            width: thickness,
+            borderRightWidth: thickness,
+            borderRightColor: lineColor,
+            borderStyle: variant,
+          };
+
+  return (
+    <View
+      aria-hidden={decorative}
+      importantForAccessibility={decorative ? 'no-hide-descendants' : 'auto'}
+      accessibilityElementsHidden={decorative}
+      {...rest}
+      style={cn(
+        separatorStyles.base,
+        isHorizontal ? separatorStyles.horizontal : separatorStyles.vertical,
+        lineStyle,
+        style,
+      )}
+    />
+  );
+}
+
+Separator.displayName = 'Separator';

package/src/components/separator/Separator.types.ts

@@ -0,0 +1,28 @@
+/**
+ * ANAN-UI — Component: Separator Types
+ *
+ * A divider line, horizontal or vertical, themed from the design tokens.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+export type SeparatorVariant = 'solid' | 'dashed' | 'dotted';
+
+export interface SeparatorProps extends Omit<ViewProps, 'style'> {
+  /** Line direction. Defaults to `horizontal`. */
+  orientation?: SeparatorOrientation;
+  /** Line pattern. Defaults to `solid`. */
+  variant?: SeparatorVariant;
+  /** Line thickness in dp (a token-independent number; defaults to hairline). */
+  thickness?: number;
+  /** Semantic color role for the line. Defaults to `border`. */
+  color?: keyof import('../../theme/types').ThemeColors;
+  /**
+   * Whether the separator is purely decorative. Decorative separators are
+   * hidden from screen readers (the default). Set to `false` to expose it.
+   */
+  decorative?: boolean;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/separator/index.ts

@@ -0,0 +1,10 @@
+/**
+ * ANAN-UI — Component: Separator Barrel Export
+ */
+
+export { Separator } from './Separator';
+export type {
+  SeparatorProps,
+  SeparatorOrientation,
+  SeparatorVariant,
+} from './Separator.types';

package/src/components/text/Text.tsx

@@ -0,0 +1,75 @@
+/**
+ * ANAN-UI — Component: Text
+ *
+ * A semantic typography component built on top of the TextPrimitive.
+ * Maps a `variant` (h1..h4, body, caption, ...) to design-token font sizes,
+ * weights, colors and line-height ratios, resolved against the active theme.
+ *
+ * Explicit primitive props (color/fontSize/fontWeight/...) override the
+ * variant defaults. Headings automatically expose `accessibilityRole="header"`
+ * unless a role is provided.
+ */
+
+import { StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { TextPrimitive } from '../../primitives/Text';
+import { textVariantStyles } from './Text.variants';
+import type { TextProps } from './Text.types';
+
+const HEADING_VARIANTS = new Set(['h1', 'h2', 'h3', 'h4']);
+
+export function Text({
+  variant = 'body',
+  color,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  style,
+  accessibilityRole,
+  ...rest
+}: TextProps) {
+  const { theme } = useTheme();
+
+  const preset = textVariantStyles[variant];
+
+  // Explicit primitive props take precedence over the variant preset.
+  const resolvedFontSize = fontSize ?? preset.fontSize;
+  const resolvedFontWeight = fontWeight ?? preset.fontWeight;
+  const resolvedColor = color ?? preset.color;
+
+  const sizePx = theme.typography.fontSize[resolvedFontSize];
+
+  // RN requires absolute px line-height, so the preset's ratio is multiplied
+  // by the resolved font size. An explicit `lineHeight` token (also a ratio)
+  // wins over the preset ratio.
+  const ratio = lineHeight !== undefined
+    ? theme.typography.lineHeight[lineHeight]
+    : preset.lineHeightRatio;
+
+  const variantStyle: StyleProp<TextStyle> = [
+    ratio !== undefined ? { lineHeight: Math.round(sizePx * ratio) } : null,
+    preset.fontFamily !== undefined
+      ? { fontFamily: theme.typography.fontFamily[preset.fontFamily] }
+      : null,
+  ];
+
+  const isHeading = HEADING_VARIANTS.has(variant);
+
+  return (
+    <TextPrimitive
+      {...rest}
+      color={resolvedColor}
+      fontSize={resolvedFontSize}
+      fontWeight={resolvedFontWeight}
+      accessibilityRole={
+        accessibilityRole ?? (isHeading ? 'header' : undefined)
+      }
+      style={StyleSheet.compose(variantStyle, style)}
+    />
+  );
+}
+
+Text.displayName = 'Text';
+
+export type { TextProps };

package/src/components/text/Text.types.ts

@@ -0,0 +1,27 @@
+/**
+ * ANAN-UI — Component: Text Types
+ *
+ * The public Text component composes the TextPrimitive and adds semantic
+ * typography presets (variants). Explicit primitive props override variant
+ * defaults.
+ */
+
+import type { TextPrimitiveProps } from '../../primitives/Text';
+
+export type TextVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'bodyLg'
+  | 'body'
+  | 'bodySm'
+  | 'label'
+  | 'caption'
+  | 'overline'
+  | 'mono';
+
+export interface TextProps extends TextPrimitiveProps {
+  /** Semantic typography preset. Explicit primitives props take precedence. */
+  variant?: TextVariant;
+}

package/src/components/text/Text.variants.ts

@@ -0,0 +1,44 @@
+/**
+ * ANAN-UI — Component: Text Variants
+ *
+ * Static typography presets. Values are design-token references resolved at
+ * render time in Text.tsx via the theme context. Line heights are expressed as
+ * ratios of the resolved font size (RN requires absolute px, so they are
+ * multiplied at render).
+ */
+
+import type { FontSize, FontWeight } from '../../design-tokens/typography';
+import type { ThemeColors } from '../../theme/types';
+import type { TextVariant } from './Text.types';
+import { letterSpacing } from '../../design-tokens';
+
+export interface TextVariantStyle {
+  fontSize: FontSize;
+  fontWeight: FontWeight;
+  /** Line height as a ratio of font size (e.g. 1.5). */
+  lineHeightRatio?: number;
+  /** Default semantic color role (overridable via the `color` prop). */
+  color?: keyof ThemeColors;
+  fontFamily?: 'sans' | 'mono';
+  letterSpacing?: number;
+}
+
+export const textVariantStyles: Record<TextVariant, TextVariantStyle> = {
+  h1: { fontSize: '3xl', fontWeight: 'bold', lineHeightRatio: 1.2, color: 'foreground' },
+  h2: { fontSize: '2xl', fontWeight: 'bold', lineHeightRatio: 1.25, color: 'foreground' },
+  h3: { fontSize: 'xl', fontWeight: 'semibold', lineHeightRatio: 1.3, color: 'foreground' },
+  h4: { fontSize: 'lg', fontWeight: 'semibold', lineHeightRatio: 1.4, color: 'foreground' },
+  bodyLg: { fontSize: 'lg', fontWeight: 'normal', lineHeightRatio: 1.5, color: 'foreground' },
+  body: { fontSize: 'base', fontWeight: 'normal', lineHeightRatio: 1.5, color: 'foreground' },
+  bodySm: { fontSize: 'sm', fontWeight: 'normal', lineHeightRatio: 1.5, color: 'foreground' },
+  label: { fontSize: 'sm', fontWeight: 'medium', lineHeightRatio: 1.4, color: 'foreground' },
+  caption: { fontSize: 'xs', fontWeight: 'normal', lineHeightRatio: 1.4, color: 'mutedForeground' },
+  overline: {
+    fontSize: 'xs',
+    fontWeight: 'semibold',
+    lineHeightRatio: 1.4,
+    color: 'mutedForeground',
+    letterSpacing: letterSpacing.wider,
+  },
+  mono: { fontSize: 'sm', fontWeight: 'normal', lineHeightRatio: 1.5, color: 'foreground', fontFamily: 'mono' },
+};

package/src/components/text/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: Text Barrel Export
+ */
+
+export { Text } from './Text';
+export type { TextProps, TextVariant } from './Text.types';

package/src/design-tokens/animation.ts

@@ -0,0 +1,23 @@
+/**
+ * ANAN-UI — Design Tokens: Animation
+ */
+
+export const animation = {
+  duration: {
+    instant: 0,
+    fast: 150,
+    normal: 300,
+    slow: 500,
+    slower: 750,
+  } as const,
+  easing: {
+    linear: 'linear',
+    easeIn: 'ease-in',
+    easeOut: 'ease-out',
+    easeInOut: 'ease-in-out',
+    bounce: 'ease-in-out',
+  } as const,
+} as const;
+
+export type AnimationDuration = keyof typeof animation.duration;
+export type AnimationEasing = keyof typeof animation.easing;

package/src/design-tokens/border-radius.ts

@@ -0,0 +1,16 @@
+/**
+ * ANAN-UI — Design Tokens: Border Radius
+ */
+
+export const borderRadius = {
+  none: 0,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  full: 9999,
+} as const;
+
+export type BorderRadius = keyof typeof borderRadius;