@trackunit/react-form-components 1.25.0 → 1.25.2

package/index.cjs.js

@@ -433,7 +433,7 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, ref, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, style, ref, }) => {
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -472,7 +472,7 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium",
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, style: style, children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
 };
 
 const GenericActionsRenderer = ({ genericAction = undefined, disabled, fieldSize = undefined, innerRef, tooltipLabel, }) => {
@@ -2262,8 +2262,8 @@ const CreatableSelect = (props) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled = false, isInvalid = false, ref, }) => {
-    return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, children: children }));
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled = false, isInvalid = false, style, ref, }) => {
+    return (jsxRuntime.jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, style: style, children: children }));
 };
 
 const cvaFormGroup = cssClassVarianceUtilities.cvaMerge(["component-formGroup-gap", "group", "form-group"]);
@@ -2314,13 +2314,13 @@ const cvaHelpAddon = cssClassVarianceUtilities.cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, ref, }) => {
+const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, style, ref, }) => {
     const [t] = useTranslation();
     const validationStateIcon = react.useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label !== undefined && label !== null ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsxRuntime.jsx("span", { className: "ml-1", children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, ((helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null)) ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [label !== undefined && label !== null ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsxRuntime.jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsxRuntime.jsx("span", { className: "ml-1", children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, (helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null) ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -2893,7 +2893,7 @@ const IGNORED_RS_ACTIONS = new Set(["set-value", "input-blur", "menu-close"]);
  * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = undefined, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = undefined, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, onInputChange, ...selectProps } = props;
     const [inputValue, setInputValue] = react.useState("");
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = react.useRef(null);
@@ -2950,7 +2950,7 @@ const FormFieldSelectAdapterMulti = (props) => {
     return (jsxRuntime.jsxs(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
             ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
                 ("readOnly" in selectProps && Boolean(selectProps.readOnly)))
-            : false, tip: tip, children: [jsxRuntime.jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
+            : false, style: style, tip: tip, children: [jsxRuntime.jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
                 selectedOptions.map((opt, idx) => {
                     const primitiveValue = getOptionValue(opt);
                     return typeof primitiveValue === "string" ? (jsxRuntime.jsx("input", { name: name, type: "hidden", value: primitiveValue }, `${primitiveValue}-${idx}`)) : null;
@@ -3632,8 +3632,8 @@ const RadioGroupContext = react.createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, ref, }) => {
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, style, ref, }) => {
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", style: style, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -3731,7 +3731,7 @@ const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, ref, }) => {
+const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, style, ref, }) => {
     const [timeRange, setTimeRange] = react.useState(range ?? {
         timeFrom: DEFAULT_TIME,
         timeTo: DEFAULT_TIME,
@@ -3743,7 +3743,7 @@ const TimeRange = ({ id, className, "data-testid": dataTestId, children, range,
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, ref: ref, children: [jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, ref: ref, style: style, children: [jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsxRuntime.jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsxRuntime.jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
 };
 const DEFAULT_TIME = "12:00";
 
@@ -3785,7 +3785,7 @@ const cvaScheduleItemText = cssClassVarianceUtilities.cvaMerge(["flex", "font-bo
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], ref, }) => {
+const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], style, ref, }) => {
     const [t] = useTranslation();
     const onRangeChange = (range, index) => {
         const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
@@ -3817,7 +3817,7 @@ const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, in
             : day);
         onChange(newSchedule);
     };
-    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
+    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
             return (jsxRuntime.jsxs("div", { className: cvaScheduleItem(), children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsxRuntime.jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxRuntime.jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px_200px_60px_250px_250px] sm:gap-2", children: [jsxRuntime.jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsxRuntime.jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsxRuntime.jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
@@ -4014,7 +4014,7 @@ const Search = ({ className, placeholder, value, widenInputOnFocus = false, hide
     const { t } = useTranslation();
     const generatedId = react.useId();
     const inputId = id ?? `search-${generatedId}`;
-    return (jsxRuntime.jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, id: inputId, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "!p-0", size: fieldSize })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: fieldSize })), ref: ref, suffix: 
+    return (jsxRuntime.jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, id: inputId, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "!p-0", size: fieldSize })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: fieldSize })), ref: ref, style: style, suffix: 
         //only show the clear button if there is a value and the onClear function is provided
         onClear && value ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
@@ -4025,7 +4025,7 @@ Search.displayName = "Search";
 /**
  *
  */
-const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required = false, ...rest }) => {
+const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required = false, ...rest }) => {
     const isFirstRender = reactComponents.useIsFirstRender();
     const [innerValue, setInnerValue] = react.useState(value ?? defaultValue);
     const onChangeRef = react.useRef(onChange);
@@ -4079,7 +4079,8 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
         helpAddon,
         tip,
         label,
-        required: required ? !Boolean(rest.disabled ?? rest.readOnly) : false, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
+        required: required ? !Boolean(rest.disabled ?? rest.readOnly) : false,
+        style, children: [jsxRuntime.jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value));
                 }) }), children({
                 ...rest,
@@ -4379,10 +4380,10 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid = undefined, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid = undefined, errorMessage, label, tip, children, helpText, id, style, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, style: style, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
 const cvaToggleSwitchWrapper = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);

package/index.esm.js

@@ -432,7 +432,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, ref, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium", disabled, className, onClick, style, ref, }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -471,7 +471,7 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size = "medium",
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
+    return (jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, style: style, children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
 };
 
 const GenericActionsRenderer = ({ genericAction = undefined, disabled, fieldSize = undefined, innerRef, tooltipLabel, }) => {
@@ -2261,8 +2261,8 @@ const CreatableSelect = (props) => {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled = false, isInvalid = false, ref, }) => {
-    return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, children: children }));
+const Label = ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled = false, isInvalid = false, style, ref, }) => {
+    return (jsx("label", { className: cvaLabel({ invalid: isInvalid, disabled, className }), "data-testid": dataTestId, htmlFor: htmlFor || "", id: id || "", ref: ref, style: style, children: children }));
 };
 
 const cvaFormGroup = cvaMerge(["component-formGroup-gap", "group", "form-group"]);
