@rnative/ui 0.0.0-stage → 1.0.0

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,247 @@
+/**
+ * ANAN-UI — Component: Accordion
+ *
+ * A compound disclosure component: Accordion → AccordionItem →
+ * AccordionTrigger / AccordionContent. Expansion state is managed through an
+ * internal context, supporting single/multiple expansion with controlled and
+ * uncontrolled usage.
+ *
+ * Collapsed content is unmounted (React Native has no built-in height
+ * animation). The trigger exposes `accessibilityRole="button"` and
+ * `accessibilityState={{ expanded, disabled }}` so screen readers announce
+ * the disclosure state.
+ */
+
+import { createContext, useContext, useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { PressablePrimitive } from '../../primitives/Pressable';
+import { TextPrimitive } from '../../primitives/Text';
+import { accordionStyles } from './Accordion.styles';
+import type {
+  AccordionProps,
+  AccordionType,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from './Accordion.types';
+
+interface AccordionContextValue {
+  type: AccordionType;
+  collapsible: boolean;
+  expandedValues: string[];
+  toggle: (value: string) => void;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext(component: string): AccordionContextValue {
+  const ctx = useContext(AccordionContext);
+  if (ctx === null) {
+    throw new Error(`${component} must be used within an <Accordion>`);
+  }
+  return ctx;
+}
+
+interface ItemContextValue {
+  value: string;
+  expanded: boolean;
+  disabled: boolean;
+}
+
+const ItemContext = createContext<ItemContextValue | null>(null);
+
+function useItemContext(component: string): ItemContextValue {
+  const ctx = useContext(ItemContext);
+  if (ctx === null) {
+    throw new Error(`${component} must be used within an <AccordionItem>`);
+  }
+  return ctx;
+}
+
+function normalizeSingle(value: string | undefined): string[] {
+  if (value === undefined) return [];
+  return [value];
+}
+
+function normalizeMultiple(value: string[] | undefined): string[] {
+  if (value === undefined) return [];
+  return value;
+}
+
+export function Accordion({
+  type = 'single',
+  collapsible = false,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  style,
+  children,
+  ...rest
+}: AccordionProps) {
+  const isControlled = valueProp !== undefined;
+  const [internal, setInternal] = useState<string[]>(() => {
+    if (type === 'single') return normalizeSingle(defaultValue as string | undefined);
+    return normalizeMultiple(defaultValue as string[] | undefined);
+  });
+
+  const expandedValues = isControlled
+    ? type === 'single'
+      ? normalizeSingle(valueProp as string | undefined)
+      : normalizeMultiple(valueProp as string[] | undefined)
+    : internal;
+
+  const notifyChange = useCallback(
+    (next: string[]) => {
+      if (onValueChange === undefined) return;
+      if (type === 'single') {
+        (onValueChange as (value: string | undefined) => void)(next[0]);
+      } else {
+        (onValueChange as (value: string[]) => void)(next);
+      }
+    },
+    [onValueChange, type],
+  );
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      const isOpen = expandedValues.includes(itemValue);
+      let next: string[];
+
+      if (isOpen) {
+        // In single mode an item can only collapse if `collapsible` allows it.
+        if (type === 'single' && !collapsible) return;
+        next = expandedValues.filter((v) => v !== itemValue);
+      } else {
+        next = type === 'single' ? [itemValue] : [...expandedValues, itemValue];
+      }
+
+      if (!isControlled) setInternal(next);
+      notifyChange(next);
+    },
+    [collapsible, expandedValues, isControlled, notifyChange, type],
+  );
+
+  const context = useMemo<AccordionContextValue>(
+    () => ({ type, collapsible, expandedValues, toggle }),
+    [collapsible, expandedValues, toggle, type],
+  );
+
+  return (
+    <AccordionContext.Provider value={context}>
+      <View {...rest} style={cn(accordionStyles.root, style)}>
+        {children}
+      </View>
+    </AccordionContext.Provider>
+  );
+}
+
+Accordion.displayName = 'Accordion';
+
+export function AccordionItem({
+  value,
+  disabled = false,
+  style,
+  children,
+  ...rest
+}: AccordionItemProps) {
+  const { theme } = useTheme();
+  const { expandedValues } = useAccordionContext('AccordionItem');
+
+  const expanded = expandedValues.includes(value);
+
+  const itemContext = useMemo<ItemContextValue>(
+    () => ({ value, expanded, disabled }),
+    [disabled, expanded, value],
+  );
+
+  return (
+    <ItemContext.Provider value={itemContext}>
+      <View
+        {...rest}
+        style={cn(
+          accordionStyles.item,
+          { borderBottomColor: theme.colors.border },
+          style,
+        )}
+      >
+        {children}
+      </View>
+    </ItemContext.Provider>
+  );
+}
+
+AccordionItem.displayName = 'AccordionItem';
+
+export function AccordionTrigger({
+  style,
+  children,
+  ...rest
+}: AccordionTriggerProps) {
+  const { theme } = useTheme();
+  const { toggle } = useAccordionContext('AccordionTrigger');
+  const { value, expanded, disabled } = useItemContext('AccordionTrigger');
+
+  return (
+    <PressablePrimitive
+      {...rest}
+      disabled={disabled}
+      onPress={() => toggle(value)}
+      accessibilityRole="button"
+      accessibilityState={{ expanded, disabled }}
+      style={cn(
+        accordionStyles.trigger,
+        { opacity: disabled ? 0.5 : 1 },
+        style,
+      )}
+    >
+      <TextPrimitive
+        color="foreground"
+        fontSize="base"
+        fontWeight="medium"
+        style={accordionStyles.triggerLabel}
+      >
+        {children}
+      </TextPrimitive>
+      <View
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        style={cn(
+          accordionStyles.chevron,
+          expanded
+            ? accordionStyles.chevronExpanded
+            : accordionStyles.chevronCollapsed,
+          { borderColor: theme.colors.mutedForeground },
+        )}
+      />
+    </PressablePrimitive>
+  );
+}
+
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export function AccordionContent({
+  style,
+  children,
+  ...rest
+}: AccordionContentProps) {
+  const { expanded } = useItemContext('AccordionContent');
+
+  // Collapse unmounts the content (no built-in height animation in RN).
+  if (!expanded) return null;
+
+  return (
+    <View {...rest} style={cn(accordionStyles.content, style)}>
+      {typeof children === 'string' ? (
+        <TextPrimitive color="mutedForeground" fontSize="sm">
+          {children}
+        </TextPrimitive>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+AccordionContent.displayName = 'AccordionContent';

package/src/components/accordion/Accordion.types.ts

@@ -0,0 +1,52 @@
+/**
+ * ANAN-UI — Component: Accordion Types
+ *
+ * Compound accordion: Accordion → AccordionItem → AccordionTrigger / Content.
+ * Supports single/multiple expansion with controlled and uncontrolled state.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type AccordionType = 'single' | 'multiple';
+
+interface AccordionBaseProps extends Omit<ViewProps, 'style'> {
+  /** Allow collapsing the open item in `single` mode. Defaults to `false`. */
+  collapsible?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export type AccordionProps =
+  | (AccordionBaseProps & {
+      type?: 'single';
+      /** Controlled open value (undefined = closed). */
+      value?: string;
+      defaultValue?: string;
+      onValueChange?: (value: string | undefined) => void;
+    })
+  | (AccordionBaseProps & {
+      type: 'multiple';
+      /** Controlled open values. */
+      value?: string[];
+      defaultValue?: string[];
+      onValueChange?: (value: string[]) => void;
+    });
+
+export interface AccordionItemProps extends Omit<ViewProps, 'style'> {
+  /** Unique identifier for this item. */
+  value: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface AccordionTriggerProps extends Omit<ViewProps, 'style'> {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface AccordionContentProps extends Omit<ViewProps, 'style'> {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,17 @@
+/**
+ * ANAN-UI — Component: Accordion Barrel Export
+ */
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './Accordion';
+export type {
+  AccordionProps,
+  AccordionType,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from './Accordion.types';

package/src/components/alert/Alert.styles.ts

@@ -0,0 +1,34 @@
+/**
+ * ANAN-UI — Component: Alert Styles
+ *
+ * Static styles created with StyleSheet.create. The surface and title colors
+ * are resolved from the theme at render time via Alert.variants.
+ */
+
+import { StyleSheet } from 'react-native';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export const alertStyles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    gap: spacing[3],
+    padding: spacing[4],
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+  },
+  body: {
+    flex: 1,
+    gap: spacing[1],
+  },
+  dismiss: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: borderRadius.full,
+  },
+  dismissGlyph: {
+    fontSize: 16,
+    lineHeight: 18,
+  },
+});

package/src/components/alert/Alert.tsx

@@ -0,0 +1,87 @@
+/**
+ * ANAN-UI — Component: Alert
+ *
+ * A themed banner conveying important information. Supports an optional title,
+ * description content, a dismiss button, and semantic variants
+ * (default / destructive / success / info).
+ *
+ * Exposes `accessibilityRole="alert"` with a polite live region so screen
+ * readers announce the content when it appears.
+ */
+
+import { View, Pressable } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getAlertVariants, getAlertDescriptionColor } from './Alert.variants';
+import { alertStyles } from './Alert.styles';
+import type { AlertProps, AlertVariant } from './Alert.types';
+
+export function Alert({
+  title,
+  variant: variantProp,
+  onDismiss,
+  dismissLabel = 'Dismiss',
+  style,
+  children,
+  ...rest
+}: AlertProps) {
+  const { theme } = useTheme();
+  const { container, title: titleColors, defaultVariant } = getAlertVariants(theme);
+  const variant: AlertVariant = variantProp ?? defaultVariant;
+
+  return (
+    <View
+      {...rest}
+      style={cn(alertStyles.root, container[variant], style)}
+    >
+      <View
+        accessible
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+        style={alertStyles.body}
+      >
+        {title !== undefined && (
+          <TextPrimitive
+            fontSize="base"
+            fontWeight="semibold"
+            style={titleColors[variant]}
+          >
+            {title}
+          </TextPrimitive>
+        )}
+
+        {typeof children === 'string' ? (
+          <TextPrimitive
+            fontSize="sm"
+            style={{ color: theme.colors[getAlertDescriptionColor(variant)] }}
+          >
+            {children}
+          </TextPrimitive>
+        ) : (
+          children
+        )}
+      </View>
+
+      {onDismiss !== undefined && (
+        <Pressable
+          onPress={onDismiss}
+          accessibilityRole="button"
+          accessibilityLabel={dismissLabel}
+          hitSlop={8}
+          style={cn(alertStyles.dismiss, { opacity: 0.8 })}
+        >
+          <TextPrimitive
+            fontSize="sm"
+            fontWeight="bold"
+            style={{ color: theme.colors[getAlertDescriptionColor(variant)] }}
+          >
+            {'\u00D7'}
+          </TextPrimitive>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+Alert.displayName = 'Alert';

package/src/components/alert/Alert.types.ts

@@ -0,0 +1,24 @@
+/**
+ * ANAN-UI — Component: Alert Types
+ *
+ * A themed banner conveying important information, with optional title,
+ * dismiss button, and semantic variants.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type AlertVariant = 'default' | 'destructive' | 'success' | 'info';
+
+export interface AlertProps extends Omit<ViewProps, 'style'> {
+  /** Optional heading rendered above the description. */
+  title?: string;
+  /** Semantic variant; drives the surface and title color. */
+  variant?: AlertVariant;
+  /** Renders a close button and is called when it is pressed. */
+  onDismiss?: () => void;
+  /** Accessible label for the close button. Defaults to "Dismiss". */
+  dismissLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}

package/src/components/alert/Alert.variants.ts

@@ -0,0 +1,57 @@
+/**
+ * ANAN-UI — Component: Alert Variants
+ *
+ * Variant surface styles resolved against the active theme at render time.
+ * Existing semantic roles are reused: `accent` (green) for success and
+ * `primary` for info — no hardcoded colors.
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme, ThemeColors } from '../../theme/types';
+import type { AlertVariant } from './Alert.types';
+
+export interface AlertVariantConfig {
+  container: Record<AlertVariant, ViewStyle>;
+  title: Record<AlertVariant, TextStyle>;
+  defaultVariant: AlertVariant;
+}
+
+export function getAlertVariants(theme: Theme): AlertVariantConfig {
+  return {
+    container: {
+      default: {
+        backgroundColor: theme.colors.card,
+        borderColor: theme.colors.border,
+      },
+      destructive: {
+        backgroundColor: theme.colors.destructive,
+        borderColor: 'transparent',
+      },
+      success: {
+        backgroundColor: theme.colors.accent,
+        borderColor: 'transparent',
+      },
+      info: {
+        backgroundColor: theme.colors.primary,
+        borderColor: 'transparent',
+      },
+    },
+    title: {
+      default: { color: theme.colors.foreground },
+      destructive: { color: theme.colors.destructiveForeground },
+      success: { color: theme.colors.accentForeground },
+      info: { color: theme.colors.primaryForeground },
+    },
+    defaultVariant: 'default',
+  };
+}
+
+/** Foreground color role for the description text of each variant. */
+export function getAlertDescriptionColor(
+  variant: AlertVariant,
+): keyof ThemeColors {
+  if (variant === 'destructive') return 'destructiveForeground';
+  if (variant === 'success') return 'accentForeground';
+  if (variant === 'info') return 'primaryForeground';
+  return 'mutedForeground';
+}

package/src/components/alert/index.ts

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

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

@@ -0,0 +1,20 @@
+/**
+ * ANAN-UI — Component: Avatar Styles
+ *
+ * Static styles created with StyleSheet.create. Sizes, radii, and colors are
+ * resolved from the theme/tokens at render time via Avatar.variants.
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const avatarStyles = StyleSheet.create({
+  root: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,74 @@
+/**
+ * ANAN-UI — Component: Avatar
+ *
+ * Displays an image with an initials fallback. The fallback is used when no
+ * `src` is provided or when the image fails to load. Exposes
+ * `accessibilityRole="image"` with a label from `alt` (falling back to `name`).
+ */
+
+import { useState, useCallback } from 'react';
+import { View, Image } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getAvatarVariants, getInitials } from './Avatar.variants';
+import { avatarStyles } from './Avatar.styles';
+import type { AvatarProps, AvatarSize, AvatarVariant } from './Avatar.types';
+
+export function Avatar({
+  src,
+  alt,
+  name,
+  size: sizeProp,
+  variant: variantProp,
+  style,
+  ...rest
+}: AvatarProps) {
+  const { theme } = useTheme();
+  const [failed, setFailed] = useState(false);
+
+  const { size, textSize, variant, defaultSize, defaultVariant } =
+    getAvatarVariants(theme);
+  const sizeKey: AvatarSize = sizeProp ?? defaultSize;
+  const variantKey: AvatarVariant = variantProp ?? defaultVariant;
+
+  const handleError = useCallback(() => setFailed(true), []);
+
+  const label = alt ?? name;
+  const showImage = src !== undefined && !failed;
+
+  return (
+    <View
+      accessible
+      accessibilityRole="image"
+      accessibilityLabel={label}
+      {...rest}
+      style={cn(
+        avatarStyles.root,
+        size[sizeKey],
+        variant[variantKey],
+        { backgroundColor: theme.colors.muted },
+        style,
+      )}
+    >
+      {showImage ? (
+        <Image
+          source={{ uri: src }}
+          accessibilityIgnoresInvertColors
+          onError={handleError}
+          style={avatarStyles.image}
+        />
+      ) : (
+        <TextPrimitive
+          color="mutedForeground"
+          fontWeight="semibold"
+          style={textSize[sizeKey]}
+        >
+          {name !== undefined ? getInitials(name) : ''}
+        </TextPrimitive>
+      )}
+    </View>
+  );
+}
+
+Avatar.displayName = 'Avatar';

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

@@ -0,0 +1,24 @@
+/**
+ * ANAN-UI — Component: Avatar Types
+ *
+ * Displays an image with an initials fallback derived from `name`, or the
+ * initials background when no image is given.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+
+export type AvatarSize = 'sm' | 'default' | 'lg' | 'xl';
+
+export type AvatarVariant = 'circle' | 'rounded';
+
+export interface AvatarProps extends Omit<ViewProps, 'style'> {
+  /** Image URI. Falls back to initials on load error or when omitted. */
+  src?: string;
+  /** Accessible description of the image. Falls back to `name`. */
+  alt?: string;
+  /** Full name used to derive the initials fallback (up to 2 letters). */
+  name?: string;
+  size?: AvatarSize;
+  variant?: AvatarVariant;
+  style?: StyleProp<ViewStyle>;
+}