@spaced-out/ui-design-system 0.3.24 → 0.3.25

package/.cspell/custom-words.txt

@@ -18,12 +18,14 @@ Choibalsan
 Chuuk
 circlehollow
 CODEOWNERS
+Combobox
 commitlint
 contributorsrc
 Crespo
 Cuiaba
 D'Urville
 Danmarkshavn
+darsh-mecwan-sense
 datetime
 DEFAULTTEXT
 Dili

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27
+          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.25](https://github.com/spaced-out/ui-design-system/compare/v0.3.24...v0.3.25) (2025-03-01)
+
+
+### Features
+
+* adds combobox ([#322](https://github.com/spaced-out/ui-design-system/issues/322)) ([ba788c8](https://github.com/spaced-out/ui-design-system/commit/ba788c8d9f7fe2913d07d6c24a605e87a5250bd0))
+
 ### [0.3.24](https://github.com/spaced-out/ui-design-system/compare/v0.3.23...v0.3.24) (2025-02-26)
 
 

package/lib/components/Combobox/Combobox.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Combobox = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Dropdown = require("../Dropdown");
+var _Input = require("../Input");
+var _Text = require("../Text");
+var _ComboboxModule = _interopRequireDefault(require("./Combobox.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    value,
+    onChange,
+    classNames,
+    disabled,
+    type = 'text',
+    label,
+    inputPlaceholder,
+    size = 'medium',
+    onContainerClick,
+    onInputFocus,
+    onInputBlur,
+    onInputKeyDown,
+    onInputContainerClick,
+    inputName,
+    locked,
+    error,
+    errorText,
+    helperText,
+    required,
+    iconLeftName,
+    iconLeftType,
+    iconRightName,
+    iconRightType,
+    onIconRightClick,
+    readOnly,
+    boxRef,
+    inputBoxRef,
+    minLength,
+    maxLength,
+    pattern,
+    min,
+    max,
+    menu,
+    onMenuOpen,
+    onMenuClose,
+    scrollMenuToBottom,
+    onDropdownFocus,
+    onDropdownBlur,
+    onDropdownKeyDown,
+    onDropdownContainerClick,
+    dropdownName,
+    dropdownPlaceholder,
+    dropdownBoxRef
+  } = props;
+  const inputRef = React.useRef();
+  const dropdownRef = React.useRef();
+  const {
+    input: inputValue,
+    dropdown: dropdownInputText
+  } = value;
+  const handleInputChange = (evt, isEnter) => {
+    onChange({
+      dropdown: dropdownInputText || '',
+      input: evt.target.value,
+      inputChange: {
+        evt,
+        isEnter
+      }
+    });
+  };
+  const handleDropdownChange = option => {
+    onChange({
+      dropdown: option.label || '',
+      input: inputValue || '',
+      dropdownOption: option
+    });
+  };
+
+  /* Handling locked functionality at Combobox level */
+  React.useEffect(() => {
+    if (locked) {
+      inputRef.current && (inputRef.current.disabled = true);
+      dropdownRef.current && (dropdownRef.current.disabled = true);
+    } else {
+      inputRef.current && (inputRef.current.disabled = false);
+      dropdownRef.current && (dropdownRef.current.disabled = false);
+    }
+  }, [locked]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper)
+  }, Boolean(label) && /*#__PURE__*/React.createElement("div", {
+    className: _ComboboxModule.default.info
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ComboboxModule.default.infoContent
+  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: "secondary"
+  }, label ?? ''), "\xA0", required && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: "danger"
+  }, "*"))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ComboboxModule.default.box, {
+      [_ComboboxModule.default.withError]: error ?? false
+    }, classNames?.box),
+    onClick: !(disabled || locked) ? onContainerClick : null,
+    ref: boxRef
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    ref: dropdownRef,
+    menu: menu,
+    boxRef: dropdownBoxRef,
+    placeholder: dropdownPlaceholder,
+    readOnly: readOnly,
+    classNames: {
+      wrapper: (0, _classify.default)(_ComboboxModule.default.dropdownWrapper, classNames?.dropdown?.wrapper),
+      box: (0, _classify.default)(_ComboboxModule.default.dropdownBox, {
+        [_ComboboxModule.default.disabled]: disabled ?? null,
+        [_ComboboxModule.default.locked]: locked ?? null
+      }, classNames?.dropdown?.box),
+      iconRight: _ComboboxModule.default.chevron
+    },
+    disabled: disabled,
+    size: size,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    onChange: handleDropdownChange,
+    scrollMenuToBottom: scrollMenuToBottom,
+    dropdownInputText: dropdownInputText,
+    onFocus: onDropdownFocus,
+    onBlur: onDropdownBlur,
+    onKeyDown: onDropdownKeyDown,
+    onContainerClick: onDropdownContainerClick,
+    name: dropdownName
+  }), /*#__PURE__*/React.createElement(_Input.Input, {
+    ref: inputRef,
+    boxRef: inputBoxRef,
+    name: inputName,
+    placeholder: inputPlaceholder,
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    onChange: handleInputChange,
+    onKeyDown: onInputKeyDown,
+    onContainerClick: onInputContainerClick,
+    value: inputValue,
+    type: type,
+    error: error,
+    disabled: disabled,
+    readOnly: readOnly,
+    classNames: {
+      wrapper: (0, _classify.default)(_ComboboxModule.default.inputWrapper, classNames?.input?.wrapper),
+      box: (0, _classify.default)(_ComboboxModule.default.inputBox, {
+        [_ComboboxModule.default.disabled]: disabled ?? null,
+        [_ComboboxModule.default.locked]: locked ?? null
+      }, classNames?.input?.box),
+      iconLeft: classNames?.input?.iconLeft,
+      iconRight: classNames?.input?.iconRight
+    },
+    size: size,
+    iconLeftName: iconLeftName,
+    iconLeftType: iconLeftType,
+    iconRightName: iconRightName,
+    iconRightType: iconRightType,
+    onIconRightClick: onIconRightClick,
+    minLength: minLength,
+    maxLength: maxLength,
+    pattern: pattern,
+    min: min,
+    max: max
+  })), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
+    className: _ComboboxModule.default.info
+  }, error && errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    color: "danger"
+  }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    color: disabled ? 'disabled' : 'secondary'
+  }, helperText) : helperText));
+});
+exports.Combobox = Combobox;

