@economic/taco 0.0.1-alpha.1533 → 0.0.1-alpha.8

package/dist/index.css

@@ -16,7 +16,7 @@
     }
 
     body {
-        @apply bg-white text-black text-sm leading-relaxed h-screen;
+        @apply h-screen bg-white text-sm leading-relaxed text-black;
     }
 
     blockquote,
@@ -74,7 +74,7 @@
     }
 
     hr {
-        @apply bg-grey-light border-none flex h-px my-5;
+        @apply bg-grey-light my-5 flex h-px border-none;
     }
 
     h1,
@@ -87,24 +87,24 @@
     }
 
     h1 {
-        @apply text-3xl mb-6;
+        @apply mb-6 text-3xl;
     }
 
     h2 {
-        @apply text-2xl mb-2;
+        @apply mb-2 text-2xl;
     }
 
     h3 {
-        @apply text-xl mb-2;
+        @apply mb-2 text-xl;
     }
 
     h4 {
-        @apply text-base font-bold mb-1;
+        @apply mb-1 text-base font-bold;
     }
 
     h5,
     h6 {
-        @apply font-bold mb-1;
+        @apply mb-1 font-bold;
     }
 
     b,
@@ -155,14 +155,6 @@
     @apply max-h-full p-0;
 }
 
-[data-taco='button'] > [data-taco='icon'] {
-    @apply inline -ml-2 mr-1 -mt-2 -mb-2 pointer-events-none p-px;
-}
-
-[data-taco='button'] > span + [data-taco='icon'] {
-    @apply ml-1 -mr-2;
-}
-
 [data-taco='spinner'] svg circle {
     @apply flex;
     fill: transparent;
@@ -231,11 +223,56 @@
 }
 
 [data-taco='toast'] > div [data-taco='button'] {
-    @apply py-0 px-2 -mt-px;
+    @apply -mt-px py-0 px-2;
+}
+
+[data-taco='hanger'] a {
+    @apply text-grey underline;
+}
+
+[data-taco='hanger'] > *:last-child {
+    @apply mb-0;
+}
+
+.yt-dialog__drag::before,
+.yt-dialog__drag::after {
+    @apply bg-grey-dark absolute rounded;
+    content: '';
+    left: theme('spacing.1');
+    height: 2px;
+    width: calc(100% - (2 * theme('spacing.1')));
+}
+
+.yt-dialog__drag::before {
+    top: 3px;
+}
+
+.yt-dialog__drag::after {
+    bottom: 3px;
+}
+
+[data-taco='dialog'] *:last-child {
+    @apply mb-0;
+}
+
+[data-taco='group'] > [data-taco='badge'] + [data-taco='badge'] {
+    @apply ml-1;
+}
+
+[data-taco='group'] > *:not(:first-child):not([data-taco='hanger']) {
+    @apply ml-2;
+}
+
+[data-taco='button'] > [data-taco='icon'] {
+    @apply pointer-events-none -ml-2 mr-1 -mt-2 -mb-2 inline p-px;
+}
+
+[data-taco='button'] > span + [data-taco='icon'] {
+    @apply ml-1 -mr-2;
 }
 
 [data-taco='calendar'] .DayPicker-wrapper {
-    @apply relative flex-row select-none;
+    @apply relative select-none flex-row;
 }
 
 [data-taco='calendar'] .DayPicker-Months {
@@ -243,19 +280,19 @@
 }
 
 [data-taco='calendar'] .DayPicker-Month {
-    @apply flex flex-col m-0 border-collapse select-none;
+    @apply m-0 flex border-collapse select-none flex-col;
 }
 
 [data-taco='calendar'] .DayPicker-Weekdays {
-    @apply flex mt-2;
+    @apply mt-2 flex;
 }
 
 [data-taco='calendar'] .DayPicker-WeekdaysRow {
-    @apply flex justify-between w-full mb-2;
+    @apply mb-2 flex w-full justify-between;
 }
 
 [data-taco='calendar'] .DayPicker-Weekday {
-    @apply text-grey-darkest text-center uppercase flex-grow;
+    @apply text-grey-darkest flex-grow text-center uppercase;
 }
 
 [data-taco='calendar'] .DayPicker-Weekday abbr[title] {
@@ -267,11 +304,11 @@
 }
 
 [data-taco='calendar'] .DayPicker-Week {
-    @apply flex justify-between w-full;
+    @apply flex w-full justify-between;
 }
 
 [data-taco='calendar'] .DayPicker-Day {
-    @apply h-10 w-10 flex items-center justify-center cursor-pointer rounded-full;
+    @apply flex h-10 w-10 cursor-pointer items-center justify-center rounded-full;
 }
 
 [data-taco='calendar'] .DayPicker--interactionDisabled .DayPicker-Day {
@@ -283,7 +320,7 @@
 }
 
 [data-taco='calendar'] .DayPicker-TodayButton {
-    @apply text-blue border-none bg-transparent text-xs cursor-pointer;
+    @apply text-blue cursor-pointer border-none bg-transparent text-xs;
 }
 
 [data-taco='calendar'] .DayPicker-TodayButton:hover {
@@ -301,11 +338,11 @@
 }
 
 [data-taco='calendar'] .DayPicker-Day--disabled {
-    @apply text-grey-dark cursor-default w-4 pointer-events-none;
+    @apply text-grey-dark pointer-events-none w-4 cursor-default;
 }
 
 [data-taco='calendar'] .DayPicker-Day--disabled > span.dot {
-    @apply bg-grey rounded-full inline-block p-2;
+    @apply bg-grey inline-block rounded-full p-2;
 }
 
 [data-taco='calendar'] .icon:hover,
