@uxf/ui 11.11.0 → 11.11.3

package/_input-with-popover/input-with-popover.js

@@ -71,7 +71,7 @@ exports._InputWithPopover = (0, react_3.forwardRef)((props, ref) => {
     });
     const isInteractive = !props.isDisabled && !props.isReadOnly;
     const showRemoveButton = !!(props.value && isInteractive && props.isClearable);
-    return (react_3.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label },
+    return (react_3.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: error.errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_3.default.createElement(react_2.Popover, { as: react_3.Fragment }, (renderProps) => (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement(input_1.Input, { inputFocus: input, size: props.size, variant: props.variant, wrapperRef: floatingPopover.refs.setReference },
                 props.leftAddon && react_3.default.createElement(input_1.Input.LeftAddon, null, props.leftAddon),

package/_select-base/_select-base.d.ts

@@ -3,7 +3,7 @@ import type { Combobox as HUICombobox, Listbox as HUIListbox } from "@headlessui
 import { IconsSet } from "@uxf/ui/icon/theme";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
 import { Clearable, FormControlProps } from "@uxf/ui/types";
-import React, { ReactElement, ReactNode, Ref } from "react";
+import React, { CSSProperties, ReactElement, ReactNode, Ref } from "react";
 export type SelectBaseValueId = number | string;
 export type SelectBaseValue<ValueId = SelectBaseValueId> = {
     id: ValueId;
@@ -33,6 +33,7 @@ export interface SelectBaseProps<Value, Option> extends FormControlProps<Value |
     placeholder?: string;
     renderOption?: (option: Option, isSelected: boolean) => ReactNode;
     size?: keyof InputGroupSizes;
+    style?: CSSProperties;
     variant?: keyof InputGroupVariants;
     leftAddon?: ReactNode;
     leftElement?: ReactNode;

package/_select-base/_select-base.js

@@ -82,7 +82,7 @@ const _SelectBase = (props) => {
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", (_c = props.dropdownMatchesInputWidth) !== null && _c !== void 0 ? _c : true, props.dropdownStrategy);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, props.forwardRef, dropdown.refs.setReference), [dropdown.refs.setReference, props.forwardRef]);
     const HUIComponent = props.HUIComponent;
-    return (react_2.default.createElement(HUIComponent, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", 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), "data-testid": id, disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(HUIComponent, { as: "div", by: "id", className: (0, cx_1.cx)("uxf-form-component uxf-select-base", 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), "data-testid": id, disabled: props.isDisabled || props.isReadOnly, onChange: props.onChange, style: props.style, value: props.value }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement("div", { className: "uxf-form-component__label" },
             react_2.default.createElement(HUIComponent.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label)),
         react_2.default.createElement("div", { className: "uxf-form-component__input" },

package/avatar-file-input/avatar-file-input.js

@@ -53,7 +53,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
             inputNode.value = "";
         }
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
                 react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),

package/avatar-file-input/avatar-file-input.stories.js

@@ -42,8 +42,8 @@ function Default() {
         console.log("Upload error", err);
     };
     return (react_1.default.createElement("div", { className: "space-y-4 p-20" },
-        react_1.default.createElement(index_1.AvatarFileInput, { label: "Nahrajte fotku", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square" }),
-        react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square" }),
-        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", isInvalid: true, label: "Vyberte Avatar", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value })));
+        react_1.default.createElement(index_1.AvatarFileInput, { label: "Nahrajte fotku", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square", name: "avatar-input" }),
+        react_1.default.createElement(index_1.AvatarFileInput, { isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, variant: "square", name: "avatar-input-disabled" }),
+        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", isInvalid: true, label: "Vyberte Avatar", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "avatar-input-isInvalid" })));
 }
 exports.Default = Default;

package/calendar/calendar.d.ts

@@ -2,8 +2,8 @@ import { UseDatePickerReturnType } from "@uxf/datepicker/hooks/use-date-picker";
 import { UseDateRangePickerReturnType } from "@uxf/datepicker/hooks/use-date-range-picker";
 import React from "react";
 export interface CalendarProps {
-    datePickerProps: UseDatePickerReturnType | UseDateRangePickerReturnType;
     className?: string;
+    datePickerProps: UseDatePickerReturnType | UseDateRangePickerReturnType;
     month?: number;
     onChange?: (data: Date | null) => void;
     selectedDate?: Date | null;

package/checkbox/checkbox.stories.js

@@ -35,10 +35,10 @@ function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     const checkboxes = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked }),
-        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, onChange: onChange, value: checked }),
-        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, onChange: onChange, value: checked }),
-        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, size: "lg" })));
+        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, name: "checkbox" }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isDisabled: true, onChange: onChange, value: checked, name: "checkbox-disabled" }),
+        react_1.default.createElement(checkbox_1.Checkbox, { isInvalid: true, onChange: onChange, value: checked, name: "checkbox-invalid" }),
+        react_1.default.createElement(checkbox_1.Checkbox, { onChange: onChange, value: checked, size: "lg", name: "checkbox-size-lg" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" }, checkboxes)));
 }

package/checkbox-button/checkbox-button.stories.js

@@ -36,8 +36,8 @@ function Default() {
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" },
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: onChange, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked }),
-            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked }))));
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", onChange: onChange, value: checked, name: "checkbox-button" }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked, name: "checkbox-button-disabled" }),
+            react_1.default.createElement(index_1.CheckboxButton, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked, name: "checkbox-button-invalid" }))));
 }
 exports.Default = Default;

package/checkbox-input/checkbox-input.js

