@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/dist/css/layout/shell.css

@@ -0,0 +1,185 @@
+/* layout/shell.css */
+
+.shell {
+  display:        grid;
+  grid-template:
+    "header  header"  var(--shell-header-height)
+    "sidebar content" 1fr
+    / var(--shell-sidebar-width) 1fr;
+  min-height: 100vh;
+
+  --shell-header-height:  3.5rem;
+  --shell-sidebar-width:  15rem;
+}
+
+
+/* --- Header --- */
+
+.shell-header {
+  grid-area:        header;
+  display:          flex;
+  align-items:      center;
+  justify-content:  space-between;
+  padding:          0 var(--space-6);
+  background-color: var(--color-header-bg);
+  color:            var(--color-text-inverse);
+  border-bottom:    1px solid var(--color-header-border);
+  position:         sticky;
+  top:              0;
+  z-index:          100;
+  gap:              var(--space-4);
+}
+
+.shell-header-brand {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-3);
+  font-size:   var(--text-base);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text-inverse);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.shell-header-brand img {
+  height: 1.75rem;
+  width:  auto;
+}
+
+.shell-header-center {
+  flex:        1;
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+}
+
+.shell-header-actions {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+  flex-shrink: 0;
+}
+
+.shell-header .btn-ghost {
+  color: var(--color-slate-300);
+}
+
+.shell-header .btn-ghost:hover {
+  background-color: rgba(255 255 255 / 0.08);
+  color:            var(--color-text-inverse);
+}
+
+
+/* --- Sidebar --- */
+
+.shell-sidebar {
+  grid-area:        sidebar;
+  background-color: var(--color-surface);
+  border-right:     1px solid var(--color-border);
+  display:          flex;
+  flex-direction:   column;
+  position:         sticky;
+  top:              var(--shell-header-height);
+  height:           calc(100vh - var(--shell-header-height));
+  overflow-y:       auto;
+  overflow-x:       hidden;
+}
+
+.shell-sidebar-section {
+  padding: var(--space-4) var(--space-3);
+}
+
+.shell-sidebar-section + .shell-sidebar-section {
+  border-top: 1px solid var(--color-border);
+}
+
+.shell-sidebar-label {
+  font-size:      var(--text-xs);
+  font-weight:    var(--font-semibold);
+  color:          var(--color-text-subtle);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  padding:        0 var(--space-3);
+  margin-bottom:  var(--space-2);
+}
+
+.shell-sidebar-footer {
+  margin-top:  auto;
+  padding:     var(--space-4) var(--space-3);
+  border-top:  1px solid var(--color-border);
+}
+
+
+/* --- Content --- */
+
+.shell-content {
+  grid-area:  content;
+  overflow-y: auto;
+  background: var(--color-bg);
+}
+
+.shell-content-inner {
+  padding:   var(--space-6);
+  max-width: 72rem;
+}
+
+.shell-content-inner-full {
+  padding:   var(--space-6);
+  max-width: none;
+}
+
+
+/* --- Page header --- */
+
+.page-header {
+  display:         flex;
+  align-items:     flex-start;
+  justify-content: space-between;
+  margin-bottom:   var(--space-6);
+  gap:             var(--space-4);
+}
+
+.page-title {
+  font-size:   var(--text-2xl);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text);
+  margin:      0;
+}
+
+.page-subtitle {
+  font-size:  var(--text-sm);
+  color:      var(--color-text-muted);
+  margin-top: var(--space-1);
+}
+
+.page-header-actions {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+  flex-shrink: 0;
+}
+
+
+/* --- Collapsed sidebar --- */
+
+.shell-collapsed {
+  --shell-sidebar-width: 3.5rem;
+}
+
+.shell-collapsed .shell-sidebar-label,
+.shell-collapsed .nav-label,
+.shell-collapsed .nav-badge,
+.shell-collapsed .nav-chevron,
+.shell-collapsed .accordion-title,
+.shell-collapsed .accordion-subtitle {
+  display: none;
+}
+
+.shell-collapsed .nav-item {
+  justify-content: center;
+  padding:         var(--space-2);
+}
+
+.shell-collapsed .shell-sidebar-section {
+  padding: var(--space-3) var(--space-2);
+}

package/dist/css/overlay/default.css

