@rnative/ui 0.0.0-stage → 1.0.0

package/src/components/avatar/Avatar.variants.ts

@@ -0,0 +1,55 @@
+/**
+ * ANAN-UI — Component: Avatar Variants
+ *
+ * Size and shape style definitions resolved against the active theme at
+ * render time.
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+import type { AvatarSize, AvatarVariant } from './Avatar.types';
+import { borderRadius } from '../../design-tokens';
+
+export interface AvatarVariantConfig {
+  size: Record<AvatarSize, ViewStyle>;
+  textSize: Record<AvatarSize, TextStyle>;
+  variant: Record<AvatarVariant, ViewStyle>;
+  defaultSize: AvatarSize;
+  defaultVariant: AvatarVariant;
+}
+
+export function getAvatarVariants(theme: Theme): AvatarVariantConfig {
+  return {
+    size: {
+      sm: { width: 32, height: 32 },
+      default: { width: 40, height: 40 },
+      lg: { width: 56, height: 56 },
+      xl: { width: 72, height: 72 },
+    },
+    textSize: {
+      sm: { fontSize: theme.typography.fontSize.xs },
+      default: { fontSize: theme.typography.fontSize.sm },
+      lg: { fontSize: theme.typography.fontSize.base },
+      xl: { fontSize: theme.typography.fontSize.lg },
+    },
+    variant: {
+      circle: { borderRadius: borderRadius.full },
+      rounded: { borderRadius: borderRadius.lg },
+    },
+    defaultSize: 'default',
+    defaultVariant: 'circle',
+  };
+}
+
+/**
+ * Derives up to two initials from a full name ("Ada Lovelace" → "AL").
+ * Single-word names use the first two letters.
+ */
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return '?';
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  const first = parts[0]!;
+  const last = parts[parts.length - 1]!;
+  return (first[0]! + last[0]!).toUpperCase();
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: Avatar Barrel Export
+ */
+
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarVariant } from './Avatar.types';

package/src/components/badge/Badge.styles.ts

@@ -0,0 +1,30 @@
+/**
+ * ANAN-UI — Component: Badge Styles
+ *
+ * Static styles created with StyleSheet.create. The chip surface and text
+ * colors are resolved from the theme at render time via Badge.variants.
+ */
+
+import { StyleSheet } from 'react-native';
+import { spacing } from '../../design-tokens';
+
+export const badgeStyles = StyleSheet.create({
+  root: {
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+  },
+  sm: {
+    paddingHorizontal: spacing[2],
+    paddingVertical: spacing[0],
+  },
+  default: {
+    paddingHorizontal: spacing[2],
+    paddingVertical: spacing[1],
+  },
+  lg: {
+    paddingHorizontal: spacing[3],
+    paddingVertical: spacing[1],
+  },
+});

package/src/components/badge/Badge.tsx

@@ -0,0 +1,47 @@
+/**
+ * ANAN-UI — Component: Badge
+ *
+ * A small status/label chip with variant/size support. The chip surface and
+ * text color are resolved from the active theme.
+ */
+
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getBadgeVariants } from './Badge.variants';
+import { badgeStyles } from './Badge.styles';
+import type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.types';
+
+export function Badge({
+  variant: variantProp,
+  size: sizeProp,
+  style,
+  textStyle,
+  ...rest
+}: BadgeProps) {
+  const { theme } = useTheme();
+  const { variant, fontSize, defaultVariant, defaultSize } = getBadgeVariants(theme);
+
+  const variantKey: BadgeVariant = variantProp ?? defaultVariant;
+  const sizeKey: BadgeSize = sizeProp ?? defaultSize;
+  const entry = variant[variantKey];
+
+  return (
+    <TextPrimitive
+      {...rest}
+      fontSize={fontSize[sizeKey]}
+      fontWeight="medium"
+      style={cn(
+        badgeStyles.root,
+        badgeStyles[sizeKey],
+        entry.container,
+        entry.text,
+        textStyle,
+      )}
+    >
+      {rest.children}
+    </TextPrimitive>
+  );
+}
+
+Badge.displayName = 'Badge';

package/src/components/badge/Badge.types.ts

@@ -0,0 +1,24 @@
+/**
+ * ANAN-UI — Component: Badge Types
+ *
+ * A small status/label chip.
+ */
+
+import type { TextProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type BadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'outline'
+  | 'destructive'
+  | 'success';
+
+export type BadgeSize = 'sm' | 'default' | 'lg';
+
+export interface BadgeProps extends Omit<TextProps, 'style'> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  style?: StyleProp<ViewStyle>;
+  /** Style applied to the inner text. */
+  textStyle?: StyleProp<TextStyle>;
+}

