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

package/css/select.css

@@ -0,0 +1,72 @@
+.uxf-select {
+    @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 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;
+    }
+
+    &__button-icon {
+        @apply transition duration-300;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+}

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

package/css/textarea.css

@@ -0,0 +1,117 @@
+.uxf-textarea {
+    &__wrapper {
+        @apply rounded-md text-base border p-2 shadow-sm;
+
+        :root .light & {
+            @apply text-gray-900 border-gray-200;
+        }
+
+        :root .dark & {
+            @apply text-gray-300 border-gray-700;
+        }
+    }
+
+    &__element {
+        @apply bg-transparent outline-none resize-none w-full;
+
+        :root .light & {
+            @apply placeholder:text-gray-400;
+        }
+
+        :root .dark & {
+            @apply placeholder:text-gray-400;
+        }
+    }
+
+    &.is-focused {
+        .uxf-textarea__wrapper {
+            @apply ring-2 ring-inset ring-offset-0;
+
+            :root .light & {
+                @apply ring-primary-500;
+            }
+
+            :root .dark & {
+                @apply ring-primary-500;
+            }
+        }
+    }
+
+    &.is-disabled {
+        @apply cursor-not-allowed;
+
+        .uxf-textarea__wrapper {
+            :root .light & {
+                @apply bg-gray-300;
+            }
+
+            :root .dark & {
+                @apply bg-gray-600;
+            }
+        }
+
+        .uxf-textarea__element {
+            @apply cursor-not-allowed;
+        }
+    }
+
+    &.is-readonly {
+        @apply cursor-text;
+
+        .uxf-textarea__element {
+            @apply cursor-not-allowed pointer-events-none;
+        }
+
+        .uxf-textarea__wrapper {
+            @apply ring-0;
+
+            :root .light & {
+                @apply border-gray-300;
+            }
+
+            :root .dark & {
+                @apply border-gray-500;
+            }
+        }
+    }
+
+    &.is-invalid {
+        &.is-focused {
+            .uxf-textarea__wrapper {
+                @apply ring-0;
+            }
+        }
+
+        .uxf-textarea__wrapper {
+            @apply border-error-500;
+
+            .uxf-textarea__element {
+                :root .light & {
+                    @apply text-error-500;
+                }
+
+                :root .dark & {
+                    @apply 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");
+            }
+        }
+    }
+}

package/css/time-picker-input.css

@@ -0,0 +1,138 @@
+.uxf-time-picker-input {
+    @apply w-full rounded-lg text-base;
+
+    -webkit-user-select: none;
+    user-select: none;
+
+    &__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-time-picker-input__wrapper {
+            @apply rounded-r-none;
+        }
+    }
+
+    &.is-focused {
+        .uxf-time-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-time-picker-input__wrapper {
+            :root .light & {
+                @apply text-gray-500 bg-gray-300;
+            }
+
+            :root .dark & {
+                @apply text-gray-500 bg-gray-600;
+            }
+        }
+
+        .uxf-time-picker-input__element {
+            @apply cursor-not-allowed;
+        }
+    }
+
+    &.is-readonly {
+        @apply cursor-text;
+
+        .uxf-time-picker-input__element {
+            @apply cursor-text;
+        }
+
+        .uxf-time-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-time-picker-input__wrapper {
+                :root .light & {
+                    @apply ring-error-500 border-error-500;
+                }
+
+                :root .dark & {
+                    @apply ring-error-500 border-error-500;
+                }
+            }
+        }
+
+        .uxf-time-picker-input__wrapper {
+            @apply text-error-500 border-error-500 placeholder:text-error-300;
+
+            .uxf-time-picker-input__element {
+                :root .light & {
+                    @apply border-gray-300 text-error-500;
+                }
+
+                :root .dark & {
+                    @apply border-gray-500 text-error-500;
+                }
+            }
+        }
+    }
+}

package/css/time-picker.css

