@keepkit/ui 0.12.0 → 0.13.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 (14) hide show
  1. package/README.md +70 -4
  2. package/dist/index.d.ts +64 -6
  3. package/dist/index.js +281 -94
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/base.css +218 -0
  6. package/dist/styles/button.css +64 -0
  7. package/dist/styles/collection.css +147 -0
  8. package/dist/styles/sync.css +107 -0
  9. package/dist/tailwind.css +22 -0
  10. package/dist/tailwind.d.ts +33 -0
  11. package/dist/tailwind.js +31 -0
  12. package/dist/tailwind.js.map +1 -0
  13. package/dist/theme.css +4 -134
  14. package/package.json +24 -3
package/dist/theme.css CHANGED
@@ -1,134 +1,4 @@
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
- }
1
+ @import "./styles/base.css";
2
+ @import "./styles/button.css";
3
+ @import "./styles/collection.css";
4
+ @import "./styles/sync.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@keepkit/ui",
3
- "version": "0.12.0",
3
+ "version": "0.13.0",
4
4
  "description": "Headless, accessible React UI components for KeepKit.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -23,9 +23,30 @@
23
23
  },
24
24
  "./theme.css": {
25
25
  "default": "./dist/theme.css"
26
+ },
27
+ "./tailwind": {
28
+ "types": "./dist/tailwind.d.ts",
29
+ "import": "./dist/tailwind.js"
30
+ },
31
+ "./tailwind.css": {
32
+ "default": "./dist/tailwind.css"
33
+ },
34
+ "./styles/base.css": {
35
+ "default": "./dist/styles/base.css"
36
+ },
37
+ "./styles/button.css": {
38
+ "default": "./dist/styles/button.css"
39
+ },
40
+ "./styles/collection.css": {
41
+ "default": "./dist/styles/collection.css"
42
+ },
43
+ "./styles/sync.css": {
44
+ "default": "./dist/styles/sync.css"
26
45
  }
27
46
  },
28
- "sideEffects": false,
47
+ "sideEffects": [
48
+ "**/*.css"
49
+ ],
29
50
  "publishConfig": {
30
51
  "access": "public"
31
52
  },
@@ -33,7 +54,7 @@
33
54
  "react": ">=18"
34
55
  },
35
56
  "dependencies": {
36
- "@keepkit/core": "0.12.0"
57
+ "@keepkit/core": "0.13.0"
37
58
  },
38
59
  "devDependencies": {
39
60
  "@testing-library/react": "^16.3.3",