@uxf/ui 11.74.0 → 11.74.1

package/input/input-element.d.ts

@@ -0,0 +1,24 @@
+import { FormControlProps } from "@uxf/ui/types/form-control-props";
+import React, { CSSProperties, KeyboardEventHandler } from "react";
+type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+export interface InputElementProps extends FormControlProps<string> {
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+    autoComplete?: string | undefined;
+    autoFocus?: boolean;
+    form?: string;
+    id?: string;
+    inputMode?: InputMode;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url" | "time";
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    max?: number | string;
+    min?: number | string;
+    pattern?: string;
+    step?: number | string;
+    style?: CSSProperties;
+}
+export declare const InputElement: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/input/input-element.js

@@ -0,0 +1,33 @@
+"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.InputElement = void 0;
+const react_1 = __importStar(require("react"));
+exports.InputElement = (0, react_1.forwardRef)((props, ref) => {
+    const onChange = (event) => props.onChange(event.target.value, event);
+    const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => { var _a, _b; return Boolean(((_a = p.at(0)) === null || _a === void 0 ? void 0 : _a.startsWith("aria-")) || ((_b = p.at(0)) === null || _b === void 0 ? void 0 : _b.startsWith("data-"))); }));
+    return (react_1.default.createElement("input", { ...filteredProps, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, style: props.style, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
+});
+exports.InputElement.displayName = "UxfUiInputElement";

package/input/input-left-addon.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from "react";
+export interface InputLeftAddonProps {
+    children: ReactNode;
+}
+export declare const InputLeftAddon: FC<InputLeftAddonProps>;

package/input/input-left-addon.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputLeftAddon = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const InputLeftAddon = (props) => {
+    const isText = typeof props.children === "string";
+    return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__left-addon", isText && "uxf-input__left-addon--text") }, props.children);
+};
+exports.InputLeftAddon = InputLeftAddon;
+exports.InputLeftAddon.displayName = "UxfUiInputLeftAddon";

package/input/input-left-element.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from "react";
+export interface InputLeftElementProps {
+    children?: ReactNode;
+}
+export declare const InputLeftElement: FC<InputLeftElementProps>;

package/input/input-left-element.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputLeftElement = void 0;
+const react_1 = __importDefault(require("react"));
+const InputLeftElement = (props) => {
+    return react_1.default.createElement("div", { className: "uxf-input__left-element" }, props.children);
+};
+exports.InputLeftElement = InputLeftElement;
+exports.InputLeftElement.displayName = "UxfUiInputLeftElement";

package/input/input-remove-button.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+export interface InputRemoveButtonProps {
+    onChange?: (value: any) => void;
+}
+export declare const InputRemoveButton: FC<InputRemoveButtonProps>;

package/input/input-remove-button.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputRemoveButton = void 0;
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+const InputRemoveButton = (props) => {
+    const onRemoveClick = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+    };
+    const onRemoveKeyDown = (e) => {
+        var _a;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, null);
+        }
+    };
+    return (react_1.default.createElement("button", { className: "uxf-input__remove-button", onClick: onRemoveClick, onKeyDown: onRemoveKeyDown, type: "button" },
+        react_1.default.createElement("span", { className: "uxf-input__remove-button-inner" },
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-input__remove-button-icon", name: "xmarkLarge" }))));
+};
+exports.InputRemoveButton = InputRemoveButton;
+exports.InputRemoveButton.displayName = "UxfUiInputRemoveButton";

package/input/input-right-addon.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from "react";
+export interface InputRightAddonProps {
+    children: ReactNode;
+}
+export declare const InputRightAddon: FC<InputRightAddonProps>;

package/input/input-right-addon.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputRightAddon = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+const InputRightAddon = (props) => {
+    const isText = typeof props.children === "string";
+    return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-input__right-addon", isText && "uxf-input__right-addon--text") }, props.children));
+};
+exports.InputRightAddon = InputRightAddon;
+exports.InputRightAddon.displayName = "UxfUiInputRightAddon";

package/input/input-right-element.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from "react";
+export interface InputRightElementProps {
+    children?: ReactNode;
+}
+export declare const InputRightElement: FC<InputRightElementProps>;

package/input/input-right-element.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputRightElement = void 0;
+const react_1 = __importDefault(require("react"));
+const InputRightElement = (props) => {
+    return react_1.default.createElement("div", { className: "uxf-input__right-element" }, props.children);
+};
+exports.InputRightElement = InputRightElement;
+exports.InputRightElement.displayName = "UxfUiInputRightElement";

package/input/input.d.ts

@@ -0,0 +1,20 @@
+import { useInputFocus } from "@uxf/core-react/hooks/use-input-focus";
+import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
+import React, { CSSProperties, ReactNode, Ref } from "react";
+export interface InputProps {
+    children: ReactNode;
+    customInputElementDisplayName?: string;
+    className?: string;
+    inputFocus?: ReturnType<typeof useInputFocus>;
+    variant?: keyof InputGroupVariants;
+    size?: keyof InputGroupSizes;
+    style?: CSSProperties;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    inputWrapperRef?: Ref<HTMLDivElement> | undefined;
+    inputGroupRef?: Ref<HTMLDivElement> | undefined;
+    tabIndex?: number;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/input/input.js

@@ -0,0 +1,66 @@
+"use strict";
+"use client";
+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.Input = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const isApplicable = (...args) => {
+    return args.some(Boolean);
+};
+function getChildrenById(children, componentName) {
+    return react_1.Children.toArray(children)
+        .filter(react_1.isValidElement)
+        .find((ch) => ch.type.displayName === componentName);
+}
+exports.Input = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const innerInputRef = (0, react_1.useRef)(null);
+    const { children, className, customInputElementDisplayName, inputFocus, inputWrapperRef, inputGroupRef, isDisabled, isFocused, isInvalid, isReadOnly, variant, size, tabIndex, ...restProps } = props;
+    const mainInput = getChildrenById(children, customInputElementDisplayName !== null && customInputElementDisplayName !== void 0 ? customInputElementDisplayName : "UxfUiInputElement");
+    const leftAddon = getChildrenById(children, "UxfUiInputLeftAddon");
+    const rightAddon = getChildrenById(children, "UxfUiInputRightAddon");
+    const leftElement = getChildrenById(children, "UxfUiInputLeftElement");
+    const rightElement = getChildrenById(children, "UxfUiInputRightElement");
+    const input = (0, use_input_focus_1.useInputFocus)(innerInputRef, (_a = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onBlur) !== null && _a !== void 0 ? _a : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onBlur, (_b = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onFocus) !== null && _b !== void 0 ? _b : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onFocus);
+    const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", isApplicable(isFocused, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isFocused, inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.focused, input.focused) && classes_1.CLASSES.IS_FOCUSED, isApplicable(isInvalid, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, isApplicable(isDisabled, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, isApplicable(isReadOnly, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY, `uxf-input--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-input--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className);
+    return (react_1.default.createElement("div", { className: inputGroupClasses, ref: inputGroupRef, style: props.style },
+        leftAddon,
+        react_1.default.createElement("div", { className: "uxf-input__wrapper", onClick: input.focus, ref: inputWrapperRef, tabIndex: tabIndex, ...restProps },
+            leftElement,
+            mainInput
+                ? (0, react_1.cloneElement)(mainInput, {
+                    onBlur: input.onBlur,
+                    onFocus: input.onFocus,
+                    ref: (0, compose_refs_1.composeRefs)(ref, innerInputRef),
+                })
+                : null,
+            rightElement),
+        rightAddon));
+});
+exports.Input.displayName = "UxfUiInput";

package/input/input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/input/input.spec.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"));
+const snap_test_1 = require("../utils/snap-test");
+const input_stories_1 = require("./input.stories");
+(0, snap_test_1.snapTest)("render default stories", react_1.default.createElement(input_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render sizes stories", react_1.default.createElement(input_stories_1.Sizes, null));

package/input/input.stories.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;
+export declare function Sizes(): React.JSX.Element;
+export declare function ComponentStructure(): React.JSX.Element;

package/input/input.stories.js

@@ -0,0 +1,90 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+exports.Sizes = Sizes;
+exports.ComponentStructure = ComponentStructure;
+const input_1 = require("@uxf/ui/input");
+const action_1 = require("@uxf/ui/utils/action");
+const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+const react_1 = __importStar(require("react"));
+const storybook_config_1 = require("../utils/storybook-config");
+function Default() {
+    const [value, setValue] = (0, react_1.useState)("");
+    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const storyInputs = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.LeftAddon, null, "InputLeftAddon"),
+            react_1.default.createElement(input_1.Input.LeftElement, null, "InputLeftElement"),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-1", onChange: onChange, placeholder: "Placeholder", value: value }),
+            react_1.default.createElement(input_1.Input.RightElement, null, "InputRightElement"),
+            react_1.default.createElement(input_1.Input.RightAddon, null, "InputRightAddon")),
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.LeftAddon, null, "https://"),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-2", onChange: onChange, placeholder: "Placeholder", value: value }),
+            react_1.default.createElement(input_1.Input.RightAddon, null, ".uxf.cz")),
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-3", onChange: onChange, placeholder: "Placeholder", value: value }),
+            react_1.default.createElement(input_1.Input.RightAddon, null, ".test.cz")),
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-4", onChange: onChange, placeholder: "Placeholder", value: value }),
+            react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14")),
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, name: "input-element-5", onChange: onChange, placeholder: "Placeholder", value: value })),
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.Element, { isDisabled: true, isInvalid: isInvalid, name: "input-element-6", onChange: onChange, placeholder: "Disabled", value: value })),
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.Element, { isInvalid: isInvalid, isReadOnly: true, name: "input-element-7", onChange: onChange, placeholder: "Read Only", value: value }))));
+    const onInvalidChange = (e) => setInvalid(e.target.checked);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("input", { checked: isInvalid, onChange: onInvalidChange, type: "checkbox" }),
+        react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyInputs)));
+}
+function Sizes() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Input");
+    const [value, setValue] = (0, react_1.useState)("");
+    const onChange = (0, action_1.action)("onChange", setValue);
+    return (react_1.default.createElement("div", { className: "space-y-4" }, config.sizes.map((size) => (react_1.default.createElement(input_1.Input, { key: size, size: size },
+        react_1.default.createElement(input_1.Input.LeftAddon, null, "LeftAddon"),
+        react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
+        react_1.default.createElement(input_1.Input.Element, { name: `input-element-size-${size}`, onChange: onChange, placeholder: size, value: value }),
+        react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14"),
+        react_1.default.createElement(input_1.Input.RightAddon, null, "RightAddon"))))));
+}
+function ComponentStructure() {
+    const [value, onChange] = (0, react_1.useState)("");
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(input_1.Input, null,
+            react_1.default.createElement(input_1.Input.LeftAddon, null, "Left addon"),
+            react_1.default.createElement(input_1.Input.LeftElement, null, "Left element"),
+            react_1.default.createElement(input_1.Input.Element, { name: "input-element-component-structure", onChange: onChange, value: value }),
+            react_1.default.createElement(input_1.Input.RightElement, null, "Right element"),
+            react_1.default.createElement(input_1.Input.RightAddon, null, "Right addon"))));
+}

