@weasel-js/theme 0.8.0 → 1.0.1

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 (12) hide show
  1. package/README.md +28 -0
  2. package/dist/chunk-RATE4LL3.js +786 -0
  3. package/dist/chunk-RATE4LL3.js.map +1 -0
  4. package/dist/index.d.ts +22 -240
  5. package/dist/index.js +83 -176
  6. package/dist/index.js.map +1 -1
  7. package/dist/react.d.ts +38 -0
  8. package/dist/react.js +45 -0
  9. package/dist/react.js.map +1 -0
  10. package/dist/resolveTheme-Bl6riwGu.d.ts +234 -0
  11. package/dist/tokens.css +36 -18
  12. package/package.json +13 -1
package/dist/resolveTheme-Bl6riwGu.d.ts ADDED
@@ -0,0 +1,234 @@
1
+ type TokenValue = string | number | readonly (string | number)[];
2
+ interface RawToken {
3
+ readonly type: string;
4
+ readonly value: TokenValue;
5
+ /** Render the referenced color at this alpha, 0–1. */
6
+ readonly alpha?: number | undefined;
7
+ readonly description?: string | undefined;
8
+ }
9
+ type FlatTokens = Record<string, RawToken>;
10
+
11
+ type TokenName = '--wzl-accent' | '--wzl-accent-base' | '--wzl-accent-fg' | '--wzl-accent-hover' | '--wzl-accent-soft' | '--wzl-accent-strong' | '--wzl-backdrop' | '--wzl-border' | '--wzl-border-strong' | '--wzl-border-w' | '--wzl-control-h' | '--wzl-curve-color' | '--wzl-curve-width' | '--wzl-danger' | '--wzl-danger-base' | '--wzl-ease-in-cubic' | '--wzl-ease-in-out-cubic' | '--wzl-ease-out-back' | '--wzl-ease-out-cubic' | '--wzl-fg' | '--wzl-fg-inverse' | '--wzl-fg-muted' | '--wzl-fg-on-accent' | '--wzl-fg-subtle' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--wzl-font-size' | '--wzl-font-size-sm' | '--wzl-font-ui' | '--wzl-font-weight-bold' | '--wzl-font-weight-light' | '--wzl-font-weight-medium' | '--wzl-font-weight-normal' | '--wzl-glass-blur' | '--wzl-glass-tint' | '--wzl-gray-100' | '--wzl-gray-200' | '--wzl-gray-300' | '--wzl-gray-400' | '--wzl-gray-50' | '--wzl-gray-500' | '--wzl-gray-600' | '--wzl-gray-700' | '--wzl-gray-800' | '--wzl-gray-900' | '--wzl-line' | '--wzl-line-strong' | '--wzl-line-subtle' | '--wzl-line-width' | '--wzl-motion-fast' | '--wzl-motion-medium' | '--wzl-radius-lg' | '--wzl-radius-md' | '--wzl-radius-sm' | '--wzl-space-lg' | '--wzl-space-md' | '--wzl-space-sm' | '--wzl-space-xs' | '--wzl-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--wzl-surface-pressed' | '--wzl-surface-raised' | '--wzl-surface-sunken' | '--wzl-swatch-amber' | '--wzl-swatch-cyan' | '--wzl-swatch-gold' | '--wzl-swatch-green' | '--wzl-swatch-magenta' | '--wzl-swatch-mint' | '--wzl-swatch-orange' | '--wzl-swatch-pink' | '--wzl-swatch-sky' | '--wzl-swatch-violet' | '--wzl-tb-height' | '--wzl-warning' | '--wzl-warning-base' | '--wzl-z-modal' | '--wzl-z-overlay' | '--wzl-z-toolbar';
12
+ interface GeneratedTheme {
13
+ readonly name: string;
14
+ readonly defaultMode: string;
15
+ readonly modes: Readonly<Record<string, Readonly<Record<TokenName, string>>>>;
16
+ }
17
+ declare const THEMES: {
18
+ readonly weasel: {
19
+ readonly name: "weasel";
20
+ readonly defaultMode: "dark";
21
+ readonly modes: {
22
+ readonly dark: {
23
+ readonly '--wzl-gray-50': "#f5f5f6";
24
+ readonly '--wzl-gray-100': "#e6e7e9";
25
+ readonly '--wzl-gray-200': "#c9cbcf";
26
+ readonly '--wzl-gray-300': "#9ea1a8";
27
+ readonly '--wzl-gray-400': "#6f737b";
28
+ readonly '--wzl-gray-500': "#4d5058";
29
+ readonly '--wzl-gray-600': "#383b42";
30
+ readonly '--wzl-gray-700': "#25272c";
31
+ readonly '--wzl-gray-800': "#181a1e";
32
+ readonly '--wzl-gray-900': "#0e0f12";
33
+ readonly '--wzl-accent-soft': "#1d1454";
34
+ readonly '--wzl-accent-base': "#2e1f7a";
35
+ readonly '--wzl-accent-strong': "#5841b8";
36
+ readonly '--wzl-danger-base': "#d94a3f";
37
+ readonly '--wzl-warning-base': "#d99a3f";
38
+ readonly '--wzl-success-base': "#2ec27e";
39
+ readonly '--wzl-fg-on-accent': "#f5f5f6";
40
+ readonly '--wzl-fg': "#e6e7e9";
41
+ readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
42
+ readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
43
+ readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
44
+ readonly '--wzl-curve-color': "#5841b8";
45
+ readonly '--wzl-accent': "#2e1f7a";
46
+ readonly '--wzl-accent-hover': "#5841b8";
47
+ readonly '--wzl-danger': "#d94a3f";
48
+ readonly '--wzl-warning': "#d99a3f";
49
+ readonly '--wzl-success': "#2ec27e";
50
+ readonly '--wzl-focus-ring': "#5841b8";
51
+ readonly '--wzl-glass-tint': "#2e1f7a";
52
+ readonly '--wzl-surface-hover': "rgba(230, 231, 233, 0.1)";
53
+ readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
54
+ readonly '--wzl-swatch-green': "#2fdd18";
55
+ readonly '--wzl-swatch-pink': "#ff5885";
56
+ readonly '--wzl-swatch-cyan': "#00dfff";
57
+ readonly '--wzl-swatch-gold': "#dcb700";
58
+ readonly '--wzl-swatch-amber': "#ff8c00";
59
+ readonly '--wzl-swatch-violet': "#a497ff";
60
+ readonly '--wzl-swatch-mint': "#00e7af";
61
+ readonly '--wzl-swatch-sky': "#00b8ff";
62
+ readonly '--wzl-swatch-orange': "#ff6b00";
63
+ readonly '--wzl-swatch-magenta': "#ff6eff";
64
+ readonly '--wzl-radius-sm': "3px";
65
+ readonly '--wzl-radius-md': "5px";
66
+ readonly '--wzl-border-w': "1px";
67
+ readonly '--wzl-line-width': "2px";
68
+ readonly '--wzl-curve-width': "3px";
69
+ readonly '--wzl-tb-height': "28px";
70
+ readonly '--wzl-radius-lg': "14px";
71
+ readonly '--wzl-control-h': "28px";
72
+ readonly '--wzl-glass-blur': "3px";
73
+ readonly '--wzl-font-size': "13px";
74
+ readonly '--wzl-font-size-sm': "11px";
75
+ readonly '--wzl-space-xs': "4px";
76
+ readonly '--wzl-space-sm': "8px";
77
+ readonly '--wzl-space-md': "12px";
78
+ readonly '--wzl-space-lg': "16px";
79
+ readonly '--wzl-z-toolbar': "10";
80
+ readonly '--wzl-z-overlay': "20";
81
+ readonly '--wzl-z-modal': "30";
82
+ readonly '--wzl-backdrop': "none";
83
+ readonly '--wzl-motion-fast': "120ms";
84
+ readonly '--wzl-motion-medium': "240ms";
85
+ readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
86
+ readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
87
+ readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
88
+ readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
89
+ readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
90
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
91
+ readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
92
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
93
+ readonly '--wzl-font-weight-light': "200";
94
+ readonly '--wzl-font-weight-normal': "300";
95
+ readonly '--wzl-font-weight-medium': "350";
96
+ readonly '--wzl-font-weight-bold': "400";
97
+ readonly '--wzl-surface': "#181a1e";
98
+ readonly '--wzl-surface-raised': "#25272c";
99
+ readonly '--wzl-surface-sunken': "#0e0f12";
100
+ readonly '--wzl-fg-muted': "#9ea1a8";
101
+ readonly '--wzl-fg-subtle': "#6f737b";
102
+ readonly '--wzl-border': "#25272c";
103
+ readonly '--wzl-border-strong': "#383b42";
104
+ readonly '--wzl-accent-fg': "#5841b8";
105
+ readonly '--wzl-fg-inverse': "#0e0f12";
106
+ };
107
+ readonly light: {
108
+ readonly '--wzl-gray-50': "#f5f5f6";
109
+ readonly '--wzl-gray-100': "#e6e7e9";
110
+ readonly '--wzl-gray-200': "#c9cbcf";
111
+ readonly '--wzl-gray-300': "#9ea1a8";
112
+ readonly '--wzl-gray-400': "#6f737b";
113
+ readonly '--wzl-gray-500': "#4d5058";
114
+ readonly '--wzl-gray-600': "#383b42";
115
+ readonly '--wzl-gray-700': "#25272c";
116
+ readonly '--wzl-gray-800': "#181a1e";
117
+ readonly '--wzl-gray-900': "#0e0f12";
118
+ readonly '--wzl-accent-soft': "#1d1454";
119
+ readonly '--wzl-accent-base': "#2e1f7a";
120
+ readonly '--wzl-accent-strong': "#5841b8";
121
+ readonly '--wzl-danger-base': "#d94a3f";
122
+ readonly '--wzl-warning-base': "#d99a3f";
123
+ readonly '--wzl-success-base': "#2ec27e";
124
+ readonly '--wzl-fg-on-accent': "#f5f5f6";
125
+ readonly '--wzl-fg': "#0e0f12";
126
+ readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
127
+ readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
128
+ readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
129
+ readonly '--wzl-curve-color': "#5841b8";
130
+ readonly '--wzl-accent': "#2e1f7a";
131
+ readonly '--wzl-accent-hover': "#5841b8";
132
+ readonly '--wzl-danger': "#d94a3f";
133
+ readonly '--wzl-warning': "#d99a3f";
134
+ readonly '--wzl-success': "#2ec27e";
135
+ readonly '--wzl-focus-ring': "#5841b8";
136
+ readonly '--wzl-glass-tint': "#2e1f7a";
137
+ readonly '--wzl-surface-hover': "rgba(14, 15, 18, 0.1)";
138
+ readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
139
+ readonly '--wzl-swatch-green': "#2fdd18";
140
+ readonly '--wzl-swatch-pink': "#ff5885";
141
+ readonly '--wzl-swatch-cyan': "#00dfff";
142
+ readonly '--wzl-swatch-gold': "#dcb700";
143
+ readonly '--wzl-swatch-amber': "#ff8c00";
144
+ readonly '--wzl-swatch-violet': "#a497ff";
145
+ readonly '--wzl-swatch-mint': "#00e7af";
146
+ readonly '--wzl-swatch-sky': "#00b8ff";
147
+ readonly '--wzl-swatch-orange': "#ff6b00";
148
+ readonly '--wzl-swatch-magenta': "#ff6eff";
149
+ readonly '--wzl-radius-sm': "3px";
150
+ readonly '--wzl-radius-md': "5px";
151
+ readonly '--wzl-border-w': "1px";
152
+ readonly '--wzl-line-width': "2px";
153
+ readonly '--wzl-curve-width': "3px";
154
+ readonly '--wzl-tb-height': "28px";
155
+ readonly '--wzl-radius-lg': "14px";
156
+ readonly '--wzl-control-h': "28px";
157
+ readonly '--wzl-glass-blur': "3px";
158
+ readonly '--wzl-font-size': "13px";
159
+ readonly '--wzl-font-size-sm': "11px";
160
+ readonly '--wzl-space-xs': "4px";
161
+ readonly '--wzl-space-sm': "8px";
162
+ readonly '--wzl-space-md': "12px";
163
+ readonly '--wzl-space-lg': "16px";
164
+ readonly '--wzl-z-toolbar': "10";
165
+ readonly '--wzl-z-overlay': "20";
166
+ readonly '--wzl-z-modal': "30";
167
+ readonly '--wzl-backdrop': "none";
168
+ readonly '--wzl-motion-fast': "120ms";
169
+ readonly '--wzl-motion-medium': "240ms";
170
+ readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
171
+ readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
172
+ readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
173
+ readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
174
+ readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
175
+ readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
176
+ readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
177
+ readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
178
+ readonly '--wzl-font-weight-light': "200";
179
+ readonly '--wzl-font-weight-normal': "300";
180
+ readonly '--wzl-font-weight-medium': "350";
181
+ readonly '--wzl-font-weight-bold': "400";
182
+ readonly '--wzl-surface': "#f5f5f6";
183
+ readonly '--wzl-surface-raised': "#e6e7e9";
184
+ readonly '--wzl-surface-sunken': "#c9cbcf";
185
+ readonly '--wzl-fg-muted': "#383b42";
186
+ readonly '--wzl-fg-subtle': "#4d5058";
187
+ readonly '--wzl-border': "#c9cbcf";
188
+ readonly '--wzl-border-strong': "#9ea1a8";
189
+ readonly '--wzl-accent-fg': "#2e1f7a";
190
+ readonly '--wzl-fg-inverse': "#f5f5f6";
191
+ };
192
+ };
193
+ };
194
+ };
195
+ /** Unresolved token graph. `extends` needs the aliases intact so an override
196
+ * of a base primitive still reaches everything referencing it. */
197
+ interface ThemeSource {
198
+ readonly primitives: Readonly<Record<string, RawToken>>;
199
+ readonly modes: Readonly<Record<string, Readonly<Record<string, RawToken>>>>;
200
+ }
201
+ declare const THEME_SOURCES: Readonly<Record<string, ThemeSource>>;
202
+
203
+ /** Authoring shorthand: a bare string is a literal or a `{ref}`. */
204
+ type TokenInput = string | number | RawToken;
205
+ interface ThemeInput {
206
+ readonly name: string;
207
+ /** Base to layer onto. Defaults to `weaselTheme`; `null` opts out. */
208
+ readonly extends?: Theme | null;
209
+ readonly defaultMode?: string;
210
+ /** Mode-invariant overrides. */
211
+ readonly tokens?: Readonly<Record<string, TokenInput>>;
212
+ readonly modes: Readonly<Record<string, Readonly<Record<string, TokenInput>>>>;
213
+ }
214
+ interface Theme {
215
+ readonly name: string;
216
+ readonly extends: Theme | null;
217
+ readonly defaultMode: string;
218
+ readonly tokens: FlatTokens;
219
+ readonly modes: Readonly<Record<string, FlatTokens>>;
220
+ }
221
+ /** The built-in theme, materialized from the generated source. */
222
+ declare const weaselTheme: Theme;
223
+ declare function defineTheme(input: ThemeInput): Theme;
224
+
225
+ type ResolvedTheme = Readonly<Record<TokenName, string>>;
226
+ /**
227
+ * Merge the extends chain, layer the mode over it, resolve every alias, and
228
+ * key the result by CSS custom-property name.
229
+ *
230
+ * Pure — no DOM. An unresolvable reference throws rather than falling back.
231
+ */
232
+ declare function resolveTheme(theme: Theme, mode: string): ResolvedTheme;
233
+
234
+ export { type FlatTokens as F, type GeneratedTheme as G, type RawToken as R, type Theme as T, type ResolvedTheme as a, THEMES as b, THEME_SOURCES as c, type ThemeInput as d, type ThemeSource as e, type TokenInput as f, type TokenName as g, defineTheme as h, resolveTheme as r, weaselTheme as w };
package/dist/tokens.css CHANGED
@@ -37,21 +37,21 @@
37
37
  --wzl-focus-ring: var(--wzl-accent-strong);
