# Diary

Canonical page: https://docs.ovok.com/native-sdk/guide/components/diary

A specialized card component system for displaying health measurement data and diary entries in healthcare applications. The Diary module provides interactive cards with measurement display capabilities, designed for medical tracking and patient monitoring workflows.

## Key Features [#key-features]

- **Measurement Display**: Specialized cards for health metrics and diary entries
- **Data State Management**: Visual distinction between measured and unmeasured states
- **Compound Components**: Flexible architecture using the compound component pattern
- **Healthcare Icons**: Integration with measurement type icons for visual identification
- **Interactive Cards**: Touch-enabled cards for navigation and data entry
- **Host-configured accessibility**: Add labels, roles, and announcements in the
  app around the diary content; the module does not provide complete screen-reader
  semantics for every compound child

## Components [#components]

### DiaryCard [#diarycard]

The main card component that serves as a container for diary entries and measurement data with automatic styling based on data availability.

**Sub-components:**

- [`DiaryCard.StartSection`](/native-sdk/guide/components/diary/start-section/) - Header section with icon and optional right content
- [`DiaryCard.TaskIcon`](/native-sdk/guide/components/diary/task-icon/) - Measurement type icons (inherited from Tile module)
- [`DiaryCard.Title`](/native-sdk/guide/components/diary/title/) - Card title text (inherited from Tile module)
- [`DiaryCard.MeasuredValue`](/native-sdk/guide/components/diary/measured-value/) - Value display with unit and timestamp (inherited from Tile module)
- [`DiaryCard.NoData`](/native-sdk/guide/components/diary/no-data/) - Empty state indicator for unmeasured data

## Architecture [#architecture]

The Diary module extends the Tile module's compound component pattern, specializing it for healthcare diary and measurement use cases:

### Compound Component Design [#compound-component-design]

- **Main Container**: `DiaryCard` provides theming, touch handling, and state-aware styling
- **Inherited Components**: Reuses `TaskIcon`, `Title`, and `MeasuredValue` from the Tile module
- **Custom Components**: `StartSection` and `NoData` designed specifically for diary workflows
- **Data State Awareness**: Automatic visual styling based on `hasData` prop