package/src/components/badge/Badge.variants.ts

@@ -0,0 +1,62 @@
+/**
+ * ANAN-UI — Component: Badge Variants
+ *
+ * Variant surface/text color pairs resolved against the active theme at
+ * render time. Existing semantic roles are reused: `accent` (green) for
+ * success — no hardcoded colors.
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+import type { BadgeVariant, BadgeSize } from './Badge.types';
+import type { FontSize } from '../../design-tokens/typography';
+
+export interface BadgeVariantEntry {
+  container: ViewStyle;
+  text: TextStyle;
+}
+
+export interface BadgeVariantConfig {
+  variant: Record<BadgeVariant, BadgeVariantEntry>;
+  fontSize: Record<BadgeSize, FontSize>;
+  defaultVariant: BadgeVariant;
+  defaultSize: BadgeSize;
+}
+
+export function getBadgeVariants(theme: Theme): BadgeVariantConfig {
+  return {
+    variant: {
+      default: {
+        container: { backgroundColor: theme.colors.primary },
+        text: { color: theme.colors.primaryForeground },
+      },
+      secondary: {
+        container: { backgroundColor: theme.colors.secondary },
+        text: { color: theme.colors.secondaryForeground },
+      },
+      outline: {
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        },
+        text: { color: theme.colors.foreground },
+      },
+      destructive: {
+        container: { backgroundColor: theme.colors.destructive },
+        text: { color: theme.colors.destructiveForeground },
+      },
+      success: {
+        container: { backgroundColor: theme.colors.accent },
+        text: { color: theme.colors.accentForeground },
+      },
+    },
+    fontSize: {
+      sm: 'xs',
+      default: 'sm',
+      lg: 'base',
+    },
+    defaultVariant: 'default',
+    defaultSize: 'default',
+  };
+}

package/src/components/badge/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: Badge Barrel Export
+ */
+
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.types';

package/src/components/button/Button.styles.ts

@@ -0,0 +1,16 @@
+/**
+ * ANAN-UI — Component: Button Styles
+ *
+ * Base styles created with StyleSheet.create. All theme-dependent values
+ * are resolved at render time in Button.tsx via the theme context.
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const buttonStyles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {},
+});

package/src/components/button/Button.tsx

@@ -0,0 +1,108 @@
+/**
+ * ANAN-UI — Component: Button
+ *
+ * A pressable button with variant/size support, disabled state, and full
+ * accessibility. Built on the Pressable primitive.
+ */
+
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { PressablePrimitive } from '../../primitives/Pressable';
+import { TextPrimitive } from '../../primitives/Text';
+import { getButtonVariants } from './Button.variants';
+import { buttonStyles } from './Button.styles';
+import type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
+
+export interface ButtonComponentProps extends ButtonProps {
+  children: React.ReactNode;
+}
+
+function resolveBgColor(
+  variant: ButtonVariant,
+): keyof import('../../theme/types').ThemeColors | undefined {
+  if (variant === 'default') return 'primary';
+  if (variant === 'destructive') return 'destructive';
+  if (variant === 'secondary') return 'secondary';
+  return undefined;
+}
+
+function resolveTextColor(
+  variant: ButtonVariant,
+  theme: ReturnType<typeof useTheme>['theme']['colors'],
+): string {
+  if (variant === 'default') return theme.primaryForeground;
+  if (variant === 'destructive') return theme.destructiveForeground;
+  if (variant === 'outline') return theme.primary;
+  if (variant === 'secondary') return theme.secondaryForeground;
+  if (variant === 'ghost') return theme.foreground;
+  if (variant === 'link') return theme.primary;
+  return theme.foreground;
+}
+
+function resolveTextSize(size: ButtonSize, theme: ReturnType<typeof useTheme>['theme']['typography']): number {
+  if (size === 'sm') return theme.fontSize.sm;
+  if (size === 'lg') return theme.fontSize.lg;
+  return theme.fontSize.base;
+}
+
+export function Button({
+  children,
+  variant: variantProp,
+  size: sizeProp,
+  disabled,
+  style,
+  onPress,
+  accessibilityLabel,
+  accessibilityRole = 'button',
+  accessibilityHint,
+  ...rest
+}: ButtonComponentProps) {
+  const theme = useTheme();
+
+  const { variants, defaultVariants } = getButtonVariants(theme.theme);
+  const variant = variantProp ?? defaultVariants.variant;
+  const size = sizeProp ?? defaultVariants.size;
+
+  const variantStyle = variants.variant[variant];
+  const sizeStyle = variants.size[size];
+
+  const bgColor = resolveBgColor(variant);
+  const textColor = resolveTextColor(variant, theme.theme.colors);
+  const textSize = resolveTextSize(size, theme.theme.typography);
+
+  return (
+    <PressablePrimitive
+      disabled={disabled}
+      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{ disabled }}
+      bg={bgColor}
+      style={cn(
+        buttonStyles.root,
+        variantStyle,
+        sizeStyle,
+        disabled ? { opacity: 0.5 } : {},
+        style,
+      )}
+      {...rest}
+    >
+      <TextPrimitive
+        style={cn(
+          buttonStyles.text,
+          { color: textColor },
+          { fontSize: textSize },
+          { fontWeight: theme.theme.typography.fontWeight.semibold },
+          disabled ? { opacity: 0.5 } : {},
+        )}
+      >
+        {children}
+      </TextPrimitive>
+    </PressablePrimitive>
+  );
+}
+
+Button.displayName = 'Button';
+
+export type { ButtonProps, ButtonVariant, ButtonSize };

