@rnative/ui 0.0.0-stage → 1.0.0

package/src/components/checkbox/CheckBox.styles.ts

@@ -0,0 +1,30 @@
+/**
+ * ANAN-UI — Component: CheckBox Styles
+ *
+ * Static styles created with StyleSheet.create. Box size, border, and check
+ * mark color are resolved from the theme at render time via CheckBox.variants.
+ */
+
+import { StyleSheet } from 'react-native';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export const checkBoxStyles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing[2],
+  },
+  box: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderRadius: borderRadius.sm,
+  },
+  check: {
+    fontSize: 14,
+    lineHeight: 16,
+  },
+  label: {
+    flex: 1,
+  },
+});

package/src/components/checkbox/CheckBox.tsx

@@ -0,0 +1,98 @@
+/**
+ * ANAN-UI — Component: CheckBox
+ *
+ * A checkbox with controlled/uncontrolled state, optional label, and full
+ * accessibility. The whole row is the pressable touch target (≥44dp via
+ * `hitSlop`) and exposes `accessibilityRole="checkbox"` with
+ * `accessibilityState={{ checked, disabled }}`.
+ */
+
+import { useState, useCallback } from 'react';
+import { Pressable, View } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getCheckBoxVariants } from './CheckBox.variants';
+import { checkBoxStyles } from './CheckBox.styles';
+import type { CheckBoxProps, CheckBoxSize } from './CheckBox.types';
+
+export function CheckBox({
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  size: sizeProp,
+  style,
+  labelStyle,
+  ...rest
+}: CheckBoxProps) {
+  const { theme } = useTheme();
+  const isControlled = checkedProp !== undefined;
+
+  const [internal, setInternal] = useState(defaultChecked);
+  const checked = isControlled ? checkedProp : internal;
+
+  const { size, defaultSize } = getCheckBoxVariants(theme);
+  const sizeKey: CheckBoxSize = sizeProp ?? defaultSize;
+
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    const next = !checked;
+    if (!isControlled) setInternal(next);
+    onCheckedChange?.(next);
+  }, [checked, disabled, isControlled, onCheckedChange]);
+
+  const borderColor = checked ? theme.colors.primary : theme.colors.border;
+  const bgColor = checked ? theme.colors.primary : 'transparent';
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+      accessibilityLabel={label}
+      hitSlop={12}
+      style={cn(
+        checkBoxStyles.root,
+        disabled && { opacity: 0.5 },
+        style,
+      )}
+    >
+      <View
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        style={cn(
+          checkBoxStyles.box,
+          size[sizeKey],
+          { borderColor, backgroundColor: bgColor },
+        )}
+      >
+        {checked && (
+          <TextPrimitive
+            color="primaryForeground"
+            fontSize={sizeKey === 'sm' ? 'xs' : 'sm'}
+            fontWeight="bold"
+            style={checkBoxStyles.check}
+          >
+            {'\u2713'}
+          </TextPrimitive>
+        )}
+      </View>
+
+      {label !== undefined && (
+        <TextPrimitive
+          color={disabled ? 'mutedForeground' : 'foreground'}
+          fontSize="base"
+          style={cn(checkBoxStyles.label, labelStyle)}
+        >
+          {label}
+        </TextPrimitive>
+      )}
+    </Pressable>
+  );
+}
+
+CheckBox.displayName = 'CheckBox';

package/src/components/checkbox/CheckBox.types.ts

@@ -0,0 +1,26 @@
+/**
+ * ANAN-UI — Component: CheckBox Types
+ *
+ * A checkbox input with controlled/uncontrolled state, label support, and
+ * full accessibility.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type CheckBoxSize = 'sm' | 'default' | 'lg';
+
+export interface CheckBoxProps extends Omit<ViewProps, 'style' | 'onChange'> {
+  /** Controlled checked state. */
+  checked?: boolean;
+  /** Uncontrolled default checked state. */
+  defaultChecked?: boolean;
+  /** Called when the checked state changes. */
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Optional label rendered after the checkbox. */
+  label?: string;
+  size?: CheckBoxSize;
+  style?: StyleProp<ViewStyle>;
+  /** Style applied to the label text. */
+  labelStyle?: StyleProp<TextStyle>;
+}

package/src/components/checkbox/CheckBox.variants.ts

