@casinogate/ui 2.0.2 → 2.0.4
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/assets/css/root.css +330 -0
- package/dist/atomic/icons/calendar.svelte +13 -0
- package/dist/atomic/icons/calendar.svelte.d.ts +3 -0
- package/dist/atomic/icons/exports.d.ts +1 -0
- package/dist/atomic/icons/exports.js +1 -0
- package/dist/composed/calendar/api/format-caption.d.ts +5 -0
- package/dist/composed/calendar/api/format-caption.js +13 -0
- package/dist/composed/calendar/api/index.d.ts +1 -0
- package/dist/composed/calendar/api/index.js +1 -0
- package/dist/composed/calendar/index.d.ts +2 -0
- package/dist/composed/calendar/index.js +1 -0
- package/dist/composed/calendar/root/calendar.root.svelte +91 -0
- package/dist/composed/calendar/root/calendar.root.svelte.d.ts +4 -0
- package/dist/composed/calendar/root/index.d.ts +1 -0
- package/dist/composed/calendar/root/index.js +1 -0
- package/dist/composed/calendar/types.d.ts +32 -0
- package/dist/composed/calendar/types.js +1 -0
- package/dist/composed/date-picker/index.d.ts +2 -0
- package/dist/composed/date-picker/index.js +1 -0
- package/dist/composed/date-picker/root/date-picker.root.svelte +144 -0
- package/dist/composed/date-picker/root/date-picker.root.svelte.d.ts +4 -0
- package/dist/composed/date-picker/root/index.d.ts +1 -0
- package/dist/composed/date-picker/root/index.js +1 -0
- package/dist/composed/date-picker/types.d.ts +45 -0
- package/dist/composed/date-picker/types.js +1 -0
- package/dist/composed/index.d.ts +2 -0
- package/dist/composed/index.js +2 -0
- package/dist/internal/utils/tailwindcss.d.ts +1 -1
- package/dist/primitives/calendar/components/calendar.body.svelte +20 -0
- package/dist/primitives/calendar/components/calendar.body.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.cell.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.cell.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.day.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.day.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.grid-body.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.grid-body.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.grid-head.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.grid-head.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.grid-row.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.grid-row.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.grid.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.grid.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.head-cell.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.head-cell.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.header.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.header.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.heading.svelte +10 -0
- package/dist/primitives/calendar/components/calendar.heading.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.month-select.svelte +37 -0
- package/dist/primitives/calendar/components/calendar.month-select.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.next-button.svelte +26 -0
- package/dist/primitives/calendar/components/calendar.next-button.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.prev-button.svelte +26 -0
- package/dist/primitives/calendar/components/calendar.prev-button.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.root.svelte +35 -0
- package/dist/primitives/calendar/components/calendar.root.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/calendar.year-select.svelte +37 -0
- package/dist/primitives/calendar/components/calendar.year-select.svelte.d.ts +4 -0
- package/dist/primitives/calendar/components/index.d.ts +15 -0
- package/dist/primitives/calendar/components/index.js +15 -0
- package/dist/primitives/calendar/index.d.ts +2 -0
- package/dist/primitives/calendar/index.js +2 -0
- package/dist/primitives/calendar/styles.d.ts +59 -0
- package/dist/primitives/calendar/styles.js +72 -0
- package/dist/primitives/calendar/types.d.ts +30 -0
- package/dist/primitives/calendar/types.js +1 -0
- package/dist/primitives/date-picker/components/date-picker.calendar.svelte +10 -0
- package/dist/primitives/date-picker/components/date-picker.calendar.svelte.d.ts +4 -0
- package/dist/primitives/date-picker/components/date-picker.content.svelte +28 -0
- package/dist/primitives/date-picker/components/date-picker.content.svelte.d.ts +4 -0
- package/dist/primitives/date-picker/components/date-picker.input.svelte +28 -0
- package/dist/primitives/date-picker/components/date-picker.input.svelte.d.ts +4 -0
- package/dist/primitives/date-picker/components/date-picker.portal.svelte +10 -0
- package/dist/primitives/date-picker/components/date-picker.portal.svelte.d.ts +3 -0
- package/dist/primitives/date-picker/components/date-picker.root.svelte +21 -0
- package/dist/primitives/date-picker/components/date-picker.root.svelte.d.ts +4 -0
- package/dist/primitives/date-picker/components/date-picker.segment.svelte +10 -0
- package/dist/primitives/date-picker/components/date-picker.segment.svelte.d.ts +4 -0
- package/dist/primitives/date-picker/components/date-picker.trigger.svelte +61 -0
- package/dist/primitives/date-picker/components/date-picker.trigger.svelte.d.ts +4 -0
- package/dist/primitives/date-picker/components/index.d.ts +7 -0
- package/dist/primitives/date-picker/components/index.js +7 -0
- package/dist/primitives/date-picker/index.d.ts +2 -0
- package/dist/primitives/date-picker/index.js +2 -0
- package/dist/primitives/date-picker/styles.d.ts +171 -0
- package/dist/primitives/date-picker/styles.js +143 -0
- package/dist/primitives/date-picker/types.d.ts +14 -0
- package/dist/primitives/date-picker/types.js +1 -0
- package/dist/primitives/index.d.ts +5 -3
- package/dist/primitives/index.js +5 -3
- package/dist/primitives/select/styles.js +3 -0
- package/package.json +22 -1
package/dist/assets/css/root.css
CHANGED
|
@@ -267,6 +267,9 @@
|
|
|
267
267
|
.cgui\:my-4 {
|
|
268
268
|
margin-block: calc(var(--cgui-spacing) * 4);
|
|
269
269
|
}
|
|
270
|
+
.cgui\:ms-2 {
|
|
271
|
+
margin-inline-start: calc(var(--cgui-spacing) * 2);
|
|
272
|
+
}
|
|
270
273
|
.cgui\:ms-auto {
|
|
271
274
|
margin-inline-start: auto;
|
|
272
275
|
}
|
|
@@ -330,6 +333,9 @@
|
|
|
330
333
|
.cgui\:flex {
|
|
331
334
|
display: flex;
|
|
332
335
|
}
|
|
336
|
+
.cgui\:grid {
|
|
337
|
+
display: grid;
|
|
338
|
+
}
|
|
333
339
|
.cgui\:hidden {
|
|
334
340
|
display: none;
|
|
335
341
|
}
|
|
@@ -514,6 +520,9 @@
|
|
|
514
520
|
.cgui\:max-h-\(--max-content-height\) {
|
|
515
521
|
max-height: var(--max-content-height);
|
|
516
522
|
}
|
|
523
|
+
.cgui\:max-h-40 {
|
|
524
|
+
max-height: calc(var(--cgui-spacing) * 40);
|
|
525
|
+
}
|
|
517
526
|
.cgui\:max-h-50 {
|
|
518
527
|
max-height: calc(var(--cgui-spacing) * 50);
|
|
519
528
|
}
|
|
@@ -586,6 +595,9 @@
|
|
|
586
595
|
.cgui\:w-9 {
|
|
587
596
|
width: calc(var(--cgui-spacing) * 9);
|
|
588
597
|
}
|
|
598
|
+
.cgui\:w-10 {
|
|
599
|
+
width: calc(var(--cgui-spacing) * 10);
|
|
600
|
+
}
|
|
589
601
|
.cgui\:w-11 {
|
|
590
602
|
width: calc(var(--cgui-spacing) * 11);
|
|
591
603
|
}
|
|
@@ -700,6 +712,9 @@
|
|
|
700
712
|
.cgui\:min-w-15 {
|
|
701
713
|
min-width: calc(var(--cgui-spacing) * 15);
|
|
702
714
|
}
|
|
715
|
+
.cgui\:min-w-28 {
|
|
716
|
+
min-width: calc(var(--cgui-spacing) * 28);
|
|
717
|
+
}
|
|
703
718
|
.cgui\:min-w-35 {
|
|
704
719
|
min-width: calc(var(--cgui-spacing) * 35);
|
|
705
720
|
}
|
|
@@ -721,6 +736,9 @@
|
|
|
721
736
|
.cgui\:flex-1 {
|
|
722
737
|
flex: 1;
|
|
723
738
|
}
|
|
739
|
+
.cgui\:shrink {
|
|
740
|
+
flex-shrink: 1;
|
|
741
|
+
}
|
|
724
742
|
.cgui\:shrink-0 {
|
|
725
743
|
flex-shrink: 0;
|
|
726
744
|
}
|
|
@@ -733,6 +751,9 @@
|
|
|
733
751
|
.cgui\:table-fixed {
|
|
734
752
|
table-layout: fixed;
|
|
735
753
|
}
|
|
754
|
+
.cgui\:border-collapse {
|
|
755
|
+
border-collapse: collapse;
|
|
756
|
+
}
|
|
736
757
|
.cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
|
|
737
758
|
transform-origin: var(--bits-dropdown-menu-content-transform-origin);
|
|
738
759
|
}
|
|
@@ -823,6 +844,9 @@
|
|
|
823
844
|
.cgui\:list-none {
|
|
824
845
|
list-style-type: none;
|
|
825
846
|
}
|
|
847
|
+
.cgui\:grid-cols-1 {
|
|
848
|
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
849
|
+
}
|
|
826
850
|
.cgui\:flex-col {
|
|
827
851
|
flex-direction: column;
|
|
828
852
|
}
|
|
@@ -1191,6 +1215,9 @@
|
|
|
1191
1215
|
.cgui\:p-0 {
|
|
1192
1216
|
padding: calc(var(--cgui-spacing) * 0);
|
|
1193
1217
|
}
|
|
1218
|
+
.cgui\:p-0\! {
|
|
1219
|
+
padding: calc(var(--cgui-spacing) * 0) !important;
|
|
1220
|
+
}
|
|
1194
1221
|
.cgui\:p-0\.5 {
|
|
1195
1222
|
padding: calc(var(--cgui-spacing) * 0.5);
|
|
1196
1223
|
}
|
|
@@ -1218,6 +1245,9 @@
|
|
|
1218
1245
|
.cgui\:px-0 {
|
|
1219
1246
|
padding-inline: calc(var(--cgui-spacing) * 0);
|
|
1220
1247
|
}
|
|
1248
|
+
.cgui\:px-0\.5 {
|
|
1249
|
+
padding-inline: calc(var(--cgui-spacing) * 0.5);
|
|
1250
|
+
}
|
|
1221
1251
|
.cgui\:px-1 {
|
|
1222
1252
|
padding-inline: calc(var(--cgui-spacing) * 1);
|
|
1223
1253
|
}
|
|
@@ -1275,6 +1305,9 @@
|
|
|
1275
1305
|
.cgui\:pt-2 {
|
|
1276
1306
|
padding-top: calc(var(--cgui-spacing) * 2);
|
|
1277
1307
|
}
|
|
1308
|
+
.cgui\:pt-3 {
|
|
1309
|
+
padding-top: calc(var(--cgui-spacing) * 3);
|
|
1310
|
+
}
|
|
1278
1311
|
.cgui\:pt-4 {
|
|
1279
1312
|
padding-top: calc(var(--cgui-spacing) * 4);
|
|
1280
1313
|
}
|
|
@@ -1357,6 +1390,9 @@
|
|
|
1357
1390
|
font-size: var(--cgui-text-xs);
|
|
1358
1391
|
line-height: var(--tw-leading, var(--cgui-text-xs--line-height));
|
|
1359
1392
|
}
|
|
1393
|
+
.cgui\:text-\[10px\] {
|
|
1394
|
+
font-size: 10px;
|
|
1395
|
+
}
|
|
1360
1396
|
.cgui\:leading-none {
|
|
1361
1397
|
--tw-leading: 1;
|
|
1362
1398
|
line-height: 1;
|
|
@@ -1661,18 +1697,56 @@
|
|
|
1661
1697
|
top: calc(var(--cgui-spacing) * 0);
|
|
1662
1698
|
}
|
|
1663
1699
|
}
|
|
1700
|
+
.cgui\:before\:top-1 {
|
|
1701
|
+
&::before {
|
|
1702
|
+
content: var(--tw-content);
|
|
1703
|
+
top: calc(var(--cgui-spacing) * 1);
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
.cgui\:before\:left-1\/2 {
|
|
1707
|
+
&::before {
|
|
1708
|
+
content: var(--tw-content);
|
|
1709
|
+
left: calc(1 / 2 * 100%);
|
|
1710
|
+
}
|
|
1711
|
+
}
|
|
1664
1712
|
.cgui\:before\:block {
|
|
1665
1713
|
&::before {
|
|
1666
1714
|
content: var(--tw-content);
|
|
1667
1715
|
display: block;
|
|
1668
1716
|
}
|
|
1669
1717
|
}
|
|
1718
|
+
.cgui\:before\:hidden {
|
|
1719
|
+
&::before {
|
|
1720
|
+
content: var(--tw-content);
|
|
1721
|
+
display: none;
|
|
1722
|
+
}
|
|
1723
|
+
}
|
|
1724
|
+
.cgui\:before\:size-1 {
|
|
1725
|
+
&::before {
|
|
1726
|
+
content: var(--tw-content);
|
|
1727
|
+
width: calc(var(--cgui-spacing) * 1);
|
|
1728
|
+
height: calc(var(--cgui-spacing) * 1);
|
|
1729
|
+
}
|
|
1730
|
+
}
|
|
1670
1731
|
.cgui\:before\:h-1\.5 {
|
|
1671
1732
|
&::before {
|
|
1672
1733
|
content: var(--tw-content);
|
|
1673
1734
|
height: calc(var(--cgui-spacing) * 1.5);
|
|
1674
1735
|
}
|
|
1675
1736
|
}
|
|
1737
|
+
.cgui\:before\:-translate-x-1\/2 {
|
|
1738
|
+
&::before {
|
|
1739
|
+
content: var(--tw-content);
|
|
1740
|
+
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
|
|
1741
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1742
|
+
}
|
|
1743
|
+
}
|
|
1744
|
+
.cgui\:before\:rounded-full {
|
|
1745
|
+
&::before {
|
|
1746
|
+
content: var(--tw-content);
|
|
1747
|
+
border-radius: calc(infinity * 1px);
|
|
1748
|
+
}
|
|
1749
|
+
}
|
|
1676
1750
|
.cgui\:before\:bg-state-error {
|
|
1677
1751
|
&::before {
|
|
1678
1752
|
content: var(--tw-content);
|
|
@@ -1697,6 +1771,12 @@
|
|
|
1697
1771
|
background-color: var(--cg-ui-color-state-warning);
|
|
1698
1772
|
}
|
|
1699
1773
|
}
|
|
1774
|
+
.cgui\:before\:bg-stroke-primary {
|
|
1775
|
+
&::before {
|
|
1776
|
+
content: var(--tw-content);
|
|
1777
|
+
background-color: var(--cg-ui-color-stroke-primary);
|
|
1778
|
+
}
|
|
1779
|
+
}
|
|
1700
1780
|
.cgui\:before\:content-\[\"\"\] {
|
|
1701
1781
|
&::before {
|
|
1702
1782
|
--tw-content: "";
|
|
@@ -1708,6 +1788,27 @@
|
|
|
1708
1788
|
display: none;
|
|
1709
1789
|
}
|
|
1710
1790
|
}
|
|
1791
|
+
.cgui\:focus-within\:border-stroke-focus {
|
|
1792
|
+
&:focus-within {
|
|
1793
|
+
border-color: var(--cg-ui-color-stroke-focus);
|
|
1794
|
+
}
|
|
1795
|
+
}
|
|
1796
|
+
.cgui\:focus-within\:border-b-stroke-focus {
|
|
1797
|
+
&:focus-within {
|
|
1798
|
+
border-bottom-color: var(--cg-ui-color-stroke-focus);
|
|
1799
|
+
}
|
|
1800
|
+
}
|
|
1801
|
+
.cgui\:focus-within\:ring-1 {
|
|
1802
|
+
&:focus-within {
|
|
1803
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1804
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1805
|
+
}
|
|
1806
|
+
}
|
|
1807
|
+
.cgui\:focus-within\:ring-stroke-focus {
|
|
1808
|
+
&:focus-within {
|
|
1809
|
+
--tw-ring-color: var(--cg-ui-color-stroke-focus);
|
|
1810
|
+
}
|
|
1811
|
+
}
|
|
1711
1812
|
.cgui\:hover\:bg-primary-60 {
|
|
1712
1813
|
&:hover {
|
|
1713
1814
|
@media (hover: hover) {
|
|
@@ -1764,6 +1865,16 @@
|
|
|
1764
1865
|
}
|
|
1765
1866
|
}
|
|
1766
1867
|
}
|
|
1868
|
+
.cgui\:focus\:bg-surface-primary {
|
|
1869
|
+
&:focus {
|
|
1870
|
+
background-color: var(--cg-ui-color-surface-primary);
|
|
1871
|
+
}
|
|
1872
|
+
}
|
|
1873
|
+
.cgui\:focus\:text-fg-white {
|
|
1874
|
+
&:focus {
|
|
1875
|
+
color: var(--cg-ui-color-fg-white);
|
|
1876
|
+
}
|
|
1877
|
+
}
|
|
1767
1878
|
.cgui\:focus\:ring-stroke-default {
|
|
1768
1879
|
&:focus {
|
|
1769
1880
|
--tw-ring-color: var(--cg-ui-color-stroke-default);
|
|
@@ -1796,6 +1907,14 @@
|
|
|
1796
1907
|
--tw-ring-color: var(--cg-ui-color-stroke-primary);
|
|
1797
1908
|
}
|
|
1798
1909
|
}
|
|
1910
|
+
.cgui\:focus-visible\:ring-stroke-primary\/50 {
|
|
1911
|
+
&:focus-visible {
|
|
1912
|
+
--tw-ring-color: var(--cg-ui-color-stroke-primary);
|
|
1913
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1914
|
+
--tw-ring-color: color-mix(in oklab, var(--cg-ui-color-stroke-primary) 50%, transparent);
|
|
1915
|
+
}
|
|
1916
|
+
}
|
|
1917
|
+
}
|
|
1799
1918
|
.cgui\:focus-visible\:ring-offset-0 {
|
|
1800
1919
|
&:focus-visible {
|
|
1801
1920
|
--tw-ring-offset-width: 0px;
|
|
@@ -1910,11 +2029,32 @@
|
|
|
1910
2029
|
scale: 0.98;
|
|
1911
2030
|
}
|
|
1912
2031
|
}
|
|
2032
|
+
.cgui\:data-disabled\:pointer-events-none {
|
|
2033
|
+
&[data-disabled] {
|
|
2034
|
+
pointer-events: none;
|
|
2035
|
+
}
|
|
2036
|
+
}
|
|
1913
2037
|
.cgui\:data-disabled\:cursor-not-allowed {
|
|
1914
2038
|
&[data-disabled] {
|
|
1915
2039
|
cursor: not-allowed;
|
|
1916
2040
|
}
|
|
1917
2041
|
}
|
|
2042
|
+
.cgui\:data-disabled\:text-fg-semilight\/30 {
|
|
2043
|
+
&[data-disabled] {
|
|
2044
|
+
color: var(--cg-ui-color-fg-semilight);
|
|
2045
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2046
|
+
color: color-mix(in oklab, var(--cg-ui-color-fg-semilight) 30%, transparent);
|
|
2047
|
+
}
|
|
2048
|
+
}
|
|
2049
|
+
}
|
|
2050
|
+
.cgui\:data-disabled\:text-fg-semilight\/40 {
|
|
2051
|
+
&[data-disabled] {
|
|
2052
|
+
color: var(--cg-ui-color-fg-semilight);
|
|
2053
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2054
|
+
color: color-mix(in oklab, var(--cg-ui-color-fg-semilight) 40%, transparent);
|
|
2055
|
+
}
|
|
2056
|
+
}
|
|
2057
|
+
}
|
|
1918
2058
|
.cgui\:data-disabled\:opacity-50 {
|
|
1919
2059
|
&[data-disabled] {
|
|
1920
2060
|
opacity: 50%;
|
|
@@ -1930,11 +2070,75 @@
|
|
|
1930
2070
|
background-color: transparent;
|
|
1931
2071
|
}
|
|
1932
2072
|
}
|
|
2073
|
+
.cgui\:data-invalid\:border-stroke-error {
|
|
2074
|
+
&[data-invalid] {
|
|
2075
|
+
border-color: var(--cg-ui-color-stroke-error);
|
|
2076
|
+
}
|
|
2077
|
+
}
|
|
2078
|
+
.cgui\:data-invalid\:text-fg-error {
|
|
2079
|
+
&[data-invalid] {
|
|
2080
|
+
color: var(--cg-ui-color-fg-error);
|
|
2081
|
+
}
|
|
2082
|
+
}
|
|
2083
|
+
.cgui\:data-invalid\:ring-stroke-error {
|
|
2084
|
+
&[data-invalid] {
|
|
2085
|
+
--tw-ring-color: var(--cg-ui-color-stroke-error);
|
|
2086
|
+
}
|
|
2087
|
+
}
|
|
2088
|
+
.cgui\:data-outside-month\:pointer-events-none {
|
|
2089
|
+
&[data-outside-month] {
|
|
2090
|
+
pointer-events: none;
|
|
2091
|
+
}
|
|
2092
|
+
}
|
|
2093
|
+
.cgui\:data-selected\:bg-surface-primary {
|
|
2094
|
+
&[data-selected] {
|
|
2095
|
+
background-color: var(--cg-ui-color-surface-primary);
|
|
2096
|
+
}
|
|
2097
|
+
}
|
|
2098
|
+
.cgui\:data-selected\:font-medium {
|
|
2099
|
+
&[data-selected] {
|
|
2100
|
+
--tw-font-weight: var(--cgui-font-weight-medium);
|
|
2101
|
+
font-weight: var(--cgui-font-weight-medium);
|
|
2102
|
+
}
|
|
2103
|
+
}
|
|
1933
2104
|
.cgui\:data-selected\:text-fg-primary {
|
|
1934
2105
|
&[data-selected] {
|
|
1935
2106
|
color: var(--cg-ui-color-fg-primary);
|
|
1936
2107
|
}
|
|
1937
2108
|
}
|
|
2109
|
+
.cgui\:data-selected\:text-fg-white {
|
|
2110
|
+
&[data-selected] {
|
|
2111
|
+
color: var(--cg-ui-color-fg-white);
|
|
2112
|
+
}
|
|
2113
|
+
}
|
|
2114
|
+
.cgui\:data-today\:before\:block {
|
|
2115
|
+
&[data-today] {
|
|
2116
|
+
&::before {
|
|
2117
|
+
content: var(--tw-content);
|
|
2118
|
+
display: block;
|
|
2119
|
+
}
|
|
2120
|
+
}
|
|
2121
|
+
}
|
|
2122
|
+
.cgui\:data-today\:data-selected\:before\:bg-surface-light {
|
|
2123
|
+
&[data-today] {
|
|
2124
|
+
&[data-selected] {
|
|
2125
|
+
&::before {
|
|
2126
|
+
content: var(--tw-content);
|
|
2127
|
+
background-color: var(--cg-ui-color-surface-light);
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
}
|
|
2131
|
+
}
|
|
2132
|
+
.cgui\:data-unavailable\:text-fg-semilight {
|
|
2133
|
+
&[data-unavailable] {
|
|
2134
|
+
color: var(--cg-ui-color-fg-semilight);
|
|
2135
|
+
}
|
|
2136
|
+
}
|
|
2137
|
+
.cgui\:data-unavailable\:line-through {
|
|
2138
|
+
&[data-unavailable] {
|
|
2139
|
+
text-decoration-line: line-through;
|
|
2140
|
+
}
|
|
2141
|
+
}
|
|
1938
2142
|
.cgui\:data-\[active\]\:bg-surface-dark {
|
|
1939
2143
|
&[data-active] {
|
|
1940
2144
|
background-color: var(--cg-ui-color-surface-dark);
|
|
@@ -2121,6 +2325,14 @@
|
|
|
2121
2325
|
color: var(--cg-ui-color-fg-regular);
|
|
2122
2326
|
}
|
|
2123
2327
|
}
|
|
2328
|
+
.cgui\:data-\[placeholder\]\:text-fg-regular\/60 {
|
|
2329
|
+
&[data-placeholder] {
|
|
2330
|
+
color: var(--cg-ui-color-fg-regular);
|
|
2331
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2332
|
+
color: color-mix(in oklab, var(--cg-ui-color-fg-regular) 60%, transparent);
|
|
2333
|
+
}
|
|
2334
|
+
}
|
|
2335
|
+
}
|
|
2124
2336
|
.cgui\:data-\[placeholder\]\:text-fg-regular\/70 {
|
|
2125
2337
|
&[data-placeholder] {
|
|
2126
2338
|
color: var(--cg-ui-color-fg-regular);
|
|
@@ -2129,6 +2341,16 @@
|
|
|
2129
2341
|
}
|
|
2130
2342
|
}
|
|
2131
2343
|
}
|
|
2344
|
+
.cgui\:data-\[segment\=literal\]\:pointer-events-none {
|
|
2345
|
+
&[data-segment="literal"] {
|
|
2346
|
+
pointer-events: none;
|
|
2347
|
+
}
|
|
2348
|
+
}
|
|
2349
|
+
.cgui\:data-\[segment\=literal\]\:text-fg-semilight {
|
|
2350
|
+
&[data-segment="literal"] {
|
|
2351
|
+
color: var(--cg-ui-color-fg-semilight);
|
|
2352
|
+
}
|
|
2353
|
+
}
|
|
2132
2354
|
.cgui\:data-\[selected\=\"\"\]\:border-stroke-primary {
|
|
2133
2355
|
&[data-selected=""] {
|
|
2134
2356
|
border-color: var(--cg-ui-color-stroke-primary);
|
|
@@ -2439,6 +2661,16 @@
|
|
|
2439
2661
|
border-bottom-left-radius: calc(var(--cg-ui-number-md) * 1px);
|
|
2440
2662
|
}
|
|
2441
2663
|
}
|
|
2664
|
+
.cgui\:md\:grid-cols-2 {
|
|
2665
|
+
@media (width >= 48rem) {
|
|
2666
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
2667
|
+
}
|
|
2668
|
+
}
|
|
2669
|
+
.cgui\:xl\:grid-cols-3 {
|
|
2670
|
+
@media (width >= 80rem) {
|
|
2671
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
2672
|
+
}
|
|
2673
|
+
}
|
|
2442
2674
|
.cgui\:scrollbar-hover\:scrollbar-thumb-surface-regular\/60 {
|
|
2443
2675
|
&::-webkit-scrollbar-thumb:hover {
|
|
2444
2676
|
--tw-scrollbar-thumb: var(--cg-ui-color-surface-regular);
|
|
@@ -2634,6 +2866,12 @@
|
|
|
2634
2866
|
height: calc(var(--cgui-spacing) * 4.5);
|
|
2635
2867
|
}
|
|
2636
2868
|
}
|
|
2869
|
+
.cgui\:\[\&_svg\]\:size-5 {
|
|
2870
|
+
& svg {
|
|
2871
|
+
width: calc(var(--cgui-spacing) * 5);
|
|
2872
|
+
height: calc(var(--cgui-spacing) * 5);
|
|
2873
|
+
}
|
|
2874
|
+
}
|
|
2637
2875
|
.cgui\:\[\&_svg\]\:size-6 {
|
|
2638
2876
|
& svg {
|
|
2639
2877
|
width: calc(var(--cgui-spacing) * 6);
|
|
@@ -2843,6 +3081,98 @@
|
|
|
2843
3081
|
height: 80%;
|
|
2844
3082
|
}
|
|
2845
3083
|
}
|
|
3084
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:ms-auto\! {
|
|
3085
|
+
[data-slot=date-picker-input] & {
|
|
3086
|
+
margin-inline-start: auto !important;
|
|
3087
|
+
}
|
|
3088
|
+
}
|
|
3089
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:min-h-0\! {
|
|
3090
|
+
[data-slot=date-picker-input] & {
|
|
3091
|
+
min-height: calc(var(--cgui-spacing) * 0) !important;
|
|
3092
|
+
}
|
|
3093
|
+
}
|
|
3094
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:w-auto\! {
|
|
3095
|
+
[data-slot=date-picker-input] & {
|
|
3096
|
+
width: auto !important;
|
|
3097
|
+
}
|
|
3098
|
+
}
|
|
3099
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:cursor-pointer {
|
|
3100
|
+
[data-slot=date-picker-input] & {
|
|
3101
|
+
cursor: pointer;
|
|
3102
|
+
}
|
|
3103
|
+
}
|
|
3104
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:rounded-none\! {
|
|
3105
|
+
[data-slot=date-picker-input] & {
|
|
3106
|
+
border-radius: 0 !important;
|
|
3107
|
+
}
|
|
3108
|
+
}
|
|
3109
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:border-0\! {
|
|
3110
|
+
[data-slot=date-picker-input] & {
|
|
3111
|
+
border-style: var(--tw-border-style) !important;
|
|
3112
|
+
border-width: 0px !important;
|
|
3113
|
+
}
|
|
3114
|
+
}
|
|
3115
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:bg-transparent\! {
|
|
3116
|
+
[data-slot=date-picker-input] & {
|
|
3117
|
+
background-color: transparent !important;
|
|
3118
|
+
}
|
|
3119
|
+
}
|
|
3120
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:py-0\! {
|
|
3121
|
+
[data-slot=date-picker-input] & {
|
|
3122
|
+
padding-block: calc(var(--cgui-spacing) * 0) !important;
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:pr-0 {
|
|
3126
|
+
[data-slot=date-picker-input] & {
|
|
3127
|
+
padding-right: calc(var(--cgui-spacing) * 0);
|
|
3128
|
+
}
|
|
3129
|
+
}
|
|
3130
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:pl-4 {
|
|
3131
|
+
[data-slot=date-picker-input] & {
|
|
3132
|
+
padding-left: calc(var(--cgui-spacing) * 4);
|
|
3133
|
+
}
|
|
3134
|
+
}
|
|
3135
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:text-fg-regular {
|
|
3136
|
+
[data-slot=date-picker-input] & {
|
|
3137
|
+
color: var(--cg-ui-color-fg-regular);
|
|
3138
|
+
}
|
|
3139
|
+
}
|
|
3140
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:shadow-none\! {
|
|
3141
|
+
[data-slot=date-picker-input] & {
|
|
3142
|
+
--tw-shadow: 0 0 #0000 !important;
|
|
3143
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
|
|
3144
|
+
}
|
|
3145
|
+
}
|
|
3146
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&\]\:hover\:text-fg-dark {
|
|
3147
|
+
[data-slot=date-picker-input] & {
|
|
3148
|
+
&:hover {
|
|
3149
|
+
@media (hover: hover) {
|
|
3150
|
+
color: var(--cg-ui-color-fg-dark);
|
|
3151
|
+
}
|
|
3152
|
+
}
|
|
3153
|
+
}
|
|
3154
|
+
}
|
|
3155
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&_\[data-slot\=chevron\]\]\:relative\! {
|
|
3156
|
+
[data-slot=date-picker-input] & [data-slot=chevron] {
|
|
3157
|
+
position: relative !important;
|
|
3158
|
+
}
|
|
3159
|
+
}
|
|
3160
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&_\[data-slot\=chevron\]\]\:top-auto\! {
|
|
3161
|
+
[data-slot=date-picker-input] & [data-slot=chevron] {
|
|
3162
|
+
top: auto !important;
|
|
3163
|
+
}
|
|
3164
|
+
}
|
|
3165
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&_\[data-slot\=chevron\]\]\:right-auto\! {
|
|
3166
|
+
[data-slot=date-picker-input] & [data-slot=chevron] {
|
|
3167
|
+
right: auto !important;
|
|
3168
|
+
}
|
|
3169
|
+
}
|
|
3170
|
+
.cgui\:\[\[data-slot\=date-picker-input\]_\&_\[data-slot\=chevron\]\]\:translate-y-0\! {
|
|
3171
|
+
[data-slot=date-picker-input] & [data-slot=chevron] {
|
|
3172
|
+
--tw-translate-y: calc(var(--cgui-spacing) * 0) !important;
|
|
3173
|
+
translate: var(--tw-translate-x) var(--tw-translate-y) !important;
|
|
3174
|
+
}
|
|
3175
|
+
}
|
|
2846
3176
|
}
|
|
2847
3177
|
@property --tw-animation-delay {
|
|
2848
3178
|
syntax: "*";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { IconProps } from './types.js';
|
|
3
|
+
|
|
4
|
+
let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {width} {height} {color} {...props}>
|
|
8
|
+
<path d="M0 0h24v24H0z" fill="none" />
|
|
9
|
+
<path
|
|
10
|
+
fill="currentColor"
|
|
11
|
+
d="M9 1v2h6V1h2v2h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1zm11 10H4v8h16zM7 5H4v4h16V5h-3v2h-2V5H9v2H7z"
|
|
12
|
+
/>
|
|
13
|
+
</svg>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as Asterisk } from './asterisk.svelte';
|
|
2
|
+
export { default as Calendar } from './calendar.svelte';
|
|
2
3
|
export { default as CaretDown } from './caret-down.svelte';
|
|
3
4
|
export { default as CaretUp } from './caret-up.svelte';
|
|
4
5
|
export { default as Check } from './check.svelte';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as Asterisk } from './asterisk.svelte';
|
|
2
|
+
export { default as Calendar } from './calendar.svelte';
|
|
2
3
|
export { default as CaretDown } from './caret-down.svelte';
|
|
3
4
|
export { default as CaretUp } from './caret-up.svelte';
|
|
4
5
|
export { default as Check } from './check.svelte';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type DateValue } from '@internationalized/date';
|
|
2
|
+
export type MonthCaptionFormat = 'short' | 'long' | 'narrow' | 'numeric' | '2-digit' | ((monthNumber: number) => string);
|
|
3
|
+
export type YearCaptionFormat = 'numeric' | '2-digit' | ((year: number) => string);
|
|
4
|
+
export declare function formatMonthCaption(date: DateValue, locale: string, monthFormat: MonthCaptionFormat): string;
|
|
5
|
+
export declare function formatYearCaption(date: DateValue, locale: string, yearFormat: YearCaptionFormat): string;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
|
|
2
|
+
export function formatMonthCaption(date, locale, monthFormat) {
|
|
3
|
+
const dateObj = date.toDate(getLocalTimeZone());
|
|
4
|
+
if (typeof monthFormat === 'function')
|
|
5
|
+
return monthFormat(dateObj.getMonth() + 1);
|
|
6
|
+
return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
|
|
7
|
+
}
|
|
8
|
+
export function formatYearCaption(date, locale, yearFormat) {
|
|
9
|
+
const dateObj = date.toDate(getLocalTimeZone());
|
|
10
|
+
if (typeof yearFormat === 'function')
|
|
11
|
+
return yearFormat(dateObj.getFullYear());
|
|
12
|
+
return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './format-caption.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './format-caption.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './root/index.js';
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Calendar as Primitive } from '../../../primitives/calendar/index.js';
|
|
3
|
+
import { formatMonthCaption, formatYearCaption } from '../api/index.js';
|
|
4
|
+
import type { CalendarProps } from '../types.js';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
value = $bindable(),
|
|
8
|
+
type,
|
|
9
|
+
captionLayout = 'label',
|
|
10
|
+
locale = 'en-US',
|
|
11
|
+
monthFormat = 'long',
|
|
12
|
+
yearFormat = 'numeric',
|
|
13
|
+
day: daySnippet,
|
|
14
|
+
class: className,
|
|
15
|
+
...restProps
|
|
16
|
+
}: CalendarProps = $props();
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<Primitive.Root
|
|
20
|
+
bind:value={value as never}
|
|
21
|
+
type={type as never}
|
|
22
|
+
{locale}
|
|
23
|
+
{monthFormat}
|
|
24
|
+
{yearFormat}
|
|
25
|
+
class={className}
|
|
26
|
+
{...restProps}
|
|
27
|
+
>
|
|
28
|
+
{#snippet children({ months, weekdays })}
|
|
29
|
+
{@const currentMonth = months[0]?.value}
|
|
30
|
+
<Primitive.Header>
|
|
31
|
+
<Primitive.PrevButton />
|
|
32
|
+
|
|
33
|
+
{#if captionLayout === 'dropdown'}
|
|
34
|
+
<div class="cgui:flex cgui:items-center cgui:gap-2">
|
|
35
|
+
<Primitive.MonthSelect />
|
|
36
|
+
<Primitive.YearSelect />
|
|
37
|
+
</div>
|
|
38
|
+
{:else if captionLayout === 'dropdown-months' && currentMonth}
|
|
39
|
+
<div class="cgui:flex cgui:items-center cgui:gap-2">
|
|
40
|
+
<Primitive.MonthSelect />
|
|
41
|
+
<span class="cgui:text-body cgui:text-fg-darkest cgui:font-medium">
|
|
42
|
+
{formatYearCaption(currentMonth, locale, yearFormat)}
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
{:else if captionLayout === 'dropdown-years' && currentMonth}
|
|
46
|
+
<div class="cgui:flex cgui:items-center cgui:gap-2">
|
|
47
|
+
<span class="cgui:text-body cgui:text-fg-darkest cgui:font-medium">
|
|
48
|
+
{formatMonthCaption(currentMonth, locale, monthFormat)}
|
|
49
|
+
</span>
|
|
50
|
+
<Primitive.YearSelect />
|
|
51
|
+
</div>
|
|
52
|
+
{:else}
|
|
53
|
+
<Primitive.Heading />
|
|
54
|
+
{/if}
|
|
55
|
+
|
|
56
|
+
<Primitive.NextButton />
|
|
57
|
+
</Primitive.Header>
|
|
58
|
+
|
|
59
|
+
<Primitive.Body>
|
|
60
|
+
{#each months as month, i (i)}
|
|
61
|
+
<Primitive.Grid>
|
|
62
|
+
<Primitive.GridHead>
|
|
63
|
+
<Primitive.GridRow>
|
|
64
|
+
{#each weekdays as weekday, j (j)}
|
|
65
|
+
<Primitive.HeadCell>{weekday}</Primitive.HeadCell>
|
|
66
|
+
{/each}
|
|
67
|
+
</Primitive.GridRow>
|
|
68
|
+
</Primitive.GridHead>
|
|
69
|
+
|
|
70
|
+
<Primitive.GridBody>
|
|
71
|
+
{#each month.weeks as weekDates, w (w)}
|
|
72
|
+
<Primitive.GridRow>
|
|
73
|
+
{#each weekDates as date, d (d)}
|
|
74
|
+
<Primitive.Cell {date} month={month.value}>
|
|
75
|
+
{#if daySnippet}
|
|
76
|
+
<Primitive.Day>
|
|
77
|
+
{@render daySnippet({ date, month: month.value })}
|
|
78
|
+
</Primitive.Day>
|
|
79
|
+
{:else}
|
|
80
|
+
<Primitive.Day>{date.day}</Primitive.Day>
|
|
81
|
+
{/if}
|
|
82
|
+
</Primitive.Cell>
|
|
83
|
+
{/each}
|
|
84
|
+
</Primitive.GridRow>
|
|
85
|
+
{/each}
|
|
86
|
+
</Primitive.GridBody>
|
|
87
|
+
</Primitive.Grid>
|
|
88
|
+
{/each}
|
|
89
|
+
</Primitive.Body>
|
|
90
|
+
{/snippet}
|
|
91
|
+
</Primitive.Root>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Calendar } from './calendar.root.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Calendar } from './calendar.root.svelte';
|