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

package/css/date-picker-input.css

@@ -0,0 +1,135 @@
+.uxf-date-picker-input {
+    @apply w-full rounded-lg text-base;
+
+    &__element {
+        @apply w-full bg-transparent outline-none;
+
+        :root .light & {
+            @apply text-gray-900 placeholder:text-gray-400;
+        }
+
+        :root .dark & {
+            @apply text-gray-300 placeholder:text-gray-400;
+        }
+    }
+
+    &__left-element {
+        @apply mr-2;
+    }
+
+    &__right-element {
+        @apply ml-2;
+    }
+
+    &__wrapper {
+        height: theme("inputSize.default");
+
+        @apply flex items-center w-full rounded-lg border px-4;
+
+        :root .light & {
+            @apply bg-gray-100 text-gray-900 border-gray-200;
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-gray-300 border-gray-700;
+        }
+    }
+
+    &__popover {
+        @apply absolute left-0 z-dropdown max-w-md rounded-lg border p-2 shadow-xl overflow-y-auto;
+
+        :root .light & {
+            @apply bg-white border-gray-500;
+        }
+
+        :root .dark & {
+            @apply bg-gray-900 border-2 border-gray-700;
+        }
+    }
+
+    &--has-right-addon {
+        .uxf-date-picker-input__wrapper {
+            @apply rounded-r-none;
+        }
+    }
+
+    &.is-focused {
+        .uxf-date-picker-input__wrapper {
+            @apply ring-1 ring-inset ring-offset-0;
+
+            :root .light & {
+                @apply border-primary-500 ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply border-primary-500 ring-primary-500;
+            }
+        }
+    }
+
+    &.is-disabled {
+        @apply cursor-not-allowed;
+
+        .uxf-date-picker-input__wrapper {
+            :root .light & {
+                @apply text-gray-500 bg-gray-300;
+            }
+
+            :root .dark & {
+                @apply text-gray-500 bg-gray-600;
+            }
+        }
+
+        .uxf-date-picker-input__element {
+            @apply cursor-not-allowed;
+        }
+    }
+
+    &.is-readonly {
+        @apply cursor-text;
+
+        .uxf-date-picker-input__element {
+            @apply cursor-text;
+        }
+
+        .uxf-date-picker-input__wrapper {
+            @apply ring-0;
+
+            :root .light & {
+                @apply bg-gray-200 text-gray-700 border-gray-300;
+            }
+
+            :root .dark & {
+                @apply bg-gray-800 text-gray-300 border-gray-500;
+            }
+        }
+    }
+
+    &.is-invalid {
+        &.is-focused {
+            .uxf-date-picker-input__wrapper {
+                :root .light & {
+                    @apply ring-error-500 border-error-500;
+                }
+
+                :root .dark & {
+                    @apply ring-error-500 border-error-500;
+                }
+            }
+        }
+
+        .uxf-date-picker-input__wrapper {
+            @apply text-error-500 border-error-500 placeholder:text-error-300;
+
+            .uxf-date-picker-input__element {
+                :root .light & {
+                    @apply border-gray-300 text-error-500;
+                }
+
+                :root .dark & {
+                    @apply border-gray-500 text-error-500;
+                }
+            }
+        }
+    }
+}

package/css/date-picker.css