package/lib/components/Combobox/Combobox.js.flow

@@ -0,0 +1,287 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Dropdown} from '../Dropdown';
+import type {IconType} from '../Icon';
+import type {InputOnChangeParamsType} from '../Input';
+import {Input} from '../Input';
+import type {MenuOption, MenuProps} from '../Menu';
+import {BodySmall, FormLabelSmall} from '../Text';
+
+import css from './Combobox.module.css';
+
+
+type InputClassNames = $ReadOnly<{
+  box?: string,
+  iconLeft?: string,
+  iconRight?: string,
+  wrapper?: string,
+}>;
+
+type DropdownClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+  iconRight?: string,
+}>;
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+  input?: InputClassNames,
+  dropdown?: DropdownClassNames,
+}>;
+
+export type ComboboxProps = {
+  /* Combobox props */
+  classNames?: ClassNames,
+  disabled?: boolean,
+  type?: 'text' | 'tel',
+  label?: string | React.Node,
+  size?: 'medium' | 'small',
+  onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  locked?: boolean,
+  error?: boolean,
+  errorText?: string,
+  helperText?: string | React.Node,
+  required?: boolean,
+  readOnly?: boolean,
+  boxRef?: (?HTMLElement) => mixed,
+  value: {dropdown?: string, input?: string},
+  onChange: ({
+    input: string,
+    dropdown: string,
+    inputChange?: InputOnChangeParamsType,
+    dropdownOption?: MenuOption,
+  }) => mixed,
+
+  /* Input props */
+  inputPlaceholder?: string,
+  onInputFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onInputBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onInputKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onInputContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  inputName?: string,
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  iconRightName?: string,
+  iconRightType?: IconType,
+  onIconRightClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  inputBoxRef?: (?HTMLElement) => mixed,
+  minLength?: string,
+  maxLength?: string,
+  pattern?: string,
+  min?: string,
+  max?: string,
+
+  /* Dropdown props */
+  menu?: MenuProps,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  scrollMenuToBottom?: boolean,
+  onDropdownFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onDropdownBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onDropdownKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onDropdownContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  dropdownName?: string,
+  dropdownPlaceholder?: string,
+  dropdownBoxRef?: (?HTMLElement) => mixed,
+  ...
+};
+
+export const Combobox: React$AbstractComponent<ComboboxProps, HTMLDivElement> =
+  React.forwardRef<ComboboxProps, HTMLDivElement>(
+    (props: ComboboxProps, ref) => {
+      const {
+        value,
+        onChange,
+        classNames,
+        disabled,
+        type = 'text',
+        label,
+        inputPlaceholder,
+        size = 'medium',
+        onContainerClick,
+        onInputFocus,
+        onInputBlur,
+        onInputKeyDown,
+        onInputContainerClick,
+        inputName,
+        locked,
+        error,
+        errorText,
+        helperText,
+        required,
+        iconLeftName,
+        iconLeftType,
+        iconRightName,
+        iconRightType,
+        onIconRightClick,
+        readOnly,
+        boxRef,
+        inputBoxRef,
+        minLength,
+        maxLength,
+        pattern,
+        min,
+        max,
+        menu,
+        onMenuOpen,
+        onMenuClose,
+        scrollMenuToBottom,
+        onDropdownFocus,
+        onDropdownBlur,
+        onDropdownKeyDown,
+        onDropdownContainerClick,
+        dropdownName,
+        dropdownPlaceholder,
+        dropdownBoxRef,
+      } = props;
+
+      const inputRef = React.useRef();
+      const dropdownRef = React.useRef();
+
+      const {input: inputValue, dropdown: dropdownInputText} = value;
+
+      const handleInputChange = (evt, isEnter) => {
+        onChange({
+          dropdown: dropdownInputText || '',
+          input: evt.target.value,
+          inputChange: {evt, isEnter},
+        });
+      };
+
+      const handleDropdownChange = (option) => {
+        onChange({
+          dropdown: option.label || '',
+          input: inputValue || '',
+          dropdownOption: option,
+        });
+      };
+
+      /* Handling locked functionality at Combobox level */
+      React.useEffect(() => {
+        if (locked) {
+          inputRef.current && (inputRef.current.disabled = true);
+          dropdownRef.current && (dropdownRef.current.disabled = true);
+        } else {
+          inputRef.current && (inputRef.current.disabled = false);
+          dropdownRef.current && (dropdownRef.current.disabled = false);
+        }
+      }, [locked]);
+
+      return (
+        <div ref={ref} className={classify(css.wrapper, classNames?.wrapper)}>
+          {Boolean(label) && (
+            <div className={css.info}>
+              <div className={css.infoContent}>
+                <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
+                &nbsp;
+                {required && <FormLabelSmall color="danger">*</FormLabelSmall>}
+              </div>
+            </div>
+          )}
+          <div
+            className={classify(
+              css.box,
+              {
+                [css.withError]: error ?? false,
+              },
+              classNames?.box,
+            )}
+            onClick={!(disabled || locked) ? onContainerClick : null}
+            ref={boxRef}
+          >
+            <Dropdown
+              ref={dropdownRef}
+              menu={menu}
+              boxRef={dropdownBoxRef}
+              placeholder={dropdownPlaceholder}
+              readOnly={readOnly}
+              classNames={{
+                wrapper: classify(
+                  css.dropdownWrapper,
+                  classNames?.dropdown?.wrapper,
+                ),
+                box: classify(
+                  css.dropdownBox,
+                  {
+                    [css.disabled]: disabled ?? null,
+                    [css.locked]: locked ?? null,
+                  },
+                  classNames?.dropdown?.box,
+                ),
+                iconRight: css.chevron,
+              }}
+              disabled={disabled}
+              size={size}
+              onMenuOpen={onMenuOpen}
+              onMenuClose={onMenuClose}
+              onChange={handleDropdownChange}
+              scrollMenuToBottom={scrollMenuToBottom}
+              dropdownInputText={dropdownInputText}
+              onFocus={onDropdownFocus}
+              onBlur={onDropdownBlur}
+              onKeyDown={onDropdownKeyDown}
+              onContainerClick={onDropdownContainerClick}
+              name={dropdownName}
+            />
+            <Input
+              ref={inputRef}
+              boxRef={inputBoxRef}
+              name={inputName}
+              placeholder={inputPlaceholder}
+              onFocus={onInputFocus}
+              onBlur={onInputBlur}
+              onChange={handleInputChange}
+              onKeyDown={onInputKeyDown}
+              onContainerClick={onInputContainerClick}
+              value={inputValue}
+              type={type}
+              error={error}
+              disabled={disabled}
+              readOnly={readOnly}
+              classNames={{
+                wrapper: classify(css.inputWrapper, classNames?.input?.wrapper),
+                box: classify(
+                  css.inputBox,
+                  {
+                    [css.disabled]: disabled ?? null,
+                    [css.locked]: locked ?? null,
+                  },
+                  classNames?.input?.box,
+                ),
+                iconLeft: classNames?.input?.iconLeft,
+                iconRight: classNames?.input?.iconRight,
+              }}
+              size={size}
+              iconLeftName={iconLeftName}
+              iconLeftType={iconLeftType}
+              iconRightName={iconRightName}
+              iconRightType={iconRightType}
+              onIconRightClick={onIconRightClick}
+              minLength={minLength}
+              maxLength={maxLength}
+              pattern={pattern}
+              min={min}
+              max={max}
+            />
+          </div>
+          {(Boolean(helperText) || error) && (
+            <div className={css.info}>
+              {error && errorText ? (
+                <BodySmall color="danger">{errorText}</BodySmall>
+              ) : typeof helperText === 'string' ? (
+                <BodySmall color={disabled ? 'disabled' : 'secondary'}>
+                  {helperText}
+                </BodySmall>
+              ) : (
+                helperText
+              )}
+            </div>
+          )}
+        </div>
+      );
+    },
+  );

