@economic/taco 0.0.1-alpha.1543 → 0.0.2-alpha.0

package/dist/index.css

@@ -155,14 +155,6 @@
     @apply max-h-full p-0;
 }
 
-[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='spinner'] svg circle {
     @apply flex;
     fill: transparent;
@@ -234,6 +226,51 @@
     @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 select-none flex-row;
 }
@@ -320,20 +357,11 @@
     @apply font-semibold;
 }
 
-[data-taco='scrollable-list'][disabled] {
-    @apply pointer-events-none;
-}
-
-[data-taco='scrollable-list'][disabled],
-[data-taco='scrollable-list'][readonly] {
-    @apply cursor-not-allowed;
-}
-
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
-    @apply pl-4 border-b-2 border-grey-light; /* Listbox max-height is dependant on this border-bottom-width value! */
+    @apply border-grey-light border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
 
-[data-taco='scrollable-list'] li [data-taco='icon'] {
+[data-taco='scrollable-list'] li > [data-taco='icon'] {
     @apply mr-2;
 }
 
@@ -369,61 +397,22 @@
 [data-taco='scrollable-list'] li.yt-list__empty,
 [data-taco='scrollable-list'] li.yt-list__empty:hover,
 [data-taco='scrollable-list'] li.yt-list__empty:focus {
-    @apply bg-white text-grey-darkest italic overflow-hidden;
+    @apply text-grey-darkest overflow-hidden bg-white italic;
 }
 
 [data-taco='scrollable-list'] li.yt-list__empty [data-taco='spinner'] {
     @apply mr-2 mt-2 h-5 w-5 opacity-75;
 }
 
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button {
-    @apply yt-transparent text-grey-darkest border-0 shadow-none;
-}
-
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:hover,
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:active,
-.yt-combobox.yt-combobox--inline .yt-input__container > .yt-button:focus {
-    @apply yt-transparent text-black;
-}
-
-.yt-combobox [role='dialog'] {
+[data-taco='combobox'] [role='dialog'] {
     @apply z-50;
 }
 
-.yt-combobox > [aria-expanded='true'] + [role='dialog'] > ul,
-.yt-combobox > [aria-expanded='true'] + [role='dialog'] > ul:hover {
+[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul,
+[data-taco='combobox'] > [aria-expanded='true'] + [role='dialog'] > ul:hover {
     @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;
 }
@@ -440,35 +429,11 @@
     @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 relative inline-flex w-full bg-white;
-}
-
-.yt-listbox > input {
-    display: none;
-}
-
-.yt-listbox [data-taco='scrollable-list'] {
-    max-height: calc(12rem + 2px); /* (6 * option height) + listbox border */
-}
-
-.yt-listbox [data-taco='scrollable-list'].yt-list--multiselect {
-    max-height: calc(12rem + 2px + 2px); /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
-}
-
 .yt-navigation__item a,
 .yt-navigation__item .yt-navigation__item__postfix {
     @apply text-black;
@@ -508,49 +473,6 @@
     @apply border-white text-white;
 }
 
-[data-taco='select'] > button.yt-input {
-    @apply relative inline-flex w-full items-center px-0;
-}
-
-[data-taco='select'] > button.yt-input > span:first-child {
-    @apply flex-grow truncate pl-2 text-left;
-}
-
-[data-taco='select'] > button.yt-input .yt-icon {
-    @apply pointer-events-none text-black;
-}
-
-[data-taco='select'] > button.yt-input[disabled] .yt-icon {
-    @apply text-grey-dark;
-}
-
-[data-taco='select'][data-taco='select']--readonly > button.yt-input {
-    @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 mt-1 flex;
-}
-
-[data-taco='select'] [role='dialog'] {
-    @apply z-50;
-}
-
-[data-taco='select'] .yt-list {
-    max-width: theme('spacing.96');
-}
-
 .yt-toast:hover [data-taco='progress-bar'] {
     animation-play-state: paused;
 }
@@ -584,81 +506,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 +581,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,35 +637,26 @@
     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'] {

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 };