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