@lyeve-labs/ui-kit 0.8.2 → 0.8.4
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.
- package/README.md +17 -15
- package/dist/components/dialog/ConfirmDialog.svelte +1 -1
- package/dist/components/dialog/dialog-manager.svelte.d.ts +2 -2
- package/dist/components/dialog/dialog-manager.svelte.js +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/styles/theme.css +2 -2
- package/package.json +14 -12
- 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
|
[](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
|
|
@@ -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
|
*/
|
|
@@ -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
|
*/
|
|
@@ -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
|
+
"version": "0.8.4",
|
|
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@9.15.0",
|
|
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
|