@uxf/ui 1.0.1 → 10.0.0-beta.5

package/css/chip.css

@@ -0,0 +1,591 @@
+.uxf-chip {
+    @apply inline-flex items-center rounded-lg px-2 max-w-full;
+
+    &.has-button {
+        @apply pr-1;
+    }
+
+    &--size-default {
+        @apply text-sm h-6;
+
+        .uxf-chip__button {
+            @apply h-4 w-4;
+        }
+    }
+
+    &--size-small {
+        @apply text-xs h-5;
+
+        .uxf-chip__button {
+            @apply h-4 w-4;
+        }
+    }
+
+    &--size-large {
+        @apply text-base h-7;
+
+        .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;
+        }
+    }
+
+    &--variant-default {
+        &.uxf-chip--color-orange {
+            :root .light & {
+                @apply text-white bg-orange-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-orange-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-orange-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-orange-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-red {
+            :root .light & {
+                @apply text-white bg-red-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-red-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-red-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-red-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-yellow {
+            :root .light & {
+                @apply text-white bg-yellow-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-yellow-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-yellow-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-yellow-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-pink {
+            :root .light & {
+                @apply text-white bg-pink-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-pink-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-pink-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-pink-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-purple {
+            :root .light & {
+                @apply text-white bg-purple-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-purple-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-purple-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-purple-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-indigo {
+            :root .light & {
+                @apply text-white bg-indigo-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-indigo-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-indigo-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-indigo-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-green {
+            :root .light & {
+                @apply text-white bg-green-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-green-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-green-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-green-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-blue {
+            :root .light & {
+                @apply text-white bg-blue-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-blue-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-blue-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-blue-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-default {
+            :root .light & {
+                @apply text-white bg-gray-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-gray-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-gray-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-gray-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-primary {
+            :root .light & {
+                @apply text-white bg-primary-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-primary-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-primary-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-primary-800;
+                }
+            }
+        }
+    }
+
+    &--variant-medium {
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--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;
+                }
+            }
+        }
+
+        &.uxf-chip--color-primary {
+            :root .light & {
+                @apply text-primary-700 bg-primary-100;
+
+                .uxf-chip__button {
+                    @apply hover:bg-primary-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-primary-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-primary-800;
+                }
+            }
+        }
+    }
+
+    &--variant-low {
+        @apply border;
+
+        &.uxf-chip--color-orange {
+            :root .light & {
+                @apply text-orange-500 border-orange-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-orange-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-orange-400 border-orange-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-orange-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-red {
+            :root .light & {
+                @apply text-red-500 border-red-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-red-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-red-400 border-red-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-red-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-yellow {
+            :root .light & {
+                @apply text-yellow-500 border-yellow-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-yellow-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-yellow-400 outline-yellow-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-yellow-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-pink {
+            :root .light & {
+                @apply text-pink-500 border-pink-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-pink-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-pink-400 border-pink-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-pink-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-purple {
+            :root .light & {
+                @apply text-purple-500 border-purple-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-purple-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-purple-400 border-purple-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-purple-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-indigo {
+            :root .light & {
+                @apply text-indigo-500 border-indigo-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-indigo-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-indigo-400 border-indigo-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-indigo-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-green {
+            :root .light & {
+                @apply text-green-500 border-green-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-green-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-green-400 border-green-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-green-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-blue {
+            :root .light & {
+                @apply text-blue-500 border-blue-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-blue-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-blue-400 border-blue-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-blue-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-default {
+            :root .light & {
+                @apply text-gray-500 border-gray-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-gray-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-gray-400 border-gray-400;
+
+                .uxf-chip__button {
+                    @apply hover:bg-gray-800;
+                }
+            }
+        }
+
+        &.uxf-chip--color-primary {
+            :root .light & {
+                @apply text-primary-500 border-primary-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-primary-200;
+                }
+            }
+
+            :root .dark & {
+                @apply text-lightHigh bg-primary-500;
+
+                .uxf-chip__button {
+                    @apply hover:bg-primary-800;
+                }
+            }
+        }
+    }
+}

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 is-disabled:pointer-events-none;
+
+        :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,33 @@
+.uxf-color-radio {
+    @apply relative shrink-0 inline-flex items-center justify-center rounded-full h-7 w-7 bg-[color:var(--bg-color)];
+
+    &__color-label {
+        @apply sr-only;
+    }
+
+    &__inner {
+        @apply w-4 h-4 text-white opacity-0 transition-opacity;
+    }
+
+    &__inner--dark {
+        @apply text-gray-900;
+    }
+
+    &.is-selected {
+        .uxf-color-radio__inner {
+            @apply opacity-100;
+        }
+    }
+
+    &.is-disabled {
+        @apply after:absolute after:inset-0 after:rounded-inherit pointer-events-none;
+
+        :root .light & {
+            @apply after:bg-white/50;
+        }
+
+        :root .dark & {
+            @apply after:bg-black/50;
+        }
+    }
+}

package/css/component-structure-analyzer.css

@@ -0,0 +1,31 @@
+.uxf-component-structure-analyzer {
+    padding-bottom: 32px;
+
+    * {
+        padding: 32px !important;
+        border: 2px solid black !important;
+        position: relative !important;
+        color: lightgray !important;
+        background-color: white !important;
+        border-radius: initial !important;
+        margin: 4px !important;
+        font-family: monospace;
+        font-size: 12px;
+        min-width: 200px;
+        height: auto !important;
+        top: initial !important;
+        left: initial !important;
+        right: initial !important;
+
+        &::before {
+            position: absolute;
+            left: 4px;
+            top: 2px;
+            content: attr(class);
+            font-size: 12px;
+            line-height: 14px;
+            color: black;
+            font-weight: 500;
+        }
+    }
+}

package/css/date-picker.css

@@ -0,0 +1,22 @@
+.uxf-date-picker {
+    @apply w-[296px] sm:w-[340px] mx-auto;
+
+    &__navigation {
+        @apply flex items-center justify-between mb-4;
+
+        &-title {
+            font-size: 14px;
+            font-weight: theme("fontWeight.medium");
+            text-align: center;
+
+            :root .light & {
+                @apply text-lightMedium is-hoverable:text-lightHigh;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium is-hoverable:text-darkHigh;
+            }
+
+        }
+    }
+}

package/css/datetime-picker.css

@@ -0,0 +1,11 @@
+.uxf-datetime-picker {
+    &__tabs {
+        @apply mx-auto w-fit mb-4;
+    }
+
+    &__tab {
+        @apply py-0 text-body2 px-3;
+
+        height: theme("inputSize.xs");
+    }
+}