@lyeve-labs/ui-kit 0.8.3 → 0.9.1

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 (10) hide show
  1. package/README.md +17 -15
  2. package/dist/components/PageHeader.svelte +3 -1
  3. package/dist/components/dialog/ConfirmDialog.svelte +1 -1
  4. package/dist/components/dialog/dialog-manager.svelte.d.ts +2 -2
  5. package/dist/components/dialog/dialog-manager.svelte.js +2 -2
  6. package/dist/index.d.ts +2 -2
  7. package/dist/index.js +2 -2
  8. package/dist/styles/theme.css +2 -2
  9. package/package.json +14 -12
  10. package/src/lib/styles/theme.css +2 -2
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # @lyeve/ui-kit
1
+ # @lyeve-labs/ui-kit
2
2
 
3
3
  A clean, accessible Svelte 5 component library. The design system behind [LyEve](https://lyeve.com).
4
4
 
@@ -7,13 +7,13 @@ A clean, accessible Svelte 5 component library. The design system behind [LyEve]
7
7
  [![Tailwind CSS 4](https://img.shields.io/badge/tailwind-v4-38bdf8.svg)](https://tailwindcss.com)
8
8
 
9
9
  ```bash
10
- pnpm add @lyeve/ui-kit
10
+ pnpm add @lyeve-labs/ui-kit
11
11
  ```
12
12
 
13
13
  ```svelte
14
14
  <script lang="ts">
15
- import { Button, Card, toast } from '@lyeve/ui-kit';
16
- import '@lyeve/ui-kit/styles.css';
15
+ import { Button, Card, toast } from '@lyeve-labs/ui-kit';
16
+ import '@lyeve-labs/ui-kit/styles.css';
17
17
  </script>
18
18
 
19
19
  <Card title="Welcome">
@@ -30,7 +30,7 @@ No config file, no theme provider, no setup ceremony.
30
30
 
31
31
  - **48 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
32
32
  - **Two themes:** Soft Dark (default) and Soft Light, switched by a single `data-theme` attribute on `<html>`.
33
- - **One CSS file:** `@lyeve/ui-kit/styles.css` declares every token; the rest is just Tailwind.
33
+ - **One CSS file:** `@lyeve-labs/ui-kit/styles.css` declares every token; the rest is just Tailwind.
34
34
  - **Svelte 5 native:** built on runes and snippets, fully typed end-to-end.
35
35
  - **No surprises:** a `<Button />` is a `<button>`, an `<Input />` is an `<input>`. Markup matches the preview.
36
36
 
@@ -71,9 +71,9 @@ ThemeToggle · Toaster (+ `toast` service)
71
71
  ## Install
72
72
 
73
73
  ```bash
74
- pnpm add @lyeve/ui-kit
75
- # or npm install @lyeve/ui-kit
76
- # or yarn add @lyeve/ui-kit
74
+ pnpm add @lyeve-labs/ui-kit
75
+ # or npm install @lyeve-labs/ui-kit
76
+ # or yarn add @lyeve-labs/ui-kit
77
77
  ```
78
78
 
79
79
  If you don't have Tailwind v4 yet:
@@ -99,14 +99,14 @@ Import the stylesheet once at the top of your app's CSS entry:
99
99
 
100
100
  ```css
101
101
  /* src/app.css */
102
- @import '@lyeve/ui-kit/styles.css';
102
+ @import '@lyeve-labs/ui-kit/styles.css';
103
103
  ```
104
104
 
105
105
  Then drop components into your routes:
106
106
 
107
107
  ```svelte
108
108
  <script lang="ts">
109
- import { Button, Card, Toaster, toast } from '@lyeve/ui-kit';
109
+ import { Button, Card, Toaster, toast } from '@lyeve-labs/ui-kit';
110
110
  </script>
111
111
 
112
112
  <Card title="Profile" description="Update your details.">
@@ -135,7 +135,7 @@ Two themes ship out of the box. Switch with one attribute:
135
135
  Or use the helpers:
136
136
 
137
137
  ```ts
138
- import { setTheme, toggleTheme, getTheme } from '@lyeve/ui-kit';
138
+ import { setTheme, toggleTheme, getTheme } from '@lyeve-labs/ui-kit';
139
139
 
140
140
  setTheme('light');
141
141
  toggleTheme(); // returns the new theme
@@ -143,14 +143,14 @@ getTheme(); // 'dark' | 'light'
143
143
  ```
144
144
 
145
145
  Avoid the flash-of-wrong-theme by adding the boot script to your `app.html`.
146
- Import `themeBootScript` from `@lyeve/ui-kit` and inline it in `<head>` before any
146
+ Import `themeBootScript` from `@lyeve-labs/ui-kit` and inline it in `<head>` before any
147
147
  stylesheets.
148
148
 
149
149
  Want to bend the palette to your own brand? Override individual tokens after
150
150
  the import:
151
151
 
152
152
  ```css
153
- @import '@lyeve/ui-kit/styles.css';
153
+ @import '@lyeve-labs/ui-kit/styles.css';
154
154
 
155
155
  @theme {
156
156
  --color-brand: #ff5e9c;
@@ -174,7 +174,7 @@ This repo is a single-purpose component library. Nothing but `src/lib/`.
174
174
 
175
175
  ```
176
176
  src/
177
- └── lib/ # → published as @lyeve/ui-kit
177
+ └── lib/ # → published as @lyeve-labs/ui-kit
178
178
  ├── components/ # 48 .svelte files
179
179
  ├── stores/ # toast.svelte.ts
180
180
  ├── styles/ # theme.css (the one stylesheet)
@@ -184,10 +184,12 @@ src/
184
184
 
185
185
  ## Versioning
186
186
 
187
- `@lyeve/ui-kit` follows [SemVer](https://semver.org). While under `1.0`,
187
+ `@lyeve-labs/ui-kit` follows [SemVer](https://semver.org). While under `1.0`,
188
188
  breaking changes bump the **minor** version; additive changes bump the **patch**.
189
189
  Every release is logged in [`CHANGELOG.md`](CHANGELOG.md) and on the docs site.
190
190
 
191
+ Maintainers: see [`PUBLISHING.md`](PUBLISHING.md) for the release workflow.
192
+
191
193
  ## Contributing
192
194
 
193
195
  Bug reports, prop suggestions, and component proposals are welcome. See
package/dist/components/PageHeader.svelte CHANGED
@@ -13,7 +13,9 @@
13
13
 
14
14
  <header class="mb-8 flex flex-wrap items-start justify-between gap-4 {klass}">
15
15
  <div class="min-w-0">
16
- <h1 class="text-2xl font-bold text-fg">{title}</h1>
16
+ <!-- The app shells render their own h1 for the current route, so a heading
17
+ lookup by name matches two elements. This names the page's own title. -->
18
+ <h1 data-testid="page-title" class="text-2xl font-bold text-fg">{title}</h1>
17
19
  {#if description}<p class="mt-1 text-sm text-muted">{description}</p>{/if}
18
20
  </div>
19
21
  {#if actions}
package/dist/components/dialog/ConfirmDialog.svelte CHANGED
@@ -11,7 +11,7 @@
11
11
  * </Dialog>
12
12
  *
13
13
  * Programmatic usage:
14
- * import { confirm } from '@lyeve/ui-kit';
14
+ * import { confirm } from '@lyeve-labs/ui-kit';
15
15
  * const ok = await confirm('Delete this item?', 'This action cannot be undone.');
16
16
  * if (ok) { await deleteItem(); }
17
17
  */
package/dist/components/dialog/dialog-manager.svelte.d.ts CHANGED
@@ -5,12 +5,12 @@
5
5
  * Each dialog returns a Promise that resolves/rejects when closed.
6
6
  *
7
7
  * Usage:
8
- * import { openDialog } from '@lyeve/ui-kit';
8
+ * import { openDialog } from '@lyeve-labs/ui-kit';
9
9
  * // Inside a .svelte.ts file or $effect:
10
10
  * const result = await openDialog({ title: 'Delete?', body: mySnippet, size: 'sm' });
11
11
  *
12
12
  * For confirm/cancel pattern:
13
- * import { confirm } from '@lyeve/ui-kit';
13
+ * import { confirm } from '@lyeve-labs/ui-kit';
14
14
  * const ok = await confirm('Delete this item?', 'This action cannot be undone.');
15
15
  * if (ok) { /* ... *\/ }
16
16
  */
package/dist/components/dialog/dialog-manager.svelte.js CHANGED
@@ -5,12 +5,12 @@
5
5
  * Each dialog returns a Promise that resolves/rejects when closed.
6
6
  *
7
7
  * Usage:
8
- * import { openDialog } from '@lyeve/ui-kit';
8
+ * import { openDialog } from '@lyeve-labs/ui-kit';
9
9
  * // Inside a .svelte.ts file or $effect:
10
10
  * const result = await openDialog({ title: 'Delete?', body: mySnippet, size: 'sm' });
11
11
  *
12
12
  * For confirm/cancel pattern:
13
- * import { confirm } from '@lyeve/ui-kit';
13
+ * import { confirm } from '@lyeve-labs/ui-kit';
14
14
  * const ok = await confirm('Delete this item?', 'This action cannot be undone.');
15
15
  * if (ok) { /* ... *\/ }
16
16
  */
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /**
2
- * @lyeve/ui-kit - public API.
2
+ * @lyeve-labs/ui-kit - public API.
3
3
  *
4
4
  * Every component, utility, and store the library exposes is re-exported
5
5
  * from this single entry point. Consumers should import from
6
- * `'@lyeve/ui-kit'` and never reach into deep paths - the directory layout
6
+ * `'@lyeve-labs/ui-kit'` and never reach into deep paths - the directory layout
7
7
  * is an implementation detail.
8
8
  */
9
9
  export { default as Card } from './components/Card.svelte';
package/dist/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  /**
2
- * @lyeve/ui-kit - public API.
2
+ * @lyeve-labs/ui-kit - public API.
3
3
  *
4
4
  * Every component, utility, and store the library exposes is re-exported
5
5
  * from this single entry point. Consumers should import from
6
- * `'@lyeve/ui-kit'` and never reach into deep paths - the directory layout
6
+ * `'@lyeve-labs/ui-kit'` and never reach into deep paths - the directory layout
7
7
  * is an implementation detail.
8
8
  */
9
9
  // ── Layout & structure ─────────────────────────────────────────────────────
package/dist/styles/theme.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /*
2
- * @lyeve/ui-kit - theme tokens
2
+ * @lyeve-labs/ui-kit - theme tokens
3
3
  *
4
4
  * A single CSS file imported once at the top of your app's root stylesheet.
5
5
  * Declares two palettes - Soft Dark (default) and Soft Light - built from
6
6
  * the LyEve brand guideline (Ink #0B1422 + Cyan #00D4FF) and exposes them
7
7
  * as Tailwind v4 `@theme` tokens.
8
8
  *
9
- * import '@lyeve/ui-kit/styles.css';
9
+ * import '@lyeve-labs/ui-kit/styles.css';
10
10
  *
11
11
  * Switching themes is a single attribute on `<html>`:
12
12
  * <html data-theme="light"> // light mode
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lyeve-labs/ui-kit",
3
- "version": "0.8.3",
3
+ "version": "0.9.1",
4
4
  "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
5
5
  "license": "MIT",
6
6
  "author": "LyEve Labs <hello@lyeve.com>",
@@ -23,9 +23,21 @@
23
23
  ],
24
24
  "type": "module",
25
25
  "sideEffects": false,
26
+ "packageManager": "pnpm@10.33.4",
26
27
  "engines": {
27
28
  "node": ">=20"
28
29
  },
30
+ "scripts": {
31
+ "build": "svelte-package && publint && node scripts/check-dist.mjs",
32
+ "package": "svelte-package && publint",
33
+ "prepublishOnly": "pnpm package",
34
+ "check": "svelte-check --tsconfig ./tsconfig.json",
35
+ "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
36
+ "test": "vitest run",
37
+ "test:watch": "vitest",
38
+ "format": "prettier --write .",
39
+ "format:check": "prettier --check ."
40
+ },
29
41
  "files": [
30
42
  "dist",
31
43
  "src/lib/styles",
@@ -67,15 +79,5 @@
67
79
  "svelte-check": "^4.4.8",
68
80
  "typescript": "^5.9.3",
69
81
  "vitest": "^2.1.9"
70
- },
71
- "scripts": {
72
- "build": "svelte-package && publint",
73
- "package": "svelte-package && publint",
74
- "check": "svelte-check --tsconfig ./tsconfig.json",
75
- "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
76
- "test": "vitest run",
77
- "test:watch": "vitest",
78
- "format": "prettier --write .",
79
- "format:check": "prettier --check ."
80
82
  }
81
- }
83
+ }
package/src/lib/styles/theme.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /*
2
- * @lyeve/ui-kit - theme tokens
2
+ * @lyeve-labs/ui-kit - theme tokens
3
3
  *
4
4
  * A single CSS file imported once at the top of your app's root stylesheet.
5
5
  * Declares two palettes - Soft Dark (default) and Soft Light - built from
6
6
  * the LyEve brand guideline (Ink #0B1422 + Cyan #00D4FF) and exposes them
7
7
  * as Tailwind v4 `@theme` tokens.
8
8
  *
9
- * import '@lyeve/ui-kit/styles.css';
9
+ * import '@lyeve-labs/ui-kit/styles.css';
10
10
  *
11
11
  * Switching themes is a single attribute on `<html>`:
12
12
  * <html data-theme="light"> // light mode