@chayns-components/core 5.0.0-beta.4 → 5.0.0-beta.400

package/lib/components/combobox/ComboBox.styles.d.ts

@@ -0,0 +1,289 @@
+import type { CSSProperties } from 'react';
+import { ComboBoxDirection } from '../../types/comboBox';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+import type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';
+export declare const StyledComboBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledComboBoxHeaderProps = WithTheme<{
+    isMobile: boolean;
+    isOpen: boolean;
+    minWidth: number;
+    direction: ComboBoxDirection;
+    isDisabled?: boolean;
+}>;
+export declare const StyledComboBoxHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxHeaderProps>>;
+export declare const StyledComboBoxPlaceholder: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;
+type StyledComboBoxPlaceholderImageProps = WithTheme<Pick<ComboBoxItemProps, 'shouldShowRoundImage'>>;
+export declare const StyledComboBoxPlaceholderImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxPlaceholderImageProps>>;
+export declare const StyledComboBoxIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledComboBoxBodyProps = WithTheme<{
+    height: number;
+    minWidth: number;
+    maxHeight: CSSProperties['maxHeight'];
+    direction: ComboBoxDirection;
+}>;
+export declare const StyledMotionComboBoxBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledComboBoxBodyProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/components/combobox/ComboBox.styles.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionComboBoxBody = exports.StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholder = exports.StyledComboBoxIconWrapper = exports.StyledComboBoxHeader = exports.StyledComboBox = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _comboBox = require("../../types/comboBox");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledComboBox = exports.StyledComboBox = _styledComponents.default.div`
+    user-select: none;
+    width: fit-content;
+`;
+const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.default.div`
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    padding: 4px 10px;
+    cursor: ${_ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return !isDisabled ? 'pointer' : 'not-allowed';
+}};
+    background: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['001'];
+}};
+    opacity: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled ? 0.5 : 1;
+}};
+    min-width: ${_ref4 => {
+  let {
+    minWidth
+  } = _ref4;
+  return minWidth;
+}}px;
+    max-width: ${_ref5 => {
+  let {
+    minWidth
+  } = _ref5;
+  return minWidth;
+}}px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref6 => {
+  let {
+    isOpen,
+    direction
+  } = _ref6;
+  if (isOpen) {
+    return direction === _comboBox.ComboBoxDirection.BOTTOM ? (0, _styledComponents.css)`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : (0, _styledComponents.css)`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return (0, _styledComponents.css)`
+            border-radius: 3px;
+        `;
+}}
+
+    ${_ref7 => {
+  let {
+    isMobile,
+    isDisabled,
+    theme
+  } = _ref7;
+  return !isMobile && !isDisabled && (0, _styledComponents.css)`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledComponents.default.div`
+    align-items: center;
+    color: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+`;
+const StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholderImage = _styledComponents.default.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref10 => {
+  let {
+    shouldShowRoundImage
+  } = _ref10;
+  return shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `;
+}}
+`;
+const StyledComboBoxIconWrapper = exports.StyledComboBoxIconWrapper = _styledComponents.default.div`
+    margin-left: 5px;
+`;
+const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme['101'];
+}};
+    display: flex;
+    position: absolute;
+    z-index: 4;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    cursor: pointer;
+    min-width: ${_ref12 => {
+  let {
+    minWidth
+  } = _ref12;
+  return minWidth;
+}}px;
+    max-width: ${_ref13 => {
+  let {
+    minWidth
+  } = _ref13;
+  return minWidth;
+}}px;
+    max-height: ${_ref14 => {
+  let {
+    maxHeight
+  } = _ref14;
+  return maxHeight;
+}};
+    overflow-y: ${_ref15 => {
+  let {
+    height
+  } = _ref15;
+  return height <= 300 ? 'hidden' : 'auto';
+}};
+
+    ${_ref16 => {
+  let {
+    direction,
+    theme
+  } = _ref16;
+  if (direction === _comboBox.ComboBoxDirection.BOTTOM) {
+    return (0, _styledComponents.css)`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
+        `;
+}}
+
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: rgba(160, 160, 160, 1);
+    }
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

package/lib/components/combobox/ComboBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","isDisabled","_ref2","theme","_ref3","_ref4","minWidth","_ref5","_ref6","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref7","isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref11","_ref12","_ref13","_ref14","maxHeight","_ref15","height","_ref16"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isMobile: boolean;\n    isOpen: boolean;\n    minWidth: number;\n    direction: ComboBoxDirection;\n    isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'not-allowed')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ isOpen, direction }) => {\n        if (isOpen) {\n            return direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ isMobile, isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !isMobile &&\n        !isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n    minWidth: number;\n    maxHeight: CSSProperties['maxHeight'];\n    direction: ComboBoxDirection;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n\n    ${({ direction, theme }) => {\n        if (direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n        `;\n    }}\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":"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"}