package/lib/components/Combobox/Combobox.module.css

@@ -0,0 +1,100 @@
+@value (
+  colorBackgroundSecondary,
+  colorTextPrimary,
+  colorFillNone
+) from '../../styles/variables/_color.css';
+@value (
+  sizeFluid,
+  size42
+) from '../../styles/variables/_size.css';
+@value (
+  spaceNone,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+@value (
+  borderRadiusNone,
+  borderWidthPrimary
+) from '../../styles/variables/_border.css';
+@value (
+  elevationCard
+) from '../../styles/variables/_elevation.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: sizeFluid;
+  gap: spaceXXSmall;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.infoContent {
+  display: flex;
+}
+
+.box {
+  display: flex;
+  height: size42;
+}
+
+.box.withError .inputBox {
+  /* Enable border for error state */
+  border-left-width: borderWidthPrimary;
+}
+
+.locked {
+  border-style: dashed;
+}
+
+.dropdownWrapper {
+  flex: 1;
+}
+
+.dropdownBox {
+  /* Alter dropdown box default values */
+  background-color: colorBackgroundSecondary;
+  border-top-right-radius: borderRadiusNone;
+  border-bottom-right-radius: borderRadiusNone;
+  border-right-color: colorFillNone;
+  z-index: auto;
+}
+
+.dropdownWrapper:focus-within,
+.dropdownBox:focus-within,
+.dropdownBox:not(.disabled):not(.locked):hover {
+  /* brings up the (default dropdown) box shadow on hover */
+  z-index: elevationCard;
+}
+
+.inputWrapper {
+  flex: 2;
+  /* For error state input's default wrapper adds gap between box and zero height error text */
+  gap: spaceNone;
+}
+
+.inputBox {
+  /* Alter input box default values */
+  border-top-left-radius: borderRadiusNone;
+  border-bottom-left-radius: borderRadiusNone;
+  border-left-color: colorFillNone;
+  z-index: auto;
+}
+
+.inputWrapper:focus-within,
+.inputBox:focus-within,
+.inputBox:not(.disabled):not(.locked):hover {
+  /* brings up the (default input) box shadow on hover */
+  z-index: elevationCard;
+}
+
+.dropdownBox:not(.disabled) .chevron {
+  color: colorTextPrimary;
+}
+
+.dropdownBox.locked,
+.inputBox.locked {
+  pointer-events: none;
+}

package/lib/components/Combobox/helper.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.phoneNumberOptions = exports.formatPhoneNumber = exports.defaultOptions = exports.currencyOptions = void 0;
+
+const defaultOptions = [{
+  key: '1',
+  label: 'Option one',
+  iconLeft: 'coffee'
+}, {
+  key: '2',
+  label: 'Option two',
+  iconLeft: 'user'
+}, {
+  key: '4',
+  label: 'Option three',
+  iconLeft: 'face-party'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true,
+  iconLeft: 'flag'
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true,
+  iconLeft: 'camera'
+}, {
+  key: '7',
+  label: 'Option seven',
+  iconLeft: 'coffee'
+}, {
+  key: '8',
+  label: 'Option eight',
+  iconLeft: 'user'
+}, {
+  key: '9',
+  label: 'Option nine',
+  iconLeft: 'face-party'
+}];
+exports.defaultOptions = defaultOptions;
+const currencyOptions = [{
+  key: 'USD',
+  label: 'USD',
+  iconLeft: 'dollar-sign'
+}, {
+  key: 'JPY',
+  label: 'JPY',
+  iconLeft: 'yen-sign'
+}, {
+  key: 'KRW',
+  label: 'KRW',
+  iconLeft: 'won-sign'
+}, {
+  key: 'KRW',
+  label: 'KRW',
+  iconLeft: 'won-sign'
+}, {
+  key: 'GBP',
+  label: 'GBP',
+  iconLeft: 'sterling-sign'
+}, {
+  key: 'INR',
+  label: 'INR',
+  iconLeft: 'indian-rupee-sign'
+}, {
+  key: 'EUR',
+  label: 'EUR',
+  iconLeft: 'euro-sign'
+}, {
+  key: 'CHF',
+  label: 'CHF',
+  iconLeft: 'franc-sign'
+}];
+exports.currencyOptions = currencyOptions;
+const phoneNumberOptions = [{
+  key: 'US',
+  label: '+1 (United States)'
+}, {
+  key: 'GB',
+  label: '+44 (United Kingdom)'
+}, {
+  key: 'JP',
+  label: '+81 (Japan)'
+}, {
+  key: 'KR',
+  label: '+82 (South Korea)'
+}, {
+  key: 'IN',
+  label: '+91 (India)'
+}, {
+  key: 'FR',
+  label: '+33 (France)'
+}, {
+  key: 'DE',
+  label: '+49 (Germany)'
+}];
+
+/**
+ * Format phone numbers according to country-specific patterns
+ * @param {string} phoneNumber - The phone number to format
+ * @param {string} locale - The locale/country code (e.g., 'US', 'GB', 'JP')
+ * @returns {string} - Formatted phone number
+ */
+exports.phoneNumberOptions = phoneNumberOptions;
+const formatPhoneNumber = function (phoneNumber) {
+  let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'US';
+  // Remove all non-numeric characters
+  const cleaned = phoneNumber.replace(/\D/g, '');
+
+  // Format patterns for different locales
+  const patterns = {
+    // North America
+    US: {
+      // United States
+      pattern: /(\d{3})(\d{3})(\d{4})/,
+      format: '($1) $2-$3',
+      countryCode: '+1'
+    },
+    CA: {
+      // Canada
+      pattern: /(\d{3})(\d{3})(\d{4})/,
+      format: '($1) $2-$3',
+      countryCode: '+1'
+    },
+    // Europe
+    GB: {
+      // United Kingdom
+      pattern: /(\d{2})(\d{4})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+44'
+    },
+    DE: {
+      // Germany
+      pattern: /(\d{3})(\d{4})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+49'
+    },
+    FR: {
+      // France
+      pattern: /(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/,
+      format: '$1 $2 $3 $4 $5',
+      countryCode: '+33'
+    },
+    // Asia
+    JP: {
+      // Japan
+      pattern: /(\d{2})(\d{4})(\d{4})/,
+      format: '$1-$2-$3',
+      countryCode: '+81'
+    },
+    KR: {
+      // South Korea
+      pattern: /(\d{3})(\d{4})(\d{4})/,
+      format: '$1-$2-$3',
+      countryCode: '+82'
+    },
+    CN: {
+      // China
+      pattern: /(\d{3})(\d{4})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+86'
+    },
+    IN: {
+      // India
+      pattern: /(\d{3})(\d{3})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+91'
+    }
+  };
+
+  // Get the formatting rule for the locale
+  const rule = patterns[locale] || patterns.US; // Default to US formatting
+
+  // If number starts with country code, remove it for formatting
+  let numberToFormat = cleaned;
+  const countryCode = rule.countryCode.replace('+', '');
+  if (cleaned.startsWith(countryCode)) {
+    numberToFormat = cleaned.slice(countryCode.length);
+  }
+
+  // Format the number according to the pattern
+  const formatted = numberToFormat.replace(rule.pattern, rule.format);
+  return formatted;
+};
+exports.formatPhoneNumber = formatPhoneNumber;

package/lib/components/Combobox/helper.js.flow

@@ -0,0 +1,204 @@
+// @flow strict
+import type {MenuOption} from '../Menu';
+
+
+export const defaultOptions: MenuOption[] = [
+  {
+    key: '1',
+    label: 'Option one',
+    iconLeft: 'coffee',
+  },
+  {key: '2', label: 'Option two', iconLeft: 'user'},
+  {
+    key: '4',
+    label: 'Option three',
+    iconLeft: 'face-party',
+  },
+  {
+    key: '5',
+    label: 'Option five(disabled)',
+    disabled: true,
+    iconLeft: 'flag',
+  },
+  {
+    key: '6',
+    label: 'Option six(disabled) very long option that would truncate',
+    disabled: true,
+    iconLeft: 'camera',
+  },
+  {
+    key: '7',
+    label: 'Option seven',
+    iconLeft: 'coffee',
+  },
+  {key: '8', label: 'Option eight', iconLeft: 'user'},
+  {
+    key: '9',
+    label: 'Option nine',
+    iconLeft: 'face-party',
+  },
+];
+
+export const currencyOptions: MenuOption[] = [
+  {
+    key: 'USD',
+    label: 'USD',
+    iconLeft: 'dollar-sign',
+  },
+  {
+    key: 'JPY',
+    label: 'JPY',
+    iconLeft: 'yen-sign',
+  },
+  {
+    key: 'KRW',
+    label: 'KRW',
+    iconLeft: 'won-sign',
+  },
+  {
+    key: 'KRW',
+    label: 'KRW',
+    iconLeft: 'won-sign',
+  },
+  {
+    key: 'GBP',
+    label: 'GBP',
+    iconLeft: 'sterling-sign',
+  },
+  {
+    key: 'INR',
+    label: 'INR',
+    iconLeft: 'indian-rupee-sign',
+  },
+  {
+    key: 'EUR',
+    label: 'EUR',
+    iconLeft: 'euro-sign',
+  },
+  {
+    key: 'CHF',
+    label: 'CHF',
+    iconLeft: 'franc-sign',
+  },
+];
+
+export const phoneNumberOptions: MenuOption[] = [
+  {
+    key: 'US',
+    label: '+1 (United States)',
+  },
+  {
+    key: 'GB',
+    label: '+44 (United Kingdom)',
+  },
+  {
+    key: 'JP',
+    label: '+81 (Japan)',
+  },
+  {
+    key: 'KR',
+    label: '+82 (South Korea)',
+  },
+  {
+    key: 'IN',
+    label: '+91 (India)',
+  },
+  {
+    key: 'FR',
+    label: '+33 (France)',
+  },
+  {
+    key: 'DE',
+    label: '+49 (Germany)',
+  },
+];
+
+/**
+ * Format phone numbers according to country-specific patterns
+ * @param {string} phoneNumber - The phone number to format
+ * @param {string} locale - The locale/country code (e.g., 'US', 'GB', 'JP')
+ * @returns {string} - Formatted phone number
+ */
+export const formatPhoneNumber = (
+  phoneNumber: string,
+  locale: string = 'US',
+): string => {
+  // Remove all non-numeric characters
+  const cleaned = phoneNumber.replace(/\D/g, '');
+
+  // Format patterns for different locales
+  const patterns = {
+    // North America
+    US: {
+      // United States
+      pattern: /(\d{3})(\d{3})(\d{4})/,
+      format: '($1) $2-$3',
+      countryCode: '+1',
+    },
+    CA: {
+      // Canada
+      pattern: /(\d{3})(\d{3})(\d{4})/,
+      format: '($1) $2-$3',
+      countryCode: '+1',
+    },
+    // Europe
+    GB: {
+      // United Kingdom
+      pattern: /(\d{2})(\d{4})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+44',
+    },
+    DE: {
+      // Germany
+      pattern: /(\d{3})(\d{4})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+49',
+    },
+    FR: {
+      // France
+      pattern: /(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/,
+      format: '$1 $2 $3 $4 $5',
+      countryCode: '+33',
+    },
+    // Asia
+    JP: {
+      // Japan
+      pattern: /(\d{2})(\d{4})(\d{4})/,
+      format: '$1-$2-$3',
+      countryCode: '+81',
+    },
+    KR: {
+      // South Korea
+      pattern: /(\d{3})(\d{4})(\d{4})/,
+      format: '$1-$2-$3',
+      countryCode: '+82',
+    },
+    CN: {
+      // China
+      pattern: /(\d{3})(\d{4})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+86',
+    },
+    IN: {
+      // India
+      pattern: /(\d{3})(\d{3})(\d{4})/,
+      format: '$1 $2 $3',
+      countryCode: '+91',
+    },
+  };
+
+  // Get the formatting rule for the locale
+  const rule = patterns[locale] || patterns.US; // Default to US formatting
+
+  // If number starts with country code, remove it for formatting
+  let numberToFormat = cleaned;
+  const countryCode = rule.countryCode.replace('+', '');
+  if (cleaned.startsWith(countryCode)) {
+    numberToFormat = cleaned.slice(countryCode.length);
+  }
+
+  // Format the number according to the pattern
+  const formatted = numberToFormat.replace(rule.pattern, rule.format);
+
+  return formatted;
+};

package/lib/components/Combobox/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Combobox = require("./Combobox");
+Object.keys(_Combobox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Combobox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Combobox[key];
+    }
+  });
+});

