@uxf/ui 1.0.1 → 10.0.0-beta.5

package/css/calendar.css

@@ -0,0 +1,215 @@
+.uxf-calendar {
+    &__cell-day {
+        align-items: center;
+        display: flex;
+        font-size: 14px;
+        font-weight: theme("fontWeight.medium");
+        height: 40px;
+        justify-content: center;
+        line-height: 1;
+        outline: none;
+        position: relative;
+        text-align: center;
+
+        :root .light & {
+            background-color: theme("backgroundColor.white");
+            color: theme("colors.lightMedium");
+        }
+
+        :root .dark & {
+            background-color: theme("backgroundColor.gray.900");
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            :root .light & {
+                background-color: theme("backgroundColor.gray.50");
+            }
+
+            :root .dark & {
+                background-color: theme("backgroundColor.gray.950");
+            }
+        }
+
+        &:focus-visible {
+            &::before {
+                border: 2px solid theme("colors.primary.500");
+                border-radius: 2px;
+                content: "";
+                inset: 0;
+                position: absolute;
+            }
+        }
+
+        &.is-disabled{
+            cursor: auto;
+
+            :root .light & {
+                background-color: theme("backgroundColor.gray.100");
+            }
+
+            :root .dark & {
+                background-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 .dark & {
+                background-color: theme("backgroundColor.primary.500");
+                color: theme("colors.white");
+            }
+
+            &:hover {
+                :root .light & {
+                    background-color: theme("backgroundColor.primary.500");
+                }
+
+                :root .dark & {
+                    background-color: theme("backgroundColor.primary.500");
+                }
+            }
+        }
+
+        &--today {
+            .uxf-calendar__cell-day__inner {
+                align-items: center;
+                border-radius: 999px;
+                display: inline-flex;
+                height: 32px;
+                justify-content: center;
+                position: relative;
+                width: 32px;
+
+                :root .light & {
+                    background-color: theme("backgroundColor.lightHigh");
+                    color: theme("colors.white");
+                }
+
+                :root .dark & {
+                    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");
+                    color: theme("colors.white");
+                    border: 2px solid theme("colors.darkMedium");
+                }
+            }
+        }
+
+        &--not-current-month {
+            :root .light & {
+                background-color: theme("backgroundColor.gray.100");
+                color: theme("colors.lightLow");
+            }
+
+            :root .dark & {
+                background-color: theme("backgroundColor.gray.800");
+                color: theme("colors.darkLow");
+            }
+        }
+    }
+
+    &__cell-month,
+    &__cell-year {
+        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
+
+        &:first-child {
+            border-top-left-radius: var(--compensated-radii);
+        }
+
+        &:nth-child(3) {
+            border-top-right-radius: var(--compensated-radii);
+        }
+
+        &:nth-last-child(3) {
+            border-bottom-left-radius: var(--compensated-radii);
+        }
+
+        &:last-child {
+            border-bottom-right-radius: var(--compensated-radii);
+        }
+    }
+
+    &__weekdays {
+        column-gap: 1px;
+        display: grid;
+        font-size: 10px;
+        font-weight: theme("fontWeight.semibold");
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        margin-bottom: 6px;
+        padding: 0 1px;
+        text-align: center;
+        text-transform: uppercase;
+
+        :root .light & {
+            color: theme("colors.lightLow");
+        }
+
+        :root .dark & {
+            color: theme("colors.darkLow");
+        }
+    }
+
+    &__weekday {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 21px;
+        justify-content: center;
+    }
+
+    &__days,
+    &__year,
+    &__decade {
+        border-radius: 6px;
+        display: grid;
+        gap: 1px;
+        padding: 1px;
+        text-align: center;
+
+        :root .light & {
+            background-color: theme("backgroundColor.lightBorder");
+        }
+
+        :root .dark & {
+            background-color: theme("backgroundColor.darkBorder");
+        }
+    }
+
+    &__days {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    &__year,
+    &__decade {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}

package/css/checkbox-button.css

@@ -0,0 +1,98 @@
+.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;
+
+    &__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;
+    }
+
+    :root .light & {
+        @apply bg-gray-200 focus-visible:ring-primary;
+
+        .uxf-checkbox-button__icon {
+            @apply before:border-gray-600;
+        }
+
+        .uxf-checkbox-button__label {
+            @apply text-gray-600;
+        }
+
+        &.is-selected {
+            @apply bg-primary;
+
+            .uxf-checkbox-button__icon {
+                @apply text-primary before:border-transparent;
+            }
+
+            .uxf-checkbox-button__label {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply bg-gray-100 pointer-events-none;
+
+            .uxf-checkbox-button__icon {
+                @apply before:border-gray-300;
+            }
+
+            &.is-selected {
+                @apply bg-gray-300;
+
+                .uxf-checkbox-button__icon {
+                    @apply text-gray-400 before:border-transparent;
+                }
+
+                .uxf-checkbox-button__label {
+                    @apply text-white;
+                }
+            }
+        }
+
+        &.is-invalid {
+            @apply before:border-error;
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-800 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+
+        .uxf-checkbox-button__icon {
+            @apply before:border-transparent;
+        }
+
+        .uxf-checkbox-button__label {
+            @apply text-gray-400;
+        }
+
+        &.is-selected {
+            @apply text-white bg-primary;
+
+            .uxf-checkbox-button__icon {
+                @apply text-primary before:border-transparent;
+            }
+
+            .uxf-checkbox-button__label {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply bg-gray-800 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-600;
+
+                .uxf-checkbox-button__icon {
+                    @apply text-gray-800;
+                }
+            }
+        }
+
+        &.is-invalid {
+            @apply before:border-error;
+        }
+    }
+}

package/css/checkbox-input.css

@@ -0,0 +1,24 @@
+.uxf-checkbox-input {
+    &__wrapper {
+        @apply flex items-center justify-between space-x-3;
+    }
+
+    &__label {
+        @apply w-full;
+
+        :root .light & {
+            @apply text-gray-600;
+        }
+
+        :root .dark & {
+            @apply text-gray-400;
+        }
+    }
+
+    &.is-disabled,
+    &.is-readonly {
+        & + .uxf-checkbox-input__label {
+            @apply pointer-events-none;
+        }
+    }
+}

package/css/checkbox.css

@@ -0,0 +1,120 @@
+.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;
+
+    &__inner {
+        @apply hidden;
+    }
+
+    &--size-default {
+        @apply h-4 w-4;
+
+        .uxf-checkbox__inner {
+            @apply w-2.5 h-2.5;
+        }
+    }
+
+    &--size-lg {
+        @apply h-6 w-6;
+
+        .uxf-checkbox__inner {
+            @apply w-4 h-4;
+        }
+    }
+
+    &.is-selected {
+        .uxf-checkbox__inner {
+            @apply block;
+        }
+    }
+
+    &.is-disabled,
+    &.is-readonly {
+        @apply pointer-events-none;
+    }
+
+    :root .light & {
+        @apply bg-white border-gray-400 focus-visible:before:border-primary;
+
+        &.is-selected {
+            @apply bg-primary border-transparent is-hoverable:bg-primary-700;
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-200;
+
+            &.is-selected {
+                @apply bg-gray-200;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-gray-400;
+            }
+        }
+
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary/60;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-error;
+
+            &.is-selected {
+                @apply bg-error;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-900 border-gray-400 focus-visible:before:border-primary;
+
+        &.is-selected {
+            @apply bg-primary border-transparent is-hoverable:bg-primary-300;
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-600;
+
+            &.is-selected {
+                @apply bg-gray-600;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-gray-800;
+            }
+        }
+
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary/60;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-error;
+
+            &.is-selected {
+                @apply bg-error;
+            }
+
+            .uxf-checkbox__inner {
+                @apply text-white;
+            }
+        }
+    }
+}