@talixo-ds/options-input 1.0.3 → 1.0.5

package/LICENSE.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/dist/components/min-max-value-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"min-max-value-label.js","sourceRoot":"","sources":["../../src/components/min-max-value-label.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,EAAE,EAAwB,MAAM,0BAA0B,CAAC;AAQ5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAyB,EAAE,EAAE,CAAC,CAC/E,MAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,aACvD,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,EAAE,EAC3C,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EAChE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,EAAE,IAChC,CACb,CAAC"}
+{"version":3,"file":"min-max-value-label.js","sourceRoot":"","sources":["../../src/components/min-max-value-label.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,EAAE,EAAwB,MAAM,0BAA0B,CAAC;AAQ5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAChC,GAAG,EACH,GAAG,EACH,KAAK,EACkB,EAAE,EAAE,CAAC,CAC5B,MAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,aACvD,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,EAAE,EAC3C,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EAChE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,QAAQ,GAAG,EAAE,IAChC,CACb,CAAC"}

package/dist/components/options-input-content-item.d.ts

@@ -3,6 +3,7 @@ export type OptionsInputContentItemProps = {
     item: OptionsInputOption;
     disabled?: boolean;
     displayMinMax?: boolean;
+    error?: boolean;
 };
-declare const OptionsInputContentItem: ({ item: { quantity, details, label, max, min, icon }, displayMinMax, disabled }: OptionsInputContentItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const OptionsInputContentItem: ({ item: { quantity, details, label, max, min, icon }, displayMinMax, disabled, error }: OptionsInputContentItemProps) => import("react/jsx-runtime").JSX.Element;
 export default OptionsInputContentItem;

package/dist/components/options-input-content-item.js

@@ -5,9 +5,14 @@ import Typography from "@mui/material/Typography";
 import * as DesignSystemIcons from "@talixo-ds/icons";
 import { MinMaxValueLabel } from "./min-max-value-label";
 import { capitalize } from "../utils";
-const OptionsInputContentItem = ({ item: { quantity, details, label, max, min, icon }, displayMinMax = false, disabled = false }) => {
+import { red } from "@mui/material/colors";
+import { useMemo } from "react";
+const OptionsInputContentItem = ({ item: { quantity, details, label, max, min, icon }, displayMinMax = false, disabled = false, error = false }) => {
     const Icon = DesignSystemIcons[capitalize(icon)] || null;
-    const itemsColor = quantity === 0 || disabled ? "#a4a5b2" : "#000000";
+    const itemsColor = useMemo(() => {
+        const defaultItemColor = quantity === 0 || disabled ? "#a4a5b2" : "#000000";
+        return error ? red[700] : defaultItemColor;
+    }, [error, quantity, disabled]);
     return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, color: itemsColor, "data-testid": "option-item", children: [label ? (_jsx(Tooltip, { title: _jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: "caption", fontWeight: 600, sx: { my: 0 }, children: label }), details && (_jsx(Typography, { variant: "caption", sx: { my: 0 }, children: details })), displayMinMax && _jsx(MinMaxValueLabel, { min: min, max: max })] }), placement: "top", arrow: true, children: _jsx("span", { children: _jsx(Icon, { fontSize: "medium", sx: { color: itemsColor } }) }) })) : (_jsx(Icon, { fontSize: "medium", sx: { color: itemsColor } })), _jsx(Typography, { variant: "h6", color: itemsColor, children: quantity })] }));
 };
 export default OptionsInputContentItem;

package/dist/components/options-input-content-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"options-input-content-item.js","sourceRoot":"","sources":["../../src/components/options-input-content-item.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,KAAK,iBAAiB,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAStC,MAAM,uBAAuB,GAAG,CAAC,EAChC,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAClD,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EACc,EAAE,EAAE;IAClC,MAAM,IAAI,GAAG,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAmC,CAAC,IAAI,IAAI,CAAC;IAC3F,MAAM,UAAU,GAAG,QAAQ,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtE,OAAO,CACN,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,iBAAc,aAAa,aAC5F,KAAK,CAAC,CAAC,CAAC,CACR,KAAC,OAAO,IACP,KAAK,EACJ,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,aACzC,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YAC1D,KAAK,GACM,EACZ,OAAO,IAAI,CACX,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACzC,OAAO,GACI,CACb,EACA,aAAa,IAAI,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,IACrD,EAEP,SAAS,EAAC,KAAK,EACf,KAAK,kBAEL,yBACC,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAI,GAC/C,GACE,CACV,CAAC,CAAC,CAAC,CACH,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAI,CACrD,EACD,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,UAAU,YACxC,QAAQ,GACG,IACR,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"options-input-content-item.js","sourceRoot":"","sources":["../../src/components/options-input-content-item.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,KAAK,iBAAiB,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAShC,MAAM,uBAAuB,GAAG,CAAC,EAChC,IAAI,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAClD,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACiB,EAAE,EAAE;IAClC,MAAM,IAAI,GACT,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAmC,CAAC,IAAI,IAAI,CAAC;IAC/E,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,MAAM,gBAAgB,GAAG,QAAQ,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAE5E,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEhC,OAAO,CACN,MAAC,GAAG,IACH,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,UAAU,iBACL,aAAa,aAExB,KAAK,CAAC,CAAC,CAAC,CACR,KAAC,OAAO,IACP,KAAK,EACJ,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,aACzC,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YAC1D,KAAK,GACM,EACZ,OAAO,IAAI,CACX,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACzC,OAAO,GACI,CACb,EACA,aAAa,IAAI,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI,IACrD,EAEP,SAAS,EAAC,KAAK,EACf,KAAK,kBAEL,yBACC,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAI,GAC/C,GACE,CACV,CAAC,CAAC,CAAC,CACH,KAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAI,CACrD,EACD,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,UAAU,YACxC,QAAQ,GACG,IACR,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/options-input-dropdown-item.d.ts

@@ -6,6 +6,7 @@ export type OptionsInputDropdownItemProps = {
     onChange: (id: string, value: number | string) => void;
     index: number;
     displayMinMax?: boolean;
+    error?: boolean;
 };
-declare const OptionsInputDropdownItem: ({ item: { id, quantity, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax }: OptionsInputDropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const OptionsInputDropdownItem: ({ item: { id, quantity, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax, error }: OptionsInputDropdownItemProps) => import("react/jsx-runtime").JSX.Element;
 export default OptionsInputDropdownItem;

package/dist/components/options-input-dropdown-item.js

@@ -13,10 +13,18 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import * as DesignSystemIcons from "@talixo-ds/icons";
 import { MinMaxValueLabel } from "./min-max-value-label";
 import { capitalize } from "../utils";
-const OptionsInputDropdownItem = ({ item: { id, quantity = 0, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax }) => {
+const OptionsInputDropdownItem = ({ item: { id, quantity = 0, label, max, min, icon, details, inputQuantity }, onChange, onBlur, index, displayMinMax, error = false }) => {
     const [shouldDisplayFullDetails, setShouldDisplayFullDetails] = useState(false);
     const Icon = DesignSystemIcons[capitalize(icon)] || null;
-    return (_jsxs(_Fragment, { children: [!!index && _jsx(Divider, { sx: { color: (theme) => theme.palette.primary.main } }), _jsxs(ListItem, { sx: {
+    const onIncrement = (inputId) => () => {
+        const isValueBelowMin = !!(min && quantity < min);
+        onChange(inputId, (isValueBelowMin ? min : quantity + 1));
+    };
+    const onDecrement = (inputId) => () => {
+        const isValueAboveMax = !!(max && quantity > max);
+        return onChange(inputId, (isValueAboveMax ? max : quantity - 1));
+    };
+    return (_jsxs(_Fragment, { children: [!!index && (_jsx(Divider, { sx: { color: (theme) => theme.palette.primary.main } })), _jsxs(ListItem, { sx: {
                     display: "flex",
                     justifyContent: "space-between"
                 }, className: classNames("options-input__dropdown-item", {
@@ -40,7 +48,7 @@ const OptionsInputDropdownItem = ({ item: { id, quantity = 0, label, max, min, i
                                                 })
                                             }, "data-testid": "option-details", children: details?.length <= 15 || shouldDisplayFullDetails
                                                 ? details
-                                                : `${details?.slice(0, 15)}...` }) })), displayMinMax && _jsx(MinMaxValueLabel, { min: min, max: max, color: "gray" })] })] }), _jsxs(ButtonGroup, { variant: "outlined", size: "small", className: "options-input__dropdown-item-buttons", children: [_jsx(Button, { onClick: () => onChange(id, quantity + 1), disabled: quantity === max, className: "options-input__dropdown-item-button", role: "button", color: "primary", children: _jsx(AddIcon, { sx: { color: "primary" } }) }), _jsx(Button, { onClick: () => onChange(id, quantity - 1), disabled: quantity === min, className: "options-input__dropdown-item-button", role: "button", color: "primary", children: _jsx(RemoveIcon, { sx: { color: "primary" } }) })] })] })] }));
+                                                : `${details?.slice(0, 15)}...` }) })), displayMinMax && _jsx(MinMaxValueLabel, { min: min, max: max, color: "gray" })] })] }), _jsxs(ButtonGroup, { variant: "outlined", size: "small", className: "options-input__dropdown-item-buttons", children: [_jsx(Button, { onClick: onIncrement(id), disabled: !!(max && quantity && quantity >= max), className: "options-input__dropdown-item-button", role: "button", color: error ? "error" : "primary", children: _jsx(AddIcon, { sx: { color: error ? "black" : "primary" } }) }), _jsx(Button, { onClick: onDecrement(id), disabled: !!(quantity && min) && quantity <= min, className: "options-input__dropdown-item-button", role: "button", color: error ? "error" : "primary", children: _jsx(RemoveIcon, { sx: { color: error ? "black" : "primary" } }) })] })] })] }));
 };
 export default OptionsInputDropdownItem;
 //# sourceMappingURL=options-input-dropdown-item.js.map