package/lib/components/Combobox/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Combobox';

package/lib/components/Dropdown/Dropdown.js

@@ -79,7 +79,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       placeholder: placeholder,
       value: dropdownInputText,
       classNames: {
-        box: (0, _classify.classify)(_DropdownModule.default.inputBox, classNames?.box)
+        box: (0, _classify.classify)(_DropdownModule.default.inputBox, classNames?.box),
+        iconRight: classNames?.iconRight
       },
       iconRightName: isOpen ? 'angle-up' : 'angle-down',
       readOnly: true,

package/lib/components/Dropdown/Dropdown.js.flow

@@ -25,7 +25,11 @@ import {Menu} from '../Menu';
 import css from './Dropdown.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  box?: string,
+  iconRight?: string,
+}>;
 
 export type DropdownProps = {
   ...InputProps,
@@ -97,7 +101,10 @@ export const Dropdown: React$AbstractComponent<
               size={size}
               placeholder={placeholder}
               value={dropdownInputText}
-              classNames={{box: classify(css.inputBox, classNames?.box)}}
+              classNames={{
+                box: classify(css.inputBox, classNames?.box),
+                iconRight: classNames?.iconRight,
+              }}
               iconRightName={isOpen ? 'angle-up' : 'angle-down'}
               readOnly
               onContainerClick={(e) => {

package/lib/components/Input/Input.js.flow

@@ -36,6 +36,11 @@ export const INPUT_TYPES = Object.freeze({
 
 export type InputType = $Values<typeof INPUT_TYPES>;
 
+export type InputOnChangeParamsType = {
+  evt: SyntheticInputEvent<HTMLInputElement>,
+  isEnter?: boolean,
+};
+
 export type InputProps = {
   value?: string,
   onChange?: (

package/lib/components/index.js

@@ -168,6 +168,17 @@ Object.keys(_CollapsibleCard).forEach(function (key) {
     }
   });
 });
+var _Combobox = require("./Combobox");
+Object.keys(_Combobox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Combobox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Combobox[key];
+    }
+  });
+});
 var _ConditionalWrapper = require("./ConditionalWrapper");
 Object.keys(_ConditionalWrapper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -15,6 +15,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './CircularLoader';
 export * from './CollapsibleCard';
+export * from './Combobox';
 export * from './ConditionalWrapper';
 export * from './DateRangePicker';
 export * from './Dialog';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {