@uxf/ui 11.20.0 → 11.21.1

package/_file-input-base/file-input-base.js

@@ -24,8 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports._FileInputBase = void 0;
+const validator_exceptions_1 = require("@uxf/ui//utils/validator/validator-exceptions");
 const react_1 = __importStar(require("react"));
-const validator_exceptions_1 = require("../utils/validator/validator-exceptions");
 exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
     const onChange = async (e) => {
         var _a, _b;

package/_input-with-popover/input-with-popover.d.ts

@@ -1,6 +1,6 @@
 import { Placement, Strategy } from "@floating-ui/react";
+import { InputProps } from "@uxf/ui/input";
 import React, { MutableRefObject, ReactElement, ReactNode } from "react";
-import { InputProps } from "../input";
 import { Clearable, FormControlProps } from "../types";
 export interface InputWithPopoverProps<ValueType = string> extends FormControlProps<ValueType>, Pick<InputProps, "size" | "variant">, Clearable {
     autoFocus?: boolean;
@@ -8,9 +8,6 @@ export interface InputWithPopoverProps<ValueType = string> extends FormControlPr
     children: (args: {
         close: (focusableElement?: HTMLElement | MutableRefObject<HTMLElement | null>) => void;
     }) => ReactElement;
-    defaultValue?: string;
-    error?: ReactNode;
-    errorId?: string;
     form?: string;
     helperText?: ReactNode;
     hiddenLabel?: boolean;

package/_input-with-popover/input-with-popover.js

@@ -26,13 +26,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._InputWithPopover = void 0;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
+const show_1 = require("@uxf/core-react/components/show");
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
+const form_component_1 = require("@uxf/ui/form-component");
+const input_1 = require("@uxf/ui/input");
 const react_3 = __importStar(require("react"));
-const form_component_1 = require("../form-component");
-const input_1 = require("../input");
 function useErrorProps(error, id, isInvalid) {
     const errorId = isInvalid ? `${id}--error-message` : undefined;
     return {
@@ -48,7 +49,7 @@ exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const innerRef = (0, react_3.useRef)(null);
     const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
-    const error = useErrorProps(props.error, id, props.isInvalid);
+    const error = useErrorProps(props.helperText, id, props.isInvalid);
     const rootClassName = (0, cx_1.cx)("uxf-input-with-popover", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     const floatingPopover = (0, react_1.useFloating)({
         placement: (_c = props.popoverPlacement) !== null && _c !== void 0 ? _c : "bottom",
@@ -73,17 +74,19 @@ exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
     const showRemoveButton = !!(props.value && isInteractive && props.isClearable);
     return (react_3.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_3.default.createElement(react_2.Popover, { as: react_3.Fragment }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
-            react_3.default.createElement(input_1.Input, { inputFocus: input, size: props.size, variant: props.variant, wrapperRef: floatingPopover.refs.setReference },
+            react_3.default.createElement(input_1.Input, { inputFocus: input, inputGroupRef: floatingPopover.refs.setReference, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), size: props.size, variant: props.variant },
                 props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
                 props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
-                react_3.default.createElement(input_1.Input.Element, { "aria-describedby": error.ariaDescribedby, "aria-errormessage": error.ariaErrormessage, "aria-invalid": error.ariaInvalid, "aria-live": "polite", autoComplete: "off", autoFocus: props.autoFocus, form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: props.onChange, placeholder: props.placeholder, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), type: "text", value: props.value }),
+                react_3.default.createElement(input_1.Input.Element, { "aria-describedby": error.ariaDescribedby, "aria-errormessage": error.ariaErrormessage, "aria-invalid": error.ariaInvalid, "aria-live": "polite", autoComplete: "off", autoFocus: props.autoFocus, form: props.form, id: id, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onChange: props.onChange, placeholder: props.placeholder, type: "text", value: props.value }),
                 react_3.default.createElement(input_1.Input.RightElement, null,
-                    showRemoveButton && react_3.default.createElement(input_1.Input.RemoveButton, { onChange: () => props.onChange("") }),
+                    react_3.default.createElement(show_1.Show, { when: showRemoveButton },
+                        react_3.default.createElement(input_1.Input.RemoveButton, { onChange: () => props.onChange("") })),
                     react_3.default.createElement(react_2.Popover.Button, { className: "uxf-input-with-popover__trigger-element" }, props.triggerElement),
                     props.rightElement),
                 props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
-            isInteractive && renderProps.open && (react_3.default.createElement(react_1.FloatingPortal, null,
-                react_3.default.createElement(react_2.Popover.Panel, { className: (0, cx_1.cx)("uxf-input-with-popover__panel", floatingPopover.placement === "bottom" &&
-                        "uxf-input-with-popover__panel--bottom", floatingPopover.placement === "top" && "uxf-input-with-popover__panel--top"), ref: floatingPopover.refs.setFloating, static: true, style: floatingPopover.floatingStyles }, props.children))))))));
+            react_3.default.createElement(show_1.Show, { when: isInteractive && renderProps.open },
+                react_3.default.createElement(react_1.FloatingPortal, null,
+                    react_3.default.createElement(react_2.Popover.Panel, { className: (0, cx_1.cx)("uxf-input-with-popover__panel", floatingPopover.placement === "bottom" &&
+                            "uxf-input-with-popover__panel--bottom", floatingPopover.placement === "top" && "uxf-input-with-popover__panel--top"), ref: floatingPopover.refs.setFloating, static: true, style: floatingPopover.floatingStyles }, props.children))))))));
 });
 exports._InputWithPopover.displayName = "UxfUiInputWithPopover";