38
38
  /* Frosted-glass tint. Components compose it as color-mix(in srgb, var(--wzl-glass-tint) 78%, transparent) with backdrop-filter: blur(3px). */
39
39
  --wzl-glass-tint: var(--wzl-accent);
40
- --wzl-text: var(--wzl-fg);
41
- --wzl-text-muted: var(--wzl-fg-muted);
42
- --wzl-bg: var(--wzl-surface);
43
- --wzl-muted: var(--wzl-fg-muted);
44
- --wzl-panel-bg: var(--wzl-surface);
45
- --wzl-panel-border: var(--wzl-border);
46
- --wzl-input-bg: var(--wzl-surface-sunken);
47
- --wzl-track-bg: var(--wzl-surface-sunken);
48
- --wzl-track-border: var(--wzl-border);
49
- --wzl-thumb-fill: var(--wzl-fg-muted);
50
- --wzl-thumb-border: var(--wzl-border-strong);
51
- --wzl-button-fill: var(--wzl-surface-raised);
52
- --wzl-button-fill-hover: color-mix(in srgb, var(--wzl-fg) 10%, transparent);
53
- --wzl-button-fill-pressed: color-mix(in srgb, var(--wzl-fg) 18%, transparent);
54
- --wzl-button-text: var(--wzl-fg);
40
+ /* Hover wash over a raised surface. Same formula as line-subtle, different job — do not collapse them. */
41
+ --wzl-surface-hover: color-mix(in srgb, var(--wzl-fg) 10%, transparent);
42
+ /* Pressed wash over a raised surface. */
43
+ --wzl-surface-pressed: color-mix(in srgb, var(--wzl-fg) 18%, transparent);
44
+ /* First of ten categorical spot colors for plotting, status and data viz. Ordered — take them in sequence. Mode-invariant on purpose: a series keeps its color when the mode flips. */
45
+ --wzl-swatch-green: #2fdd18;
46
+ --wzl-swatch-pink: #ff5885;
47
+ --wzl-swatch-cyan: #00dfff;
48
+ --wzl-swatch-gold: #dcb700;
49
+ --wzl-swatch-amber: #ff8c00;
50
+ --wzl-swatch-violet: #a497ff;
51
+ --wzl-swatch-mint: #00e7af;
52
+ --wzl-swatch-sky: #00b8ff;
53
+ --wzl-swatch-orange: #ff6b00;
54
+ --wzl-swatch-magenta: #ff6eff;
55
55
  --wzl-radius-sm: 3px;
