@uxf/ui 11.74.0 → 11.74.1

package/tabs/tabs.js

@@ -0,0 +1,74 @@
+"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 use_mouse_drag_to_scroll_1 = require("@uxf/core-react/hooks/use-mouse-drag-to-scroll");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importStar(require("react"));
+const tabs_button_1 = require("./components/tabs-button");
+const tabs_button_list_1 = require("./components/tabs-button-list");
+const tabs_panel_1 = require("./components/tabs-panel");
+const tabs_panels_1 = require("./components/tabs-panels");
+const tabs_root_1 = require("./components/tabs-root");
+const create_tab_id_1 = require("./create-tab-id");
+const panel_1 = require("./panel");
+const panel_content_1 = require("./panel-content");
+function Root(props) {
+    const id = (0, react_1.useId)();
+    const buttonListRef = (0, react_1.useRef)(null);
+    const buttonListStyle = (0, use_mouse_drag_to_scroll_1.useMouseDragToScroll)(buttonListRef);
+    const tabPanels = react_1.Children.toArray(props.children).filter((child) => (0, react_1.isValidElement)(child) && child.type.displayName === panel_1.TABS_PANEL_DISPLAY_NAME);
+    const allowedTabPanels = tabPanels.filter((panel) => !panel.props.isDisabled && !panel.props.isHidden);
+    const tabRefs = (0, react_1.useRef)([]);
+    const getAllowedTabRefs = () => tabRefs.current.filter((_, index) => { var _a, _b; return !((_a = tabPanels.at(index)) === null || _a === void 0 ? void 0 : _a.props.isDisabled) && !((_b = tabPanels.at(index)) === null || _b === void 0 ? void 0 : _b.props.isHidden); });
+    const selectTab = (newTabIndex) => {
+        var _a, _b;
+        const newTabName = (_a = allowedTabPanels.at(newTabIndex)) === null || _a === void 0 ? void 0 : _a.props.name;
+        if ((0, is_not_nil_1.isNotNil)(newTabName)) {
+            props.onChange(newTabName);
+            (_b = getAllowedTabRefs().at(newTabIndex)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    const onKeyDown = (event) => {
+        const currentTabIndex = allowedTabPanels.findIndex((panel) => panel.props.name === props.value);
+        if ((event.code === "ArrowRight" && !props.isVertical) || (event.code === "ArrowDown" && props.isVertical)) {
+            selectTab((currentTabIndex + 1) % allowedTabPanels.length);
+        }
+        else if ((event.code === "ArrowLeft" && !props.isVertical) ||
+            (event.code === "ArrowUp" && props.isVertical)) {
+            selectTab((currentTabIndex - 1) % allowedTabPanels.length);
+        }
+    };
+    const hasPanelWithChildren = (0, is_not_nil_1.isNotNil)(tabPanels.find((panel) => (0, is_not_nil_1.isNotNil)(panel.props.children)));
+    return (react_1.default.createElement(tabs_root_1.TabsRoot, { className: props.className, isVertical: props.isVertical, variant: props.variant },
+        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { className: props.classNameButtonList, isVertical: props.isVertical, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, variant: props.variant }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { className: panel.props.classNameButton, id: (0, create_tab_id_1.createTabId)(id, panel.props.name), isActive: panel.props.name === props.value, isDisabled: panel.props.isDisabled, isHidden: panel.props.isHidden, isVertical: props.isVertical, key: panel.props.name, onClick: () => props.onChange(panel.props.name), ref: (ref) => {
+                tabRefs.current[index] = ref;
+            }, variant: props.variant }, typeof panel.props.label === "function"
+            ? panel.props.label({ isActive: panel.props.name === props.value })
+            : panel.props.label)))),
+        hasPanelWithChildren && (react_1.default.createElement(tabs_panels_1.TabsPanels, null, tabPanels.map((panel) => (react_1.default.createElement(tabs_panel_1.TabsPanel, { className: panel.props.classNamePanel, isActive: panel.props.name === props.value, isAlwaysMounted: panel.props.isAlwaysMounted, isHidden: panel.props.isHidden, key: panel.props.name }, panel.props.children)))))));
+}
+Root.displayName = "UxfUiTabs";
+exports.Tabs = Object.assign(Root, { Panel: panel_1.Panel, PanelContent: panel_content_1.PanelContent });

package/tabs/tabs.spec.d.ts

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

package/tabs/tabs.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 tabs_stories_1 = require("./tabs.stories");
+(0, snap_test_1.snapTest)("render story Default", react_1.default.createElement(tabs_stories_1.Default, null));
+(0, snap_test_1.snapTest)("render story Segmented", react_1.default.createElement(tabs_stories_1.Segmented, null));

package/tabs/tabs.stories.d.ts

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

package/tabs/tabs.stories.js

