npm package: @fayazux/jo-design-system
Description: Jo Design System — React UI component library with buttons, inputs, dropdowns, data tables, and loading states.
Latest version: 0.1.0

# Jo Design System

A React UI component library with clean, accessible components for building modern interfaces.

## Installation

```bash
npm install jo-design-system
```

## Setup

Import the stylesheet once in your app's entry point:

```jsx
import 'jo-design-system/dist/style.css'
// or: import 'jo-design-system/dist/jo-design-system.css'
```

## Components

### Button

```jsx
import { Button } from 'jo-design-system'

<Button variant="primary" icon={<PlusIcon />}>New Item</Button>
<Button variant="secondary">Cancel</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>
```

**Props:** `variant` (`'primary'` | `'secondary'`), `size` (`'sm'` | `'md'` | `'lg'`), `icon`, `disabled`, `className`

### TextInput

```jsx
import { TextInput } from 'jo-design-system'

<TextInput label="Email" placeholder="you@example.com" helperText="We'll never share your email." />
<TextInput label="Name" errorMessage="This field is required" />
<TextInput disabled placeholder="Disabled" />
```

**Props:** `label`, `helperText`, `errorMessage`, `error`, `disabled`, `className`, plus all native `<input>` props

### Dropdown

```jsx
import { Dropdown, MultiSelectDropdown } from 'jo-design-system'

const options = [
  { label: 'Option One', value: 'one' },
  { label: 'Option Two', value: 'two' },
  { label: 'Option Three', value: 'three' },
]

<Dropdown options={options} value={selected} onChange={setSelected} searchable />
<Dropdown variant="white" placeholder="Choose..." />
<MultiSelectDropdown options={options} value={selectedValues} onChange={setSelectedValues} />
```

**Dropdown Props:** `options`, `value`, `onChange`, `placeholder`, `searchable`, `variant` (`'filled'` | `'white'`), `disabled`, `error`, `className`

**MultiSelectDropdown Props:** `options`, `value` (array), `onChange`, `placeholder`, `variant`, `disabled`, `className`

### DataTable

```jsx
import { DataTable, DataTableSection, DataRow } from 'jo-design-system'

<DataTable title="All Data">
  <DataTableSection title="Contact Info">
    <DataRow field="Name" value="Jane Doe" finalValue="Jane Doe" status="Verified" bold />
    <DataRow field="Email" value="jane@example.com" status="Single Source" />
    <DataRow field="Phone" value="-" status="No Data" />
  </DataTableSection>
</DataTable>
```

**DataTable Props:** `title`, `columns` (array of header labels), `className`
**DataTableSection Props:** `title`, `defaultCollapsed`
**DataRow Props:** `field`, `value`, `finalValue`, `status`, `statusBadge`, `bold`, `showChevron`, `onClick`

### Loading

```jsx
import { Spinner, LoadingIndicator, Skeleton } from 'jo-design-system'

<Spinner />
<Spinner size="md" />
<Spinner size="lg" />

<LoadingIndicator text="Fetching data..." />

<Skeleton variant="text" width={180} />
<Skeleton variant="title" width={200} />
<Skeleton variant="avatar" width={40} height={40} />
<Skeleton variant="badge" width={80} />
<Skeleton variant="block" width="100%" height={120} />
```

**Spinner Props:** `size` (`'sm'` | `'md'` | `'lg'`), `className`
**LoadingIndicator Props:** `text`, `className`
**Skeleton Props:** `variant` (`'text'` | `'title'` | `'badge'` | `'avatar'` | `'block'`), `width`, `height`, `className`

## Design Tokens (CSS Variables)

The library uses CSS custom properties that you can override:

```css
:root {
  --jo-bg: #FFFFFF;
  --jo-bg2: #F5F5F5;
  --jo-bg3: #FAFBFA;
  --jo-fg: #1A1A1A;
  --jo-fg2: #575957;
  --jo-fg3: #949694;
  --jo-border: #E5E5E5;
  --jo-border2: #F0F0F0;
  --jo-accent: #38C51B;
  --jo-error: #C51B1B;
  --jo-font: 'Inter', -apple-system, sans-serif;
}
```

Dark theme is supported via `[data-theme="dark"]` on any parent element.

## License

MIT