@tundralibs/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +80 -0
  3. package/dist/icons.svg +2 -0
  4. package/dist/ui.css +5993 -0
  5. package/dist/ui.js +2089 -0
  6. package/package.json +52 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 TundraSoft
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,80 @@
1
+ # @tundralibs/ui
2
+
3
+ HTML + CSS + JS component and layout library, and the first-class UI layer for
4
+ [rAPId](https://jsr.io/@tundralibs/rapid). Plain `<link>`/`<script>` consumers get a themeable, CSP-clean bundle; a
5
+ rAPId app gets typed, escaped-by-default templates for every component and layout, plus a document shell and error pages
6
+ that plug straight into `Application.initialize`.
7
+
8
+ - **Components** (44): buttons, inputs, forms, data table, combobox, command palette, date picker, OTP, modal, toasts,
9
+ tabs, menus, charts (every ApexCharts type, pinned, on the library's tokens), …
10
+ - **Layouts** (8): stacked, sidebar, rail, split, article, docs, auth, focus — each defined at every viewport band from
11
+ phones to ultrawide.
12
+ - **Themes**: tokens only. A theme is one stylesheet loaded after the bundle; dark mode is built in.
13
+
14
+ ## Plain HTML
15
+
16
+ ```html
17
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tundralibs/ui@0.1.0/dist/ui.css">
18
+ <script src="https://cdn.jsdelivr.net/npm/@tundralibs/ui@0.1.0/dist/ui.js" defer></script>
19
+ ```
20
+
21
+ `dist/` is also in the npm package for self-hosting.
22
+
23
+ ## rAPId
24
+
25
+ ```ts
26
+ import { Application } from "@tundralibs/rapid";
27
+ import { createCoreTemplate } from "@tundralibs/ui/templates/core";
28
+ import { createLayoutTemplate } from "@tundralibs/ui/templates/layout";
29
+ import { errorTemplates } from "@tundralibs/ui/templates/errors";
30
+ import { Card } from "@tundralibs/ui/card";
31
+
32
+ const app = await Application.initialize({
33
+ name: "my-app",
34
+ ui: {
35
+ core: createCoreTemplate(), // assets from the versioned CDN, with SRI
36
+ layout: createLayoutTemplate({ brand: "Acme", navLinks: [{ href: "/", label: "Home" }] }),
37
+ errorTemplates,
38
+ prefer: "html",
39
+ },
40
+ });
41
+ app.get("/", { template: Home }, () => ({ content: {} }));
42
+ ```
43
+
44
+ `createCoreTemplate({ assets: "/ui" })` self-hosts instead — copy the bundle with `copyUiAssets()` from
45
+ `@tundralibs/ui/assets` and mount it with `server.static: { "/ui": { root, fingerprint: true } }`.
46
+
47
+ Every server-driven component (combobox, command palette, date picker, sortable tables, pagination, lazy regions,
48
+ validated forms, toasts) speaks rAPId's `data-*` swap contract and needs no client glue. The example app under
49
+ `examples/app/` wires all of them; run it with `deno task app`.
50
+
51
+ ## Documentation
52
+
53
+ Also browsable on the [wiki](https://github.com/TundraSoft/ui/wiki), synced from `docs/` on every push.
54
+
55
+ - [Getting started](docs/UI-Getting-Started.md) — install (CDN, self-host, JSR), a first page, how the bundle is built.
56
+ - [Components](docs/UI-Components.md) — a tour of every component with usage.
57
+ - [Layouts](docs/UI-Layouts.md) — the eight page frames and how they respond.
58
+ - [rAPId integration](docs/UI-Rapid.md) — the shell, swaps, forms, history, the example app.
59
+ - [Theming](docs/UI-Theming.md) — tokens, dark mode, cascade layers, custom partials.
60
+ - [Charts](docs/UI-Charts.md).
61
+ - [Reference](docs/Reference.md) — every export, generated from the sources.
62
+
63
+ ## Development
64
+
65
+ ```sh
66
+ deno task build # dist/ui.css, dist/ui.js, version.ts
67
+ deno task build:demos # static demo pages under demo/ — open demo/index.html
68
+ deno task test # every browser suite (needs Chrome; CHROME_PATH)
69
+ deno task app # the rAPId example app on :8010
70
+ ```
71
+
72
+ `demo/index.html` links the catalogue (every component in every declared variant, size, tone and state, one page per
73
+ group — CI fails if a component or variant is missing from it), the eight layouts, and the admin sample.
74
+
75
+ The same tooling runs on Node (`npm run …` via tsx) and Bun (`bun run bun:…`). See `CLAUDE.md` for the full contract and
76
+ conventions.
77
+
78
+ ## License
79
+
80
+ MIT
package/dist/icons.svg ADDED
@@ -0,0 +1,2 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-dashboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></symbol><symbol id="icon-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></symbol><symbol id="icon-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><circle cx="17" cy="9" r="2.6"/><path d="M2.5 20c0-3.3 2.9-5 6.5-5s6.5 1.7 6.5 5"/><path d="M15 15.2c2.7.4 4 2 4 4.8"/></symbol><symbol id="icon-invoice" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2h12v20l-3-2-3 2-3-2-3 2V2z"/><line x1="9" y1="7" x2="15" y2="7"/><line x1="9" y1="11" x2="15" y2="11"/></symbol><symbol id="icon-table" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="9" x2="9" y2="21"/></symbol><symbol id="icon-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5l4 4L7 21l-4 1 1-4z"/></symbol><symbol id="icon-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><circle cx="9" cy="6" r="2"/><line x1="4" y1="12" x2="20" y2="12"/><circle cx="15" cy="12" r="2"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="7" cy="18" r="2"/></symbol><symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6z"/></symbol><symbol id="icon-chevronRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></symbol><symbol id="icon-chevronLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></symbol><symbol id="icon-chevronsLeft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 6 7 12 13 18"/><polyline points="19 6 13 12 19 18"/></symbol><symbol id="icon-chevronsRight" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 6 17 12 11 18"/><polyline points="5 6 11 12 5 18"/></symbol><symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol><symbol id="icon-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 21a2 2 0 0 0 4 0"/></symbol><symbol id="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.5A9 9 0 1 1 11.5 3a7 7 0 0 0 9.5 9.5z"/></symbol><symbol id="icon-kebab" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></symbol><symbol id="icon-coin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 8v8M9 10.5c0-1.1 1.3-1.5 3-1.5s3 .5 3 1.5-1.3 1.5-3 1.5-3 .4-3 1.5 1.3 1.5 3 1.5 3-.4 3-1.5"/></symbol><symbol id="icon-trendUp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 6"/><polyline points="15 6 21 6 21 12"/></symbol><symbol id="icon-trendDown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 7 9 13 13 9 21 18"/><polyline points="15 18 21 18 21 12"/></symbol><symbol id="icon-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></symbol><symbol id="icon-plug" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v4M15 3v4M7 7h10l-1 6a5 5 0 0 1-10 0z"/><path d="M12 17v4"/></symbol><symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></symbol><symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></symbol><symbol id="icon-chevronDown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></symbol><symbol id="icon-chevronUp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></symbol><symbol id="icon-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="6"/><line x1="16" y1="3" x2="16" y2="6"/></symbol><symbol id="icon-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/><polyline points="8 9 12 5 16 9"/><line x1="12" y1="5" x2="12" y2="15"/></symbol><symbol id="icon-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="10" y1="17" x2="14" y2="17"/></symbol><symbol id="icon-list" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></symbol><symbol id="icon-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="7.8" x2="12" y2="7.9"/></symbol><symbol id="icon-warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16.4" x2="12" y2="16.5"/></symbol><symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol><symbol id="icon-terminal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><polyline points="8 9 11 12 8 15"/></symbol></svg>