@uxf/ui 1.0.0-beta.99 → 1.0.1

package/css/input.css

@@ -1,205 +0,0 @@
-.uxf-input {
-    @apply rounded-md bg-white shadow-sm;
-
-    :root .light & {
-        @apply bg-white text-gray-900;
-    }
-
-    :root .dark & {
-        @apply bg-gray-800 text-gray-300;
-    }
-
-    &__element {
-        @apply bg-transparent outline-none placeholder:font-light;
-
-        :root .light & {
-            @apply placeholder:text-gray-400;
-        }
-
-        :root .dark & {
-            @apply placeholder:text-gray-400;
-        }
-    }
-
-    &__left-element {
-        @apply mr-2;
-    }
-
-    &__right-element {
-        @apply ml-2;
-    }
-
-    &__left-addon,
-    &__right-addon {
-        @apply border px-2 bg-gray-100;
-
-        :root .light & {
-            @apply border-gray-200;
-        }
-
-        :root .dark & {
-            @apply border-gray-700;
-        }
-    }
-
-    &__left-addon {
-        @apply rounded-l-md border-r-0;
-    }
-
-    &__right-addon {
-        @apply rounded-r-md border-l-0;
-    }
-
-    &__wrapper {
-        @apply rounded-md border px-4;
-
-        :root .light & {
-            @apply border-gray-200;
-        }
-
-        :root .dark & {
-            @apply border-gray-700;
-        }
-    }
-
-    &--size-small {
-        height: theme("inputSize.sm");
-
-        .uxf-input__wrapper {
-            @apply text-sm;
-        }
-    }
-
-    &--size-default {
-        height: theme("inputSize.default");
-
-        .uxf-input__wrapper {
-            @apply text-base;
-        }
-    }
-
-    &--size-large {
-        height: theme("inputSize.lg");
-
-        .uxf-input__wrapper {
-            @apply text-lg;
-        }
-    }
-
-    &--has-right-addon {
-        .uxf-input__wrapper {
-            @apply rounded-r-none;
-        }
-    }
-
-    &--has-left-addon {
-        .uxf-input__wrapper {
-            @apply rounded-l-none;
-        }
-    }
-
-    &.is-focused {
-        .uxf-input__wrapper {
-            @apply ring-1 ring-inset ring-offset-0;
-
-            :root .light & {
-                @apply border-primary-500 ring-primary-500;
-            }
-
-            :root .dark & {
-                @apply border-primary-500 ring-primary-500;
-            }
-        }
-    }
-
-    &.is-disabled {
-        @apply cursor-not-allowed;
-
-        :root .light & {
-            @apply bg-gray-100;
-        }
-
-        :root .dark & {
-            @apply bg-gray-800;
-        }
-
-        .uxf-input__element {
-            @apply cursor-not-allowed;
-        }
-    }
-
-    &.is-readonly {
-        @apply cursor-text;
-
-        .uxf-input__element {
-            @apply cursor-text;
-        }
-
-        .uxf-input__wrapper {
-            @apply ring-0;
-        }
-
-        .uxf-input__wrapper,
-        .uxf-input__left-addon,
-        .uxf-input__right-addon {
-            :root .light & {
-                @apply border-gray-300;
-            }
-
-            :root .dark & {
-                @apply border-gray-500;
-            }
-        }
-    }
-
-    &.is-invalid {
-        &.is-focused {
-            .uxf-input__wrapper {
-                :root .light & {
-                    @apply ring-error-500 border-error-500;
-                }
-
-                :root .dark & {
-                    @apply ring-error-500 border-error-500;
-                }
-            }
-        }
-
-        .uxf-input__wrapper {
-            @apply border-error-500 placeholder:text-error-300;
-
-            .uxf-input__left-element,
-            .uxf-input__right-element {
-                @apply text-error-500;
-            }
-
-            .uxf-input__element {
-                :root .light & {
-                    @apply border-gray-300 text-error-500;
-                }
-
-                :root .dark & {
-                    @apply border-gray-500 text-error-500;
-                }
-            }
-        }
-    }
-
-    input:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-            margin: 1px 0;
-
-            :root .dark & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
-                caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
-            }
-
-            :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
-            }
-        }
-    }
-}

package/css/input.old.css