@@ -0,0 +1,68 @@
+"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.Default = Default;
+exports.Segmented = Segmented;
+const react_1 = __importStar(require("react"));
+const icon_1 = require("../icon");
+const toggle_1 = require("../toggle");
+const tabs_1 = require("./tabs");
+var TabEnum;
+(function (TabEnum) {
+    TabEnum["Basic"] = "tab-basic";
+    TabEnum["Disabled"] = "tab-disabled";
+    TabEnum["Hidden"] = "tab-hidden";
+    TabEnum["AlwaysMounted"] = "tab-always-mounted";
+    TabEnum["Custom"] = "tab-custom";
+})(TabEnum || (TabEnum = {}));
+function Default() {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(TabEnum.Basic);
+    const [isVertical, setIsVertical] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toggle_1.Toggle, { className: "mb-5", label: "Vertical", name: "isVertical", onChange: setIsVertical, value: isVertical }),
+        react_1.default.createElement(tabs_1.Tabs, { isVertical: isVertical, onChange: setActiveTab, value: activeTab },
+            react_1.default.createElement(tabs_1.Tabs.Panel, { label: "Basic", name: TabEnum.Basic }),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isDisabled: true, label: "Disabled", name: TabEnum.Disabled }, "Disabled tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isHidden: true, label: "Hidden", name: TabEnum.Hidden }, "Hidden"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "Always mounted", name: TabEnum.AlwaysMounted }, "Always mounted tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { label: () => (react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                    react_1.default.createElement(icon_1.Icon, { className: "size-4", name: "camera" }),
+                    " Custom button")), name: TabEnum.Custom }, "Custom button tab"))));
+}
+function Segmented() {
+    const [activeTab, setActiveTab] = (0, react_1.useState)("tab-basic");
+    const [isVertical, setIsVertical] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(toggle_1.Toggle, { className: "mb-5", label: "Vertical", name: "isVertical", onChange: setIsVertical, value: isVertical }),
+        react_1.default.createElement(tabs_1.Tabs, { isVertical: isVertical, onChange: setActiveTab, value: activeTab, variant: "segmented" },
+            react_1.default.createElement(tabs_1.Tabs.Panel, { label: "Basic", name: "tab-basic" }, "Basic tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isDisabled: true, label: "Disabled", name: "tab-disabled" }, "Disabled tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isHidden: true, label: "Hidden", name: "tab-hidden" }, "Hidden"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { isAlwaysMounted: true, label: "Always mounted", name: "tab-always-mounted" }, "Always mounted tab"),
+            react_1.default.createElement(tabs_1.Tabs.Panel, { label: () => (react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                    react_1.default.createElement(icon_1.Icon, { className: "size-4", name: "camera" }),
+                    " Custom button")), name: "tab-custom" }, "Custom button tab"))));
+}

package/tabs/theme.d.ts

@@ -0,0 +1,4 @@
+export interface TabsVariants {
+    default: true;
+    segmented: true;
+}

package/tabs/theme.js

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

package/tabs/types.d.ts

@@ -0,0 +1,2 @@
+import { TabsVariants } from "@uxf/ui/tabs/theme";
+export type TabsVariant = keyof TabsVariants;

package/tabs/types.js

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

package/text-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from "./text-input";
+export type { TextInputProps } from "./text-input";

package/text-input/index.js

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

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

@@ -0,0 +1,33 @@
+import { InputProps } from "@uxf/ui/input/input";
+import { FormControlProps } from "@uxf/ui/types";
+import React, { CSSProperties, KeyboardEventHandler, ReactNode } from "react";
+type EnterKeyHint = "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+export interface TextInputProps extends FormControlProps<string>, Pick<InputProps, "size" | "variant"> {
+    autoFocus?: boolean;
+    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" | "time";
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    max?: number | string;
+    min?: number | string;
+    pattern?: string;
+    step?: number | string;
+    style?: CSSProperties;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/text-input/text-input.js

@@ -0,0 +1,51 @@
+"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.TextInput = 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 input_1 = require("@uxf/ui/input");
+const react_1 = __importStar(require("react"));
+const form_component_1 = require("../form-component");
+exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    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", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && 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);
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+        react_1.default.createElement(input_1.Input, { inputFocus: input, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), size: props.size, style: props.style, 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, autoComplete: props.autoComplete, autoFocus: props.autoFocus, 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, onChange: props.onChange, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, 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))));
+});
+exports.TextInput.displayName = "UxfUiTextInput";

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

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

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

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