@@ -0,0 +1,27 @@
+.uxf-time-picker {
+    &__global {
+        @apply flex items-center justify-between px-4 w-[180px];
+
+        &__column {
+            @apply flex flex-col items-center shrink-0;
+
+            & > :nth-child(1),
+            & > :nth-child(3) {
+                @apply h-6;
+            }
+        }
+    }
+
+    &__hours,
+    &__minutes {
+        @apply grid grid-cols-4 place-items-center gap-1;
+    }
+
+    :root .light & {
+        @apply text-gray-900;
+    }
+
+    :root .dark & {
+        @apply bg-gray-900 text-white;
+    }
+}

package/css/toggle.css

@@ -0,0 +1,80 @@
+.uxf-toggle {
+    @apply relative inline-flex shrink-0 h-6 w-12 items-center rounded-full p-0.5 outline-none ring-offset-2
+        focus-visible:ring-2 [&>*]:active:w-[30px];
+
+    &__wrapper {
+        @apply flex items-center justify-between space-x-4 p-4;
+
+        &--reversed {
+            @apply flex-row-reverse space-x-0;
+
+            .uxf-toggle__label {
+                @apply pr-4;
+            }
+        }
+    }
+
+    &__label {
+        @apply w-full;
+
+        :root .light & {
+            @apply text-lightMedium;
+        }
+
+        :root .dark & {
+            @apply text-darkMedium;
+        }
+    }
+
+    &__inner {
+        @apply inline-block h-5 w-5 transform rounded-full bg-white transition transition-all;
+    }
+
+    &.is-disabled {
+        @apply pointer-events-none;
+    }
+
+    &.is-selected {
+        @apply [&>*]:translate-x-6 [&>*]:active:translate-x-[14px];
+    }
+
+    :root .light & {
+        @apply bg-gray-200 focus-visible:ring-primary-500;
+
+        &__inner {
+            @apply bg-white;
+        }
+
+        &.is-selected {
+            @apply bg-primary-500;
+        }
+
+        &.is-disabled {
+            @apply bg-gray-100;
+
+            .uxf-toggle__inner {
+                @apply bg-gray-400;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-400 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+
+        &.is-selected {
+            @apply bg-primary-500;
+        }
+
+        &__inner {
+            @apply bg-gray-900;
+        }
+
+        &.is-disabled {
+            @apply bg-gray-700;
+
+            .uxf-toggle__inner {
+                @apply bg-gray-500;
+            }
+        }
+    }
+}

package/css/typography.css

@@ -0,0 +1,51 @@
+.uxf-typo-h1 {
+    @apply text-desktopH1 font-bold;
+}
+
+.uxf-typo-h2 {
+    @apply text-desktopH2 font-bold;
+}
+
+.uxf-typo-h3 {
+    @apply text-desktopH3 font-bold;
+}
+
+.uxf-typo-h4 {
+    @apply text-desktopH4 font-bold;
+}
+
+.uxf-typo-h5 {
+    @apply text-desktopH5 font-bold;
+}
+
+.uxf-typo-h6 {
+    @apply text-desktopH6 font-bold;
+}
+
+.uxf-typo-body {
+    @apply text-body;
+}
+
+.uxf-typo-body2 {
+    @apply text-body2;
+}
+
+.uxf-typo-button {
+    @apply text-body font-bold;
+}
+
+.uxf-typo-caption {
+    @apply text-caption;
+}
+
+.uxf-typo-medium {
+    @apply text-medium font-medium;
+}
+
+.uxf-typo-medium2 {
+    @apply text-medium2 font-medium;
+}
+
+.uxf-typo-overline {
+    @apply text-overline font-bold;
+}

package/date-picker-input/date-picker-day.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { CalendarDay } from "@uxf/datepicker/utils/get-days";
+interface DatePickerDayProps {
+    currentMonth: boolean;
+    day: CalendarDay;
+}
+export declare const DatePickerDay: React.NamedExoticComponent<DatePickerDayProps>;
+export {};