@uxf/ui 10.0.0-beta.7 → 10.0.0-beta.74

package/css/message.css

@@ -0,0 +1,92 @@
+.uxf-message {
+    --color: unset;
+
+    &__title {
+        @apply uxf-typo-h6;
+
+        :root .dark & {
+            color: theme("colors.white");
+        }
+    }
+
+    &__description {
+        @apply uxf-typo-body2;
+
+        margin-top: theme("spacing.2");
+
+        :root .light & {
+            color: theme("colors.lightMedium");
+        }
+
+        :root .dark & {
+            color: theme("colors.white");
+        }
+    }
+
+    &--variant-centered {
+        --panel-max-w: 360px;
+
+        .uxf-message__content-wrapper {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            padding: theme("spacing.6");
+        }
+
+        .uxf-message__icon-wrapper {
+            margin-bottom: theme("spacing.6");
+        }
+
+        .uxf-message__text-content {
+            text-align: center;
+            width: 100%;
+        }
+
+        .uxf-message__buttons-wrapper {
+            @apply space-x-2;
+
+            align-items: center;
+            display: flex;
+            padding: 0 theme("spacing.6") theme("spacing.6");
+        }
+    }
+
+    &--variant-simple {
+        --panel-max-w: 320px;
+
+        .uxf-message__content-wrapper {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            justify-items: center;
+            padding: theme("spacing.4");
+        }
+
+        .uxf-message__icon-wrapper {
+            margin-right: theme("spacing.3");
+        }
+
+        .uxf-message__text-content {
+            flex-grow: 1;
+            padding-top: theme("spacing.1");
+            text-align: left;
+        }
+
+        .uxf-message__buttons-wrapper {
+            @apply space-x-2;
+
+            align-items: center;
+            display: flex;
+            justify-content: flex-end;
+            padding: theme("spacing.3") theme("spacing.4");
+
+            :root .light & {
+                background: theme("backgroundColor.gray.50");
+            }
+
+            :root .dark & {
+                background: theme("backgroundColor.lightHigh");
+            }
+        }
+    }
+}

package/css/modal.css

