@uxf/ui 1.0.1 → 10.0.0-beta.11

package/css/select-base.css

@@ -0,0 +1,50 @@
+.uxf-select-base {
+    &__button-text {
+        @apply truncate;
+
+        align-items: center;
+        cursor: default;
+        display: inline-flex;
+        flex-grow: 1;
+        height: 100%;
+        min-width: 0;
+    }
+
+    .uxf-input__element {
+        align-items: center;
+        display: flex;
+        min-width: 0;
+
+        &.is-empty {
+            @apply font-light;
+
+            :root .light & {
+                @apply text-gray-400;
+            }
+
+            :root .dark & {
+                @apply text-gray-400;
+            }
+        }
+    }
+
+    .uxf-input__element-text {
+        @apply truncate;
+    }
+
+    &.is-invalid {
+        .uxf-input__element.is-empty {
+            @apply text-error-300;
+        }
+    }
+
+    &__arrow-icon {
+        @apply w-3 h-5;
+
+        z-index: 1;
+
+        &.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;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium hover:bg-gray-800 focus-visible:ring-primary
+                    focus-visible:ring-offset-gray-900;
+            }
+
+            &.is-active {
+                @apply before:opacity-100 ;
+
+                :root .light & {
+                    @apply text-lightHigh before:border-b-primary hover:bg-transparent;
+                }
+
+                :root .dark & {
+                    @apply text-darkHigh before:border-b-primary 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 focus-visible:ring-offset-gray-100;
+            }
+
+            :root .dark & {
+                @apply text-darkMedium bg-gray-700 hover:bg-gray-800 focus-visible:ring-primary
+                    focus-visible:ring-offset-gray-700;
+            }
+
+            &.is-active {
+                :root .light & {
+                    @apply text-white bg-primary;
+                }
+
+                :root .dark & {
+                    @apply text-white bg-primary;
+                }
+            }
+
+            &.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 is-hoverable:text-primary-400 focus-visible:before:border-primary;
+    }
+
+    :root .dark & {
+        @apply text-primary is-hoverable:text-primary-400 focus-visible:before:border-primary;
+    }
+}

package/css/textarea.css

@@ -0,0 +1,115 @@
+.uxf-textarea {
+    :root .light & {
+        --bg-color: theme("colors.white");
+        --border-color: theme("colors.gray.200");
+        --color: theme("colors.gray.900");
+    }
+
+    :root .dark & {
+        --bg-color: theme("colors.gray.800");
+        --border-color: theme("colors.gray.700");
+        --color: theme("colors.gray.300");
+    }
+
+    &__wrapper {
+        background-color: var(--bg-color);
+        border-radius: theme("borderRadius.md");
+        border: 1px solid var(--border-color);
+        box-shadow: theme("boxShadow.sm");
+        color: var(--color);
+        padding: theme("spacing.2");
+    }
+
+    &__element {
+        appearance: none;
+        background-color: transparent;
+        outline: none;
+        overflow-y: hidden;
+        resize: none;
+        width: 100%;
+
+        &::placeholder {
+            color: theme("colors.gray.400");
+        }
+    }
+
+    &.is-focused {
+        :root .light &,
+        :root .dark & {
+            --border-color: theme("colors.primary.DEFAULT");
+        }
+
+        .uxf-textarea__wrapper {
+            @apply ring-2 ring-inset ring-[--border-color] ring-offset-0;
+        }
+    }
+
+    &.is-invalid {
+        :root .light &,
+        :root .dark & {
+            --border-color: var(--color);
+            --color: theme("colors.error.DEFAULT");
+        }
+    }
+
+    &.is-readonly {
+        cursor: text;
+        pointer-events: none;
+
+        :root .light & {
+            --bg-color: theme("colors.gray.300");
+            --border-color: theme("colors.gray.200");
+        }
+
+        :root .dark & {
+            --bg-color: theme("colors.gray.500");
+            --border-color: theme("colors.gray.700");
+        }
+
+        .uxf-textarea__wrapper {
+            @apply ring-0;
+        }
+    }
+
+    &.is-disabled {
+        cursor: not-allowed;
+
+        :root .light & {
+            --bg-color: theme("colors.gray.300");
+        }
+
+        :root .dark & {
+            --bg-color: theme("colors.gray.600");
+        }
+    }
+
+    &.is-readonly,
+    &.is-disabled {
+        .uxf-textarea__element {
+            cursor: inherit;
+        }
+    }
+
+    input:-webkit-autofill {
+        &,
+        &:hover,
+        &:focus {
+            appearance: none;
+            transition: background-color 5000s ease-in-out 0s !important;
+
+            :root .light & {
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.white");
+                box-shadow: inset 0 0 0 1000px theme("colors.white");
+                background-color: theme("colors.white");
+            }
+
+            :root .dark & {
+                -webkit-text-fill-color: theme("colors.gray.300");
+                -webkit-box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                box-shadow: inset 0 0 0 1000px theme("colors.gray.800");
+                background-color: theme("colors.gray.800");
+                caret-color: white;
+            }
+        }
+    }
+}