@@ -0,0 +1,27 @@
+/* overlay/default.css
+   ──────────────────────────────────────────────────────────────
+   THE CUSTOMIZABLE LAYER.
+
+   Everything that defines the *look* of the design system lives here
+   as CSS custom properties: colors, typography, spacing, radius,
+   shadows, transitions — for both light and dark mode.
+
+   The base layer (base/, components/, layout/) only ever *consumes*
+   these tokens via var(). It never defines their values.
+
+   A theme generated by the Theme Builder is a drop-in replacement
+   for this file: same custom-property names, different values.
+
+   To use a custom theme in a real project, load index.css for the
+   base layer, then load your generated theme.css AFTER it:
+
+     <link rel="stylesheet" href="/css/index.css" />
+     <link rel="stylesheet" href="/css/my-theme.css" />   <!-- overrides :root -->
+   ────────────────────────────────────────────────────────────── */
+
+@import '../tokens/colors.css';
+@import '../tokens/typography.css';
+@import '../tokens/spacing.css';
+@import '../tokens/shadows.css';
+@import '../tokens/radius.css';
+@import '../tokens/transitions.css';

package/dist/css/tokens/colors.css

@@ -0,0 +1,81 @@
+/* tokens/colors.css */
+
+:root {
+  /* Slate scale */
+  --color-slate-50:  #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+
+  /* Accent */
+  --color-accent-light: #4f87f5;
+  --color-accent:       #2d6ae0;
+  --color-accent-dark:  #1d58cc;
+
+  /* ── Light mode (default) ── */
+  --color-bg:            #f9fafb;
+  --color-bg-subtle:     #f1f5f9;
+  --color-surface:       #ffffff;
+  --color-border:        #e8edf2;
+  --color-border-strong: #d4dbe4;
+
+  --color-text:          var(--color-slate-900);
+  --color-text-muted:    var(--color-slate-500);
+  --color-text-subtle:   var(--color-slate-400);
+  --color-text-inverse:  #ffffff;
+
+  --color-primary:       var(--color-accent);
+  --color-primary-hover: var(--color-accent-dark);
+  --color-primary-text:  #ffffff;
+
+  /* Header */
+  --color-header-bg:     var(--color-slate-800);
+  --color-header-border: var(--color-slate-700);
+
+  /* Feedback */
+  --color-success:    #16a34a;
+  --color-success-bg: #f0fdf4;
+  --color-warning:    #d97706;
+  --color-warning-bg: #fffbeb;
+  --color-error:      #dc2626;
+  --color-error-bg:   #fef2f2;
+  --color-info:       #0284c7;
+  --color-info-bg:    #f0f9ff;
+}
+
+/* ── Dark mode ── */
+[data-theme="dark"] {
+  --color-bg:            #0f172a;
+  --color-bg-subtle:     #1e293b;
+  --color-surface:       #1e293b;
+  --color-border:        #2d3f55;
+  --color-border-strong: #3d5068;
+
+  --color-text:         #f1f5f9;
+  --color-text-muted:   #94a3b8;
+  --color-text-subtle:  #64748b;
+  --color-text-inverse: #0f172a;
+
+  --color-primary:       #4f87f5;
+  --color-primary-hover: #6b9bf7;
+  --color-primary-text:  #ffffff;
+
+  --color-header-bg:     #0a111e;
+  --color-header-border: #1e293b;
+
+  /* Feedback — slightly brighter for dark backgrounds */
+  --color-success:    #22c55e;
+  --color-success-bg: #052e16;
+  --color-warning:    #f59e0b;
+  --color-warning-bg: #1c1408;
+  --color-error:      #f87171;
+  --color-error-bg:   #2d0a0a;
+  --color-info:       #38bdf8;
+  --color-info-bg:    #0a1f2e;
+}

package/dist/css/tokens/radius.css

@@ -0,0 +1,8 @@
+/* tokens/radius.css */
+
+:root {
+  --radius-sm:   6px;
+  --radius-md:   12px;
+  --radius-lg:   18px;
+  --radius-full: 9999px;
+}

package/dist/css/tokens/shadows.css

@@ -0,0 +1,23 @@
+/* tokens/shadows.css */
+
+:root {
+  /* xs — button resting state */
+  --shadow-xs: 0 2px 4px 0 rgb(15 23 42 / 0.14),
+               0 1px 2px 0 rgb(15 23 42 / 0.08);
+
+  /* sm — cards default */
+  --shadow-sm: 0 4px 10px -2px rgb(15 23 42 / 0.18),
+               0 2px 6px -2px rgb(15 23 42 / 0.10);
+
+  /* md — hover state, raised cards */
+  --shadow-md: 0 12px 24px -6px rgb(15 23 42 / 0.20),
+               0 6px 12px -4px rgb(15 23 42 / 0.12);
+
+  /* lg — modals, dropdowns */
+  --shadow-lg: 0 28px 44px -10px rgb(15 23 42 / 0.24),
+               0 12px 22px -8px rgb(15 23 42 / 0.14);
+
+  /* xl — large modals */
+  --shadow-xl: 0 44px 64px -16px rgb(15 23 42 / 0.28),
+               0 18px 28px -10px rgb(15 23 42 / 0.14);
+}