@@ -33,8 +33,8 @@ exports.CheckboxInput = (0, react_2.forwardRef)((props, ref) => {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
-            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, style: props.style, value: checked }))),
+        react_2.default.createElement("div", { className: `uxf-checkbox-input__wrapper ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style },
+            react_2.default.createElement(react_1.Switch, { as: react_2.Fragment, checked: props.value, name: props.name, onChange: props.onChange }, ({ checked }) => (react_2.default.createElement(checkbox_1.Checkbox, { className: "uxf-checkbox-input", id: props.id, indeterminate: props.indeterminate, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, onChange: props.onChange, ref: ref, size: props.size, value: checked, name: props.name }))),
             react_2.default.createElement(react_1.Switch.Label, { className: `uxf-checkbox-input__label ${props.hiddenLabel ? "uxf-checkbox-input__label--hidden" : ""}` },
                 react_2.default.createElement("span", { className: "uxf-checkbox-input__label--text" }, props.label),
                 react_2.default.createElement("span", { id: errorId, className: "uxf-checkbox-input__label--subtitle" }, props.helperText)))));

package/checkbox-input/checkbox-input.stories.js

@@ -35,11 +35,11 @@ function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     const checkboxes = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", onChange: onChange, value: checked }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", onChange: onChange, value: checked, size: "lg" }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "hidden label", hiddenLabel: true, onChange: onChange, value: checked, size: "lg" })));
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", onChange: onChange, value: checked, name: "checkbox-input" }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", isDisabled: true, onChange: onChange, value: checked, name: "checkbox-input-disabled" }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu?", isInvalid: true, onChange: onChange, value: checked, name: "checkbox-input-invalid" }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Opravdu? (size lg)", onChange: onChange, value: checked, size: "lg", name: "checkbox-input-lg" }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "hidden label", hiddenLabel: true, onChange: onChange, value: checked, size: "lg", name: "checkbox-input-hidden-label-lg" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "flex flex-col gap-4 p-20" }, checkboxes)));
 }

package/color-radio/color-radio.stories.js

@@ -14,16 +14,16 @@ function Default() {
     const radios = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Default"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", value: 1 }),
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#cc0000", colorLabel: "Red", value: 2 })),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", value: 1, name: "value-1" }),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#cc0000", colorLabel: "Red", value: 2, name: "value-2" })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Invalid"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isInvalid: true, value: 1 }),
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isInvalid: true, value: 2 })),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isInvalid: true, value: 1, name: "value-1" }),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isInvalid: true, value: 2, name: "value-2" })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Disabled"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 1 }),
-            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 2 }))));
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: false, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 1, name: "value-1" }),
+            react_1.default.createElement(color_radio_1.ColorRadio, { checked: true, color: "#ff0000", colorLabel: "Red", isDisabled: true, value: 2, name: "value-2" }))));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "p-20 " }, radios)));
 }

package/color-radio-group/color-radio-group.js

@@ -42,7 +42,7 @@ exports.ColorRadioGroup = (0, react_2.forwardRef)((props, ref) => {
         react_2.default.createElement("div", { className: "uxf-form-component__input" },
             react_2.default.createElement("div", { className: "uxf-color-radio-group__options-wrapper" }, props.options.map((option) => {
                 const optionStyle = { "--option-color": option.value };
-                return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), value: option.value, style: optionStyle }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: option.value }))));
+                return (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-color-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), key: option.value.toString(), value: option.value, style: optionStyle }, (o) => (react_2.default.createElement(color_radio_1.ColorRadio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, colorLabel: option.label, color: option.value, ref: o.checked ? innerRef : undefined, value: option.value, name: props.name }))));
             })),
             props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))));
 });

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

@@ -74,6 +74,6 @@ function Default() {
     const onChange = (0, action_1.action)("onChange", setValue);
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "w-1/2 p-20" },
-            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", onChange: onChange, options: options, value: value }))));
+            react_1.default.createElement(index_1.ColorRadioGroup, { id: "radiogroup", label: "Light Color Radio group", onChange: onChange, options: options, value: value, name: "color-radio-button" }))));
 }
 exports.Default = Default;

package/combobox/combobox.js

@@ -43,7 +43,7 @@ const Combobox = (props) => {
     const onInputChange = (event) => setQuery(event.target.value);
     const displayValue = (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; };
     const selectedOption = (_d = props.value) !== null && _d !== void 0 ? _d : null;
-    return (react_2.default.createElement(_select_base_1._SelectBase, { HUIComponent: react_1.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: 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, onOptionsUnmount: clearQuery, options: filteredData, 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.Combobox, className: props.className, customInputElementDisplayName: react_1.Combobox.Input.displayName, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, emptyMessage: 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, onOptionsUnmount: clearQuery, options: filteredData, placeholder: props.placeholder, renderOption: props.renderOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: selectedOption, variant: props.variant },
         react_2.default.createElement(react_1.Combobox.Input, { autoComplete: "off", className: "uxf-input__element", displayValue: displayValue, onBlur: props.onBlur, onChange: onInputChange, placeholder: props.placeholder, type: "text" })));
 };
 exports.Combobox = Combobox;

package/date-picker/date-picker-content.d.ts

@@ -1,5 +1,6 @@
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
 export interface DatePickerContentProps {
     bottomContent?: ReactNode;
+    style?: CSSProperties;
 }
 export declare const DatePickerContent: FC<PropsWithChildren<DatePickerContentProps>>;

package/date-picker/date-picker-content.js

@@ -46,8 +46,8 @@ const DatePickerContent = (props) => {
         month: activeMonths.map((month) => (react_1.default.createElement(date_picker_month_1.DatePickerMonth, { key: `${month.year}-${month.month}`, setViewMode: setViewMode }))),
         year: react_1.default.createElement(date_picker_year_1.DatePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
         decade: react_1.default.createElement(date_picker_decade_1.DatePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
-    }), [onMonthSelect, onYearSelect, onDecadeYearSelect, setViewMode, activeMonths]);
-    return (react_1.default.createElement("div", { className: "uxf-date-picker" },
+    }), [activeMonths, onYearSelect, onMonthSelect, onDecadeYearSelect]);
+    return (react_1.default.createElement("div", { className: "uxf-date-picker", style: props.style },
         props.children,
         datePickerComponents[viewMode],
         props.bottomContent && react_1.default.createElement("div", { className: "uxf-date-picker__bottom-content" }, props.bottomContent)));

package/date-picker/date-picker.d.ts

@@ -1,6 +1,6 @@
 import { OnDateChangeType } from "@uxf/datepicker/hooks/use-date-picker";
 import { DatesConfig } from "@uxf/datepicker/utils/types";
-import { FC, ReactNode } from "react";
+import { CSSProperties, FC, ReactNode } from "react";
 export interface DatePickerProps {
     bottomContent?: ReactNode;
     closePopoverHandler?: () => void;
@@ -10,6 +10,7 @@ export interface DatePickerProps {
     onChange: (data: OnDateChangeType) => void;
     preventScroll?: boolean;
     selectedDate: Date | null;
+    style?: CSSProperties;
     /** @deprecated */
     unavailableDates?: Date[];
 }

package/date-picker/date-picker.js

@@ -24,7 +24,7 @@ const DatePicker = (props) => {
         unavailableDates: props.unavailableDates,
     });
     return (react_1.default.createElement(date_picker_context_1.DatePickerContext.Provider, { value: datePickerProps },
-        react_1.default.createElement(date_picker_content_1.DatePickerContent, { bottomContent: props.bottomContent })));
+        react_1.default.createElement(date_picker_content_1.DatePickerContent, { bottomContent: props.bottomContent, style: props.style })));
 };
 exports.DatePicker = DatePicker;
 exports.DatePicker.displayName = "UxfUiDatePicker";

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

@@ -1,5 +1,5 @@
 import { DatesConfig } from "@uxf/datepicker/utils/types";
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
 export declare const ALLOWED_DATE_FORMAT: string[];
 export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
@@ -12,6 +12,7 @@ export interface DatePickerInputProps extends Omit<InputWithPopoverProps<string
     maxDate?: string;
     minDate?: string;
     placeholder?: string;
+    style?: CSSProperties;
     triggerElement?: ReactNode;
     /** @deprecated */
     unavailableDates?: Date[];

package/date-picker-input/date-picker-input.js

@@ -82,6 +82,6 @@ exports.DatePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDate = getSelectedDate(props.value);
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_c = props.placeholder) !== null && _c !== void 0 ? _c : (0, dayjs_1.default)().format(displayDateFormat), ref: ref, value: value, triggerElement: (_d = props.triggerElement) !== null && _d !== void 0 ? _d : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(date_picker_1.DatePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, maxDate: parsedMaxDate, minDate: parsedMinDate, onChange: onDatePickerChange, preventScroll: true, selectedDate: selectedDate, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DatePickerInput.displayName = "UxfUiDatePickerInput";

package/date-range-picker/date-range-picker-content.d.ts

@@ -1,5 +1,6 @@
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
 export interface DateRangePickerContentProps {
     bottomContent?: ReactNode;
+    style?: CSSProperties;
 }
 export declare const DateRangePickerContent: FC<PropsWithChildren<DateRangePickerContentProps>>;

package/date-range-picker/date-range-picker-content.js

@@ -46,8 +46,8 @@ const DateRangePickerContent = (props) => {
         month: (react_1.default.createElement("div", { className: "uxf-date-range-picker__months" }, activeMonths.map((activeMonth) => (react_1.default.createElement(date_range_picker_month_1.DateRangePickerMonth, { key: `${activeMonth.year}-${activeMonth.month}`, month: activeMonth.month, setViewMode: setViewMode, year: activeMonth.year }))))),
         year: react_1.default.createElement(date_range_picker_year_1.DateRangePickerYear, { onMonthSelect: (date) => onMonthSelect(date), onYearSelect: onYearSelect }),
         decade: react_1.default.createElement(date_range_picker_decade_1.DateRangePickerDecade, { onYearSelect: (date) => onDecadeYearSelect(date) }),
-    }), [onMonthSelect, onYearSelect, onDecadeYearSelect, setViewMode, activeMonths]);
-    return (react_1.default.createElement("div", { className: `uxf-date-range-picker ${activeMonths.length > 1 ? "uxf-date-range-picker--multi-month" : ""}` },
+    }), [activeMonths, onYearSelect, onMonthSelect, onDecadeYearSelect]);
+    return (react_1.default.createElement("div", { className: `uxf-date-range-picker ${activeMonths.length > 1 ? "uxf-date-range-picker--multi-month" : ""}`, style: props.style },
         props.children,
         datePickerComponents[viewMode],
         props.bottomContent && react_1.default.createElement("div", { className: "uxf-date-range-picker__bottom-content" }, props.bottomContent)));

package/date-range-picker/date-range-picker.d.ts

@@ -1,5 +1,5 @@
 import { DatesConfig } from "@uxf/datepicker/utils/types";
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
 import { DateRangePickerValueType } from "./types";
 export interface DateRangePickerProps {
     bottomContent?: ReactNode;
@@ -8,6 +8,7 @@ export interface DateRangePickerProps {
     numberOfMonths?: number;
     onChange: (data: DateRangePickerValueType) => void;
     selectedDates: DateRangePickerValueType;
+    style?: CSSProperties;
     /** @deprecated */
     unavailableDates?: Date[];
 }

package/date-range-picker/date-range-picker.js

@@ -46,7 +46,7 @@ const DateRangePicker = (props) => {
         unavailableDates: props.unavailableDates,
     });
     return (react_1.default.createElement(date_range_picker_context_1.DateRangePickerContext.Provider, { value: dateRangePickerProps },
-        react_1.default.createElement(date_range_picker_content_1.DateRangePickerContent, { bottomContent: props.bottomContent })));
+        react_1.default.createElement(date_range_picker_content_1.DateRangePickerContent, { bottomContent: props.bottomContent, style: props.style })));
 };
 exports.DateRangePicker = DateRangePicker;
 exports.DateRangePicker.displayName = "UxfUiDatePicker";

package/date-range-picker-input/date-range-picker-input.d.ts

@@ -1,5 +1,5 @@
 import { DatesConfig } from "@uxf/datepicker/utils/types";
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
 export declare const ALLOWED_DATE_FORMAT: string[];
 export declare const DISPLAY_DATE_FORMAT = "D. M. YYYY";
@@ -13,6 +13,7 @@ export interface DateRangePickerInputProps extends Omit<InputWithPopoverProps<st
     datesConfig?: DatesConfig[];
     numberOfMonths?: number;
     placeholder?: string;
+    style?: CSSProperties;
     triggerElement?: ReactNode;
     /** @deprecated */
     unavailableDates?: Date[];

package/date-range-picker-input/date-range-picker-input.js

@@ -57,6 +57,6 @@ exports.DateRangePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const selectedDates = props.value
         ? { from: parsedFrom.isValid() ? parsedFrom.toDate() : null, to: parsedTo.isValid() ? parsedTo.toDate() : null }
         : null;
-    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder || "Vyberte datum...", ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, selectedDates: selectedDates, unavailableDates: props.unavailableDates }))));
+    return (react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...restProps, placeholder: props.placeholder || "Vyberte datum...", ref: ref, triggerElement: (_a = props.triggerElement) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }), value: (_b = props.value) !== null && _b !== void 0 ? _b : "" }, ({ close }) => (react_1.default.createElement(date_range_picker_1.DateRangePicker, { bottomContent: props.bottomContent, closePopoverHandler: close, datesConfig: props.datesConfig, numberOfMonths: numberOfMonths, onChange: onDatePickerChange, selectedDates: selectedDates, style: props.style, unavailableDates: props.unavailableDates }))));
 });
 exports.DateRangePickerInput.displayName = "UxfUiDatePickerInput";

package/dropzone/dropzone-input.d.ts

@@ -1,5 +1,5 @@
 import { FileResponse, FormControlProps, UploadOptions } from "@uxf/ui/types";
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { IconName } from "../icon/types";
 import { Accept, DropzoneFile } from "./types";
 export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | undefined> {
@@ -16,5 +16,6 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
     noDrag?: boolean;
     onUploadError?: (err: unknown) => void;
     onUploadFile: (file: File, options?: UploadOptions) => Promise<FileResponse>;
+    style?: CSSProperties;
 }
 export declare const DropzoneInput: React.ForwardRefExoticComponent<DropzoneInputProps & React.RefAttributes<HTMLDivElement>>;

package/dropzone/dropzone-input.js

@@ -125,7 +125,7 @@ exports.DropzoneInput = (0, react_1.forwardRef)((props, ref) => {
     const labelOnCLick = (e) => {
         e.stopPropagation();
     };
-    return (react_1.default.createElement("div", { className: `uxf-dropzone ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+    return (react_1.default.createElement("div", { className: `uxf-dropzone ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, style: props.style },
         react_1.default.createElement("label", { ...getRootProps({
                 className: (0, cx_1.cx)("uxf-dropzone__label", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.noClick && "cursor-auto"),
                 onClick: labelOnCLick,

package/dropzone/dropzone-list.d.ts

@@ -1,10 +1,12 @@
 import { FormControlProps } from "@uxf/ui/types";
-import { FC, ReactNode } from "react";
+import { CSSProperties, FC, ReactNode } from "react";
 import { DropzoneFile } from "./types";
 export interface DropzoneListProps extends FormControlProps<DropzoneFile[] | undefined> {
     className?: string;
     errorText?: string;
+    isDownloadableOnClick?: boolean;
     onRemoveConfirm?: (file: DropzoneFile) => Promise<boolean>;
     renderItem?: (file: DropzoneFile) => ReactNode;
+    style?: CSSProperties;
 }
 export declare const DropzoneList: FC<DropzoneListProps>;

package/dropzone/dropzone-list.js

@@ -65,14 +65,14 @@ const DropzoneList = (props) => {
     if (((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
         return null;
     }
-    return (react_1.default.createElement("ul", { className: `uxf-dropzone-list ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` }, (_c = props.value) === null || _c === void 0 ? void 0 : _c.map((file) => {
+    return (react_1.default.createElement("ul", { className: `uxf-dropzone-list ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}`, style: props.style }, (_c = props.value) === null || _c === void 0 ? void 0 : _c.map((file) => {
         var _a, _b, _c;
         const isUploading = file.id < 0 && !file.error;
         return ((_b = (_a = props.renderItem) === null || _a === void 0 ? void 0 : _a.call(props, file)) !== null && _b !== void 0 ? _b : (react_1.default.createElement("li", { className: "uxf-dropzone-list__item-wrapper", key: file.id },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-dropzone-list__item", !!file.error && classes_1.CLASSES.IS_INVALID) },
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     react_1.default.createElement(icon_1.Icon, { className: "uxf-dropzone-list__item__block__icon", name: (0, get_file_icon_1.getIconNameFromFileExtension)(file.extension.toLowerCase()) }),
-                    (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, file), target: "_blank", rel: "noreferrer noopenner" }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
+                    (context === null || context === void 0 ? void 0 : context.domain) && file.id > 0 ? (react_1.default.createElement("a", { className: "uxf-dropzone-list__item__block__file-name-link", download: props.isDownloadableOnClick ? file.name : undefined, href: (0, get_file_url_1.getFileUrl)(context.domain, file), rel: !props.isDownloadableOnClick ? "noreferrer noopenner" : undefined, target: !props.isDownloadableOnClick ? "_blank" : undefined }, file.name)) : (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-name" }, file.name))),
                 react_1.default.createElement("div", { className: "uxf-dropzone-list__item__block" },
                     isUploading ? (react_1.default.createElement(loader_1.Loader, { size: "sm" })) : (!file.error &&
                         ((_c = file.originalFile) === null || _c === void 0 ? void 0 : _c.size) && (react_1.default.createElement("span", { className: "uxf-dropzone-list__item__block__file-size" }, formatBytes(file.originalFile.size)))),

package/dropzone/dropzone.stories.js

@@ -57,14 +57,14 @@ function Default() {
         });
     };
     const storyDropzone = (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files }),
-        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
+        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled drag 'n' drop", label: "Use drag and drop or click to upload", noDrag: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-drag-and-drop" }),
+        react_1.default.createElement(index_1.Dropzone, { helperText: "Disabled onClick upload", label: react_1.default.createElement("span", { className: "bg-primary-600 rounded-lg px-4 py-2 font-bold text-white" }, "JSX label"), noClick: true, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled-click" }),
+        react_1.default.createElement(index_1.Dropzone, { accept: { "image/*": [] }, label: "Only images upload", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-only-images" }),
+        react_1.default.createElement(index_1.Dropzone, { label: "Single file upload", maxFilesCount: 1, onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-single-file" }),
+        react_1.default.createElement(index_1.Dropzone, { isDisabled: true, label: "Disabled dropzone", onChange: onChange, onUploadFile: upload_file_mock_1.uploadFile, value: files, name: "dropzone-disabled" }),
+        react_1.default.createElement(index_1.Dropzone.List, { errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files, name: "dropzone-error-message" }),
         react_1.default.createElement(index_1.Dropzone.List, { onChange: onChange, onRemoveConfirm: onRemoveConfirm, renderItem: (file) => (react_1.default.createElement("li", { key: file.id },
-                react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))), value: files })));
+                react_1.default.createElement("pre", null, JSON.stringify(file, null, 4)))), value: files, name: "dropzone-list" })));
     return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
         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" }, storyDropzone))));

package/file-input/file-input.js

@@ -60,7 +60,7 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
         }
         props.onChange(value, event);
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(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), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel, name: props.name },
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, composeRefs_1.composeRefs)(ref, innerRef), value: props.value }),
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },

package/file-input/file-input.stories.js

@@ -40,9 +40,9 @@ function Default() {
         console.log("Upload error", err);
     };
     const storyFileInputs = (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.FileInput, { label: "Default file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value }),
-        react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isInvalid: true, label: "Error file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, isClearable: true }),
-        react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", label: "Readonly/disabled file input", isReadOnly: true, isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value })));
+        react_1.default.createElement(index_1.FileInput, { label: "Default file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input" }),
+        react_1.default.createElement(index_1.FileInput, { helperText: "Error file input", id: "error-file-input", isInvalid: true, label: "Error file input", onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, isClearable: true, name: "file-input-error-message" }),
+        react_1.default.createElement(index_1.FileInput, { helperText: "Readonly/disabled file input", label: "Readonly/disabled file input", isReadOnly: true, isDisabled: true, onChange: onChange, onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, value: value, name: "file-input-read-only" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "space-y-2 p-20" }, storyFileInputs)));
 }

package/form-component/form-component.d.ts

@@ -9,5 +9,6 @@ export interface FormComponentProps {
     inputId: string;
     isRequired?: boolean;
     label?: ReactNode;
+    name: string;
 }
 export declare const FormComponent: React.ForwardRefExoticComponent<FormComponentProps & React.RefAttributes<HTMLDivElement>>;

package/form-component/form-component.js

@@ -31,7 +31,7 @@ const label_1 = require("../label");
 exports.FormComponent = (0, react_1.forwardRef)((props, ref) => {
     var _a;
     const helperTextClassName = (0, cx_1.cx)("uxf-helper-text", props.errorId && classes_1.CLASSES.IS_INVALID);
-    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref },
+    return (react_1.default.createElement("div", { className: `uxf-form-component ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, "data-name": props.name },
         react_1.default.createElement("div", { className: "uxf-form-component__label" },
             react_1.default.createElement(label_1.Label, { isHidden: props.hiddenLabel, isRequired: props.isRequired, htmlFor: props.inputId, form: props.form }, props.label)),
         react_1.default.createElement("div", { className: "uxf-form-component__input" },

package/form-component/form-component.stories.js

@@ -13,13 +13,13 @@ exports.default = {
 };
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default" },
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", name: "form-component" },
             react_1.default.createElement("div", null, "Default")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true },
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "default", helperText: "helper text", label: "Default", isRequired: true, name: "form-component-required" },
             react_1.default.createElement("div", null, "Is required")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true },
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", isRequired: true, name: "form-component-invalid" },
             react_1.default.createElement("div", null, "Is invalid")),
