@simplybusiness/mobius 5.5.0 → 5.6.0

package/dist/esm/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { TextAreaInput } from \"../TextAreaInput\";\nimport { Label } from \"../Label\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport {\n  UseTextFieldProps,\n  useTextField,\n  useValidationClasses,\n} from \"../../hooks\";\nimport { Stack } from \"../Stack\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n  extends UseTextFieldProps,\n    DOMProps,\n    RefAttributes<TextAreaElementType> {\n  className?: string;\n  errorMessage?: string;\n}\n\nexport type TextAreaRef = Ref<TextAreaElementType>;\n\nconst TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =\n  forwardRef((props: TextAreaProps, ref: TextAreaRef) => {\n    const {\n      isDisabled,\n      className,\n      errorMessage,\n      label,\n      validationState,\n      isInvalid,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n    // Set class name for atom, including interaction state\n    const classes = classNames(\"mobius\", \"mobius-text-area\", className);\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n    const inputClasses = classNames(\n      \"mobius-text-area__input\",\n      validationClasses,\n    );\n    const labelClasses = classNames(\n      {\n        \"--is-disabled\": isDisabled,\n      },\n      validationClasses,\n    );\n\n    return (\n      <Stack className={classes} gap=\"xs\">\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {props.label}\n          </Label>\n        )}\n        <TextAreaInput\n          {...otherProps}\n          {...inputProps}\n          ref={ref}\n          className={inputClasses}\n          isDisabled={isDisabled}\n          aria-invalid={errorMessage != null}\n        />\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </Stack>\n    );\n  });\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\n"],"names":["forwardRef","classNames","TextAreaInput","Label","ErrorMessage","useTextField","useValidationClasses","Stack","TextArea","props","ref","isDisabled","className","errorMessage","label","validationState","isInvalid","otherProps","inputProps","labelProps","errorMessageProps","classes","validationClasses","inputClasses","labelClasses","gap","aria-invalid","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAuB,QAAQ;AACvD,OAAOC,gBAAgB,oBAAoB;AAE3C,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,KAAK,QAAQ,WAAW;AAEjC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAEEC,YAAY,EACZC,oBAAoB,QACf,cAAc;AACrB,SAASC,KAAK,QAAQ,WAAW;AAcjC,MAAMC,yBACJR,WAAW,CAACS,OAAsBC;IAChC,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,YAAY,EACZC,KAAK,EACLC,eAAe,EACfC,SAAS,EACT,GAAGC,YACJ,GAAGR;IAEJ,MAAM,EAAES,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGf,aAAaI;IAEnE,uDAAuD;IACvD,MAAMY,UAAUpB,WAAW,UAAU,oBAAoBW;IACzD,MAAMU,oBAAoBhB,qBAAqB;QAC7CS;QACAC;IACF;IACA,MAAMO,eAAetB,WACnB,2BACAqB;IAEF,MAAME,eAAevB,WACnB;QACE,iBAAiBU;IACnB,GACAW;IAGF,qBACE,MAACf;QAAMK,WAAWS;QAASI,KAAI;;YAC5BX,uBACC,KAACX;gBAAO,GAAGgB,UAAU;gBAAEP,WAAWY;0BAC/Bf,MAAMK,KAAK;;0BAGhB,KAACZ;gBACE,GAAGe,UAAU;gBACb,GAAGC,UAAU;gBACdR,KAAKA;gBACLE,WAAWW;gBACXZ,YAAYA;gBACZe,gBAAcb,gBAAgB;;0BAEhC,KAACT;gBAAc,GAAGgB,iBAAiB;gBAAEP,cAAcA;;;;AAGzD;AAEFL,SAASmB,WAAW,GAAG;AACvB,SAASnB,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, RefAttributes, forwardRef } from \"react\";\nimport {\n  UseTextFieldProps,\n  useTextField,\n  useValidationClasses,\n} from \"../../hooks\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { TextAreaInput } from \"../TextAreaInput\";\n\nexport type TextAreaElementType = HTMLTextAreaElement;\n\nexport interface TextAreaProps\n  extends UseTextFieldProps,\n    DOMProps,\n    RefAttributes<TextAreaElementType> {\n  className?: string;\n  errorMessage?: string;\n}\n\nexport type TextAreaRef = Ref<TextAreaElementType>;\n\nconst TextArea: ForwardedRefComponent<TextAreaProps, TextAreaElementType> =\n  forwardRef((props: TextAreaProps, ref: TextAreaRef) => {\n    const {\n      isDisabled,\n      className,\n      errorMessage,\n      label,\n      validationState,\n      isInvalid,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField(props);\n\n    // Set class name for atom, including interaction state\n    const classes = classNames(\"mobius\", \"mobius-text-area\", className);\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n    const inputClasses = classNames(\n      \"mobius-text-area__input\",\n      validationClasses,\n    );\n    const labelClasses = classNames(\n      {\n        \"--is-disabled\": isDisabled,\n      },\n      validationClasses,\n    );\n\n    return (\n      <Stack className={classes} gap=\"xs\">\n        {label && (\n          <Label {...labelProps} className={labelClasses}>\n            {props.label}\n          </Label>\n        )}\n        <TextAreaInput\n          {...otherProps}\n          {...inputProps}\n          ref={ref}\n          className={inputClasses}\n          isDisabled={isDisabled}\n          aria-invalid={errorMessage != null}\n        />\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </Stack>\n    );\n  });\n\nTextArea.displayName = \"TextArea\";\nexport { TextArea };\n"],"names":["classNames","forwardRef","useTextField","useValidationClasses","ErrorMessage","Label","Stack","TextAreaInput","TextArea","props","ref","isDisabled","className","errorMessage","label","validationState","isInvalid","otherProps","inputProps","labelProps","errorMessageProps","classes","validationClasses","inputClasses","labelClasses","gap","aria-invalid","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAA6BC,UAAU,QAAQ,QAAQ;AACvD,SAEEC,YAAY,EACZC,oBAAoB,QACf,cAAc;AAGrB,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,aAAa,QAAQ,mBAAmB;AAcjD,MAAMC,yBACJP,WAAW,CAACQ,OAAsBC;IAChC,MAAM,EACJC,UAAU,EACVC,SAAS,EACTC,YAAY,EACZC,KAAK,EACLC,eAAe,EACfC,SAAS,EACT,GAAGC,YACJ,GAAGR;IAEJ,MAAM,EAAES,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGlB,aAAaO;IAEnE,uDAAuD;IACvD,MAAMY,UAAUrB,WAAW,UAAU,oBAAoBY;IACzD,MAAMU,oBAAoBnB,qBAAqB;QAC7CY;QACAC;IACF;IACA,MAAMO,eAAevB,WACnB,2BACAsB;IAEF,MAAME,eAAexB,WACnB;QACE,iBAAiBW;IACnB,GACAW;IAGF,qBACE,MAAChB;QAAMM,WAAWS;QAASI,KAAI;;YAC5BX,uBACC,KAACT;gBAAO,GAAGc,UAAU;gBAAEP,WAAWY;0BAC/Bf,MAAMK,KAAK;;0BAGhB,KAACP;gBACE,GAAGU,UAAU;gBACb,GAAGC,UAAU;gBACdR,KAAKA;gBACLE,WAAWW;gBACXZ,YAAYA;gBACZe,gBAAcb,gBAAgB;;0BAEhC,KAACT;gBAAc,GAAGgB,iBAAiB;gBAAEP,cAAcA;;;;AAGzD;AAEFL,SAASmB,WAAW,GAAG;AACvB,SAASnB,QAAQ,GAAG"}