package/css/time-picker.css

@@ -0,0 +1,32 @@
+.uxf-time-picker {
+    &__global {
+        @apply flex items-center justify-between px-4 w-[180px] mx-auto;
+
+        &__column {
+            @apply flex flex-col items-center shrink-0;
+
+            width: 48px;
+
+            & > :nth-child(1),
+            & > :nth-child(3) {
+                height: 24px
+            }
+        }
+    }
+
+    &__hours,
+    &__minutes {
+        @apply grid grid-cols-4 place-items-center gap-1 mx-auto;
+
+        text-align: center;
+        width: 200px;
+    }
+
+    :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-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;
+
+        &__inner {
+            @apply bg-white;
+        }
+
+        &.is-selected {
+            @apply bg-primary;
+        }
+
+        &.is-disabled {
+            @apply bg-gray-100;
+
+            .uxf-toggle__inner {
+                @apply bg-gray-400;
+            }
+        }
+    }
+
+    :root .dark & {
+        @apply bg-gray-400 focus-visible:ring-primary focus-visible:ring-offset-gray-900;
+
+        &.is-selected {
+            @apply bg-primary;
+        }
+
+        &__inner {
+            @apply bg-gray-900;
+        }
+
+        &.is-disabled {
+            @apply bg-gray-700;
+
+            .uxf-toggle__inner {
+                @apply bg-gray-500;
+            }
+        }
+    }
+}

package/css/tooltip.css

@@ -0,0 +1,7 @@
+.uxf-tooltip {
+    @apply w-max max-w-[calc(100vw-20px)] bg-lightHigh p-3 text-white rounded-lg z-tooltip;
+
+    &__arrow {
+        @apply bg-lightHigh rounded-sm z-tooltip;
+    }
+}

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/hooks/use-dropdown.d.ts

@@ -10,8 +10,8 @@ export declare function useDropdown(placement: Placement, matchWidth?: boolean,
     context: {
         x: number;
         y: number;
-        placement: Placement;
         strategy: Strategy;
+        placement: Placement;
         middlewareData: import("@floating-ui/react").MiddlewareData;
         update: () => void;
         isPositioned: boolean;

package/image-gallery/components/gallery.d.ts

@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { ImageGalleryImageProps } from "../types";
-interface GalleryProps {
+export interface GalleryProps {
     closeButtonTitle?: string;
+    disableBackdropClose?: boolean;
     onClose: () => void;
     onNext: () => void;
     onPrevious: () => void;
@@ -9,4 +10,3 @@ interface GalleryProps {
     images: ImageGalleryImageProps[];
 }
 export declare const Gallery: FC<GalleryProps>;
-export {};

package/image-gallery/components/gallery.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const close_button_1 = require("./close-button");
 const dot_1 = require("./dot");
 const arrow_button_1 = require("./arrow-button");
+const react_swipeable_1 = require("react-swipeable");
 const Gallery = (props) => {
     var _a;
     (0, react_1.useEffect)(() => {
@@ -56,15 +57,21 @@ const Gallery = (props) => {
     }, []);
     const imageSrc = props.images[props.imageIndex].src;
     const customContent = props.images[props.imageIndex].customContent;
-    return (react_1.default.createElement("div", { className: "uxf-image-gallery" },
+    const handlers = (0, react_swipeable_1.useSwipeable)({
+        onSwipedLeft: () => props.onNext(),
+        onSwipedRight: () => props.onPrevious(),
+        swipeDuration: 500,
+    });
+    return (react_1.default.createElement("div", { className: "uxf-image-gallery", role: "dialog", "aria-modal": true },
+        react_1.default.createElement("div", { "aria-hidden": true, className: "uxf-image-gallery__backdrop", onClick: !props.disableBackdropClose ? props.onClose : undefined }),
         react_1.default.createElement("div", { className: "uxf-image-gallery__close-button-wrapper" },
             react_1.default.createElement(close_button_1.CloseButton, { onClick: props.onClose, text: props.closeButtonTitle })),
-        react_1.default.createElement("div", { className: "uxf-image-gallery__content" },
+        props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
+            react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
+            react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
+        react_1.default.createElement("div", { className: "uxf-image-gallery__content", ...handlers },
             react_1.default.createElement("div", { className: "uxf-image-gallery__inner" },
                 react_1.default.createElement("img", { alt: "", className: "uxf-image-gallery__image", src: typeof imageSrc === "string" ? imageSrc : (_a = (0, resizer_1.resizerImageUrl)(imageSrc)) !== null && _a !== void 0 ? _a : "" }),
-                props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__buttons" },
-                    react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onPrevious, type: "prev" }),
-                    react_1.default.createElement(arrow_button_1.ArrowButton, { onClick: props.onNext, type: "next" }))),
                 react_1.default.createElement("div", { className: "uxf-image-gallery__custom-content" }, customContent))),
         props.images.length > 1 && (react_1.default.createElement("div", { className: "uxf-image-gallery__dots" }, props.images.map((image, index) => (react_1.default.createElement(dot_1.Dot, { key: (0, image_1.getImgUniqueIdentifier)(image.src) || index, active: index === props.imageIndex })))))));
 };

package/image-gallery/image-gallery.d.ts

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from "react";
+import { GalleryProps } from "./components/gallery";
 export interface ImageGalleryProps {
     children: ReactNode;
     closeButtonTitle?: string;
+    disableBackdropClose?: GalleryProps["disableBackdropClose"];
 }
 export declare const ImageGallery: FC<ImageGalleryProps>;

package/image-gallery/image-gallery.js

@@ -48,7 +48,7 @@ const ImageGallery = (props) => {
     const contextValue = { registerImage, unregisterImage, openGallery };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(context_1.ImageGalleryProvider, { value: contextValue }, props.children),
-        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
+        typeof moduloImageIndex === "number" && (react_1.default.createElement(gallery_1.Gallery, { closeButtonTitle: props.closeButtonTitle, disableBackdropClose: props.disableBackdropClose, onClose: () => setImageIndex(null), onNext: onNext, onPrevious: onPrevious, imageIndex: moduloImageIndex, images: images }))));
 };
 exports.ImageGallery = ImageGallery;
 exports.ImageGallery.displayName = "UxfUiImageGallery";

package/multi-combobox/_multi-combobox-base.js

@@ -91,13 +91,14 @@ exports._MultiComboboxBase = (0, react_2.forwardRef)((props, ref) => {
             : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
+        var _a, _b;
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },
                 selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
                 react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query }),
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
             renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
-                react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
+                react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;
                     const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
                     return (react_2.default.createElement(react_1.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, value: option }, (optionState) => (react_2.default.createElement(react_2.default.Fragment, null, props.withCheckboxes ? (react_2.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: label, onChange: handleCheckboxChange(option.id), value: optionState.selected })) : (label)))));