@@ -1,65 +1,21 @@
 .uxf-modal {
-    position: relative;
-    z-index: theme("zIndex.modal");
-
-    &__backdrop {
-        @apply inset-0;
-
-        position: fixed;
-        background-color: rgb(0 0 0 / 75%);
-    }
-
-    &__wrapper {
-        @apply inset-0;
-
-        position: fixed;
-        overflow-y: auto;
+    &--width-xs {
+        --panel-max-w: theme("maxWidth.xs");
     }
 
-    &__body {
-        display: flex;
-        min-height: 100%;
-        align-items: flex-end;
-        justify-content: center;
-        padding-top: theme("spacing.8");
-
-        @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 {
+        --panel-max-w: theme("maxWidth.sm");
     }
 
-    &--width-sm .uxf-modal__panel {
-        max-width: theme("maxWidth.sm");
+    &--width-default {
+        --panel-max-w: theme("maxWidth.lg");
     }
 
-    &--width-default .uxf-modal__panel {
-        max-width: theme("maxWidth.lg");
+    &--width-lg {
+        --panel-max-w: theme("maxWidth.3xl");
     }
 
-    &--width-lg .uxf-modal__panel {
-        max-width: theme("maxWidth.3xl");
+    &--width-xl {
+        --panel-max-w: theme("maxWidth.5xl");
     }
 }

package/css/multi-combobox.css

@@ -4,16 +4,16 @@
     &__button {
         min-height: theme("inputSize.default");
 
-        @apply relative flex flex-row w-full cursor-default flex-wrap items-center rounded-lg pl-3 pr-8 pb-[7px]
-            text-left outline-none before:absolute before:inset-0 before:pointer-events-none before:border
-            before:rounded-lg shadow-sm;
+        @apply relative flex w-full cursor-default flex-row flex-wrap items-center rounded-lg pb-[7px] pl-3 pr-8
+            text-left shadow-sm outline-none before:pointer-events-none before:absolute before:inset-0
+            before:rounded-lg before:border;
 
         &--with-popover {
             @apply cursor-text pb-0;
         }
 
         .uxf-icon {
-            @apply absolute top-1/2 -translate-y-1/2 right-3;
+            @apply absolute right-3 top-1/2 -translate-y-1/2;
 
             :root .light & {
                 @apply text-lightLow;
@@ -45,7 +45,7 @@
             @apply ring-2;
 
             :root .light & {
-                @apply before:border-none ring-primary;
+                @apply ring-primary before:border-none;
             }
 
             :root .dark & {
@@ -57,7 +57,7 @@
             @apply ring-1;
 
             :root .light & {
-                @apply ring-error text-error;
+                @apply text-error ring-error;
 
                 .uxf-combobox__input {
                     @apply placeholder:text-error;
@@ -65,7 +65,7 @@
             }
 
             :root .dark & {
-                @apply ring-error text-error;
+                @apply text-error ring-error;
 
                 .uxf-combobox__input {
                     @apply placeholder:text-error;
@@ -75,8 +75,8 @@
     }
 
     &__input {
-        @apply bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none
-            shrink grow truncate;
+        @apply shrink grow truncate bg-inherit
+            focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0;
 
         margin-top: 7px;
 
@@ -105,6 +105,6 @@
     }
 
     &__popover-panel {
-        @apply absolute top-0 left-0 z-10 w-full;
+        @apply absolute left-0 top-0 z-10 w-full;
     }
 }

package/css/pagination.css

@@ -1,8 +1,8 @@
 .uxf-pagination {
-    @apply isolate inline-flex rounded-md -space-x-px;
+    @apply isolate inline-flex -space-x-px rounded-md;
 
     &__button {
-        @apply relative inline-flex items-center border text-sm font-medium focus:z-10 cursor-pointer;
+        @apply relative inline-flex cursor-pointer items-center border text-sm font-medium focus:z-10;
 
         :root .light & {
             @apply border-gray-300 bg-white text-gray-500 hover:bg-gray-50;
@@ -16,11 +16,11 @@
             @apply z-10;
 
             :root .light & {
-                @apply bg-indigo-50 border border-primary text-primary-600;
+                @apply border border-primary bg-indigo-50 text-primary-600;
             }
 
             :root .dark & {
-                @apply bg-indigo-900/20 border border-primary-700 text-primary-300;
+                @apply border border-primary-700 bg-indigo-900/20 text-primary-300;
             }
         }
 
@@ -62,32 +62,32 @@
     }
 
     &--size-xs .uxf-pagination__button {
-        height: theme("inputSize.xs");
-
         @apply px-2;
+
+        height: theme("inputSize.xs");
     }
 
     &--size-sm .uxf-pagination__button {
-        height: theme("inputSize.sm");
-
         @apply px-3;
+
+        height: theme("inputSize.sm");
     }
 
     &--size-default .uxf-pagination__button {
-        height: theme("inputSize.default");
-
         @apply px-4;
+
+        height: theme("inputSize.default");
     }
 
     &--size-lg .uxf-pagination__button {
-        height: theme("inputSize.lg");
-
         @apply px-5;
+
+        height: theme("inputSize.lg");
     }
 
     &--size-xl .uxf-pagination__button {
-        height: theme("inputSize.xl");
-
         @apply px-6;
+
+        height: theme("inputSize.xl");
     }
 }

package/css/paper.css

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

package/css/radio-group.css

@@ -1,6 +1,6 @@
 .uxf-radio-group {
     &__option {
-        @apply outline-none focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:rounded-lg;
+        @apply outline-none focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-offset-2;
     }
 
     &__option-wrapper {
@@ -92,8 +92,8 @@
     }
 
     .uxf-radio-group__option-wrapper {
-        @apply flex-col-reverse min-w-[112px] p-3 relative
-            before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
+        @apply relative min-w-[112px] flex-col-reverse p-3
+            before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:border;
 
         &.is-selected {
             @apply before:border-2;

package/css/radio.css

@@ -1,5 +1,5 @@
 .uxf-radio {
-    @apply flex shrink-0 items-center justify-center border rounded-full transition focus-visible:ring-2;
+    @apply flex shrink-0 items-center justify-center rounded-full border transition focus-visible:ring-2;
 
     &__inner {
         @apply block rounded-full opacity-0 transition;
@@ -15,7 +15,7 @@
         @apply h-4 w-4;
 
         .uxf-radio__inner {
-            @apply w-1.5 h-1.5;
+            @apply h-1.5 w-1.5;
         }
     }
 
@@ -23,7 +23,7 @@
         @apply h-6 w-6;
 
         .uxf-radio__inner {
-            @apply w-2.5 h-2.5;
+            @apply h-2.5 w-2.5;
         }
     }
 
@@ -31,7 +31,7 @@
         @apply border-gray-400 focus-visible:ring-primary;
 
         &.is-selected {
-            @apply bg-primary border-none;
+            @apply border-none bg-primary;
 
             .uxf-radio__inner {
                 @apply bg-white;
@@ -39,7 +39,7 @@
         }
 
         &.is-disabled {
-            @apply border-gray-200 pointer-events-none;
+            @apply pointer-events-none border-gray-200;
 
             &.is-selected {
                 @apply bg-gray-200;
@@ -67,7 +67,7 @@
         @apply border-gray-400 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
 
         &.is-selected {
-            @apply bg-primary border-none;
+            @apply border-none bg-primary;
 
             .uxf-radio__inner {
                 @apply bg-white;
@@ -75,7 +75,7 @@
         }
 
         &.is-disabled {
-            @apply border-gray-600 pointer-events-none;
+            @apply pointer-events-none border-gray-600;
 
             &.is-selected {
                 @apply bg-gray-600;

package/css/raster-image.css

@@ -7,7 +7,7 @@
     }
 
     &__img {
-        @apply block w-full h-auto;
+        @apply block h-auto w-full;
 
         &--contain {
             @apply absolute inset-0 h-full object-contain;

package/css/select-base.css

@@ -39,7 +39,7 @@
     }
 
     &__arrow-icon {
-        @apply w-3 h-5;
+        @apply h-5 w-3;
 
         z-index: 1;
 

package/css/tabs.css

@@ -8,10 +8,10 @@
     }
 
     &__tab-list__wrapper {
-        @apply w-full mb-6 overflow-auto;
+        @apply mb-6 w-full overflow-auto;
 
         &--default {
-            @apply relative before:absolute before:pointer-events-none before:bottom-0 before:w-full before:border-b-2;
+            @apply relative before:pointer-events-none before:absolute before:bottom-0 before:w-full before:border-b-2;
 
             :root .light & {
                 @apply before:border-b-gray-100;
@@ -36,7 +36,7 @@
     }
 
     &__tab-list {
-        @apply flex items-center text-base font-semibold overflow-x-auto whitespace-nowrap w-full;
+        @apply flex w-full items-center overflow-x-auto whitespace-nowrap text-base font-semibold;
 
         scrollbar-width: none;
 
@@ -45,18 +45,18 @@
         }
 
         &--default {
-            @apply py-1.5 px-1 space-x-2;
+            @apply space-x-2 px-1 py-1.5;
         }
 
         &--segmented {
-            @apply p-1 space-x-1;
+            @apply space-x-1 p-1;
         }
     }
 
     &__tab {
-        @apply inline-flex text-center items-center justify-center px-2 py-2 whitespace-nowrap transition-colors
-            outline-none cursor-pointer is-disabled:pointer-events-none
-            focus-visible:ring-2 focus-visible:ring-offset-1 overflow-visible;
+        @apply inline-flex cursor-pointer items-center justify-center overflow-visible whitespace-nowrap px-2 py-2
+            text-center outline-none transition-colors
+            focus-visible:ring-2 focus-visible:ring-offset-1 is-disabled:pointer-events-none;
 
         &--default {
             @apply relative rounded-lg before:absolute before:bottom-[-6px] before:w-full before:border-b-2
@@ -72,7 +72,7 @@
             }
 
             &.is-active {
-                @apply before:opacity-100 ;
+                @apply before:opacity-100;
 
                 :root .light & {
                     @apply text-lightHigh before:border-b-primary hover:bg-transparent;
@@ -98,22 +98,22 @@
             @apply rounded;
 
             :root .light & {
-                @apply text-lightMedium bg-gray-100 hover:text-primary-600 hover:bg-primary-100
+                @apply bg-gray-100 text-lightMedium hover:bg-primary-100 hover:text-primary-600
                     focus-visible:ring-primary focus-visible:ring-offset-gray-100;
             }
 
             :root .dark & {
-                @apply text-darkMedium bg-gray-700 hover:bg-gray-800 focus-visible:ring-primary
+                @apply bg-gray-700 text-darkMedium hover:bg-gray-800 focus-visible:ring-primary
                     focus-visible:ring-offset-gray-700;
             }
 
             &.is-active {
                 :root .light & {
-                    @apply text-white bg-primary;
+                    @apply bg-primary text-white;
                 }
 
                 :root .dark & {
-                    @apply text-white bg-primary;
+                    @apply bg-primary text-white;
                 }
             }
 

package/css/text-link.css

@@ -1,12 +1,12 @@
 .uxf-text-link {
-    @apply underline transition outline-none relative before:absolute before:-inset-1
-        focus-visible:before:border-2 focus-visible:before:rounded-lg;
+    @apply relative underline outline-none transition before:absolute before:-inset-1
+        focus-visible:before:rounded-lg focus-visible:before:border-2;
 
     :root .light & {
-        @apply text-primary is-hoverable:text-primary-400 focus-visible:before:border-primary;
+        @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400;
     }
 
     :root .dark & {
-        @apply text-primary is-hoverable:text-primary-400 focus-visible:before:border-primary;
+        @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400;
     }
 }