@@ -377,7 +414,7 @@
 }
 
 .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button {
-    @apply yt-transparent border-0 text-grey-darkest shadow-none;
+    @apply yt-transparent text-grey-darkest border-0 shadow-none;
 }
 
 .yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:hover,
@@ -395,41 +432,12 @@
     @apply border-blue;
 }
 
-.yt-dialog__drag::before,
-.yt-dialog__drag::after {
-    @apply absolute bg-grey-dark rounded;
-    content: '';
-    left: theme('spacing.1');
-    height: 2px;
-    width: calc(100% - (2 * theme('spacing.1')));
-}
-
-.yt-dialog__drag::before {
-    top: 3px;
-}
-
-.yt-dialog__drag::after {
-    bottom: 3px;
-}
-
-.yt-dialog *:last-child {
-    @apply mb-0;
-}
-
-[data-taco='group'] > [data-taco='badge'] + [data-taco='badge'] {
-    @apply ml-1;
-}
-
-[data-taco='group'] > *:not(:first-child):not([data-taco='hanger']) {
-    @apply ml-2;
-}
-
 .yt-form > [data-taco='button'] {
     @apply mr-3;
 }
 
 .yt-form.yt-form--horizontal > * {
-    @apply inline-flex mr-3;
+    @apply mr-3 inline-flex;
 }
 
 .yt-form.yt-form--horizontal > *:last-child {
@@ -440,21 +448,13 @@
     @apply mt-6;
 }
 
-[data-taco='hanger'] a {
-    @apply text-grey underline;
-}
-
-[data-taco='hanger'] > *:last-child {
-    @apply mb-0;
-}
-
 /* label inside label is invalid html, but the client is littered with it */
 [data-taco='label'] [data-taco='label'] {
     min-height: 0;
 }
 
 .yt-listbox {
-    @apply bg-white inline-flex relative w-full;
+    @apply relative inline-flex w-full bg-white;
 }
 
 .yt-listbox > input {
@@ -475,7 +475,7 @@
 }
 
 .yt-navigation__item .yt-navigation__item__prefix [data-taco='icon'] {
-    @apply text-xs -mt-1 -mb-1;
+    @apply -mt-1 -mb-1 text-xs;
     margin-left: -0.375rem;
     margin-right: 0.15rem;
 }
@@ -509,15 +509,15 @@
 }
 
 [data-taco='select'] > button.yt-input {
-    @apply inline-flex items-center relative w-full px-0;
+    @apply relative inline-flex w-full items-center px-0;
 }
 
 [data-taco='select'] > button.yt-input > span:first-child {
-    @apply flex-grow text-left pl-2 truncate;
+    @apply flex-grow truncate pl-2 text-left;
 }
 
 [data-taco='select'] > button.yt-input .yt-icon {
-    @apply pointer-events-none text-black;
+    @apply pointer-events-none;
 }
 
 [data-taco='select'] > button.yt-input[disabled] .yt-icon {
@@ -528,19 +528,13 @@
     @apply cursor-not-allowed;
 }
 
-[data-taco='select']:hover > button.yt-input .yt-icon,
-[data-taco='select'] > button.yt-input:hover .yt-icon,
-[data-taco='select'] > button.yt-input .yt-icon:hover {
-    @apply text-grey-darkest;
-}
-
 [data-taco='select'] > button.yt-input[aria-expanded='true'],
 [data-taco='select'] > button.yt-input[aria-expanded='true']:hover {
     @apply border-blue;
 }
 
 [data-taco='select'] > button.yt-input[aria-expanded='true'] + .yt-listbox {
-    @apply flex mt-1;
+    @apply mt-1 flex;
 }
 
 [data-taco='select'] [role='dialog'] {
@@ -584,81 +578,73 @@
 }
 
 .yt-table:focus {
-    @apply rounded-sm yt-focus;
+    @apply yt-focus rounded-sm;
 }
 
 /* rows */
 .yt-table__row {
-    @apply border-b border-grey-light flex;
+    @apply border-grey-light flex border-b;
     min-height: 2.5rem;
 }
 
 /* cells */
 .yt-table__cell {
-    @apply flex-1 p-2 align-middle text-center truncate;
+    @apply flex-1 truncate p-2 text-center align-middle;
 }
 
