@uxf/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/css/label.css

@@ -0,0 +1,14 @@
+.uxf-label {
+    @apply mb-1 block text-sm font-medium text-gray-700;
+
+    :root .light & {
+        @apply text-gray-900;
+    }
+    :root .dark & {
+        @apply text-white;
+    }
+
+    &.is-required::after {
+        content: " *";
+    }
+}

package/css/list-item.css

@@ -0,0 +1,24 @@
+.uxf-list-item {
+    @apply flex justify-between grow py-4 px-5 min-h-[64px] transition-opacity hover:opacity-75
+    outline-none relative before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
+
+    .uxf-list-item__end-icon {
+        @apply shrink-0 pl-3;
+    }
+
+    :root .light & {
+        @apply focus-visible:before:border-primary-500;
+
+        .uxf-list-item__end-icon {
+            @apply text-gray-300;
+        }
+    }
+
+    :root .dark & {
+        @apply focus-visible:before:border-primary-500;
+
+        .uxf-list-item__end-icon {
+            @apply text-gray-600;
+        }
+    }
+}

package/css/radio-group.css

@@ -0,0 +1,143 @@
+.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;
+    }
+
+    &__label--hidden {
+        @apply sr-only;
+    }
+
+    :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--list__option__label {
+            @apply text-white;
+        }
+    }
+}
+
+.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;
+            }
+        }
+    }
+}
+

package/css/radio.css

@@ -0,0 +1,90 @@
+.uxf-radio {
+    @apply flex shrink-0 items-center justify-center h-6 w-6 border rounded-full transition focus-visible:ring-2;
+
+    &__label {
+        @apply sr-only;
+    }
+
+    &__inner {
+        @apply rounded-full h-2.5 w-2.5 opacity-0 transition;
+    }
+
+    &.is-selected {
+        .uxf-radio__inner {
+            @apply opacity-100;
+        }
+    }
+
+    :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,16 @@
+.uxf-raster-image {
+     @apply block w-full;
+
+    &__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,54 @@
+.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-gray-900 before:border-gray-200 focus-visible:before:border-none focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-gray-400;
+            }
+        }
+
+        :root .dark & {
+            @apply bg-gray-800 text-gray-300 before:border-gray-700 focus-visible:ring-primary-500;
+
+            .is-empty {
+                @apply text-gray-400;
+            }
+        }
+
+        &.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 text-gray-600 transition duration-300;
+
+        &.is-open {
+            @apply -scale-y-100;
+        }
+    }
+}

package/css/tabs.css

@@ -0,0 +1,104 @@
+.test-focus {
+    @apply ring-red-400 ring-2;
+}
+
+.uxf-tabs {
+    @apply w-full;
+
+    &__tab-list__wrapper {
+        @apply w-fit mb-6;
+
+        &--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-fit;
+
+        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-gray-600 hover:bg-gray-100 focus-visible:ring-primary-500;
+            }
+            :root .dark & {
+                @apply text-gray-200 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-gray-900 before:border-b-primary-500 hover:bg-transparent;
+                }
+                :root .dark & {
+                    @apply text-white before:border-b-primary-500 hover:bg-transparent;
+                }
+            }
+        }
+
+        &--segmented {
+            @apply rounded;
+
+            :root .light & {
+                @apply text-gray-600 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-gray-200 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;
+                }
+            }
+        }
+    }
+}
+

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 hover:text-primary-400 focus-visible:before:border-primary-500;
+    }
+
+    :root .dark & {
+        @apply text-primary-500 hover:text-primary-400 focus-visible:before:border-primary-500;
+    }
+}

package/css/textarea.css

@@ -0,0 +1,98 @@
+.uxf-textarea {
+    &__wrapper {
+        @apply rounded-md text-base
+        border p-2;
+
+        :root .light & {
+            @apply bg-gray-100 text-gray-900 border-gray-200;
+        }
+        :root .dark & {
+            @apply bg-gray-800 text-gray-300 border-gray-700;
+        }
+    }
+
+    &__element {
+        @apply bg-transparent outline-none resize-none;
+
+        :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-text;
+        }
+
+        .uxf-textarea__wrapper {
+            @apply ring-0;
+
+            :root .light & {
+                @apply border-gray-300;
+            }
+            :root .dark & {
+                @apply border-gray-500;
+            }
+        }
+
+        .uxf-textarea__element {
+            @apply cursor-not-allowed pointer-events-none;
+        }
+    }
+
+    &.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 placeholder:text-error-500;
+                }
+                :root .dark & {
+                    @apply text-error-500 placeholder:text-error-500;
+                }
+            }
+        }
+    }
+}
+

package/css/toggle.css

@@ -0,0 +1,60 @@
+.uxf-toggle {
+    @apply relative inline-flex h-6 w-12 items-center rounded-full p-0.5 outline-none ring-offset-2
+    focus-visible:ring-2;
+
+    &__label {
+        @apply sr-only;
+    }
+
+    &__inner {
+        @apply inline-block h-5 w-5 transform rounded-full bg-white transition;
+    }
+
+    &.is-selected {
+        .uxf-toggle__inner {
+            @apply translate-x-6;
+        }
+    }
+
+
+    :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/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 {};

package/date-picker-input/date-picker-day.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerDay = void 0;
+const react_1 = __importStar(require("react"));
+const use_day_1 = require("@uxf/datepicker/hooks/use-day");
+const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+const useOnMount_1 = require("@uxf/core/hooks/useOnMount");
+exports.DatePickerDay = (0, react_1.memo)((props) => {
+    const { day } = props;
+    const dayCellRef = (0, react_1.useRef)(null);
+    const innerRef = (0, react_1.useRef)(null);
+    const { focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateSelected, onDateFocus, onDateHover, onDateSelect, } = (0, react_1.useContext)(date_picker_context_1.DatePickerContext);
+    const { disabledDate, isSelected, onClick, onKeyDown, onMouseEnter, tabIndex, isToday } = (0, use_day_1.useDay)({
+        date: day.date,
+        focusedDate,
+        isDateBlocked,
+        isDateFocused,
+        isDateHovered,
+        isDateSelected,
+        onDateFocus,
+        onDateHover,
+        onDateSelect,
+        dayRef: dayCellRef,
+    });
+    const isDisabled = disabledDate || !day.currentMonth;
+    (0, useOnMount_1.useOnMount)(() => {
+        const node = innerRef.current;
+        if (node && (isToday || isSelected)) {
+            node.focus();
+        }
+    });
+    if (!day.dayLabel) {
+        return react_1.default.createElement("div", null);
+    }
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-date-picker__cell uxf-date-picker__cell__day", isDisabled && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-date-picker__cell__day--today", isSelected && "uxf-date-picker__cell__day--selected", !props.currentMonth && "uxf-date-picker__cell__day--not-current-month"), ref: isDisabled ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex }, day.dayLabel));
+});
+exports.DatePickerDay.displayName = "DatePickerDay";

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface DatePickerDecadeProps {
+    onYearSelect: (date: Date) => void;
+}
+export declare const DatePickerDecade: React.NamedExoticComponent<DatePickerDecadeProps>;
+export {};