@uxf/ui 1.0.0-beta.10 → 1.0.0-beta.100

package/css/avatar-file-input.css

@@ -0,0 +1,82 @@
+.uxf-avatar-file-input {
+    &__input {
+        @apply hidden;
+    }
+
+    &__label {
+        @apply cursor-pointer h-20 w-20 rounded-full flex items-center justify-center border-2 border-dashed
+            transition-all duration-75 ease-in-out;
+
+        :root .light & {
+            @apply border-lightLow;
+        }
+
+        :root .dark & {
+            @apply border-lightBorder;
+        }
+
+        &__icon {
+            :root .light & {
+                @apply text-lightLow;
+            }
+
+            :root .dark & {
+                @apply text-lightBorder;
+            }
+
+            &.is-invalid {
+                :root .light & {
+                    @apply text-error-500;
+                }
+
+                :root .dark & {
+                    @apply text-error-500;
+                }
+            }
+        }
+
+        &:hover {
+            @apply border-4;
+        }
+
+        &.is-invalid {
+            :root .light & {
+                @apply border-error-500;
+            }
+
+            :root .dark & {
+                @apply border-error-500;
+            }
+        }
+
+        &.is-disabled {
+            @apply cursor-not-allowed bg-lightLow/20;
+
+            &:hover {
+                @apply border-2;
+            }
+        }
+    }
+
+    &__label-text {
+        @apply text-sm text-center;
+
+        :root .light & {
+            @apply text-lightLow;
+        }
+
+        :root .dark & {
+            @apply text-lightBorder;
+        }
+
+        &.is-invalid {
+            :root .light & {
+                @apply text-error-500;
+            }
+
+            :root .dark & {
+                @apply text-error-500;
+            }
+        }
+    }
+}

package/css/avatar.css

@@ -0,0 +1,15 @@
+.uxf-avatar {
+    @apply relative inline-flex items-center justify-center h-10 w-10 rounded-full;
+
+    &__image {
+        @apply absolute left-0 top-0 block h-full w-full rounded-inherit object-cover;
+    }
+
+    :root .light & {
+        @apply text-gray-700 bg-gray-200;
+    }
+
+    :root .dark & {
+        @apply text-gray-200 bg-gray-800;
+    }
+}

package/css/badge.css

@@ -0,0 +1,23 @@
+.uxf-badge {
+    @apply inline-flex items-center justify-center font-bold;
+
+    &--size-small {
+        @apply h-6 min-w-[24px] text-sm rounded-[12px] px-1.5;
+    }
+
+    &--size-medium {
+        @apply h-8 min-w-[32px] text-base rounded-[16px] px-2;
+    }
+
+    &--size-large {
+        @apply h-10 min-w-[40px] text-lg rounded-[20px] px-2;
+    }
+
+    :root .light & {
+        @apply text-white bg-primary-500;
+    }
+
+    :root .dark & {
+        @apply text-gray-900 bg-white;
+    }
+}

package/css/button.css

@@ -0,0 +1,221 @@
+@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 bg-white;
+
+        &.uxf-button--color-default {
+            @apply text-primary-600 border-primary-500 hover:bg-primary-50;
+        }
+
+        &.uxf-button--color-success {
+            @apply text-success-600 border-success-500 hover:bg-success-50;
+        }
+
+        &.uxf-button--color-error {
+            @apply text-error-600 border-error-500 hover:bg-error-50;
+        }
+
+        &.is-disabled {
+            @apply border-gray-300 text-gray-400;
+        }
+    }
+
+    &--variant-default {
+        @apply text-white;
+
+        &.uxf-button--color-default {
+            @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;
+            }
+        }
+
+        &.uxf-button--color-success {
+            @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;
+            }
+        }
+
+        &.uxf-button--color-error {
+            @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;
+            }
+        }
+    }
+
+    &--variant-white {
+        @apply border border-gray-300 bg-white hover:bg-gray-50;
+
+        &.uxf-button--color-default {
+            @apply text-primary-600;
+        }
+
+        &.uxf-button--color-success {
+            @apply text-success-600;
+        }
+
+        &.uxf-button--color-error {
+            @apply text-error-600;
+        }
+
+        &.is-disabled {
+            @apply border-gray-300 text-gray-400;
+        }
+    }
+
+    &--variant-text {
+        @apply shadow-none;
+
+        &.uxf-button--color-default {
+            @apply text-primary-600 hover:text-primary-800;
+        }
+
+        &.uxf-button--color-success {
+            @apply text-success-600 hover:text-success-800;
+        }
+
+        &.uxf-button--color-error {
+            @apply text-error-600 hover:text-error-800;
+        }
+
+        &.is-disabled {
+            @apply text-gray-400;
+        }
+    }
+}

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