@economic/taco 2.27.3 → 2.28.0

package/dist/index.css

@@ -200,73 +200,35 @@
     @apply -mr-2 ml-0;
 }
 
-[data-taco='calendar'] .DayPicker-wrapper {
-    @apply relative select-none flex-row;
+[data-taco='calendar'] .rdp {
+    @apply select-none;
 }
-
-[data-taco='calendar'] .DayPicker-Months {
-    @apply flex flex-wrap justify-center;
-}
-
-[data-taco='calendar'] .DayPicker-Month {
-    @apply m-0 flex border-collapse select-none flex-col;
-}
-
-[data-taco='calendar'] .DayPicker-Weekdays {
-    @apply flex h-10 items-center;
-}
-
-[data-taco='calendar'] .DayPicker-WeekdaysRow {
-    @apply flex w-full justify-between;
+[data-taco='calendar'] .rdp-head {
+    @apply h-6;
 }
 
-[data-taco='calendar'] .DayPicker-Weekday {
-    @apply text-grey-700 flex-grow text-center uppercase;
+[data-taco='calendar'] .rdp-head_cell {
+    @apply text-grey-700 flex-grow text-center font-medium uppercase;
 }
 
-[data-taco='calendar'] .DayPicker-Weekday abbr[title] {
-    @apply no-underline;
+[data-taco='calendar'] .rdp-day {
+    @apply hover:wcag-grey-200 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
 }
 
-[data-taco='calendar'] .DayPicker-Body {
-    @apply flex flex-col;
-}
-
-[data-taco='calendar'] .DayPicker-Week {
-    @apply flex w-full justify-between;
-}
-
-[data-taco='calendar'] .DayPicker-Day {
-    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
-}
-
-[data-taco='calendar'] .DayPicker--interactionDisabled .DayPicker-Day {
-    @apply cursor-default;
-}
-
-[data-taco='calendar'] .DayPicker-Footer {
-    @apply pt-1 text-center;
-}
-
-[data-taco='calendar'] .DayPicker-TodayButton {
-    @apply cursor-pointer border-none bg-transparent text-xs text-blue-500;
+[data-taco='calendar'] .rdp-day_today {
+    @apply font-bold text-blue-500;
 }
 
-[data-taco='calendar'] .DayPicker-TodayButton:hover {
-    @apply text-blue-300;
+[data-taco='calendar'] .rdp-day_selected {
+    @apply wcag-grey-200;
 }
 
 /* Default modifiers */
-
-[data-taco='calendar'] .DayPicker-Day--today {
-    @apply font-bold text-blue-500;
-}
-
 [data-taco='calendar'] .DayPicker-Day--outside {
     @apply text-grey-300 cursor-default;
 }
 
-[data-taco='calendar'] .DayPicker-Day--disabled {
+[data-taco='calendar'] .rdp-day_disabled {
     @apply text-grey-300 pointer-events-none cursor-default;
 }
 
@@ -456,6 +418,56 @@
     @apply mb-0;
 }
 
+[data-taco='list'] {
+    @apply flex flex-col gap-y-2;
+}
+
+[data-taco='list-item'] {
+    @apply border-grey-300 flex w-full items-center gap-x-3 rounded-lg border bg-white p-3 text-left;
+}
+
+[data-taco='list-item']:focus-visible {
+        @apply yt-focus z-10;
+    }
+
+[data-taco='list-item']:not([aria-disabled]):hover {
+        @apply cursor-pointer bg-black/[0.08];
+    }
+
+[data-taco='list-item'][aria-disabled] {
+        @apply pointer-events-none opacity-50;
+    }
+
+[data-taco='list-item-collapsible']:has([data-taco='list-item']:focus-visible) {
+        @apply z-10;
+    }
+
+[data-taco='list-item-collapsible'] > [data-taco='list-item'][aria-expanded='true']:not(:focus-visible) {
+        @apply rounded-b-none border-b-transparent;
+    }
+
+[data-taco='list-item-collapsible'] > div {
+        @apply border-grey-300 rounded-b-lg border border-t-0 bg-white p-3;
+    }
+
+[data-taco='list-group'] {
+    @apply flex flex-col;
+}
+
+[data-taco='list-group'] > [data-taco='list-item']:not(:first-child):not(:focus-visible),
+    [data-taco='list-group'] > [data-taco='list-item-collapsible']:not(:first-child) [data-taco='list-item']:not(:focus-visible) {
+        @apply !rounded-t-none border-t-transparent;
+    }
+
+[data-taco='list-group'] > [data-taco='list-item']:not(:last-child):not(:focus-visible),
+    [data-taco='list-group'] > [data-taco='list-item-collapsible']:not(:last-child) [data-taco='list-item']:not(:focus-visible) {
+        @apply !rounded-b-none;
+    }
+
+[data-taco='list-group'] > [data-taco='list-item-collapsible']:not(:last-child) > div {
+        @apply rounded-b-none;
+    }
+
 .yt-navigation__item a,
 .yt-navigation__item .yt-navigation__item__postfix {
     @apply text-black;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export * from './components/HoverCard/HoverCard';
 export * from './components/Icon/Icon';
 export * from './components/IconButton/IconButton';
 export * from './components/Input/Input';
+export * from './components/List/List';
 export * from './components/Listbox/Listbox';
 export * from './components/Menu/Menu';
 export * from './components/ModeSwitch/ModeSwitch';