@keepkit/ui 0.10.0 → 0.12.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/README.md +6 -0
  2. package/dist/index.d.ts +119 -8
  3. package/dist/index.js +1738 -119
  4. package/dist/index.js.map +1 -1
  5. package/dist/theme.css +134 -0
  6. package/package.json +6 -3
package/dist/theme.css ADDED
@@ -0,0 +1,134 @@
1
+ :root {
2
+ --keepkit-primary: #2563eb;
3
+ --keepkit-primary-contrast: #ffffff;
4
+ --keepkit-bg: #ffffff;
5
+ --keepkit-surface: #f8fafc;
6
+ --keepkit-text: #0f172a;
7
+ --keepkit-muted: #64748b;
8
+ --keepkit-border: #cbd5e1;
9
+ --keepkit-danger: #b91c1c;
10
+ --keepkit-radius: 0.5rem;
11
+ --keepkit-space: 0.75rem;
12
+ --keepkit-font-size: 1rem;
13
+ }
14
+
15
+ [data-theme="dark"] {
16
+ --keepkit-primary: #93c5fd;
17
+ --keepkit-primary-contrast: #172554;
18
+ --keepkit-bg: #0f172a;
19
+ --keepkit-surface: #1e293b;
20
+ --keepkit-text: #e2e8f0;
21
+ --keepkit-muted: #94a3b8;
22
+ --keepkit-border: #475569;
23
+ --keepkit-danger: #fca5a5;
24
+ }
25
+
26
+ @media (prefers-color-scheme: dark) {
27
+ :root:not([data-theme="light"]) {
28
+ --keepkit-primary: #93c5fd;
29
+ --keepkit-primary-contrast: #172554;
30
+ --keepkit-bg: #0f172a;
31
+ --keepkit-surface: #1e293b;
32
+ --keepkit-text: #e2e8f0;
33
+ --keepkit-muted: #94a3b8;
34
+ --keepkit-border: #475569;
35
+ --keepkit-danger: #fca5a5;
36
+ }
37
+ }
38
+
39
+ [data-keepkit] {
40
+ box-sizing: border-box;
41
+ color: var(--keepkit-text);
42
+ font-size: var(--keepkit-font-size);
43
+ }
44
+
45
+ [data-keepkit] *,
46
+ [data-keepkit] *::before,
47
+ [data-keepkit] *::after {
48
+ box-sizing: inherit;
49
+ }
50
+
51
+ [data-keepkit="status-badge"] {
52
+ display: inline-flex;
53
+ border: 1px solid var(--keepkit-border);
54
+ border-radius: 999px;
55
+ padding: 0.125rem 0.5rem;
56
+ background: var(--keepkit-surface);
57
+ color: var(--keepkit-muted);
58
+ font-size: 0.875em;
59
+ font-weight: 600;
60
+ }
61
+
62
+ [data-keepkit="status-badge"][data-status="available"] {
63
+ border-color: var(--keepkit-primary);
64
+ color: var(--keepkit-primary);
65
+ }
66
+
67
+ [data-keepkit="status-badge"][data-status="expired"],
68
+ [data-keepkit="status-badge"][data-status="removed"],
69
+ [data-keepkit="status-badge"][data-status="deleted"] {
70
+ border-color: var(--keepkit-danger);
71
+ color: var(--keepkit-danger);
72
+ }
73
+
74
+ [data-keepkit="stale-notice"],
75
+ [data-keepkit="sync-status"],
76
+ [data-keepkit="sync-recovery"] {
77
+ border: 1px solid var(--keepkit-border);
78
+ border-radius: var(--keepkit-radius);
79
+ padding: var(--keepkit-space);
80
+ background: var(--keepkit-surface);
81
+ }
82
+
83
+ [data-keepkit="stale-notice"] {
84
+ display: grid;
85
+ gap: var(--keepkit-space);
86
+ }
87
+
88
+ [data-keepkit="stale-notice"] [role="alert"],
89
+ [data-keepkit="sync-status"][data-state="error"],
90
+ [data-keepkit="sync-recovery"][data-state="error"] {
91
+ color: var(--keepkit-danger);
92
+ }
93
+
94
+ [data-keepkit="sync-recovery"] {
95
+ max-width: 40rem;
96
+ margin: 1rem auto;
97
+ background: var(--keepkit-bg);
98
+ }
99
+
100
+ [data-keepkit="sync-recovery"] header,
101
+ [data-keepkit="sync-recovery"] article,
102
+ [data-keepkit="sync-recovery"] [data-recovery="backup"] {
103
+ display: grid;
104
+ gap: var(--keepkit-space);
105
+ }
106
+
107
+ [data-keepkit="sync-recovery"] header {
108
+ grid-template-columns: 1fr auto;
109
+ align-items: start;
110
+ }
111
+
112
+ [data-keepkit] button {
113
+ border: 1px solid var(--keepkit-primary);
114
+ border-radius: var(--keepkit-radius);
115
+ padding: 0.5rem 0.75rem;
116
+ background: var(--keepkit-primary);
117
+ color: var(--keepkit-primary-contrast);
118
+ cursor: pointer;
119
+ }
120
+
121
+ [data-keepkit] button:disabled {
122
+ cursor: not-allowed;
123
+ opacity: 0.55;
124
+ }
125
+
126
+ @media (max-width: 40rem) {
127
+ :root {
128
+ --keepkit-font-size: 0.9375rem;
129
+ }
130
+
131
+ [data-keepkit="sync-recovery"] header {
132
+ grid-template-columns: 1fr;
133
+ }
134
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keepkit/ui",
3
- "version": "0.10.0",
3
+ "version": "0.12.0",
4
4
  "description": "Headless, accessible React UI components for KeepKit.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -20,6 +20,9 @@
20
20
  "./react": {
21
21
  "types": "./dist/index.d.ts",
22
22
  "import": "./dist/index.js"
23
+ },
24
+ "./theme.css": {
25
+ "default": "./dist/theme.css"
23
26
  }
24
27
  },
25
28
  "sideEffects": false,
@@ -30,7 +33,7 @@
30
33
  "react": ">=18"
31
34
  },
32
35
  "dependencies": {
33
- "@keepkit/core": "0.10.0"
36
+ "@keepkit/core": "0.12.0"
34
37
  },
35
38
  "devDependencies": {
36
39
  "@testing-library/react": "^16.3.3",
@@ -45,7 +48,7 @@
45
48
  "vitest": "^4.1.11"
46
49
  },
47
50
  "scripts": {
48
- "build": "tsup",
51
+ "build": "tsup && node scripts/copy-theme.mjs",
49
52
  "clean": "rm -rf dist",
50
53
  "dev": "tsup --watch",
51
54
  "lint": "tsc --noEmit",