# Healthspan - Marketing UI

This is the marketing UI library for Healthspan Marketing Website v3.

## Installation

```bash
npm install @zenpatient-org/healthspan-marketing-ui
```

## Development

Start the storybook:

```bash
npm run storybook
```

When you create a new public component, you need to add it to the `components` section of the `vite.config.ts` file. Also, you need to add the component to the `exports` section of the `package.json` file.

⚠️ Be sure to use 'use client' in the component file if it is a [client component](https://18.react.dev/reference/rsc/use-client).

Avoid using barrel exports. Instead, import the components directly from the `src` directory.

We use eslint and prettier, please ensure you have these lines in your IDE settings:

```
  "eslint.useFlatConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
```

## Importing the components and modules

```tsx
import { Button } from '@zenpatient-org/healthspan-marketing-ui/Button';
import { CallbackModule } from '@zenpatient-org/healthspan-marketing-ui/CallbackModule';
```

### To build for publishing:

```bash
npm run build
```

### Publishing:

```bash
npm login
npm version patch
npm publish
```

## Global Design Tokens

Design tokens (colors, spacing, etc.) are injected via CSS variables globally. You can import the core styles in two ways:

### Option 1: Import core styles directly
```tsx
import '@zenpatient-org/healthspan-marketing-ui/styles/core';
```

The core styles include:
- CSS reset
- Color variables (midnight, navy, copper, orchre, indigo, sage, solar, ivory, etc.)
- Typography variables (font sizes, line heights, letter spacing, font weights)
- Border radius and width variables
- Spacing variables
- Common utility styles
