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

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

@@ -1,4 +1,4 @@
-import { CSSProperties, FocusEventHandler } from "react";
+import React, { CSSProperties, FocusEventHandler } from "react";
 interface FileResponse {
     extension: string;
     id: number;
@@ -28,5 +28,5 @@ export interface AvatarFileInputProps {
     value?: FileResponse | null | undefined;
     namespace?: "default" | "user-files";
 }
-declare const _default: import("react").ForwardRefExoticComponent<AvatarFileInputProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

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

@@ -0,0 +1,73 @@
+"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 });
+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 = __importStar(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 (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { height: "36px" } },
+        react_1.default.createElement("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" })));
+}
+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 (react_1.default.createElement("div", { className: `_form-field ${className || ""}`, style: style },
+        react_1.default.createElement("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") },
+            react_1.default.createElement("label", { className: "sr-only", htmlFor: id }, label),
+            react_1.default.createElement("div", { className: "rounded-inherit relative flex h-full w-full flex-col items-center justify-center" },
+                react_1.default.createElement(CameraIcon, null),
+                react_1.default.createElement("p", { className: "mt-1 text-xs" }, uploading ? "nahrávám..." : value ? "změnit foto" : "přidat foto")),
+            !!value && (react_1.default.createElement(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 })),
+            react_1.default.createElement("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" })),
+        invalid && error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+}
+exports.default = (0, forwardRef_1.forwardRef)("AvatarFileInput", AvatarFileInput);

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/AvatarFileInput",
+    component: index_1.AvatarFileInput,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(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");
+                });
+            } })));
+}
+exports.Default = Default;

package/button/{button.jsx → button.js}

@@ -15,9 +15,8 @@ function Button(props, ref) {
         ...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>);
+    return (react_1.default.createElement("a", { ref: ref, ...anchorProps, className: className },
+        typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),
+        react_1.default.createElement("div", { className: "loader" })));
 }
 exports.default = (0, forwardRef_1.forwardRef)("Button", Button);

package/button/button.stories.js

@@ -0,0 +1,52 @@
+"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 (react_1.default.createElement("div", { className: "space-y-2" }, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "pb-4" },
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Variant: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, variant),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, color),
+            ", Size:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, size)),
+        react_1.default.createElement("div", { className: "mb-2 flex flex-row gap-2" },
+            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size }, "Default"),
+            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, loading: true }, "Loading"),
+            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, disabled: true }, "Disabled")),
+        react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, isFullWidth: true }, "Full width"))))))))))));
+}
+exports.Default = Default;

package/checkbox/checkbox.js

@@ -0,0 +1,24 @@
+"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 = require("@headlessui/react");
+const react_2 = __importDefault(require("react"));
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+function CheckIcon() {
+    return (react_2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: { height: "24" } },
+        react_2.default.createElement("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" })));
+}
+function SquareIcon() {
+    return (react_2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: { height: "24" } },
+        react_2.default.createElement("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" })));
+}
+function Checkbox(props) {
+    const { checked, className, disabled, label, onChange, style } = props;
+    return (react_2.default.createElement(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 },
+        react_2.default.createElement("span", { className: "sr-only" }, label),
+        checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
+}
+exports.default = Checkbox;

package/checkbox/checkbox.stories.js

@@ -0,0 +1,40 @@
+"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 index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+exports.default = {
+    title: "UI/Checkbox",
+    component: index_1.Checkbox,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => {
+                setChecked(!checked);
+            }, checked: checked })));
+}
+exports.Default = Default;

package/checkbox-input/checkbox-input.js

@@ -0,0 +1,10 @@
+"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"));
+function CheckboxInput() {
+    return react_1.default.createElement("div", { className: "uxf-checkbox-input" }, "xx");
+}
+exports.default = CheckboxInput;

package/checkbox-input/checkbox-input.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/CheckboxInput",
+    component: index_1.CheckboxInput,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.CheckboxInput, null)));
+}
+exports.Default = Default;

package/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler } from "react";
+import React, { FocusEventHandler } from "react";
 declare type ComboboxValue = number | string;
 export declare type ComboboxOption<T = ComboboxValue> = {
     key?: number | string;
@@ -23,5 +23,5 @@ export interface ComboboxProps<V = ComboboxValue, O = ComboboxOption<V>> {
     required?: boolean;
     value?: V;
 }
-declare const _default: import("react").ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & import("react").RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/combobox/combobox.js

@@ -0,0 +1,56 @@
+"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 });
+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 = __importStar(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_2.default.createElement(react_1.Combobox, { as: "div", className: `autocomplete-form-field ${className || ""}`, onChange: onChange, value: selectedOption },
+        react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: !disabledOrReadOnly ? input.focus : undefined }, label),
+        react_2.default.createElement(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 && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error),
+        react_2.default.createElement(react_1.Combobox.Options, { as: dropdown_1.Dropdown.Items, className: "w-full", ref: dropdown.floating, style: dropdown.style }, filteredData.map((option) => (react_2.default.createElement(react_1.Combobox.Option, { as: react_2.Fragment, key: option.key || option.id, value: option }, (o) => (react_2.default.createElement(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))))))));
+}
+exports.default = (0, forwardRef_1.forwardRef)("Combobox", Combobox);