56
56
  --wzl-radius-md: 5px;
57
57
  --wzl-border-w: 1px;
@@ -61,6 +61,22 @@
61
61
  --wzl-curve-width: 3px;
62
62
  /* Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToggleBar, ToolOptionsBar). */
63
63
  --wzl-tb-height: 28px;
64
+ --wzl-radius-lg: 14px;
65
+ /* Height of an interactive control — button, input, select. Distinct from tb-height, which sizes the strip a row of them sits in. */
66
+ --wzl-control-h: 28px;
67
+ /* Backdrop blur radius for frosted surfaces. Pairs with glass-tint. */
68
+ --wzl-glass-blur: 3px;
69
+ --wzl-font-size: 13px;
70
+ --wzl-font-size-sm: 11px;
71
+ --wzl-space-xs: 4px;
72
+ --wzl-space-sm: 8px;
73
+ --wzl-space-md: 12px;
74
+ --wzl-space-lg: 16px;
75
+ --wzl-z-toolbar: 10;
76
+ --wzl-z-overlay: 20;
77
+ --wzl-z-modal: 30;
78
+ /* Layered backdrop fill for a page or lab root. `none` here; a theme with a signature background sets it. */
79
+ --wzl-backdrop: none;
64
80
  /* Micro-interactions — hover, focus, pressed. */
