@uxf/ui 1.0.0-beta.7 → 1.0.0-beta.70

package/tabs/tabs.stories.js

@@ -0,0 +1,48 @@
+"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 tabs_1 = require("./tabs");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/Tabs",
+    component: tabs_1.Tabs,
+};
+function Default() {
+    const testTabs = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "flex items-center gap-6" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
+                react_1.default.createElement(tabs_1.Tabs, null,
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
+                react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))),
+        react_1.default.createElement("div", { className: "w-[600px]" },
+            react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
+            react_1.default.createElement(tabs_1.Tabs, { grow: true },
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+        react_1.default.createElement("div", { className: "w-[600px]" },
+            react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
+            react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.TabPanel, { tabTitle: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
+        react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));
+}
+exports.Default = Default;

package/text-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./text-input";

package/text-input/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./text-input"), exports);

package/text-input/text-input.d.ts

@@ -0,0 +1,31 @@
+import { InputProps } from "@uxf/ui/input/input";
+import { FormControlProps } from "@uxf/ui/types";
+import React, { KeyboardEventHandler, ReactNode } from "react";
+declare type EnterKeyHint = "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+declare type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+export interface TextInputProps extends FormControlProps<string>, Pick<InputProps, "size" | "variant"> {
+    autoComplete?: string;
+    className?: string;
+    enterKeyHint?: EnterKeyHint;
+    form?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    id?: string;
+    inputMode?: InputMode;
+    label?: ReactNode;
+    leftAddon?: ReactNode;
+    leftElement?: ReactNode;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    rightAddon?: ReactNode;
+    rightElement?: ReactNode;
+    type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    max?: number | string;
+    min?: number | string;
+    pattern?: string;
+    step?: number | string;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/text-input/text-input.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 });
+exports.TextInput = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const input_1 = require("@uxf/ui/input");
+const react_1 = __importStar(require("react"));
+const form_control_1 = require("../form-control");
+exports.TextInput = (0, forwardRef_1.forwardRef)("TextInput", (props, ref) => {
+    var _a;
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const generatedId = (0, react_1.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-text-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    const onFocus = (e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onBlur = (e) => {
+        var _a;
+        setIsFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_1.default.createElement(input_1.Input, { size: props.size, variant: props.variant },
+            props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+            props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, form: props.form, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: props.onChange, onFocus: onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: ref, step: props.step, type: props.type, value: props.value }),
+            props.rightElement && react_1.default.createElement(input_1.Input.RightElement, null, props.rightElement),
+            props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon))));
+});

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/text-input").TextInputProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare function Full(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/text-input/text-input.stories.js

@@ -0,0 +1,54 @@
+"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.ComponentStructure = exports.Full = void 0;
+const react_1 = __importStar(require("react"));
+const text_input_1 = require("@uxf/ui/text-input");
+const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+exports.default = {
+    title: "UI/TextInput",
+    component: text_input_1.TextInput,
+};
+function Full() {
+    const [value, onChange] = (0, react_1.useState)("");
+    const storyTextInputs = (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", value: value, onChange: onChange, helperText: "Helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder..." }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Error input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isInvalid: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Read only input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isReadOnly: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Disabled input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isDisabled: true })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyTextInputs),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyTextInputs)));
+}
+exports.Full = Full;
+function ComponentStructure() {
+    const [value, onChange] = (0, react_1.useState)("");
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(text_input_1.TextInput, { label: "Label", placeholder: "Placeholder", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", leftAddon: "https://", rightAddon: ".cz", value: value, onChange: onChange, isInvalid: false, helperText: "Helper text" })));
+}
+exports.ComponentStructure = ComponentStructure;

package/text-link/index.d.ts

@@ -0,0 +1 @@
+export { TextLink } from "./text-link";

package/text-link/index.js

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

package/text-link/text-link.d.ts

@@ -0,0 +1,5 @@
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import React, { AnchorHTMLAttributes } from "react";
+export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+}
+export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/text-link/text-link.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextLink = void 0;
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importDefault(require("react"));
+exports.TextLink = (0, forwardRef_1.forwardRef)("TextLink", (props, ref) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { className, children, ...restProps } = props;
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        ...restProps,
+        className: (0, cx_1.cx)("uxf-text-link", className),
+    });
+    return (react_1.default.createElement("a", { ref: ref, ...anchorProps }, children));
+});

package/text-link/text-link.stories.d.ts

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

package/text-link/text-link.stories.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 });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/TextLink",
+    component: index_1.TextLink,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light flex gap-4 p-20" },
+            react_1.default.createElement("p", null,
+                "Pokra\u010Dujte ",
+                react_1.default.createElement(index_1.TextLink, { onClick: () => void null }, "t\u00EDmto odkazem"))),
+        react_1.default.createElement("div", { className: "dark flex gap-4 bg-gray-900 p-20 text-gray-200" },
+            react_1.default.createElement("p", null,
+                "Pokra\u010Dujte ",
+                react_1.default.createElement(index_1.TextLink, { onClick: () => void null }, "t\u00EDmto odkazem")))));
+}
+exports.Default = Default;

