@keepkit/ui 0.13.0 → 0.14.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 (8) hide show
  1. package/README.md +4 -2
  2. package/dist/index.d.ts +6 -5
  3. package/dist/index.js +150 -22
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/base.css +23 -1
  6. package/dist/styles/collection.css +42 -29
  7. package/dist/styles/sync.css +39 -0
  8. package/package.json +2 -2
package/dist/styles/base.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --keep-destructive-foreground: var(--destructive-foreground, #ffffff);
14
14
  --keep-ring: var(--ring, var(--keep-primary));
15
15
  --keep-accent: var(--primary, #2563eb);
16
- --keep-radius: 0.5rem;
16
+ --keep-radius: var(--radius, 0.5rem);
17
17
  --keep-card-padding: 1rem;
18
18
  --keep-card-gap: 0.75rem;
19
19
  --keep-thumbnail-size: 5rem;
@@ -44,6 +44,10 @@
44
44
  outline-offset: 2px;
45
45
  }
46
46
 
47
+ :where(.keep-theme, [data-keep-theme]) :is(button, a) {
48
+ min-height: var(--keep-button-size);
49
+ }
50
+
47
51
  :where(.keep-theme, [data-keep-theme]) :is(input, select, textarea) {
48
52
  min-height: var(--keep-button-size);
49
53
  border: 1px solid var(--keep-input);
@@ -77,6 +81,7 @@
77
81
 
78
82
  :where(.keep-theme, [data-keep-theme])[data-mode="dark"],
79
83
  :where(.keep-theme, [data-keep-theme]).keep-theme--dark,
84
+ :where(.keep-theme, [data-keep-theme]).dark,
80
85
  .dark :where(.keep-theme, [data-keep-theme]) {
81
86
  --keep-background: var(--background, #0f172a);
82
87
  --keep-foreground: var(--foreground, #e2e8f0);
@@ -183,6 +188,10 @@
183
188
  :where(.keep-theme, [data-keep-theme]) [data-state="saved"]::after {
184
189
  content: "✓";
185
190
  }
191
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="saved"],
192
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-state="saved"] {
193
+ animation: keepkit-save-pop 180ms ease-out;
194
+ }
186
195
  :where(.keep-theme, [data-keep-theme]) [data-state="unsaved"] {
187
196
  border-color: var(--keep-border);
188
197
  }
@@ -203,6 +212,13 @@
203
212
  :where(.keep-theme, [data-keep-theme]) [data-status="deleted"] {
204
213
  color: var(--keep-destructive);
205
214
  }
215
+ :where(.keep-theme, [data-keep-theme]) [data-item-status="expired"] {
216
+ border-style: dashed;
217
+ }
218
+ :where(.keep-theme, [data-keep-theme]) [data-item-status="removed"],
219
+ :where(.keep-theme, [data-keep-theme]) [data-item-status="restricted"] {
220
+ filter: grayscale(1);
221
+ }
206
222
  :where(.keep-theme, [data-keep-theme]) [data-state="empty"] {
207
223
  border-style: dashed;
208
224
  }
@@ -216,3 +232,9 @@
216
232
  border: 1px solid var(--keep-ring);
217
233
  background: var(--keep-muted);
218
234
  }
235
+
236
+ @keyframes keepkit-save-pop {
237
+ 50% {
238
+ transform: scale(1.025);
239
+ }
240
+ }
package/dist/styles/collection.css CHANGED
@@ -11,34 +11,34 @@
11
11
  align-items: center;
12
12
  }
13
13
 
14
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul,
15
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > [data-layout] {
16
- /* biome-ignore lint/complexity/noImportantStyles: Theme layout must override the primitive's inline layout. */
17
- display: grid !important;
14
+ :where(.keep-theme, [data-keep-theme])
15
+ :is([data-keepkit="layout"], [data-keepkit="list"] > ul, [data-keepkit="list"] > [data-layout]) {
16
+ display: grid;
18
17
  grid-template-columns: repeat(var(--keep-list-columns), minmax(0, 1fr));
19
- /* biome-ignore lint/complexity/noImportantStyles: Theme layout must override the primitive's inline layout. */
20
- gap: var(--keep-list-gap) !important;
18
+ gap: var(--keep-list-gap);
19
+ }
20
+
21
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul {
21
22
  margin: 0;
22
23
  padding: 0;
23
24
  list-style: none;
24
25
  }
25
26
 
26
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="grid"] > ul,
27
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="grid"] > [data-layout] {
28
- --keep-list-columns: var(--keep-grid-columns);
29
- }
30
-
31
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul[data-layout="grid"] {
27
+ :where(.keep-theme, [data-keep-theme])
28
+ :is(
29
+ [data-keepkit="layout"][data-layout="grid"],
30
+ [data-keepkit="list"] > ul[data-layout="grid"],
31
+ [data-keepkit="list"] > [data-layout="grid"]
32
+ ) {
32
33
  --keep-list-columns: var(--keep-grid-columns);
33
34
  }
34
35
 
35
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="compact"] > ul,
36
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="compact"] > [data-layout] {
37
- --keep-list-columns: var(--keep-compact-columns);
38
- --keep-list-gap: 0.5rem;
39
- }
40
-
41
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul[data-layout="compact"] {
36
+ :where(.keep-theme, [data-keep-theme])
37
+ :is(
38
+ [data-keepkit="layout"][data-layout="compact"],
39
+ [data-keepkit="list"] > ul[data-layout="compact"],
40
+ [data-keepkit="list"] > [data-layout="compact"]
41
+ ) {
42
42
  --keep-list-columns: var(--keep-compact-columns);
43
43
  --keep-list-gap: 0.5rem;
44
44
  }
@@ -86,13 +86,14 @@
86
86
  font-size: 0.8125rem;
87
87
  }
