@uxf/ui 11.30.1 → 11.32.0

package/raster-image/img-sources.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImgSources = void 0;
+exports.ImgSources = ImgSources;
 const hide_1 = require("@uxf/core-react/components/hide");
 const image_1 = require("@uxf/core/utils/image");
 const is_empty_1 = require("@uxf/core/utils/is-empty");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_1 = __importDefault(require("react"));
 function ImgSources(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     if ((0, image_1.isSrcString)(props.src) && (0, is_empty_1.isEmpty)(props.src)) {
         return null;
     }
@@ -27,19 +27,18 @@ function ImgSources(props) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hide_1.Hide, { when: Boolean((_a = props.options) === null || _a === void 0 ? void 0 : _a.isAvifDisabled) },
             react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
-                    ...((_b = props.options) !== null && _b !== void 0 ? _b : {}),
+                    ...props.options,
                     quality: (0, image_1.getImgQuality)(props.quality, "avif"),
                     toFormat: "avif",
                 }), type: "image/avif" })),
-        react_1.default.createElement(hide_1.Hide, { when: Boolean((_c = props.options) === null || _c === void 0 ? void 0 : _c.isWebPDisabled) },
+        react_1.default.createElement(hide_1.Hide, { when: Boolean((_b = props.options) === null || _b === void 0 ? void 0 : _b.isWebPDisabled) },
             react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
-                    ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+                    ...props.options,
                     quality: (0, image_1.getImgQuality)(props.quality, "webp"),
                     toFormat: "webp",
                 }), type: "image/webp" })),
         react_1.default.createElement("source", { media: media, srcSet: (0, image_1.getImgSrcSet)(props.src, props.width, props.height, {
-                ...((_e = props.options) !== null && _e !== void 0 ? _e : {}),
+                ...props.options,
                 quality: (0, image_1.getImgQuality)(props.quality, "original"),
             }) })));
 }
-exports.ImgSources = ImgSources;

package/raster-image/raster-image.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RasterImage = void 0;
+exports.RasterImage = RasterImage;
 const cx_1 = require("@uxf/core/utils/cx");
 const image_1 = require("@uxf/core/utils/image");
 const resizer_1 = require("@uxf/core/utils/resizer");
@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
 const empty_image_1 = require("./empty-image");
 const responsive_img_sources_1 = require("./responsive-img-sources");
 function RasterImage(props) {
-    var _a, _b, _c;
+    var _a, _b;
     const className = (0, cx_1.cx)("uxf-raster-image", props.mode === "contain" && "uxf-raster-image--contain", props.mode === "cover" && "uxf-raster-image--cover", props.className);
     const imgClassName = (0, cx_1.cx)("uxf-raster-image__img", props.mode === "contain" && "uxf-raster-image__img--contain", props.mode === "cover" && "uxf-raster-image__img--cover", props.imgClassName);
     if (!props.src) {
@@ -23,7 +23,7 @@ function RasterImage(props) {
             react_1.default.createElement("img", { alt: props.alt, className: imgClassName, height: props.height, loading: props.loading, src: svgUrl, width: props.width })));
     }
     const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_a = props.width) !== null && _a !== void 0 ? _a : "auto", (_b = props.height) !== null && _b !== void 0 ? _b : "auto", {
-        ...((_c = props.options) !== null && _c !== void 0 ? _c : {}),
+        ...props.options,
         quality: (0, image_1.getImgQuality)(props.quality, "original"),
     });
     if (resizerSrc) {
@@ -33,5 +33,4 @@ function RasterImage(props) {
     }
     return (react_1.default.createElement(empty_image_1.EmptyImage, { alt: props.alt, className: className, imgClassName: imgClassName, noImageContent: props.noImageContent }));
 }
-exports.RasterImage = RasterImage;
 RasterImage.displayName = "UxfUiRasterImage";

package/raster-image/raster-image.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 exports.default = {
@@ -12,6 +12,5 @@ exports.default = {
 };
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.RasterImage, { alt: "Alt text", height: 100, width: 300, mode: "cover", src: undefined })));
+        react_1.default.createElement(index_1.RasterImage, { alt: "Alt text", height: 100, mode: "cover", src: undefined, width: 300 })));
 }
-exports.Default = Default;

package/raster-image/responsive-img-sources.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponsiveImgSources = void 0;
+exports.ResponsiveImgSources = ResponsiveImgSources;
 const react_1 = __importDefault(require("react"));
 const context_1 = require("../context");
 const img_sources_1 = require("./img-sources");