-        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true },
+        react_1.default.createElement(form_component_1.FormComponent, { inputId: "error", helperText: "helper text", label: "Default", errorId: "error--error", hiddenLabel: true, name: "form-component-hidden-label" },
             react_1.default.createElement("div", null, "hidden label"))));
 }
 exports.Default = Default;

package/input/input-element.d.ts

@@ -1,5 +1,5 @@
 import { FormControlProps } from "@uxf/ui/types/form-control-props";
-import React, { KeyboardEventHandler } from "react";
+import React, { CSSProperties, KeyboardEventHandler } from "react";
 type InputMode = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
 export interface InputElementProps extends FormControlProps<string> {
     "aria-describedby"?: string;
@@ -18,6 +18,7 @@ export interface InputElementProps extends FormControlProps<string> {
     min?: number | string;
     pattern?: string;
     step?: number | string;
+    style?: CSSProperties;
 }
 export declare const InputElement: React.ForwardRefExoticComponent<InputElementProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/input/input-element.js

@@ -28,6 +28,6 @@ const react_1 = __importStar(require("react"));
 exports.InputElement = (0, react_1.forwardRef)((props, ref) => {
     const onChange = (event) => props.onChange(event.target.value, event);
     const filteredProps = Object.fromEntries(Object.entries(props).filter((p) => p[0].startsWith("aria-") || p[0].startsWith("data-")));
-    return (react_1.default.createElement("input", { ...filteredProps, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
+    return (react_1.default.createElement("input", { ...filteredProps, "aria-describedby": props["aria-describedby"], "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: "uxf-input__element", disabled: props.isDisabled, form: props.form, id: props.id, inputMode: props.inputMode, max: props.max, maxLength: props.maxLength, min: props.min, minLength: props.minLength, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, pattern: props.pattern, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: ref, step: props.step, style: props.style, tabIndex: props.isReadOnly ? -1 : undefined, type: props.type, value: props.value }));
 });
 exports.InputElement.displayName = "UxfUiInputElement";

package/input/input.d.ts

@@ -1,6 +1,6 @@
 import { useInputFocus } from "@uxf/core/hooks/useInputFocus";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
-import React, { ReactNode, Ref } from "react";
+import React, { CSSProperties, ReactNode, Ref } from "react";
 export interface InputProps {
     children: ReactNode;
     customInputElementDisplayName?: string;
@@ -8,6 +8,7 @@ export interface InputProps {
     inputFocus?: ReturnType<typeof useInputFocus>;
     variant?: keyof InputGroupVariants;
     size?: keyof InputGroupSizes;
+    style?: CSSProperties;
     isDisabled?: boolean;
     isFocused?: boolean;
     isInvalid?: boolean;

package/input/input.js

@@ -48,7 +48,7 @@ exports.Input = (0, react_1.forwardRef)((props, ref) => {
     const rightElement = getChildrenById(children, "UxfUiInputRightElement");
     const input = (0, useInputFocus_1.useInputFocus)(inputRef, (_a = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onBlur) !== null && _a !== void 0 ? _a : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onBlur, (_b = inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.onFocus) !== null && _b !== void 0 ? _b : mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.onFocus);
     const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", isApplicable(isFocused, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isFocused, inputFocus === null || inputFocus === void 0 ? void 0 : inputFocus.focused, input.focused) && classes_1.CLASSES.IS_FOCUSED, isApplicable(isInvalid, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, isApplicable(isDisabled, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, isApplicable(isReadOnly, mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY, `uxf-input--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-input--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, className);
-    return (react_1.default.createElement("div", { className: inputGroupClasses, ref: wrapperRef, tabIndex: tabIndex },
+    return (react_1.default.createElement("div", { className: inputGroupClasses, ref: wrapperRef, style: props.style, tabIndex: tabIndex },
         leftAddon,
         react_1.default.createElement("div", { className: "uxf-input__wrapper", onClick: input.focus, ...restProps },
             leftElement,

package/input/input.stories.js

@@ -44,26 +44,26 @@ function Default() {
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "InputLeftAddon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "InputLeftElement"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-1" }),
             react_1.default.createElement(input_1.Input.RightElement, null, "InputRightElement"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "InputRightAddon")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "https://"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-2" }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".uxf.cz")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-3" }),
             react_1.default.createElement(input_1.Input.RightAddon, null, ".test.cz")),
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-4" }),
             react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14")),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid })),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Placeholder", isInvalid: isInvalid, name: "input-element-5" })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true })),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true, name: "input-element-6" })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true }))));
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true, name: "input-element-7" }))));
     const onInvalidChange = (e) => setInvalid(e.target.checked);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: onInvalidChange }),
