@uxf/ui 1.0.1 → 10.0.0-beta.4

package/css/dropdown.css

@@ -0,0 +1,70 @@
+.uxf-dropdown {
+    @apply absolute z-dropdown w-full overflow-y-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black
+        ring-opacity-5 sm:text-sm;
+
+    outline: none;
+
+    :root .light & {
+        @apply bg-white text-gray-800;
+    }
+
+    :root .dark & {
+        @apply bg-gray-800 text-white;
+    }
+
+    &--bottom {
+        @apply mt-1;
+    }
+
+    &--top {
+        @apply -mt-1;
+    }
+
+    &__item {
+        @apply relative cursor-default select-none py-2 px-4 transition-colors;
+
+        &.is-selected {
+            @apply font-bold;
+        }
+
+        :root .light & {
+            @apply text-gray-800;
+
+            &.is-selected {
+                @apply bg-primary-100 font-bold;
+            }
+
+            &.is-active {
+                @apply bg-primary text-white;
+            }
+        }
+
+        :root .dark & {
+            @apply text-white;
+
+            &.is-selected {
+                @apply bg-primary-900;
+            }
+
+            &.is-active {
+                @apply bg-primary;
+            }
+        }
+    }
+
+    &__items {
+        @apply absolute flex flex-col border border-black;
+
+        :root .light & {
+            @apply bg-white;
+        }
+
+        :root .dark & {
+            @apply bg-gray-800;
+        }
+    }
+
+    &__empty-wrapper {
+        @apply py-2 px-4 text-gray-800;
+    }
+}

package/css/dropzone.css

@@ -0,0 +1,85 @@
+.uxf-dropzone {
+    @apply rounded-lg focus:outline-none;
+
+    &__input {
+        @apply sr-only;
+    }
+
+    &__label {
+        @apply flex flex-col space-y-2 items-center justify-center p-4 border-2 border-lightBorder border-dashed
+            rounded-inherit cursor-pointer text-lightLow text-[14px];
+
+        &__icon {
+            @apply h-6;
+        }
+
+        &.is-invalid {
+            @apply border-error;
+        }
+
+        &.is-disabled {
+            @apply bg-lightBorder/50 cursor-not-allowed;
+        }
+    }
+}
+
+.uxf-dropzone-list {
+    @apply space-y-2;
+
+    &__item-wrapper {
+        @apply flex flex-col items-start justify-start space-y-1;
+    }
+
+    &__item {
+        @apply overflow-auto border px-4 py-3 shadow-sm sm:rounded-md sm:px-6 flex w-full
+            items-center justify-between space-x-6;
+
+        :root .light & {
+            @apply border-lightBorder text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply border-gray-700 bg-gray-800 text-gray-200;
+        }
+
+        &.is-invalid {
+            :root .light & {
+                @apply border-error text-error;
+            }
+
+            :root .dark & {
+                @apply border-error text-error;
+            }
+        }
+
+        &__block {
+            @apply flex items-center space-x-4 min-w-0;
+
+            &:nth-child(2) {
+                @apply shrink-0;
+            }
+
+            &__icon {
+                @apply h-6;
+            }
+
+            &__file-name {
+                @apply truncate;
+            }
+
+            &__file-name-link {
+                @apply truncate hover:underline hover:underline-offset-2;
+            }
+
+            &__file-size {
+                @apply whitespace-nowrap shrink-0;
+            }
+
+            &__remove-button {
+                &__icon {
+                    @apply h-4;
+                }
+            }
+        }
+    }
+}

package/css/error-message.css

@@ -0,0 +1,3 @@
+.uxf-error-message {
+    @apply block text-error mt-1 text-right;
+}

package/css/file-input.css