@@ -17,4 +17,3 @@ function ResponsiveImgSources(props) {
                 ? Math.ceil((props.height / props.width) * w)
                 : "auto", key: `${w}-${i}`, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _c !== void 0 ? _c : (react_1.default.createElement(img_sources_1.ImgSources, { height: (_d = props.height) !== null && _d !== void 0 ? _d : "auto", options: props.options, quality: props.quality, src: props.src, width: (_e = props.width) !== null && _e !== void 0 ? _e : "auto" }))));
 }
-exports.ResponsiveImgSources = ResponsiveImgSources;

package/readmes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="mdx" />
 import alertBubbleReadme from "./alert-bubble/README.md";
 export declare const readmes: {
     readonly "alert-bubble": typeof alertBubbleReadme;

package/select/select.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.Select = Select;
 const react_1 = require("@floating-ui/react");
 const react_2 = require("@headlessui/react");
 const show_1 = require("@uxf/core-react/components/show");
@@ -79,11 +79,11 @@ function Select(props) {
             react_3.default.createElement("div", { className: "uxf-form-component__label" },
                 react_3.default.createElement(react_2.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: isNotInteractive ? undefined : input.focus }, props.label)),
             react_3.default.createElement("div", { className: "uxf-form-component__input" },
-                react_3.default.createElement(react_2.Listbox.Button, { as: input_1.Input, "aria-invalid": props.isInvalid, "aria-describedby": errorId, className: (0, cx_1.cx)("uxf-select__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: (_a = SelectedValue.displayName) !== null && _a !== void 0 ? _a : "", inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
+                react_3.default.createElement(react_2.Listbox.Button, { "aria-describedby": errorId, "aria-invalid": props.isInvalid, as: input_1.Input, className: (0, cx_1.cx)("uxf-select__button", dropdown.placement === "bottom" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), customInputElementDisplayName: (_a = SelectedValue.displayName) !== null && _a !== void 0 ? _a : "", inputFocus: input, inputGroupRef: stableRef, inputWrapperRef: props.inputWrapperRef, isDisabled: props.isDisabled, isFocused: renderProps.open, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, ref: props.inputRef, size: props.size, variant: props.variant },
                     props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),
                     props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
                     react_3.default.createElement(SelectedValue, { isEmpty: (0, is_nil_1.isNil)(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) }, selectedOption
-                        ? (_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label
+                        ? ((_c = (_b = props.renderSelectedOption) === null || _b === void 0 ? void 0 : _b.call(props, selectedOption)) !== null && _c !== void 0 ? _c : selectedOption.label)
                         : props.placeholder),
                     react_3.default.createElement(input_1.Input.RightElement, null,
                         react_3.default.createElement(show_1.Show, { when: Boolean(props.isClearable) && (0, is_not_nil_1.isNotNil)(value) && !isNotInteractive },
@@ -97,5 +97,4 @@ function Select(props) {
                     react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
     }));
 }
-exports.Select = Select;
 Select.displayName = "UxfUiSelect";

package/select/select.stories.js

@@ -26,7 +26,8 @@ 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;
+exports.Default = Default;
+exports.ComponentStructure = ComponentStructure;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
@@ -51,29 +52,27 @@ function Default() {
         setValue(v);
     });
     const storyComboboxes = (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(index_1.Select, { dropdownMaxHeight: 350, helperText: "Helper text", label: "Default select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select" }),
-        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, name: "select-invalid" }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-disabled" }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-read-only" }),
-        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-required" }),
-        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-required-dropdown-top" }),
-        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, name: "select-hidden-label" }),
-        react_1.default.createElement(index_1.Select, { label: "Size sm", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "small", name: "select-size-sm" }),
-        react_1.default.createElement(index_1.Select, { label: "Size default", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, name: "select-size-default" }),
-        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large", name: "select-size-lg" }),
-        react_1.default.createElement(index_1.Select, { label: "RenderOption & RenderSelectedOption", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Select, { dropdownMaxHeight: 350, helperText: "Helper text", label: "Default select", name: "select", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isClearable: true, isInvalid: true, label: "Invalid select", name: "select-invalid", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", name: "select-disabled", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", name: "select-read-only", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", name: "select-required", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", name: "select-required-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", name: "select-hidden-label", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size sm", name: "select-size-sm", onChange: onChange, options: options, placeholder: "Vyberte...", size: "small", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size default", name: "select-size-default", onChange: onChange, options: options, placeholder: "Vyberte...", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "Size lg", name: "select-size-lg", onChange: onChange, options: options, placeholder: "Vyberte...", size: "large", value: value }),
+        react_1.default.createElement(index_1.Select, { label: "RenderOption & RenderSelectedOption", name: "select-render-option", onChange: onChange, options: options, placeholder: "Vyberte...", renderOption: (option, isSelected) => (react_1.default.createElement(react_1.default.Fragment, null,
                 "Option: ",
                 option.label,
                 isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Selected: ",
-                option.label), name: "select-render-option" })));
+                option.label), value: value })));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyComboboxes)));
 }
