@lyeve-labs/ui-kit 0.8.2

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 (113) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +199 -0
  3. package/dist/components/Accordion.svelte +48 -0
  4. package/dist/components/Accordion.svelte.d.ts +10 -0
  5. package/dist/components/AccordionItem.svelte +55 -0
  6. package/dist/components/AccordionItem.svelte.d.ts +10 -0
  7. package/dist/components/Alert.svelte +60 -0
  8. package/dist/components/Alert.svelte.d.ts +13 -0
  9. package/dist/components/Autocomplete.svelte +198 -0
  10. package/dist/components/Autocomplete.svelte.d.ts +23 -0
  11. package/dist/components/Avatar.svelte +65 -0
  12. package/dist/components/Avatar.svelte.d.ts +9 -0
  13. package/dist/components/AvatarGroup.svelte +45 -0
  14. package/dist/components/AvatarGroup.svelte.d.ts +14 -0
  15. package/dist/components/Badge.svelte +48 -0
  16. package/dist/components/Badge.svelte.d.ts +13 -0
  17. package/dist/components/Banner.svelte +73 -0
  18. package/dist/components/Banner.svelte.d.ts +13 -0
  19. package/dist/components/Breadcrumb.svelte +47 -0
  20. package/dist/components/Breadcrumb.svelte.d.ts +10 -0
  21. package/dist/components/Button.svelte +71 -0
  22. package/dist/components/Button.svelte.d.ts +18 -0
  23. package/dist/components/ButtonGroup.svelte +33 -0
  24. package/dist/components/ButtonGroup.svelte.d.ts +9 -0
  25. package/dist/components/Card.svelte +72 -0
  26. package/dist/components/Card.svelte.d.ts +17 -0
  27. package/dist/components/Checkbox.svelte +80 -0
  28. package/dist/components/Checkbox.svelte.d.ts +14 -0
  29. package/dist/components/DatePicker.svelte +274 -0
  30. package/dist/components/DatePicker.svelte.d.ts +17 -0
  31. package/dist/components/Divider.svelte +23 -0
  32. package/dist/components/Divider.svelte.d.ts +8 -0
  33. package/dist/components/Drawer.svelte +120 -0
  34. package/dist/components/Drawer.svelte.d.ts +16 -0
  35. package/dist/components/Dropdown.svelte +88 -0
  36. package/dist/components/Dropdown.svelte.d.ts +23 -0
  37. package/dist/components/EmptyState.svelte +51 -0
  38. package/dist/components/EmptyState.svelte.d.ts +13 -0
  39. package/dist/components/FileInput.svelte +102 -0
  40. package/dist/components/FileInput.svelte.d.ts +15 -0
  41. package/dist/components/Indicator.svelte +38 -0
  42. package/dist/components/Indicator.svelte.d.ts +11 -0
  43. package/dist/components/Input.svelte +60 -0
  44. package/dist/components/Input.svelte.d.ts +17 -0
  45. package/dist/components/Kbd.svelte +18 -0
  46. package/dist/components/Kbd.svelte.d.ts +8 -0
  47. package/dist/components/Label.svelte +30 -0
  48. package/dist/components/Label.svelte.d.ts +11 -0
  49. package/dist/components/Modal.svelte +105 -0
  50. package/dist/components/Modal.svelte.d.ts +14 -0
  51. package/dist/components/MultiSelect.svelte +212 -0
  52. package/dist/components/MultiSelect.svelte.d.ts +22 -0
  53. package/dist/components/NumberInput.svelte +98 -0
  54. package/dist/components/NumberInput.svelte.d.ts +15 -0
  55. package/dist/components/PageHeader.svelte +22 -0
  56. package/dist/components/PageHeader.svelte.d.ts +10 -0
  57. package/dist/components/Pagination.svelte +112 -0
  58. package/dist/components/Pagination.svelte.d.ts +10 -0
  59. package/dist/components/Progress.svelte +70 -0
  60. package/dist/components/Progress.svelte.d.ts +15 -0
  61. package/dist/components/Radio.svelte +65 -0
  62. package/dist/components/Radio.svelte.d.ts +14 -0
  63. package/dist/components/RadioGroup.svelte +96 -0
  64. package/dist/components/RadioGroup.svelte.d.ts +22 -0
  65. package/dist/components/SearchInput.svelte +81 -0
  66. package/dist/components/SearchInput.svelte.d.ts +10 -0
  67. package/dist/components/Select.svelte +69 -0
  68. package/dist/components/Select.svelte.d.ts +18 -0
  69. package/dist/components/Skeleton.svelte +20 -0
  70. package/dist/components/Skeleton.svelte.d.ts +9 -0
  71. package/dist/components/Spinner.svelte +19 -0
  72. package/dist/components/Spinner.svelte.d.ts +7 -0
  73. package/dist/components/Stat.svelte +45 -0
  74. package/dist/components/Stat.svelte.d.ts +14 -0
  75. package/dist/components/StepIndicator.svelte +142 -0
  76. package/dist/components/StepIndicator.svelte.d.ts +13 -0
  77. package/dist/components/Table.svelte +36 -0
  78. package/dist/components/Table.svelte.d.ts +11 -0
  79. package/dist/components/Tabs.svelte +39 -0
  80. package/dist/components/Tabs.svelte.d.ts +13 -0
  81. package/dist/components/Tag.svelte +56 -0
  82. package/dist/components/Tag.svelte.d.ts +11 -0
  83. package/dist/components/Textarea.svelte +75 -0
  84. package/dist/components/Textarea.svelte.d.ts +26 -0
  85. package/dist/components/ThemeToggle.svelte +33 -0
  86. package/dist/components/ThemeToggle.svelte.d.ts +6 -0
  87. package/dist/components/Toaster.svelte +54 -0
  88. package/dist/components/Toaster.svelte.d.ts +18 -0
  89. package/dist/components/Toggle.svelte +74 -0
  90. package/dist/components/Toggle.svelte.d.ts +11 -0
  91. package/dist/components/Tooltip.svelte +44 -0
  92. package/dist/components/Tooltip.svelte.d.ts +11 -0
  93. package/dist/components/dialog/ConfirmDialog.svelte +95 -0
  94. package/dist/components/dialog/ConfirmDialog.svelte.d.ts +8 -0
  95. package/dist/components/dialog/Dialog.svelte +225 -0
  96. package/dist/components/dialog/Dialog.svelte.d.ts +9 -0
  97. package/dist/components/dialog/DialogContainer.svelte +17 -0
  98. package/dist/components/dialog/DialogContainer.svelte.d.ts +18 -0
  99. package/dist/components/dialog/dialog-manager.svelte.d.ts +54 -0
  100. package/dist/components/dialog/dialog-manager.svelte.js +164 -0
  101. package/dist/components/dialog/types.d.ts +33 -0
  102. package/dist/components/dialog/types.js +10 -0
  103. package/dist/index.d.ts +63 -0
  104. package/dist/index.js +72 -0
  105. package/dist/stores/toast.svelte.d.ts +18 -0
  106. package/dist/stores/toast.svelte.js +28 -0
  107. package/dist/styles/theme.css +148 -0
  108. package/dist/utils/cn.d.ts +13 -0
  109. package/dist/utils/cn.js +24 -0
  110. package/dist/utils/theme.d.ts +26 -0
  111. package/dist/utils/theme.js +55 -0
  112. package/package.json +81 -0
  113. package/src/lib/styles/theme.css +148 -0