@@ -2313,13 +2313,13 @@ const cvaHelpAddon = cvaMerge(["ml-auto"]);
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, ref, }) => {
+const FormGroup = ({ isInvalid = false, isWarning = false, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required = false, style, ref, }) => {
     const [t] = useTranslation();
     const validationStateIcon = useMemo(() => {
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, children: [label !== undefined && label !== null ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsx("span", { className: "ml-1", children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, ((helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null)) ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [label !== undefined && label !== null ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", "data-testid": dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: jsx("span", { children: "*" }) })) : null] }), tip !== undefined && tip !== null ? (jsx("span", { className: "ml-1", children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" }) })) : null] })) : null, children, (helpText !== undefined && helpText !== null) || (helpAddon !== undefined && helpAddon !== null) ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon !== undefined && helpAddon !== null ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -2892,7 +2892,7 @@ const IGNORED_RS_ACTIONS = new Set(["set-value", "input-blur", "menu-close"]);
  * @returns {ReactElement} FormFieldSelectAdapterMulti component
  */
 const FormFieldSelectAdapterMulti = (props) => {
-    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = undefined, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, onInputChange, ...selectProps } = props;
+    const { className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = undefined, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, onInputChange, ...selectProps } = props;
     const [inputValue, setInputValue] = useState("");
     // Hidden select for a stable DOM ref target (API parity with single adapter)
     const innerRef = useRef(null);