package/alert-bubble/alert-bubble.d.ts

@@ -1,6 +1,6 @@
+import { AlertBubbleColor, AlertBubbleSize } from "@uxf/ui/alert-bubble/theme";
+import { IconName } from "@uxf/ui/icon/types";
 import { FC } from "react";
-import { IconName } from "../icon/types";
-import { AlertBubbleColor, AlertBubbleSize } from "./theme";
 export interface AlertBubbleProps {
     className?: string;
     color?: AlertBubbleColor;

package/alert-bubble/alert-bubble.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertBubble = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
+const icon_1 = require("@uxf/ui/icon");
 const react_1 = __importDefault(require("react"));
-const icon_1 = require("../icon");
 const ICON = {
     default: "triangle-exclamation",
     error: "xmark",

package/avatar-file-input/avatar-file-input.d.ts

@@ -1,7 +1,7 @@
+import { AvatarFileInputVariant } from "@uxf/ui/avatar-file-input/theme";
 import React, { MouseEventHandler, ReactNode } from "react";
 import { FileInputBaseProps } from "../_file-input-base";
 import { IconName } from "../icon/types";
-import { AvatarFileInputVariant } from "./theme";
 export interface AvatarFileInputProps extends FileInputBaseProps {
     customControls?: (args: {
         onSelectFile: MouseEventHandler;

package/avatar-file-input/avatar-file-input.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFileInput = void 0;
 const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const file_1 = require("@uxf/core/utils/file");
 const react_1 = __importStar(require("react"));
@@ -56,7 +56,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
-                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
+                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), value: props.value }),
                 props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-avatar-file-input__input-avatar", src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__input-empty" },
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_d = props.icon) !== null && _d !== void 0 ? _d : "cloud" })))),
             react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls" }, props.customControls ? (props.customControls({

package/calendar/calendar-day-cell.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarDayCell = void 0;
 const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
 const classes_1 = require("@uxf/core/constants/classes");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const use_day_1 = require("@uxf/datepicker/hooks/use-day");
 const react_1 = __importStar(require("react"));
