@uxf/ui 11.20.0 → 11.21.0

package/css/multi-combobox.css

@@ -1,51 +1,60 @@
 .uxf-multi-combobox {
-    @apply relative;
+    position: relative;
 
     &__button {
+        align-items: center;
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.lg");
+        box-shadow: theme("boxShadow.sm");
+        color: theme("colors.lightHigh");
+        cursor: default;
+        display: flex;
+        flex-flow: row wrap;
         min-height: theme("inputSize.default");
-
-        @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 right-3 top-1/2 -translate-y-1/2;
-
-            :root .light & {
-                @apply text-lightLow;
-            }
-
-            :root .dark & {
-                @apply text-darkLow;
-            }
+        outline: none;
+        padding-bottom: 7px;
+        padding-left: theme("spacing.3");
+        padding-right: theme("spacing.8");
+        position: relative;
+        text-align: left;
+        width: 100%;
+
+        &::before {
+            border: 1px solid theme("colors.gray.200");
+            border-radius: inherit;
+            content: "";
+            inset: 0;
+            pointer-events: none;
+            position: absolute;
         }
 
-        :root .light & {
-            @apply text-lightHigh bg-white before:border-gray-200;
+        :root .dark & {
+            background-color: theme("colors.gray.800");
+            color: theme("colors.darkHigh");
 
-            .is-empty {
-                @apply text-lightLow;
+            &::before {
+                border-color: theme("colors.gray.700");
             }
         }
 
-        :root .dark & {
-            @apply text-darkHigh bg-gray-800 before:border-gray-700;
+        .uxf-input__arrow-icon {
+            color: theme("colors.lightLow");
+            position: absolute;
+            right: theme("spacing.3");
+            top: 50%;
+            transform: translateY(-50%);
 
-            .is-empty {
-                @apply text-darkLow;
+            :root .dark & {
+                color: theme("colors.darkLow");
             }
         }
 
         &.is-focused,
         &:focus-visible {
-            @apply ring-2;
+            @apply ring-primary ring-2;
 
-            :root .light & {
-                @apply ring-primary before:border-none;
+            &::before {
+                border-style: none;
             }
 
             :root .dark & {
@@ -54,48 +63,56 @@
         }
 
         &.is-invalid {
-            @apply ring-1;
+            @apply ring-error ring-1;
 
-            :root .light & {
-                @apply text-error ring-error;
+            color: theme("colors.error.DEFAULT");
 
-                .uxf-combobox__input {
-                    @apply placeholder:text-error;
-                }
+            :root .dark & {
+                @apply ring-error;
+
+                color: theme("colors.error.DEFAULT");
             }
 
-            :root .dark & {
-                @apply text-error ring-error;
+            .uxf-multi-combobox__input {
+                color: theme("colors.error.DEFAULT");
 
-                .uxf-combobox__input {
-                    @apply placeholder:text-error;
+                &::placeholder {
+                    color: currentcolor;
+                }
+
+                :root .dark & {
+                    color: theme("colors.error.DEFAULT");
+
+                    &::placeholder {
+                        color: currentcolor;
+                    }
                 }
             }
         }
     }
 
     &__input {
-        @apply shrink grow truncate bg-inherit
-            focus-visible:border-0 focus-visible:outline-none focus-visible:ring-0;
+        @apply truncate;
 
+        background-color: inherit;
+        flex-grow: 1;
+        flex-shrink: 1;
         margin-top: 7px;
+        width: auto;
 
-        &-placeholder {
-            &--with-popover {
-                @apply text-gray-400;
-            }
+        &::placeholder {
+            color: theme("colors.lightLow");
         }
 
-        &--with-popover {
-            @apply my-1;
+        :root .dark & {
+            color: theme("colors.darkLow");
         }
 
-        :root .light & {
-            @apply placeholder:text-lightLow;
-        }
+        &:focus-visible {
+            @apply ring-0;
 
-        :root .dark & {
-            @apply placeholder:text-darkLow;
+            border-style: none;
+            outline: none;
         }
     }
 
@@ -104,7 +121,15 @@
         margin-top: 7px;
     }
 
-    &__popover-panel {
-        @apply absolute left-0 top-0 z-10 w-full;
+    &__dropdown-item {
+        .uxf-checkbox {
+            margin-top: theme("spacing.[0.5]");
+        }
+
+        &.is-active {
+            .uxf-checkbox-input__label {
+                color: theme("colors.white");
+            }
+        }
     }
 }

package/css/multi-select.css

@@ -1,27 +1,112 @@
 .uxf-multi-select {
-    &__input {
-        @apply overflow-hidden;
+    &__button {
+        align-items: center;
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.lg");
+        box-shadow: theme("boxShadow.sm");
+        color: theme("colors.lightHigh");
+        cursor: default;
+        display: flex;
+        flex-flow: row wrap;
+        min-height: theme("inputSize.default");
+        outline: none;
+        padding-bottom: 7px;
+        padding-left: theme("spacing.3");
+        padding-right: theme("spacing.8");
+        position: relative;
+        text-align: left;
+        width: 100%;
 
-        &--is-empty {
-            @apply mt-[7px] truncate;
+        &::before {
+            border: 1px solid theme("colors.gray.200");
+            border-radius: inherit;
+            content: "";
+            inset: 0;
+            pointer-events: none;
+            position: absolute;
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.800");
+            color: theme("colors.darkHigh");
 
-            :root .light & {
-                @apply text-lightLow;
+            &::before {
+                border-color: theme("colors.gray.700");
             }
+        }
+
+        .uxf-input__arrow-icon {
+            color: theme("colors.lightLow");
+            position: absolute;
+            right: theme("spacing.3");
+            top: 50%;
+            transform: translateY(-50%);
 
             :root .dark & {
-                @apply text-darkLow;
+                color: theme("colors.darkLow");
             }
         }
-    }
 
-    &__dropdown-item {
-        :root .light & {
-            @apply hover:bg-primary hover:text-white;
+        &.is-focused,
+        &:focus-visible {
+            @apply ring-primary ring-2;
+
+            &::before {
+                border-style: none;
+            }
+
+            :root .dark & {
+                @apply ring-primary;
+            }
         }
 
-        :root .dark & {
-            @apply hover:bg-primary;
+        &.is-invalid {
+            @apply ring-error ring-1;
+
+            color: theme("colors.error.DEFAULT");
+
+            :root .dark & {
+                @apply ring-error;
+
+                color: theme("colors.error.DEFAULT");
+            }
+
+            .uxf-multi-combobox__input {
+                color: theme("colors.error.DEFAULT");
+
+                &::placeholder {
+                    color: currentcolor;
+                }
+
+                :root .dark & {
+                    color: theme("colors.error.DEFAULT");
+
+                    &::placeholder {
+                        color: currentcolor;
+                    }
+                }
+            }
+        }
+    }
+
+    &__input--is-empty {
+        @apply truncate;
+
+        margin-top: 7px;
+    }
+
+    &__input-chip {
+        margin-right: theme("spacing.2");
+        margin-top: 7px;
+    }
+
+    &.is-invalid {
+        .uxf-multi-select__input--is-empty {
+            color: theme("colors.error.DEFAULT");
+
+            :root .dark & {
+                color: theme("colors.error.DEFAULT");
+            }
         }
     }
 }

package/css/pagination.css

@@ -2,22 +2,15 @@
     @apply isolate inline-flex -space-x-px rounded-md;
 
     &__button {
-        @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;
-        }
+        @apply relative inline-flex cursor-pointer items-center border border-gray-300 bg-white text-sm
+            font-medium text-gray-500 hover:bg-gray-50 focus:z-10;
 
         :root .dark & {
             @apply border-gray-600 bg-gray-900 text-gray-200 hover:bg-gray-800;
         }
 
         &.is-selected {
-            @apply z-10;
-
-            :root .light & {
-                @apply border-primary text-primary-600 border bg-indigo-50;
-            }
+            @apply border-primary text-primary-600 z-10 border bg-indigo-50;
 
             :root .dark & {
                 @apply border-primary-700 text-primary-300 border bg-indigo-900/20;
@@ -33,11 +26,7 @@
         }
 
         &.is-disabled {
-            @apply cursor-not-allowed;
-
-            :root .light & {
-                @apply text-neutral-300 hover:bg-white;
-            }
+            @apply cursor-not-allowed text-neutral-300 hover:bg-white;
 
             :root .dark & {
                 @apply text-neutral-500 hover:bg-gray-800;
@@ -45,11 +34,7 @@
         }
 
         &.is-ellipsis {
-            @apply pointer-events-none;
-
-            :root .light & {
-                @apply text-neutral-300 hover:bg-white;
-            }
+            @apply pointer-events-none text-neutral-300 hover:bg-white;
 
             :root .dark & {
                 @apply text-neutral-500 hover:bg-gray-800;

package/css/radio-group.css

@@ -1,60 +1,55 @@
 .uxf-radio-group {
     &__option {
-        @apply outline-none focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-offset-2;
+        @apply focus-visible:ring-primary outline-none focus-visible:rounded-lg focus-visible:ring-2
+            focus-visible:ring-offset-2 focus-visible:ring-offset-white;
+
+        :root .dark & {
+            @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        }
     }
 
     &__option-wrapper {
         @apply flex justify-between;
-    }
-
-    &__option-label {
-        @apply line-clamp-2;
-    }
-
-    &__label {
-        @apply mb-2;
-    }
-
-    :root .light & {
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary focus-visible:ring-offset-white;
-        }
 
-        .uxf-radio-group__option-label {
-            @apply text-gray-600;
-        }
+        &.is-selected {
+            .uxf-radio-group__option-label {
+                @apply text-gray-900;
 
-        .uxf-radio-group__option-wrapper {
-            &.is-selected {
-                .uxf-radio-group__option-label {
-                    @apply text-gray-900;
+                :root .dark & {
+                    @apply text-white;
                 }
             }
         }
     }
 
-    :root .dark & {
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
-        }
+    &__option-label {
+        @apply line-clamp-2 text-gray-600;
 
-        .uxf-radio-group__option-label {
+        :root .dark & {
             @apply text-white/80;
         }
+    }
 
-        .uxf-radio-group__option-wrapper {
-            &.is-selected {
-                .uxf-radio-group__option-label {
-                    @apply text-white;
-                }
-            }
-        }
+    &__label {
+        @apply mb-2;
     }
 }
 
 .uxf-radio-group--list {
+    .uxf-radio-group__option {
+        @apply focus-visible:ring-primary focus-visible:ring-offset-white;
+
+        :root .dark & {
+            @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        }
+    }
+
     .uxf-radio-group__options-wrapper {
-        @apply divide-y;
+        @apply divide-y divide-gray-200;
+
+        :root .dark & {
+            @apply divide-gray-800;
+        }
     }
 
     .uxf-radio-group__option-wrapper {
@@ -64,77 +59,53 @@
     .uxf-radio-group__option-label {
         @apply pr-4;
     }
+}
 
-    :root .light & {
-        .uxf-radio-group__options-wrapper {
-            @apply divide-gray-200;
-        }
-
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary focus-visible:ring-offset-white;
-        }
-    }
-
-    :root .dark & {
-        .uxf-radio-group__options-wrapper {
-            @apply divide-gray-800;
-        }
+.uxf-radio-group--radioButton {
+    .uxf-radio-group__option {
+        @apply focus-visible:ring-primary;
 
-        .uxf-radio-group__option {
+        :root .dark & {
             @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
         }
     }
-}
 
-.uxf-radio-group--radioButton {
     .uxf-radio-group__options-wrapper {
         @apply flex flex-wrap gap-2;
     }
 
     .uxf-radio-group__option-wrapper {
         @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;
-        }
-    }
+            before:pointer-events-none before:absolute before:inset-0 before:rounded-lg before:border before:border-gray-400;
 
-    .uxf-radio-group__option-label {
-        @apply pt-4 text-sm;
-    }
-
-    :root .light & {
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary;
+        :root .dark & {
+            @apply border-gray-400;
         }
 
-        .uxf-radio-group__option-wrapper {
-            @apply before:border-gray-400;
+        &.is-selected {
+            @apply before:border-primary before:border-2;
 
-            &.is-selected {
+            :root .dark & {
                 @apply before:border-primary;
             }
         }
     }
 
-    :root .dark & {
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
-        }
-
-        .uxf-radio-group__option-wrapper {
-            @apply border-gray-400;
-
-            &.is-selected {
-                @apply before:border-primary;
-            }
-        }
+    .uxf-radio-group__option-label {
+        @apply pt-4 text-sm;
     }
 }
 
 .uxf-radio-group--column,
 .uxf-radio-group--row {
+    .uxf-radio-group__option {
+        @apply focus-visible:ring-primary focus-visible:ring-offset-white;
+
+        :root .dark & {
+            @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        }
+    }
+
     .uxf-radio-group__option-wrapper {
         @apply flex-row-reverse items-center;
     }
@@ -142,18 +113,6 @@
     .uxf-radio-group__option-label {
         @apply pl-2;
     }
-
-    :root .light & {
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary focus-visible:ring-offset-white;
-        }
-    }
-
-    :root .dark & {
-        .uxf-radio-group__option {
-            @apply focus-visible:ring-primary focus-visible:ring-offset-gray-900;
-        }
-    }
 }
 
 .uxf-radio-group--column {