@@ -2949,7 +2949,7 @@ const FormFieldSelectAdapterMulti = (props) => {
     return (jsxs(FormGroup, { className: className, "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: controlId, isInvalid: renderAsInvalid, label: label, required: "required" in selectProps && selectProps.required
             ? !(("disabled" in selectProps && Boolean(selectProps.disabled)) ||
                 ("readOnly" in selectProps && Boolean(selectProps.readOnly)))
-            : false, tip: tip, children: [jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
+            : false, style: style, tip: tip, children: [jsx("select", { "aria-hidden": "true", defaultValue: "", hidden: true, name: name, ref: innerRef }), typeof getOptionValue === "function" &&
                 selectedOptions.map((opt, idx) => {
                     const primitiveValue = getOptionValue(opt);
                     return typeof primitiveValue === "string" ? (jsx("input", { name: name, type: "hidden", value: primitiveValue }, `${primitiveValue}-${idx}`)) : null;
@@ -3631,8 +3631,8 @@ const RadioGroupContext = createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, ref, }) => {
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", children: jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, style, ref, }) => {
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, ref: ref, role: "radiogroup", style: style, children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -3730,7 +3730,7 @@ const cvaTimeRange = cvaMerge([
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, ref, }) => {
+const TimeRange = ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, style, ref, }) => {
     const [timeRange, setTimeRange] = useState(range ?? {
         timeFrom: DEFAULT_TIME,
         timeTo: DEFAULT_TIME,
@@ -3742,7 +3742,7 @@ const TimeRange = ({ id, className, "data-testid": dataTestId, children, range,
         setTimeRange(prev => ({ ...prev, timeTo }));
     };
     const onRangeChange = () => onChange(timeRange);
-    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, ref: ref, children: [jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
+    return (jsxs("div", { className: cvaTimeRange({ className }), "data-testid": dataTestId, id: id, ref: ref, style: style, children: [jsx(BaseInput, { "data-testid": `${dataTestId}-from`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeFrom(time.currentTarget.value), type: "time", value: timeRange.timeFrom === "" ? DEFAULT_TIME : timeRange.timeFrom }), children ?? jsx("div", { "data-testid": `${dataTestId}-separator`, children: "-" }), jsx(BaseInput, { "data-testid": `${dataTestId}-to`, disabled: disabled, isInvalid: isInvalid, onBlur: onRangeChange, onChange: (time) => onChangeTo(time.currentTarget.value), type: "time", value: timeRange.timeTo === "" ? DEFAULT_TIME : timeRange.timeTo })] }));
 };
 const DEFAULT_TIME = "12:00";
 
@@ -3784,7 +3784,7 @@ const cvaScheduleItemText = cvaMerge(["flex", "font-bold", "self-center"]);
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], ref, }) => {
+const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys = [], style, ref, }) => {
     const [t] = useTranslation();
     const onRangeChange = (range, index) => {
         const newSchedule = schedule.map((day, dayIndex) => (index === dayIndex ? { ...day, range: { ...range } } : day));
@@ -3816,7 +3816,7 @@ const Schedule = ({ className, "data-testid": dataTestId, schedule, onChange, in
             : day);
         onChange(newSchedule);
     };
-    return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
+    return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: schedule.map(({ label, range, isActive, key, checkboxLabel, isAllDay }, index) => {
             return (jsxs("div", { className: cvaScheduleItem(), children: [jsxs("div", { className: "grid grid-cols-2 gap-4 sm:hidden", children: [jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.day") }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.active") }), jsx(Checkbox, { checked: isActive, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: "font-medium text-neutral-500", children: t("schedule.label.allDay") }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: range })] }), jsxs("div", { className: "max-sm:hidden sm:grid sm:grid-cols-[100px_200px_60px_250px_250px] sm:gap-2", children: [jsx(Checkbox, { checked: isActive, "data-testid": `${dataTestId}-${key}-checkbox`, label: checkboxLabel, onChange: (event) => onActiveChange(Boolean(event.currentTarget.checked), index) }), jsx(Text, { className: cvaScheduleItemText(), size: "medium", subtle: !isActive, children: label }), jsx(Checkbox, { checked: isAllDay ? isActive : undefined, "data-testid": `${dataTestId}-${key}-allday-checkbox`, disabled: !isActive, onChange: (event) => onAllDayChange(Boolean(event.currentTarget.checked), index) }), jsx(TimeRange, { "data-testid": `${dataTestId}-${key}-range`, disabled: !isActive || isAllDay, isInvalid: !!invalidKeys.find((invalidKey) => invalidKey === key), onChange: (newRange) => onRangeChange(newRange, index), range: isAllDay ? undefined : range })] })] }, key + label));
         }) }));
 };
