@uxf/ui 1.0.0-beta.16 → 1.0.0-beta.161

package/css/button-group.css

@@ -0,0 +1,22 @@
+.uxf-button-group {
+    display: flex;
+    align-items: center;
+
+    .uxf-button {
+        &:focus {
+            position: relative;
+            z-index: 1;
+        }
+
+        &:not(:last-of-type) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        &:not(:first-of-type) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            margin-left: -1px;
+        }
+    }
+}

package/css/button-list.css

@@ -0,0 +1,61 @@
+.uxf-button-list {
+    @apply flex items-center space-x-2;
+
+    &__menu {
+        @apply relative;
+    }
+
+    &__menu-items {
+        @apply absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none z-dropdown;
+
+        :root .light & {
+            @apply divide-gray-100 bg-white ring-black/5;
+        }
+
+        :root .dark & {
+            @apply divide-gray-700 bg-gray-900 ring-white/10;
+        }
+    }
+
+    &__button {
+        @apply space-x-2;
+    }
+
+    &__open-button {
+        @apply space-x-2;
+    }
+
+    &__menu-button {
+        @apply flex px-3 py-2 space-x-3 text-sm is-hoverable:hover:cursor-pointer;
+
+        :root .light & {
+            @apply text-black hover:text-gray-800;
+        }
+
+        :root .dark & {
+            @apply text-white hover:text-gray-200;
+        }
+
+        &-icon {
+            @apply w-3;
+
+            :root .light & {
+                @apply text-lightMedium;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium;
+            }
+        }
+
+        &.is-disabled {
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-darkLow;
+            }
+        }
+    }
+}

package/css/button.css

