@ibis-design/svelte 0.2.0 → 0.6.0

package/dist/layouts/AppLayout.svelte

@@ -0,0 +1,83 @@
+<!--
+  AppLayout – Generic app shell: optional header, sidebar, main, footer.
+  @component
+  @param {Snippet} [header] - Top bar / app header.
+  @param {Snippet} [sidebar] - Side navigation or sidebar.
+  @param {Snippet} [children] - Main content area.
+  @param {Snippet} [footer] - Optional footer.
+  @example
+  <AppLayout header={headerSnippet} sidebar={sidebarSnippet}>...</AppLayout>
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let { header, sidebar, children, footer }: Props = $props();
+</script>
+
+<div class="ibis-app-layout">
+  {#if header}
+    <header class="ibis-app-layout__header">{@render header()}</header>
+  {/if}
+  <div class="ibis-app-layout__body">
+    {#if sidebar}
+      <aside class="ibis-app-layout__sidebar">{@render sidebar()}</aside>
+    {/if}
+    <main class="ibis-app-layout__main">
+      {#if children}
+        {@render children()}
+      {/if}
+    </main>
+  </div>
+  {#if footer}
+    <footer class="ibis-app-layout__footer">{@render footer()}</footer>
+  {/if}
+</div>
+
+<style>
+  .ibis-app-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-backgrounds-classic-bg-light);
+    font-family: var(--font-family-sans);
+  }
+
+  .ibis-app-layout__header {
+    flex: 0 0 auto;
+    z-index: var(--z-index-sticky);
+  }
+
+  .ibis-app-layout__body {
+    flex: 1 1 auto;
+    display: flex;
+    min-height: 0;
+  }
+
+  .ibis-app-layout__sidebar {
+    flex: 0 0 auto;
+    width: 16rem;
+    background-color: var(--color-neutral-50);
+    border-right: var(--border-width-thin) solid var(--color-neutral-200);
+  }
+
+  .ibis-app-layout__main {
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: var(--spacing-6);
+  }
+
+  .ibis-app-layout__footer {
+    flex: 0 0 auto;
+    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);
+  }
+</style>

package/dist/layouts/AppLayout.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+interface Props {
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+}
+/**
+ * AppLayout – Generic app shell: optional header, sidebar, main, footer.
+ *
+ * @param {Snippet} [header] - Top bar / app header.
+ * @param {Snippet} [sidebar] - Side navigation or sidebar.
+ * @param {Snippet} [children] - Main content area.
+ * @param {Snippet} [footer] - Optional footer.
+ * @example
+ * <AppLayout header={headerSnippet} sidebar={sidebarSnippet}>...</AppLayout>
+ */
+declare const AppLayout: import("svelte").Component<Props, {}, "">;
+type AppLayout = ReturnType<typeof AppLayout>;
+export default AppLayout;

package/dist/layouts/AuthLayout.svelte

@@ -0,0 +1,63 @@
+<!--
+  AuthLayout – Centered single-column layout for login/signup views.
+  @component
+  @param {Snippet} [logo] - Optional logo snippet above main content.
+  @param {Snippet} [children] - Main content (e.g. form).
+  @param {Snippet} [footer] - Optional footer snippet.
+  @example
+  <AuthLayout logo={logoSnippet} footer={footerSnippet}>...</AuthLayout>
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    logo?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let { logo, children, footer }: Props = $props();
+</script>
+
+<div class="ibis-auth-layout">
+  {#if logo}
+    <div class="ibis-auth-layout__logo">{@render logo()}</div>
+  {/if}
+  <main class="ibis-auth-layout__main">
+    {#if children}
+      {@render children()}
+    {/if}
+  </main>
+  {#if footer}
+    <footer class="ibis-auth-layout__footer">{@render footer()}</footer>
+  {/if}
+</div>
+
+<style>
+  .ibis-auth-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-6);
+    background-color: var(--color-backgrounds-themed-bg-ibis-white);
+    font-family: var(--font-family-sans);
+  }
+
+  .ibis-auth-layout__logo {
+    margin-bottom: var(--spacing-8);
+  }
+
+  .ibis-auth-layout__main {
+    width: 100%;
+    max-width: 24rem;
+    flex: 0 1 auto;
+  }
+
+  .ibis-auth-layout__footer {
+    margin-top: var(--spacing-8);
+    font-size: var(--font-size-normal-text-sm);
+    color: var(--color-neutral-600);
+  }
+</style>

package/dist/layouts/AuthLayout.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    logo?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+}
+/**
+ * AuthLayout – Centered single-column layout for login/signup views.
+ *
+ * @param {Snippet} [logo] - Optional logo snippet above main content.
+ * @param {Snippet} [children] - Main content (e.g. form).
+ * @param {Snippet} [footer] - Optional footer snippet.
+ * @example
+ * <AuthLayout logo={logoSnippet} footer={footerSnippet}>...</AuthLayout>
+ */
+declare const AuthLayout: import("svelte").Component<Props, {}, "">;
+type AuthLayout = ReturnType<typeof AuthLayout>;
+export default AuthLayout;

package/dist/layouts/DashboardLayout.svelte

@@ -0,0 +1,88 @@
+<!--
+  DashboardLayout – Dashboard-specific shell with themed header and sidebar.
+  @component
+  @param {Snippet} [header] - Dashboard header (e.g. gradient bar).
+  @param {Snippet} [sidebar] - Side navigation.
+  @param {Snippet} [children] - Main content area.
+  @param {Snippet} [footer] - Optional footer.
+  @example
+  <DashboardLayout header={headerSnippet} sidebar={sidebarSnippet}>...</DashboardLayout>
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+  }
+
+  let { header, sidebar, children, footer }: Props = $props();
+</script>
+
+<div class="ibis-dashboard-layout">
+  {#if header}
+    <header class="ibis-dashboard-layout__header">{@render header()}</header>
+  {/if}
+  <div class="ibis-dashboard-layout__body">
+    {#if sidebar}
+      <aside class="ibis-dashboard-layout__sidebar">{@render sidebar()}</aside>
+    {/if}
+    <main class="ibis-dashboard-layout__main">
+      {#if children}
+        {@render children()}
+      {/if}
+    </main>
+  </div>
+  {#if footer}
+    <footer class="ibis-dashboard-layout__footer">{@render footer()}</footer>
+  {/if}
+</div>
+
+<style>
+  .ibis-dashboard-layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-backgrounds-classic-bg-light);
+    font-family: var(--font-family-sans);
+  }
+
+  .ibis-dashboard-layout__header {
+    flex: 0 0 auto;
+    background: linear-gradient(
+      var(--color-buttons-gradient-start),
+      var(--color-buttons-gradient-end)
+    );
+    color: var(--color-white);
+    z-index: var(--z-index-sticky);
+  }
+
+  .ibis-dashboard-layout__body {
+    flex: 1 1 auto;
+    display: flex;
+    min-height: 0;
+  }
+
+  .ibis-dashboard-layout__sidebar {
+    flex: 0 0 auto;
+    width: 14rem;
+    background-color: var(--color-neutral-100);
+    border-right: var(--border-width-thin) solid var(--color-neutral-300);
+  }
+
+  .ibis-dashboard-layout__main {
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: var(--spacing-6);
+  }
+
+  .ibis-dashboard-layout__footer {
+    flex: 0 0 auto;
+    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);
+  }
+</style>

package/dist/layouts/DashboardLayout.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+interface Props {
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+}
+/**
+ * DashboardLayout – Dashboard-specific shell with themed header and sidebar.
+ *
+ * @param {Snippet} [header] - Dashboard header (e.g. gradient bar).
+ * @param {Snippet} [sidebar] - Side navigation.
+ * @param {Snippet} [children] - Main content area.
+ * @param {Snippet} [footer] - Optional footer.
+ * @example
+ * <DashboardLayout header={headerSnippet} sidebar={sidebarSnippet}>...</DashboardLayout>
+ */
+declare const DashboardLayout: import("svelte").Component<Props, {}, "">;
+type DashboardLayout = ReturnType<typeof DashboardLayout>;
+export default DashboardLayout;

package/dist/types/button.js

@@ -0,0 +1,5 @@
+/**
+ * Button component variant and size options.
+ * @module
+ */
+export {};

package/dist/types/index.d.ts

@@ -2,5 +2,5 @@
  * Public types for @ibis-design/svelte.
  * Re-export or define shared interfaces here.
  */
-export type { ButtonVariant, ButtonSize } from './button';
-export type { AuthLayoutProps, AppLayoutProps, DashboardLayoutProps } from './layout';
+export type { ButtonVariant, ButtonSize } from "./button";
+export type { AuthLayoutProps, AppLayoutProps, DashboardLayoutProps } from "./layout";

package/dist/types/index.js

@@ -0,0 +1,5 @@
+/**
+ * Public types for @ibis-design/svelte.
+ * Re-export or define shared interfaces here.
+ */
+export {};

package/dist/types/layout.d.ts

@@ -1,4 +1,4 @@
-import { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 /**
  * Props for AuthLayout: optional logo, children (main), footer snippets.
  */

package/dist/types/layout.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,44 +1,49 @@
-{
-  "name": "@ibis-design/svelte",
-  "version": "0.2.0",
-  "description": "Svelte component library for the IBIS design system.",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "svelte": "./dist/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "@ibis-design/css": "^0.2.0",
-    "svelte": "^5.54.0"
-  },
-  "devDependencies": {
-    "@ibis-design/css": "0.3.0",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@types/node": "25.6.0",
-    "svelte": "5.55.3",
-    "svelte-check": "^4.4.6",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.8",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "dev": "vite build --watch"
-  },
-  "dependencies": {
-    "@solar-icons/svelte": "^1.1.0"
-  }
-}
+{
+  "name": "@ibis-design/svelte",
+  "version": "0.6.0",
+  "description": "Svelte component library for the IBIS design system.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@ibis-design/css": "^0.6.0",
+    "svelte": "^5.54.0"
+  },
+  "devDependencies": {
+    "@ibis-design/css": "0.6.0",
+    "@sveltejs/adapter-auto": "7.0.1",
+    "@sveltejs/kit": "2.59.1",
+    "@sveltejs/package": "2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@types/node": "25.7.0",
+    "svelte": "5.55.5",
+    "svelte-check": "^4.4.8",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.12"
+  },
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package",
+    "prepublishOnly": "npm run build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "dev": "svelte-package -w"
+  },
+  "dependencies": {
+    "@solar-icons/svelte": "^1.1.0"
+  }
+}

