@uxf/ui 1.0.0-beta.12 → 1.0.0-beta.121

package/css/pagination.css

@@ -0,0 +1,89 @@
+.uxf-pagination {
+    @apply isolate inline-flex rounded-md -space-x-px;
+
+    &__button {
+        @apply relative inline-flex items-center border text-sm font-medium focus:z-10 cursor-pointer;
+
+        :root .light & {
+            @apply border-gray-300 bg-white text-gray-500 hover:bg-gray-50;
+        }
+
+        :root .dark & {
+            @apply border-gray-600 bg-gray-900 text-gray-200 hover:bg-gray-800;
+        }
+
+        &.is-selected {
+            @apply z-10;
+
+            :root .light & {
+                @apply bg-indigo-50 border border-primary-500 text-primary-600;
+            }
+
+            :root .dark & {
+                @apply bg-indigo-900/20 border border-primary-700 text-primary-300;
+            }
+        }
+
+        &.is-first {
+            @apply rounded-l-md;
+        }
+
+        &.is-last {
+            @apply rounded-r-md;
+        }
+
+        &.is-disabled {
+            @apply cursor-not-allowed;
+
+            :root .light & {
+                @apply text-neutral-300 hover:bg-white;
+            }
+
+            :root .dark & {
+                @apply text-neutral-500 hover:bg-gray-800;
+            }
+        }
+
+        &.is-ellipsis {
+            @apply pointer-events-none;
+
+            :root .light & {
+                @apply text-neutral-300 hover:bg-white;
+            }
+
+            :root .dark & {
+                @apply text-neutral-500 hover:bg-gray-800;
+            }
+        }
+    }
+
+    &--size-xs .uxf-pagination__button {
+        height: theme("inputSize.xs");
+
+        @apply px-2;
+    }
+
+    &--size-sm .uxf-pagination__button {
+        height: theme("inputSize.sm");
+
+        @apply px-3;
+    }
+
+    &--size-default .uxf-pagination__button {
+        height: theme("inputSize.default");
+
+        @apply px-4;
+    }
+
+    &--size-lg .uxf-pagination__button {
+        height: theme("inputSize.lg");
+
+        @apply px-5;
+    }
+
+    &--size-xl .uxf-pagination__button {
+        height: theme("inputSize.xl");
+
+        @apply px-6;
+    }
+}

package/css/paper.css

@@ -0,0 +1,3 @@
+.uxf-paper {
+    @apply bg-white rounded-lg shadow-paper;
+}

package/css/radio-group.css

@@ -0,0 +1,160 @@
+.uxf-radio-group {
+    &__option {
+        @apply outline-none focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:rounded-lg;
+    }
+
+    &__option__wrapper {
+        @apply flex justify-between;
+    }
+
+    &__option__label {
+        @apply line-clamp-2;
+    }
+
+    &__label {
+        @apply mb-2;
+    }
+
+    :root .light & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+        }
+
+        .uxf-radio-group__option__label {
+            @apply text-gray-600;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            &.is-selected {
+                .uxf-radio-group__option__label {
+                    @apply text-gray-900;
+                }
+            }
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        }
+
+        .uxf-radio-group__option__label {
+            @apply text-white/80;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            &.is-selected {
+                .uxf-radio-group__option__label {
+                    @apply text-white;
+                }
+            }
+        }
+    }
+}
+
+.uxf-radio-group--list {
+    .uxf-radio-group__options-wrapper {
+        @apply divide-y;
+    }
+
+    .uxf-radio-group__option__wrapper {
+        @apply items-center py-4;
+    }
+
+    .uxf-radio-group__option__label {
+        @apply pr-4;
+    }
+
+    :root .light & {
+        .uxf-radio-group__options-wrapper {
+            @apply divide-gray-200;
+        }
+
+        .uxf-radio-group--list__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group__options-wrapper {
+            @apply divide-gray-800;
+        }
+
+        .uxf-radio-group--list__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        }
+    }
+}
+
+.uxf-radio-group--radioButton {
+    .uxf-radio-group__options-wrapper {
+        @apply flex flex-wrap gap-2;
+    }
+
+    .uxf-radio-group__option__wrapper {
+        @apply flex-col-reverse min-w-[112px] p-3 relative
+            before:absolute before:inset-0 before:pointer-events-none before:border before:rounded-lg;
+
+        &.is-selected {
+            @apply before:border-2;
+        }
+    }
+
+    .uxf-radio-group__option__label {
+        @apply pt-4 text-sm;
+    }
+
+    :root .light & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-primary-500;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            @apply before:border-gray-400;
+
+            &.is-selected {
+                @apply before:border-primary-500;
+            }
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        }
+
+        .uxf-radio-group__option__wrapper {
+            @apply border-gray-400;
+
+            &.is-selected {
+                @apply before:border-primary-500;
+            }
+        }
+    }
+}
+
+.uxf-radio-group--row {
+    .uxf-radio-group__options-wrapper {
+        @apply flex items-center space-x-10;
+    }
+
+    .uxf-radio-group__option__wrapper {
+        @apply flex-row-reverse items-center;
+    }
+
+    .uxf-radio-group__option__label {
+        @apply pl-2;
+    }
+
+    :root .light & {
+        .uxf-radio-group--row__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group--row__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        }
+    }
+}

