@uxf/ui 1.0.0-beta.2 → 1.0.0-beta.26

package/radio/radio.stories.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/Radio",
+    component: index_1.Radio,
+};
+function Default() {
+    return (<div className="space-y-2">
+            <index_1.Radio label="Radio" checked={true} active={true}/>
+            <index_1.Radio label="Radio" checked={true} active={false}/>
+            <index_1.Radio label="Radio" checked={false} active={true}/>
+            <index_1.Radio label="Radio" checked={false} active={false}/>
+        </div>);
+}
+exports.Default = Default;

package/radio-group/index.d.ts

@@ -0,0 +1 @@
+export { default as RadioGroup } from "./radio-group";

package/radio-group/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+var radio_group_1 = require("./radio-group");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return __importDefault(radio_group_1).default; } });

package/radio-group/radio-group.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, FocusEventHandler } from "react";
+export declare type RadioGroupOptionValue = string | number;
+export interface RadioGroupOption {
+    disabled?: boolean;
+    label: string;
+    value: RadioGroupOptionValue;
+}
+export interface RadioGroupProps {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    forceColumn?: boolean;
+    hiddenLabel?: boolean;
+    id: string;
+    invalid?: boolean;
+    label: string;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onChange: (value: RadioGroupOptionValue) => void;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    options: RadioGroupOption[];
+    style?: CSSProperties;
+    value?: RadioGroupOptionValue | null;
+}
+declare const _default: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/radio-group/radio-group.jsx

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const forwardRef_1 = require("../utils/forwardRef");
+const react_2 = require("@headlessui/react");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const label_1 = require("../label");
+const radio_1 = require("../radio");
+const error_message_1 = require("../error-message");
+const use_input_submit_1 = require("../hooks/use-input-submit");
+function RadioGroup(props, ref) {
+    const { className, disabled, error, forceColumn, hiddenLabel, id, invalid, label, onBlur, onChange, onFocus, options, style, value, } = props;
+    const innerRef = (0, react_1.useRef)(null);
+    (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", disabled);
+    const errorId = invalid ? `${id}--errormessage` : undefined;
+    return (<react_2.RadioGroup className={`_form-field ${className || ""}`} disabled={disabled} id={id} value={value} onChange={onChange} style={style}>
+            {!hiddenLabel && (<react_2.RadioGroup.Label as={label_1.Label} className="mb-2">
+                    {label}
+                </react_2.RadioGroup.Label>)}
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+            <div className={`flex ${forceColumn ? "flex-col" : "flex-wrap items-center"} focus-visible:ring-gray-dark outline-none focus-visible:ring-2`} onBlur={onBlur} onFocus={onFocus} ref={(0, composeRefs_1.composeRefs)(innerRef, ref)} tabIndex={disabled ? -1 : 0} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+    >
+                {options.map((option) => (<react_2.RadioGroup.Option as={react_1.Fragment} disabled={option.disabled} key={option.value.toString()} value={option.value}>
+                        {(o) => (<radio_1.Radio active={o.active} checked={o.checked} disabled={disabled || o.disabled} invalid={invalid} label={option.label}/>)}
+                    </react_2.RadioGroup.Option>))}
+            </div>
+            {invalid && error && <error_message_1.ErrorMessage id={errorId}>{error}</error_message_1.ErrorMessage>}
+        </react_2.RadioGroup>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("RadioGroup", RadioGroup);

package/radio-group/radio-group.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./radio-group").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/radio-group/radio-group.stories.jsx

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = require("react");
+exports.default = {
+    title: "UI/RadioGroup",
+    component: index_1.RadioGroup,
+};
+const options = [
+    {
+        value: "1",
+        label: "Radio one",
+    },
+    {
+        value: "2",
+        label: "Radio two",
+    },
+    {
+        value: "3",
+        label: "Radio three",
+    },
+];
+function Default() {
+    const [value, setValue] = (0, react_1.useState)(options[0].value);
+    return (<div className="space-y-2">
+            <index_1.RadioGroup id="radiogroup" options={options} label="Radio group" value={value} onChange={setValue}/>
+        </div>);
+}
+exports.Default = Default;

package/raster-image/index.d.ts

@@ -0,0 +1 @@
+export { default as RasterImage } from "./raster-image";

package/raster-image/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RasterImage = void 0;
+var raster_image_1 = require("./raster-image");
+Object.defineProperty(exports, "RasterImage", { enumerable: true, get: function () { return __importDefault(raster_image_1).default; } });

package/raster-image/raster-image.d.ts

@@ -0,0 +1,16 @@
+import { ImgHTMLAttributes } from "react";
+import { FileResponse } from "../utils/image";
+declare type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
+interface Props {
+    alt: string;
+    className?: string;
+    height: number;
+    imgClassName?: string;
+    loading?: ImgProps["loading"];
+    mode?: "contain" | "cover" | "responsive";
+    role?: ImgProps["role"];
+    src?: FileResponse | null;
+    width: number;
+}
+declare function RasterImage(props: Props): JSX.Element;
+export default RasterImage;

package/raster-image/raster-image.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cx_1 = require("@uxf/core/utils/cx");
+const image_1 = require("../utils/image");
+const resizer_1 = require("@uxf/core/utils/resizer");
+function RasterImage(props) {
+    var _a, _b;
+    const { alt, className, height, imgClassName, loading = "lazy", mode = "responsive", src, width, ...restProps } = props;
+    const Element = src ? "picture" : "div";
+    return (<Element className={`uxf-raster-image ${className || ""}`}>
+            {src ? (<>
+                    {(0, image_1.getImgSources)(src, width, height)}
+                    <img alt={alt} className={(0, cx_1.cx)("uxf-raster-image__img", mode === "contain" && "uxf-raster-image__img--contain", mode === "cover" && "uxf-raster-image__img--cover", imgClassName)} loading={loading} src={(_a = (0, resizer_1.resizerImageUrl)(src, width, height, {})) !== null && _a !== void 0 ? _a : undefined} srcSet={(_b = (0, image_1.getImgSrcSet)(src, width, height)) !== null && _b !== void 0 ? _b : undefined} {...restProps}/>
+                </>) : null}
+        </Element>);
+}
+exports.default = RasterImage;

package/raster-image/raster-image.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RasterImage } from "./index";
+declare const _default: {
+    title: string;
+    component: typeof RasterImage;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/raster-image/raster-image.stories.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/RasterImage",
+    component: index_1.RasterImage,
+};
+function Default() {
+    return (<div className="space-y-2">
+            <index_1.RasterImage alt="Alt text" height={100} width={300} mode="cover"/>
+        </div>);
+}
+exports.Default = Default;

package/select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select, SelectProps } from "./select";

package/select/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var select_1 = require("./select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(select_1).default; } });

package/select/select.d.ts

@@ -0,0 +1,27 @@
+import { FocusEventHandler } from "react";
+export declare type SelectValue = number | string;
+export declare type SelectOption<T = SelectValue> = {
+    key?: number | string;
+    id: T;
+    label: string;
+    disabled?: boolean;
+};
+export interface SelectProps<V = SelectValue, O = SelectOption<V>> {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    onChange: (value: O | null) => void;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    name: string;
+    id: string;
+    label: string;
+    placeholder?: string;
+    options: O[];
+    readOnly?: boolean;
+    required?: boolean;
+    value?: V;
+}
+declare const _default: import("react").ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/select/select.jsx

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@headlessui/react");
+const dropdown_1 = require("../dropdown");
+const use_dropdown_1 = require("../hooks/use-dropdown");
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_2 = require("react");
+const error_message_1 = require("../error-message");
+const label_1 = require("../label");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function ChevronDown() {
+    return (<svg aria-hidden="true" focusable="false" data-prefix="fass" data-icon="chevron-down" className="svg-inline--fa fa-chevron-down " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={{ height: "1em" }}>
+            <path fill="currentColor" d="M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z"></path>
+        </svg>);
+}
+function ChevronUp() {
+    return (<svg aria-hidden="true" focusable="false" data-prefix="fass" data-icon="chevron-up" className="svg-inline--fa fa-chevron-up " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={{ height: "1em" }}>
+            <path fill="currentColor" d="M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z"></path>
+        </svg>);
+}
+function Select(props, ref) {
+    const { className, disabled, error, id, invalid, label, onBlur, onChange, onFocus, options, placeholder = "Vyberte z možností...", readOnly, value, } = props;
+    //const selectedOption = useMemo(() => options.find((option) => option.id === value), [options, value]);
+    const selectedOption = options.find((option) => option.id === value);
+    const innerRef = (0, react_2.useRef)(null);
+    const disabledOrReadOnly = disabled || readOnly;
+    const errorId = invalid ? `${id}--errormessage` : undefined;
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
+    return (<react_1.Listbox as="div" className={`select-form-field ${className || ""}`} onChange={onChange} value={selectedOption}>
+            <react_1.Listbox.Label as={label_1.Label} onClick={!disabledOrReadOnly ? input.focus : undefined}>
+                {label}
+            </react_1.Listbox.Label>
+            <react_1.Listbox.Button as="div" className={""}>
+                {(b) => (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div aria-invalid={invalid} aria-describedby={errorId} className={(0, cx_1.cx)("select-text-input select-text-input__control--select", (b.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, b.disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID)} onBlur={input.onBlur} onFocus={input.onFocus} tabIndex={!disabledOrReadOnly ? 0 : undefined} ref={stableRef}>
+                        <div className={`w-full ${!value ? "text-gray-muted" : ""}`}>
+                            {(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder}
+                        </div>
+                        {b.open ? <ChevronUp /> : <ChevronDown />}
+                    </div>)}
+            </react_1.Listbox.Button>
+            {invalid && error && <error_message_1.ErrorMessage id={errorId}>{error}</error_message_1.ErrorMessage>}
+            <react_1.Listbox.Options as={dropdown_1.Dropdown.Items} className="w-full" ref={dropdown.floating} style={dropdown.style}>
+                {options.map((option) => (<react_1.Listbox.Option as={react_2.Fragment} key={option.key || option.id} value={option}>
+                        {(o) => (<dropdown_1.Dropdown.Item className={(0, cx_1.cx)(o.active && classes_1.CLASSES.IS_ACTIVE, o.disabled && classes_1.CLASSES.IS_DISABLED, o.selected && classes_1.CLASSES.IS_SELECTED)}>
+                                {option.label}
+                            </dropdown_1.Dropdown.Item>)}
+                    </react_1.Listbox.Option>))}
+            </react_1.Listbox.Options>
+        </react_1.Listbox>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("Select", Select);

package/select/select.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectOption } from "./select";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./select").SelectProps<import("./select").SelectValue, SelectOption<import("./select").SelectValue>> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/select/select.stories.jsx

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = require("react");
+exports.default = {
+    title: "UI/Select",
+    component: index_1.Select,
+};
+const options = [
+    { id: "one", label: "Option one" },
+    { id: "two", label: "Option two" },
+    { id: "three", label: "Option three" },
+];
+function Default() {
+    const [value, setValue] = (0, react_1.useState)();
+    const handleChange = (v) => {
+        // eslint-disable-next-line no-console
+        console.log("Select value: ", v);
+        setValue(v === null || v === void 0 ? void 0 : v.id);
+    };
+    return (<div className="space-y-2">
+            <index_1.Select id={"select-1"} name="select" label="Choose option..." options={options} onChange={handleChange} value={value}/>
+        </div>);
+}
+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,22 @@
+import { FormControlProps } from "@uxf/ui/types";
+import { ReactNode } from "react";
+import { InputProps } from "@uxf/ui/input/input";
+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;
+    id?: string;
+    inputMode?: InputMode;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    placeholder?: string;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    leftAddon?: ReactNode;
+    rightAddon?: ReactNode;
+}
+export declare function TextInput(props: TextInputProps): JSX.Element;
+export {};

package/text-input/text-input.jsx

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const input_1 = require("@uxf/ui/input");
+const react_1 = require("react");
+const cx_1 = require("@uxf/core/utils/cx");
+function TextInput(props) {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const rootClassName = (0, cx_1.cx)("uxf-text-input", props.isInvalid && "uxf-text-input--invalid", props.isDisabled && "uxf-text-input--disabled", props.isRequired && "uxf-text-input--required", isFocused && "uxf-text-input--focused");
+    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 (<div className={rootClassName}>
+            <label className="uxf-text-input__label">{props.label}</label>
+            <input_1.Input size={props.size} variant={props.variant}>
+                {props.leftAddon && <input_1.Input.LeftAddon>{props.leftAddon}</input_1.Input.LeftAddon>}
+                {props.leftElement && <input_1.Input.LeftElement>{props.leftElement}</input_1.Input.LeftElement>}
+                <input_1.Input.Element name={props.name} value={props.value} onChange={props.onChange} onFocus={onFocus} onBlur={onBlur} isInvalid={props.isInvalid} isRequired={props.isRequired} isReadOnly={props.isReadOnly} isDisabled={props.isDisabled} placeholder={props.placeholder}/>
+                {props.rightElement && <input_1.Input.RightElement>{props.rightElement}</input_1.Input.RightElement>}
+                {props.rightAddon && <input_1.Input.RightAddon>{props.rightAddon}</input_1.Input.RightAddon>}
+            </input_1.Input>
+            <div className="uxf-text-input__helper-text">{props.helperText}</div>
+        </div>);
+}
+exports.TextInput = TextInput;

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

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

package/text-input/text-input.stories.jsx

@@ -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.Default = 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 Default() {
+    const [value, onChange] = (0, react_1.useState)("");
+    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
+    return (<div className="space-y-4">
+            <input type="checkbox" checked={isInvalid} onChange={(e) => setInvalid(e.target.checked)}/>
+            <text_input_1.TextInput label="Label" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text" isRequired/>
+            <text_input_1.TextInput label="Label" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text" leftElement="USD"/>
+            <text_input_1.TextInput label="Label" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text" leftAddon="https://" rightAddon=".cz" leftElement="🌷" rightElement="🔔"/>
+        </div>);
+}
+exports.Default = Default;
+function ComponentStructure() {
+    const [value, onChange] = (0, react_1.useState)("");
+    return (<component_structure_analyzer_1.default>
+            <text_input_1.TextInput label="Label" placeholder="Placeholder" leftElement="🌷" rightElement="🔔" leftAddon="https://" rightAddon=".cz" value={value} onChange={onChange} isInvalid={false} helperText="Helper text"/>
+        </component_structure_analyzer_1.default>);
+}
+exports.ComponentStructure = ComponentStructure;

package/textarea/index.d.ts

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

package/textarea/index.jsx

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+var textarea_1 = require("./textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return __importDefault(textarea_1).default; } });

package/textarea/textarea.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEventHandler, CSSProperties, FocusEventHandler } from "react";
+export interface TextareaProps {
+    autoComplete?: string;
+    className?: string;
+    disabled?: boolean;
+    disableAutoHeight?: boolean;
+    error?: string;
+    form?: string;
+    id: string;
+    invalid?: boolean;
+    label: string;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    style?: CSSProperties;
+    value?: string | null;
+}
+declare const _default: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default _default;

package/textarea/textarea.jsx

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const forwardRef_1 = require("../utils/forwardRef");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const label_1 = require("../label");
+const cx_1 = require("@uxf/core/utils/cx");
+const error_message_1 = require("../error-message");
+const use_fix_android_on_focus_1 = require("../hooks/use-fix-android-on-focus");
+const use_latest_1 = require("../hooks/use-latest");
+const classes_1 = require("@uxf/core/constants/classes");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+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"];
+function Textarea(props, ref) {
+    const { autoComplete, className, disabled, disableAutoHeight, error, form, id, invalid, label, maxLength, minLength, name, onBlur, onChange, onFocus, placeholder, readOnly, required, rows, style, value, } = props;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const fixedOnFocus = (0, use_fix_android_on_focus_1.useFixAndroidOnFocus)(input.onFocus);
+    const errorId = invalid && id ? `${id}--errormessage` : undefined;
+    const latestRows = (0, use_latest_1.useLatest)(rows);
+    (0, react_1.useEffect)(() => {
+        const node = innerRef.current;
+        if (!node || 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);
+        };
+    }, [disableAutoHeight, latestRows]);
+    return (<div className={`uxf-textarea-wrapper ${className || ""}`} style={style}>
+            <label_1.Label htmlFor={id}>{label}</label_1.Label>
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+            <div className={(0, cx_1.cx)("uxf-textarea-nextwrapper h-auto", input.focused && classes_1.CLASSES.IS_FOCUSED, disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID)} onClick={!disabled ? input.focus : undefined}>
+                <textarea aria-describedby={errorId} aria-invalid={invalid} autoComplete={autoComplete} className="uxf-textarea-textarea" disabled={disabled} form={form} id={id} maxLength={maxLength} minLength={minLength} name={name} onBlur={input.onBlur} onChange={onChange} onFocus={fixedOnFocus} placeholder={placeholder} readOnly={readOnly} ref={(0, composeRefs_1.composeRefs)(innerRef, ref)} required={required} value={value !== null && value !== void 0 ? value : undefined}/>
+            </div>
+            {invalid && error && <error_message_1.ErrorMessage id={errorId}>{error}</error_message_1.ErrorMessage>}
+        </div>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("Textarea", Textarea);

package/textarea/textarea.stories.d.ts

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

package/textarea/textarea.stories.jsx

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/Textarea",
+    component: index_1.Textarea,
+};
+function Default() {
+    return (<div className="space-y-2">
+            <index_1.Textarea id={"textarea"} label={"Textarea"} onChange={() => {
+            // eslint-disable-next-line no-console
+            console.log("textarea onChange");
+        }} placeholder="Placeholder text...."/>
+            <index_1.Textarea id={"textarea-readonly"} label={"Readonly"} readOnly={true} onChange={() => {
+            // eslint-disable-next-line no-console
+            console.log("textarea OnChange");
+        }}/>
+            <index_1.Textarea disabled={true} id={"textarea-disabled"} label={"Textarea disabled"} onChange={() => {
+            // eslint-disable-next-line no-console
+            console.log("textarea OnChange");
+        }}/>
+            <index_1.Textarea rows={10} id={"textarea-rows10"} label={"Textarea rows = 10"} placeholder="Placeholder text...." onChange={() => {
+            // eslint-disable-next-line no-console
+            console.log("textarea OnChange");
+        }}/>
+        </div>);
+}
+exports.Default = Default;