@@ -0,0 +1,90 @@
+.uxf-date-picker {
+    &__month-select,
+    &__year-select,
+    &__decade-select {
+        @apply flex items-center justify-between px-4 w-[320px] sm:w-[360px];
+    }
+
+    &__month-calendar,
+    &__year-calendar,
+    &__decade-calendar {
+        @apply grid place-items-center w-full px-4 pt-4 text-center;
+    }
+
+    &__month-calendar {
+        @apply grid-cols-7 gap-0.5;
+    }
+
+    &__year-calendar {
+        @apply grid-cols-3 sm:grid-cols-4 gap-2;
+    }
+
+    &__decade-calendar {
+        @apply grid-cols-3 gap-2;
+    }
+
+    &__weekday-label {
+        @apply uppercase pb-2;
+    }
+
+    &__decade-label {
+        @apply font-semibold;
+    }
+
+    &__cell {
+        @apply p-1 transition relative rounded-full outline-none before:absolute before:pointer-events-none
+            before:rounded-full before:-inset-1 focus-visible:before:border-2;
+
+        &__day {
+            @apply w-9 h-9;
+        }
+
+        &__month {
+            @apply w-full;
+        }
+
+        &__year {
+            @apply w-full;
+        }
+    }
+
+    :root .light & {
+        @apply text-gray-900;
+
+        .uxf-date-picker__cell {
+            @apply hover:bg-gray-200 focus-visible:before:border-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--today {
+            @apply bg-primary-200 hover:bg-primary-300;
+        }
+
+        .uxf-date-picker__cell__day--selected {
+            @apply bg-primary-500 text-white hover:bg-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--not-current-month {
+            @apply text-gray-400;
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-900 text-white;
+
+        .uxf-date-picker__cell {
+            @apply hover:bg-gray-700 focus-visible:before:border-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--today {
+            @apply bg-primary-400/50 hover:bg-primary-400/60;
+        }
+
+        .uxf-date-picker__cell__day--selected {
+            @apply bg-primary-500 text-white hover:bg-primary-500;
+        }
+
+        .uxf-date-picker__cell__day--not-current-month {
+            @apply text-gray-600;
+        }
+    }
+}

package/css/dropdown.css

@@ -0,0 +1,24 @@
+.uxf-dropdown {
+    @apply absolute z-10 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
+        ring-opacity-5 focus:outline-none sm:text-sm;
+
+    &--bottom {
+        @apply mt-1;
+    }
+
+    &--top {
+        @apply -translate-y-1;
+    }
+
+    &__item {
+        @apply relative cursor-default select-none py-2 px-4 text-gray-800;
+
+        &.is-active {
+            @apply bg-primary-500 text-white;
+        }
+    }
+
+    &__items {
+        @apply absolute flex flex-col border border-black bg-white;
+    }
+}

package/css/dropdown.old.css

@@ -0,0 +1,24 @@
+.uxf-dropdown {
+    @apply absolute z-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black
+        ring-opacity-5 focus:outline-none sm:text-sm;
+
+    &--bottom {
+        @apply mt-1;
+    }
+
+    &--top {
+        @apply -translate-y-1;
+    }
+
+    &__item {
+        @apply relative cursor-default select-none py-3 px-4 text-gray-800;
+
+        &.is-active {
+            @apply bg-primary-500 text-white;
+        }
+    }
+
+    &__items {
+        @apply absolute flex flex-col border border-black bg-white;
+    }
+}

package/css/error-message.css

@@ -0,0 +1,3 @@
+.uxf-error-message {
+    @apply block text-error-600 mt-1 text-right;
+}

package/css/file-input.css

@@ -0,0 +1,95 @@
+.uxf-file-input {
+    &__input {
+        @apply border uxf-input pr-2;
+
+        &:hover {
+            @apply cursor-pointer;
+        }
+
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700 bg-gray-800;
+        }
+
+        &::file-selector-button {
+            @apply border-none outline outline-1 h-full px-4 mr-3;
+
+            :root .light & {
+                @apply bg-gray-100 outline-gray-200;
+            }
+
+            :root .dark & {
+                @apply bg-gray-800 text-gray-200 outline-gray-700;
+            }
+
+            &:hover {
+                @apply cursor-pointer;
+
+                :root .light & {
+                    @apply bg-gray-200;
+                }
+
+                :root .dark & {
+                    @apply bg-gray-700;
+                }
+            }
+        }
+
+        &.is-disabled {
+            @apply cursor-not-allowed;
+
+            :root .light & {
+                @apply text-gray-400;
+            }
+
+            :root .dark & {
+                @apply text-gray-400;
+            }
+
+            &::file-selector-button:hover {
+                @apply cursor-not-allowed;
+
+                :root .light & {
+                    @apply bg-inherit;
+                }
+
+                :root .dark & {
+                    @apply bg-inherit;
+                }
+            }
+        }
+
+        &.is-invalid {
+            :root .light & {
+                @apply border-error-500 text-error-500;
+            }
+
+            :root .dark & {
+                @apply border-error-500 text-error-500;
+            }
+
+            &::file-selector-button {
+                :root .light & {
+                    @apply text-error-500;
+                }
+
+                :root .dark & {
+                    @apply text-error-500;
+                }
+            }
+        }
+
+        &.is-focused {
+            :root .light & {
+                @apply border-primary-500;
+            }
+
+            :root .dark & {
+                @apply border-primary-500;
+            }
+        }
+    }
+}

package/css/flash-messages.css

@@ -0,0 +1,28 @@
+.uxf-flash-messages {
+    @apply pointer-events-none fixed inset-0 z-50 flex items-end p-6;
+
+    &__list-wrapper {
+        @apply flex w-full max-w-sm flex-col items-center space-y-4 sm:items-end sm:justify-end;
+    }
+}
+
+.uxf-flash-message {
+    @apply pointer-events-auto rounded-2xl transition px-3 py-4 text-center shadow backdrop-blur
+        is-hoverable:cursor-pointer;
+
+    &--success {
+        @apply bg-success-500 is-hoverable:bg-success-700 text-white;
+    }
+
+    &--error {
+        @apply bg-error-500 is-hoverable:bg-error-700 text-white;
+    }
+
+    &--warning {
+        @apply bg-warning-500 is-hoverable:bg-warning-700 text-white;
+    }
+
+    &--info {
+        @apply bg-gray-500 is-hoverable:bg-gray-700 text-white;
+    }
+}

package/css/form-control.css

@@ -0,0 +1,7 @@
+.uxf-helper-text {
+    @apply mt-1 text-xs text-gray-500;
+
+    &.is-invalid {
+        @apply text-error-600;
+    }
+}

package/css/icon.css

@@ -0,0 +1,7 @@
+.uxf-icon {
+    @apply shrink-0 h-[var(--i-h)] w-[var(--i-w)];
+
+    & > use {
+        @apply pointer-events-none;
+    }
+}

package/css/input-basic.css

@@ -0,0 +1,18 @@
+.uxf-input {
+    @apply flex flex-row;
+}
+
+.uxf-input__wrapper {
+    @apply flex w-full flex-row;
+}
+
+.uxf-input__element {
+    @apply w-full;
+}
+
+.uxf-input__left-element,
+.uxf-input__right-element,
+.uxf-input__left-addon,
+.uxf-input__right-addon {
+    @apply flex flex-row items-center whitespace-nowrap;
+}

package/css/input.css

@@ -0,0 +1,205 @@
+.uxf-input {
+    @apply rounded-md bg-white shadow-sm;
+
+    :root .light & {
+        @apply bg-white text-gray-900;
+    }
+
+    :root .dark & {
+        @apply bg-gray-800 text-gray-300;
+    }
+
+    &__element {
+        @apply bg-transparent outline-none placeholder:font-light;
+
+        :root .light & {
+            @apply placeholder:text-gray-400;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-gray-400;
+        }
+    }
+
+    &__left-element {
+        @apply mr-2;
+    }
+
+    &__right-element {
+        @apply ml-2;
+    }
+
+    &__left-addon,
+    &__right-addon {
+        @apply border px-2 bg-gray-100;
+
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700 bg-gray-800;
+        }
+    }
+
+    &__left-addon {
+        @apply rounded-l-md border-r-0;
+    }
+
+    &__right-addon {
+        @apply rounded-r-md border-l-0;
+    }
+
+    &__wrapper {
+        @apply rounded-md border px-4;
+
+        :root .light & {
+            @apply border-gray-200;
+        }
+
+        :root .dark & {
+            @apply border-gray-700;
+        }
+    }
+
+    &--size-small {
+        height: theme("inputSize.sm");
+
+        .uxf-input__wrapper {
+            @apply text-sm;
+        }
+    }
+
+    &--size-default {
+        height: theme("inputSize.default");
+
+        .uxf-input__wrapper {
+            @apply text-base;
+        }
+    }
+
+    &--size-large {
+        height: theme("inputSize.lg");
+
+        .uxf-input__wrapper {
+            @apply text-lg;
+        }
+    }
+
+    &--has-right-addon {
+        .uxf-input__wrapper {
+            @apply rounded-r-none;
+        }
+    }
+
+    &--has-left-addon {
+        .uxf-input__wrapper {
+            @apply rounded-l-none;
+        }
+    }
+
+    &.is-focused {
+        .uxf-input__wrapper {
+            @apply ring-1 ring-inset ring-offset-0;
+
+            :root .light & {
+                @apply border-primary-500 ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply border-primary-500 ring-primary-500;
+            }
+        }
+    }
+
+    &.is-disabled {
+        @apply cursor-not-allowed;
+
+        :root .light & {
+            @apply bg-gray-100;
+        }
+
+        :root .dark & {
+            @apply bg-gray-800;
+        }
+
+        .uxf-input__element {
+            @apply cursor-not-allowed;
+        }
+    }
+
+    &.is-readonly {
+        @apply cursor-text;
+
+        .uxf-input__element {
+            @apply cursor-text;
+        }
+
+        .uxf-input__wrapper {
+            @apply ring-0;
+        }
+
+        .uxf-input__wrapper,
+        .uxf-input__left-addon,
+        .uxf-input__right-addon {
+            :root .light & {
+                @apply border-gray-300;
+            }
+
+            :root .dark & {
+                @apply border-gray-500;
+            }
+        }
+    }
+
+    &.is-invalid {
+        &.is-focused {
+            .uxf-input__wrapper {
+                :root .light & {
+                    @apply ring-error-500 border-error-500;
+                }
+
+                :root .dark & {
+                    @apply ring-error-500 border-error-500;
+                }
+            }
+        }
+
+        .uxf-input__wrapper {
+            @apply border-error-500 placeholder:text-error-300;
+
+            .uxf-input__left-element,
+            .uxf-input__right-element {
+                @apply text-error-500;
+            }
+
+            .uxf-input__element {
+                :root .light & {
+                    @apply border-gray-300 text-error-500;
+                }
+
+                :root .dark & {
+                    @apply border-gray-500 text-error-500;
+                }
+            }
+        }
+    }
+
+    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");
+            }
+        }
+    }
+}