@@ -0,0 +1,64 @@
+"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.ComponentStructure = ComponentStructure;
+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"));
+const action_1 = require("../utils/action");
+function Default() {
+    const [value, setValue] = (0, react_1.useState)("");
+    const [timeValue, setTimeValue] = (0, react_1.useState)("");
+    const onChange = (0, action_1.action)("onChange", setValue);
+    const onTimeChange = (0, action_1.action)("onTimeChange", setTimeValue);
+    const onCopy = (0, action_1.action)("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",
+        });
+    });
+    return (react_1.default.createElement("div", { className: "space-y-2 p-20" },
+        react_1.default.createElement(text_input_1.TextInput, { helperText: "Helper text", label: "Default input", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "default", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value }),
+        react_1.default.createElement(text_input_1.TextInput, { helperText: "Error helper text", isInvalid: true, label: "Error input", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "error", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value }),
+        react_1.default.createElement(text_input_1.TextInput, { helperText: "Error helper text", isReadOnly: true, label: "Read only input", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "readOnly", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value }),
+        react_1.default.createElement(text_input_1.TextInput, { helperText: "Error helper text", isDisabled: true, label: "Disabled input", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "disabled", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default html time input", name: "defaultHtmlTime", onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time", value: timeValue }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Copy to clipboard input", leftAddon: "I can be copied!", name: "copyToClipboard", onChange: onChange, placeholder: "Some beautiful placeholder...", rightAddon: react_1.default.createElement(button_1.Button, { className: "size-full rounded-l-none border-none", isDisabled: value === "", onClick: onCopy, variant: "secondary" },
+                react_1.default.createElement(icon_1.Icon, { className: "w-4", name: "copy" })), value: value })));
+}
+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, { helperText: "Helper text", isInvalid: false, label: "Label", leftAddon: "https://", leftElement: "\uD83C\uDF37", name: "text-input", onChange: onChange, placeholder: "Placeholder", rightAddon: ".cz", rightElement: "\uD83D\uDD14", value: value })));
+}

package/text-link/index.d.ts

@@ -0,0 +1,2 @@
+export { TextLink } from "./text-link";
+export type { TextLinkProps } 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,10 @@
+import { UseAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
+import { TextLinkVariants } from "@uxf/ui/text-link/theme";
+import React, { AnchorHTMLAttributes } from "react";
+import { NextLink } from "../utils/next-link";
+export type TextLinkVariant = keyof TextLinkVariants;
+export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    as?: NextLink | "a";
+    variant?: TextLinkVariant;
+}
+export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/text-link/text-link.js

@@ -0,0 +1,41 @@
+"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.TextLink = void 0;
+const use_anchor_props_1 = require("@uxf/core-react/clickable/use-anchor-props");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+exports.TextLink = (0, react_1.forwardRef)((props, ref) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { as = "a", className, children, variant, ...restProps } = props;
+    const Component = as;
+    const anchorProps = (0, use_anchor_props_1.useAnchorProps)({
+        ...restProps,
+        className: (0, cx_1.cx)("uxf-text-link", `uxf-text-link--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className),
+    });
+    return (react_1.default.createElement(Component, { ref: ref, ...anchorProps }, children));
+});
+exports.TextLink.displayName = "UxfUiTextLink";

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

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

package/text-link/text-link.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 text_link_stories_1 = require("./text-link.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(text_link_stories_1.Default, null));

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

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

package/text-link/text-link.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+function Default() {
+    // eslint-disable-next-line no-console
+    const onClick = console.log;
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "flex gap-4 p-20" },
+            react_1.default.createElement("p", { className: "dark:text-white" },
+                "Pokra\u010Dujte ",
+                react_1.default.createElement(index_1.TextLink, { onClick: onClick }, "t\u00EDmto odkazem")))));
+}

package/text-link/theme.d.ts

@@ -0,0 +1,4 @@
+export interface TextLinkVariants {
+    default: true;
+    text: true;
+}

package/text-link/theme.js

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

package/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./textarea";
+export type { TextareaProps } from "./textarea";

package/textarea/index.js

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

package/textarea/textarea.d.ts

@@ -0,0 +1,18 @@
+import React, { CSSProperties, 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;
+    minLength?: number;
+    placeholder?: string;
+    rows?: number;
+    style?: CSSProperties;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/textarea/textarea.js

@@ -0,0 +1,59 @@
+"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.Textarea = void 0;
+const use_input_focus_1 = require("@uxf/core-react/hooks/use-input-focus");
+const use_isomorphic_layout_effect_1 = require("@uxf/core-react/hooks/use-isomorphic-layout-effect");
+const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
+const classes_1 = require("@uxf/core/constants/classes");
+const adjust_textarea_height_1 = require("@uxf/core/utils/adjust-textarea-height");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const form_component_1 = require("../form-component");
+exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b, _c;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    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", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : input.focused) && 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 handleChange = (event) => props.onChange(event.target.value, event);
+    const focusTextareaOnWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    const rows = (_c = props.rows) !== null && _c !== void 0 ? _c : 4;
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
+        const node = innerRef.current;
+        if (!node || props.disableAutoHeight) {
+            return;
+        }
+        const cleanup = (0, adjust_textarea_height_1.adjustTextareaHeight)(node, rows);
+        return () => cleanup();
+    }, [props.disableAutoHeight, rows]);
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+        react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: focusTextareaOnWrapperClick, style: props.style },
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: (0, cx_1.cx)("uxf-textarea__element", !props.disableAutoHeight && rows >= 1 && "uxf-textarea__element--is-auto-height-enabled"), disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: handleChange, onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: rows, value: props.value }))));
+});
+exports.Textarea.displayName = "UxfUiTextarea";

package/textarea/textarea.spec.d.ts

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

package/textarea/textarea.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 textarea_stories_1 = require("./textarea.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(textarea_stories_1.Default, null));

package/textarea/textarea.stories.d.ts

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