@uxf/ui 1.0.0-beta.11 → 1.0.0-beta.111

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

package/css/checkbox.css

@@ -0,0 +1,147 @@
+.uxf-checkbox-visual-wrapper {
+    @apply outline-none leading-none rounded relative
+        before:absolute before:leading-none before:-inset-[3px] before:rounded-md focus-visible:before:border-2;
+
+    :root .light & {
+        @apply focus-visible:before:border-primary-500;
+    }
+
+    :root .dark & {
+        @apply focus-visible:before:border-primary-500;
+    }
+}
+
+.uxf-checkbox {
+    @apply shrink-0 flex items-center justify-center rounded  transition outline-none border
+    ;
+
+    &__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;
+        }
+    }
+
+    &__icon {
+        @apply hidden;
+    }
+
+    &.is-selected {
+        .uxf-checkbox__icon {
+            @apply block;
+        }
+    }
+
+    &--size-default {
+        @apply h-4 w-4;
+
+        .uxf-checkbox__icon {
+            @apply w-2.5 h-2.5;
+        }
+    }
+
+    &--size-lg {
+        @apply h-6 w-6;
+
+        .uxf-checkbox__icon {
+            @apply w-4 h-4;
+        }
+    }
+
+    &.is-focused {
+        @apply ring-offset-2 ring-2;
+    }
+
+    :root .light & {
+        @apply border-gray-400;
+
+        &.is-selected {
+            @apply bg-primary-500 border-transparent;
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-200 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-200;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-gray-400;
+            }
+        }
+
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary-500/60;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply border-gray-400;
+
+        &.is-selected {
+            @apply bg-primary-500 border-transparent;
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+
+        &.is-disabled {
+            @apply border-gray-600 pointer-events-none;
+
+            &.is-selected {
+                @apply bg-gray-600;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-gray-800;
+            }
+        }
+
+        &.is-readonly {
+            &.is-selected {
+                @apply bg-primary-500/60;
+            }
+        }
+
+        &.is-invalid {
+            @apply border-red-600;
+
+            &.is-selected {
+                @apply bg-red-600;
+            }
+
+            .uxf-checkbox__icon {
+                @apply text-white;
+            }
+        }
+    }
+}

package/css/chip.css

@@ -0,0 +1,189 @@
+.uxf-chip {
+    @apply inline-flex items-center rounded py-0.5 px-2 text-xs max-w-full;
+
+    &.has-button {
+        @apply pr-1;
+    }
+
+    &--size-large {
+        @apply text-sm rounded-md px-2.5;
+
+        .uxf-chip__button {
+            @apply h-4 w-4;
+        }
+    }
+
+    &__text {
+        @apply truncate;
+    }
+
+    &__button {
+        @apply ml-1 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded;
+
+        svg {
+            @apply h-2 w-2;
+        }
+    }
+
+    &--color-default {
+        :root .light & {
+            @apply text-gray-700 bg-gray-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-gray-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-gray-100 bg-gray-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-gray-800;
+            }
+        }
+    }
+
+    &--color-orange {
+        :root .light & {
+            @apply text-orange-700 bg-orange-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-orange-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-orange-100 bg-orange-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-orange-800;
+            }
+        }
+    }
+
+    &--color-red {
+        :root .light & {
+            @apply text-red-700 bg-red-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-red-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-red-100 bg-red-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-red-800;
+            }
+        }
+    }
+
+    &--color-yellow {
+        :root .light & {
+            @apply text-yellow-700 bg-yellow-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-yellow-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-yellow-100 bg-yellow-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-yellow-800;
+            }
+        }
+    }
+
+    &--color-green {
+        :root .light & {
+            @apply text-green-700 bg-green-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-green-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-green-100 bg-green-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-green-800;
+            }
+        }
+    }
+
+    &--color-blue {
+        :root .light & {
+            @apply text-blue-700 bg-blue-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-blue-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-blue-100 bg-blue-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-blue-800;
+            }
+        }
+    }
+
+    &--color-indigo {
+        :root .light & {
+            @apply text-indigo-700 bg-indigo-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-indigo-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-indigo-100 bg-indigo-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-indigo-800;
+            }
+        }
+    }
+
+    &--color-purple {
+        :root .light & {
+            @apply text-purple-700 bg-purple-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-purple-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-purple-100 bg-purple-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-purple-800;
+            }
+        }
+    }
+
+    &--color-pink {
+        :root .light & {
+            @apply text-pink-700 bg-pink-100;
+
+            .uxf-chip__button {
+                @apply hover:bg-pink-200;
+            }
+        }
+
+        :root .dark & {
+            @apply text-pink-100 bg-pink-700;
+
+            .uxf-chip__button {
+                @apply hover:bg-pink-800;
+            }
+        }
+    }
+}

package/css/chip.old.css

