@ibis-design/svelte 0.1.0

package/README.md

@@ -0,0 +1,136 @@
+# @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`.

package/dist/index.css

@@ -0,0 +1 @@
+.ibis-button.svelte-118lylz{font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);border:var(--border-width-thin) solid transparent;border-radius:var(--border-radius-default);cursor:pointer;transition:background-color var(--transition-duration-fast) var(--transition-timing-default), opacity var(--transition-duration-fast) var(--transition-timing-default)}.ibis-button.svelte-118lylz:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ibis-button--primary.svelte-118lylz{background-color:var(--color-buttons-simple);color:var(--color-white)}.ibis-button--primary.svelte-118lylz:not(:disabled):hover{background-color:var(--color-primary-700)}.ibis-button--secondary.svelte-118lylz{color:var(--color-primary-500);border-color:var(--color-primary-500);background-color:#0000}.ibis-button--secondary.svelte-118lylz:not(:disabled):hover{background-color:var(--color-primary-50)}.ibis-button--sm.svelte-118lylz{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-normal-text-sm)}.ibis-button--md.svelte-118lylz{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-normal-text-default)}.ibis-button--lg.svelte-118lylz{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-normal-text-lg)}.ibis-card.svelte-2gevwt{background-color:var(--color-backgrounds-classic-bg-light);border-radius:var(--border-radius-md);box-shadow:var(--shadow-default);padding:var(--spacing-4);font-family:var(--font-family-sans);font-size:var(--font-size-normal-text-default);line-height:var(--line-height-normal)}.ibis-auth-layout.svelte-bz8iij{min-height:100vh;padding:var(--spacing-6);background-color:var(--color-backgrounds-themed-bg-ibis-white);font-family:var(--font-family-sans);flex-direction:column;justify-content:center;align-items:center;display:flex}.ibis-auth-layout__logo.svelte-bz8iij{margin-bottom:var(--spacing-8)}.ibis-auth-layout__main.svelte-bz8iij{flex:0 auto;width:100%;max-width:24rem}.ibis-auth-layout__footer.svelte-bz8iij{margin-top:var(--spacing-8);font-size:var(--font-size-normal-text-sm);color:var(--color-neutral-600)}.ibis-app-layout.svelte-1ff24d4{background-color:var(--color-backgrounds-classic-bg-light);min-height:100vh;font-family:var(--font-family-sans);flex-direction:column;display:flex}.ibis-app-layout__header.svelte-1ff24d4{z-index:var(--z-index-sticky);flex:none}.ibis-app-layout__body.svelte-1ff24d4{flex:auto;min-height:0;display:flex}.ibis-app-layout__sidebar.svelte-1ff24d4{background-color:var(--color-neutral-50);border-right:var(--border-width-thin) solid var(--color-neutral-200);flex:none;width:16rem}.ibis-app-layout__main.svelte-1ff24d4{padding:var(--spacing-6);flex:auto;overflow:auto}.ibis-app-layout__footer.svelte-1ff24d4{padding:var(--spacing-4);border-top:var(--border-width-thin) solid var(--color-neutral-200);font-size:var(--font-size-normal-text-sm);color:var(--color-neutral-600);flex:none}.ibis-dashboard-layout.svelte-1y27ool{background-color:var(--color-backgrounds-classic-bg-light);min-height:100vh;font-family:var(--font-family-sans);flex-direction:column;display:flex}.ibis-dashboard-layout__header.svelte-1y27ool{background:linear-gradient(var(--color-buttons-gradient-start), var(--color-buttons-gradient-end));color:var(--color-white);z-index:var(--z-index-sticky);flex:none}.ibis-dashboard-layout__body.svelte-1y27ool{flex:auto;min-height:0;display:flex}.ibis-dashboard-layout__sidebar.svelte-1y27ool{background-color:var(--color-neutral-100);border-right:var(--border-width-thin) solid var(--color-neutral-300);flex:none;width:14rem}.ibis-dashboard-layout__main.svelte-1y27ool{padding:var(--spacing-6);flex:auto;overflow:auto}.ibis-dashboard-layout__footer.svelte-1y27ool{padding:var(--spacing-3);border-top:var(--border-width-thin) solid var(--color-neutral-200);font-size:var(--font-size-normal-text-xs);color:var(--color-neutral-600);flex:none}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @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.
+ *
+ * @example
+ * ```svelte
+ * import '@ibis-design/css';
+ * import { Button, AppLayout } from '@ibis-design/svelte';
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { default as Button } from './lib/Button.svelte';
+export { default as Card } from './lib/Card.svelte';
+export { default as AuthLayout } from './lib/AuthLayout.svelte';
+export { default as AppLayout } from './lib/AppLayout.svelte';
+export { default as DashboardLayout } from './lib/DashboardLayout.svelte';
+export * from './types/index';