@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/dist/components/Spinner.svelte

@@ -0,0 +1,24 @@
+<script>
+  // Spinner — an inline loading indicator. Sizes to the surrounding text
+  // by default (1em) and uses currentColor, so it works inside a button,
+  // next to text, or standalone. Not a full-screen overlay.
+  let {
+    size  = undefined,     // e.g. '1rem', '20px'; defaults to 1em (matches text)
+    label = 'Loading',     // accessible label
+    ...restProps
+  } = $props();
+</script>
+
+<span
+  class="spinner"
+  role="status"
+  aria-label={label}
+  style:width={size}
+  style:height={size}
+  {...restProps}
+>
+  <svg class="spinner-svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <circle class="spinner-track" cx="12" cy="12" r="9" stroke-width="3" />
+    <path class="spinner-head" d="M21 12a9 9 0 0 0-9-9" stroke-width="3" stroke-linecap="round" />
+  </svg>
+</span>

package/dist/components/Spinner.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Spinner;
+type Spinner = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Spinner: import("svelte").Component<{
+    size?: any;
+    label?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    size?: any;
+    label?: string;
+} & Record<string, any>;

package/dist/components/Table.svelte

@@ -0,0 +1,100 @@
+<script>
+  // Table — a data table with optional column sorting, custom cell
+  // rendering, and an empty state.
+  //
+  // columns: [{ key, label, sortable?, align?, width? }]
+  // rows:    array of objects keyed by column.key
+  // cell:    optional snippet(row, column) for custom cell content
+  // Sorting is client-side and non-destructive (does not mutate `rows`).
+
+  let {
+    columns   = [],
+    rows      = [],
+    cell,                       // snippet(row, column)
+    sortable  = false,          // enable sorting globally (per-column overrides)
+    emptyText = 'No data',
+    striped   = false,
+    ...restProps
+  } = $props();
+
+  let sortKey = $state(null);
+  let sortDir = $state('asc');  // 'asc' | 'desc'
+
+  function canSort(col) {
+    return col.sortable ?? sortable;
+  }
+
+  function toggleSort(col) {
+    if (!canSort(col)) return;
+    if (sortKey === col.key) {
+      sortDir = sortDir === 'asc' ? 'desc' : 'asc';
+    } else {
+      sortKey = col.key;
+      sortDir = 'asc';
+    }
+  }
+
+  let sortedRows = $derived.by(() => {
+    if (!sortKey) return rows;
+    const copy = [...rows];
+    copy.sort((a, b) => {
+      const av = a[sortKey], bv = b[sortKey];
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      let cmp;
+      if (typeof av === 'number' && typeof bv === 'number') cmp = av - bv;
+      else cmp = String(av).localeCompare(String(bv), undefined, { numeric: true });
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+    return copy;
+  });
+</script>
+
+<div class="table-wrapper" {...restProps}>
+  <table class="table" class:table-striped={striped}>
+    <thead>
+      <tr>
+        {#each columns as col}
+          <th
+            style:text-align={col.align ?? 'left'}
+            style:width={col.width}
+            class:table-th-sortable={canSort(col)}
+            aria-sort={sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}
+          >
+            {#if canSort(col)}
+              <button type="button" class="table-sort-btn" onclick={() => toggleSort(col)}>
+                {col.label}
+                <span class="material-symbols-outlined table-sort-icon" class:active={sortKey === col.key}>
+                  {sortKey === col.key ? (sortDir === 'asc' ? 'arrow_upward' : 'arrow_downward') : 'unfold_more'}
+                </span>
+              </button>
+            {:else}
+              {col.label}
+            {/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if sortedRows.length === 0}
+        <tr>
+          <td class="table-empty" colspan={columns.length}>{emptyText}</td>
+        </tr>
+      {:else}
+        {#each sortedRows as row}
+          <tr>
+            {#each columns as col}
+              <td style:text-align={col.align ?? 'left'}>
+                {#if cell}
+                  {@render cell(row, col)}
+                {:else}
+                  {row[col.key]}
+                {/if}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+</div>

package/dist/components/Table.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Table;
+type Table = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Table: import("svelte").Component<{
+    columns?: any[];
+    rows?: any[];
+    cell: any;
+    sortable?: boolean;
+    emptyText?: string;
+    striped?: boolean;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    columns?: any[];
+    rows?: any[];
+    cell: any;
+    sortable?: boolean;
+    emptyText?: string;
+    striped?: boolean;
+} & Record<string, any>;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { theme } from '../theme/theme.svelte.js';
+
+  let {
+    class: className = '',
+    ...restProps
+  } = $props();
+</script>
+
+<button
+  class="btn btn-ghost btn-icon theme-toggle {className}"
+  onclick={() => theme.toggle()}
+  aria-label={theme.isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+  title={theme.isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+  {...restProps}
+>
+  {#if theme.isDark}
+    <span class="material-symbols-outlined">light_mode</span>
+  {:else}
+    <span class="material-symbols-outlined">dark_mode</span>
+  {/if}
+</button>

package/dist/components/ThemeToggle.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ThemeToggle;
+type ThemeToggle = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ThemeToggle: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+} & Record<string, any>;

package/dist/components/Tooltip.svelte

@@ -0,0 +1,45 @@
+<script>
+  // Tooltip — wraps a trigger and shows a small label on hover/focus.
+  // Pure CSS positioning (no floating-lib dependency); good for short hints.
+  //
+  // Usage:
+  //   <Tooltip text="Delete" position="top">
+  //     <button>…</button>
+  //   </Tooltip>
+  let {
+    text,
+    position = 'top',          // 'top' | 'bottom' | 'left' | 'right'
+    children,
+    ...restProps
+  } = $props();
+
+  let open = $state(false);
+  let id = `tt-${Math.random().toString(36).slice(2, 9)}`;
+
+  function show() { open = true; }
+  function hide() { open = false; }
+</script>
+
+<span
+  class="tooltip-wrap"
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
+  aria-describedby={open ? id : undefined}
+  {...restProps}
+>
+  {@render children?.()}
+
+  {#if text}
+    <span
+      {id}
+      role="tooltip"
+      class="tooltip tooltip-{position}"
+      class:open
+      aria-hidden={!open}
+    >
+      {text}
+    </span>
+  {/if}
+</span>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Tooltip;
+type Tooltip = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Tooltip: import("svelte").Component<{
+    text: any;
+    position?: string;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    text: any;
+    position?: string;
+    children: any;
+} & Record<string, any>;

package/dist/css/base/root.css

@@ -0,0 +1,103 @@
+/* base/root.css
+   Structural resets + element defaults.
+   Consumes tokens via var() but never defines them — token values
+   live in the overlay layer (overlay/default.css or a custom theme). */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  height: 100%;
+}
+
+body {
+  font-family:      var(--font-sans);
+  font-size:        var(--text-base);
+  font-weight:      450;
+  line-height:      var(--leading-normal);
+  color:            var(--color-text);
+  background-color: var(--color-bg);
+  height:           100%;
+  margin:           0;
+  padding:          0;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight:    var(--font-semibold);
+  line-height:    var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color:          var(--color-text);
+  margin:         0;
+}
+
+h1 { font-size: var(--text-3xl); }
+h2 { font-size: var(--text-2xl); }
+h3 { font-size: var(--text-xl);  }
+h4 { font-size: var(--text-lg);  }
+h5 { font-size: var(--text-base); font-weight: var(--font-medium); }
+h6 { font-size: var(--text-sm);   font-weight: var(--font-medium); }
+
+p {
+  line-height: var(--leading-normal);
+  margin:      0;
+}
+
+a {
+  color:           var(--color-primary);
+  text-decoration: none;
+  transition:      color var(--duration-fast) var(--ease-default);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+small {
+  font-size: var(--text-sm);
+  color:     var(--color-text-muted);
+}
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size:   var(--text-sm);
+}
+
+code {
+  background:    var(--color-bg-subtle);
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding:       0 var(--space-1);
+}
+
+hr {
+  border:     none;
+  border-top: 1px solid var(--color-border);
+  margin:     var(--space-6) 0;
+}
+
+ul, ol {
+  padding-left: var(--space-6);
+}
+
+img, picture, video, canvas, svg {
+  display:   block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* Utility */
+.text-muted   { color: var(--color-text-muted);  }
+.text-subtle  { color: var(--color-text-subtle); }
+.text-sm      { font-size: var(--text-sm);       }
+.text-xs      { font-size: var(--text-xs);       }
+.text-lg      { font-size: var(--text-lg);       }
+.text-bold    { font-weight: var(--font-bold);   }
+.text-medium  { font-weight: var(--font-medium); }
+.text-right   { text-align: right;               }
+.text-center  { text-align: center;              }

package/dist/css/base.css

@@ -0,0 +1,47 @@
+/* base.css — STRUCTURAL ENTRY POINT (no token values)
+   ──────────────────────────────────────────────────────────────
+   All structure: resets, layout, component anatomy. Every color /
+   size / shadow here is a var() reference. This file defines NO
+   token values — pair it with an overlay (overlay/default.css or a
+   generated theme.css) that supplies them.
+
+   Load order in a project:
+     1. your overlay (theme.css)  → defines the tokens
+     2. base.css                  → consumes them
+   index.css below bundles the default overlay + this base together.
+   ────────────────────────────────────────────────────────────── */
+
+/* Base */
+@import './base/root.css';
+
+/* Layout */
+@import './layout/container.css';
+@import './layout/grid.css';
+@import './layout/shell.css';
+
+/* Components */
+@import './components/button.css';
+@import './components/card.css';
+@import './components/nav.css';
+@import './components/sidebar.css';
+@import './components/form.css';
+@import './components/modal.css';
+@import './components/accordion.css';
+@import './components/login.css';
+@import './components/badge.css';
+@import './components/divider.css';
+@import './components/table.css';
+@import './components/alert.css';
+@import './components/checkbox-radio.css';
+@import './components/dropdown.css';
+@import './components/spinner.css';
+@import './components/tooltip.css';
+@import './components/progress.css';
+@import './components/pagination.css';
+@import './components/calendar.css';
+@import './components/topbar-layout.css';
+@import './components/nestable.css';
+@import './components/collapsible.css';
+
+/* Icons */
+@import './icons/icons.css';

package/dist/css/components/accordion.css

@@ -0,0 +1,151 @@
+/* components/accordion.css */
+
+/* --- Container --- */
+
+.accordion {
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow:      hidden;
+}
+
+.accordion-flush    { border: none; border-radius: 0; }
+
+
+/* --- Item --- */
+
+.accordion-item { border-bottom: 1px solid var(--color-border); }
+.accordion-item:last-child { border-bottom: none; }
+
+
+/* --- Trigger --- */
+
+.accordion-trigger {
+  width:            100%;
+  display:          flex;
+  align-items:      center;
+  justify-content:  space-between;
+  gap:              var(--space-4);
+  padding:          var(--space-4) var(--space-5);
+  background-color: var(--color-surface);
+  border:           none;
+  cursor:           pointer;
+  text-align:       left;
+  font-family:      var(--font-sans);
+  font-size:        var(--text-sm);
+  font-weight:      var(--font-medium);
+  color:            var(--color-text);
+  transition:       background-color var(--duration-fast) var(--ease-default);
+  user-select:      none;
+}
+
+.accordion-trigger:hover { background-color: var(--color-bg-subtle); }
+
+.accordion-trigger:focus-visible {
+  outline:        2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.accordion-item.open > .accordion-trigger {
+  background-color: var(--color-bg-subtle);
+  color:            var(--color-primary);
+}
+
+
+/* --- Trigger content --- */
+
+.accordion-trigger-content {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-3);
+  flex:        1;
+  min-width:   0;
+}
+
+.accordion-icon { color: var(--color-text-muted); font-size: 1.1rem; flex-shrink: 0; }
+.accordion-item.open > .accordion-trigger .accordion-icon { color: var(--color-primary); }
+
+.accordion-title    { font-size: var(--text-sm); font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.accordion-subtitle { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-normal); margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+
+/* --- Chevron --- */
+
+.accordion-chevron {
+  font-size:   1.1rem;
+  color:       var(--color-text-subtle);
+  flex-shrink: 0;
+  transition:  transform var(--duration-normal) var(--ease-default),
+               color     var(--duration-fast)   var(--ease-default);
+}
+
+.accordion-item.open > .accordion-trigger .accordion-chevron {
+  transform: rotate(180deg);
+  color:     var(--color-primary);
+}
+
+
+/* --- Body --- */
+
+.accordion-body {
+  overflow:   hidden;
+  height:     0;
+  transition: height var(--duration-normal) var(--ease-default);
+}
+
+.accordion-body-inner {
+  padding:     var(--space-4) var(--space-5);
+  padding-top: 0;
+  font-size:   var(--text-sm);
+  color:       var(--color-text-muted);
+  line-height: var(--leading-relaxed);
+  border-top:  1px solid var(--color-border);
+}
+
+.accordion-body-inner-padded { padding-top: var(--space-4); }
+
+
+/* --- Badge --- */
+
+.accordion-badge {
+  margin-left:      auto;
+  background-color: var(--color-slate-100);
+  color:            var(--color-text-muted);
+  font-size:        var(--text-xs);
+  font-weight:      var(--font-semibold);
+  padding:          0 var(--space-2);
+  border-radius:    var(--radius-full);
+  flex-shrink:      0;
+  line-height:      1.6;
+}
+
+.accordion-item.open .accordion-badge {
+  background-color: var(--color-primary);
+  color:            var(--color-primary-text);
+}
+
+
+/* --- Variants --- */
+
+.accordion-separated {
+  border:     none;
+  background: transparent;
+  display:    flex;
+  flex-direction: column;
+  gap:        var(--space-2);
+}
+
+.accordion-separated .accordion-item {
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow:      hidden;
+}
+
+.accordion-separated .accordion-item.open {
+  border-color: var(--color-primary);
+  box-shadow:   0 0 0 3px rgb(37 99 235 / 0.08);
+}
+
+.accordion-minimal { border: none; }
+.accordion-minimal .accordion-item { border-bottom: 1px solid var(--color-border); }
+.accordion-minimal .accordion-trigger  { padding-left: 0; padding-right: 0; }
+.accordion-minimal .accordion-body-inner { padding-left: 0; padding-right: 0; }

package/dist/css/components/alert.css

@@ -0,0 +1,56 @@
+/* components/alert.css */
+
+.alert {
+  display:       flex;
+  align-items:   flex-start;
+  gap:           var(--space-3);
+  padding:       var(--space-4);
+  border-radius: var(--radius-md);
+  border:        1px solid transparent;
+  font-size:     var(--text-sm);
+}
+
+.alert-icon {
+  flex-shrink: 0;
+  font-size:   1.1rem;
+  line-height: 1.5;
+}
+
+.alert-content { flex: 1; min-width: 0; }
+
+.alert-title {
+  font-weight:   var(--font-semibold);
+  margin-bottom: var(--space-1);
+}
+
+.alert-message {
+  color:       inherit;
+  opacity:     0.85;
+  line-height: var(--leading-relaxed);
+}
+
+/* --- Variants --- */
+
+.alert-info {
+  background-color: var(--color-info-bg);
+  border-color:     var(--color-info);
+  color:            var(--color-info);
+}
+
+.alert-success {
+  background-color: var(--color-success-bg);
+  border-color:     var(--color-success);
+  color:            var(--color-success);
+}
+
+.alert-warning {
+  background-color: var(--color-warning-bg);
+  border-color:     var(--color-warning);
+  color:            var(--color-warning);
+}
+
+.alert-error {
+  background-color: var(--color-error-bg);
+  border-color:     var(--color-error);
+  color:            var(--color-error);
+}

package/dist/css/components/badge.css

@@ -0,0 +1,56 @@
+/* components/badge.css */
+
+.badge {
+  display:       inline-flex;
+  align-items:   center;
+  gap:           var(--space-1);
+  padding:       0.125rem var(--space-2);
+  font-size:     var(--text-xs);
+  font-weight:   var(--font-semibold);
+  border-radius: var(--radius-full);
+  line-height:   1.6;
+  white-space:   nowrap;
+}
+
+/* --- Variants --- */
+
+.badge-default {
+  background-color: var(--color-slate-100);
+  color:            var(--color-slate-600);
+}
+
+.badge-primary {
+  background-color: var(--color-primary);
+  color:            white;
+}
+
+.badge-success {
+  background-color: var(--color-success-bg);
+  color:            var(--color-success);
+}
+
+.badge-warning {
+  background-color: var(--color-warning-bg);
+  color:            var(--color-warning);
+}
+
+.badge-error {
+  background-color: var(--color-error-bg);
+  color:            var(--color-error);
+}
+
+.badge-info {
+  background-color: var(--color-info-bg);
+  color:            var(--color-info);
+}
+
+/* Dot indicator */
+.badge-dot::before {
+  content:          '';
+  display:          inline-block;
+  width:            0.4rem;
+  height:           0.4rem;
+  border-radius:    var(--radius-full);
+  background-color: currentColor;
+  flex-shrink:      0;
+}