@@ -0,0 +1,37 @@
+.uxf-chip {
+    @apply inline-block rounded-lg py-1 px-2 text-xs h-fit;
+
+    &__text {
+        @apply truncate;
+    }
+
+    &--color-success {
+        :root .light & {
+            @apply text-success-600 bg-success-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-success-600;
+        }
+    }
+
+    &--color-warning {
+        :root .light & {
+            @apply text-warning-600 bg-warning-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-warning-600;
+        }
+    }
+
+    &--color-error {
+        :root .light & {
+            @apply text-error-600 bg-error-100;
+        }
+
+        :root .dark & {
+            @apply text-white bg-error-600;
+        }
+    }
+}

package/css/color-radio-group.css

@@ -0,0 +1,21 @@
+.uxf-color-radio-group {
+    &__option {
+        @apply rounded-full outline-none focus-visible:ring-offset-2 focus-visible:ring-2;
+
+        :root .light & {
+            @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-white;
+        }
+
+        :root .dark & {
+            @apply focus-visible:ring-[color:var(--option-color)] focus-visible:ring-offset-gray-900;
+        }
+    }
+
+    &__label {
+        @apply mb-2;
+    }
+
+    &__options-wrapper {
+        @apply flex flex-wrap gap-3.5;
+    }
+}

package/css/color-radio.css

@@ -0,0 +1,21 @@
+.uxf-color-radio {
+    @apply shrink-0 inline-flex items-center justify-center rounded-full h-7 w-7 bg-[color:var(--bg-color)];
+
+    &__label {
+        @apply sr-only;
+    }
+
+    &__icon {
+        @apply w-4 h-4 text-white opacity-0 transition-opacity;
+    }
+
+    &__icon--dark {
+        @apply text-gray-900;
+    }
+
+    &.is-selected {
+        .uxf-color-radio__icon {
+            @apply opacity-100;
+        }
+    }
+}

package/css/combobox.css

@@ -0,0 +1,108 @@
+.uxf-combobox {
+    @apply relative;
+
+    &__button {
+        height: theme("inputSize.default");
+
+        @apply relative flex w-full cursor-default flex-row items-center rounded-lg px-4 text-left shadow-sm
+            outline-none 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;
+
+            .is-empty {
+                @apply text-lightLow;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-darkHigh before:border-gray-700;
+
+            .is-empty {
+                @apply text-darkLow;
+            }
+        }
+
+        &.is-focused {
+            @apply ring-2;
+
+            :root .light & {
+                @apply before:border-none ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply ring-primary-500;
+            }
+        }
+
+        &.is-invalid {
+            @apply ring-1;
+
+            :root .light & {
+                @apply ring-error-500 text-error-500;
+
+                .uxf-combobox__input {
+                    @apply placeholder:text-error-500;
+                }
+            }
+
+            :root .dark & {
+                @apply ring-error-500 text-error-500;
+
+                .uxf-combobox__input {
+                    @apply placeholder:text-error-500;
+                }
+            }
+        }
+    }
+
+    &__input {
+        @apply flex-grow bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none;
+
+        :root .light & {
+            @apply placeholder:text-lightLow;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-darkLow;
+        }
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+
+    input:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+            margin: 1px 0;
+
+            :root .dark & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                caret-color: white;
+                -webkit-text-fill-color: theme("colors.gray.300");
+            }
+
+            :root .light & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+            }
+        }
+    }
+}

package/css/combobox.old.css

@@ -0,0 +1,102 @@
+.uxf-combobox {
+    @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 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;
+
+            .is-empty {
+                @apply text-lightLow;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-darkHigh before:border-gray-700;
+
+            .is-empty {
+                @apply text-darkLow;
+            }
+        }
+
+        &.is-focused {
+            @apply ring-2;
+
+            :root .light & {
+                @apply before:border-none ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply ring-primary-500;
+            }
+        }
+
+        &.is-invalid {
+            @apply ring-1;
+
+            :root .light & {
+                @apply ring-error-500 text-error-500;
+
+                .uxf-combobox__input {
+                    @apply placeholder:text-error-500;
+                }
+            }
+
+            :root .dark & {
+                @apply ring-error-500 text-error-500;
+
+                .uxf-combobox__input {
+                    @apply placeholder:text-error-500;
+                }
+            }
+        }
+    }
+
+    &__input {
+        @apply flex-grow bg-inherit focus-visible:ring-0 focus-visible:border-0 focus-visible:outline-none;
+
+        :root .light & {
+            @apply placeholder:text-lightLow;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-darkLow;
+        }
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+
+    input:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+            margin: 1px 0;
+
+            :root .dark & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                caret-color: white;
+                -webkit-text-fill-color: theme("colors.gray.300");
+            }
+
+            :root .light & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.100");
+            }
+        }
+    }
+}