@loykin/designkit 0.0.1-dev.5 → 0.0.1-dev.6

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 (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +2 -0
  3. package/dist/index.cjs +331 -130
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +80 -37
  6. package/dist/index.d.ts +80 -37
  7. package/dist/index.js +326 -132
  8. package/dist/index.js.map +1 -1
  9. package/dist/styles.css +106 -55
  10. package/package.json +5 -4
package/dist/styles.css CHANGED
@@ -3,30 +3,97 @@
3
3
  /*
4
4
  * DesignKit preset bridge.
5
5
  *
6
- * DesignKit should own the shared design tokens and map them onto the
7
- * package-specific variables used by Loykin kits. This file is intentionally
8
- * small for now; package adapters will grow here as gridkit/chartkit/basekit
9
- * are wired into the playground.
6
+ * DesignKit owns shared semantic tokens and its own --designkit-* namespace.
7
+ * Sibling packages should consume shared variables such as --primary, --border,
8
+ * and --radius instead of depending on DesignKit-specific variables.
10
9
  */
11
10
 
11
+ @custom-variant dark (&:is(.dark *));
12
+
13
+ @theme inline {
14
+ --color-background: var(--background, var(--designkit-background));
15
+ --color-foreground: var(--foreground, var(--designkit-foreground));
16
+ --color-card: var(--card, var(--designkit-card));
17
+ --color-card-foreground: var(--card-foreground, var(--designkit-card-foreground));
18
+ --color-popover: var(--popover, var(--designkit-card));
19
+ --color-popover-foreground: var(--popover-foreground, var(--designkit-card-foreground));
20
+ --color-primary: var(--primary, var(--designkit-primary));
21
+ --color-primary-foreground: var(--primary-foreground, var(--designkit-primary-foreground));
22
+ --color-secondary: var(--secondary, var(--designkit-secondary));
23
+ --color-secondary-foreground: var(--secondary-foreground, var(--designkit-secondary-foreground));
24
+ --color-muted: var(--muted, var(--designkit-muted));
25
+ --color-muted-foreground: var(--muted-foreground, var(--designkit-muted-foreground));
26
+ --color-accent: var(--accent, var(--designkit-accent));
27
+ --color-accent-foreground: var(--accent-foreground, var(--designkit-accent-foreground));
28
+ --color-destructive: var(--destructive, var(--designkit-destructive));
29
+ --color-destructive-foreground: var(
30
+ --destructive-foreground,
31
+ var(--designkit-primary-foreground)
32
+ );
33
+ --color-border: var(--border, var(--designkit-border));
34
+ --color-input: var(--input, var(--designkit-input));
35
+ --color-ring: var(--ring, var(--designkit-ring));
36
+ --color-sidebar: var(--sidebar, var(--designkit-card));
37
+ --color-sidebar-foreground: var(--sidebar-foreground, var(--designkit-card-foreground));
38
+ --color-sidebar-primary: var(--sidebar-primary, var(--designkit-primary));
39
+ --color-sidebar-primary-foreground: var(
40
+ --sidebar-primary-foreground,
41
+ var(--designkit-primary-foreground)
42
+ );
43
+ --color-sidebar-accent: var(--sidebar-accent, var(--designkit-accent));
44
+ --color-sidebar-accent-foreground: var(
45
+ --sidebar-accent-foreground,
46
+ var(--designkit-accent-foreground)
47
+ );
48
+ --color-sidebar-border: var(--sidebar-border, var(--designkit-border));
49
+ --color-sidebar-ring: var(--sidebar-ring, var(--designkit-ring));
50
+ --radius-sm: calc(var(--radius, var(--designkit-radius)) * 0.6);
51
+ --radius-md: calc(var(--radius, var(--designkit-radius)) * 0.8);
52
+ --radius-lg: var(--radius, var(--designkit-radius));
53
+ --radius-xl: calc(var(--radius, var(--designkit-radius)) * 1.4);
54
+ --radius-2xl: calc(var(--radius, var(--designkit-radius)) * 1.8);
55
+ --radius-3xl: calc(var(--radius, var(--designkit-radius)) * 2.2);
56
+ --radius-4xl: calc(var(--radius, var(--designkit-radius)) * 2.6);
57
+ }
58
+
12
59
  :root {
13
- --designkit-radius: var(--radius, 0.5rem);
14
- --designkit-background: var(--background, oklch(1 0 0));
15
- --designkit-foreground: var(--foreground, oklch(0.145 0 0));
16
- --designkit-card: var(--card, oklch(1 0 0));
17
- --designkit-card-foreground: var(--card-foreground, oklch(0.145 0 0));
18
- --designkit-primary: var(--primary, oklch(0.205 0 0));
19
- --designkit-primary-foreground: var(--primary-foreground, oklch(0.985 0 0));
20
- --designkit-secondary: var(--secondary, oklch(0.97 0 0));
21
- --designkit-secondary-foreground: var(--secondary-foreground, oklch(0.205 0 0));
22
- --designkit-muted: var(--muted, oklch(0.97 0 0));
23
- --designkit-muted-foreground: var(--muted-foreground, oklch(0.556 0 0));
24
- --designkit-accent: var(--accent, oklch(0.97 0 0));
25
- --designkit-accent-foreground: var(--accent-foreground, oklch(0.205 0 0));
26
- --designkit-border: var(--border, oklch(0.922 0 0));
27
- --designkit-input: var(--input, oklch(0.922 0 0));
28
- --designkit-ring: var(--ring, oklch(0.708 0 0));
29
- --designkit-destructive: var(--destructive, oklch(0.577 0.245 27.325));
60
+ --designkit-radius: 0.5rem;
61
+ --designkit-background: oklch(1 0 0);
62
+ --designkit-foreground: oklch(0.145 0 0);
63
+ --designkit-card: oklch(1 0 0);
64
+ --designkit-card-foreground: oklch(0.145 0 0);
65
+ --designkit-primary: oklch(0.205 0 0);
66
+ --designkit-primary-foreground: oklch(0.985 0 0);
67
+ --designkit-secondary: oklch(0.97 0 0);
68
+ --designkit-secondary-foreground: oklch(0.205 0 0);
69
+ --designkit-muted: oklch(0.97 0 0);
70
+ --designkit-muted-foreground: oklch(0.556 0 0);
71
+ --designkit-accent: oklch(0.97 0 0);
72
+ --designkit-accent-foreground: oklch(0.205 0 0);
73
+ --designkit-border: oklch(0.922 0 0);
74
+ --designkit-input: oklch(0.922 0 0);
75
+ --designkit-ring: oklch(0.708 0 0);
76
+ --designkit-destructive: oklch(0.577 0.245 27.325);
77
+
78
+ --radius: var(--designkit-radius);
79
+ --background: var(--designkit-background);
80
+ --foreground: var(--designkit-foreground);
81
+ --card: var(--designkit-card);
82
+ --card-foreground: var(--designkit-card-foreground);
83
+ --popover: var(--designkit-card);
84
+ --popover-foreground: var(--designkit-card-foreground);
85
+ --primary: var(--designkit-primary);
86
+ --primary-foreground: var(--designkit-primary-foreground);
87
+ --secondary: var(--designkit-secondary);
88
+ --secondary-foreground: var(--designkit-secondary-foreground);
89
+ --muted: var(--designkit-muted);
90
+ --muted-foreground: var(--designkit-muted-foreground);
91
+ --accent: var(--designkit-accent);
92
+ --accent-foreground: var(--designkit-accent-foreground);
93
+ --destructive: var(--designkit-destructive);
94
+ --border: var(--designkit-border);
95
+ --input: var(--designkit-input);
96
+ --ring: var(--designkit-ring);
30
97
 
31
98
  /* light mode: slightly darker than background, semi-transparent */
32
99
  --designkit-header: oklch(0.96 0 0 / 0.92);
@@ -51,14 +118,24 @@
51
118
  }
52
119
 
53
120
  .dark {
54
- --designkit-background: var(--background, oklch(0.145 0 0));
55
- --designkit-foreground: var(--foreground, oklch(0.685 0 0));
56
- --designkit-card: var(--card, oklch(0.205 0 0));
57
- --designkit-card-foreground: var(--card-foreground, oklch(0.712 0 0));
58
- --designkit-muted: var(--muted, oklch(0.269 0 0));
59
- --designkit-muted-foreground: var(--muted-foreground, oklch(0.58 0 0));
60
- --designkit-border: var(--border, oklch(1 0 0 / 18%));
61
- --designkit-input: var(--input, oklch(1 0 0 / 22%));
121
+ --designkit-background: oklch(0.145 0 0);
122
+ --designkit-foreground: oklch(0.685 0 0);
123
+ --designkit-card: oklch(0.205 0 0);
124
+ --designkit-card-foreground: oklch(0.712 0 0);
125
+ --designkit-muted: oklch(0.269 0 0);
126
+ --designkit-muted-foreground: oklch(0.58 0 0);
127
+ --designkit-border: oklch(1 0 0 / 18%);
128
+ --designkit-input: oklch(1 0 0 / 22%);
129
+ --background: var(--designkit-background);
130
+ --foreground: var(--designkit-foreground);
131
+ --card: var(--designkit-card);
132
+ --card-foreground: var(--designkit-card-foreground);
133
+ --popover: var(--designkit-card);
134
+ --popover-foreground: var(--designkit-card-foreground);
135
+ --muted: var(--designkit-muted);
136
+ --muted-foreground: var(--designkit-muted-foreground);
137
+ --border: var(--designkit-border);
138
+ --input: var(--designkit-input);
62
139
  /* dark mode: slightly lighter than background, semi-transparent */
63
140
  --designkit-header: oklch(0.22 0 0 / 0.88);
64
141
  }
@@ -77,32 +154,6 @@
77
154
  --designkit-toolbar-height: 3rem;
78
155
  }
