@uxf/ui 1.0.0-beta.99 → 10.0.0-beta.4

package/css/combobox.css

@@ -1,108 +0,0 @@
-.uxf-combobox {
-    @apply relative;
-
-    &__button {
-        height: theme("inputSize.default");
-
-        @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
-            outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
-
-        .uxf-icon {
-            @apply h-3;
-        }
-
-        :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 flex-grow 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;
-        }
-    }
-
-    &__button-icon {
-        @apply transition duration-300;
-
-        :root .light & {
-            @apply text-lightMedium;
-        }
-
-        :root .dark & {
-            @apply text-darkMedium;
-        }
-
-        &.is-open {
-            @apply -scale-y-100;
-        }
-    }
-
-    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/combobox.old.css

@@ -1,102 +0,0 @@
-.uxf-combobox {
-    @apply relative;
-
-    &__button {
-        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
-            outline-none before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
-
-        :root .light & {
-            @apply bg-gray-100 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 flex-grow 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;
-        }
-    }
-
-    &__button-icon {
-        @apply transition duration-300;
-
-        :root .light & {
-            @apply text-lightMedium;
-        }
-
-        :root .dark & {
-            @apply text-darkMedium;
-        }
-
-        &.is-open {
-            @apply -scale-y-100;
-        }
-    }
-
-    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/date-picker-input.css

@@ -1,135 +0,0 @@
-.uxf-date-picker-input {
-    @apply w-full rounded-lg text-base;
-
-    &__element {
-        @apply w-full bg-transparent outline-none;
-
-        :root .light & {
-            @apply text-gray-900 placeholder:text-gray-400;
-        }
-
-        :root .dark & {
-            @apply text-gray-300 placeholder:text-gray-400;
-        }
-    }
-
-    &__left-element {
-        @apply mr-2;
-    }
-
-    &__right-element {
-        @apply ml-2;
-    }
-
-    &__wrapper {
-        height: theme("inputSize.default");
-
-        @apply flex items-center w-full rounded-lg border px-4;
-
-        :root .light & {
-            @apply bg-gray-100 text-gray-900 border-gray-200;
-        }
-
-        :root .dark & {
-            @apply bg-gray-800 text-gray-300 border-gray-700;
-        }
-    }
-
-    &__popover {
-        @apply absolute left-0 z-dropdown max-w-md rounded-lg border p-2 shadow-xl overflow-y-auto;
-
-        :root .light & {
-            @apply bg-white border-gray-500;
-        }
-
-        :root .dark & {
-            @apply bg-gray-900 border-2 border-gray-700;
-        }
-    }
-
-    &--has-right-addon {
-        .uxf-date-picker-input__wrapper {
-            @apply rounded-r-none;
-        }
-    }
-
-    &.is-focused {
-        .uxf-date-picker-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;
-
-        .uxf-date-picker-input__wrapper {
-            :root .light & {
-                @apply text-gray-500 bg-gray-300;
-            }
-
-            :root .dark & {
-                @apply text-gray-500 bg-gray-600;
-            }
-        }
-
-        .uxf-date-picker-input__element {
-            @apply cursor-not-allowed;
-        }
-    }
-
-    &.is-readonly {
-        @apply cursor-text;
-
-        .uxf-date-picker-input__element {
-            @apply cursor-text;
-        }
-
-        .uxf-date-picker-input__wrapper {
-            @apply ring-0;
-
-            :root .light & {
-                @apply bg-gray-200 text-gray-700 border-gray-300;
-            }
-
-            :root .dark & {
-                @apply bg-gray-800 text-gray-300 border-gray-500;
-            }
-        }
-    }
-
-    &.is-invalid {
-        &.is-focused {
-            .uxf-date-picker-input__wrapper {
-                :root .light & {
-                    @apply ring-error-500 border-error-500;
-                }
-
-                :root .dark & {
-                    @apply ring-error-500 border-error-500;
-                }
-            }
-        }
-
-        .uxf-date-picker-input__wrapper {
-            @apply text-error-500 border-error-500 placeholder:text-error-300;
-
-            .uxf-date-picker-input__element {
-                :root .light & {
-                    @apply border-gray-300 text-error-500;
-                }
-
-                :root .dark & {
-                    @apply border-gray-500 text-error-500;
-                }
-            }
-        }
-    }
-}

package/css/dropdown.old.css

@@ -1,24 +0,0 @@
-.uxf-dropdown {
-    @apply absolute z-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
-        ring-opacity-5 focus:outline-none sm:text-sm;
-
-    &--bottom {
-        @apply mt-1;
-    }
-
-    &--top {
-        @apply -translate-y-1;
-    }
-
-    &__item {
-        @apply relative cursor-default select-none py-3 px-4 text-gray-800;
-
-        &.is-active {
-            @apply bg-primary-500 text-white;
-        }
-    }
-
-    &__items {
-        @apply absolute flex flex-col border border-black bg-white;
-    }
-}

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/select.css

@@ -1,72 +0,0 @@
-.uxf-select {
-    @apply relative;
-
-    &__button {
-        height: theme("inputSize.default");
-
-        @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
-            outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
-            before:rounded-lg;
-
-        .uxf-icon {
-            @apply h-3;
-        }
-
-        :root .light & {
-            @apply bg-white text-lightHigh before:border-gray-200 focus-visible:before:border-none
-                focus-visible:ring-primary-500;
-
-            .is-empty {
-                @apply text-lightLow;
-            }
-        }
-
-        :root .dark & {
-            @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
-
-            .is-empty {
-                @apply text-darkLow;
-            }
-        }
-
-        &.is-invalid {
-            @apply ring-1;
-
-            :root .light & {
-                @apply ring-error-500 text-error-500;
-
-                .is-empty {
-                    @apply text-error-500;
-                }
-            }
-
-            :root .dark & {
-                @apply ring-error-500 text-error-500;
-
-                .is-empty {
-                    @apply text-error-500;
-                }
-            }
-        }
-    }
-
-    &__button-text {
-        @apply flex-grow;
-    }
-
-    &__button-icon {
-        @apply transition duration-300;
-
-        :root .light & {
-            @apply text-lightMedium;
-        }
-
-        :root .dark & {
-            @apply text-darkMedium;
-        }
-
-        &.is-open {
-            @apply -scale-y-100;
-        }
-    }
-}

package/css/select.old.css

@@ -1,66 +0,0 @@
-.uxf-select {
-    @apply relative;
-
-    &__button {
-        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
-            outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
-            before:rounded-lg;
-
-        :root .light & {
-            @apply bg-gray-100 text-lightHigh before:border-gray-200 focus-visible:before:border-none
-                focus-visible:ring-primary-500;
-
-            .is-empty {
-                @apply text-lightLow;
-            }
-        }
-
-        :root .dark & {
-            @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
-
-            .is-empty {
-                @apply text-darkLow;
-            }
-        }
-
-        &.is-invalid {
-            @apply ring-1;
-
-            :root .light & {
-                @apply ring-error-500 text-error-500;
-
-                .is-empty {
-                    @apply text-error-500;
-                }
-            }
-
-            :root .dark & {
-                @apply ring-error-500 text-error-500;
-
-                .is-empty {
-                    @apply text-error-500;
-                }
-            }
-        }
-    }
-
-    &__button-text {
-        @apply flex-grow;
-    }
-
-    &__button-icon {
-        @apply transition duration-300;
-
-        :root .light & {
-            @apply text-lightMedium;
-        }
-
-        :root .dark & {
-            @apply text-darkMedium;
-        }
-
-        &.is-open {
-            @apply -scale-y-100;
-        }
-    }
-}