@@ -59,7 +59,7 @@ exports.CalendarDayCell = (0, react_1.memo)((props) => {
     if (!props.day.dayLabel) {
         return react_1.default.createElement("div", null);
     }
-    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", isFirstDisabled && props.day.currentMonth && "is-disabled-start", isLastDisabled && props.day.currentMonth && "is-disabled-end", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell--today", isSelected && "uxf-calendar__cell--selected", isInsideRange && "uxf-calendar__cell--inside-range", isWithinHoverRange && "uxf-calendar__cell--is-within-hover-range", isHovered && "uxf-calendar__cell--is-hovered", !props.day.currentMonth && "uxf-calendar__cell--not-current-month", (0, get_class_names_from_flags_1.getClassNamesFromFlags)(flags)), ref: disabledDate ? undefined : (0, composeRefs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" },
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-day", isFirstDisabled && props.day.currentMonth && "is-disabled-start", isLastDisabled && props.day.currentMonth && "is-disabled-end", disabledDate && classes_1.CLASSES.IS_DISABLED, isToday && "uxf-calendar__cell--today", isSelected && "uxf-calendar__cell--selected", isInsideRange && "uxf-calendar__cell--inside-range", isWithinHoverRange && "uxf-calendar__cell--is-within-hover-range", isHovered && "uxf-calendar__cell--is-hovered", !props.day.currentMonth && "uxf-calendar__cell--not-current-month", (0, get_class_names_from_flags_1.getClassNamesFromFlags)(flags)), ref: disabledDate ? undefined : (0, compose_refs_1.composeRefs)(dayCellRef, innerRef), onClick: onClick, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, tabIndex: tabIndex, type: "button" },
         react_1.default.createElement("span", { className: "uxf-calendar__cell__inner" }, props.day.dayLabel)));
 });
 exports.CalendarDayCell.displayName = "UxfUiCalendarDayCell";

package/checkbox/checkbox.d.ts

@@ -1,6 +1,6 @@
+import { CheckboxSize } from "@uxf/ui/checkbox/theme";
 import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
