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

package/css/button.css

@@ -17,7 +17,7 @@
     }
 
     &--full-width {
-        @apply w-full flex flex-row justify-center;
+        @apply flex w-full flex-row justify-center;
     }
 
     &.is-disabled {
@@ -54,9 +54,9 @@
     }
 
     &--size-xs {
-        height: theme("inputSize.xs");
+        @apply rounded px-2.5 text-xs;
 
-        @apply px-2.5 text-xs rounded;
+        height: theme("inputSize.xs");
 
         &.is-loading::after {
             height: 14px;
@@ -64,9 +64,9 @@
         }
 
         &.uxf-button--icon-button {
-            width: theme("inputSize.xs");
-
             @apply p-0;
+
+            width: theme("inputSize.xs");
         }
 
         .uxf-icon {
@@ -75,19 +75,19 @@
     }
 
     &--size-sm {
-        height: theme("inputSize.sm");
-
         @apply px-3 text-sm leading-4;
 
+        height: theme("inputSize.sm");
+
         &.is-loading::after {
             height: 16px;
             width: 16px;
         }
 
         &.uxf-button--icon-button {
-            width: theme("inputSize.sm");
-
             @apply p-0;
+
+            width: theme("inputSize.sm");
         }
 
         .uxf-icon {
@@ -96,10 +96,10 @@
     }
 
     &--size-default {
-        height: theme("inputSize.default");
-
         @apply px-4 text-sm;
 
+        height: theme("inputSize.default");
+
         &.uxf-button--icon-button {
             width: theme("inputSize.default");
 
@@ -108,10 +108,10 @@
     }
 
     &--size-lg {
-        height: theme("inputSize.lg");
-
         @apply px-4 text-base;
 
+        height: theme("inputSize.lg");
+
         &.uxf-button--icon-button {
             width: theme("inputSize.lg");
 
@@ -120,14 +120,14 @@
     }
 
     &--size-xl {
-        height: theme("inputSize.xl");
-
         @apply px-6 text-base;
 
-        &.uxf-button--icon-button {
-            width: theme("inputSize.xl");
+        height: theme("inputSize.xl");
 
+        &.uxf-button--icon-button {
             @apply p-0;
+
+            width: theme("inputSize.xl");
         }
     }
 
@@ -146,11 +146,11 @@
             @apply focus-visible:ring-primary;
 
             :root .light & {
-                @apply text-primary border-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
+                @apply border-primary text-primary is-hoverable:border-primary-700 is-hoverable:text-primary-700;
             }
 
             :root .dark & {
-                @apply text-primary border-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
+                @apply border-primary text-primary is-hoverable:border-primary-300 is-hoverable:text-primary-300;
             }
         }
 
@@ -158,11 +158,23 @@
             @apply focus-visible:ring-success;
 
             :root .light & {
-                @apply text-success border-success is-hoverable:border-success-700 is-hoverable:text-success-700;
+                @apply border-success text-success is-hoverable:border-success-700 is-hoverable:text-success-700;
             }
 
             :root .dark & {
-                @apply text-success border-success is-hoverable:border-success-300 is-hoverable:text-success-300;
+                @apply border-success text-success is-hoverable:border-success-300 is-hoverable:text-success-300;
+            }
+        }
+
+        &.uxf-button--color-warning {
+            @apply focus-visible:ring-warning;
+
+            :root .light & {
+                @apply border-warning text-warning is-hoverable:border-warning-700 is-hoverable:text-warning-700;
+            }
+
+            :root .dark & {
+                @apply border-warning text-warning is-hoverable:border-warning-300 is-hoverable:text-warning-300;
             }
         }
 
@@ -170,21 +182,21 @@
             @apply focus-visible:ring-error;
 
             :root .light & {
-                @apply text-error border-error is-hoverable:border-error-700 is-hoverable:text-error-700;
+                @apply border-error text-error is-hoverable:border-error-700 is-hoverable:text-error-700;
             }
 
             :root .dark & {
-                @apply text-error border-error is-hoverable:border-error-300 is-hoverable:text-error-300;
+                @apply border-error text-error is-hoverable:border-error-300 is-hoverable:text-error-300;
             }
         }
 
         &.is-disabled {
             :root .light & {
-                @apply border-gray-300 bg-gray-300 text-lightLow;
+                @apply text-lightLow border-gray-300 bg-gray-300;
             }
 
             :root .dark & {
-                @apply border-gray-700 bg-gray-700 text-darkLow;
+                @apply text-darkLow border-gray-700 bg-gray-700;
             }
         }
     }
@@ -209,7 +221,7 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -231,7 +243,7 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -253,7 +265,29 @@
 
             &.is-disabled {
                 :root .light & {
-                    @apply bg-gray-300 text-lightLow;
+                    @apply text-lightLow bg-gray-300;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-600 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-warning {
+            @apply focus-visible:ring-warning;
+
+            :root .light & {
+                @apply bg-warning is-hoverable:bg-warning-700;
+            }
+
+            :root .dark & {
+                @apply bg-warning is-hoverable:bg-warning-400;
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply text-lightLow bg-gray-300;
                 }
 
                 :root .dark & {
@@ -264,14 +298,14 @@
     }
 
     &--variant-white {
-        @apply border focus-visible:ring-primary;
+        @apply focus-visible:ring-primary border;
 
         :root .light & {
-            @apply border-lightBorder bg-white is-hoverable:bg-gray-100 text-lightMedium;
+            @apply border-lightBorder text-lightMedium is-hoverable:bg-gray-100 bg-white;
         }
 
         :root .dark & {
-            @apply border-darkBorder text-darkMedium bg-lightHigh is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
+            @apply border-darkBorder bg-lightHigh text-darkMedium is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
         }
 
         &.is-disabled {
@@ -280,7 +314,7 @@
             }
 
             :root .dark & {
-                @apply text-darkLow border-darkBorder;
+                @apply border-darkBorder text-darkLow;
             }
         }
     }
@@ -322,6 +356,18 @@
             }
         }
 
+        &.uxf-button--color-warning {
+            @apply text-warning;
+
+            :root .light & {
+                @apply is-hoverable:text-warning-700;
+            }
+
+            :root .dark & {
+                @apply is-hoverable:text-warning-300;
+            }
+        }
+
         &.is-disabled {
             :root .light & {
                 @apply text-lightLow;

package/css/calendar.css

@@ -1,6 +1,12 @@
 .uxf-calendar {
-    &__cell-day {
+    &__cell {
+        --bg-color: unset;
+        --color: unset;
+        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
+
         align-items: center;
+        background-color: var(--bg-color);
+        color: var(--color);
         display: flex;
         font-size: 14px;
         font-weight: theme("fontWeight.medium");
@@ -12,22 +18,22 @@
         text-align: center;
 
         :root .light & {
-            background-color: theme("backgroundColor.white");
-            color: theme("colors.lightMedium");
+            --bg-color: theme("backgroundColor.white");
+            --color: theme("colors.lightMedium");
         }
 
         :root .dark & {
-            background-color: theme("backgroundColor.gray.900");
-            color: theme("colors.darkMedium");
+            --bg-color: theme("backgroundColor.gray.900");
+            --color: theme("colors.darkMedium");
         }
 
         &:hover {
             :root .light & {
-                background-color: theme("backgroundColor.gray.50");
+                --bg-color: theme("backgroundColor.gray.50");
             }
 
             :root .dark & {
-                background-color: theme("backgroundColor.gray.950");
+                --bg-color: theme("backgroundColor.gray.950");
             }
         }
 
@@ -41,60 +47,63 @@
             }
         }
 
-        &.is-disabled{
+        &.is-disabled {
             cursor: auto;
 
             :root .light & {
-                background-color: theme("backgroundColor.gray.100");
+                --bg-color: theme("backgroundColor.gray.100");
             }
 
             :root .dark & {
-                background-color: theme("backgroundColor.gray.800");
+                --bg-color: theme("backgroundColor.gray.800");
             }
         }
 
-        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
-
         &:first-child {
             border-top-left-radius: var(--compensated-radii);
         }
 
-        &:nth-child(7) {
-            border-top-right-radius: var(--compensated-radii);
-        }
-
-        &:nth-last-child(7) {
-            border-bottom-left-radius: var(--compensated-radii);
-        }
-
         &:last-child {
             border-bottom-right-radius: var(--compensated-radii);
         }
 
         &--selected {
-            :root .light & {
-                background-color: theme("backgroundColor.primary.500");
-                color: theme("colors.white");
-            }
-
+            :root .light &,
             :root .dark & {
-                background-color: theme("backgroundColor.primary.500");
-                color: theme("colors.white");
+                --bg-color: theme("backgroundColor.primary.500");
+                --color: theme("colors.white");
             }
 
             &:hover {
-                :root .light & {
-                    background-color: theme("backgroundColor.primary.500");
-                }
-
+                :root .light &,
                 :root .dark & {
-                    background-color: theme("backgroundColor.primary.500");
+                    --bg-color: theme("backgroundColor.primary.500");
                 }
             }
         }
 
+        &--inside-range {
+            background-color: theme("backgroundColor.primary.100");
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.primary.900");
+                color: theme("colors.darkMedium");
+            }
+        }
+
+        &--is-hovered {
+            background-color: theme("backgroundColor.primary.100");
+            color: theme("colors.lightMedium");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.primary.900");
+                color: theme("colors.darkMedium");
+            }
+        }
+
         &--today {
-            .uxf-calendar__cell-day__inner {
+            .uxf-calendar__cell__inner {
                 align-items: center;
                 border-radius: 999px;
                 display: inline-flex;
@@ -104,47 +113,67 @@
                 width: 32px;
 
                 :root .light & {
-                    background-color: theme("backgroundColor.lightHigh");
-                    color: theme("colors.white");
+                    --bg-color: theme("backgroundColor.lightHigh");
+                    --color: theme("colors.white");
                 }
 
                 :root .dark & {
+                    --bg-color: theme("backgroundColor.transparent");
+                    --color: theme("colors.white");
+
+                    border: 2px solid theme("colors.darkMedium");
+                }
+            }
+
+            &.uxf-calendar__cell--selected {
+                .uxf-calendar__cell__inner {
                     background-color: theme("backgroundColor.transparent");
                     border: 2px solid theme("colors.darkMedium");
                     color: theme("colors.white");
                 }
             }
 
-            &.uxf-calendar__cell-day--selected {
-                .uxf-calendar__cell-day__inner {
-                    background-color: theme("backgroundColor.transparent");
+            &.uxf-calendar__cell--inside-range {
+                .uxf-calendar__cell__inner {
+                    background-color: theme("backgroundColor.lightHigh");
+                    border: 2px solid theme("colors.lightHigh");
+                    border-radius: 999px;
                     color: theme("colors.white");
-                    border: 2px solid theme("colors.darkMedium");
+
+                    :root .dark & {
+                        background-color: theme("backgroundColor.transparent");
+                        border: 2px solid theme("colors.darkMedium");
+                        color: theme("colors.white");
+                    }
                 }
             }
         }
 
         &--not-current-month {
             :root .light & {
-                background-color: theme("backgroundColor.gray.100");
-                color: theme("colors.lightLow");
+                --bg-color: theme("backgroundColor.gray.100");
+                --color: theme("colors.lightLow");
             }
 
             :root .dark & {
-                background-color: theme("backgroundColor.gray.800");
-                color: theme("colors.darkLow");
+                --bg-color: theme("backgroundColor.gray.800");
+                --color: theme("colors.darkLow");
             }
         }
     }
 
-    &__cell-month,
-    &__cell-year {
-        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
+    &__cell-day {
+        &:nth-child(7) {
+            border-top-right-radius: var(--compensated-radii);
+        }
 
-        &:first-child {
-            border-top-left-radius: var(--compensated-radii);
+        &:nth-last-child(7) {
+            border-bottom-left-radius: var(--compensated-radii);
         }
+    }
 
+    &__cell-month,
+    &__cell-year {
         &:nth-child(3) {
             border-top-right-radius: var(--compensated-radii);
         }
@@ -152,9 +181,16 @@
         &:nth-last-child(3) {
             border-bottom-left-radius: var(--compensated-radii);
         }
+    }
 
-        &:last-child {
-            border-bottom-right-radius: var(--compensated-radii);
+    &__cell-hour,
+    &__cell-minute {
+        &:nth-child(6) {
+            border-top-right-radius: var(--compensated-radii);
+        }
+
+        &:nth-last-child(6) {
+            border-bottom-left-radius: var(--compensated-radii);
         }
     }
 
@@ -188,7 +224,9 @@
 
     &__days,
     &__year,
-    &__decade {
+    &__decade,
+    &__hours,
+    &__minutes {
         border-radius: 6px;
         display: grid;
         gap: 1px;
@@ -212,4 +250,30 @@
     &__decade {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+
+    &__hours,
+    &__minutes {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+}
+
+.uxf-calendar-navigation {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: theme("spacing.4");
+
+    &__title {
+        font-size: 14px;
+        font-weight: theme("fontWeight.medium");
+        text-align: center;
+
+        :root .light & {
+            @apply text-lightMedium is-hoverable:text-lightHigh;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium is-hoverable:text-darkHigh;
+        }
+    }
 }

package/css/checkbox-button.css

@@ -1,15 +1,15 @@
 .uxf-checkbox-button {
-    @apply shrink-0 inline-flex items-center justify-between rounded-lg py-3 px-4 space-x-4 transition outline-none
-        relative before:absolute before:inset-0 before:border before:rounded-lg before:border-transparent
-        before:transition focus-visible:ring-offset-2 focus-visible:ring-2;
+    @apply relative inline-flex shrink-0 items-center justify-between space-x-4 rounded-lg px-4 py-3 outline-none
+        transition before:absolute before:inset-0 before:rounded-lg before:border before:border-transparent
+        before:transition focus-visible:ring-2 focus-visible:ring-offset-2;
 
     &__icon {
-        @apply w-5 h-5 p-1 bg-white text-transparent rounded relative before:absolute before:inset-0 before:border
-            before:rounded before:transition;
+        @apply relative h-5 w-5 rounded bg-white p-1 text-transparent before:absolute before:inset-0 before:rounded
+            before:border before:transition;
     }
 
     :root .light & {
-        @apply bg-gray-200 focus-visible:ring-primary;
+        @apply focus-visible:ring-primary bg-gray-200;
 
         .uxf-checkbox-button__icon {
             @apply before:border-gray-600;
@@ -32,7 +32,7 @@
         }
 
         &.is-disabled {
-            @apply bg-gray-100 pointer-events-none;
+            @apply pointer-events-none bg-gray-100;
 
             .uxf-checkbox-button__icon {
                 @apply before:border-gray-300;
@@ -57,7 +57,7 @@
     }
 
     :root .dark & {
-        @apply bg-gray-800 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+        @apply focus-visible:ring-primary bg-gray-800 focus-visible:ring-offset-gray-900;
 
         .uxf-checkbox-button__icon {
             @apply before:border-transparent;
@@ -68,7 +68,7 @@
         }
 
         &.is-selected {
-            @apply text-white bg-primary;
+            @apply bg-primary text-white;
 
             .uxf-checkbox-button__icon {
                 @apply text-primary before:border-transparent;
@@ -80,7 +80,7 @@
         }
 
         &.is-disabled {
-            @apply bg-gray-800 pointer-events-none;
+            @apply pointer-events-none bg-gray-800;
 
             &.is-selected {
                 @apply bg-gray-600;

package/css/checkbox.css

@@ -1,7 +1,7 @@
 .uxf-checkbox {
-    @apply relative shrink-0 flex items-center justify-center rounded transition outline-none border
-        focus-visible:before:border-2 focus-visible:before:absolute
-        focus-visible:before:inset-[-5px] focus-visible:before:rounded-lg;
+    @apply relative flex shrink-0 items-center justify-center rounded border outline-none transition
+        focus-visible:before:absolute focus-visible:before:inset-[-5px]
+        focus-visible:before:rounded-lg focus-visible:before:border-2;
 
     &__inner {
         @apply hidden;
@@ -11,7 +11,7 @@
         @apply h-4 w-4;
 
         .uxf-checkbox__inner {
-            @apply w-2.5 h-2.5;
+            @apply h-2.5 w-2.5;
         }
     }
 
@@ -19,7 +19,7 @@
         @apply h-6 w-6;
 
         .uxf-checkbox__inner {
-            @apply w-4 h-4;
+            @apply h-4 w-4;
         }
     }
 
@@ -35,10 +35,10 @@
     }
 
     :root .light & {
-        @apply bg-white border-gray-400 focus-visible:before:border-primary;
+        @apply focus-visible:before:border-primary border-gray-400 bg-white;
 
         &.is-selected {
-            @apply bg-primary border-transparent is-hoverable:bg-primary-700;
+            @apply bg-primary is-hoverable:bg-primary-700 border-transparent;
 
             .uxf-checkbox__inner {
                 @apply text-white;
@@ -77,10 +77,10 @@
     }
 
     :root .dark & {
-        @apply bg-gray-900 border-gray-400 focus-visible:before:border-primary;
+        @apply focus-visible:before:border-primary border-gray-400 bg-gray-900;
 
         &.is-selected {
-            @apply bg-primary border-transparent is-hoverable:bg-primary-300;
+            @apply bg-primary is-hoverable:bg-primary-300 border-transparent;
 
             .uxf-checkbox__inner {
                 @apply text-white;