@@ -77,7 +77,7 @@ function Sizes() {
     return (react_1.default.createElement("div", { className: "space-y-4" }, config.sizes.map((size) => (react_1.default.createElement(input_1.Input, { key: size, size: size },
         react_1.default.createElement(input_1.Input.LeftAddon, null, "LeftAddon"),
         react_1.default.createElement(input_1.Input.LeftElement, null, "\uD83C\uDF37"),
-        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: size }),
+        react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, placeholder: size, name: `input-element-size-${size}` }),
         react_1.default.createElement(input_1.Input.RightElement, null, "\uD83D\uDD14"),
         react_1.default.createElement(input_1.Input.RightAddon, null, "RightAddon"))))));
 }
@@ -88,7 +88,7 @@ function ComponentStructure() {
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.LeftAddon, null, "Left addon"),
             react_1.default.createElement(input_1.Input.LeftElement, null, "Left element"),
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange }),
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: onChange, name: "input-element-component-structure" }),
             react_1.default.createElement(input_1.Input.RightElement, null, "Right element"),
             react_1.default.createElement(input_1.Input.RightAddon, null, "Right addon"))));
 }

package/multi-combobox/_multi-combobox-base.js

@@ -53,7 +53,7 @@ function handleInputKeyDownRecursion(selectedOptions, onRemove) {
     }
 }
 const OptionElement = (props) => {
-    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && props.withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: props.option.disabled, value: props.option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, onChange: props.handleCheckboxChange, value: optionState.selected })) : (props.label)))));
+    return (react_3.default.createElement(react_2.Combobox.Option, { className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && props.withoutPopover && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED), disabled: props.option.disabled, value: props.option }, (optionState) => (react_3.default.createElement(react_3.default.Fragment, null, props.withCheckboxes ? (react_3.default.createElement(checkbox_input_1.CheckboxInput, { isDisabled: optionState.disabled, isFocused: optionState.active, label: props.label, onChange: props.handleCheckboxChange, value: optionState.selected, name: props.option.id.toString() })) : (props.label)))));
 };
 OptionElement.displayName = "UxfUiMultiComboboxOption";
 exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