package/dist/components/options-input-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"options-input-dropdown-item.js","sourceRoot":"","sources":["../../src/components/options-input-dropdown-item.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"options-input-dropdown-item.js","sourceRoot":"","sources":["../../src/components/options-input-dropdown-item.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,KAAK,iBAAiB,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAYtC,MAAM,wBAAwB,GAAG,CAAC,EACjC,IAAI,EAAE,EAAE,EAAE,EAAE,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,EACzE,QAAQ,EACR,MAAM,EACN,KAAK,EACL,aAAa,EACb,KAAK,GAAG,KAAK,EACkB,EAAE,EAAE;IACnC,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAC5D,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC1B,MAAM,IAAI,GACT,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAmC,CAAC,IAAI,IAAI,CAAC;IAE/E,MAAM,WAAW,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,EAAE;QAC7C,MAAM,eAAe,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,QAAQ,GAAG,GAAG,CAAC,CAAC;QAElD,QAAQ,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,EAAE;QAC7C,MAAM,eAAe,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,QAAQ,GAAG,GAAG,CAAC,CAAC;QAElD,OAAO,QAAQ,CAAC,OAAO,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,OAAO,CACN,8BACE,CAAC,CAAC,KAAK,IAAI,CACX,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAI,CACjE,EACD,MAAC,QAAQ,IACR,EAAE,EAAE;oBACH,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;iBAC/B,EACD,SAAS,EAAE,UAAU,CAAC,8BAA8B,EAAE;oBACrD,qCAAqC,EAAE,CAAC,QAAQ;iBAChD,CAAC,aAEF,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,aACtC,KAAC,IAAI,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAI,EACjD,KAAC,SAAS,IACT,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EACpD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,aAAa,EACpB,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE;oCACX,SAAS,EAAE,SAAS;oCACpB,OAAO,EAAE,UAAU;oCACnB,KAAK,EAAE;wCACN,SAAS,EAAE,QAAQ;qCACnB;oCACD,aAAa,EAAE,qBAAqB;iCACpC;gCACD,wDAAwD;gCACxD,UAAU,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EACtC,SAAS,EAAC,oCAAoC,GAC7C,EACF,MAAC,GAAG,IACH,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,cAAc,EAAC,QAAQ,EACvB,YAAY,EAAE,CAAC,EACf,WAAW,EAAE,CAAC,EACd,QAAQ,EAAC,MAAM,aAEf,KAAC,UAAU,IACV,OAAO,EAAC,SAAS,EACjB,UAAU,EAAE,GAAG,EACf,QAAQ,EAAE,EAAE,EACZ,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EACb,KAAK,EAAC,OAAO,YAEZ,KAAK,IAAI,EAAE,GACA,EACZ,OAAO,IAAI,CACX,KAAC,GAAG,IACH,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAC,MAAM,iBACD,0BAA0B,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,2BAA2B,CAAC,IAAI,CAAC,EACrD,YAAY,EAAE,GAAG,EAAE,CAAC,2BAA2B,CAAC,KAAK,CAAC,YAEtD,KAAC,UAAU,IACV,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,MAAM,EACZ,EAAE,EAAE;gDACH,EAAE,EAAE,CAAC;gDACL,MAAM,EAAE,KAAK;gDACb,QAAQ,EAAE,OAAO;gDACjB,GAAG,CAAC,wBAAwB,IAAI;oDAC/B,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oDACjD,MAAM,EAAE,oBAAoB;iDAC5B,CAAC;6CACF,iBACW,gBAAgB,YAE3B,OAAO,EAAE,MAAM,IAAI,EAAE,IAAI,wBAAwB;gDACjD,CAAC,CAAC,OAAO;gDACT,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,GACpB,GACR,CACN,EACA,aAAa,IAAI,KAAC,gBAAgB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,MAAM,GAAG,IAClE,IACD,EACN,MAAC,WAAW,IACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,sCAAsC,aAEhD,KAAC,MAAM,IACN,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,EACxB,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,QAAQ,IAAI,QAAQ,IAAI,GAAG,CAAC,EAChD,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAElC,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,GAAI,GAC/C,EACT,KAAC,MAAM,IACN,OAAO,EAAE,WAAW,CAAC,EAAE,CAAC,EACxB,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,GAAG,CAAC,IAAI,QAAQ,IAAI,GAAG,EAChD,SAAS,EAAC,qCAAqC,EAC/C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAElC,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,GAAI,GAClD,IACI,IACJ,IACT,CACH,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { OptionsInput } from './options-input';
-export type { OptionsInputProps } from './options-input';
+export { OptionsInput } from "./options-input";
+export type { OptionsInputProps } from "./options-input";

package/dist/index.js

@@ -1,2 +1,2 @@
-export { OptionsInput } from './options-input';
+export { OptionsInput } from "./options-input";
 //# sourceMappingURL=index.js.map

package/dist/options-input.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import type { SxProps } from "@mui/material";
 import type { OptionsInputOption, OptionsInputValue } from "./types";
 import "./styles.scss";
@@ -32,5 +33,9 @@ export type OptionsInputProps = {
     itemsGap?: string | number;
     /** Custom styles for container */
     containerSx?: SxProps;
+    /** Flag indicating if there is an validation error */
+    error?: boolean;
+    /** Additional content displayed with small font under the input */
+    helperText?: ReactNode;
 };
-export declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, ...rest }: OptionsInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, error, helperText, ...rest }: OptionsInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/options-input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import classNames from "classnames";
 import Box from "@mui/material/Box";
 import List from "@mui/material/List";
