@rnative/ui 0.0.0-stage → 1.0.0

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,221 @@
+/**
+ * ANAN-UI — Component: Dialog
+ *
+ * A modal dialog with composable sub-components. Controlled via `open` /
+ * `onOpenChange`. Supports backdrop dismiss and Android hardware back.
+ *
+ * The content exposes `accessibilityViewIsModal` so screen readers trap
+ * focus within the dialog. The overlay is a semi-transparent backdrop that
+ * captures taps to dismiss when `dismissible` is true.
+ */
+
+import { createContext, useContext, useEffect } from 'react';
+import {
+  View,
+  Modal,
+  Pressable,
+  BackHandler,
+  StyleSheet,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getDialogVariants } from './Dialog.variants';
+import { dialogStyles } from './Dialog.styles';
+import type {
+  DialogProps,
+  DialogContentProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogCloseProps,
+} from './Dialog.types';
+
+interface DialogContextValue {
+  onClose: () => void;
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null);
+
+function useDialogContext(): DialogContextValue {
+  const ctx = useContext(DialogContext);
+  if (ctx === null) {
+    throw new Error('Dialog sub-components must be used within a <Dialog>');
+  }
+  return ctx;
+}
+
+export function Dialog({
+  open,
+  onOpenChange,
+  dismissible = true,
+  animationType = 'fade',
+  overlayColor,
+  overlayOpacity = 0.5,
+  style,
+  children,
+  ...rest
+}: DialogProps) {
+  const { theme } = useTheme();
+  const { content: contentVariant, overlay: overlayVariant } = getDialogVariants(theme);
+
+  // Android hardware back dismiss
+  useEffect(() => {
+    if (!open || !dismissible) return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      onOpenChange(false);
+      return true;
+    });
+    return () => sub.remove();
+  }, [open, dismissible, onOpenChange]);
+
+  if (!open) return null;
+
+  const backdropColor = overlayColor ?? `rgba(0, 0, 0, ${overlayOpacity})`;
+
+  const context = {
+    onClose: () => onOpenChange(false),
+  };
+
+  return (
+    <DialogContext.Provider value={context}>
+      <Modal
+        visible={open}
+        animationType={animationType}
+        transparent
+        onRequestClose={dismissible ? () => onOpenChange(false) : undefined}
+        supportedOrientations={[
+          'portrait',
+          'landscape-left',
+          'landscape-right',
+          'portrait-upside-down',
+        ]}
+      >
+        <View
+          accessibilityElementsHidden={!open}
+          importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
+          style={cn(dialogStyles.overlay, overlayVariant, { backgroundColor: backdropColor })}
+        >
+          <Pressable
+            onPress={dismissible ? () => onOpenChange(false) : undefined}
+            style={StyleSheet.absoluteFill}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          />
+
+          <View
+            accessibilityViewIsModal
+            {...rest}
+            style={cn(dialogStyles.content, contentVariant, style)}
+          >
+            {children}
+          </View>
+        </View>
+      </Modal>
+    </DialogContext.Provider>
+  );
+}
+
+Dialog.displayName = 'Dialog';
+
+export function DialogContent({
+  style,
+  children,
+  ...rest
+}: DialogContentProps) {
+  return (
+    <View {...rest} style={style}>
+      {children}
+    </View>
+  );
+}
+
+DialogContent.displayName = 'DialogContent';
+
+export function DialogTitle({
+  style,
+  children,
+  ...rest
+}: DialogTitleProps) {
+  return (
+    <TextPrimitive
+      color="foreground"
+      fontSize="lg"
+      fontWeight="semibold"
+      accessibilityRole="header"
+      {...rest}
+      style={style}
+    >
+      {children}
+    </TextPrimitive>
+  );
+}
+
+DialogTitle.displayName = 'DialogTitle';
+
+export function DialogDescription({
+  style,
+  children,
+  ...rest
+}: DialogDescriptionProps) {
+  return (
+    <TextPrimitive
+      color="mutedForeground"
+      fontSize="sm"
+      {...rest}
+      style={style}
+    >
+      {children}
+    </TextPrimitive>
+  );
+}
+
+DialogDescription.displayName = 'DialogDescription';
+
+export function DialogFooter({
+  style,
+  children,
+  ...rest
+}: DialogFooterProps) {
+  return (
+    <View {...rest} style={cn(dialogStyles.footer, style)}>
+      {children}
+    </View>
+  );
+}
+
+DialogFooter.displayName = 'DialogFooter';
+
+export function DialogClose({
+  label = 'Close',
+  style,
+  ...rest
+}: DialogCloseProps) {
+  const { theme } = useTheme();
+  const { onClose } = useDialogContext();
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={onClose}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      hitSlop={8}
+      style={cn(
+        dialogStyles.closeButton,
+        { backgroundColor: theme.colors.muted },
+        style,
+      )}
+    >
+      <TextPrimitive
+        color="mutedForeground"
+        fontSize="sm"
+        fontWeight="bold"
+      >
+        {'\u00D7'}
+      </TextPrimitive>
+    </Pressable>
+  );
+}
+
+DialogClose.displayName = 'DialogClose';