@@ -114,7 +114,7 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
         var _a;
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", 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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
+    return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", 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), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, style: props.style, value: selectedOptions }, (renderProps) => {
         var _a, _b;
         const inputElement = (react_3.default.createElement(react_3.default.Fragment, null,
             react_3.default.createElement(react_2.Combobox.Button, { "aria-invalid": props.isInvalid, "aria-describedby": props.errorId, as: "div", className: (0, cx_1.cx)("uxf-multi-combobox__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" && `${classes_1.CLASSES.IS_OPEN}--bottom`, dropdown.placement === "top" && `${classes_1.CLASSES.IS_OPEN}--top`, renderProps.open && classes_1.CLASSES.IS_OPEN), onBlur: input.onBlur, onFocus: input.onFocus, ref: stableRef },

package/multi-combobox/multi-combobox.js

@@ -53,8 +53,8 @@ exports.MultiCombobox = (0, react_2.forwardRef)((props, ref) => {
     if (!props.withPopover) {
         return react_2.default.createElement(_multi_combobox_base_1._MultiComboboxBase, { ...props, errorId: errorId, ref: ref });
     }
-    return (react_2.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: fakeInputId, isRequired: props.isRequired, label: props.label },
-        react_2.default.createElement(react_1.Popover, { className: (0, cx_1.cx)("uxf-multi-combobox", 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) }, (popoverRenderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: fakeInputId, isRequired: props.isRequired, label: props.label, name: props.name },
+        react_2.default.createElement(react_1.Popover, { className: (0, cx_1.cx)("uxf-multi-combobox", 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), style: props.style }, (popoverRenderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Popover.Button, { className: (0, cx_1.cx)("uxf-multi-combobox__button uxf-multi-combobox__button--with-popover", popoverRenderProps.open && classes_1.CLASSES.IS_OPEN, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID), id: fakeInputId, onKeyDown: handlePopoverButtonKeyPress, ref: fakeInputRef },
                 react_2.default.createElement("span", { className: (0, cx_1.cx)("uxf-multi-combobox__input uxf-multi-combobox__input--with-popover", selectedOptions.length === 0 &&
                         "uxf-multi-combobox__input-placeholder--with-popover") }, selectedOptions.length > 0

package/multi-combobox/types.d.ts

@@ -1,6 +1,6 @@
 import { Placement, Strategy } from "@floating-ui/react";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
@@ -36,6 +36,7 @@ export interface MultiComboboxProps<ValueId = MultiComboboxValueId, Option = Mul
     rightAddon?: ReactNode;
     rightElement?: ReactNode;
     size?: keyof InputGroupSizes;
+    style?: CSSProperties;
     variant?: keyof InputGroupVariants;
     withCheckboxes?: boolean;
     withPopover?: boolean;

package/multi-select/multi-select.js

@@ -41,8 +41,8 @@ exports.MultiSelect = (0, react_2.forwardRef)((props, ref) => {
     if (!props.withPopover) {
         return react_2.default.createElement(_multi_select_base_1._MultiSelectBase, { ...props, errorId: errorId, id: id, ref: ref });
     }
-    return (react_2.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
-        react_2.default.createElement(react_1.Popover, { className: (0, cx_1.cx)("uxf-multi-combobox", 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) }, (popoverRenderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+    return (react_2.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
+        react_2.default.createElement(react_1.Popover, { className: (0, cx_1.cx)("uxf-multi-combobox", 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), style: props.style }, (popoverRenderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
             react_2.default.createElement(react_1.Popover.Button, { className: (0, cx_1.cx)("uxf-multi-combobox__button uxf-multi-combobox__button--with-popover", popoverRenderProps.open && classes_1.CLASSES.IS_OPEN, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID) },
                 react_2.default.createElement("span", { className: (0, cx_1.cx)("uxf-multi-combobox__input uxf-multi-combobox__input--with-popover", selectedOptions.length === 0 &&
                         "uxf-multi-combobox__input-placeholder--with-popover") }, selectedOptions.length > 0

package/multi-select/multi-select.stories.js

@@ -63,6 +63,6 @@ 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.MultiSelect, { options: options, onChange: onChange, value: value })));
+        react_1.default.createElement(index_1.MultiSelect, { options: options, onChange: onChange, value: value, name: "multi-select-component-structure" })));
 }
 exports.ComponentStructure = ComponentStructure;

package/multi-select/types.d.ts

@@ -1,6 +1,6 @@
 import { Placement, Strategy } from "@floating-ui/react";
 import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { ChipColor } from "../chip";
 import { IconsSet } from "../icon/theme";
 import { FormControlProps } from "../types";
@@ -26,6 +26,7 @@ export interface MultiSelectProps<ValueId = MultiSelectValueId, Option = MultiSe
     placeholder?: string;
     renderOption?: (option: Option) => ReactNode;
     size?: keyof InputGroupSizes;
+    style?: CSSProperties;
     variant?: keyof InputGroupVariants;
     withPopover?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.11.0",
+  "version": "11.11.3",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,9 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.10.0",
-    "@uxf/datepicker": "11.10.0",
-    "@uxf/styles": "11.10.0",
+    "@uxf/core": "11.11.3",
+    "@uxf/datepicker": "11.11.3",
+    "@uxf/styles": "11.11.3",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/jump.js": "1.0.6",
-    "@types/react": "18.2.57",
+    "@types/react": "18.2.63",
     "@types/react-dom": "18.2.19"
   }
 }

package/radio/radio.stories.js

@@ -14,20 +14,20 @@ function Default() {
     const radios = (react_1.default.createElement("div", { className: "dark:text-white" },
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Default"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { checked: false, value: 1 }),
-            react_1.default.createElement(index_1.Radio, { checked: true, value: 2 })),
+            react_1.default.createElement(index_1.Radio, { checked: false, value: 1, name: "radio-1" }),
+            react_1.default.createElement(index_1.Radio, { checked: true, value: 2, name: "radio-2" })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Invalid"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { checked: false, isInvalid: true, value: 1 }),
-            react_1.default.createElement(index_1.Radio, { checked: true, isInvalid: true, value: 2 })),
+            react_1.default.createElement(index_1.Radio, { checked: false, isInvalid: true, value: 1, name: "radio-invalid-1" }),
+            react_1.default.createElement(index_1.Radio, { checked: true, isInvalid: true, value: 2, name: "radio-invalid-2" })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "Disabled"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { checked: false, isDisabled: true, value: 1 }),
-            react_1.default.createElement(index_1.Radio, { checked: true, isDisabled: true, value: 2 })),
+            react_1.default.createElement(index_1.Radio, { checked: false, isDisabled: true, value: 1, name: "radio-disabled-1" }),
+            react_1.default.createElement(index_1.Radio, { checked: true, isDisabled: true, value: 2, name: "radio-disabled-2" })),
         react_1.default.createElement("div", { className: "mb-2 mt-4 font-semibold" }, "size lg"),
         react_1.default.createElement("div", { className: "flex flex-row gap-4" },
-            react_1.default.createElement(index_1.Radio, { checked: false, size: "lg", value: 1 }),
-            react_1.default.createElement(index_1.Radio, { checked: true, size: "lg", value: 2 }))));
+            react_1.default.createElement(index_1.Radio, { checked: false, size: "lg", value: 1, name: "radio-size-lg-1" }),
+            react_1.default.createElement(index_1.Radio, { checked: true, size: "lg", value: 2, name: "radio-size-lg-2" }))));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "p-20" }, radios)));
 }

