@uxf/ui 10.0.0-beta.9 → 10.0.1

package/scripts/generate-tw-tokens.js

@@ -47,48 +47,56 @@ const TW_TOKENS = [
 
 let error = false;
 
-try {
-    const mode = process.argv.filter((c) => c.includes("--mode="))[0]?.split("=")[1];
-    const twConfig = process.argv.filter((c) => c.includes("--twConfig="))[0]?.split("=")[1];
-    const outputPath = process.argv.filter((c) => c.includes("--outputPath="))[0]?.split("=")[1];
+async function generateTwTokens() {
+    try {
+        const mode = process.argv.filter((c) => c.includes("--mode="))[0]?.split("=")[1];
+        const twConfig = process.argv.filter((c) => c.includes("--twConfig="))[0]?.split("=")[1];
+        const outputPath = process.argv.filter((c) => c.includes("--outputPath="))[0]?.split("=")[1];
+
+        if (!twConfig) {
+            throw Error(`Provide valid path to tailwind config. Use "--twConfig" argument.`);
+        }
 
-    if (!twConfig) {
-        throw Error(`Provide valid path to tailwind config. Use "--twConfig" argument.`);
-    }
+        if (!outputPath) {
+            throw Error(`Provide valid output path to tailwind tokens. Use "--outputPath" argument.`);
+        }
 
-    if (!outputPath) {
-        throw Error(`Provide valid output path to tailwind tokens. Use "--outputPath" argument.`);
-    }
+        const loadedTwConfig = resolveConfig(require(path.resolve(process.cwd(), twConfig)));
 
-    const loadedTwConfig = resolveConfig(require(path.resolve(process.cwd(), twConfig)));
+        const outputDir = path.resolve(process.cwd(), outputPath);
 
-    TW_TOKENS.forEach((property) => {
-        const result = resolveProperty(property, loadedTwConfig.theme) || "";
+        if (mode !== "check" && !fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir);
+        }
 
-        const filePath = path.resolve(process.cwd(), `${outputPath}tw-${camelToSnakeCase(property)}.ts`);
+        for (const token of TW_TOKENS) {
+            const result = resolveProperty(token, loadedTwConfig.theme) || "";
 
-        if (!result && mode !== "check" && fs.existsSync(filePath)) {
-            fs.rmSync(filePath);
-        }
+            const filePath = path.resolve(process.cwd(), `${outputPath}tw-${camelToSnakeCase(token)}.ts`);
+
+            if (!result && mode !== "check" && fs.existsSync(filePath)) {
+                fs.rmSync(filePath);
+            }
 
-        const newContent = prettier.format(result, {
-            parser: "babel",
-            tabWidth: 4,
-        });
+            const newContent = await prettier.format(result, {
+                parser: "typescript",
+                tabWidth: 4,
+            });
 
-        if (mode === "check") {
-            const oldContent = fs.existsSync(filePath) ? fs.readFileSync(filePath).toString() : "";
+            if (mode === "check") {
+                const oldContent = fs.existsSync(filePath) ? fs.readFileSync(filePath).toString() : "";
 
-            if (newContent !== oldContent) {
-                throw new Error("Generated tailwind tokens doesn't match with current tailwind config.");
+                if (newContent !== oldContent) {
+                    throw new Error("Generated tailwind tokens doesn't match with current tailwind config.");
+                }
+            } else if (newContent) {
+                fs.writeFileSync(filePath, newContent, "utf-8");
             }
-        } else if (newContent) {
-            fs.writeFileSync(filePath, newContent, "utf-8");
         }
-    });
-} catch (err) {
-    console.error(err.message);
-    error = true;
+    } catch (err) {
+        console.error(err.message);
+        error = true;
+    }
 }
 
-process.exit(error ? 1 : 0);
+generateTwTokens().then(() => process.exit(error ? 1 : 0));

package/select/README.md

@@ -0,0 +1,11 @@
+# Select
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/dropdown/dropdown.css");
+```

package/select/index.d.ts

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

package/select/select.d.ts

@@ -9,11 +9,8 @@ export type SelectOption<T = SelectValue> = {
 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[];
-    renderOption?: (option: Option) => ReactNode;
+    renderOption?: (option: Option, isSelected: boolean) => ReactNode;
     renderSelectedOption?: (option: Option) => ReactNode;
 }
 export declare const Select: {

package/select/select.js

@@ -5,14 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 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 react_2 = __importDefault(require("react"));
 const _select_base_1 = require("../_select-base");
-const classes_1 = require("@uxf/core/constants/classes");
 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 },
+    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, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, 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

package/select/select.stories.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
+import { SelectOption } from "./index";
 declare const _default: {
     title: string;
     component: {
-        <ValueId = import("../_select-base").SelectBaseValueId, Option = import("./select").SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
+        <ValueId = import("../_select-base").SelectBaseValueId, Option = SelectOption<ValueId>, Value = Option>(props: import("./select").SelectProps<ValueId, Option, ValueId>): React.JSX.Element;
         displayName: string;
     };
 };

package/select/select.stories.js

@@ -28,16 +28,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStructure = exports.Default = void 0;
 const react_1 = __importStar(require("react"));
+const action_1 = require("../utils/action");
 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,
 };
 const options = [
     { id: "one", label: "Option one" },
-    { id: "two", label: "Option two" },
+    { id: "two", label: "Option two disabled", disabled: true },
     { id: "three", label: "Option three" },
     { id: "four", label: "Option four" },
     { id: "five", label: "Option five" },
@@ -64,7 +64,13 @@ function Default() {
         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" })));
+        react_1.default.createElement(index_1.Select, { label: "Size lg", onChange: onChange, options: options, placeholder: "Vyberte...", value: value, size: "large" }),
+        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,
+                "Option: ",
+                option.label,
+                isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
+                "Selected: ",
+                option.label) })));
     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)));

package/tabs/README.md

@@ -0,0 +1,7 @@
+# Tabs
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/tabs/tabs.css");
+```

package/tabs/index.d.ts

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

package/text-input/README.md

@@ -0,0 +1,10 @@
+# TextInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/input/input-basic.css");
+@import url("@uxf/ui/input/input.css");
+@import url("@uxf/ui/form-component/form-component.css");
+@import url("@uxf/ui/icon/icon.css");
+```

package/text-input/index.d.ts

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

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

@@ -4,6 +4,7 @@ import React, { KeyboardEventHandler, ReactNode } from "react";
 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"> {
+    autoFocus?: boolean;
     autoComplete?: string;
     className?: string;
     enterKeyHint?: EnterKeyHint;

package/text-input/text-input.js

@@ -26,11 +26,11 @@ 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 composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const input_1 = require("@uxf/ui/input");
 const react_1 = __importStar(require("react"));
 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);
@@ -43,7 +43,7 @@ exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
         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, 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 }),
+            react_1.default.createElement(input_1.Input.Element, { "aria-describedby": errorId, autoComplete: props.autoComplete, autoFocus: props.autoFocus, 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))));
 });

package/text-link/README.md

@@ -0,0 +1,19 @@
+# TextLink
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/text-link/text-link.css");
+```
+
+## Props configuration
+
+```tsx
+// textLink.d.ts
+
+declare module "@uxf/ui/icon/theme" {
+    export interface TextLinkVariants {
+        default: true;
+    }
+}
+```

package/text-link/index.d.ts

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

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

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

package/textarea/README.md

@@ -0,0 +1,9 @@
+# Textarea
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/textarea/textarea.css");
+@import url("@uxf/ui/label/label.css");
+@import url("@uxf/ui/form-component/form-component.css");
+```

package/textarea/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextareaProps } from "./textarea";
 export { Textarea } from "./textarea";
+export type { TextareaProps } from "./textarea";

package/textarea/textarea.js

@@ -33,11 +33,11 @@ const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
 function autoHeightHandler(element, rows = 4) {
     element.style.height = "auto";
-    if (rows > 1) {
+    if (rows >= 1) {
         const contentHeight = element.scrollHeight;
-        const lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue("line-height"), 10);
-        const fontSize = parseInt(window.getComputedStyle(element).getPropertyValue("font-size"), 10);
-        const targetHeight = rows * fontSize * (lineHeight / fontSize);
+        const lineHeight = parseFloat(window.getComputedStyle(element).getPropertyValue("line-height"));
+        const fontSize = parseFloat(window.getComputedStyle(element).getPropertyValue("font-size"));
+        const targetHeight = parseInt((rows * fontSize * (lineHeight / fontSize)).toFixed(3), 10);
         element.style.height = Math.max(targetHeight, contentHeight) + "px";
     }
 }
@@ -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 },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: onWrapperClick },
-            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, composeRefs_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, rows: props.rows, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";

package/textarea/textarea.stories.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 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");
+const index_1 = require("./index");
 exports.default = {
     title: "UI/Textarea",
     component: index_1.Textarea,

package/time-picker/README.md

@@ -0,0 +1,8 @@
+# TimePicker
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/icon/icon.css");
+```

package/time-picker/index.d.ts

@@ -1,2 +1,2 @@
-export type { TimePickerProps } from "./time-picker";
 export { TimePicker } from "./time-picker";
+export type { TimePickerProps } from "./time-picker";

package/time-picker/time-picker-hour.js

@@ -24,16 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerHour = void 0;
-const react_1 = __importStar(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const use_hour_1 = require("@uxf/datepicker/hooks/use-hour");
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
+const react_1 = __importStar(require("react"));
 const TimePickerHour = (props) => {
     const hourRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedHour, isHourFocused, isHourSelected, onHourSelect, onHourFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { onClick, onKeyDown, tabIndex, isSelected } = (0, use_hour_1.useHour)({
         hour: props.hour,
         hourRef,
@@ -42,8 +41,9 @@ const TimePickerHour = (props) => {
         isHourSelected,
         onHourSelect,
         onHourFocus,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__hour", isSelected && classes_1.CLASSES.IS_SELECTED), ref: hourRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-hour", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: hourRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerHour = TimePickerHour;
 exports.TimePickerHour.displayName = "UxfUiTimePickerHour";

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

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerHours = void 0;
+const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
 const react_1 = __importDefault(require("react"));
 const time_picker_hour_1 = require("./time-picker-hour");
-const use_hours_1 = require("@uxf/datepicker/hooks/use-hours");
 const TimePickerHours = () => {
     const { hours } = (0, use_hours_1.useHours)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__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, label: hour.label, key: hour.value })))));
 };
 exports.TimePickerHours = TimePickerHours;
 exports.TimePickerHours.displayName = "UxfUiTimePickerHours";

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

@@ -34,8 +34,9 @@ exports.default = {
 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: close, onChange: onChange, selectedTime: value })));