package/src/components/button/Button.types.ts

@@ -0,0 +1,30 @@
+/**
+ * ANAN-UI — Component: Button Types
+ */
+
+import type { PressableProps } from 'react-native';
+
+export type ButtonVariant =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link';
+
+export type ButtonSize = 'sm' | 'default' | 'lg';
+
+export interface ButtonProps extends PressableProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+}
+
+export interface ButtonVariantConfig {
+  variants: {
+    variant: Record<ButtonVariant, import('react-native').ViewStyle>;
+    size: Record<ButtonSize, import('react-native').ViewStyle>;
+  };
+  defaultVariants: { variant: ButtonVariant; size: ButtonSize };
+}

package/src/components/button/Button.variants.ts

@@ -0,0 +1,68 @@
+/**
+ * ANAN-UI — Component: Button Variants
+ *
+ * Variant style definitions resolved against the active theme at render time.
+ * Each variant maps semantic theme colors to visual styles.
+ */
+
+import type { Theme } from '../../theme/types';
+import type { ButtonVariantConfig, ButtonVariant, ButtonSize } from './Button.types';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export function getButtonVariants(theme: Theme): ButtonVariantConfig {
+  const baseTextStyle: import('react-native').TextStyle = {
+    fontWeight: theme.typography.fontWeight.semibold,
+  };
+
+  return {
+    variants: {
+      variant: {
+        default: {
+          backgroundColor: theme.colors.primary,
+        },
+        destructive: {
+          backgroundColor: theme.colors.destructive,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: 'transparent',
+        },
+        secondary: {
+          backgroundColor: theme.colors.secondary,
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+        link: {
+          backgroundColor: 'transparent',
+          paddingHorizontal: 0,
+          paddingVertical: 0,
+        },
+      },
+      size: {
+        sm: {
+          paddingVertical: spacing[2],
+          paddingHorizontal: spacing[4],
+          minHeight: 32,
+          borderRadius: borderRadius.md,
+        },
+        default: {
+          paddingVertical: spacing[3],
+          paddingHorizontal: spacing[5],
+          minHeight: 40,
+          borderRadius: borderRadius.md,
+        },
+        lg: {
+          paddingVertical: spacing[4],
+          paddingHorizontal: spacing[6],
+          minHeight: 48,
+          borderRadius: borderRadius.lg,
+        },
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  };
+}
+
+export type { ButtonVariant, ButtonSize };

package/src/components/button/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: Button Barrel Export
+ */
+
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

package/src/components/card/Card.styles.ts

@@ -0,0 +1,28 @@
+/**
+ * ANAN-UI — Component: Card Styles
+ *
+ * Static styles created with StyleSheet.create. The card's surface
+ * (background/border/shadow) is resolved against the theme at render time.
+ */
+
+import { StyleSheet } from 'react-native';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export const cardStyles = StyleSheet.create({
+  root: {
+    borderRadius: borderRadius.lg,
+    padding: spacing[5],
+    gap: spacing[4],
+  },
+  header: {
+    gap: spacing[1],
+  },
+  content: {
+    gap: spacing[2],
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing[2],
+  },
+});

package/src/components/card/Card.tsx

@@ -0,0 +1,112 @@
+/**
+ * ANAN-UI — Component: Card
+ *
+ * A composable card container with header/title/description/content/footer
+ * sub-components, mirroring the shadcn/ui structure. The surface (background,
+ * border, shadow) is resolved against the active theme.
+ *
+ * All parts are exported individually so consumers can compose freely; the
+ * root `Card` applies the themed surface.
+ */
+
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getCardVariants } from './Card.variants';
+import { cardStyles } from './Card.styles';
+import type {
+  CardProps,
+  CardPartProps,
+  CardTextPartProps,
+  CardVariant,
+} from './Card.types';
+
+export function Card({
+  variant: variantProp,
+  style,
+  children,
+  ...rest
+}: CardProps) {
+  const { theme } = useTheme();
+  const { variant, defaultVariant } = getCardVariants(theme);
+  const variantKey: CardVariant = variantProp ?? defaultVariant;
+
+  return (
+    <View
+      accessibilityRole="summary"
+      {...rest}
+      style={cn(cardStyles.root, variant[variantKey], style)}
+    >
+      {children}
+    </View>
+  );
+}
+
+Card.displayName = 'Card';
+
+export function CardHeader({ style, children, ...rest }: CardPartProps) {
+  return (
+    <View {...rest} style={cn(cardStyles.header, style)}>
+      {children}
+    </View>
+  );
+}
+
+CardHeader.displayName = 'CardHeader';
+
+export function CardTitle({ style, children, ...rest }: CardTextPartProps) {
+  return (
+    <TextPrimitive
+      color="cardForeground"
+      fontSize="lg"
+      fontWeight="semibold"
+      accessibilityRole="header"
+      {...rest}
+      style={style}
+    >
+      {children}
+    </TextPrimitive>
+  );
+}
+
+CardTitle.displayName = 'CardTitle';
+
+export function CardDescription({
+  style,
+  children,
+  ...rest
+}: CardTextPartProps) {
+  return (
+    <TextPrimitive
+      color="mutedForeground"
+      fontSize="sm"
+      {...rest}
+      style={style}
+    >
+      {children}
+    </TextPrimitive>
+  );
+}
+
+CardDescription.displayName = 'CardDescription';
+
+export function CardContent({ style, children, ...rest }: CardPartProps) {
+  return (
+    <View {...rest} style={cn(cardStyles.content, style)}>
+      {children}
+    </View>
+  );
+}
+
+CardContent.displayName = 'CardContent';
+
+export function CardFooter({ style, children, ...rest }: CardPartProps) {
+  return (
+    <View {...rest} style={cn(cardStyles.footer, style)}>
+      {children}
+    </View>
+  );
+}
+
+CardFooter.displayName = 'CardFooter';

package/src/components/card/Card.types.ts

@@ -0,0 +1,26 @@
+/**
+ * ANAN-UI — Component: Card Types
+ *
+ * A composable card container with header/title/description/content/footer
+ * sub-components, mirroring the shadcn/ui structure.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { TextPrimitiveProps } from '../../primitives/Text';
+import type { ReactNode } from 'react';
+
+export type CardVariant = 'default' | 'outline' | 'ghost';
+
+export interface CardProps extends ViewProps {
+  variant?: CardVariant;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface CardPartProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+/** Props for text-based card parts (title / description). */
+export type CardTextPartProps = TextPrimitiveProps;

package/src/components/card/Card.variants.ts

@@ -0,0 +1,38 @@
+/**
+ * ANAN-UI — Component: Card Variants
+ *
+ * Variant surface styles resolved against the active theme at render time.
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+import type { CardVariant } from './Card.types';
+import { resolveShadow } from '../../design-tokens';
+
+export interface CardVariantConfig {
+  variant: Record<CardVariant, ViewStyle>;
+  defaultVariant: CardVariant;
+}
+
+export function getCardVariants(theme: Theme): CardVariantConfig {
+  return {
+    variant: {
+      default: {
+        backgroundColor: theme.colors.card,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        ...resolveShadow('sm'),
+      },
+      outline: {
+        backgroundColor: theme.colors.card,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+      },
+      ghost: {
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+      },
+    },
+    defaultVariant: 'default',
+  };
+}

package/src/components/card/index.ts

@@ -0,0 +1,18 @@
+/**
+ * ANAN-UI — Component: Card Barrel Export
+ */
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from './Card';
+export type {
+  CardProps,
+  CardPartProps,
+  CardTextPartProps,
+  CardVariant,
+} from './Card.types';