npm package: @sellmate/design-system
Description: Sellmate Design System - Web Components Library built with Stencil
Author: MeeKyeong Kim
Latest version: 1.0.53

[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)

# Sellmate Design System

A comprehensive web components library built with Stencil for Sellmate.

## Installation

```bash
npm install @sellmate/design-system
```

or

```bash
yarn add @sellmate/design-system
```

## Quick Start

### Lazy Loading (Recommended for most projects)

Include this script in your HTML:

```html
<script type="module" src="https://unpkg.com/@sellmate/design-system"></script>
```

Then use any component:

```html
<sd-button>Click me</sd-button>
```

### ES Module Import

```tsx
import '@sellmate/design-system/dist/design-system/design-system.esm.js';

function App() {
 return <sd-button label="Click me" onClick={() => console.log('clicked')}></sd-button>;
}

export default App;
```

### CommonJS (Node.js)

```js
const { defineCustomElements } = require('@sellmate/design-system/loader');

defineCustomElements();
```

## Available Components

- **sd-button** - Button component
- **sd-input** - Input field component
- **sd-checkbox** - Checkbox component
- **sd-select** - Select dropdown component
- **sd-table** - Data table component
- **sd-tag** - Tag/badge component
- **sd-icon** - Icon component
- **sd-tooltip** - Tooltip component
- **sd-popover** - Popover component
- **sd-date-picker** - Date picker component
- **sd-date-range-picker** - Date range picker component
- **sd-pagination** - Pagination component

## Framework Integration

### React

Use the React wrapper package for better TypeScript support:

```bash
npm install @sellmate/design-system-react
```

```tsx
import { SdButton } from '@sellmate/design-system-react';

export function App() {
 return <SdButton>Click me</SdButton>;
}
```

### Vue 3

Use the Vue wrapper package:

```bash
npm install @sellmate/design-system-vue
```

```vue
<template>
 <SdButton @click="handleClick">Click me</SdButton>
</template>

<script setup>
import { SdButton } from '@sellmate/design-system-vue';

const handleClick = () => {
 console.log('clicked');
};
</script>
```

## Browser Support

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

## Test Scenario Report

Generate a readable markdown summary of all `spec` and `e2e` scenarios:

From `packages/stencil`:

```bash
npm run test:scenarios
```

From monorepo root:

```bash
npm run test:scenarios:stencil
```

Output file:

- `TEST_SCENARIOS.md`

Custom output path:

```bash
npm run test:scenarios -- --out ./docs/test-scenarios.md
```

## License

MIT