@umami/react-zen 0.15.0 → 0.16.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 (7) hide show
  1. package/README.md +3 -5
  2. package/dist/index.css +1663 -497
  3. package/dist/index.d.ts +805 -762
  4. package/dist/index.js +3380 -3104
  5. package/dist/index.mjs +2727 -2456
  6. package/dist/zen.css +61 -42
  7. package/package.json +8 -39
package/dist/zen.css CHANGED
@@ -1,38 +1,44 @@
1
1
  :root {
2
2
  /* Base values */
3
- --spacing-1: 0.25rem;
4
- --spacing-2: 0.5rem;
5
- --spacing-3: 1rem;
6
- --spacing-4: 1.25rem;
7
- --spacing-5: 1.5rem;
8
- --spacing-6: 1.75rem;
9
- --spacing-7: 2rem;
10
- --spacing-8: 3rem;
11
- --spacing-9: 4rem;
12
- --spacing-10: 5rem;
13
- --spacing-11: 7.5rem;
14
- --spacing-12: 10rem;
15
-
16
- --gap-xs: 1px;
17
- --gap-sm: 0.5rem;
18
- --gap-md: 1rem;
19
- --gap-lg: 2rem;
20
- --gap-xl: 8rem;
21
-
22
- --font-size-xs: 0.75rem;
23
- --font-size-sm: 0.875rem;
24
- --font-size-md: 1rem;
25
- --font-size-lg: 1.25rem;
26
- --font-size-xl: 1.5rem;
27
-
28
- --border-sm: 1px;
29
- --border-md: 2px;
30
- --border-lg: 4px;
31
-
32
- --border-radius-sm: 0.125rem;
33
- --border-radius-md: 0.25rem;
34
- --border-radius-lg: 0.5rem;
35
- --border-radius-full: 100%;
3
+ --font-size-1: 12px;
4
+ --font-size-2: 14px;
5
+ --font-size-3: 16px;
6
+ --font-size-4: 18px;
7
+ --font-size-5: 20px;
8
+ --font-size-6: 24px;
9
+ --font-size-7: 28px;
10
+ --font-size-8: 36px;
11
+ --font-size-9: 60px;
12
+
13
+ --font-weight-light: 300;
14
+ --font-weight-regular: 400;
15
+ --font-weight-medium: 500;
16
+ --font-weight-bold: 700;
17
+
18
+ --spacing-1: 4px;
19
+ --spacing-2: 8px;
20
+ --spacing-3: 12px;
21
+ --spacing-4: 16px;
22
+ --spacing-5: 24px;
23
+ --spacing-6: 32px;
24
+ --spacing-7: 40px;
25
+ --spacing-8: 48px;
26
+ --spacing-9: 64px;
27
+ --spacing-10: 80px;
28
+ --spacing-11: 96px;
29
+ --spacing-12: 128px;
30
+
31
+ --border-size-1: 1px;
32
+ --border-size-2: 2px;
33
+ --border-size-3: 4px;
34
+ --border-size-4: 8px;
35
+
36
+ --border-radius-1: 2px;
37
+ --border-radius-2: 4px;
38
+ --border-radius-3: 8px;
39
+ --border-radius-4: 16px;
40
+ --border-radius-5: 18px;
41
+ --border-radius-6: 9999px;
36
42
 
37
43
  --box-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
38
44
  --box-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -41,6 +47,8 @@
41
47
  --box-shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
42
48
  --box-shadow-6: 0 25px 50px -12px rgb(0 0 0 / 0.25);
43
49
 
50
+ /* Color values */
51
+
44
52
  --base-color-50: #fafafa;
45
53
  --base-color-100: #f5f5f5;
46
54
  --base-color-200: #e5e5e5;
@@ -70,13 +78,20 @@
70
78
 
71
79
  /* Settings */
72
80
 
73
- --font-size: 16px;
81
+ --font-family: Inter;
82
+ --font-family-code: 'JetBrains Mono';
83
+
84
+ --font-size: var(--font-size-2);
85
+
86
+ --border-radius: var(--border-radius-2);
74
87
 
75
- --border-radius: var(--border-radius-md);
88
+ --border-width: var(--border-size-1);
76
89
 
77
- --gap: var(--spacing-5);
90
+ --gap: var(--spacing-3);
78
91
 
79
- --padding: var(--spacing-2) var(--spacing-3);
92
+ --padding-x: var(--spacing-3);
93
+ --padding-y: var(--spacing-2);
94
+ --padding: var(--padding-y) var(--padding-x);
80
95
 
81
96
  --box-shadow: var(--box-shadow-1);
82
97
 
@@ -93,10 +108,10 @@
93
108
  --font-faded-color: var(--base-color-400);
94
109
 
95
110
  --border-color: var(--base-color-300);
96
- --border: var(--border-sm) solid var(--border-color);
111
+ --border: var(--border-width) solid var(--border-color);
97
112
 
98
113
  --outline-color: var(--base-color-400);
99
- --outline: var(--border-sm) solid var(--outline-color);
114
+ --outline: var(--border-width) solid var(--outline-color);
100
115
 
101
116
  --primary-color: var(--base-color-900);
102
117
  --primary-font-color: var(--base-color-50);
@@ -111,17 +126,17 @@
111
126
  --input-disabled-color: var(--base-color-100);
112
127
 
113
128
  [data-theme='dark'] {
114
- --background-color: var(--base-color-950);
129
+ --background-color: #0f0f0f;
115
130
 
116
131
  --font-color: var(--base-color-200);
117
132
  --font-muted-color: var(--base-color-400);
118
133
  --font-faded-color: var(--base-color-500);
119
134
 
120
135
  --border-color: var(--base-color-700);
121
- --border: var(--border-sm) solid var(--border-color);
136
+ --border: var(--border-width) solid var(--border-color);
122
137
 
123
138
  --outline-color: var(--base-color-600);
124
- --outline: var(--border-sm) solid var(--outline-color);
139
+ --outline: var(--border-width) solid var(--outline-color);
125
140
 
126
141
  --primary-color: var(--base-color-50);
127
142
  --primary-font-color: var(--base-color-900);
@@ -139,4 +154,8 @@
139
154
  :where(input, textarea, select) {
140
155
  min-width: 240px;
141
156
  }
157
+
158
+ * {
159
+ outline-color: var(--primary-color);
160
+ }
142
161
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umami/react-zen",
3
- "version": "0.15.0",
3
+ "version": "0.16.0",
4
4
  "description": "React components built by Umami",
5
5
  "author": "Umami <hello@umami.is>",
6
6
  "license": "MIT",
@@ -46,53 +46,22 @@
46
46
  "@fontsource/jetbrains-mono": "^5.0.18",
47
47
  "@mdx-js/loader": "^3.0.0",
48
48
  "@mdx-js/react": "^3.0.0",
49
- "@next/mdx": "^14.1.0",
50
- "@radix-ui/colors": "^3.0.0",
51
- "@radix-ui/react-accessible-icon": "^1.1.0",
52
- "@radix-ui/react-accordion": "^1.1.2",
53
- "@radix-ui/react-alert-dialog": "^1.0.5",
54
- "@radix-ui/react-aspect-ratio": "^1.0.3",
55
- "@radix-ui/react-avatar": "^1.0.4",
56
- "@radix-ui/react-checkbox": "^1.1.1",
57
- "@radix-ui/react-collapsible": "^1.0.3",
58
- "@radix-ui/react-context-menu": "^2.1.5",
59
- "@radix-ui/react-dialog": "^1.0.5",
60
- "@radix-ui/react-direction": "^1.0.1",
61
- "@radix-ui/react-dropdown-menu": "^2.0.6",
62
- "@radix-ui/react-hover-card": "^1.0.7",
63
- "@radix-ui/react-label": "^2.0.2",
64
- "@radix-ui/react-menubar": "^1.0.4",
65
- "@radix-ui/react-navigation-menu": "^1.1.4",
66
- "@radix-ui/react-popover": "^1.0.7",
67
- "@radix-ui/react-portal": "^1.0.4",
68
- "@radix-ui/react-progress": "^1.0.3",
69
- "@radix-ui/react-radio-group": "^1.1.3",
70
- "@radix-ui/react-scroll-area": "^1.0.5",
71
- "@radix-ui/react-select": "^2.1.1",
72
- "@radix-ui/react-separator": "^1.0.3",
73
- "@radix-ui/react-slider": "^1.1.2",
49
+ "@next/mdx": "^15.0.2",
74
50
  "@radix-ui/react-slot": "^1.0.2",
75
- "@radix-ui/react-switch": "^1.0.3",
76
- "@radix-ui/react-tabs": "^1.0.4",
77
51
  "@radix-ui/react-toast": "^1.2.1",
78
- "@radix-ui/react-toggle": "^1.0.3",
79
- "@radix-ui/react-toggle-group": "^1.0.4",
80
- "@radix-ui/react-toolbar": "^1.0.4",
81
- "@radix-ui/react-tooltip": "^1.0.7",
82
- "@radix-ui/react-visually-hidden": "^1.0.3",
83
52
  "classnames": "^2.5.1",
84
53
  "dts-bundle": "^0.7.3",
85
54
  "glob": "^10.3.10",
86
55
  "gray-matter": "^4.0.3",
87
- "next": "14.2.15",
56
+ "next": "15.0.2",
88
57
  "next-mdx-remote": "^5.0.0",
89
- "react": "^18",
58
+ "react": "^19.0.0-rc-66855b96-20241106",
90
59
  "react-aria-components": "^1.2.1",
91
- "react-dom": "^18",
60
+ "react-dom": "^19.0.0-rc-66855b96-20241106",
92
61
  "react-hook-form": "^7.53.0",
93
62
  "react-icons": "^5.2.1",
94
- "url": "^0.11.3",
95
- "walkdir": "^0.4.1",
63
+ "recursive-readdir": "^2.2.3",
64
+ "thenby": "^1.3.4",
96
65
  "zustand": "^4.5.0"
97
66
  },
98
67
  "devDependencies": {
@@ -130,7 +99,7 @@
130
99
  "rollup-plugin-dts": "^6.1.1",
131
100
  "rollup-plugin-esbuild": "^6.1.1",
132
101
  "rollup-plugin-postcss": "^4.0.2",
133
- "stylelint": "^16.7.0",
102
+ "stylelint": "^15.10.1",
134
103
  "stylelint-config-prettier": "^9.0.5",
135
104
  "stylelint-config-recommended": "^14.0.1",
136
105
  "typescript": "^5.6.3"