+        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: "light max-w-[640px] space-y-4 rounded bg-white p-8" }, testTimePickers),
         react_1.default.createElement("div", { className: "dark max-w-[640px] space-y-4 rounded bg-gray-900 p-8 text-white" }, testTimePickers)));

package/time-picker/time-picker-minute.js

@@ -24,16 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerMinute = void 0;
-const react_1 = __importStar(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
 const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const use_minute_1 = require("@uxf/datepicker/hooks/use-minute");
-const cx_1 = require("@uxf/core/utils/cx");
-const classes_1 = require("@uxf/core/constants/classes");
-const button_1 = require("../button");
+const react_1 = __importStar(require("react"));
 const TimePickerMinute = (props) => {
     const minuteRef = (0, react_1.useRef)(null);
     // eslint-disable-next-line react/destructuring-assignment
-    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
+    const { focusedMinute, isMinuteFocused, isMinuteSelected, onMinuteSelect, onMinuteFocus, preventScroll } = (0, react_1.useContext)(time_picker_context_1.TimePickerContext);
     const { isSelected, onClick, onKeyDown, tabIndex } = (0, use_minute_1.useMinute)({
         minute: props.minute,
         minuteRef,
@@ -42,8 +41,9 @@ const TimePickerMinute = (props) => {
         isMinuteSelected,
         onMinuteFocus,
         onMinuteSelect,
+        preventScroll,
     });
-    return (react_1.default.createElement(button_1.Button, { variant: "text", tabIndex: tabIndex, onKeyDown: onKeyDown, onClick: onClick, className: (0, cx_1.cx)("uxf-time-picker__minute", isSelected && classes_1.CLASSES.IS_SELECTED), ref: minuteRef }, props.label));
+    return (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-minute", isSelected && classes_1.CLASSES.IS_SELECTED), onClick: onClick, onKeyDown: onKeyDown, ref: minuteRef, tabIndex: tabIndex }, props.label));
 };
 exports.TimePickerMinute = TimePickerMinute;
 exports.TimePickerMinute.displayName = "UxfUiTimePickerMinute";

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

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerMinutes = void 0;
+const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
 const react_1 = __importDefault(require("react"));
 const time_picker_minute_1 = require("./time-picker-minute");
-const use_minutes_1 = require("@uxf/datepicker/hooks/use-minutes");
 const TimePickerMinutes = () => {
     const { minutes } = (0, use_minutes_1.useMinutes)({});
-    return (react_1.default.createElement("div", { className: "uxf-time-picker__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, { minute: minute.value, label: minute.label, key: minute.value })))));
 };
 exports.TimePickerMinutes = TimePickerMinutes;
 exports.TimePickerMinutes.displayName = "UxfUiTimePickerMinutes";

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

@@ -1,8 +1,9 @@
-import { FC } from "react";
 import { OnTimeChangeType, TimeType } from "@uxf/datepicker/hooks/use-time-picker";
+import { FC } from "react";
 export interface TimePickerProps {
     closePopoverHandler?: () => void;
     onChange: (data: OnTimeChangeType) => void;
+    preventScroll?: boolean;
     selectedTime: TimeType | null;
 }
 export declare const TimePicker: FC<TimePickerProps>;

package/time-picker/time-picker.js

@@ -24,19 +24,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
+const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
+const use_time_picker_1 = require("@uxf/datepicker/hooks/use-time-picker");
 const react_1 = __importStar(require("react"));
+const button_1 = require("../button");
+const icon_1 = require("../icon");
 const time_picker_hours_1 = require("./time-picker-hours");
 const time_picker_minutes_1 = require("./time-picker-minutes");
-const use_time_picker_1 = require("@uxf/datepicker/hooks/use-time-picker");
-const icon_1 = require("../icon");
-const button_1 = require("../button");
-const time_picker_context_1 = require("@uxf/datepicker/contexts/time-picker-context");
 const TimePicker = (props) => {
     const [viewMode, setViewMode] = (0, react_1.useState)("global");
     const { goToNextMinute, goToPrevHour, goToPrevMinute, goToNextHour, ...contextProps } = (0, use_time_picker_1.useTimePicker)({
         selectedTime: props.selectedTime,
         onTimeChange: props.onChange,
         onSelectCallback: () => setViewMode("global"),
+        preventScroll: props.preventScroll,
     });
     const timePickerComponents = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -45,7 +46,7 @@ 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) !== null && _b !== void 0 ? _b : "0"),
+                    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, { 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, ":"),
@@ -55,7 +56,7 @@ const TimePicker = (props) => {
                     react_1.default.createElement(button_1.Button, { variant: "text", onClick: () => setViewMode("minute") }, props.selectedTime
                         ? props.selectedTime.minute < 10
                             ? "0" + props.selectedTime.minute
-                            : props.selectedTime.minute
+                            : props.selectedTime.minute.toString()
                         : "00"),
                     react_1.default.createElement(button_1.Button, { isIconButton: true, onClick: goToPrevMinute, title: "P\u0159edchoz\u00ED", variant: "text" },
                         react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16 }))))),

package/time-picker-input/README.md

@@ -0,0 +1,9 @@
+# TimePickerInput
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/button/button.css");
+@import url("@uxf/ui/icon/icon.css");
+@import url("@uxf/ui/label/label.css");
+```

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

@@ -1,2 +1,2 @@
+export { ALLOWED_TIME_FORMAT, DISPLAY_TIME_FORMAT, OUTPUT_TIME_FORMAT, TimePickerInput } from "./time-picker-input";
 export type { TimePickerInputProps } from "./time-picker-input";
-export { TimePickerInput, DISPLAY_TIME_FORMAT, ALLOWED_TIME_FORMAT, OUTPUT_TIME_FORMAT } from "./time-picker-input";

package/time-picker-input/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OUTPUT_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.TimePickerInput = void 0;
+exports.TimePickerInput = exports.OUTPUT_TIME_FORMAT = exports.DISPLAY_TIME_FORMAT = exports.ALLOWED_TIME_FORMAT = void 0;
 var time_picker_input_1 = require("./time-picker-input");
-Object.defineProperty(exports, "TimePickerInput", { enumerable: true, get: function () { return time_picker_input_1.TimePickerInput; } });
-Object.defineProperty(exports, "DISPLAY_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.DISPLAY_TIME_FORMAT; } });
 Object.defineProperty(exports, "ALLOWED_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.ALLOWED_TIME_FORMAT; } });
+Object.defineProperty(exports, "DISPLAY_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.DISPLAY_TIME_FORMAT; } });
 Object.defineProperty(exports, "OUTPUT_TIME_FORMAT", { enumerable: true, get: function () { return time_picker_input_1.OUTPUT_TIME_FORMAT; } });
+Object.defineProperty(exports, "TimePickerInput", { enumerable: true, get: function () { return time_picker_input_1.TimePickerInput; } });

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

@@ -27,12 +27,13 @@ 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 react_1 = __importStar(require("react"));
-const time_picker_1 = require("../time-picker");
-const _input_with_popover_1 = require("../_input-with-popover");
+const cx_1 = require("@uxf/core/utils/cx");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const react_1 = __importStar(require("react"));
+const _input_with_popover_1 = require("../_input-with-popover");
 const icon_1 = require("../icon");
+const time_picker_1 = require("../time-picker");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_TIME_FORMAT = ["HH:mm", "H:mm"];
 exports.DISPLAY_TIME_FORMAT = "H:mm";
@@ -57,6 +58,7 @@ function getSelectedTime(value) {
 exports.TimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const onChange = props.onChange;
+    const className = (0, cx_1.cx)("uxf-time-picker-input", props.className);
     const onInputChange = (0, react_1.useCallback)((value) => {
         const parsedValue = (0, dayjs_1.default)(value, exports.ALLOWED_TIME_FORMAT, true);
         if (value !== "" && parsedValue.isValid()) {
@@ -73,6 +75,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, 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, 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, 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 }))));
 });
 exports.TimePickerInput.displayName = "UxfUiTimePickerInput";

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

@@ -26,8 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const icon_1 = require("@uxf/ui//icon");
 const react_1 = __importStar(require("react"));
-const time_picker_input_1 = require("./time-picker-input");
 const action_1 = require("../utils/action");
+const time_picker_input_1 = require("./time-picker-input");
 exports.default = {
     title: "UI/TimePickerInput",
     component: time_picker_input_1.TimePickerInput,

package/toggle/README.md

@@ -0,0 +1,7 @@
+# Toggle
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/toggle/toggle.css");
+```