package/dist/index.css

@@ -1 +0,0 @@
-.ibis-button.svelte-1v1p7k6{font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);border:var(--border-width-default) solid transparent;cursor:pointer;transition:filter var(--transition-duration-fast) var(--transition-timing-default), transform var(--transition-duration-fast) var(--transition-timing-default), box-shadow var(--transition-duration-fast) var(--transition-timing-default);justify-content:center;align-items:center;display:inline-flex}.ibis-button.svelte-1v1p7k6 svg{gap:var(--spacing-2);width:1em;height:1em;display:block}.ibis-button__content.svelte-1v1p7k6{justify-content:center;align-items:center;gap:var(--spacing-1);display:inline-flex}.ibis-button__content--hidden.svelte-1v1p7k6{visibility:hidden}.ibis-button--icon-only.svelte-1v1p7k6{padding:var(--spacing-2)}.ibis-button--icon-only.svelte-1v1p7k6 .ibis-button__content:where(.svelte-1v1p7k6){gap:0}.ibis-button.svelte-1v1p7k6:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.ibis-button--loading.svelte-1v1p7k6{cursor:not-allowed;pointer-events:none;position:relative}.ibis-button--primary.svelte-1v1p7k6{color:var(--color-white);background:linear-gradient(#9665df 0%,#7945c8 100%);border:.5px solid #bd91ff;box-shadow:inset 0 3px 4px #dfeeff1a,inset 0 1px 1px #ffffff1a}.ibis-button--primary.svelte-1v1p7k6:not(:disabled):hover,.ibis-button--primary.svelte-1v1p7k6:not(:disabled):active{box-shadow:none}.ibis-button--primary.svelte-1v1p7k6:not(:disabled):hover{background:var(--color-primary-500);border-color:none;border-width:.7 px}.ibis-button--primary.svelte-1v1p7k6:not(:disabled):active{background:var(--color-primary-500);border-color:var(--color-primary-400);border-width:var(--border-width-thin)}.ibis-button--primary.svelte-1v1p7k6:disabled{background:var(--color-neutral-400);color:var(--color-neutral-600);border-color:var(--color-neutral-600)}.ibis-button--secondary.svelte-1v1p7k6{color:var(--color-primary-pink-500);border-color:var(--color-primary-pink-700);background-color:#0000}.ibis-button--secondary.svelte-1v1p7k6:not(:disabled):hover{background-color:var(--color-primary-pink-100)}.ibis-button--sm.svelte-1v1p7k6{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-normal-text-sm);border-radius:12px}.ibis-button--md.svelte-1v1p7k6{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-normal-text-DEFAULT);border-radius:12px}.ibis-button--lg.svelte-1v1p7k6{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-normal-text-lg);border-radius:16px}.ibis-button__loader.svelte-1v1p7k6{border:var(--border-width-default) solid #0d0d0d;border-top-color:#fafafa;border-radius:50%;width:1em;height:1em;animation:.8s linear infinite svelte-1v1p7k6-ibis-spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes svelte-1v1p7k6-ibis-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.ibis-button--skeleton.svelte-1v1p7k6{background:var(--color-neutral-200);color:#0000;border-color:var(--color-neutral-500);cursor:default;pointer-events:none;position:relative;overflow:hidden}.ibis-button--skeleton.svelte-1v1p7k6:after{content:"";background-color:var(--color-neutral-400);width:80%;height:1em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ibis-button--icon-only--skeleton.svelte-1v1p7k6:after{border-radius:4px;width:1em;height:1em}.ibis-button--skeleton.svelte-1v1p7k6:before{content:"";border-radius:inherit;background:linear-gradient(90deg,#ffffff40 0%,#fff9 50%,#ffffff40 100%);animation:2s infinite svelte-1v1p7k6-ibis-shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes svelte-1v1p7k6-ibis-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.dropdown-button.svelte-1k6ufrd{display:inline-block;position:relative}.caret.svelte-1k6ufrd{width:1em;height:1em;margin-left:.25em}.dropdown-menu.svelte-1k6ufrd{border:1px solid var(--color-neutral-300);border-radius:var(--border-radius-DEFAULT);z-index:1000;background:#fff;flex-direction:column;min-width:160px;margin-top:4px;padding:4px;display:flex;position:absolute;top:100%;left:0;box-shadow:0 4px 8px #0000001a}.dropdown-menu.svelte-1k6ufrd button{all:unset;cursor:pointer;border-radius:4px;padding:8px}.dropdown-menu.svelte-1k6ufrd button:hover{background-color:var(--color-neutral-100)}.ibis-card.svelte-1x2pm77{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-o80avj{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-o80avj{margin-bottom:var(--spacing-8)}.ibis-auth-layout__main.svelte-o80avj{flex:0 auto;width:100%;max-width:24rem}.ibis-auth-layout__footer.svelte-o80avj{margin-top:var(--spacing-8);font-size:var(--font-size-normal-text-sm);color:var(--color-neutral-600)}.ibis-app-layout.svelte-1m3kzz8{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-1m3kzz8{z-index:var(--z-index-sticky);flex:none}.ibis-app-layout__body.svelte-1m3kzz8{flex:auto;min-height:0;display:flex}.ibis-app-layout__sidebar.svelte-1m3kzz8{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-1m3kzz8{padding:var(--spacing-6);flex:auto;overflow:auto}.ibis-app-layout__footer.svelte-1m3kzz8{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-nudbol{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-nudbol{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-nudbol{flex:auto;min-height:0;display:flex}.ibis-dashboard-layout__sidebar.svelte-nudbol{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-nudbol{padding:var(--spacing-6);flex:auto;overflow:auto}.ibis-dashboard-layout__footer.svelte-nudbol{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}