@@ -0,0 +1,25 @@
+/**
+ * ANAN-UI — Component: CheckBox Variants
+ *
+ * Size style definitions resolved against the active theme at render time.
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+import type { CheckBoxSize } from './CheckBox.types';
+
+export interface CheckBoxVariantConfig {
+  size: Record<CheckBoxSize, ViewStyle>;
+  defaultSize: CheckBoxSize;
+}
+
+export function getCheckBoxVariants(theme: Theme): CheckBoxVariantConfig {
+  return {
+    size: {
+      sm: { width: 18, height: 18 },
+      default: { width: 22, height: 22 },
+      lg: { width: 28, height: 28 },
+    },
+    defaultSize: 'default',
+  };
+}

package/src/components/checkbox/index.ts

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

package/src/components/combobox/ComboBox.styles.ts

@@ -0,0 +1,55 @@
+/**
+ * ANAN-UI — Component: ComboBox Styles
+ *
+ * Static styles created with StyleSheet.create. The trigger field and
+ * dropdown colors are resolved from the theme at render time.
+ */
+
+import { StyleSheet } from 'react-native';
+import { spacing, borderRadius, resolveShadow } from '../../design-tokens';
+
+export const comboBoxStyles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  fieldContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing[2],
+    width: '100%',
+  },
+  fieldText: {
+    flex: 1,
+  },
+  label: {
+    marginBottom: spacing[1],
+  },
+  message: {
+    marginTop: spacing[1],
+  },
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    padding: spacing[4],
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+  dropdown: {
+    width: '100%',
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+    overflow: 'hidden',
+    ...resolveShadow('md'),
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing[4],
+    paddingVertical: spacing[3],
+    minHeight: 44,
+  },
+  optionText: {
+    flex: 1,
+  },
+});

package/src/components/combobox/ComboBox.tsx