package/radio-group/radio-group.js

@@ -45,7 +45,7 @@ exports.RadioGroup = (0, react_2.forwardRef)((props, ref) => {
         react_2.default.createElement("div", { className: "uxf-form-component__input" },
             react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.id.toString(), value: option.id }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option-wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
                 react_2.default.createElement("span", { className: "uxf-radio-group__option-label" }, option.label),
-                react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.id }))))))),
+                react_2.default.createElement(radio_1.Radio, { checked: o.checked, isDisabled: props.isDisabled || o.disabled, isInvalid: props.isInvalid, ref: o.checked ? innerRef : undefined, size: radioSize, value: option.id, name: props.name }))))))),
             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)))));
 });
 exports.RadioGroup.displayName = "UxfUiRadioGroup";

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

@@ -49,11 +49,11 @@ function Default() {
     const [value, setValue] = (0, react_1.useState)(options[0].id);
     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: 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" })));
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: onChange, options: options, value: value, name: "radio-group-light" }),
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant radio button", onChange: onChange, options: options, value: value, variant: "radioButton", name: "radio-group" }),
+        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", name: "radio-group-hidden-label" }),
+        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", name: "radio-group-variant-column" }),
+        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", name: "radio-group-variant-row" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "rounded p-8" }, testRadioGroups)));
 }

