@sunggang/ui-lib 0.1.38 → 0.1.40

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/index.esm.css CHANGED
@@ -1415,296 +1415,205 @@ video {
1415
1415
 
1416
1416
  /* gary */
1417
1417
 
1418
- .first\:rounded-l-md:first-child {
1419
- border-top-left-radius: calc(var(--radius) - 2px);
1420
- border-bottom-left-radius: calc(var(--radius) - 2px);
1421
- }
1422
-
1423
- .first\:border-l:first-child {
1424
- border-left-width: 1px;
1425
- }
1426
-
1427
- .last\:rounded-r-md:last-child {
1428
- border-top-right-radius: calc(var(--radius) - 2px);
1429
- border-bottom-right-radius: calc(var(--radius) - 2px);
1430
- }
1431
-
1432
- .focus-within\:relative:focus-within {
1433
- position: relative;
1434
- }
1435
-
1436
- .focus-within\:z-20:focus-within {
1437
- z-index: 20;
1438
- }
1439
-
1440
- .hover\:bg-\[\#000\]:hover {
1441
- --tw-bg-opacity: 1;
1442
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1443
- }
1444
-
1445
- .hover\:bg-\[\#D9D9D9\]:hover {
1446
- --tw-bg-opacity: 1;
1447
- background-color: rgb(217 217 217 / var(--tw-bg-opacity));
1448
- }
1449
-
1450
- .hover\:bg-accent:hover {
1451
- background-color: hsl(var(--accent));
1452
- }
1453
-
1454
- .hover\:bg-destructive\/90:hover {
1455
- background-color: hsl(var(--destructive) / 0.9);
1456
- }
1457
-
1458
- .hover\:bg-primary\/90:hover {
1459
- background-color: hsl(var(--primary) / 0.9);
1460
- }
1461
-
1462
- .hover\:bg-secondary\/80:hover {
1463
- background-color: hsl(var(--secondary) / 0.8);
1464
- }
1465
-
1466
- .hover\:text-\[\#fff\]:hover {
1467
- --tw-text-opacity: 1;
1468
- color: rgb(255 255 255 / var(--tw-text-opacity));
1469
- }
1470
-
1471
- .hover\:text-accent-foreground:hover {
1472
- color: hsl(var(--accent-foreground));
1473
- }
1474
1418
 
1475
- .hover\:underline:hover {
1476
- text-decoration-line: underline;
1419
+ /* react_date_range_styles */
1420
+ .rdrCalendarWrapper {
1421
+ box-sizing: border-box;
1422
+ background: #ffffff;
1423
+ display: inline-flex;
1424
+ flex-direction: column;
1425
+ -webkit-user-select: none;
1426
+ -moz-user-select: none;
1427
+ user-select: none;
1477
1428
  }
1478
1429
 
1479
- .hover\:opacity-100:hover {
1480
- opacity: 1;
1430
+ .rdrDateDisplay{
1431
+ display: flex;
1432
+ justify-content: space-between;
1481
1433
  }
1482
1434
 
1483
- .focus\:bg-\[\#000\]:focus {
1484
- --tw-bg-opacity: 1;
1485
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1435
+ .rdrDateDisplayItem{
1436
+ flex: 1 1;
1437
+ width: 0;
1438
+ text-align: center;
1439
+ color: inherit;
1486
1440
  }
1487
1441
 
1488
- .focus\:text-\[\#fff\]:focus {
1489
- --tw-text-opacity: 1;
1490
- color: rgb(255 255 255 / var(--tw-text-opacity));
1491
- }
1442
+ .rdrDateDisplayItem + .rdrDateDisplayItem{
1443
+ margin-left: 0.833em;
1444
+ }
1492
1445
 
1493
- .focus-visible\:outline-none:focus-visible {
1494
- outline: 2px solid transparent;
1495
- outline-offset: 2px;
1496
- }
1446
+ .rdrDateDisplayItem input{
1447
+ text-align: inherit
1448
+ }
1497
1449
 
1498
- .focus-visible\:ring-1:focus-visible {
1499
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1500
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1501
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1502
- }
1450
+ .rdrDateDisplayItem input:disabled{
1451
+ cursor: default;
1452
+ }
1503
1453
 
1504
- .focus-visible\:ring-2:focus-visible {
1505
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1506
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1507
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1508
- }
1454
+ .rdrDateDisplayItemActive{}
1509
1455
 
1510
- .focus-visible\:ring-ring:focus-visible {
1511
- --tw-ring-color: hsl(var(--ring));
1456
+ .rdrMonthAndYearWrapper {
1457
+ box-sizing: inherit;
1458
+ display: flex;
1459
+ justify-content: space-between;
1512
1460
  }
1513
1461
 
1514
- .focus-visible\:ring-offset-2:focus-visible {
1515
- --tw-ring-offset-width: 2px;
1462
+ .rdrMonthAndYearPickers{
1463
+ flex: 1 1 auto;
1464
+ display: flex;
1465
+ justify-content: center;
1466
+ align-items: center;
1516
1467
  }
1517
1468
 
1518
- .focus-visible\:ring-offset-background:focus-visible {
1519
- --tw-ring-offset-color: hsl(var(--background));
1520
- }
1469
+ .rdrMonthPicker{}
1521
1470
 
1522
- .disabled\:pointer-events-none:disabled {
1523
- pointer-events: none;
1524
- }
1471
+ .rdrYearPicker{}
1525
1472
 
1526
- .disabled\:cursor-not-allowed:disabled {
1527
- cursor: not-allowed;
1473
+ .rdrNextPrevButton {
1474
+ box-sizing: inherit;
1475
+ cursor: pointer;
1476
+ outline: none;
1528
1477
  }
1529
1478
 
1530
- .disabled\:opacity-50:disabled {
1531
- opacity: 0.5;
1532
- }
1479
+ .rdrPprevButton {}
1533
1480
 
1534
- .has-\[\:disabled\]\:opacity-50:has(:disabled) {
1535
- opacity: 0.5;
1536
- }
1481
+ .rdrNextButton {}
1537
1482
 
1538
- .aria-selected\:bg-accent[aria-selected="true"] {
1539
- background-color: hsl(var(--accent));
1483
+ .rdrMonths{
1484
+ display: flex;
1540
1485
  }
1541
1486
 
1542
- .aria-selected\:bg-accent\/50[aria-selected="true"] {
1543
- background-color: hsl(var(--accent) / 0.5);
1487
+ .rdrMonthsVertical{
1488
+ flex-direction: column;
1544
1489
  }
1545
1490
 
1546
- .aria-selected\:text-accent-foreground[aria-selected="true"] {
1547
- color: hsl(var(--accent-foreground));
1491
+ .rdrMonthsHorizontal > div > div > div{
1492
+ display: flex;
1493
+ flex-direction: row;
1548
1494
  }
1549
1495
 
1550
- .aria-selected\:text-muted-foreground[aria-selected="true"] {
1551
- color: hsl(var(--muted-foreground));
1496
+ .rdrMonth{
1497
+ width: 27.667em;
1552
1498
  }
1553
1499
 
1554
- .aria-selected\:opacity-100[aria-selected="true"] {
1555
- opacity: 1;
1500
+ .rdrWeekDays{
1501
+ display: flex;
1556
1502
  }
1557
1503
 
1558
- .aria-selected\:opacity-30[aria-selected="true"] {
1559
- opacity: 0.3;
1504
+ .rdrWeekDay {
1505
+ flex-basis: calc(100% / 7);
1506
+ box-sizing: inherit;
1507
+ text-align: center;
1560
1508
  }
1561
1509
 
1562
- .data-\[state\=checked\]\:translate-x-4[data-state=checked] {
1563
- --tw-translate-x: 1rem;
1564
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1510
+ .rdrDays{
1511
+ display: flex;
1512
+ flex-wrap: wrap;
1565
1513
  }
1566
1514
 
1567
- .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
1568
- --tw-translate-x: 0px;
1569
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1570
- }
1515
+ .rdrDateDisplayWrapper{}
1571
1516
 
1572
- .data-\[state\=checked\]\:bg-primary[data-state=checked] {
1573
- background-color: hsl(var(--primary));
1574
- }
1517
+ .rdrMonthName{}
1575
1518
 
1576
- .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
1577
- background-color: hsl(var(--input));
1519
+ .rdrInfiniteMonths{
1520
+ overflow: auto;
1578
1521
  }
1579
1522
 
1580
- .data-\[state\=open\]\:animate-in[data-state=open] {
1581
- animation-name: enter;
1582
- animation-duration: 150ms;
1583
- --tw-enter-opacity: initial;
1584
- --tw-enter-scale: initial;
1585
- --tw-enter-rotate: initial;
1586
- --tw-enter-translate-x: initial;
1587
- --tw-enter-translate-y: initial;
1523
+ .rdrDateRangeWrapper{
1524
+ -webkit-user-select: none;
1525
+ -moz-user-select: none;
1526
+ user-select: none;
1588
1527
  }
1589
1528
 
1590
- .data-\[state\=closed\]\:animate-out[data-state=closed] {
1591
- animation-name: exit;
1592
- animation-duration: 150ms;
1593
- --tw-exit-opacity: initial;
1594
- --tw-exit-scale: initial;
1595
- --tw-exit-rotate: initial;
1596
- --tw-exit-translate-x: initial;
1597
- --tw-exit-translate-y: initial;
1529
+ .rdrDateInput {
1530
+ position: relative;
1598
1531
  }
1599
1532
 
1600
- .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
1601
- --tw-exit-opacity: 0;
1602
- }
1533
+ .rdrDateInput input {
1534
+ outline: none;
1535
+ }
1603
1536
 
1604
- .data-\[state\=open\]\:fade-in-0[data-state=open] {
1605
- --tw-enter-opacity: 0;
1606
- }
1537
+ .rdrDateInput .rdrWarning {
1538
+ position: absolute;
1539
+ font-size: 1.6em;
1540
+ line-height: 1.6em;
1541
+ top: 0;
1542
+ right: .25em;
1543
+ color: #FF0000;
1544
+ }
1607
1545
 
1608
- .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
1609
- --tw-exit-scale: .95;
1546
+ .rdrDay {
1547
+ box-sizing: inherit;
1548
+ width: calc(100% / 7);
1549
+ position: relative;
1550
+ font: inherit;
1551
+ cursor: pointer;
1610
1552
  }
1611
1553
 
1612
- .data-\[state\=open\]\:zoom-in-95[data-state=open] {
1613
- --tw-enter-scale: .95;
1554
+ .rdrDayNumber {
1555
+ display: block;
1556
+ position: relative;
1614
1557
  }
1615
1558
 
1616
- .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
1617
- --tw-enter-translate-y: -0.5rem;
1618
- }
1559
+ .rdrDayNumber span{
1560
+ color: #1d2429;
1561
+ }
1619
1562
 
1620
- .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
1621
- --tw-enter-translate-x: 0.5rem;
1563
+ .rdrDayDisabled {
1564
+ cursor: not-allowed;
1622
1565
  }
1623
1566
 
1624
- .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
1625
- --tw-enter-translate-x: -0.5rem;
1567
+ @supports (-ms-ime-align: auto) {
1568
+ .rdrDay {
1569
+ flex-basis: 14.285% !important;
1570
+ }
1626
1571
  }
1627
1572
 
1628
- .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
1629
- --tw-enter-translate-y: 0.5rem;
1573
+ .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
1574
+ pointer-events: none;
1630
1575
  }
1631
1576
 
1632
- @media (min-width: 640px) {
1633
-
1634
- .sm\:flex-row {
1635
- flex-direction: row;
1636
- }
1637
-
1638
- .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
1639
- --tw-space-x-reverse: 0;
1640
- margin-right: calc(1rem * var(--tw-space-x-reverse));
1641
- margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1642
- }
1577
+ .rdrInRange{}
1643
1578
 
1644
- .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
1645
- --tw-space-y-reverse: 0;
1646
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
1647
- margin-bottom: calc(0px * var(--tw-space-y-reverse));
1648
- }
1579
+ .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
1580
+ pointer-events: none;
1649
1581
  }
1650
1582
 
1651
- @media (min-width: 1024px) {
1652
-
1653
- .lg\:flex {
1654
- display: flex;
1655
- }
1583
+ .rdrDayHovered{}
1656
1584
 
1657
- .lg\:px-8 {
1658
- padding-left: 2rem;
1659
- padding-right: 2rem;
1660
- }
1661
- }
1585
+ .rdrDayActive{}
1662
1586
 
1663
- .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
1664
- border-top-right-radius: calc(var(--radius) - 2px);
1665
- border-bottom-right-radius: calc(var(--radius) - 2px);
1587
+ .rdrDateRangePickerWrapper{
1588
+ display: inline-flex;
1589
+ -webkit-user-select: none;
1590
+ -moz-user-select: none;
1591
+ user-select: none;
1666
1592
  }
1667
1593
 
1668
- .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
1669
- border-top-left-radius: calc(var(--radius) - 2px);
1670
- border-bottom-left-radius: calc(var(--radius) - 2px);
1671
- }
1594
+ .rdrDefinedRangesWrapper{}
1672
1595
 
1673
- .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
1674
- border-radius: calc(var(--radius) - 2px);
1596
+ .rdrStaticRanges{
1597
+ display: flex;
1598
+ flex-direction: column;
1675
1599
  }
1676
1600
 
1677
- .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
1678
- background-color: hsl(var(--accent));
1601
+ .rdrStaticRange{
1602
+ font-size: inherit;
1679
1603
  }
1680
1604
 
1681
- .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
1682
- border-top-left-radius: calc(var(--radius) - 2px);
1683
- border-bottom-left-radius: calc(var(--radius) - 2px);
1684
- }
1605
+ .rdrStaticRangeLabel{}
1685
1606
 
1686
- .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
1687
- border-top-right-radius: calc(var(--radius) - 2px);
1688
- border-bottom-right-radius: calc(var(--radius) - 2px);
1689
- }
1607
+ .rdrInputRanges{}
1690
1608
 
1691
- .\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
1692
- background-color: hsl(var(--accent) / 0.5);
1609
+ .rdrInputRange{
1610
+ display: flex;
1693
1611
  }
1694
1612
 
1695
- .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
1696
- border-top-right-radius: calc(var(--radius) - 2px);
1697
- border-bottom-right-radius: calc(var(--radius) - 2px);
1698
- }
1613
+ .rdrInputRangeInput{}
1699
1614
 
1700
- /*
1701
- * Replace this with your own classes
1702
- *
1703
- * e.g.
1704
- * .container {
1705
- * }
1706
- */
1707
1615
 
1616
+ /* react_date_range_theme_default */
1708
1617
  .rdrCalendarWrapper{
1709
1618
  color: #000000;
1710
1619
  font-size: 12px;
@@ -2090,197 +1999,292 @@ video {
2090
1999
  padding: 0.833em;
2091
2000
  }
2092
2001
 
2093
- .rdrCalendarWrapper {
2094
- box-sizing: border-box;
2095
- background: #ffffff;
2096
- display: inline-flex;
2097
- flex-direction: column;
2098
- -webkit-user-select: none;
2099
- -moz-user-select: none;
2100
- user-select: none;
2002
+ .first\:rounded-l-md:first-child {
2003
+ border-top-left-radius: calc(var(--radius) - 2px);
2004
+ border-bottom-left-radius: calc(var(--radius) - 2px);
2005
+ }
2006
+
2007
+ .first\:border-l:first-child {
2008
+ border-left-width: 1px;
2009
+ }
2010
+
2011
+ .last\:rounded-r-md:last-child {
2012
+ border-top-right-radius: calc(var(--radius) - 2px);
2013
+ border-bottom-right-radius: calc(var(--radius) - 2px);
2014
+ }
2015
+
2016
+ .focus-within\:relative:focus-within {
2017
+ position: relative;
2018
+ }
2019
+
2020
+ .focus-within\:z-20:focus-within {
2021
+ z-index: 20;
2022
+ }
2023
+
2024
+ .hover\:bg-\[\#000\]:hover {
2025
+ --tw-bg-opacity: 1;
2026
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
2027
+ }
2028
+
2029
+ .hover\:bg-\[\#D9D9D9\]:hover {
2030
+ --tw-bg-opacity: 1;
2031
+ background-color: rgb(217 217 217 / var(--tw-bg-opacity));
2032
+ }
2033
+
2034
+ .hover\:bg-accent:hover {
2035
+ background-color: hsl(var(--accent));
2036
+ }
2037
+
2038
+ .hover\:bg-destructive\/90:hover {
2039
+ background-color: hsl(var(--destructive) / 0.9);
2040
+ }
2041
+
2042
+ .hover\:bg-primary\/90:hover {
2043
+ background-color: hsl(var(--primary) / 0.9);
2044
+ }
2045
+
2046
+ .hover\:bg-secondary\/80:hover {
2047
+ background-color: hsl(var(--secondary) / 0.8);
2048
+ }
2049
+
2050
+ .hover\:text-\[\#fff\]:hover {
2051
+ --tw-text-opacity: 1;
2052
+ color: rgb(255 255 255 / var(--tw-text-opacity));
2053
+ }
2054
+
2055
+ .hover\:text-accent-foreground:hover {
2056
+ color: hsl(var(--accent-foreground));
2057
+ }
2058
+
2059
+ .hover\:underline:hover {
2060
+ text-decoration-line: underline;
2061
+ }
2062
+
2063
+ .hover\:opacity-100:hover {
2064
+ opacity: 1;
2065
+ }
2066
+
2067
+ .focus\:bg-\[\#000\]:focus {
2068
+ --tw-bg-opacity: 1;
2069
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
2070
+ }
2071
+
2072
+ .focus\:text-\[\#fff\]:focus {
2073
+ --tw-text-opacity: 1;
2074
+ color: rgb(255 255 255 / var(--tw-text-opacity));
2075
+ }
2076
+
2077
+ .focus-visible\:outline-none:focus-visible {
2078
+ outline: 2px solid transparent;
2079
+ outline-offset: 2px;
2080
+ }
2081
+
2082
+ .focus-visible\:ring-1:focus-visible {
2083
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2084
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2085
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2086
+ }
2087
+
2088
+ .focus-visible\:ring-2:focus-visible {
2089
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2090
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2091
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2092
+ }
2093
+
2094
+ .focus-visible\:ring-ring:focus-visible {
2095
+ --tw-ring-color: hsl(var(--ring));
2101
2096
  }
2102
2097
 
2103
- .rdrDateDisplay{
2104
- display: flex;
2105
- justify-content: space-between;
2098
+ .focus-visible\:ring-offset-2:focus-visible {
2099
+ --tw-ring-offset-width: 2px;
2106
2100
  }
2107
2101
 
2108
- .rdrDateDisplayItem{
2109
- flex: 1 1;
2110
- width: 0;
2111
- text-align: center;
2112
- color: inherit;
2102
+ .focus-visible\:ring-offset-background:focus-visible {
2103
+ --tw-ring-offset-color: hsl(var(--background));
2113
2104
  }
2114
2105
 
2115
- .rdrDateDisplayItem + .rdrDateDisplayItem{
2116
- margin-left: 0.833em;
2117
- }
2106
+ .disabled\:pointer-events-none:disabled {
2107
+ pointer-events: none;
2108
+ }
2118
2109
 
2119
- .rdrDateDisplayItem input{
2120
- text-align: inherit
2121
- }
2110
+ .disabled\:cursor-not-allowed:disabled {
2111
+ cursor: not-allowed;
2112
+ }
2122
2113
 
2123
- .rdrDateDisplayItem input:disabled{
2124
- cursor: default;
2125
- }
2114
+ .disabled\:opacity-50:disabled {
2115
+ opacity: 0.5;
2116
+ }
2126
2117
 
2127
- .rdrDateDisplayItemActive{}
2118
+ .has-\[\:disabled\]\:opacity-50:has(:disabled) {
2119
+ opacity: 0.5;
2120
+ }
2128
2121
 
2129
- .rdrMonthAndYearWrapper {
2130
- box-sizing: inherit;
2131
- display: flex;
2132
- justify-content: space-between;
2122
+ .aria-selected\:bg-accent[aria-selected="true"] {
2123
+ background-color: hsl(var(--accent));
2133
2124
  }
2134
2125
 
2135
- .rdrMonthAndYearPickers{
2136
- flex: 1 1 auto;
2137
- display: flex;
2138
- justify-content: center;
2139
- align-items: center;
2126
+ .aria-selected\:bg-accent\/50[aria-selected="true"] {
2127
+ background-color: hsl(var(--accent) / 0.5);
2140
2128
  }
2141
2129
 
2142
- .rdrMonthPicker{}
2130
+ .aria-selected\:text-accent-foreground[aria-selected="true"] {
2131
+ color: hsl(var(--accent-foreground));
2132
+ }
2143
2133
 
2144
- .rdrYearPicker{}
2134
+ .aria-selected\:text-muted-foreground[aria-selected="true"] {
2135
+ color: hsl(var(--muted-foreground));
2136
+ }
2145
2137
 
2146
- .rdrNextPrevButton {
2147
- box-sizing: inherit;
2148
- cursor: pointer;
2149
- outline: none;
2138
+ .aria-selected\:opacity-100[aria-selected="true"] {
2139
+ opacity: 1;
2150
2140
  }
2151
2141
 
2152
- .rdrPprevButton {}
2142
+ .aria-selected\:opacity-30[aria-selected="true"] {
2143
+ opacity: 0.3;
2144
+ }
2153
2145
 
2154
- .rdrNextButton {}
2146
+ .data-\[state\=checked\]\:translate-x-4[data-state=checked] {
2147
+ --tw-translate-x: 1rem;
2148
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2149
+ }
2155
2150
 
2156
- .rdrMonths{
2157
- display: flex;
2151
+ .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
2152
+ --tw-translate-x: 0px;
2153
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2158
2154
  }
2159
2155
 
2160
- .rdrMonthsVertical{
2161
- flex-direction: column;
2156
+ .data-\[state\=checked\]\:bg-primary[data-state=checked] {
2157
+ background-color: hsl(var(--primary));
2162
2158
  }
2163
2159
 
2164
- .rdrMonthsHorizontal > div > div > div{
2165
- display: flex;
2166
- flex-direction: row;
2160
+ .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
2161
+ background-color: hsl(var(--input));
2167
2162
  }
2168
2163
 
2169
- .rdrMonth{
2170
- width: 27.667em;
2164
+ .data-\[state\=open\]\:animate-in[data-state=open] {
2165
+ animation-name: enter;
2166
+ animation-duration: 150ms;
2167
+ --tw-enter-opacity: initial;
2168
+ --tw-enter-scale: initial;
2169
+ --tw-enter-rotate: initial;
2170
+ --tw-enter-translate-x: initial;
2171
+ --tw-enter-translate-y: initial;
2171
2172
  }
2172
2173
 
2173
- .rdrWeekDays{
2174
- display: flex;
2174
+ .data-\[state\=closed\]\:animate-out[data-state=closed] {
2175
+ animation-name: exit;
2176
+ animation-duration: 150ms;
2177
+ --tw-exit-opacity: initial;
2178
+ --tw-exit-scale: initial;
2179
+ --tw-exit-rotate: initial;
2180
+ --tw-exit-translate-x: initial;
2181
+ --tw-exit-translate-y: initial;
2175
2182
  }
2176
2183
 
2177
- .rdrWeekDay {
2178
- flex-basis: calc(100% / 7);
2179
- box-sizing: inherit;
2180
- text-align: center;
2184
+ .data-\[state\=closed\]\:fade-out-0[data-state=closed] {
2185
+ --tw-exit-opacity: 0;
2181
2186
  }
2182
2187
 
2183
- .rdrDays{
2184
- display: flex;
2185
- flex-wrap: wrap;
2188
+ .data-\[state\=open\]\:fade-in-0[data-state=open] {
2189
+ --tw-enter-opacity: 0;
2186
2190
  }
2187
2191
 
2188
- .rdrDateDisplayWrapper{}
2192
+ .data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
2193
+ --tw-exit-scale: .95;
2194
+ }
2189
2195
 
2190
- .rdrMonthName{}
2196
+ .data-\[state\=open\]\:zoom-in-95[data-state=open] {
2197
+ --tw-enter-scale: .95;
2198
+ }
2191
2199
 
2192
- .rdrInfiniteMonths{
2193
- overflow: auto;
2200
+ .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
2201
+ --tw-enter-translate-y: -0.5rem;
2194
2202
  }
2195
2203
 
2196
- .rdrDateRangeWrapper{
2197
- -webkit-user-select: none;
2198
- -moz-user-select: none;
2199
- user-select: none;
2204
+ .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
2205
+ --tw-enter-translate-x: 0.5rem;
2200
2206
  }
2201
2207
 
2202
- .rdrDateInput {
2203
- position: relative;
2208
+ .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
2209
+ --tw-enter-translate-x: -0.5rem;
2204
2210
  }
2205
2211
 
2206
- .rdrDateInput input {
2207
- outline: none;
2212
+ .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
2213
+ --tw-enter-translate-y: 0.5rem;
2214
+ }
2215
+
2216
+ @media (min-width: 640px) {
2217
+
2218
+ .sm\:flex-row {
2219
+ flex-direction: row;
2208
2220
  }
2209
2221
 
2210
- .rdrDateInput .rdrWarning {
2211
- position: absolute;
2212
- font-size: 1.6em;
2213
- line-height: 1.6em;
2214
- top: 0;
2215
- right: .25em;
2216
- color: #FF0000;
2222
+ .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
2223
+ --tw-space-x-reverse: 0;
2224
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
2225
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
2217
2226
  }
2218
2227
 
2219
- .rdrDay {
2220
- box-sizing: inherit;
2221
- width: calc(100% / 7);
2222
- position: relative;
2223
- font: inherit;
2224
- cursor: pointer;
2228
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
2229
+ --tw-space-y-reverse: 0;
2230
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
2231
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
2232
+ }
2225
2233
  }
2226
2234
 
2227
- .rdrDayNumber {
2228
- display: block;
2229
- position: relative;
2230
- }
2235
+ @media (min-width: 1024px) {
2231
2236
 
2232
- .rdrDayNumber span{
2233
- color: #1d2429;
2237
+ .lg\:flex {
2238
+ display: flex;
2234
2239
  }
2235
2240
 
2236
- .rdrDayDisabled {
2237
- cursor: not-allowed;
2238
- }
2239
-
2240
- @supports (-ms-ime-align: auto) {
2241
- .rdrDay {
2242
- flex-basis: 14.285% !important;
2241
+ .lg\:px-8 {
2242
+ padding-left: 2rem;
2243
+ padding-right: 2rem;
2243
2244
  }
2244
2245
  }
2245
2246
 
2246
- .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
2247
- pointer-events: none;
2247
+ .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
2248
+ border-top-right-radius: calc(var(--radius) - 2px);
2249
+ border-bottom-right-radius: calc(var(--radius) - 2px);
2248
2250
  }
2249
2251
 
2250
- .rdrInRange{}
2251
-
2252
- .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
2253
- pointer-events: none;
2252
+ .\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
2253
+ border-top-left-radius: calc(var(--radius) - 2px);
2254
+ border-bottom-left-radius: calc(var(--radius) - 2px);
2254
2255
  }
2255
2256
 
2256
- .rdrDayHovered{}
2257
-
2258
- .rdrDayActive{}
2259
-
2260
- .rdrDateRangePickerWrapper{
2261
- display: inline-flex;
2262
- -webkit-user-select: none;
2263
- -moz-user-select: none;
2264
- user-select: none;
2257
+ .\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
2258
+ border-radius: calc(var(--radius) - 2px);
2265
2259
  }
2266
2260
 
2267
- .rdrDefinedRangesWrapper{}
2268
-
2269
- .rdrStaticRanges{
2270
- display: flex;
2271
- flex-direction: column;
2261
+ .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
2262
+ background-color: hsl(var(--accent));
2272
2263
  }
2273
2264
 
2274
- .rdrStaticRange{
2275
- font-size: inherit;
2265
+ .first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
2266
+ border-top-left-radius: calc(var(--radius) - 2px);
2267
+ border-bottom-left-radius: calc(var(--radius) - 2px);
2276
2268
  }
2277
2269
 
2278
- .rdrStaticRangeLabel{}
2270
+ .last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
2271
+ border-top-right-radius: calc(var(--radius) - 2px);
2272
+ border-bottom-right-radius: calc(var(--radius) - 2px);
2273
+ }
2279
2274
 
2280
- .rdrInputRanges{}
2275
+ .\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
2276
+ background-color: hsl(var(--accent) / 0.5);
2277
+ }
2281
2278
 
2282
- .rdrInputRange{
2283
- display: flex;
2279
+ .\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
2280
+ border-top-right-radius: calc(var(--radius) - 2px);
2281
+ border-bottom-right-radius: calc(var(--radius) - 2px);
2284
2282
  }
2285
2283
 
2286
- .rdrInputRangeInput{}
2284
+ /*
2285
+ * Replace this with your own classes
2286
+ *
2287
+ * e.g.
2288
+ * .container {
2289
+ * }
2290
+ */