65
81
  --wzl-motion-fast: 120ms;
66
82
  /* Entrances and exits — toasts, popovers, panels. */
@@ -76,6 +92,7 @@
76
92
  --wzl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
77
93
  --wzl-font-weight-light: 200;
78
94
  --wzl-font-weight-normal: 300;
95
+ --wzl-font-weight-medium: 350;
79
96
  --wzl-font-weight-bold: 400;
80
97
  --wzl-surface: var(--wzl-gray-800);
81
98
  --wzl-surface-raised: var(--wzl-gray-700);
@@ -87,7 +104,8 @@
87
104
  --wzl-border-strong: var(--wzl-gray-600);
88
105
  /* Accent for foreground use — text, icons, selected labels drawn on a surface. accent is a fill; the midnight base is too dim to read as text on dark surfaces. */
89
106
  --wzl-accent-fg: var(--wzl-accent-strong);
90
- --wzl-thumb-text: var(--wzl-gray-900);
107
+ /* Text drawn on a filled foreground-colored element (e.g. a slider thumb). Flips with the mode, so it is a semantic, not an alias to a primitive. */
108
+ --wzl-fg-inverse: var(--wzl-gray-900);
91
109
  }
92
110
 
93
111
  :root {
@@ -107,7 +125,7 @@
107
125
  --wzl-border: var(--wzl-gray-700);
108
126
  --wzl-border-strong: var(--wzl-gray-600);
109
127
  --wzl-accent-fg: var(--wzl-accent-strong);
110
- --wzl-thumb-text: var(--wzl-gray-900);
128
+ --wzl-fg-inverse: var(--wzl-gray-900);
111
129
  }
