@dayflow/core 3.3.4 → 3.3.6

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 (6) hide show
  1. package/dist/index.d.ts +140 -36
  2. package/dist/index.esm.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/styles.components.css +285 -370
  5. package/dist/styles.css +354 -325
  6. package/package.json +3 -2
package/dist/styles.css CHANGED
@@ -691,9 +691,6 @@
691
691
  width: -moz-max-content;
692
692
  width: max-content;
693
693
  }
694
- .max-w-100 {
695
- max-width: calc(var(--spacing) * 100);
696
- }
697
694
  .max-w-md {
698
695
  max-width: var(--container-md);
699
696
  }
@@ -1108,15 +1105,6 @@
1108
1105
  .border-gray-300 {
1109
1106
  border-color: var(--color-gray-300);
1110
1107
  }
1111
- .border-primary {
1112
- border-color: var(--df-color-primary);
1113
- }
1114
- .border-primary\/50 {
1115
- border-color: var(--df-color-primary);
1116
- @supports (color: color-mix(in lab, red, red)) {
1117
- border-color: color-mix(in oklab, var(--df-color-primary) 50%, transparent);
1118
- }
1119
- }
1120
1108
  .border-slate-100 {
1121
1109
  border-color: var(--color-slate-100);
1122
1110
  }
@@ -1168,9 +1156,6 @@
1168
1156
  .bg-blue-500 {
1169
1157
  background-color: var(--color-blue-500);
1170
1158
  }
1171
- .bg-destructive {
1172
- background-color: var(--df-color-destructive);
1173
- }
1174
1159
  .bg-gray-50 {
1175
1160
  background-color: var(--color-gray-50);
1176
1161
  }
@@ -1204,18 +1189,6 @@
1204
1189
  .bg-primary {
1205
1190
  background-color: var(--df-color-primary);
1206
1191
  }
1207
- .bg-primary\/10 {
1208
- background-color: var(--df-color-primary);
1209
- @supports (color: color-mix(in lab, red, red)) {
1210
- background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
1211
- }
1212
- }
1213
- .bg-primary\/30 {
1214
- background-color: var(--df-color-primary);
1215
- @supports (color: color-mix(in lab, red, red)) {
1216
- background-color: color-mix(in oklab, var(--df-color-primary) 30%, transparent);
1217
- }
1218
- }
1219
1192
  .bg-secondary {
1220
1193
  background-color: var(--df-color-secondary);
1221
1194
  }
@@ -1463,12 +1436,6 @@
1463
1436
  .text-blue-900 {
1464
1437
  color: var(--color-blue-900);
1465
1438
  }
1466
- .text-destructive {
1467
- color: var(--df-color-destructive);
1468
- }
1469
- .text-destructive-foreground {
1470
- color: var(--df-color-destructive-foreground);
1471
- }
1472
1439
  .text-gray-300 {
1473
1440
  color: var(--color-gray-300);
1474
1441
  }
@@ -1493,15 +1460,9 @@
1493
1460
  .text-primary {
1494
1461
  color: var(--df-color-primary);
1495
1462
  }
1496
- .text-primary-foreground {
1497
- color: var(--df-color-primary-foreground);
1498
- }
1499
1463
  .text-red-500 {
1500
1464
  color: var(--color-red-500);
1501
1465
  }
1502
- .text-secondary-foreground {
1503
- color: var(--df-color-secondary-foreground);
1504
- }
1505
1466
  .text-slate-300 {
1506
1467
  color: var(--color-slate-300);
1507
1468
  }
@@ -1557,12 +1518,21 @@
1557
1518
  .opacity-0 {
1558
1519
  opacity: 0%;
1559
1520
  }
1521
+ .opacity-25 {
1522
+ opacity: 25%;
1523
+ }
1560
1524
  .opacity-50 {
1561
1525
  opacity: 50%;
1562
1526
  }
1563
1527
  .opacity-60 {
1564
1528
  opacity: 60%;
1565
1529
  }
1530
+ .opacity-70 {
1531
+ opacity: 70%;
1532
+ }
1533
+ .opacity-75 {
1534
+ opacity: 75%;
1535
+ }
1566
1536
  .opacity-80 {
1567
1537
  opacity: 80%;
1568
1538
  }
@@ -1604,21 +1574,15 @@
1604
1574
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1605
1575
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1606
1576
  }
1607
- .shadow-primary\/20 {
1577
+ .shadow-primary {
1608
1578
  --tw-shadow-color: var(--df-color-primary);
1609
1579
  @supports (color: color-mix(in lab, red, red)) {
1610
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--df-color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);
1580
+ --tw-shadow-color: color-mix(in oklab, var(--df-color-primary) var(--tw-shadow-alpha), transparent);
1611
1581
  }
1612
1582
  }