@@ -1,193 +0,0 @@
-.uxf-input {
-    @apply rounded-lg text-base;
-
-    :root .light & {
-        @apply bg-gray-100 text-gray-900;
-    }
-
-    :root .dark & {
-        @apply bg-gray-800 text-gray-300;
-    }
-
-    &__element {
-        @apply bg-transparent outline-none;
-
-        :root .light & {
-            @apply placeholder:text-gray-400;
-        }
-
-        :root .dark & {
-            @apply placeholder:text-gray-400;
-        }
-    }
-
-    &__left-element {
-        @apply mr-2;
-    }
-
-    &__right-element {
-        @apply ml-2;
-    }
-
-    &__left-addon,
-    &__right-addon {
-        @apply border px-2;
-
-        :root .light & {
-            @apply border-gray-200;
-        }
-
-        :root .dark & {
-            @apply border-gray-700;
-        }
-    }
-
-    &__left-addon {
-        @apply rounded-l-lg border-r-0;
-    }
-
-    &__right-addon {
-        @apply rounded-r-lg border-l-0;
-    }
-
-    &__wrapper {
-        @apply rounded-lg border px-4 text-base;
-
-        :root .light & {
-            @apply border-gray-200;
-        }
-
-        :root .dark & {
-            @apply border-gray-700;
-        }
-    }
-
-    &--size-default {
-        .uxf-input__wrapper {
-            @apply h-12;
-        }
-    }
-
-    &--size-large {
-        .uxf-input__wrapper {
-            @apply h-14 text-lg;
-        }
-    }
-
-    &--has-right-addon {
-        .uxf-input__wrapper {
-            @apply rounded-r-none;
-        }
-    }
-
-    &--has-left-addon {
-        .uxf-input__wrapper {
-            @apply rounded-l-none;
-        }
-    }
-
-    &.is-focused {
-        .uxf-input__wrapper {
-            @apply ring-1 ring-inset ring-offset-0;
-
-            :root .light & {
-                @apply border-primary-500 ring-primary-500;
-            }
-
-            :root .dark & {
-                @apply border-primary-500 ring-primary-500;
-            }
-        }
-    }
-
-    &.is-disabled {
-        @apply cursor-not-allowed;
-
-        :root .light & {
-            @apply bg-gray-300;
-        }
-
-        :root .dark & {
-            @apply bg-gray-600;
-        }
-
-        .uxf-input__element {
-            @apply cursor-not-allowed;
-        }
-    }
-
-    &.is-readonly {
-        @apply cursor-text;
-
-        .uxf-input__element {
-            @apply cursor-text;
-        }
-
-        .uxf-input__wrapper {
-            @apply ring-0;
-        }
-
-        .uxf-input__wrapper,
-        .uxf-input__left-addon,
-        .uxf-input__right-addon {
-            :root .light & {
-                @apply border-gray-300;
-            }
-
-            :root .dark & {
-                @apply border-gray-500;
-            }
-        }
-    }
-
-    &.is-invalid {
-        &.is-focused {
-            .uxf-input__wrapper {
-                :root .light & {
-                    @apply ring-error-500 border-error-500;
-                }
-
-                :root .dark & {
-                    @apply ring-error-500 border-error-500;
-                }
-            }
-        }
-
-        .uxf-input__wrapper {
-            @apply border-error-500 placeholder:text-error-300;
-
-            .uxf-input__left-element,
-            .uxf-input__right-element {
-                @apply text-error-500;
-            }
-
-            .uxf-input__element {
-                :root .light & {
-                    @apply border-gray-300 text-error-500;
-                }
-
-                :root .dark & {
-                    @apply border-gray-500 text-error-500;
-                }
-            }
-        }
-    }
-
-    input:-webkit-autofill {
-        &,
-        &:hover,
-        &:focus {
-            margin: 1px 0;
-
-            :root .dark & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
-                caret-color: white;
-                -webkit-text-fill-color: theme("colors.gray.300");
-            }
-
-            :root .light & {
-                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
-            }
-        }
-    }
-}

package/css/label.css

@@ -1,15 +0,0 @@
-.uxf-label {
-    @apply mb-0.5 block text-sm font-medium;
-
-    :root .light & {
-        @apply text-gray-900;
-    }
-
-    :root .dark & {
-        @apply text-white;
-    }
-
-    &--hidden {
-        @apply sr-only;
-    }
-}

package/css/layout.css