package/dist/css/tokens/spacing.css

@@ -0,0 +1,30 @@
+/* tokens/spacing.css */
+
+:root {
+  --space-0:  0;
+  --space-1:  0.25rem;  /*  4px */
+  --space-2:  0.5rem;   /*  8px */
+  --space-3:  0.75rem;  /* 12px */
+  --space-4:  1rem;     /* 16px */
+  --space-5:  1.25rem;  /* 20px */
+  --space-6:  1.5rem;   /* 24px */
+  --space-8:  2rem;     /* 32px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+  --space-20: 5rem;     /* 80px */
+
+  /* Semantic gaps */
+  --gap-xs: var(--space-1);
+  --gap-sm: var(--space-2);
+  --gap-md: var(--space-4);
+  --gap-lg: var(--space-6);
+  --gap-xl: var(--space-8);
+
+  /* Semantic padding */
+  --padding-xs: var(--space-2);
+  --padding-sm: var(--space-3);
+  --padding-md: var(--space-4);
+  --padding-lg: var(--space-6);
+  --padding-xl: var(--space-8);
+}

package/dist/css/tokens/transitions.css

@@ -0,0 +1,10 @@
+/* tokens/transitions.css */
+
+:root {
+  --duration-fast:   100ms;
+  --duration-normal: 200ms;
+  --duration-slow:   300ms;
+  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
+  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
+}

package/dist/css/tokens/typography.css

@@ -0,0 +1,44 @@
+/* tokens/typography.css */
+
+/*
+  Inter — loaded from the Google Fonts CDN so the package works with no
+  setup. @import must stay at the top of this file.
+
+  To self-host instead: drop this @import, place Inter.var.woff2 in your
+  app's static/fonts/ directory, and declare your own @font-face for
+  'Inter' (weight 100 900).
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+:root {
+  /* Font families */
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Scale */
+  --text-xs:   0.75rem;   /*  12px */
+  --text-sm:   0.875rem;  /*  14px */
+  --text-base: 1rem;      /*  16px */
+  --text-lg:   1.125rem;  /*  18px */
+  --text-xl:   1.25rem;   /*  20px */
+  --text-2xl:  1.5rem;    /*  24px */
+  --text-3xl:  1.875rem;  /*  30px */
+
+  /* Weights */
+  --font-normal:   400;
+  --font-medium:   500;
+  --font-semibold: 600;
+  --font-bold:     700;
+
+  /* Line heights */
+  --leading-tight:   1.25;
+  --leading-snug:    1.375;
+  --leading-normal:  1.5;
+  --leading-relaxed: 1.625;
+
+  /* Letter spacing */
+  --tracking-tight:  -0.01em;
+  --tracking-normal:  0;
+  --tracking-wide:    0.02em;
+  --tracking-wider:   0.05em;
+}

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+export { default as Shell } from "./layout/Shell.svelte";
+export { default as NavItem } from "./layout/NavItem.svelte";
+export { default as SidebarProfile } from "./layout/SidebarProfile.svelte";
+export { default as Button } from "./components/Button.svelte";
+export { default as Card } from "./components/Card.svelte";
+export { default as Badge } from "./components/Badge.svelte";
+export { default as Alert } from "./components/Alert.svelte";
+export { default as Modal } from "./components/Modal.svelte";
+export { default as ConfirmDialog } from "./components/ConfirmDialog.svelte";
+export { default as Accordion } from "./components/Accordion.svelte";
+export { default as AccordionItem } from "./components/AccordionItem.svelte";
+export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
+export { default as Dropdown } from "./components/Dropdown.svelte";
+export { default as Table } from "./components/Table.svelte";
+export { default as Spinner } from "./components/Spinner.svelte";
+export { default as Tooltip } from "./components/Tooltip.svelte";
+export { default as Divider } from "./components/Divider.svelte";
+export { default as Progress } from "./components/Progress.svelte";
+export { default as Pagination } from "./components/Pagination.svelte";
+export { default as Calendar } from "./components/Calendar.svelte";
+export { default as DatePicker } from "./components/DatePicker.svelte";
+export { default as Chevron } from "./components/Chevron.svelte";
+export { default as Collapsible } from "./components/Collapsible.svelte";
+export { default as Field } from "./components/Form/Field.svelte";
+export { default as Input } from "./components/Form/Input.svelte";
+export { default as Select } from "./components/Form/Select.svelte";
+export { default as Toggle } from "./components/Form/Toggle.svelte";
+export { default as Checkbox } from "./components/Form/Checkbox.svelte";
+export { default as Radio } from "./components/Form/Radio.svelte";
+export { default as RadioGroup } from "./components/Form/RadioGroup.svelte";
+export { default as Textarea } from "./components/Form/Textarea.svelte";
+export { default as MaskedInput } from "./components/Form/MaskedInput.svelte";
+export { theme } from "./theme/theme.svelte.js";
+export { default as TopBar } from "./layouts/TopBar.svelte";
+export { default as SideBar } from "./layouts/SideBar.svelte";
+export { default as TopBarLayout } from "./layouts/TopBarLayout.svelte";
+export { default as LeftBarLayout } from "./layouts/LeftBarLayout.svelte";
+export { default as RightBarLayout } from "./layouts/RightBarLayout.svelte";
+export { default as BottomBarLayout } from "./layouts/BottomBarLayout.svelte";
+export { default as IconRailLayout } from "./layouts/IconRailLayout.svelte";
+export { default as FloatingTopLayout } from "./layouts/FloatingTopLayout.svelte";
+export { default as FloatingLeftLayout } from "./layouts/FloatingLeftLayout.svelte";
+export { default as FloatingDockLayout } from "./layouts/FloatingDockLayout.svelte";

