@uxf/ui 1.0.0-beta.99 → 10.0.0-beta.4

package/radio-group/radio-group.stories.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const index_1 = require("./index");
 const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
 exports.default = {
     title: "UI/RadioGroup",
     component: index_1.RadioGroup,
@@ -46,11 +47,13 @@ const options = [
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)(options[0].value);
+    const onChange = (0, action_1.action)("onChange", setValue);
     const testRadioGroups = (react_1.default.createElement("div", { className: "space-y-10" },
-        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: (v) => setValue(v), options: options, value: value }),
-        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" }),
-        react_1.default.createElement(index_1.RadioGroup, { hiddenLabel: true, id: "radiogroup", label: "Radio group variant row with hidden label", onChange: (v) => setValue(v), options: options, value: value, variant: "row" }),
-        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant row, radioSize lg", onChange: (v) => setValue(v), options: options, value: value, variant: "row", radioSize: "lg" })));
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: onChange, options: options, value: value }),
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant radio button", onChange: onChange, options: options, value: value, variant: "radioButton" }),
+        react_1.default.createElement(index_1.RadioGroup, { hiddenLabel: true, id: "radiogroup", label: "Radio group variant row with hidden label", onChange: onChange, options: options, value: value, variant: "row" }),
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant column, radioSize default", onChange: onChange, options: options, value: value, variant: "column", radioSize: "default" }),
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant row, radioSize lg", onChange: onChange, options: options, value: value, variant: "row", radioSize: "lg" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testRadioGroups),
         react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testRadioGroups)));

package/radio-group/theme.d.ts

@@ -1,5 +1,7 @@
 export interface RadioGroupVariants {
+    column: true;
     list: true;
     radioButton: true;
     row: true;
 }
+export type RadioGroupVariant = keyof RadioGroupVariants;

package/raster-image/index.d.ts

@@ -1 +1,2 @@
-export * from "./raster-image";
+export type { RasterImageProps } from "./raster-image";
+export { RasterImage } from "./raster-image";

package/raster-image/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("./raster-image"), exports);
+exports.RasterImage = void 0;
+var raster_image_1 = require("./raster-image");
+Object.defineProperty(exports, "RasterImage", { enumerable: true, get: function () { return raster_image_1.RasterImage; } });

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

@@ -1,8 +1,8 @@
 import { Quality } from "@uxf/core/utils/image";
 import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
 import { FC, ImgHTMLAttributes, ReactNode } from "react";
-declare type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
-declare type Props = {
+type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
+export type RasterImageProps = {
     alt: string;
     breakpoints?: Record<string, string>;
     className?: string;
@@ -26,5 +26,5 @@ declare type Props = {
     width: number;
     height?: never;
 });
-export declare const RasterImage: FC<Props>;
+export declare const RasterImage: FC<RasterImageProps>;
 export {};

package/raster-image/raster-image.js

@@ -32,7 +32,7 @@ const RasterImage = (props) => {
         props.imgClassName,
     ];
     const svgUrl = props.src && (0, image_1.getSvgImgUrl)(props.src);
-    if (svgUrl === "svg") {
+    if (svgUrl) {
         return (react_1.default.createElement("picture", { className: (0, cx_1.cx)(className) },
             react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: svgUrl, width: props.width })));
     }
@@ -45,3 +45,4 @@ const RasterImage = (props) => {
         react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)(imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
 };
 exports.RasterImage = RasterImage;
+exports.RasterImage.displayName = "UxfUiRasterImage";

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

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

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

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

@@ -1,30 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: React.FC<{
-        alt: string;
-        breakpoints?: Record<string, string> | undefined;
-        className?: string | undefined;
-        heights?: number[] | undefined;
-        imgClassName?: string | undefined;
-        loading?: "eager" | "lazy" | undefined;
-        mode?: "contain" | "cover" | "responsive" | undefined;
-        noImageContent?: React.ReactNode;
-        options?: Omit<import("@uxf/core/utils/resizer").ResizerImageProps, "quality" | "toFormat"> | undefined;
-        quality?: import("@uxf/core/utils/image").Quality | undefined;
-        role?: React.AriaRole | undefined;
-        src: import("@uxf/core/utils/resizer").ImageSource | null | undefined;
-        widths?: number[] | undefined;
-    } & ({
-        width: number;
-        height: number;
-    } | {
-        width?: undefined;
-        height: number;
-    } | {
-        width: number;
-        height?: undefined;
-    })>;
+    component: React.FC<import("./raster-image").RasterImageProps>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function Default(): React.JSX.Element;

package/select/index.d.ts

@@ -1 +1,2 @@
-export * from "./select";
+export type { SelectValue, SelectOption, SelectProps } from "./select";
+export { Select } from "./select";

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;