@@ -1,47 +0,0 @@
-body {
-    @apply bg-neutral-100;
-}
-
-.uxf-layout {
-    &__content {
-        @apply flex flex-1 flex-col md:pl-64 pt-14;
-    }
-}
-
-.uxf-app-bar {
-    @apply fixed w-full top-0 left-0 flex items-center bg-primary-600 h-14;
-
-    &__left-container {
-        @apply flex items-center grow;
-    }
-
-    &__menu-button {
-        @apply px-5 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden;
-    }
-
-    &__logo {
-        @apply md:px-2;
-    }
-}
-
-.uxf-sidebar {
-    @apply hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col bg-white;
-
-    &__content {
-        @apply flex flex-grow flex-col overflow-y-auto border-r border-r-gray-200 pt-14;
-    }
-
-    &__logo {
-        @apply flex justify-center;
-    }
-}
-
-.uxf-drawer {
-    &__content {
-        @apply flex flex-grow flex-col overflow-y-auto border-r border-r-gray-200;
-    }
-
-    &__logo {
-        @apply flex justify-center;
-    }
-}

package/css/list-item.css

@@ -1,29 +0,0 @@
-.uxf-list-item {
-    @apply flex justify-between grow py-4 px-5 min-h-[64px] space-x-3 transition-opacity is-hoverable:opacity-75
-        outline-none relative before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
-
-    &__inner {
-        @apply w-full;
-    }
-
-    &__end-elements-wrapper,
-    &__end-icon-wrapper {
-        @apply shrink-0;
-    }
-
-    :root .light & {
-        @apply focus-visible:before:border-primary-500;
-
-        .uxf-list-item__end-icon-wrapper {
-            @apply text-gray-300;
-        }
-    }
-
-    :root .dark & {
-        @apply focus-visible:before:border-primary-500;
-
-        .uxf-list-item__end-icon-wrapper {
-            @apply text-gray-600;
-        }
-    }
-}

package/css/loader.css

@@ -1,11 +0,0 @@
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.uxf-loader {
-    animation: spinner 1.2s linear infinite;
-
-    @apply inline-block h-12 w-12 rounded-full border-r-4 border-t-4 border-r-transparent border-t-current;
-}

package/css/multi-combobox.css

@@ -1,72 +0,0 @@
-.uxf-multi-combobox {
-    @apply relative;
-
-    &__button {
-        @apply relative flex flex-row w-full cursor-default flex-wrap items-center rounded-lg pl-4 pr-8 pb-2 text-left
-            outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
-
-        .uxf-icon {
-            @apply absolute top-3 right-4 h-4;
-        }
-
-        :root .light & {
-            @apply bg-white text-lightHigh before:border-gray-200;
-
-            .is-empty {
-                @apply text-lightLow;
-            }
-        }
-
-        :root .dark & {
-            @apply bg-gray-800 text-darkHigh before:border-gray-700;
-
-            .is-empty {
-                @apply text-darkLow;
-            }
-        }
-
-        &.is-focused {
-            @apply ring-2;
-
-            :root .light & {
-                @apply before:border-none ring-primary-500;
-            }
-
-            :root .dark & {
-                @apply ring-primary-500;
-            }
-        }
-
-        &.is-invalid {
-            @apply ring-1;
-
-            :root .light & {
-                @apply ring-error-500 text-error-500;
-
-                .uxf-combobox__input {
-                    @apply placeholder:text-error-500;
-                }
-            }
-
-            :root .dark & {
-                @apply ring-error-500 text-error-500;
-
-                .uxf-combobox__input {
-                    @apply placeholder:text-error-500;
-                }
-            }
-        }
-    }
-
-    &__input {
-        @apply bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none;
-
-        :root .light & {
-            @apply placeholder:text-lightLow;
-        }
-
-        :root .dark & {
-            @apply placeholder:text-darkLow;
-        }
-    }
-}

package/css/pagination.css

@@ -1,28 +0,0 @@
-.uxf-pagination {
-    @apply isolate inline-flex rounded-md -space-x-px;
-
-    &__button {
-        @apply relative inline-flex items-center border border-gray-300 bg-white px-4 py-2
-            text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 cursor-pointer h-10;
-
-        &.is-selected {
-            @apply z-10 bg-indigo-50 border border-primary-500 text-primary-600;
-        }
-
-        &.is-first {
-            @apply rounded-l-md;
-        }
-
-        &.is-last {
-            @apply rounded-r-md;
-        }
-
-        &.is-disabled {
-            @apply text-neutral-300 hover:bg-white cursor-not-allowed;
-        }
-
-        &.is-ellipsis {
-            @apply text-neutral-300 hover:bg-white pointer-events-none;
-        }
-    }
-}

package/css/paper.css

@@ -1,3 +0,0 @@
-.uxf-paper {
-    @apply bg-white rounded-lg shadow-paper;
-}