package/dist/index.js

@@ -0,0 +1,52 @@
+// Layout
+export { default as Shell }          from './layout/Shell.svelte';
+export { default as NavItem }        from './layout/NavItem.svelte';
+export { default as SidebarProfile } from './layout/SidebarProfile.svelte';
+
+// Components
+export { default as Button }         from './components/Button.svelte';
+export { default as Card }           from './components/Card.svelte';
+export { default as Badge }          from './components/Badge.svelte';
+export { default as Alert }          from './components/Alert.svelte';
+export { default as Modal }          from './components/Modal.svelte';
+export { default as ConfirmDialog }  from './components/ConfirmDialog.svelte';
+export { default as Accordion }      from './components/Accordion.svelte';
+export { default as AccordionItem }  from './components/AccordionItem.svelte';
+export { default as ThemeToggle }    from './components/ThemeToggle.svelte';
+export { default as Dropdown }       from './components/Dropdown.svelte';
+export { default as Table }          from './components/Table.svelte';
+export { default as Spinner }        from './components/Spinner.svelte';
+export { default as Tooltip }        from './components/Tooltip.svelte';
+export { default as Divider }        from './components/Divider.svelte';
+export { default as Progress }       from './components/Progress.svelte';
+export { default as Pagination }     from './components/Pagination.svelte';
+export { default as Calendar }       from './components/Calendar.svelte';
+export { default as DatePicker }     from './components/DatePicker.svelte';
+export { default as Chevron }        from './components/Chevron.svelte';
+export { default as Collapsible }    from './components/Collapsible.svelte';
+
+// Form
+export { default as Field }          from './components/Form/Field.svelte';
+export { default as Input }          from './components/Form/Input.svelte';
+export { default as Select }         from './components/Form/Select.svelte';
+export { default as Toggle }         from './components/Form/Toggle.svelte';
+export { default as Checkbox }       from './components/Form/Checkbox.svelte';
+export { default as Radio }          from './components/Form/Radio.svelte';
+export { default as RadioGroup }     from './components/Form/RadioGroup.svelte';
+export { default as Textarea }       from './components/Form/Textarea.svelte';
+export { default as MaskedInput }    from './components/Form/MaskedInput.svelte';
+
+// Theme
+export { theme } from './theme/theme.svelte.js';
+
+// Layouts (importable app shells)
+export { default as TopBar }         from './layouts/TopBar.svelte';
+export { default as SideBar }        from './layouts/SideBar.svelte';
+export { default as TopBarLayout }   from './layouts/TopBarLayout.svelte';
+export { default as LeftBarLayout }  from './layouts/LeftBarLayout.svelte';
+export { default as RightBarLayout } from './layouts/RightBarLayout.svelte';
+export { default as BottomBarLayout } from './layouts/BottomBarLayout.svelte';
+export { default as IconRailLayout } from './layouts/IconRailLayout.svelte';
+export { default as FloatingTopLayout } from './layouts/FloatingTopLayout.svelte';
+export { default as FloatingLeftLayout } from './layouts/FloatingLeftLayout.svelte';
+export { default as FloatingDockLayout } from './layouts/FloatingDockLayout.svelte';

package/dist/layout/NavItem.svelte

@@ -0,0 +1,84 @@
+<script>
+  let {
+    href     = undefined,
+    icon     = undefined,
+    badge    = undefined,
+    active   = false,
+    children,          // snippet: the label content
+    subItems = undefined,  // optional array of { href, icon, label }
+    isActive = undefined,  // (href) => boolean, used to mark active sub-items
+    initialOpen = false,
+    ...restProps
+  } = $props();
+
+  const hasSub = $derived(Array.isArray(subItems) && subItems.length > 0);
+
+  // Expansion state for the second level (vertical, inline).
+  let open = $state(initialOpen);
+
+  // Auto-open if a child is active.
+  $effect(() => {
+    if (hasSub && isActive && subItems.some((s) => isActive(s.href))) {
+      open = true;
+    }
+  });
+
+  function toggle(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    open = !open;
+  }
+</script>
+
+<div class="nav-item-wrap">
+  {#if href}
+    <a {href} class="nav-item" class:active {...restProps}>
+      {#if icon}<span class="material-symbols-outlined nav-icon">{icon}</span>{/if}
+      <span class="nav-label">{@render children?.()}</span>
+      {#if badge !== undefined}<span class="nav-badge">{badge}</span>{/if}
+      {#if hasSub}
+        <button
+          type="button"
+          class="nav-chevron"
+          class:open
+          aria-label={open ? 'Collapse' : 'Expand'}
+          aria-expanded={open}
+          onclick={toggle}
+        >
+          <span class="material-symbols-outlined">chevron_right</span>
+        </button>
+      {/if}
+    </a>
+  {:else}
+    <button
+      class="nav-item"
+      class:active
+      onclick={hasSub ? (() => (open = !open)) : restProps.onclick}
+      {...restProps}
+    >
+      {#if icon}<span class="material-symbols-outlined nav-icon">{icon}</span>{/if}
+      <span class="nav-label">{@render children?.()}</span>
+      {#if badge !== undefined}<span class="nav-badge">{badge}</span>{/if}
+      {#if hasSub}
+        <span class="nav-chevron" class:open aria-hidden="true">
+          <span class="material-symbols-outlined">chevron_right</span>
+        </span>
+      {/if}
+    </button>
+  {/if}
+
+  {#if hasSub && open}
+    <div class="nav-subitems">
+      {#each subItems as sub}
+        <a
+          href={sub.href}
+          class="nav-subitem"
+          class:active={isActive ? isActive(sub.href) : false}
+        >
+          {#if sub.icon}<span class="material-symbols-outlined nav-subicon">{sub.icon}</span>{/if}
+          <span>{sub.label}</span>
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/layout/NavItem.svelte.d.ts

@@ -0,0 +1,25 @@
+export default NavItem;
+type NavItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const NavItem: import("svelte").Component<{
+    href?: any;
+    icon?: any;
+    badge?: any;
+    active?: boolean;
+    children: any;
+    subItems?: any;
+    isActive?: any;
+    initialOpen?: boolean;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    href?: any;
+    icon?: any;
+    badge?: any;
+    active?: boolean;
+    children: any;
+    subItems?: any;
+    isActive?: any;
+    initialOpen?: boolean;
+} & Record<string, any>;

package/dist/layout/Shell.svelte

@@ -0,0 +1,7 @@
+<script>
+  let { collapsed = false, children } = $props();
+</script>
+
+<div class="shell" class:shell-collapsed={collapsed}>
+  {@render children?.()}
+</div>

package/dist/layout/Shell.svelte.d.ts

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

package/dist/layout/SidebarProfile.svelte

@@ -0,0 +1,31 @@
+<script>
+  let {
+    name      = '',
+    role      = '',
+    initials  = '',
+    avatarSrc = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  let display = $derived(initials || name.slice(0, 2).toUpperCase());
+</script>
+
+<div class="sidebar-profile" {...restProps}>
+  <div class="sidebar-avatar">
+    {#if avatarSrc}
+      <img src={avatarSrc} alt={name} />
+    {:else}
+      {display}
+    {/if}
+  </div>
+  <div class="sidebar-profile-info">
+    <div class="sidebar-profile-name">{name}</div>
+    <div class="sidebar-profile-role">{role}</div>
+  </div>
+  {#if children}
+    {@render children()}
+  {:else}
+    <span class="material-symbols-outlined sidebar-profile-action">more_vert</span>
+  {/if}
+</div>