package/dist/esm/components/TextAreaInput/TextAreaInput.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
+import { forwardRef } from "react";
 const TextAreaInput = /*#__PURE__*/ forwardRef((props, ref)=>{
     // Extract interaction props:
-    const { isSelected, isDisabled, ...otherProps } = props;
+    const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } = props;
     const classes = classNames("mobius", "mobius-text-area__input", {
         "--is-disabled": isDisabled,
-        "--is-selected": isSelected
+        "--is-selected": isSelected,
+        "--is-required": isRequired
     }, otherProps.className);
     return /*#__PURE__*/ _jsx("textarea", {
         ref: ref,
         ...otherProps,
+        required: isRequired,
+        readOnly: isReadOnly,
         className: classes
     });
 });

package/dist/esm/components/TextAreaInput/TextAreaInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextAreaInput/TextAreaInput.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\n\nexport type TextAreaInputElementType = HTMLTextAreaElement;\n\nexport interface InteractionStateProps {\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}\n\nexport interface TextAreaInputProps\n  extends DOMProps,\n    InteractionStateProps,\n    RefAttributes<TextAreaInputElementType> {\n  className?: string;\n}\n\nexport type TextAreaInputRef = Ref<TextAreaInputElementType>;\n\nconst TextAreaInput: ForwardedRefComponent<\n  TextAreaInputProps,\n  TextAreaInputElementType\n> = forwardRef((props: TextAreaInputProps, ref: TextAreaInputRef) => {\n  // Extract interaction props:\n  const { isSelected, isDisabled, ...otherProps } = props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text-area__input\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": isSelected,\n    },\n    otherProps.className,\n  );\n\n  return <textarea ref={ref} {...otherProps} className={classes} />;\n});\n\nTextAreaInput.displayName = \"TextAreaInput\";\nexport { TextAreaInput };\n"],"names":["forwardRef","classNames","TextAreaInput","props","ref","isSelected","isDisabled","otherProps","classes","className","textarea","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAuB,QAAQ;AACvD,OAAOC,gBAAgB,oBAAoB;AAoB3C,MAAMC,8BAGFF,WAAW,CAACG,OAA2BC;IACzC,6BAA6B;IAC7B,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,YAAY,GAAGJ;IAElD,MAAMK,UAAUP,WACd,UACA,2BACA;QACE,iBAAiBK;QACjB,iBAAiBD;IACnB,GACAE,WAAWE,SAAS;IAGtB,qBAAO,KAACC;QAASN,KAAKA;QAAM,GAAGG,UAAU;QAAEE,WAAWD;;AACxD;AAEAN,cAAcS,WAAW,GAAG;AAC5B,SAAST,aAAa,GAAG"}
+{"version":3,"sources":["../../../../src/components/TextAreaInput/TextAreaInput.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport { forwardRef, Ref, RefAttributes } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type TextAreaInputElementType = HTMLTextAreaElement;\n\nexport interface InteractionStateProps {\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}\n\nexport interface TextAreaInputProps\n  extends DOMProps,\n    InteractionStateProps,\n    RefAttributes<TextAreaInputElementType> {\n  className?: string;\n  isReadOnly?: boolean;\n  isRequired?: boolean;\n}\n\nexport type TextAreaInputRef = Ref<TextAreaInputElementType>;\n\nconst TextAreaInput: ForwardedRefComponent<\n  TextAreaInputProps,\n  TextAreaInputElementType\n> = forwardRef((props: TextAreaInputProps, ref: TextAreaInputRef) => {\n  // Extract interaction props:\n  const { isSelected, isDisabled, isReadOnly, isRequired, ...otherProps } =\n    props;\n\n  const classes = classNames(\n    \"mobius\",\n    \"mobius-text-area__input\",\n    {\n      \"--is-disabled\": isDisabled,\n      \"--is-selected\": isSelected,\n      \"--is-required\": isRequired,\n    },\n    otherProps.className,\n  );\n\n  return (\n    <textarea\n      ref={ref}\n      {...otherProps}\n      required={isRequired}\n      readOnly={isReadOnly}\n      className={classes}\n    />\n  );\n});\n\nTextAreaInput.displayName = \"TextAreaInput\";\nexport { TextAreaInput };\n"],"names":["classNames","forwardRef","TextAreaInput","props","ref","isSelected","isDisabled","isReadOnly","isRequired","otherProps","classes","className","textarea","required","readOnly","displayName"],"mappings":";AAAA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,QAA4B,QAAQ;AAsBvD,MAAMC,8BAGFD,WAAW,CAACE,OAA2BC;IACzC,6BAA6B;IAC7B,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,YAAY,GACrEN;IAEF,MAAMO,UAAUV,WACd,UACA,2BACA;QACE,iBAAiBM;QACjB,iBAAiBD;QACjB,iBAAiBG;IACnB,GACAC,WAAWE,SAAS;IAGtB,qBACE,KAACC;QACCR,KAAKA;QACJ,GAAGK,UAAU;QACdI,UAAUL;QACVM,UAAUP;QACVI,WAAWD;;AAGjB;AAEAR,cAAca,WAAW,GAAG;AAC5B,SAASb,aAAa,GAAG"}

package/dist/esm/components/TextField/TextField.js

@@ -5,10 +5,10 @@ import { forwardRef } from "react";
 import { useTextField, useValidationClasses } from "../../hooks";
 import { ErrorMessage } from "../ErrorMessage";
 import { Label } from "../Label";
-import { adornmentWithClassName } from "./adornmentWithClassName";
 import { Stack } from "../Stack";
+import { adornmentWithClassName } from "./adornmentWithClassName";
 const TextField = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { isDisabled, type = "text", validationState, isInvalid, className, label, errorMessage, children, isRequired, prefixInside, prefixOutside, suffixInside, suffixOutside, ...otherProps } = props;
+    const { isDisabled, isReadOnly, type = "text", validationState, isInvalid, className, label, errorMessage, children, isRequired, prefixInside, prefixOutside, suffixInside, suffixOutside, ...otherProps } = props;
     const { inputProps, labelProps, errorMessageProps } = useTextField({
         ...props,
         "aria-errormessage": errorMessage
@@ -54,7 +54,8 @@ const TextField = /*#__PURE__*/ forwardRef((props, ref)=>{
                                 ...inputProps,
                                 ref: ref,
                                 type: type,
-                                className: inputClasses
+                                className: inputClasses,
+                                readOnly: isReadOnly
                             }),
                             adornmentWithClassName(suffixInside, "mobius-text-field__suffix-inside")
                         ]

package/dist/esm/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  HTMLInputTypeAttribute,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n} from \"react\";\nimport {\n  UseTextFieldProps,\n  useTextField,\n  useValidationClasses,\n} from \"../../hooks\";\nimport { DOMProps, FocusEvents } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport { Stack } from \"../Stack\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n  extends DOMProps,\n    FocusEvents,\n    UseTextFieldProps,\n    RefAttributes<TextFieldElementType> {\n  className?: string;\n  errorMessage?: string;\n  children?: ReactNode;\n  label?: string;\n  type?: Exclude<\n    HTMLInputTypeAttribute,\n    | \"button\"\n    | \"checkbox\"\n    | \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"radio\"\n    | \"range\"\n    | \"reset\"\n    | \"submit\"\n    | \"week\"\n  >;\n  prefixInside?: ReactElement;\n  prefixOutside?: ReactElement;\n  suffixInside?: ReactElement;\n  suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =\n  forwardRef((props: TextFieldProps, ref: TextFieldRef) => {\n    const {\n      isDisabled,\n      type = \"text\",\n      validationState,\n      isInvalid,\n      className,\n      label,\n      errorMessage,\n      children,\n      isRequired,\n      prefixInside,\n      prefixOutside,\n      suffixInside,\n      suffixOutside,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField({\n      ...props,\n      \"aria-errormessage\": errorMessage,\n    });\n\n    const hidden = type === \"hidden\";\n\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n\n    const textfieldClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n      \"--is-hidden\": hidden,\n      [className || \"\"]: true,\n    };\n\n    const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n    const labelClasses = classNames(\n      {\n        \"--is-disabled\": isDisabled,\n      },\n      validationClasses,\n    );\n\n    const containerClasses = classNames(\n      \"mobius\",\n      \"mobius-text-field\",\n      sharedClasses,\n    );\n\n    const inputClasses = classNames(\n      \"mobius\",\n      \"mobius-text-field__input\",\n      sharedClasses,\n    );\n\n    const inputWrapperClasses = classNames(\n      \"mobius-text-field__input-wrapper\",\n      sharedClasses,\n    );\n\n    return (\n      <Stack gap=\"xs\" className={containerClasses}>\n        {label && !hidden && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className=\"mobius-text-field__inner-container\">\n          {adornmentWithClassName(\n            prefixOutside,\n            \"mobius-text-field__prefix-outside\",\n          )}\n          <div className={inputWrapperClasses}>\n            {adornmentWithClassName(\n              prefixInside,\n              \"mobius-text-field__prefix-inside\",\n            )}\n            <input\n              {...otherProps}\n              {...inputProps}\n              ref={ref}\n              type={type}\n              className={inputClasses}\n            />\n            {adornmentWithClassName(\n              suffixInside,\n              \"mobius-text-field__suffix-inside\",\n            )}\n          </div>\n          {adornmentWithClassName(\n            suffixOutside,\n            \"mobius-text-field__suffix-outside\",\n          )}\n        </div>\n        {children && (\n          <div className=\"mobius-text-field__children\">{children}</div>\n        )}\n\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </Stack>\n    );\n  });\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n"],"names":["classNames","forwardRef","useTextField","useValidationClasses","ErrorMessage","Label","adornmentWithClassName","Stack","TextField","props","ref","isDisabled","type","validationState","isInvalid","className","label","errorMessage","children","isRequired","prefixInside","prefixOutside","suffixInside","suffixOutside","otherProps","inputProps","labelProps","errorMessageProps","hidden","validationClasses","textfieldClasses","sharedClasses","labelClasses","containerClasses","inputClasses","inputWrapperClasses","gap","div","input","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAMEC,UAAU,QACL,QAAQ;AACf,SAEEC,YAAY,EACZC,oBAAoB,QACf,cAAc;AAGrB,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,KAAK,QAAQ,WAAW;AAoCjC,MAAMC,0BACJP,WAAW,CAACQ,OAAuBC;IACjC,MAAM,EACJC,UAAU,EACVC,OAAO,MAAM,EACbC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACb,GAAGC,YACJ,GAAGf;IAEJ,MAAM,EAAEgB,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAGzB,aAAa;QACjE,GAAGO,KAAK;QACR,qBAAqBQ;IACvB;IAEA,MAAMW,SAAShB,SAAS;IAExB,MAAMiB,oBAAoB1B,qBAAqB;QAC7CU;QACAC;IACF;IAEA,MAAMgB,mBAAmB;QACvB,iBAAiBnB;QACjB,iBAAiB,OAAOQ,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,eAAeS;QACf,CAACb,aAAa,GAAG,EAAE;IACrB;IAEA,MAAMgB,gBAAgB/B,WAAW6B,mBAAmBC;IAEpD,MAAME,eAAehC,WACnB;QACE,iBAAiBW;IACnB,GACAkB;IAGF,MAAMI,mBAAmBjC,WACvB,UACA,qBACA+B;IAGF,MAAMG,eAAelC,WACnB,UACA,4BACA+B;IAGF,MAAMI,sBAAsBnC,WAC1B,oCACA+B;IAGF,qBACE,MAACxB;QAAM6B,KAAI;QAAKrB,WAAWkB;;YACxBjB,SAAS,CAACY,wBACT,KAACvB;gBAAO,GAAGqB,UAAU;gBAAEX,WAAWiB;0BAC/BhB;;0BAGL,MAACqB;gBAAItB,WAAU;;oBACZT,uBACCe,eACA;kCAEF,MAACgB;wBAAItB,WAAWoB;;4BACb7B,uBACCc,cACA;0CAEF,KAACkB;gCACE,GAAGd,UAAU;gCACb,GAAGC,UAAU;gCACdf,KAAKA;gCACLE,MAAMA;gCACNG,WAAWmB;;4BAEZ5B,uBACCgB,cACA;;;oBAGHhB,uBACCiB,eACA;;;YAGHL,0BACC,KAACmB;gBAAItB,WAAU;0BAA+BG;;0BAGhD,KAACd;gBAAc,GAAGuB,iBAAiB;gBAAEV,cAAcA;;;;AAGzD;AAEFT,UAAU+B,WAAW,GAAG;AACxB,SAAS/B,SAAS,GAAG"}
+{"version":3,"sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  HTMLInputTypeAttribute,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n} from \"react\";\nimport {\n  UseTextFieldProps,\n  useTextField,\n  useValidationClasses,\n} from \"../../hooks\";\nimport { DOMProps, FocusEvents } from \"../../types\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n  extends DOMProps,\n    FocusEvents,\n    UseTextFieldProps,\n    RefAttributes<TextFieldElementType> {\n  className?: string;\n  errorMessage?: string;\n  children?: ReactNode;\n  label?: string;\n  type?: Exclude<\n    HTMLInputTypeAttribute,\n    | \"button\"\n    | \"checkbox\"\n    | \"color\"\n    | \"date\"\n    | \"datetime-local\"\n    | \"file\"\n    | \"image\"\n    | \"month\"\n    | \"radio\"\n    | \"range\"\n    | \"reset\"\n    | \"submit\"\n    | \"week\"\n  >;\n  prefixInside?: ReactElement;\n  prefixOutside?: ReactElement;\n  suffixInside?: ReactElement;\n  suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField: ForwardedRefComponent<TextFieldProps, TextFieldElementType> =\n  forwardRef((props: TextFieldProps, ref: TextFieldRef) => {\n    const {\n      isDisabled,\n      isReadOnly,\n      type = \"text\",\n      validationState,\n      isInvalid,\n      className,\n      label,\n      errorMessage,\n      children,\n      isRequired,\n      prefixInside,\n      prefixOutside,\n      suffixInside,\n      suffixOutside,\n      ...otherProps\n    } = props;\n\n    const { inputProps, labelProps, errorMessageProps } = useTextField({\n      ...props,\n      \"aria-errormessage\": errorMessage,\n    });\n\n    const hidden = type === \"hidden\";\n\n    const validationClasses = useValidationClasses({\n      validationState,\n      isInvalid,\n    });\n\n    const textfieldClasses = {\n      \"--is-disabled\": isDisabled,\n      \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n      \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n      \"--is-hidden\": hidden,\n      [className || \"\"]: true,\n    };\n\n    const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n    const labelClasses = classNames(\n      {\n        \"--is-disabled\": isDisabled,\n      },\n      validationClasses,\n    );\n\n    const containerClasses = classNames(\n      \"mobius\",\n      \"mobius-text-field\",\n      sharedClasses,\n    );\n\n    const inputClasses = classNames(\n      \"mobius\",\n      \"mobius-text-field__input\",\n      sharedClasses,\n    );\n\n    const inputWrapperClasses = classNames(\n      \"mobius-text-field__input-wrapper\",\n      sharedClasses,\n    );\n\n    return (\n      <Stack gap=\"xs\" className={containerClasses}>\n        {label && !hidden && (\n          <Label {...labelProps} className={labelClasses}>\n            {label}\n          </Label>\n        )}\n        <div className=\"mobius-text-field__inner-container\">\n          {adornmentWithClassName(\n            prefixOutside,\n            \"mobius-text-field__prefix-outside\",\n          )}\n          <div className={inputWrapperClasses}>\n            {adornmentWithClassName(\n              prefixInside,\n              \"mobius-text-field__prefix-inside\",\n            )}\n            <input\n              {...otherProps}\n              {...inputProps}\n              ref={ref}\n              type={type}\n              className={inputClasses}\n              readOnly={isReadOnly}\n            />\n            {adornmentWithClassName(\n              suffixInside,\n              \"mobius-text-field__suffix-inside\",\n            )}\n          </div>\n          {adornmentWithClassName(\n            suffixOutside,\n            \"mobius-text-field__suffix-outside\",\n          )}\n        </div>\n        {children && (\n          <div className=\"mobius-text-field__children\">{children}</div>\n        )}\n\n        <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n      </Stack>\n    );\n  });\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n"],"names":["classNames","forwardRef","useTextField","useValidationClasses","ErrorMessage","Label","Stack","adornmentWithClassName","TextField","props","ref","isDisabled","isReadOnly","type","validationState","isInvalid","className","label","errorMessage","children","isRequired","prefixInside","prefixOutside","suffixInside","suffixOutside","otherProps","inputProps","labelProps","errorMessageProps","hidden","validationClasses","textfieldClasses","sharedClasses","labelClasses","containerClasses","inputClasses","inputWrapperClasses","gap","div","input","readOnly","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAMEC,UAAU,QACL,QAAQ;AACf,SAEEC,YAAY,EACZC,oBAAoB,QACf,cAAc;AAGrB,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,sBAAsB,QAAQ,2BAA2B;AAoClE,MAAMC,0BACJP,WAAW,CAACQ,OAAuBC;IACjC,MAAM,EACJC,UAAU,EACVC,UAAU,EACVC,OAAO,MAAM,EACbC,eAAe,EACfC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,aAAa,EACb,GAAGC,YACJ,GAAGhB;IAEJ,MAAM,EAAEiB,UAAU,EAAEC,UAAU,EAAEC,iBAAiB,EAAE,GAAG1B,aAAa;QACjE,GAAGO,KAAK;QACR,qBAAqBS;IACvB;IAEA,MAAMW,SAAShB,SAAS;IAExB,MAAMiB,oBAAoB3B,qBAAqB;QAC7CW;QACAC;IACF;IAEA,MAAMgB,mBAAmB;QACvB,iBAAiBpB;QACjB,iBAAiB,OAAOS,eAAe,aAAaA;QACpD,iBAAiB,OAAOA,eAAe,aAAa,CAACA;QACrD,eAAeS;QACf,CAACb,aAAa,GAAG,EAAE;IACrB;IAEA,MAAMgB,gBAAgBhC,WAAW8B,mBAAmBC;IAEpD,MAAME,eAAejC,WACnB;QACE,iBAAiBW;IACnB,GACAmB;IAGF,MAAMI,mBAAmBlC,WACvB,UACA,qBACAgC;IAGF,MAAMG,eAAenC,WACnB,UACA,4BACAgC;IAGF,MAAMI,sBAAsBpC,WAC1B,oCACAgC;IAGF,qBACE,MAAC1B;QAAM+B,KAAI;QAAKrB,WAAWkB;;YACxBjB,SAAS,CAACY,wBACT,KAACxB;gBAAO,GAAGsB,UAAU;gBAAEX,WAAWiB;0BAC/BhB;;0BAGL,MAACqB;gBAAItB,WAAU;;oBACZT,uBACCe,eACA;kCAEF,MAACgB;wBAAItB,WAAWoB;;4BACb7B,uBACCc,cACA;0CAEF,KAACkB;gCACE,GAAGd,UAAU;gCACb,GAAGC,UAAU;gCACdhB,KAAKA;gCACLG,MAAMA;gCACNG,WAAWmB;gCACXK,UAAU5B;;4BAEXL,uBACCgB,cACA;;;oBAGHhB,uBACCiB,eACA;;;YAGHL,0BACC,KAACmB;gBAAItB,WAAU;0BAA+BG;;0BAGhD,KAACf;gBAAc,GAAGwB,iBAAiB;gBAAEV,cAAcA;;;;AAGzD;AAEFV,UAAUiC,WAAW,GAAG;AACxB,SAASjC,SAAS,GAAG"}

package/dist/types/components/Combobox/Combobox.d.ts

@@ -1,3 +1,3 @@
-import type { ComboboxProps, ComboboxElementType } from "./types";
 import type { ForwardedRefComponent } from "../../types";
+import type { ComboboxElementType, ComboboxProps } from "./types";
 export declare const Combobox: ForwardedRefComponent<ComboboxProps, ComboboxElementType>;

package/dist/types/components/Combobox/Combobox.stories.d.ts

@@ -3,5 +3,8 @@ import { Combobox } from ".";
 type StoryType = StoryObj<typeof Combobox>;
 declare const meta: Meta<typeof Combobox>;
 export declare const Default: StoryType;
-export declare const ObjectOptions: StoryType;
+export declare const OptionsObject: StoryType;
+export declare const GroupedOptions: StoryType;
+export declare const WithIcon: StoryType;
+export declare const StateSelector: StoryType;
 export default meta;

package/dist/types/components/Combobox/Listbox.d.ts

@@ -0,0 +1,10 @@
+import type { ComboboxOption, ComboboxOptions } from "./types";
+export type ListboxProps = {
+    id: string;
+    options: ComboboxOptions;
+    highlightedIndex: number;
+    highlightedGroupIndex: number;
+    onOptionSelect: (option: ComboboxOption) => void;
+    expanded?: boolean;
+};
+export declare const Listbox: ({ id, options, highlightedIndex, highlightedGroupIndex, onOptionSelect, expanded, }: ListboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Combobox/Option.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxOptionProps } from "./types";
+export declare const Option: ({ option, index, groupIndex, isHighlighted, onOptionSelect, id, }: ComboboxOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Combobox/fixtures.d.ts

@@ -3,3 +3,8 @@ export declare const FRUITS_OBJECTS: {
     label: string;
     value: string;
 }[];
+export declare const FRUITS_GROUPS: {
+    heading: string;
+    options: string[];
+}[];
+export declare const US_STATES: string[];

package/dist/types/components/Combobox/types.d.ts

@@ -1,8 +1,10 @@
-import type { Ref } from "react";
+import type { ReactElement, Ref } from "react";
 import type { TextFieldElementType, TextFieldProps } from "../TextField";
 export type ComboboxProps = TextFieldProps & {
     /** The list of options to display in the dropdown */
-    options: ComboboxOption[] | ((filter: string) => ComboboxOption[]) | ((filter: string) => Promise<ComboboxOption[]>);
+    options: ComboboxOptions | ((filter: string) => ComboboxOptions) | ((filter: string) => Promise<ComboboxOptions>);
+    /** An icon to display in TextField (left side) */
+    icon?: ReactElement;
     /** The default value of the selected option */
     defaultValue?: string | undefined;
     /** Callback when the selected option changes */
@@ -12,5 +14,18 @@ export type ComboboxOption = string | {
     label: string;
     value: string;
 };
+export type ComboboxOptionGroup = {
+    heading: string;
+    options: ComboboxOption[];
+};
+export type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];
 export type ComboboxElementType = TextFieldElementType;
 export type ComboboxRef = Ref<ComboboxElementType>;
+export type ComboboxOptionProps = {
+    option: ComboboxOption;
+    index: number;
+    groupIndex?: number;
+    isHighlighted: boolean;
+    onOptionSelect: (option: ComboboxOption) => void;
+    id: string;
+};

package/dist/types/components/Combobox/useComboboxHighlight.d.ts

@@ -0,0 +1,10 @@
+import type { ComboboxOptions } from "./types";
+export declare function useComboboxHighlight(options: ComboboxOptions): {
+    highlightedIndex: number;
+    highlightedGroupIndex: number;
+    highlightPreviousOption: () => void;
+    highlightNextOption: () => void;
+    highlightFirstOption: () => void;
+    highlightLastOption: () => void;
+    clearHighlight: () => void;
+};

package/dist/types/components/Combobox/useComboboxHighlight.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Combobox/utils.d.ts

@@ -0,0 +1,6 @@
+import type { ComboboxOption, ComboboxOptionGroup, ComboboxOptions } from "./types";
+export declare function isOptionGroup(options: ComboboxOptions): options is ComboboxOptionGroup[];
+export declare const getOptionValue: (option: ComboboxOption | undefined) => string | undefined;
+export declare const getOptionLabel: (option: ComboboxOption | undefined) => string | undefined;
+export declare function filterOptions(options: ComboboxOptions, inputValue: string): ComboboxOptions;
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/types/components/Combobox/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/TextArea/TextArea.d.ts

@@ -1,7 +1,7 @@
 import { Ref, RefAttributes } from "react";
-import { DOMProps } from "../../types/dom";
-import { ForwardedRefComponent } from "../../types/components";
 import { UseTextFieldProps } from "../../hooks";
+import { ForwardedRefComponent } from "../../types/components";
+import { DOMProps } from "../../types/dom";
 export type TextAreaElementType = HTMLTextAreaElement;
 export interface TextAreaProps extends UseTextFieldProps, DOMProps, RefAttributes<TextAreaElementType> {
     className?: string;

package/dist/types/components/TextAreaInput/TextAreaInput.d.ts

@@ -1,6 +1,6 @@
 import { Ref, RefAttributes } from "react";
-import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
+import { DOMProps } from "../../types/dom";
 export type TextAreaInputElementType = HTMLTextAreaElement;
 export interface InteractionStateProps {
     isSelected?: boolean;
@@ -8,6 +8,8 @@ export interface InteractionStateProps {
 }
 export interface TextAreaInputProps extends DOMProps, InteractionStateProps, RefAttributes<TextAreaInputElementType> {
     className?: string;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
 }
 export type TextAreaInputRef = Ref<TextAreaInputElementType>;
 declare const TextAreaInput: ForwardedRefComponent<TextAreaInputProps, TextAreaInputElementType>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Combobox/Combobox.css

@@ -1,25 +1,51 @@
+:root {
+  /* --combobox-max-width: 562px; */
+  interpolate-size: allow-keywords;
+  --combobox-border-color: #ccc;
+  --combobox-group-color: var(--color-text);
+  --combobox-group-background-color: #dad6f7;
+  --combobox-selected-background-color: var(--color-primary);
+  --listbox-height: 200px;
+  --listbox-gap: 4px;
+  --option-padding: var(--size-xs) var(--size-lg);
+}
+
 .mobius-combobox {
   position: relative;
+  width: 100%;
 }
 
 .mobius-combobox__list {
   position: absolute;
   margin: 0;
+  margin-top: var(--listbox-gap);
   padding: 0;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 1000;
   background-color: #fff;
-  border: 1px solid #ccc;
-  border-top: 0;
+  border: 1px solid var(--combobox-border-color);
+  border-radius: var(--radius-1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  max-height: 200px;
+  max-height: var(--listbox-height);
   overflow-y: auto;
+  height: 0;
+  opacity: 0;
+  transition:
+    box-shadow 0.3s ease,
+    height 0.3s ease,
+    opacity 0.3s ease;
+  transition-behavior: allow-discrete;
+
+  &.expanded {
+    opacity: 1;
+    height: auto;
+  }
 }
 
 .mobius-combobox__option {
-  padding: 0.5rem 1rem;
+  padding: var(--option-padding);
   cursor: pointer;
 }
 
@@ -28,3 +54,24 @@
   background-color: var(--color-primary);
   color: var(--color-neutral-100);
 }
+
+/* Group styles */
+[role="group"] {
+  margin: 0;
+  padding: 0;
+}
+
+[role="group"] > [role="presentation"] {
+  display: block;
+  margin: 0;
+  padding: var(--option-padding);
+  font-weight: bold;
+  color: var(--combobox-group-color);
+  background-color: var(--combobox-group-background-color);
+}
+
+[role="option"] {
+  position: relative;
+  display: block;
+  cursor: pointer;
+}

package/src/components/Combobox/Combobox.mdx

@@ -0,0 +1,147 @@
+import { ArgTypes, Meta, Story } from "@storybook/blocks";
+import { Combobox } from "./Combobox";
+import * as ComboboxStories from "./Combobox.stories";
+
+<Meta of={ComboboxStories} />
+
+# Combobox
+
+A `Combobox` is an enhanced `Select` input, which allows users to filter results as they type. It supports all of the common input props, with the main difference being that the `options` prop is supplied as data (or a function), rather than nested `children`.
+
+`Combobox` is fully accessible, and supports keyboard navigation and screen readers.
+
+### Static / synchronous use
+
+When you know all of the options data upfront, you can provide it as either:
+
+- A flat array of strings
+- An array of objects with type `Option` (see below)
+- An array of groups of Options, with headings
+
+The default `onChange` behaviour, while typing, is to filter the options list based on input value.
+
+The `onSelected` prop is called when an option is selected, passing `Option` as its parameter.
+
+```ts
+type Option = {
+  id: string;
+  label: string;
+  value?: string | number | boolean;
+};
+
+type OptionGroup = {
+  category: string;
+  options: Option[];
+};
+
+type Options = (string | Option | OptionGroup)[];
+```
+
+### Dynamic / asynchronous use
+
+`Combobox` provides a useful primitive with which to build more dynamic selector components, such as `Trade Selector` and `Adddress Lookup`.
+
+For these kinds of component, options (list) data is not known and must be fetched, typically from an API, as the user types. In this case, the `options` prop can be overloaded with a function that returns a promise.
+
+```ts
+type OptionsFetcher = (inputValue: string) => Promise<Options>;
+```
+
+In asynchronous mode, you are strongly encouraged to provide a `delay` value in milliseconds, to debounce API requests.
+
+### Overriding selection behaviour
+
+While is it often sufficient to fetch data, present it in the list and use an `onSelected` handler to do something with the chosen option, there are times when you may want to override the default behaviour. E.g. Address Lookup can return results that are not full addresses, but are groups, which need further drill down.
+
+In these cases, you can enhance the `onSelected` handler with a `callback` function. If a selected option has a callback, then it will be invoked, passing the option as params.
+
+When a selected option does not have a callback, the standard handler is invoked.
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { ComboboxStories } from "@simplybusiness/mobius";
+```
+
+## Examples
+
+### Default
+
+<Story of={ComboboxStories.Default} />
+
+{/* prettier-ignore */}
+```jsx
+import { Combobox } from "@simplybusiness/mobius";
+
+<Combobox options={["Apple", "Apricot", "etc."]} />
+```
+
+### With an options object
+
+<Story of={ComboboxStories.OptionsObject} />
+
+{/* prettier-ignore */}
+```jsx
+import { Combobox } from "@simplybusiness/mobius";
+
+<Combobox options={[
+  { id: "apple", label: "Apple" },
+  { id: "apricot", label: "Apricot" },
+  { id: "etc", label: "etc." }
+]} />
+```
+
+### With Icon
+
+<Story of={ComboboxStories.WithIcon} />
+
+{/* prettier-ignore */}
+```jsx
+import { Combobox, Icon } from "@simplybusiness/mobius";
+import { search } from "@simplybusiness/icons";
+
+<Combobox
+  options={[...OPTIONS]}
+  icon={<Icon icon={search}/>}
+/>
+```
+
+### State Selector
+
+This is a simple example of using `Combobox` to create a US State Selector, which uses a flat list of state strings as the options array.
+
+<Story of={ComboboxStories.StateSelector} />
+
+{/* prettier-ignore */}
+```jsx
+import { Combobox, Icon } from "@simplybusiness/mobius";
+import { search } from "@simplybusiness/icons";
+
+<Combobox
+  options={[...US_STATES]}
+  placeholder="Choose your state"
+  icon={<Icon icon={search}/>}
+/>
+```
+
+## Accessibility
+
+TODO: Add accessibility information
+
+## Props
+
+<ArgTypes of={Combobox} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a Combobox:
+
+```html
+<label class="mobius-label" htmlFor="{input-id}">{Label text}</label>
+```

package/src/components/Combobox/Combobox.stories.tsx

@@ -1,26 +1,71 @@
+import { search } from "@simplybusiness/icons";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Combobox, type ComboboxProps } from ".";
-import { FRUITS, FRUITS_OBJECTS } from "./fixtures";
+import { excludeControls } from "../../utils";
+import { StoryContainer } from "../../utils/StoryContainer";
+import { Icon } from "../Icon";
+import { FRUITS, FRUITS_OBJECTS, FRUITS_GROUPS, US_STATES } from "./fixtures";
 
 type StoryType = StoryObj<typeof Combobox>;
 
 const meta: Meta<typeof Combobox> = {
   title: "Forms/Combobox",
   component: Combobox,
+  argTypes: {
+    type: {
+      options: [],
+    },
+    ...excludeControls("icon"), // options
+  },
+  decorators: [
+    Story => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
 };
 
 export const Default: StoryType = {
   render: (args: ComboboxProps) => <Combobox {...args} />,
   args: {
+    label: "Fruits",
     options: FRUITS,
   },
 };
 
-export const ObjectOptions: StoryType = {
+export const OptionsObject: StoryType = {
   render: (args: ComboboxProps) => <Combobox {...args} />,
   args: {
+    label: "Fruits",
     options: FRUITS_OBJECTS,
   },
 };
 
+export const GroupedOptions: StoryType = {
+  render: (args: ComboboxProps) => <Combobox {...args} />,
+  args: {
+    options: FRUITS_GROUPS,
+  },
+};
+
+export const WithIcon: StoryType = {
+  render: (args: ComboboxProps) => <Combobox {...args} />,
+  args: {
+    label: "Fruits",
+    icon: <Icon icon={search} />,
+    options: FRUITS_OBJECTS,
+  },
+};
+
+export const StateSelector: StoryType = {
+  render: (args: ComboboxProps) => <Combobox {...args} />,
+  args: {
+    label: "US State Selector",
+    placeholder: "Choose your state",
+    icon: <Icon icon={search} />,
+    options: US_STATES,
+  },
+};
+
 export default meta;