@@ -10,31 +10,44 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import * as DesignSystemIcons from "@talixo-ds/icons";
 import OptionsInputContentItem from "./components/options-input-content-item";
 import OptionsInputDropdownItem from "./components/options-input-dropdown-item";
+import { red } from "@mui/material/colors";
 import "./styles.scss";
 import "@emotion/react";
 import "@emotion/styled";
 import { capitalize } from "./utils";
-export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOptions = [], defaultValue, displayMinMax = false, disabled = false, readOnly = false, id, className, itemsGap = 1, containerSx = [], ...rest }) => {
+export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOptions = [], defaultValue, displayMinMax = false, disabled = false, readOnly = false, id, className, itemsGap = 1, containerSx = [], error = false, helperText, ...rest }) => {
     const [currentOptions, setCurrentOptions] = useState([]);
+    const [inputContainerWidth, setInputContainerWidth] = useState(0);
+    const inputContainerRef = useRef();
     const [anchorEl, setAnchorEl] = useState();
     const open = !!anchorEl;
     useEffect(() => setCurrentOptions(options.map((option) => {
-        const defaultQuantity = defaultValue?.[option.id] ?? 0;
-        const minQuantity = typeof option?.min === "number" && defaultQuantity < option.min
-            ? option.min
-            : defaultQuantity;
-        const quantity = typeof option?.max === "number" && minQuantity > option.max ? option.max : minQuantity;
+        const quantity = defaultValue?.[option.id] ?? 0;
         return {
             ...option,
             quantity,
             inputQuantity: quantity
         };
     })), [options, defaultValue]);
+    useEffect(() => {
+        setInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);
+    }, [inputContainerRef?.current?.clientWidth]);
+    const optionsExceedingBoundaries = useMemo(() => currentOptions.reduce((exceedingOptions, { quantity, id, label }) => {
+        const option = options.find((option) => option.id === id);
+        if (label &&
+            quantity !== undefined &&
+            ((option?.max !== undefined && option?.max < quantity) ||
+                (option?.min !== undefined && option?.min > quantity))) {
+            return [...exceedingOptions, label];
+        }
+        return exceedingOptions;
+    }, []), [currentOptions, options]);
+    const isError = useMemo(() => error || !!optionsExceedingBoundaries.length, [error, optionsExceedingBoundaries]);
     const toggleInput = useCallback((event) => {
         const { currentTarget } = event;
         if (!disabled && !readOnly) {
             setTimeout(() => {
-                setAnchorEl((currentAnchor) => (currentAnchor ? undefined : currentTarget));
+                setAnchorEl((currentAnchor) => currentAnchor ? undefined : currentTarget);
             }, 0);
         }
     }, [disabled, readOnly, setAnchorEl]);