package/input/theme.d.ts

@@ -0,0 +1,10 @@
+export interface InputGroupVariants {
+    default: true;
+}
+export type InputGroupVariant = keyof InputGroupVariants;
+export interface InputGroupSizes {
+    small: true;
+    default: true;
+    large: true;
+}
+export type InputGroupSize = keyof InputGroupSizes;

package/input/theme.js

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

package/label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from "./label";
+export type { LabelProps } from "./label";

package/label/index.js

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

package/label/label.d.ts

@@ -0,0 +1,12 @@
+import React, { MouseEventHandler, ReactNode } from "react";
+export interface LabelProps {
+    children?: ReactNode;
+    className?: string;
+    form?: string;
+    htmlFor?: string;
+    id?: string;
+    isHidden?: boolean;
+    isRequired?: boolean;
+    onClick?: MouseEventHandler<HTMLLabelElement>;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;

package/label/label.js

@@ -0,0 +1,37 @@
+"use strict";
+"use client";
+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.Label = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+exports.Label = (0, react_1.forwardRef)((props, ref) => {
+    const className = (0, cx_1.cx)("uxf-label", props.isHidden && "uxf-label--hidden", props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+    react_1.default.createElement("label", { className: className, form: props.form, htmlFor: props.htmlFor, id: props.id, onClick: props.onClick, ref: ref }, props.children));
+});
+exports.Label.displayName = "UxfUiLabel";

package/label/label.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/label/label.spec.js

@@ -0,0 +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 snap_test_1 = require("../utils/snap-test");
+const label_stories_1 = require("./label.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(label_stories_1.Default, null));

package/label/label.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/label/label.stories.js

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

package/layout/index.d.ts

@@ -0,0 +1,2 @@
+export { Layout } from "./layout";
+export type { LayoutProps } from "./layout";

package/layout/index.js

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

package/layout/layout.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export interface LayoutProps {
+    children?: ReactNode;
+    sidebar?: ReactNode;
+    sidebarHeader?: ReactNode;
+    appBar?: ReactNode;
+    classNameAppBar?: string;
+    className?: string;
+}
+export declare function Layout(props: LayoutProps): React.JSX.Element;
+export declare namespace Layout {
+    var displayName: string;
+}

package/layout/layout.js

@@ -0,0 +1,46 @@
+"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.Layout = Layout;
+const translations_1 = require("@uxf/core-react/translations");
+const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importStar(require("react"));
+const icon_button_1 = require("../icon-button");
+function Layout(props) {
+    var _a, _b;
+    const t = (0, translations_1.useUxfTranslation)();
+    const [isSidebarOpen, setIsSidebarOpen] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: `uxf-layout ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-sidebar", isSidebarOpen && "uxf-sidebar--is-open") },
+            (0, is_not_nil_1.isNotNil)(props.sidebarHeader) && react_1.default.createElement("div", { className: "uxf-sidebar__header" }, props.sidebarHeader),
+            react_1.default.createElement("div", { className: "uxf-sidebar__content" }, props.sidebar)),
+        isSidebarOpen && react_1.default.createElement("div", { className: "uxf-sidebar-overlay", onClick: () => setIsSidebarOpen(false) }),
+        react_1.default.createElement("div", { className: `uxf-app-bar ${(_b = props.classNameAppBar) !== null && _b !== void 0 ? _b : ""}` },
+            react_1.default.createElement(icon_button_1.IconButton, { className: "uxf-app-bar__menu-button", iconName: "bars", label: t("uxf-ui-layout:open-menu"), onClick: () => setIsSidebarOpen(true), variant: "text" }),
+            react_1.default.createElement("div", { className: "uxf-app-bar__content" }, props.appBar)),
+        react_1.default.createElement("main", { className: "uxf-layout__content" }, props.children)));
+}
+Layout.displayName = "UxfUiLayout";

package/layout/layout.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/layout/layout.spec.js

@@ -0,0 +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 snap_test_1 = require("../utils/snap-test");
+const layout_stories_1 = require("./layout.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(layout_stories_1.Default, null));

package/layout/layout.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/layout/layout.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("./layout");
+function Default() {
+    return (react_1.default.createElement(layout_1.Layout, { appBar: react_1.default.createElement("div", { className: "flex h-full items-center justify-center" }, "appBar"), sidebar: react_1.default.createElement("div", { className: "p-8" },
+            react_1.default.createElement("div", { className: "flex h-64 items-center justify-center rounded-xl border-4 border-dashed border-gray-200 text-xl font-semibold text-gray-300" }, "sidebar")), sidebarHeader: react_1.default.createElement("div", { className: "p-8" },
+            react_1.default.createElement("div", { className: "flex h-32 items-center justify-center rounded-xl border-4 border-dashed border-gray-200 text-xl font-semibold text-gray-300" }, "sidebarHeader")) },
+        react_1.default.createElement("div", { className: "p-8" },
+            react_1.default.createElement("div", { className: "flex h-64 items-center justify-center rounded-xl border-4 border-dashed border-gray-200 text-xl font-semibold text-gray-300" }, "children"))));
+}

package/layout/translations.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    "uxf-ui-layout": {
+        "open-menu": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+    };
+};
+export default _default;

package/layout/translations.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "uxf-ui-layout": {
+        "open-menu": {
+            cs: "Otevřít menu",
+            en: "Open menu",
+            sk: "Otvoriť menu",
+            de: "Menü öffnen",
+        },
+    },
+};