@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/README.md

@@ -1,3 +1,138 @@
-# Temporary Holding Version
+# SvelteKitchen
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A themeable **Svelte 5** component library with a bundled CSS design system, a
+light/dark theme engine, and ready-made application layouts.
+
+- **Docs & live examples:** https://sveltekitchen.net
+- **Package:** [`@sveltekitchen/sveltekitchen`](https://www.npmjs.com/package/@sveltekitchen/sveltekitchen)
+
+Everything is built on runes (`$props`, `$state`, `$derived`, `$bindable`) and
+plain CSS custom properties — no Tailwind, no Sass, no CSS-in-JS.
+
+> **Svelte 5 only.** This is a native Svelte component library — it is not a
+> React, Vue, or web-components package, and there are no plans to port it.
+> The one exception is the stylesheet: the bundled CSS design system is
+> framework-agnostic and can be used on its own in any project.
+
+## Install
+
+```bash
+npm install @sveltekitchen/sveltekitchen
+```
+
+`svelte@^5` is a peer dependency.
+
+## Usage
+
+Load the CSS **once**, globally (in your root layout or app entry):
+
+```js
+import '@sveltekitchen/sveltekitchen/css';
+```
+
+Then import components anywhere:
+
+```svelte
+<script>
+  import { Button, Card, Field, Input } from '@sveltekitchen/sveltekitchen';
+
+  let email = $state('');
+</script>
+
+<Card title="Welcome" subtitle="Sign in to continue">
+  <Field label="Email" required>
+    <Input bind:value={email} type="email" iconLeft="mail" />
+  </Field>
+
+  {#snippet footer()}
+    <Button variant="primary" full>Continue</Button>
+  {/snippet}
+</Card>
+```
+
+### Theming (light / dark)
+
+The package ships a tiny reactive theme store. It respects the OS preference on
+first visit and persists the choice to `localStorage`:
+
+```svelte
+<script>
+  import { theme, ThemeToggle } from '@sveltekitchen/sveltekitchen';
+  import { onMount } from 'svelte';
+
+  onMount(() => theme.init());
+</script>
+
+<ThemeToggle />
+
+<!-- or drive it yourself -->
+<button onclick={() => theme.toggle()}>
+  {theme.isDark ? 'Light' : 'Dark'} mode
+</button>
+```
+
+Icons use [Material Symbols Outlined](https://fonts.google.com/icons); the docs
+site loads them (and the Inter font) via a `<link>` in `app.html`.
+
+## What's inside
+
+- **~30 UI components** — Button, Card, Modal, ConfirmDialog, Alert, Badge,
+  Accordion, Dropdown, Table, Pagination, Progress, Spinner, Tooltip, Divider,
+  Collapsible, Calendar, DatePicker, and more.
+- **9 form controls** — Field, Input, Select, Toggle, Checkbox, Radio,
+  RadioGroup, Textarea, MaskedInput.
+- **Layout primitives** — `Shell`, `NavItem`, `SidebarProfile` for building an
+  app chrome, plus **10 importable app-shell layouts** (top bar, sidebar, icon
+  rail, floating dock, and variants).
+- **A bundled CSS design system** — resets, layout utilities, component styles,
+  and a full set of design tokens.
+
+## CSS architecture — base + overlay
+
+The stylesheet is split into two layers:
+
+```
+css/
+  overlay/default.css   → CUSTOMIZABLE: every token *value* (colors, type,
+                          spacing, radius, shadow) for light + dark mode.
+  base.css              → STRUCTURAL: resets, layout, component styles.
+                          Consumes tokens via var(); defines none.
+```
+
+`css/index.css` imports the overlay first (so tokens exist), then the base. To
+ship a custom theme you either replace `overlay/default.css`, or load
+`index.css` and then your own `theme.css` after it:
+
+```js
+import '@sveltekitchen/sveltekitchen/css';   // structure + default tokens
+import './my-theme.css';                 // overrides token values only
+```
+
+Because structural CSS only ever reads tokens through `var()`, re-skinning the
+whole system is a matter of overriding custom properties — no component changes.
+
+### Package exports
+
+| Import | What it is |
+|--------|-----------|
+| `@sveltekitchen/sveltekitchen` | All components + the `theme` store (Svelte). |
+| `@sveltekitchen/sveltekitchen/css` | The full stylesheet (base + default overlay). |
+| `@sveltekitchen/sveltekitchen/css/*` | Individual CSS files, if you want to cherry-pick. |
+| `@sveltekitchen/sveltekitchen/theme` | The theme store on its own. |
+
+## Develop
+
+The library is consumed **from source** by the [docs site](https://github.com/sveltekitchen/designsystem),
+which gives you instant hot-reload while iterating. Clone both repos side by
+side and run the docs site — see its README for details.
+
+Build the distributable package locally:
+
+```bash
+npm install
+npm run package     # svelte-package: src/lib → dist/
+```
+
+## License
+
+MIT

package/dist/components/Accordion.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { setContext } from 'svelte';
+
+  let {
+    variant  = 'default',
+    multiple = false,
+    children,
+  } = $props();
+
+  const variantClass = {
+    default:   '',
+    separated: 'accordion-separated',
+    minimal:   'accordion-minimal',
+    flush:     'accordion-flush',
+  };
+
+  let openItems = $state(new Set());
+
+  setContext('accordion', {
+    get openItems() { return openItems; },
+    toggle(id) {
+      const next = multiple ? new Set(openItems) : new Set();
+      if (openItems.has(id)) next.delete(id);
+      else next.add(id);
+      openItems = next;
+    }
+  });
+
+  let classes = $derived(
+    ['accordion', variantClass[variant]].filter(Boolean).join(' ')
+  );
+</script>
+
+<div class={classes}>
+  {@render children?.()}
+</div>

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

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

package/dist/components/AccordionItem.svelte

@@ -0,0 +1,73 @@
+<script>
+  import { getContext, onMount } from 'svelte';
+
+  let {
+    title       = '',
+    subtitle    = undefined,
+    icon        = undefined,
+    badge       = undefined,
+    initialOpen = false,
+    children,
+  } = $props();
+
+  const id  = Math.random().toString(36).slice(2);
+  const ctx = getContext('accordion');
+
+  // standalone (no accordion context) falls back to local state
+  let localOpen = $state(initialOpen);
+
+  let isOpen = $derived(ctx ? ctx.openItems.has(id) : localOpen);
+
+  function toggle() {
+    if (ctx) ctx.toggle(id);
+    else localOpen = !localOpen;
+  }
+
+  // height animation
+  let bodyEl       = $state(null);
+  let bodyInnerEl  = $state(null);
+
+  $effect(() => {
+    if (!bodyEl || !bodyInnerEl) return;
+    if (isOpen) {
+      bodyEl.style.height = bodyInnerEl.scrollHeight + 'px';
+      const onend = () => { if (isOpen) bodyEl.style.height = 'auto'; };
+      bodyEl.addEventListener('transitionend', onend, { once: true });
+    } else {
+      if (bodyEl.style.height === 'auto') {
+        bodyEl.style.height = bodyInnerEl.scrollHeight + 'px';
+      }
+      requestAnimationFrame(() => { bodyEl.style.height = '0'; });
+    }
+  });
+
+  onMount(() => {
+    if (initialOpen && ctx) ctx.toggle(id);
+  });
+</script>
+
+<div class="accordion-item" class:open={isOpen}>
+
+  <button class="accordion-trigger" onclick={toggle} aria-expanded={isOpen}>
+    <div class="accordion-trigger-content">
+      {#if icon}
+        <span class="material-symbols-outlined accordion-icon">{icon}</span>
+      {/if}
+      <div>
+        <div class="accordion-title">{title}</div>
+        {#if subtitle}<div class="accordion-subtitle">{subtitle}</div>{/if}
+      </div>
+    </div>
+    {#if badge !== undefined}
+      <span class="accordion-badge">{badge}</span>
+    {/if}
+    <span class="material-symbols-outlined accordion-chevron">expand_more</span>
+  </button>
+
+  <div class="accordion-body" style="height:{initialOpen ? 'auto' : '0'}" bind:this={bodyEl}>
+    <div class="accordion-body-inner" bind:this={bodyInnerEl}>
+      {@render children?.()}
+    </div>
+  </div>
+
+</div>

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

@@ -0,0 +1,21 @@
+export default AccordionItem;
+type AccordionItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const AccordionItem: import("svelte").Component<{
+    title?: string;
+    subtitle?: any;
+    icon?: any;
+    badge?: any;
+    initialOpen?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    title?: string;
+    subtitle?: any;
+    icon?: any;
+    badge?: any;
+    initialOpen?: boolean;
+    children: any;
+};

package/dist/components/Alert.svelte

@@ -0,0 +1,23 @@
+<script>
+  let {
+    variant  = 'info',
+    title    = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  const icons = {
+    info:    'info',
+    success: 'check_circle',
+    warning: 'warning',
+    error:   'error',
+  };
+</script>
+
+<div class="alert alert-{variant}" {...restProps}>
+  <span class="material-symbols-outlined alert-icon">{icons[variant]}</span>
+  <div class="alert-content">
+    {#if title}<div class="alert-title">{title}</div>{/if}
+    {@render children?.()}
+  </div>
+</div>

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

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

package/dist/components/Badge.svelte

@@ -0,0 +1,16 @@
+<script>
+  let {
+    variant  = 'default',
+    dot      = false,
+    children,
+    ...restProps
+  } = $props();
+
+  let classes = $derived(
+    ['badge', `badge-${variant}`, dot ? 'badge-dot' : ''].filter(Boolean).join(' ')
+  );
+</script>
+
+<span class={classes} {...restProps}>
+  {@render children?.()}
+</span>

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

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

package/dist/components/Button.svelte

@@ -0,0 +1,43 @@
+<script>
+  import Spinner from './Spinner.svelte';
+
+  /**
+   * @typedef {'primary'|'secondary'|'ghost'|'danger'|'danger-outline'} Variant
+   * @typedef {'sm'|'md'|'lg'} Size
+   */
+
+  let {
+    variant  = 'primary',
+    size     = 'md',
+    full     = false,
+    icon     = false,
+    disabled = false,
+    loading  = false,
+    href     = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  const sizeClass = { sm: 'btn-sm', md: '', lg: 'btn-lg' };
+
+  let classes = $derived([
+    'btn',
+    `btn-${variant}`,
+    sizeClass[size],
+    full ? 'btn-full' : '',
+    icon ? 'btn-icon' : '',
+    loading ? 'btn-loading' : '',
+  ].filter(Boolean).join(' '));
+</script>
+
+{#if href}
+  <a {href} class={classes} aria-busy={loading} {...restProps}>
+    {#if loading}<Spinner />{/if}
+    {@render children?.()}
+  </a>
+{:else}
+  <button class={classes} disabled={disabled || loading} aria-busy={loading} {...restProps}>
+    {#if loading}<Spinner />{/if}
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -0,0 +1,25 @@
+export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Button: import("svelte").Component<{
+    variant?: string;
+    size?: string;
+    full?: boolean;
+    icon?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    href?: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    size?: string;
+    full?: boolean;
+    icon?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    href?: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/Calendar.svelte

@@ -0,0 +1,88 @@
+<script>
+  // Calendar — an inline month grid. Click a day to select it.
+  // Simple by design: no keyboard nav, no min/max, no time — just a date.
+  //
+  // `value` is a JS Date (or null), bindable.
+  let {
+    value = $bindable(null),
+    onselect,
+    ...restProps
+  } = $props();
+
+  const MONTHS = ['January','February','March','April','May','June',
+                  'July','August','September','October','November','December'];
+  const DOW = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+
+  // The month currently being viewed (defaults to value's month, or today).
+  let view = $state(startOfMonth(value ?? new Date()));
+
+  function startOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1); }
+  function sameDay(a, b) {
+    return a && b &&
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate();
+  }
+
+  const today = new Date();
+
+  let cells = $derived.by(() => {
+    const year = view.getFullYear();
+    const month = view.getMonth();
+    const startDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const prevDays = new Date(year, month, 0).getDate();
+    const out = [];
+    for (let i = startDay - 1; i >= 0; i--) {
+      out.push({ date: new Date(year, month - 1, prevDays - i), outside: true });
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      out.push({ date: new Date(year, month, d), outside: false });
+    }
+    let next = 1;
+    while (out.length < 42) {
+      out.push({ date: new Date(year, month + 1, next++), outside: true });
+    }
+    return out;
+  });
+
+  function prevMonth() { view = new Date(view.getFullYear(), view.getMonth() - 1, 1); }
+  function nextMonth() { view = new Date(view.getFullYear(), view.getMonth() + 1, 1); }
+
+  function pick(date) {
+    value = date;
+    // if they clicked an outside day, follow to that month
+    if (date.getMonth() !== view.getMonth()) view = startOfMonth(date);
+    onselect?.(date);
+  }
+</script>
+
+<div class="calendar" {...restProps}>
+  <div class="calendar-header">
+    <button type="button" class="calendar-nav" onclick={prevMonth} aria-label="Previous month">
+      <span class="material-symbols-outlined">chevron_left</span>
+    </button>
+    <div class="calendar-title">{MONTHS[view.getMonth()]} {view.getFullYear()}</div>
+    <button type="button" class="calendar-nav" onclick={nextMonth} aria-label="Next month">
+      <span class="material-symbols-outlined">chevron_right</span>
+    </button>
+  </div>
+
+  <div class="calendar-grid">
+    {#each DOW as d}
+      <div class="calendar-dow">{d}</div>
+    {/each}
+    {#each cells as cell}
+      <button
+        type="button"
+        class="calendar-day"
+        class:outside={cell.outside}
+        class:selected={sameDay(cell.date, value)}
+        class:today={sameDay(cell.date, today)}
+        onclick={() => pick(cell.date)}
+      >
+        {cell.date.getDate()}
+      </button>
+    {/each}
+  </div>
+</div>

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

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

package/dist/components/Card.svelte

@@ -0,0 +1,68 @@
+<script>
+  let {
+    variant  = 'default',
+    padding  = 'md',
+    title    = undefined,
+    subtitle = undefined,
+    header,
+    actions,
+    footer,
+    children,
+    ...restProps
+  } = $props();
+
+  const variantClass = {
+    default:     '',
+    flat:        'card-flat',
+    raised:      'card-raised',
+    interactive: 'card-interactive',
+    selected:    'card-selected',
+    subtle:      'card-subtle',
+    info:        'card-info',
+    success:     'card-success',
+    warning:     'card-warning',
+    error:       'card-error',
+  };
+
+  const paddingClass = {
+    sm:   'card-body-sm',
+    md:   '',
+    lg:   'card-body-lg',
+    none: 'card-body-none',
+  };
+
+  let cardClass = $derived(['card', variantClass[variant]].filter(Boolean).join(' '));
+  let bodyClass = $derived(['card-body', paddingClass[padding]].filter(Boolean).join(' '));
+</script>
+
+<div class={cardClass} {...restProps}>
+
+  {#if header || title}
+    <div class="card-header">
+      {#if header}
+        {@render header()}
+      {:else}
+        <div>
+          <h3 class="card-title">{title}</h3>
+          {#if subtitle}<p class="card-subtitle">{subtitle}</p>{/if}
+        </div>
+      {/if}
+      {#if actions}
+        <div class="card-header-actions">
+          {@render actions()}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class={bodyClass}>
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div class="card-footer">
+      {@render footer()}
+    </div>
+  {/if}
+
+</div>

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

@@ -0,0 +1,25 @@
+export default Card;
+type Card = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Card: import("svelte").Component<{
+    variant?: string;
+    padding?: string;
+    title?: any;
+    subtitle?: any;
+    header: any;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    variant?: string;
+    padding?: string;
+    title?: any;
+    subtitle?: any;
+    header: any;
+    actions: any;
+    footer: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/Chevron.svelte

@@ -0,0 +1,36 @@
+<script>
+  // Chevron — a small clickable chevron that toggles a bindable `expanded`
+  // state. Use it to drive show/hide of anything yourself:
+  //
+  //   <script> let open = $state(false); <\/script>
+  //   <Chevron bind:expanded={open} /> {#if open}…{/if}
+  //
+  // Purely presentational + the boolean; it doesn't hide anything itself.
+  let {
+    expanded  = $bindable(false),
+    size      = undefined,        // e.g. '1.25rem'; defaults to 1.25em
+    direction = 'right',          // collapsed-state direction: 'right' | 'down'
+    disabled  = false,
+    onToggle,
+    ...restProps
+  } = $props();
+
+  function toggle() {
+    if (disabled) return;
+    expanded = !expanded;
+    onToggle?.(expanded);
+  }
+</script>
+
+<button
+  type="button"
+  class="chevron chevron-from-{direction}"
+  class:expanded
+  {disabled}
+  aria-expanded={expanded}
+  onclick={toggle}
+  style:font-size={size}
+  {...restProps}
+>
+  <span class="material-symbols-outlined">chevron_right</span>
+</button>

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

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