@@ -0,0 +1,80 @@
+.uxf-file-input {
+    &__input {
+        @apply sr-only;
+    }
+
+    &__label {
+        @apply cursor-pointer flex overflow-auto;
+
+        &.is-loading {
+            @apply cursor-not-allowed;
+        }
+
+        &.is-focused {
+            @apply ring-2 ring-offset-2;
+
+            :root .light & {
+                @apply ring-primary;
+            }
+
+            :root .dark & {
+                @apply ring-primary;
+            }
+        }
+
+        &.is-invalid {
+            .uxf-file-input__label__button,
+            .uxf-file-input__label__wrapper {
+                :root .light & {
+                    @apply border-error text-error;
+                }
+
+                :root .dark & {
+                    @apply border-error text-error;
+                }
+            }
+        }
+
+        &__button {
+            @apply px-3;
+
+            :root .light & {
+                @apply border-gray-200 bg-gray-100;
+            }
+
+            :root .dark & {
+                @apply border-gray-700 bg-gray-800;
+            }
+
+            &:hover {
+                :root .light & {
+                    @apply bg-gray-200;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-700;
+                }
+            }
+        }
+
+        &__wrapper {
+            @apply flex items-center justify-between border px-3 rounded-r-md w-full min-w-0;
+
+            :root .light & {
+                @apply border-gray-200;
+            }
+
+            :root .dark & {
+                @apply border-gray-700;
+            }
+
+            &__file-name {
+                @apply truncate;
+            }
+
+            &__file-name-link {
+                @apply truncate hover:underline hover:underline-offset-2;
+            }
+        }
+    }
+}

package/css/flash-messages.css

@@ -0,0 +1,28 @@
+.uxf-flash-messages {
+    @apply pointer-events-none fixed inset-0 z-flashMessage flex items-end p-6;
+
+    &__list-wrapper {
+        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-end ml-auto;
+    }
+}
+
+.uxf-flash-message {
+    @apply pointer-events-auto rounded-lg transition px-5 py-4 shadow backdrop-blur text-sm min-w-[15rem]
+        is-hoverable:cursor-pointer;
+
+    &--success {
+        @apply bg-success is-hoverable:bg-success-700 text-white;
+    }
+
+    &--error {
+        @apply bg-error is-hoverable:bg-error-700 text-white;
+    }
+
+    &--warning {
+        @apply bg-warning is-hoverable:bg-warning-700 text-white;
+    }
+
+    &--info {
+        @apply bg-gray-500 is-hoverable:bg-gray-700 text-white;
+    }
+}

package/css/form-component.css

@@ -0,0 +1,7 @@
+.uxf-helper-text {
+    @apply mt-1 text-xs text-gray-500;
+
+    &.is-invalid {
+        @apply text-error;
+    }
+}

package/css/icon.css

@@ -0,0 +1,7 @@
+.uxf-icon {
+    @apply shrink-0 h-[var(--i-h)] w-[var(--i-w)];
+
+    & > use {
+        @apply pointer-events-none;
+    }
+}

package/css/image-gallery.css

@@ -0,0 +1,59 @@
+.uxf-image-gallery {
+    @apply fixed inset-0 top-0 bottom-0 z-50 flex flex-col bg-black bg-opacity-75 transition-opacity;
+
+    &__content {
+        @apply container mx-auto flex h-full flex-1 flex-col;
+    }
+
+    &__inner {
+        @apply relative flex flex-1 items-center justify-center;
+    }
+
+    &__image {
+        @apply absolute left-0 right-0 top-0 h-full w-full object-contain;
+    }
+
+    &__buttons {
+        @apply pointer-events-none absolute inset-0 flex items-center justify-between p-2;
+    }
+
+    &__button {
+        @apply pointer-events-auto rounded-full bg-black bg-opacity-50 p-3;
+
+        &-icon {
+            @apply h-8 w-8 text-white;
+        }
+    }
+
+    &__dots {
+        @apply mx-auto flex space-x-2 p-4;
+    }
+
+    &__dot {
+        @apply h-2 w-2 rounded-full bg-white;
+
+        &--active {
+            @apply bg-gray-500;
+        }
+    }
+
+    &__close-button-wrapper {
+        @apply flex justify-end;
+    }
+
+    &__close-button {
+        @apply bg-black bg-opacity-50 p-5;
+
+        &-icon {
+            @apply h-6 w-6 text-white;
+        }
+
+        &-text {
+            @apply sr-only;
+        }
+    }
+
+    &__custom-content {
+        @apply absolute right-0 bottom-0 bg-gray-600 text-white;
+    }
+}

package/css/input-basic.css