-.yt-table__cell.yt-table__cell__actions {
-    @apply flex justify-end px-1 overflow-visible;
-}
-
-.yt-table__cell > .yt-button,
-.yt-table__cell .yt-group > .yt-button {
-    @apply -mt-1 -mb-1;
-}
-
-.yt-table__cell.yt-table__cell__actions .yt-group > *:not(:first-child):not(.yt-hanger):not(.yt-menu) {
-    @apply ml-0;
+.yt-table__cell > [data-taco='button'],
+.yt-table__cell > [data-taco='icon-button'] {
+    @apply -mt-1 -mb-1 flex;
 }
 
 .yt-table__cell.yt-table__cell--draggable {
     @apply flex-col px-0;
 }
 
-.yt-table__cell.yt-table__cell--draggable .yt-icon {
-    @apply cursor-grab invisible text-grey-darkest;
+.yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
+    @apply text-grey-darkest invisible cursor-grab;
     width: 20px;
 }
 
-.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable .yt-icon {
+.yt-table__row.yt-table__row--dragging .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
     @apply text-white;
 }
 
-.yt-table__cell.yt-table__cell--draggable .yt-icon:active {
+.yt-table__cell.yt-table__cell--draggable [data-taco='icon']:active {
     @apply cursor-grabbing;
 }
 
-.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable .yt-icon {
+.yt-table__row:hover .yt-table__cell.yt-table__cell--draggable [data-taco='icon'] {
     @apply visible;
 }
 
 /* head */
 .yt-table__head .yt-table__row {
-    @apply border-t-0 border-b-2 font-bold h-auto w-full select-none;
+    @apply h-auto w-full select-none border-t-0 border-b-2 font-bold;
 }
 
 .yt-table__head .yt-table__head__group {
-    @apply flex flex-wrap flex-1;
+    @apply flex flex-1 flex-wrap;
 }
 
 .yt-table__head .yt-table__head__group .yt-table__cell.yt-table__cell__group {
-    @apply border-b border-grey-light;
+    @apply border-grey-light border-b;
     flex-basis: 100%;
 }
 
 .yt-table__head .yt-table__head__group + .yt-table__head__group {
-    @apply border-l border-grey-light;
+    @apply border-grey-light border-l;
 }
 
 .yt-table__head .yt-table__cell {
-    @apply flex text-grey-darkest justify-center;
+    @apply text-grey-darkest flex justify-center;
 }
 
 .yt-table__head .yt-table__cell > span {
     @apply truncate;
 }
 
-.yt-table__head .yt-table__cell > .yt-icon {
+.yt-table__head .yt-table__cell > [data-taco='icon'] {
     @apply flex-shrink-0;
 }
 
@@ -667,7 +653,7 @@
 }
 
 .yt-table__head .yt-table__cell.yt-table__cell__group + .yt-table__cell__group {
-    @apply border-l-2 border-grey-light;
+    @apply border-grey-light border-l-2;
 }
 
 .yt-table__head .yt-table__cell:not(.yt-table__cell--disable-sort) {
@@ -723,39 +709,30 @@
     overflow-wrap: normal;
 }
 
-.yt-table__cell .yt-label {
-    @apply text-transparent pb-0 -my-2;
+.yt-table__cell [data-taco='label'] {
+    @apply -my-2 pb-0 text-transparent;
     min-height: theme('spacing.10');
 }
 
-.yt-table__cell .yt-label > *:not(.yt-label__message) {
+.yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
     @apply mt-1;
 }
 
-.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell .yt-label > *:not(.yt-label__message) {
+.yt-table__body .yt-table__row.yt-table__row--editing .yt-table__cell [data-taco='label'] > *:not([data-taco='label']__message) {
     @apply -mt-5;
 }
 
-.yt-table__cell .yt-label > .yt-label__message {
+.yt-table__cell [data-taco='label'] > [data-taco='label']__message {
     @apply mb-1;
 }
 
 /* drag */
 #yt-table__drag__placeholder {
-    @apply bg-blue text-white rounded font-bold p-4 flex w-3/12;
-}
-
-/* cell alignment */
-.yt-table__cell.yt-table__cell--align-left {
-    @apply justify-start text-left;
-}
-
-.yt-table__cell.yt-table__cell--align-right {
-    @apply justify-end text-right;
+    @apply bg-blue flex w-3/12 rounded p-4 font-bold text-white;
 }
 
 .yt-tabs .yt-tab__list[aria-orientation='vertical'] {
-    @apply flex-col m-0 mr-4 border-0 border-r;
+    @apply m-0 mr-4 flex-col border-0 border-r;
 }
 
 .yt-tabs .yt-tab__list .yt-tab[aria-selected='true'] {

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import './css/global.css';
 export * from './components/Accordion/Accordion';
+export * from './components/Backdrop/Backdrop';
 export * from './components/Badge/Badge';
 export * from './components/Banner/Banner';
 export * from './components/Button/Button';

package/dist/primitives/Button.d.ts

@@ -6,8 +6,6 @@ declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAn
     href?: string;
     /** Provides target for buttons being used as a link */
     target?: '_self' | '_blank' | '_parent' | '_top';
-    /** A tooltip to show when hovering over the button */
-    tooltip?: string;
 };
 declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
     /** Content should be a text */
@@ -16,7 +14,5 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
     href?: string | undefined;
     /** Provides target for buttons being used as a link */
     target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    /** A tooltip to show when hovering over the button */
-    tooltip?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export { Button, ButtonProps };