@@ -4013,7 +4013,7 @@ const Search = ({ className, placeholder, value, widenInputOnFocus = false, hide
     const { t } = useTranslation();
     const generatedId = useId();
     const inputId = id ?? `search-${generatedId}`;
-    return (jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, id: inputId, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsx(Spinner, { centering: "centered", containerClassName: "!p-0", size: fieldSize })) : (jsx(Icon, { name: iconName, size: fieldSize })), ref: ref, suffix: 
+    return (jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, id: inputId, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsx(Spinner, { centering: "centered", containerClassName: "!p-0", size: fieldSize })) : (jsx(Icon, { name: iconName, size: fieldSize })), ref: ref, style: style, suffix: 
         //only show the clear button if there is a value and the onClear function is provided
         onClear && value ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
@@ -4024,7 +4024,7 @@ Search.displayName = "Search";
 /**
  *
  */
-const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required = false, ...rest }) => {
+const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid = false, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required = false, ...rest }) => {
     const isFirstRender = useIsFirstRender();
     const [innerValue, setInnerValue] = useState(value ?? defaultValue);
     const onChangeRef = useRef(onChange);
@@ -4078,7 +4078,8 @@ const FormFieldSelectAdapter = ({ className, "data-testid": dataTestId, helpText
         helpAddon,
         tip,
         label,
-        required: required ? !Boolean(rest.disabled ?? rest.readOnly) : false, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
+        required: required ? !Boolean(rest.disabled ?? rest.readOnly) : false,
+        style, children: [jsx("select", { onChange, ref: innerRef, name, value: innerValue, hidden: true, children: optionsWithCurrentSelectionBackupOption.map(option => {
                     return (jsx("option", { value: option.value, children: option.label }, option.value));
                 }) }), children({
                 ...rest,
@@ -4378,10 +4379,10 @@ TextField.displayName = "TextField";
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid = undefined, errorMessage, label, tip, children, helpText, id, ref, ...rest }) => {
+const TimeRangeField = ({ className, "data-testid": dataTestId, onChange, isInvalid = undefined, errorMessage, label, tip, children, helpText, id, style, ref, ...rest }) => {
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
     const htmlFor = id ? id : "timeRangeField-" + uuidv4();
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, tip: tip, children: jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, ref: ref, style: style, tip: tip, children: jsx(TimeRange, { className: className, "data-testid": dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
 const cvaToggleSwitchWrapper = cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.25.0",
+  "version": "1.25.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,17 +9,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.13.0",
+    "@trackunit/date-and-time-utils": "1.13.1",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.12.22",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.13.0",
-    "@trackunit/react-components": "1.24.0",
-    "@trackunit/ui-icons": "1.13.0",
-    "@trackunit/shared-utils": "1.15.0",
-    "@trackunit/ui-design-tokens": "1.13.0",
-    "@trackunit/i18n-library-translation": "1.21.0",
+    "@trackunit/css-class-variance-utilities": "1.13.1",
+    "@trackunit/react-components": "1.24.1",
+    "@trackunit/ui-icons": "1.13.1",
+    "@trackunit/shared-utils": "1.15.1",
+    "@trackunit/ui-design-tokens": "1.13.1",
+    "@trackunit/i18n-library-translation": "1.21.1",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,7 @@
-import { ButtonCommonProps, CommonProps, Refable } from "@trackunit/react-components";
+import { ButtonCommonProps, CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { RefObject } from "react";
 export type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY" | "EDIT";
-interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps, Refable<HTMLDivElement> {
+interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The type of action performed when clicking the button.
      */
@@ -48,5 +48,5 @@ type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps | Edit
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-export declare const ActionButton: ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, ref, }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionButton: ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, style, ref, }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FormGroup/FormGroup.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface FormGroupProps extends CommonProps, Refable<HTMLDivElement> {
+export interface FormGroupProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The label for the form group.
      */
@@ -69,4 +69,4 @@ export interface FormGroupProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {ReactElement} FormGroup component
  */
-export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, ref, }: FormGroupProps) => ReactElement;
+export declare const FormGroup: ({ isInvalid, isWarning, helpText, helpAddon, tip, className, "data-testid": dataTestId, label, htmlFor, children, required, style, ref, }: FormGroupProps) => ReactElement;

package/src/components/Label/Label.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface LabelProps extends CommonProps, Refable<HTMLLabelElement> {
+export interface LabelProps extends CommonProps, Refable<HTMLLabelElement>, Styleable {
     /**
      * ID of the label.
      */
@@ -38,4 +38,4 @@ export interface LabelProps extends CommonProps, Refable<HTMLLabelElement> {
  * @param {LabelProps} props - The props for the Label component
  * @returns {ReactElement} Label component
  */
-export declare const Label: ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, ref, }: LabelProps) => ReactElement;
+export declare const Label: ({ id, htmlFor, children, className, "data-testid": dataTestId, disabled, isInvalid, style, ref, }: LabelProps) => ReactElement;

package/src/components/MultiSelectField/FormFieldSelectAdapterMulti.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { FocusEvent, ReactElement, ReactNode } from "react";
 import { GroupBase, InputActionMeta, MultiValue } from "react-select";
@@ -19,7 +19,7 @@ import { BaseOptionType } from "../SelectField/FormFieldSelectAdapter";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
 /** Allow all BaseSelect props except those we adapt/wrap here */
 type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = MappedOmit<SelectProps<TOption, TIsAsync, true, TGroup>, "label" | "hasError" | "onBlur" | "options" | "value" | "defaultValue" | "onChange" | "isMulti" | "id">;
-export interface MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync, TGroup>, Refable<HTMLSelectElement> {
+export interface MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync, TGroup>, Refable<HTMLSelectElement>, Styleable {
     /** RHF/native-friendly blur signature */
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /** Options to render (same shape as BaseSelect) */

package/src/components/RadioGroup/RadioGroup.d.ts

@@ -98,6 +98,6 @@ export interface RadioGroupProps<TValue extends string | number> extends CommonP
  * @returns {ReactElement} RadioGroup component
  */
 export declare const RadioGroup: {
-    <TValue extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, ref, }: RadioGroupProps<TValue>): ReactElement;
+    <TValue extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, style, ref, }: RadioGroupProps<TValue>): ReactElement;
     displayName: string;
 };

package/src/components/Schedule/Schedule.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { TimeRangeInput } from "../TimeRange/TimeRange";
 export interface ScheduleItem {
     /**
@@ -26,7 +26,7 @@ export interface ScheduleItem {
      */
     checkboxLabel?: string;
 }
-export interface ScheduleProps extends CommonProps, Refable<HTMLDivElement> {
+export interface ScheduleProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * List of schedule rows.
      */
@@ -72,4 +72,4 @@ export interface ScheduleProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {ScheduleProps} props - The props for the Schedule component
  * @returns {ReactElement} Schedule component
  */
-export declare const Schedule: ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys, ref, }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Schedule: ({ className, "data-testid": dataTestId, schedule, onChange, invalidKeys, style, ref, }: ScheduleProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/SelectField/FormFieldSelectAdapter.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { FocusEvent, ReactElement, ReactNode } from "react";
 import { GroupBase } from "react-select";
@@ -10,7 +10,7 @@ export type BaseOptionType = {
 };
 type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> = MappedOmit<SelectProps<TOption, TIsAsync, false, GroupBase<TOption>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur" | "options">;
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
-export interface SelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync>, Refable<HTMLSelectElement> {
+export interface SelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync>, Refable<HTMLSelectElement>, Styleable {
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /**
      * The options available for the SelectField.
@@ -48,7 +48,7 @@ interface FormFieldSelectAdapterProps<TOption extends BaseOptionType = BaseOptio
  *
  */
 export declare const FormFieldSelectAdapter: {
-    <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false>({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, ref, required, ...rest }: FormFieldSelectAdapterProps<TOption, TIsAsync>): ReactElement;
+    <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false>({ className, "data-testid": dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, htmlFor: htmlForProp, onChange, children, style, ref, required, ...rest }: FormFieldSelectAdapterProps<TOption, TIsAsync>): ReactElement;
     displayName: string;
 };
 export {};

package/src/components/TimeRange/TimeRange.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactNode } from "react";
 export interface TimeRangeInput {
     /**
@@ -10,7 +10,7 @@ export interface TimeRangeInput {
      */
     timeTo: string;
 }
-export interface TimeRangeProps extends CommonProps, Refable<HTMLDivElement> {
+export interface TimeRangeProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * Unique element identifier.
      */
@@ -67,5 +67,5 @@ export interface TimeRangeProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {TimeRangeProps} props - The props for the TimeRange component
  * @returns {ReactElement} TimeRange component
  */
-export declare const TimeRange: ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, ref, }: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimeRange: ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, style, ref, }: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DEFAULT_TIME = "12:00";

package/src/components/TimeRangeField/TimeRangeField.d.ts

@@ -1,8 +1,8 @@
-import { Refable } from "@trackunit/react-components";
+import { Refable, type Styleable } from "@trackunit/react-components";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TimeRangeProps } from "../TimeRange/TimeRange";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps, Refable<HTMLDivElement> {
+export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps, Refable<HTMLDivElement>, Styleable {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */
@@ -47,5 +47,5 @@ export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedPro
  * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
  * @returns {ReactElement} TimeRangeField component
  */
-export declare const TimeRangeField: ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ref, ...rest }: TimeRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimeRangeField: ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, style, ref, ...rest }: TimeRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};