package/lib/components/combobox/combobox-item/ComboBoxItem.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import type { ComboBoxProps, IComboBoxItem } from '../ComboBox';
+export type ComboBoxItemProps = {
+    imageUrl: IComboBoxItem['imageUrl'];
+    isSelected: boolean;
+    onSelect: (itemToSelect: IComboBoxItem) => void;
+    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
+    text: IComboBoxItem['text'];
+    value: IComboBoxItem['value'];
+};
+declare const ComboBoxItem: FC<ComboBoxItemProps>;
+export default ComboBoxItem;

package/lib/components/combobox/combobox-item/ComboBoxItem.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ComboBoxItem = require("./ComboBoxItem.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ComboBoxItem = _ref => {
+  let {
+    imageUrl,
+    isSelected,
+    onSelect,
+    shouldShowRoundImage,
+    text,
+    value
+  } = _ref;
+  const handleItemClick = (0, _react.useCallback)(() => {
+    onSelect({
+      text,
+      value
+    });
+  }, [onSelect, text, value]);
+  const {
+    isMobile
+  } = chayns.env;
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItem, {
+    onClick: handleItemClick,
+    isMobile: isMobile,
+    isSelected: isSelected
+  }, imageUrl && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemImage, {
+    src: imageUrl,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), text), [handleItemClick, imageUrl, isMobile, isSelected, shouldShowRoundImage, text]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+var _default = exports.default = ComboBoxItem;
+//# sourceMappingURL=ComboBoxItem.js.map

package/lib/components/combobox/combobox-item/ComboBoxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_ComboBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBoxItem","_ref","imageUrl","isSelected","onSelect","shouldShowRoundImage","text","value","handleItemClick","useCallback","isMobile","chayns","env","useMemo","createElement","StyledComboBoxItem","onClick","StyledComboBoxItemImage","src","displayName","_default","exports"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    imageUrl: IComboBoxItem['imageUrl'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    imageUrl,\n    isSelected,\n    onSelect,\n    shouldShowRoundImage,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        onSelect({ text, value });\n    }, [onSelect, text, value]);\n\n    const { isMobile } = chayns.env;\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                onClick={handleItemClick}\n                isMobile={isMobile}\n                isSelected={isSelected}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {text}\n            </StyledComboBoxItem>\n        ),\n        [handleItemClick, imageUrl, isMobile, isSelected, shouldShowRoundImage, text],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAAoF,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAWpF,MAAMY,YAAmC,GAAGC,IAAA,IAOtC;EAAA,IAPuC;IACzCC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,oBAAoB;IACpBC,IAAI;IACJC;EACJ,CAAC,GAAAN,IAAA;EACG,MAAMO,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtCL,QAAQ,CAAC;MAAEE,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACH,QAAQ,EAAEE,IAAI,EAAEC,KAAK,CAAC,CAAC;EAE3B,MAAM;IAAEG;EAAS,CAAC,GAAGC,MAAM,CAACC,GAAG;EAE/B,OAAO,IAAAC,cAAO,EACV,mBACItC,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACpC,aAAA,CAAAqC,kBAAkB;IACfC,OAAO,EAAER,eAAgB;IACzBE,QAAQ,EAAEA,QAAS;IACnBP,UAAU,EAAEA;EAAW,GAEtBD,QAAQ,iBACL3B,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACpC,aAAA,CAAAuC,uBAAuB;IACpBC,GAAG,EAAEhB,QAAS;IACdG,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAC,IACe,CACvB,EACD,CAACE,eAAe,EAAEN,QAAQ,EAAEQ,QAAQ,EAAEP,UAAU,EAAEE,oBAAoB,EAAEC,IAAI,CAChF,CAAC;AACL,CAAC;AAEDN,YAAY,CAACmB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAE3Be,YAAY"}

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+import type { ComboBoxItemProps } from './ComboBoxItem';
+type StyledComboBoxItemProps = WithTheme<{
+    isMobile: boolean;
+    isSelected: boolean;
+}>;
+export declare const StyledComboBoxItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemProps>>;
+type StyledComboBoxItemImageProps = WithTheme<Pick<ComboBoxItemProps, 'shouldShowRoundImage'>>;
+export declare const StyledComboBoxItemImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxItemImageProps>>;
+export {};

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComboBoxItemImage = exports.StyledComboBoxItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme,
+    isSelected
+  } = _ref;
+  return isSelected && theme['secondary-103'];
+}};
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+    padding: 4px 10px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref3 => {
+  let {
+    isMobile,
+    theme
+  } = _ref3;
+  return !isMobile && (0, _styledComponents.css)`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+const StyledComboBoxItemImage = exports.StyledComboBoxItemImage = _styledComponents.default.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref5 => {
+  let {
+    shouldShowRoundImage
+  } = _ref5;
+  return shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `;
+}}
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map