@@ -0,0 +1,224 @@
+/**
+ * ANAN-UI — Component: ComboBox
+ *
+ * A combobox (select) with a dropdown presented in a Modal. The trigger field
+ * mirrors Input's variant/size/error API. Options are shown in a modal card
+ * anchored to the bottom of the screen (reliable across platforms without
+ * measuring the trigger). The trigger exposes `accessibilityRole="combobox"`
+ * with `accessibilityState={{ expanded, disabled }}`; options are `menuitem`s
+ * with a `selected` state.
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { View, Modal, Pressable, BackHandler } from 'react-native';
+import { useTheme } from '../../theme';
+import { cn } from '../../utils/cn';
+import { TextPrimitive } from '../../primitives/Text';
+import { getComboBoxVariants } from './ComboBox.variants';
+import { comboBoxStyles } from './ComboBox.styles';
+import type {
+  ComboBoxProps,
+  ComboBoxVariant,
+  ComboBoxSize,
+  ComboBoxOption,
+} from './ComboBox.types';
+
+export function ComboBox({
+  options,
+  placeholder = 'Select',
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  error,
+  label,
+  hint,
+  variant: variantProp,
+  size: sizeProp,
+  disabled = false,
+  style,
+  fieldStyle,
+  dropdownStyle,
+  optionStyle,
+  ...rest
+}: ComboBoxProps) {
+  const { theme } = useTheme();
+  const isControlled = valueProp !== undefined;
+  const [internal, setInternal] = useState(defaultValue ?? '');
+  const value = isControlled ? valueProp ?? '' : internal;
+  const [open, setOpen] = useState(false);
+
+  const { variant, size, textSize, defaultVariant, defaultSize } =
+    getComboBoxVariants(theme);
+  const variantKey: ComboBoxVariant = variantProp ?? defaultVariant;
+  const sizeKey: ComboBoxSize = sizeProp ?? defaultSize;
+
+  const hasError = error !== undefined && error.length > 0;
+  const message = hasError ? error : hint;
+
+  // Close on Android hardware back.
+  useEffect(() => {
+    if (!open) return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      setOpen(false);
+      return true;
+    });
+    return () => sub.remove();
+  }, [open]);
+
+  const selectedOption = options.find((o) => o.value === value);
+  const displayText = selectedOption?.label ?? placeholder;
+  const isPlaceholder = selectedOption === undefined;
+
+  const handleOpen = useCallback(() => {
+    if (!disabled) setOpen(true);
+  }, [disabled]);
+
+  const handleClose = useCallback(() => setOpen(false), []);
+
+  const handleSelect = useCallback(
+    (opt: ComboBoxOption) => {
+      if (opt.disabled) return;
+      if (!isControlled) setInternal(opt.value);
+      onValueChange?.(opt.value);
+      setOpen(false);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const baseBorder = variant[variantKey].container.borderColor ?? 'transparent';
+  const borderColor = hasError
+    ? theme.colors.destructive
+    : open
+      ? theme.colors.ring
+      : baseBorder;
+
+  return (
+    <View {...rest} style={cn(comboBoxStyles.container, style)}>
+      {label !== undefined && (
+        <TextPrimitive
+          color={disabled ? 'mutedForeground' : 'foreground'}
+          fontSize="sm"
+          fontWeight="medium"
+          style={comboBoxStyles.label}
+        >
+          {label}
+        </TextPrimitive>
+      )}
+
+      <Pressable
+        onPress={handleOpen}
+        disabled={disabled}
+        accessibilityRole="combobox"
+        accessibilityState={{ expanded: open, disabled }}
+        accessibilityLabel={label ?? placeholder}
+        style={cn(
+          comboBoxStyles.fieldContainer,
+          variant[variantKey].container,
+          size[sizeKey],
+          { borderColor },
+          disabled && { opacity: 0.5 },
+          fieldStyle,
+        )}
+      >
+        <TextPrimitive
+          color={isPlaceholder ? 'mutedForeground' : 'foreground'}
+          numberOfLines={1}
+          style={cn(comboBoxStyles.fieldText, textSize[sizeKey])}
+        >
+          {displayText}
+        </TextPrimitive>
+
+        <TextPrimitive
+          color="mutedForeground"
+          fontSize={sizeKey === 'sm' ? 'xs' : sizeKey === 'lg' ? 'lg' : 'base'}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          {'\u25BC'}
+        </TextPrimitive>
+      </Pressable>
+
+      {message !== undefined && (
+        <TextPrimitive
+          color={hasError ? 'destructive' : 'mutedForeground'}
+          fontSize="sm"
+          style={comboBoxStyles.message}
+          accessibilityRole={hasError ? 'alert' : 'text'}
+        >
+          {message}
+        </TextPrimitive>
+      )}
+
+      <Modal
+        visible={open}
+        animationType="fade"
+        transparent
+        onRequestClose={handleClose}
+        supportedOrientations={[
+          'portrait',
+          'landscape-left',
+          'landscape-right',
+          'portrait-upside-down',
+        ]}
+      >
+        <Pressable
+          style={comboBoxStyles.backdrop}
+          onPress={handleClose}
+          accessibilityLabel="Close options"
+          accessibilityRole="button"
+        >
+          <View
+            style={cn(
+              comboBoxStyles.dropdown,
+              {
+                backgroundColor: theme.colors.card,
+                borderColor: theme.colors.border,
+              },
+              dropdownStyle,
+            )}
+          >
+            {options.map((opt) => {
+              const selected = opt.value === value;
+              return (
+                <Pressable
+                  key={opt.value}
+                  onPress={() => handleSelect(opt)}
+                  disabled={opt.disabled}
+                  accessibilityRole="menuitem"
+                  accessibilityState={{ selected, disabled: opt.disabled }}
+                  style={cn(
+                    comboBoxStyles.option,
+                    selected && { backgroundColor: theme.colors.muted },
+                    opt.disabled && { opacity: 0.4 },
+                    optionStyle,
+                  )}
+                >
+                  <TextPrimitive
+                    fontSize="base"
+                    color={opt.disabled ? 'mutedForeground' : 'foreground'}
+                    style={comboBoxStyles.optionText}
+                  >
+                    {opt.label}
+                  </TextPrimitive>
+                  {selected && (
+                    <TextPrimitive
+                      color="primary"
+                      fontSize="sm"
+                      fontWeight="bold"
+                      accessibilityElementsHidden
+                      importantForAccessibility="no-hide-descendants"
+                    >
+                      {'\u2713'}
+                    </TextPrimitive>
+                  )}
+                </Pressable>
+              );
+            })}
+          </View>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+ComboBox.displayName = 'ComboBox';

package/src/components/combobox/ComboBox.types.ts

@@ -0,0 +1,51 @@
+/**
+ * ANAN-UI — Component: ComboBox Types
+ *
+ * A combobox (select) with dropdown rendered in a Modal. Mirrors Input's
+ * variant/size/error API for the trigger field.
+ */
+
+import type { ViewProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { ReactNode } from 'react';
+
+export interface ComboBoxOption {
+  /** Unique value for this option. */
+  value: string;
+  /** Visible label. */
+  label: string;
+  /** Disables this option. */
+  disabled?: boolean;
+}
+
+export type ComboBoxVariant = 'outline' | 'filled' | 'ghost';
+
+export type ComboBoxSize = 'sm' | 'default' | 'lg';
+
+export interface ComboBoxProps extends Omit<ViewProps, 'style' | 'onChange'> {
+  /** List of options. */
+  options: ComboBoxOption[];
+  /** Placeholder shown when no value is selected. */
+  placeholder?: string;
+  /** Controlled selected value. */
+  value?: string;
+  /** Uncontrolled default selected value. */
+  defaultValue?: string;
+  /** Called when the selection changes. */
+  onValueChange?: (value: string) => void;
+  /** Error message; shows destructive border and announces error. */
+  error?: string;
+  /** Optional label above the trigger field. */
+  label?: string;
+  /** Optional hint below the trigger field (hidden when error is set). */
+  hint?: string;
+  variant?: ComboBoxVariant;
+  size?: ComboBoxSize;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  /** Style applied to the trigger field container. */
+  fieldStyle?: StyleProp<ViewStyle>;
+  /** Style applied to the dropdown container. */
+  dropdownStyle?: StyleProp<ViewStyle>;
+  /** Style applied to each option text. */
+  optionStyle?: StyleProp<TextStyle>;
+}

package/src/components/combobox/ComboBox.variants.ts

@@ -0,0 +1,82 @@
+/**
+ * ANAN-UI — Component: ComboBox Variants
+ *
+ * Variant/size style definitions for the trigger field, resolved against the
+ * active theme at render time.
+ */
+
+import type { TextStyle, ViewStyle } from 'react-native';
+import type { Theme } from '../../theme/types';
+import type { ComboBoxVariant, ComboBoxSize } from './ComboBox.types';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export interface ComboBoxFieldVariantEntry {
+  container: ViewStyle;
+  text: TextStyle;
+}
+
+export interface ComboBoxVariantsConfig {
+  variant: Record<ComboBoxVariant, ComboBoxFieldVariantEntry>;
+  size: Record<ComboBoxSize, ViewStyle>;
+  textSize: Record<ComboBoxSize, TextStyle>;
+  defaultVariant: ComboBoxVariant;
+  defaultSize: ComboBoxSize;
+}
+
+export function getComboBoxVariants(theme: Theme): ComboBoxVariantsConfig {
+  return {
+    variant: {
+      outline: {
+        container: {
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.card,
+        },
+        text: { color: theme.colors.foreground },
+      },
+      filled: {
+        container: {
+          borderWidth: 1,
+          borderColor: 'transparent',
+          backgroundColor: theme.colors.muted,
+        },
+        text: { color: theme.colors.foreground },
+      },
+      ghost: {
+        container: {
+          borderWidth: 1,
+          borderColor: 'transparent',
+          backgroundColor: 'transparent',
+        },
+        text: { color: theme.colors.foreground },
+      },
+    },
+    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,
+      },
+    },
+    textSize: {
+      sm: { fontSize: theme.typography.fontSize.sm },
+      default: { fontSize: theme.typography.fontSize.base },
+      lg: { fontSize: theme.typography.fontSize.lg },
+    },
+    defaultVariant: 'outline',
+    defaultSize: 'default',
+  };
+}

package/src/components/combobox/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ANAN-UI — Component: ComboBox Barrel Export
+ */
+
+export { ComboBox } from './ComboBox';
+export type { ComboBoxProps, ComboBoxVariant, ComboBoxSize, ComboBoxOption } from './ComboBox.types';

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

@@ -0,0 +1,50 @@
+/**
+ * ANAN-UI — Component: Dialog Styles
+ *
+ * Static styles created with StyleSheet.create. The content surface and
+ * shadows are resolved from the theme at render time via Dialog.variants.
+ */
+
+import { StyleSheet } from 'react-native';
+import { spacing, borderRadius } from '../../design-tokens';
+
+export const dialogStyles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: spacing[4],
+  },
+  content: {
+    width: '100%',
+    maxWidth: 400,
+    borderRadius: borderRadius.lg,
+    overflow: 'hidden',
+  },
+  header: {
+    padding: spacing[5],
+    gap: spacing[1],
+  },
+  body: {
+    paddingHorizontal: spacing[5],
+    paddingBottom: spacing[4],
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: spacing[2],
+    padding: spacing[4],
+    paddingTop: 0,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: spacing[3],
+    right: spacing[3],
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9999,
+  },
+});