-exports.Default = Default;
 function ComponentStructure() {
     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: onChange, value: value })));
+        react_1.default.createElement(index_1.Select, { id: "select-1", label: "Choose option...", name: "select", onChange: onChange, options: options, value: value })));
 }
-exports.ComponentStructure = ComponentStructure;

package/tabs/components/tabs-button-list.js

@@ -23,14 +23,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsButtonList = exports.Component = void 0;
+exports.TabsButtonList = void 0;
+exports.Component = Component;
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 function Component(props, ref) {
     var _a;
     return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    react_1.default.createElement("div", { ref: ref, className: (0, cx_1.cx)("uxf-tabs__button-list", props.isVertical ? "uxf-tabs__button-list--vertical" : "uxf-tabs__button-list--horizontal", `uxf-tabs__button-list--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.className), role: "tablist", onKeyDown: props.onKeyDown, style: props.style }, props.children));
+    react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__button-list", props.isVertical ? "uxf-tabs__button-list--vertical" : "uxf-tabs__button-list--horizontal", `uxf-tabs__button-list--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.className), onKeyDown: props.onKeyDown, ref: ref, role: "tablist", style: props.style }, props.children));
 }
-exports.Component = Component;
 exports.TabsButtonList = (0, react_1.forwardRef)(Component);

package/tabs/components/tabs-button.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsButton = exports.Component = void 0;
+exports.TabsButton = void 0;
+exports.Component = Component;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
@@ -33,7 +34,6 @@ function Component(props, ref) {
         return null;
     }
     const className = (0, cx_1.cx)("uxf-tabs__button", `uxf-tabs__button--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.isVertical ? "uxf-tabs__button--vertical" : "uxf-tabs__button--horizontal", props.isActive && `uxf-tabs__button--${classes_1.CLASSES.IS_ACTIVE} ${classes_1.CLASSES.IS_ACTIVE}`, props.isDisabled && `uxf-tabs__button--${classes_1.CLASSES.IS_DISABLED} ${classes_1.CLASSES.IS_DISABLED}`, props.className);
-    return (react_1.default.createElement("button", { id: props.id, ref: ref, className: className, onClick: props.isDisabled ? undefined : props.onClick, role: "tab", tabIndex: props.isActive ? undefined : -1, "aria-selected": props.isActive }, props.children));
+    return (react_1.default.createElement("button", { "aria-selected": props.isActive, className: className, id: props.id, onClick: props.isDisabled ? undefined : props.onClick, ref: ref, role: "tab", tabIndex: props.isActive ? undefined : -1 }, props.children));
 }
-exports.Component = Component;
 exports.TabsButton = (0, react_1.forwardRef)(Component);

package/tabs/components/tabs-panel.js

@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsPanel = void 0;
+exports.TabsPanel = TabsPanel;
 const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 function TabsPanel(props) {
     return props.isAlwaysMounted || props.isActive ? (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__panel", !props.isActive && `uxf-tabs__panel--${classes_1.CLASSES.IS_HIDDEN} ${classes_1.CLASSES.IS_HIDDEN}`, props.className) }, props.children)) : null;
 }
-exports.TabsPanel = TabsPanel;

package/tabs/components/tabs-panels.js

@@ -3,9 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsPanels = void 0;
+exports.TabsPanels = TabsPanels;
 const react_1 = __importDefault(require("react"));
 function TabsPanels(props) {
     return react_1.default.createElement("div", { className: "uxf-tabs__panels" }, props.children);
 }
-exports.TabsPanels = TabsPanels;

package/tabs/components/tabs-root.js

@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsRoot = void 0;
+exports.TabsRoot = TabsRoot;
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 function TabsRoot(props) {
     var _a;
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs", `uxf-tabs--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.isVertical ? "uxf-tabs--vertical" : "uxf-tabs--horizontal", props.className) }, props.children));
 }
-exports.TabsRoot = TabsRoot;

package/tabs/panel.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TABS_PANEL_DISPLAY_NAME = exports.Panel = void 0;
+exports.TABS_PANEL_DISPLAY_NAME = void 0;
+exports.Panel = Panel;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Panel(props) {
     // this is never rendered
     return null;
 }
