@uxf/ui 1.0.0-beta.8 → 1.0.0-beta.81

package/select/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("./select"), exports);

package/select/select.d.ts

@@ -0,0 +1,25 @@
+import type { Placement } from "@floating-ui/react-dom";
+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> = {
+    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;
+    iconSize?: number;
+    id?: string;
+    keyExtractor?: (option: Option) => string | number;
+    label?: ReactNode;
+    options: Option[];
+    placeholder?: string;
+    renderOption?: (option: Option) => ReactNode;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;

package/select/select.js

@@ -0,0 +1,60 @@
+"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.Select = void 0;
+const react_1 = require("@headlessui/react");
+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, _d;
+    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 getIconClassName = (open) => (0, cx_1.cx)("uxf-select__button-icon", open && "is-open");
+    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
+    const iconSize = (_d = props.iconSize) !== null && _d !== void 0 ? _d : 24;
+    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: getIconClassName(renderProps.open), name: iconName, size: iconSize })),
+        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))))));
+});

package/select/select.stories.d.ts

@@ -0,0 +1,9 @@
+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>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/select/select.stories.js

@@ -0,0 +1,72 @@
+"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 index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
+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);
+    };
+    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 })));
+    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);
+    };
+    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 })));
+}
+exports.ComponentStructure = ComponentStructure;

package/tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs } from "./tabs";

package/tabs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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

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

package/tabs/tabs.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importStar(require("react"));
+const Panel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
+const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
+    var _a, _b;
+    const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
+    const containerRef = (0, react_2.useRef)(null);
+    const dragStyle = (0, useMouseDragToScroll_1.useMouseDragToScroll)(containerRef);
+    const [hasOverflow, setHasOverflow] = (0, react_2.useState)();
+    (0, react_2.useEffect)(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        const handler = () => setHasOverflow(node.scrollWidth > node.clientWidth);
+        handler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+        };
+    }, []);
+    if (react_2.Children.count(props.children) === 0) {
+        return react_2.default.createElement("div", { className: tabsClassName, ref: ref });
+    }
+    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
+    const tabs = tabPanels.map((c) => ({
+        title: c.props.title,
+        disabled: c.props.disabled,
+    }));
+    return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
+        react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
+            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
+                    var _a;
+                    return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
+                }, key: `${tab.title}--${index}` }, tab.title))))),
+        react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
+});
+exports.Tabs = Object.assign(TabsRoot, { Panel });

package/tabs/tabs.stories.d.ts

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

package/tabs/tabs.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const tabs_1 = require("./tabs");
+exports.default = {
+    title: "UI/Tabs",
+    component: tabs_1.Tabs,
+};
+function Default() {
+    const testTabs = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "flex items-center gap-6" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default"),
+                react_1.default.createElement(tabs_1.Tabs, null,
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { className: "grid h-12 w-56 place-items-center bg-gray-300", disabled: true, title: "Tab 4 title - disabled" }, "content of the Tab 4 which is disabled"))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented"),
+                react_1.default.createElement(tabs_1.Tabs, { variant: "segmented" },
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                    react_1.default.createElement(tabs_1.Tabs.Panel, { className: "grid h-12 w-56 place-items-center bg-gray-300", disabled: true, title: "Tab 4 title - disabled" }, "content of the Tab 4 which is disabled")))),
+        react_1.default.createElement("div", { className: "w-[600px]" },
+            react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Default grow"),
+            react_1.default.createElement(tabs_1.Tabs, { grow: true },
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4"))),
+        react_1.default.createElement("div", { className: "w-[600px]" },
+            react_1.default.createElement("p", { className: "mb-4 text-gray-500" }, "Segmented grow"),
+            react_1.default.createElement(tabs_1.Tabs, { variant: "segmented", grow: true },
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 1 title", className: "grid h-12 w-56 place-items-center bg-red-300" }, "content of the Tab 1"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 2 title", className: "grid h-12 w-56 place-items-center bg-green-300" }, "content of the Tab 2"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 3 title", className: "grid h-12 w-56 place-items-center bg-amber-300" }, "content of the Tab 3"),
+                react_1.default.createElement(tabs_1.Tabs.Panel, { title: "Tab 4 title", className: "grid h-12 w-56 place-items-center bg-gray-300" }, "content of the Tab 4")))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testTabs),
+        react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testTabs)));
+}
+exports.Default = Default;

package/text-input/index.d.ts

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

package/text-input/index.js

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

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

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

package/text-input/text-input.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const input_1 = require("@uxf/ui/input");
+const react_1 = __importStar(require("react"));
+const form_control_1 = require("../form-control");
+exports.TextInput = (0, forwardRef_1.forwardRef)("TextInput", (props, ref) => {
+    var _a;
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const generatedId = (0, react_1.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const rootClassName = (0, cx_1.cx)("uxf-text-input", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
+    const onFocus = (e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    const onBlur = (e) => {
+        var _a;
+        setIsFocused(false);
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+        react_1.default.createElement(input_1.Input, { size: props.size, variant: props.variant },
+            props.leftAddon && react_1.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
+            props.leftElement && react_1.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
+            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, form: props.form, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: props.onChange, onFocus: onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, ref: ref, step: props.step, type: props.type, value: props.value }),
+            props.rightElement && react_1.default.createElement(input_1.Input.RightElement, null, props.rightElement),
+            props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon))));
+});

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

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

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

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStructure = exports.Full = void 0;
+const react_1 = __importStar(require("react"));
+const text_input_1 = require("@uxf/ui/text-input");
+const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
+exports.default = {
+    title: "UI/TextInput",
+    component: text_input_1.TextInput,
+};
+function Full() {
+    const [value, onChange] = (0, react_1.useState)("");
+    const [timeValue, onTimeChange] = (0, react_1.useState)("");
+    const storyTextInputs = (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", value: value, onChange: onChange, helperText: "Helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder..." }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Error input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isInvalid: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Read only input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isReadOnly: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Disabled input", value: value, onChange: onChange, helperText: "Error helper text", leftAddon: "https://", rightAddon: ".cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", placeholder: "Some beautiful placeholder...", isDisabled: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default tml time input", value: timeValue, onChange: onTimeChange, placeholder: "Some beautiful placeholder...", type: "time" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyTextInputs),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyTextInputs)));
+}
+exports.Full = Full;
+function ComponentStructure() {
+    const [value, onChange] = (0, react_1.useState)("");
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(text_input_1.TextInput, { label: "Label", placeholder: "Placeholder", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", leftAddon: "https://", rightAddon: ".cz", value: value, onChange: onChange, isInvalid: false, helperText: "Helper text" })));
+}
+exports.ComponentStructure = ComponentStructure;

package/text-link/index.d.ts

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

package/text-link/index.js

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

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

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

package/text-link/text-link.js

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

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/TextLink",
+    component: index_1.TextLink,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "flex" },
+        react_1.default.createElement("div", { className: "light flex gap-4 p-20" },
+            react_1.default.createElement("p", null,
+                "Pokra\u010Dujte ",
+                react_1.default.createElement(index_1.TextLink, { onClick: () => void null }, "t\u00EDmto odkazem"))),
+        react_1.default.createElement("div", { className: "dark flex gap-4 bg-gray-900 p-20 text-gray-200" },
+            react_1.default.createElement("p", null,
+                "Pokra\u010Dujte ",
+                react_1.default.createElement(index_1.TextLink, { onClick: () => void null }, "t\u00EDmto odkazem")))));
+}
+exports.Default = Default;

package/textarea/index.d.ts

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

package/textarea/index.js

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