feat: Add ChildSelector component and update Child types

TypeScript Types:
- Updated Child interface with displayColor, sortOrder, nickname
- Added FamilyStatistics interface for UI view mode decisions
- Updated CreateChildData to support custom colors and nicknames

API Client:
- Added getFamilyStatistics() method
- Returns totalChildren, viewMode (tabs/cards), ageRange, genderDistribution

ChildSelector Component:
- Supports 3 modes: single, multiple, all
- Shows child avatars with color-coded borders
- Displays child name and optional nickname
- "All Children" option for bulk operations
- Chip-based multi-select display
- Compact mode for inline usage
- Sorted by sortOrder (birth order)
- Disabled state when no children available
- Simplified UI for single-child families

Features:
- Color-coded child indicators using displayColor
- Avatar fallback with child's first initial
- Checkbox selection for multiple mode
- Indeterminate checkbox for partial selection
- Required field validation support
- Accessible with labels and ARIA

Props:
- children: Child[] - List of children to display
- selectedChildIds: string[] - Currently selected child IDs
- onChange: (childIds: string[]) => void - Selection change handler
- mode: 'single' | 'multiple' | 'all' - Selection behavior
- showAllOption: boolean - Show "All Children" option
- label: string - Form label
- compact: boolean - Compact display mode

Use Cases:
- Activity tracking forms
- Analytics filtering
- Bulk operations
- Dashboard child switching
- Comparison views

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/lib/api/children.ts

@@ -8,6 +8,9 @@ export interface Child {
   gender: 'male' | 'female' | 'other';
   photoUrl?: string;
   photoAlt?: string;
+  displayColor: string;
+  sortOrder: number;
+  nickname?: string;
   medicalInfo?: any;
   createdAt: string;
 }
@@ -18,9 +21,18 @@ export interface CreateChildData {
   gender: 'male' | 'female' | 'other';
   photoUrl?: string;
   photoAlt?: string;
+  displayColor?: string;
+  nickname?: string;
   medicalInfo?: any;
 }
 
+export interface FamilyStatistics {
+  totalChildren: number;
+  viewMode: 'tabs' | 'cards';
+  ageRange: { youngest: number; oldest: number } | null;
+  genderDistribution: { male: number; female: number; other: number };
+}
+
 export interface UpdateChildData extends Partial<CreateChildData> {}
 
 export const childrenApi = {
@@ -59,4 +71,10 @@ export const childrenApi = {
     const response = await apiClient.get(`/api/v1/children/${id}/age`);
     return response.data.data;
   },
+
+  // Get family statistics for multi-child UI
+  getFamilyStatistics: async (familyId: string): Promise<FamilyStatistics> => {
+    const response = await apiClient.get(`/api/v1/children/family/${familyId}/statistics`);
+    return response.data.data;
+  },
 };