@uxf/ui 1.0.0-beta.13 → 1.0.0-beta.130

package/css/button.css

@@ -0,0 +1,327 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-button {
+    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm
+        focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
+
+    .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 {
+            :root .light & {
+                @apply text-primary-500 border-primary-500 hover:border-primary-700 hover:text-primary-700;
+            }
+
+            :root .dark & {
+                @apply text-primary-500 border-primary-500 hover:border-primary-300 hover:text-primary-300;
+            }
+        }
+
+        &.uxf-button--color-success {
+            :root .light & {
+                @apply text-success-500 border-success-500 hover:border-success-700 hover:text-success-700;
+            }
+
+            :root .dark & {
+                @apply text-success-500 border-success-500 hover:border-success-300 hover:text-success-300;
+            }
+        }
+
+        &.uxf-button--color-error {
+            :root .light & {
+                @apply text-error-500 border-error-500 hover:border-error-700 hover:text-error-700;
+            }
+
+            :root .dark & {
+                @apply text-error-500 border-error-500 hover:border-error-300 hover: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;
+
+        &.uxf-button--color-default {
+            @apply focus-visible:ring-primary-500;
+
+            :root .light & {
+                @apply bg-primary-500 hover:bg-primary-700;
+            }
+
+            :root .dark & {
+                @apply bg-primary-500 hover: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-500;
+
+            :root .light & {
+                @apply bg-success-500 hover:bg-success-700;
+            }
+
+            :root .dark & {
+                @apply bg-success-500 hover: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-500;
+
+            :root .light & {
+                @apply bg-error-500 hover:bg-error-700;
+            }
+
+            :root .dark & {
+                @apply bg-error-500 hover: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;
+
+        :root .light & {
+            @apply border-lightBorder bg-white hover:bg-gray-100 text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply border-darkBorder text-darkMedium bg-lightHigh hover:bg-gray-800 hover: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 {
+            @apply text-primary-500;
+
+            :root .light & {
+                @apply hover:text-primary-700;
+            }
+
+            :root .dark & {
+                @apply hover:text-primary-300;
+            }
+        }
+
+        &.uxf-button--color-success {
+            @apply text-success-500;
+
+            :root .light & {
+                @apply hover:text-success-700;
+            }
+
+            :root .dark & {
+                @apply hover:text-success-300;
+            }
+        }
+
+        &.uxf-button--color-error {
+            @apply text-error-500;
+
+            :root .light & {
+                @apply hover:text-error-700;
+            }
+
+            :root .dark & {
+                @apply hover:text-error-300;
+            }
+        }
+
+        &.is-disabled {
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-darkLow;
+            }
+        }
+    }
+}

package/css/button.old.css

@@ -0,0 +1,231 @@
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.uxf-button {
+    @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
+        before:transition;
+
+    &__text {
+        @apply truncate;
+    }
+
+    &--full-width {
+        @apply w-full flex flex-row justify-center;
+    }
+
+    &.is-disabled {
+        @apply pointer-events-none;
+    }
+
+    &.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;
+        }
+    }
+
+    &--size-xs {
+        @apply px-2.5 py-1.5 text-xs;
+
+        &.is-loading::after {
+            height: 14px;
+            width: 14px;
+        }
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-7 w-7;
+        }
+    }
+
+    &--size-sm {
+        @apply px-3 py-2 text-sm leading-4;
+
+        &.is-loading::after {
+            height: 16px;
+            width: 16px;
+        }
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-8 w-8;
+        }
+    }
+
+    &--size-default {
+        @apply px-4 py-3 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-12 w-12;
+        }
+    }
+
+    &--size-lg {
+        @apply px-8 py-5 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-16 w-16;
+        }
+    }
+
+    &--size-xl {
+        @apply px-10 py-6 text-base;
+
+        &.uxf-button--icon-button {
+            @apply p-0 h-[72px] w-[72px];
+        }
+    }
+
+    &--variant-outlined {
+        @apply before:absolute before:pointer-events-none before:inset-0 before:border is-hoverable:before:border-2
+            bg-transparent;
+
+        :root .light & {
+            @apply before:border-gray-300 is-hoverable:bg-primary-100 is-hoverable:before:border-primary-400
+                focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+
+            &.is-disabled {
+                @apply before:border-gray-100 text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply before:border-gray-300 is-hoverable:bg-white/10 focus-visible:ring-primary-500
+                focus-visible:ring-offset-gray-900;
+
+            &.is-disabled {
+                @apply before:border-gray-700 text-gray-600;
+            }
+        }
+    }
+
+    &--variant-default {
+        @apply text-white;
+
+        &.uxf-button--color-default {
+            :root .light & {
+                @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-white {
+            :root .light & {
+                @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            @apply bg-gray-50 text-gray-700 is-hoverable:bg-gray-100 focus-visible:ring-gray-500;
+        }
+
+        &.uxf-button--color-success {
+            :root .light & {
+                @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-warning {
+            :root .light & {
+                @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+
+        &.uxf-button--color-error {
+            :root .light & {
+                @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
+
+                &.is-disabled {
+                    @apply bg-gray-100 text-gray-400;
+                }
+            }
+
+            :root .dark & {
+                @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500
+                    focus-visible:ring-offset-gray-900;
+
+                &.is-disabled {
+                    @apply bg-gray-700 text-gray-400;
+                }
+            }
+        }
+    }
+
+    &--variant-text {
+        @apply before:border-transparent;
+
+        :root .light & {
+            @apply is-hoverable:bg-gray-200 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+
+            &.is-disabled {
+                @apply text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply is-hoverable:bg-gray-800 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+
+            &.is-disabled {
+                @apply text-gray-600;
+            }
+        }
+    }
+}

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-500;
+
+        .uxf-checkbox-button__icon {
+            @apply before:border-gray-600;
+        }
+
+        .uxf-checkbox-button__label {
+            @apply text-gray-600;
+        }
+
+        &.is-selected {
+            @apply bg-primary-500;
+
+            .uxf-checkbox-button__icon {
+                @apply text-primary-500 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-red-600;
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-800 focus-visible:ring-primary-500 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-500;
+
+            .uxf-checkbox-button__icon {
+                @apply text-primary-500 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-red-600;
+        }
+    }
+}