@uxf/ui 1.0.0-beta.2 → 1.0.0-beta.26

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

@@ -0,0 +1,32 @@
+import { CSSProperties, FocusEventHandler } from "react";
+interface FileResponse {
+    extension: string;
+    id: number;
+    name: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export declare type AvatarFileInputChangeEventHandler = (file: FileResponse | null) => Promise<void>;
+export declare type AvatarFileInputUploadHandler = (file: File, namespace?: string) => Promise<FileResponse>;
+export interface AvatarFileInputProps {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    form?: string;
+    id: string;
+    invalid?: boolean;
+    label: string;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onChange: AvatarFileInputChangeEventHandler;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onUploadError: (err: unknown) => void;
+    readOnly?: boolean;
+    required?: boolean;
+    style?: CSSProperties;
+    uploadHandler: AvatarFileInputUploadHandler;
+    value?: FileResponse | null | undefined;
+    namespace?: "default" | "user-files";
+}
+declare const _default: import("react").ForwardRefExoticComponent<AvatarFileInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;

package/avatar-file-input/avatar-file-input.jsx

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = require("react");
+const forwardRef_1 = require("../utils/forwardRef");
+const error_message_1 = require("../error-message");
+const raster_image_1 = require("../raster-image");
+function CameraIcon() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={{ height: "36px" }}>
+            <path d="M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z"/>
+        </svg>);
+}
+function AvatarFileInput(props, ref) {
+    const { className, disabled, error, form, id, invalid, label, name, onBlur, onChange, onFocus, onUploadError, readOnly, required, style, uploadHandler, value, } = props;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const errorId = invalid && id ? `${id}--errormessage` : undefined;
+    const [uploading, setUploading] = (0, react_1.useState)(false);
+    const _onChange = (0, react_1.useCallback)(async (e) => {
+        var _a;
+        e.persist();
+        const files = (_a = e.target.files) !== null && _a !== void 0 ? _a : [];
+        if (files.length === 1) {
+            const file = files[0];
+            try {
+                setUploading(true);
+                const response = await uploadHandler(file);
+                await onChange(response);
+            }
+            catch (err) {
+                onUploadError(err);
+            }
+            finally {
+                setUploading(false);
+            }
+        }
+    }, [onChange, onUploadError, uploadHandler]);
+    return (<div className={`_form-field ${className || ""}`} style={style}>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+            <div className={(0, cx_1.cx)("uxf-avatar-file-input", input.focused && classes_1.CLASSES.IS_FOCUSED, disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID, value && "is-disabled:opacity-50")}>
+                <label className="sr-only" htmlFor={id}>
+                    {label}
+                </label>
+                <div className="rounded-inherit relative flex h-full w-full flex-col items-center justify-center">
+                    <CameraIcon />
+                    <p className="mt-1 text-xs">{uploading ? "nahrávám..." : value ? "změnit foto" : "přidat foto"}</p>
+                </div>
+                {!!value && (<raster_image_1.RasterImage alt="" className={(0, cx_1.cx)("rounded-inherit absolute left-0 top-0 block h-full w-full object-cover", uploading && "opacity-0")} height={96} src={value} width={96}/>)}
+                <input accept="image/*" aria-describedby={errorId} aria-invalid={invalid} className="input-reset rounded-inherit absolute left-0 top-0 h-full w-full cursor-pointer opacity-0" disabled={disabled} form={form} id={id} name={name} onBlur={input.onBlur} onChange={_onChange} onFocus={input.onFocus} readOnly={readOnly} ref={(0, composeRefs_1.composeRefs)(innerRef, ref)} required={required} tabIndex={readOnly ? -1 : undefined} type="file"/>
+            </div>
+            {invalid && error && <error_message_1.ErrorMessage id={errorId}>{error}</error_message_1.ErrorMessage>}
+        </div>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("AvatarFileInput", AvatarFileInput);

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./avatar-file-input").AvatarFileInputProps & import("react").RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/avatar-file-input/avatar-file-input.stories.jsx

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/AvatarFileInput",
+    component: index_1.AvatarFileInput,
+};
+function Default() {
+    return (<div className="space-y-2">
+            <index_1.AvatarFileInput id={"afi"} label="Vyberte Avatar" onChange={(value) => {
+            return new Promise(() => {
+                // eslint-disable-next-line no-console
+                console.log("Changed:", value);
+            });
+        }} onUploadError={() => {
+            // eslint-disable-next-line no-console
+            console.log("Upload error");
+        }} uploadHandler={() => {
+            return new Promise(() => {
+                // eslint-disable-next-line no-console
+                console.log("Upload handler");
+            });
+        }}/>
+        </div>);
+}
+exports.Default = Default;

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

@@ -0,0 +1 @@
+export { default as AvatarFileInput } from "./avatar-file-input";

package/avatar-file-input/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFileInput = void 0;
+var avatar_file_input_1 = require("./avatar-file-input");
+Object.defineProperty(exports, "AvatarFileInput", { enumerable: true, get: function () { return __importDefault(avatar_file_input_1).default; } });

package/button/button.d.ts

@@ -0,0 +1,14 @@
+import React, { AnchorHTMLAttributes } from "react";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+export declare type ButtonVariant = keyof ButtonVariants;
+export declare type ButtonSize = keyof ButtonSizes;
+export declare type ButtonColor = keyof ButtonColors;
+export interface ButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    isFullWidth?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/button/button.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("../utils/forwardRef");
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const classes_1 = require("@uxf/core/constants/classes");
+function Button(props, ref) {
+    var _a, _b, _c;
+    const className = (0, cx_1.cx)("uxf-button", `uxf-button--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-button--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-button--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, props.disabled && classes_1.CLASSES.IS_DISABLED, props.loading && "is-loading", props.isFullWidth && "uxf-button--full-width");
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        ...props,
+        className,
+    });
+    return (<a ref={ref} {...anchorProps} className={className}>
+            {typeof props.children === "string" ? (<span className="uxf-button__text">{props.children}</span>) : (props.children)}
+            <div className="loader"/>
+        </a>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("Button", Button);

package/button/button.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/button").ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/button/button.stories.jsx

@@ -0,0 +1,64 @@
+"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.Default = void 0;
+const react_1 = __importStar(require("react"));
+const button_1 = require("@uxf/ui/button");
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+exports.default = {
+    title: "UI/Button",
+    component: button_1.Button,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-2">
+            {config.variants.map((variant) => (<react_1.Fragment key={variant}>
+                    {config.colors.map((color) => (<react_1.Fragment key={color}>
+                            {config.sizes.map((size) => (<div key={`${size}${color}${variant}`} className="pb-4">
+                                    <div className="mb-2 text-sm">
+                                        Variant: <span className="font-semibold">{variant}</span>, Color:{" "}
+                                        <span className="font-semibold">{color}</span>, Size:{" "}
+                                        <span className="font-semibold">{size}</span>
+                                    </div>
+                                    <div className="mb-2 flex flex-row gap-2">
+                                        <button_1.Button variant={variant} color={color} size={size}>
+                                            Default
+                                        </button_1.Button>
+                                        <button_1.Button variant={variant} color={color} size={size} loading>
+                                            Loading
+                                        </button_1.Button>
+                                        <button_1.Button variant={variant} color={color} size={size} disabled>
+                                            Disabled
+                                        </button_1.Button>
+                                    </div>
+                                    <button_1.Button variant={variant} color={color} size={size} isFullWidth>
+                                        Full width
+                                    </button_1.Button>
+                                </div>))}
+                        </react_1.Fragment>))}
+                </react_1.Fragment>))}
+        </div>);
+}
+exports.Default = Default;

package/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "@uxf/ui/button/button";
+export * from "@uxf/ui/button/button";

package/button/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var button_1 = require("@uxf/ui/button/button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+__exportStar(require("@uxf/ui/button/button"), exports);

package/button/theme.d.ts

@@ -0,0 +1,18 @@
+export interface ButtonVariants {
+    outlined: true;
+    default: true;
+}
+export interface ButtonSizes {
+    xs: true;
+    sm: true;
+    default: true;
+    lg: true;
+    xl: true;
+}
+export interface ButtonColors {
+    default: true;
+    white: true;
+    success: true;
+    warning: true;
+    error: true;
+}

package/button/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/checkbox/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+interface Props {
+    className?: string;
+    checked: boolean;
+    disabled?: boolean;
+    intermediate?: boolean;
+    label: string;
+    onChange: (checked: boolean) => void;
+    style?: Partial<CSSProperties>;
+}
+declare function Checkbox(props: Props): JSX.Element;
+export default Checkbox;

package/checkbox/checkbox.jsx

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@headlessui/react");
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+function CheckIcon() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style={{ height: "24" }}>
+            <path d="M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z"/>
+        </svg>);
+}
+function SquareIcon() {
+    return (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style={{ height: "24" }}>
+            <path d="M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80z"/>
+        </svg>);
+}
+function Checkbox(props) {
+    const { checked, className, disabled, label, onChange, style } = props;
+    return (<react_1.Switch checked={checked} className={(0, cx_1.cx)(checked && classes_1.CLASSES.IS_SELECTED, disabled && classes_1.CLASSES.IS_DISABLED, "uxf-checkbox", className)} disabled={disabled} onChange={onChange} style={style}>
+            <span className="sr-only">{label}</span>
+            {checked ? <CheckIcon /> : <SquareIcon />}
+        </react_1.Switch>);
+}
+exports.default = Checkbox;

package/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Checkbox } from "./index";
+declare const _default: {
+    title: string;
+    component: typeof Checkbox;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/checkbox/checkbox.stories.jsx

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = require("react");
+exports.default = {
+    title: "UI/Checkbox",
+    component: index_1.Checkbox,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    return (<div className="space-y-2">
+            <index_1.Checkbox label={"Opravdu?"} onChange={() => {
+            setChecked(!checked);
+        }} checked={checked}/>
+        </div>);
+}
+exports.Default = Default;

package/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./checkbox";

package/checkbox/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function CheckboxInput(): JSX.Element;
+export default CheckboxInput;

package/checkbox-input/checkbox-input.jsx

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function CheckboxInput() {
+    return <div className="uxf-checkbox-input">xx</div>;
+}
+exports.default = CheckboxInput;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CheckboxInput } from "./index";
+declare const _default: {
+    title: string;
+    component: typeof CheckboxInput;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/checkbox-input/checkbox-input.stories.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/CheckboxInput",
+    component: index_1.CheckboxInput,
+};
+function Default() {
+    return (<div className="space-y-2">
+            <index_1.CheckboxInput />
+        </div>);
+}
+exports.Default = Default;

package/checkbox-input/index.d.ts

@@ -0,0 +1 @@
+export { default as CheckboxInput } from "./checkbox-input";

package/checkbox-input/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = void 0;
+var checkbox_input_1 = require("./checkbox-input");
+Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return __importDefault(checkbox_input_1).default; } });

package/combobox/combobox.d.ts

@@ -0,0 +1,27 @@
+import { FocusEventHandler } from "react";
+declare type ComboboxValue = number | string;
+export declare type ComboboxOption<T = ComboboxValue> = {
+    key?: number | string;
+    id: T;
+    label: string;
+    disabled?: boolean;
+};
+export interface ComboboxProps<V = ComboboxValue, O = ComboboxOption<V>> {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    onChange: (value: O | null) => void;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    name: string;
+    id: string;
+    label: string;
+    placeholder?: string;
+    options: O[];
+    readOnly?: boolean;
+    required?: boolean;
+    value?: V;
+}
+declare const _default: import("react").ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/combobox/combobox.jsx

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@headlessui/react");
+const dropdown_1 = require("../dropdown");
+const use_dropdown_1 = require("../hooks/use-dropdown");
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_2 = require("react");
+const error_message_1 = require("../error-message");
+const label_1 = require("../label");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function Combobox(props, ref) {
+    const { className, disabled, error, id, invalid, label, onBlur, onChange, onFocus, options, placeholder, readOnly, value, } = props;
+    const [query, setQuery] = (0, react_2.useState)("");
+    const selectedOption = options.find((option) => option.id === value);
+    const filteredData = query === ""
+        ? options
+        : options.filter((item) => String(item.label).toLowerCase().includes(query.toLowerCase()));
+    const innerRef = (0, react_2.useRef)(null);
+    const disabledOrReadOnly = disabled || readOnly;
+    const errorId = invalid ? `${id}--errormessage` : undefined;
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
+    return (<react_1.Combobox as="div" className={`autocomplete-form-field ${className || ""}`} onChange={onChange} value={selectedOption}>
+            <react_1.Combobox.Label as={label_1.Label} onClick={!disabledOrReadOnly ? input.focus : undefined}>
+                {label}
+            </react_1.Combobox.Label>
+            <react_1.Combobox.Input className={(0, cx_1.cx)("border-grey w-full rounded-lg border p-4 tracking-wider outline-none", invalid && error && "outline-red border-transparent outline")} displayValue={(item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }} onBlur={onBlur} onChange={(event) => setQuery(event.target.value)} placeholder={placeholder} ref={stableRef} type="text"/>
+            {invalid && error && <error_message_1.ErrorMessage id={errorId}>{error}</error_message_1.ErrorMessage>}
+            <react_1.Combobox.Options as={dropdown_1.Dropdown.Items} className="w-full" ref={dropdown.floating} style={dropdown.style}>
+                {filteredData.map((option) => (<react_1.Combobox.Option as={react_2.Fragment} key={option.key || option.id} value={option}>
+                        {(o) => (<dropdown_1.Dropdown.Item className={(0, cx_1.cx)(o.active && classes_1.CLASSES.IS_ACTIVE, o.disabled && classes_1.CLASSES.IS_DISABLED, o.selected && classes_1.CLASSES.IS_SELECTED)}>
+                                {option.label}
+                            </dropdown_1.Dropdown.Item>)}
+                    </react_1.Combobox.Option>))}
+            </react_1.Combobox.Options>
+        </react_1.Combobox>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("Combobox", Combobox);

package/combobox/combobox.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComboboxOption } from "./combobox";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./combobox").ComboboxProps<string | number, ComboboxOption<string | number>> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/combobox/combobox.stories.jsx

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = require("react");
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/Combobox",
+    component: index_1.Combobox,
+};
+const options = [
+    { id: "one", label: "Option one" },
+    // { id: "two", label: "Option two" },
+    // { id: "three", label: "Option three" },
+];
+function Default() {
+    const [value, setValue] = (0, react_1.useState)();
+    const handleChange = (v) => {
+        // eslint-disable-next-line no-console
+        console.log("Select value: ", v);
+        setValue(v === null || v === void 0 ? void 0 : v.id);
+    };
+    return (<div className="space-y-2">
+            <index_1.Combobox id="combobox-1" name="combobox" label="Start typing to see options..." options={options} onChange={handleChange} value={value}/>
+        </div>);
+}
+exports.Default = Default;

package/combobox/index.d.ts

@@ -0,0 +1 @@
+export { default as Combobox, ComboboxProps } from "./combobox";

package/combobox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+var combobox_1 = require("./combobox");
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return __importDefault(combobox_1).default; } });

package/dropdown/dropdown.d.ts

@@ -0,0 +1,10 @@
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+interface ItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+}
+declare type ItemsProps = HTMLAttributes<HTMLDivElement>;
+export declare const Dropdown: {
+    Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Items: import("react").ForwardRefExoticComponent<ItemsProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dropdown/dropdown.jsx

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+const cx_1 = require("@uxf/core/utils/cx");
+function Item(props, ref) {
+    const { children, className, ...restProps } = props;
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        className: `uxf-dropdown-item ${className || ""}`,
+        role: "menuitem",
+        ...restProps,
+    });
+    return (<a ref={ref} {...anchorProps}>
+            {children}
+        </a>);
+}
+function Items(props, ref) {
+    return (<div className={(0, cx_1.cx)("uxf-dropdown-items", props.className)} ref={ref} role={props.role}>
+            {props.children}
+        </div>);
+}
+exports.Dropdown = {
+    Item: (0, forwardRef_1.forwardRef)("Item.", Item),
+    Items: (0, forwardRef_1.forwardRef)("Items", Items),
+};

package/dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown } from "./dropdown";

package/dropdown/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var dropdown_1 = require("./dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });

package/error-message/error-message.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+interface Props {
+    id?: string | undefined;
+    children?: ReactNode;
+}
+declare function ErrorMessage(props: Props): JSX.Element;
+export default ErrorMessage;

package/error-message/error-message.jsx

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function ErrorMessage(props) {
+    return (<p id={props.id} className="uxf-error-message">
+            {props.children}
+        </p>);
+}
+exports.default = ErrorMessage;