# @ceed/ads

Admin Design System - A React component library for Ecube Labs admin applications.

## Installation

```bash
npm install @ceed/ads
# or
yarn add @ceed/ads
```

## Usage

### With Bundler (Vite, Webpack, etc.)

```tsx
import { Button, ThemeProvider } from '@ceed/ads';

function App() {
  return (
    <ThemeProvider>
      <Button variant="solid">Click me</Button>
    </ThemeProvider>
  );
}
```

### Browser ESM (via CDN)

You can use `@ceed/ads` directly in the browser without a bundler via [esm.sh](https://esm.sh).

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>@ceed/ads Browser Example</title>
</head>
<body>
  <div id="root"></div>

  <script type="module">
    import React from 'https://esm.sh/react@18';
    import { createRoot } from 'https://esm.sh/react-dom@18/client';
    import { Button, ThemeProvider } from 'https://esm.sh/@ceed/ads';

    const App = () => (
      React.createElement(ThemeProvider, null,
        React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!')
      )
    );

    createRoot(document.getElementById('root')).render(
      React.createElement(App)
    );
  </script>
</body>
</html>
```

#### With Import Maps

For cleaner imports, use [Import Maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap):

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>@ceed/ads with Import Maps</title>
</head>
<body>
  <div id="root"></div>

  <script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18",
      "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
      "react-dom/client": "https://esm.sh/react-dom@18/client",
      "@ceed/ads": "https://esm.sh/@ceed/ads"
    }
  }
  </script>

  <script type="module">
    import React from 'react';
    import { createRoot } from 'react-dom/client';
    import { Button, ThemeProvider } from '@ceed/ads';

    const App = () => (
      React.createElement(ThemeProvider, null,
        React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!')
      )
    );

    createRoot(document.getElementById('root')).render(
      React.createElement(App)
    );
  </script>
</body>
</html>
```

#### With JSX (using esm.sh)

esm.sh supports JSX transformation via the `?jsx-runtime=automatic` parameter:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>@ceed/ads with JSX</title>
</head>
<body>
  <div id="root"></div>

  <script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18",
      "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
      "react-dom/client": "https://esm.sh/react-dom@18/client",
      "@ceed/ads": "https://esm.sh/@ceed/ads"
    }
  }
  </script>

  <script type="module">
    import { createRoot } from 'react-dom/client';
    import { jsx } from 'react/jsx-runtime';
    import { Button, Stack, ThemeProvider } from '@ceed/ads';

    const App = () =>
      jsx(ThemeProvider, {
        children: jsx(Stack, {
          spacing: 2,
          children: [
            jsx(Button, { variant: 'solid', children: 'Solid' }),
            jsx(Button, { variant: 'outlined', children: 'Outlined' }),
            jsx(Button, { variant: 'soft', children: 'Soft' }),
          ],
        }),
      });

    createRoot(document.getElementById('root')).render(jsx(App, {}));
  </script>
</body>
</html>
```

## Documentation

- [Storybook](https://main--66da7aaaf87fb0b864d6afca.chromatic.com)
- [Confluence](https://ecubelabs.atlassian.net/wiki/spaces/HP/pages/3256123430/Design+System)