@@ -57,11 +70,11 @@ export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOpt
     const onValueChange = (optionId, newValue) => {
         const newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);
         const newCurrentOptions = currentOptions.map((option) => {
-            const maxQuantity = newQuantity > (option.max || Infinity) ? option.max : newQuantity;
+            const maxQuantity = newQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;
             return {
                 ...option,
                 ...(optionId === option.id && {
-                    quantity: newQuantity < (option.min || -Infinity) ? option.min : maxQuantity,
+                    quantity: newQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,
                     inputQuantity: newValue
                 })
             };
@@ -77,38 +90,49 @@ export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOpt
     const onDropdownItemBlur = (optionId) => () => setCurrentOptions(currentOptions.map((option) => {
         if (optionId !== option.id)
             return option;
-        const finalQuantity = Number.isNaN(Number(option.inputQuantity))
+        const finalQuantity = Number.isNaN(Number(option?.inputQuantity))
             ? 0
-            : Number(option.inputQuantity);
-        const maxQuantity = finalQuantity > (option.max || Infinity) ? option.max : finalQuantity;
+            : Number(option?.inputQuantity);
+        const maxQuantity = finalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;
         return {
             ...option,
-            inputQuantity: finalQuantity < (option.min || -Infinity) ? option.min : maxQuantity
+            inputQuantity: finalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity
         };
     }));
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { id: id, onClick: toggleInput, onBlur: onInputBlur, onFocus: onInputFocus, className: classNames("options-input__container", {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { id: id, onClick: toggleInput, onBlur: onInputBlur, onFocus: onInputFocus, ref: inputContainerRef, className: classNames("options-input__container", className, {
                     "options-input__container--open": open,
                     "options-input__container--disabled": disabled,
                     "options-input__container--read-only": readOnly,
-                    className
+                    "options-input__container--error": isError
                 }), sx: [
                     { "&:hover": { borderColor: "#d3d3d3" } },
                     ...(Array.isArray(containerSx) ? containerSx : [containerSx]),
                     open && {
                         borderColor: (theme) => theme.palette.primary.main,
                         "&:hover": { borderColor: (theme) => theme.palette.primary.main }
+                    },
+                    isError && {
+                        borderColor: red[700],
+                        "&:hover": { borderColor: red[700] }
                     }
                 ], "data-testid": rest["data-testid"] || "options-input-container", tabIndex: 0, children: [_jsx(Box, { display: "flex", gap: itemsGap, children: currentOptions
                             .filter(({ quantity, id: optionId, icon }) => !!(DesignSystemIcons[capitalize(icon)] &&
-                            (quantity !== 0 || persistentOptions.includes(optionId))))
-                            .map((option) => (_jsx(OptionsInputContentItem, { item: option, disabled: disabled, displayMinMax: displayMinMax }, option.id))) }), !readOnly &&
-                        (open ? (_jsx(KeyboardArrowUpIcon, { color: "primary" })) : (_jsx(KeyboardArrowDownIcon, { sx: {
-                                color: (theme) => (disabled ? theme.palette.grey[400] : theme.palette.action.focus)
-                            } })))] }), _jsx(ClickAwayListener, { onClickAway: () => open && setAnchorEl(undefined), children: _jsx(Popper, { open: open, placement: "bottom-start", anchorEl: anchorEl, sx: (theme) => ({ zIndex: theme.zIndex.modal }), children: _jsx(List, { disablePadding: true, "data-testid": "options-dropdown-list", className: "options-input__dropdown-items-list", sx: {
+                            (quantity !== 0 || persistentOptions?.includes(optionId))))
+                            .map((option) => (_jsx(OptionsInputContentItem, { item: option, disabled: disabled, displayMinMax: displayMinMax, error: !!(option?.label && optionsExceedingBoundaries.includes(option.label)) }, option.id))) }), !readOnly &&
+                        (open ? (_jsx(KeyboardArrowUpIcon, { sx: { color: isError ? red[700] : "primary" } })) : (_jsx(KeyboardArrowDownIcon, { sx: {
+                                color: (theme) => disabled ? theme.palette.grey[400] : theme.palette.action.focus
+                            } })))] }), (helperText || isError) && (_jsx(Box, { sx: {
+                    ...(isError ? { color: red[700] } : {})
+                }, marginTop: 1, marginLeft: 2, width: inputContainerWidth, fontSize: "small", children: optionsExceedingBoundaries.length
+                    ? (() => {
+                        const messagePluralForm = optionsExceedingBoundaries.length > 1 ? "s" : "";
+                        return `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(", ")} option${messagePluralForm} ${messagePluralForm ? "are" : "is"} out of range.`;
+                    })()
+                    : helperText })), _jsx(ClickAwayListener, { onClickAway: () => open && setAnchorEl(undefined), children: _jsx(Popper, { open: open, placement: "bottom-start", anchorEl: anchorEl, sx: (theme) => ({ zIndex: theme.zIndex.modal }), children: _jsx(List, { disablePadding: true, "data-testid": "options-dropdown-list", className: "options-input__dropdown-items-list", sx: {
                             bgcolor: "Background",
-                            border: (theme) => `thin solid ${theme.palette.primary.main}`
+                            border: (theme) => `thin solid ${isError ? red[700] : theme.palette.primary.main}`
                         }, children: currentOptions
                             .filter(({ icon }) => !!DesignSystemIcons[capitalize(icon)])
-                            .map((option, index) => (_jsx(OptionsInputDropdownItem, { item: option, onBlur: onDropdownItemBlur(option.id), onChange: onValueChange, index: index, displayMinMax: displayMinMax }, option.id))) }) }) })] }));
+                            .map((option, index) => (_jsx(OptionsInputDropdownItem, { item: option, onBlur: onDropdownItemBlur(option.id), onChange: onValueChange, index: index, displayMinMax: displayMinMax, error: isError }, option.id))) }) }) })] }));
 };
 //# sourceMappingURL=options-input.js.map