1613
1583
  .ring-primary {
1614
1584
  --tw-ring-color: var(--df-color-primary);
1615
1585
  }
1616
- .ring-primary\/20 {
1617
- --tw-ring-color: var(--df-color-primary);
1618
- @supports (color: color-mix(in lab, red, red)) {
1619
- --tw-ring-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
1620
- }
1621
- }
1622
1586
  .ring-offset-1 {
1623
1587
  --tw-ring-offset-width: 1px;
1624
1588
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1711,11 +1675,6 @@
1711
1675
  .ring-inset {
1712
1676
  --tw-ring-inset: inset;
1713
1677
  }
1714
- .group-focus-within\:text-primary {
1715
- &:is(:where(.group):focus-within *) {
1716
- color: var(--df-color-primary);
1717
- }
1718
- }
1719
1678
  .group-hover\:scale-110 {
1720
1679
  &:is(:where(.group):hover *) {
1721
1680
  @media (hover: hover) {
@@ -1802,23 +1761,6 @@
1802
1761
  }
1803
1762
  }
1804
1763
  }
1805
- .hover\:bg-destructive {
1806
- &:hover {
1807
- @media (hover: hover) {
1808
- background-color: var(--df-color-destructive);
1809
- }
1810
- }
1811
- }
1812
- .hover\:bg-destructive\/90 {
1813
- &:hover {
1814
- @media (hover: hover) {
1815
- background-color: var(--df-color-destructive);
1816
- @supports (color: color-mix(in lab, red, red)) {
1817
- background-color: color-mix(in oklab, var(--df-color-destructive) 90%, transparent);
1818
- }
1819
- }
1820
- }
1821
- }
1822
1764
  .hover\:bg-gray-50 {
1823
1765
  &:hover {
1824
1766
  @media (hover: hover) {
@@ -1847,36 +1789,6 @@
1847
1789
  }
1848
1790
  }
1849
1791
  }
1850
- .hover\:bg-primary\/10 {
1851
- &:hover {
1852
- @media (hover: hover) {
1853
- background-color: var(--df-color-primary);
1854
- @supports (color: color-mix(in lab, red, red)) {
1855
- background-color: color-mix(in oklab, var(--df-color-primary) 10%, transparent);
1856
- }
1857
- }
1858
- }
1859
- }
1860
- .hover\:bg-primary\/20 {
1861
- &:hover {
1862
- @media (hover: hover) {
1863
- background-color: var(--df-color-primary);
1864
- @supports (color: color-mix(in lab, red, red)) {
1865
- background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
1866
- }
1867
- }
1868
- }
1869
- }
1870
- .hover\:bg-primary\/90 {
1871
- &:hover {
1872
- @media (hover: hover) {
1873
- background-color: var(--df-color-primary);
1874
- @supports (color: color-mix(in lab, red, red)) {
1875
- background-color: color-mix(in oklab, var(--df-color-primary) 90%, transparent);
1876
- }
1877
- }
1878
- }
1879
- }
1880
1792
  .hover\:bg-slate-50 {
1881
1793
  &:hover {
1882
1794
  @media (hover: hover) {
@@ -1891,13 +1803,6 @@
1891
1803
  }
1892
1804
  }
1893
1805
  }
1894
- .hover\:text-destructive-foreground {
1895
- &:hover {
1896
- @media (hover: hover) {
1897
- color: var(--df-color-destructive-foreground);
1898
- }
1899
- }
1900
- }
1901
1806
  .hover\:text-gray-600 {
1902
1807
  &:hover {
1903
1808
  @media (hover: hover) {
@@ -1919,13 +1824,6 @@
1919
1824
  }
1920
1825
  }
1921
1826
  }
1922
- .hover\:text-primary {
1923
- &:hover {
1924
- @media (hover: hover) {
1925
- color: var(--df-color-primary);
1926
- }
1927
- }
1928
- }
1929
1827
  .hover\:text-slate-600 {
1930
1828
  &:hover {
1931
1829
  @media (hover: hover) {
@@ -1970,31 +1868,16 @@
1970
1868
  }
1971
1869
  }
1972
1870
  }
1973
- .focus\:border-primary {
1974
- &:focus {
1975
- border-color: var(--df-color-primary);
1976
- }
1977
- }
1978
1871
  .focus\:bg-\[var\(--df-color-primary\)\] {
1979
1872
  &:focus {
1980
1873
  background-color: var(--df-color-primary);
1981
1874
  }
1982
1875
  }
1983
- .focus\:bg-destructive {
1984
- &:focus {
1985
- background-color: var(--df-color-destructive);
1986
- }
1987
- }
1988
1876
  .focus\:text-\[var\(--df-color-primary-foreground\)\] {
1989
1877
  &:focus {
1990
1878
  color: var(--df-color-primary-foreground);
1991
1879
  }
1992
1880
  }
1993
- .focus\:text-destructive-foreground {
1994
- &:focus {
1995
- color: var(--df-color-destructive-foreground);
1996
- }
1997
- }
1998
1881
  .focus\:ring-1 {
1999
1882
  &:focus {
2000
1883
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2007,11 +1890,6 @@
2007
1890
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2008
1891
  }
2009
1892
  }
2010
- .focus\:ring-primary {
2011
- &:focus {
2012
- --tw-ring-color: var(--df-color-primary);
2013
- }
2014
- }
2015
1893
  .focus\:ring-offset-1 {
2016
1894
  &:focus {
2017
1895
  --tw-ring-offset-width: 1px;
@@ -2409,18 +2287,6 @@
2409
2287
  }
2410
2288
  }
2411
2289
  }
