@uxf/ui 1.0.0-beta.13 → 1.0.0-beta.131

package/css/input.css

@@ -0,0 +1,241 @@
+.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;
+
+        :root .light & {
+            @apply border-gray-200 bg-gray-100;
+        }
+
+        :root .dark & {
+            @apply border-gray-700 bg-gray-800;
+        }
+
+        &--text {
+            @apply px-2;
+        }
+    }
+
+    &__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;
+        }
+    }
+
+    &__remove-button {
+        @apply px-1 py-0.5 mx-2 rounded-full;
+
+        :root .light & {
+            @apply bg-gray-300;
+        }
+
+        :root .dark & {
+            @apply bg-gray-600;
+        }
+
+        &__icon {
+            @apply w-2 h-3;
+
+            :root .light & {
+                @apply text-white;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium;
+            }
+        }
+    }
+
+    &--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 {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            margin: 1px;
+            transition: background-color 5000s ease-in-out 0s !important;
+
+            :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
+                caret-color: white;
+            }
+
+            :root .light & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
+            }
+        }
+    }
+}

package/css/input.old.css

@@ -0,0 +1,193 @@
+.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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,29 @@
+.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

@@ -0,0 +1,23 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-loader {
+    animation: spinner 1.2s linear infinite;
+
+    @apply inline-block rounded-full border-r-transparent border-t-current;
+
+    &--size-default {
+        @apply h-12 w-12 border-r-4 border-t-4;
+    }
+
+    &--size-lg {
+        @apply h-24 w-24 border-r-8 border-t-8;
+    }
+
+    &--size-sm {
+        @apply h-6 w-6 border-r-2 border-t-2;
+    }
+}

package/css/modal.css

@@ -0,0 +1,69 @@
+.uxf-modal {
+    position: relative;
+    z-index: theme("zIndex.modal");
+
+    &__backdrop {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background-color: rgb(0 0 0 / 75%);
+    }
+
+    &__wrapper {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow-y: auto;
+    }
+
+    &__body {
+        display: flex;
+        min-height: 100%;
+        align-items: flex-end;
+        justify-content: center;
+        padding-top: theme("spacing.4");
+
+        @media screen(sm) {
+            align-items: center;
+            padding: theme("spacing.4");
+        }
+    }
+
+    &__panel {
+        position: relative;
+        width: 100%;
+        border-top-left-radius: theme("borderRadius.2xl");
+        border-top-right-radius: theme("borderRadius.2xl");
+        overflow: hidden;
+
+        :root .light & {
+            background-color: theme("colors.white");
+            color: theme("colors.black");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.900");
+            color: theme("colors.white");
+        }
+
+        @media screen(sm) {
+            border-radius: theme("borderRadius.2xl");
+        }
+    }
+
+    &--width-sm .uxf-modal__panel {
+        max-width: theme("maxWidth.sm");
+    }
+
+    &--width-default .uxf-modal__panel {
+        max-width: theme("maxWidth.lg");
+    }
+
+    &--width-lg .uxf-modal__panel {
+        max-width: theme("maxWidth.3xl");
+    }
+}

package/css/multi-combobox.css

@@ -0,0 +1,99 @@
+.uxf-multi-combobox {
+    @apply relative;
+
+    &__button {
+        min-height: theme("inputSize.default");
+
+        @apply relative flex flex-row w-full cursor-default flex-wrap items-center rounded-lg pl-4 pr-8 pb-[7px]
+            text-left outline-none before:absolute before:inset-0 before:pointer-events-none before:border
+            before:rounded-lg;
+
+        &--with-popover {
+            @apply cursor-text pb-0;
+        }
+
+        .uxf-icon {
+            @apply absolute top-3.5 right-4 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,
+        &:focus-visible {
+            @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
+            shrink grow truncate;
+
+        &-placeholder {
+            &--with-popover {
+                @apply text-gray-400;
+            }
+        }
+
+        &--with-popover {
+            @apply my-1;
+        }
+
+        :root .light & {
+            @apply placeholder:text-lightLow;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-darkLow;
+        }
+    }
+
+    &__input-chip {
+        @apply mt-[7px] mr-2;
+    }
+
+    &__popover-panel {
+        @apply absolute top-0 left-0 z-10 w-full;
+    }
+}