112
130
 
113
131
  [data-wzl-theme='weasel'][data-wzl-mode='light'],
@@ -122,5 +140,5 @@
122
140
  --wzl-border: var(--wzl-gray-200);
123
141
  --wzl-border-strong: var(--wzl-gray-300);
124
142
  --wzl-accent-fg: var(--wzl-accent-base);
125
- --wzl-thumb-text: var(--wzl-gray-50);
143
+ --wzl-fg-inverse: var(--wzl-gray-50);
126
144
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weasel-js/theme",
3
- "version": "0.8.0",
3
+ "version": "1.0.1",
4
4
  "description": "Design tokens shared by weasel-ui and weasel-hud — CSS variables + a parallel TS export.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -15,10 +15,22 @@
15
15
  "import": "./dist/index.js",
16
16
  "types": "./dist/index.d.ts"
17
17
  },
18
+ "./react": {
19
+ "import": "./dist/react.js",
20
+ "types": "./dist/react.d.ts"
21
+ },
18
22
  "./tokens.css": "./dist/tokens.css",
19
23
  "./fonts.css": "./dist/fonts.css",
20
24
  "./package.json": "./package.json"
21
25
  },
26
+ "peerDependencies": {
27
+ "react": ">=18"
28
+ },
29
+ "peerDependenciesMeta": {
30
+ "react": {
31
+ "optional": true
32
+ }
33
+ },
22
34
  "author": "orochi235",
23
35
  "homepage": "https://orochi235.github.io/weasel/",
24
36
  "repository": {