-import { CheckboxSize } from "./theme";
 export interface CheckboxProps extends FormControlProps<boolean | undefined> {
     className?: string;
     id?: string;

package/checkbox-input/checkbox-input.d.ts

@@ -1,5 +1,5 @@
+import { CheckboxSize } from "@uxf/ui/checkbox/theme";
 import React, { CSSProperties, ReactNode } from "react";
-import { CheckboxSize } from "../checkbox";
 import { FormControlProps } from "../types";
 export interface CheckboxInputProps extends FormControlProps<boolean | undefined> {
     className?: string;

package/checkbox-input/checkbox-input.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxInput = void 0;
 const react_1 = require("@headlessui/react");
+const checkbox_1 = require("@uxf/ui/checkbox");
 const react_2 = __importStar(require("react"));
-const checkbox_1 = require("../checkbox");
 exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
     var _a, _b;
     const generatedId = (0, react_2.useId)();

package/combobox/README.md

@@ -3,10 +3,11 @@
 ## CSS dependencies
 
 ```css
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/dropdown/dropdown.css");
 @import url("@uxf/ui/label/label.css");
 @import url("@uxf/ui/form-component/form-component.css");
-@import url("@uxf/ui/dropdown/dropdown.css");
-@import url("@uxf/ui/input/input.css");
-@import url("@uxf/ui/_select-base/select-base.css");
 @import url("@uxf/ui/input/input-basic.css");
-```
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/combobox/combobox.css");
+```

package/combobox/combobox.d.ts

@@ -1,23 +1,49 @@
-import React, { ReactNode, Ref } from "react";
-import { SelectBaseProps, SelectBaseValueId } from "../_select-base";
-export type ComboboxValueId = SelectBaseValueId;
-export type ComboboxValue<ValueId = ComboboxValueId> = {
-    id: ValueId;
+import { Placement, Strategy } from "@floating-ui/react";
+import { IconsSet } from "@uxf/ui/icon";
+import { InputGroupSize, InputGroupVariant } from "@uxf/ui/input";
+import { Clearable, FormControlProps } from "@uxf/ui/types";
+import React, { CSSProperties, ReactNode, Ref } from "react";
+export type ComboboxValueId = number | string;
+export type ComboboxValue<Id = ComboboxValueId> = {
+    id: Id;
     label: string;
 };
-export interface ComboboxOption<ValueId = ComboboxValueId> extends ComboboxValue<ValueId> {
+export interface ComboboxOption<Id = ComboboxValueId> extends ComboboxValue<Id> {
     disabled?: boolean;
 }
-type ComboboxTypeRef = HTMLDivElement;
-export interface ComboboxProps<ValueId = SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option> extends Omit<SelectBaseProps<Value, Option>, "children" | "customInputElementDisplayName" | "emptyMessage"> {
-    forwardRef?: Ref<ComboboxTypeRef> | undefined;
+export type ComboboxTypeRef = HTMLInputElement;
+export interface ComboboxProps<Id = ComboboxValueId, Option = ComboboxOption<Id>, Value = Option> extends FormControlProps<Value | null>, Clearable {
+    className?: string;
+    dropdownClassName?: string;
+    dropdownMatchesInputWidth?: boolean;
+    dropdownMaxHeight?: number;
+    dropdownPlacement?: Placement;
+    dropdownStrategy?: Strategy;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    iconName?: keyof IconsSet;
+    id?: string;
+    inputArrow?: (open: boolean) => ReactNode;
+    keyExtractor?: (option: Option) => string | number;
+    label: ReactNode;
     loadOptions?: (query: string) => Promise<Option[]>;
     noQueryMessage?: string;
     notFoundMessage?: string;
+    options?: Option[];
+    placeholder?: string;
     renderOption?: (option: Option, isSelected: boolean) => ReactNode;
+    size?: InputGroupSize;
+    style?: CSSProperties;
+    variant?: InputGroupVariant;
+    leftAddon?: ReactNode;
+    leftElement?: ReactNode;
+    rightAddon?: ReactNode;
+    rightElement?: ReactNode;
+    inputGroupRef?: Ref<ComboboxTypeRef> | undefined;
+    inputRef?: Ref<HTMLInputElement> | undefined;
+    inputWrapperRef?: Ref<ComboboxTypeRef> | undefined;
+}
+export declare function Combobox<Id = ComboboxValueId, Option = ComboboxOption<Id>, Value = Option>(props: ComboboxProps<Id, Option, Value>): React.JSX.Element;
+export declare namespace Combobox {
+    var displayName: string;
 }
-export declare const Combobox: {
-    <ValueId = SelectBaseValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
-    displayName: string;
-};
-export {};

package/combobox/combobox.js

@@ -24,18 +24,43 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Combobox = void 0;
-const react_1 = require("@headlessui/react");
+const react_1 = require("@floating-ui/react");
+const react_2 = require("@headlessui/react");
+const show_1 = require("@uxf/core-react/components/show");
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const use_on_unmount_1 = require("@uxf/core-react/hooks/use-on-unmount");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const slugify_1 = require("@uxf/core/utils/slugify");
 const use_async_loading_1 = require("@uxf/ui/hooks/use-async-loading");
-const react_2 = __importStar(require("react"));
-const _select_base_1 = require("../_select-base");
-const Combobox = (props) => {
-    var _a, _b, _c, _d;
-    const isAsync = !!props.loadOptions;
-    const [query, setQuery] = (0, react_2.useState)("");
+const use_dropdown_1 = require("@uxf/ui/hooks/use-dropdown");
+const input_1 = require("@uxf/ui/input");
+const label_1 = require("@uxf/ui/label");
+const react_3 = __importStar(require("react"));
+function Option(props) {
+    return (react_3.default.createElement(react_2.Combobox.Option, { className: (option) => (0, cx_1.cx)("uxf-dropdown__item uxf-combobox__dropdown-item", option.active && classes_1.CLASSES.IS_ACTIVE, option.disabled && classes_1.CLASSES.IS_DISABLED, option.selected && classes_1.CLASSES.IS_SELECTED), value: props.option }, (option) => { var _a, _b; return (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, props.option, option.selected)) !== null && _b !== void 0 ? _b : props.option.label; }));
+}
+Option.displayName = "UxfUiComboboxOption";
+function Options(props) {
+    var _a, _b;
+    (0, use_on_unmount_1.useOnUnmount)(() => { var _a; return (_a = props.onUnmount) === null || _a === void 0 ? void 0 : _a.call(props); });
+    return (react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown uxf-combobox__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"}`, props.matchWidth ? "uxf-dropdown--match-width" : "uxf-dropdown--not-match-width", props.placement === "bottom" && "uxf-dropdown--bottom", props.placement === "top" && "uxf-dropdown--top", props.className), ref: props.forwardRef, static: true, style: props.style }, (0, is_empty_1.isEmpty)(props.options) ? (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, props.emptyMessage)) : (props.options.map((option) => {
+        var _a, _b;
+        const optionKey = (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id;
+        return react_3.default.createElement(Option, { key: optionKey, option: option, renderOption: props.renderOption });
+    }))));
+}
+Options.displayName = "UxfUiComboboxOptions";
+function Combobox(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isAsync = (0, is_not_nil_1.isNotNil)(props.loadOptions);
+    const [query, setQuery] = (0, react_3.useState)("");
     const options = (0, use_async_loading_1.useAsyncLoading)(query, (_a = props.options) !== null && _a !== void 0 ? _a : [], props.loadOptions);
-    const filteredData = query === "" || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
-    const emptyMessage = query.length === 0
+    const filteredData = (0, is_empty_1.isEmpty)(query) || isAsync ? options : options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
+    const emptyMessage = (0, is_empty_1.isEmpty)(query)
         ? (_b = props.noQueryMessage) !== null && _b !== void 0 ? _b : "Pro zobrazení možností začněte psát"
         : (_c = props.notFoundMessage) !== null && _c !== void 0 ? _c : "Nic nenalezeno";
     const clearQuery = () => setQuery("");
@@ -43,8 +68,34 @@ const Combobox = (props) => {
     const onInputChange = (event) => setQuery(event.target.value);
     const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
     const selectedOption = (_d = props.value) !== null && _d !== void 0 ? _d : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: emptyMessage, forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onOptionsUnmount: clearQuery, options: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: selectedOption, variant: props.variant },
-        react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" })));
-};
+    const generatedId = (0, react_3.useId)();
+    const id = (_e = props.id) !== null && _e !== void 0 ? _e : generatedId;
+    const innerRef = (0, react_3.useRef)(null);
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_f = props.dropdownPlacement) !== null && _f !== void 0 ? _f : "bottom", (_g = props.dropdownMatchesInputWidth) !== null && _g !== void 0 ? _g : true, props.dropdownMaxHeight, props.dropdownStrategy);
+    const stableRef = (0, react_3.useMemo)(() => (0, compose_refs_1.composeRefs)(innerRef, props.inputGroupRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.inputGroupRef]);
+    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-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), "data-name": props.name, disabled: props.isDisabled || props.isReadOnly, onChange: onChange, style: props.style, value: selectedOption }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
+        react_3.default.createElement("div", { className: "uxf-form-component__label" },
+            react_3.default.createElement(react_2.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
+        react_3.default.createElement("div", { className: "uxf-form-component__input" },
+            react_3.default.createElement(react_2.Combobox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-combobox__button", 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), customInputElementDisplayName: react_2.Combobox.Input.displayName, inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
+                props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+                props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+                react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" }),
+                react_3.default.createElement(input_1.Input.RightElement, null,
+                    react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) &&
+                            (0, is_not_nil_1.isNotNil)(selectedOption) &&
+                            !props.isDisabled &&
+                            !props.isReadOnly },
+                        react_3.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })),
+                    props.inputArrow ? (react_3.default.createElement(react_2.Combobox.Button, null, props.inputArrow(renderProps.open))) : (react_3.default.createElement(input_1.Input.ArrowIcon, { iconName: props.iconName, isOpen: renderProps.open }))),
+                props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
+            react_3.default.createElement(show_1.Show, { when: renderProps.open },
+                react_3.default.createElement(react_1.FloatingPortal, null,
+                    react_3.default.createElement(Options, { className: props.dropdownClassName, emptyMessage: emptyMessage, forwardRef: dropdown.refs.setFloating, keyExtractor: props.keyExtractor, matchWidth: props.dropdownMatchesInputWidth, onUnmount: clearQuery, options: filteredData, placement: dropdown.placement, renderOption: props.renderOption, size: props.size, style: dropdown.floatingStyles, variant: props.variant }))),
+            react_3.default.createElement(show_1.Show, { when: Boolean(props.helperText) },
+                react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
+}
 exports.Combobox = Combobox;
