@timbal-ai/timbal-react 0.8.1 → 1.0.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.
package/dist/styles.css CHANGED
@@ -338,6 +338,200 @@
338
338
  from `<html>` and every utility flips together with the base tokens. */
339
339
  @custom-variant dark (&:is(.dark *));
340
340
 
341
+ /* =============================================================== *
342
+ * Motion engine — enter/exit, fade, zoom, slide, accordion *
343
+ * --------------------------------------------------------------- *
344
+ * Every overlay in the package (Dialog, Sheet, DropdownMenu, *
345
+ * Popover, Select, Tooltip, Toast, NavigationMenu) is authored *
346
+ * against these `animate-in` / `animate-out` + modifier classes. *
347
+ * They are inlined here so the shipped stylesheet animates with *
348
+ * zero extra dependencies and zero consumer config. Duration flows *
349
+ * from any `duration-*` utility on the element (var --tw-duration).*
350
+ * =============================================================== */
351
+
352
+ @keyframes tw-enter {
353
+ from {
354
+ opacity: var(--tw-enter-opacity, 1);
355
+ transform: translate3d(
356
+ var(--tw-enter-translate-x, 0),
357
+ var(--tw-enter-translate-y, 0),
358
+ 0
359
+ )
360
+ scale3d(
361
+ var(--tw-enter-scale, 1),
362
+ var(--tw-enter-scale, 1),
363
+ var(--tw-enter-scale, 1)
364
+ )
365
+ rotate(var(--tw-enter-rotate, 0));
366
+ }
367
+ }
368
+
369
+ @keyframes tw-exit {
370
+ to {
371
+ opacity: var(--tw-exit-opacity, 1);
372
+ transform: translate3d(
373
+ var(--tw-exit-translate-x, 0),
374
+ var(--tw-exit-translate-y, 0),
375
+ 0
376
+ )
377
+ scale3d(
378
+ var(--tw-exit-scale, 1),
379
+ var(--tw-exit-scale, 1),
380
+ var(--tw-exit-scale, 1)
381
+ )
382
+ rotate(var(--tw-exit-rotate, 0));
383
+ }
384
+ }
385
+
386
+ @utility animate-in {
387
+ animation: tw-enter var(--tw-duration, 150ms) ease-out;
388
+ }
389
+ @utility animate-out {
390
+ animation: tw-exit var(--tw-duration, 150ms) ease-in;
391
+ }
392
+
393
+ /* Fade modifiers (number = target opacity ÷ 100). */
394
+ @utility fade-in {
395
+ --tw-enter-opacity: 0;
396
+ }
397
+ @utility fade-in-0 {
398
+ --tw-enter-opacity: 0;
399
+ }
400
+ @utility fade-out {
401
+ --tw-exit-opacity: 0;
402
+ }
403
+ @utility fade-out-0 {
404
+ --tw-exit-opacity: 0;
405
+ }
406
+ @utility fade-out-80 {
407
+ --tw-exit-opacity: 0.8;
408
+ }
409
+
410
+ /* Zoom modifiers (number = scale × 100). */
411
+ @utility zoom-in-95 {
412
+ --tw-enter-scale: 0.95;
413
+ }
414
+ @utility zoom-out-95 {
415
+ --tw-exit-scale: 0.95;
416
+ }
417
+
418
+ /* Slide-in (starting offset). Unitless + `-full` = 100%; `-2` = 0.5rem; `-52` = 13rem. */
419
+ @utility slide-in-from-top {
420
+ --tw-enter-translate-y: -100%;
421
+ }
422
+ @utility slide-in-from-top-full {
423
+ --tw-enter-translate-y: -100%;
424
+ }
425
+ @utility slide-in-from-bottom {
426
+ --tw-enter-translate-y: 100%;
427
+ }
428
+ @utility slide-in-from-bottom-full {
429
+ --tw-enter-translate-y: 100%;
430
+ }
431
+ @utility slide-in-from-left {
432
+ --tw-enter-translate-x: -100%;
433
+ }
434
+ @utility slide-in-from-right {
435
+ --tw-enter-translate-x: 100%;
436
+ }
437
+ @utility slide-in-from-top-2 {
438
+ --tw-enter-translate-y: -0.5rem;
439
+ }
440
+ @utility slide-in-from-bottom-2 {
441
+ --tw-enter-translate-y: 0.5rem;
442
+ }
443
+ @utility slide-in-from-left-2 {
444
+ --tw-enter-translate-x: -0.5rem;
445
+ }
446
+ @utility slide-in-from-right-2 {
447
+ --tw-enter-translate-x: 0.5rem;
448
+ }
449
+ @utility slide-in-from-bottom-1 {
450
+ --tw-enter-translate-y: 0.25rem;
451
+ }
452
+ @utility slide-in-from-left-52 {
453
+ --tw-enter-translate-x: -13rem;
454
+ }
455
+ @utility slide-in-from-right-52 {
456
+ --tw-enter-translate-x: 13rem;
457
+ }
458
+
459
+ /* Slide-out (ending offset). */
460
+ @utility slide-out-to-top {
461
+ --tw-exit-translate-y: -100%;
462
+ }
463
+ @utility slide-out-to-bottom {
464
+ --tw-exit-translate-y: 100%;
465
+ }
466
+ @utility slide-out-to-left {
467
+ --tw-exit-translate-x: -100%;
468
+ }
469
+ @utility slide-out-to-right {
470
+ --tw-exit-translate-x: 100%;
471
+ }
472
+ @utility slide-out-to-right-full {
473
+ --tw-exit-translate-x: 100%;
474
+ }
475
+ @utility slide-out-to-left-52 {
476
+ --tw-exit-translate-x: -13rem;
477
+ }
478
+ @utility slide-out-to-right-52 {
479
+ --tw-exit-translate-x: 13rem;
480
+ }
481
+
482
+ /* Disclosure height transitions — read Radix's measured content height. */
483
+ @keyframes accordion-down {
484
+ from {
485
+ height: 0;
486
+ }
487
+ to {
488
+ height: var(--radix-accordion-content-height);
489
+ }
490
+ }
491
+ @keyframes accordion-up {
492
+ from {
493
+ height: var(--radix-accordion-content-height);
494
+ }
495
+ to {
496
+ height: 0;
497
+ }
498
+ }
499
+ @keyframes collapsible-down {
500
+ from {
501
+ height: 0;
502
+ }
503
+ to {
504
+ height: var(--radix-collapsible-content-height);
505
+ }
506
+ }
507
+ @keyframes collapsible-up {
508
+ from {
509
+ height: var(--radix-collapsible-content-height);
510
+ }
511
+ to {
512
+ height: 0;
513
+ }
514
+ }
515
+ @keyframes caret-blink {
516
+ 0%,
517
+ 70%,
518
+ 100% {
519
+ opacity: 1;
520
+ }
521
+ 20%,
522
+ 50% {
523
+ opacity: 0;
524
+ }
525
+ }
526
+
527
+ @theme {
528
+ --animate-accordion-down: accordion-down 200ms ease-out;
529
+ --animate-accordion-up: accordion-up 200ms ease-out;
530
+ --animate-collapsible-down: collapsible-down 200ms ease-out;
531
+ --animate-collapsible-up: collapsible-up 200ms ease-out;
532
+ --animate-caret-blink: caret-blink 1.25s ease-out infinite;
533
+ }
534
+
341
535
  /** Pill segmented track — supports solid or gradient via `--pill-segmented-track`. */
342
536
  @utility bg-pill-segmented-track {
343
537
  background: var(--pill-segmented-track);