2412
- .dark\:hover\:bg-primary\/20 {
2413
- .dark & {
2414
- &:hover {
2415
- @media (hover: hover) {
2416
- background-color: var(--df-color-primary);
2417
- @supports (color: color-mix(in lab, red, red)) {
2418
- background-color: color-mix(in oklab, var(--df-color-primary) 20%, transparent);
2419
- }
2420
- }
2421
- }
2422
- }
2423
- }
2424
2290
  .dark\:hover\:bg-slate-700 {
2425
2291
  .dark & {
2426
2292
  &:hover {
@@ -2584,27 +2450,6 @@
2584
2450
  .bcp-petal-ring {
2585
2451
  pointer-events: none;
2586
2452
  }
2587
- .df-calendar-container {
2588
- color-scheme: light dark;
2589
- }
2590
- .df-calendar-container,
2591
- .df-portal {
2592
- --color-background: var(--df-color-background);
2593
- --color-foreground: var(--df-color-foreground);
2594
- --color-hover: var(--df-color-hover);
2595
- --color-border: var(--df-color-border);
2596
- --color-card: var(--df-color-card);
2597
- --color-card-foreground: var(--df-color-card-foreground);
2598
- --color-muted: var(--df-color-muted);
2599
- --color-muted-foreground: var(--df-color-muted-foreground);
2600
- --color-primary: var(--df-color-primary);
2601
- --color-primary-foreground: var(--df-color-primary-foreground);
2602
- --color-secondary: var(--df-color-secondary);
2603
- --color-secondary-foreground: var(--df-color-secondary-foreground);
2604
- --color-destructive: var(--df-color-destructive);
2605
- --color-destructive-foreground: var(--df-color-destructive-foreground);
2606
- --hover: var(--df-color-hover);
2607
- }
2608
2453
  @layer df-theme {
2609
2454
  :where(:root) {
2610
2455
  --df-color-background: rgb(255 255 255);
@@ -2640,18 +2485,18 @@
2640
2485
  }
2641
2486
  @media (prefers-color-scheme: dark) {
2642
2487
  :root:not(.light):not(.dark) {
2643
- --df-color-background: rgb(16 24 40);
2644
- --df-color-hover: rgb(30 41 59);
2488
+ --df-color-background: rgb(21 21 21);
2489
+ --df-color-hover: rgb(28 28 28);
2645
2490
  --df-color-foreground: rgb(229 229 229);
2646
- --df-color-border: rgb(51 65 85);
2647
- --df-color-card: rgb(16 24 40);
2491
+ --df-color-border: rgb(56 56 56);
2492
+ --df-color-card: rgb(31 41 55);
2648
2493
  --df-color-card-foreground: rgb(229 229 229);
2649
- --df-color-muted: rgb(30 41 59);
2650
- --df-color-muted-foreground: rgb(148 163 184);
2494
+ --df-color-muted: rgb(55 65 81);
2495
+ --df-color-muted-foreground: rgb(156 163 175);
2651
2496
  --df-color-primary: rgb(229 229 229);
2652
- --df-color-primary-foreground: rgb(15 23 42);
2653
- --df-color-secondary: rgb(148 163 184);
2654
- --df-color-secondary-foreground: rgb(15 23 42);
2497
+ --df-color-primary-foreground: rgb(23 23 23);
2498
+ --df-color-secondary: rgb(156 163 175);
2499
+ --df-color-secondary-foreground: rgb(23 23 23);
2655
2500
  --df-color-destructive: rgb(147 70 69);
2656
2501
  --df-color-destructive-foreground: rgb(254 242 242);
2657
2502
  }
@@ -2659,87 +2504,114 @@
2659
2504
  }
2660
2505
  @layer components {
2661
2506
  .df-calendar-container {
2507
+ color-scheme: light dark;
2662
2508
  position: relative;
2663
2509
  display: flex;
2664
2510
  flex-direction: row;
2665
2511
  overflow: hidden;
2666
- border-radius: var(--radius-lg);
2667
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2668
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2512
+ border-radius: 0.5rem;
2669
2513
  background-color: var(--df-color-background);
2670
2514
  border: 1px solid var(--df-color-border);
2515
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
2671
2516
  --df-calendar-height: 800px;
2672
2517
  height: var(--df-calendar-height, 800px);
2673
2518
  font-family: Arial;
2674
2519
  }
2675
- @media (max-width: 768px) {
2676
- .df-calendar-container {
2677
- --df-calendar-height: 550px;
2678
- }
2520
+ .df-calendar-container, .df-portal, .df-event-detail-panel, .df-dialog-container, .df-range-picker {
2521
+ --color-background: var(--df-color-background);
2522
+ --color-foreground: var(--df-color-foreground);
2523
+ --color-hover: var(--df-color-hover);
2524
+ --color-border: var(--df-color-border);
2525
+ --color-card: var(--df-color-card);
2526
+ --color-card-foreground: var(--df-color-card-foreground);
2527
+ --color-muted: var(--df-color-muted);
2528
+ --color-muted-foreground: var(--df-color-muted-foreground);
2529
+ --color-primary: var(--df-color-primary);
2530
+ --color-primary-foreground: var(--df-color-primary-foreground);
2531
+ --color-secondary: var(--df-color-secondary);
2532
+ --color-secondary-foreground: var(--df-color-secondary-foreground);
2533
+ --color-destructive: var(--df-color-destructive);
2534
+ --color-destructive-foreground: var(--df-color-destructive-foreground);
2535
+ --hover: var(--df-color-hover);
2536
+ }
2537
+ .df-calendar-container .df-header, .df-calendar-container .df-calendar, .df-calendar-container .df-month-view {
2538
+ background-color: var(--df-color-background);
2539
+ }
2540
+ .df-calendar-container .df-sidebar {
2541
+ background-color: var(--df-color-background);
2542
+ border-color: var(--df-color-border);
2543
+ }
2544
+ .df-calendar-container .df-week-header-row, .df-calendar-container .df-week-header {
2545
+ background-color: var(--df-color-background);
2546
+ border-color: var(--df-color-border);
2547
+ }
2548
+ .df-calendar-container .df-month-day-cell, .df-calendar-container .df-time-grid-cell, .df-calendar-container .df-all-day-cell, .df-calendar-container .df-time-column, .df-calendar-container .df-time-grid-row, .df-calendar-container .df-time-grid-boundary, .df-calendar-container .df-all-day-row, .df-calendar-container .df-mini-calendar {
2549
+ border-color: var(--df-color-border);
2550
+ }
2551
+ .df-calendar-container .df-year-grid-month {
2552
+ --heat-1: #ebf5ff;
2553
+ --heat-2: #cfe8ff;
2554
+ --heat-3: #91d5ff;
2555
+ --heat-4: #60a5fa;
2556
+ --heat-5: #3b82f6;
2557
+ }
2558
+ .dark .df-calendar-container .df-year-grid-month {
2559
+ --heat-1: #1e3a5f;
2560
+ --heat-2: #2563eb;
2561
+ --heat-3: #1e40af;
2562
+ --heat-4: #3b82f6;
2563
+ --heat-5: #93c5fd;
2679
2564
  }
2680
2565
  .df-calendar-time-column {
2681
- width: calc(var(--spacing) * 20);
2566
+ width: 5rem;
2682
2567
  flex-shrink: 0;
2683
2568
  border-color: var(--df-color-border);
2684
2569
  }
2685
2570
  .df-calendar-nav-button {
2571
+ padding: 0.25rem;
2572
+ color: rgb(75 85 99);
2686
2573
  border-radius: 0.25rem;
2687
- padding: calc(var(--spacing) * 1);
2688
- color: var(--color-gray-600);
2689
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2690
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2691
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2692
- &:hover {
2693
- @media (hover: hover) {
2694
- background-color: var(--color-gray-100);
2695
- }
2696
- }
2697
- .dark & {
2698
- color: var(--color-gray-300);
2699
- }
2700
- .dark & {
2701
- &:hover {
2702
- @media (hover: hover) {
2703
- background-color: var(--color-gray-800);
2704
- }
2705
- }
2706
- }
2574
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2575
+ transition-duration: 150ms;
2576
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2577
+ }
2578
+ .dark .df-calendar-nav-button {
2579
+ color: rgb(209 213 219);
2580
+ }
2581
+ .df-calendar-nav-button:hover {
2582
+ background-color: rgb(243 244 246);
2583
+ }
2584
+ .dark .df-calendar-nav-button:hover {
2585
+ background-color: rgb(31 41 55);
2707
2586
  }
2708
2587
  .df-calendar-today-button {
2588
+ padding: 0.25rem 1rem;
2589
+ font-size: 0.875rem;
2590
+ line-height: 1.25rem;
2591
+ color: rgb(55 65 81);
2709
2592
  border-radius: 0.25rem;
2710
- padding-inline: calc(var(--spacing) * 4);
2711
- padding-block: calc(var(--spacing) * 1);
2712
- font-size: var(--text-sm);
2713
- line-height: var(--tw-leading, var(--text-sm--line-height));
2714
- color: var(--color-gray-700);
2715
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2716
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2717
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2718
- &:hover {
2719
- @media (hover: hover) {
2720
- background-color: var(--color-gray-100);
2721
- }
2722
- }
2723
- .dark & {
2724
- color: var(--color-gray-200);
2725
- }
2726
- .dark & {
2727
- &:hover {
2728
- @media (hover: hover) {
2729
- background-color: var(--color-gray-800);
2730
- }
2731
- }
2732
- }
2593
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2594
+ transition-duration: 150ms;
2595
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2596
+ }
2597
+ .dark .df-calendar-today-button {
2598
+ color: rgb(229 231 235);
2599
+ }
2600
+ .df-calendar-today-button:hover {
2601
+ background-color: rgb(243 244 246);
2602
+ }
2603
+ .dark .df-calendar-today-button:hover {
2604
+ background-color: rgb(31 41 55);
2733
2605
  }
2734
2606
  .df-calendar-checkbox {
2735
- margin-right: calc(var(--spacing) * 2);
2607
+ margin-right: 0.5rem;
2736
2608
  display: inline-flex;
2737
- height: calc(var(--spacing) * 4);
2738
- width: calc(var(--spacing) * 4);
2609
+ height: 1rem;
2610
+ width: 1rem;
2739
2611
  cursor: pointer;
2740
2612
  align-items: center;
2741
2613
  justify-content: center;
2742
- border-radius: var(--radius-sm);
2614
+ border-radius: 0.25rem;
2743
2615
  border: 1px solid var(--df-color-border);
2744
2616
  -webkit-appearance: none;
2745
2617
  -moz-appearance: none;
@@ -2764,139 +2636,254 @@
2764
2636
  border-width: 0 2px 2px 0;
2765
2637
  transform: rotate(45deg);
2766
2638
  }
2767
- .df-header {
2768
- background-color: var(--df-color-background);
2639
+ .df-event-detail-panel, .df-dialog-container {
2640
+ background-color: var(--df-color-card);
2641
+ border-color: var(--df-color-border);
2769
2642
  }
2770
- .df-calendar {
2771
- background-color: var(--df-color-background);
2643
+ .df-calendar-container .df-header-left, .df-calendar-container .df-header-mid, .df-calendar-container .df-header-right {
2644
+ flex: 1;
2772
2645
  }
2773
- .df-month-view {
2774
- background-color: var(--df-color-background);
2646
+ .df-current-time-bar {
2647
+ background-color: var(--df-color-primary);
2775
2648
  }
2776
- .df-week-header-row,
2777
- .df-week-header {
2778
- background-color: var(--df-color-background);
2779
- border-color: var(--df-color-border);
2649
+ .df-current-time-label {
2650
+ background-color: var(--df-color-primary);
2651
+ color: var(--df-color-primary-foreground);
2780
2652
  }
2781
- .df-month-day-cell,
2782
- .df-time-grid-cell,
2783
- .df-all-day-cell {
2784
- border-color: var(--df-color-border);
2653
+ .df-today-button {
2654
+ color: var(--df-color-primary);
2785
2655
  }
2786
- .df-time-column {
2787
- border-color: var(--df-color-border);
2656
+ .df-today-button:hover, .df-nav-button:hover {
2657
+ background-color: var(--df-color-primary);
2658
+ @supports (color: color-mix(in lab, red, red)) {
2659
+ background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
2660
+ }
2788
2661
  }
2789
- .df-time-grid-row,
2790
- .df-time-grid-boundary,
2791
- .df-all-day-row,
2792
- .df-mini-calendar {
2793
- border-color: var(--df-color-border);
2662
+ .df-nav-button:hover {
2663
+ color: var(--df-color-primary);
2794
2664
  }
2795
- .df-event-detail-panel,
2796
- .df-dialog-container {
2797
- background-color: var(--df-color-card);
2798
- border-color: var(--df-color-border);
2665
+ .df-search-group:focus-within .df-search-focus-within-primary {
2666
+ color: var(--df-color-primary);
2667
+ }
2668
+ .df-fill-primary {
2669
+ background-color: var(--df-color-primary);
2670
+ color: var(--df-color-primary-foreground);
2671
+ }
2672
+ .df-fill-secondary {
2673
+ background-color: var(--df-color-secondary);
2674
+ color: var(--df-color-secondary-foreground);
2799
2675
  }
2800
- .df-portal .bg-destructive {
2676
+ .df-fill-destructive {
2801
2677
  background-color: var(--df-color-destructive);
2802
2678
  color: var(--df-color-destructive-foreground);
2803
2679
  }
2804
- .df-portal .hover\:bg-destructive\/90:hover {
2680
+ .df-tint-primary {
2681
+ background-color: var(--df-color-primary);
2682
+ @supports (color: color-mix(in lab, red, red)) {
2683
+ background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
2684
+ }
2685
+ color: var(--df-color-primary);
2686
+ }
2687
+ .df-tint-primary-md {
2688
+ background-color: var(--df-color-primary);
2689
+ @supports (color: color-mix(in lab, red, red)) {
2690
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2691
+ }
2692
+ color: var(--df-color-primary);
2693
+ }
2694
+ .df-tint-primary-lg {
2695
+ background-color: var(--df-color-primary);
2696
+ @supports (color: color-mix(in lab, red, red)) {
2697
+ background-color: color-mix( in srgb, var(--df-color-primary) 30%, transparent );
2698
+ }
2699
+ color: var(--df-color-primary);
2700
+ }
2701
+ .dark .df-dark-tint-primary-md {
2702
+ background-color: var(--df-color-primary);
2703
+ @supports (color: color-mix(in lab, red, red)) {
2704
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2705
+ }
2706
+ }
2707
+ .df-hover-primary:hover {
2708
+ background-color: var(--df-color-primary);
2709
+ @supports (color: color-mix(in lab, red, red)) {
2710
+ background-color: color-mix( in srgb, var(--df-color-primary) 10%, transparent );
2711
+ }
2712
+ color: var(--df-color-primary);
2713
+ }
2714
+ .df-hover-primary-md:hover {
2715
+ background-color: var(--df-color-primary);
2716
+ @supports (color: color-mix(in lab, red, red)) {
2717
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2718
+ }
2719
+ color: var(--df-color-primary);
2720
+ }
2721
+ .dark .df-hover-primary-dark-md:hover {
2722
+ background-color: var(--df-color-primary);
2723
+ @supports (color: color-mix(in lab, red, red)) {
2724
+ background-color: color-mix( in srgb, var(--df-color-primary) 20%, transparent );
2725
+ }
2726
+ }
2727
+ .df-hover-primary-solid:hover {
2728
+ background-color: var(--df-color-primary);
2729
+ @supports (color: color-mix(in lab, red, red)) {
2730
+ background-color: color-mix( in srgb, var(--df-color-primary) 90%, transparent );
2731
+ }
2732
+ }
2733
+ .df-hover-destructive:hover {
2805
2734
  background-color: var(--df-color-destructive);
2806
2735
  @supports (color: color-mix(in lab, red, red)) {
2807
- background-color: color-mix(
2808
- in srgb,
2809
- var(--df-color-destructive) 90%,
2810
- transparent
2811
- );
2736
+ background-color: color-mix( in srgb, var(--df-color-destructive) 90%, transparent );
2812
2737
  }
2813
2738
  }
2814
- .df-portal .text-destructive-foreground {
2739
+ .df-hover-fill-destructive:hover {
2740
+ background-color: var(--df-color-destructive);
2815
2741
  color: var(--df-color-destructive-foreground);
2816
2742
  }
2817
- .df-sidebar {
2818
- background-color: var(--df-color-background);
2819
- border-color: var(--df-color-border);
2743
+ .df-focus-fill-destructive:focus {
2744
+ background-color: var(--df-color-destructive);
2745
+ color: var(--df-color-destructive-foreground);
2820
2746
  }
2821
- .df-year-grid-month {
2822
- --heat-1: #ebf5ff;
2823
- --heat-2: #cfe8ff;
2824
- --heat-3: #91d5ff;
2825
- --heat-4: #60a5fa;
2826
- --heat-5: #3b82f6;
2747
+ .df-text-primary {
2748
+ color: var(--df-color-primary);
2827
2749
  }
2828
- .dark .df-year-grid-month {
2829
- --heat-1: #1e3a5f;
2830
- --heat-2: #2563eb;
2831
- --heat-3: #1e40af;
2832
- --heat-4: #3b82f6;
2833
- --heat-5: #93c5fd;
2750
+ .df-text-primary-fg {
2751
+ color: var(--df-color-primary-foreground);
2834
2752
  }
2835
- .df-calendar-container *::-webkit-scrollbar {
2836
- width: 2px;
2837
- height: 2px;
2753
+ .df-text-secondary-fg {
2754
+ color: var(--df-color-secondary-foreground);
2838
2755
  }
2839
- .df-calendar-container *::-webkit-scrollbar-track {
2840
- background: transparent;
2756
+ .df-text-destructive {
2757
+ color: var(--df-color-destructive);
2841
2758
  }
2842
- .df-calendar-container *::-webkit-scrollbar-thumb {
2843
- background: #d1d5db;
2844
- border-radius: 1px;
2759
+ .df-text-destructive-fg {
2760
+ color: var(--df-color-destructive-foreground);
2845
2761
  }
2846
- .dark .df-calendar-container *::-webkit-scrollbar-thumb {
2847
- background: #4b5563;
2762
+ .df-border-primary {
2763
+ border-color: var(--df-color-primary);
2848
2764
  }
2849
- .df-calendar-container *::-webkit-scrollbar-thumb:hover {
2850
- background: #9ca3af;
2765
+ .df-border-primary-soft {
2766
+ border-color: var(--df-color-primary);
2767
+ @supports (color: color-mix(in lab, red, red)) {
2768
+ border-color: color-mix(in srgb, var(--df-color-primary) 50%, transparent);
2769
+ }
2851
2770
  }
2852
- .df-calendar-container * {
2853
- scrollbar-width: thin;
2854
- scrollbar-color: #d1d5db transparent;
2771
+ .df-ring-primary {
2772
+ --tw-ring-color: var(--df-color-primary);
2773
+ @supports (color: color-mix(in lab, red, red)) {
2774
+ --tw-ring-color: color-mix(
2775
+ in srgb,
2776
+ var(--df-color-primary) 20%,
2777
+ transparent
2778
+ );
2779
+ }
2855
2780
  }
2856
- .dark .df-calendar-container * {
2857
- scrollbar-color: #4b5563 transparent;
2781
+ .df-ring-primary-solid {
2782
+ --tw-ring-color: var(--df-color-primary);
2858
2783
  }
2859
- .df-calendar-container .df-header-left {
2860
- flex: 1;
2784
+ .df-shadow-primary {
2785
+ --tw-shadow-color: var(--df-color-primary);
2786
+ @supports (color: color-mix(in lab, red, red)) {
2787
+ --tw-shadow-color: color-mix(
2788
+ in srgb,
2789
+ var(--df-color-primary) 20%,
2790
+ transparent
2791
+ );
2792
+ }
2861
2793
  }
2862
- .df-calendar-container .df-header-mid {
2863
- flex: 1;
2794
+ .df-focus-ring:focus {
2795
+ border-color: var(--df-color-primary);
2796
+ --tw-ring-color: var(--df-color-primary);
2864
2797
  }
2865
- .df-calendar-container .df-header-right {
2866
- flex: 1;
2798
+ .df-focus-ring-only:focus {
2799
+ --tw-ring-color: var(--df-color-primary);
2867
2800
  }
2868
- .df-calendar-container.df-drag-active,
2869
- .df-calendar-container .df-drag-active {
2870
- -moz-user-select: none;
2871
- user-select: none;
2872
- -webkit-user-select: none;
2801
+ .df-focus-border-primary:focus {
2802
+ border-color: var(--df-color-primary);
2873
2803
  }
2874
- .df-calendar-container.df-drag-active .calendar-event,
2875
- .df-calendar-container.df-drag-active .df-month-more-events,
2876
- .df-calendar-container.df-drag-active .df-month-title,
2877
- .df-calendar-container.df-drag-active .df-year-event-content {
2878
- pointer-events: none;
2804
+ .df-all-day-event-animate {
2805
+ animation: df-event-pop-in 0.3s ease-out forwards;
2879
2806
  }
2880
- .df-calendar-container .df-cursor-ns-resize,
2881
- .df-calendar-container .df-cursor-ns-resize * {
2882
- cursor: ns-resize;
2807
+ .df-animate-in {
2808
+ animation-duration: 200ms;
2809
+ animation-fill-mode: forwards;
2810
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
2883
2811
  }
2884
- .df-calendar-container .df-cursor-ew-resize,
2885
- .df-calendar-container .df-cursor-ew-resize * {
2886
- cursor: ew-resize;
2812
+ .df-fade-in {
2813
+ animation-name: df-fade-in;
2887
2814
  }
2888
- .df-calendar-container .df-cursor-grabbing,
2889
- .df-calendar-container .df-cursor-grabbing * {
2890
- cursor: grabbing;
2815
+ .df-zoom-in-95 {
2816
+ animation-name: df-zoom-in;
2891
2817
  }
2892
- .df-calendar-container .scrollbar-hide::-webkit-scrollbar {
2893
- display: none;
2818
+ .df-fade-in.df-zoom-in-95 {
2819
+ animation-name: df-fade-in, df-zoom-in;
2894
2820
  }
2895
- .df-calendar-container .scrollbar-hide {
2896
- -ms-overflow-style: none;
2897
- scrollbar-width: none;
2821
+ .df-animate-slide-up {
2822
+ animation: df-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2823
+ }
2824
+ .df-animate-slide-down {
2825
+ animation: df-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2826
+ }
2827
+ @media (max-width: 768px) {
2828
+ .df-calendar-container {
2829
+ --df-calendar-height: 550px;
2830
+ }
2831
+ }
2832
+ @media (max-width: 767px) {
2833
+ .df-mobile-mask-fade {
2834
+ mask-image: linear-gradient(to right, black 70%, transparent 100%);
2835
+ -webkit-mask-image: linear-gradient( to right, black 70%, transparent 100% );
2836
+ }
2898
2837
  }
2899
2838
  }
2839
+ .df-calendar-container *::-webkit-scrollbar {
2840
+ width: 2px;
2841
+ height: 2px;
2842
+ }
2843
+ .df-calendar-container *::-webkit-scrollbar-track {
2844
+ background: transparent;
2845
+ }
2846
+ .df-calendar-container *::-webkit-scrollbar-thumb {
2847
+ background: #d1d5db;
2848
+ border-radius: 1px;
2849
+ }
2850
+ .dark .df-calendar-container *::-webkit-scrollbar-thumb {
2851
+ background: #4b5563;
2852
+ }
2853
+ .df-calendar-container *::-webkit-scrollbar-thumb:hover {
2854
+ background: #9ca3af;
2855
+ }
2856
+ .df-calendar-container * {
2857
+ scrollbar-width: thin;
2858
+ scrollbar-color: #d1d5db transparent;
2859
+ }
2860
+ .dark .df-calendar-container * {
2861
+ scrollbar-color: #4b5563 transparent;
2862
+ }
2863
+ .df-calendar-container.df-drag-active, .df-calendar-container .df-drag-active {
2864
+ -moz-user-select: none;
2865
+ user-select: none;
2866
+ -webkit-user-select: none;
2867
+ }
2868
+ .df-calendar-container.df-drag-active .calendar-event, .df-calendar-container.df-drag-active .df-month-more-events, .df-calendar-container.df-drag-active .df-month-title, .df-calendar-container.df-drag-active .df-year-event-content {
2869
+ pointer-events: none;
2870
+ }
2871
+ .df-calendar-container .df-cursor-ns-resize, .df-calendar-container .df-cursor-ns-resize * {
2872
+ cursor: ns-resize;
2873
+ }
2874
+ .df-calendar-container .df-cursor-ew-resize, .df-calendar-container .df-cursor-ew-resize * {
2875
+ cursor: ew-resize;
2876
+ }
2877
+ .df-calendar-container .df-cursor-grabbing, .df-calendar-container .df-cursor-grabbing * {
2878
+ cursor: grabbing;
2879
+ }
2880
+ .df-scrollbar-hide::-webkit-scrollbar {
2881
+ display: none;
2882
+ }
2883
+ .df-scrollbar-hide {
2884
+ -ms-overflow-style: none;
2885
+ scrollbar-width: none;
2886
+ }
2900
2887
  @keyframes df-fade-out {
2901
2888
  from {
2902
2889
  opacity: 1;
@@ -2905,6 +2892,48 @@
2905
2892
  opacity: 0;
2906
2893
  }
2907
2894
  }
2895
+ @keyframes df-fade-in {
2896
+ from {
2897
+ opacity: 0;
2898
+ }
2899
+ to {
2900
+ opacity: 1;
2901
+ }
2902
+ }
2903
+ @keyframes df-event-pop-in {
2904
+ from {
2905
+ opacity: 0;
2906
+ transform: scale(0.95) translateY(-4px);
2907
+ }
2908
+ to {
2909
+ opacity: 1;
2910
+ transform: scale(1) translateY(0);
2911
+ }
2912
+ }
2913
+ @keyframes df-zoom-in {
2914
+ from {
2915
+ transform: scale(0.95);
2916
+ }
2917
+ to {
2918
+ transform: scale(1);
2919
+ }
2920
+ }
2921
+ @keyframes df-slide-up {
2922
+ from {
2923
+ transform: translateY(100%);
2924
+ }
2925
+ to {
2926
+ transform: translateY(0);
2927
+ }
2928
+ }
2929
+ @keyframes df-slide-down {
2930
+ from {
2931
+ transform: translateY(0);
2932
+ }
2933
+ to {
2934
+ transform: translateY(100%);
2935
+ }
2936
+ }
2908
2937
  @property --tw-translate-x {
2909
2938
  syntax: "*";
2910
2939
  inherits: false;