79
156
 
80
- /*
81
- * Gridkit adapter.
82
- *
83
- * Maps --gridkit-* tokens onto the designkit token set.
84
- * Must be loaded AFTER @loykin/gridkit/styles so these declarations win.
85
- */
86
- :root {
87
- --gridkit-background: var(--designkit-background);
88
- --gridkit-foreground: var(--designkit-foreground);
89
- --gridkit-popover: var(--designkit-card);
90
- --gridkit-popover-foreground: var(--designkit-card-foreground);
91
- --gridkit-primary: var(--designkit-primary);
92
- --gridkit-primary-foreground: var(--designkit-primary-foreground);
93
- --gridkit-secondary: var(--designkit-secondary);
94
- --gridkit-secondary-foreground: var(--designkit-secondary-foreground);
95
- --gridkit-muted: var(--designkit-muted);
96
- --gridkit-muted-foreground: var(--designkit-muted-foreground);
97
- --gridkit-accent: var(--designkit-accent);
98
- --gridkit-accent-foreground: var(--designkit-accent-foreground);
99
- --gridkit-destructive: var(--designkit-destructive);
100
- --gridkit-border: var(--designkit-border);
101
- --gridkit-input: var(--designkit-input);
102
- --gridkit-ring: var(--designkit-ring);
103
- --gridkit-radius: var(--designkit-radius);
104
- }
105
-
106
157
  /*
107
158
  * Basekit adapter.
108
159
  *
package/package.json CHANGED
@@ -1,11 +1,14 @@
1
1
  {
2
2
  "name": "@loykin/designkit",
3
- "version": "0.0.1-dev.5",
3
+ "version": "0.0.1-dev.6",
4
4
  "description": "A React UI component library with theming support.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
7
7
  "module": "./dist/index.js",
8
8
  "types": "./dist/index.d.ts",
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
9
12
  "exports": {
10
13
  ".": {
11
14
  "types": "./dist/index.d.ts",
@@ -27,8 +30,6 @@
27
30
  },
28
31
  "dependencies": {
29
32
  "@base-ui/react": "^1.4.1",
30
- "@tanstack/react-table": "^8.21.3",
31
- "@tanstack/react-virtual": "^3.13.24",
32
33
  "class-variance-authority": "^0.7.1",
33
34
  "clsx": "^2.1.1",
34
35
  "lucide-react": "^1.14.0",
@@ -38,7 +39,7 @@
38
39
  "devDependencies": {
39
40
  "@eslint/js": "^10.0.1",
40
41
  "@loykin/gridkit": "^0.2.0-dev.4",
41
- "@types/node": "^25.6.2",
42
+ "@types/node": "^26.0.0",
42
43
  "@types/react": "^19.2.14",
43
44
  "@types/react-dom": "^19.2.3",
44
45
  "@vitest/coverage-v8": "^4.1.4",