@splenddev/kreativ-core 0.0.1 → 0.1.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 (44) hide show
  1. package/README.md +33 -8
  2. package/dist/{common-CxqD2cxB.d.cts → common-1QyKLdTc.d.cts} +1 -1
  3. package/dist/{common-CxqD2cxB.d.ts → common-1QyKLdTc.d.ts} +1 -1
  4. package/dist/{hooks.cjs → hooks/index.cjs} +2 -2
  5. package/dist/hooks/index.cjs.map +1 -0
  6. package/dist/{hooks.d.ts → hooks/index.d.cts} +10 -4
  7. package/dist/{hooks.d.cts → hooks/index.d.ts} +10 -4
  8. package/dist/{hooks.js → hooks/index.js} +2 -2
  9. package/dist/hooks/index.js.map +1 -0
  10. package/dist/index.cjs +25 -1039
  11. package/dist/index.cjs.map +1 -1
  12. package/dist/index.d.cts +351 -7
  13. package/dist/index.d.ts +351 -7
  14. package/dist/index.js +26 -1010
  15. package/dist/index.js.map +1 -1
  16. package/dist/types/index.cjs +4 -0
  17. package/dist/types/index.cjs.map +1 -0
  18. package/dist/{types.d.ts → types/index.d.cts} +2 -2
  19. package/dist/{types.d.cts → types/index.d.ts} +2 -2
  20. package/dist/types/index.js +3 -0
  21. package/dist/types/index.js.map +1 -0
  22. package/dist/{utils.cjs → utils/index.cjs} +2 -2
  23. package/dist/utils/index.cjs.map +1 -0
  24. package/dist/{utils.d.cts → utils/index.d.cts} +1 -1
  25. package/dist/{utils.d.ts → utils/index.d.ts} +1 -1
  26. package/dist/{utils.js → utils/index.js} +2 -2
  27. package/dist/utils/index.js.map +1 -0
  28. package/package.json +1 -6
  29. package/dist/hooks.cjs.map +0 -1
  30. package/dist/hooks.js.map +0 -1
  31. package/dist/theme.cjs +0 -1183
  32. package/dist/theme.cjs.map +0 -1
  33. package/dist/theme.d.cts +0 -2724
  34. package/dist/theme.d.ts +0 -2724
  35. package/dist/theme.js +0 -1142
  36. package/dist/theme.js.map +0 -1
  37. package/dist/types.cjs +0 -4
  38. package/dist/types.cjs.map +0 -1
  39. package/dist/types.js +0 -3
  40. package/dist/types.js.map +0 -1
  41. package/dist/useColorMode-B7eyS27H.d.ts +0 -10
  42. package/dist/useColorMode-tvcgvc4V.d.cts +0 -10
  43. package/dist/utils.cjs.map +0 -1
  44. package/dist/utils.js.map +0 -1