package/package.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "name": "@lyeve-labs/ui-kit",
3
+ "version": "0.8.2",
4
+ "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
5
+ "license": "MIT",
6
+ "author": "LyEve Labs <hello@lyeve.com>",
7
+ "homepage": "https://ui.lyeve.com",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/lyeve-labs/ui-kit.git"
11
+ },
12
+ "bugs": {
13
+ "url": "https://github.com/lyeve-labs/ui-kit/issues"
14
+ },
15
+ "keywords": [
16
+ "svelte",
17
+ "svelte5",
18
+ "components",
19
+ "ui-kit",
20
+ "tailwindcss",
21
+ "design-system",
22
+ "lyeve"
23
+ ],
24
+ "type": "module",
25
+ "sideEffects": false,
26
+ "engines": {
27
+ "node": ">=20"
28
+ },
29
+ "files": [
30
+ "dist",
31
+ "src/lib/styles",
32
+ "!dist/**/*.test.*",
33
+ "!dist/**/*.spec.*"
34
+ ],
35
+ "svelte": "./dist/index.js",
36
+ "types": "./dist/index.d.ts",
37
+ "exports": {
38
+ ".": {
39
+ "types": "./dist/index.d.ts",
40
+ "svelte": "./dist/index.js",
41
+ "default": "./dist/index.js"
42
+ },
43
+ "./styles.css": "./src/lib/styles/theme.css",
44
+ "./package.json": "./package.json"
45
+ },
46
+ "peerDependencies": {
47
+ "svelte": "^5.0.0"
48
+ },
49
+ "publishConfig": {
50
+ "access": "public",
51
+ "provenance": false
52
+ },
53
+ "dependencies": {
54
+ "@lucide/svelte": "^0.511.0"
55
+ },
56
+ "devDependencies": {
57
+ "@sveltejs/package": "^2.5.7",
58
+ "@sveltejs/vite-plugin-svelte": "^4.0.4",
59
+ "@testing-library/svelte": "^5.3.1",
60
+ "@vitest/coverage-v8": "^2.1.9",
61
+ "jsdom": "^25.0.1",
62
+ "prettier": "^3.8.3",
63
+ "prettier-plugin-svelte": "^4.0.1",
64
+ "prettier-plugin-tailwindcss": "^0.8.0",
65
+ "publint": "^0.2.12",
66
+ "svelte": "^5.55.9",
67
+ "svelte-check": "^4.4.8",
68
+ "typescript": "^5.9.3",
69
+ "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
+ }
81
+ }
package/src/lib/styles/theme.css ADDED
@@ -0,0 +1,148 @@
1
+ /*
2
+ * @lyeve/ui-kit - theme tokens
3
+ *
4
+ * A single CSS file imported once at the top of your app's root stylesheet.
5
+ * Declares two palettes - Soft Dark (default) and Soft Light - built from
6
+ * the LyEve brand guideline (Ink #0B1422 + Cyan #00D4FF) and exposes them
7
+ * as Tailwind v4 `@theme` tokens.
8
+ *
9
+ * import '@lyeve/ui-kit/styles.css';
10
+ *
11
+ * Switching themes is a single attribute on `<html>`:
12
+ * <html data-theme="light"> // light mode
13
+ * <html> // dark mode (default)
14
+ */
15
+
16
+ @import 'tailwindcss';
17
+
18
+ /* ── Soft Dark · default palette ─────────────────────────────────────────── */
19
+ @theme {
20
+ --color-ink: #0b1422;
21
+ --color-surface: #101a2b;
22
+ --color-surface-2: #162233;
23
+ --color-line: #1e2d40;
24
+ --color-fg: #e6e8ee;
25
+ --color-muted: #9aa1ad;
26
+ --color-faint: #525866;
27
+
28
+ --color-brand: #00d4ff;
29
+ --color-brand-light: #5fd9f4;
30
+ --color-brand-deep: #0099c4;
31
+ --color-violet: #7c6aef;
32
+
33
+ --color-success: #15803d;
34
+ --color-warn: #b45309;
35
+ --color-danger: #b91c1c;
36
+
37
+ /* ── Radius ─────────────────────────────────────────────────── */
38
+ --radius-xs: 4px;
39
+ --radius-sm: 6px;
40
+ --radius-md: 8px;
41
+ --radius-lg: 12px;
42
+ --radius-xl: 16px;
43
+ --radius-2xl: 24px;
44
+
45
+ /* ── Typography · families ───────────────────────────────────── */
46
+ --font-sans:
47
+ 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
48
+ 'Noto Sans', sans-serif;
49
+ --font-mono:
50
+ 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, Consolas,
51
+ monospace;
52
+
53
+ /* ── Typography · brand type scale (from brand guideline) ────── *
54
+ * Token Size Line Tracking Weight Use *
55
+ * Display 64px 1.05 −0.04em 700 Hero headlines *
56
+ * H1 44px 1.10 −0.025em 700 Page titles *
57
+ * H2 32px 1.15 −0.02em 600 Section headings *
58
+ * H3 22px 1.25 −0.015em 600 Card / group heads *
59
+ * Body 16px 1.55 0 400 Default body copy *
60
+ * Caption 13px 1.50 0 400 Labels, metadata *
61
+ * Mono 18px 1.50 0 500 Code, eyebrows *
62
+ * */
63
+ --font-size-display: 4rem; /* 64px */
64
+ --font-size-h1: 2.75rem; /* 44px */
65
+ --font-size-h2: 2rem; /* 32px */
66
+ --font-size-h3: 1.375rem; /* 22px */
67
+ --font-size-body: 1rem; /* 16px */
68
+ --font-size-caption: 0.8125rem; /* 13px */
69
+ --font-size-mono: 1.125rem; /* 18px */
70
+
71
+ --leading-display: 1.05;
72
+ --leading-h1: 1.1;
73
+ --leading-h2: 1.15;
74
+ --leading-h3: 1.25;
75
+ --leading-body: 1.55;
76
+ --leading-caption: 1.5;
77
+ --leading-mono: 1.5;
78
+
79
+ --tracking-display: -0.04em;
80
+ --tracking-h1: -0.025em;
81
+ --tracking-h2: -0.02em;
82
+ --tracking-h3: -0.015em;
83
+
84
+ /* ── Spacing grid · 4px base (semantic shortcuts) ────────────── *
85
+ * Tailwind's default 0.25rem (4px) grid is unchanged. *
86
+ * These tokens add named slots for common component spacing. */
87
+ --spacing-page-x: 1.5rem; /* 24px - page horizontal gutter */
88
+ --spacing-page-y: 2rem; /* 32px - page vertical gutter */
89
+ --spacing-card: 1.5rem; /* 24px - card inner padding */
90
+ --spacing-card-sm: 1rem; /* 16px - compact card padding */
91
+ --spacing-section: 3rem; /* 48px - section gap */
92
+ --spacing-input-x: 0.75rem; /* 12px - input horizontal padding */
93
+ --spacing-input-y: 0.5rem; /* 8px - input vertical padding */
94
+ --spacing-stack: 1rem; /* 16px - default vertical stack gap */
95
+ --spacing-inline: 0.5rem; /* 8px - default inline gap */
96
+ }
97
+
98
+ /* ── Soft Light · activated by html[data-theme="light"] ──────────────────── */
99
+ html[data-theme='light'] {
100
+ --color-ink: #f6f7f9;
101
+ --color-surface: #ffffff;
102
+ --color-surface-2: #e6e8ee;
103
+ --color-line: #d6d9e0;
104
+ --color-fg: #111827;
105
+ --color-muted: #525866;
106
+ --color-faint: #9aa1ad;
107
+
108
+ --color-brand: #007ea6;
109
+ --color-brand-light: #00b4dd;
110
+ --color-brand-deep: #006a8a;
111
+ --color-violet: #6b5cdf;
112
+
113
+ --color-success: #15803d;
114
+ --color-warn: #b45309;
115
+ --color-danger: #b91c1c;
116
+ }
117
+
118
+ @layer base {
119
+ html {
120
+ background-color: var(--color-ink);
121
+ color-scheme: dark;
122
+ }
123
+
124
+ html[data-theme='light'] {
125
+ color-scheme: light;
126
+ }
127
+
128
+ body {
129
+ background-color: var(--color-ink);
130
+ color: var(--color-fg);
131
+ font-family: var(--font-sans);
132
+ -webkit-font-smoothing: antialiased;
133
+ -moz-osx-font-smoothing: grayscale;
134
+ }
135
+
136
+ ::selection {
137
+ background-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
138
+ }
139
+
140
+ :focus-visible {
141
+ outline: 2px solid color-mix(in srgb, var(--color-brand) 60%, transparent);
142
+ outline-offset: 2px;
143
+ }
144
+
145
+ :focus:not(:focus-visible) {
146
+ outline: none;
147
+ }
148
+ }