@spaethtech/svelte-ui 0.14.0 → 0.15.0

package/docs/usage.md

@@ -311,21 +311,17 @@ A drag-and-drop + click file field (thumbnails, remove, optional progress).
   label="Attachments" onfiles={(f) => console.log(f)} />
 ```
 
-### DateRangePicker
+### Date range
 
-A start–end range with a presets rail (composes `Calendar mode="range"`).
+Use `DatePicker` with the `range` prop — its value is a `{ start, end }` object.
 
 ```svelte
 <script>
-  import { DateRangePicker } from "@spaethtech/svelte-ui";
-  let start = $state("");
-  let end = $state("");
+  import { DatePicker } from "@spaethtech/svelte-ui";
+  let range = $state({ start: null, end: null });
 </script>
 
-<DateRangePicker bind:start bind:end label="Reporting period" />
-
-<!-- custom presets, or presets={[]} for calendar-only -->
-<DateRangePicker bind:start bind:end presets={[{ label: "Q1", start: "2026-01-01", end: "2026-03-31" }]} />
+<DatePicker range bind:value={range} label="Reporting period" />
 ```
 
 ### Stepper
@@ -740,7 +736,9 @@ A thin separating rule — horizontal (optionally labelled) or vertical (toolbar
 
 ### Pagination
 
-A standalone page navigator (numbered buttons + ellipsis, prev/next, optional per-page + total).
+A standalone page navigator laid out like `DataTable`'s footer: a tinted band with an optional
+per-page `Select`, a range total, and a `First · Prev · [page]/N · Next · Last` stepper whose page
+indicator is an editable `NumberInput` (type a page + Enter to jump).
 
 ```svelte
 <script>
@@ -749,10 +747,13 @@ A standalone page navigator (numbered buttons + ellipsis, prev/next, optional pe
   let perPage = $state(10);
 </script>
 
-<Pagination bind:page bind:perPage total={247} perPageOptions={[10, 25, 50, 100]} showTotal />
+<Pagination bind:page bind:perPage total={247} perPageOptions={[10, 25, 50, 100]} />
+
+<!-- Compact: just the stepper (no per-page Select) -->
+<Pagination bind:page total={200} showTotal={false} />
 
-<!-- Compact: numbers only, with first/last controls -->
-<Pagination bind:page total={200} showEdges />
+<!-- variant tints the band surface + button hover (not the buttons); ghost = transparent band -->
+<Pagination bind:page total={200} variant="primary" />
 ```
 
 ### Breadcrumbs
@@ -776,6 +777,172 @@ A navigation trail; the last item is the current page. `maxItems` collapses the
 <Breadcrumbs items={trail} maxItems={4} separator="/" />
 ```
 
+### Tree
+
+A hierarchical, expandable tree.
+
+```svelte
+<script>
+  import { Tree } from "@spaethtech/svelte-ui";
+  const items = [
+    { label: "src", children: [{ label: "index.ts" }, { label: "app.css" }] },
+    { label: "package.json" },
+  ];
+  let expanded = $state(["0"]); // key = id or index path
+  let selected = $state("");
+</script>
+
+<Tree {items} bind:expanded bind:selected onselect={(n) => console.log(n.label)} />
+```
+
+### ContextMenu
+
+A right-click menu over any content.
+
+```svelte
+<script>
+  import { ContextMenu } from "@spaethtech/svelte-ui";
+  const items = [
+    { label: "Open", onclick: () => {} },
+    { label: "Delete", danger: true, onclick: () => {} },
+  ];
+</script>
+
+<ContextMenu {items}>
+  <div>Right-click me</div>
+</ContextMenu>
+```
+
+### Timeline
+
+A vertical event sequence.
+
+```svelte
+<script>
+  import { Timeline } from "@spaethtech/svelte-ui";
+  const items = [
+    { title: "Order placed", time: "Mon 9:14 AM", variant: "success" },
+    { title: "Shipped", time: "Tue 8:05 AM", variant: "primary" },
+    { title: "Out for delivery", time: "Wed" },
+  ];
+</script>
+
+<Timeline {items} />
+```
+
+### Carousel
+
+A sliding viewport with controls + dots.
+
+```svelte
+<script>
+  import { Carousel } from "@spaethtech/svelte-ui";
+  const photos = [{ url: "/1.jpg" }, { url: "/2.jpg" }];
+  let index = $state(0);
+</script>
+
+<Carousel items={photos} bind:index autoplay={4000}>
+  {#snippet slide(photo, i)}
+    <img src={photo.url} class="w-full h-64 object-cover" />
+  {/snippet}
+</Carousel>
+```
+
+### CommandPalette
+
+A ⌘K/Ctrl+K fuzzy command launcher.
+
+```svelte
+<script>
+  import { CommandPalette, type Command } from "@spaethtech/svelte-ui";
+  let open = $state(false);
+  const commands: Command[] = [
+    { label: "New file", group: "Actions", shortcut: ["⌘", "N"], onrun: () => create() },
+    { label: "Open settings", group: "Actions", onrun: () => goto("/settings") },
+    { label: "Toggle theme", keywords: ["dark", "light"], onrun: () => toggleTheme() },
+  ];
+</script>
+
+<!-- ⌘K / Ctrl+K opens it anywhere; or bind:open from your own trigger -->
+<CommandPalette bind:open {commands} />
+```
+
+### Splitter
+
+Two resizable panes with a draggable divider.
+
+```svelte
+<script>
+  import { Splitter } from "@spaethtech/svelte-ui";
+  let size = $state(35);
+</script>
+
+<Splitter bind:size class="h-64">
+  {#snippet start()}<aside>Sidebar</aside>{/snippet}
+  {#snippet end()}<main>Content</main>{/snippet}
+</Splitter>
+```
+
+### ScrollArea
+
+A themed scroll container.
+
+```svelte
+<script>
+  import { ScrollArea } from "@spaethtech/svelte-ui";
+</script>
+
+<ScrollArea maxHeight="16rem" variant="primary">
+  <!-- long content scrolls with a themed thin scrollbar -->
+</ScrollArea>
+
+<ScrollArea orientation="horizontal">…</ScrollArea>
+```
+
+### Stat
+
+Metric/KPI cards; lay several in a `Grid`.
+
+```svelte
+<script>
+  import { Stat, Grid } from "@spaethtech/svelte-ui";
+</script>
+
+<Grid columns={{ base: 1, sm: 3 }} gap={4}>
+  <Stat label="Revenue" value="$48,120" delta="+12.4%" deltaLabel="vs last month" variant="success" />
+  <Stat label="Active users" value="8,241" delta={-3.1} deltaLabel="vs last week" />
+  <Stat label="Error rate" value="0.8%" delta={-0.2} invertDelta />
+</Grid>
+```
+
+### EmptyState
+
+A zero-data placeholder with an optional action.
+
+```svelte
+<script>
+  import { EmptyState, Button } from "@spaethtech/svelte-ui";
+</script>
+
+<EmptyState title="No projects yet" description="Create your first project to get started.">
+  {#snippet action()}<Button text="New project" variant="primary" />{/snippet}
+</EmptyState>
+```
+
+### Kbd
+
+Keyboard-key display.
+
+```svelte
+<script>
+  import { Kbd } from "@spaethtech/svelte-ui";
+</script>
+
+<Kbd text="Esc" />
+<Kbd keys={["Ctrl", "K"]} />
+<Kbd keys={["⌘", "⇧", "P"]} size="lg" />
+```
+
 ### Chip
 
 An interactive pill — filter/choice tokens, removable tags, clickable labels.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"