package/dist/options-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"options-input.js","sourceRoot":"","sources":["../src/options-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"options-input.js","sourceRoot":"","sources":["../src/options-input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EACb,QAAQ,EACR,SAAS,EACT,WAAW,EAEX,OAAO,EACP,MAAM,EACN,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAChE,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,mBAAmB,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,iBAAiB,MAAM,kBAAkB,CAAC;AAGtD,OAAO,uBAAuB,MAAM,yCAAyC,CAAC;AAC9E,OAAO,wBAAwB,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,eAAe,CAAC;AAEvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAqCrC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,iBAAiB,GAAG,EAAE,EACtB,YAAY,EACZ,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,CAAC,EACZ,WAAW,GAAG,EAAE,EAChB,KAAK,GAAG,KAAK,EACb,UAAU,EACV,GAAG,IAAI,EACY,EAAE,EAAE;IACvB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAuB,EAAE,CAAC,CAAC;IAC/E,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAG,MAAM,EAAe,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAA2B,CAAC;IACpE,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC;IAExB,SAAS,CACR,GAAG,EAAE,CACJ,iBAAiB,CAChB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACtB,MAAM,QAAQ,GAAG,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QAEhD,OAAO;YACN,GAAG,MAAM;YACT,QAAQ;YACR,aAAa,EAAE,QAAQ;SACvB,CAAC;IACH,CAAC,CAAC,CACF,EACF,CAAC,OAAO,EAAE,YAAY,CAAC,CACvB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,sBAAsB,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,IAAI,CAAC,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9C,MAAM,0BAA0B,GAAG,OAAO,CACzC,GAAG,EAAE,CACJ,cAAc,CAAC,MAAM,CAAC,CAAC,gBAAgB,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACnE,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAE1D,IACC,KAAK;YACL,QAAQ,KAAK,SAAS;YACtB,CAAC,CAAC,MAAM,EAAE,GAAG,KAAK,SAAS,IAAI,MAAM,EAAE,GAAG,GAAG,QAAQ,CAAC;gBACrD,CAAC,MAAM,EAAE,GAAG,KAAK,SAAS,IAAI,MAAM,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC,EACtD,CAAC;YACF,OAAO,CAAC,GAAG,gBAAgB,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,OAAO,gBAAgB,CAAC;IACzB,CAAC,EAAE,EAAc,CAAC,EACnB,CAAC,cAAc,EAAE,OAAO,CAAC,CACzB,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,0BAA0B,CAAC,MAAM,EAClD,CAAC,KAAK,EAAE,0BAA0B,CAAC,CACnC,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,KAAoC,EAAE,EAAE;QACxC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;QAEhC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC5B,UAAU,CAAC,GAAG,EAAE;gBACf,WAAW,CAAC,CAAC,aAAa,EAAE,EAAE,CAC7B,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CACzC,CAAC;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QACP,CAAC;IACF,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,CACN,cAAc,CAAC,MAAM,CACpB,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;gBAClC,GAAG,aAAa;gBAChB,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,QAAQ;aAC1C,CAAC,EACF,EAAE,CACmB,CACtB,CAAC;QACH,CAAC;IACF,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,IAAI,MAAM,EAAE,CAAC;YACZ,MAAM,CACL,cAAc,CAAC,MAAM,CACpB,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;gBAClC,GAAG,aAAa;gBAChB,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,QAAQ;aAC1C,CAAC,EACF,EAAE,CACmB,CACtB,CAAC;QACH,CAAC;IACF,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAE,QAAyB,EAAE,EAAE;QACrE,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAE1E,MAAM,iBAAiB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACvD,MAAM,WAAW,GAChB,WAAW,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC;YAErE,OAAO;gBACN,GAAG,MAAM;gBACT,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,EAAE,IAAI;oBAC7B,QAAQ,EACP,WAAW,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,WAAW;oBACrE,aAAa,EAAE,QAAQ;iBACvB,CAAC;aACF,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,QAAQ,EAAE,CAAC;YACd,QAAQ,CACP,iBAAiB,CAAC,MAAM,CACvB,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;gBAClC,GAAG,aAAa;gBAChB,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,QAAQ;aAC1C,CAAC,EACF,EAAE,CACmB,CACtB,CAAC;QACH,CAAC;QAED,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,GAAG,EAAE,CACrD,iBAAiB,CAChB,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QAC7B,IAAI,QAAQ,KAAK,MAAM,CAAC,EAAE;YAAE,OAAO,MAAM,CAAC;QAE1C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;YAChE,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACjC,MAAM,WAAW,GAChB,aAAa,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC;QAEzE,OAAO;YACN,GAAG,MAAM;YACT,aAAa,EACZ,aAAa,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,WAAW;SACvE,CAAC;IACH,CAAC,CAAC,CACF,CAAC;IAEH,OAAO,CACN,8BACC,MAAC,GAAG,IACH,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,YAAY,EACrB,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,SAAS,EAAE;oBAC5D,gCAAgC,EAAE,IAAI;oBACtC,oCAAoC,EAAE,QAAQ;oBAC9C,qCAAqC,EAAE,QAAQ;oBAC/C,iCAAiC,EAAE,OAAO;iBAC1C,CAAC,EACF,EAAE,EAAE;oBACH,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;oBACzC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;oBAC7D,IAAI,IAAI;wBACP,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;wBAClD,SAAS,EAAE,EAAE,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE;qBACjE;oBACD,OAAO,IAAI;wBACV,WAAW,EAAE,GAAG,CAAC,GAAG,CAAC;wBACrB,SAAS,EAAE,EAAE,WAAW,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE;qBACpC;iBACD,iBACY,IAAI,CAAC,aAAa,CAAC,IAAI,yBAAyB,EAC7D,QAAQ,EAAE,CAAC,aAEX,KAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,GAAG,EAAE,QAAQ,YAC/B,cAAc;6BACb,MAAM,CACN,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,CACpC,CAAC,CAAC,CACD,iBAAiB,CAChB,UAAU,CAAC,IAAI,CAAmC,CAClD;4BACD,CAAC,QAAQ,KAAK,CAAC,IAAI,iBAAiB,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CACzD,CACF;6BACA,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAChB,KAAC,uBAAuB,IAEvB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EACJ,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,IAAI,0BAA0B,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IALlE,MAAM,CAAC,EAAE,CAOb,CACF,CAAC,GACE,EACL,CAAC,QAAQ;wBACT,CAAC,IAAI,CAAC,CAAC,CAAC,CACP,KAAC,mBAAmB,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,GAAI,CACtE,CAAC,CAAC,CAAC,CACH,KAAC,qBAAqB,IACrB,EAAE,EAAE;gCACH,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE,CAChB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;6BAChE,GACA,CACF,CAAC,IACE,EACL,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,CAC3B,KAAC,GAAG,IACH,EAAE,EAAE;oBACH,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;iBACvC,EACD,SAAS,EAAE,CAAC,EACZ,UAAU,EAAE,CAAC,EACb,KAAK,EAAE,mBAAmB,EAC1B,QAAQ,EAAC,OAAO,YAEf,0BAA0B,CAAC,MAAM;oBACjC,CAAC,CAAC,CAAC,GAAG,EAAE;wBACN,MAAM,iBAAiB,GACtB,0BAA0B,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;wBAElD,OAAO,QAAQ,iBAAiB,QAAQ,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,iBAAiB,IAAI,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,gBAAgB,CAAC;oBAC9J,CAAC,CAAC,EAAE;oBACL,CAAC,CAAC,UAAU,GACR,CACN,EACD,KAAC,iBAAiB,IAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,WAAW,CAAC,SAAS,CAAC,YACnE,KAAC,MAAM,IACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,cAAc,EACxB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,YAE/C,KAAC,IAAI,IACJ,cAAc,uBACF,uBAAuB,EACnC,SAAS,EAAC,oCAAoC,EAC9C,EAAE,EAAE;4BACH,OAAO,EAAE,YAAY;4BACrB,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CACjB,cAAc,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE;yBAChE,YAEA,cAAc;6BACb,MAAM,CACN,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CACZ,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAmC,CAAC,CACxE;6BACA,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACvB,KAAC,wBAAwB,IAExB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAC,EACrC,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,OAAO,IANT,MAAM,CAAC,EAAE,CAOb,CACF,CAAC,GACG,GACC,GACU,IAClB,CACH,CAAC;AACH,CAAC,CAAC"}

package/dist/styles.scss

@@ -1,54 +1,54 @@
 .options-input {
-  &__container {
-    border: thin solid transparent;
-    border-radius: 0.25rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.25rem;
-    gap: 1rem;
-    cursor: pointer;
-    width: fit-content;
-
-    &--open {
-      border-bottom-width: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--disabled {
-      cursor: unset;
-    }
-
-    &--read-only {
-      cursor: unset;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  &__dropdown-item {
-    gap: 1rem;
-
-    &--empty {
-      background-color: #eeeeee;
-    }
-  }
-
-  &__dropdown-item-input {
-    width: 2rem;
-  }
-
-  &__dropdown-item-buttons {
-    & > button[role="button"] {
-      min-width: 2rem;
-      padding: 0;
-
-      &[disabled] > svg {
-        color: #0000001f;
-      }
-    }
-  }
+	&__container {
+		border: thin solid transparent;
+		border-radius: 0.25rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.25rem;
+		gap: 1rem;
+		cursor: pointer;
+		width: fit-content;
+
+		&--open {
+			border-bottom-width: 0;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		&--disabled {
+			cursor: unset;
+		}
+
+		&--read-only {
+			cursor: unset;
+
+			&:hover {
+				border-color: transparent;
+			}
+		}
+	}
+
+	&__dropdown-item {
+		gap: 1rem;
+
+		&--empty {
+			background-color: #eeeeee;
+		}
+	}
+
+	&__dropdown-item-input {
+		width: 2rem;
+	}
+
+	&__dropdown-item-buttons {
+		& > button[role="button"] {
+			min-width: 2rem;
+			padding: 0;
+
+			&[disabled] > svg {
+				color: #0000001f;
+			}
+		}
+	}
 }

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CACzC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@talixo-ds/options-input",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"publishConfig": {
@@ -11,7 +11,7 @@
 		"test": "vitest"
 	},
 	"dependencies": {
-		"@talixo-ds/icons": "^1.0.2"
+		"@talixo-ds/icons": "^1.0.3"
 	},
-	"gitHead": "618a5d4b960ff0a06427031dc8f41997b465c1d2"
+	"gitHead": "857e6fabaeeaec85a3180c66fe89545f74cabc96"
 }

package/src/__tests__/options-input.spec.tsx

@@ -1,4 +1,10 @@
-import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import {
+	render,
+	screen,
+	fireEvent,
+	waitFor,
+	act
+} from "@testing-library/react";
 import { OptionsInput } from "../options-input";
 
 const props = {
@@ -36,6 +42,14 @@ const props = {
 };
 
 describe("OptionsInput", () => {
+	it("should display invalid value error message for items with invalid value", () => {
+		const { queryByText } = render(<OptionsInput {...props} />);
+
+		expect(
+			queryByText("Value for sport equipment option is out of range.")
+		).toBeInTheDocument();
+	});
+
 	describe("events", () => {
 		it("should open input dropdown properly", async () => {
 			const { getAllByTestId } = render(<OptionsInput {...props} />);
@@ -60,7 +74,9 @@ describe("OptionsInput", () => {
 			});
 
 			await waitFor(() => {
-				expect(screen.queryByTestId("options-dropdown-list")).not.toBeInTheDocument();
+				expect(
+					screen.queryByTestId("options-dropdown-list")
+				).not.toBeInTheDocument();
 			});
 		});
 
@@ -76,7 +92,7 @@ describe("OptionsInput", () => {
 			expect(props.onFocus).toHaveBeenCalledWith({
 				dog: 0,
 				luggage: 2,
-				"sport-equipment": 1
+				"sport-equipment": 5
 			});
 		});
 
@@ -92,7 +108,7 @@ describe("OptionsInput", () => {
 			expect(props.onBlur).toHaveBeenCalledWith({
 				dog: 0,
 				luggage: 2,
-				"sport-equipment": 1
+				"sport-equipment": 5
 			});
 		});
 
@@ -114,7 +130,7 @@ describe("OptionsInput", () => {
 			expect(props.onChange).toHaveBeenCalledWith({
 				dog: 0,
 				luggage: 9,
-				"sport-equipment": 1
+				"sport-equipment": 5
 			});
 
 			expect(screen.getAllByTestId("option-item")[0]).toHaveTextContent("9");

package/src/components/__tests__/options-input-content-item.spec.tsx

@@ -38,7 +38,9 @@ describe("OptionsInputDropdownItem", () => {
 
 	it("should not render tooltip when there is no label", async () => {
 		const { queryByTestId, queryByText, getByTestId } = render(
-			<OptionsInputContentItem item={{ ...props.item, label: undefined, quantity: 1 }} />
+			<OptionsInputContentItem
+				item={{ ...props.item, label: undefined, quantity: 1 }}
+			/>
 		);
 
 		expect(queryByTestId("LuggageIcon")).toBeInTheDocument();

package/src/components/__tests__/options-input-dropdown-item.spec.tsx

@@ -55,6 +55,28 @@ describe("OptionsInputDropdownItem", () => {
 		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", 1);
 	});
 
+	it("should call onChange on increment button click when value is below min", () => {
+		const { getAllByRole } = render(
+			<OptionsInputDropdownItem
+				{...{
+					...props,
+					item: {
+						...props.item,
+						quantity: -20,
+						inputQuantity: -20
+					}
+				}}
+			/>
+		);
+
+		const buttons = getAllByRole("button");
+
+		fireEvent.click(buttons[0]!);
+
+		expect(onChangeMock).toHaveBeenCalledTimes(1);
+		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", -10);
+	});
+
 	it("should call onChange on decrement button click", () => {
 		const { getAllByRole } = render(<OptionsInputDropdownItem {...props} />);
 
@@ -66,10 +88,34 @@ describe("OptionsInputDropdownItem", () => {
 		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", -1);
 	});
 
+	it("should call onChange on decrement button click when value is above max", () => {
+		const { getAllByRole } = render(
+			<OptionsInputDropdownItem
+				{...{
+					...props,
+					item: {
+						...props.item,
+						quantity: 20,
+						inputQuantity: 20
+					}
+				}}
+			/>
+		);
+
+		const buttons = getAllByRole("button");
+
+		fireEvent.click(buttons[1]!);
+
+		expect(onChangeMock).toHaveBeenCalledTimes(1);
+		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", 10);
+	});
+
 	it("should expand details content", () => {
 		const { getByTestId } = render(<OptionsInputDropdownItem {...props} />);
 
-		expect(getByTestId("option-details")).toHaveTextContent(props.item.details.slice(0, 15));
+		expect(getByTestId("option-details")).toHaveTextContent(
+			props.item.details.slice(0, 15)
+		);
 
 		const optionDetailsContainer = getByTestId("option-details-container");
 

package/src/components/min-max-value-label.tsx

@@ -6,7 +6,11 @@ export type MinMaxValueLabelProps = {
 	color?: TypographyProps["color"];
 };
 
-export const MinMaxValueLabel = ({ min, max, color }: MinMaxValueLabelProps) => (
+export const MinMaxValueLabel = ({
+	min,
+	max,
+	color
+}: MinMaxValueLabelProps) => (
 	<Typography variant="caption" color={color} sx={{ my: 0 }}>
 		{!Number.isNaN(Number(min)) && `min: ${min}`}
 		{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && ", "}

package/src/components/options-input-content-item.tsx

@@ -5,23 +5,38 @@ import * as DesignSystemIcons from "@talixo-ds/icons";
 import { MinMaxValueLabel } from "./min-max-value-label";
 import { capitalize } from "../utils";
 import type { OptionsInputOption } from "../types";
+import { red } from "@mui/material/colors";
+import { useMemo } from "react";
 
 export type OptionsInputContentItemProps = {
 	item: OptionsInputOption;
 	disabled?: boolean;
 	displayMinMax?: boolean;
+	error?: boolean;
 };
 
 const OptionsInputContentItem = ({
 	item: { quantity, details, label, max, min, icon },
 	displayMinMax = false,
-	disabled = false
+	disabled = false,
+	error = false
 }: OptionsInputContentItemProps) => {
-	const Icon = DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
-	const itemsColor = quantity === 0 || disabled ? "#a4a5b2" : "#000000";
+	const Icon =
+		DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
+	const itemsColor = useMemo(() => {
+		const defaultItemColor = quantity === 0 || disabled ? "#a4a5b2" : "#000000";
+
+		return error ? red[700] : defaultItemColor;
+	}, [error, quantity, disabled]);
 
 	return (
-		<Box display="flex" alignItems="center" gap={0.5} color={itemsColor} data-testid="option-item">
+		<Box
+			display="flex"
+			alignItems="center"
+			gap={0.5}
+			color={itemsColor}
+			data-testid="option-item"
+		>
 			{label ? (
 				<Tooltip
 					title={

package/src/components/options-input-dropdown-item.tsx

@@ -20,6 +20,7 @@ export type OptionsInputDropdownItemProps = {
 	onChange: (id: string, value: number | string) => void;
 	index: number;
 	displayMinMax?: boolean;
+	error?: boolean;
 };
 
 const OptionsInputDropdownItem = ({
@@ -27,14 +28,31 @@ const OptionsInputDropdownItem = ({
 	onChange,
 	onBlur,
 	index,
-	displayMinMax
+	displayMinMax,
+	error = false
 }: OptionsInputDropdownItemProps) => {
-	const [shouldDisplayFullDetails, setShouldDisplayFullDetails] = useState<boolean>(false);
-	const Icon = DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
+	const [shouldDisplayFullDetails, setShouldDisplayFullDetails] =
+		useState<boolean>(false);
+	const Icon =
+		DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
+
+	const onIncrement = (inputId: string) => () => {
+		const isValueBelowMin = !!(min && quantity < min);
+
+		onChange(inputId, (isValueBelowMin ? min : quantity + 1)!);
+	};
+
+	const onDecrement = (inputId: string) => () => {
+		const isValueAboveMax = !!(max && quantity > max);
+
+		return onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);
+	};
 
 	return (
 		<>
-			{!!index && <Divider sx={{ color: (theme) => theme.palette.primary.main }} />}
+			{!!index && (
+				<Divider sx={{ color: (theme) => theme.palette.primary.main }} />
+			)}
 			<ListItem
 				sx={{
 					display: "flex",
@@ -117,22 +135,22 @@ const OptionsInputDropdownItem = ({
 					className="options-input__dropdown-item-buttons"
 				>
 					<Button
-						onClick={() => onChange(id, quantity + 1)}
-						disabled={quantity === max}
+						onClick={onIncrement(id)}
+						disabled={!!(max && quantity && quantity >= max)}
 						className="options-input__dropdown-item-button"
 						role="button"
-						color="primary"
+						color={error ? "error" : "primary"}
 					>
-						<AddIcon sx={{ color: "primary" }} />
+						<AddIcon sx={{ color: error ? "black" : "primary" }} />
 					</Button>
 					<Button
-						onClick={() => onChange(id, quantity - 1)}
-						disabled={quantity === min}
+						onClick={onDecrement(id)}
+						disabled={!!(quantity && min) && quantity <= min}
 						className="options-input__dropdown-item-button"
 						role="button"
-						color="primary"
+						color={error ? "error" : "primary"}
 					>
-						<RemoveIcon sx={{ color: "primary" }} />
+						<RemoveIcon sx={{ color: error ? "black" : "primary" }} />
 					</Button>
 				</ButtonGroup>
 			</ListItem>

package/src/index.ts

@@ -1,2 +1,2 @@
-export { OptionsInput } from './options-input';
-export type { OptionsInputProps } from './options-input';
+export { OptionsInput } from "./options-input";
+export type { OptionsInputProps } from "./options-input";

package/src/options-input.tsx

@@ -1,4 +1,11 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, {
+	useState,
+	useEffect,
+	useCallback,
+	type ReactNode,
+	useMemo,
+	useRef
+} from "react";
 import classNames from "classnames";
 import Box from "@mui/material/Box";
 import List from "@mui/material/List";
@@ -11,6 +18,7 @@ import type { SxProps } from "@mui/material";
 import type { OptionsInputOption, OptionsInputValue } from "./types";
 import OptionsInputContentItem from "./components/options-input-content-item";
 import OptionsInputDropdownItem from "./components/options-input-dropdown-item";
+import { red } from "@mui/material/colors";
 import "./styles.scss";
 
 import "@emotion/react";
@@ -46,6 +54,10 @@ export type OptionsInputProps = {
 	itemsGap?: string | number;
 	/** Custom styles for container */
 	containerSx?: SxProps;
+	/** Flag indicating if there is an validation error */
+	error?: boolean;
+	/** Additional content displayed with small font under the input */
+	helperText?: ReactNode;
 };
 
 export const OptionsInput = ({
@@ -62,9 +74,13 @@ export const OptionsInput = ({
 	className,
 	itemsGap = 1,
 	containerSx = [],
+	error = false,
+	helperText,
 	...rest
 }: OptionsInputProps) => {
 	const [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);
+	const [inputContainerWidth, setInputContainerWidth] = useState(0);
+	const inputContainerRef = useRef<HTMLElement>();
 	const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();
 	const open = !!anchorEl;
 
@@ -72,13 +88,7 @@ export const OptionsInput = ({
 		() =>
 			setCurrentOptions(
 				options.map((option) => {
-					const defaultQuantity = defaultValue?.[option.id] ?? 0;
-					const minQuantity =
-						typeof option?.min === "number" && defaultQuantity < option.min
-							? option.min
-							: defaultQuantity;
-					const quantity =
-						typeof option?.max === "number" && minQuantity > option.max ? option.max : minQuantity;
+					const quantity = defaultValue?.[option.id] ?? 0;
 
 					return {
 						...option,
@@ -90,13 +100,43 @@ export const OptionsInput = ({
 		[options, defaultValue]
 	);
 
+	useEffect(() => {
+		setInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);
+	}, [inputContainerRef?.current?.clientWidth]);
+
+	const optionsExceedingBoundaries = useMemo(
+		() =>
+			currentOptions.reduce((exceedingOptions, { quantity, id, label }) => {
+				const option = options.find((option) => option.id === id);
+
+				if (
+					label &&
+					quantity !== undefined &&
+					((option?.max !== undefined && option?.max < quantity) ||
+						(option?.min !== undefined && option?.min > quantity))
+				) {
+					return [...exceedingOptions, label];
+				}
+
+				return exceedingOptions;
+			}, [] as string[]),
+		[currentOptions, options]
+	);
+
+	const isError = useMemo(
+		() => error || !!optionsExceedingBoundaries.length,
+		[error, optionsExceedingBoundaries]
+	);
+
 	const toggleInput = useCallback(
 		(event: React.MouseEvent<HTMLElement>) => {
 			const { currentTarget } = event;
 
 			if (!disabled && !readOnly) {
 				setTimeout(() => {
-					setAnchorEl((currentAnchor) => (currentAnchor ? undefined : currentTarget));
+					setAnchorEl((currentAnchor) =>
+						currentAnchor ? undefined : currentTarget
+					);
 				}, 0);
 			}
 		},
@@ -112,7 +152,7 @@ export const OptionsInput = ({
 						[currentOption.id]: currentOption.quantity
 					}),
 					{}
-				)
+				) as OptionsInputValue
 			);
 		}
 	};
@@ -126,7 +166,7 @@ export const OptionsInput = ({
 						[currentOption.id]: currentOption.quantity
 					}),
 					{}
-				)
+				) as OptionsInputValue
 			);
 		}
 	};
@@ -135,12 +175,14 @@ export const OptionsInput = ({
 		const newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);
 
 		const newCurrentOptions = currentOptions.map((option) => {
-			const maxQuantity = newQuantity > (option.max || Infinity) ? option.max : newQuantity;
+			const maxQuantity =
+				newQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;
 
 			return {
 				...option,
 				...(optionId === option.id && {
-					quantity: newQuantity < (option.min || -Infinity) ? option.min : maxQuantity,
+					quantity:
+						newQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,
 					inputQuantity: newValue
 				})
 			};
@@ -154,7 +196,7 @@ export const OptionsInput = ({
 						[currentOption.id]: currentOption.quantity
 					}),
 					{}
-				)
+				) as OptionsInputValue
 			);
 		}
 
@@ -166,14 +208,16 @@ export const OptionsInput = ({
 			currentOptions.map((option) => {
 				if (optionId !== option.id) return option;
 
-				const finalQuantity = Number.isNaN(Number(option.inputQuantity))
+				const finalQuantity = Number.isNaN(Number(option?.inputQuantity))
 					? 0
-					: Number(option.inputQuantity);
-				const maxQuantity = finalQuantity > (option.max || Infinity) ? option.max : finalQuantity;
+					: Number(option?.inputQuantity);
+				const maxQuantity =
+					finalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;
 
 				return {
 					...option,
-					inputQuantity: finalQuantity < (option.min || -Infinity) ? option.min : maxQuantity
+					inputQuantity:
+						finalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity
 				};
 			})
 		);
@@ -185,11 +229,12 @@ export const OptionsInput = ({
 				onClick={toggleInput}
 				onBlur={onInputBlur}
 				onFocus={onInputFocus}
-				className={classNames("options-input__container", {
+				ref={inputContainerRef}
+				className={classNames("options-input__container", className, {
 					"options-input__container--open": open,
 					"options-input__container--disabled": disabled,
 					"options-input__container--read-only": readOnly,
-					className
+					"options-input__container--error": isError
 				})}
 				sx={[
 					{ "&:hover": { borderColor: "#d3d3d3" } },
@@ -197,6 +242,10 @@ export const OptionsInput = ({
 					open && {
 						borderColor: (theme) => theme.palette.primary.main,
 						"&:hover": { borderColor: (theme) => theme.palette.primary.main }
+					},
+					isError && {
+						borderColor: red[700],
+						"&:hover": { borderColor: red[700] }
 					}
 				]}
 				data-testid={rest["data-testid"] || "options-input-container"}
@@ -207,8 +256,10 @@ export const OptionsInput = ({
 						.filter(
 							({ quantity, id: optionId, icon }) =>
 								!!(
-									DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] &&
-									(quantity !== 0 || persistentOptions.includes(optionId))
+									DesignSystemIcons[
+										capitalize(icon) as keyof typeof DesignSystemIcons
+									] &&
+									(quantity !== 0 || persistentOptions?.includes(optionId))
 								)
 						)
 						.map((option) => (
@@ -217,20 +268,44 @@ export const OptionsInput = ({
 								item={option}
 								disabled={disabled}
 								displayMinMax={displayMinMax}
+								error={
+									!!(option?.label && optionsExceedingBoundaries.includes(option.label))
+								}
 							/>
 						))}
 				</Box>
 				{!readOnly &&
 					(open ? (
-						<KeyboardArrowUpIcon color="primary" />
+						<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : "primary" }} />
 					) : (
 						<KeyboardArrowDownIcon
 							sx={{
-								color: (theme) => (disabled ? theme.palette.grey[400] : theme.palette.action.focus)
+								color: (theme) =>
+									disabled ? theme.palette.grey[400] : theme.palette.action.focus
 							}}
 						/>
 					))}
 			</Box>
+			{(helperText || isError) && (
+				<Box
+					sx={{
+						...(isError ? { color: red[700] } : {})
+					}}
+					marginTop={1}
+					marginLeft={2}
+					width={inputContainerWidth}
+					fontSize="small"
+				>
+					{optionsExceedingBoundaries.length
+						? (() => {
+								const messagePluralForm =
+									optionsExceedingBoundaries.length > 1 ? "s" : "";
+
+								return `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(", ")} option${messagePluralForm} ${messagePluralForm ? "are" : "is"} out of range.`;
+							})()
+						: helperText}
+				</Box>
+			)}
 			<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>
 				<Popper
 					open={open}
@@ -244,7 +319,8 @@ export const OptionsInput = ({
 						className="options-input__dropdown-items-list"
 						sx={{
 							bgcolor: "Background",
-							border: (theme) => `thin solid ${theme.palette.primary.main}`
+							border: (theme) =>
+								`thin solid ${isError ? red[700] : theme.palette.primary.main}`
 						}}
 					>
 						{currentOptions
@@ -260,6 +336,7 @@ export const OptionsInput = ({
 									onChange={onValueChange}
 									index={index}
 									displayMinMax={displayMinMax}
+									error={isError}
 								/>
 							))}
 					</List>

package/src/styles.scss

@@ -1,54 +1,54 @@
 .options-input {
-  &__container {
-    border: thin solid transparent;
-    border-radius: 0.25rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.25rem;
-    gap: 1rem;
-    cursor: pointer;
-    width: fit-content;
-
-    &--open {
-      border-bottom-width: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--disabled {
-      cursor: unset;
-    }
-
-    &--read-only {
-      cursor: unset;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  &__dropdown-item {
-    gap: 1rem;
-
-    &--empty {
-      background-color: #eeeeee;
-    }
-  }
-
-  &__dropdown-item-input {
-    width: 2rem;
-  }
-
-  &__dropdown-item-buttons {
-    & > button[role="button"] {
-      min-width: 2rem;
-      padding: 0;
-
-      &[disabled] > svg {
-        color: #0000001f;
-      }
-    }
-  }
+	&__container {
+		border: thin solid transparent;
+		border-radius: 0.25rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.25rem;
+		gap: 1rem;
+		cursor: pointer;
+		width: fit-content;
+
+		&--open {
+			border-bottom-width: 0;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		&--disabled {
+			cursor: unset;
+		}
+
+		&--read-only {
+			cursor: unset;
+
+			&:hover {
+				border-color: transparent;
+			}
+		}
+	}
+
+	&__dropdown-item {
+		gap: 1rem;
+
+		&--empty {
+			background-color: #eeeeee;
+		}
+	}
+
+	&__dropdown-item-input {
+		width: 2rem;
+	}
+
+	&__dropdown-item-buttons {
+		& > button[role="button"] {
+			min-width: 2rem;
+			padding: 0;
+
+			&[disabled] > svg {
+				color: #0000001f;
+			}
+		}
+	}
 }

package/src/types.ts

@@ -1,14 +1,14 @@
 export interface OptionsInputOption {
-    id: string;
-    icon: string;
-    label?: string;
-    details?: string;
-    min?: number;
-    max?: number;
-    quantity?: number;
-    inputQuantity?: string | number;
+	id: string;
+	icon: string;
+	label?: string;
+	details?: string;
+	min?: number;
+	max?: number;
+	quantity?: number;
+	inputQuantity?: string | number;
 }
 
 export interface OptionsInputValue {
-    [key: string]: number;
+	[key: string]: number;
 }

package/src/utils.ts

@@ -1 +1,2 @@
-export const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+export const capitalize = (str: string) =>
+	str.charAt(0).toUpperCase() + str.slice(1);

package/tsconfig.build.json

@@ -1,8 +1,8 @@
 {
-    "extends": "../../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "dist",
-        "baseUrl": "../.."
-    },
-    "exclude": ["src/**/__tests__/**"],
-}
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "dist",
+		"baseUrl": "../.."
+	},
+	"exclude": ["src/**/__tests__/**"]
+}