@uxf/ui 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -0,0 +1,32 @@
+import React, { 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: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,69 @@
+"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");
+const icon_1 = require("../icon");
+function AvatarFileInput(props, ref) {
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const errorId = props.invalid && props.id ? `${props.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 props.uploadHandler(file);
+                await props.onChange(response);
+            }
+            catch (err) {
+                props.onUploadError(err);
+            }
+            finally {
+                setUploading(false);
+            }
+        }
+    }, [props]);
+    return (react_1.default.createElement("div", { className: `_form-field ${props.className || ""}`, style: props.style },
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input", input.focused && classes_1.CLASSES.IS_FOCUSED, props.disabled && classes_1.CLASSES.IS_DISABLED, props.readOnly && classes_1.CLASSES.IS_READONLY, props.invalid && classes_1.CLASSES.IS_INVALID, props.value && "is-disabled:opacity-50") },
+            react_1.default.createElement("label", { className: "sr-only", htmlFor: props.id }, props.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(icon_1.Icon, { Component: icon_1.CameraIcon, size: 36, className: "text-gray-800" }),
+                react_1.default.createElement("p", { className: "mt-1 text-xs text-gray-800" }, uploading ? "nahrávám..." : props.value ? "změnit foto" : "přidat foto")),
+            !!props.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: props.value, width: 96 })),
+            react_1.default.createElement("input", { accept: "image/*", "aria-describedby": errorId, "aria-invalid": props.invalid, className: "input-reset rounded-inherit absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: props.disabled, form: props.form, id: props.id, name: props.name, onBlur: input.onBlur, onChange: _onChange, onFocus: input.onFocus, readOnly: props.readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.required, tabIndex: props.readOnly ? -1 : undefined, type: "file" })),
+        props.invalid && props.error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, props.error)));
+}
+exports.default = (0, forwardRef_1.forwardRef)("AvatarFileInput", AvatarFileInput);

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    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/avatar-file-input/index.d.ts

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

package/avatar-file-input/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.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

@@ -1,14 +1,14 @@
-import { ReactNode } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
-interface ButtonProps {
-    variant?: keyof ButtonVariants;
-    color?: keyof ButtonColors;
-    size?: keyof ButtonSizes;
-    disabled?: boolean;
-    loading?: boolean;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
-    children: ReactNode;
+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 function Button(props: ButtonProps): JSX.Element;
-export default Button;
+declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/button/button.js

@@ -3,17 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var theme_1 = require("@uxf/ui/theme");
-var cx_1 = require("@uxf/core/utils/cx");
-function Button(props) {
+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;
-    var theme = (0, theme_1.useTheme)().Button;
-    var className = (0, cx_1.cx)("button", theme.color[(_a = props.color) !== null && _a !== void 0 ? _a : theme.defaultColor], theme.size[(_b = props.size) !== null && _b !== void 0 ? _b : theme.defaultSize], theme.variant[(_c = props.variant) !== null && _c !== void 0 ? _c : theme.defaultVariant], props.disabled && theme.disabled);
-    return (react_1.default.createElement("button", { type: "button", className: className },
-        props.startAdornment,
-        props.children,
-        props.endAdornment));
+    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 (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 = Button;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2J1dHRvbi9idXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsZ0RBQXlDO0FBQ3pDLHVDQUF5QztBQUV6Qyx5Q0FBd0M7QUFheEMsU0FBUyxNQUFNLENBQUMsS0FBa0I7O0lBQ2hDLElBQU0sS0FBSyxHQUFHLElBQUEsZ0JBQVEsR0FBRSxDQUFDLE1BQU0sQ0FBQztJQUVoQyxJQUFNLFNBQVMsR0FBRyxJQUFBLE9BQUUsRUFDbEIsUUFBUSxFQUNSLEtBQUssQ0FBQyxLQUFLLENBQUMsTUFBQSxLQUFLLENBQUMsS0FBSyxtQ0FBSSxLQUFLLENBQUMsWUFBWSxDQUFDLEVBQzlDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBQSxLQUFLLENBQUMsSUFBSSxtQ0FBSSxLQUFLLENBQUMsV0FBVyxDQUFDLEVBQzNDLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBQSxLQUFLLENBQUMsT0FBTyxtQ0FBSSxLQUFLLENBQUMsY0FBYyxDQUFDLEVBQ3BELEtBQUssQ0FBQyxRQUFRLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FDakMsQ0FBQztJQUVGLE9BQU8sQ0FDTCwwQ0FBUSxJQUFJLEVBQUMsUUFBUSxFQUFDLFNBQVMsRUFBRSxTQUFTO1FBQ3ZDLEtBQUssQ0FBQyxjQUFjO1FBQ3BCLEtBQUssQ0FBQyxRQUFRO1FBQ2QsS0FBSyxDQUFDLFlBQVksQ0FDWixDQUNWLENBQUM7QUFDSixDQUFDO0FBRUQsa0JBQWUsTUFBTSxDQUFDIn0=
+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.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/button/index.d.ts

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

package/button/index.js

@@ -20,5 +20,4 @@ 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/theme"), exports);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsZ0RBQTBEO0FBQWpELGlIQUFBLE9BQU8sT0FBVTtBQUMxQix1REFBcUMifQ==
+__exportStar(require("@uxf/ui/button/button"), exports);

package/button/theme.d.ts

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

package/button/theme.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL3RoZW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

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.js

@@ -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 = 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) {
+    return (react_2.default.createElement(react_1.Switch, { checked: props.checked, className: (0, cx_1.cx)(props.checked && classes_1.CLASSES.IS_SELECTED, props.disabled && classes_1.CLASSES.IS_DISABLED, "uxf-checkbox", props.className), disabled: props.disabled, onChange: props.onChange, style: props.style },
+        react_2.default.createElement("span", { className: "sr-only" }, props.label),
+        props.checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
+}
+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.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/index.d.ts

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

package/checkbox/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.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.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.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.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/checkbox-input/index.d.ts

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

package/checkbox-input/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.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,21 @@
+import React, { ReactNode } from "react";
+import { FormControlProps } from "../types";
+export declare type ComboboxValue = number | string;
+export declare type ComboboxOption<T = ComboboxValue> = {
+    id: T;
+    label: string;
+    disabled?: boolean;
+};
+export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Value>> extends FormControlProps<Value | null> {
+    id: string;
+    className?: string;
+    helperText?: ReactNode;
+    label: string;
+    placeholder?: string;
+    options: Option[];
+    error?: string;
+    keyExtractor?: (option: Option) => string | number;
+    renderOption?: (option: Option) => ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/combobox/combobox.js

@@ -0,0 +1,57 @@
+"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 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 label_1 = require("../label");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+const icon_1 = require("../icon");
+const slugify_1 = require("@uxf/core/utils/slugify");
+function Combobox(props, ref) {
+    const [query, setQuery] = (0, react_2.useState)("");
+    const selectedOption = props.options.find((option) => option.id === props.value);
+    const filteredData = query === "" ? props.options : props.options.filter((item) => (0, slugify_1.slugify)(item.label).includes((0, slugify_1.slugify)(query)));
+    const innerRef = (0, react_2.useRef)(null);
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.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]);
+    const errorId = props.isInvalid ? `${props.id}--error-message` : undefined;
+    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && "is-required", props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
+        react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
+            react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
+            renderProps.open ? (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronUpIcon, size: 12 })) : (react_2.default.createElement(icon_1.Icon, { Component: icon_1.ChevronDownIcon, size: 12 }))),
+        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID) }, props.helperText)),
+        react_2.default.createElement(react_1.Combobox.Options, { className: "uxf-dropdown", ref: dropdown.floating, style: dropdown.style }, filteredData.map((option) => {
+            var _a, _b, _c, _d;
+            return (react_2.default.createElement(react_1.Combobox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
+        }))))));
+}
+exports.default = (0, forwardRef_1.forwardRef)("Combobox", Combobox);

package/combobox/combobox.stories.d.ts

@@ -0,0 +1,9 @@
+import { ComboboxValue } from "./combobox";
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./combobox").ComboboxProps<ComboboxValue, import("./combobox").ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;