-exports.Panel = Panel;
 exports.TABS_PANEL_DISPLAY_NAME = "UxfUiTabPanel";
 Panel.displayName = exports.TABS_PANEL_DISPLAY_NAME;

package/tabs/tabs.js

@@ -64,10 +64,12 @@ function Root(props) {
     };
     const hasPanelWithChildren = (0, is_not_nil_1.isNotNil)(tabPanels.find((panel) => (0, is_not_nil_1.isNotNil)(panel.props.children)));
     return (react_1.default.createElement(tabs_root_1.TabsRoot, { className: props.className, isVertical: props.isVertical, variant: props.variant },
-        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { isVertical: props.isVertical, variant: props.variant, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, className: props.classNameButtonList }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { key: panel.props.name, ref: (ref) => (tabRefs.current[index] = ref), className: panel.props.classNameButton, id: createId(id, panel.props.name), isActive: panel.props.name === props.value, isDisabled: panel.props.isDisabled, isHidden: panel.props.isHidden, isVertical: props.isVertical, onClick: () => props.onChange(panel.props.name), variant: props.variant }, typeof panel.props.label === "function"
+        react_1.default.createElement(tabs_button_list_1.TabsButtonList, { className: props.classNameButtonList, isVertical: props.isVertical, onKeyDown: onKeyDown, ref: buttonListRef, style: buttonListStyle, variant: props.variant }, tabPanels.map((panel, index) => (react_1.default.createElement(tabs_button_1.TabsButton, { className: panel.props.classNameButton, id: createId(id, panel.props.name), isActive: panel.props.name === props.value, isDisabled: panel.props.isDisabled, isHidden: panel.props.isHidden, isVertical: props.isVertical, key: panel.props.name, onClick: () => props.onChange(panel.props.name), ref: (ref) => {
+                tabRefs.current[index] = ref;
+            }, variant: props.variant }, typeof panel.props.label === "function"
             ? panel.props.label({ isActive: panel.props.name === props.value })
             : panel.props.label)))),
-        hasPanelWithChildren && (react_1.default.createElement(tabs_panels_1.TabsPanels, null, tabPanels.map((panel) => (react_1.default.createElement(tabs_panel_1.TabsPanel, { key: panel.props.name, className: panel.props.classNamePanel, isActive: panel.props.name === props.value, isHidden: panel.props.isHidden, isAlwaysMounted: panel.props.isAlwaysMounted }, panel.props.children)))))));
+        hasPanelWithChildren && (react_1.default.createElement(tabs_panels_1.TabsPanels, null, tabPanels.map((panel) => (react_1.default.createElement(tabs_panel_1.TabsPanel, { className: panel.props.classNamePanel, isActive: panel.props.name === props.value, isAlwaysMounted: panel.props.isAlwaysMounted, isHidden: panel.props.isHidden, key: panel.props.name }, panel.props.children)))))));
 }
 Root.displayName = "UxfUiTabs";
 exports.Tabs = Object.assign(Root, { Panel: panel_1.Panel });

package/tabs/tabs.stories.js

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

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

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

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
 exports.default = {
@@ -19,4 +19,3 @@ function Default() {
                 "Pokra\u010Dujte ",
                 react_1.default.createElement(index_1.TextLink, { onClick: onClick }, "t\u00EDmto odkazem")))));
 }
-exports.Default = Default;

package/textarea/textarea.js

@@ -68,6 +68,6 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     const onWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: onWrapperClick, style: props.style },
-            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, rows: props.rows, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: (event) => props.onChange(event.target.value, event), onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: props.rows, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";

package/textarea/textarea.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
@@ -35,11 +35,9 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)("test");
     const onChange = (0, action_1.action)("onChange", setValue);
     const storyTextAreas = (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", onChange: onChange, placeholder: "Placeholder text...", value: value, name: "text-area" }),
-        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: onChange, value: value, name: "text-area-read-only" }),
-        react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: onChange, value: value, name: "text-area-diabled" }),
-        react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", placeholder: "Placeholder text....", rows: 10, onChange: onChange, value: value, name: "text-area-invalid" })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyTextAreas)));
+        react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", name: "text-area", onChange: onChange, placeholder: "Placeholder text...", value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", isReadOnly: true, label: "Readonly", name: "text-area-read-only", onChange: onChange, value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-disabled", isDisabled: true, label: "Textarea disabled", name: "text-area-diabled", onChange: onChange, value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", name: "text-area-invalid", onChange: onChange, placeholder: "Placeholder text....", rows: 10, value: value })));
+    return react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyTextAreas);
 }