package/dist/theme.cjs DELETED
@@ -1,1183 +0,0 @@
1
- 'use strict';
2
-
3
- // src/define/semanticToken.ts
4
- function defineSemanticToken(lightOrValue, dark) {
5
- if (dark === void 0) {
6
- return {
7
- value: {
8
- sameForBothModes: true,
9
- value: lightOrValue
10
- }
11
- };
12
- }
13
- return {
14
- value: {
15
- sameForBothModes: false,
16
- light: lightOrValue,
17
- dark
18
- }
19
- };
20
- }
21
- function defineSemanticTokens(tokens) {
22
- return Object.fromEntries(
23
- Object.entries(tokens).map(([key, entry]) => [
24
- key,
25
- entry !== null && typeof entry === "object" && "light" in entry && "dark" in entry ? defineSemanticToken(entry.light, entry.dark) : defineSemanticToken(entry)
26
- ])
27
- );
28
- }
29
-
30
- // src/defaults/semanticTokens.ts
31
- var defaultSemanticTokens = {
32
- colors: {
33
- brand: defineSemanticToken("{colors.blue.500}", "{colors.blue.400}"),
34
- brandHover: defineSemanticToken("{colors.blue.600}", "{colors.blue.300}"),
35
- brandFg: defineSemanticToken("{colors.white}"),
36
- background: defineSemanticToken("{colors.gray.50}", "{colors.gray.950}"),
37
- surface: defineSemanticToken("{colors.white}", "{colors.gray.900}"),
38
- surfaceRaised: defineSemanticToken("{colors.gray.50}", "{colors.gray.800}"),
39
- surfaceSunken: defineSemanticToken(
40
- "{colors.gray.100}",
41
- "{colors.gray.950}"
42
- ),
43
- border: defineSemanticToken("{colors.gray.200}", "{colors.gray.600}"),
44
- text: defineSemanticToken("{colors.gray.900}", "{colors.gray.50}"),
45
- textMuted: defineSemanticToken("{colors.gray.500}", "{colors.gray.400}"),
46
- destructive: defineSemanticToken("{colors.red.500}", "{colors.red.400}"),
47
- destructiveFg: defineSemanticToken("{colors.white}"),
48
- destructiveHover: defineSemanticToken(
49
- "{colors.red.600}",
50
- "{colors.red.300}"
51
- ),
52
- success: defineSemanticToken("{colors.green.500}", "{colors.green.400}"),
53
- successFg: defineSemanticToken("{colors.white}"),
54
- successHover: defineSemanticToken(
55
- "{colors.green.600}",
56
- "{colors.green.300}"
57
- ),
58
- warning: defineSemanticToken("{colors.amber.500}", "{colors.amber.400}"),
59
- warningFg: defineSemanticToken("{colors.black}"),
60
- warningHover: defineSemanticToken(
61
- "{colors.amber.600}",
62
- "{colors.amber.300}"
63
- ),
64
- info: defineSemanticToken("{colors.cyan.500}", "{colors.cyan.400}"),
65
- infoFg: defineSemanticToken("{colors.white}"),
66
- infoHover: defineSemanticToken("{colors.cyan.600}", "{colors.cyan.300}"),
67
- shadowColor: defineSemanticToken("{colors.gray.200}", "{colors.gray.600}")
68
- }
69
- };
70
-
71
- // src/define/size.ts
72
- function defineSize(size) {
73
- return size;
74
- }
75
- function defineSizes(sizes) {
76
- return sizes;
77
- }
78
-
79
- // src/defaults/sizes.ts
80
- var defaultSizes = defineSizes({
81
- xs: {
82
- height: "1.75rem",
83
- width: "1.75rem",
84
- paddingX: "0.5rem",
85
- fontSize: "{typography.sizeXs}",
86
- gap: "0.25rem",
87
- iconSize: "0.75rem",
88
- radius: "0.65rem",
89
- separatorSize: "15px"
90
- },
91
- sm: {
92
- height: "2rem",
93
- width: "2rem",
94
- paddingX: "0.75rem",
95
- fontSize: "{typography.sizeSm}",
96
- gap: "0.375rem",
97
- iconSize: "0.875rem",
98
- radius: "0.8rem",
99
- separatorSize: "20px"
100
- },
101
- md: {
102
- height: "2.5rem",
103
- width: "2.5rem",
104
- paddingX: "1rem",
105
- fontSize: "{typography.sizeMd}",
106
- gap: "0.5rem",
107
- iconSize: "1rem",
108
- radius: "1rem",
109
- separatorSize: "25px"
110
- },
111
- lg: {
112
- height: "3rem",
113
- width: "3rem",
114
- paddingX: "1.25rem",
115
- fontSize: "{typography.sizeLg}",
116
- gap: "0.625rem",
117
- iconSize: "1.25rem",
118
- radius: "1.15rem",
119
- separatorSize: "30px"
120
- },
121
- xl: {
122
- height: "3.5rem",
123
- width: "3.5rem",
124
- paddingX: "1.5rem",
125
- fontSize: "{typography.sizeXl}",
126
- gap: "0.875rem",
127
- iconSize: "1.5rem",
128
- radius: "1.3rem",
129
- separatorSize: "35px"
130
- }
131
- });
132
-
133
- // src/define/token.ts
134
- function defineToken(value) {
135
- return {
136
- value
137
- };
138
- }
139
- function defineTokens(tokens) {
140
- return Object.fromEntries(
141
- Object.entries(tokens).map(([key, value]) => [key, defineToken(value)])
142
- );
143
- }
144
-
145
- // src/defaults/tokens.ts
146
- var defaultTokens = {
147
- colors: {
148
- blue: {
149
- 300: defineToken("#5EA6ED"),
150
- 400: defineToken("#4799EB"),
151
- 500: defineToken("#1A80E6"),
152
- 600: defineToken("#1773CF")
153
- },
154
- red: {
155
- 300: defineToken("#EB4747"),
156
- 400: defineToken("#E83030"),
157
- 500: defineToken("#E61A1A"),
158
- 600: defineToken("#CF1717")
159
- },
160
- green: {
161
- 300: defineToken("#26D997"),
162
- 400: defineToken("#22C388"),
163
- 500: defineToken("#16A249"),
164
- 600: defineToken("#12875C")
165
- },
166
- amber: {
167
- 300: defineToken("#F7B23B"),
168
- 400: defineToken("#F6A823"),
169
- 500: defineToken("#F59F0A"),
170
- 600: defineToken("#D38909")
171
- },
172
- cyan: {
173
- 300: defineToken("#6CC3EF"),
174
- 400: defineToken("#47B4EB"),
175
- 500: defineToken("#1791CF"),
176
- 600: defineToken("#137BAE")
177
- },
178
- indigo: {
179
- 300: defineToken("#818CF8"),
180
- 400: defineToken("#6366F1"),
181
- 500: defineToken("#4F46E5"),
182
- 600: defineToken("#4338CA")
183
- },
184
- emerald: {
185
- 300: defineToken("#6EE7B7"),
186
- 400: defineToken("#34D399"),
187
- 500: defineToken("#10B981"),
188
- 600: defineToken("#059669")
189
- },
190
- violet: {
191
- 300: defineToken("#A78BFA"),
192
- 400: defineToken("#8B5CF6"),
193
- 500: defineToken("#7C3AED"),
194
- 600: defineToken("#6D28D9")
195
- },
196
- rose: {
197
- 300: defineToken("#FDA4AF"),
198
- 400: defineToken("#FB7185"),
199
- 500: defineToken("#F43F5E"),
200
- 600: defineToken("#E11D48")
201
- },
202
- orange: {
203
- 300: defineToken("#FDBA74"),
204
- 400: defineToken("#FB923C"),
205
- 500: defineToken("#F97316"),
206
- 600: defineToken("#EA580C")
207
- },
208
- gray: {
209
- 50: defineToken("#FAFAFA"),
210
- 100: defineToken("#EBEBEB"),
211
- 200: defineToken("#D9D9D9"),
212
- 300: defineToken("#BDBDBD"),
213
- 400: defineToken("#999999"),
214
- 500: defineToken("#666666"),
215
- 600: defineToken("#4D4D4D"),
216
- 700: defineToken("#333333"),
217
- 800: defineToken("#2E2E2E"),
218
- 900: defineToken("#1F1F1F"),
219
- 950: defineToken("#141414"),
220
- 1e3: defineToken("#0A0A0A")
221
- },
222
- white: defineToken("#FFFFFF"),
223
- black: defineToken("#000000")
224
- },
225
- spacing: {
226
- 1: defineToken("0.25rem"),
227
- 2: defineToken("0.5rem"),
228
- 3: defineToken("0.75rem"),
229
- 4: defineToken("1rem"),
230
- 5: defineToken("1.25rem"),
231
- 6: defineToken("1.5rem"),
232
- 8: defineToken("2rem"),
233
- 10: defineToken("2.5rem"),
234
- 12: defineToken("3rem"),
235
- 16: defineToken("4rem"),
236
- xs: defineToken("0.25rem"),
237
- sm: defineToken("0.5rem"),
238
- md: defineToken("1rem"),
239
- lg: defineToken("1.5rem"),
240
- xl: defineToken("2rem")
241
- },
242
- radii: {
243
- none: defineToken("0"),
244
- sm: defineToken("0.25rem"),
245
- md: defineToken("0.5rem"),
246
- lg: defineToken("0.75rem"),
247
- xl: defineToken("1rem"),
248
- full: defineToken("9999px")
249
- },
250
- fonts: {
251
- body: defineToken("Inter, sans-serif"),
252
- heading: defineToken("Inter, sans-serif"),
253
- mono: defineToken("ui-monospace, SFMono-Regular, Menlo, monospace")
254
- },
255
- fontSizes: {
256
- xs: defineToken("0.75rem"),
257
- sm: defineToken("0.875rem"),
258
- md: defineToken("1rem"),
259
- lg: defineToken("1.125rem"),
260
- xl: defineToken("1.25rem"),
261
- "2xl": defineToken("1.5rem"),
262
- "3xl": defineToken("1.875rem"),
263
- "4xl": defineToken("2.25rem")
264
- },
265
- fontWeights: {
266
- normal: defineToken("400"),
267
- medium: defineToken("500"),
268
- semibold: defineToken("600"),
269
- bold: defineToken("700")
270
- },
271
- lineHeights: {
272
- tight: defineToken("1.25"),
273
- normal: defineToken("1.5"),
274
- relaxed: defineToken("1.75")
275
- },
276
- letterSpacings: {
277
- tighter: defineToken("-0.025em"),
278
- tight: defineToken("-0.01em"),
279
- normal: defineToken("0"),
280
- wide: defineToken("0.025em")
281
- },
282
- animations: {
283
- spin: defineToken("kui-spin 0.6s linear infinite"),
284
- "fade-in": defineToken("kui-fade-in 0.15s ease-out"),
285
- "fade-out": defineToken("kui-fade-out 0.15s ease-in"),
286
- "scale-in": defineToken("kui-scale-in 0.15s ease-out"),
287
- "scale-out": defineToken("kui-scale-out 0.15s ease-in"),
288
- "slide-up": defineToken("kui-slide-up 0.2s ease-out"),
289
- "slide-down": defineToken("kui-slide-down 0.2s ease-out"),
290
- "slide-left": defineToken("kui-slide-left 0.2s ease-out"),
291
- "slide-right": defineToken("kui-slide-right 0.2s ease-out"),
292
- "slide-in-next": defineToken("kui-slide-in-next 0.2s ease-out"),
293
- "slide-in-prev": defineToken("kui-slide-in-prev 0.2s ease-out"),
294
- bounce: defineToken("kui-bounce 0.8s infinite"),
295
- pulse: defineToken("kui-pulse 1.5s ease-in-out infinite"),
296
- shake: defineToken("kui-shake 0.25s ease-in-out"),
297
- shimmer: defineToken("kui-shimmer 1.5s linear infinite"),
298
- expand: defineToken("kui-expand 0.2s ease-out"),
299
- collapse: defineToken("kui-collapse 0.2s ease-in"),
300
- ping: defineToken("kui-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"),
301
- "state-error": defineToken("kui-state-error 500ms ease-out 3 500ms"),
302
- "state-success": defineToken("kui-state-success 500ms ease-out 2 500ms"),
303
- "state-warning": defineToken("kui-state-warning 500ms ease-out 2 500ms")
304
- },
305
- breakpoints: {
306
- sm: defineToken("640px"),
307
- md: defineToken("768px"),
308
- lg: defineToken("1024px"),
309
- xl: defineToken("1280px"),
310
- "2xl": defineToken("1536px")
311
- }
312
- };
313
-
314
- // src/define/typography.ts
315
- function defineTypography(typography) {
316
- return typography;
317
- }
318
-
319
- // src/defaults/typography.ts
320
- var defaultTypography = defineTypography({
321
- body: {
322
- fontFamily: "{fonts.body}",
323
- fontWeight: "{fontWeights.normal}",
324
- lineHeight: "{lineHeights.normal}"
325
- },
326
- bodySmall: {
327
- fontFamily: "{fonts.body}",
328
- fontWeight: "{fontWeights.normal}",
329
- lineHeight: "{lineHeights.normal}"
330
- },
331
- heading: {
332
- fontFamily: "{fonts.heading}",
333
- fontSize: "{fontSizes.2xl}",
334
- fontWeight: "{fontWeights.bold}",
335
- lineHeight: "{lineHeights.tight}"
336
- },
337
- headingSmall: {
338
- fontFamily: "{fonts.heading}",
339
- fontSize: "{fontSizes.xl}",
340
- fontWeight: "{fontWeights.semibold}",
341
- lineHeight: "{lineHeights.tight}"
342
- },
343
- label: {
344
- fontFamily: "{fonts.body}",
345
- fontWeight: "{fontWeights.medium}",
346
- lineHeight: "{lineHeights.normal}"
347
- },
348
- caption: {
349
- fontFamily: "{fonts.body}",
350
- fontSize: "{fontSizes.xs}",
351
- fontWeight: "{fontWeights.normal}",
352
- lineHeight: "{lineHeights.normal}"
353
- },
354
- mono: {
355
- fontFamily: "{fonts.mono}",
356
- fontSize: "{fontSizes.xs}",
357
- fontWeight: "{fontWeights.normal}",
358
- lineHeight: "{lineHeights.normal}"
359
- },
360
- sizeXs: {
361
- fontFamily: "{fonts.body}",
362
- fontSize: "{fontSizes.xs}",
363
- fontWeight: "{fontWeights.normal}",
364
- lineHeight: "{lineHeights.normal}"
365
- },
366
- sizeSm: {
367
- fontFamily: "{fonts.body}",
368
- fontSize: "{fontSizes.sm}",
369
- fontWeight: "{fontWeights.normal}",
370
- lineHeight: "{lineHeights.normal}"
371
- },
372
- sizeMd: {
373
- fontFamily: "{fonts.body}",
374
- fontSize: "{fontSizes.sm}",
375
- fontWeight: "{fontWeights.normal}",
376
- lineHeight: "{lineHeights.normal}"
377
- },
378
- sizeLg: {
379
- fontFamily: "{fonts.body}",
380
- fontSize: "{fontSizes.md}",
381
- fontWeight: "{fontWeights.normal}",
382
- lineHeight: "{lineHeights.normal}"
383
- },
384
- sizeXl: {
385
- fontFamily: "{fonts.body}",
386
- fontSize: "{fontSizes.xl}",
387
- fontWeight: "{fontWeights.medium}",
388
- lineHeight: "{lineHeights.tight}"
389
- }
390
- });
391
-
392
- // src/define/recipe.ts
393
- function defineRecipe(recipe) {
394
- return recipe;
395
- }
396
-
397
- // src/runtime/validateCycles.ts
398
- var REFERENCE_PATTERN = /^\{(.+)\}$/;
399
- function extractReferencePath(value) {
400
- if (typeof value !== "string") return void 0;
401
- const match = value.match(REFERENCE_PATTERN);
402
- return match ? match[1] : void 0;
403
- }
404
- function resolvePath(tree, path) {
405
- const segments = path.split(".");
406
- let current = tree;
407
- for (const segment of segments) {
408
- if (current === null || typeof current !== "object") return void 0;
409
- current = current[segment];
410
- }
411
- return current;
412
- }
413
- function nextReferences(node) {
414
- if (node === null || typeof node !== "object" || !("value" in node)) {
415
- return [];
416
- }
417
- const colorModeValue = node.value;
418
- if (colorModeValue === null || typeof colorModeValue !== "object") {
419
- return [];
420
- }
421
- const cmv = colorModeValue;
422
- if (cmv.sameForBothModes === true) {
423
- const ref = extractReferencePath(cmv.value);
424
- return ref ? [ref] : [];
425
- }
426
- const refs = [];
427
- const lightRef = extractReferencePath(cmv.light);
428
- const darkRef = extractReferencePath(cmv.dark);
429
- if (lightRef) refs.push(lightRef);
430
- if (darkRef) refs.push(darkRef);
431
- return refs;
432
- }
433
- function validateNoCycles(semanticTokens) {
434
- function walk(path, visited) {
435
- if (visited.includes(path)) {
436
- return { valid: false, cyclePath: [...visited, path] };
437
- }
438
- const node = resolvePath(semanticTokens, path);
439
- const refs = nextReferences(node);
440
- for (const ref of refs) {
441
- const result = walk(ref, [...visited, path]);
442
- if (!result.valid) return result;
443
- }
444
- return { valid: true };
445
- }
446
- function collectPaths(tree, prefix = []) {
447
- if (tree === null || typeof tree !== "object") return [];
448
- const entries = Object.entries(tree);
449
- const paths = [];
450
- for (const [key, value] of entries) {
451
- const currentPath = [...prefix, key];
452
- if (value !== null && typeof value === "object" && "value" in value) {
453
- paths.push(currentPath);
454
- } else {
455
- paths.push(...collectPaths(value, currentPath));
456
- }
457
- }
458
- return paths;
459
- }
460
- const allLeafPaths = collectPaths(semanticTokens);
461
- for (const pathSegments of allLeafPaths) {
462
- const path = pathSegments.join(".");
463
- const result = walk(path, []);
464
- if (!result.valid) return result;
465
- }
466
- return { valid: true };
467
- }
468
- function assertNoCycles(semanticTokens) {
469
- const result = validateNoCycles(semanticTokens);
470
- if (!result.valid) {
471
- throw new Error(
472
- `Kreativ UI: circular semantic token reference detected: ${result.cyclePath?.join(" -> ")}`
473
- );
474
- }
475
- }
476
-
477
- // src/define/theme.ts
478
- function defineTheme(theme) {
479
- assertNoCycles(theme.semanticTokens);
480
- return theme;
481
- }
482
-
483
- // src/defaults/recipes/button.ts
484
- var buttonBase = "inline-flex items-center justify-center rounded-[var(--kui-button-radius,var(--kui-radius))] font-medium transition-[background-color,border-color,color,transform,opacity] duration-200 will-change-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kui-brand focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:opacity-60 disabled:pointer-events-none disabled:active:scale-100";
485
- var buttonVariants = {
486
- solid: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]",
487
- soft: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]",
488
- outline: "border bg-transparent ease-out active:scale-[0.98]",
489
- ghost: "bg-transparent ease-out active:scale-[0.98]",
490
- link: "bg-transparent p-0 h-auto hover:underline ease-out"
491
- };
492
- var buttonColors = {
493
- brand: {
494
- solid: "bg-kui-brand text-kui-brand-fg hover:bg-kui-brand-hover",
495
- outline: "border-kui-brand text-kui-brand hover:bg-kui-brand/10",
496
- ghost: "text-kui-brand hover:bg-kui-brand/10",
497
- soft: "bg-kui-brand/10 text-kui-brand hover:bg-kui-brand/20",
498
- link: "text-kui-brand"
499
- },
500
- destructive: {
501
- solid: "bg-kui-destructive text-kui-destructive-fg hover:bg-kui-destructive-hover",
502
- outline: "border-kui-destructive text-kui-destructive hover:bg-kui-destructive/10",
503
- ghost: "text-kui-destructive hover:bg-kui-destructive/10",
504
- soft: "bg-kui-destructive/10 text-kui-destructive hover:bg-kui-destructive/20",
505
- link: "text-kui-destructive"
506
- },
507
- success: {
508
- solid: "bg-kui-success text-kui-success-fg hover:bg-kui-success-hover",
509
- outline: "border-kui-success text-kui-success hover:bg-kui-success/10",
510
- ghost: "text-kui-success hover:bg-kui-success/10",
511
- soft: "bg-kui-success/10 text-kui-success hover:bg-kui-success/20",
512
- link: "text-kui-success"
513
- },
514
- warning: {
515
- solid: "bg-kui-warning text-kui-warning-fg hover:bg-kui-warning-hover",
516
- outline: "border-kui-warning text-kui-warning hover:bg-kui-warning/10",
517
- ghost: "text-kui-warning hover:bg-kui-warning/10",
518
- soft: "bg-kui-warning/10 text-kui-warning hover:bg-kui-warning/20",
519
- link: "text-kui-warning"
520
- },
521
- info: {
522
- solid: "bg-kui-info text-kui-info-fg hover:bg-kui-info-hover",
523
- outline: "border-kui-info text-kui-info hover:bg-kui-info/10",
524
- ghost: "text-kui-info hover:bg-kui-info/10",
525
- soft: "bg-kui-info/10 text-kui-info hover:bg-kui-info/20",
526
- link: "text-kui-info"
527
- },
528
- white: {
529
- solid: "bg-white text-black hover:bg-gray-50",
530
- outline: "border-white/30 text-white hover:bg-white/10",
531
- ghost: "text-white hover:bg-white/10",
532
- soft: "bg-white/10 text-white hover:bg-white/20",
533
- link: "text-white"
534
- },
535
- neutral: {
536
- solid: "bg-kui-surface-raised text-kui-text hover:bg-kui-surface-sunken",
537
- outline: "border-kui-border text-kui-text hover:bg-kui-surface-raised",
538
- ghost: "text-kui-text hover:bg-kui-surface-raised",
539
- soft: "bg-kui-surface-raised text-kui-text hover:bg-kui-surface-sunken",
540
- link: "text-kui-text"
541
- },
542
- inherit: {
543
- solid: "[background-color:var(--kui-inherit-bg)] [color:var(--kui-inherit-fg)]",
544
- outline: "[border-color:var(--kui-inherit-border)] [color:var(--kui-inherit-fg)] bg-transparent",
545
- ghost: "[color:var(--kui-inherit-fg)] bg-transparent",
546
- soft: "[background-color:var(--kui-inherit-soft-bg)] [color:var(--kui-inherit-fg)]",
547
- link: "[color:var(--kui-inherit-fg)] bg-transparent"
548
- }
549
- };
550
- var buildCompoundVariants = () => {
551
- const compounds = [];
552
- for (const [color, variantMap] of Object.entries(buttonColors)) {
553
- for (const [variant, className] of Object.entries(variantMap)) {
554
- compounds.push({
555
- conditions: { color, variant },
556
- className
557
- });
558
- }
559
- }
560
- return compounds;
561
- };
562
- var buttonRecipe = defineRecipe({
563
- base: buttonBase,
564
- variants: {
565
- variant: buttonVariants,
566
- color: Object.fromEntries(
567
- Object.keys(buttonColors).map((color) => [color, ""])
568
- )
569
- },
570
- defaultVariants: {
571
- variant: "solid",
572
- color: "brand"
573
- },
574
- compoundVariants: buildCompoundVariants()
575
- });
576
-
577
- // src/defaults/recipes/formControl.ts
578
- var formControlBase = "group relative inline-flex items-center rounded-[var(--kui-radii-md)] transition-[border-color,box-shadow] duration-[var(--kui-duration-fast)] focus-within:outline-none focus-within:ring-offset-2 focus-within:ring-offset-surface";
579
- var formControlVariants = {
580
- outline: "border border-kui-border bg-transparent text-kui-text",
581
- filled: "border border-transparent bg-kui-surface-raised text-kui-text",
582
- ghost: "border border-transparent bg-transparent text-kui-text"
583
- };
584
- var standaloneStates = {
585
- none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20",
586
- error: "border-kui-destructive hover:border-kui-destructive focus-within:ring-2 focus-within:ring-kui-destructive/20",
587
- success: "border-kui-success hover:border-kui-success focus-within:ring-2 focus-within:ring-kui-success/20",
588
- warning: "border-kui-warning hover:border-kui-warning focus-within:ring-2 focus-within:ring-kui-warning/20"
589
- };
590
- var borderlessControl = "rounded-none border-0! shadow-none! hover:border-0! hover:bg-transparent! focus-within:ring-0! focus-within:ring-offset-0! focus-within-outline-none!";
591
- var formControlRecipe = defineRecipe({
592
- base: formControlBase,
593
- variants: {
594
- variant: formControlVariants,
595
- embedded: {
596
- true: borderlessControl,
597
- false: ""
598
- },
599
- groupItem: {
600
- true: borderlessControl,
601
- false: ""
602
- },
603
- state: standaloneStates,
604
- rounded: {
605
- true: "rounded-full",
606
- false: ""
607
- },
608
- fullWidth: {
609
- true: "w-full",
610
- false: ""
611
- },
612
- disabled: {
613
- true: "cursor-not-allowed opacity-50 border-kui-border hover:border-kui-border focus-within:ring-0",
614
- false: ""
615
- },
616
- attached: {
617
- true: "rounded-r-none",
618
- false: ""
619
- },
620
- hasAdornment: {
621
- true: "px-2",
622
- false: ""
623
- }
624
- },
625
- compoundVariants: [
626
- {
627
- conditions: {
628
- embedded: true,
629
- state: "none"
630
- },
631
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
632
- },
633
- {
634
- conditions: {
635
- embedded: true,
636
- state: "error"
637
- },
638
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
639
- },
640
- {
641
- conditions: {
642
- embedded: true,
643
- state: "success"
644
- },
645
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
646
- },
647
- {
648
- conditions: {
649
- embedded: true,
650
- state: "warning"
651
- },
652
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
653
- },
654
- {
655
- conditions: {
656
- groupItem: true,
657
- state: "none"
658
- },
659
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
660
- },
661
- {
662
- conditions: {
663
- groupItem: true,
664
- state: "error"
665
- },
666
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
667
- },
668
- {
669
- conditions: {
670
- groupItem: true,
671
- state: "success"
672
- },
673
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
674
- },
675
- {
676
- conditions: {
677
- groupItem: true,
678
- state: "warning"
679
- },
680
- className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!"
681
- },
682
- {
683
- conditions: {
684
- disabled: true,
685
- state: "error"
686
- },
687
- className: "border-kui-border hover:border-kui-border focus-within:ring-0"
688
- },
689
- {
690
- conditions: {
691
- disabled: true,
692
- state: "success"
693
- },
694
- className: "border-kui-border hover:border-kui-border focus-within:ring-0"
695
- },
696
- {
697
- conditions: {
698
- disabled: true,
699
- state: "warning"
700
- },
701
- className: "border-kui-border hover:border-kui-border focus-within:ring-0"
702
- },
703
- {
704
- conditions: {
705
- embedded: true,
706
- disabled: true
707
- },
708
- className: "border-0! hover:border-0! focus-within:ring-0! cursor-default"
709
- },
710
- {
711
- conditions: {
712
- groupItem: true,
713
- disabled: true
714
- },
715
- className: "border-0! hover:border-0! focus-within:ring-0! cursor-default"
716
- }
717
- ],
718
- defaultVariants: {
719
- variant: "outline",
720
- state: "none",
721
- embedded: false,
722
- groupItem: false,
723
- rounded: false,
724
- fullWidth: true,
725
- disabled: false,
726
- hasAdornment: false,
727
- attached: false
728
- }
729
- });
730
-
731
- // src/defaults/recipes/input.ts
732
- var inputBase = "flex min-w-0 flex-1 font-sans bg-transparent border-0 outline-none transition-colors duration-[var(--kui-duration-fast)] placeholder:text-kui-text-muted disabled:cursor-not-allowed";
733
- var inputRecipe = defineRecipe({
734
- base: inputBase,
735
- variants: {
736
- variant: {
737
- outline: "",
738
- filled: "",
739
- ghost: ""
740
- }
741
- },
742
- defaultVariants: {
743
- variant: "outline"
744
- }
745
- });
746
-
747
- // src/defaults/recipes/textarea.ts
748
- var textareaRecipe = defineRecipe({
749
- base: "flex w-full min-w-0 bg-transparent outline-none border-0 text-kui-text placeholder:text-kui-text-muted transition-colors duration-[var(--kui-duration-fast)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 kui-scrollbar",
750
- variants: {
751
- variant: {
752
- outline: "",
753
- filled: "",
754
- ghost: ""
755
- },
756
- resize: {
757
- none: "resize-none",
758
- both: "resize",
759
- horizontal: "resize-x",
760
- vertical: "resize-y"
761
- },
762
- autoResize: {
763
- true: "resize-none overflow-hidden",
764
- false: ""
765
- }
766
- },
767
- defaultVariants: {
768
- variant: "outline",
769
- resize: "vertical",
770
- autoResize: false
771
- }
772
- });
773
-
774
- // src/defaults/recipes/markdownEditor.ts
775
- var markdownEditorRecipe = defineRecipe({
776
- base: "group relative w-full overflow-hidden rounded-[var(--kui-radii-md)] transition-[border-color,box-shadow] duration-[var(--kui-duration-fast)]",
777
- variants: {
778
- variant: {
779
- outline: "border border-kui-border bg-transparent",
780
- filled: "border border-transparent bg-kui-surface-raised",
781
- ghost: "border border-transparent bg-transparent"
782
- },
783
- state: {
784
- none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20",
785
- error: "border-kui-destructive focus-within:ring-2 focus-within:ring-kui-destructive/20",
786
- success: "border-kui-success focus-within:ring-2 focus-within:ring-kui-success/20",
787
- warning: "border-kui-warning focus-within:ring-2 focus-within:ring-kui-warning/20"
788
- },
789
- disabled: {
790
- true: "cursor-not-allowed opacity-50 border-kui-border hover:border-kui-border focus-within:ring-0",
791
- false: ""
792
- },
793
- fullWidth: {
794
- true: "w-full",
795
- false: ""
796
- }
797
- },
798
- defaultVariants: {
799
- variant: "outline",
800
- state: "none",
801
- fullWidth: true
802
- }
803
- });
804
-
805
- // src/defaults/recipes/checkbox.ts
806
- var checkboxRecipe = defineRecipe({
807
- base: "relative inline-flex shrink-0 items-center justify-center border transition-colors duration-[var(--kui-duration-fast)] peer-focus-visible:ring-2 peer-focus-visible:ring-kui-brand peer-focus-visible:ring-offset-1",
808
- variants: {
809
- state: {
810
- none: "border-kui-border",
811
- error: "border-kui-destructive",
812
- success: "border-kui-success",
813
- warning: "border-kui-warning"
814
- },
815
- checked: {
816
- true: "border-kui-brand bg-kui-brand text-kui-brand-fg",
817
- false: "bg-transparent"
818
- },
819
- disabled: {
820
- true: "cursor-not-allowed",
821
- false: "cursor-pointer"
822
- },
823
- rounded: {
824
- true: "rounded-full",
825
- false: "rounded-[calc(var(--kui-checkbox-radius)-4px)]"
826
- }
827
- },
828
- compoundVariants: [
829
- {
830
- conditions: {
831
- checked: false,
832
- state: "error"
833
- },
834
- className: "border-kui-destructive"
835
- },
836
- {
837
- conditions: {
838
- checked: false,
839
- state: "success"
840
- },
841
- className: "border-kui-success"
842
- },
843
- {
844
- conditions: {
845
- checked: false,
846
- state: "warning"
847
- },
848
- className: "border-kui-warning"
849
- }
850
- ],
851
- defaultVariants: {
852
- state: "none",
853
- checked: false,
854
- disabled: false,
855
- rounded: false
856
- }
857
- });
858
-
859
- // src/defaults/recipes/buttonGroup.ts
860
- var buttonGroupRecipe = defineRecipe({
861
- base: ["inline-flex items-center relative isolate", "kui-button-group"].join(
862
- " "
863
- ),
864
- variants: {
865
- orientation: {
866
- horizontal: "flex-row",
867
- vertical: "flex-col items-stretch"
868
- },
869
- attached: {
870
- true: "gap-0",
871
- false: ""
872
- },
873
- spacing: {
874
- none: "gap-0",
875
- sm: "gap-1",
876
- md: "gap-2",
877
- lg: "gap-3"
878
- }
879
- },
880
- defaultVariants: {
881
- orientation: "horizontal",
882
- attached: false,
883
- spacing: "md"
884
- },
885
- compoundVariants: [
886
- {
887
- conditions: {
888
- orientation: "horizontal",
889
- attached: true
890
- },
891
- className: [
892
- "[&>[data-kui-button-group-item]]:rounded-none",
893
- "[&>[data-kui-button-group-item]:first-child]:rounded-l-md",
894
- "[&>[data-kui-button-group-item]:last-child]:rounded-r-md",
895
- "[&>[data-kui-button-group-item]+[data-kui-button-group-item]]:-ml-px",
896
- "[&>[data-kui-button-group-separator]]:h-[var(--kui-button-group-separator-size)]",
897
- "[&>[data-kui-button-group-separator]]:w-px",
898
- "[&>[data-kui-button-group-separator]]:mx-1",
899
- "[&>[data-kui-button-group-separator]]:shrink-0"
900
- ].join(" ")
901
- },
902
- {
903
- conditions: {
904
- orientation: "vertical"
905
- },
906
- className: [
907
- "[&>[data-kui-button-group-item]]:w-full",
908
- "[&>[data-kui-button-group-separator]]:h-px",
909
- "[&>[data-kui-button-group-separator]]:w-[var(--kui-button-group-separator-size)]",
910
- "[&>[data-kui-button-group-separator]]:shrink-0"
911
- ].join(" ")
912
- },
913
- {
914
- conditions: {
915
- orientation: "vertical",
916
- attached: true
917
- },
918
- className: [
919
- "[&>[data-kui-button-group-item]]:rounded-none",
920
- "[&>[data-kui-button-group-item]:first-child]:rounded-t-md",
921
- "[&>[data-kui-button-group-item]:last-child]:rounded-b-md",
922
- "[&>[data-kui-button-group-item]+[data-kui-button-group-item]]:-mt-px"
923
- ].join(" ")
924
- }
925
- ]
926
- });
927
-
928
- // src/defaults/recipes/switch.ts
929
- var switchRecipe = defineRecipe({
930
- base: [
931
- "relative inline-flex shrink-0 items-center",
932
- "rounded-full",
933
- "transition-[background-color,border-color,box-shadow]",
934
- "duration-[var(--kui-duration-fast)]",
935
- "peer-focus-visible:ring-2",
936
- "peer-focus-visible:ring-kui-brand",
937
- "peer-focus-visible:ring-offset-1",
938
- "peer-focus-visible:ring-offset-surface"
939
- ].join(" "),
940
- variants: {
941
- checked: {
942
- true: "bg-kui-brand",
943
- false: "bg-kui-border"
944
- },
945
- state: {
946
- none: "",
947
- error: "bg-kui-destructive",
948
- success: "bg-kui-success",
949
- warning: "bg-kui-warning"
950
- },
951
- disabled: {
952
- true: "cursor-not-allowed opacity-50",
953
- false: ""
954
- }
955
- },
956
- defaultVariants: {
957
- checked: false,
958
- state: "none",
959
- disabled: false
960
- }
961
- });
962
-
963
- // src/defaults/recipes/container.ts
964
- var containerReccipe = defineRecipe({
965
- base: "w-full",
966
- variants: {
967
- maxWidth: {
968
- xs: "max-w-screen-xs",
969
- sm: "max-w-screen-sm",
970
- md: "max-w-screen-md",
971
- lg: "max-w-screen-lg",
972
- xl: "max-w-screen-xl",
973
- full: "max-w-full"
974
- }
975
- },
976
- defaultVariants: {
977
- maxWidth: "lg"
978
- }
979
- });
980
-
981
- // src/defaults/recipes/link.ts
982
- var linkRecipe = defineRecipe({
983
- base: "kui-link",
984
- variants: {
985
- variant: {
986
- solid: "text-kui-brand hover:text-kui-brand-hover",
987
- outline: "text-kui-text-secondary hover:text-kui-brand",
988
- ghost: "text-kui-text-secondary hover:text-kui-text",
989
- soft: "text-kui-brand hover:text-kui-brand-hover"
990
- },
991
- underline: {
992
- always: "underline",
993
- hover: "no-underline hover:underline",
994
- none: "no-underline"
995
- },
996
- disabled: {
997
- true: "pointer-events-none opacity-50 cursor-not-allowed",
998
- false: ""
999
- }
1000
- },
1001
- defaultVariants: {
1002
- variant: "solid",
1003
- underline: "hover",
1004
- disabled: false
1005
- }
1006
- });
1007
-
1008
- // src/defaults/theme.ts
1009
- var defaultRecipes = {
1010
- Button: buttonRecipe,
1011
- FormControl: formControlRecipe,
1012
- Input: inputRecipe,
1013
- Textarea: textareaRecipe,
1014
- MarkdownEditor: markdownEditorRecipe,
1015
- Checkbox: checkboxRecipe,
1016
- ButtonGroup: buttonGroupRecipe,
1017
- Switch: switchRecipe,
1018
- Container: containerReccipe,
1019
- Link: linkRecipe
1020
- };
1021
- var defaultTheme = defineTheme({
1022
- tokens: defaultTokens,
1023
- semanticTokens: defaultSemanticTokens,
1024
- typography: defaultTypography,
1025
- recipes: defaultRecipes,
1026
- intensity: 50,
1027
- sizes: defaultSizes
1028
- });
1029
-
1030
- // src/utils/deepMerge.ts
1031
- function isPlainObject(value) {
1032
- return typeof value === "object" && value !== null && !Array.isArray(value);
1033
- }
1034
- function deepMerge(base, override) {
1035
- if (override === void 0) {
1036
- return base;
1037
- }
1038
- if (!isPlainObject(base) || !isPlainObject(override)) {
1039
- return override;
1040
- }
1041
- const result = {
1042
- ...base
1043
- };
1044
- for (const [key, value] of Object.entries(override)) {
1045
- const existing = result[key];
1046
- if (isPlainObject(existing) && isPlainObject(value)) {
1047
- result[key] = deepMerge(existing, value);
1048
- } else {
1049
- result[key] = value;
1050
- }
1051
- }
1052
- return result;
1053
- }
1054
-
1055
- // src/extend/tokens.ts
1056
- function extendTokens(override) {
1057
- return deepMerge(defaultTokens, override);
1058
- }
1059
- function extendSemanticTokens(override) {
1060
- return deepMerge(defaultSemanticTokens, override);
1061
- }
1062
-
1063
- // src/extend/sizes.ts
1064
- function extendSizes(override) {
1065
- const result = {
1066
- ...defaultSizes
1067
- };
1068
- if (!override) {
1069
- return result;
1070
- }
1071
- for (const [key, value] of Object.entries(override)) {
1072
- result[key] = {
1073
- ...defaultSizes[key] ?? {},
1074
- ...value
1075
- };
1076
- }
1077
- return result;
1078
- }
1079
-
1080
- // src/extend/typography.ts
1081
- function extendTypography(override) {
1082
- if (!override) {
1083
- return { ...defaultTypography };
1084
- }
1085
- const result = { ...defaultTypography };
1086
- for (const key of Object.keys(override)) {
1087
- const variant = key;
1088
- result[variant] = {
1089
- ...defaultTypography[variant],
1090
- ...override[variant]
1091
- };
1092
- }
1093
- return result;
1094
- }
1095
-
1096
- // src/extend/recipes.ts
1097
- var defaultRecipes2 = defaultRecipes;
1098
- function extendRecipe(name, override) {
1099
- const base = defaultRecipes2[name];
1100
- if (!override) {
1101
- return base;
1102
- }
1103
- return {
1104
- ...base,
1105
- ...override,
1106
- ...override?.compoundVariants ? { compoundVariants: override.compoundVariants } : {},
1107
- ...base?.variants || override?.variants ? {
1108
- variants: {
1109
- ...base?.variants,
1110
- ...override?.variants
1111
- }
1112
- } : {}
1113
- };
1114
- }
1115
- function extendRecipes(override) {
1116
- if (!override) {
1117
- return defaultRecipes2;
1118
- }
1119
- const result = { ...defaultRecipes2 };
1120
- for (const name of Object.keys(override)) {
1121
- result[name] = extendRecipe(name, override[name]);
1122
- }
1123
- return result;
1124
- }
1125
-
1126
- // src/extend/theme.ts
1127
- function extendTheme(override) {
1128
- if (!override) {
1129
- return defaultTheme;
1130
- }
1131
- return {
1132
- ...defaultTheme,
1133
- ...override,
1134
- tokens: extendTokens(override.tokens),
1135
- semanticTokens: extendSemanticTokens(override.semanticTokens),
1136
- sizes: extendSizes(override.sizes),
1137
- typography: extendTypography(override.typography),
1138
- recipes: extendRecipes(override.recipes)
1139
- };
1140
- }
1141
-
1142
- exports.assertNoCycles = assertNoCycles;
1143
- exports.buttonBase = buttonBase;
1144
- exports.buttonColors = buttonColors;
1145
- exports.buttonGroupRecipe = buttonGroupRecipe;
1146
- exports.buttonRecipe = buttonRecipe;
1147
- exports.buttonVariants = buttonVariants;
1148
- exports.checkboxRecipe = checkboxRecipe;
1149
- exports.containerReccipe = containerReccipe;
1150
- exports.defaultRecipes = defaultRecipes;
1151
- exports.defaultSemanticTokens = defaultSemanticTokens;
1152
- exports.defaultSizes = defaultSizes;
1153
- exports.defaultTheme = defaultTheme;
1154
- exports.defaultTokens = defaultTokens;
1155
- exports.defaultTypography = defaultTypography;
1156
- exports.defineRecipe = defineRecipe;
1157
- exports.defineSemanticToken = defineSemanticToken;
1158
- exports.defineSemanticTokens = defineSemanticTokens;
1159
- exports.defineSize = defineSize;
1160
- exports.defineSizes = defineSizes;
1161
- exports.defineTheme = defineTheme;
1162
- exports.defineToken = defineToken;
1163
- exports.defineTokens = defineTokens;
1164
- exports.defineTypography = defineTypography;
1165
- exports.extendRecipe = extendRecipe;
1166
- exports.extendRecipes = extendRecipes;
1167
- exports.extendSemanticTokens = extendSemanticTokens;
1168
- exports.extendSizes = extendSizes;
1169
- exports.extendTheme = extendTheme;
1170
- exports.extendTokens = extendTokens;
1171
- exports.extendTypography = extendTypography;
1172
- exports.formControlBase = formControlBase;
1173
- exports.formControlRecipe = formControlRecipe;
1174
- exports.formControlVariants = formControlVariants;
1175
- exports.inputBase = inputBase;
1176
- exports.inputRecipe = inputRecipe;
1177
- exports.linkRecipe = linkRecipe;
1178
- exports.markdownEditorRecipe = markdownEditorRecipe;
1179
- exports.switchRecipe = switchRecipe;
1180
- exports.textareaRecipe = textareaRecipe;
1181
- exports.validateNoCycles = validateNoCycles;
1182
- //# sourceMappingURL=theme.cjs.map
1183
- //# sourceMappingURL=theme.cjs.map