@uxf/ui 10.0.0-beta.8 → 10.0.0-beta.80

package/css/color-radio-group.css

@@ -1,6 +1,6 @@
 .uxf-color-radio-group {
     &__option {
-        @apply rounded-full outline-none focus-visible:ring-offset-2 focus-visible:ring-2 is-disabled:pointer-events-none;
+        @apply is-disabled:pointer-events-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
 
         :root .light & {
             @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-white;

package/css/color-radio.css

@@ -1,12 +1,12 @@
 .uxf-color-radio {
-    @apply relative shrink-0 inline-flex items-center justify-center rounded-full h-7 w-7 bg-[color:var(--bg-color)];
+    @apply relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[color:var(--bg-color)];
 
     &__color-label {
         @apply sr-only;
     }
 
     &__inner {
-        @apply w-4 h-4 text-white opacity-0 transition-opacity;
+        @apply h-4 w-4 text-white opacity-0 transition-opacity;
     }
 
     &__inner--dark {
@@ -20,7 +20,7 @@
     }
 
     &.is-disabled {
-        @apply after:absolute after:inset-0 after:rounded-inherit pointer-events-none;
+        @apply after:rounded-inherit pointer-events-none after:absolute after:inset-0;
 
         :root .light & {
             @apply after:bg-white/50;

package/css/component-structure-analyzer.css

@@ -2,30 +2,30 @@
     padding-bottom: 32px;
 
     * {
-        padding: 32px !important;
-        border: 2px solid black !important;
-        position: relative !important;
-        color: lightgray !important;
         background-color: white !important;
+        border: 2px solid black !important;
         border-radius: initial !important;
-        margin: 4px !important;
+        color: lightgray !important;
         font-family: monospace;
         font-size: 12px;
-        min-width: 200px;
         height: auto !important;
-        top: initial !important;
         left: initial !important;
+        margin: 4px !important;
+        min-width: 200px;
+        padding: 32px !important;
+        position: relative !important;
         right: initial !important;
+        top: initial !important;
 
         &::before {
-            position: absolute;
-            left: 4px;
-            top: 2px;
+            color: black;
             content: attr(class);
             font-size: 12px;
-            line-height: 14px;
-            color: black;
             font-weight: 500;
+            left: 4px;
+            line-height: 14px;
+            position: absolute;
+            top: 2px;
         }
     }
 }

package/css/date-picker.css

@@ -1,8 +1,16 @@
 .uxf-date-picker {
-    @apply w-[296px] sm:w-[340px] mx-auto;
+    margin: 0 auto;
+    width: 296px;
+
+    @screen sm {
+        width: 340px;
+    }
 
     &__navigation {
-        @apply flex items-center justify-between mb-4;
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: theme("spacing.4");
 
         &-title {
             font-size: 14px;
@@ -16,7 +24,6 @@
             :root .dark & {
                 @apply text-darkMedium is-hoverable:text-darkHigh;
             }
-
         }
     }
 }

package/css/date-range-picker.css

@@ -0,0 +1,21 @@
+.uxf-date-range-picker {
+    margin: 0 auto;
+
+    &__months {
+        display: flex;
+        flex-direction: column;
+        gap: theme("spacing.6");
+
+        @screen sm {
+            flex-direction: row;
+        }
+    }
+
+    &__month {
+        width: 296px;
+
+        @screen sm {
+            width: 340px;
+        }
+    }
+}

package/css/datetime-picker.css

@@ -1,10 +1,10 @@
 .uxf-datetime-picker {
     &__tabs {
-        @apply mx-auto w-fit mb-4;
+        @apply mx-auto mb-4 w-fit;
     }
 
     &__tab {
-        @apply py-0 text-body2 px-3;
+        @apply text-body2 px-3 py-0;
 
         height: theme("inputSize.xs");
     }

package/css/dialog.css

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

package/css/dropdown.css

@@ -1,5 +1,5 @@
 .uxf-dropdown {
-    @apply absolute z-dropdown w-full overflow-y-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black
+    @apply z-dropdown absolute 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;
@@ -21,7 +21,7 @@
     }
 
     &__item {
-        @apply relative cursor-default select-none py-2 px-4 transition-colors;
+        @apply relative cursor-default select-none px-4 py-2 transition-colors;
 
         &.is-selected {
             @apply font-bold;
@@ -37,6 +37,10 @@
             &.is-active {
                 @apply bg-primary text-white;
             }
+
+            &.is-disabled {
+                @apply text-gray-300;
+            }
         }
 
         :root .dark & {
@@ -49,6 +53,10 @@
             &.is-active {
                 @apply bg-primary;
             }
+
+            &.is-disabled {
+                @apply text-gray-600;
+            }
         }
     }
 
@@ -65,6 +73,6 @@
     }
 
     &__empty-wrapper {
-        @apply py-2 px-4 text-gray-800;
+        @apply px-4 py-2 text-gray-800;
     }
 }

package/css/dropzone.css

@@ -6,8 +6,8 @@
     }
 
     &__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];
+        @apply rounded-inherit border-lightBorder text-lightLow flex cursor-pointer flex-col items-center justify-center space-y-2
+            border-2 border-dashed p-4 text-[14px];
 
         &__icon {
             @apply h-6;
@@ -31,8 +31,8 @@
     }
 
     &__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;
+        @apply flex w-full items-center justify-between space-x-6 overflow-auto border px-4 py-3
+            shadow-sm sm:rounded-md sm:px-6;
 
         :root .light & {
             @apply border-lightBorder text-lightMedium;
@@ -53,7 +53,7 @@
         }
 
         &__block {
-            @apply flex items-center space-x-4 min-w-0;
+            @apply flex min-w-0 items-center space-x-4;
 
             &:nth-child(2) {
                 @apply shrink-0;
@@ -72,7 +72,7 @@
             }
 
             &__file-size {
-                @apply whitespace-nowrap shrink-0;
+                @apply shrink-0 whitespace-nowrap;
             }
 
             &__remove-button {

package/css/error-message.css

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

package/css/file-input.css

@@ -4,7 +4,7 @@
     }
 
     &__label {
-        @apply cursor-pointer flex overflow-auto;
+        @apply flex cursor-pointer overflow-auto;
 
         &.is-loading {
             @apply cursor-not-allowed;
@@ -58,7 +58,7 @@
         }
 
         &__wrapper {
-            @apply flex items-center justify-between border px-3 rounded-r-md w-full min-w-0;
+            @apply flex w-full min-w-0 items-center justify-between rounded-r-md border px-3;
 
             :root .light & {
                 @apply border-gray-200;

package/css/flash-messages.css

@@ -1,28 +1,152 @@
 .uxf-flash-messages {
-    @apply pointer-events-none fixed inset-0 z-flashMessage flex items-end p-6;
+    @apply space-y-4;
 
-    &__list-wrapper {
-        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-end ml-auto;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: flex-end;
+    max-width: 24rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: theme("spacing.6") theme("spacing.1") theme("spacing.6") theme("spacing.6");
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    z-index: theme("zIndex.flashMessage");
+
+    &__permanent,
+    &__dismissable {
+        display: flex;
+        flex-direction: column-reverse;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        padding-right: theme("spacing.3");
+        pointer-events: auto;
+
+        &::-webkit-scrollbar {
+            background-color: transparent;
+            width: theme("width.2");
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: theme("colors.gray.400");
+            border-radius: theme("borderRadius.2xl");
+        }
+    }
+
+    &__dismissable {
+        padding-top: theme("spacing.11");
+
+        &:hover {
+            padding-top: 0;
+        }
+    }
+
+    &__permanent {
+        flex-shrink: 0;
+        max-height: 50%;
+    }
+
+    &__divider {
+        width: calc(100% - 1.5rem);
+    }
+}
+
+.uxf-flash-message-wrapper {
+    @apply transition-all;
+
+    transition-duration: 300ms;
+
+    &--enter-from {
+        opacity: 0;
+        transform: translateX(5rem);
+    }
+
+    &--enter-to {
+        opacity: 100;
+        transform: translateX(0);
+    }
+
+    &:not(:first-of-type) {
+        margin-top: theme("spacing.4");
+
+        .uxf-flash-messages__dismissable & {
+            margin-top: -2.75rem;
+        }
+    }
+
+    .uxf-flash-messages__dismissable & {
+        &:nth-last-child(n + 5) {
+            display: none;
+        }
+
+        &:nth-last-child(4) {
+            opacity: 0.6;
+            transform: scale(0.85);
+        }
+
+        &:nth-last-child(3) {
+            opacity: 0.7;
+            transform: scale(0.9);
+        }
+
+        &:nth-last-child(2) {
+            opacity: 0.8;
+            transform: scale(0.95);
+        }
+    }
+
+    .uxf-flash-messages__dismissable:hover & {
+        display: block;
+        opacity: 1;
+        transform: scale(1);
+
+        &:not(:first-of-type) {
+            margin-top: theme("spacing.4");
+        }
     }
 }
 
 .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;
+    --flash-message-bg-color: transparent;
+    --flash-message-bg-color-hover: transparent;
+    --flash-message-color: white;
+
+    @apply transition;
+
+    background-color: var(--flash-message-bg-color);
+    border-radius: theme("borderRadius.lg");
+    color: var(--flash-message-color);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    min-width: 15rem;
+    padding: theme("spacing.4") theme("spacing.5");
+    pointer-events: auto;
+
+    &:hover,
+    &:active {
+        background-color: var(--flash-message-bg-color-hover);
+        cursor: pointer;
+    }
 
     &--success {
-        @apply bg-success is-hoverable:bg-success-700 text-white;
+        --flash-message-bg-color: theme("colors.success.DEFAULT");
+        --flash-message-bg-color-hover: theme("colors.success.700");
     }
 
     &--error {
-        @apply bg-error is-hoverable:bg-error-700 text-white;
+        --flash-message-bg-color: theme("colors.error.DEFAULT");
+        --flash-message-bg-color-hover: theme("colors.error.700");
     }
 
     &--warning {
-        @apply bg-warning is-hoverable:bg-warning-700 text-white;
+        --flash-message-bg-color: theme("colors.warning.DEFAULT");
+        --flash-message-bg-color-hover: theme("colors.warning.700");
     }
 
     &--info {
-        @apply bg-gray-500 is-hoverable:bg-gray-700 text-white;
+        --flash-message-bg-color: theme("colors.gray.500");
+        --flash-message-bg-color-hover: theme("colors.gray.700");
     }
 }

package/css/icon.css

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

package/css/image-gallery.css

@@ -1,20 +1,20 @@
 .uxf-image-gallery {
-    @apply fixed inset-0 z-imageGallery flex flex-col;
+    @apply z-imageGallery fixed inset-0 flex flex-col;
 
     &__content {
-        @apply mx-auto grow max-h-[calc(100%-128px)];
+        @apply mx-auto max-h-[calc(100%-128px)] grow;
     }
 
     &__inner {
-        @apply container flex items-center justify-center h-full;
+        @apply container flex h-full items-center justify-center;
     }
 
     &__image {
-        @apply h-full w-full object-contain z-1;
+        @apply z-1 w-full object-contain;
     }
 
     &__buttons {
-        @apply pointer-events-none container absolute inset-0 flex items-center justify-between p-2 z-10;
+        @apply container pointer-events-none absolute inset-0 z-10 flex items-center justify-between p-2;
     }
 
     &__button {
@@ -26,7 +26,7 @@
     }
 
     &__dots {
-        @apply mx-auto flex items-center space-x-2 p-4 z-1 h-[64px];
+        @apply z-1 mx-auto flex h-[64px] items-center space-x-2 p-4;
     }
 
     &__dot {
@@ -38,7 +38,7 @@
     }
 
     &__close-button-wrapper {
-        @apply flex justify-end z-1;
+        @apply z-1 ml-auto w-auto;
     }
 
     &__close-button {
@@ -54,7 +54,7 @@
     }
 
     &__custom-content {
-        @apply absolute right-0 bottom-0 bg-gray-600 text-white;
+        @apply absolute bottom-0 right-0 bg-gray-600 text-white;
     }
 
     &__backdrop {

package/css/input-with-popover.css

@@ -26,7 +26,7 @@
     }
 
     &__trigger-element {
-        @apply w-5 h-5 rounded-sm;
+        @apply h-5 w-5 rounded-sm;
 
         align-items: center;
         display: inline-flex;

package/css/input.css

@@ -93,7 +93,7 @@
         justify-content: center;
 
         &-inner {
-            @apply w-3.5 h-3.5 rounded-full;
+            @apply h-3.5 w-3.5 rounded-full;
 
             align-items: center;
             display: flex;
@@ -109,7 +109,7 @@
         }
 
         &-icon {
-            @apply w-2 h-2;
+            @apply h-2 w-2;
 
             :root .light & {
                 @apply text-white;
@@ -215,11 +215,11 @@
         &.is-focused {
             .uxf-input__wrapper {
                 :root .light & {
-                    @apply ring-error border-error;
+                    @apply border-error ring-error;
                 }
 
                 :root .dark & {
-                    @apply ring-error border-error;
+                    @apply border-error ring-error;
                 }
             }
         }
@@ -234,11 +234,11 @@
 
             .uxf-input__element {
                 :root .light & {
-                    @apply border-gray-200 text-error placeholder:text-error;
+                    @apply text-error placeholder:text-error border-gray-200;
                 }
 
                 :root .dark & {
-                    @apply border-gray-700 text-error placeholder:text-error;
+                    @apply text-error placeholder:text-error border-gray-700;
                 }
             }
         }
@@ -254,16 +254,16 @@
 
             :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");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800"); /* stylelint-disable-line property-no-vendor-prefix */
+                box-shadow: inset 0 0 0 1000px 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");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white"); /* stylelint-disable-line property-no-vendor-prefix */
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
             }
         }
     }

package/css/layout.css

@@ -4,15 +4,15 @@ body {
 
 .uxf-layout {
     &__content {
-        @apply flex flex-1 flex-col md:pl-64 pt-14;
+        @apply flex flex-1 flex-col pt-14 md:pl-64;
     }
 }
 
 .uxf-app-bar {
-    @apply fixed w-full top-0 left-0 flex items-center bg-primary-600 h-14;
+    @apply bg-primary-600 fixed left-0 top-0 flex h-14 w-full items-center;
 
     &__left-container {
-        @apply flex items-center grow;
+        @apply flex grow items-center;
     }
 
     &__menu-button {
@@ -25,7 +25,7 @@ body {
 }
 
 .uxf-sidebar {
-    @apply hidden md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col bg-white;
+    @apply hidden bg-white md:fixed md:inset-y-0 md:flex md:w-64 md:flex-col;
 
     &__content {
         @apply flex flex-grow flex-col overflow-y-auto border-r border-r-gray-200 pt-14;

package/css/list-item.css

@@ -1,6 +1,6 @@
 .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;
+    @apply is-hoverable:opacity-75 relative flex min-h-[64px] grow justify-between space-x-3 px-5 py-4
+        outline-none transition-opacity before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
 
     &__inner {
         @apply w-full;