package/multi-combobox/types.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 export type MultiComboboxValueId = number | string;
 export type MultiComboboxValue<ValueId = MultiComboboxValueId> = {
     id: ValueId;
@@ -30,6 +31,8 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     options?: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;
     withPopover?: boolean;
 }

package/multi-select/_multi-select-base.js

@@ -55,6 +55,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
     };
     const withoutPopover = !props.withPopover;
     return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleSelectValueChange, value: selectedOptions }, (renderProps) => {
+        var _a, _b;
         const inputElement = (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Listbox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef },
                 react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-multi-select__input", selectedOptions.length === 0 && "uxf-multi-select__input--is-empty") }, selectedOptions.length === 0
@@ -62,7 +63,7 @@ exports._MultiSelectBase = (0, react_2.forwardRef)((props, ref) => {
                     : selectedOptions.map((item) => (react_2.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: handleRemove(item.id), size: "large", suppressFocus: true }, item.label)))),
                 react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
             renderProps.open && (react_2.default.createElement(react_3.FloatingPortal, null,
-                react_2.default.createElement(react_1.Listbox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
+                react_2.default.createElement(react_1.Listbox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredOptions.map((option) => {
                     var _a;
                     const optionKey = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option);
                     return (react_2.default.createElement(react_1.Listbox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item uxf-multi-select__dropdown-item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), key: optionKey !== null && optionKey !== void 0 ? optionKey : option.id, value: option }, optionKey !== null && optionKey !== void 0 ? optionKey : option.label));

package/multi-select/types.d.ts

@@ -2,8 +2,8 @@ import { Placement, Strategy } from "@floating-ui/react";
 import { ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
-import { SelectSizes } from "../select/theme";
 import { FormControlProps } from "../types";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 export type MultiSelectValueId = number | string;
 export type MultiSelectOption<T = MultiSelectValueId> = {
     color?: ChipColor;
@@ -25,7 +25,8 @@ export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSe
     options: Option[];
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
-    size?: keyof SelectSizes;
+    size?: keyof InputGroupSizes;
+    variant?: keyof InputGroupVariants;
     withPopover?: boolean;
 }
 export type MultiSelectTypeRef = HTMLDivElement;