-exports.Combobox.displayName = "UxfUiCombobox";
+Combobox.displayName = "UxfUiCombobox";

package/combobox/combobox.stories.d.ts

@@ -1,11 +1,8 @@
 import React from "react";
-import { ComboboxOption } from "./combobox";
+import { Combobox } from "./index";
 declare const _default: {
     title: string;
-    component: {
-        <ValueId = import("./combobox").ComboboxValueId, Option = ComboboxOption<ValueId>, Value = Option>(props: import("./combobox").ComboboxProps<ValueId, Option, Value>): React.JSX.Element;
-        displayName: string;
-    };
+    component: typeof Combobox;
 };
 export default _default;
 export declare function Default(): React.JSX.Element;

package/combobox/index.d.ts

@@ -1,2 +1,2 @@
 export { Combobox } from "./combobox";
-export type { ComboboxOption, ComboboxProps, ComboboxValue, ComboboxValueId } from "./combobox";
+export type { ComboboxOption, ComboboxProps, ComboboxTypeRef, ComboboxValue, ComboboxValueId } from "./combobox";

package/css/alert-bubble.css

@@ -21,10 +21,8 @@
     }
 
     &--color-default {
-        :root .light & {
-            --bg-color: theme("backgroundColor.primary.100");
-            --icon-color: theme("colors.primary.600");
-        }
+        --bg-color: theme("backgroundColor.primary.100");
+        --icon-color: theme("colors.primary.600");
 
         :root .dark & {
             --bg-color: theme("backgroundColor.primary.600");
@@ -33,10 +31,8 @@
     }
 
     &--color-warning {
-        :root .light & {
-            --bg-color: theme("backgroundColor.warning.100");
-            --icon-color: theme("colors.warning.600");
-        }
+        --bg-color: theme("backgroundColor.warning.100");
+        --icon-color: theme("colors.warning.600");
 
         :root .dark & {
             --bg-color: theme("backgroundColor.warning.600");
@@ -45,10 +41,8 @@
     }
 
     &--color-success {
-        :root .light & {
-            --bg-color: theme("backgroundColor.success.100");
-            --icon-color: theme("colors.success.600");
-        }
+        --bg-color: theme("backgroundColor.success.100");
+        --icon-color: theme("colors.success.600");
 
         :root .dark & {
             --bg-color: theme("backgroundColor.success.600");
@@ -57,10 +51,8 @@
     }
 
     &--color-error {
-        :root .light & {
-            --bg-color: theme("backgroundColor.error.100");
-            --icon-color: theme("colors.error.600");
-        }
+        --bg-color: theme("backgroundColor.error.100");
+        --icon-color: theme("colors.error.600");
 
         :root .dark & {
             --bg-color: theme("backgroundColor.error.600");

package/css/avatar-file-input.css

@@ -18,9 +18,7 @@
         width: theme("width.20");
 
         &:hover .uxf-avatar-file-input__input-empty {
-            :root .light & {
-                --bg-color: theme("colors.lightBorder/.25");
-            }
+            --bg-color: theme("colors.lightBorder/.25");
 
             :root .dark & {
                 --bg-color: theme("colors.darkBorder/.25");
@@ -28,11 +26,9 @@
         }
 
         &.is-invalid .uxf-avatar-file-input__input-empty {
-            :root .light & {
-                --bg-color: theme("colors.error.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.error.DEFAULT");
-            }
+            --bg-color: theme("colors.error.DEFAULT/.05");
+            --border-color: var(--color);
+            --color: theme("colors.error.DEFAULT");
 
             :root .dark & {
                 --bg-color: theme("colors.error.DEFAULT/.05");
@@ -45,10 +41,8 @@
             pointer-events: none;
 
             .uxf-avatar-file-input__input-empty {
-                :root .light & {
-                    --border-color: var(--color);
-                    --color: theme("colors.lightBorder");
-                }
+                --border-color: var(--color);
+                --color: theme("colors.lightBorder");
 
                 :root .dark & {
                     --border-color: var(--color);
@@ -68,17 +62,15 @@
         &:focus-visible + .uxf-avatar-file-input__input-empty {
             border-width: theme("borderWidth.4");
 
-            /* :root .light & {
-                --bg-color: theme("colors.primary.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.primary.DEFAULT");
-            }
+            /* --bg-color: theme("colors.primary.DEFAULT/.05");
+            --border-color: var(--color);
+            --color: theme("colors.primary.DEFAULT");
 
             :root .dark & {
                 --bg-color: theme("colors.primary.DEFAULT/.05");
                 --border-color: var(--color);
                 --color: theme("colors.primary.DEFAULT");
-            */
+            } */
         }
     }
 
@@ -91,6 +83,8 @@
 
     &__input-empty {
         --bg-color: transparent;
+        --border-color: theme("colors.lightBorder");
+        --color: theme("colors.lightMedium");
 
         @apply transition-all duration-75;
 
@@ -103,14 +97,9 @@
         justify-content: center;
         width: 100%;
 
-        :root .light & {
-            --color: theme("colors.lightMedium");
-            --border-color: theme("colors.lightBorder");
-        }
-
         :root .dark & {
-            --color: theme("colors.darkMedium");
             --border-color: theme("colors.darkBorder");
+            --color: theme("colors.darkMedium");
         }
     }
 

package/css/avatar.css

@@ -1,14 +1,10 @@
 .uxf-avatar {
-    @apply relative inline-flex size-10 items-center justify-center rounded-full;
+    @apply relative inline-flex size-10 items-center justify-center rounded-full bg-gray-200 text-gray-700;
 
     &__image {
         @apply rounded-inherit absolute left-0 top-0 block size-full object-cover;
     }
 
-    :root .light & {
-        @apply bg-gray-200 text-gray-700;
-    }
-
     :root .dark & {
         @apply bg-gray-800 text-gray-200;
     }

package/css/badge.css

@@ -1,5 +1,5 @@
 .uxf-badge {
-    @apply inline-flex items-center justify-center font-bold;
+    @apply bg-primary inline-flex items-center justify-center font-bold text-white;
 
     &--size-small {
         @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;
@@ -13,10 +13,6 @@
         @apply h-10 min-w-[40px] rounded-[20px] px-2 text-lg;
     }
 
-    :root .light & {
-        @apply bg-primary text-white;
-    }
-
     :root .dark & {
         @apply bg-white text-gray-900;
     }

package/css/button-list.css

@@ -8,11 +8,7 @@
     }
 
     &__menu-items {
-        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y rounded-md shadow-lg ring-1 focus:outline-none;
-
-        :root .light & {
-            @apply divide-gray-100 bg-white ring-black/5;
-        }
+        @apply z-dropdown absolute right-0 mt-2 w-40 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none;
 
         :root .dark & {
             @apply divide-gray-700 bg-gray-900 ring-white/10;
@@ -28,22 +24,14 @@
     }
 
     &__menu-button {
-        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm;
-
-        :root .light & {
-            @apply text-black hover:text-gray-800;
-        }
+        @apply is-hoverable:hover:cursor-pointer flex space-x-3 px-3 py-2 text-sm text-black hover:text-gray-800;
 
         :root .dark & {
             @apply text-white hover:text-gray-200;
         }
 
         &-icon {
-            @apply w-3;
-
-            :root .light & {
-                @apply text-lightMedium;
-            }
+            @apply text-lightMedium w-3;
 
             :root .dark & {
                 @apply text-darkMedium;
@@ -51,9 +39,7 @@
         }
 
         &.is-disabled {
-            :root .light & {
-                @apply text-lightLow;
-            }
+            @apply text-lightLow;
 
             :root .dark & {
                 @apply text-darkLow;