@@ -0,0 +1,335 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-button {
+    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm transition-colors
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+
+    .uxf-icon {
+        @apply h-6;
+    }
+
+    &__text {
+        @apply truncate;
+    }
+
+    &--full-width {
+        @apply w-full flex flex-row justify-center;
+    }
+
+    &.is-disabled {
+        @apply pointer-events-none;
+    }
+
+    &.uxf-button--icon-button.is-loading {
+        &::after {
+            @apply ml-0;
+        }
+    }
+
+    &.is-loading {
+        @apply pointer-events-none;
+
+        &::after {
+            animation: spinner 0.8s linear infinite;
+            border-radius: 50%;
+            border-right: 2px solid transparent;
+            border-top: 2px solid;
+            content: "";
+            height: 20px;
+            margin-left: 8px;
+            width: 20px;
+        }
+
+        &.uxf-button--icon-button::after {
+            margin-left: 0;
+        }
+
+        .uxf-icon {
+            @apply hidden;
+        }
+    }
+
+    &--size-xs {
+        height: theme("inputSize.xs");
+
+        @apply px-2.5 text-xs rounded;
+
+        &.is-loading::after {
+            height: 14px;
+            width: 14px;
+        }
+
+        &.uxf-button--icon-button {
+            width: theme("inputSize.xs");
+
+            @apply p-0;
+        }
+
+        .uxf-icon {
+            @apply h-4 w-4;
+        }
+    }
+
+    &--size-sm {
+        height: theme("inputSize.sm");
+
+        @apply px-3 text-sm leading-4;
+
+        &.is-loading::after {
+            height: 16px;
+            width: 16px;
+        }
+
+        &.uxf-button--icon-button {
+            width: theme("inputSize.sm");
+
+            @apply p-0;
+        }
+
+        .uxf-icon {
+            @apply h-4 w-4;
+        }
+    }
+
+    &--size-default {
+        height: theme("inputSize.default");
+
+        @apply px-4 text-sm;
+
+        &.uxf-button--icon-button {
+            width: theme("inputSize.default");
+
+            @apply p-0;
+        }
+    }
+
+    &--size-lg {
+        height: theme("inputSize.lg");
+
+        @apply px-4 text-base;
+
+        &.uxf-button--icon-button {
+            width: theme("inputSize.lg");
+
+            @apply p-0;
+        }
+    }
+
+    &--size-xl {
+        height: theme("inputSize.xl");
+
+        @apply px-6 text-base;
+
+        &.uxf-button--icon-button {
+            width: theme("inputSize.xl");
+
+            @apply p-0;
+        }
+    }
+
+    &--variant-outlined {
+        @apply border;
+
+        :root .light & {
+            @apply bg-white;
+        }
+
+        :root .dark & {
+            @apply bg-lightHigh;
+        }
+
+        &.uxf-button--color-default {
+            @apply focus-visible:ring-primary;
+
+            :root .light & {
+                @apply text-primary border-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;
+            }
+        }
+
+        &.uxf-button--color-success {
+            @apply focus-visible:ring-success;
+
+            :root .light & {
+                @apply text-success border-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;
+            }
+        }
+
+        &.uxf-button--color-error {
+            @apply focus-visible:ring-error;
+
+            :root .light & {
+                @apply text-error border-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;
+            }
+        }
+
+        &.is-disabled {
+            :root .light & {
+                @apply border-gray-300 bg-gray-300 text-lightLow;
+            }
+
+            :root .dark & {
+                @apply border-gray-700 bg-gray-700 text-darkLow;
+            }
+        }
+    }
+
+    &--variant-default {
+        @apply text-white;
+
+        :root .dark & {
+            @apply focus-visible:ring-offset-gray-900;
+        }
+
+        &.uxf-button--color-default {
+            @apply focus-visible:ring-primary;
+
+            :root .light & {
+                @apply bg-primary is-hoverable:bg-primary-700;
+            }
+
+            :root .dark & {
+                @apply bg-primary is-hoverable:bg-primary-400;
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply bg-gray-300 text-lightLow;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-600 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-success {
+            @apply focus-visible:ring-success;
+
+            :root .light & {
+                @apply bg-success is-hoverable:bg-success-700;
+            }
+
+            :root .dark & {
+                @apply bg-success is-hoverable:bg-success-400;
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply bg-gray-300 text-lightLow;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-600 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-error {
+            @apply focus-visible:ring-error;
+
+            :root .light & {
+                @apply bg-error is-hoverable:bg-error-700;
+            }
+
+            :root .dark & {
+                @apply bg-error is-hoverable:bg-error-400;
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply bg-gray-300 text-lightLow;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-600 text-gray-400;
+                }
+            }
+        }
+    }
+
+    &--variant-white {
+        @apply border focus-visible:ring-primary;
+
+        :root .light & {
+            @apply border-lightBorder bg-white is-hoverable:bg-gray-100 text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply border-darkBorder text-darkMedium bg-lightHigh is-hoverable:bg-gray-800 is-hoverable:text-darkHigh;
+        }
+
+        &.is-disabled {
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-darkLow border-darkBorder;
+            }
+        }
+    }
+
+    &--variant-text {
+        @apply shadow-none;
+
+        &.uxf-button--color-default {
+            :root .light & {
+                @apply text-lightMedium is-hoverable:text-lightHigh;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium is-hoverable:text-darkHigh;
+            }
+        }
+
+        &.uxf-button--color-success {
+            @apply text-success;
+
+            :root .light & {
+                @apply is-hoverable:text-success-700;
+            }
+
+            :root .dark & {
+                @apply is-hoverable:text-success-300;
+            }
+        }
+
+        &.uxf-button--color-error {
+            @apply text-error;
+
+            :root .light & {
+                @apply is-hoverable:text-error-700;
+            }
+
+            :root .dark & {
+                @apply is-hoverable:text-error-300;
+            }
+        }
+
+        &.is-disabled {
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-darkLow;
+            }
+        }
+    }
+}

package/css/calendar.css

@@ -0,0 +1,151 @@
+.uxf-calendar {
+    &__cell-day {
+        align-items: center;
+        background-color: theme("backgroundColor.white");
+        color: theme("colors.lightMedium");
+        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;
+
+        --compensated-radii: calc(theme("borderRadius.md") - theme("spacing.px"));
+
+        :root .dark & {
+            background-color: theme("backgroundColor.gray.900");
+            color: theme("colors.darkMedium");
+        }
+
+        &:hover {
+            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;
+            }
+        }
+
+        &: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);
+        }
+
+        &--not-current-month {
+            background-color: theme("backgroundColor.gray.100");
+            color: theme("colors.lightLow");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.gray.800");
+                color: theme("colors.darkLow");
+            }
+        }
+
+        &--selected {
+            background-color: theme("backgroundColor.primary.500");
+            color: theme("colors.white");
+
+            :root .dark & {
+                background-color: theme("backgroundColor.primary.500");
+                color: theme("colors.white");
+            }
+
+            &:hover {
+                background-color: theme("backgroundColor.primary.500");
+
+                :root .dark & {
+                    background-color: theme("backgroundColor.primary.500");
+                }
+            }
+        }
+
+        &--today {
+            .uxf-calendar__cell-day__inner {
+                align-items: center;
+                background-color: theme("backgroundColor.lightHigh");
+                border-radius: 999px;
+                color: theme("colors.white");
+                display: inline-flex;
+                height: 32px;
+                justify-content: center;
+                position: relative;
+                width: 32px;
+
+                :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");
+                }
+            }
+        }
+    }
+
+    &__weekdays {
+        color: theme("colors.lightLow");
+        column-gap: 1px;
+        display: grid;
+        font-size: 10px;
+        font-weight: theme("fontWeight.semibold");
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        padding: 0 1px;
+        text-align: center;
+        text-transform: uppercase;
+
+        :root .dark & {
+            color: theme("colors.darkLow");
+        }
+    }
+
+    &__weekday {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 32px;
+        justify-content: center;
+    }
+
+    &__days {
+        background-color: theme("backgroundColor.lightBorder");
+        border-radius: 6px;
+        display: grid;
+        gap: 1px;
+        grid-template-columns: repeat(7, minmax(0, 1fr));
+        padding: 1px;
+        text-align: center;
+
+        :root .dark & {
+            background-color: theme("backgroundColor.darkBorder");
+        }
+    }
+}

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;
+        }
+    }
+}