@@ -0,0 +1,18 @@
+.uxf-input {
+    @apply flex flex-row;
+}
+
+.uxf-input__wrapper {
+    @apply flex w-full flex-row;
+}
+
+.uxf-input__element {
+    @apply w-full;
+}
+
+.uxf-input__left-element,
+.uxf-input__right-element,
+.uxf-input__left-addon,
+.uxf-input__right-addon {
+    @apply flex flex-row items-center whitespace-nowrap;
+}

package/css/input-with-popover.css

@@ -0,0 +1,35 @@
+.uxf-input-with-popover {
+    &__panel {
+        @apply z-dropdown max-w-md rounded-md p-3 shadow-lg ring-1 ring-black ring-opacity-5;
+
+        overflow-y: auto;
+
+        &:focus {
+            outline: none;
+        }
+
+        :root .light & {
+            @apply bg-white text-gray-800;
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-white;
+        }
+
+        &--bottom {
+            @apply mt-1;
+        }
+
+        &--top {
+            @apply -mt-1;
+        }
+    }
+
+    &__trigger-element {
+        @apply w-5 h-5 rounded-sm;
+
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+    }
+}

package/css/input.css

@@ -0,0 +1,270 @@
+.uxf-input {
+    @apply rounded-md bg-white shadow-sm;
+
+    :root .light & {
+        @apply bg-white text-gray-900;
+    }
+
+    :root .dark & {
+        @apply bg-gray-900 text-gray-300;
+    }
+
+    &__element {
+        @apply bg-transparent placeholder:font-light;
+
+        appearance: none;
+        outline: none;
+
+        :root .light & {
+            @apply placeholder:text-gray-400;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-gray-400;
+
+            &[type="time"]::-webkit-calendar-picker-indicator {
+                filter: invert();
+            }
+        }
+    }
+
+    &__left-element,
+    &__right-element {
+        :root .light & {
+            @apply text-lightLow;
+        }
+
+        :root .dark & {
+            @apply text-darkLow;
+        }
+    }
+
+    &__left-element {
+        @apply mr-2;
+    }
+
+    &__right-element {
+        @apply ml-2 space-x-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-3;
+
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700;
+        }
+    }
+
+    &__remove-button {
+        @apply rounded-sm;
+
+        align-items: center;
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+
+        &-inner {
+            @apply w-3.5 h-3.5 rounded-full;
+
+            align-items: center;
+            display: flex;
+            justify-content: center;
+
+            :root .light & {
+                @apply bg-gray-300;
+            }
+
+            :root .dark & {
+                @apply bg-gray-600;
+            }
+        }
+
+        &-icon {
+            @apply w-2 h-2;
+
+            :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 ring-primary;
+            }
+
+            :root .dark & {
+                @apply border-primary ring-primary;
+            }
+        }
+    }
+
+    &.is-disabled {
+        cursor: not-allowed;
+
+        :root .light & {
+            @apply bg-gray-100;
+        }
+
+        :root .dark & {
+            @apply bg-gray-800;
+        }
+
+        .uxf-input__element {
+            cursor: not-allowed;
+        }
+    }
+
+    &.is-readonly {
+        cursor: text;
+
+        .uxf-input__element {
+            cursor: text;
+        }
+
+        .uxf-input__wrapper {
+            @apply ring-0;
+        }
+
+        .uxf-input__wrapper,
+        .uxf-input__left-addon,
+        .uxf-input__right-addon {
+            :root .light & {
+                @apply border-gray-200;
+            }
+
+            :root .dark & {
+                @apply border-gray-700;
+            }
+        }
+    }
+
+    &.is-invalid {
+        &.is-focused {
+            .uxf-input__wrapper {
+                :root .light & {
+                    @apply ring-error border-error;
+                }
+
+                :root .dark & {
+                    @apply ring-error border-error;
+                }
+            }
+        }
+
+        .uxf-input__wrapper {
+            @apply border-error placeholder:text-error-300;
+
+            .uxf-input__left-element,
+            .uxf-input__right-element {
+                @apply text-error;
+            }
+
+            .uxf-input__element {
+                :root .light & {
+                    @apply border-gray-200 text-error placeholder:text-error;
+                }
+
+                :root .dark & {
+                    @apply border-gray-700 text-error placeholder:text-error;
+                }
+            }
+        }
+    }
+
+    input:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+            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/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;
+    }
+}