88
88
 
89
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-status="expired"],
90
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-status="removed"] {
89
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="expired"],
90
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="removed"],
91
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="restricted"] {
91
92
  opacity: 0.72;
92
93
  }
93
94
 
94
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-status="removed"],
95
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-status="deleted"] {
95
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="removed"],
96
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="restricted"] {
96
97
  animation: keepkit-card-fade-out 180ms ease-out;
97
98
  }
98
99
 
@@ -127,9 +128,15 @@
127
128
  }
128
129
 
129
130
  @media (max-width: 48rem) {
130
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="grid"] > ul,
131
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="grid"] > [data-layout],
132
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul[data-layout="grid"] {
131
+ :where(.keep-theme, [data-keep-theme])
132
+ :is(
133
+ [data-keepkit="layout"][data-layout="grid"],
134
+ [data-keepkit="layout"][data-layout="compact"],
135
+ [data-keepkit="list"] > ul[data-layout="grid"],
136
+ [data-keepkit="list"] > ul[data-layout="compact"],
137
+ [data-keepkit="list"] > [data-layout="grid"],
138
+ [data-keepkit="list"] > [data-layout="compact"]
139
+ ) {
133
140
  --keep-list-columns: 2;
134
141
  }
135
142
  }
@@ -139,9 +146,15 @@
139
146
  --keep-list-columns: var(--keep-mobile-columns);
140
147
  --keep-thumbnail-size: 4rem;
141
148
  }
142
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="grid"] > ul,
143
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"][data-layout="grid"] > [data-layout],
144
- :where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul[data-layout="grid"] {
149
+ :where(.keep-theme, [data-keep-theme])
150
+ :is(
151
+ [data-keepkit="layout"][data-layout="grid"],
152
+ [data-keepkit="layout"][data-layout="compact"],
153
+ [data-keepkit="list"] > ul[data-layout="grid"],
154
+ [data-keepkit="list"] > ul[data-layout="compact"],
155
+ [data-keepkit="list"] > [data-layout="grid"],
156
+ [data-keepkit="list"] > [data-layout="compact"]
157
+ ) {
145
158
  --keep-list-columns: var(--keep-mobile-columns);
146
159
  }
147
160
  }
package/dist/styles/sync.css CHANGED
@@ -29,6 +29,16 @@
29
29
  border-color: var(--keep-destructive);
30
30
  color: var(--keep-destructive);
31
31
  }
32
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"]::before {
33
+ content: "⚠";
34
+ margin-inline-end: 0.25rem;
35
+ }
36
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"],
37
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="removed"],
38
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="restricted"] {
39
+ border-color: var(--keep-destructive);
40
+ color: var(--keep-destructive);
41
+ }
32
42
 
33
43
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"],
34
44
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"] {
@@ -87,6 +97,32 @@
87
97
  display: grid;
88
98
  gap: var(--keep-card-gap);
89
99
  }
100
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-preview] {
101
+ display: grid;
102
+ grid-template-columns: repeat(2, minmax(0, 1fr));
103
+ gap: var(--keep-card-gap);
104
+ }
105
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] {
106
+ min-width: 0;
107
+ border: 1px solid var(--keep-border);
108
+ border-radius: var(--keep-radius);
109
+ padding: var(--keep-card-padding);
110
+ background: var(--keep-background);
111
+ }
112
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] dl {
113
+ display: grid;
114
+ gap: 0.5rem;
115
+ margin: 0;
116
+ }
117
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] dt {
118
+ color: var(--keep-muted-foreground);
119
+ font-size: 0.8125rem;
120
+ }
121
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] dd {
122
+ margin: 0;
123
+ overflow-wrap: anywhere;
124
+ white-space: pre-wrap;
125
+ }
90
126
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header {
91
127
  grid-template-columns: 1fr auto;
92
128
  align-items: start;
@@ -104,4 +140,7 @@
104
140
  :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header {
105
141
  grid-template-columns: 1fr;
106
142
  }
143
+ :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-preview] {
144
+ grid-template-columns: 1fr;
145
+ }
107
146
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keepkit/ui",
3
- "version": "0.13.0",
3
+ "version": "0.14.0",
4
4
  "description": "Headless, accessible React UI components for KeepKit.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -54,7 +54,7 @@
54
54
  "react": ">=18"
55
55
  },
56
56
  "dependencies": {
57
- "@keepkit/core": "0.13.0"
57
+ "@keepkit/core": "0.14.0"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@testing-library/react": "^16.3.3",