package/select/select.js

@@ -12,7 +12,7 @@ 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, dropdownClassName: props.dropdownClassName, 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 },
+    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, dropdownClassName: props.dropdownClassName, 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, style: props.style, 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.js

@@ -51,22 +51,22 @@ function Default() {
         setValue(v);
     });
     return (react_1.default.createElement("div", { className: "flex flex-col gap-2" },
-        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" }),
+        react_1.default.createElement(index_1.Select, { 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,
                 "Option: ",
                 option.label,
                 isSelected && " (selected)")), renderSelectedOption: (option) => react_1.default.createElement(react_1.default.Fragment, null,
                 "Selected: ",
-                option.label) })));
+                option.label), name: "select-render-option" })));
 }
 exports.Default = Default;
 function ComponentStructure() {

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

@@ -1,6 +1,6 @@
 import { InputProps } from "@uxf/ui/input/input";
 import { FormControlProps } from "@uxf/ui/types";
-import React, { KeyboardEventHandler, ReactNode } from "react";
+import React, { CSSProperties, 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"> {
@@ -27,6 +27,7 @@ export interface TextInputProps extends FormControlProps<string>, Pick<InputProp
     min?: number | string;
     pattern?: string;
     step?: number | string;
+    style?: CSSProperties;
 }
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/text-input/text-input.js

@@ -39,8 +39,8 @@ exports.TextInput = (0, react_1.forwardRef)((props, ref) => {
     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", ((_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 },
+    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(input_1.Input, { inputFocus: input, size: props.size, style: props.style, 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, 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 }),

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

@@ -60,6 +60,6 @@ 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" })));
+        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" })));
 }
 exports.ComponentStructure = ComponentStructure;

package/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
 export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElement> {
     autoComplete?: string;
@@ -11,8 +11,8 @@ export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElem
     label?: ReactNode;
     maxLength?: number | undefined;
     minLength?: number | undefined;
-    name?: string;
     placeholder?: string;
     rows?: number;
+    style?: CSSProperties;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/textarea/textarea.js

@@ -66,8 +66,8 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
         };
     }, [props.disableAutoHeight, latestRows]);
     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 },
+    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, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";

package/textarea/textarea.stories.js

@@ -35,10 +35,10 @@ 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 }),
-        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: onChange, value: value }),
-        react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: onChange, value: value }),
-        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 })));
+        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)));
 }

package/toggle/toggle.stories.js

@@ -35,10 +35,10 @@ function Default() {
     const [checked, setChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, isDisabled: true }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, hiddenLabel: true }),
-        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: onChange, value: checked, variant: "reversed" })));
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, name: "toggle" }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, isDisabled: true, name: "toggle-disabled" }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, hiddenLabel: true, name: "toggle-hidden-label" }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: onChange, value: checked, variant: "reversed", name: "toggle-reversed" })));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
 }

package/types/form-control-props.d.ts

@@ -4,7 +4,7 @@ export interface FormControlProps<ValueType, ElementType = HTMLInputElement, Res
     onChange: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
     onBlur?: FocusEventHandler<ElementType>;
     onFocus?: FocusEventHandler<ElementType>;
-    name?: string;
+    name: string;
     /**
      * @about
      * The input element will be disabled.