package/src/components/dialog/Dialog.types.ts

@@ -0,0 +1,55 @@
+/**
+ * ANAN-UI — Component: Dialog Types
+ *
+ * A modal dialog with composable sub-components (Title, Description, Footer,
+ * Close). Controlled via `open` / `onOpenChange`. Supports backdrop dismiss
+ * and Android hardware back.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type DialogAnimation = 'fade' | 'slide' | 'none';
+
+export interface DialogProps extends Omit<ViewProps, 'style' | 'onChange'> {
+  /** Controlled open state. */
+  open: boolean;
+  /** Called when the dialog should close. */
+  onOpenChange: (open: boolean) => void;
+  /** Allows closing via backdrop press or Android back. Defaults to `true`. */
+  dismissible?: boolean;
+  /** Animation type. Defaults to `fade`. */
+  animationType?: DialogAnimation;
+  /** Optional overlay color for the backdrop. */
+  overlayColor?: string;
+  /** Optional overlay opacity (0-1). Defaults to 0.5. */
+  overlayOpacity?: number;
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface DialogContentProps extends Omit<ViewProps, 'style'> {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface DialogTitleProps extends Omit<ViewProps, 'style'> {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface DialogDescriptionProps extends Omit<ViewProps, 'style'> {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface DialogFooterProps extends Omit<ViewProps, 'style'> {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+}
+
+export interface DialogCloseProps extends Omit<ViewProps, 'style'> {
+  /** Accessible label for the close button. Defaults to "Close". */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/dialog/Dialog.variants.ts

@@ -0,0 +1,24 @@
+/**
+ * ANAN-UI — Component: Dialog Variants
+ *
+ * Content surface style resolved against the active theme at render time.
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+
+export interface DialogVariantConfig {
+  content: ViewStyle;
+  overlay: ViewStyle;
+}
+
+export function getDialogVariants(theme: Theme): DialogVariantConfig {
+  return {
+    content: {
+      backgroundColor: theme.colors.card,
+    },
+    overlay: {
+      backgroundColor: theme.colors.background,
+    },
+  };
+}

package/src/components/dialog/index.ts

@@ -0,0 +1,20 @@
+/**
+ * ANAN-UI — Component: Dialog Barrel Export
+ */
+
+export {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from './Dialog';
+export type {
+  DialogProps,
+  DialogContentProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogCloseProps,
+} from './Dialog.types';

package/src/components/fab/FAB.styles.ts

@@ -0,0 +1,49 @@
+/**
+ * ANAN-UI — Component: FAB Styles
+ *
+ * Static styles created with StyleSheet.create. Positioning for fixed FABs
+ * and base sizing; colors/shadows are resolved from the theme at render time.
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const fabStyles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+  },
+  fixed: {
+    position: 'absolute',
+    right: 16,
+    bottom: 16,
+  },
+  topLeft: {
+    top: 16,
+    left: 16,
+  },
+  topRight: {
+    top: 16,
+    right: 16,
+  },
+  bottomLeft: {
+    bottom: 16,
+    left: 16,
+  },
+  bottomRight: {
+    bottom: 16,
+    right: 16,
+  },
+  sm: {
+    width: 40,
+    height: 40,
+  },
+  default: {
+    width: 56,
+    height: 56,
+  },
+  lg: {
+    width: 72,
+    height: 72,
+  },
+});

package/src/components/fab/FAB.tsx

@@ -0,0 +1,84 @@
+/**
+ * ANAN-UI — Component: FAB
+ *
+ * A floating action button with variant/size/position support. When `fixed`
+ * (default), it positions itself at a screen corner. Exposes
+ * `accessibilityRole="button"` with ≥48dp hit targets. Themed shadow
+ * elevates the FAB.
+ */
+
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { PressablePrimitive } from '../../primitives/Pressable';
+import { TextPrimitive } from '../../primitives/Text';
+import { getFABVariants, getFABShadow } from './FAB.variants';
+import { fabStyles } from './FAB.styles';
+import type { FABProps, FABVariant, FABSize, FABPosition } from './FAB.types';
+import type { FontSize } from '../../design-tokens/typography';
+
+function toStyleKey(position: FABPosition): 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' {
+  switch (position) {
+    case 'top-left':
+      return 'topLeft';
+    case 'top-right':
+      return 'topRight';
+    case 'bottom-left':
+      return 'bottomLeft';
+    case 'bottom-right':
+      return 'bottomRight';
+  }
+}
+
+const glyphSize: Record<FABSize, FontSize> = {
+  sm: 'base',
+  default: 'lg',
+  lg: 'xl',
+};
+
+export function FAB({
+  children = '+',
+  variant: variantProp,
+  size: sizeProp,
+  position = 'bottom-right',
+  disabled = false,
+  fixed = true,
+  style,
+  ...rest
+}: FABProps) {
+  const { theme } = useTheme();
+  const { variant, defaultVariant, defaultSize } = getFABVariants(theme);
+  const variantKey: FABVariant = variantProp ?? defaultVariant;
+  const sizeKey: FABSize = sizeProp ?? defaultSize;
+
+  const entry = variant[variantKey];
+  const positionStyle = fixed ? fabStyles[toStyleKey(position)] : undefined;
+
+  return (
+    <PressablePrimitive
+      {...rest}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      style={cn(
+        fabStyles.root,
+        fabStyles[sizeKey],
+        entry.container,
+        getFABShadow(),
+        positionStyle,
+        disabled && { opacity: 0.5 },
+        style,
+      )}
+      hitSlop={12}
+    >
+      <TextPrimitive
+        color={entry.textColor}
+        fontSize={glyphSize[sizeKey]}
+        fontWeight="bold"
+      >
+        {children}
+      </TextPrimitive>
+    </PressablePrimitive>
+  );
+}
+
+FAB.displayName = 'FAB';

package/src/components/fab/FAB.types.ts

@@ -0,0 +1,31 @@
+/**
+ * ANAN-UI — Component: FAB Types
+ *
+ * A floating action button with variant/size/position support.
+ */
+
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type FABVariant = 'default' | 'secondary' | 'outline' | 'destructive';
+
+export type FABSize = 'sm' | 'default' | 'lg';
+
+export type FABPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export interface FABProps extends Omit<PressableProps, 'style'> {
+  /** FAB content (icon or text). Defaults to "+". */
+  children?: ReactNode;
+  variant?: FABVariant;
+  size?: FABSize;
+  /** Position when used as a fixed overlay. Defaults to `bottom-right`. */
+  position?: FABPosition;
+  disabled?: boolean;
+  /** Whether the FAB is fixed to the screen edges. Defaults to `true`. */
+  fixed?: boolean;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/fab/FAB.variants.ts

@@ -0,0 +1,55 @@
+/**
+ * ANAN-UI — Component: FAB Variants
+ *
+ * Variant surface colors and text color roles resolved against the active
+ * theme at render time, plus the themed elevation shadow.
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Theme, ThemeColors } from '../../theme/types';
+import type { FABVariant, FABSize } from './FAB.types';
+import { resolveShadow } from '../../design-tokens';
+
+export interface FABVariantEntry {
+  container: ViewStyle;
+  textColor: keyof ThemeColors;
+}
+
+export interface FABVariantConfig {
+  variant: Record<FABVariant, FABVariantEntry>;
+  defaultVariant: FABVariant;
+  defaultSize: FABSize;
+}
+
+export function getFABVariants(theme: Theme): FABVariantConfig {
+  return {
+    variant: {
+      default: {
+        container: { backgroundColor: theme.colors.primary },
+        textColor: 'primaryForeground',
+      },
+      secondary: {
+        container: { backgroundColor: theme.colors.secondary },
+        textColor: 'secondaryForeground',
+      },
+      outline: {
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: theme.colors.primary,
+        },
+        textColor: 'primary',
+      },
+      destructive: {
+        container: { backgroundColor: theme.colors.destructive },
+        textColor: 'destructiveForeground',
+      },
+    },
+    defaultVariant: 'default',
+    defaultSize: 'default',
+  };
+}
+
+export function getFABShadow() {
+  return resolveShadow('md');
+}

package/src/components/fab/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: FAB Barrel Export
+ */
+
+export { FAB } from './FAB';
+export type { FABProps, FABVariant, FABSize, FABPosition } from './FAB.types';

package/src/components/index.ts

@@ -0,0 +1,88 @@
+/**
+ * ANAN-UI — Components: Barrel Export
+ */
+
+export { Button } from './button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './button/Button.types';
+
+export { Text } from './text';
+export type { TextProps, TextVariant } from './text/Text.types';
+
+export { Input } from './input';
+export type { InputProps, InputVariant, InputSize } from './input/Input.types';
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from './card';
+export type {
+  CardProps,
+  CardPartProps,
+  CardTextPartProps,
+  CardVariant,
+} from './card/Card.types';
+
+export { Separator } from './separator';
+export type {
+  SeparatorProps,
+  SeparatorOrientation,
+  SeparatorVariant,
+} from './separator/Separator.types';
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './accordion';
+export type {
+  AccordionProps,
+  AccordionType,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from './accordion/Accordion.types';
+
+export { Alert } from './alert';
+export type { AlertProps, AlertVariant } from './alert/Alert.types';
+
+export { Avatar } from './avatar';
+export type { AvatarProps, AvatarSize, AvatarVariant } from './avatar/Avatar.types';
+
+export { Badge } from './badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './badge/Badge.types';
+
+export { CheckBox } from './checkbox';
+export type { CheckBoxProps, CheckBoxSize } from './checkbox/CheckBox.types';
+
+export { ComboBox } from './combobox';
+export type {
+  ComboBoxProps,
+  ComboBoxVariant,
+  ComboBoxSize,
+  ComboBoxOption,
+} from './combobox/ComboBox.types';
+
+export {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from './dialog';
+export type {
+  DialogProps,
+  DialogContentProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogCloseProps,
+} from './dialog/Dialog.types';
+
+export { FAB } from './fab';
+export type { FABProps, FABVariant, FABSize, FABPosition } from './fab/FAB.types';

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

@@ -0,0 +1,23 @@
+/**
+ * ANAN-UI — Component: Input Styles
+ *
+ * Static styles created with StyleSheet.create. Theme-dependent values
+ * (colors, focus/error borders) are resolved at render time in Input.tsx.
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const inputStyles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  field: {
+    width: '100%',
+  },
+  label: {
+    marginBottom: 4,
+  },
+  message: {
+    marginTop: 4,
+  },
+});