-exports.Default = Default;

package/time-picker/time-picker-hours.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const time_picker_hour_1 = require("./time-picker-hour");
 const TimePickerHours = () => {
     const { hours } = (0, use_hours_1.useHours)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, label: hour.label, key: hour.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__hours uxf-calendar__hours" }, hours.map((hour) => (react_1.default.createElement(time_picker_hour_1.TimePickerHour, { hour: hour.value, key: hour.value, label: hour.label })))));
 };
 exports.TimePickerHours = TimePickerHours;
 exports.TimePickerHours.displayName = "UxfUiTimePickerHours";

package/time-picker/time-picker-minutes.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const time_picker_minute_1 = require("./time-picker-minute");
 const TimePickerMinutes = () => {
     const { minutes } = (0, use_minutes_1.useMinutes)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { minute: minute.value, label: minute.label, key: minute.value })))));
+    return (react_1.default.createElement("div", { className: "uxf-time-picker__minutes uxf-calendar__minutes" }, minutes.map((minute) => (react_1.default.createElement(time_picker_minute_1.TimePickerMinute, { key: minute.value, label: minute.label, minute: minute.value })))));
 };
 exports.TimePickerMinutes = TimePickerMinutes;
 exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";

package/time-picker/time-picker.js

@@ -46,14 +46,14 @@ const TimePicker = (props) => {
                 react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextHour, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
-                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("hour") }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
+                    react_1.default.createElement(button_1.Button, { onClick: () => setViewMode("hour"), variant: "text" }, (_b = (_a = props.selectedTime) === null || _a === void 0 ? void 0 : _a.hour.toString()) !== null && _b !== void 0 ? _b : "0"),
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevHour, title: "P\u0159edchoz\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))),
                 react_1.default.createElement("div", null, ":"),
                 react_1.default.createElement("div", { className: "uxf-time-picker__global__column" },
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToNextMinute, title: "Nadch\u00E1zej\u00EDc\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 16 })),
-                    react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
+                    react_1.default.createElement(button_1.Button, { onClick: () => setViewMode("minute"), variant: "text" }, props.selectedTime
                         ? props.selectedTime.minute < 10
                             ? "0" + props.selectedTime.minute
                             : props.selectedTime.minute.toString()

package/time-picker/time-picker.stories.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const time_picker_1 = require("./time-picker");
@@ -35,9 +35,6 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);
     const onClose = () => null;
-    const testTimePickers = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: onClose, onChange: onChange, selectedTime: value })));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "max-w-[640px] space-y-4 rounded p-8" }, testTimePickers)));
+    const testTimePickers = react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: onClose, onChange: onChange, selectedTime: value });
+    return react_1.default.createElement("div", { className: "max-w-screen-sm space-y-4 rounded p-8" }, testTimePickers);
 }
-exports.Default = Default;

package/time-picker-input/time-picker-input.d.ts

@@ -1,10 +1,17 @@
+import { TimeString } from "@uxf/core/date";
 import React, { ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
+import { ControlProps } from "../types";
 export declare const ALLOWED_TIME_FORMAT: string[];
 export declare const DISPLAY_TIME_FORMAT = "H:mm";
 export declare const OUTPUT_TIME_FORMAT = "HH:mm:ss";
+interface CustomTimePickerProps extends ControlProps<TimeString | null> {
+    onClose: () => void;
+}
 export interface TimePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     placeholder?: string;
     triggerElement?: ReactNode;
+    CustomTimePicker?: (props: CustomTimePickerProps) => ReactNode;
 }
 export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/time-picker-input/time-picker-input.js

@@ -27,7 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerInput = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
+const is_time_string_1 = require("@uxf/core/date/is-time-string");
 const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const react_1 = __importStar(require("react"));
@@ -75,6 +77,6 @@ exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     }, [onChange]);
     const value = getValue(props.value);
     const selectedTime = getSelectedTime(props.value);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }) }, ({ close }) => (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_TIME_FORMAT), ref: ref, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "clock", size: 20 }), value: value }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomTimePicker) ? (react_1.default.createElement(props.CustomTimePicker, { onChange: props.onChange, onClose: close, value: (0, is_time_string_1.isTimeString)(props.value) ? props.value : null })) : (react_1.default.createElement(time_picker_1.TimePicker, { closePopoverHandler: close, onChange: onTimePickerChange, preventScroll: true, selectedTime: selectedTime }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";