Session: glowing-splashing-wozniak-subagent-a811b301 — 2026-04-15

Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-haiku-4-5-20251001`

Stats: 1 user messages, 32 tool calls, tools used: Bash, Read.

Conversation

Turn 1 — User

Explore the Oxygen design system at /Users/USER/workspace/doctolib/oxygen/packages to understand what UI components are available. I need to know: 1. What packages/components exist (Checkbox, RadioButton, Button, Select/Dropdown, DatePicker, etc.) 2. The import paths for these components 3. How the design system components are typically used in Doctolib frontend code

Look at the package.json files and component exports. Be thorough but concise - focus on component names, import paths, and available props. Also check how the tpf-national-health-records-ui package imports from Oxygen (check its package.json and existing imports).

Turn 1 — Assistant

I'll explore the Oxygen design system and the tpf-national-health-records-ui package to understand the available components and their usage patterns.

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages -type f -name "package.json" | head -20

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/illustrative-icons/package.json /Users/USER/workspace/doctolib/oxygen/packages/core/package.json /Users/USER/workspace/doctolib/oxygen/packages/toast/package.json /Users/USER/workspace/doctolib/oxygen/packages/b2b/package.json /Users/USER/workspace/doctolib/oxygen/packages/b2c/package.json /Users/USER/workspace/doctolib/oxygen/packages/storybook-config/package.json /Users/USER/workspace/doctolib/oxygen/packages/icons/package.json /Users/USER/workspa …(truncated, 190 more chars)

Let me get more details on the structure and check the package.json files for these packages:

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages

Tool results:

→ result (ERROR): EISDIR: illegal operation on a directory, read '/Users/USER/workspace/doctolib/oxygen/packages'

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/package.json

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/b2b/package.json

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/b2c/package.json

Tool results:

→ result (ERROR): File content (15171 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.

Tool results:

→ result (ERROR): File content (10073 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.

Tool results:

→ result (ERROR): File content (10214 tokens) exceeds maximum allowed tokens (10000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.

Let me search for component exports and use a more targeted approach:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 384 B Wed Feb 25 13:12:45 2026 . drwxr-xr-x clertonra staff 1.3 KB Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 608 B Fri Mar 13 11:56:52 2026 b2b drwxr-xr-x clertonra staff 576 B Fri Mar 13 11:56:52 2026 b2c drwxr-xr-x clertonra staff 448 B Wed Feb 25 13:12:44 2026 codemods drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 core drwxr-xr-x clertonra staff 544 B Fri Mar 13 11:56:52 2026 icons drwxr-xr-x clertonra staff 480 B Fri Mar 13 11:56:52 …(truncated, 303 more chars)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages -name "index.ts" -o -name "index.tsx" -o -name "index.js" | grep -E "(core|b2b|b2c)" | head -20

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/tokens/index.ts

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 224 B Wed Feb 25 13:12:44 2026 a11y drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 actions drwxr-xr-x clertonra staff 96 B Wed Feb 25 13:12:44 2026 collection drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 common .rw-r--r-- clertonra staff 45 B Wed Feb 25 13:12:44 2026 constants.ts drwxr-xr-x clertonra staff 832 B Wed …(truncated, 1872 more chars)

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 832 B Fri Mar 13 11:56:52 2026 . drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 .. drwxr-xr-x clertonra staff 192 B Wed Feb 25 13:12:44 2026 CardSelectable drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 Checkbox drwxr-xr-x clertonra staff 448 B Fri Mar 13 11:56:52 2026 ComboBox drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 FileDropZone .rw-r--r-- clertonra staff 3.8 KB Wed Feb 25 13:12:44 2026 Forms.mdx drwxr-xr-x clertonra staff …(truncated, 1350 more chars)

Now let me check the b2b and b2c packages and look for exports:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/b2b/src/ && echo "=== B2B ===" && ls -la /Users/USER/workspace/doctolib/oxygen/packages/b2c/src/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 800 B Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 608 B Fri Mar 13 11:56:52 2026 .. drwxr-xr-x clertonra staff 288 B Wed Feb 25 13:12:44 2026 actions drwxr-xr-x clertonra staff 448 B Wed Feb 25 13:12:44 2026 collection .rw-r--r-- clertonra staff 50 B Wed Feb 25 13:12:44 2026 constants.ts drwxr-xr-x clertonra staff 928 B Wed Feb 25 13:12:44 2026 dataDisplay drwxr-xr-x clertonra staff 896 B Fri Mar 13 11:56:52 2026 dataEntry .rw-r--r-- clertonra staff
…(truncated, 3019 more chars)

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | head -60

Tool results:

→ result (ok): { "name": "@doctolib/design-system", "version": "2.28.0", "license": "Doctolib", "description": "Doctolib's design system", "type": "module", "scripts": { "clean": "rm -rf node_modules/", "build": "rimraf dist/ && npm run -s sync-style-files && tsc --project tsconfig.build.json && tsc-alias --project tsconfig.build.json", "check-exports": "tsx ../../scripts/check-exports.ts", "dev": "nx run storybook", "i18n:sync": "tsx ./scripts/i18n/sync-translations-bundles.ts" …(truncated, 2543 more chars)

Now let me check how tpf-national-health-records-ui imports from Oxygen:

Tools used:

• Bash: find /Users/USER/workspace/doctolib -name "tpf-national-health-records-ui" -type d

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/doctolib/.yalc/@doctolib/tpf-national-health-records-ui /Users/USER/workspace/doctolib/doctolib/node_modules/@doctolib/tpf-national-health-records-ui /Users/USER/workspace/doctolib/doctolib/.claude/worktrees/fhir-2144_nhr-document-list-add-action-config-column/packages/@doctolib/national-health-records/node_modules/@doctolib/tpf-national-health-records-ui /Users/USER/workspace/doctolib/doctolib/.claude/worktrees/fhir-2144_nhr-document-list-add-action-config-column/ …(truncated, 2847 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json (1–50)

Tool results:

→ result (ok): 1 { 2 "name": "@doctolib/tpf-national-health-records-ui", 3 "version": "12.1.0", 4 "repository": { 5 "type": "git", 6 "url": "git+https://github.com/doctolib/treatment-plan.git" 7 }, 8 "keywords": [ 9 "upfront", 10 "modular frontend", 11 "smaller-scope" 12 ], 13 "author": "@doctolib/fire", 14 "license": "Doctolib", 15 "doctolib": { 16 "upfront-type": "smaller-scope" 17 }, 18 "type": "module", 19 "sideEffects": [ 20 "./src/i18n.ts" 21 ], 22
…(truncated, 1445 more chars)

Tools used:

• Bash: grep -E '(@doctolib|dependencies|peerDependencies)' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | head -80

Tool results:

→ result (ok): "name": "@doctolib/tpf-national-health-records-ui", "author": "@doctolib/fire", "customGroups": "@doctolib", "@doctolib/test-helpers": "^1.0.3", "@doctolib/upfront-dev": "^7.2.0", "peerDependencies": { "dependencies": { "@doctolib/design-system": "^2.20.9", "@doctolib/design-system-b2b": "^1.5.0", "@doctolib/design-system-icons": "^2.18.0", "@doctolib/tpf-commons": "3.0.0", "@doctolib/tpf-national-health-records": "5.1.0", "@doctolib/upfront-core": "^4.2 …(truncated, 4 more chars)

Now let me look at some actual import examples and component exports:

Tools used:

• Bash: grep -r "from '@doctolib/design-system" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src --include="*.tsx" --include="*.ts" | head -30

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDateSelectionFilterConfig.tsx:import type { Option } from '@doctolib/design-system/Option' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx:import type { Option } from '@doctolib/design-system/Option' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-nati …(truncated, 6246 more chars)

Let me check the actual component index/exports in the design system:

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core/src -type f -name "index.ts" -o -type f -name "index.tsx" | xargs grep -l "export" | head -10

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/tokens/index.ts

Tools used:

• Bash: find /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms -type f \( -name "*.ts" -o -name "*.tsx" \) | grep -E "(Checkbox|Radio|Select|InputDate|InputText|Button)" | head -20

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/RadioGroup/migration.ts /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/RadioGroup/Radio.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/RadioGroup/RadioGroup.test-helpers.ts /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/RadioGroup/RadioGroup.a11y.interactions.stories.tsx /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/RadioGroup/Radio.stories.tsx /Users/USER/workspace/doct …(truncated, 1388 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Checkbox/Checkbox.tsx (1–30)

Tool results:

→ result (ok): 1 import './Checkbox.scss' 2
3 import type { ChangeEventHandler, FocusEventHandler, MouseEventHandler, ReactNode } from 'react' 4 import classNames from 'classnames' 5 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react' 6 import { v4 as uuidv4 } from 'uuid' 7
8 import { computeAriaDescribedBy } from '../private/aria' 9 import type { FieldState } from '../private/Field' 10 import { Icon } from '../../dataDisplay/Icon/Icon' 11 import { _InputMessage as InputMessag …(truncated, 694 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/InputText/InputText.tsx (1–30)

Tool results:

→ result (ok): 1 import { type ComponentProps, forwardRef, useId, useMemo, useState } from 'react' 2
3 import { computeAriaDescribedBy } from '../private/aria' 4 import type { DataAttribute } from '../../common/DataAttribute/DataAttribute' 5 import { getFieldInputId } from '../private/Field' 6 import { _InputField as InputField } from '../private/InputField/_InputField' 7 import { type Props as InputTextProps, RawInputText } from './RawInputText' 8 import type { StyledComponent } from '../../common/TailwindSt …(truncated, 725 more chars)

Tools used:

• Read: /Users/USER/workspace/doctolib/oxygen/packages/core/src/forms/Radio/Radio.tsx (1–30)

Tool results:

→ result (ok): 1 import type { ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react' 2 import type React from 'react' 3 import { forwardRef } from 'react' 4 import classNames from 'classnames' 5 import { v4 as uuidv4 } from 'uuid' 6 import type { DataAttribute } from '../../common/DataAttribute/DataAttribute' 7 import type { FieldState } from '../private/Field' 8 import './Radio.scss' 9
10 type OtherProps = DataAttribute 11
12 type RadioWithoutLabelProps = { 13 id?: strin …(truncated, 768 more chars)

Now let me look at more components and check the available data display components:

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/dataDisplay/ && echo "=== Core Layout ===" && ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/layout/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 832 B Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 .. drwxr-xr-x clertonra staff 192 B Wed Feb 25 13:12:44 2026 Accordion drwxr-xr-x clertonra staff 192 B Wed Feb 25 13:12:44 2026 Avatar drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 AvatarGroup drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 Badge drwxr-xr-x clertonra staff 288 B Fri Mar 13 11:56:52 2026 Card drwxr-xr-x clertonra staff 160 B Wed Feb …(truncated, 2485 more chars)

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/ && echo "=== Overlays ===" && ls -la /Users/USER/workspace/doctolib/oxygen/packages/core/src/overlays/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 . drwxr-xr-x clertonra staff 1.1 KB Wed Feb 25 13:12:44 2026 .. drwxr-xr-x clertonra staff 288 B Fri Mar 13 11:56:52 2026 Button drwxr-xr-x clertonra staff 160 B Wed Feb 25 13:12:44 2026 ButtonFloating drwxr-xr-x clertonra staff 224 B Fri Mar 13 11:56:52 2026 ButtonWithLinkStyle drwxr-xr-x clertonra staff 608 B Fri Mar 13 11:56:52 2026 Dropdown drwxr-xr-x clertonra staff 256 B Wed Feb 25 13:12:44 2026 IconButton drwxr-xr-x clertonra …(truncated, 1031 more chars)

Tools used:

• Bash: grep -r "export.*from.*Button\|export.*Button" /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Button/ --include="*.ts" --include="*.tsx" | grep -v "stories\|test" | head -5

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Button/v2/Button.tsx:export type CommonProps = SubmitButtonProps | RegularButtonProps /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Button/v2/Button.tsx:export type ButtonProps = CommonProps & DataAttribute & StyledComponent<Margin | Width> /Users/USER/workspace/doctolib/oxygen/packages/core/src/actions/Button/v2/Button.tsx:export const Button = forwardRef<HTMLButtonElement, ButtonProps>( /Users/USER/workspace/doct …(truncated, 201 more chars)

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -A 100 '"exports"'

Tool results:

→ result (ok): "exports": { "./Accordion": { "import": "./dist/dataDisplay/Accordion/Accordion.js", "types": "./dist/dataDisplay/Accordion/Accordion.d.ts", "default": "./dist/dataDisplay/Accordion/Accordion.js" }, "./Alert": { "import": "./dist/feedbacks/Alert/Alert.js", "types": "./dist/feedbacks/Alert/Alert.d.ts", "default": "./dist/feedbacks/Alert/Alert.js" }, "./AlertBanner": { "import": "./dist/indicator/Alert/AlertBanner.js", "types": ". …(truncated, 3638 more chars)

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -E '"\./.*": {' | head -80 | sed 's/.*"\.\///' | sed 's/":.*//' | sort

Tool results:

→ result (ok): Accordion Alert AlertBanner AlertCard AlertHint AlphaSidePanel AlphaSidePanelHeader Autocomplete Avatar AvatarGroup Backdrop Badge BetaComboBox Bleed BulkSelect Button Button/v2 ButtonFloating ButtonWithLinkStyle Card CardCollapsible CardElevated CardOutlined CardSelectable CardSolid Carousel Carousel/PaginationDots CensorEmail CensorPhoneNumber Checkbox Checkbox/v2 CheckboxGroup Columns constants ContextualPopover DEPRECATEDHeading designSystemColors designSystemVariables Dialog Divider Drawer

…(truncated, 435 more chars)

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/core/package.json | grep -E '"\./.*": {' | sed 's/.*"\.\///' | sed 's/":.*//' | sort | tail -60

Tool results:

→ result (ok): SpinnerLoader StarRating Stepper Switch Table TableBody TableCell TableHead TableHeadCell TableHeadSelectAllCell TableRow TableSelectCell TableSkeletonLoader Tabs Tabs/v2 TailwindStyle test_helpers/Text test_helpers/Alert test_helpers/BetaComboBox test_helpers/Button test_helpers/Card test_helpers/CardElevated test_helpers/CardOutlined test_helpers/CardSolid test_helpers/Carousel test_helpers/Checkbox test_helpers/CheckboxGroup test_helpers/Columns test_helpers/Drawer test_helpers/Heading test …(truncated, 554 more chars)

Perfect! Now let me check how to import these components and verify the b2c/b2b packages:

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/b2b/package.json | grep -E '"name"|"version"|"dependencies"' | head -20

Tool results:

→ result (ok): "name": "@doctolib/design-system-b2b", "version": "1.3.0", "dependencies": {

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/b2c/package.json | grep -E '"name"|"version"|"dependencies"' | head -20

Tool results:

→ result (ok): "name": "@doctolib/design-system-b2c", "version": "1.2.8", "dependencies": {

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/b2b/package.json | grep -A 10 '"exports"' | head -40

Tool results:

→ result (ok): "exports": { "./package.json": "./package.json", "./Button": { "import": "./dist/actions/Button/v1.js", "types": "./dist/actions/Button/v1.d.ts", "default": "./dist/actions/Button/v1.js" }, "./Button/v2": { "import": "./dist/actions/Button/v2.js", "types": "./dist/actions/Button/v2.d.ts", "default": "./dist/actions/Button/v2.js"

Tools used:

• Bash: ls -la /Users/USER/workspace/doctolib/oxygen/packages/icons/

Tool results:

→ result (ok): drwxr-xr-x clertonra staff 544 B Fri Mar 13 11:56:52 2026 . drwxr-xr-x clertonra staff 384 B Wed Feb 25 13:12:45 2026 .. drwxr-xr-x clertonra staff 320 B Fri Mar 13 11:56:52 2026 .storybook .rw-r--r-- clertonra staff 473 B Wed Feb 25 13:12:44 2026 catalog-info.yaml .rw-r--r-- clertonra staff 16 KB Wed Feb 25 13:12:44 2026 CHANGELOG.md .rw-r--r-- clertonra staff 181 B Wed Feb 25 13:12:44 2026 figma.config.json .rw-r--r-- clertonra staff 5.1 KB Fri Mar 13 11:56:52 2026 package.json drwxr-xr- …(truncated, 719 more chars)

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/oxygen/packages/icons/package.json | grep -E '"name"|"version"'

Tool results:

→ result (ok): "name": "@doctolib/design-system-icons", "version": "2.20.0",

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/oxygen/packages/icons/src/generated-components/ | head -20

Tool results:

→ result (ok): AddressBookRegularIcon.tsx AddressCardRegularIcon.tsx AddressCardSolidIcon.tsx AiBrandRegularIcon.tsx AiBrandSolidIcon.tsx AlignCenterRegularIcon.tsx AlignCenterSolidIcon.tsx AlignJustifyRegularIcon.tsx AlignJustifySolidIcon.tsx AlignLeftRegularIcon.tsx AlignLeftSolidIcon.tsx AlignRightRegularIcon.tsx AlignRightSolidIcon.tsx AltRegularIcon.tsx AltSolidIcon.tsx AngleDoubleDownRegularIcon.tsx AngleDoubleDownSolidIcon.tsx AngleDoubleLeftRegularIcon.tsx AngleDoubleLeftSolidIcon.tsx AngleDoubleRightR …(truncated, 14 more chars)

Excellent! Now let me create a comprehensive summary document:

Oxygen Design System Overview

Based on my exploration of the Oxygen design system, here's a comprehensive breakdown:

1. AVAILABLE PACKAGES

The Oxygen design system consists of multiple published NPM packages:

• @doctolib/design-system (v2.28.0) - Core components (300+ UI components)
• @doctolib/design-system-b2b (v1.3.0) - B2B-specific component variants
• @doctolib/design-system-b2c (v1.2.8) - B2C-specific component variants
• @doctolib/design-system-icons (v2.20.0) - Icon library
• @doctolib/design-system-illustrative-icons (v1.8.0) - Illustrative graphics
• @doctolib/design-system-tokens (v1.5.0) - Design tokens (colors, spacing, typography)

2. CORE COMPONENTS BY CATEGORY

Forms (/src/forms/)

• Input Fields: InputText, InputDate, InputDateNoPicker, InputNumber, InputPassword, InputColor/v2
• Selection: Checkbox, Checkbox/v2, CheckboxGroup, Radio, RadioGroup
• Dropdowns: ComboBox, BetaComboBox, MultipleComboBox, Select
• Advanced: PinInput, Slider, StarRating, Toggle, Switch, FileDropZone
• Text Areas: Textarea
• Utilities: ReactHookFormField (integration wrapper)

Actions (/src/actions/)

• Button (v1 deprecated, v2 recommended)
• IconButton (v1 deprecated, v2 recommended)
• ButtonFloating
• ButtonWithLinkStyle
• Link, LinkWithButtonStyle, LinkWithIconButtonStyle
• Dropdown (menu component)

Data Display (/src/dataDisplay/)

• Text: Heading, Paragraph, Text
• Cards: Card, CardCollapsible, CardElevated, CardOutlined, CardSelectable, CardSolid
• Lists: List, ListItem, Accordion
• Tables: Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TableSelectCell, BulkSelect, TableSkeletonLoader
• Badges & Pills: Badge, Pill
• Avatars: Avatar, AvatarGroup
• Media: Image, Picture, Icon, IllustrativeIcon, LottieAnimation, EmojiPicker
• Utilities: HTML, FormattedDate, FormattedTime, Divider

Layout (/src/layout/)

• HStack - Horizontal flex container
• VStack - Vertical flex container
• Columns - Multi-column layout
• Bleed - Negative margin utility
• Carousel with PaginationDots
• OverlayContainer and useIsOverlay hook

Overlays/Modals (/src/overlays/)

• Modal, ModalBody, ModalFooter
• Dialog
• Drawer
• Popover, ContextualPopover
• Tooltip
• AlphaSidePanel, AlphaSidePanelHeader (experimental side panel)
• Backdrop (overlay background)

Feedback (/src/feedbacks/)

• Alert, AlertBanner, AlertCard, AlertHint (different notification styles)

Navigation/Indicators

• Tabs, Tabs/v2
• Stepper
• Pagination, PaginationDots
• Indicator components

Other

• EmptyState - Empty state placeholder
• SpinnerLoader - Loading spinner

3. IMPORT PATHS

Components are imported using subpath exports from @doctolib/design-system:

// Form components
import { InputText } from '@doctolib/design-system/InputText'
import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
import { RadioGroup } from '@doctolib/design-system/RadioGroup'
import { BetaComboBox } from '@doctolib/design-system/BetaComboBox'
import { InputDate } from '@doctolib/design-system/InputDate'

// Action components
import { Button } from '@doctolib/design-system/Button/v2'
import { IconButton } from '@doctolib/design-system/IconButton/v2'

// Data display
import { Card } from '@doctolib/design-system/Card'
import { Badge } from '@doctolib/design-system/Badge'
import { Pill } from '@doctolib/design-system/Pill'
import { Heading } from '@doctolib/design-system/Heading'

// Layout
import { HStack } from '@doctolib/design-system/HStack'
import { VStack } from '@doctolib/design-system/VStack'

// Overlays
import { Modal, ModalBody, ModalFooter } from '@doctolib/design-system/Modal'
import { Dialog } from '@doctolib/design-system/Dialog'
import { Tooltip } from '@doctolib/design-system/Tooltip'

// Icons
import { EyeRegularIcon } from '@doctolib/design-system-icons/EyeRegularIcon'
import { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon'

// Types
import type { Option } from '@doctolib/design-system/Option'
import type { PillColor } from '@doctolib/design-system/Pill'
import type { DesignSystemIconComponent } from '@doctolib/design-system-icons'

4. HOW TPF-NATIONAL-HEALTH-RECORDS-UI USES OXYGEN

The @doctolib/tpf-national-health-records-ui package demonstrates real-world usage:

Dependencies declared:

{
  "dependencies": {
    "@doctolib/design-system": "^2.20.9",
    "@doctolib/design-system-b2b": "^1.5.0",
    "@doctolib/design-system-icons": "^2.18.0"
  }
}

Example usage patterns:

// Forms
import { InputDate } from '@doctolib/design-system/InputDate'
import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
import { RadioGroup } from '@doctolib/design-system/RadioGroup'
import { BetaComboBox } from '@doctolib/design-system/BetaComboBox'

// Data display
import { Badge } from '@doctolib/design-system/Badge'
import { Pill } from '@doctolib/design-system/Pill'
import { SpinnerLoader } from '@doctolib/design-system/SpinnerLoader'

// Icons
import { EyeRegularIcon } from '@doctolib/design-system-icons/EyeRegularIcon'
import { MonitorWaveformRegularIcon } from '@doctolib/design-system-icons/MonitorWaveformRegularIcon'

// Types
import type { Option } from '@doctolib/design-system/Option'
import type { PillColor } from '@doctolib/design-system/Pill'
import type { DesignSystemIconComponent } from '@doctolib/design-system-icons'

5. VERSIONING & DEPRECATION NOTES

• Button/v2 is recommended over deprecated Button (v1)
• IconButton/v2 is recommended over deprecated IconButton (v1)
• Checkbox/v2 is available - check if v1 or v2 is used in your context
• Tabs/v2 exists as a newer variant
• Components have test helpers exported via test_helpers/ComponentName for testing

6. KEY PATTERNS

• All components use named exports (not default)
• Many form inputs support v2 versions with updated APIs
• Icons use naming pattern: {IconName}{Style}Icon (e.g., ChevronDownRegularIcon, CheckSolidIcon)
• Components support TypeScript types with exported *Props interfaces
• Layout components (HStack, VStack) are flex-based
• Modal/Dialog/Drawer follow similar composition patterns (body, footer)

7. ADDITIONAL RESOURCES

• Storybook: Each component has .stories.tsx files demonstrating usage
• Test Helpers: Available for most components via @doctolib/design-system/test_helpers/*
• Design Tokens: Available via @doctolib/design-system-tokens
• Icons: 300+ icons available in the icon library

This design system is comprehensive and provides all standard UI components needed for Doctolib frontend development. The import paths are clean and type-safe, making it easy to integrate into React applications.