@uxf/ui 1.0.0-beta.99 → 1.0.1

package/select/index.js

@@ -1,17 +1,5 @@
 "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("./select"), exports);
+exports.Select = void 0;
+var select_1 = require("./select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return select_1.Select; } });

package/select/select.d.ts

@@ -1,24 +1,23 @@
-import type { Placement } from "@floating-ui/react";
-import React, { ReactNode } from "react";
-import { IconsSet } from "../icon/theme";
-import { FormControlProps } from "../types";
-export declare type SelectValue = number | string;
-export declare type SelectOption<T = SelectValue> = {
+import React, { ReactNode, Ref } from "react";
+import { SelectBaseProps, SelectBaseValueId } from "../_select-base";
+export type SelectValue = SelectBaseValueId;
+export type SelectOption<T = SelectValue> = {
     disabled?: boolean;
     id: T;
     label: ReactNode;
 };
-export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>> extends FormControlProps<Value | null> {
-    className?: string;
-    dropdownPlacement?: Placement;
-    helperText?: ReactNode;
-    hiddenLabel?: boolean;
-    iconName?: keyof IconsSet;
-    id?: string;
-    keyExtractor?: (option: Option) => string | number;
-    label?: ReactNode;
+type SelectTypeRef = HTMLDivElement;
+export interface SelectProps<ValueId = SelectValue, Option = SelectOption<ValueId>, Value = Option> extends Omit<SelectBaseProps<Value, Option>, "children" | "customInputElementDisplayName" | "emptyMessage" | "options"> {
+    forwardRef?: Ref<SelectTypeRef> | undefined;
+    loadOptions?: (query: string) => Promise<Option[]>;
+    noQueryMessage?: string;
+    notFoundMessage?: string;
     options: Option[];
-    placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
+    renderSelectedOption?: (option: Option) => ReactNode;
 }
-export declare const Select: React.ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: {
+    <ValueId = SelectBaseValueId, Option = SelectOption<ValueId>, Value = Option>(props: SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/select/select.js

@@ -1,58 +1,22 @@
 "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.Select = void 0;
 const react_1 = require("@headlessui/react");
+const react_2 = __importDefault(require("react"));
+const _select_base_1 = require("../_select-base");
 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 forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const react_2 = __importStar(require("react"));
-const use_dropdown_1 = require("../hooks/use-dropdown");
-const icon_1 = require("../icon");
-const label_1 = require("../label");
-exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
-    var _a, _b, _c;
-    const generatedId = (0, react_2.useId)();
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
-    const selectedOption = props.options.find((option) => option.id === props.value);
-    const innerRef = (0, react_2.useRef)(null);
-    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
-    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
-    const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
-    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
-    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
-    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
-        react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
-            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
-            react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
-        react_2.default.createElement(react_1.Listbox.Options, { ref: dropdown.floating, className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top") }, props.options.map((option) => {
-            var _a, _b, _c, _d;
-            return (react_2.default.createElement(react_1.Listbox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
-        })),
-        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))))));
-});
+const Select = (props) => {
+    var _a, _b, _c, _d;
+    const onChange = (v) => { var _a; return props.onChange((_a = v === null || v === void 0 ? void 0 : v.id) !== null && _a !== void 0 ? _a : null); };
+    const selectedOption = (_a = props.options.find((option) => option.id === props.value)) !== null && _a !== void 0 ? _a : null;
+    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Listbox, className: `uxf-select ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, customInputElementDisplayName: react_1.Listbox.Button.displayName, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: "", forwardRef: props.forwardRef, helperText: props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: selectedOption, variant: props.variant },
+        react_2.default.createElement(react_1.Listbox.Button, { className: `uxf-input__element ${!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && classes_1.CLASSES.IS_EMPTY}` },
+            react_2.default.createElement("span", { className: "uxf-input__element-text" }, selectedOption
+                ? (_d = (_c = props.renderSelectedOption) === null || _c === void 0 ? void 0 : _c.call(props, selectedOption)) !== null && _d !== void 0 ? _d : selectedOption.label
+                : props.placeholder))));
+};
+exports.Select = Select;
+exports.Select.displayName = "UxfUiSelect";

package/select/select.spec.d.ts

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

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

package/select/select.stories.d.ts

@@ -1,9 +1,11 @@
-import { SelectValue } from "./select";
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./select").SelectProps<SelectValue, import("./select").SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;
+    component: {
+        <ValueId = import("../_select-base").SelectBaseValueId, Option = import("./select").SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
+        displayName: string;
+    };
 };
 export default _default;
-export declare function Default(): JSX.Element;
-export declare function ComponentStructure(): JSX.Element;
+export declare function Default(): React.JSX.Element;
+export declare function ComponentStructure(): React.JSX.Element;

package/select/select.stories.js

@@ -27,9 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Default = void 0;
-const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
+const index_1 = require("./index");
+const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/Select",
     component: index_1.Select,
@@ -38,44 +39,40 @@ const options = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two" },
     { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
-    { id: "three", label: "Option three" },
+    { id: "four", label: "Option four" },
+    { id: "five", label: "Option five" },
+    { id: "six", label: "Option six" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
 ];
 function Default() {
-    const [value, setValue] = (0, react_1.useState)();
-    const handleChange = (v) => {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const onChange = (0, action_1.action)("onChange", (v) => {
         // eslint-disable-next-line no-console
         console.log("Select value: ", v);
         setValue(v);
-    };
+    });
     const storySelects = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", label: "Default select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isInvalid: true, label: "Invalid select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", label: "Default select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isInvalid: true, label: "Invalid select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, isClearable: true }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size sm", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "small" }),
+        react_1.default.createElement(index_1.Select, { label: "Size default", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));
 }
 exports.Default = Default;
 function ComponentStructure() {
-    const [value, setValue] = (0, react_1.useState)(null);
-    const handleChange = (v) => {
-        // eslint-disable-next-line no-console
-        console.log("Select value: ", v);
-        setValue(v);
-    };
+    const [value, onChange] = (0, react_1.useState)(null);
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,
-        react_1.default.createElement(index_1.Select, { id: "select-1", name: "select", label: "Choose option...", options: options, onChange: handleChange, value: value })));
+        react_1.default.createElement(index_1.Select, { id: "select-1", name: "select", label: "Choose option...", options: options, onChange: onChange, value: value })));
 }
 exports.ComponentStructure = ComponentStructure;

package/select/theme.d.ts

@@ -0,0 +1,5 @@
+export interface SelectSizes {
+    sm: true;
+    default: true;
+    lg: true;
+}

package/select/theme.js

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

package/tabs/index.d.ts

@@ -1 +1,2 @@
-export * from "./tabs";
+export type { TabsProps, TabsPanelProps } from "./tabs";
+export { Tabs } from "./tabs";

package/tabs/index.js

@@ -1,17 +1,5 @@
 "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("./tabs"), exports);
+exports.Tabs = void 0;
+var tabs_1 = require("./tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return tabs_1.Tabs; } });

package/tabs/tabs.d.ts

@@ -1,7 +1,8 @@
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 export interface TabsPanelProps {
     className?: string;
     disabled?: boolean;
+    style?: CSSProperties;
     title: ReactNode;
 }
 export interface TabsProps {

package/tabs/tabs.js

@@ -28,10 +28,10 @@ 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) => {
+const Panel = (props) => (react_2.default.createElement("div", { className: props.className, style: props.style }, props.children));
+Panel.displayName = "UxfUiTabPanel";
+const TabsRoot = (0, react_2.forwardRef)((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);
@@ -65,4 +65,5 @@ const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
                 }, 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))))));
 });
+TabsRoot.displayName = "UxfUiTabs";
 exports.Tabs = Object.assign(TabsRoot, { Panel });

package/tabs/tabs.spec.d.ts

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

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

package/tabs/tabs.stories.d.ts

@@ -8,4 +8,4 @@ declare const _default: {
     };
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/text-input/index.d.ts

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

package/text-input/index.js

@@ -1,17 +1,5 @@
 "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);
+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

@@ -1,8 +1,8 @@
 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;
+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"> {
     autoComplete?: string;
     className?: string;

package/text-input/text-input.js

@@ -25,33 +25,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
 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 form_component_1 = require("../form-component");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, useInputFocus_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", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
-    const onFocus = (e) => {
-        var _a;
-        setIsFocused(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    const onBlur = (e) => {
-        var _a;
-        setIsFocused(false);
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
-        react_1.default.createElement(input_1.Input, { size: props.size, variant: props.variant },
+    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 },
+        react_1.default.createElement(input_1.Input, { inputFocus: 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 }),
+            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, autoComplete: props.autoComplete, 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, ref: (0, composeRefs_1.composeRefs)(innerRef, 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))));
 });
+exports.TextInput.displayName = "UxfUiTextInput";

package/text-input/text-input.spec.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (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" }));
+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

@@ -4,5 +4,5 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("@uxf/ui/text-input").TextInputProps & React.RefAttributes<HTMLInputElement>>;
 };
 export default _default;
-export declare function Full(): JSX.Element;
-export declare function ComponentStructure(): JSX.Element;
+export declare function Default(): React.JSX.Element;
+export declare function ComponentStructure(): React.JSX.Element;

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

@@ -26,28 +26,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentStructure = exports.Full = void 0;
-const react_1 = __importStar(require("react"));
+exports.ComponentStructure = exports.Default = 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"));
+const action_1 = require("../utils/action");
 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)("");
+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",
+        });
+    });
     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: "Default html 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;
+exports.Default = Default;
 function ComponentStructure() {
     const [value, onChange] = (0, react_1.useState)("");
     return (react_1.default.createElement(component_structure_analyzer_1.default, null,

package/text-link/index.d.ts

@@ -1 +1,2 @@
-export * from "./text-link";
+export type { TextLinkProps } from "./text-link";
+export { TextLink } from "./text-link";

package/text-link/index.js

@@ -1,17 +1,5 @@
 "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);
+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

@@ -1,5 +1,8 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
 import React, { AnchorHTMLAttributes } from "react";
+import { TextLinkVariants } from "@uxf/ui/text-link/theme";
+export type TextLinkVariant = keyof TextLinkVariants;
 export interface TextLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
+    variant?: TextLinkVariant;
 }
 export declare const TextLink: React.ForwardRefExoticComponent<TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/text-link/text-link.js

@@ -1,19 +1,39 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 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) => {
+const react_1 = __importStar(require("react"));
+exports.TextLink = (0, react_1.forwardRef)((props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, children, ...restProps } = props;
+    const { className, children, variant, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-text-link", className),
+        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("a", { ref: ref, ...anchorProps }, children));
 });
+exports.TextLink.displayName = "UxfUiTextLink";

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

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