npm package: @neutron-l/design-system
Description: Neutron-L Design System - A comprehensive, accessible, and themeable React component library for healthcare applications
Author: Neutron-L
Latest version: 0.2.1

# @neutron-l/design-system

**Neutron-L Design System**

A comprehensive, accessible, and themeable React component library built for healthcare applications.

## Installation

### 1. Add Build Secret

Go to **Project Settings → Build Secrets/Env Secrets** and add:
- **Name:** `PACKAGES_TOKEN`
- **Value:** The shared GitHub Packages token (HCA Product Design team will provide)

### 2. Add .npmrc

Create a `.npmrc` file in your project root:

```
@neutron-l:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${PACKAGES_TOKEN}
```

### 3. Install the Package

```bash
npm install @neutron-l/design-system
```

Or add to `package.json`:

```json
{
  "dependencies": {
    "@neutron-l/design-system": "^0.1.6"
  }
}
```

✅ Done. The design system will install from GitHub Packages during build.

### Alternative: Install from Public GitHub Release Asset

If you prefer not to use GitHub Packages auth, install directly from the public release tarball:

```bash
npm install https://github.com/hca-lovable-projects/neutron-l/releases/download/v0.2.0/neutron-l-design-system-0.2.0.tgz
```

Or add to `package.json`:

```json
{
  "dependencies": {
    "@neutron-l/design-system": "https://github.com/hca-lovable-projects/neutron-l/releases/download/v0.2.0/neutron-l-design-system-0.2.0.tgz"
  }
}
```

This method works for public projects and does not require `PACKAGES_TOKEN`.

### Peer Dependencies

Ensure you have the following peer dependencies installed:

```bash
npm install react react-dom
```

## Quick Start

```tsx
import { HXDSProvider, Button, PatientCard, StatusBadge } from "@neutron-l/design-system";
import "@neutron-l/design-system/styles.css";

function App() {
  return (
    <HXDSProvider theme="rso">
      <Button variant="primary">Get Started</Button>
    </HXDSProvider>
  );
}
```

## Available Themes

Neutron-L supports multiple product themes out of the box:

| Theme | Description | Primary Color |
|-------|-------------|---------------|
| `rso` | Real-time Scheduling Operations | HCA Blue |
| `rcm` | Revenue Cycle Management | Green |
| `nurse-handoff` | Nurse Handoff System | Purple |
| `timpani` | Healthcare Orchestration | Deep Purple |
| `supply-chain` | Supply Chain Management | Teal |

### Using Themes

```tsx
import { HXDSProvider } from "@neutron-l/design-system";

// Set theme at the provider level
<HXDSProvider theme="rcm">
  {/* Your app */}
</HXDSProvider>

// Or switch themes dynamically
const { setTheme } = useHXDS();
setTheme("nurse-handoff");
```

## Components

### Core Components

- **Button** - Primary action buttons with multiple variants
- **TextField** - Text input with validation states
- **Select** - Dropdown selection component
- **Checkbox** - Checkbox with label support
- **Switch** - Toggle switch component

### Layout & Display

- **Card** - Container component with variants
- **Avatar** - User avatar with status indicators
- **StatusBadge** - Status indicators (success, warning, error, etc.)
- **Tabs** - Tabbed interface component
- **Progress** - Progress bar component
- **Skeleton** - Loading placeholder components
- **Tooltip** - Hover tooltips

### Feedback

- **Alert** - Alert messages with variants

### Data Display

- **DataTable** - Sortable, filterable data tables

### Healthcare-Specific

- **PatientCard** - Patient information display
- **VitalsPanel** - Vital signs display
- **MedicationList** - Medication list with scheduling

## Dark Mode

Neutron-L supports dark mode out of the box:

```tsx
const { isDark, toggleDark } = useHXDS();

<button onClick={toggleDark}>
  {isDark ? "Light Mode" : "Dark Mode"}
</button>
```

## TypeScript Support

Neutron-L is written in TypeScript and includes full type definitions:

```tsx
import type { ButtonProps, PatientCardProps, ThemeName } from "@neutron-l/design-system";
```

## Tailwind CSS Integration

Neutron-L uses Tailwind CSS and provides design tokens as CSS custom properties. Extend your `tailwind.config.js`:

```js
module.exports = {
  content: [
    // ... your content
    "./node_modules/@neutron-l/design-system/dist/**/*.js",
  ],
  // Neutron-L tokens are automatically available via CSS custom properties
};
```

## Accessibility

All Neutron-L components are built with accessibility in mind:

- Full keyboard navigation
- ARIA attributes
- Screen reader support
- Focus management
- Color contrast compliance

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Building the Library

```bash
# Build the component library
npm run build:lib
```

This generates:
- `dist/index.js` - ESM bundle
- `dist/index.cjs` - CommonJS bundle
- `dist/index.d.ts` - TypeScript declarations
- `dist/styles.css` - CSS styles and tokens

## Development

```bash
# Start the documentation site
npm run dev

# Build the documentation site
npm run build
```

## License

MIT © HCA Healthcare

---

## Lovable Project Info

**URL**: https://lovable.dev/projects/bc588c41-84a8-44fd-9e23-397f7db9ed57

This project is built with Vite, TypeScript, React, shadcn-ui, and Tailwind CSS.