package/combobox/combobox.stories.d.ts

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

package/combobox/combobox.stories.js

@@ -0,0 +1,48 @@
+"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 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 (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.Combobox, { id: "combobox-1", name: "combobox", label: "Start typing to see options...", options: options, onChange: handleChange, value: value })));
+}
+exports.Default = Default;

package/dropdown/dropdown.d.ts

@@ -1,10 +1,10 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
-import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+import React, { 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>>;
+    Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLAnchorElement>>;
+    Items: React.ForwardRefExoticComponent<ItemsProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dropdown/{dropdown.jsx → dropdown.js}

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
 const cx_1 = require("@uxf/core/utils/cx");
 function Item(props, ref) {
@@ -11,14 +15,10 @@ function Item(props, ref) {
         role: "menuitem",
         ...restProps,
     });
-    return (<a ref={ref} {...anchorProps}>
-            {children}
-        </a>);
+    return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
 }
 function Items(props, ref) {
-    return (<div className={(0, cx_1.cx)("uxf-dropdown-items", props.className)} ref={ref} role={props.role}>
-            {props.children}
-        </div>);
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropdown-items", props.className), ref: ref, role: props.role }, props.children));
 }
 exports.Dropdown = {
     Item: (0, forwardRef_1.forwardRef)("Item.", Item),

package/error-message/error-message.js

@@ -0,0 +1,10 @@
+"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"));
+function ErrorMessage(props) {
+    return (react_1.default.createElement("p", { id: props.id, className: "uxf-error-message" }, props.children));
+}
+exports.default = ErrorMessage;

package/error-message/error-message.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/ErrorMessage",
+    component: index_1.ErrorMessage,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.ErrorMessage, null, "This field is required.")));
+}
+exports.Default = Default;

package/icon/icon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconsSet } from "./theme";
 declare type NameOrComponentType = {
     name: IconsSet;
@@ -12,5 +12,5 @@ export declare type IconProps = {
     mode?: "meet" | "slice";
     size?: number;
 } & NameOrComponentType;
-declare const _default: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+declare const _default: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 export default _default;

package/icon/{icon.jsx → icon.js}

@@ -1,5 +1,9 @@
 "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 rem_1 = require("../utils/rem");
 const forwardRef_1 = require("../utils/forwardRef");
 const cx_1 = require("../utils/cx");
@@ -8,15 +12,14 @@ function Icon(props, ref) {
     const CustomComponent = props.Component;
     const _className = (0, cx_1.cx)("uxf-icon", props.className);
     const _preserveAspectRatio = `xMidYMid ${(_a = props.mode) !== null && _a !== void 0 ? _a : "meet"}`;
-    return CustomComponent ? (<CustomComponent className={_className} preserveAspectRatio={_preserveAspectRatio} ref={ref} role="img" style={props.size &&
+    return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: _className, preserveAspectRatio: _preserveAspectRatio, ref: ref, role: "img", style: props.size &&
             {
                 "--i-h": (0, rem_1.rem)(props.size),
                 "--i-w": (0, rem_1.rem)(props.size),
-            }}/>) : (<svg className={_className} preserveAspectRatio={_preserveAspectRatio} ref={ref} role="img" style={{
+            } })) : (react_1.default.createElement("svg", { className: _className, preserveAspectRatio: _preserveAspectRatio, ref: ref, role: "img", style: {
             "--i-h": (0, rem_1.rem)(props.size),
             "--i-w": (0, rem_1.rem)(props.size),
-        }} viewBox={`0 0 ${props.size} ${props.size}`}>
-            <use xlinkHref={`/icons-generated/_icon-sprite.svg#icon-sprite--${props.name}`}/>
-        </svg>);
+        }, viewBox: `0 0 ${props.size} ${props.size}` },
+        react_1.default.createElement("use", { xlinkHref: `/icons-generated/_icon-sprite.svg#icon-sprite--${props.name}` })));
 }
 exports.default = (0, forwardRef_1.forwardRef)("Icon", Icon);

package/icon/icon.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/Icon",
+    component: index_1.Icon,
+};
+const CameraIcon = (props) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 29.65 40", ...props },
+    react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Type: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
+            ", Size: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "16")),
+        react_1.default.createElement(index_1.Icon, { Component: CameraIcon, size: 16, className: "text-red-600" }),
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Type: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
+            ", Size: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "24")),
+        react_1.default.createElement(index_1.Icon, { Component: CameraIcon, size: 24, className: "text-blue-600" }),
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Type: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
+            ", Size: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "48")),
+        react_1.default.createElement(index_1.Icon, { Component: CameraIcon, size: 48, className: "text-green-600" }),
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Type: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
+            ", Size: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "16")),
+        react_1.default.createElement(index_1.Icon, { name: "test", size: 16, className: "text-red-600" }),
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Type: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
+            ", Size: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "24")),
+        react_1.default.createElement(index_1.Icon, { name: "test", size: 24, className: "text-blue-600" }),
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Type: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
+            ", Size: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, "48")),
+        react_1.default.createElement(index_1.Icon, { name: "test", size: 48, className: "text-green-600" })));
+}
+exports.Default = Default;