package/textarea/index.d.ts

@@ -0,0 +1 @@
+export * from "./textarea";

package/textarea/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./textarea"), exports);

package/textarea/textarea.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { FormControlProps } from "../types";
+export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElement> {
+    autoComplete?: string;
+    className?: string;
+    disableAutoHeight?: boolean;
+    form?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    id?: string;
+    label?: ReactNode;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    name?: string;
+    placeholder?: string;
+    rows?: number;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/textarea/textarea.js

@@ -0,0 +1,81 @@
+"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.Textarea = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const useLatest_1 = require("@uxf/core/hooks/useLatest");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_1 = __importStar(require("react"));
+const form_control_1 = require("../form-control");
+function autoHeightHandler(element, rows = 4) {
+    element.style.height = "auto";
+    if (rows > 1) {
+        const contentHeight = element.scrollHeight;
+        const lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue("line-height"), 10);
+        const fontSize = parseInt(window.getComputedStyle(element).getPropertyValue("font-size"), 10);
+        const targetHeight = rows * fontSize * (lineHeight / fontSize);
+        element.style.height = Math.max(targetHeight, contentHeight) + "px";
+    }
+}
+const EVENTS = ["input", "cut", "paste", "drop"];
+exports.Textarea = (0, forwardRef_1.forwardRef)("Textarea", (props, ref) => {
+    var _a;
+    const innerRef = (0, react_1.useRef)(null);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const generatedId = (0, react_1.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-textarea", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY);
+    const onFocus = (e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onBlur = (e) => {
+        var _a;
+        setIsFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const latestRows = (0, useLatest_1.useLatest)(props.rows);
+    (0, react_1.useEffect)(() => {
+        const node = innerRef.current;
+        if (!node || props.disableAutoHeight) {
+            return;
+        }
+        const handler = () => autoHeightHandler(node, latestRows.current);
+        handler();
+        EVENTS.map((e) => node.addEventListener(e, handler));
+        window.addEventListener("resize", handler);
+        return () => {
+            EVENTS.map((e) => node.removeEventListener(e, handler));
+            window.removeEventListener("resize", handler);
+        };
+    }, [props.disableAutoHeight, latestRows]);
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
+});

package/textarea/textarea.stories.d.ts

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

package/textarea/textarea.stories.js

@@ -0,0 +1,44 @@
+"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/Textarea",
+    component: index_1.Textarea,
+};
+function Default() {
+    const [value, onChange] = (0, react_1.useState)("test");
+    const storyTextAreas = (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", onChange: onChange, placeholder: "Placeholder text....", value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: onChange, value: value }),
+        react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: onChange, value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", placeholder: "Placeholder text....", rows: 10, onChange: onChange, value: value })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyTextAreas),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyTextAreas)));
+}
+exports.Default = Default;

package/toggle/index.d.ts

@@ -0,0 +1 @@
+export * from "./toggle";

package/toggle/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./toggle"), exports);

package/toggle/toggle.d.ts

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from "react";
+import { FormControlProps } from "../types";
+export interface ToggleProps extends FormControlProps<boolean> {
+    className?: string;
+    hiddenLabel?: boolean;
+    label: string;
+    style?: Partial<CSSProperties>;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle/toggle.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@headlessui/react");
+exports.Toggle = (0, forwardRef_1.forwardRef)("Toggle", (props, ref) => {
+    return (react_1.default.createElement(react_2.Switch.Group, null,
+        react_1.default.createElement("div", { className: `uxf-toggle__wrapper ${props.hiddenLabel ? "uxf-toggle__wrapper--hiddenLabel" : ""}` },
+            react_1.default.createElement(react_2.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, "uxf-toggle", props.className), disabled: props.isDisabled, onChange: props.onChange, style: props.style, ref: ref },
+                react_1.default.createElement("span", { className: "uxf-toggle__inner" })),
+            react_1.default.createElement(react_2.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
+});

package/toggle/toggle.stories.d.ts

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

package/toggle/toggle.stories.js

@@ -0,0 +1,49 @@
+"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/Toggle",
+    component: index_1.Toggle,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, isDisabled: true }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: () => {
+                setChecked((prev) => !prev);
+            }, value: checked, hiddenLabel: true })));
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light flex gap-4 p-20" }, storyToggles),
+        react_1.default.createElement("div", { className: "dark flex gap-4 bg-gray-900 p-20" }, storyToggles)));
+}
+exports.Default = Default;

package/types/form-control-props.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEvent, FocusEventHandler } from "react";
+export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
+    value?: ValueType;
+    onChange?: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+    onBlur?: FocusEventHandler<ElementType>;
+    onFocus?: FocusEventHandler<ElementType>;
+    name?: string;
+    /**
+     * @about
+     * The input element will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * @about
+     * It prevents the user from changing the value of the field (not from interacting with the field).
+     */
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+}
+export declare type OptionType<ValueType = string, LabelType = string> = {
+    value: ValueType;
+    label: LabelType;
+};

package/types/form-control-props.js

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

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./form-control-props";