@uxf/ui 1.0.0-beta.13 → 1.0.0-beta.130

package/tabs/tabs.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+export interface TabsPanelProps {
+    className?: string;
+    disabled?: boolean;
+    title: ReactNode;
+}
+export interface TabsProps {
+    className?: string;
+    defaultIndex?: number;
+    grow?: boolean;
+    onChange?: (index: number) => void;
+    tabListClassName?: string;
+    variant?: "default" | "segmented";
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.FC<React.PropsWithChildren<TabsPanelProps>>;
+};

package/tabs/tabs.js

@@ -0,0 +1,68 @@
+"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.Tabs = void 0;
+const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importStar(require("react"));
+const Panel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
+const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
+    var _a, _b;
+    const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
+    const containerRef = (0, react_2.useRef)(null);
+    const dragStyle = (0, useMouseDragToScroll_1.useMouseDragToScroll)(containerRef);
+    const [hasOverflow, setHasOverflow] = (0, react_2.useState)();
+    (0, react_2.useEffect)(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        const handler = () => setHasOverflow(node.scrollWidth > node.clientWidth);
+        handler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+        };
+    }, []);
+    if (react_2.Children.count(props.children) === 0) {
+        return react_2.default.createElement("div", { className: tabsClassName, ref: ref });
+    }
+    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
+    const tabs = tabPanels.map((c) => ({
+        title: c.props.title,
+        disabled: c.props.disabled,
+    }));
+    return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
+        react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
+            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
+                    var _a;
+                    return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
+                }, key: `${tab.title}--${index}` }, tab.title))))),
+        react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
+});
+exports.Tabs = Object.assign(TabsRoot, { Panel });

package/tabs/tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>> & {
+        Panel: React.FC<React.PropsWithChildren<import("./tabs").TabsPanelProps>>;
+    };
+};
+export default _default;
+export declare function Default(): JSX.Element;

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 react_1 = __importDefault(require("react"));
+const tabs_1 = require("./tabs");
+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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { className: "grid h-12 w-56 place-items-center bg-gray-300", disabled: true, title: "Tab 4 title - disabled" }, "content of the Tab 4 which is disabled"))),
+            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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { className: "grid h-12 w-56 place-items-center bg-gray-300", disabled: true, title: "Tab 4 title - disabled" }, "content of the Tab 4 which is disabled")))),
+        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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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.Tabs.Panel, { title: "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/text-input.d.ts

@@ -1,6 +1,6 @@
-import { FormControlProps } from "@uxf/ui/types";
-import { ReactNode } from "react";
 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"> {
@@ -8,15 +8,24 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
     className?: string;
     enterKeyHint?: EnterKeyHint;
     form?: string;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
     id?: string;
     inputMode?: InputMode;
     label?: ReactNode;
-    helperText?: ReactNode;
-    placeholder?: string;
-    leftElement?: ReactNode;
-    rightElement?: ReactNode;
     leftAddon?: ReactNode;
+    leftElement?: ReactNode;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    placeholder?: string;
     rightAddon?: ReactNode;
+    rightElement?: ReactNode;
+    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;
 }
-export declare function TextInput(props: TextInputProps): JSX.Element;
+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.isReadOnly && classes_1.CLASSES.IS_READONLY, 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.spec.d.ts

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

package/text-input/text-input.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 text_input_1 = require("./text-input");
+const snap_test_1 = require("../utils/snap-test");
+(0, snap_test_1.snapTest)("render basic", react_1.default.createElement(text_input_1.TextInput, { helperText: "helper text", label: "label", leftAddon: "left addon", rightAddon: "right addon", leftElement: "left element", rightElement: "right element" }));

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

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

package/text-input/text-input.stories.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;
+};
+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 copy_to_clipboard_1 = require("@uxf/core/utils/copy-to-clipboard");
+const button_1 = require("@uxf/ui/button");
+const flash_messages_service_1 = require("@uxf/ui/flash-messages/flash-messages-service");
+const icon_1 = require("@uxf/ui/icon");
+const text_input_1 = require("@uxf/ui/text-input");
+const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+const react_1 = __importStar(require("react"));
+exports.default = {
+    title: "UI/TextInput",
+    component: text_input_1.TextInput,
+};
+function Full() {
+    const [value, onChange] = (0, react_1.useState)("");
+    const [timeValue, onTimeChange] = (0, react_1.useState)("");
+    const onCopy = async () => {
+        const isCopied = await (0, copy_to_clipboard_1.copyToClipboard)(value);
+        (0, flash_messages_service_1.flashMessage)({
+            message: isCopied ? "Text zkopírován" : "Nepodařilo se zkopírovat text",
+            variant: isCopied ? "success" : "error",
+        });
+    };
+    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 }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default tml time input", value: timeValue, onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time" }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Copy to clipboard input", leftAddon: "I can be copied!", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "h-full w-full rounded-l-none border-none", disabled: value === "", onClick: onCopy, variant: "white" },
+                react_1.default.createElement(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
+    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 * from "./text-link";

package/text-link/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-link"), exports);

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.isReadOnly && classes_1.CLASSES.IS_READONLY, 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);
+    };
+    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/time-picker-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./time-picker";
+export * from "./time-picker-input";

package/time-picker-input/index.js

@@ -0,0 +1,18 @@
+"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("./time-picker"), exports);
+__exportStar(require("./time-picker-input"), exports);