npm package: @ibis-design/svelte
Description: Svelte component library for the IBIS design system.
Latest version: 0.2.0

# @ibis-design/svelte

Svelte 5 component library for the IBIS design system. Provides primitives (Button, Card) and full layout shells (AuthLayout, AppLayout, DashboardLayout) styled via CSS custom properties from `@ibis-design/css`.

## Requirements

- **Svelte 5** (runes and snippets; no slots).
- **@ibis-design/css** — design tokens. The consuming application must load the token stylesheet once so `:root` variables are available.

## Installation

```bash
npm install @ibis-design/svelte @ibis-design/css
```

## Token CSS

Import the design tokens in your application entry or root layout so all components receive the correct variables:

```js
// e.g. in your app entry (main.ts, +layout.svelte, or App.svelte)
import '@ibis-design/css';
// or
import '@ibis-design/css/ibis-design.css';
```

Without this import, components will not have colors, spacing, or typography from the design system.

## Usage

### Primitives

**Button** — use the `children` snippet for the label:

```svelte
<script>
  import { Button } from '@ibis-design/svelte';
</script>

<Button variant="primary" size="md">Submit</Button>
<Button variant="secondary" size="sm">Cancel</Button>
```

**Card** — use the `children` snippet for content:

```svelte
<script>
  import { Card } from '@ibis-design/svelte';
</script>

<Card>
  <p>Card content</p>
</Card>
```

### Layouts

Layouts use **snippets** (Svelte 5). Pass snippet props for header, sidebar, and main content. Content between the component tags is the `children` snippet.

**AppLayout** — generic app shell with optional header, sidebar, main, and footer:

```svelte
<script>
  import { AppLayout } from '@ibis-design/svelte';

  // Define snippets and pass as props; content between tags is children
</script>

<AppLayout
  header={headerSnippet}
  sidebar={sidebarSnippet}
  footer={footerSnippet}
>
  <p>Main page content</p>
</AppLayout>
```

With inline snippets:

```svelte
<script>
  import { AppLayout } from '@ibis-design/svelte';
</script>

{#snippet header()}
  <nav>App header</nav>
{/snippet}
{#snippet sidebar()}
  <aside>Sidebar</aside>
{/snippet}

<AppLayout header={header} sidebar={sidebar}>
  <p>Main content</p>
</AppLayout>
```

**AuthLayout** — centered single-column layout for login/signup:

```svelte
<script>
  import { AuthLayout } from '@ibis-design/svelte';
</script>

<AuthLayout logo={logoSnippet} footer={footerSnippet}>
  <form>Login form</form>
</AuthLayout>
```

**DashboardLayout** — dashboard shell with themed header and sidebar (same snippet props as AppLayout).

## Exports

- **Components:** `Button`, `Card`, `AuthLayout`, `AppLayout`, `DashboardLayout`
- **Types:** `ButtonVariant`, `ButtonSize`, `AuthLayoutProps`, `AppLayoutProps`, `DashboardLayoutProps` (from `@ibis-design/svelte`)

## Build

From the package directory:

```bash
npm run build
```

From the monorepo root:

```bash
npm run build --workspaces
```

## Type checking

```bash
npm run check
```

Runs `svelte-check` with the package `tsconfig.json`.