package/css/radio.css

@@ -0,0 +1,105 @@
+.uxf-radio {
+    @apply flex shrink-0 items-center justify-center border rounded-full transition focus-visible:ring-2;
+
+    &__label {
+        @apply sr-only;
+    }
+
+    &__inner {
+        @apply rounded-full opacity-0 transition;
+    }
+
+    &.is-selected {
+        .uxf-radio__inner {
+            @apply opacity-100;
+        }
+    }
+
+    &--size-default {
+        @apply h-4 w-4;
+
+        .uxf-radio__inner {
+            @apply w-1.5 h-1.5;
+        }
+    }
+
+    &--size-lg {
+        @apply h-6 w-6;
+
+        .uxf-radio__inner {
+            @apply w-2.5 h-2.5;
+        }
+    }
+
+    :root .light & {
+        @apply border-gray-400 focus-visible:ring-primary-500;
+
+        &.is-selected {
+            @apply bg-primary-500 border-none;
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-200 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-200;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-gray-400;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply border-gray-400 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+
+        &.is-selected {
+            @apply bg-primary-500 border-none;
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-600 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-600;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-gray-800;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-radio__inner {
+                @apply bg-white;
+            }
+        }
+    }
+}

package/css/raster-image.css

@@ -0,0 +1,20 @@
+.uxf-raster-image {
+    @apply block w-full;
+
+    &--contain,
+    &--cover {
+        @apply relative;
+    }
+
+    &__img {
+        @apply block w-full h-auto;
+
+        &--contain {
+            @apply absolute inset-0 h-full object-contain;
+        }
+
+        &--cover {
+            @apply absolute inset-0 h-full object-cover;
+        }
+    }
+}

package/css/select.css

@@ -0,0 +1,88 @@
+.uxf-select {
+    @apply relative;
+
+    &__button {
+        @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
+            outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
+            before:rounded-lg;
+
+        .uxf-icon {
+            @apply h-3;
+        }
+
+        :root .light & {
+            @apply bg-white text-lightHigh before:border-gray-200 focus-visible:before:border-none
+                focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-lightLow;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-darkLow;
+            }
+        }
+
+        &.is-invalid {
+            @apply ring-1;
+
+            :root .light & {
+                @apply ring-error-500 text-error-500;
+
+                .is-empty {
+                    @apply text-error-500;
+                }
+            }
+
+            :root .dark & {
+                @apply ring-error-500 text-error-500;
+
+                .is-empty {
+                    @apply text-error-500;
+                }
+            }
+        }
+    }
+
+    &__button-text {
+        @apply flex-grow truncate;
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+
+    &--size-sm .uxf-select__button {
+        height: theme("inputSize.sm");
+
+        @apply text-sm;
+    }
+
+    &--size-default .uxf-select__button {
+        height: theme("inputSize.default");
+
+        @apply text-base;
+    }
+
+    &--size-lg .uxf-select__button {
+        height: theme("inputSize.lg");
+
+        @apply text-lg;
+    }
+}

package/css/select.old.css

@@ -0,0 +1,66 @@
+.uxf-select {
+    @apply relative;
+
+    &__button {
+        @apply relative flex h-12 w-full cursor-default flex-row items-center rounded-lg py-3 px-4 text-left
+            outline-none focus-visible:ring-2 before:absolute before:inset-0 before:pointer-events-none before:border
+            before:rounded-lg;
+
+        :root .light & {
+            @apply bg-gray-100 text-lightHigh before:border-gray-200 focus-visible:before:border-none
+                focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-lightLow;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-darkHigh before:border-gray-700 focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-darkLow;
+            }
+        }
+
+        &.is-invalid {
+            @apply ring-1;
+
+            :root .light & {
+                @apply ring-error-500 text-error-500;
+
+                .is-empty {
+                    @apply text-error-500;
+                }
+            }
+
+            :root .dark & {
+                @apply ring-error-500 text-error-500;
+
+                .is-empty {
+                    @apply text-error-500;
+                }
+            }
+        }
+    }
+
+    &__button-text {
+        @apply flex-grow;
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+}

package/css/tabs.css

@@ -0,0 +1,131 @@
+.uxf-tabs {
+    @apply w-full;
+
+    &--grow {
+        .uxf-tabs__tab {
+            @apply grow;
+        }
+    }
+
+    &__tab-list__wrapper {
+        @apply w-full mb-6 overflow-auto;
+
+        &--default {
+            @apply relative before:absolute before:pointer-events-none before:bottom-0 before:w-full before:border-b-2;
+
+            :root .light & {
+                @apply before:border-b-gray-100;
+            }
+
+            :root .dark & {
+                @apply before:border-b-gray-800;
+            }
+        }
+
+        &--segmented {
+            @apply rounded-lg;
+
+            :root .light & {
+                @apply bg-gray-100;
+            }
+
+            :root .dark & {
+                @apply bg-gray-700;
+            }
+        }
+    }
+
+    &__tab-list {
+        @apply flex items-center text-base font-semibold overflow-x-auto whitespace-nowrap w-full;
+
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &--default {
+            @apply py-1.5 px-1 space-x-2;
+        }
+
+        &--segmented {
+            @apply p-1 space-x-1;
+        }
+    }
+
+    &__tab {
+        @apply inline-flex text-center items-center justify-center px-2 py-2 whitespace-nowrap transition-colors
+            outline-none cursor-pointer is-disabled:pointer-events-none
+            focus-visible:ring-2 focus-visible:ring-offset-1 overflow-visible;
+
+        &--default {
+            @apply relative rounded-lg before:absolute before:bottom-[-6px] before:w-full before:border-b-2
+                before:opacity-0 before:transition;
+
+            :root .light & {
+                @apply text-lightMedium hover:bg-gray-100 focus-visible:ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium hover:bg-gray-800 focus-visible:ring-primary-500
+                    focus-visible:ring-offset-gray-900;
+            }
+
+            &.is-active {
+                @apply before:opacity-100 ;
+
+                :root .light & {
+                    @apply text-lightHigh before:border-b-primary-500 hover:bg-transparent;
+                }
+
+                :root .dark & {
+                    @apply text-darkHigh before:border-b-primary-500 hover:bg-transparent;
+                }
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply text-lightLow;
+                }
+
+                :root .dark & {
+                    @apply text-darkLow;
+                }
+            }
+        }
+
+        &--segmented {
+            @apply rounded;
+
+            :root .light & {
+                @apply text-lightMedium bg-gray-100 hover:text-primary-600 hover:bg-primary-100
+                    focus-visible:ring-primary-500 focus-visible:ring-offset-gray-100;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium bg-gray-700 hover:bg-gray-800 focus-visible:ring-primary-500
+                    focus-visible:ring-offset-gray-700;
+            }
+
+            &.is-active {
+                :root .light & {
+                    @apply text-white bg-primary-500;
+                }
+
+                :root .dark & {
+                    @apply text-white bg-primary-500;
+                }
+            }
+
+            &.is-disabled {
+                :root .light & {
+                    @apply text-gray-400;
+                }
+
+                :root .dark & {
+                    @apply text-gray-500;
+                }
+            }
+        }
+    }
+}

package/css/text-link.css

@@ -0,0 +1,12 @@
+.uxf-text-link {
+    @apply underline transition outline-none relative before:absolute before:-inset-1
+        focus-visible:before:border-2 focus-visible:before:rounded-lg;
+
+    :root .light & {
+        @apply text-primary-500 is-hoverable:text-primary-400 focus-visible:before:border-primary-500;
+    }
+
+    :root .dark & {
+        @apply text-primary-500 is-hoverable:text-primary-400 focus-visible:before:border-primary-500;
+    }
+}